/* ============================================================
   Intensity Hoops — Site-specific overrides
   ============================================================ */
.no-articles-page #sp-main-body{
    display: none;
}

.no-content-padding #sp-main-body {
    padding: 0px;
}

/* ── Global text input base ──────────────────────────────────
   Reworks template.css's generic input reset (lines ~1266–1310) into the
   site's own dark theme — same fight `.convertforms`'s own input override
   already documents (see convertforms.css) fixed one component at a time;
   this is the site-wide default so any *other* plain input/textarea/select
   (not already carrying `.form-control`/`.form-select`, e.g. .location-
   search-input before it opted out) looks on-brand instead of falling back
   to Helix's white Bootstrap-3-era box. Deliberately lives here rather than
   base.css, at the user's request.

   Needs the `body` prefix AND `!important` together, not just one or the
   other: template.css's own block matches at identical specificity (0,2,1)
   — `body` bumps ours to (0,2,2) so we don't need to win via `!important`
   alone. That still matters for `padding`/`box-shadow` specifically, since
   template.css sets *those two* `!important` too — on an equal-specificity
   `!important` tie the later-loaded file wins, and template.css loads after
   custom.css (Helix links css/custom/* during the system plugin's
   onBeforeCompileHead(), template.css later during index.php's own
   rendering) — so without the extra specificity from `body`, template.css's
   `!important` padding/box-shadow would still win the tie despite our own
   `!important`. */

