/*
 * Stingers look for standard AEM components on Stingers pages.
 * Loaded only by the Stingers header embed, so it never reaches other Concordia pages.
 * The header and footer embeds (.stingers-chrome) keep the original stylesheet.
 */
@import url("fonts/fonts.css");

/* The old stylesheet was written for the browser's default box model; Concordia's Bootstrap sets
   border-box on everything, which narrowed padded columns (the footer address wrapped) */
#boot .stingers-site,
#boot .stingers-site *,
#boot .stingers-site *::before,
#boot .stingers-site *::after {
    box-sizing: content-box;
}

/* Browsers draw form controls and buttons border-box, as the old site had them */
#boot .stingers-site button,
#boot .stingers-site input,
#boot .stingers-site select,
#boot .stingers-site textarea {
    box-sizing: border-box;
}

/* The header's menu and language buttons use the old .buttoned class: keep the old header's sizes,
   which the content rule for .buttoned further down would otherwise change */
#boot .stingers-chrome .hamburger.buttoned {
    margin-bottom: 0;
    padding: 20px 10px;
}

#boot .stingers-chrome #language a.buttoned {
    margin-bottom: 0;
    padding: 8px;
    box-sizing: border-box;
}

#boot #content-main {
    /* flow-root keeps the last block's bottom margin inside the beige area; without it the
       margin escaped and showed a white strip of page background above the footer */
    display: flow-root;
    background: #f6f1e7;
    font-family: "UniformLight", Verdana, sans-serif;
    color: #1a1a1a;
}

#boot #content-main > .container-full-width > .parsys > .section:not(.iparsys) {
    max-width: 1100px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

#boot #content-main .section-header-wrapper h1:not(.stingers-site *),
#boot #content-main .section-header-wrapper h2:not(.stingers-site *),
#boot #content-main .section-header-wrapper h3:not(.stingers-site *) {
    margin: 2rem 0 1rem;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #82283c;
}

#boot #content-main .section-header-wrapper h1:not(.stingers-site *) {
    padding-bottom: 0.5rem;
    border-bottom: 4px solid #f4bd47;
    font-size: 2.4rem;
}

#boot #content-main .section-header-wrapper h2:not(.stingers-site *) {
    font-size: 1.7rem;
}

/* Links in content only: the Stingers menu inside #content-main keeps its own colours */
#boot #content-main .wysiwyg a:not(.stingers-site *),
#boot #content-main .table a:not(.stingers-site *),
#boot #content-main .c-card a:not(.stingers-site *),
#boot #content-main .section-header-wrapper a:not(.stingers-site *) {
    color: #82283c;
}

#boot #content-main .wysiwyg a:hover:not(.stingers-site *),
#boot #content-main .wysiwyg a:focus:not(.stingers-site *),
#boot #content-main .table a:hover:not(.stingers-site *),
#boot #content-main .table a:focus:not(.stingers-site *) {
    color: #5c1a29;
}

/* Card decks: a grid on published pages, in reading order. DEV publishes the cards directly in the
   deck; PROD wraps them in a .parsys and lays them out as masonry columns, so both are covered. */
#boot #content-main .c-card-deck__columns:not(.edit-mode):not(.stingers-site *),
#boot #content-main .c-card-deck__columns:not(.edit-mode) > .parsys:not(.stingers-site *) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

#boot #content-main .c-card-deck__columns:not(.edit-mode) > .parsys:not(.stingers-site *) {
    width: 100%;
    column-count: auto;
}

#boot #content-main .c-card-deck__columns:not(.edit-mode) > .c-card:not(.stingers-site *),
#boot #content-main .c-card-deck__columns:not(.edit-mode) > .parsys > .c-card:not(.stingers-site *) {
    /* The grid stretches each wrapper to the row's tallest card; the card itself fills it,
       so no white strip of wrapper shows below shorter cards */
    display: flex;
    flex-direction: column;
    width: 100%;
    float: none;
    padding: 0;
}

#boot #content-main .c-card-deck__columns:not(.edit-mode) > .c-card > .c-card__container:not(.stingers-site *),
#boot #content-main .c-card-deck__columns:not(.edit-mode) > .parsys > .c-card > .c-card__container:not(.stingers-site *) {
    flex: 1 1 auto;
}

