/* ==================================================
   2026 RESPONSIVE RETROFIT (Mobile Devices)
   ================================================== */

@media screen and (max-width: 768px) {

    /* 1. Release the Min-Width Trap */
    .inner {
        min-width: 0 !important;
        width: 95% !important;
        padding: 0 2.5%;
        /* Adds a little breathing room on the edges */
    }

    /* 2. Collapse the Float Grid System */
    .col_1,
    .col_2,
    .col_3,
    .col_4,
    .col_5,
    .col_6,
    .col_7,
    .col_8,
    .col_9,
    .col_10,
    .col_11,
    .col_12 {
        width: 100% !important;
        float: none !important;
        margin: 0 0 20px 0 !important;
        display: block;
    }
    /* Contain floated children (e.g. the float:left logos in the
       /about/sponsors columns) so a stacked column doesn't collapse to its
       text height and let the next column's heading ride up beside the
       previous column's floats. Clearfix rather than overflow:hidden, which
       would clip absolutely-positioned popovers (e.g. product .bubble). */
    .col_1::after,
    .col_2::after,
    .col_3::after,
    .col_4::after,
    .col_5::after,
    .col_6::after,
    .col_7::after,
    .col_8::after,
    .col_9::after,
    .col_10::after,
    .col_11::after,
    .col_12::after {
        content: "";
        display: block;
        clear: both;
    }

    /* 3. Fluid Images & Inputs */
    img,
    input,
    textarea {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box;
        /* Prevents padding from breaking widths */
    }

    /* 4. Remove desktop-only decorative backgrounds */
    form#frm_search {
        background-image: none !important;
    }

    div#newsletter_sign_up {
        background-image: none !important;
        margin-top: 0 !important;
    }

    ul.quick-links {
        margin: 10px 0 0 0 !important;
        justify-content: space-around;
    }

    ul.quick-links li {
        width: auto !important;
        flex: 1;
    }

    /* 4b. Fix Hardcoded Homepage Elements */
    h1 a {
        width: 100% !important;
        background-size: contain !important;
        background-position: center !important;
    }

    /* Replace image-replacement technique with live text */
    div#teaser {
        height: auto !important;
        padding: 5px !important;
    }

    div#teaser h2 {
        width: auto !important;
        height: auto !important;
        background-image: none !important;
        text-indent: 0 !important;
        color: #fff;
        font-size: 14px;
        line-height: 1.6;
    }

    div#teaser h2 .teaser-cta {
        display: block;
        color: #87a41c;
    }

    /* 5. Slider: maintain 551:270 aspect ratio on mobile */
    div#slider-track {
        height: 0 !important;
        padding-top: 49% !important;
        /* 270/551 */
    }

    div#content_scroller {
        margin-bottom: 15px !important;
    }

    a#scroller_prev {
        left: -2.5vw !important;
    }

    a#scroller_next {
        right: -2.5vw !important;
    }

    /* 6. Resonate Teaser — the auto-fit grid (homepage-max) cascades the
       teasers down to a single column on its own; nothing to stack here. */
    div#resonate_teaser {
        overflow-x: hidden !important;
    }

    /* 7. Intro Teasers */
    h3#browse_intros {
        width: auto !important;
        height: auto !important;
        background-image: none !important;
        text-indent: 0 !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #3B3C40 !important;
    }

    div#intro_teasers {
        flex-wrap: wrap !important;
        column-gap: 10px !important;
    }

    /* Scoped to the homepage intro_teasers block — the same `dl.intro`
       class is also used on default/introductionsSuccess.php as a 4-up
       grid of category cards (Timeline / Instrumental / Chamber / Choral)
       and that page handles its own mobile layout in brand.2026.css.
       Without this scope the bottom border bled onto those cards and,
       since each column had a different number of <dd> items, the lines
       didn't align vertically. */
    div#intro_teasers dl.intro {
        flex: 0 0 calc(50% - 5px) !important;
        border-right: none !important;
        border-bottom: 1px solid #B5B7B6;
        padding: 0 0 10px 0 !important;
        margin: 0 0 10px 0 !important;
    }

    div#intro_teasers dl.intro dt img {
        width: 100% !important;
    }

    /* 8. Footer */
    div#footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
    }

    div#footer-logos {
        justify-content: center;
        padding: 10px 0;
    }

    div#footer p {
        font-size: 95%;
    }
    /* 7. Fix Search Box Widths */
    /* Main search: flexbox keeps the Go button on the same line */
    form#frm_search p:first-child {
        display: flex;
        align-items: center;
    }

    form#frm_search input[type="text"] {
        flex: 1 !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }

    /* Inner-page quick search: hide breadcrumbs and left-align the
       search form (takes the full row, input fills remaining space
       beside the Go button). */
    div#page_options ul.breadcrumbs {
        display: none !important;
    }

    form#frm_quick_search {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        margin: 6px 0 !important;
    }

    form#frm_quick_search p {
        justify-content: center;
    }

    form#frm_quick_search input[type="text"] {
        flex: 0 0 auto !important;
        width: 200px !important;
        margin-bottom: 0 !important;
    }

    /* 8. Fix Work Success Layouts.
       div.product (shop listing card) is owned by brand.2026.css; its
       responsive grid + flex-card rules handle mobile there. */
    div.image_product {
        width: 100% !important;
        float: none !important;
        height: auto !important;
    }

    /* Allow tables (like the products table) to scroll horizontally if they are too wide */
    div.sub_section {
        overflow-x: auto;
    }
}


