/* ============================================================
   medO — Contact page layer
   Figma: "Contact - Desktop" 3839:35402 · "Contact - Mobile" 5409:27557
   (file ELtYXzmo2voALz7qoZz5VQ)

   Layout + colour only. All type comes from the DS classes in the markup
   (.h5/.h6/.text-p2/.text-p3/.fw-*) — nothing here sets a font.
   Shared by preview-contact.html and the [mds_contact] shortcode.
   ============================================================ */

/* the DS has no global box-sizing; % widths + padding overflow without this */
[class^="contact-"],
[class*=" contact-"] { box-sizing: border-box; }

/* hidden <symbol> sprite — 0×0 rather than display:none, which kills <use> */
.contact-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}



/* ── section ──
   Figma "Frame 40": y=100 h=800, card block inset 48px top/bottom. */
.contact-section {
  padding-block: var(--spacing-step-10); /* 48px */
  background: var(--neutrals-100-white);
}

/* Figma centres a 1405px block (571 panel + 24 gap + 810 form) at 1920 —
   15px narrower than the 1420 --section-container standard. Kept exact so the
   two card widths land on their Figma values; the fr ratio holds elsewhere. */
.contact-shell {
  max-width: 1405px;
  margin-inline: auto;
  min-height: 704px;
  display: grid;
  grid-template-columns: 571fr 810fr;
  grid-template-rows: auto 1fr auto;
  column-gap: var(--spacing-step-7); /* 24 */
  row-gap: 0;
}

/* ── blue panel ──
   Desktop: ONE card behind the intro (row 1) and the join block (row 3);
   this element carries the flattened Figma export (gradient + medO mark).
   Mobile: hidden — intro and join become two separate cards instead. */
.contact-panel-bg {
  grid-column: 1;
  grid-row: 1 / -1;
  border-radius: var(--radius-9md); /* 20 */
  /* [mds_contact] overrides the var with the ACF image; the preview has no
     inline style, so the bundled export is the fallback in both.
     The value passed in MUST be an absolute URL — a relative one inside a
     custom property resolves against THIS stylesheet, not the page. */
  background: #172a4b var(--contact-panel, url("../img/contact-panel.jpg")) center / cover no-repeat;
}

.contact-intro {
  grid-column: 1;
  grid-row: 1;
  padding: var(--spacing-step-7) var(--spacing-step-7) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16 */
  color: var(--neutrals-100-white);
}
.contact-intro-title,
.contact-intro-text { margin: 0; }

/* Figma 4031:53336: the title now runs the full card width on its own line
   (527px — it is allowed to overrun the 523 content box by a few px), with the
   careers link and the social row sharing the line below it. */
.contact-join {
  grid-column: 1;
  grid-row: 3;
  padding: 0 var(--spacing-step-7) var(--spacing-step-7);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16 */
  color: var(--neutrals-100-white);
}
.contact-join-title { margin: 0; }
.contact-join-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-step-7);
}
/* Figma ghost gap is 8 desktop / 6 mobile — --spacing-xs is exactly that */
.contact-join-link { gap: var(--spacing-xs); }

/* The Figma "SM" mark, dark-panel flavour — see the --sm-glyph contract in
   mds-templates.css. Default here is the white disc with the glyph knocked out
   in primary/Default; hover swaps the two. */
.contact-social {
  display: flex;
  align-items: center;
  gap: var(--spacing-step-6); /* 16 */
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--neutrals-100-white); /* the icon circle is currentColor */
}
.contact-social a {
  display: block;
  color: inherit;
  --sm-glyph: var(--primary-default);
  transition: color 0.2s ease, --sm-glyph 0.2s ease;
}
.contact-social a:hover,
.contact-social a:focus-visible {
  color: var(--primary-default);
  --sm-glyph: var(--neutrals-100-white);
}
.contact-social svg { display: block; width: 24px; height: 24px; }

