/*
    mobile.css — Aurum Hospitality
    Mobile-responsive overrides for all screen sizes.
    Load after main.css in every HTML file.
*/

/* ===== Global image safety ===== */

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

/* ===== Tablet + Mobile (≤ 980px) — burger menu replaces desktop nav ===== */

@media screen and (max-width: 980px) {

    /* --- Hide desktop header and nav --- */
    #header { display: none !important; }
    #nav { display: none !important; }

    /* --- Show titleBar --- */
    #titleBar {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        background: #181920;
        height: 54px !important;
        z-index: 10001;
    }

    #titleBar .title {
        display: flex !important;
        align-items: center;
        height: auto;
        line-height: normal;
        text-align: left;
    }

    #titleBar .title img {
        height: 36px !important;
        width: auto;
        display: block;
    }

    #titleBar .titleBar-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    #titleBar .titleBar-contact {
        color: #c9a84c;
        font-weight: bold;
        font-size: 0.95em;
        text-decoration: none;
        border: 1px solid #c9a84c;
        padding: 6px 14px;
        border-radius: 3px;
    }

    /* --- Burger toggle --- */
    #titleBar .toggle {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    #titleBar .toggle:before {
        content: '\f0c9' !important;
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        background: transparent !important;
        background-color: transparent !important;
        color: #ffffff !important;
        font-size: 26px !important;
        height: auto !important;
        width: auto !important;
        line-height: 1 !important;
        display: inline-block !important;
        text-align: center !important;
    }

    /* --- NavPanel: column layout, logo on top --- */
    #navPanel {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important;
        left: auto !important;
        right: 0 !important;
        width: 275px !important;
        height: 100% !important;
        overflow-y: auto !important;
        z-index: 10002 !important;
        background: #181920 !important;
        padding: 0.75em 1.25em !important;
        transform: translateX(275px) !important;
        transition: transform 0.5s ease !important;
    }

    #navPanel > nav {
        order: 1;
    }

    #navPanel-logo {
        order: 0;
        padding: 1.2em 0 1em;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        margin-bottom: 0.5em;
        flex-shrink: 0;
    }

    #navPanel-logo img {
        height: 40px;
        width: auto;
    }

    /* --- NavPanel link styles --- */
    #navPanel .link {
        display: block !important;
        white-space: normal !important;
        height: auto !important;
        line-height: 1.4 !important;
        padding: 0.75em 0 !important;
        font-size: 0.95em !important;
        word-break: break-word !important;
        border: 0 !important;
        border-top: solid 1px rgba(255, 255, 255, 0.05) !important;
        color: rgba(255, 255, 255, 0.75) !important;
        text-decoration: none !important;
    }

    #navPanel .link:first-child {
        border-top: 0 !important;
    }

    #navPanel .link.depth-0 {
        color: #ffffff !important;
        font-weight: 300 !important;
    }

    #navPanel .link .indent-1 { display: inline-block !important; width: 1.25em !important; }
    #navPanel .link .indent-2 { display: inline-block !important; width: 2.5em !important; }

    /* --- NavPanel slide from right --- */
    body.navPanel-visible #navPanel {
        transform: translateX(0) !important;
    }

    body.navPanel-visible #page-wrapper,
    body.navPanel-visible #titleBar {
        transform: translateX(-275px) !important;
    }

    /* --- Page wrapper padding for fixed titleBar --- */
    #page-wrapper {
        padding-top: 54px !important;
    }

}

/* ===== Phone only (≤ 736px) ===== */

@media screen and (max-width: 736px) {

    /* --- Video: contain so text inside video isn't cut off --- */
    #banner {
        background-color: #000 !important;
        min-height: 56vw !important;
    }

    #banner video {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
        min-height: unset !important;
        object-fit: contain !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    /* --- Forms: prevent iOS zoom --- */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }

    form .col-6 {
        width: 100% !important;
    }

    /* --- Images --- */
    .image.fit img,
    .image.fit.main img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* --- Text readability --- */
    body { font-size: 14px; }
    h2 { font-size: 1.4em; }
    h3 { font-size: 1.1em; }

    .wrapper.style1 .container {
        padding: 0 1em;
    }

}