/* ==========================================================================
   305 Kolts — site-specific design tokens & components
   Kept separate from the vendor theme (main.css) so overrides are easy
   to find and don't get lost in generated/minified template CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-reveal (.wow) — a real CSS transition instead of animate.css's
   keyframes. The old approach toggled a class that changed the element's
   animation-duration from its unset default (0s) to 1s *after* the element
   already had animation-name set from page load, which is a fragile trigger
   and — worse — fought with the generic `transition: all 0.4s` most
   headings/paragraphs already carry (main.css), since both mechanisms were
   racing to animate the same opacity/transform on the same tick. A
   transition (higher specificity than that generic rule, so it wins
   cleanly) gives one predictable animation, timed to feel closer to CSS
   easing than the vendor default, on JS setting the .animated class.
   -------------------------------------------------------------------------- */
.wow.fadeInUp,
.wow.fadeInLeft {
    /* These elements still carry animate.css's own "fadeInUp"/"fadeInLeft"
       classes (animation-name) from the original markup, and our own
       .animated class also still matches animate.css's ".animated"
       rule (animation-duration: 1s). That leftover keyframe ANIMATION was
       silently overriding our TRANSITION below — per spec, a running
       animation always wins over a transition on the same property, so
       the transition was being computed but never actually painted,
       which is why this looked like an instant pop no matter what easing
       or duration was set. Explicitly killing the animation leaves our
       transition as the only thing touching opacity/transform. */
    animation: none;
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.wow.fadeInUp {
    transform: translateY(40px);
}
.wow.fadeInLeft {
    transform: translateX(-40px);
}
.wow.fadeInUp.animated,
.wow.fadeInLeft.animated {
    opacity: 1;
    transform: none;
}

:root {
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.16);
    --card-bg: var(--white);
    --space-section: 150px;
    --space-section-md: 120px;
    --team-photo: url('/assets/img/kolts-10.jpg');
    --overlay-dark: rgba(49, 49, 49, 0.85);

    /* Type scale — h1/h2/h3 keep the vendor theme's tested hero/section/card
       sizes (100/48/24px desktop). h4-h6 are re-tuned below into a real
       staircase (~1.13-1.17 ratio between steps) so each level reads as a
       distinct step when scanning — they previously collapsed to two sizes
       (h4 === h5 at 18px, h6 tied to body at 16px). */
    --fs-h4: 21px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --lh-heading-tight: 1.3;
    --lh-body: 1.6;
}

/* --------------------------------------------------------------------------
   Readability: body copy at 600 weight with a fixed 28px line-height reads
   heavy and tight for extended text. Regular weight + a relative line-height
   also gives body copy real contrast against 700-900 weight headings/buttons,
   which is what actually makes a page easy to scan (weight, not just size,
   signals "this is structure" vs "this is content").
   -------------------------------------------------------------------------- */
body {
    /* Chakra Petch (kept for headings, buttons, nav, and labels) is a
       display/technical face — its condensed, angular letterforms make
       long paragraph text noticeably harder to read. Inter is a plain,
       highly legible sans built for body copy. */
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: var(--lh-body);
    /* All-caps body copy hurts readability (word-shape cues are what make
       fast reading/scanning possible). Headings, buttons, nav, and labels
       each carry their own explicit uppercase rule already, so this only
       affects plain paragraph/link text. */
    text-transform: none;
}

/* Offcanvas menu's Instagram icon: drop the vendor theme's grey square
   background box, leaving a plain icon consistent with the footer's. */
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a {
    background: transparent;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover {
    background-color: transparent;
    color: var(--theme);
}

/* Small "eyebrow" label shown above a section/hero heading (e.g. "Who We
   Are" above "A Community That Supports Every Athlete"). The template had
   these as <h6> tags sitting above an <h1>/<h2> — using a heading level out
   of document order purely for its visual style breaks the page's heading
   hierarchy for screen readers. This carries the identical look, semantically
   neutral. The hero variant keeps its own scoped gold/larger styling in
   main.css (.hero-1 .hero-content .eyebrow). */
.eyebrow {
    display: block;
    margin: 0 0 12px;
    font-family: "Big Shoulders", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--header);
    text-transform: uppercase;
    transition: all 0.4s ease-in-out;
}