@media (min-width: 768px) {
    #boot #content-main .c-card-deck__columns.cols-2:not(.edit-mode) > .c-card:not(.stingers-site *),
    #boot #content-main .c-card-deck__columns.cols-2:not(.edit-mode) > .parsys > .c-card:not(.stingers-site *) {
        width: calc((100% - 20px) / 2);
    }

    #boot #content-main .c-card-deck__columns.cols-3:not(.edit-mode) > .c-card:not(.stingers-site *),
    #boot #content-main .c-card-deck__columns.cols-3:not(.edit-mode) > .parsys > .c-card:not(.stingers-site *) {
        width: calc((100% - 40px) / 3);
    }

    #boot #content-main .c-card-deck__columns.cols-4:not(.edit-mode) > .c-card:not(.stingers-site *),
    #boot #content-main .c-card-deck__columns.cols-4:not(.edit-mode) > .parsys > .c-card:not(.stingers-site *) {
        width: calc((100% - 60px) / 4);
    }
}

#boot #content-main .c-card-deck__columns:not(.edit-mode) .c-card__container:not(.stingers-site *) {
    width: 100%;
    margin-bottom: 0;
}

/* Tables: schedules, results, rosters, player facts */
#boot #content-main table:not(.stingers-site *) {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 0.95rem;
}

#boot #content-main table th:not(.stingers-site *) {
    /* The WCMS table component sets its header background with !important. */
    background: #82283c !important;
    font-family: "UniformCondensedMedium", Verdana, sans-serif;
    text-transform: uppercase;
    text-align: left;
    color: #ffffff;
}

#boot #content-main table th:not(.stingers-site *),
#boot #content-main table td:not(.stingers-site *) {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #e3d9c6;
    vertical-align: top;
}

#boot #content-main table tbody th:not(.stingers-site *) {
    width: 30%;
    background: #f4bd47 !important;
    color: #1a1a1a;
}

#boot #content-main table small:not(.stingers-site *) {
    font-family: "UniformCondensedMedium", Verdana, sans-serif;
    text-transform: uppercase;
    color: #82283c;
}

/* Cards: news, players, coaches, sections */
#boot #content-main .c-card:not(.stingers-site *) {
    border: 0;
    border-top: 4px solid #f4bd47;
    /* The card's container is white; a white wrapper shows as a strip under it */
    background: transparent;
}

#boot #content-main .c-card .card-title:not(.stingers-site *),
#boot #content-main .c-card h3:not(.stingers-site *),
#boot #content-main .c-card h4:not(.stingers-site *) {
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    text-transform: uppercase;
    color: #82283c;
}

#boot #content-main .c-card a:hover .card-title:not(.stingers-site *),
#boot #content-main .c-card a:focus .card-title:not(.stingers-site *),
#boot #content-main .c-card a:hover h3:not(.stingers-site *),
#boot #content-main .c-card a:focus h3:not(.stingers-site *),
#boot #content-main .c-card a:hover h4:not(.stingers-site *),
#boot #content-main .c-card a:focus h4:not(.stingers-site *) {
    text-decoration: underline;
}

#boot #content-main .c-card img:not(.stingers-site *) {
    width: 100%;
    object-fit: cover;
}

/* Player and team photos */
#boot #content-main .image img:not(.stingers-site *) {
    max-width: 100%;
    height: auto;
}

/* Keep the inherited header full width, flush with the page top */
#boot #content-main .stingers-chrome--header {
    margin: 0;
}

/* Stingers footer: one band, on the old site's 1024px grid */
#boot .stingers-chrome--footer .fans,
#boot .stingers-chrome--footer .partners_wide,
#boot .stingers-chrome--footer .footer_wide {
    margin: 0;
}

/* The footer reuses the original .content_wide wrapper, which the old stylesheet positions
   absolutely below the header. Let it flow so it sits at the bottom and leaves no gap. */
#boot .stingers-site.stingers-chrome--footer .content_wide {
    position: relative;
    top: auto;
    box-shadow: none;
}

/* Temporary, until the "Hide Concordia header" page setting ships in wcms-aem (issue #14):
   hide the Concordia navigation and breadcrumb on Stingers pages.
   Keep the emergency alert and the skip link. */
