/* ==========================================================================
   Public site - the layer every page that renders main.fh-page shares

   index.php, Families.php and the coming Register.php all load this sheet,
   ALWAYS BEFORE their own page sheet (css/families_hub.css and its siblings):
   it declares the --fh-* KEEP variables and the primitives those sheets build
   on, so a page sheet loaded first would have nothing to build on.

     1. Page shell        - the --fh-* KEEP variables and the base type scale
     2. Shared primitives - container, eyebrow, buttons, links
     3. Home-page teaser  - .fh-teaser* (index.php)
     4. Section frame     - .fh-section*, the empty state, the site footer
     5. Responsive (991px layout / 576px type)
     6. Print

   Every one of these pages renders body > #mainBodyDiv > main.fh-page, so the
   scroll pane and its navbar offset come from #mainBodyDiv in
   css/aca-shell.css; nothing here positions the page.

   Every pure alias of an --aca-* token is gone: the tokens are used directly.
   The handful of values below have no token and are kept as variables so each
   one is stated once, on the family_forms.css KEEP model. They all live here,
   this sheet and the page sheets reading them through the cascade.
   ========================================================================== */

/* ==========================================================================
   1. Page shell - the KEEP variables and the base type scale
   -------------------------------------------------------------------------- */

.fh-page,
.fh-teaser {
    /* KEEP #94a3b8: a mid slate for past/disabled text and the default
       schedule track. --aca-muted (#6b7280) is ~15% darker and
       --aca-line-strong (#d1d5db) far too light. */
    --fh-slate: #94a3b8;
    /* KEEP #eef2f7: the neutral ground under a date tile or a plain badge.
       --aca-surface-2 (#f8fafc) is all but white and the tiles would vanish
       on the white card behind them. */
    --fh-tile: #eef2f7;
    /* KEEP #f1f5f9: the same tile one step lighter, for a past badge. */
    --fh-tile-past: #f1f5f9;
    /* KEEP #ffc79b: the light orange that reads on the ink-filled active chip
       and on the dark footer. --aca-orange-line (#fed7aa) goes flat there. */
    --fh-on-dark-accent: #ffc79b;
    /* KEEP: the schedule's per-track hues. The --aca-* entity accents carry
       entity meanings (family / transaction / info), so they are not swaps
       even where the value happens to match. */
    --fh-track-lunch: #0e7490;
    --fh-track-kids: #be185d;
    --fh-track-prayer: #6d28d9;
    --fh-track-islamic: #1d4ed8;
    color: var(--aca-fg);
    font-family: var(--aca-font);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.55;
    text-align: left;
    word-spacing: normal;
}

.fh-page *,
.fh-teaser * {
    box-sizing: border-box;
}

/* ==========================================================================
   2. Shared primitives - every public page
   -------------------------------------------------------------------------- */

