/*
 * Responsive additions for Orsoni Yachting
 * The original site was desktop-only (min-width: 980px)
 * These media queries add mobile/tablet support while preserving the desktop layout
 */

/* ===== BOOTSTRAP 5 COMPATIBILITY ===== */

/* BS5 uses different gutter system - reset where needed */
section[data-section="details"] .caracteristique .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}
section[data-section="details"] .caracteristique .row > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}

/* BS5 reboot sets box-sizing:border-box globally which is good,
   but some old fixed-width elements may need adjustment */
.filter_boats .row {
    --bs-gutter-x: 1rem;
}

/* Ensure clearfix still works (BS5 keeps it) */
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

/* ===== WPML & WP FIXES ===== */

/* Hide WPML default footer language switcher and dev banner */
#lang_sel_footer,
.wpml-ls-statics-footer,
.wpml-ls-legacy-list-horizontal,
.wpml-ls-statics-post_translations,
nav.wpml-ls,
.wpml-ls-slot-post_translations,
#wpml-cookie-law-info-bar,
.otgs-development-site-front-end {
    display: none !important;
}

/* Hide WP admin bar spacing */
html[lang] {
    margin-top: 0 !important;
}

/* Hide Yoast SEO development banner */
.yoast-seo-premium-banner,
#yoast-snippet-preview {
    display: none;
}

/* Fix body background color (WP adds its own) */
body {
    background: #202020 !important;
}

/* Fix boat list inline-block alignment */
#liste_boats {
    text-align: center;
    font-size: 0;
}
#liste_boats .boat {
    text-align: left;
    font-size: 16px;
    vertical-align: top;
}

/* Fix gallery image display */
#galerie .yacht-gallery .swiper-slide img {
    max-width: 100%;
    height: auto;
}

/* Fix header background-size */
header[data-header] {
    background-size: cover;
}

/* Fix slider container overflow */
.container-slide {
    overflow: hidden;
}

/* Swiper gallery responsive */
#galerie .yacht-gallery,
#galerie .yacht-thumbs {
    max-width: 100%;
}

/* Ensure boat cards have consistent height */
#liste_boats .boat .caracteristiques a {
    color: #202020;
    text-decoration: none;
}
#liste_boats .boat .caracteristiques a:hover {
    text-decoration: underline;
}

/* ===== MOBILE MENU (hidden on desktop) ===== */
#mobile-header,
#mobile-menu-overlay {
    display: none;
}

