/* ============================================================
   PTB Responsive CSS - v15 (Full Mobile Menu Fix)
   ============================================================ */

/* === Global Mobile Safety & Typography === */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

/* ============================================================
   MOBILE BREAKPOINT (max-width: 768px)
   ============================================================ */
@media only screen and (max-width: 768px) {

    /* --- Main container reset --- */
    #main, #container {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        float: none !important;
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
        left: auto !important;
        right: auto !important;
    }

    /* --- Layout wrappers - single column stacking --- */
    .wrapper,
    .header-wrapper,
    .f-top-inner,
    .footer-center,
    .sheet,
    .main-wrapper,
    .content-layout,
    .postcontent,
    .grid-box,
    .grid-block,
    .layout-cell,
    .footer-body,
    .header-row,
    .col-1, .col-2, .col-3, .col-4,
    .block-divide {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        display: block !important;
        margin: 0 0 10px 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        height: auto !important;
        min-height: 0 !important;
        clear: both !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
    }

    /* --- Logo --- */
    #logo, .logo-img {
        text-align: center !important;
        padding: 8px 0 !important;
        display: block !important;
        width: 100% !important;
    }

    #logo img, .logo-img img {
        max-width: 70% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* ============================================================
       UNIVERSAL NUCLEAR CLEANUP - Force modern header everywhere
       ============================================================ */
    
    /* 1. Hide ALL legacy header elements with extreme prejudice */
    #top-wrapper, 
    #nav-wrapper, 
    #header-wrapper .floral-header,
    #header .date-display, 
    #header .w3c-logo,
    header .top-main,
    .header .bar.nav,
    section.bar.nav,
    .orange-bar,
    #top-date,
    .top-overlay,
    .floral-header {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* 2. Create the Clean Header Wrapper */
    #header-wrapper, 
    header.header, 
    div.header {
        background: #ffffff !important;
        background-image: none !important;
        padding: 20px 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08) !important;
        border-bottom: 4px solid #990000 !important;
        height: auto !important;
        min-height: 90px !important;
        width: 100% !important;
        display: block !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    /* 3. Center Logo and remove broken floats */
    #header-wrapper .container,
    header .container,
    .header .nav-outer {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        float: none !important;
    }

    #header-wrapper img,
    header img,
    .header img {
        max-height: 80px !important;
        width: auto !important;
        display: block !important;
        margin: 0 auto !important;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)) !important;
    }

    /* 4. Cleanup subpage titles (remove red gradient boxes) */
    #title-wrapper,
    section.header-position,
    .header-position {
        background: #fdfdfd !important;
        background-image: none !important;
        border-bottom: 1px solid #eeeeee !important;
        padding: 30px 10px !important;
        margin: 0 !important;
        height: auto !important;
        box-shadow: inset 0 -5px 10px rgba(0,0,0,0.02) !important;
    }

    #title-wrapper .show-title,
    .header-content .show-title,
    h1.page-title {
        color: #990000 !important;
        font-size: 26px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        text-shadow: none !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
    }

    #title-wrapper .show-text,
    .header-content p {
        color: #555555 !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        max-width: 900px !important;
        margin: 15px auto 0 !important;
    }

    /* Mobile specific adjustments for the nuclear cleanup */
    @media only screen and (max-width: 768px) {
        #header-wrapper, 
        header.header, 
        div.header {
            padding: 12px 0 !important;
            min-height: 70px !important;
        }
        #header-wrapper img,
        header img,
        .header img {
            max-height: 55px !important;
        }
        #title-wrapper,
        section.header-position {
            padding: 20px 15px !important;
        }
        #title-wrapper .show-title,
        .header-content .show-title {
            font-size: 19px !important;
        }
    }

    /* --- Header area wrapper --- */
    .header, div.header, .top-main {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 1000 !important;
        background: #f8f8f8 !important; /* light background for clarity */
    }

    /* Header inner layout */
    .header > div,
    .header-inner,
    .header-right,
    .header-left,
    .top-overlay {
        width: 100% !important;
        float: none !important;
        display: block !important;
        text-align: center !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: static !important; /* Stack vertically */
    }

    /* --- Header Text --- */
    .header-content, .header-text, .header-r, .header-l, #top-date {
        font-size: 13px !important;
        color: #333 !important;
        white-space: normal !important;
        text-align: center !important;
        line-height: 1.5 !important;
        padding: 8px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: static !important;
        margin: 5px 0 !important;
    }

    #top-date {
        background: #eee !important;
        border-bottom: 1px solid #ddd !important;
        font-weight: 600 !important;
    }

    /* ============================================================
       NAVIGATION BAR (TOP HEADER)
       ============================================================ */
    .bar.nav {
        background: linear-gradient(90deg, #BD2F2E, #a62423) !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 2000 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }

    .nav-outer, .nav-wrapper, .nav-inner {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        float: none !important;
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 2000 !important;
    }

    /* ============================================================
       NAVIGATION - SIDEBAR MODE
       ============================================================ */
    nav#menu {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 80% !important;
        max-width: 320px !important;
        height: 100% !important;
        background: #900 !important; /* PTB Crimson */
        z-index: 999999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 5px 0 25px rgba(0,0,0,0.5) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-top: 60px !important; /* Space for close button */
        box-sizing: border-box !important;
    }

    nav#menu.menu-open {
        transform: translateX(0) !important;
    }

    /* Menu Toggle Button - Floating and Fixed */
    #ma-mobile-toggle {
        display: block !important;
        position: fixed !important;
        bottom: 20px !important;
        right: 20px !important;
        background: #BD2F2E !important;
        color: #fff !important;
        padding: 12px 24px !important;
        border-radius: 30px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        z-index: 1000000 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
        cursor: pointer !important;
        text-transform: uppercase !important;
        border: 2px solid rgba(255,255,255,0.2) !important;
    }

    /* Overlay when menu is open */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.7);
        z-index: 999998;
    }

    body.menu-open-active .menu-overlay {
        display: block;
    }

    body.menu-open-active {
        overflow: hidden !important; /* Prevent scroll when menu open */
    }

    /* Top-level list */
    nav#menu > ul,
    nav#menu ul.menu {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    nav#menu ul li {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        position: relative !important;
    }

    nav#menu ul li a {
        display: block !important;
        padding: 15px 20px !important;
        color: #fff !important;
        text-decoration: none !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        transition: background 0.2s !important;
    }

    nav#menu ul li a:hover {
        background: rgba(255,255,255,0.1) !important;
    }

    /* Sub-menu styling - clean list, no gaps */
    nav#menu ul li div,
    nav#menu ul li ul.sub-menu,
    nav#menu ul li ul {
        background: rgba(0,0,0,0.15) !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important; /* Toggled by JS */
        width: 100% !important;
        border: none !important;
    }

    nav#menu ul li.sub-open > div,
    nav#menu ul li.sub-open > ul.sub-menu,
    nav#menu ul li.sub-open > ul {
        display: block !important;
    }

    nav#menu ul li ul li {
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        background: transparent !important;
    }

    nav#menu ul li.has-sub > a::after {
        content: ' \25BC' !important;
        float: right !important;
        font-size: 10px !important;
        transition: transform 0.3s !important;
    }

    nav#menu ul li.sub-open > a::after {
        transform: rotate(180deg) !important;
    }

    nav#menu ul li ul li a {
        padding: 12px 20px 12px 35px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* --- Legacy Header Cleanup --- */
    #top-wrapper, 
    #nav-wrapper, 
    #title-wrapper,
    .floral-header,
    .w3c-logo,
    #header .date-display {
        display: none !important;
    }

    #header-wrapper {
        background: #fff !important;
        padding: 10px 0 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        border-bottom: 2px solid #900 !important;
    }

    #header-wrapper .container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    #header-wrapper img {
        max-height: 50px !important;
        width: auto !important;
    }
    
    .nivo-caption .show-title {
        font-size: 14px !important;
    }
    
    .nivo-caption .show-text {
        display: none !important; /* Hide long text on mobile to save space */
    }

    nav#menu > ul > li,
    nav#menu ul.menu > li {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.12) !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Top-level links */
    nav#menu > ul > li > a,
    nav#menu ul.menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 14px 20px !important;
        color: #ffffff !important;
        background: transparent !important;
        text-decoration: none !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        letter-spacing: 0.3px !important;
        border-bottom: 1px solid rgba(0,0,0,0.15) !important;
    }

    nav#menu > ul > li > a:hover,
    nav#menu ul.menu > li > a:hover {
        background: #a52020 !important;
    }

    /* Arrow indicator for parent items */
    nav#menu ul li.has-sub > a::after {
        content: '▸';
        font-size: 11px;
        opacity: 0.8;
        transition: transform 0.2s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }

    nav#menu ul li.has-sub.sub-open > a::after {
        content: '▾';
    }

    /* ============================================================
       SUB-MENUS (hidden by default, toggled by JS accordion)
       ============================================================ */

    /* Hide all dropdown containers by default */
    nav#menu ul li > div,
    nav#menu ul li > ul.sub-menu {
        display: none !important;
        visibility: hidden !important;
        width: 100% !important;
        background: #6B1212 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
    }

    /* Show when JS adds .sub-open class to the parent li */
    nav#menu ul li.sub-open > div,
    nav#menu ul li.sub-open > ul.sub-menu {
        display: block !important;
        visibility: visible !important;
    }

    /* Sub-menu lists */
    nav#menu ul li > div > ul,
    nav#menu ul li > ul.sub-menu {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Sub-menu items */
    nav#menu ul li > div > ul > li,
    nav#menu ul li > ul.sub-menu > li {
        width: 100% !important;
        display: block !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* Sub-menu links */
    nav#menu ul li > div > ul > li > a,
    nav#menu ul li > ul.sub-menu > li > a {
        display: block !important;
        padding: 12px 20px 12px 30px !important;
        color: rgba(255,255,255,0.9) !important;
        text-decoration: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        background: #731313 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid rgba(0,0,0,0.1) !important;
        transition: background 0.2s ease !important;
    }

    nav#menu ul li > div > ul > li > a:hover,
    nav#menu ul li > ul.sub-menu > li > a:hover {
        background: #821515 !important;
        color: #fff !important;
    }

    /* Deep nested (3rd level containers) */
    nav#menu ul li > div > ul > li > div,
    nav#menu ul li > ul.sub-menu > li > ul.sub-menu {
        display: none !important;
        visibility: hidden !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        opacity: 1 !important;
    }

    nav#menu ul li > div > ul > li.sub-open > div,
    nav#menu ul li > ul.sub-menu > li.sub-open > ul.sub-menu {
        display: block !important;
        visibility: visible !important;
        background: #550f0f !important;
    }

    /* 3rd level lists */
    nav#menu ul li > div > ul > li > div > ul,
    nav#menu ul li > ul.sub-menu > li > ul.sub-menu {
        height: auto !important;
        min-height: 0 !important;
    }

    /* 3rd level items */
    nav#menu ul li > div > ul > li > div > ul > li,
    nav#menu ul li > ul.sub-menu > li > ul.sub-menu > li {
        height: auto !important;
        min-height: 0 !important;
    }

    nav#menu ul li > div > ul > li > div > ul > li > a,
    nav#menu ul li > ul.sub-menu > li > ul.sub-menu > li > a {
        display: block !important;
        padding: 10px 20px 10px 40px !important;
        color: rgba(255,255,255,0.75) !important;
        font-size: 12px !important;
        text-decoration: none !important;
        background: #5e0f0f !important;
        border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* ============================================================
       SLIDER - must sit BELOW the nav menu
       ============================================================ */
    .slider-wrapper, .nivoSlider, .top-section, .images,
    .top-links, #slide, .header-image {
        width: 100% !important;
        height: auto !important;
        min-height: 180px !important;
        max-height: 300px !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
        background: #000 !important;
        display: block !important;
    }

    /* Force images inside slider to be visible */
    .nivoSlider img, .slide img, .images img, #slide img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* Sub-menu container fix */
    nav#menu ul li.has-sub > div, 
    nav#menu ul li.has-sub > ul.sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        display: block !important; /* must be block for transition */
        visibility: visible !important;
    }

    nav#menu ul li.sub-open > div,
    nav#menu ul li.sub-open > ul.sub-menu {
        max-height: 2000px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .nivo-controlNav,
    #slider .nivo-controlNav {
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
        width: 100% !important;
        z-index: 10 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    .nivo-controlNav a,
    #slider .nivo-controlNav a {
        display: inline-block !important;
        margin: 0 4px !important;
        float: none !important;
        position: relative !important;
        z-index: 11 !important;
    }

    /* --- Tables --- */
    table {
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    /* --- Images --- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

} /* end @media 768px */


/* ============================================================
   FLOATING HAMBURGER BUTTON — smaller, compact
   ============================================================ */

#ma-mobile-toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 99999;
    background: #BD2F2E;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    font-family: 'Inter', 'Roboto', sans-serif;
    box-shadow: 0 4px 14px rgba(189, 47, 46, 0.45), 0 2px 4px rgba(0,0,0,0.2);
    border: none;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.5px;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    line-height: 1.3;
}