#boot > header > *:not(.emergency-alert):not(#skip-to-main) {
    display: none !important;
}

/* Stingers supplies its own footer above the standard Concordia footer block. */
#boot > footer > .c-footer {
    display: none;
}

#boot .stingers-chrome--footer .stingers-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    clear: both;
    /* In the left column, where the old site had its cookie links */
    padding: 1rem 5% 0;
    font-size: 0.9rem;
}

#boot .stingers-chrome--footer .stingers-footer__cookies {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: #f4bd47;
    cursor: pointer;
}

#boot .stingers-chrome--footer .stingers-footer__cookies:hover {
    text-decoration: underline;
}

#boot .stingers-chrome--footer .stingers-footer__cookies:focus-visible,
#boot .stingers-championship .player_arrow_left:focus-visible,
#boot .stingers-championship .player_arrow_right:focus-visible {
    outline: 3px solid #f4bd47;
    outline-offset: 3px;
}

#boot .stingers-championship .player_arrow_left,
#boot .stingers-championship .player_arrow_right {
    padding: 0;
    border: 0;
    background-color: transparent;
}

/* The menu marks the current page for screen readers (aria-current). The old site showed no marker,
   and its ".active::after" arrow is meant for accordions. */
#boot .stingers-site .custom-nav a.active::after {
    content: none;
}

/* Keep the desktop menu on one line while the Stingers fonts load: the wider fallback font wrapped it
   onto two lines, and the page jumped up when the fonts arrived. Both languages fit with the real fonts. */
@media (min-width: 730px) {
    #boot .stingers-site .custom-nav .main-menu {
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* The old site set overflow-y: scroll on html; scoping moved it onto every .stingers-site
   wrapper, which clipped the phone menu and shows scrollbars on Windows. */
#boot .stingers-site {
    overflow: visible;
}

/* Old-site markup kept in page content outside the old-site wrapper. Pages rebuilt in the old markup sit in
   .stingers-site, where the original stylesheet styles them, so the rules for content in this file skip them
   (:not(.stingers-site *)). */
#boot #content-main .button:not(.stingers-site *),
#boot #content-main .tpos-add-to-cart:not(.stingers-site *) {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    border-radius: 2px;
    padding: 6px 14px;
    background-color: #82283c;
    cursor: pointer;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: #f4bd47;
}

#boot #content-main .button:hover:not(.stingers-site *),
#boot #content-main .button:focus:not(.stingers-site *),
#boot #content-main .tpos-add-to-cart:hover:not(.stingers-site *),
#boot #content-main .tpos-add-to-cart:focus:not(.stingers-site *) {
    background-color: #5c1a29;
    color: #f4bd47;
}

/* Staff directory letters */
#boot #content-main li.stingers-letter,
#boot #content-main span.bigletter:not(.stingers-site *) {
    display: block;
    margin: 1.5rem 0 0.5rem;
    list-style: none;
    font-family: "UniformBold", Verdana, sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    color: #82283c;
}

#boot #content-main li.stingers-letter::marker {
    content: "";
}

/* White event logos (Giving Tuesday) were drawn on the old site's dark background */
#boot #content-main .event_graphic {
    margin: 1rem 0;
    padding: 1.5rem;
    background: #82283c;
    text-align: center;
}

/* FAQ and camp accordions (opened by stingers-navigation.js) */
#boot #content-main .accordion:not(.stingers-site *) {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px dotted #82283c;
    padding: 0.8em 0;
    background: transparent;
    cursor: pointer;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    font-size: 1.2em;
    text-align: left;
    text-transform: uppercase;
    color: #82283c;
}

#boot #content-main .accordion:hover:not(.stingers-site *),
#boot #content-main .accordion:focus-visible:not(.stingers-site *) {
    text-decoration: underline;
}

#boot #content-main .accordion:focus-visible:not(.stingers-site *) {
    outline: 3px solid #f4bd47;
    outline-offset: 2px;
}

#boot #content-main .accordion:not(.stingers-site *)::after {
    content: "▼";
    float: right;
    margin-left: 5px;
    font-size: 0.7em;
}

#boot #content-main .accordion.active:not(.stingers-site *)::after {
    content: "▲";
}

#boot #content-main .panel:not(.stingers-site *) {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    padding: 0 18px;
}


