/* =============================================================================
   TABHI Connect — Forms CSS
   -----------------------------------------------------------------------------
   Pairs with the existing system.css design system. CSS custom properties at
   the top of this file fall back to the documented TABHI palette if your
   system.css variables aren't found.

   Design tokens used (override in system.css if you've named them differently):
     --ivory       institutional ivory base
     --navy        navy authority layer
     --forest      forest green for lineage / archive contexts
     --gold        muted gold accent / CTAs
   ============================================================================= */

:root {
    --tabhi-ivory:    var(--ivory,  #F7F5F0);
    --tabhi-navy:     var(--navy,   #1A2B4A);
    --tabhi-forest:   var(--forest, #2D4A3A);
    --tabhi-gold:     var(--gold,   #B8954C);
    --tabhi-ink:      var(--ink,    #1A1A1A);
    --tabhi-muted:    var(--muted,  #6B6B6B);
    --tabhi-line:     var(--line,   #D9D5CC);
    --tabhi-rule:     var(--rule,   #E8E4DA);
    --tabhi-error:    #A52A2A;
    --tabhi-success:  #2D4A3A;
}

/* -----------------------------------------------------------------------------
   Page scaffold
   ----------------------------------------------------------------------------- */

.connect-page {
    background: var(--tabhi-ivory);
    color: var(--tabhi-ink);
    min-height: 60vh;
}

.connect-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
    text-align: left;
}

.connect-hero .eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tabhi-gold);
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.connect-hero h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.1;
    color: var(--tabhi-navy);
    margin: 0 0 1.25rem 0;
    font-weight: 500;
}

.connect-hero .lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--tabhi-muted);
    max-width: 60ch;
    margin: 0;
}

/* Forest accent for the descendant page hero */
.connect-page.theme-lineage .connect-hero h1 { color: var(--tabhi-forest); }

/* -----------------------------------------------------------------------------
   /connect hub — audience cards
   ----------------------------------------------------------------------------- */

.connect-hub {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
}

.connect-hub .newsletter-strip {
    background: white;
    border: 1px solid var(--tabhi-line);
    border-radius: 12px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    margin: 0 0 clamp(2rem, 4vw, 3rem) 0;
}

.connect-hub .newsletter-strip h2 {
    font-size: 1.375rem;
    color: var(--tabhi-navy);
    margin: 0 0 0.5rem 0;
    font-weight: 500;
}

.connect-hub .newsletter-strip p {
    color: var(--tabhi-muted);
    margin: 0 0 1.25rem 0;
    max-width: 56ch;
}

.connect-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.connect-card {
    background: white;
    border: 1px solid var(--tabhi-line);
    border-radius: 12px;
    padding: clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.connect-card:hover,
.connect-card:focus-visible {
    border-color: var(--tabhi-gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 43, 74, 0.08);
    outline: none;
}

.connect-card .card-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tabhi-gold);
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.connect-card h3 {
    font-size: 1.25rem;
    color: var(--tabhi-navy);
    margin: 0 0 0.75rem 0;
    font-weight: 500;
}

.connect-card p {
    color: var(--tabhi-muted);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.connect-card .card-cta {
    color: var(--tabhi-navy);
    font-weight: 600;
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--tabhi-gold);
    padding-bottom: 2px;
    align-self: flex-start;
}

.connect-card.theme-lineage h3 { color: var(--tabhi-forest); }
.connect-card.theme-lineage .card-cta { color: var(--tabhi-forest); }

/* -----------------------------------------------------------------------------
   Form layout
   ----------------------------------------------------------------------------- */

.connect-form-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
}

.connect-form {
    background: white;
    border: 1px solid var(--tabhi-line);
    border-radius: 12px;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.form-section {
    margin: 0 0 1.75rem 0;
    padding: 0 0 1.5rem 0;
    border-bottom: 1px solid var(--tabhi-rule);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.75rem;
    align-items: start;
}

.form-section > h2,
.form-section > .form-row,
.form-section > .form-field:has(textarea),
.form-section > .form-field:has(fieldset),
.form-section > .form-field:has(.checkbox-row),
.form-section > .form-field:has(.consent-notice) {
    grid-column: 1 / -1;
}

.form-section > .form-field { margin-bottom: 0; }

@media (max-width: 640px) {
    .form-section { grid-template-columns: 1fr; }
}

.form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}

.form-section > h2 {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tabhi-muted);
    margin: 0 0 1.25rem 0;
    font-weight: 600;
}

.form-field {
    margin: 0 0 1.25rem 0;
}

.form-field:last-child { margin-bottom: 0; }

.form-field > label,
.form-field > legend {
    display: block;
    font-weight: 500;
    color: var(--tabhi-ink);
    margin: 0 0 0.375rem 0;
    font-size: 0.9375rem;
}

.form-field .helper {
    display: block;
    font-size: 0.8125rem;
    color: var(--tabhi-muted);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
}

.form-field .required-marker {
    color: var(--tabhi-gold);
    margin-left: 2px;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.875rem;
    font-size: 1rem;
    font-family: inherit;
    color: var(--tabhi-ink);
    background: var(--tabhi-ivory);
    border: 1px solid var(--tabhi-line);
    border-radius: 6px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--tabhi-gold);
    outline-offset: 1px;
    background-color: white;
    border-color: var(--tabhi-navy);
}