/* ===== TABLET (max-width: 980px) ===== */
@media screen and (max-width: 980px) {
    #PAGE {
        min-width: auto;
    }

    .width_site,
    .content,
    section[data-section],
    header[data-header] {
        min-width: auto;
        width: auto;
    }

    .content {
        width: auto;
        padding: 0 15px;
    }

    /* Header nav */
    #HEADER ul li {
        padding: 0 8px;
    }
    #HEADER ul li a, #HEADER ul li {
        font-size: 0.7em;
    }

    /* Slider */
    .container-slide, .home-slider, .home-slider .swiper-slide, .cadrehoverslide {
        height: 350px;
    }

    /* Home sections */
    section[data-section="home_head"] {
        height: auto;
        padding: 20px 0;
    }
    section[data-section="home_head"] .home_presentation {
        width: auto;
    }
    section[data-section="home"] {
        height: auto;
        padding-bottom: 30px;
    }

    /* Selection du mois */
    .cadre_acc.cadre_acc_selection .selection .photo {
        width: 50%;
    }
    .cadre_acc.cadre_acc_selection .selection .caracteristiques {
        width: 50%;
    }

    /* Boat list */
    #liste_boats .boat {
        width: 48%;
        margin: 1%;
    }

    /* Boat details */
    section[data-section="details"] .caracteristique {
        height: auto;
    }
    #galerie {
        height: auto;
    }
    #galerie .yacht-gallery {
        width: 100%;
        height: auto;
    }
    #galerie .yacht-gallery .swiper-slide img {
        width: 100%;
        height: auto;
    }
    #galerie .yacht-thumbs {
        width: 100%;
    }

    /* Filter bar */
    .filter_boats {
        width: auto;
        height: auto;
    }

    /* Gallery pages */
    .galeriephoto1 {
        width: auto;
    }
    .galeriephoto1 .thumb {
        width: 32%;
        height: auto;
    }
    .galeriephoto1 .thumb img {
        width: 100%;
        height: auto;
    }

    /* Contact */
    section[data-section="contact"] form {
        width: auto;
    }
    header[data-header="style1"] .coordonnees-contact {
        margin-left: auto;
        width: auto;
    }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media screen and (max-width: 768px) {

    /* --- Mobile hamburger menu --- */

    /* Hide desktop nav elements */
    #HEADER .menu,
    #HEADER #social,
    #HEADER #menu_lang {
        display: none;
    }

    /* Show mobile header bar */
    #mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 15px;
        background: #202020;
    }
    #mobile-header .mobile-logo img {
        display: block;
    }
    #hamburger-btn {
        background: none;
        border: none;
        color: #d2bfae;
        font-size: 22px;
        padding: 8px;
        cursor: pointer;
        line-height: 1;
    }

    /* Mobile overlay menu */
    #mobile-menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
        background: #202020;
        z-index: 99999;
        flex-direction: column;
        padding: 20px 0;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
        transform: translateX(100%);
        transition: transform 0.3s ease;
    }
    #mobile-menu-overlay.open {
        display: flex;
        transform: translateX(0);
    }

    /* Close button */
    #mobile-menu-close {
        position: absolute;
        top: 12px;
        right: 15px;
        background: none;
        border: none;
        color: #d2bfae;
        font-size: 24px;
        cursor: pointer;
        padding: 8px;
        line-height: 1;
    }

    /* Nav links - override #HEADER ul inline-block */
    .mobile-menu-nav {
        flex: 1;
        padding-top: 50px;
    }
    .mobile-menu-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: block !important;
    }
    .mobile-menu-nav ul li {
        display: block !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-right: none !important;
        padding: 0 !important;
    }
    .mobile-menu-nav ul li a {
        display: block !important;
        padding: 14px 30px !important;
        color: #d2bfae !important;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Raleway', sans-serif;
        font-size: 14px !important;
        letter-spacing: 0.15em;
        font-weight: 400;
    }
    .mobile-menu-nav ul li a:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
    }

    /* Language switcher at bottom */
    .mobile-menu-lang {
        padding: 20px 30px;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .mobile-menu-lang a {
        color: #d2bfae;
        text-decoration: none;
        text-transform: uppercase;
        font-family: 'Raleway', sans-serif;
        font-size: 13px;
        letter-spacing: 0.1em;
        font-weight: 400;
    }
    .mobile-menu-lang a:hover {
        color: #fff;
    }
    .mobile-lang-sep {
        color: rgba(210, 191, 174, 0.4);
        margin: 0 8px;
    }

    /* Backdrop */
    #mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 99998;
    }
    #mobile-menu-backdrop.open {
        display: block;
    }

    /* --- End mobile hamburger menu --- */

    /* Slider */
    .container-slide, .home-slider, .home-slider .swiper-slide, .cadrehoverslide {
        height: 200px;
    }

    /* Home grid */
    section[data-section="home_head"] .home_presentation h1 {
        font-size: 1em;
    }

    /* Cadre accueil */
    .cadre_acc {
        height: 200px;
    }
    .cadre_acc a.big_title {
        height: 200px;
        font-size: 1.5em;
        padding: 10px 20px;
    }

    /* Selection: stack */
    .cadre_acc.cadre_acc_selection .selection {
        height: auto;
    }
    .cadre_acc.cadre_acc_selection .selection .photo,
    .cadre_acc.cadre_acc_selection .selection .caracteristiques {
        position: relative;
        width: 100%;
        height: auto;
    }
    .cadre_acc.cadre_acc_selection .selection .photo img {
        width: 100%;
        height: auto;
    }

    /* Boat list: true full width */
    #liste_boats {
        margin-left: -15px;
        margin-right: -15px;
    }
    #liste_boats .boat {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        display: block;
        border-radius: 0;
    }
    #liste_boats .boat .img_couv {
        width: 100%;
        height: auto;
    }
    #liste_boats .boat .img_couv img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    #liste_boats .boat .caracteristiques {
        height: auto;
        padding: 12px 15px;
    }
    #liste_boats .boat .caracteristiques table {
        width: 100%;
    }

    /* Filter bar: stack on mobile */
    .filter_boats .row > div {
        text-align: center;
        margin-bottom: 8px;
    }
    .filter_boats {
        height: auto;
        padding: 15px;
    }

    /* Boat details: stack specs + gallery */
    section[data-section="details"] .caracteristique {
        height: auto;
        margin-bottom: 15px;
    }
    section[data-section="details"] .col-4,
    section[data-section="details"] .col-8,
    section[data-section="details"] .col-12,
    section[data-section="details"] .col-md-4,
    section[data-section="details"] .col-md-8 {
        width: 100%;
        float: none;
        padding-left: 15px;
        padding-right: 15px;
    }
    section[data-section="details"] .nopaddingleft {
        padding-left: 15px;
    }
    #galerie {
        height: auto;
        margin-top: 15px;
    }
    #donnees .col-6,
    #donnees .col-12,
    #donnees .col-md-6 {
        width: 100%;
        float: none;
    }
    #donnees .btn_ficheboat a {
        float: none;
        display: block;
        margin: 5px 0;
        text-align: center;
    }
    .zone-retour .backlink {
        float: none;
        display: inline-block;
    }

    /* Gallery pages: 2 columns, fix absolute positioning */
    .galeriephoto1 {
        width: auto !important;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }
    .galeriephoto1 .thumb {
        width: 48%;
        height: auto !important;
        margin: 1%;
        overflow: hidden;
    }
    .galeriephoto1 .thumb img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    /* Header pages */
    header[data-header] {
        height: 150px;
    }
    header[data-header] h1 {
        font-size: 1.2em;
        width: auto;
        top: 80px;
    }
    header[data-header] p {
        width: auto;
    }

    header[data-header="locations"],
    header[data-header="ventes"] {
        height: 250px;
    }

    /* Contact */
    header[data-header="style1"] {
        height: auto;
        padding-bottom: 20px;
    }
    header[data-header="style1"] .title-page {
        font-size: 1.4em;
        padding: 20px;
    }
    header[data-header="style1"] .coordonnees-contact {
        width: auto;
        margin-left: 0;
        padding: 10px 20px;
    }

    /* Filter */
    .filter_boats {
        padding: 10px;
    }
    .nbr_yacht {
        font-size: 1.2em;
        margin-top: 10px;
    }

    /* Management */
    section[data-section="management"] .content h2 {
        padding: 30px 0;
    }

    /* Footer */
    #FOOTER {
        padding-top: 30px;
        font-size: 0.55em;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
    #HEADER ul li {
        padding: 2px 4px;
    }
    #HEADER ul li a, #HEADER ul li {
        font-size: 0.55em;
    }

    .container-slide, .home-slider, .home-slider .swiper-slide, .cadrehoverslide {
        height: 150px;
    }

    .cadre_acc {
        height: 150px;
    }
    .cadre_acc a.big_title {
        height: 150px;
        font-size: 1.2em;
        letter-spacing: 0.1em;
    }

    section[data-section="home_head"] .home_presentation p {
        font-size: 0.8em;
    }
}