/* 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);
}

/* A division with a playoff bracket gets a wider column - a bracket
   tree needs real horizontal room for its round columns (see
   bracket-tree.css's fluid, no-scrollbar layout), and 700px starts
   cramming even a 3-4 round bracket. Standings/schedule tables above
   and below the bracket just render proportionally wider too, which
   reads fine (they already fill 100% of whatever width they're given).
   Still centered and still capped, just less narrow. */
.gs-schedule--has-bracket {
    max-width: 1100px;
}

/* 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; }
/* 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) { width: 110px; }
.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 {
    .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; }
}