/* =====================================================================
   responsive.css — The Cleo Store
   Responsive Web Design overrides for all screen sizes.
   Companion file to style.css — always load AFTER it.
   ===================================================================== */

/* -----------------------------------------------------------------------
   1. FLUID FOUNDATION  (all screens — fix the hard-coded min-widths first)
   ----------------------------------------------------------------------- */

html, body {
    min-width: 0 !important;
    overflow-x: hidden;
}


body {
    min-width: 0 !important;
    overflow: auto !important;       /* allow page to scroll on small screens */
}

.extra {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100vh;
    background-size: cover !important;
    background-attachment: fixed;
}

/* Make all images fluid by default */
img {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------------
   2. HAMBURGER BUTTON  (hidden on desktop, shown on mobile/tablet)
   ----------------------------------------------------------------------- */

.hamburger-btn {
    display: none;                   /* hidden on desktop */
    position: absolute;
    right: 25px;
    top: 25px;
    z-index: 9999;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger-btn span,
.hamburger-btn span::before,
.hamburger-btn span::after {
    display: block;
    width: 28px;
    height: 3px;
    background: #ebb780;
    border-radius: 2px;
    position: relative;
    transition: all 0.3s ease;
}

.hamburger-btn span::before,
.hamburger-btn span::after {
    content: '';
    position: absolute;
    left: 0;
}
.hamburger-btn span::before { top: -9px; }
.hamburger-btn span::after  { top:  9px; }

/* Animated X when menu is open */
.hamburger-btn.is-active span { background: transparent; }
.hamburger-btn.is-active span::before {
    transform: rotate(45deg);
    top: 0;
}
.hamburger-btn.is-active span::after {
    transform: rotate(-45deg);
    top: 0;
}

/* -----------------------------------------------------------------------
   3. TABLET  ≤ 1024px — scale down, keep two-column layout
   ----------------------------------------------------------------------- */

@media (max-width: 1024px) {

    /* Re-anchor .main2 as a regular in-flow block */
    .main2 {
        width: 96% !important;
        max-width: 960px;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        margin: 0 auto !important;
        height: auto !important;
        padding-bottom: 100px;        /* room for fixed footer */
    }

    .main1 {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Content panel */
    #content {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
        padding-top: 60px;            /* below the nav bar */
    }

    #content > ul > li {
        width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    /* Content box */
    .box {
        width: auto !important;
        height: auto !important;
        padding: 40px 30px 30px !important;
        background-size: 100% 100% !important;
        overflow: visible !important;
    }

    .box2 {
        width: 100% !important;
        height: auto !important;
    }

    /* Columns — stack single column at tablet and below */
    .col0, .col1, .col2, .col3,
    .col4, .col5, .col6, .col7,
    .col8, .col9, .col10, .col11, .col12 {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box;
    }

    .col0 {
        display: none !important;
    }

    /* Padding overrides */
    .pad_left1, .pad_left2, .pad_left3,
    .pad_left4, .pad_left5, .pad_left6 {
        padding-left: 0 !important;
    }

    /* Scroll pane: let it breathe */
    .scroll-pane {
        height: auto !important;
        max-height: 400px;
        overflow-y: auto;
    }

    /* Gallery images */
    .gallery_img {
        width: 180px !important;
        height: 290px !important;
    }

    /* Nav bar */
    .menu {
        position: relative !important;
        height: auto !important;
        white-space: normal !important;
    }

    #menu {
        height: auto !important;
        white-space: normal !important;
    }

    #menu > li {
        height: 44px !important;
        font-size: 14px;
    }

    #menu > li > a .txt1 {
        font-size: 13px !important;
        line-height: 44px !important;
    }

    /* Splash / entry screen */
    .splash {
        left: 50% !important;
        transform: translateX(-50%);
        position: relative !important;
        top: auto !important;
        margin: 20px auto;
    }

    #menu_splash {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }

    #menu_splash > li {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 200px !important;
        height: 320px !important;
        z-index: 1 !important;
    }

    #menu_splash > li .parallax-layer,
    #menu_splash > li a .box1_cont,
    #menu_splash > li a .box1_cont .box1 {
        width: 200px !important;
        height: 286px !important;
    }

    #menu_splash > li a .box2_cont,
    #menu_splash > li a .box2_cont .box2 {
        width: 200px !important;
    }

    /* Contact form */
    #ajax-contact-form input,
    #ajax-contact-form textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    #ajax-contact-form label {
        width: auto !important;
        display: block !important;
        float: none !important;
        margin-bottom: 3px;
    }

    #ajax-contact-form input.submit {
        margin-left: 0 !important;
    }

    /* Google map */
    .google_map {
        width: 100% !important;
        height: 220px !important;
    }

    /* Footer */
    footer {
        position: relative !important;
        height: auto !important;
    }

    .bot1 {
        height: auto !important;
        padding: 10px;
        line-height: 1.4 !important;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
}

