/* FSC overrides — feedback round 1 (2026-05-07) */

/* #5: bigger menu burger on mobile */
@media (max-width: 1024px) {
    .nav-burger { width: 48px; height: 48px; font-size: 1.5rem; display: inline-flex !important; }
}
@media (max-width: 768px) {
    .nav-burger { width: 52px; height: 52px; font-size: 1.6rem; }
}

/* #6 + #44 + #61 + #71 + #140: alternating brand colours
 * Make every coloured-letter group sit flush so the brand reads as ONE word.
 * Override any parent flex gap, kerning is left to the font. */
.brand-fs-color .gn, .brand-fs-color .or { display: inline; letter-spacing: inherit; margin: 0; padding: 0; }
.brand-fs-color .gn { color: var(--green); }
.brand-fs-color .or { color: var(--orange); }
.ft-brand-name.brand-fs-color { gap: 0; }
/* Inline brand wrapper used by the JS text-walker so it never gets flex-gapped */
.fsc-brand-text { display: inline; white-space: nowrap; }
.fsc-brand-text .gn { color: var(--green); }
.fsc-brand-text .or { color: var(--orange); }
/* High-contrast variant for green/dark backgrounds (e.g. green CTA box, dark footer,
 * green stats bar). Green letters would otherwise disappear. */
