.btrm-menu-band {
/* Keep the full-width navigation band white like the supplied desktop mockup. */
    background-color: #fff;
/* Use a white menu background. */
    overflow-x: clip;
/* Clip viewport-width panel bleed to avoid a horizontal page scrollbar. */
}
/* Finish the full-width menu band. */

.btrm-menu-stage {
/* Anchor the centered desktop panels to the menu container. */
    position: relative;
/* Provide the positioning context for mega panels. */
}
/* Finish the navigation stage. */

.btrm-menu-stage::after {
/* Continue the blue rule across the viewport behind the selected tab. */
    border-bottom: 1px solid #0782cf;
/* Match the reference rule color and weight. */
    bottom: -10px;
/* Place the rule 10px below the navigation row so it clears the pill buttons. */
    content: '';
/* Create the decorative navigation rule. */
    left: calc(50% - 50vw);
/* Extend the rule from the centered navigation stage to the viewport edge. */
    pointer-events: none;
/* Keep the decorative line from blocking menu interaction. */
    position: absolute;
/* Layer the rule over the white panel surface. */
    width: 100vw;
/* Extend the rule across the browser width. */
    z-index: 21;
/* Keep the line above the white submenu surface. */
}
/* Finish the full-width navigation rule. */

.btrm-menu-stage > .main_menu {
/* Lay out top-level tabs and pill links in one desktop row. */
    align-items: stretch;
/* Let tabs share a consistent navigation height. */
    display: flex;
/* Use Bootstrap's familiar flex layout behavior. */
    list-style: none;
/* Remove the browser's default list markers. */
    margin: 0;
/* Remove default menu margins. */
    padding: 0;
/* Remove default menu padding. */
}
/* Finish the desktop menu row. */

.btrm-menu-stage > .main_menu > li {
/* Align each top-level menu item in the row. */
    align-items: stretch;
/* Keep tab controls aligned to the row height. */
    display: flex;
/* Use a flex item for top-level links and buttons. */
    list-style: none;
/* Remove list markers from root items. */
    margin: 0;
/* Remove the theme's default list spacing. */
    position: static;
/* Let the shared panel align to the full navigation stage. */
}
/* Finish styling the top-level items. */

.btrm-menu-stage > .main_menu > .menu_reveal_li {
/* Keep the legacy mobile reveal control out of desktop navigation. */
    display: none;
/* Hide the mobile-only Menu link at desktop widths. */
}
/* Finish hiding the mobile reveal control on desktop. */

.btrm-menu-trigger,
.btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill) {
/* Share tab typography and spacing between heading tabs and top-level links. */
    align-items: center;
/* Center the label vertically within its control. */
    background: transparent;
/* Keep non-pill controls on the white navigation band. */
    border: 1px solid transparent;
/* Reserve space for the selected tab border without shifting layout. */
    color: #087fc9;
/* Match the bright BTRM blue used in the reference. */
    display: flex;
/* Keep each menu label aligned consistently. */
    font: inherit;
/* Inherit the site's established Sarabun typography. CHANGE ASKED FOR BY NEIL */
    font-size: 1.65rem;
/* Set the top-level desktop text size. CHANGE ASKED FOR BY NEIL */
    font-weight: 600;
/* Emphasize desktop top-level labels. */
    line-height: 1.2;
/* Stabilize the tab row height. */
    margin: 0 0 -1px;
/* Let the selected border sit over the navigation rule. */
    padding: 0.45rem 1.1rem 0.55rem;
/* Match the generous tab padding in the supplied graphic. */
    text-decoration: none;
/* Remove default link underlines. */
    white-space: nowrap;
/* Keep each top-level label on one line. */
}
/* Finish the shared top-level control styling. */

.btrm-menu-trigger {
/* Make the non-linked menu heading a native button. */
    cursor: pointer;
/* Communicate that the tab can open its panel. */
}
/* Finish styling the tab button. */

.btrm-menu-trigger:hover,
.btrm-menu-trigger:focus-visible,
.btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill):hover,
.btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill):focus-visible {
/* Keep keyboard and pointer feedback consistent. */
    color: #056baa;
/* Deepen the blue slightly for hover and focus. */
    text-decoration: none;
/* Preserve the clean tab appearance. */
}
/* Finish top-level hover and focus treatment. */

