/* ==========================================================================
   BNC redesign - interior pages
   The inner pages keep their existing content markup; this restyles those
   classes in the new design language so they match the home page without
   rewriting several hundred lines of school cards and sport lists.
   ========================================================================== */

main { padding: 0 0 56px; }

/* the old .container behaves like the new .wrap */
main .container {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 24px;
}

/* each content block becomes a white card on the page background */
main .container > section {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 34px 36px;
    margin-bottom: 26px;
}

main .container > section > h2:first-child { margin-top: 0; }

main h2 {
    font-family: var(--font-display);
    color: var(--navy-800);
    font-size: clamp(1.7rem, 2.6vw, 2.15rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    position: relative;
    padding-bottom: 12px;
    margin: 0 0 20px;
}

main h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 58px;
    height: 4px;
    background: var(--red);
}

main h3 {
    font-family: var(--font-display);
    color: var(--navy-800);
    font-size: 1.4rem;
    margin: 0 0 12px;
}

main p { margin: 0 0 1rem; }
main ul { margin: 16px 0; padding-left: 26px; }
main li { margin-bottom: 8px; }

/* ---------- page title band ---------- */
.page-head {
    position: relative;
    background:
        radial-gradient(46rem 20rem at 14% -30%, rgba(59, 130, 246, .34), transparent 62%),
        linear-gradient(140deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
    color: var(--white);
    padding: 46px 0 44px;
    margin-bottom: 40px;
    overflow: hidden;
}

.page-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--red) 0 33.33%, #fff 33.33% 66.66%, var(--red) 66.66%);
}

.page-head .eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #ff9aa6;
    margin-bottom: 6px;
}

.page-head h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4.4vw, 3.2rem);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.page-head p { margin: 10px 0 0; color: #cfdcf5; max-width: 70ch; }

/* ---------- member school cards ---------- */
main .school-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
    margin-top: 22px;
}

main .school-card {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 5px solid var(--navy-700);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

main .school-card:hover {
    transform: translateY(-4px);
    border-left-color: var(--red);
    box-shadow: var(--shadow-md);
}

main .school-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    flex-shrink: 0;
    background: none;
    padding: 0;
}

main .school-info { flex: 1; min-width: 0; }

main .school-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

main .school-links { display: flex; flex-direction: column; gap: 8px; }

main .school-links a {
    display: block;
    padding: 10px 14px;
    border-radius: 7px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--navy-700);
    color: #fff;
    transition: all .2s;
}

main .school-links a:hover { background: var(--red); }

main .school-links a.website {
    background: transparent;
    color: var(--navy-700);
    border: 2px solid var(--line);
    padding: 8px 14px;
}

main .school-links a.website:hover {
    background: var(--navy-800);
    color: #fff;
    border-color: var(--navy-800);
}

/* ---------- sport categories (conference calendar) ---------- */
main .sport-category {
    background: linear-gradient(135deg, #f7faff 0%, #eaf1ff 100%);
    border: 1px solid var(--line);
    border-left: 6px solid var(--red);
    border-radius: var(--radius);
    padding: 26px 28px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-sm);
}

main .sport-category h3 {
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 16px;
}

main .sport-schools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 9px;
}

main .sport-schools a {
    display: block;
    padding: 11px 13px;
    background: var(--white);
    color: var(--navy-700);
    border: 1px solid #dae4f5;
    border-radius: 8px;
    text-decoration: none;
    font-size: .95rem;
    font-weight: 500;
    transition: all .2s;
}

main .sport-schools a:hover {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
    transform: translateY(-2px);
}

/* ---------- tables (school websites) ---------- */
main table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 22px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

main th {
    background: linear-gradient(135deg, var(--navy-900), var(--navy-700));
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: 15px 18px;
}

main td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

main tbody tr:hover { background: #eef0f3; }
main td a { color: var(--navy-700); text-decoration: none; word-break: break-word; }
main td a:hover { color: var(--red); text-decoration: underline; }

/* ---------- link cards (external links) ---------- */
main .link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
    margin-top: 22px;
}