/* ==================================================
   MOBILE NAVIGATION RETROFIT (Updated)
   ================================================== */

/* Hide the hamburger button on desktop screens */
#mobile-nav-toggle {
    display: none;
}

@media screen and (max-width: 768px) {

    /* 1. Nuke the invisible click-stealing legacy backgrounds */
    span#bg,
    span#page_bg {
        display: none !important;
    }

    /* 2. Style the Hamburger Button — Night bg, Smoke text to match
       the desktop nav band it expands to reveal. */
    #mobile-nav-toggle {
        display: block;
        background: #3B3C40;
        color: #F4F4F4;
        padding: 10px 20px;
        cursor: pointer;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
    }

    /* 3. Strip layout constraints from the main menu */
    div#nav ul {
        height: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 4. Completely disable Superfish hiding mechanisms */
    .sf-menu ul,
    div#nav ul li ul,
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
    }

    /* 5. Force ALL list items (main and sub) to stack full-width */
    div#nav ul li,
    div#nav ul li ul li,
    ul.sf-menu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* 6. Top-Level Mobile Menu Links — layout only; colours live in
       brand.2026.css so they sit later in the cascade. */
    div#nav ul li a:link,
    div#nav ul li a:visited,
    div#nav ul li a:hover {
        display: block !important;
        width: auto !important;
        float: none !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
    }

    /* 7. Sub-Level Mobile Menu Links — layout only. */
    div#nav ul li ul li a:link,
    div#nav ul li ul li a:visited,
    div#nav ul li ul li a:hover {
        padding: 12px 20px 12px 40px !important;
        font-size: 14px !important;
    }
}


/* ==================================================
   SEARCH RESULTS RETROFIT
   Modernises the faceted search results: a results-per-page
   control, a mobile "Sort by" dropdown, and result tables that
   collapse into cards on small screens. Pairs with the per_page
   server changes and the data-label attributes on the result
   <td>s. Brand palette: Smoke #F4F4F4, Night #3B3C40,
   Peppermint #609F60, Silver #B5B7B6.
   ================================================== */

/* Controls bar: numbered pagination + results-per-page selector */
.results_controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 15px;
}
.results_controls ul.pagination {
    margin: 0;
    text-align: left;
}
.per_page_select {
    margin: 0;
    font-size: 90%;
    color: #3B3C40;
}
.per_page_select a,
.per_page_select .per_page_current {
    display: inline-block;
    min-width: 22px;
    padding: 4px 8px;
    margin: 0 1px;
    text-align: center;
    border: 1px solid #B5B7B6;
    border-radius: 3px;
    text-decoration: none;
}
.per_page_select .per_page_current {
    background: #3B3C40;
    color: #F4F4F4;
    border-color: #3B3C40;
    font-weight: bold;
}

/* Mobile "Sort by" dropdown — hidden on desktop, where the
   sortable column headers already do the job. */
.mobile_sort {
    display: none;
}
.mobile_sort label {
    font-weight: bold;
    margin-right: 6px;
    color: #3B3C40;
}
.mobile_sort .sort_select {
    padding: 8px 10px;
    border: 1px solid #B5B7B6;
    border-radius: 3px;
    background: #FFF;
    font-size: 16px; /* >=16px stops iOS zoom-on-focus */
}

/* Per-page control shown above the results (desktop + mobile) */
.per_page_top {
    text-align: right;
    margin-bottom: 10px;
}

/* The detail block is duplicated as a trailing cell purely for the mobile
   card layout; on desktop the collapsible copy in the name cell is used. */
table.search_results td.result_detail_mobile {
    display: none;
}

/* Product format badge: rendered before the title for mobile cards only;
   on desktop the Format column carries it (see media query). */
.format_mobile {
    display: none;
}

/* Facets panel — legacy main-max.css paints it cream (#FDFEF0) with an olive
   border and an olive-on-silver heading. Re-brand to Smoke + Night header.
   The colour needs !important to beat brand.2026.css's
   h4 { color:#3B3C40 !important }, otherwise it's Night text on Night. */
