/* ================================================================
   page-contact.css  –  Compliance Checker
   Per-page styles for /contact. Two cards side-by-side:
     • LEFT  (.page-contact__subscribe) — filled teal card,
       reuses the .cc-detail-filters card chrome aesthetic
     • RIGHT (.page-contact__message)   — white form card,
       same width/behaviour as the case-studies table card

   Everything pulls from the shared --ae-*, --space-*, --fs-*, --radius-*
   tokens. No new colours, fonts, or radii invented.
   ================================================================ */


/* === Layout ==================================================== */
/* Outer cap follows the global --page-max so this page lines up
   visually with the rest of the site on QHD. Sidebar width matches
   the detail-page rail (clamp(220px, 18vw, 280px)); align-items:
   start lets each card size to its own content height so there's no
   stretched whitespace below the shorter card. */
.page-contact__layout {
    display: grid;
    grid-template-columns: clamp(220px, 18vw, 280px) 1fr;
    gap: var(--space-lg);
    align-items: start;
    max-width: var(--page-max);
    margin: var(--space-xl) auto;
    padding: 0 var(--space-md);
}
/* Grid blowout guard (same reason as the methods page). */
.page-contact__layout > * { min-width: 0; }


/* === LEFT · Subscribe (teal card) ============================== */
/* Reuses the brand-teal palette + card radius. Padding scales via
   --space-* tokens so it stays in rhythm with the message card. */
.page-contact__subscribe {
    background: var(--ae-darkblue);
    color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
}
.page-contact__subscribe-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* Form vs success — only one panel visible at a time. */
.page-contact__subscribe-inner[data-state="form"]    .page-contact__subscribe-success { display: none; }
.page-contact__subscribe-inner[data-state="success"] .page-contact__subscribe-form    { display: none; }

.page-contact__subscribe-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1.15;
    color: var(--white);
}
.page-contact__subscribe-lead {
    margin: var(--space-xs) 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: rgba(255, 255, 255, 0.85);
}

/* Pill input + Subscribe button — stacked vertically because the
   sidebar is narrow (220-280px); side-by-side would crush the
   input. The button is full-width below for a clear tap target. */
.page-contact__subscribe-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.page-contact__pill-input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-input-border);
    background: var(--white);
    color: var(--ae-black);
    font-family: var(--font-body);
    font-size: 16px;        /* 16px stops iOS Safari from auto-zooming on focus */
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.page-contact__pill-input:focus {
    border-color: var(--ae-lightgreen);
    box-shadow: 0 0 0 3px rgba(194, 237, 69, 0.35);
}
.page-contact__pill-input.is-invalid {
    border-color: var(--ae-orange);
    box-shadow: 0 0 0 3px rgba(239, 180, 23, 0.25);
}

/* Subscribe button — jungle green with dark text (the brand's
   secondary CTA treatment). Pill radius, same height as the input. */
.page-contact__subscribe-btn {
    appearance: none;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    padding: 12px 22px;
    background: var(--ae-lightgreen);
    color: var(--ae-black);
    font-family: var(--font-heading);
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: 1.05;
    cursor: pointer;
    transition: transform var(--transition-base), background var(--transition-base),
                border-color var(--transition-base), color var(--transition-base);
    white-space: nowrap;
}
.page-contact__subscribe-btn:hover {
    transform: scale(1.04);
    background: transparent;
    border-color: var(--ae-lightgreen);
    color: var(--ae-lightgreen);
}

.page-contact__subscribe-fineprint {
    margin: var(--space-md) 0 0;
    font-family: var(--font-body);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}

/* Subscribe success panel — centred, jungle-tint check icon. */
.page-contact__subscribe-success {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
}
.page-contact__subscribe-success .page-contact__success-icon {
    font-size: 26px;
    color: var(--ae-lightgreen);
}
.page-contact__subscribe-success .page-contact__success-text {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    color: var(--white);
}


/* === RIGHT · Message form (white card) ========================= */
.page-contact__message {
    background: var(--ae-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-xl);
}
.page-contact__message-inner {
    display: flex;
    flex-direction: column;
}
.page-contact__message-inner[data-state="form"]    .page-contact__message-success { display: none; }
.page-contact__message-inner[data-state="success"] .page-contact__message-form    { display: none; }

.page-contact__message-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--ae-black);
}
.page-contact__message-lead {
    margin: var(--space-xs) 0 var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--color-muted);
}

.page-contact__message-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.page-contact__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.page-contact__label {
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ae-black);
}

.page-contact__input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-dropdown);
    background: var(--white);
    color: var(--ae-black);
    font-family: var(--font-body);
    font-size: 16px;        /* see iOS-zoom note in the pill-input rule */
    outline: none;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.page-contact__input:focus {
    border-color: var(--ae-darkblue);
    box-shadow: 0 0 0 3px var(--ae-darkblue-10);
}
.page-contact__input.is-invalid {
    border-color: var(--ae-orange);
    box-shadow: 0 0 0 3px rgba(239, 180, 23, 0.25);
}
.page-contact__textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.5;
}

/* Send button reuses the .btn-teal base; this modifier just lifts
   it from inline-flex (default) to a wider stand-alone CTA row. */
.page-contact__send-btn {
    align-self: flex-start;
    margin-top: var(--space-sm);
}

/* Message success panel — bigger check + Thank-you headline. */
.page-contact__message-success {
    text-align: center;
    padding: var(--space-lg) 0;
}
.page-contact__success-icon--large {
    font-size: 56px;
    color: var(--ae-land-dark);
    display: block;
    margin: 0 auto var(--space-md);
}
.page-contact__success-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    color: var(--ae-black);
}
.page-contact__message-success .page-contact__success-text {
    margin: var(--space-sm) 0 var(--space-md);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    color: var(--color-muted);
}
.page-contact__send-another {
    appearance: none;
    background: none;
    border: 0;
    color: var(--ae-darkblue);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.page-contact__send-another:hover { color: var(--ae-lightgreen); }


/* Visually-hidden helper (used for the subscribe input label). */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}


/* ================================================================
   RESPONSIVE  (breakpoints documented in tokens.css)
   ----------------------------------------------------------------
     3xl  ≥ 2200px   QHD / 4K          (default — --page-max scales)
     2xl  ≥ 1536px   large monitors    (default)
     xl   ≥ 1280px   standard desktops (default — 2-col)
     lg   ≥ 1024px   small laptops     (default — 2-col)
     md   ≤ 1023px   tablets           subscribe stacks above message
     sm   ≤ 767px    phones            tighter card padding + wrap pill row
   ================================================================ */

/* === md  (≤ 1023px, tablets) =================================== */
/* Single column. Subscribe stacks LAST so the primary action (the
   message form) is the first thing visible after the hero. */
@media (max-width: 1023px) {
    .page-contact__layout {
        grid-template-columns: 1fr;
    }
    .page-contact__subscribe { order: 2; }
    .page-contact__message   { order: 1; }
}

/* === sm  (≤ 767px, phones) ===================================== */
/* Tighter card padding so the cards don't lose most of the screen
   to inner whitespace. Send-message button stretches full-width
   for a clear tap target. (Subscribe input + button already stack
   at every tier — see .page-contact__subscribe-row.) */
@media (max-width: 767px) {
    .page-contact__subscribe { padding: var(--space-md); }
    .page-contact__message   { padding: var(--space-md); }
    .page-contact__send-btn  { width: 100%; justify-content: center; }
}