/* The hero's supporting line is marked up as an <h2> (SEO wants a real
   heading here, not a <p>), but it should read visually as body copy, not
   as a bold/uppercase/Big-Shoulders heading — this resets it back to the
   original paragraph look. */
.hero-subtitle {
    font-family: "Chakra Petch", sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    color: var(--white);
    line-height: 150%;
    margin-top: 24px;
    max-width: 785px;
}

/* The offcanvas "Contact Info" label sits in the DOM before the page's own
   <h1> (it's fixed UI chrome, not page content) — any heading level there
   would put a heading ahead of the page's h1 in reading order, so this is a
   plain, non-heading label instead. Same visual size as it had as an h4. */
.offcanvas-heading {
    margin: 0;
    font-family: "Big Shoulders", sans-serif;
    font-size: var(--fs-h4);
    font-weight: 400;
    color: var(--header);
    text-transform: uppercase;
}

/* Primary page navigation inside the offcanvas menu. Below 1199px the header's
   inline nav (.header-left) is hidden (see the matching media query below),
   so this is the only way to move between pages at tablet/mobile widths. */
.offcanvas__nav {
    margin-bottom: 30px;
}
.offcanvas__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.offcanvas__nav ul li:not(:last-child) {
    margin-bottom: 14px;
}
.offcanvas__nav ul li a {
    font-family: "Big Shoulders", sans-serif;
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--header);
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.offcanvas__nav ul li a:hover {
    color: var(--theme);
}

/* The header's inline nav only has room at wide viewports; below that, the
   offcanvas panel's nav links (above) are the real navigation. This replaces
   a broken meanmenu setup that hid this nav at the same breakpoint without
   ever rendering its own replacement menu. */
@media (max-width: 1199px) {
    .header-left {
        display: none;
    }
}

/* The three "EMAIL NOW / service area / phone number" labels on the Contact
   page are real h3s (a visually-hidden h2 sits above the card row so they
   don't skip a level under the page's h1). Kept the old card-label look —
   size, weight, spacing — but off the Big Shoulders display font, so a
   heading added purely for document structure doesn't read as a big
   headline the way the tier/card-title h3s elsewhere intentionally do.
   Matches the body font (see body { font-family } above) rather than a
   hardcoded value, so the two stay in sync if that ever changes again. */
.contact-info-heading {
    display: block;
    margin: 0 0 10px;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 134%;
    color: var(--header);
    text-transform: uppercase;
}

/* Contact form field labels were <h4> tags — purely for the bold small-caps
   look, not real headings (they put an h4 directly under the "Send Us
   Message" h2, no h3 between). A <label> is the actually-correct element
   here: it's clickable/focuses its input and gets announced by screen
   readers, which a heading never did. Same visual look as the old h4. */
.form-label-heading {
    display: block;
    margin: 0;
    font-family: "Big Shoulders", sans-serif;
    font-size: var(--fs-h4);
    font-weight: 400;
    color: var(--header);
    text-transform: uppercase;
}

/* Footer widget titles are marked up as h3 (a valid one-level-deeper step
   from the h2 that ends most pages' main content, and a same-or-shallower
   step on the rest — so no page skips a heading level going into the
   footer). Sized to match their original h5 appearance. */
.footer-widget-heading {
    font-size: var(--fs-h5);
    font-weight: 700;
}

/* h1-h3 keep the vendor theme's tested hero/section/card sizes. h4-h6 form a
   real staircase (24 / 21 / 18 / 16px, ~1.13-1.17 ratio per step) instead of
   the old 18 / 18 / 16px, where two adjacent heading levels were identical. */
h3 {
    font-weight: 500;
    text-transform: none;
}

/* Reusable utility: put this on any heading (h3 and up) that needs to sit
   quietly as a document-structure heading rather than read as a big
   display headline — drops the Big Shoulders font and heavy weight in
   favor of the body font/weight, keeping the element's own font-size. */
.sub-header {
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 400;
    text-transform: none;
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-heading-tight);
}
h5 {
    font-size: var(--fs-h5);
    line-height: var(--lh-heading-tight);
}
h6 {
    font-size: var(--fs-h6);
    line-height: var(--lh-heading-tight);
}