/* ── form card ── */
.contact-form {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-step-7);
  padding: var(--spacing-step-7); /* 24 */
  background: var(--neutrals-100-white);
  border-radius: var(--radius-9md);
}
.contact-form-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-step-6); /* 16 */
  container-type: inline-size;
}
.contact-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-step-6); /* 16 */
}
/* two 373px columns inside the 762px content box */
.contact-field {
  display: flex;
  flex: 0 0 calc(50% - (var(--spacing-step-6) / 2));
  min-width: 0;
  border: none;
  padding: 0;
}
.contact-field-full { flex: 0 0 100%; }
/* Between the two Figma frames the form column narrows faster than the 18px
   labels do; under ~520px the two columns collide, so fields go full width.
   Keyed to the form's own width, not the viewport, so it holds at any size.
   Must come after .contact-field — @container adds no specificity. */
@container (max-width: 519px) {
  .contact-field { flex: 0 0 100%; }
}
/* .input-box is a DS class, so the page-scoped [class^="contact-"] border-box
   rule above does not reach it. Without this, width:100% is a CONTENT width and
   the 16+16 padding + 1+1 border push each field to 407px — which swallows the
   16px gutter and overflows the card's right padding. Same fix mds-demo.css uses. */
.contact-field .input-box {
  box-sizing: border-box;
  width: 100%;
  /* The DS draws the focus ring as a 1px border, which Figma's component does
     not have — it added 2px to every row (84 vs 82) and drifted 8px down the
     card. Same ring as an inset shadow instead: identical look, zero height. */
  border: 0;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field:focus-within .input-box {
  box-shadow: inset 0 0 0 1px var(--neutrals-600);
}
/* a required dropdown left empty — the <details> cannot carry the required
   attribute, so the submit handler flags it with .has-error. */
.contact-field .dropdown-shell.has-error .input-box { box-shadow: inset 0 0 0 1px var(--error-default); }
/* Figma message box = 3 lines + 12px padding. Figma draws a plain fixed box,
   so the DS's default resize grip is suppressed here (drop this line to get
   the resizable textarea back). */
.contact-field-full textarea {
  height: calc(var(--typography-line-height-p3) * 3);
  resize: none;
}

/* The constraint-validation proxy for a required dropdown. It must stay in the
   render tree — display:none or [hidden] makes the browser skip it and refuse
   the submit silently — so it is laid transparently over the control, where the
   browser also anchors its bubble. */
.dropdown-proxy {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-step-4); /* 8 */
  min-height: 24px;
  color: var(--neutrals-800);
  cursor: pointer;
}
.contact-consent-box {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  /* page builders (Bricks) pad bare inputs; with the page-scoped border-box the
     side padding eats the whole content box and `width` stops having any effect */
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: var(--radius-step-5); /* 4 */
  background: var(--neutrals-500);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact-consent-box:checked {
  background-color: var(--primary-default);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5 10 17.5 19 7.5' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}
.contact-consent-box:focus-visible {
  outline: 2px dashed var(--neutrals-900);
  outline-offset: 2px;
}
.contact-consent-text { margin: 0; }
/* The privacy notice closes the form, under the submit button. */
.contact-form-notice {
  margin: var(--spacing-step-6) 0 0;
  color: var(--neutrals-700);
}
.contact-form-notice a { color: inherit; text-decoration: underline; }

.contact-submit { align-self: flex-start; }

/* ── HubSpot embed ──
   HubSpot injects its own markup (and sometimes an iframe) into #hubspotForm
   at runtime, AFTER this stylesheet has already laid out .contact-form as an
   810px grid track. HubSpot's own CSS can carry width:100% relative to an
   unconstrained ancestor, or negative margins for its internal field gutters —
   either lets its content spill outside the 810px track with overflow:visible,
   which is exactly the "form renders full page width" symptom. Force it back
   into the column instead of trusting HubSpot's own sizing. */
.contact-form-hubspot {
  overflow: hidden;
  min-width: 0;
}
.contact-form-hubspot,
.contact-form-hubspot #hubspotForm {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.contact-form-hubspot iframe {
  width: 100% !important;
  max-width: 100% !important;
}
/* HubSpot's own form/fieldset/row wrappers — belt-and-suspenders in case the
   overflow rule above still lets something escape visually rather than being
   clipped (e.g. a fixed-px width set inline by HubSpot). */
.contact-form-hubspot form,
.contact-form-hubspot .hs-form,
.contact-form-hubspot .hs-form-field,
.contact-form-hubspot fieldset,
.contact-form-hubspot .hs-fieldtype-text,
.contact-form-hubspot .input,
.contact-form-hubspot .hs-input {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ── success state ──
   Figma "Contact us - Forms" variant 1990:9634 — shown in place of the form
   once it has been sent. That variant predates the current type system (it is
   drawn in Plus Jakarta Sans 48/58 and still says "Ofys Santé"), so the title
   uses the DS .h4 (48/50) instead of its literal metrics. */
.contact-thanks {
  grid-column: 2;
  grid-row: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-step-7); /* 24 */
  padding: var(--spacing-step-7);
  background: var(--neutrals-300);
  border: 1px solid var(--secondary-2-default);
  border-radius: var(--radius-9md);
  text-align: center;
}
.contact-thanks[hidden] { display: none; }
/* The submit handler focuses this (tabindex="-1") so keyboard and screen-reader
   users land on the confirmation. It is never reached by tabbing, and the ring
   would paint over the card's cyan border, so suppress it. */
.contact-thanks:focus { outline: none; }
.contact-thanks-title,
.contact-thanks-text { margin: 0; }
.contact-thanks-title { color: var(--neutrals-950); }
.contact-thanks-text { color: var(--neutrals-800); }
/* The form and the success card occupy the same cell — only one is ever shown.
   .contact-form sets display:flex, which outranks the UA [hidden] rule, so the
   attribute needs its own guard. The :has() form is what the preview toggles. */
.contact-form[hidden] { display: none; }
.contact-shell:has(.contact-thanks:not([hidden])) .contact-form { display: none; }

/* ============================================================
   Mobile — < 1024px (matches the [mds_header]/[mds_footer] breakpoint)
   Figma "Contact - Mobile": three stacked 366px cards, 24px gaps.
   Type is NOT re-declared here — the tokens are already mobile-first.
   ============================================================ */
@media (max-width: 1023px) {
  .contact-section { padding-block: var(--spacing-step-7); } /* 24 */

  .contact-shell {
    width: 88.406%; /* 366 / 414 */
    max-width: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-step-7); /* 24 */
  }

  /* DOM order is already the mobile reading order: intro → form → join */
  .contact-panel-bg { display: none; }

  .contact-intro,
  .contact-join {
    min-height: 236px;
    padding: var(--spacing-step-7);
    border-radius: var(--radius-9md);
    background: #172a4b var(--contact-panel-mobile, url("../img/contact-panel-mobile.jpg")) center / cover no-repeat;
  }

  /* mobile drops the social row to the bottom of the card instead of keeping
     it beside the link (Figma 5409:28883: title 26, link 102, social 181) */
  .contact-join-row {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--spacing-step-6);
  }
  .contact-social { align-self: flex-end; }

  .contact-form {
    padding: var(--spacing-step-7);
    gap: var(--spacing-step-8); /* 32 — Figma leaves ~31px above the button */
  }
  .contact-field { flex: 0 0 100%; }

  .contact-thanks {
    min-height: 366px; /* the 569px desktop card would swamp a 414 screen */
    padding: var(--spacing-step-8) var(--spacing-step-7);
  }
}

/* ============================================================
   QA only — .qa-hover mirrors every :hover rule so a headless run can
   measure hover geometry (which :hover cannot reach). Kept in sync with
   components.css .btn-pill:hover and mds-templates.css .mds-nav-cta:hover.
   ============================================================ */
.qa-hover.btn-pill {
  padding: 8px 24px;
  margin-right: 34px;
  background-clip: padding-box;
  border-radius: 28px;
}
.qa-hover.btn-pill .btn-icon-circle { width: 0; opacity: 0; margin-right: -10px; }
.qa-hover.btn-pill .btn-icon-pop { opacity: 1; transform: scale(1); }
.qa-hover.btn-primary { background: var(--pill-hover); }
.qa-hover.btn-primary.on-dark { background: #fff; }
.qa-hover.btn-secondary { border-width: 1px; }
.qa-hover.mds-nav-cta { padding: 7px 21px; margin-right: 31px; border-radius: 25px; }
/* mobile chrome overrides the CTA hover — mirror them too, or the test lies */
@media (max-width: 1023px) {
  .qa-hover.mds-nav-cta { padding: 6px; margin-right: 0; }
  .qa-hover.mds-nav-cta .btn-icon-circle { width: 32px; opacity: 1; margin-right: 0; }
}