/* Courtesywide v7.37
   Responsive public shell + tablet navigation protection
   Loaded after the existing public styles so it can safely correct breakpoints. */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:clip;
}

main,
section,
header,
footer,
.container,
.header-inner,
.detail-main,
.booking-sidebar,
.content-panel{
    min-width:0;
}

img,
video,
canvas,
iframe{
    max-width:100%;
}

.site-header{
    width:100%;
}

.header-inner{
    gap:14px;
}

.brand{
    min-width:0;
    flex:0 1 auto;
}

.site-logo-image{
    max-width:min(210px,24vw);
}

/* ------------------------------------------------------------------
   TABLET / SMALL LAPTOP NAVIGATION

   The navigation now contains more sections than the old project.
   Waiting until 1024px before changing to the menu allows it to break
   between roughly 1025px and 1320px. Switch earlier instead.
   ------------------------------------------------------------------ */
@media(max-width:1320px){
    .site-header .desktop-nav{
        display:none!important;
    }

    .site-header .mobile-menu-btn{
        display:grid!important;
        place-items:center;
        flex:0 0 42px;
        width:42px;
        height:42px;
        padding:0;
        border:1px solid var(--border);
        border-radius:10px;
        background:#fff;
        color:var(--navy);
    }

    .site-header .mobile-menu-btn svg{
        width:20px;
        height:20px;
    }

    .header-inner{
        height:72px;
        justify-content:flex-start;
    }

    .brand{
        margin-right:auto;
    }

    .site-logo-image{
        height:42px;
        width:auto;
        max-width:185px;
        object-fit:contain;
    }

    .header-actions{
        margin-left:auto;
        gap:8px;
        flex:0 0 auto;
    }

    .account-header-link{
        min-height:40px;
        padding:0 8px;
        white-space:nowrap;
    }

    .header-actions>.btn{
        min-height:40px;
        padding:9px 12px;
        white-space:nowrap;
        font-size:13px;
    }

    /*
     * Duplicate the mobile navigation presentation at the NEW breakpoint.
     * The old stylesheet only provided this at <=1024px.
     */
    .site-header>.mobile-nav{
        display:none;
        width:100%;
        max-height:calc(100dvh - 72px);
        overflow-y:auto;
        overscroll-behavior:contain;
        padding:10px clamp(18px,5vw,60px) 22px;
        border-top:1px solid var(--border);
        background:#fff;
        box-shadow:0 18px 32px rgba(20,37,50,.12);
    }

    .site-header>.mobile-nav.active{
        display:flex!important;
        flex-direction:column;
    }

    .mobile-nav>a,
    .mobile-nav-group{
        width:100%;
        border-bottom:1px solid var(--border);
    }

    .mobile-nav>a{
        display:flex;
        align-items:center;
        min-height:50px;
        padding:11px 6px;
        color:var(--navy);
        font-size:14px;
        font-weight:800;
        text-decoration:none;
    }

    .mobile-nav>a.active,
    .mobile-nav>a:hover{
        color:var(--primary);
    }

    .mobile-nav-group{
        border-left:0;
        border-right:0;
        border-radius:0;
        background:#fff;
    }

    .mobile-nav-group summary{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        min-height:50px;
        padding:11px 6px;
        color:var(--navy);
        font-size:14px;
        font-weight:800;
        cursor:pointer;
        list-style:none;
    }

    .mobile-nav-group summary::-webkit-details-marker{
        display:none;
    }

    .mobile-nav-group summary svg{
        flex:0 0 16px;
        width:16px;
        height:16px;
        transition:transform .16s ease;
    }

    .mobile-nav-group[open] summary svg{
        transform:rotate(180deg);
    }

    .mobile-nav-submenu{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:0 16px;
        margin:0 0 10px;
        padding:6px 10px 8px 14px;
        border-top:1px solid var(--border);
        border-left:2px solid var(--secondary);
        background:#f8faf9;
    }

    .mobile-nav-submenu a{
        display:flex;
        align-items:center;
        gap:9px;
        min-width:0;
        min-height:46px;
        padding:9px 8px;
        border-bottom:1px solid #e6ece7;
        color:#344b3a;
        text-decoration:none;
        font-size:12px;
        font-weight:700;
    }

    .mobile-nav-submenu a svg{
        flex:0 0 16px;
        width:16px;
        height:16px;
        color:var(--primary);
    }

    .mobile-nav-submenu a span{
        min-width:0;
    }

    .mobile-nav-submenu a small{
        display:block;
        margin-top:1px;
        color:#7b887f;
        font-size:9px;
        font-weight:600;
    }

    .mobile-nav-quote{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        min-height:46px;
        margin-top:12px;
        border:0;
        border-radius:10px;
        background:var(--primary);
        color:#fff;
        font-weight:800;
    }

    /* Private-tour layout becomes a single readable column on tablets. */
    .private-safari-detail-content .detail-layout,
    .detail-layout{
        grid-template-columns:1fr!important;
    }

    .private-safari-detail-content .booking-sidebar,
    .booking-sidebar{
        position:static!important;
        width:100%;
    }

    .private-safari-detail-content .booking-request-card,
    .private-safari-detail-content .sidebar-help-card,
    .private-safari-detail-content .tour-sidebar-wishlist{
        width:100%;
    }

    .premium-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .premium-summary-grid>div{
        min-width:0;
    }

    .content-panel{
        max-width:100%;
    }

    .tour-experience-pills,
    .tour-chip-list{
        max-width:100%;
    }

    .private-route-flow,
    .detail-anchor-nav .container{
        overflow-x:auto;
        overscroll-behavior-inline:contain;
        scrollbar-width:thin;
    }

    .custom-quote-panel{
        width:min(760px,calc(100vw - 36px));
        max-height:calc(100dvh - 36px);
        overflow-y:auto;
    }
}

