/*
Theme Name: Fox Creek Schools
Theme URI: https://foxcreekhighschool.org
Author: Fox Creek Schools
Description: Bootstrap 5 education theme shared across the Fox Creek network, styled to match the existing school sites - black navigation, Fox Creek red, Alfa Slab One headings on Open Sans. One theme, per-site identity under Appearance > Customize.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: foxcreek
*/

:root {
    --fc-black: #121212;
    --fc-black-2: #1e1e1e;
    --fc-red: #e41a36;
    --fc-red-dark: #b8142b;
    --fc-gray: #e9e9e9;
    --fc-heading: "Alfa Slab One", "Rockwell", Georgia, serif;
    --fc-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Customizer overrides the two below per site. */
    --fc-primary: var(--fc-black);
    --fc-accent: var(--fc-red);
}

body { font-family: var(--fc-body); color: #222; overflow-x: hidden; }
h1, h2, h3, .h1, .h2, .h3, .display-4, .display-5, .display-6 { font-family: var(--fc-heading); font-weight: 400; letter-spacing: .01em; }
h4, h5, h6, .h4, .h5, .h6 { font-family: var(--fc-body); font-weight: 700; }

.fc-primary { color: var(--fc-primary); }
.fc-accent { color: var(--fc-accent); }
.bg-fc-primary { background-color: var(--fc-primary); }
.bg-fc-primary-dark { background-color: var(--fc-black); }
.bg-fc-accent { background-color: var(--fc-accent); color: #fff; }

/* Buttons: square, red, uppercase - as on the existing sites. */
.btn-fc, .btn-fc-accent {
    background-color: var(--fc-accent);
    border-color: var(--fc-accent);
    color: #fff;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .875rem;
    padding: .7rem 1.4rem;
}
.btn-fc:hover, .btn-fc:focus, .btn-fc-accent:hover, .btn-fc-accent:focus {
    background-color: var(--fc-red-dark);
    border-color: var(--fc-red-dark);
    color: #fff;
}
.btn-outline-fc {
    border-color: var(--fc-accent);
    color: var(--fc-accent);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    font-size: .875rem;
}
.btn-outline-fc:hover { background-color: var(--fc-accent); border-color: var(--fc-accent); color: #fff; }
.btn-outline-light { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .875rem; }

/* Skip link */
.fc-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 2000; background: var(--fc-accent); color: #fff; padding: .6rem 1rem; border-radius: 2px; }

/* Utility bar: thin, dark gray so it reads as separate from the black nav */
/* position+z-index so the school-switcher dropdown opens OVER the sticky
   navbar below it; Bootstrap .sticky-top is z-index 1020. */
.fc-utility { background-color: #2b2b2b; border-bottom: 1px solid #3a3a3a; font-size: .78rem; padding: .35rem 0; position: relative; z-index: 1035; }
.fc-utility .dropdown-menu { z-index: 1040; }
.fc-utility a, .fc-utility-btn { color: rgba(255,255,255,.85); text-decoration: none; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.fc-utility a:hover, .fc-utility-btn:hover { color: #fff; }
.fc-utility-btn { background: transparent; border: 1px solid transparent; padding: .15rem .5rem; border-radius: 2px; font-size: .78rem; }
.fc-utility-btn:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }
.fc-utility-btn[aria-pressed="true"] { background: var(--fc-accent); color: #fff; }
.fc-utility .dropdown-menu-dark { background: #1e1e1e; border-top: 3px solid var(--fc-accent); border-radius: 0; font-size: .85rem; }
.fc-utility .dropdown-item:hover, .fc-utility .dropdown-item:focus { background: var(--fc-accent); }
.fc-a11y { display: flex; gap: .25rem; border-left: 1px solid #444; padding-left: .75rem; }

/* Main nav: black, logo with divider, centered uppercase links, red CTA */
.navbar-fc { background-color: var(--fc-black) !important; padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.navbar-fc .container { min-height: 78px; }
.fc-brand { display: flex; align-items: center; height: 78px; padding-right: 1.25rem; margin-right: .5rem; border-right: 1px solid #333; }
.navbar-fc .navbar-brand { color: #fff; font-family: var(--fc-heading); font-size: 1.3rem; margin: 0; }
.navbar-fc .custom-logo-link { display: block; line-height: 0; }
.navbar-fc .custom-logo { height: 52px; width: auto; }
.navbar-fc .nav-link {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .07em;
    padding: 1.6rem .75rem;
    white-space: nowrap;
}
.navbar-fc .nav-link:hover, .navbar-fc .nav-link:focus,
.navbar-fc .show > .nav-link,
.navbar-fc .current-menu-item > .nav-link,
.navbar-fc .current-menu-ancestor > .nav-link,
.navbar-fc .current_page_parent > .nav-link { color: var(--fc-accent); }
.navbar-fc .dropdown-toggle::after { margin-left: .35em; vertical-align: .15em; }
.navbar-fc .navbar-toggler { border-color: rgba(255,255,255,.4); margin: 1rem 0; }
.navbar-fc .dropdown-menu { background: var(--fc-black-2); border: 0; border-top: 3px solid var(--fc-accent); border-radius: 0; margin-top: 0; min-width: 14rem; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.navbar-fc .dropdown-item { color: #fff; font-size: .85rem; padding: .6rem 1.25rem; }
.navbar-fc .dropdown-item:hover, .navbar-fc .dropdown-item:focus,
.navbar-fc .dropdown-item.active, .navbar-fc .dropdown-item:active { background: var(--fc-accent); color: #fff; }
.fc-nav-cta { white-space: nowrap; }
@media (min-width: 1200px) {
    .navbar-fc .dropdown:hover > .dropdown-menu { display: block; }
}
@media (max-width: 1199.98px) {
    .fc-brand { border-right: 0; height: 64px; }
    .navbar-fc .custom-logo { height: 44px; }
    .navbar-fc .nav-link { padding: .75rem .5rem; }
    .navbar-fc .navbar-collapse { padding-bottom: 1rem; }
    .navbar-fc .dropdown-menu { box-shadow: none; margin-left: 1rem; }
    .fc-nav-cta { display: inline-block; margin-top: .5rem; }
}

/* Hero: dark photo, white slab headline */
.fc-hero {
    background-color: var(--fc-black);
    background-image: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.65));
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 120px 0 110px;
}
.fc-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.fc-hero .lead { color: rgba(255,255,255,.92); }
.fc-hero .badge { border-radius: 2px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* Black band of red quick-link buttons directly under the hero */
.fc-band { background-color: #000; padding: 1.25rem 0; }
.fc-band a {
    display: block;
    background: var(--fc-accent);
    color: #fff;
    text-decoration: none;
    font-family: var(--fc-heading);
    font-size: 1.15rem;
    text-align: center;
    padding: .8rem 1rem;
    border-radius: 2px;
    box-shadow: 0 4px 10px rgba(0,0,0,.35);
    transition: transform .1s ease, background-color .1s ease;
}
.fc-band a:hover { background: var(--fc-red-dark); transform: translateY(-2px); }
.fc-band a .bi { margin-right: .4rem; }

/* Announcement */
.fc-announce { border-left: 6px solid var(--fc-accent); border-radius: 2px; }

/* Gray sections + white cards, as on the existing sites */
.bg-light { background-color: var(--fc-gray) !important; }
.card-fc { border: 0; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.card-fc .card-title a { color: #222; text-decoration: underline; text-decoration-color: var(--fc-accent); text-underline-offset: 3px; }
.card-fc .card-title a:hover { color: var(--fc-accent); }

/* Fast facts on black */
.fc-facts { background: var(--fc-black); color: #fff; }
.fc-fact { text-align: center; }
.fc-fact .display-6 { color: var(--fc-accent); }
.fc-fact .text-muted { color: rgba(255,255,255,.7) !important; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }

/* Schools grid (district) */
.fc-school-card { border-top: 5px solid var(--fc-accent); }

/* Page header band */
.fc-page-head { background: var(--fc-black); color: #fff; padding: 3.5rem 0; border-bottom: 5px solid var(--fc-accent); }
.fc-page-head .breadcrumb-nav a { color: rgba(255,255,255,.7); }

/* Footer */
.fc-footer { background: #000; }
.fc-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.fc-footer a:hover { color: var(--fc-accent); }
.fc-footer .fc-social a { font-size: 1.5rem; margin-right: .75rem; }
.fc-footer h2 { font-family: var(--fc-body); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--fc-accent); }

/* Content pages */
.fc-content { max-width: 820px; }
.fc-content img { max-width: 100%; height: auto; }
.fc-content h2 { color: #222; margin-top: 2rem; font-size: 1.6rem; }
.fc-content a:not(.btn) { color: var(--fc-accent); }
.fc-content .btn-fc, .fc-content .btn-fc-accent { color: #fff; text-decoration: none; }
.fc-content .btn-fc:hover, .fc-content .btn-fc-accent:hover { color: #fff; }
.fc-content h4 { font-size: 1.15rem; font-weight: 400; color: #444; }
.fc-content figure img { max-height: 420px; width: auto; }
.fc-content table { width: 100%; }

section[id] { scroll-margin-top: 80px; }

/* =========================================================================
   Accessibility modes. Toggled from the utility bar; persisted in
   localStorage; also honours the OS "prefers more contrast" setting.
   ========================================================================= */
html[data-textsize="large"] { font-size: 118%; }

html[data-contrast="high"] body,
html[data-contrast="high"] .bg-light,
html[data-contrast="high"] .card,
html[data-contrast="high"] .list-group-item,
html[data-contrast="high"] .alert,
html[data-contrast="high"] .accordion-item { background: #000 !important; color: #fff !important; }
html[data-contrast="high"] .text-muted,
html[data-contrast="high"] .text-secondary,
html[data-contrast="high"] .text-white-50 { color: #e6e6e6 !important; }
html[data-contrast="high"] .fc-hero { background-image: none !important; background-color: #000 !important; border-bottom: 4px solid #fff; }
html[data-contrast="high"] .fc-hero h1 { text-shadow: none; }
html[data-contrast="high"] .navbar-fc, html[data-contrast="high"] .fc-utility, html[data-contrast="high"] .fc-band,
html[data-contrast="high"] .fc-footer, html[data-contrast="high"] .fc-facts, html[data-contrast="high"] .fc-page-head { background: #000 !important; }
html[data-contrast="high"] .navbar-fc { border-bottom: 3px solid #fff; }
html[data-contrast="high"] .card, html[data-contrast="high"] .list-group-item, html[data-contrast="high"] .alert,
html[data-contrast="high"] .card-fc, html[data-contrast="high"] .fc-school-card { border: 2px solid #fff !important; box-shadow: none !important; }
html[data-contrast="high"] a, html[data-contrast="high"] .nav-link, html[data-contrast="high"] .dropdown-item,
html[data-contrast="high"] .card-title a { color: #ffff00 !important; text-decoration: underline !important; text-decoration-color: #ffff00 !important; }
html[data-contrast="high"] .fc-accent, html[data-contrast="high"] .fc-fact .display-6, html[data-contrast="high"] .fc-footer h2 { color: #ffff00 !important; }
html[data-contrast="high"] .btn, html[data-contrast="high"] .fc-band a, html[data-contrast="high"] .badge {
    background: #000 !important; color: #ffff00 !important; border: 2px solid #ffff00 !important; box-shadow: none !important; text-decoration: none !important;
}
html[data-contrast="high"] .btn:hover, html[data-contrast="high"] .fc-band a:hover { background: #ffff00 !important; color: #000 !important; }
html[data-contrast="high"] .navbar-fc .dropdown-menu, html[data-contrast="high"] .fc-utility .dropdown-menu-dark { background: #000 !important; border: 2px solid #fff !important; }
html[data-contrast="high"] .dropdown-item:hover, html[data-contrast="high"] .dropdown-item:focus { background: #ffff00 !important; color: #000 !important; }
html[data-contrast="high"] .fc-utility-btn[aria-pressed="true"] { background: #ffff00 !important; color: #000 !important; }
html[data-contrast="high"] hr { border-color: #fff; opacity: 1; }
html[data-contrast="high"] *:focus-visible { outline: 3px solid #ffff00 !important; outline-offset: 2px; }
html[data-contrast="high"] .form-control, html[data-contrast="high"] .form-select { background: #000; color: #fff; border: 2px solid #fff; }