/* =============================================================================
   CONTACT PAGE (contact.php)
   -----------------------------------------------------------------------------
   The hero band comes from fs-legal.css, shared with the information pages.
   Here: two cards on the page backdrop - the details, and the form. Every value
   comes from the design system (fs-theme.css), so light and dark follow it.
   ========================================================================== */

.ct-section { padding-top: var(--space-section-md); }

.ct-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: 28px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

.ct-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-lg);
    padding: 36px 36px 38px;
}
@media (min-width: 992px) {
    .ct-info { position: sticky; top: 120px; }
}

/* ---- the details --------------------------------------------------------- */
.ct-eyebrow {
    margin: 0 0 10px;
    font-family: var(--font-ui);
    font-size: var(--step-eyebrow);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-brand);
}
.ct-title {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--ink);
}
.ct-lede {
    margin: 0 0 26px;
    font-family: var(--font-ui);
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--ink-body);
}

.ct-details {
    list-style: none;
    display: grid;
    gap: 18px;
    margin: 0 0 28px;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
}
.ct-details li { display: flex; align-items: flex-start; gap: 14px; }
.ct-details__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--surface-tint);
    color: var(--brand-500);
    font-size: 16px;
}
.ct-details h3 {
    margin: 2px 0 4px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.ct-details p {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.ct-details a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line-strong);
    word-break: break-word;
    transition: color var(--t), border-color var(--t);
}
.ct-details a:hover { color: var(--ink-brand); border-color: var(--brand-500); }

.ct-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- buttons ------------------------------------------------------------- */
.ct-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.ct-btn--primary { background: var(--btn-primary); color: #fff; box-shadow: var(--sh-brand); }
.ct-btn--primary:hover { background: var(--btn-primary-hover); color: #fff; transform: translateY(-1px); }
.ct-btn--primary:active { transform: translateY(0); }
.ct-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.ct-btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.ct-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ct-btn i { font-size: 14px; }

/* ---- the form ------------------------------------------------------------ */
.ct-form-title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--ink);
}
.ct-form-intro {
    margin: 0 0 24px;
    font-family: var(--font-ui);
    font-size: 14.5px;
    color: var(--ink-muted);
}

.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ct-field { margin-bottom: 18px; min-width: 0; }
.ct-field label {
    display: block;
    margin: 0 0 7px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.ct-req { color: var(--brand-ink); }
.ct-opt { margin-left: 4px; font-weight: 400; color: var(--ink-faint); }

#contact-form .ct-input {
    display: block;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15.5px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color var(--t), box-shadow var(--t), background-color var(--t);
}
#contact-form .ct-input::placeholder { color: var(--ink-faint); }
#contact-form .ct-input:hover { border-color: var(--n-400); }
#contact-form .ct-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}
#contact-form textarea.ct-input { min-height: 170px; resize: vertical; line-height: 1.6; }
#contact-form select.ct-input {
    padding-right: 44px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%238a817b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px 16px;
    cursor: pointer;
}
/* nice-select is switched off on this form (fs-contact.js); keep its shell hidden if it ever runs */
.ct-form .nice-select { display: none !important; }
#contact-form select.ct-input { display: block !important; }

.ct-err {
    display: none;
    margin-top: 6px;
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.45;
    color: var(--brand-ink);
}
#contact-form .ct-field.has-error .ct-input { border-color: var(--brand-500); }
.ct-field.has-error .ct-err { display: block; }

.ct-count {
    display: block;
    margin-top: 6px;
    text-align: right;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--ink-faint);
}
.ct-field.has-error .ct-count { margin-top: 2px; }
.ct-count.is-near { color: var(--brand-ink); }

.ct-note {
    margin: 2px 0 22px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-muted);
}
.ct-note a { color: var(--ink-brand); text-decoration: underline; text-underline-offset: 2px; }

.ct-submit { width: 100%; min-height: 56px; font-size: 16px; }
.ct-submit.is-busy { pointer-events: none; opacity: .82; }

/* spam trap: off screen for people, still in the form for bots */
.ct-hp {
    position: absolute !important;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- messages ------------------------------------------------------------ */
.ct-alert {
    display: flex;
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px 18px;
    border: 1px solid var(--brand-200);
    border-left: 4px solid var(--brand-500);
    border-radius: var(--r-md);
    background: var(--surface-tint);
    outline: none;
}
.ct-alert > i { margin-top: 3px; color: var(--brand-ink); font-size: 17px; }
.ct-alert h3 {
    margin: 0 0 4px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
    color: var(--ink);
}
.ct-alert p { margin: 0; font-family: var(--font-ui); font-size: 14px; line-height: 1.6; color: var(--ink-body); }

.ct-success { padding: 30px 6px 10px; text-align: center; outline: none; }
.ct-success__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    font-size: 30px;
    box-shadow: var(--sh-brand), 0 0 0 8px rgba(240, 78, 62, .14);
}
.ct-success__text {
    max-width: 440px;
    margin: 10px auto 26px;
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-body);
}

/* ---- dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] .ct-alert { border-color: rgba(240, 78, 62, .34); border-left-color: var(--brand-500); background: rgba(240, 78, 62, .12); }
:root[data-theme="dark"] .ct-details__icon { background: rgba(240, 78, 62, .14); color: var(--brand-400); }
:root[data-theme="dark"] #contact-form .ct-input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .26); }
:root[data-theme="dark"] #contact-form .ct-input:hover { border-color: rgba(255, 255, 255, .34); }
:root[data-theme="dark"] #contact-form .ct-input:focus,
:root[data-theme="dark"] #contact-form .ct-field.has-error .ct-input { border-color: var(--brand-500); }
:root[data-theme="dark"] #contact-form select.ct-input option { background: var(--n-900); color: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ct-alert { border-color: rgba(240, 78, 62, .34); border-left-color: var(--brand-500); background: rgba(240, 78, 62, .12); }
    :root:not([data-theme="light"]) .ct-details__icon { background: rgba(240, 78, 62, .14); color: var(--brand-400); }
    :root:not([data-theme="light"]) #contact-form .ct-input { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .26); }
    :root:not([data-theme="light"]) #contact-form .ct-input:hover { border-color: rgba(255, 255, 255, .34); }
    :root:not([data-theme="light"]) #contact-form .ct-input:focus,
    :root:not([data-theme="light"]) #contact-form .ct-field.has-error .ct-input { border-color: var(--brand-500); }
    :root:not([data-theme="light"]) #contact-form select.ct-input option { background: var(--n-900); color: #fff; }
}

/* ---- tablet and phone ---------------------------------------------------- */
@media (max-width: 991px) {
    .ct-grid { grid-template-columns: 1fr; max-width: 720px; }
}
@media (max-width: 575px) {
    .ct-section { padding-top: 32px; }
    .ct-card { padding: 26px 20px 28px; border-radius: var(--r-lg); }
    .ct-row { grid-template-columns: 1fr; gap: 0; }
    .ct-actions .ct-btn { flex: 1 1 100%; }
    .ct-lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .ct-btn, #contact-form .ct-input, .ct-details a { transition: none; }
}