/* =====================================================================
   CrochetOasis contact page
   Scoped to .co-contact-page so nothing here reaches the rest of the site.
   ===================================================================== */

/* ---------- hero ---------- */
.co-contact-hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(2.5rem,4.6vw,4.25rem) clamp(2.75rem,5vw,4.75rem);
  background-color:var(--co-paper);
  background-image:var(--co-tex-yarn);
  background-size:24px 16px;
  border-bottom:1px solid var(--co-line);
}
.co-contact-hero__spray{
  position:absolute;
  right:clamp(-4rem,-6vw,-1rem);
  bottom:-3.25rem;
  width:clamp(170px,20vw,300px);
  height:auto;
  color:var(--co-rose);
  opacity:.16;
  pointer-events:none;
}
.co-contact-hero .co-wrap{position:relative;z-index:1}
.co-contact-hero .co-crumbs{margin-bottom:clamp(var(--co-s6),3vw,var(--co-s8))}
.co-contact-hero__grid{
  display:grid;
  gap:clamp(var(--co-s6),3vw,var(--co-s9));
  align-items:center;
  grid-template-columns:minmax(0,1fr);
}
.co-contact-hero__copy h1{
  margin:var(--co-s2) 0 var(--co-s4);
  max-width:16ch;
  font-size:clamp(2.35rem,1.6rem + 3vw,3.6rem);
  line-height:1.04;
  letter-spacing:-.025em;
}
.co-contact-hero__copy .co-lead{max-width:50ch;margin:0}
.co-contact-hero__note{
  display:flex;
  align-items:center;
  gap:var(--co-s3);
  margin:var(--co-s6) 0 0;
  max-width:52ch;
  color:var(--co-ink-3);
  font-size:var(--co-fs-xs);
  line-height:1.55;
}
.co-contact-hero__note-icon{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--co-sand);
  color:var(--co-rose);
}
.co-contact-hero__media{margin:0}
.co-contact-hero__media img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  object-fit:cover;
  border:1px solid var(--co-line);
  border-radius:var(--co-r-md);
  box-shadow:var(--co-e3);
}
@media (min-width:900px){
  .co-contact-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .co-contact-hero__media img{aspect-ratio:1/1}
}

/* ---------- two-column body ---------- */
.co-contact-main{padding-block:clamp(2.5rem,5vw,4.5rem)}
.co-contact-layout{
  display:grid;
  gap:clamp(var(--co-s5),2.4vw,var(--co-s7));
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .co-contact-layout{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
}

/* ---------- form panel ---------- */
.co-contact-panel{
  position:relative;
  overflow:hidden;
  padding:clamp(1.35rem,3vw,2.6rem);
  background:var(--co-surface);
  border:1px solid var(--co-line);
  border-radius:var(--co-r-md);
  box-shadow:var(--co-e2);
}
.co-contact-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--co-rose),color-mix(in srgb,var(--co-rose) 35%,var(--co-sand)));
}
.co-contact-panel h2{margin:var(--co-s2) 0 var(--co-s3);font-size:var(--co-fs-3xl);line-height:1.12}
.co-contact-panel__intro{max-width:60ch;margin:0 0 var(--co-s6);color:var(--co-ink-2);font-size:var(--co-fs-sm);line-height:1.65}