.btrm-menu-tab-item:not(.is-dismissed):hover > .btrm-menu-trigger,
.btrm-menu-tab-item:not(.is-dismissed):focus-within > .btrm-menu-trigger,
.btrm-menu-tab-item.is-open > .btrm-menu-trigger {
/* Outline the active tab above the open panel. */
    background-color: #fff;
/* Keep the active tab continuous with its panel. */
    border-color: #0782cf;
/* Draw the tab's top and side borders. */
    border-bottom-color: #fff;
/* Hide the border where tab and panel meet. */
    position: relative;
/* Layer the selected tab above the panel border. */
    z-index: 22;
/* Keep the active tab and its side-border bridge above the blue rule. */
}
/* Finish the selected-tab treatment. */

.btrm-menu-tab-item:not(.is-dismissed):hover > .btrm-menu-trigger::before,
.btrm-menu-tab-item:not(.is-dismissed):focus-within > .btrm-menu-trigger::before,
.btrm-menu-tab-item.is-open > .btrm-menu-trigger::before {
/* Extend the highlighted tab's side borders down to the full-width rule. */
    background-color: #fff;
/* Keep the white tab surface continuous into the panel. */
    border-left: 1px solid #0782cf;
/* Continue the left blue tab border. */
    border-right: 1px solid #0782cf;
/* Continue the right blue tab border. */
    box-sizing: border-box;
/* Include the vertical borders within the extension width. */
    content: '';
/* Create the short border extension beneath the active tab. */
    height: 10px;
/* Reach the blue rule positioned 10px below the navigation row. */
    left: -1px;
/* Align the extension with the active tab's left border. */
    position: absolute;
/* Anchor the extension to the active tab button. */
    right: -1px;
/* Align the extension with the active tab's right border. */
    top: 100%;
/* Begin exactly at the bottom of the highlighted tab. */
    z-index: 1;
/* Keep the extension above the panel and meeting the blue rule. */
}
/* Finish extending the highlighted tab borders. */

.btrm-mega-panel {
/* Create the centered multi-column panel under each top-level tab. */
    background-color: #fff;
/* Match the white menu surface. */
    border: 0;
/* Remove the blue outline from the panel sides and bottom. */
    display: block;
/* Keep the absolutely positioned panel available for opacity transitions. */
    left: 50%;
/* Center the panel relative to the navigation stage. */
    max-width: none;
/* Let the white panel extend across the browser viewport. */
    --btrm-menu-fade-length: 100px;
/* Set the fade length once so spacing below the links follows it. */
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--btrm-menu-fade-length)), transparent 100%);
/* Fade only the final configured length at the panel's lower edge. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--btrm-menu-fade-length)), transparent 100%);
/* Support the lower-edge CSS fade in WebKit browsers. */
    padding: 1.5rem max(38px, calc((100vw - 1320px) / 2 + 22px)) calc(var(--btrm-menu-fade-length) + 2rem);
/* Preserve column positions and leave 2rem of clear space before the fade. */
    opacity: 0;
/* Fade closed panels out. */
    pointer-events: none;
/* Prevent interaction with hidden links. */
    position: absolute;
/* Layer the panel below the top-level row. */
    top: 100%;
/* Place the panel directly below the tabs. */
    transform: translate(-50%, -8px);
/* Align the panel and lift it slightly while closed. */
    transition: opacity 0.25s ease 0.25s, transform 0.25s ease 0.25s, visibility 0s linear 0.5s;
/* Wait for a new panel to fade in before fading this panel away. */
    visibility: hidden;
/* Remove the closed panel from keyboard and accessibility navigation. */
    width: 100vw;
/* Match the panel width to the browser viewport. */
    z-index: 10;
/* Layer the panel above page content. */
}
/* Finish the shared panel surface. */

