/* =========================================
   Responsive overrides for The Dusun Villas
   ========================================= */

/* Prevent horizontal page scroll */
html, body {
    overflow-x: hidden;
}

/* Full-width banner elements (header bg, closed notice) stay full-width */
.closed-notice,
#header-container {
    width: 100%;
    box-sizing: border-box;
}

/* Centre the inner content at max 950px */
#header,
#content-container,
#content,
#footer-container,
#footer {
    max-width: 950px;
    min-width: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Keep header-container white bar full-width but center inner header */
#header-container {
    background-color: #fff;
}

/* Footer container border full-width, inner footer centred */
#footer-container {
    max-width: 100%;
    border-bottom: 4px solid #777370;
}

/* Fix footer logo positioning — original uses position:absolute inside fixed-height div */
#footer {
    height: auto;
    min-height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 15px 0;
}
#footer-left ul,
#footer-right ul {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* Original site hides bullets via overflow clipping — be explicit instead */
#content ul {
    list-style: none;
}

.gallery {
    width: 100%;
    float: none;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.gallery li {
    float: none;
    width: 224px;
    margin: 0 9px 9px;
}
.gallery-video {
    width: 100%;
    float: none;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.gallery-video li {
    float: none;
    text-align: center;
}

/* Closed notice */
.closed-notice {
    background-color: #ffecec;
    color: #b30000;
    text-align: center;
    padding: 15px;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

/* Hamburger button: hidden on desktop */
#hamburger {
    display: none;
}

/* Navigation: restore original padding (9 items fits fine without BOOKING) */
#navigation-container {
    position: absolute;
    width: 100%;
    overflow: visible;
}

#navigation-container a.main:link,
#navigation-container a.main:visited {
    padding: 0 0 0 14px;
    font-size: 11px;
}

#navigation-container a.main-active,
#navigation-container a.main:hover {
    padding: 0 0 0 14px;
    font-size: 11px;
}

/* Kunja box (replaces booking form) */
.kunja-box {
    border: 1px solid #bf9b6b;
    padding: 20px;
    background: #fdf8f2;
    text-align: center;
}
.kunja-box h2 {
    margin-bottom: 10px;
}
.kunja-box p {
    margin-bottom: 15px;
    font-size: 13px;
    line-height: 20px;
}
.kunja-box a.kunja-btn {
    display: inline-block;
    background-color: #bf9b6b;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.kunja-box a.kunja-btn:hover {
    background-color: #a68050;
}

/* =========================================
   Tablet: <= 768px
   ========================================= */