/* ------------------------------------------------------------------
   TABLET PORTRAIT / LARGE PHONE
   ------------------------------------------------------------------ */
@media(max-width:860px){
    .header-actions>.btn{
        display:none!important;
    }

    .account-header-link span{
        display:none;
    }

    .account-header-link{
        display:grid;
        place-items:center;
        width:40px;
        height:40px;
        padding:0;
        border:1px solid var(--border);
        border-radius:10px;
        background:#fff;
    }

    .account-header-link svg{
        width:19px;
        height:19px;
    }

    .container{
        width:calc(100% - 32px);
        max-width:none;
    }

    .premium-detail-panel{
        width:100%!important;
    }

    .private-safari-detail-hero .premium-detail-panel h1{
        max-width:100%;
        overflow-wrap:anywhere;
    }

    .content-panel{
        padding:24px;
        border-radius:16px;
    }

    .premium-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .premium-summary-grid>div{
        padding:15px 16px;
        min-height:88px;
    }

    .itinerary-optional-activities>div{
        grid-template-columns:1fr!important;
    }

    .premium-include-grid,
    .include-grid{
        grid-template-columns:1fr!important;
    }

    .faq-layout{
        grid-template-columns:1fr!important;
    }

    .custom-quote-grid{
        grid-template-columns:1fr 1fr;
    }
}

/* ------------------------------------------------------------------
   PHONES
   ------------------------------------------------------------------ */
@media(max-width:700px){
    .header-inner{
        height:66px;
        gap:7px;
    }

    .site-logo-image{
        height:38px;
        max-width:155px;
    }

    .site-header>.mobile-nav{
        max-height:calc(100dvh - 66px);
        padding:7px 14px 18px;
    }

    .mobile-nav-submenu{
        grid-template-columns:1fr;
        padding-right:4px;
    }

    .mobile-nav-submenu a{
        min-height:44px;
    }

    .container{
        width:calc(100% - 24px);
    }

    .premium-summary-grid,
    .destination-summary-grid{
        grid-template-columns:1fr!important;
    }

    .premium-summary-grid>div,
    .destination-summary-grid>div{
        min-height:76px!important;
        padding:13px 14px!important;
    }

    .content-panel{
        padding:18px;
        border-radius:14px;
    }

    .section-icon-heading{
        align-items:flex-start;
    }

    .tour-experience-pills{
        gap:6px;
    }

    .tour-experience-pills a{
        max-width:100%;
    }

    .private-route-flow{
        padding:10px;
    }

    .premium-itinerary-list .itinerary-toggle{
        grid-template-columns:32px minmax(0,1fr) 16px!important;
        gap:8px!important;
        padding:11px!important;
    }

    .premium-itinerary-list .itinerary-content{
        padding:0 11px 13px!important;
    }

    .itinerary-title-copy strong{
        font-size:12px!important;
    }

    .itinerary-smart-meta{
        gap:5px;
    }

    .itinerary-smart-meta span{
        max-width:100%;
        white-space:normal;
    }

    .private-itinerary-activity{
        grid-template-columns:52px minmax(0,1fr)!important;
    }

    .private-itinerary-activity-media{
        width:52px!important;
        height:52px!important;
    }

    .custom-quote-panel{
        width:calc(100vw - 18px);
        max-height:calc(100dvh - 18px);
        border-radius:14px;
    }

    .custom-quote-grid{
        grid-template-columns:1fr;
    }

    .custom-quote-wide{
        grid-column:auto!important;
    }

    .btn,
    button,
    input,
    select,
    textarea{
        max-width:100%;
    }
}

@media(max-width:420px){
    .account-header-link{
        display:none;
    }

    .site-logo-image{
        max-width:145px;
    }

    .header-actions{
        gap:5px;
    }

    .site-header .mobile-menu-btn{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .tour-experience-pills a{
        flex:1 1 calc(50% - 6px);
        justify-content:flex-start;
    }

    .premium-detail-panel h1,
    .private-safari-detail-hero .premium-detail-panel h1{
        font-size:clamp(30px,10vw,38px)!important;
        line-height:1.08!important;
    }
}

/* Touch targets and visual stability on touch devices. */
@media(hover:none) and (pointer:coarse){
    .mobile-menu-btn,
    .mobile-nav a,
    .mobile-nav-group summary,
    .itinerary-toggle,
    .faq-panel summary{
        min-height:44px;
    }
}

/* Avoid layout movement from long unbroken names/URLs. */
.tour-experience-pills a,
.mobile-nav a,
.mobile-nav-submenu a,
.content-panel,
.premium-summary-grid strong,
.footer-grid a{
    overflow-wrap:anywhere;
}