main .link-card {
    display: block;
    background: linear-gradient(140deg, #ffffff 0%, #f2f7ff 100%);
    border: 1px solid var(--line);
    border-top: 4px solid var(--red);
    border-radius: var(--radius);
    padding: 26px 28px;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform .2s, box-shadow .2s;
}

main .link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
main .link-card h3 { margin-bottom: 8px; }
main .link-card p { color: var(--muted); font-size: .96rem; margin: 0; }

/* ---------- notes ---------- */
main .note {
    background: #fff8e6;
    border: 1px solid #f3e0b0;
    border-left: 6px solid #f59e0b;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 22px 0;
}

main .note p { margin: 0; color: #7c5310; }

@media (max-width: 900px) {
    main .container > section { padding: 24px 22px; }
    main .school-grid { grid-template-columns: 1fr; }
    main .sport-schools { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    main th, main td { padding: 12px 14px; }
}


/* ==========================================================================
   Small screens
   The websites table is two columns of long URLs; below ~700px it cannot fit,
   so it scrolls inside its own box rather than widening the page.
   ========================================================================== */
main .container > section { overflow-x: auto; }

@media (max-width: 700px) {
    main table { display: block; overflow-x: auto; white-space: nowrap; }
    main td a { word-break: normal; }
}

@media (max-width: 600px) {
    main .container { padding: 0 16px; }
    main .container > section { padding: 20px 18px; }
    main .link-grid { grid-template-columns: 1fr; }
    main .sport-schools { grid-template-columns: 1fr 1fr; }
    main .sport-category { padding: 20px 18px; }
    main .school-card { flex-direction: column; align-items: flex-start; }
    main .school-logo { width: 84px; height: 84px; }
    .page-head { padding: 32px 0 30px; margin-bottom: 28px; }
}

/* ==========================================================================
   Conference Schedule - month grid + day detail
   ========================================================================== */
.cal-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cal-nav { display: flex; align-items: center; gap: 10px; }

.cal-nav button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    background: var(--white);
    border: 2px solid var(--line);
    color: var(--navy-800);
    font-size: 1.2rem;
    line-height: 1;
    transition: all .2s;
}

.cal-nav button:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: #fff; }
.cal-nav button:disabled { opacity: .35; cursor: default; }

.cal-title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--navy-800);
    min-width: 12ch;
}

.cal-sport {
    font-family: var(--font-body);
    font-size: .98rem;
    padding: 10px 14px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
}

.cal-sport:focus { outline: none; border-color: var(--red); }

.cal-updated {
    margin-left: auto;
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------- month grid ---------- */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 28px;
}

.cal-dow {
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    padding: 6px 0;
}

.cal-cell {
    position: relative;
    min-height: 74px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: all .18s;
}

.cal-cell.is-empty { border: 0; background: none; min-height: 0; }
.cal-cell.is-quiet { background: #f6f8fc; color: var(--muted); cursor: default; }

.cal-cell:not(.is-quiet):not(.is-empty):hover {
    border-color: var(--red);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cal-cell.is-selected {
    border-color: var(--red);
    border-width: 2px;
    background: #fff5f6;
}

.cal-num { display: block; font-weight: 600; font-size: .95rem; }

.cal-count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--navy-700);
    color: #fff;
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
}

.cal-cell.is-selected .cal-count { background: var(--red); }

/* ---------- day detail ---------- */
.cal-day h3 {
    font-size: 1.5rem;
    margin-bottom: 4px;
}

.cal-daycount {
    margin: 0 0 16px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--red);
}

.cal-none, .cal-loading { color: var(--muted); margin: 0; }

.cal-games { display: flex; flex-direction: column; gap: 8px; }

.cal-game {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-700);
    border-radius: 8px;
    background: var(--white);
}

.cal-game.is-off { border-left-color: var(--red); opacity: .72; }