div.search_facets {
    background: #F4F4F4;
    border: 1px solid #B5B7B6;
}
div.search_facets h4 {
    background-color: #3B3C40;
    color: #F4F4F4 !important;
}
div.search_facets div.facet h5 {
    border-bottom-color: #B5B7B6;
}

/* Facet expand/collapse arrow — replace the old-scheme arrow_*.gif with a
   brand Peppermint caret. The toggle JS keeps swapping the (now hidden) gif
   src between arrow_right/arrow_down, so :has() mirrors the open state. */
h5.facet_label {
    cursor: pointer;
}
h5.facet_label img {
    display: none;
}
h5.facet_label::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 8px;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid #609F60; /* right-pointing caret, collapsed */
    vertical-align: middle;
}
h5.facet_label:has(img[src*="arrow_down"])::before {
    border-top: 6px solid #609F60; /* down-pointing caret, expanded */
    border-bottom: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

/* Results table header — drop the legacy bg-thead.gif gradient for a Night
   bar with white sort links (a washed-out light header read poorly). The
   legacy bg-tbody.gif and the old light-green zebra (.alt #F1F5DC) go too. */
table.search_results thead {
    background: #3B3C40;
    border: none;
}
table.search_results thead th {
    color: #F4F4F4;
    border: none;
}
table.search_results thead th a,
table.search_results thead th a:link,
table.search_results thead th a:visited {
    color: #F4F4F4 !important; /* beat brand.2026.css a:link (Peppermint) */
}
table.search_results thead th a:hover {
    color: #B5B7B6 !important; /* Silver hover, as in the nav */
}
table.search_results tbody {
    background: none;
}
table.search_results tr.alt {
    background: #F4F4F4;
}

@media screen and (max-width: 768px) {

    /* Reveal the Sort dropdown; it replaces tap-to-sort headers */
    .mobile_sort {
        display: block;
        margin-bottom: 12px;
    }
    .mobile_sort .sort_select {
        width: 100%;
        box-sizing: border-box;
    }

    /* Collapse the result tables into stacked cards. Scoped to .search_cards
       (the five retrofitted entity tables) so the Ish/Subject browse tables,
       which have a different expandable-hierarchy structure, keep their normal
       table layout and working Show More. */
    table.search_cards,
    table.search_cards tbody,
    table.search_cards tr,
    table.search_cards td {
        display: block;
        width: auto !important;
    }
    table.search_cards thead {
        display: none; /* the header row is meaningless once stacked */
    }
    table.search_cards tr {
        margin: 0 0 12px 0;
        padding: 10px 12px;
        border: 1px solid #B5B7B6;
        border-radius: 4px;
        background: #FFF;
    }
    table.search_cards tr.alt {
        background: #F4F4F4; /* keep the zebra hint as a subtle card tint */
    }
    table.search_cards td {
        padding: 3px 0;
        border: none;
    }
    /* Field label, from the cell's data-label attribute */
    table.search_cards td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: #3B3C40;
    }
    /* Drop empty cells so a card never shows "State: " with no value */
    table.search_cards td:empty {
        display: none;
    }
    /* Primary cell becomes the card title (just the name link) */
    table.search_cards td.result_title {
        font-size: 115%;
        padding-bottom: 6px;
        margin-bottom: 4px;
        border-bottom: 1px solid #B5B7B6;
    }
    /* "Show More" is redundant in cards — the detail is always shown below. */
    table.search_cards .expandcollapse {
        display: none;
    }
    /* Always-visible detail at the foot of the card, in smaller type. */
    table.search_cards td.result_detail_mobile {
        display: block;
        margin-top: 6px;
        font-size: 85%;
        line-height: 1.45;
        color: #555;
    }
    /* Surface the product format as a Peppermint badge before the title;
       the Format cell is then redundant in the card, so hide it. */
    .format_mobile {
        display: inline-block;
        font-size: 65%;
        font-weight: bold;
        color: #FFFFFF;
        background: #609F60;
        padding: 1px 5px;
        border-radius: 3px;
        margin-right: 6px;
        vertical-align: middle;
    }
    table.search_cards td[data-label="Format"] {
        display: none;
    }

    /* Ish/Subject browse tables keep the table layout, but the floated
       "+ Show More" toggle squeezes the Instrumentation term so its label
       wraps mid-word. Stack the term cell so the toggle drops onto its own
       line, left-aligned, below the term (the term is a bare text node, so
       it stays order:0 and the toggle/detail are ordered after it). */
    table.search_results:not(.search_cards) tbody td:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    table.search_results:not(.search_cards) .expandcollapse {
        float: none;
        margin: 4px 0 0 0;
        text-align: left;
        order: 1;
    }
    table.search_results:not(.search_cards) .search_more_detail {
        order: 2;
    }

    .results_controls {
        justify-content: center;
    }
    .per_page_top {
        text-align: center;
    }
}