/* -----------------------------------------------------------------------
   4. MOBILE  ≤ 768px — single column, hamburger menu
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Show hamburger, hide nav items by default */
    .hamburger-btn {
        display: block;
    }

    .menu {
        position: fixed !important;    /* stays at top on scroll */
        top: 0;
        left: 0;
        width: 100% !important;
        z-index: 100;
        background: rgba(19, 13, 5, 0.97) !important;
        padding: 0;
    }

    /* Hide nav list until hamburger is clicked */
    #menu {
        display: none !important;
        width: 100%;
        flex-direction: column;
        padding-top: 50px;            /* below hamburger button */
    }

    /* JS adds .menu-open to <nav> to show the list */
    .menu.menu-open #menu {
        display: flex !important;
    }

    #menu > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: none !important;
        padding: 0 !important;
    }

    #menu > li > a {
        display: block !important;
        padding: 14px 20px !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #menu > li > a .txt1 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        color: #ebb780 !important;
    }

    #menu > li > a .over {
        display: none !important;     /* no hover overlay fill on mobile */
    }

    /* Submenu — always visible on mobile (no hover) */
    .submenu {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        background: rgba(0,0,0,0.3);
    }

    .submenu > ul {
        background: none !important;
        padding: 0 !important;
    }

    .submenu ul > li > a {
        font-size: 13px !important;
        padding: 10px 20px 10px 35px !important;
        line-height: 1.4 !important;
        color: #dbc295 !important;
    }

    /* Push page content below fixed nav */
    .main2 {
        padding-top: 0 !important;
    }

    #content {
        padding-top: 50px !important;
    }

    /* Single column layout */
    .col0, .col1, .col2, .col3,
    .col4, .col5, .col6, .col7,
    .col8, .col9, .col10, .col11, .col12 {
        width: 100% !important;
        float: none !important;
    }

    .pad_left1, .pad_left2, .pad_left3,
    .pad_left4, .pad_left5, .pad_left6 {
        padding-left: 0 !important;
    }

    .col0 {
        display: none !important;     /* hide vertical divider line */
    }

    /* Box */
    .box {
        padding: 20px 15px 20px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background:
            url(../images/content_bg.png) 0 0 / 100% auto no-repeat,
            url(../images/parchment_tile.png) 0 0 / 100% auto repeat-y !important;
        position: relative;
    }

    /* Prevent any child from overflowing the box */
    .box * {
        max-width: 100%;
        box-sizing: border-box;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Content list items — height:601px and overflow:hidden in style.css */
    #content > ul > li {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* The outer content wrapper */
    #content {
        overflow: visible !important;
        height: auto !important;
    }

    /* main2 should not clip anything */
    .main2 {
        overflow: visible !important;
    }

    /* Typography adjustments */
    .logo .txt1 {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .logo .txt2 {
        font-size: 13px !important;
        display: block !important;
        padding-bottom: 10px !important;
    }

    h2 {
        font-size: 20px !important;
        line-height: 24px !important;
        letter-spacing: -1px !important;
    }

    h3 {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .gallery_txt {
        font-size: 30px !important;
        line-height: 38px !important;
        padding-top: 20px !important;
        height: auto !important;
    }

    /* Splash screen — center & scale */
    .splash {
        width: 90% !important;
        max-width: 346px;
        left: 50% !important;
        transform: translateX(-50%);
        position: relative !important;
        top: auto !important;
        margin: 20px auto !important;
    }

    .splash .box1_cont,
    .splash .box1_cont .box1 {
        width: 100% !important;
    }

    /* Splash menu — vertical stack */
    #menu_splash {
        flex-direction: column;
        align-items: center;
    }

    #menu_splash > li {
        width: 90% !important;
        max-width: 300px !important;
        height: 200px !important;
    }

    #menu_splash > li .parallax-layer,
    #menu_splash > li a .box1_cont,
    #menu_splash > li a .box1_cont .box1 {
        width: 100% !important;
        height: 168px !important;
    }

    /* Gallery images — 2-up grid */
    .gallery_img {
        width: calc(50% - 10px) !important;
        height: auto !important;
        display: inline-block;
        vertical-align: top;
        margin: 5px !important;
    }

    /* Videos */
    .vid1 {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    .video1 {
        width: 100% !important;
        height: auto !important;
        padding-top: 56.25%;         /* 16:9 aspect ratio */
        position: relative;
        background-size: cover !important;
    }

    /* Contact form */
    #ajax-contact-form {
        width: 100%;
    }

    #note {
        width: 100% !important;
    }

    #ajax-contact-form label {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px;
        line-height: 1.4 !important;
    }

    #ajax-contact-form input,
    #ajax-contact-form textarea {
        float: none !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    #ajax-contact-form img {
        float: none !important;
        display: block;
        margin-bottom: 5px;
    }

    #ajax-contact-form input.capthca {
        float: none !important;
        margin-left: 0 !important;
        width: 100px !important;
    }

    #ajax-contact-form input.submit {
        margin: 10px 0 0 0 !important;
        display: block;
    }

    /* Google map */
    .google_map {
        width: 100% !important;
        height: 200px !important;
    }

    /* Footer */
    footer {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        z-index: 10 !important;
    }

    .bot1 {
        height: auto !important;
        padding: 12px !important;
        line-height: 1.6 !important;
        display: block !important;
        text-align: left;
    }

    .tola {
        width: 100% !important;
        height: auto !important;
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        display: block !important;
    }

    /* Sound button container */
    div.jp-audio {
        display: block !important;
        width: auto !important;
        height: auto !important;
        visibility: visible !important;
    }

    ul.jp-controls {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: auto !important;
        height: auto !important;
        display: block !important;
    }

    /* Sound ON button — visible by default. jPlayer calls .show()/.hide()
       via inline style to toggle, so we must NOT set display here */
    a.jp-mute {
        width: auto !important;
        height: auto !important;
        padding: 4px 0 !important;
        float: none !important;
        color: #5a4024 !important;
        font-family: 'metamorphousregular' !important;
        font-size: 16px !important;
    }

    a.jp-mute span, a.jp-unmute span {
        color: #d4ae71 !important;
        font-size: 16px !important;
    }

    a.jp-unmute {
        width: auto !important;
        height: auto !important;
        padding: 4px 0 !important;
        float: none !important;
        color: #5a4024 !important;
        font-family: 'metamorphousregular' !important;
        font-size: 16px !important;
    }

    .icons {
        padding-right: 0 !important;
        padding-top: 5px !important;
    }

    .phone {
        display: block !important;
        width: 100%;
        margin-top: 6px;
    }

    .phone span {
        font-size: 15px !important;
    }

    .bot2 {
        height: auto !important;
        line-height: 1.6 !important;
        padding: 10px 12px;
    }

    /* Replace jScrollPane with native browser scroll on mobile */
    .scroll-pane {
        height: 45vh !important;
        max-height: 45vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important; /* smooth momentum scroll on iOS */
    }

    /* jScrollPane injects .jspContainer — make it fill and scroll natively */
    .jspContainer {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        width: 100% !important;
    }

    .jspPane {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }

    /* Hide the custom scrollbar chrome injected by jScrollPane JS */
    .jspVerticalBar,
    .jspHorizontalBar,
    .jspTrack,
    .jspDrag,
    .jspArrow {
        display: none !important;
    }

    /* img frame decorators */
    .img1, .img2, .img3, .img4, .img5 {
        max-width: 100%;
        height: auto;
        background-size: contain !important;
        background-position: center !important;
    }

    /* Gallery nav arrows */
    .prevGall, .nextGall {
        top: auto !important;
        bottom: 10px;
    }
}

