/* com_gamescheduling site front-end - branded per YAFL Visual Identity Guide 2023.
   Light theme (white-dominant, per the guide's color-ratio rules):
   white background > Slate 100 accents > Navy/Navy900 secondary > Red used sparingly. */

:root {
    --gs-red:      #D6001C;
    --gs-red-300:  #EF333D;
    --gs-red-700:  #990000;
    --gs-navy:     #236192;
    --gs-navy-700: #1A496E;
    --gs-navy-900: #123149;
    --gs-slate-900: #091825;
    --gs-slate-700: #222F3B;
    --gs-slate-300: #81A0B8;
    --gs-slate-100: #E0E7EC;
    --gs-white:     #FFFFFF;
}

@font-face {
    font-family: 'Owners Wide';
    src: url('../fonts/OwnersWide-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: block;
}

.gs-schedule, .gs-team {
    max-width: 700px;
    margin: 0 auto;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gs-slate-900);
}

/* The bracket tree's own comfortable width and the standings/schedule
   tables' own comfortable width are genuinely different, competing
   needs - widening the WHOLE page to fit a bracket (an earlier attempt)
   either left the bracket still too narrow (its round columns need
   more room than a modest page-width bump provides - see
   .gs-bracket-rounds' own 460px champion-label padding reservation in
   bracket-tree.css, which single-handedly demands far more width than
   any reasonable page max-width) or made the standings/schedule tables
   look stretched and thin once widened to match. Decoupling them - the
   page stays a flat, consistent 700px always, and the bracket section
   gets its own horizontally-scrollable box sized to whatever the
   bracket actually needs (see _bracket.php's own computed inline
   min-width) - lets each part be exactly as wide as it should be
   without compromising the other. */
.gs-bracket-scroll-wrap {
    overflow-x: auto;
    /* Pulls the scrollable box out to the FULL viewport width available
       to it (not the 700px page column above), so a wide bracket
       actually gets room to breathe rather than just scrolling within
       an equally-cramped 700px window - defeats the whole point
       otherwise. */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 0 1rem;
}

@media print {
    /* No horizontal scroll exists on paper - the bracket just prints
       at its full natural width regardless of screen viewport, same as
       every other .no-print exception already established on this page. */
    .gs-bracket-scroll-wrap {
        width: auto;
        left: auto;
        right: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
    }
}

/* Headings use Owners Wide, uppercase, bold - per typography guide
   ("we use Owners Wide for headlines and usually in all caps"). */
.gs-schedule__header h1,
.gs-team__header h1,
.gs-week__title,
.gs-standings__region {
    font-family: 'Owners Wide', -apple-system, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gs-schedule__header, .gs-team__header {
    text-align: center;
    margin-bottom: 1.5rem;
}
.gs-schedule__header h1, .gs-team__header h1 {
    font-size: 1.8rem;
    color: var(--gs-navy-900);
    margin-bottom: 0.2rem;
}
.gs-schedule__subtitle, .gs-team__subtitle {
    color: var(--gs-slate-700);
}
.gs-team__subtitle a {
    color: var(--gs-navy);
    text-decoration: none;
}
.gs-team__coach {
    color: var(--gs-slate-700);
    font-size: 0.9rem;
}

/* Torn-edge divider - CSS approximation of the brand guide's paper-tear
   texture, used the same way the scorecard chrome art uses tornTop.png. */
.gs-torn-divider {
    height: 10px;
    background: var(--gs-navy-900);
    margin: 1rem 0 1.5rem;
    clip-path: polygon(
        0% 0%, 4% 100%, 9% 20%, 15% 90%, 22% 10%, 29% 100%, 36% 30%,
        43% 95%, 50% 15%, 57% 100%, 64% 25%, 71% 90%, 78% 10%,
        85% 100%, 92% 20%, 100% 90%, 100% 0%
    );
}

.gs-standings { margin-bottom: 2rem; }

/* Teams Browse tree - reuses .gs-schedule's own card/header/divider
   styling (see the class list on the wrapping <div> in
   teamsbrowse/default.php) so this page looks like a natural sibling of
   the Schedule/Team pages rather than a visually distinct admin-style
   tool. */
.gs-teamsbrowse__group { margin-bottom: 1.5rem; }
.gs-teamsbrowse__group-title {
    font-family: 'Owners Wide', -apple-system, sans-serif;
    text-transform: uppercase;
    background: var(--gs-navy-900);
    color: var(--gs-white);
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.gs-teamsbrowse__list { list-style: none; margin: 0; padding: 0; }
.gs-teamsbrowse__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--gs-slate-100);
}
.gs-teamsbrowse__item:hover { background: var(--gs-slate-100); }
.gs-teamsbrowse__item a { color: var(--gs-navy); text-decoration: none; font-weight: 600; }
.gs-teamsbrowse__item a:hover { text-decoration: underline; }
.gs-teamsbrowse__count { color: var(--gs-slate-700); font-size: 0.85rem; white-space: nowrap; }
/* table-layout: fixed plus explicit per-column widths (below) - a plain
   auto-layout table sizes its Team column to that ONE table's own longest
   team name, so North's and South's Overall/Division columns land at
   different horizontal positions even though both tables are the same
   width. Fixed widths force every standings table on the page to use
   identical column positions regardless of which team names it holds. */
