/* ==========================================================================
   CareProRx — Responsive & media queries
   All @media rules live here. Loaded AFTER style.css so breakpoint
   overrides win on source order.

   Contents:
     1. Capability queries  (hover:hover)
     2. Breakpoints         (<=980 tablet, <=860 nav→drawer, <=800 profile, <=600 phone)
     3. Reduced motion      (prefers-reduced-motion)
   ========================================================================== */

/* 1. Capability — pointer that can truly hover (desktop). Touch devices skip
   these so dropdowns/megas open on tap (handled in main.js) instead of sticking
   open after a tap. ------------------------------------------------------- */
@media (hover: hover) {
    .has-dropdown:hover .nav__link svg {
        transform: rotate(180deg);
    }

    .has-dropdown:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .has-mega:hover .mega {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* 2. Breakpoints ========================================================== */

/* Tablet — collapse 2D grids, stack split/hero/contact/estimator ---------- */
@media (max-width: 980px) {
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__media {
        max-width: 460px;
        margin: 0 auto;
    }

    .split,
    .contact-grid,
    .estimator {
        grid-template-columns: 1fr;
    }

    .split--rev .split__media {
        order: 0;
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .tracker {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .tracker::before {
        display: none;
    }

    .mega__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Nav → slide-in drawer; util/topbar hidden -------------------------------- */
@media (max-width: 860px) {
    .utilbar {
        display: none;
    }

    /* backdrop-filter makes .nav a containing block for position:fixed and a
       stacking context — both trap the slide-in menu (short height + sits
       under the overlay). Drop it on mobile so the menu is viewport-fixed. */
    .nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #fff;
    }

    .nav__cta {
        display: none;
    }

    .nav__toggle {
        display: flex;
    }

    /* Submenus become full-width sub-drawers that slide in from the right,
       on top of the main menu. A back button slides them away. */
    .mega,
    .dropdown {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
        background: #fff;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 84px 22px 28px;
        margin: 0;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .35s var(--ease);
        z-index: 1105;
        display: block;
    }

    .has-mega.is-open .mega,
    .has-dropdown.is-open .dropdown {
        transform: translateX(0);
    }

    /* Injected back button */
    .submenu-back {
        position: absolute;
        top: 22px;
        left: 18px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        padding: 8px 4px;
        font: inherit;
        font-weight: 700;
        color: var(--blue-600, #1d4ed8);
        cursor: pointer;
    }

    .submenu-back::before {
        content: "‹";
        font-size: 1.5em;
        line-height: 1;
    }

    .mega__grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mega__item {
        padding: 12px 8px;
        border-bottom: 1px solid var(--line);
    }

    .mega__foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 14px;
    }

    .mega__foot .btn {
        margin-left: 0;
    }

    .float-savings {
        display: none;
    }

    .nav__menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        padding: 84px 22px 28px;
        gap: 0;
        margin: 0;
        box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
        transform: translateX(100%);
        transition: transform .35s var(--ease);
        max-height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 1100;
    }

    .nav__menu.is-open {
        transform: translateX(0);
    }

    /* Slide-menu overlay */
    .nav__overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .35s var(--ease), visibility .35s var(--ease);
        z-index: 1090;
    }

    .nav__overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    body.nav-locked {
        overflow: hidden;
    }

    .nav__toggle {
        position: relative;
        z-index: 1110;
    }

    .nav__item {
        width: 100%;
    }

    .nav__link {
        display: flex;
        width: 100%;
        padding: 14px 8px;
        font-size: 1.04rem;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
    }

    .dropdown li {
        list-style: none;
    }

    .dropdown a {
        display: block;
        padding: 14px 8px;
        font-size: 1.04rem;
        border-bottom: 1px solid var(--line);
    }

    .nav__cta-mobile {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 18px;
    }

    .nav__cta-mobile .btn {
        width: 100%;
    }
}

/* Team-member profile — stack sidebar + header ---------------------------- */
@media (max-width: 800px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-side__card {
        position: static;
    }

    .profile-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }
}

/* Phone — single column everywhere; stack CTA + process steps ------------- */
@media (max-width: 600px) {

    .grid--2,
    .grid--3,
    .grid--4,
    .footer__grid,
    .form__row {
        grid-template-columns: 1fr;
    }

    .cta-band__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__trust {
        gap: 20px;
    }

    .step {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .float-call {
        bottom: 16px;
        right: 16px;
    }
}

/* 3. Reduced motion — honour the OS setting. Kill scroll/transform motion,
   keep content visible (the .reveal default is opacity:0, so force it on),
   and stop the looping call-button pulse. ----------------------------------*/
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .float-call,
    .float-btn--call {
        animation: none;
    }
}