/* -----------------------------------------------------------------------
   4b. SPLASH SCREEN + SERVICES IMAGE FIXES  ≤ 768px
   ----------------------------------------------------------------------- */

@media (max-width: 768px) {

    /* Splash — centered below nav bar, natural flow */
    .splash {
        width: 300px !important;
        height: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 90px auto 20px !important;
        z-index: 5 !important;
        display: block;
    }

    /* Scale the whole splash card as one unit — keeps all internal proportions intact */
    .splash {
        width: 346px !important;
        transform: scale(0.72) !important;
        transform-origin: top center !important;
        margin-bottom: -170px !important;
    }

    .splash .box1_cont {
        width: 346px !important;
        height: 567px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .splash .box1_cont .box1 {
        width: 346px !important;
        height: 567px !important;
        background-size: 346px 567px !important;
        overflow: hidden !important;
    }

    .splash .box1_cont .box1 .img {
        width: auto !important;
        max-width: 88% !important;
        max-height: 280px !important;
        object-fit: cover !important;
        padding: 30px 0 30px 34px !important;
        display: block !important;
    }

    .splash .box2_cont {
        display: none !important;
    }

    .splash .box1_cont .box1 .txt1,
    .splash .box1_cont .box1 .txt2,
    .splash .box1_cont .box1 .txt3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Hide splash fan-card nav — too wide for mobile */
    #menu_splash {
        display: none !important;
    }

    /* When splash is active — no extra padding needed */
    body.mobile-splash-active #content {
        padding-top: 0 !important;
    }

    /* Services Overview — stack image above text */
    .img2.left,
    .scroll-pane img.left {
        float: none !important;
        display: block !important;
        margin: 0 auto 12px !important;
        width: 100% !important;
        max-width: 220px;
    }

    .table {
        display: block !important;
        width: 100% !important;
    }
}

