/**
 * Header responsiveness overrides
 * - Prevents email/contact truncation; smaller fonts when zoomed so everything fits
 * - At 1200px and below: hide header-top (so 150% zoom / 15" shows clean one-row header) and switch to one hamburger
 * - BOOK A TABLE button: contained so it never overflows or shows broken gold block
 */

/* Slightly smaller base sizes for header-top so address + email + phone + button all fit (helps when zoomed) */
.header-top .wg-information .content p,
.header-top .wg-information .content a {
    font-size: 14px;
    line-height: 1.4;
}
.header-top .wg-information .number-phone,
.header-top .wg-information .number-phone a {
    font-size: 15px !important;
    line-height: 1.4 !important;
}
.header-top .wg-information .icon {
    width: 40px;
    height: 40px;
}
.header-top > .left {
    gap: 28px;
}

/* BOOK A TABLE button: contain layout so it never overflows or shows broken gold block when zoomed */
.header-top > .right .button-right a {
    font-size: 13px;
    padding: 11px 16px;
    width: 160px;
    min-height: 44px;
    height: auto !important;
    line-height: 1.25 !important;
    white-space: normal;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Prevent email and contact text from being cut off */
.header-top .wg-information .content {
    min-width: 0;
    overflow: visible;
}
.header-top .wg-information .content p,
.header-top .wg-information .content a {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}
.header-top .wg-information {
    flex: 0 1 auto;
    min-width: 0;
}

/* Prevent nav links wrapping (e.g. "What's On at Hà Nội") so no broken lines / overlap when fixed on scroll */
.header .main-nav .menu-primary-menu li a {
    white-space: nowrap;
}

/* Allow dropdown sub-menus to render (they are positioned below the nav) */
.header-inner {
    overflow: visible;
}
.header .main-nav {
    overflow: visible;
    min-width: 0;
}

/* Ensure dropdown sits above other header layers */
.menu-primary-menu .sub-menu {
    z-index: 1000;
}

/*
 * Medium viewports / ~125% zoom (~1536px CSS width): only nudge nav — do not resize the logo
 * (changing shield/img broke alignment with the gold frame and made link text collide with the curve).
 */
@media (max-width: 1680px) {
    .header .main-nav {
        padding-top: 10px;
        box-sizing: border-box;
    }

    .header .main-nav .menu-primary-menu {
        gap: 60px;
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ----- When zoomed / medium width: reduce header-top font sizes and spacing so address, email, phone, button all fit ----- */
@media (max-width: 1400px) {
    .header-top {
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 15px;
        padding-right: 15px;
    }
    .header-top .wg-information .content p,
    .header-top .wg-information .content a {
        font-size: 13px;
        line-height: 1.35;
    }
    .header-top .wg-information .number-phone,
    .header-top .wg-information .number-phone a {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }
    .header-top .wg-information .icon {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
    .header-top > .left {
        gap: 20px;
    }
    .header-top > .right {
        gap: 16px;
    }
    .header-top > .right .button-right a {
        font-size: 12px !important;
        padding: 10px 14px !important;
        width: 140px !important;
        min-height: 40px;
    }
}

@media (max-width: 1280px) {
    .header-top .wg-information .content p,
    .header-top .wg-information .content a {
        font-size: 12px;
        line-height: 1.3;
    }
    .header-top .wg-information .number-phone,
    .header-top .wg-information .number-phone a {
        font-size: 13px !important;
    }
    .header-top .wg-information .icon {
        width: 32px;
        height: 32px;
    }
    .header-top > .left {
        gap: 14px;
    }
    .header-top > .right {
        gap: 12px;
    }
    .header-top > .right .button-right a {
        font-size: 11px !important;
        padding: 8px 10px !important;
        width: 120px !important;
        min-height: 36px;
    }
}

/* From 1200px down: keep header-top items from squashing + switch to mobile nav + one hamburger only */
@media (max-width: 1200px) {
    /* On smaller screens we hide the desktop nav anyway, but keep overflow contained */
    .header-inner {
        overflow: hidden;
    }
    .header .main-nav {
        overflow: hidden;
    }
    .header-top .left,
    .header-top .right {
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-top .wg-information {
        width: auto;
        flex: 0 1 auto;
        min-width: 0;
    }
    .header-top > .left {
        gap: 12px;
    }
    .header-top > .right {
        flex-wrap: nowrap;
        gap: 10px;
    }
    /* Smallest readable header-top fonts so everything still fits when zoomed */
    .header-top .wg-information .content p,
    .header-top .wg-information .content a {
        font-size: 11px;
        line-height: 1.3;
    }
    .header-top .wg-information .number-phone,
    .header-top .wg-information .number-phone a {
        font-size: 12px !important;
    }
    .header-top .wg-information .icon {
        width: 28px;
        height: 28px;
    }
    .header-top > .right .button-right a {
        font-size: 10px !important;
        padding: 6px 8px !important;
        width: 100px !important;
        min-height: 34px;
    }

    /* At 1200px and below (includes 150% zoom on 15": effective width ~1280px): hide top bar entirely so layout is never disturbed. One row only: logo + hamburger. */
    .header .header-top {
        display: none !important;
    }

    /* Switch to mobile header: hide desktop nav, show one hamburger only (hide left canvas to avoid two hamburgers) */
    .header .main-nav {
        display: none !important;
    }
    .header .mobile-button {
        display: block !important;
    }
    .header .header-left .canvas {
        display: none !important;
    }
    .header-inner-wrap {
        justify-content: space-between;
    }
    .menu-primary-menu {
        display: none !important;
    }
}

/* Hide top bar (redundant with 1200px above; kept for clarity) */
@media (max-width: 1024px) {
    .header .header-top {
        display: none !important;
    }
}

/* Extra safety for very small / zoomed: ensure only hamburger shows */
@media (max-width: 991px) {
    .header .main-nav,
    .header .menu-primary-menu {
        display: none !important;
    }
    .header .mobile-button {
        display: block !important;
    }
    .header .header-left .canvas {
        display: none !important;
    }
}