/**
 * Mobile Responsive CSS for The Cotswold Retreat
 * Created: October 2025
 * Uses minimal inline JavaScript for hamburger menu (no postlip.js modifications)
 */

/* Hide hamburger button on desktop */
.mobile-menu-toggle {
    display: none;
}

/* ============================================
   TABLET AND BELOW (768px and smaller)
   ============================================ */

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

    /* Container adjustments */
    #container {
        width: 100%;
        max-width: 768px;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header - Clean design with cottage name visible */
    #header {
        padding: 20px 15px 20px 15px !important;
        height: auto !important;
        overflow: visible !important;
        position: relative;
        min-height: auto !important;
        margin: 0 !important;
        background: url(../images/header_bground.gif) left top no-repeat !important;
        background-size: cover !important;
    }

    /* HIDE language flags on mobile */
    p.lang_select {
        display: none !important;
    }

    /* HIDE accreditation logos on mobile */
    #header > a,
    #header > a img,
    #header img[alt*="award"],
    #header img[alt*="member"],
    #header img[alt*="Cotswolds"],
    #header img[src*="rose_award"],
    #header img[src*="cotswold-logo"] {
        display: none !important;
    }

    /* Cottage name - FORCE VISIBILITY and center it */
    #header h1 {
        display: block !important;
        clear: both !important;
        margin: 20px 0 10px 0 !important;
        padding: 0 !important;
        float: none !important;
        width: 100% !important;
    }

    #header h1 a {
        display: block !important;
        font-size: 24px !important;
        line-height: 1.3 !important;
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        color: #fff !important;
        text-decoration: none !important;
        font-family: TrajanPro, Georgia, Times, "Times New Roman", serif !important;
        font-weight: normal !important;
    }

    /* Tagline - centered */
    p.strapline {
        display: block !important;
        float: none !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 10px 0 10px !important;
        color: #fff !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        clear: both !important;
        font-family: Georgia, Times, "Times New Roman", serif !important;
        border-bottom: 20px solid rgb(10, 37, 7) !important;
    }

    /* ===================================
       HAMBURGER MENU BUTTON
       Controlled by minimal inline JavaScript
       =================================== */

    /* Hamburger button - visible on mobile */
    .mobile-menu-toggle {
        display: block;
        background: #2A372E;
        color: #fff;
        padding: 15px;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        border: none;
        width: 100%;
        margin: 0 !important;
        border-top: none !important;
        font-family: TrajanPro, Times, "Times New Roman", serif;
    }

    .mobile-menu-toggle:focus {
        outline: none;
    }

    /* Navigation - Hidden by default on mobile */
    #nav {
        width: 100%;
        height: auto;
        background: #fff;
        display: none;
        margin-top: 0 !important;
    }

    /* Show navigation when toggled open */
    #nav.mobile-nav-open {
        display: block !important;
    }

    #nav li {
        float: none;
        display: block;
        width: 100%;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-bottom: 1px solid #e0e0e0;
        background: #fff !important;
    }

    #nav li:last-child {
        border-bottom: none;
    }

    #nav li:hover {
        background: #f5f5f5 !important;
    }

    #nav li a {
        padding: 16px 20px !important;
        display: flex !important;
        align-items: center !important;
        min-height: 50px !important;
        background: none !important;
        color: #2A372E !important;
        font-size: 15px !important;
        border: none !important;
        line-height: 1 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    #nav li.active,
    #nav li.active:hover {
        background: #2A372E !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #nav li.active a {
        background: none !important;
        color: #fff !important;
        padding: 16px 20px !important;
    }

    /* Main content area */
    .article {
        width: auto;
        float: none;
        margin: 0 !important;
        padding: 20px 15px !important;
        border-right: none;
        border-bottom: 1px solid #647869;
    }

    /* Contact sidebar - move below content */
    #contact {
        float: none;
        width: auto;
        margin: 0 !important;
        padding: 20px 15px !important;
        min-height: auto;
    }

    .availability_butt {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        display: inline-block;
    }

    /* Gallery adjustments */
    .gallery_main_image {
        width: 100%;
        height: auto;
        float: none;
    }

    .gallery_main_image img {
        position: static;
        width: 100%;
        height: auto;
    }

    .gallery_caption {
        width: 100%;
        height: auto;
        float: none;
        margin-top: 0;
    }

    .gallery_caption p {
        width: auto;
        position: static;
        padding: 15px;
    }

    .gallery_thumbnails {
        width: 100%;
        padding: 0 10px;
    }

    .gallery_thumbnails img.gall_thumb {
        max-width: 100px;
        height: auto;
    }

    /* Main image */
    .main_image {
        margin-top: 0;
    }

    .main_image img {
        width: 100%;
        height: auto;
    }

    /* Forms */
    #main form {
        width: 100%;
        float: none;
        padding: 0 15px;
    }

    form input,
    form textarea {
        width: 100%;
        max-width: 300px;
    }

    form label {
        float: none;
        width: auto;
        margin-bottom: 5px;
    }

    /* Details page checklists */
    div.checklist {
        float: none;
        width: 100%;
        max-width: none;
        margin: 10px 0;
        padding-left: 0;
        border-left: none;
    }

    div.checklist + .checklist {
        border-left: none;
        border-top: 1px dotted #a0aea3;
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
    }

    /* Attractions */
    #attractions .article img.side_img {
        float: none;
        display: block;
        margin: 10px auto;
        max-width: 100%;
        height: auto;
    }

    #attractions .with_image p {
        width: 100%;
        float: none;
    }

    /* Calendar - ensure it displays properly */
    #calendar {
        width: 100%;
        margin: 20px 0 0;
        overflow-x: auto;
    }

    /* Footer */
    #footer p {
        width: auto;
        padding: 40px 15px 0;
        text-align: center;
    }
}

/* ============================================
   MOBILE ONLY (480px and smaller)
   ============================================ */

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

    body {
        font-size: 14px;
    }

    h1 a {
        font-size: 20px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 16px;
    }

    p {
        font-size: 14px;
        line-height: 20px;
    }

    #header {
        padding: 15px 10px 0 10px !important;
    }

    .article {
        margin: 10px 10px;
        padding: 0 10px 20px;
    }

    #contact {
        margin: 0 10px;
        padding: 20px 10px;
    }

    .gallery_thumbnails img.gall_thumb {
        max-width: 80px;
    }

    form input,
    form textarea {
        max-width: 100%;
    }

    /* Make buttons and links more touch-friendly */
    a, button, input[type="submit"] {
        min-height: 44px;
        min-width: 44px;
    }

    #nav li a {
        padding: 15px 15px;
        font-size: 14px;
    }
}

/* ============================================
   SMALL MOBILE (320px and smaller)
   ============================================ */

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

    h1 a {
        font-size: 18px;
    }

    h2 {
        font-size: 18px;
    }

    .gallery_thumbnails img.gall_thumb {
        max-width: 60px;
    }
}