.gs-standings__table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-bottom: 1rem; background: var(--gs-white); }
.gs-standings__table th, .gs-standings__table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--gs-slate-100); text-align: left; }
.gs-standings__table th:nth-child(2), .gs-standings__table td:nth-child(2),
.gs-standings__table th:nth-child(3), .gs-standings__table td:nth-child(3),
.gs-standings__table th:nth-child(4), .gs-standings__table td:nth-child(4) { width: 90px; }
.gs-standings__table td:first-child a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-standings__region { background: var(--gs-navy-900); color: var(--gs-white); text-align: center !important; padding: 0.5rem !important; }
.gs-standings__table thead tr:nth-child(2) th { background: var(--gs-slate-100); color: var(--gs-navy-900); font-weight: 600; }
.gs-standings__table tbody tr:hover { background: var(--gs-slate-100); }
.gs-standings__note { font-size: 0.8rem; color: var(--gs-slate-700); }

.gs-weekfilter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.gs-weekfilter__btn {
    border: 1px solid var(--gs-slate-300);
    background: var(--gs-white);
    color: var(--gs-navy-900);
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 600;
}
.gs-weekfilter__btn.is-active { background: var(--gs-navy); color: var(--gs-white); border-color: var(--gs-navy); }

.gs-week__title {
    background: var(--gs-navy-900);
    color: var(--gs-white);
    padding: 0.5rem 0.85rem;
    margin: 1.25rem 0 0.5rem;
    font-size: 1rem;
}
.gs-game { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--gs-slate-100); padding: 0.5rem 0.75rem; background: var(--gs-white); gap: 0.75rem; }
.gs-game--highlight { background: #FFFF66; }
.gs-game__when { width: 170px; flex: 0 0 170px; color: var(--gs-slate-700); font-size: 0.85rem; line-height: 1.4; }
.gs-game__date { white-space: nowrap; }
.gs-game__teams { flex: 1; min-width: 0; }
.gs-game__team { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.gs-game__team a { color: var(--gs-navy); text-decoration: none; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-game__team a:hover { color: var(--gs-red); }
.gs-game__team--winner a { font-weight: 700; }
/* Score weight follows the team's own winner/loser state, same as the
   team name link above - a plain unconditional bold here (the previous
   rule) bolded BOTH scores regardless of who won. */
.gs-game__score { font-weight: 500; color: var(--gs-navy-900); flex-shrink: 0; }
.gs-game__team--winner .gs-game__score { font-weight: 700; }

.gs-priorseasons { margin-top: 1.5rem; padding-top: 0.75rem; border-top: 1px solid var(--gs-slate-100); font-size: 0.9rem; }
.gs-priorseasons__label { color: var(--gs-slate-700); margin-right: 0.5rem; }
.gs-priorseasons a { color: var(--gs-navy); }

.gs-print-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.35rem 1rem;
    border: 1px solid var(--gs-navy);
    border-radius: 3px;
    color: var(--gs-navy);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}
.gs-print-btn:hover { background: var(--gs-navy); color: var(--gs-white); }

/* Same tmpl=component "bare page" print pattern the admin side already
   uses - hide interactive controls, let the schedule/standings print at
   full width. */
@media print {
    /* The site template's own CSS can still be present in <head> even
       on this bare tmpl=component print page (only the template's PHP
       wrapper/header/footer/modules are skipped, not its stylesheets) -
       if that template sets a dark background on html/body, it was
       otherwise winning over this component's own white background,
       producing a dark page behind the printed schedule. Force it. */
    html, body { background: #fff !important; }
    .no-print { display: none !important; }
    .gs-schedule, .gs-team { max-width: 100% !important; }
    .gs-week { display: block !important; }
    .gs-game { break-inside: avoid; }
}

.gs-team__schedule { width: 100%; border-collapse: collapse; background: var(--gs-white); }
.gs-team__schedule th, .gs-team__schedule td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--gs-slate-100); text-align: left; }
.gs-team__schedule thead th { background: var(--gs-navy-900); color: var(--gs-white); }
.gs-team__row--highlight { background: #FFFF66; }
.gs-team__pending { color: var(--gs-slate-300); }

.gs-locations { max-width: 900px; margin: 0 auto; font-family: -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--gs-slate-900); }
.gs-complex { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gs-slate-100); }
.gs-complex__name { font-family: 'Owners Wide', sans-serif; text-transform: uppercase; color: var(--gs-navy-900); font-size: 1.3rem; margin-bottom: 0.2rem; }
.gs-complex__address { color: var(--gs-slate-700); margin-bottom: 0.75rem; }
.gs-complex__map, .gs-complex__map-image { width: 100%; max-width: 700px; height: 300px; border: 1px solid var(--gs-slate-300); border-radius: 4px; margin-bottom: 1rem; object-fit: cover; }
.gs-complex__notes { background: var(--gs-slate-100); border-radius: 4px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--gs-slate-900); }
.gs-complex__notes p:last-child { margin-bottom: 0; }
.gs-complex__fields { list-style: none; padding: 0; margin: 0; }
.gs-complex__fields li { padding: 0.35rem 0; border-bottom: 1px solid var(--gs-slate-100); scroll-margin-top: 1rem; }
.gs-complex__fields li:target { background: var(--gs-slate-100); }
.gs-complex__field-note { color: var(--gs-slate-700); margin-left: 0.5rem; font-size: 0.9rem; }
.gs-field-link { color: var(--gs-navy); text-decoration: none; }
.gs-field-link:hover { color: var(--gs-red); }
.gs-field-link--print { display: none; }

@media print {
    .gs-field-link--print { display: inline; }
}