/* Contact page (Open Routes Research). Loaded only on the Contact page by orr-editorial.php.
   Hero + two-column (WPForms enquiry form | contact aside). Tokens come from editorial.css.
   Restyles the WPForms Lite output to the editorial underline-input aesthetic. */

/* ===== shared eyebrow (heading widget as <div>) ===== */
#contact-hero div.elementor-heading-title{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--ff-eyebrow); font-size:12px; font-weight:600;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--c-accent); margin:0 0 20px;
}
#contact-hero div.elementor-heading-title::before{
  content:""; width:28px; height:1px; background:currentColor; flex:0 0 auto;
}

/* ===== HERO ===== */
#contact-hero > .e-con-inner{
  max-width:var(--content-max); width:100%; margin-inline:auto;
  padding:clamp(24px,3vw,48px) var(--pad-x-right) clamp(24px,3vw,40px) var(--pad-x-left);
  align-items:flex-start; text-align:left;
}
#contact-hero h1.elementor-heading-title{
  font-family:var(--ff-heading); font-weight:500; font-size:clamp(48px,7vw,104px);
  line-height:0.98; letter-spacing:-0.025em; color:var(--c-primary); margin:0;
  font-variation-settings:"opsz" 144;
}
#contact-hero .elementor-widget-text-editor{
  font-family:var(--ff-body); font-size:clamp(19px,1.7vw,23px); line-height:1.5;
  color:var(--c-secondary); max-width:54ch; margin:26px 0 0;
}

/* ===== BODY: two columns ===== */
#contact > .e-con-inner{
  max-width:var(--content-max); width:100%; margin-inline:auto;
  padding:clamp(24px,4vw,48px) var(--pad-x-right) var(--space-section) var(--pad-x-left);
  display:grid; grid-template-columns:minmax(0,720px) minmax(220px,280px);
  justify-content:space-between; gap:clamp(40px,5vw,72px); align-items:start;
}
#contact-form-col > .e-con-inner,#contact-aside > .e-con-inner{ align-items:flex-start; text-align:left; }
#contact-form-col div.elementor-heading-title{
  font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--c-accent); margin:0 0 20px;
}
#contact-form-col .formnote{
  font-family:var(--ff-eyebrow); font-size:11px; letter-spacing:0.06em;
  color:var(--c-muted); margin:18px 0 0;
}

/* ===== WPForms restyle ===== */
#contact-form-col .wpforms-container{ margin:0; width:100%; }
/* name + organisation share a row; everything else full width */
#contact-form-col .wpforms-field-container{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
#contact-form-col .wpforms-field{ grid-column:1 / -1; padding:0; margin:0 0 24px; }
#contact-form-col #wpforms-505-field_0-container{ grid-column:1; }
#contact-form-col #wpforms-505-field_1-container{ grid-column:2; }
#contact-form-col .wpforms-submit-container{ grid-column:1 / -1; }
#contact-form-col .wpforms-field-label{
  display:block; font-family:var(--ff-eyebrow); font-size:12px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--c-secondary); margin:0 0 8px;
}
#contact-form-col .wpforms-required-label{ color:var(--c-accent); }
#contact-form-col .wpforms-field input[type=text],
#contact-form-col .wpforms-field input[type=email],
#contact-form-col .wpforms-field textarea{
  width:100%; font-family:var(--ff-body); font-size:17px; color:var(--c-secondary);
  background:none; border:none; border-bottom:1px solid var(--c-rule);
  border-radius:0; padding:11px 2px; box-shadow:none;
}
#contact-form-col .wpforms-field input:focus,
#contact-form-col .wpforms-field textarea:focus{ outline:none; border-bottom-color:var(--c-ochre); }
#contact-form-col .wpforms-field textarea{ resize:vertical; min-height:130px; }
#contact-form-col .wpforms-field-description{ font-family:var(--ff-body); font-size:14px; color:var(--c-muted); margin-top:8px; }
#contact-form-col .wpforms-submit{
  display:inline-block; background:var(--c-accent); color:#fff; font-family:var(--ff-eyebrow);
  font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  padding:15px 30px; border:none; border-radius:2px; cursor:pointer; margin-top:8px;
  transition:background .25s ease;
}
#contact-form-col .wpforms-submit:hover{ background:var(--c-primary); }
#contact-form-col .wpforms-confirmation-container-full{
  font-family:var(--ff-heading); font-style:italic; font-size:clamp(20px,2vw,26px);
  line-height:1.4; color:var(--c-accent); background:none; border:none; padding:0;
}

/* ===== ASIDE ===== */
/* drop the aside so its top rule lines up with the Name/Organisation input underlines,
   and nudge it ~1cm to the left */
#contact-aside{ padding-top:128px; position:relative; left:-38px; }
/* top rule now sits on the first of the 3 stacked Text widgets (the .contact-aside wrapper is gone) */
#contact-aside > .e-con-inner > .elementor-widget:first-child{ border-top:1px solid var(--c-rule); padding-top:34px; }
#contact-aside .blk{ margin-bottom:40px; }
#contact-aside > .e-con-inner > .elementor-widget:last-child .blk{ margin-bottom:0; }
#contact-aside .lbl{ font-family:var(--ff-eyebrow); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--c-muted); margin:0 0 12px; }
#contact-aside .mail{ font-family:var(--ff-heading); font-style:italic; font-size:22px; color:var(--c-primary); text-decoration:none; border-bottom:2px solid var(--c-ochre); }
#contact-aside .mail:hover{ color:var(--c-accent); }
#contact-aside .place{ font-family:var(--ff-body); font-size:17px; line-height:1.6; color:var(--c-secondary); margin:0; }
#contact-aside .socials{ display:flex; flex-wrap:wrap; gap:10px 22px; }
#contact-aside .socials a{ font-family:var(--ff-body); font-size:16px; color:var(--c-primary); text-decoration:none; border-bottom:1px solid var(--c-rule); padding-bottom:2px; }
#contact-aside .socials a:hover{ color:var(--c-accent); border-bottom-color:var(--c-accent); }

/* ===== responsive ===== */
@media (max-width:900px){
  #contact > .e-con-inner{ grid-template-columns:1fr; gap:48px; }
  #contact-aside{ padding-top:0; left:0; }
  #contact-aside > .e-con-inner > .elementor-widget:first-child{ border-top:none; padding-top:0; }
  #contact-form-col .wpforms-field-container{ grid-template-columns:1fr; }
  #contact-form-col #wpforms-505-field_0-container,
  #contact-form-col #wpforms-505-field_1-container{ grid-column:1 / -1; }
}

/* ===== defeat Elementor add-container's flex_align_items:center default ===== */
#contact-hero > .e-con-inner,
#contact-form-col > .e-con-inner,
#contact-aside > .e-con-inner{ align-items:flex-start !important; text-align:left !important; }
/* the form column must STRETCH so the WPForms container fills the column width
   (flex-start would shrink it to content) */
#contact-form-col > .e-con-inner{ align-items:stretch !important; }