.btrm-menu-tab-item:not(.is-dismissed):hover > .btrm-mega-panel,
.btrm-menu-tab-item:not(.is-dismissed):focus-within > .btrm-mega-panel,
.btrm-menu-tab-item.is-open > .btrm-mega-panel {
/* Reveal the panel for hover, keyboard focus, or explicit activation. */
    opacity: 1;
/* Fade the active panel in. */
    pointer-events: auto;
/* Enable interaction with links in the open panel. */
    transform: translate(-50%, 0);
/* Move the active panel to its resting position. */
    transition: opacity 0.25s ease 0s, transform 0.25s ease 0s, visibility 0s linear 0s;
/* Open immediately, reserving the 0.25-second delay for closing only. */
    visibility: visible;
/* Make the active panel available to keyboard and assistive technology. */
    z-index: 20;
/* Keep the newly opened panel above the outgoing panel during their overlap. */
}
/* Finish panel visibility behavior. */

.btrm-mega-columns {
/* Arrange second-level no-link headings into responsive desktop columns. */
    display: flex;
/* Keep content-sized menu groups alongside each other. */
    column-gap: 3.6rem;
/* Double the horizontal spacing between menu groups. */
    row-gap: 1.8rem;
/* Keep vertical spacing between wrapped rows unchanged. */
    flex-wrap: wrap;
/* Wrap groups only when their natural widths no longer fit. */
    justify-content: flex-start;
/* Keep groups packed from the left instead of spreading across the panel. */
    margin: 0;
/* Reset list spacing while retaining Bootstrap's list utility class. */
    padding: 0;
/* Reset list padding. */
}
/* Finish the mega-panel column grid. */

.btrm-menu-column {
/* Treat each heading and its links as one menu group. */
    list-style: none;
/* Remove list markers from column groups. */
    margin: 0;
/* Remove default list spacing. */
    max-width: 450px;
/* Keep each level-2 group within the requested width. */
    flex: 0 1 max-content;
/* Size groups to their content and allow them to shrink when necessary. */
    min-width: 0;
/* Allow long link labels to wrap within their grid track. */
    padding: 0;
/* Reset default list padding. */
    width: max-content;
/* Keep short groups compact rather than filling a 450px track. */
}
/* Finish the column item. */

.btrm-mega-heading {
/* Style second-level no-link items as column headings. */
    appearance: none;
/* Remove default button chrome for the accessible mobile toggle. */
    background: transparent;
/* Keep the heading on the panel surface. */
    border: 0;
/* Remove browser button borders. */
    color: #111;
/* Use the dark heading color shown in the mockup. */
    font-size: 1.35rem;
/* Give column labels clear hierarchy over links. */
    font-weight: 700;
/* Make headings visually distinct from the link list. */
    line-height: 1.2;
/* Keep multi-line headings compact. */
    margin: 0 0 0.35rem;
/* Separate headings from their first link. */
    padding: 0;
/* Preserve the desktop heading alignment. */
    text-align: start;
/* Align heading text with its links. */
}
/* Finish the column heading styling. */

.btrm-mega-links {
/* Reset list styles for linked menu descendants. */
    list-style: none;
/* Remove browser list markers. */
    margin: 0;
/* Remove default list spacing. */
    max-width: 450px;
/* Constrain level-3 and level-4 link groups to the same readable width. */
    padding: 0;
/* Remove default list indentation. */
}
/* Finish the menu link list reset. */

.btrm-mega-links > li {
/* Keep each menu link on its own readable row. */
    list-style: none;
/* Remove list markers from menu links. */
    margin: 0;
/* Remove default theme list spacing. */
    padding: 0;
/* Remove default theme list padding. */
}
/* Finish the individual link row reset. */

.btrm-menu-link {
/* Style links in the expanded desktop panel. */
    color: #087fc9;
/* Match the mockup's link blue. */
    display: block;
/* Make the full row easy to target. */
    font-size: 1.08rem;
/* Keep link labels readable without competing with headings. */
    line-height: 1.25;
/* Match the close link spacing in the reference. */
    overflow-wrap: anywhere;
/* Prevent unusually long titles from forcing horizontal overflow. */
    padding: 0.06rem 0;
/* Keep rows compact while retaining a clear click target. */
    text-decoration: none;
/* Use the clean link appearance from the mockup. */
}
/* Finish the panel link styling. */

.btrm-menu-link:hover,
.btrm-menu-link:focus-visible {
/* Provide visible pointer and keyboard feedback for links. */
    color: #056baa;
/* Deepen the link blue on interaction. */
    text-decoration: underline;
/* Make the interactive state clear without relying on color alone. */
}
/* Finish panel link interaction styling. */