body input[type=text]:not(.form-control),
body input[type=email]:not(.form-control),
body input[type=url]:not(.form-control),
body input[type=date]:not(.form-control),
body input[type=password]:not(.form-control),
body input[type=search]:not(.form-control),
body input[type=tel]:not(.form-control),
body input[type=number]:not(.form-control),
body textarea:not(.form-control),
body select:not(.form-select):not(.form-control) {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-body, "Inter", sans-serif) !important;
    font-size: 1rem !important;
    line-height: 1.25 !important;
    color: var(--text, #ffffff) !important;
    background-color: var(--surface, #1c1c1c) !important;
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25)) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* select gets its own background-color/background-image instead of what
   the block above gives every other field — background-color is `--bg`
   (#111111) here, not `--surface` (#1c1c1c), to match a ConvertForms
   select's own inline `style="background: #111111 !important;"` (CF sets
   this per-field from the database — Joomla admin only, not a template
   file, and not reachable from here — so matching it in CSS is the
   practical fix; inline `!important` beats any stylesheet `!important`
   regardless of specificity anyway, so this rule can't fight it even if
   it wanted to, it just needs to already agree with it). The
   background-image chevron fixes the same native-arrow-readability issue
   already fixed for EventBooking's ticket-quantity select
   (eb-register.css's .ticket_type_quantity) — this is the rule that
   actually wins for any plain <select> site-wide, (0,2,2) specificity
   beating any narrower `.convertforms select` attempt, and this block's
   own `background-image: none !important` above was silently overriding
   an earlier ConvertForms-scoped chevron fix before the split. */
body select:not(.form-select):not(.form-control) {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: var(--bg, #111111) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 14px 10px !important;
    padding-right: 2.5rem !important;
}

body input[type=text]:not(.form-control)::placeholder,
body input[type=email]:not(.form-control)::placeholder,
body input[type=url]:not(.form-control)::placeholder,
body input[type=date]:not(.form-control)::placeholder,
body input[type=password]:not(.form-control)::placeholder,
body input[type=search]:not(.form-control)::placeholder,
body input[type=tel]:not(.form-control)::placeholder,
body input[type=number]:not(.form-control)::placeholder,
body textarea:not(.form-control)::placeholder {
    color: var(--text-muted, #a0a0a0) !important;
}

body input[type=text]:not(.form-control):focus,
body input[type=email]:not(.form-control):focus,
body input[type=url]:not(.form-control):focus,
body input[type=date]:not(.form-control):focus,
body input[type=password]:not(.form-control):focus,
body input[type=search]:not(.form-control):focus,
body input[type=tel]:not(.form-control):focus,
body input[type=number]:not(.form-control):focus,
body textarea:not(.form-control):focus {
    color: var(--text, #ffffff) !important;
    background-color: var(--surface, #1c1c1c) !important;
    border-color: var(--brand-primary, #1272ba) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-tint, rgba(18, 114, 186, 0.15)) !important;
    outline: 0 !important;
}

/* select's own focus state — background-color stays `--bg` (matches the
   resting state above and the ConvertForms inline style), not `--surface`
   like every other field, so focusing doesn't visibly shift the color. */
body select:not(.form-select):not(.form-control):focus {
    color: var(--text, #ffffff) !important;
    background-color: var(--bg, #111111) !important;
    border-color: var(--brand-primary, #1272ba) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-tint, rgba(18, 114, 186, 0.15)) !important;
    outline: 0 !important;
}

/* ── Hero ────────────────────────────────────────────────── */

/* Full-bleed video background. #sp-title (where every hero module renders)
   is wrapped by the template chrome in a standard Bootstrap .container,
   which caps at 1320px — position:absolute + left:50%/width:100vw/
   margin-left:-50vw breaks the video out to true full-bleed regardless.
   No z-index needed: position:absolute with z-index:auto paints in normal
   tree order, and this is the first positioned element in the section. */
.home-video-hero video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    margin-left: -50vw;
    object-fit: cover;
    transition: none !important;
    animation: none !important;
}

/* Darkening overlay, as a pseudo-element on .home-video-hero itself rather
   than a separate empty <div class="hero-overlay"> sibling (removed from
   home-video-hero.html — no longer needed). One selector instead of two,
   and it no longer depends on the Joomla menu item's Page Class (.homepage)
   being set correctly in admin — .home-video-hero is a class hardcoded
   directly in this hero's own markup, nothing external to keep in sync.
   Relies on .home-video-hero's own position-relative utility class (already
   in the markup) as its positioning context.
   z-index:1 is required, not optional: ::before generates as the FIRST
   child in paint order, so without it this would paint *behind* the video,
   not in front of it — z-index:auto elements paint in tree order, but a
   positioned element with an explicit z-index always paints after (above)
   them regardless of source order. .home-video-hero .container below needs
   its own explicit z-index for the same reason, to stay above this. */
.home-video-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    margin-left: -50vw;
    background: rgba(var(--black-rgb, 0, 0, 0), 0.80);
    z-index: 1;
    pointer-events: none;
    transition: none !important;
    animation: none !important;
}

.home-video-hero .container {
    position: relative;
    z-index: 2;
}

.homepage .hero {
    height: 710px;
}

.homepage .hero img {
    object-fit: cover;
}

.hero-content {
    max-width: 620px;
}

.hero-subtitle {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(var(--white-rgb, 255, 255, 255), 0.75);
    margin-bottom: 0.75rem;
    text-shadow: 1px 1px 1px var(--black, #000000);
}

.hero-title {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    font-weight: 700;
    color: var(--white, #ffffff);
    line-height: 1;
    margin-bottom: 0.75rem;
    text-shadow: 1px 1px 1px var(--black, #000000);
    letter-spacing: -0.01em;
}

.hero-body {
    font-size: 1rem;
    color: rgba(var(--white-rgb, 255, 255, 255), 0.75);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

/* Signature accent — outlined (not filled) text, used within .hero-title
   or any heading to highlight one word/line. E.g. <span class="text-outline">Word</span> */
.text-outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--text, #ffffff);
    text-stroke: 2px var(--text, #ffffff);
}

.ih-dot {
    color: var(--brand-primary-light, #2e8fd4);
    padding: 0 0.35rem;
}


/* ── Page hero header module ─────────────────────────────── */
/* Applies to any Custom HTML module given the Module Class Suffix
   " page-hero-header" (Module > Advanced > Module Class Suffix),
   which Joomla renders as <div class="sp-module page-hero-header">. */

.page-hero-header .hero {
    height: 450px;
}

.page-hero-header .custom {
    background-size:cover;
    background-position: center 30%;
}

.page-hero-header .hero-overlay {
    background: linear-gradient(to right, rgba(var(--bg-rgb, 17, 17, 17), .75) 0%, rgba(var(--bg-rgb, 17, 17, 17), .55) 100%);
}



/* ── Page title (sub-pages) ──────────────────────────────── */
/* Helix Ultimate's built-in page heading (Menu Item > Page Display > Page
   Heading), used for sub-pages that don't warrant the full hero treatment
   (e.g. /about/purpose under the /about hero). Reuses the hero's heading
   font/weight language at a smaller scale — no eyebrow, overlay, or CTA. */

.sp-page-title {
    padding: 3.5rem 0;
}

.sp-page-title .sp-page-title-heading {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-shadow: 1px 1px 1px var(--black, #000000);
}

.sp-page-title .sp-page-title-sub-heading {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--brand-primary-light, #2e8fd4);
    margin-top: 0.5rem;
}


/* ── Highlight split panel (image + text, reusable anywhere) ────────── */
/* Originally homepage-only; generalized so any page can use it
   (e.g. the Director Spotlight on /about/coaches). */

.highlight-panel {
    background: var(--surface, #1c1c1c);
}

.highlight-image {
    object-fit: cover;
    min-height: 300px;
    display: block;
}

.highlight-heading {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 700;
    color: var(--text, #ffffff);
    text-shadow: 1px 1px 1px var(--black, #000000);
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

.highlight-body {
    color: var(--text-body, #e0e0e0);
    max-width: 52ch;
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/*.transparent-header.homepage .hero .hero-content {
    margin-top: 56px;
}
*/

.transparent-header  #sp-title {
    margin-top: -80px;
}

@media (min-width: 768px) {
    .rounded-md-0 {
        border-radius: 0 !important;
    }
}


/* ── Footer company block ───────────────────────────────── */

.footer-company {
    padding: 1.5rem 0;
}

.footer-logo {
    height: 72px;
    width: auto;
    display: block;
    margin-bottom: 1.25rem;
}

.footer-tagline {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--footer-text, #e0e0e0);
    max-width: 36ch;
    margin-bottom: 1.5rem;
}

.footer-contact {
    font-style: normal;
    font-size: 0.875rem;
    line-height: 2;
    color: var(--footer-link, #a0a0a0);
}

.footer-contact a {
    display: inline-flex;
    align-items: center;
    color: var(--footer-link, #a0a0a0);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact a:hover,
.footer-contact a:focus {
    color: var(--text, #ffffff);
}

/* Icon in front of a phone/WhatsApp/email link — SVG uses fill="currentColor"
   so it follows the link's own color/hover state above, no separate color
   rule needed. */
.footer-contact .footer-icon {
    flex-shrink: 0;
    margin-right: 0.45em;
}

.footer-contact .footer-contact-label {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary-light, #2e8fd4);
    display: block;
    margin-bottom: 0.25rem;
    margin-top: 0.75rem;
}

.footer-contact .footer-contact-label:first-child {
    margin-top: 0;
}


/* ── Bottom section menu ("Module Class Suffix: bottom-section-menu",
   any module in the #sp-bottom footer position) ──
   Built for the "Policies & Important Info" menu list. No border/card
   shell here on purpose — this module sits directly on the footer
   background, no box around it.

   The .mod-menu-specific rules below (single-column, single-line-per-
   link, current-page color, etc.) only ever match actual
   <ul class="mod-menu"> content, so they're inert on any other module
   that happens to share this suffix. Each link is forced to one line
   (white-space: nowrap) with a tight letter-spacing to help longer
   titles fit; overflow: hidden + text-overflow: ellipsis is kept as a
   safety net for narrow viewports where a title still doesn't fit,
   rather than letting it break the layout.

   Gotcha, already documented for .follow-icons in css-information.md:
   template.css has legacy ID-selector rules scoped to #sp-bottom that
   no class-only selector can outrank on specificity alone —
   #sp-bottom .sp-module .sp-module-title (color:#fff, font-weight:700,
   font-size:18px, margin) and #sp-bottom .sp-module ul>li>a
   (display:block — actually fine, that's what we want anyway). Only the
   title properties actually being changed here need !important; nothing
   else conflicts. */

.bottom-section-menu.sp-module {
    margin-top: 10px;
}

#sp-bottom .bottom-section-menu .sp-module-title,
#sp-bottom .bottom-section-menu .cf-heading {
    font-family: var(--font-heading, "Oswald", sans-serif) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-primary-light, #2e8fd4) !important;
    margin: 0 0 1.25rem !important;
    text-align: left !important;
}

/* Newsletter form's intro paragraph (the [data-type="html"] field) —
   matches .footer-tagline right next to it in the same footer row.
   .convertforms [data-type="html"] > .cf-control-input sets
   text-align:center + font-size/line-height (convertforms.css); this
   selector's #sp-bottom ID beats that on specificity, and color here
   is a direct declaration on the <p> itself so it wins over the
   inherited !important grey from Bootstrap's .text-muted on the
   parent .cf-control-group — inheritance is always lowest priority
   regardless of !important upstream. */
#sp-bottom .bottom-section-menu [data-type="html"] p {
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--footer-text, #e0e0e0);
    max-width: 36ch;
    margin-bottom: 1.5rem;
}

#sp-bottom .bottom-section-menu .mod-menu > li {
    margin-bottom: 5px;
}

.bottom-section-menu .mod-menu > li > a {
    display: block;
    font-size: 0.85rem;
    line-height: 26px;
    letter-spacing: -.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--footer-link, #a0a0a0);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bottom-section-menu .mod-menu > li > a:hover,
.bottom-section-menu .mod-menu > li > a:focus {
    color: var(--text, #ffffff);
}

.bottom-section-menu .mod-menu > li.current > a {
    color: var(--brand-primary-light, #2e8fd4);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .bottom-section-menu .mod-menu > li > a {
        transition: none;
    }
}


/* ── Girls teams menu ────────────────────────────────────── */

.girls-teams .sp-dropdown {
    width: 260px !important;
}

.girls-teams .menu-title {
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-primary-light, #2e8fd4) !important;
}

.girls-teams .sp-menu-item .fall-2026 {
    margin-left: 10px;
}

.offcanvas-inner .girls-teams .menu-child li a {
    margin-left: 15px;
}


/* ── Registration button ─────────────────────────────────── */

.registration-button {
    margin-left: 0px !important;
    text-transform: uppercase;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: -.045em;
}


/* ── Page Class hook: "boxed-component" ──────────────────────
   Set this as a menu item's Page Class (Menu Item > Page Display >
   Page Class) to get the same boxed/container reading width used on
   the EventBooking registration pages, on any other page type — no PHP
   override needed.

   Deliberately NOT named "container": Helix Ultimate echoes a menu
   item's Page Class onto <body> itself (HelixUltimate::bodyClass(),
   plugins/system/helixultimate/src/Core/HelixUltimate.php). If the
   class name were the literal word "container", it would trigger
   Bootstrap's own .container rule directly on the body element —
   boxing the header and footer too, not just the page content.

   TARGET: #sp-main-body, not any component-specific wrapper.
   Earlier versions of this rule targeted .article-details (articles)
   and .com-content-category.category-list (category list pages)
   directly — wrong call, corrected 2026-08-17. Those are wrappers
   *inside* the component-area column, but whether that column even has
   a sidebar next to it is decided one level up, by Helix's JSON-driven
   row/column layout engine (get_recursive_layout() in
   plugins/system/helixultimate/src/Core/HelixUltimate.php), which
   wraps the whole row — sidebar columns included — in a
   `<section id="sp-main-body">` (the ID comes from the row's
   configured name, "Main Body", slugified). That row exists once per
   page, the same way, regardless of which component/view renders
   inside it — genuinely universal, unlike a growing list of
   per-component classes that needs a new entry every time a page type
   turns out not to echo Page Class onto its own wrapper (that's what
   happened with the category-list case).

   Three triggers, all already land on <body> with zero PHP needed:
   - `boxed-component` — set manually via a menu item's Page Class.
   - `layout-blog` — set automatically by Helix for any page requested
     with layout=blog (HelixUltimate::bodyClass() again), covering
     blog-layout articles without anyone needing to remember to set
     Page Class on every one. This used to be a PHP condition inside
     overrides/com_content/article/default.php that injected a class
     onto .article-details directly — removed in favor of this CSS
     rule; that file is back to matching upstream Helix exactly.
   - `com-users.view-profile` — Joomla's own component+view body
     classes (`com-users` and `view-profile`, both echoed automatically
     by the same HelixUltimate::bodyClass() mechanism, one per request,
     no Page Class needed), added 2026-09-02 so the user profile page
     gets the same boxed reading width as blog articles/`.boxed-component`
     pages — full-width looked wrong there for the same reason it did on
     `/terms` before this rule existed.

   Behavior matches Bootstrap's .container exactly (same gutter, same
   breakpoints) so a page using this reads identically to one using the
   real .container class elsewhere on the site.

   Confirmed working live on /terms (2026-08-16). A plain
   `.boxed-component:not(body)` rule is also kept below as a general
   utility class, independent of Page Class/#sp-main-body — useful if a
   future page needs one specific element boxed by hand. */

body.boxed-component #sp-main-body,
body.layout-blog #sp-main-body,
body.com-users.view-profile #sp-main-body,
.boxed-component:not(body) {
    --bs-gutter-x: 1.5rem;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    body.boxed-component #sp-main-body,
    body.layout-blog #sp-main-body,
    body.com-users.view-profile #sp-main-body,
    .boxed-component:not(body) { max-width: 540px; }
}

@media (min-width: 768px) {
    body.boxed-component #sp-main-body,
    body.layout-blog #sp-main-body,
    body.com-users.view-profile #sp-main-body,
    .boxed-component:not(body) { max-width: 720px; }
}

@media (min-width: 992px) {
    body.boxed-component #sp-main-body,
    body.layout-blog #sp-main-body,
    body.com-users.view-profile #sp-main-body,
    .boxed-component:not(body) { max-width: 960px; }
}

@media (min-width: 1200px) {
    body.boxed-component #sp-main-body,
    body.layout-blog #sp-main-body,
    body.com-users.view-profile #sp-main-body,
    .boxed-component:not(body) { max-width: 1140px; }
}

@media (min-width: 1400px) {
    body.boxed-component #sp-main-body,
    body.layout-blog #sp-main-body,
    body.com-users.view-profile #sp-main-body,
    .boxed-component:not(body) { max-width: 1320px; }
}


/* ── Sidebar list module (e.g. "Policies" menu, left/right column) ──
   Targets .article-list-left-menu specifically (this module's own
   Module Class Suffix) rather than every .sp-module sitewide, so it
   doesn't reshape unrelated sidebar modules (search, latest news, etc.)
   that already get their own generic styling from base.css. */

.sp-module.article-list-left-menu {
    background: var(--surface, #1c1c1c);
    border: 1px solid var(--border, rgba(18, 114, 186, 0.25));
    border-radius: 12px;
    padding: 1.5rem;
}

.sp-module.article-list-left-menu .sp-module-title {
    font-family: var(--font-heading, "Oswald", sans-serif);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text, #ffffff);
    text-shadow: 1px 1px 1px var(--black, #000000);
    margin: 0;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.sp-module.article-list-left-menu .mod-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sp-module.article-list-left-menu .mod-menu > li {
    border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.08));
}

.sp-module.article-list-left-menu .mod-menu > li:last-child {
    border-bottom: none;
}

.sp-module.article-list-left-menu .mod-menu > li > a {
    display: block;
    padding: 0.6rem 0.1rem 0.6rem 0.85rem;
    border-left: 3px solid transparent;
    font-family: var(--font-body, "Inter", sans-serif);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-body, #e0e0e0);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    padding: 12px 0 12px 10px;
}

.sp-module.article-list-left-menu .mod-menu > li > a:hover,
.sp-module.article-list-left-menu .mod-menu > li > a:focus {
    color: var(--brand-primary-light, #2e8fd4);
    background: var(--surface-2, #262626);
}

.sp-module.article-list-left-menu .mod-menu > li.current > a {
    border-left-color: var(--brand-primary, #1272ba);
    background: var(--brand-primary-tint, rgba(18, 114, 186, 0.15));
    color: var(--brand-primary-light, #2e8fd4);
    font-weight: 600;
    padding: 12px 0 12px 10px;
}

/* Every module in the left/right sidebar positions gets a bordered card,
   sitewide — not scoped to any one module's own class. Specificity
   (1,1,0): the #sp-left/#sp-right ID beats .article-list-left-menu's
   (0,2,0) above, so border/padding/border-radius here win over that
   rule's own values for the "Policies" module specifically, even though
   that rule looks more specific by class count. Worth knowing if the
   Policies box ever looks like it's ignoring an edit made up there —
   check here first. */
#sp-left .sp-module, #sp-right .sp-module {
    margin-top: 50px;
    margin-bottom: 20px;
    border: 1px solid #f3f3f36e;
    padding: 30px 20px;
    border-radius: 10px;
}