.form-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.form-field select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231A2B4A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 12px;
    padding-right: 2.25rem;
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: var(--tabhi-error);
    background: #fdf6f6;
}

/* Inline error message */
.field-error {
    margin: 0.375rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--tabhi-error);
    line-height: 1.4;
}

/* Field grid for side-by-side fields */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem 1.25rem;
}

@media (min-width: 640px) {
    .form-row.two-col { grid-template-columns: 1fr 1fr; }
    .form-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
}

@media (min-width: 640px) {
    .form-row.two-col { grid-template-columns: 1fr 1fr; }
    .form-row.three-col { grid-template-columns: 1fr 1fr 1fr; }
}

/* Checkbox / radio groups */
.form-field fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.checkbox-row,
.radio-row {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 0 0 0.625rem 0;
    line-height: 1.5;
    cursor: pointer;
    padding: 0.375rem 0;
}

.checkbox-row:last-child,
.radio-row:last-child { margin-bottom: 0; }

.checkbox-row input,
.radio-row input {
    flex-shrink: 0;
    margin: 0.25rem 0 0 0;
    width: 1rem;
    height: 1rem;
    accent-color: var(--tabhi-navy);
    cursor: pointer;
}

.checkbox-row span,
.radio-row span {
    flex: 1;
    color: var(--tabhi-ink);
    font-size: 0.9375rem;
}

.radio-group-inline {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.radio-group-inline .radio-row {
    margin: 0;
}

/* Acknowledgment / consent notice */
.consent-notice {
    background: var(--tabhi-ivory);
    border-left: 3px solid var(--tabhi-gold);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 0 6px 6px 0;
}

.consent-notice p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--tabhi-ink);
}

.consent-notice p:last-child { margin-bottom: 0; }

/* Honeypot field — visually hidden, screen-reader-hidden, but in the DOM so
   bot form-fillers populate it. The server silent-rejects any submission
   where this field is non-empty. */
.honeypot-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Submit button */
.connect-submit {
    background: var(--tabhi-gold);
    color: white;
    border: none;
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin-top: 0.5rem;
}

.connect-submit:hover { background: #a17f3d; }
.connect-submit:active { transform: translateY(1px); }
.connect-submit:focus-visible { outline: 2px solid var(--tabhi-navy); outline-offset: 2px; }

.connect-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Newsletter (Netlify Forms) variant */
.newsletter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .newsletter-form {
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
    }
    .newsletter-form .form-field.full-width {
        grid-column: 1 / -1;
    }
}

.newsletter-form .connect-submit {
    margin: 1.5rem auto 0;
    display: block;
    width: auto;
    min-width: 14rem;
    justify-self: center;
    grid-column: 1 / -1;
}

/* Hidden honeypot */
.netlify-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -----------------------------------------------------------------------------
   Success / error states
   ----------------------------------------------------------------------------- */

.connect-success {
    background: white;
    border: 1px solid var(--tabhi-success);
    border-left: 4px solid var(--tabhi-success);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
}

.connect-success h2 {
    color: var(--tabhi-success);
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 500;
}

.connect-success p {
    color: var(--tabhi-ink);
    margin: 0 0 0.75rem 0;
    line-height: 1.55;
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

.connect-success p:last-child { margin-bottom: 0; }

.form-error-banner {
    background: #fdf6f6;
    border: 1px solid var(--tabhi-error);
    border-left: 4px solid var(--tabhi-error);
    color: var(--tabhi-error);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   Subtle fade-in on load (works with or without IntersectionObserver)
   ----------------------------------------------------------------------------- */

.fade-in {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.is-visible,
.no-js .fade-in {
    opacity: 1;
    transform: none;
}

/* ===========================================================================
   Multi-step wizard (connect-multistep.js)
   =========================================================================== */
.form-section.ms-hidden { display: none !important; }

.ms-progress { margin: 0 0 2rem; }
.ms-progress__row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap;
}
.ms-progress__step {
    font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-weight: 600; color: var(--tabhi-gold);
}
.ms-progress__title {
    font-size: 0.875rem; color: var(--tabhi-muted);
}
.ms-progress__track {
    height: 4px; border-radius: 999px; overflow: hidden;
    background: var(--tabhi-rule);
}
.ms-progress__fill {
    height: 100%; width: 0; border-radius: 999px;
    background: var(--tabhi-gold);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ms-nav {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 2rem;
}
.ms-btn {
    font-family: inherit; font-size: 1rem; cursor: pointer;
    border-radius: 999px; padding: 0.875rem 2rem;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.ms-btn--next {
    margin-left: auto;
    background: var(--tabhi-gold); color: #fff; border: none; font-weight: 600;
}
.ms-btn--next:hover { background: #a17f3d; }
.ms-btn--back {
    background: transparent; color: var(--tabhi-muted);
    border: 1px solid var(--tabhi-line); padding: 0.875rem 1.5rem;
}
.ms-btn--back:hover { border-color: var(--tabhi-muted); color: var(--tabhi-ink); }

/* When the wizard is active, the real submit button sits in the nav row */
.connect-form .ms-nav ~ .connect-submit,
.connect-form .ms-nav + .connect-submit { margin-top: 2rem; }