.btrm-mega-links--nested {
/* Indent fourth-level links such as Faculty Opinion. */
    padding-inline-start: 1rem;
/* Use Bootstrap-like spacing for one nested level. */
}
/* Finish deeper link indentation. */

.btrm-menu-stage > .main_menu > .btrm-menu-pill-item {
/* Align top-level pill buttons to the bottom of the navigation row. */
    align-items: flex-end;
/* Align the button edge with the top-level label baseline area. */
    padding-inline-start: 0.5rem;
/* Separate action links from the tabs and each other. */
}
/* Finish pill item spacing. */

.btrm-menu-link.btrm-menu-pill {
/* Style explicitly marked top-level links as pill buttons. */
    align-items: center;
/* Center label text within the pill. */
    background-color: #087fc9;
/* Use the reference's solid BTRM blue. */
    border: 1px solid #087fc9;
/* Keep the pill edge defined against white. */
    border-radius: 50rem;
/* Create a fully rounded Bootstrap-style pill. */
    color: #fff;
/* Keep the pill label high-contrast. */
    display: inline-flex;
/* Fit the pill to its label while centering the text. */
    font-size: 1.65rem;
/* Match pill links to the top-level desktop text size. */
    font-weight: 600;
/* Match pill links to the top-level desktop weight. */
    justify-content: center;
/* Center the label horizontally. */
    line-height: 1.2;
/* Keep pill height predictable. */
    min-width: 0;
/* Let each pill size to its label instead of preserving the previous wide minimum. */
    padding: 0.38rem 0.5rem;
/* Keep a compact half-rem inset on each side without changing pill height. */
    text-decoration: none;
/* Remove link underlines from the pill. */
    white-space: nowrap;
/* Keep each button label on a single line. */
}
/* Finish the pill button styling. */

.btrm-menu-pill-label {
/* Raise only the pill label while leaving the button aligned to the row. */
    position: relative;
/* Allow a small visual adjustment without changing layout dimensions. */
    top: -2px;
/* Move the label upward by the requested two pixels. */
}
/* Finish pill label alignment. */

.btrm-menu-link.btrm-menu-pill:hover,
.btrm-menu-link.btrm-menu-pill:focus-visible {
/* Keep pill interaction visible and accessible. */
    background-color: #056baa;
/* Darken the pill background on interaction. */
    border-color: #056baa;
/* Match the darker interaction background. */
    color: #fff;
/* Preserve label contrast while interacting. */
}
/* Finish pill interaction styling. */

.btrm-menu-submenu-toggle {
/* Keep level-4 toggles out of the desktop layout. */
    display: none;
/* Reveal these controls only in the mobile accordion. */
}
/* Finish the desktop submenu-toggle default. */

@media (min-width: 992px) {
/* Keep the complete desktop header pinned while the page scrolls. */
    header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background-color: #fff;
    }

    header::after {
        background-color: #fff;
        bottom: -10px;
        content: '';
        height: 10px;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        z-index: 0;
    }

    .admin-bar header {
        top: 32px;
    }
}

@media (min-width: 1080px) and (max-width: 1399.98px) {
/* Reduce top-level navigation text on narrower desktop viewports. 992px */
    .btrm-menu-trigger,
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill),
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link.btrm-menu-pill {
        font-size: 1.30rem;
    }
}

@media (min-width: 992px) and (max-width: 1079.98px) {
/* Reduce top-level navigation text on narrower desktop viewports. 992px */
    .btrm-menu-trigger,
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill),
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link.btrm-menu-pill {
        font-size: 1.15rem;
    }
}