.cal-time {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy-800);
    min-width: 9ch;
    flex-shrink: 0;
}

.cal-match { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-match strong { color: var(--ink); font-weight: 600; }
/* team names with inline crests: crest sits on the baseline of its school */
.cal-teams { display: inline; }
.cal-crest { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 5px; }
.cal-vs { margin: 0 7px; color: var(--muted); font-weight: 600; }
.cal-meta { font-size: .85rem; color: var(--muted); }

.cal-status {
    margin-left: auto;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--red);
    white-space: nowrap;
}

@media (max-width: 700px) {
    .cal-cell { min-height: 56px; padding: 6px; }
    .cal-count { right: 4px; bottom: 4px; min-width: 20px; padding: 1px 5px; font-size: .7rem; }
    .cal-updated { margin-left: 0; width: 100%; }
    .cal-game { flex-direction: column; gap: 4px; }
    .cal-time { min-width: 0; }
    .cal-status { margin-left: 0; }
}

/* preseason scrimmage - a real fixture, but not a countable game */
.cal-kind {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 20px;
    background: #eef0f3;
    border: 1px solid #d7e0f2;
    color: var(--muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    width: fit-content;
}

/* ==========================================================================
   Conference Schedule - search a season by sport, gender, level and type
   ========================================================================== */

/* Two ways to use the same data: click through day by day, or ask a question
   across a whole season. Switching modes swaps which panel is visible; nothing
   in Browse by Day changes, so the existing "Today at a Glance" deep link still
   lands exactly where it always has. */
.cal-modes {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    border-bottom: 2px solid var(--line);
}

.cal-mode {
    padding: 10px 4px;
    margin-bottom: -2px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
}

.cal-mode + .cal-mode { margin-left: 18px; }
.cal-mode:hover { color: var(--navy-800); }
.cal-mode.is-on { color: var(--navy-800); border-bottom-color: var(--red); }

.cal-search-filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

/* min-width: 0 overrides the grid item's implicit auto minimum, which a
   select is otherwise entitled to refuse to shrink below - its content
   ("Games & Scrimmages" is the longest option) was holding the whole
   column open wider than its fair share of the grid, pushing the second
   column's controls off the right edge of a narrow screen with nothing
   to scroll to reach them. */
.cal-search-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.cal-search-field label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
}

.cal-search-field select {
    width: 100%;
    min-width: 0;
    font-family: var(--font-body);
    font-size: .95rem;
    padding: 10px 12px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
}

.cal-search-field select:focus { outline: none; border-color: var(--red); }

.cal-range-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.cal-range {
    padding: 8px 16px;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--navy-800);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s;
}

.cal-range:hover { border-color: var(--navy-600); }
.cal-range.is-on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.cal-custom-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 18px;
}

.cal-custom-dates label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--muted);
}

.cal-custom-dates input[type="date"] {
    font-family: var(--font-body);
    font-size: .9rem;
    padding: 8px 10px;
    border: 2px solid var(--line);
    border-radius: 8px;
    background: var(--white);
    color: var(--ink);
}

.cal-search-summary {
    margin: 0 0 18px;
    font-size: .95rem;
    color: var(--ink);
}

.cal-search-summary strong { color: var(--navy-800); }
.cal-search-summary.is-empty { color: var(--muted); }
.cal-search-loading { color: var(--muted); }

.cal-search-group + .cal-search-group { margin-top: 26px; }

.cal-search-group h3 {
    font-size: 1.05rem;
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

/* A fixture row, close cousin of .today-game - same crest-beside-name and level
   badge treatment, so a search result and a homepage row read as one system
   rather than two different calendars bolted together. */
.cal-search-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-700);
    border-radius: 8px;
    background: var(--white);
}

.cal-search-row + .cal-search-row { margin-top: 8px; }
.cal-search-row.is-off { border-left-color: var(--red); opacity: .72; }