.fh-container {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.fh-eyebrow {
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--aca-fg-accent);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.fh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.625rem 1.125rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.fh-btn:hover,
.fh-btn:focus {
    text-decoration: none;
}

.fh-btn-icon {
    margin: 0 0.5rem 0 0;
    padding: 0;
    font-size: var(--aca-text-xs);
}

.fh-btn-label {
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.fh-btn-primary {
    background: var(--aca-orange);
    border-color: var(--aca-orange);
}

.fh-btn-primary .fh-btn-icon,
.fh-btn-primary .fh-btn-label {
    color: var(--aca-on-brand);
}

/* KEEP the two rgba() lifts below: a box-shadow needs its alpha inline and
   CSS has no way to add alpha to a var() colour without color-mix(). Both are
   --aca-orange (#f37d21), at 25% on the primary and 18% on the outline. */
.fh-btn-primary:hover,
.fh-btn-primary:focus {
    background: var(--aca-orange-strong);
    border-color: var(--aca-orange-strong);
    box-shadow: 0 4px 12px rgba(243, 125, 33, 0.25);
}

.fh-btn-outline {
    background: var(--aca-surface);
    border-color: var(--aca-line-strong);
}

.fh-btn-outline .fh-btn-icon {
    color: var(--aca-orange-strong);
}

.fh-btn-outline .fh-btn-label {
    color: var(--aca-ink);
}

.fh-btn-outline:hover,
.fh-btn-outline:focus {
    border-color: var(--aca-orange);
    box-shadow: 0 4px 12px rgba(243, 125, 33, 0.18);
}

.fh-btn-sm {
    padding: 0.5rem 0.875rem;
}

.fh-btn-sm .fh-btn-label {
    font-size: var(--aca-text-xs);
}

/* The one focus ring for every interactive element on both surfaces (it used
   to be repeated in all three sheets). KEEP the rgba(): an outline colour
   cannot take its alpha from a var() without color-mix(); it is --aca-orange
   at 55%, the same hue --aca-focus uses for its box-shadow ring. */
.fh-btn:focus-visible,
.fh-link:focus-visible,
.fh-teaser-card:focus-visible,
.fh-chip:focus-visible,
.fh-fact-link:focus-visible,
.fh-footer-link:focus-visible {
    outline: 3px solid rgba(243, 125, 33, 0.55);
    outline-offset: 2px;
}

.fh-link {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.fh-link:hover,
.fh-link:focus {
    text-decoration: none;
}

.fh-link-icon {
    margin: 0 0.375rem 0 0;
    padding: 0;
    color: var(--aca-fg-green);
    font-size: var(--aca-text-xs);
}

.fh-link-label {
    margin: 0;
    padding: 0;
    color: var(--aca-fg-green);
    font-size: var(--aca-text-xs);
    font-weight: 600;
    line-height: 1.4;
}

.fh-link:hover .fh-link-label,
.fh-link:focus .fh-link-label {
    color: var(--aca-fg-green);
    text-decoration: underline;
}

/* ==========================================================================
   3. Home-page teaser (index.php, publicInfoRenderHomeTeaser())
   -------------------------------------------------------------------------- */

/* No frame of its own: the teaser is a block inside a .fh-section >
   .fh-container, which already supplies the band, the gutter and the rhythm.
   A background/radius/shadow here would draw a card inside that section. */
.fh-teaser {
    max-width: 72rem;
    margin: 0 auto;
}

.fh-teaser-head {
    margin: 0 0 1.75rem;
    padding: 0;
    text-align: center;
}

.fh-teaser .fh-eyebrow {
    text-align: center;
}

/* No !important on any of the .fh-* headings: a class already outranks the
   h1/h2/h3 rules in css/aca-base.css, media query or not. */
.fh-teaser-title {
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--aca-fg);
    font-family: inherit;
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.fh-teaser-lead {
    max-width: 40rem;
    margin: 0 auto 1rem;
    padding: 0;
    color: var(--aca-fg-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
    text-align: center;
}

.fh-nextup-line {
    display: inline-block;
    margin: 0;
    padding: 0.5rem 1.125rem;
    border-radius: 999px;
    background: var(--aca-orange-soft);
    color: var(--aca-ink);
    font-size: var(--aca-text-xs);
    line-height: 1.5;
    text-align: center;
}

.fh-nextup-line-icon {
    margin: 0 0.5rem 0 0;
    color: var(--aca-orange-strong);
}

.fh-nextup-line-label {
    color: var(--aca-orange-strong);
    font-weight: 700;
}

.fh-nextup-line-title {
    color: var(--aca-ink);
    font-weight: 700;
}

.fh-nextup-line-date {
    color: var(--aca-muted);
    white-space: nowrap;
}

.fh-teaser-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 1rem;
    margin: 0;
    padding: 0;
}

.fh-teaser-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.5rem;
    background: var(--aca-surface);
    border: 1px solid var(--aca-line);
    border-radius: var(--aca-radius);
    text-align: left;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.fh-teaser-card:hover,
.fh-teaser-card:focus {
    border-color: var(--aca-orange);
    box-shadow: var(--aca-shadow);
    text-decoration: none;
    transform: translateY(-2px);
}

.fh-teaser-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 0 1rem;
    padding: 0;
    border-radius: var(--aca-radius);
    background: var(--aca-orange-soft);
    color: var(--aca-orange-strong);
    font-size: 1.25rem;
}

.fh-teaser-card-title {
    display: block;
    margin: 0 0 0.375rem;
    padding: 0;
    color: var(--aca-fg);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.3;
}

.fh-teaser-card-text {
    display: block;
    flex: 1 1 auto;
    margin: 0 0 1rem;
    padding: 0;
    color: var(--aca-fg-muted);
    font-size: var(--aca-text-xs);
    font-weight: 400;
    line-height: 1.5;
}

.fh-teaser-card-cta {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--aca-fg-green);
    font-size: var(--aca-text-xs);
    font-weight: 700;
    line-height: 1.3;
}

.fh-teaser-card-cta-icon {
    margin: 0 0 0 0.375rem;
    transition: transform 0.15s ease;
}

.fh-teaser-card:hover .fh-teaser-card-cta,
.fh-teaser-card:focus .fh-teaser-card-cta {
    color: var(--aca-green-strong);
}

.fh-teaser-card:hover .fh-teaser-card-cta-icon,
.fh-teaser-card:focus .fh-teaser-card-cta-icon {
    transform: translateX(3px);
}

/* ==========================================================================
   4. Section frame, empty state and site footer
   -------------------------------------------------------------------------- */

/* Section frame --------------------------------------------------------- */

.fh-section {
    margin: 0;
    padding: 3rem 0;
    scroll-margin-top: 4.25rem;
}

.fh-section--alt {
    background: var(--aca-surface);
    border-top: 1px solid var(--aca-line);
    border-bottom: 1px solid var(--aca-line);
}

.fh-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 1.5rem;
    padding: 0;
}