/* Phone and desktop variants kept from the old pages: .hide drops a column on phones,
   .mobile and .desktop swap images (camps) */
@media (max-width: 600px) {
    #boot #content-main .hide:not(.stingers-site *) {
        display: none;
    }
}

#boot #content-main .mobile:not(.stingers-site *) {
    display: none !important;
}

@media (max-width: 730px) {
    #boot #content-main .mobile:not(.stingers-site *) {
        display: inline-block !important;
    }

    #boot #content-main .desktop:not(.stingers-site *) {
        display: none !important;
    }
}

/* The camps carousel ran on a jQuery slider from the old home template; show its slides as tiles */
#boot #content-main ul.bxslider:not(.stingers-site *) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 1rem 0 2rem;
    padding: 0;
    list-style: none;
}

#boot #content-main ul.bxslider li:not(.stingers-site *) {
    display: flex;
    flex-direction: column;
    margin: 0;
    background: #ffffff;
    border-top: 4px solid #f4bd47;
}

#boot #content-main ul.bxslider li:not(.stingers-site *)::marker {
    content: "";
}

#boot #content-main ul.bxslider img.desktop:not(.stingers-site *) {
    display: none !important;
}

#boot #content-main ul.bxslider img.mobile:not(.stingers-site *) {
    display: block !important;
    width: 100%;
    height: auto;
}

#boot #content-main ul.bxslider li a:not(.stingers-site *) {
    padding: 0.75rem 1rem;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
}

/* Two-column sections (.full holding .half columns) */
#boot #content-main .full:not(.stingers-site *) {
    clear: both;
    overflow: hidden;
    margin-top: 0.5em;
}

@media (min-width: 731px) {
    #boot #content-main .half:not(.stingers-site *) {
        float: left;
        width: 48%;
        margin-bottom: 2%;
        padding: 0 1%;
    }
}

#boot #content-main .half img:not(.stingers-site *) {
    max-width: 100%;
    height: auto;
}

/* Schedules typed as lists of cells (flag football) */
#boot #content-main .schedule_results ul:not(.stingers-site *) {
    margin: 0 0 4px;
    padding: 6px 4px;
    border-bottom: 1px dotted #82283c;
    list-style: none;
}

#boot #content-main .schedule_results li:not(.stingers-site *) {
    display: inline-block;
    vertical-align: top;
    line-height: 1.5;
}

#boot #content-main .schedule_results ul.header:not(.stingers-site *) {
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    text-transform: uppercase;
    color: #82283c;
}

#boot #content-main .schedule_results li:nth-child(1):not(.stingers-site *) { width: 70px; font-family: "UniformCondensedBold", Verdana, sans-serif; }
#boot #content-main .schedule_results li:nth-child(2):not(.stingers-site *) { width: 80px; }
#boot #content-main .schedule_results li:nth-child(3):not(.stingers-site *) { width: 180px; font-family: "UniformCondensedBold", Verdana, sans-serif; }
#boot #content-main .schedule_results li:nth-child(4):not(.stingers-site *) { width: 120px; text-align: center; }
#boot #content-main .schedule_results li:nth-child(5):not(.stingers-site *) { width: 110px; font-family: "UniformCondensedBold", Verdana, sans-serif; color: #82283c; }

@media (max-width: 800px) {
    #boot #content-main .schedule_results li:nth-child(4):not(.stingers-site *) {
        display: none;
    }
}

@media (max-width: 430px) {
    #boot #content-main .schedule_results ul.header:not(.stingers-site *) {
        display: none;
    }
}

/* Small old-site styles used in page text */
#boot #content-main .promo:not(.stingers-site *) {
    font-family: "UniformCondensedMedium", Verdana, sans-serif;
    text-transform: uppercase;
    color: #82283c;
}

#boot #content-main .buttoned:not(.stingers-site *) {
    margin-bottom: 1em;
    padding: 10px;
    background-color: #82283c;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
    text-align: center;
    text-transform: uppercase;
    color: #f4bd47;
}

#boot #content-main .buttoned a:not(.stingers-site *) {
    color: #f4bd47;
}

#boot #content-main .outlined:not(.stingers-site *),
#boot #content-main .outlined_white:not(.stingers-site *) {
    display: inline-block;
    margin: 6px 0;
    padding: 6px 20px;
    border: 1px solid #82283c;
    border-radius: 2px;
    line-height: 1.6;
}