#ma-mobile-toggle:hover,
#ma-mobile-toggle:active {
    background: #a62423;
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 18px rgba(189, 47, 46, 0.55), 0 3px 6px rgba(0,0,0,0.25);
}

/* Show only on mobile */
@media only screen and (max-width: 768px) {
    #ma-mobile-toggle {
        display: block !important;
    }
}

/* ============================================================
   SUBPAGE (child page) MOBILE OVERRIDES
   These fix the legacy .html files served via the ma_redirect proxy
   ============================================================ */
@media only screen and (max-width: 768px) {

    /* --- Subpage main wrapper --- */
    #main.child,
    div#main.child {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- Page header banner (replaces slider on subpages) --- */
    section.header-position,
    .header-position {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, #BD2F2E, #8B1A1A) !important;
    }

    .header-position .header-wrapper,
    section.header-position .header-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 16px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: none !important;
    }

    /* --- Page title content block inside banner --- */
    .header-content {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        display: block !important;
        background: none !important;
        color: #ffffff !important;
        position: static !important;
        overflow: hidden !important;
    }

    .header-content img {
        float: none !important;
        display: none !important; /* hide decorative image on mobile */
        margin: 0 !important;
    }

    .header-content .show-title,
    .header-content span.show-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
        text-align: left !important;
    }

    .header-content p {
        font-size: 12.5px !important;
        color: rgba(255,255,255,0.85) !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* --- Drop shadow under header banner --- */
    .header-shadow {
        display: none !important;
    }

    /* --- Spotlight/background spacer below banner --- */
    section.spot-bg,
    section.spot-bg.child {
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
    }

    /* --- Breadcrumbs --- */
    section#breadcrumbs,
    #breadcrumbs {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        padding: 8px 16px !important;
        margin: 0 !important;
        background: #f5f5f5 !important;
        border-bottom: 1px solid #e0e0e0 !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    #breadcrumbs .breadcrumbs,
    #breadcrumbs span.breadcrumbs {
        font-size: 11px !important;
        color: #555 !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.6 !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    #breadcrumbs a.pathway {
        color: #BD2F2E !important;
        text-decoration: none !important;
        font-size: 11px !important;
    }

    #breadcrumbs a.pathway::after {
        content: ' ›' !important;
        color: #999 !important;
    }

    /* --- page-background element (subpage only, causes layout shift) --- */
    #page-background,
    #page-background.wrapper {
        display: none !important;
    }

}