/* ==========================================================================
   MOBILE FIX — loads after style.min.css, wins all cascade conflicts
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────
   0. DESKTOP HERO — ban.jpg slide fix (.bnr-slide)
   The SVG (675×337.5 viewBox) has the man illustration in the
   right-lower corner. When scaled to fill full width it becomes
   ~512px tall; the item clips at max-height:440px from the top,
   leaving blank whitespace above the man. Fix: position the SVG
   image anchored to the bottom-right so the man is always visible.
   ────────────────────────────────────────────────────────────── */

/* ── ban.jpg slide — portrait photo (2347×3456) used as banner ──
   object-fit:cover crops it to fill the landscape banner height.  */
.mainbann .bnr-slide {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: #111 !important;
}

.mainbann .bnr-slide > img {
    position: static !important;
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 440px !important;
    object-fit: cover !important;
    object-position: center top !important;
    max-width: 100% !important;
    top: auto !important; right: auto !important;
    bottom: auto !important; left: auto !important;
}

/* Caption — same overlay style as the books slide */
.mainbann .bnr-slide .banner-caption {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.70) 0%,
        rgba(0,0,0,0.45) 55%,
        rgba(0,0,0,0.05) 100%
    ) !important;
    padding: 0 !important;
}

/* Text — white on dark gradient */
.mainbann .bnr-slide .banner-caption h4 {
    color: #ddd !important;
    font-size: 18px !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5) !important;
}
.mainbann .bnr-slide .banner-caption h1 {
    color: #fff !important;
    font-size: 36px !important;
    margin-bottom: 12px !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
}
.mainbann .bnr-slide .banner-caption h6 {
    color: #eee !important;
    font-size: 16px !important;
    display: block !important;
    margin-bottom: 20px !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

/* Button — gold on dark */
.mainbann .bnr-slide .banner-btn {
    background-color: #fcb314 !important;
    color: #111 !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3) !important;
    display: inline-block !important;
    float: none !important;
}
.mainbann .bnr-slide .banner-btn:hover {
    background-color: #e0a000 !important;
    color: #000 !important;
}

/* ──────────────────────────────────────────────────────────────
   1. HEADER — LAYOUT & HAMBURGER NAV
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    /* Header: relative so hamburger can be absolutely positioned */
    header#top {
        position: relative !important;
        padding: 0 !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }

    /* Both cols full-width */
    header .col-md-3,
    header .col-md-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
    }

    /* Logo col — right padding prevents logo overlapping the fixed button */
    header .col-md-3 {
        padding: 8px 64px 8px 15px !important;
    }

    /* Logo */
    a.logo {
        display: block !important;
        float: none !important;
        text-align: left !important;
        margin: 0 !important;
    }
    a.logo img {
        max-width: 180px !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* ── Contact info — hidden on mobile ── */
    .top-info {
        display: none !important;
    }

    /* Nav col — zero-height passthrough; only holds the dropdown */
    header .col-md-9 {
        padding: 0 !important;
    }

    /* Nav element */
    header nav {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        position: static !important;
    }

    /* ══ HAMBURGER BUTTON ══
       Fixed to the top-right of the viewport so it never moves
       when the dropdown expands inside the header. */
    span.menu-mobile {
        position: fixed !important;
        top: 10px !important;
        right: 12px !important;
        transform: none !important;
        display: inline-flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        background: #fcb314 !important;
        border-radius: 6px !important;
        border: none !important;
        cursor: pointer !important;
        user-select: none !important;
        z-index: 9999 !important;
        box-sizing: border-box !important;
        letter-spacing: 0 !important;
        font-size: 0 !important;
        color: transparent !important;
    }

    /* 3 hamburger lines via ::before only (box-shadow trick) */
    span.menu-mobile::before {
        content: '' !important;
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #111 !important;
        border-radius: 2px !important;
        box-shadow: 0 6px 0 #111, 0 12px 0 #111 !important;
        transition: box-shadow 0.2s, transform 0.2s !important;
        font-size: 0 !important;
    }

    /* Open state — X icon */
    span.menu-mobile.menu-open::before {
        background: transparent !important;
        box-shadow: none !important;
        content: '✕' !important;
        font-size: 18px !important;
        color: #111 !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* ── Dropdown menu — hidden by default ──
       NO !important — jQuery inline styles must win when toggling. */
    nav > ul.menu {
        display: none;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style: none;
        background: #1a1a1a;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* Disable old CSS hover trick (no !important so jQuery wins) */
    header nav:hover ul.menu {
        display: none;
    }

    /* Nav items — full-width vertical stack */
    header nav .menu > li {
        width: 100% !important;
        display: block !important;
        float: none !important;
        flex: none !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #2a2a2a !important;
        background: #1a1a1a !important;
    }
    header nav .menu > li > a {
        display: block !important;
        width: 100% !important;
        padding: 13px 20px !important;
        text-align: left !important;
        color: #ccc !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        letter-spacing: 0.3px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
    }
    header nav .menu > li > a:hover,
    header nav .menu > li > a.active {
        background: #fcb314 !important;
        color: #000 !important;
        padding-left: 26px !important;
    }

    /* Hide desktop mega-menu panels */
    .submenu,
    .menu-slogan {
        display: none !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   2. HERO SLIDER (.mainbann)
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    /* Slider wrapper */
    .mainbann,
    .mainbann .owl-stage-outer,
    .mainbann .owl-stage,
    .mainbann .owl-item {
        display: block !important;
    }

    /* Each slide */
    .mainbann .item {
        position: relative !important;
        max-height: none !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* All slides — uniform height so the carousel never gaps */
    .mainbann .item,
    .mainbann .bnr-slide {
        height: 260px !important;
        max-height: 260px !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* All slide images — fill the 260 px slot, cropped from centre-top */
    .mainbann .item img,
    .mainbann .bnr-slide > img {
        display: block !important;
        width: 100% !important;
        height: 260px !important;
        max-height: 260px !important;
        min-height: 0 !important;
        object-fit: cover !important;
        object-position: center top !important;
        float: none !important;
        position: static !important;
        top: auto !important; right: auto !important;
        bottom: auto !important; left: auto !important;
    }

    /* ── Caption overlay ──
       Tall gradient starting from 40% up — gives enough dark area
       so both the h4 (top) and h1+button (bottom) are always readable */
    .mainbann .banner-caption {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(0,0,0,0)    0%,
            rgba(0,0,0,0.15) 40%,
            rgba(0,0,0,0.75) 75%,
            rgba(0,0,0,0.88) 100%
        ) !important;
        box-sizing: border-box !important;
    }

    /* Container inside caption */
    .mainbann .banner-caption .container {
        padding: 16px 16px 14px !important;
        width: 100% !important;
    }

    /* Strip ALL fixed widths */
    .mainbann .banner-caption h4,
    .mainbann .banner-caption h1,
    .mainbann .banner-caption h6,
    .mainbann .banner-caption p {
        width: auto !important;
        max-width: 100% !important;
    }

    /* Subheading — small italic label above the main heading */
    .mainbann .banner-caption h4 {
        font-size: 11px !important;
        font-weight: 400 !important;
        color: #e0e0e0 !important;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
        margin: 0 0 5px !important;
        line-height: 1.4 !important;
        letter-spacing: 0.2px !important;
        display: block !important;
    }

    /* Main heading */
    .mainbann .banner-caption h1 {
        font-size: 18px !important;
        color: #fff !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: -0.3px !important;
        margin: 0 0 12px !important;
        text-transform: none !important;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
    }

    /* Hide h6 — keeps mobile clean */
    .mainbann .banner-caption h6 {
        display: none !important;
    }

    /* Owl nav arrows — hidden on mobile */
    .mainbann .owl-nav {
        display: none !important;
    }

    /* Owl dots — centred below the slide, outside the image */
    .mainbann .owl-controls {
        position: static !important;
    }
    .mainbann .owl-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 0 !important;
        background: #f4f4f4 !important;
        position: static !important;
    }
    .mainbann .owl-dot {
        display: inline-flex !important;
        float: none !important;
    }
    .mainbann .owl-dot span {
        width: 28px !important;
        height: 4px !important;
        border-radius: 2px !important;
        margin: 0 4px !important;
        background: #ccc !important;
        display: block !important;
        transition: background 0.2s !important;
    }
    .mainbann .owl-dot.active span {
        background: #fcb314 !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   2b. HERO BUTTONS — global .banner-btn style on mobile
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    a.banner-btn,
    input.banner-btn,
    button.banner-btn {
        display: inline-block !important;
        float: none !important;
        background-color: #fcb314 !important;
        color: #111 !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        padding: 10px 24px !important;
        border: none !important;
        border-radius: 4px !important;
        box-shadow: 0 3px 8px rgba(0,0,0,0.25) !important;
        cursor: pointer !important;
        transition: background 0.2s, transform 0.1s !important;
        text-decoration: none !important;
        line-height: 1 !important;
    }
    a.banner-btn:hover,
    a.banner-btn:active {
        background-color: #e0a000 !important;
        transform: translateY(-1px) !important;
        color: #111 !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   3. BOTTOM STICKY BAR (#btmsticky)
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    .btm-sticky {
        padding: 6px 10px !important;
        text-align: center !important;
    }

    /* Hide the large heading — saves vertical space */
    div#btmsticky h2 {
        display: none !important;
    }

    /* Two CTA buttons side by side */
    div#btmsticky a {
        display: inline-block !important;
        width: calc(50% - 10px) !important;
        margin: 0 4px !important;
        padding: 9px 6px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        top: 0 !important;
        position: relative !important;
        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   4. BOUNCE POPUP (#popup-bounce)
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    .popup-bounce {
        width: 92% !important;
        left: 4% !important;
        right: 4% !important;
        max-height: 90vh;
        overflow-y: auto;
        padding: 20px !important;
    }

    .popup-bounce h2 {
        font-size: 17px !important;
        margin-bottom: 12px !important;
    }

    .popup-bounce h2 span {
        font-size: 13px !important;
    }

    .popup-bounce input[type="text"],
    .popup-bounce input[type="email"],
    .popup-bounce textarea {
        width: 100% !important;
        margin-bottom: 8px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        box-sizing: border-box;
    }

    .popup-bounce input[type="submit"] {
        font-size: 13px !important;
        padding: 10px 16px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   5. GENERAL MOBILE CLEANUP
   ────────────────────────────────────────────────────────────── */
@media only screen and (max-width: 768px) {

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }

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

    /* Containers go full width */
    .container {
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}