@media (max-width: 768px) {

    body {
        background-image: none;
        background-color: #faf6f3;
    }

    #header-container {
        height: auto;
        padding-bottom: 0;
    }

    #header {
        position: relative;
        height: auto;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #logo {
        position: relative;
        display: block;
        margin: 0;
        text-align: left;
        width: auto;
    }

    /* Flag row: hide on mobile (English only) */
    .flag-row {
        display: none;
    }

    /* Hamburger button */
    #hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        z-index: 1000;
    }
    #hamburger span {
        display: block;
        height: 3px;
        background: #bf9b6b;
        border-radius: 2px;
        transition: transform 0.25s, opacity 0.25s;
    }
    #hamburger.open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    #hamburger.open span:nth-child(2) { opacity: 0; }
    #hamburger.open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

    /* Nav hidden by default, shown when .open */
    #navigation-container {
        display: none;
        position: relative;
        height: auto;
        width: 100%;
        overflow: visible;
        background: #fff;
        border-top: 1px solid #e8e0d5;
    }
    #navigation-container.open {
        display: block;
    }

    #navigation {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        float: none;
        height: auto;
        margin: 0;
        justify-content: flex-start;
        align-items: stretch;
        padding: 5px 0;
    }

    #navigation li {
        float: none;
        width: 100%;
        border-bottom: 1px solid #f0ebe4;
    }

    #navigation-container a.main:link,
    #navigation-container a.main:visited,
    #navigation-container a.main-active,
    #navigation-container a.main:hover {
        height: auto;
        line-height: normal;
        padding: 13px 20px;
        font-size: 13px;
        display: block;
        text-decoration: none;
    }
    #navigation-container a.main-active {
        color: #b99b53;
        background-color: #faf6f1;
    }

    /* ---- Sliders: full-width responsive ---- */

    /* Home slider */
    #sliderFrame {
        width: 100% !important;
        padding-bottom: 30px;
    }
    #slider,
    #slider div.sliderInner {
        width: 100% !important;
        height: 55vw !important;
    }
    #slider,
    #slider div.sliderInner {
        background-size: cover !important;
        background-position: center center !important;
    }
    /* Nav dots: sit just below the slider image */
    #slider div.navBulletsWrapper {
        position: relative !important;
        top: 55vw !important;
        left: 0 !important;
        padding: 6px 4px;
    }
    /* Fix transition elements — JS creates .mcSlc/.mcBox with bg-size:auto which causes scale jump */
    #slider .mcSlc,
    #slider .mcBox {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Villas sliders - stack vertically */
    #sliderFrame1,
    #sliderFrame2 {
        float: none !important;
        width: 100% !important;
        padding-bottom: 30px;
    }
    #slider1, #slider1 div.sliderInner,
    #slider2, #slider2 div.sliderInner {
        width: 100% !important;
        height: 65vw !important;
    }
    #slider1,
    #slider1 div.sliderInner,
    #slider2,
    #slider2 div.sliderInner {
        background-size: cover !important;
        background-position: center center !important;
    }
    #slider1 div.navBulletsWrapper,
    #slider2 div.navBulletsWrapper {
        position: relative !important;
        top: 65vw !important;
        left: 0 !important;
        padding: 6px 4px;
    }
    #slider1 .mcSlc, #slider1 .mcBox,
    #slider2 .mcSlc, #slider2 .mcBox {
        background-size: cover !important;
        background-position: center center !important;
    }

    /* Content columns: stack vertically */
    #home-column-1,
    #home-column-2,
    #home-column-3 {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .column-1, .column-2, .column-3 {
        float: none;
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    #line-2, #line-3 {
        padding: 0 10px;
    }

    /* Gallery: 2 columns on tablet */
    .gallery li {
        width: calc(50% - 10px);
        margin: 0 5px 10px;
    }

    .gallery-video li {
        width: calc(50% - 10px);
        margin: 0 5px 20px;
    }

    /* Rates tables */
    .rates { width: 100%; }
    .rates li { width: 33%; }
    .rates-column-1, .rates-column-2, .rates-column-3 { float: none; width: 100%; }

    /* Footer */
    #footer-container { width: 100%; }
    #footer { height: auto; padding: 15px 10px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; }
    #footer-left ul, #footer-right ul {
        position: relative;
        bottom: auto;
        right: auto;
        left: auto;
    }
    #footer-left, #footer-right {
        float: none;
        display: block;
        text-align: center;
    }

    /* Specials columns */
    #specials-column-1, #specials-column-2 {
        float: none;
        width: 100%;
        display: block;
    }

    /* Contact columns */
    #contact-column-1, #contact-column-2 {
        float: none;
        width: 100%;
        box-sizing: border-box;
        display: block;
    }
}

/* =========================================
   Mobile: <= 480px
   ========================================= */
@media (max-width: 480px) {

    #content {
        padding: 0;
    }

    h1 { font-size: 16px; }
    h2 { font-size: 13px; }
    p  { font-size: 13px; }

    /* Gallery: 2 columns on small phones */
    .gallery li {
        width: calc(50% - 8px);
        margin: 0 4px 8px;
    }

    .gallery-video li {
        width: calc(50% - 8px);
        margin: 0 4px 16px;
    }

    .kunja-box {
        margin: 10px;
    }
}