/* ─────────────────────────────────────────────────────────────────────
   ACT Responsive Pro — v1.38.0
   Layered on top of style.css to add proper cross-device coverage:
   tablet/desktop min-width breakpoints, touch targets, iOS input fix,
   overflow safety, reduced-motion + reduced-data preferences, and a
   horizontal-scroll wrapper for wide tables.
   ───────────────────────────────────────────────────────────────────── */

/* ───── 1. Global safety net — no horizontal scroll, anywhere ───── */
html, body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;    /* prevent iOS Safari font inflation on rotate */
    text-size-adjust: 100%;
}
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ───── 2. Touch target enforcement (Google Mobile Usability 44px min) ───── */
a, button, [role="button"], input[type="button"], input[type="submit"],
input[type="checkbox"], input[type="radio"], select {
    min-height: 44px;
    min-width:  44px;
}
/* But don't add empty whitespace to text links in flowing prose — only enforce
   the height when the link is clearly a UI element, not inline text */
p a, li a, td a, .act-prose a, .entry-content a {
    min-height: 0;
    min-width:  0;
}
/* Small buttons (.act-btn--sm was 38px tall — push to 44px without breaking layout) */
.act-btn--sm {
    min-height: 44px;
    padding-top:    11px;
    padding-bottom: 11px;
}
/* Icon-only buttons need a square 44x44 minimum tap target */
.act-icon-btn, .act-btn--icon {
    min-width:  44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ───── 3. iOS form input zoom prevention ───── */
@media (max-width: 768px) {
    input[type="text"], input[type="email"], input[type="search"],
    input[type="url"],  input[type="tel"],   input[type="number"],
    input[type="password"], textarea, select {
        font-size: 16px !important;   /* iOS only zooms on inputs < 16px */
    }
}

/* ───── 4. Adequate spacing between adjacent tappable items ───── */
.act-nav__list li + li,
.act-footer-grid a + a,
.act-cruise-card .act-btn + .act-btn {
    margin-top: 8px;     /* keep tappable items > 8px apart vertically on mobile */
}
@media (min-width: 769px) {
    .act-nav__list li + li,
    .act-footer-grid a + a {
        margin-top: 0;
    }
}

/* ───── 5. Wide tables become horizontally scrollable on mobile ───── */
.act-prose table,
.entry-content table,
.wp-block-table table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}
@media (min-width: 769px) {
    .act-prose table,
    .entry-content table,
    .wp-block-table table {
        display: table;          /* normal layout on tablet+ */
        overflow-x: visible;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   6. Fluid type scaling — use clamp() so heading sizes adapt to viewport
      without needing layered media queries. Mobile-friendly defaults.
   ───────────────────────────────────────────────────────────────────── */
body {
    font-size: clamp(15px, 0.95vw + 13px, 17px);
}
h1, .act-h1 { font-size: clamp(28px, 4vw + 8px, 52px); line-height: 1.15; }
h2, .act-h2 { font-size: clamp(22px, 2.5vw + 10px, 38px); line-height: 1.2; }
h3, .act-h3 { font-size: clamp(18px, 1.8vw + 10px, 28px); line-height: 1.3; }

/* ─────────────────────────────────────────────────────────────────────
   7. MIN-WIDTH BREAKPOINTS — fill the gaps left by the existing
      max-width-only media queries in style.css. Mobile-first approach.
   ───────────────────────────────────────────────────────────────────── */

/* ───── 7a. Small phone — anything under 360px (iPhone SE 1st gen, old Androids) ───── */
@media (max-width: 359px) {
    .act-container { padding-left: 12px; padding-right: 12px; }
    .act-hero__title { font-size: 24px; }
    .act-btn { padding: 12px 18px; font-size: 14px; }
}

/* ───── 7b. Phablet — 480-639px (iPhone Plus, large phones landscape) ───── */
@media (min-width: 480px) and (max-width: 639px) {
    .act-destinations-grid,
    .act-cruise-grid,
    .act-deals-grid       { grid-template-columns: repeat(2, 1fr); }
    .act-blog-grid        { grid-template-columns: 1fr; }
}

/* ───── 7c. Tablet portrait — 640-767px ───── */
@media (min-width: 640px) and (max-width: 767px) {
    .act-destinations-grid,
    .act-cruise-grid,
    .act-deals-grid       { grid-template-columns: repeat(2, 1fr); }
    .act-blog-grid,
    .act-tips-grid        { grid-template-columns: repeat(2, 1fr); }
    .act-footer-grid      { grid-template-columns: repeat(2, 1fr); }
    .act-container        { max-width: 600px; margin: 0 auto; }
}

/* ───── 7d. Tablet landscape — 768-1023px (the missing gap!) ───── */
@media (min-width: 768px) and (max-width: 1023px) {
    .act-container        { max-width: 720px; margin: 0 auto; }
    .act-destinations-grid,
    .act-blog-grid,
    .act-tips-grid        { grid-template-columns: repeat(2, 1fr); }
    .act-cruise-grid,
    .act-deals-grid       { grid-template-columns: repeat(2, 1fr); }
    .act-footer-grid      { grid-template-columns: repeat(3, 1fr); }
    .act-content-sidebar  { grid-template-columns: 1fr; }   /* sidebar stacks below on tablet */
    .act-hero__inner      { grid-template-columns: 1fr; gap: var(--act-space-xl); }
    .act-hero__title      { font-size: clamp(30px, 4.5vw, 44px); }
}

/* ───── 7e. Small desktop / laptop — 1024-1279px ───── */
@media (min-width: 1024px) and (max-width: 1279px) {
    .act-container        { max-width: 960px; margin: 0 auto; }
    .act-destinations-grid { grid-template-columns: repeat(3, 1fr); }
    .act-blog-grid,
    .act-tips-grid        { grid-template-columns: repeat(3, 1fr); }
    .act-cruise-grid,
    .act-deals-grid       { grid-template-columns: repeat(3, 1fr); }
    .act-footer-grid      { grid-template-columns: repeat(4, 1fr); }
}

/* ───── 7f. Standard desktop — 1280px+ (default look) ───── */
@media (min-width: 1280px) {
    .act-container        { max-width: 1200px; margin: 0 auto; }
}

/* ───── 7g. Large desktop — 1440px+ ───── */
@media (min-width: 1440px) {
    .act-container        { max-width: 1320px; margin: 0 auto; }
    .act-hero__title      { font-size: clamp(48px, 3.6vw, 64px); }
}

/* ───── 7h. Ultra-wide — 1920px+ (prevent crazy stretching) ───── */
@media (min-width: 1920px) {
    .act-container,
    .act-hero__inner,
    .act-content-sidebar  { max-width: 1440px; margin: 0 auto; }
}

/* ─────────────────────────────────────────────────────────────────────
   8. Mobile-first card layouts — make sure cards never get cramped
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
    .act-destinations-grid,
    .act-cruise-grid,
    .act-deals-grid,
    .act-blog-grid,
    .act-tips-grid,
    .act-footer-grid      { grid-template-columns: 1fr; gap: var(--act-space-lg); }
    /* Card padding tightens slightly on tiny screens */
    .act-card             { padding: var(--act-space-md); }
}

/* ─────────────────────────────────────────────────────────────────────
   9. Accessibility — reduced motion + reduced data preferences
   ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media (prefers-reduced-data: reduce) {
    /* Optionally suppress decorative images on metered connections */
    .act-decorative,
    .act-hero__featured-img { background-image: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   10. Print styles — clean printable output
   ───────────────────────────────────────────────────────────────────── */
@media print {
    .act-header,
    .act-footer,
    .act-newsletter,
    .act-compare-strip,
    .act-social-proof,
    .act-mobile-rotator,
    nav, aside, .act-sidebar { display: none !important; }
    body { font-size: 12pt; color: #000; background: #fff; }
    h1, h2, h3 { page-break-after: avoid; }
    img { page-break-inside: avoid; max-width: 100%; }
    a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; }
}

/* ─────────────────────────────────────────────────────────────────────
   11. High-contrast + forced-colors support (Windows + macOS Increase Contrast)
   ───────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
    .act-btn { border: 1px solid CanvasText; }
    .act-card { border: 1px solid CanvasText; }
}

/* ─────────────────────────────────────────────────────────────────────
   12. Tap highlight color (subtle blue flash on tap, instead of default ugly grey)
   ───────────────────────────────────────────────────────────────────── */
a, button, [role="button"] {
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────
   13. Smooth focus rings (better keyboard nav)
   ───────────────────────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ─────────────────────────────────────────────────────────────────────
   14. Hero featured image — preserved aspect ratio so CLS = 0
   ───────────────────────────────────────────────────────────────────── */
.act-hero__featured-img {
    aspect-ratio: 16 / 10;     /* reserves space → no layout shift */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}
@media (min-width: 1024px) {
    .act-hero__featured-img { aspect-ratio: 4 / 3; }
}