/* Mobile optimisation overrides — loaded last on every page */
@media (max-width: 900px) {
    /* Let grid/flex children shrink instead of forcing the page wider */
    .cta-grid > *, .footer-grid > *, [class*="grid"] > *, [class*="-row"] > * { min-width: 0; }
    .cta-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
    img, video, iframe, svg { max-width: 100% !important; }
    img { height: auto; }
    .collage-section img, .journey-panel img, .gallery img, .fleet-section img { height: 100%; }
    h1, h2, h3, p, li, a { overflow-wrap: break-word; word-wrap: break-word; }
}
@media (max-width: 600px) {
    .booking-card { padding: 28px 20px !important; border-radius: 18px !important; }
    .form-row { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; gap: 14px !important; }
    /* 16px inputs stop iOS Safari zooming in on focus */
    input, select, textarea { font-size: 16px !important; min-height: 48px; max-width: 100%; }
    button, .btn, [class*="btn"] { min-height: 44px; }
}
@media (max-width: 400px) {
    .booking-card { padding: 22px 16px !important; }
}
@supports (height: 100dvh) {
    @media (max-width: 900px) { .hero { min-height: 100dvh; } }
}

/* Header + footer logo: one size system for every page (pages' inline .logo-img rules also hit the
   footer logo and shrank it to 26–32px on mobile). Desktop unchanged; tablet/phone a bit larger. */
body .navbar .logo-img { height: 72px !important; max-width: 320px !important; width: auto !important; object-fit: contain !important; }
body .navbar.scrolled .logo-img { height: 60px !important; max-width: 270px !important; }
body footer .footer-logo-img { height: 58px !important; width: auto !important; max-width: 260px !important; object-fit: contain !important; margin-bottom: 15px; }
@media (max-width: 1024px) {
    body .navbar { height: 78px !important; }
    body .navbar .logo-img { height: 60px !important; max-width: 200px !important; }
    body .navbar.scrolled .logo-img { height: 56px !important; max-width: 190px !important; }
    body footer .footer-logo-img { height: 72px !important; max-width: 220px !important; }
}
@media (max-width: 480px) {
    body .navbar { height: 74px !important; }
    body .navbar .logo-img { height: 56px !important; max-width: 160px !important; }
    body .navbar.scrolled .logo-img { height: 52px !important; max-width: 150px !important; }
    body footer .footer-logo-img { height: 68px !important; max-width: 200px !important; }
}

/* Mobile menu dropdown sits right under the (taller) navbar */
@media (max-width: 1024px) {
    body .navbar .nav-links, body .navbar.scrolled .nav-links, body .navbar.scrolled ~ .nav-links { top: 78px !important; }
}
@media (max-width: 480px) {
    body .navbar .nav-links, body .navbar.scrolled .nav-links, body .navbar.scrolled ~ .nav-links { top: 74px !important; }
}

/* Dropdown menu was clipped by the navbar once scrolled (backdrop-filter makes the navbar the containing block) */
@media (max-width: 1024px) {
    body nav.navbar, body nav.navbar.scrolled { overflow: visible !important; }
}

/* keep scrolled navbar the same height as the dropdown offset */
@media (max-width: 1024px) { body nav.navbar.scrolled { height: 78px !important; } }
@media (max-width: 480px)  { body nav.navbar.scrolled { height: 74px !important; } }

/* Form validation states */
input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #e5484d !important; box-shadow: 0 0 0 2px rgba(229,72,77,.25) !important; }

/* ===== Visibility + responsive fixes (2026-10-01) ===== */

/* Content CTA buttons share .book-btn with the navbar; pages force the navbar's dark-outline
   look on every .book-btn, which made them invisible on dark cards. Use the solid gold
   RESERVE style (packages.php .pkg-footer) everywhere outside the navbar, at all widths. */
body .book-btn:not(.navbar .book-btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    background: linear-gradient(135deg, #f5bd61 0%, #e5a742 100%) !important;
    color: #031923 !important;
    border: 1px solid #f5bd61 !important;
    border-radius: 30px !important;
    font-weight: 800 !important;
    line-height: 1.35;
    text-align: center;
    max-width: 100%;
    white-space: normal !important;
}
body .book-btn:not(.navbar .book-btn):hover { background: #fff !important; color: #031923 !important; }

/* Navbar BOOK NOW: label sat at the top of a 44px box (inline-block + min-height) */
body .navbar .book-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
}

@media (max-width: 900px) {
    /* iOS date inputs ignore width:100% and overflow their wrapper */
    input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100% !important; min-width: 0; }
    input[type="date"]::-webkit-date-and-time-value { text-align: left; }
    /* Long option text: keep clear of the native arrow */
    select { text-overflow: ellipsis; padding-right: 36px !important; }

    /* Text-only cards were stretched by a blanket min-height:340px */
    .feature-card, .inclusion-card, .amenity-card { min-height: 0 !important; }

    /* index.php "Memories At Sea." was 100px and broke mid-word */
    .gallery h2 { font-size: clamp(44px, 13vw, 100px) !important; margin-left: 0 !important; }
    /* Inline-sized section headings */
    h2[style*="font-size"] { font-size: clamp(30px, 8vw, 44px) !important; }
}