.fh-section-head-text {
    flex: 1 1 32rem;
    margin: 0 1rem 0 0;
    padding: 0;
}

.fh-section-title {
    margin: 0 0 0.5rem;
    padding: 0;
    color: var(--aca-fg);
    font-family: inherit;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: left;
}

.fh-section-lead {
    max-width: 44rem;
    margin: 0;
    padding: 0;
    color: var(--aca-fg-muted);
    font-size: 1.0625rem;
    line-height: 1.55;
}

.fh-section-actions {
    display: flex;
    flex-wrap: wrap;
    margin: 0.75rem -0.25rem 0;
    padding: 0;
}

.fh-section-actions .fh-btn {
    margin: 0.25rem;
}

/* Empty state ----------------------------------------------------------- */

.fh-empty {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 1.5rem;
    background: var(--aca-surface);
    border: 1px dashed var(--aca-line-strong);
    border-radius: var(--aca-radius);
}

.fh-empty-icon {
    margin: 0 1rem 0 0;
    color: var(--aca-orange);
    font-size: 1.5rem;
}

.fh-empty-text {
    margin: 0;
    padding: 0;
    color: var(--aca-fg-muted);
    font-size: 1rem;
}

/* Site footer ----------------------------------------------------------- */

/* The school's navy with the lattice fading in on the right - the same band the
   navbar above and the portal sidebar wear. */
.fh-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid var(--aca-on-chrome-line);
    background: var(--aca-chrome);
}

.fh-footer::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 50%;
    background: linear-gradient(to right, transparent, var(--aca-orange) 45%);
    opacity: .16;
    -webkit-mask-image: var(--aca-pattern-star);
    mask-image: var(--aca-pattern-star);
    -webkit-mask-size: 56px 56px;
    mask-size: 56px 56px;
    pointer-events: none;
}

.fh-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.fh-footer-text {
    margin: 0 1.5rem 0.75rem 0;
    padding: 0;
}

.fh-footer-title,
.fh-footer-line {
    margin: 0;
    padding: 0;
    color: var(--aca-on-chrome-muted);
    font-size: var(--aca-text-xs);
    line-height: 1.6;
}

.fh-footer-title {
    color: var(--aca-on-brand);
    font-weight: 700;
}

.fh-footer-links {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0.75rem;
    padding: 0;
}

.fh-footer .fh-footer-link {
    display: inline-flex;
    align-items: center;
    margin: 0 1.25rem 0.25rem 0;
    padding: 0;
    text-decoration: none;
}

.fh-footer-icon {
    margin: 0 0.5rem 0 0;
    color: var(--fh-on-dark-accent);
}

.fh-footer-link-label {
    color: var(--aca-on-brand);
    font-size: var(--aca-text-xs);
    font-weight: 600;
    word-break: break-word;
}

.fh-footer-link:hover .fh-footer-link-label,
.fh-footer-link:focus .fh-footer-link-label {
    color: var(--fh-on-dark-accent);
    text-decoration: underline;
}

/* ==========================================================================
   5. Responsive - 991px layout switch, 576px phone type scale
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .fh-container {
        padding: 0 1rem;
    }

    .fh-teaser-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .fh-section {
        padding: 2.25rem 0;
    }

    .fh-section-head {
        align-items: flex-start;
    }

    .fh-section-head-text {
        margin: 0;
    }
}

@media (max-width: 991px) and (min-width: 577px) {
    .fh-teaser-title {
        font-size: 1.75rem;
    }

    .fh-section-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 576px) {
    .fh-teaser-title {
        font-size: 1.5rem;
    }

    .fh-section-title {
        font-size: 1.5rem;
    }

    .fh-teaser-lead,
    .fh-section-lead {
        font-size: 1rem;
    }

    .fh-btn-sm .fh-btn-label {
        font-size: var(--aca-text-xs);
    }

    .fh-nextup-line {
        font-size: var(--aca-text-xs);
    }
}

/* ==========================================================================
   6. Print
   Last in the sheet, so an equally specific screen rule above it loses on
   order; the page sheet loaded after this one adds its own print block.
   The paper, the pane, the ground and the chrome are the shell's on every
   page (css/aca-shell.css section 7, css/aca-base.css section 13); this
   block holds only the public pages' own footer, section actions and bands,
   and the Next up strip, which prints as ink in an outline like any pill.
   -------------------------------------------------------------------------- */

@media print {
    .fh-footer,
    .fh-section-actions {
        display: none;
    }

    .fh-container {
        max-width: none;
        padding: 0;
    }

    .fh-section,
    .fh-section--alt {
        padding: 0 0 0.75rem;
        background: var(--aca-surface);
        border: 0;
    }

    .fh-page .fh-section + .fh-section {
        break-before: page;
        page-break-before: always;
    }

    .fh-section-head {
        margin: 0 0 0.75rem;
    }

    .fh-nextup-line {
        background: none;
        border: 1px solid currentColor;
    }
}