#boot #content-main .outlined:hover:not(.stingers-site *),
#boot #content-main .outlined:focus-within:not(.stingers-site *) {
    background-color: #82283c;
}

#boot #content-main .outlined:hover a:not(.stingers-site *),
#boot #content-main .outlined:focus-within a:not(.stingers-site *),
#boot #content-main a.outlined:hover:not(.stingers-site *),
#boot #content-main a.outlined:focus:not(.stingers-site *) {
    color: #ffffff;
}

#boot #content-main .buttonwall:not(.stingers-site *) {
    overflow: hidden;
    padding: 0;
    list-style: none;
}

#boot #content-main .buttonwall li:not(.stingers-site *) {
    float: left;
    width: 180px;
    margin: 0.5em 0.5em 0.5em 0;
    padding: 0.5em;
    border: 1px solid #82283c;
    border-radius: 2px;
    font-family: "UniformCondensedBold", Verdana, sans-serif;
}

#boot #content-main .buttonwall li:not(.stingers-site *)::marker {
    content: "";
}

#boot #content-main .buttonwall li a span:not(.stingers-site *) {
    font-size: 1.4em;
    line-height: 1.2;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    #boot #content-main .buttonwall li:not(.stingers-site *) {
        width: 100%;
    }
}

#boot #content-main .caption:not(.stingers-site *) {
    display: inline-block;
    padding: 4px 8px;
    background-color: #82283c;
    font-family: "UniformCondensedMedium", Verdana, sans-serif;
    color: #f4bd47;
}

#boot #content-main .simple li:not(.stingers-site *) {
    padding-left: 0.3em;
    list-style: outside;
}

#boot #content-main .external_logo:not(.stingers-site *) {
    width: 50%;
    height: auto;
    margin-bottom: 2em;
}

@media (max-width: 730px) {
    #boot #content-main .external_logo:not(.stingers-site *) {
        width: 80%;
    }
}

/* Concordia's stylesheet puts « » around blockquotes; the old site's contact blocks had none. */
#boot .stingers-site blockquote::before,
#boot .stingers-site blockquote::after {
    content: none;
}

/* Concordia's stylesheet adds a document icon after PDF links; the old menu and pages had none. */
#boot .stingers-chrome--header a[href$=".pdf"]::after,
#boot .stingers-chrome--footer a[href$=".pdf"]::after,
#boot .stingers-site a[href$=".pdf"]::after {
    content: none;
}

/* Championship pages (2022 and 2024 women's hockey) run their cover band edge to edge, like the
   other old-look pages; Concordia's section kept them at 1,068 px. */
#boot #content-main > .container-full-width > .parsys > .section:has(.stingers-championship) {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

/* Values Concordia's stylesheet overrode inside the old pages, put back to the old site's. */
#boot .stingers-site button.accordion > h2 {
    text-transform: uppercase;
}

#boot .stingers-site .caption {
    letter-spacing: normal;
}

#boot .stingers-site .tpos-add-to-cart {
    font-size: 13.3333px;
}

#boot .stingers-site .player_arrow_left,
#boot .stingers-site .player_arrow_right {
    font-family: Arial, sans-serif;
}

/* The old site's page background (its body rule): the burgundy texture, fixed, over gold. Bands that
   use the same texture, like the player profiles on team pages, blend into it edge to edge. */
html #boot .stingers-site.stingers-home,
html #boot .stingers-site.stingers-page {
    background: #f4bd47 url(/content/dam/concordia/stingers/img/bbcknd5.jpg) repeat fixed;
    background-size: 80%;
}

/* The old home page started below the header (content_wide at top: 180px), so the menu doesn't
   cover the lead photo. */
html #boot .stingers-site.stingers-home .content_wide {
    margin-top: 0;
}

/* On phones the old content started at 78px, over the bottom of the 100px header; ours starts below
   the 109px logo, which left a strip between the header and the page. */
@media (max-width: 730px) {
    html #boot .stingers-site.stingers-home .content_wide,
    html #boot .stingers-site.stingers-page .content_wide {
        position: relative;
        top: -31px;
        margin-bottom: -31px;
    }
}