/* =====================================================================
   CareOpsByAli — shared mobile & touch layer
   Link this AFTER each page's own <style> block so it wins ties:
   <link rel="stylesheet" href="/mobile.css">
   Page-specific mobile rules (hero, services, stats, testimonials)
   live inside index.html; this file only holds what every page shares.
   ===================================================================== */

/* ---------- 1. Global safety net ---------- */
html, body { overflow-x: hidden; }
@supports (overflow: clip) {
    /* clip stops sideways scrolling without turning <body> into a scroll
       container, so window.scrollY and IntersectionObserver keep working */
    html, body { overflow-x: clip; }
}
img, svg, video, iframe { max-width: 100%; }
h1, h2, h3, h4 { overflow-wrap: break-word; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 3000;
    background: var(--royal-deep, #0F2560); color: #fff; padding: 0.75rem 1rem;
    border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0.75rem; }

:focus-visible { outline: 3px solid var(--gold, #C9A84C); outline-offset: 3px; }
a, button, input, select, textarea, label, summary { touch-action: manipulation; }

/* ---------- 2. Slide-down navigation (phones + tablets) ----------
   The full desktop nav needs ~1,050px, so below 1,100px it now
   collapses into a panel instead of overflowing the header. */
@media (max-width: 1100px) {
    .menu-btn {
        display: flex !important;
        width: 48px; height: 48px; padding: 0; margin-right: -0.5rem;
        align-items: center; justify-content: center; flex-direction: column; gap: 5px;
        border-radius: 12px;
    }
    .menu-btn span { width: 22px; height: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
    .menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .theme-toggle { width: 44px !important; height: 44px !important; margin: 0 0.25rem 0 auto !important; }

    header nav {
        display: flex;
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 0.5rem 1.25rem 1.25rem;
        background: var(--surface);
        border-top: 1px solid rgba(var(--border-rgb), 0.08);
        box-shadow: 0 18px 40px rgba(13, 27, 62, 0.18);
        max-height: calc(100vh - 64px);
        max-height: calc(100dvh - 64px);
        overflow-y: auto; overscroll-behavior: contain;
        opacity: 0; visibility: hidden; transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }
    header nav.open {
        opacity: 1; visibility: visible; transform: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    header nav a {
        display: flex; align-items: center;
        min-height: 52px; padding: 0 0.25rem;
        font-size: 1.05rem; font-weight: 600;
        color: var(--text-dark);
        border-bottom: 1px solid rgba(var(--border-rgb), 0.08);
    }
    header nav a::after { display: none !important; }
    header nav a:last-of-type { border-bottom: none; }
    header nav .nav-cta {
        justify-content: center; margin-top: 1rem; min-height: 52px;
        font-size: 1rem; border-bottom: none; border-radius: 10px;
    }
}

/* ---------- 3. Phone header ---------- */
@media (max-width: 768px) {
    header, header.scrolled { padding: 0 !important; }
    .header-inner { height: 64px; padding: 0 1rem !important; }
    .hero, .page-hero, .post-hero, .item-hero { margin-top: 64px !important; }
}

/* ---------- 4. Touch targets, forms, readable body copy ---------- */
@media (max-width: 768px) {
    /* 16px stops iOS Safari from zooming the page when a field is tapped */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
    select, textarea {
        font-size: 16px !important;
        min-height: 52px;
        padding-top: 0.9rem !important;
        padding-bottom: 0.9rem !important;
        border-radius: 10px;
    }
    textarea { min-height: 120px; }
    input::placeholder, textarea::placeholder { color: var(--text-light); opacity: 1; }

    .btn-gold, .btn-outline, .btn-outline-royal, button[type="submit"] {
        min-height: 50px; justify-content: center;
    }
    .modal-close { width: 44px !important; height: 44px !important; }

    /* Slightly darker body copy for phones used outdoors / at low brightness */
    html:not([data-theme="dark"]) { --text-mid: #3A4457; --text-light: #515B72; }
    html[data-theme="dark"] { --text-mid: #CDD4E4; --text-light: #A2ABC3; }

    footer p, footer .footer-brand p { color: rgba(255,255,255,0.74) !important; }
    footer a { color: rgba(255,255,255,0.82); }
}

/* ---------- 5. Sticky "Schedule Free Call" bar (phones only) ---------- */
.mobile-book-bar { display: none; }
@media (max-width: 768px) {
    .mobile-book-bar {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 990; /* under header (1000), modals (2000) and Calendly (9999) */
        padding: 0.625rem 1rem;
        background: var(--header-bg, rgba(255,255,255,0.92));
        -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
        border-top: 1px solid rgba(var(--border-rgb, 28,63,143), 0.10);
        transform: translateY(110%); visibility: hidden;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), visibility 0s linear 0.28s;
    }
    .mobile-book-bar.is-visible {
        transform: none; visibility: visible;
        transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-book-bar .mobile-book-btn {
        display: flex; width: 100%; min-height: 50px;
        align-items: center; justify-content: center; gap: 0.55rem;
        border-radius: 10px; font-size: 1rem; font-weight: 700;
        text-decoration: none; box-shadow: none;
        background: linear-gradient(135deg, var(--gold, #C9A84C), var(--gold-light, #D4B86A));
        color: var(--royal-deep, #0F2560);
    }
    /* Leaves room so the last footer line can always scroll clear of the bar */
    body.has-book-bar footer { padding-bottom: calc(2rem + 70px) !important; }
}

/* ---------- 6. Reduced motion ---------- */
@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;
    }
    .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}