.cal-search-time {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--navy-800);
    min-width: 9ch;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.cal-search-match { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.cal-search-teams {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 9px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--ink);
}

.cal-search-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }

.cal-search-crest { flex: 0 0 auto; width: 24px; height: 24px; object-fit: contain; }

.cal-search-vs {
    font-style: normal;
    font-weight: 400;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.cal-search-tba { font-weight: 400; color: var(--muted); }
.cal-search-meta { font-size: .85rem; color: var(--muted); }

.cal-search-levels {
    margin-left: auto;
    display: flex;
    gap: 6px;
    align-self: center;
    flex: 0 0 auto;
}

.cal-search-levels b {
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
    padding: 5px 8px;
    min-width: 26px;
    text-align: center;
    border-radius: 5px;
    background: var(--bg);
    color: var(--navy-800);
    cursor: default;
}

.cal-search-row.is-off .cal-search-levels b { background: rgba(200, 16, 46, .10); color: var(--red-dark); }
.cal-search-status { margin-left: 12px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); white-space: nowrap; }

/* A season with no sport chosen can run to several thousand rows; the cap
   message says plainly that the count was too large to be a rendering fault. */
.cal-search-cap {
    margin-top: 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #eef0f3;
    color: var(--muted);
    font-size: .88rem;
}

@media (max-width: 700px) {
    .cal-search-filters { grid-template-columns: repeat(2, 1fr); }
    .cal-search-row { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cal-search-time { min-width: 0; }
    .cal-search-levels { margin-left: 0; }
    .cal-search-status { margin-left: 0; }
}

/* ---- Extra Pages (generic, board-authored) --------------------------------
   What a visitor sees at one of these URLs before its content is published -
   plain and honest, never a broken-looking blank page. */
.generic-page-empty {
    padding: 90px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 1.05rem;
}

/* ---------- Sportsmanship code -------------------------------------------
   The code is set as real text rather than only as the poster image. A
   picture of a policy cannot be read aloud by a screen reader, cannot be
   found by search, and forces a phone user to pinch and pan a 2160px page.
   The poster sits beside it because its actual job is to be printed and put
   up at a venue. */
.sports-code {
    max-width: 68ch;
    margin: 0 auto;
}
.sports-code p {
    font-size: 1.06rem;
    line-height: 1.72;
    margin: 0 0 1.15em;
}
.sports-code-lede {
    font-size: 1.22rem !important;
    line-height: 1.6 !important;
    color: var(--navy-900);
    font-weight: 600;
    border-left: 4px solid var(--red);
    padding-left: 18px;
}
.sports-code strong { font-weight: 700; }
.sports-code-thanks {
    font-weight: 600;
    color: var(--navy-900);
}

/* The poster is a tall portrait page. Given an equal half it towers over the
   copy beside it and leaves that column looking empty, so it is capped and the
   text takes the width it frees. */
.sports-poster {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 360px);
    gap: 40px;
    align-items: center;
    margin-top: 40px;
    padding-top: 34px;
    border-top: 1px solid rgba(11, 21, 41, .12);
}
.sports-poster-copy h2 { margin-top: 0; }
.sports-poster-copy p { margin-bottom: 20px; }
.sports-poster-art {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 21, 41, .18);
    transition: transform .25s, box-shadow .25s;
}
.sports-poster-art img { display: block; width: 100%; height: auto; }
.sports-poster-art:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(11, 21, 41, .26);
}

@media (max-width: 820px) {
    .sports-poster { grid-template-columns: 1fr; gap: 26px; }
}

/* Printing the page itself should give the code, not the site around it. */
@media print {
    .topbar, .masthead, .mainnav, .site-footer, .sports-poster { display: none !important; }
    .page-head { background: none !important; color: #000 !important; padding: 0 0 12px !important; }
    .page-head h1 { color: #000 !important; }
    .sports-code { max-width: none; }
    .sports-code p { font-size: 11.5pt; line-height: 1.5; }
}