@media (max-width: 991.98px) {
/* Preserve the current Menu reveal and show a basic nested-list fallback below desktop. */
    .btrm-menu-stage > .main_menu,
    .btrm-menu-stage > .main_menu * {
    /* Make every mobile menu node render immediately when its parent is expanded. */
        animation: none !important;
    /* Prevent inherited or theme animations from delaying labels and child rows. */
        transition: none !important;
    /* Keep mobile accordion text and nested lists free of transition delays. */
    }
    /* Finish the immediate mobile menu rendering reset. */

    .btrm-menu-stage::after {
    /* Keep the desktop tab rule out of the mobile stacked navigation. */
        display: none;
    /* Hide the full-width rule below the desktop breakpoint. */
    }
    /* Finish hiding the desktop rule on small screens. */

    .btrm-menu-band {
    /* Use the site's existing blue mobile menu band until the mobile design pass. */
        background-color: #3d94d0;
    /* Keep the established compact navigation color on smaller screens. */
    }
    /* Finish the smaller-screen menu band fallback. */

    .btrm-menu-stage > .main_menu {
    /* Stack root items for the existing mobile menu reveal. */
        align-items: stretch;
    /* Allow each mobile item to fill its row. */
        display: block;
    /* Keep the current vertical mobile navigation flow. */
    }
    /* Finish the small-screen root list. */

    .btrm-menu-stage > .main_menu > .menu_reveal_li {
    /* Restore the legacy mobile reveal control hidden by the desktop rule. */
        display: list-item;
    /* Show the Menu link below the desktop breakpoint. */
    }
    /* Finish the mobile reveal control rule. */

    .btrm-menu-stage > .main_menu > li:not(.menu_reveal_li) {
    /* Keep nested content hidden until the existing Menu control is activated. */
        display: none;
    /* Preserve the theme's established mobile reveal behavior. */
    }
    /* Finish initial mobile menu hiding. */

    .btrm-menu-stage > .main_menu > li {
    /* Stack level-1 controls and their accordion panels on mobile. */
        display: list-item;
    /* Keep root menu items in normal list flow after the Menu reveal. */
        position: relative;
    /* Anchor top-level controls and descendants to their rows. */
    }
    /* Finish the mobile root-item layout. */

    .btrm-menu-stage > .main_menu > .menu_reveal_li > a {
    /* Keep the existing Menu reveal link touch-friendly. */
        color: #fff;
    /* Match the mobile blue menu band. */
        display: block;
    /* Make the full row an easy tap target. */
        font-size: 1.15rem;
    /* Match the accordion text size. */
        padding: 0.65rem 0.75rem;
    /* Provide comfortable tap spacing. */
    }
    /* Finish styling the mobile Menu reveal. */

    .btrm-menu-trigger,
    .btrm-menu-accordion-trigger,
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link:not(.btrm-menu-pill),
    .btrm-menu-stage > .main_menu > li > .btrm-menu-link.btrm-menu-pill {
    /* Give all accordion labels one consistent mobile text size. */
        align-items: center;
    /* Center each label within its row. */
        appearance: none;
    /* Remove browser-specific button styling. */
        background: transparent;
    /* Keep controls on the blue menu surface. */
        border: 0;
    /* Remove desktop tab and default button borders. */
        color: #fff;
    /* Use white text throughout the mobile menu. */
        display: flex;
    /* Align label and triangle indicator horizontally. */
        font: inherit;
    /* Preserve the site's established typeface. */
        font-size: 1.15rem;
    /* Keep level-1, level-2, and linked labels the same size. */
        font-weight: 400;
    /* Keep weight consistent across the menu levels. */
        justify-content: space-between;
    /* Keep expandable controls full width with their indicator at right. */
        line-height: 1.3;
    /* Keep wrapped labels readable. */
        margin: 0;
    /* Remove desktop tab spacing. */
        min-height: 0;
    /* Maintain a comfortable touch target. */
        padding: 0.65rem 0.75rem;
    /* Use consistent vertical and horizontal row spacing. */
        text-align: start;
    /* Align all labels to the leading edge. */
        text-decoration: none;
    /* Remove link decoration in the mobile list. */
        white-space: normal;
    /* Allow long labels to wrap on narrow screens. */
        width: 100%;
    /* Make each label fill the available menu row. */
    }
    /* Finish the shared mobile label styling. */

    .btrm-menu-trigger,
    .btrm-menu-stage > .main_menu > .btrm-menu-pill-item > .btrm-menu-link {
    /* Keep mobile level-1 labels and pill links at the requested top-level style. */
        font-size: 1.65rem;
    /* Match the requested top-level text size. */
        font-weight: 600;
    /* Match the requested top-level text weight. */
    }
    /* Finish mobile top-level typography. */

    .btrm-menu-trigger,
    .btrm-menu-accordion-trigger {
    /* These heading labels no longer act as mobile dropdown controls. */
        cursor: default;
    /* Use ordinary label cursors in the expanded mobile list. */
    }
    /* Finish mobile heading cursor styling. */

    .btrm-menu-tab-item > .btrm-menu-trigger {
    /* Override the desktop selected-tab surface while using the mobile accordion. */
        background-color: transparent !important;
    /* Keep expanded level-1 rows blue like the rest of the mobile menu. */
        border: 0 !important;
    /* Remove desktop tab borders from the mobile row. */
    }
    /* Finish mobile level-1 surface reset. */

    .btrm-menu-tab-item > .btrm-menu-trigger::before {
    /* Keep desktop border extensions out of the mobile accordion. */
        display: none;
    /* Use only the mobile triangle state indicator. */
    }
    /* Finish hiding desktop tab border extensions on mobile. */

    .btrm-menu-trigger::after,
    .btrm-menu-accordion-trigger::after,
    .btrm-menu-submenu-toggle::after {
    /* Draw the compact white triangle used by every expandable level. */
        border-bottom: 0;
    /* Reserve the closed-state triangle edge. */
        border-left: 0.35rem solid transparent;
    /* Create the left sloping edge of the indicator. */
        border-right: 0.35rem solid transparent;
    /* Create the right sloping edge of the indicator. */
        border-top: 0.45rem solid #fff;
    /* Point down when its menu item is open. */
        content: '';
    /* Draw the indicator without an image asset. */
        flex: 0 0 auto;
    /* Keep the triangle from shrinking beside long labels. */
        height: 0;
    /* Build the triangle from borders. */
        width: 0;
    /* Build the triangle from borders. */
    }
    /* Finish the shared mobile triangle shape. */

    .btrm-menu-trigger[aria-expanded="false"]::after,
    .btrm-menu-accordion-trigger[aria-expanded="false"]::after,
    .btrm-menu-submenu-toggle[aria-expanded="false"]::after {
    /* Point upward while the child menu is closed, as requested. */
        border-bottom: 0.45rem solid #fff;
    /* Show the upward-pointing closed indicator. */
        border-top: 0;
    /* Remove the open-state edge. */
    }
    /* Finish the closed triangle state. */

    .btrm-menu-trigger:hover,
    .btrm-menu-trigger:focus-visible,
    .btrm-menu-accordion-trigger:hover,
    .btrm-menu-accordion-trigger:focus-visible,
    .btrm-menu-link:not(.btrm-menu-pill):hover,
    .btrm-menu-link:not(.btrm-menu-pill):focus-visible {
    /* Keep mobile labels clear on focus and hover. */
        color: #fff;
    /* Preserve the white mobile label color. */
        text-decoration: underline;
    /* Retain a visible interaction cue without changing font size. */
    }
    /* Finish mobile interaction feedback. */

    .btrm-mega-panel {
    /* Collapse nested panels until their matching heading is activated. */
        background-color: transparent;
    /* Let the established blue mobile menu background show through. */
        border: 0;
    /* Remove the desktop panel border. */
        display: none !important;
    /* Keep level-2 panels closed initially. */
        left: auto;
    /* Cancel desktop panel positioning. */
        mask-image: none;
    /* Keep mobile text fully visible. */
        -webkit-mask-image: none;
    /* Keep mobile text fully visible in WebKit. */
        max-width: none;
    /* Let the accordion use the available screen width. */
        padding: 0 0 0 0.75rem;
    /* Indent level 2 relative to level 1. */
        position: static;
    /* Keep the accordion in normal document flow. */
        transform: none;
    /* Remove desktop panel centering. */
        width: auto;
    /* Avoid viewport-width panel sizing on mobile. */
    }
    /* Finish the collapsed mobile panel rules. */

    .btrm-menu-tab-item.mobile-open > .btrm-mega-panel {
    /* Show a level-2 panel when its top-level heading is open. */
        display: block !important;
    /* Reveal this branch without affecting open siblings. */
        opacity: 1;
    /* Keep the mobile panel fully visible. */
        pointer-events: auto;
    /* Keep panel links interactive. */
        transform: none !important;
    /* Override desktop focus-within centering on mobile. */
        transition: none !important;
    /* Keep mobile accordion changes immediate. */
        visibility: visible;
    /* Make the open panel visible to assistive technology. */
    }
    /* Finish mobile top-level panel visibility. */

    .btrm-mega-columns {
    /* Stack level-2 heading groups as a mobile list. */
        display: block;
    /* Replace the desktop horizontal group layout. */
    }
    /* Finish the mobile level-2 list. */

    .btrm-menu-column {
    /* Keep each level-2 accordion heading on its own row. */
        max-width: none;
    /* Allow mobile heading rows to use the available width. */
        width: 100%;
    /* Fill the indented accordion panel. */
    }
    /* Finish mobile level-2 item sizing. */

    .btrm-mega-heading {
    /* Style the level-2 toggle with the shared mobile text size. */
        color: #fff;
    /* Keep heading text readable on the blue background. */
        font-size: 1.15rem;
    /* Match every other menu level. */
        margin: 0;
    /* Remove desktop heading margins. */
        padding: 0.65rem 0.75rem;
    /* Match the other mobile rows. */
        width: 100%;
    /* Fill the level-2 row and position its triangle at right. */
    }
    /* Finish the mobile level-2 control. */

    .btrm-mega-links {
    /* Collapse level-3 and level-4 lists until their heading is opened. */
        display: none !important;
    /* Keep child links hidden until their parent is activated. */
        max-width: none;
    /* Let expanded lists use the mobile menu width. */
        padding: 0 0 0 1.25rem;
    /* Indent level 3 beneath its level-2 heading. */
    }
    /* Finish collapsed nested-list defaults. */

    .btrm-menu-column.mobile-open > .btrm-mega-links,
    .btrm-mega-links > li.mobile-open > .btrm-mega-links {
    /* Reveal child links for each independently opened branch. */
        display: block !important;
    /* Keep sibling branches open or closed independently. */
        opacity: 1 !important;
    /* Prevent inherited panel fades from hiding revealed link text. */
        visibility: visible !important;
    /* Override any stale hidden state on a newly opened child list. */
    }
    /* Finish nested mobile accordion visibility. */

    .btrm-menu-column.mobile-open > .btrm-mega-links > li,
    .btrm-mega-links > li.mobile-open > .btrm-mega-links > li,
    .btrm-menu-column.mobile-open > .btrm-mega-links > li > .btrm-menu-link,
    .btrm-mega-links > li.mobile-open > .btrm-mega-links > li > .btrm-menu-link {
    /* Keep the text of newly revealed level-3 and level-4 rows visible. */
        opacity: 1 !important;
    /* Make the link text immediately opaque. */
        visibility: visible !important;
    /* Make the opened child rows immediately visible. */
    }
    /* Finish forcing mobile child text visibility. */

    .btrm-menu-link:not(.btrm-menu-pill) {
    /* Keep all linked labels at the same size as accordion headings. */
        color: #fff;
    /* Maintain contrast on the mobile background. */
        font-size: 1.15rem;
    /* Match level-1, level-2, and level-3 text size. */
        line-height: 1.3;
    /* Keep wrapped link labels readable. */
        min-height: 0;
    /* Match the touch target height of accordion headings. */
        padding: 0.65rem 0;
    /* Keep link spacing consistent with the accordion rows. */
        text-decoration: none;
    /* Remove desktop link styling from the mobile list. */
        white-space: normal;
    /* Wrap long titles within the viewport. */
    }
    /* Finish mobile linked-item styling. */

    .btrm-menu-stage > .main_menu > li > .btrm-menu-link.btrm-menu-pill {
    /* Render action links as ordinary full-width mobile menu rows. */
        background: transparent;
    /* Remove the desktop pill fill. */
        border: 0;
    /* Remove the desktop button outline. */
        border-radius: 0;
    /* Remove the rounded desktop pill shape. */
        color: #fff;
    /* Match the other white mobile menu labels. */
        display: flex;
    /* Fill the row like the other top-level items. */
        font-size: 1.65rem;
    /* Match the requested top-level mobile pill size. */
        font-weight: 600;
    /* Match the requested top-level mobile pill weight. */
        justify-content: flex-start;
    /* Align the label at the same left edge as other level-1 rows. */
        margin: 0;
    /* Remove desktop pill spacing. */
        min-height: 0;
    /* Match the touch target height of other menu rows. */
        min-width: 0;
    /* Remove the desktop pill minimum width. */
        padding: 0.65rem 0.75rem;
    /* Match the mobile menu row padding. */
        text-align: start;
    /* Align action labels with the other menu labels. */
        width: 100%;
    /* Fill the mobile navigation row. */
    }
    /* Finish mobile pill reset. */

    .btrm-menu-pill-label {
    /* Keep mobile pill labels aligned with the standard mobile menu rows. */
        top: 0;
    /* Remove the desktop-only two-pixel adjustment on mobile. */
    }
    /* Finish the mobile pill label reset. */

    .btrm-menu-stage > .main_menu > .btrm-menu-pill-item {
    /* Remove desktop right alignment from mobile action rows. */
        margin-inline-start: 0 !important;
    /* Override Bootstrap's desktop ms-auto utility. */
        padding: 0;
    /* Align actions with other root menu items. */
    }
    /* Finish mobile pill item alignment. */

    .btrm-mega-links--nested {
    /* Add another indentation step for level-4 links. */
        padding-inline-start: 1.25rem;
    /* Distinguish level 4 from level 3 by its left margin. */
    }
    /* Finish the level-4 indentation. */

    .btrm-menu-column > .btrm-mega-links {
    /* Keep level-3 children visibly inset from the level-2 heading. */
        padding-inline-start: 1.25rem;
    /* Apply the level-3 left margin. */
    }
    /* Finish the level-3 indentation. */

    .btrm-menu-column,
    .btrm-menu-accordion-trigger,
    .btrm-menu-link,
    .btrm-menu-submenu-toggle,
    .btrm-mega-links > li {
    /* Keep mobile rows and newly revealed items immediate. */
        animation: none !important;
    /* Avoid inherited or theme animations delaying newly opened items. */
        transition: none !important;
    /* Avoid inherited or theme transitions delaying newly opened items. */
    }
    /* Finish immediate mobile item rendering. */

    .btrm-mega-links > li.menu-item-has-children {
    /* Make room for a separate triangle beside a clickable level-3 link. */
        padding-inline-end: 2.75rem;
    /* Keep page text clear of its child-list toggle. */
        position: relative;
    /* Anchor the child toggle to this menu row. */
    }
    /* Finish linked parent row layout. */

    .btrm-menu-submenu-toggle {
    /* Place the level-4 disclosure triangle at the far right of its linked row. */
        align-items: center;
    /* Center the triangle in its touch target. */
        appearance: none;
    /* Remove browser-specific button styling. */
        background: transparent;
    /* Keep the toggle on the blue menu surface. */
        border: 0;
    /* Remove default button borders. */
        display: flex;
    /* Show the separate control for linked level-3 parents. */
        height: 100%;
    /* Match the linked row's touch target height. */
        justify-content: center;
    /* Center the triangle horizontally. */
        padding: 0;
    /* Keep the indicator centered in its hit area. */
        position: absolute;
    /* Align the toggle to the right side of the link row. */
        right: 0;
    /* Place the triangle at the trailing edge. */
        top: 0;
        width: 2.75rem;
    /* Make the triangle easy to tap without covering link text. */
    }
    /* Finish the level-3 submenu toggle. */

    .btrm-menu-pill-item {
    /* Defer the desktop right-aligned action layout to the responsive pass. */
        margin: 0;
    /* Reset the desktop auto margin. */
        padding: 0;
    /* Reset desktop action spacing. */
    }
    /* Finish the mobile pill-item fallback. */

    .btrm-menu-link.btrm-menu-pill {
    /* Keep pill links legible as regular actions in the compact menu. */
        margin: 0.35rem 0.5rem;
    /* Separate mobile actions from surrounding links. */
    }
    /* Finish the mobile pill fallback. */

    .btrm-menu-stage > .main_menu,
    .btrm-menu-stage > .main_menu * {
    /* Use a consistent compact type scale for every mobile menu level. */
        font-size: 20px !important;
    /* Set all mobile menu text to twelve pixels. */
        font-weight: 400 !important;
    /* Use regular weight for all mobile menu labels. */
        line-height: 1.7 !important;
    /* Set consistent line spacing throughout the mobile menu. */
    }
    /* Finish the mobile menu typography reset. */
}
/* Finish the smaller-screen fallback styles. */