/* ---------- fields ---------- */
.co-contact-page{--co-contact-border:#9A8871}
.co-contact-form .wpcf7,
.co-contact-form .wpcf7-form{max-width:none}
.co-contact-form .wpcf7-form-control-wrap{display:block}
.co-contact-form .co-contact__fields{margin:0}
.co-contact-form .co-contact__row{
  display:grid;
  gap:0 var(--co-s4);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:620px){
  .co-contact-form .co-contact__row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.co-contact-form .co-field{display:grid;gap:var(--co-s2);min-width:0;margin:0 0 var(--co-s5)}
.co-contact-form .co-field__label{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.3rem;
  color:var(--co-ink);
  font-size:var(--co-fs-sm);
  font-weight:700;
  line-height:1.35;
}
.co-contact-form .co-field__req{color:var(--co-rose);font-weight:700}
.co-contact-form .co-field__opt{color:var(--co-ink-3);font-size:var(--co-fs-2xs);font-weight:400}
.co-contact-form .co-input,
.co-contact-form .co-select,
.co-contact-form .co-textarea{
  width:100%;
  min-height:48px;
  padding:.7rem .9rem;
  border:1px solid var(--co-contact-border);
  border-radius:var(--co-r-sm);
  background:var(--co-surface);
  color:var(--co-ink);
  font-family:var(--co-font-body);
  font-size:var(--co-fs-sm);
  line-height:1.45;
  transition:border-color var(--co-t-fast) var(--co-ease),background-color var(--co-t-fast) var(--co-ease);
}
.co-contact-form .co-input:hover,
.co-contact-form .co-select:hover,
.co-contact-form .co-textarea:hover{border-color:var(--co-ink-3)}
.co-contact-form .co-input:focus,
.co-contact-form .co-select:focus,
.co-contact-form .co-textarea:focus{border-color:var(--co-rose);background:var(--co-surface)}
.co-contact-form .co-input::placeholder,
.co-contact-form .co-textarea::placeholder{color:var(--co-ink-3);opacity:1}
.co-contact-form .co-textarea{min-height:170px;resize:vertical}
.co-contact-form .co-select{
  appearance:none;
  padding-right:2.75rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%2357514A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:14px 9px;
  cursor:pointer;
}
.co-contact-form .wpcf7-not-valid{
  border-color:var(--co-rose) !important;
  background-color:#FDF7F7 !important;
}
.co-contact-form .wpcf7-not-valid-tip{
  display:block;
  margin-top:var(--co-s1);
  color:#8A2338;
  font-size:var(--co-fs-2xs);
  font-weight:700;
  line-height:1.45;
}
.co-contact-form .co-contact__hp{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}
.co-contact-form .wpcf7-form-control-wrap[data-name="co-website"]{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* ---------- actions + privacy note ---------- */
.co-contact-form .co-contact__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--co-s3);
  margin-top:var(--co-s6);
}
.co-contact-form .co-contact__submit{
  width:100%;
  min-height:52px;
  padding-inline:var(--co-s6);
  border-color:var(--co-rose);
  background:var(--co-rose);
  font-size:var(--co-fs-sm);
  letter-spacing:.01em;
}
.co-contact-form .co-contact__submit:hover{background:var(--co-hm-deep, #7d2a3b);border-color:var(--co-hm-deep, #7d2a3b);color:#fff}
@media (min-width:559px){
  .co-contact-form .co-contact__submit{width:auto;min-width:15rem}
}
.co-contact-form .co-contact__submit.is-sending{opacity:.88;cursor:progress}
.co-contact-form .co-contact__submit.is-sending::after{display:none}
.co-contact-form .co-contact__submit.is-sending::before{
  content:"";
  flex:none;
  width:15px;
  height:15px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:co-contact-spin .7s linear infinite;
}
@keyframes co-contact-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .co-contact-form .co-contact__submit.is-sending::before{animation-duration:2s}
}
.co-contact-form .co-contact__privacy{
  max-width:62ch;
  margin:var(--co-s4) 0 0;
  color:var(--co-ink-3);
  font-size:var(--co-fs-2xs);
  line-height:1.6;
}
.co-contact-form .co-contact__privacy a{color:var(--co-rose);text-underline-offset:.16em}
.co-contact-form .co-contact__privacy a:hover{color:var(--co-ink)}

/* ---------- response states ---------- */
.co-contact-form .wpcf7-response-output{
  position:relative;
  margin:var(--co-s5) 0 0;
  padding:1rem 1.15rem 1rem 3.15rem;
  border:1px solid var(--co-line-strong);
  border-radius:var(--co-r-sm);
  background:var(--co-sand);
  color:var(--co-ink-2);
  font-size:var(--co-fs-sm);
  line-height:1.6;
}
.co-contact-form .wpcf7-response-output:empty{display:none}
.co-contact-form .wpcf7-response-output::before{
  content:"!";
  position:absolute;
  left:1.05rem;
  top:1rem;
  display:grid;
  place-items:center;
  width:1.4rem;
  height:1.4rem;
  border-radius:50%;
  background:var(--co-rose);
  color:#fff;
  font-family:var(--co-font-body);
  font-size:.8rem;
  font-weight:700;
  line-height:1;
}
.co-contact-form .wpcf7-form.sent .wpcf7-response-output{
  padding:1.45rem 1.5rem 1.45rem 3.65rem;
  border-color:#C3D4C0;
  background:#F3F7F1;
  color:#2F4935;
  font-family:var(--co-font-display);
  font-size:var(--co-fs-lg);
  line-height:1.45;
}
.co-contact-form .co-contact__response--stored{
  padding:1.45rem 1.5rem 1.45rem 3.65rem;
  border-color:#C3D4C0;
  background:#F3F7F1;
  color:#2F4935;
  font-family:var(--co-font-display);
  font-size:var(--co-fs-lg);
  line-height:1.45;
}
.co-contact-form .wpcf7-form.sent .wpcf7-response-output::before,
.co-contact-form .co-contact__response--stored::before{
  content:"\2713";
  left:1.25rem;
  top:1.5rem;
  width:1.85rem;
  height:1.85rem;
  background:var(--co-sage);
  font-size:1rem;
}
.co-contact-form .wpcf7-form.sent .co-contact__fields{display:none}
.co-contact-form .co-contact__again{
  display:flex;
  width:max-content;
  margin-top:var(--co-s4);
  font-family:var(--co-font-body);
  font-size:var(--co-fs-xs);
}
.co-contact-form .co-contact__again:hover{background:var(--co-ink);color:#fff}
.co-contact-form .screen-reader-response{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}
.co-contact-form .co-contact-config{
  margin:0;
  padding:var(--co-s4);
  border:1px dashed var(--co-line-strong);
  border-radius:var(--co-r-sm);
  color:var(--co-ink-2);
  font-size:var(--co-fs-sm);
}

/* ---------- aside ---------- */
.co-contact-aside{display:grid;gap:var(--co-s4);align-content:start;min-width:0}
.co-contact-card{
  padding:clamp(1.25rem,2.4vw,1.65rem);
  background:var(--co-surface);
  border:1px solid var(--co-line);
  border-radius:var(--co-r-md);
}
.co-contact-card--sand{background:var(--co-sand);border-color:var(--co-line-strong)}
.co-contact-card--links{background:transparent;border-style:dashed}
.co-contact-card h2{
  margin:0 0 var(--co-s3);
  font-size:var(--co-fs-xl);
  line-height:1.22;
  letter-spacing:-.01em;
}
.co-contact-card p{margin:0;color:var(--co-ink-2);font-size:var(--co-fs-sm);line-height:1.65}
.co-contact-card__meta{
  display:flex;
  align-items:center;
  gap:var(--co-s2);
  margin-top:var(--co-s3) !important;
  padding-top:var(--co-s3);
  border-top:1px solid color-mix(in srgb,var(--co-line-strong) 55%,transparent);
  color:var(--co-ink-3) !important;
  font-size:var(--co-fs-2xs) !important;
}
.co-contact-card__meta svg{flex:none;color:var(--co-rose)}
.co-contact-tips{list-style:none;margin:0;padding:0}
.co-contact-tips li{display:grid;gap:var(--co-s1)}
.co-contact-tips li+li{margin-top:var(--co-s3);padding-top:var(--co-s3);border-top:1px solid var(--co-line)}
.co-contact-tips strong{
  color:var(--co-ink);
  font-family:var(--co-font-display);
  font-size:var(--co-fs-base);
  font-weight:600;
  line-height:1.3;
}
.co-contact-tips span{color:var(--co-ink-2);font-size:var(--co-fs-xs);line-height:1.6}
.co-contact-links{list-style:none;margin:0;padding:0}
.co-contact-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--co-s3);
  padding:var(--co-s3) 0;
  color:var(--co-ink);
  font-size:var(--co-fs-sm);
  line-height:1.45;
  text-decoration:none;
}
.co-contact-links li+li a{border-top:1px solid var(--co-line)}
.co-contact-links a::after{
  content:"\2192";
  flex:none;
  color:var(--co-rose);
  transition:transform var(--co-t-fast) var(--co-ease);
}
.co-contact-links a:hover{color:var(--co-rose)}
.co-contact-links a:hover::after{transform:translateX(3px)}

/* ---------- small screens ---------- */
@media (max-width:899px){
  .co-contact-hero__spray{opacity:.11;right:-5rem;bottom:-4rem}
}
@media (max-width:559px){
  .co-contact-hero__spray{display:none}
  .co-contact-hero__copy h1{max-width:14ch}
  .co-contact-hero__note{align-items:flex-start}
  .co-contact-panel{padding:1.1rem 1rem 1.25rem}
  .co-contact-panel h2{font-size:clamp(1.55rem,1.2rem + 2vw,2rem)}
  .co-contact-card{padding:1.1rem}
}