@media (max-width: 600px) {
    /* Grids whose auto-fit minimum (300–380px) is wider than small phones */
    .captains-grid, .guides-grid, .reviews-grid, .menu-grid, .features-grid,
    .fleet-grid, .pkg-grid, .inclusions-grid { grid-template-columns: minmax(0, 1fr) !important; }

    body .book-btn:not(.navbar .book-btn) { padding: 13px 22px !important; font-size: 11px !important; letter-spacing: 1px !important; }

    /* fleet.php filter chips: tidy 2-column grid instead of a ragged wrap */
    .filter-section { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
    .filter-btn { width: 100%; padding: 11px 8px !important; font-size: 11px !important; letter-spacing: 1px !important; }
    .filter-btn:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); }

    /* packages.php charter calculator: checkbox inline with its label */
    .calc-field .checkbox-label { display: flex !important; align-items: center; gap: 12px; line-height: 1.4; margin-bottom: 0; }
    .calc-field .checkbox-label input { min-height: 0 !important; width: 20px; height: 20px; flex: 0 0 20px; margin: 0; }
    .calc-field { margin-bottom: 28px; }

    /* Menu rows: name wraps, badge stays on one line */
    .item-list li, .menu-list li { gap: 10px; }
    .item-list li span.name, .menu-list li span.item-name { min-width: 0; flex: 1 1 auto; }
    .item-list li span.badge, .menu-list li span.item-tag { white-space: nowrap !important; flex-shrink: 0; font-size: 10px; letter-spacing: .6px; padding: 3px 8px; }

    /* dinner-cruise.php hero schedule chips */
    .schedule-chip { max-width: 100%; padding: 10px 16px !important; font-size: 12px !important; letter-spacing: .4px !important; justify-content: center; text-align: center; }

    /* contact.php buttons: full width, single line */
    .whatsapp-btn, .directions-btn { display: flex !important; width: 100%; justify-content: center; text-align: center; padding: 16px 18px !important; font-size: 12px !important; letter-spacing: .8px !important; }
}

/* ===== Header consistency across pages (desktop) =====
   Pages carried different navbar copies (link gap 35/32/28px; index BOOK NOW narrower, no icon,
   not flex) and the navbar used space-between, so the link row shifted between pages.
   A 1fr | auto | 1fr grid centres the links exactly, whatever the button width. */
@media (min-width: 1025px) {
    body nav.navbar {
        display: grid !important;
        grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
        align-items: center;
        column-gap: 24px;
    }
    body nav.navbar > .logo { justify-self: start; }
    body nav.navbar > .nav-links { justify-self: center; gap: 35px !important; }
    body nav.navbar > .nav-right-wrap { justify-self: end; display: flex; align-items: center; }
    body nav.navbar .book-btn { gap: 8px; padding: 12px 24px !important; }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    body nav.navbar > .nav-links { gap: 24px !important; }
}

/* Same active-link treatment on every page (index.php had none) */
body .navbar .nav-links a { position: relative; }
body .navbar .nav-links a:hover,
body .navbar .nav-links a.active { color: #b88424; }
body .navbar .nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #b88424;
}
/* 1025–1180px: logo + 7 links + button only just fit, so tighten spacing slightly */
@media (min-width: 1025px) and (max-width: 1180px) {
    body nav.navbar { column-gap: 16px; }
    body nav.navbar > .nav-links { gap: 18px !important; }
    body nav.navbar > .nav-links a { letter-spacing: 1.4px; }
    body nav.navbar .book-btn { padding: 12px 18px !important; }
}

/* ===== Form focus jumping to the footer (all pages) =====
   Every page sets overflow-x:hidden on BOTH html and body. That turns <body> into its own
   scroll container (overflow-y computes to auto), and when a text field opens the on-screen
   keyboard, iOS/Android scroll that nested container + the window and the page lands near
   the bottom. overflow-x:clip still stops sideways scrolling but creates no scroll container. */
html, body { overflow-x: visible !important; }
@supports (overflow-x: clip) {
    html, body { overflow-x: clip !important; }
}
@supports not (overflow-x: clip) {
    html { overflow-x: hidden !important; }   /* older browsers: clip on the root only */
}

/* fleet.php "Vessel Amenities" cards: compact on phones (were stretched by the 340px min-height) */
@media (max-width: 600px) {
    .amenities-grid { gap: 18px !important; }
    .amenity-card { padding: 28px 22px !important; }
    .amenity-card .amenity-icon { margin-bottom: 14px !important; }
    .amenity-card h3 { margin-bottom: 10px !important; }
}