/*
 * contact.css — pixel-parity overlay for com_contact (body.view-contact)
 * Injected via html/com_contact/contact/default.php (addCustomTag + filemtime).
 * Fixes hardcoded dark-hex leaks and token-mismatch on input text colour.
 * Does NOT recompile shared scss. Contact-scoped only.
 *
 * Defects fixed:
 *   C1 [DARK-HEX-IN-LIGHT] .cd-label colour = #6B7196 hardcoded in _nexora.scss:843
 *       → light should be $text-dim #888EA6; dark #6B7196 is correct (no change needed dark).
 *   C2 [DARK-HEX-IN-LIGHT] ::placeholder colour = #6B7196 hardcoded in _nexora.scss:800-801
 *       → use var(--color-text-dim) so it resolves #888EA6 in light, #6B7196 in dark.
 *   C3 [TOKEN-MISMATCH / 4th-token-leak] form input/textarea text colour uses var(--color-text)
 *       = #2B3048 light / #C3C8DE dark (the non-pen 4th token) instead of .pen $text
 *       = var(--color-heading) = #0B0D1A light / #FFFFFF dark.
 */

/* ---------------------------------------------------------------------------
 * C4 [MISSING-DESIGN-SECTION] Contact masthead band.
 * The .pen Contact frame opens with a full-width $bg + accent-radial masthead
 * (tDtuD): eyebrow "CONTACT US" + 56px title + intro. The stock T4 #t4-masthead
 * only renders when show_page_heading=1 AND page_heading is set on the menu item
 * (menu 344 params are empty) AND it emits NO eyebrow — so the live page showed
 * only a bare .page-header contact-name h2. We render the designed masthead in
 * the override (.nx-contact-masthead) and suppress the stray contact-name header.
 * All values token-driven → light + dark flip with no darkmode change.
 * ------------------------------------------------------------------------- */
.view-contact .contact > .page-header { display: none; }
/* Setting page_heading on the menu item makes the stock T4 #t4-masthead render too
   (no eyebrow, duplicate band) — suppress it; our .nx-contact-masthead is the design one. */
.view-contact #t4-masthead.t4-masthead { display: none; }
/* Restore the flush header→body join the stock masthead's negation provided
   (our masthead is inside the component body, below .t4-main-body). */
.view-contact .t4-section.t4-main-body { padding-top: 0; }

.view-contact .nx-contact-masthead {
    position: relative;
    overflow: clip;
    background: var(--color-bg);
    padding: 96px 48px 64px;
}
.view-contact .nx-contact-masthead::before {
    content: "";
    position: absolute;
    inset: -30% 0 auto 0;
    height: 130%;
    background: radial-gradient(45% 70% at 50% 4%, rgb(var(--color-primary-rgb) / 0.5), transparent 72%);
    pointer-events: none;
    z-index: 0;
}
.view-contact .nx-cm-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 1080px;
    margin-inline: auto;
    text-align: center;
}
.view-contact .nx-cm-eyebrow {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 1.2px;
    line-height: 1;
    color: var(--color-primary);
    text-transform: uppercase;
}
.view-contact .nx-cm-title {
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.06;
    color: var(--color-heading);
    max-width: 760px;
}
.view-contact .nx-cm-intro {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.55;
    color: var(--color-muted);
    max-width: 600px;
}
@media (max-width: 767.98px) {
    /* .pen mobile Jyt6s: pad[44,20,28,20] gap12; eyebrow 11.5/ls1.5; title 32/lh1.08/ls-1; intro 15 */
    .view-contact .nx-contact-masthead { padding: 44px 20px 28px; }
    .view-contact .nx-cm-inner { gap: 12px; }
    .view-contact .nx-cm-eyebrow { font-size: 11.5px; letter-spacing: 1.5px; }
    .view-contact .nx-cm-title { font-size: 32px; letter-spacing: -1px; line-height: 1.08; }
    .view-contact .nx-cm-intro { font-size: 15px; }
}

/* C5 [BORDER-CUT] .pen CTASection (wFBFW) has a 1px top hairline ($border #1C1E38);
   the scss .sec-contact-cta omitted border-top. Add it (token-driven, both themes). */
.view-contact .sec-contact-cta { border-top: 1px solid var(--color-border-soft); }

/* C6 [TABLET-CRAMP] The .pen has only 1440 + 390 frames; the desktop cols (1fr 380px)
   apply from 768px up, squeezing the form column to ~228px on tablet (768–991).
   Stack the two columns (form first) across the tablet band too, matching the .pen
   mobile flow, so the form is full-width. Details cards go below the form.
   Scoped to 768–991.98 so the ≤767.98 scss mobile block is untouched. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .view-contact .contact-cols {
        grid-template-columns: 1fr;
        gap: 0;
        max-width: 640px;
    }
    .view-contact .contact-details-col {
        margin-top: 24px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }
}

/* C1 — cd-label: replace hardcoded #6B7196 with the semantic token */
.view-contact .cd-label {
    color: var(--color-text-dim);
}

/* C2 — placeholder: replace hardcoded #6B7196 with semantic token */
.view-contact #contact-form .form-control::placeholder,
.view-contact #contact-form textarea::placeholder {
    color: var(--color-text-dim);
}

/* C3 — input/textarea typed-text colour: use $text = var(--color-heading) per .pen */
.view-contact #contact-form .form-control,
.view-contact #contact-form input.form-input,
.view-contact #contact-form textarea {
    color: var(--color-heading);
}