.fsc-brand-text.on-dark .gn { color: #ffffff; }
.fsc-brand-text.on-dark .or { color: #ffb46b; }
/* Same handling for the explicit brand container (footer, logo, auth title) when its parent has green/dark bg */
footer .brand-fs-color .gn, .stats-bar.fsc-green .brand-fs-color .gn { color: #ffffff !important; }
footer .brand-fs-color .or, .stats-bar.fsc-green .brand-fs-color .or { color: #ffb46b !important; }

/* Logo mark image */
.logo-mark.has-img { background: transparent; padding: 0; overflow: hidden; }
.logo-mark.has-img img { width: 100%; height: 100%; object-fit: contain; }
.logo-mark.lg { width: 56px; height: 56px; }

/* #13: stats with green bg, white text */
.stats-bar.fsc-green { background: var(--green); border-color: var(--green); }
.stats-bar.fsc-green .stat-cell { border-color: rgba(255,255,255,0.2); }
.stats-bar.fsc-green .stat-n,
.stats-bar.fsc-green .stat-l { color: white; }
.stats-bar.fsc-green .stat-l { color: rgba(255,255,255,0.78); }

/* #34: bigger messages icon */
.nav-msg { background: var(--orange-pale) !important; color: var(--orange) !important; padding: 8px 14px !important; border-radius: 10px !important; font-size: 0.95rem !important; font-weight: 700 !important; border: 1.5px solid var(--orange-100) !important; }
.nav-msg .badge { background: var(--orange); color: white; border-radius: 50%; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; margin-left: 6px; }

/* Step 1 hyperlink in How It Works */
.how-step-title a { color: var(--green); text-decoration: underline; }
.how-step-title a:hover { color: var(--orange); }

/* Saved search modal */
.fsc-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; }
.fsc-modal.open { display: flex; }
.fsc-modal-card { background: var(--surface); border-radius: 16px; padding: 26px; max-width: 440px; width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,0.2); }

/* Featured schools carousel */
.fsc-carousel { position: relative; }
.fsc-carousel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.fsc-carousel-track::-webkit-scrollbar { height: 6px; }
.fsc-carousel-track::-webkit-scrollbar-thumb { background: var(--green-100); border-radius: 3px; }
.fsc-carousel-track .cat-card { min-width: 280px; scroll-snap-align: start; }
.fsc-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font-size: 1rem; box-shadow: 0 4px 14px rgba(0,0,0,0.06); z-index: 5; }
.fsc-carousel-arrow.prev { left: -10px; }
.fsc-carousel-arrow.next { right: -10px; }
.fsc-carousel-arrow:hover { border-color: var(--orange); color: var(--orange); }

/* #46 / #60: high contrast mode — strengthened pass */
body.fsc-hc {
    --bg: #ffffff; --surface: #ffffff; --text: #000000; --grey: #000; --grey-l: #000;
    --border: #000000; --green: #003300; --orange: #b34a00;
    --green-pale: #ffffff; --orange-pale: #ffffff; --green-100: #000; --orange-100: #000;
}
body.fsc-hc, body.fsc-hc * {
    color: #000 !important;
    background-color: #fff !important;
    text-shadow: none !important;
    box-shadow: none !important;
}
body.fsc-hc { font-weight: 600 !important; }
body.fsc-hc * { font-weight: 600 !important; }
body.fsc-hc .panel, body.fsc-hc .l-card, body.fsc-hc .cat-card, body.fsc-hc .stat-box, body.fsc-hc .auth-card,
body.fsc-hc input, body.fsc-hc select, body.fsc-hc textarea, body.fsc-hc button, body.fsc-hc .pill, body.fsc-hc .tab, body.fsc-hc .form-input, body.fsc-hc .form-select {
    border: 2.5px solid #000 !important;
    background: #fff !important;
}
body.fsc-hc a, body.fsc-hc .nav-a, body.fsc-hc .ft-a { text-decoration: underline !important; }
body.fsc-hc .btn-fill, body.fsc-hc .hero-btn-primary, body.fsc-hc .hero-btn-green, body.fsc-hc .search-submit {
    background: #000 !important; color: #fff !important; border-color: #000 !important;
}
body.fsc-hc .btn-fill *, body.fsc-hc .hero-btn-primary *, body.fsc-hc .hero-btn-green *, body.fsc-hc .search-submit * { color: #fff !important; }
body.fsc-hc img, body.fsc-hc svg { filter: contrast(1.2); }
body.fsc-hc .stats-bar.fsc-green, body.fsc-hc .stats-bar.fsc-green * { background: #000 !important; color: #fff !important; }

/* #130: hero colours - "shouldn't cost" orange (italic serif), "the earth" green */
.hero-h1 .accent.accent-green { color: var(--green) !important; }
.hero-h1 .serif.accent-orange { color: var(--orange) !important; }

/* #107: sticky main nav bar */
nav.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
body.fsc-hc nav.nav { background: #fff !important; border-bottom: 2.5px solid #000 !important; }

/* #89: dashboard stat-box as link */
a.stat-box-link { display: block; }
a.stat-box-link:hover { border-color: var(--orange); transform: translateY(-1px); transition: all 0.15s; }

/* #70: small phones - shrink the brand so it stays on ONE line next to the logo image,
 * never overflows to a second line, and never overlaps the Sign-up button. */
@media (max-width: 540px) {
    .nav { padding: 0 10px; gap: 6px; align-items: center; min-height: 56px; }
    .logo { gap: 6px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
    .logo-mark.has-img { width: 30px; height: 30px; flex-shrink: 0; }
    .logo-text { font-size: 0.78rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: none; display: inline-block; }
    .nav-right { gap: 6px; flex-shrink: 0; }
    .nav-right .btn-sm { padding: 6px 10px; font-size: 0.78rem; white-space: nowrap; }
    .nav-right .btn-ghost { display: none; } /* hide secondary buttons on tiny screens, burger still shows the menu */
}
@media (max-width: 420px) {
    .logo-text { font-size: 0.7rem; }
    .nav-right .btn-sm { padding: 5px 8px; font-size: 0.72rem; }
}
@media (max-width: 360px) {
    .logo-text { font-size: 0.62rem; }
    .logo-mark.has-img { width: 26px; height: 26px; }
}

/* #80: top banner wraps language toggle onto a centred second line on small screens */
.topbanner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; row-gap: 4px; }
@media (max-width: 560px) {
    .topbanner .tb-sep { display: none; }
    .topbanner > span:nth-child(3),
    .topbanner > span.tb-lang-group { flex-basis: 100%; margin: 2px auto 0; text-align: center; }
    .topbanner .tb-lang-group { display: inline-flex; gap: 10px; justify-content: center; }
}

/* #114: admin "viewing as user" bar */
.fsc-admin-bar { background: #1f2937; color: #fff; padding: 8px 16px; text-align: center; font-size: 0.82rem; font-weight: 600; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; }
.fsc-admin-bar a { color: #fff; text-decoration: underline; }
.fsc-admin-bar .pill { background: var(--orange); padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }

/* #110/#123: searchable select wrapper */
.fsc-search-select-wrap { position: relative; }
.fsc-search-select-input { width: 100%; padding: 8px 10px; font-size: 0.85rem; border: 1.5px solid var(--border); border-radius: 8px; margin-bottom: 6px; }

/* Hero app-preview: make the elements actually interactive (was a static mockup) */
.app-preview .app-card { transition: transform 0.15s, box-shadow 0.15s; cursor: pointer; }
.app-preview .app-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.app-preview .filter-chip { cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; }
.app-preview .filter-chip:hover { background: var(--green-pale); color: var(--green); border-color: var(--green-100); }
.app-preview .app-search-bar input::placeholder { color: var(--grey); }
.app-preview .app-search-bar:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px rgba(83,127,53,0.12); }

/* #107: ensure sticky nav actually sticks on mobile (the body-level overflow rules can
 * break sticky in some browsers). Use sticky on .nav plus a non-clipping ancestor. */
body, html { overflow-x: clip !important; }
nav.nav { position: sticky !important; top: 0 !important; z-index: 100; background: var(--surface); }

/* #131: about page - centre justify the body content */
.about-prose, .about-prose p { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }

/* #141: National Scale boxes on mobile - force stack to 1 column when the grid is set inline */
@media (max-width: 700px) {
    .stats-bar.fsc-green .stats-inner,
    section.cat-grid,
    div[style*="grid-template-columns:repeat(3,1fr)"].cat-grid { grid-template-columns: 1fr !important; }
}

/* #135: Save search button - more obvious, no floppy */
[data-saved-search-btn] { background: var(--orange) !important; color: #fff !important; border-color: var(--orange) !important; font-weight: 700 !important; }
[data-saved-search-btn]:hover { filter: brightness(1.05); }

/* Hero app-preview responsiveness fix
 * The hero is 2 columns down to 768px. Between 769-1100px the right pane (with
 * the "Search your school..." bar, filter chips, and 4 mini cards) gets squeezed
 * because the internal app-grid stays 2x2 no matter the width. Stack earlier
 * and let the internals reflow. */
@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr !important; gap: 36px !important; }
    .app-preview { order: 2; max-width: 520px; margin: 0 auto; width: 100%; }
}
@media (max-width: 480px) {
    .app-grid { grid-template-columns: 1fr !important; }
    .app-search-bar { font-size: 0.74rem; padding: 6px 10px; }
    .app-filter-row { padding-bottom: 2px; }
}

/* #38: real social icons */
.social-btn { display: inline-flex; align-items: center; gap: 8px; }
.social-btn svg { width: 18px; height: 18px; }
.social-btn.google { color: #4285F4; }
.social-btn.facebook { color: #1877F2; }

/* ============================================================ */
/*  Mobile horizontal-scroll containment (no desktop drag)       */
/* ============================================================ */

/* Belt-and-braces: prevent ANY horizontal page scroll.           *
 * iOS Safari sometimes ignores body{overflow-x:hidden} alone,    *
 * so we apply it to html + body and use 100vw as a hard ceiling. */
/* html uses overflow-x:clip so sticky positioning still works in nav/sidebars */
html { overflow-x: clip; max-width: 100vw; }
body { overflow-x: hidden; max-width: 100vw; }
/* clip support fallback handled by overflow-x:hidden on body */

/* Media should never overflow its container */
img, video, iframe, embed, object, canvas, svg {
    max-width: 100%;
    height: auto;
}

/* Wide tables (dashboard) scroll inside their wrapper, not the page */
.tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.tbl {
    min-width: 600px;     /* keep cells readable; user scrolls within wrapper */
}

/* Long unbreakable strings (URLs, emails) wrap inside cards */
.l-title, .l-school, .panel-title, .cat-info-name, .sch-name,
.chat-item-name, .chat-item-last, .crumbs {
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

/* Crumbs wrap to next line on small screens instead of overflowing */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    align-items: center;
}

/* Carousel — hide pre-existing edge arrows on small screens since   *
 * negative-positioned arrows can poke past the viewport             */
@media (max-width: 768px) {
    .fsc-carousel-arrow { display: none; }
    .fsc-carousel-track { padding: 0 4px 8px; }
}

/* Tab strips: ensure the wrapping container clips any inner-scroll   *
 * indicators so the page itself doesn't grow                         */
.tabs { max-width: 100%; }

/* Decorative absolute layers must never push width                  */
.hero, .cta-block, .stats-bar { overflow: hidden; }

/* Rare wide selects/inputs should fit on small screens              */
.form-input, .form-select, .form-textarea, .search-in {
    max-width: 100%;
}

/* Pre/code blocks wrap on mobile (e.g. CMS pages)                   */
pre, code, kbd, samp {
    white-space: pre-wrap;
    word-break: break-word;
}

/* Modals/dialogs respect viewport width                             */
dialog, .fsc-modal-card {
    max-width: calc(100vw - 24px);
}

/* ─────────────────────────────────────────────────────────────
   Footer: brand-colour palette (green background + orange accents)
   Replaces the original dark #1c2218 theme. Feedback round 2.
   ───────────────────────────────────────────────────────────── */
footer {
    background: var(--green) !important;
    color: rgba(255, 255, 255, 0.88) !important;
    border-top: 4px solid var(--orange) !important;
}
footer .ft-brand-name {
    color: #ffffff !important;
}
footer .ft-brand-dot {
    background: var(--orange) !important;
    box-shadow: 0 0 0 3px rgba(234, 109, 19, 0.25);
}
footer .ft-p {
    color: rgba(255, 255, 255, 0.9) !important;
}
footer .ft-h {
    color: #ffd9b3 !important; /* warm cream-orange for legibility on green */
    border-bottom: 1px solid rgba(234, 109, 19, 0.45);
    padding-bottom: 8px;
}
footer .ft-links { gap: 8px; }
footer .ft-a {
    color: rgba(255, 255, 255, 0.88) !important;
    transition: color 0.2s, padding-left 0.2s;
}
footer .ft-a:hover {
    color: #ffd9b3 !important;
    padding-left: 4px;
}
footer .ft-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
}
footer .ft-copy {
    color: rgba(255, 255, 255, 0.78) !important;
}
footer .ft-copy a {
    color: #ffd9b3 !important;
}
footer .ft-copy a:hover {
    color: #ffffff !important;
}
/* Inline social links (Instagram, LinkedIn) */
footer a[href*="instagram"],
footer a[href*="linkedin"] {
    color: rgba(255, 255, 255, 0.92) !important;
}
footer a[href*="instagram"]:hover,
footer a[href*="linkedin"]:hover {
    color: #ffd9b3 !important;
}
/* The small status line under the brand blurb */
footer .ft-grid > div:first-child > p[style*="0.72rem"] {
    color: rgba(255, 255, 255, 0.65) !important;
}