/* -----------------------------------------------------------------------
   5. SMALL MOBILE  ≤ 480px — tighten further
   ----------------------------------------------------------------------- */

@media (max-width: 480px) {

    .logo .txt1 { font-size: 18px !important; }
    .logo .txt2 { font-size: 11px !important; }

    .box { padding: 15px 10px !important; }

    h2 { font-size: 18px !important; }

    /* Gallery — single column on very small screens */
    .gallery_img {
        width: 100% !important;
        max-width: 100%;
        margin: 5px 0 !important;
    }

    .ul1 > li { font-size: 15px !important; }

    .button1 { font-size: 14px !important; }
}

/* -----------------------------------------------------------------------
   6. LARGE DESKTOP ≥ 1200px — keep centered, prevent over-stretching
   ----------------------------------------------------------------------- */

@media (min-width: 1200px) {
    .main2 {
        max-width: 1000px;
    }
}

/* -----------------------------------------------------------------------
   HEADER SPACING FIX
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Expand nav bar to fit two-line logo + breathing room below subtitle */
    .menu {
        height: auto !important;
        min-height: 82px !important;
        padding-top: 8px !important;
        padding-bottom: 14px !important;
        padding-right: 50px !important;
        box-sizing: border-box;
    }

    /* On mobile, header must be position:fixed so it lives in the root
       stacking context — same as the fixed .menu nav bar.
       Without this, .extra (z-index:10) is always painted under .menu (z-index:100)
       and the header text is invisible behind the dark nav bar. */
    header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 150 !important;   /* above .menu (100) but below open dropdown (9999) */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        text-align: center !important;
        pointer-events: none;       /* clicks pass through to hamburger/menu behind it */
        padding-top: 6px !important;
    }

    /* Keep logo text gold — JS animations can change this inline */
    header .logo .txt1,
    .logo .txt1 {
        color: #ebb780 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    header .logo .txt2,
    .logo .txt2 {
        color: #ebb780 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Push content below the taller nav bar */
    #content {
        padding-top: 92px !important;
    }
}

/* -----------------------------------------------------------------------
   MOBILE LOGO — rendered inside the fixed nav bar, always visible
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Hide the original header on mobile — it lives in .extra which is
       below the fixed nav in the stacking context and can't be seen */
    header {
        display: none !important;
    }

    /* Show the mobile logo that lives inside the nav bar */
    .mobile-logo {
        display: block !important;
        text-align: center;
        text-decoration: none;
        padding: 8px 50px 10px 10px;
        line-height: 1.3;
    }

    .mobile-logo-txt1 {
        font-family: 'metamorphousregular', serif;
        font-size: 20px;
        color: #ebb780 !important;
        line-height: 24px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        white-space: nowrap;
    }

    .mobile-logo-txt2 {
        font-family: 'metamorphousregular', serif;
        font-size: 11px;
        color: #ebb780 !important;
        line-height: 16px;
        padding-bottom: 4px;
        text-shadow: 0 1px 3px rgba(0,0,0,0.8);
        white-space: nowrap;
    }
}

@media (min-width: 769px) {
    /* Hide the mobile logo on desktop — use the real header instead */
    .mobile-logo {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------
   SPLASH ENTER LINK — ensure it's visible on mobile
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
    .splash .box1_cont {
        overflow: visible !important;
        height: auto !important;
    }

    .splash .box1_cont .box1 {
        height: auto !important;
        padding-bottom: 20px !important;
    }

    .enter {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 10px !important;
        font-size: 18px !important;
        color: #863900 !important;
    }
}

/* -----------------------------------------------------------------------
   MOBILE SUBMENU — Party sub-items shown inline under Got A Party
   ----------------------------------------------------------------------- */

/* Hidden on desktop — must be !important to beat menu JS */
.mobile-submenu-item {
    display: none !important;
}

@media (max-width: 768px) {
    /* Show on mobile — override the global display:none !important above */
    #menu .mobile-submenu-item {
        display: block !important;
    }

    /* Remove gap above sub-items — the with_ul li has a submenu div causing space */
    #menu li.with_ul {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #menu li.with_ul .submenu {
        display: none !important;
    }

    .mobile-submenu-item {
        margin-top: 0 !important;
    }

    /* Same style as regular menu tabs */
    .mobile-submenu-item a {
        padding-left: 0 !important;
        background: none !important;
    }

    .mobile-submenu-item a .txt1 {
        font-size: 15px !important;
        color: #ebb780 !important;
    }
}