/* --------------------------------------------------------------------------
   More breathing room between sections site-wide, and alternating light/white
   backgrounds (via .section-bg) so adjacent sections read as distinct blocks
   instead of blending into one long stretch of the same color.
   -------------------------------------------------------------------------- */
.section-padding {
    padding: var(--space-section) 0;
}
@media (max-width: 1199px) {
    .section-padding {
        padding: var(--space-section-md) 0;
    }
}

/* --------------------------------------------------------------------------
   Elevated cards — used for tiers, mission/values, leadership, sponsors,
   "what we offer": one consistent look everywhere a .match-box-items shows up.
   -------------------------------------------------------------------------- */
.match-box-items {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.match-box-items:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.match-box-items .theme-btn {
    margin-top: auto;
    align-self: center;
}

/* Icon shown above a card's heading (tiers, values, "what we offer") */
.card-icon {
    font-size: 32px;
    color: var(--theme);
    margin-bottom: 16px;
}

/* Sponsor logos on the Sponsorship page — plain, no card chrome */
.sponsor-logo-plain {
    width: 190px;
    height: 190px;
    max-width: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sponsor-logo-plain:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   CTA section — was entirely unstyled in the vendor theme (no padding at all)
   -------------------------------------------------------------------------- */
.cta-section {
    padding: var(--space-section) 0;
}
.cta-section.bg-cta {
    background-color: var(--bg2);
}
@media (max-width: 1199px) {
    .cta-section {
        padding: var(--space-section-md) 0;
    }
}
.cta-section h2,
.cta-section p {
    color: var(--white);
}
.cta-section .hero-btn {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Shared photo backgrounds — the same team photo is reused as a hero/page
   background across pages, so it lives here once instead of inline per page.
   -------------------------------------------------------------------------- */
.bg-team-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), var(--team-photo);
}
.hero-section1.bg-team-photo {
    background-attachment: fixed;
}
.gt-breadcrumb-wrapper.bg-team-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), var(--team-photo);
}
.gt-breadcrumb-wrapper.solid-bg {
    background-color: var(--header);
}
.gt-breadcrumb-wrapper.bg-about-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), url('/assets/img/kolts-06.jpg');
}
.gt-breadcrumb-wrapper.bg-sponsor-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), url('/assets/img/kolts-08.jpg');
    background-position: top center;
}
.gt-breadcrumb-wrapper.bg-contact-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), url('/assets/img/kolts-2025.jpg');
    background-position: top center;
}

/* Taller inner-page hero so the background photos have more room to show */
.gt-breadcrumb-wrapper .gt-page-heading {
    padding: 310px 0 180px;
}
.sponsor-intro-bg {
    background-color: var(--theme);
}

/* Homepage "Our Generous Sponsors" section — a subtle paper texture behind
   the brand-gold overlay, instead of the Sponsorship page's flat gold. */
.bg-sponsors-photo {
    background-image: linear-gradient(rgba(193, 167, 77, 0.85), rgba(193, 167, 77, 0.85)), url('/assets/img/football-field-ball.webp');
}
.bg-join-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), url('/assets/img/kolts-07.jpg');
    background-position: center;
}
.cta-logo-badge {
    max-width: 90px;
    height: auto;
    margin-bottom: 24px;
}

/* Homepage "Support the 305 Kolts" CTA — parallax photo background instead
   of the shared component's solid dark background (see cta.njk's ctaHomeStyle
   flag, set only on the homepage). */
.bg-support-photo {
    background-image: linear-gradient(var(--overlay-dark), var(--overlay-dark)), url('/assets/img/305-kolts-05.jpg');
}

/* --------------------------------------------------------------------------
   Homepage hero image column
   -------------------------------------------------------------------------- */
.hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Legal pages (Terms, Privacy, Disclaimer) — plain prose content */
.legal-content p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
}
.legal-content h2 {
    /* These are marked up as h2 (the page's first real content sections,
       directly under the h1 — there's no separate h1-level intro section
       on these pages) but kept at the site's h3 size so promoting them
       semantically doesn't blow them up to full 48px section-title size. */
    font-size: 24px;
    line-height: 134%;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.legal-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}
.legal-content li {
    margin-bottom: 0.5rem;
}

/* Closing statement at the end of the About page's Leadership Team section */
.closing-statement-wrapper {
    max-width: 750px;
    margin: 60px auto 0;
}
.about-closing-statement {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--theme);
    margin: 0;
    text-transform: none;
}
.about-closing-statement .quote-mark {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    color: var(--header);
    opacity: 0.35;
}

/* Custom equipment/apparel sponsorship price cards */
.equipment-item {
    height: 100%;
    padding: 24px 20px;
    text-align: center;
    background-color: var(--card-bg);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.equipment-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.equipment-item h3 {
    font-size: var(--fs-h5);
    margin-bottom: 12px;
}
.equipment-item p {
    margin: 0;
    font-weight: 700;
    color: var(--theme);
}

/* Unit label next to custom equipment sponsorship prices */
.equipment-unit {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text);
}

/* Contact form dropdowns — a plain native <select> styled to match the
   borderless white inputs/textareas next to it (no JS dropdown library). */
.single-select {
    display: block;
    width: 100%;
    height: 57px;
    padding: 0 44px 0 25px;
    background-color: var(--white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23313131' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    border: none;
    border-radius: 0;
    color: var(--text);
    font-family: "Chakra Petch", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.single-select:focus {
    outline: 2px solid var(--theme);
    outline-offset: -2px;
}

/* Dark bottom bar of the footer (copyright + legal links) */
.footer-bottom-area {
    background-color: var(--header);
    padding: 24px 0;
}
.footer-bottom-area p,
.footer-bottom-area a,
.footer-bottom-area li {
    color: var(--white);
    font-size: 14px;
}
.footer-bottom-area a:hover {
    color: var(--theme);
}
.footer-bottom-area #devninja-footer-widget {
    color: var(--white);
    font-size: 14px;
    align-items: flex-end;
    gap: 10px;
    flex-direction: column-reverse;
}
@media (max-width: 767px) {
    /* Reserves clearance below the content for the fixed back-to-top
       button (50px tall, sitting 30px from the bottom) so it doesn't sit
       on top of the widget row once it appears near the bottom of the
       page. Padding-bottom (not padding-right) so centering stays true. */
    .footer-bottom-area {
        padding-bottom: 90px;
    }
    .footer-bottom-wrapper {
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        text-align: center;
    }
    .footer-bottom-wrapper ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    #devninja-footer-widget {
        margin-top: 20px;
        text-align: center;
    }
}


/* Main footer background */
.footer-section-bg {
    background-color: var(--bg);
}

/* Footer logo, above the mission statement */
.footer-logo {
    max-height: 50px;
    width: auto;
}

/* Every column's widget-head holds different content — a 50px logo image
   in the brand column, a short heading in the other two — so without a
   shared height their body content (paragraph vs. links list) started at
   different vertical positions. A consistent min-height keeps all three
   columns' content lined up. */
.single-footer-widget .widget-head {
    display: flex;
    align-items: center;
    min-height: 50px;
}

/* Mission statement paragraph under the footer logo */
.single-footer-widget .widget-body p {
    margin-bottom: 16px;
}

/* "Who We Are" (index) / "Our Story" (about) content blocks: headings and
   buttons reset their own margin to 0, so paragraphs need their own spacing
   or they run straight into the elements next to them. */
.about-content p {
    margin: 20px 0;
}

/* Footer columns: sized to their own content instead of forced into equal
   grid widths (which left Quick Links/Contact Info looking like short text
   floating in oversized columns). Contact Info sits flush with the
   container's right edge since it's the last flex child. */
.footer-columns {
    row-gap: 40px;
}
.footer-col-brand {
    flex: 1 1 320px;
    max-width: 420px;
}
.footer-col-links,
.footer-col-contact {
    flex: 0 0 auto;
}
@media (max-width: 767px) {
    .footer-col-brand,
    .footer-col-links,
    .footer-col-contact {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Rounded photo used in About-style sections */
.about-photo {
    border-radius: var(--radius);
}

/* Contact page map embed */
.map-area iframe {
    border: 0;
}

/* 404 error code */
.error-code {
    font-family: "Big Shoulders", sans-serif;
    font-size: 6rem;
    font-weight: 900;
    color: var(--header);
    margin-bottom: 1rem;
}

/* JS-driven show/hide (contact form's sponsorship-tier field) */
.is-hidden {
    display: none;
}
.tier-desc-text {
    font-size: 0.9rem;
}