/* ==========================================================================
   header-nav.css — Raviva Dental Kelowna
   Site header, video hero, navigation bar, mega-menu dropdowns,
   mobile nav drawer, and the inner-page banner (no video hero).

   File map (top to bottom):
     1. Header shell + video hero
     2. Navbar container
     3. Logo (+ entrance animation)
     4. Nav links + CTA button
     5. Dropdown trigger + mega-menu (desktop panel)
     6. Hero content (text over the video)
     7. Page banner (inner pages without the video hero)
     8. Breadcrumbs
     9. Responsive — mobile nav drawer (<=900px)
    10. Responsive — small phones (<=600px)
    11. Responsive — extra-small phones (<=480px)

   None of the colors, fonts, text-decoration or hover/transition effects
   below were changed from the previous version — only layout properties
   (widths, heights, spacing, alignment, breakpoints) were touched, to
   make the mega-menu dropdowns fully responsive on every screen size.

   v8.0.0 changes:
   - .navbar is now position:fixed (see "Sticky navbar" below section 2),
     gains a background once the page scrolls (.navbar.scrolled, toggled
     by assets/js/main.js), and uses the shared --z-navbar variable.
   - Logo sizing (section 3) now uses clamp() everywhere so both the
     small "rv" mark and the wordmark scale smoothly across breakpoints
     instead of jumping between a couple of fixed pixel values. Navbar
     logos are sized smaller than their hero-section counterparts at
     every width, and .hero-logo-rv's old clamp(120px, 22vw, 120px) —
     which always resolved to a flat 120px because its min and max were
     identical — now actually scales.
   - The hamburger/X toggle button and the mobile drawer (.nav-links)
     now use --z-mobile-toggle / --z-mobile-drawer (base.css) instead of
     ad-hoc numbers, so the open drawer can never end up hidden behind
     other page content — see "Responsive — mobile nav drawer" below.
   ========================================================================== */

/* ---------- 1. Header shell + video hero ---------- */

.site-header {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;
}

.site-header * {
    font-family: Arial, Helvetica, sans-serif;
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 28, 28, 0.727);
    z-index: 2;
}

/* ---------- 2. Navbar container ---------- */

/* Sticky navbar (v8.0.0): the navbar is now fixed to the top of the
   viewport on every page, rather than only sitting in-flow at the top
   of the hero. It starts transparent (so it still overlays the video on
   the homepage exactly as before) and picks up a solid background once
   the page scrolls — assets/js/main.js toggles the .scrolled class based
   on window.scrollY. Uses the shared --z-navbar variable (base.css) so
   its stacking position relative to the mobile drawer / back-to-top
   button / skip-link is documented in one place. */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-navbar);
    width: 100%;
    /*max-width: 1180px;*/
    margin: auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.navbar.scrolled {
    width: 100%;
    background-color:#e8dfd8e1; /*rgba(20, 28, 28, 0.92);*/
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.navbar.scrolled a {
    color: var(--brown);
}
.navbar.scrolled a.active {
    color: var(--brown);
    border-bottom: 2px solid var(--brown);
    padding-bottom: 4px;
}
.navbar.scrolled .nav-dropdown-toggle{
    color: var(--brown);
}
/* ---------- 3. Logo (+ entrance animation) ---------- */

.logo {
    color: var(--white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 2px;
    /* Smooth entrance on page load — a quick fade + slight rise/scale,
       so the logo doesn't just snap into place with the rest of the
       navbar. Kept short and subtle since it plays on every page, not
       just the homepage hero. */
    opacity: 0;
    animation: logoIntro 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes logoIntro {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

.logo strong {
    font-size: 34px;
    font-weight: 400;
}

.logo small {
    display: block;
    font-size: 17px;
    letter-spacing: 6px;
}

.logo-icon {
    color: var(--logo-gold);
    font-size: 36px;
}

/* Custom image logo (set SITE_LOGO in includes/config.php). Height-locked,
   width auto, so any reasonably-proportioned logo file drops in cleanly
   without stretching; adjust the height here if your mark needs more
   or less room next to the nav links. Both navbar logo images now use
   clamp() (v8.0.0) so they scale smoothly with viewport width instead of
   jumping between a couple of fixed pixel values at the 900px
   breakpoint — and both are deliberately sized smaller than their
   .hero-logo / .hero-logo-rv counterparts below at every width, since
   the navbar mark should read as a secondary, wayfinding logo while the
   hero logo is the "hero" moment. */
.logo-img {
    height: clamp(22px, 3.4vw, 40px);
    width: auto;
    display: block;
}
.logo-img-rv {
    height: clamp(40px, 6vw, 65px);
    width: auto;
}

/* ---------- 4. Nav links + CTA button ---------- */

.nav-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.nav-links a {
    color: var(--cream);
    text-decoration: none;
    font-weight: 700;
    font-size: 14.5px;
}

.nav-links a:hover {
    /*color: var(--brown);*/
    color: #cc8a2d;
}

.nav-links a.active {
    color: var(--logo-gold);
    border-bottom: 2px solid var(--logo-gold);
    padding-bottom: 4px;
}

.cta,
.hero-btn {
    background: var(--brown-deep);
    color: var(--white) !important;
    padding: 17px 35px;
    border-radius: 40px;
    font-size: 18px !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta span,
.hero-btn span {
    position: relative;
    display: inline-block;
}

.cta span::after,
.hero-btn span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.cta:hover,
.hero-btn:hover {
    background: var(--brown);
    text-decoration: none;
}

.cta:hover span::after,
.hero-btn:hover span::after {
    transform: scaleX(1);
}

/* ---------- 5. Dropdown trigger + mega-menu (desktop panel) ---------- */

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    color: var(--cream);
    cursor: pointer;
    font-size: 11px;
    padding: 4px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.nav-dropdown.open .nav-dropdown-toggle {
    transform: rotate(180deg);
    color:#cc8a2d;
}

.nav-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    width: min(640px, 88vw);
    /* Safety clamp so the panel can never run past the browser edge on
       "in-between" desktop widths (roughly 900–1100px), where min(640px,
       88vw) still resolves to a fixed 640px but the viewport itself may
       not have 640px of room either side of the trigger link. */
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: rgba(247, 241, 230, 0.97);
    padding: 32px 30px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: center;
    border-radius: 14px;
    box-shadow: 0 30px 60px -25px rgba(20, 28, 28, 0.35);
    /* Padding-top bridges the visual gap so the hover path from the
       nav link down into the menu is never truly empty. */
    margin-top: 14px;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown.open .nav-dropdown-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* .nav-dropdown-columns holds the actual column layout (desktop: 3
   columns side by side). Each group of links is its own explicit
   .nav-dropdown-column rather than an anonymous child <div>, so it can
   be targeted directly instead of relying on a ">div" positional
   selector — this is what let the desktop layout, the mobile stacked
   layout, and the JS-driven open/close animation (see the responsive
   section below) all target exactly the same elements without guessing
   at markup structure. */
.nav-dropdown-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    box-sizing: border-box;
}

/* v9.0.1 fix: single-column panels ("Our Clinic", "Blogs") still used
   the 3-track repeat(3, 1fr) grid above even though they only ever
   render one .nav-dropdown-column. Combined with .nav-dropdown-panel
   --fit's width:fit-content (below), the browser's intrinsic-sizing
   pass for a lone item inside 3 equal fr tracks under-measured the
   available width, so longer link labels (e.g. "Cosmetic Treatments
   Blog") wrapped one word per line instead of sitting on one line.
   Giving these panels their own single, min-width'd track sidesteps
   the multi-fr-track sizing math entirely. */
.nav-dropdown-columns--single {
    grid-template-columns: minmax(220px, max-content);
}

.nav-dropdown-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.nav-dropdown-panel h4 {
    color: #493808;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.nav-dropdown-panel a {
    display: block;
    color: var(--wood-dark);
    font-weight: 400;
    font-size: 15px;
    padding: 8px 4px;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(178, 150, 125, 0.25);
    white-space: nowrap;
}

.nav-dropdown-panel a:last-child {
    border-bottom: none;
}

/* Desktop-only width for the smaller "Our Clinic" menu (single column,
   so it shouldn't stretch to the same 640px as "Dental Services").
   Scoped to a min-width media query — rather than relying on selector
   order in the stylesheet to beat the mobile ".nav-dropdown-panel {
   width: 100% }" rule further down — so the desktop/mobile split is
   guaranteed no matter how this file gets edited or reordered later. */
@media (min-width: 901px) {
    .nav-dropdown-panel--fit {
        width: fit-content;
        max-width: calc(100vw - 32px);
    }
}

/* ---------- 6. Hero content (text over the video) ---------- */

.hero-content {
    position: relative;
    z-index: var(--z-content);
    /* v8.0.0: previously calc(100vh - 100px), reserving room for the
       navbar sitting in-flow above this element. Now that .navbar is
       position:fixed (see section 2) it no longer takes up any in-flow
       height, so this can be a plain 100vh; the 80px top padding below
       already keeps the hero text clear of the fixed navbar overlaying
       the top of the video. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 80px 20px;
    box-sizing: border-box;
}

/* Hero logo — sits above the "Welcome New Patients..." line, sourced
   from SITE_LOGO (see includes/config.php). Sized by width with auto
   height so it scales cleanly regardless of the logo file's own
   dimensions; only rendered at all when SITE_LOGO is set. Uses the same
   staggered heroRise entrance as the text/button below it, just first
   in the sequence (no delay) so it leads the reveal. */
.hero-logo {
    width: clamp(150px, 32vw, 260px);
    height: auto;
    display: block;
    margin-bottom: 26px;
    opacity: 0;
    transform: translateY(30px);
    animation: heroRise 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0s;
}
/* v8.0.0 fix: this previously read clamp(120px, 22vw, 120px) — since
   the min and max bounds were identical, clamp() always resolved to a
   flat 120px on every screen size, so the "rv" hero mark never actually
   scaled with the viewport the way its sibling .hero-logo does. Widened
   the range so it scales properly, while staying comfortably larger
   than the navbar's .logo-img-rv (clamp(34px, 5.6vw, 48px) above) at
   every breakpoint, matching the "navbar logo smaller than hero logo"
   sizing rule used throughout this file. */
.hero-logo-rv {
    width: clamp(90px, 20vw, 160px);
    height: auto;
    display: block;
    margin-bottom: 26px;
    opacity: 0;
    transform: translateY(30px);
    animation: heroRise 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0s;
}

.hero-content p {
    color: var(--logo-gold);
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(36px);
    animation: heroRise 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0.35s;
}

.hero-content h1 {
    font-size: clamp(18px, 3vw, 48px);
    font-family: 'Baskerville', Georgia, serif;
    font-weight: 200;
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateY(46px);
    animation: heroRise 1.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 0.85s;
}

.hero-content .hero-btn {
    opacity: 0;
    transform: translateY(36px);
    animation: heroRise 1.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: 1.25s;
}

@keyframes heroRise {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-logo,
    .hero-content p,
    .hero-content h1,
    .hero-content .hero-btn {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Hamburger / X toggle (v8.0.0): the icon itself is swapped between "☰"
   and "✕" by assets/js/main.js when the drawer opens/closes (see the
   "Hamburger -> X" note in that file), so this button just needs the
   transition for a smooth visual swap plus its place in the shared
   z-index scale — it must sit above the drawer it controls
   (--z-mobile-toggle > --z-mobile-drawer, both defined in base.css) so
   it's always clickable to close the drawer again, never covered by it. */
.menu-toggle {
    display: none;
    position: relative;
    z-index: var(--z-mobile-toggle);
    background: transparent;
    border: none;
    color: var(--logo-gold);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}
.navbar.scrolled .menu-toggle{
    color: var(--brown);
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
    color: var(--logo-gold);
}

/* ---------- 7. Page banner (inner pages, no video hero) ---------- */

.site-header.no-hero {
    min-height: auto;
    background: linear-gradient(145deg, var(--dark-mid) 10%, var(--brown) 85%);
}

.site-header.no-hero .hero-overlay { display: none; }

.page-banner {
    position: relative;
    z-index: var(--z-content);
    padding: 150px 20px 80px;
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--logo-gold);
    margin-bottom: 14px;
}

.page-banner h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(32px, 5vw, 52px);
    letter-spacing: 0.5px;
}

.page-sub {
    margin-top: 16px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 16px;
}

/* ---------- 8. Breadcrumbs (inner pages, sits under the banner) ---------- */

.breadcrumbs {
    position: relative;
    z-index: var(--z-content);
    max-width: 720px;
    margin: -50px auto 0;
    padding: 0 20px 30px;
    text-align: center;
    font-size: 13.5px;
    box-sizing: border-box;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
}

.breadcrumbs a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
}

.breadcrumbs a:hover { color: var(--logo-gold); text-decoration: underline; }

.breadcrumbs li:not(:last-child)::after {
    content: "/";
    margin-left: 6px;
    color: rgba(255,255,255,0.4);
}

.breadcrumbs li[aria-current="page"] {
    color: var(--white);
    font-weight: 600;
}

/* ==========================================================================
   9. Responsive — mobile nav drawer (<=900px)
   Below this breakpoint the hamburger icon replaces the inline nav, and
   .nav-links becomes a fixed-position slide-in drawer from the right.
   Both dropdown panels ("Our Clinic" and "Dental Services") collapse
   into a single-column, accordion-style list inside that drawer, opened
   and closed by JS setting an inline max-height on .nav-dropdown-panel
   (assets/js/main.js) — the same proven pattern already used for the
   FAQ accordion elsewhere on the site (see .faq-a in faq.css). Every
   rule in this block keeps the drawer's own width as the one source of
   truth for how wide its contents are allowed to be, so no dropdown
   list can run wider than the drawer or push nav links out of view.
   ========================================================================== */
@media (max-width: 900px) {

    .menu-toggle {
        display: block;
    }


    /* v8.0.0 fix: this drawer previously had no z-index of its own, so
       — because it's a fixed-position descendant of .navbar, which
       establishes its own stacking context — its actual stacking order
       against OTHER page content (the back-to-top button, page sections
       with their own z-index, etc.) was tied to .navbar's old z-index:10,
       not to how "on top" a slide-in drawer needs to be. That let the
       open drawer visually merge with / hide behind other elements on
       some pages. Giving it its own explicit slot on the shared z-index
       scale (base.css) — above --z-navbar and --z-back-to-top, below
       --z-mobile-toggle so the close button stays clickable — fixes it
       for good, regardless of what other z-indexes get added elsewhere
       later. */
    .nav-links {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        position: fixed;
        z-index: var(--z-mobile-drawer);
        inset: 0 0 0 auto;
        width: 80%;
        max-width: 80%;
        background: rgba(87, 57, 18, 0.87);
        flex-direction: column;
        align-items: flex-start;
        padding: 100px 35px;
        gap: 25px;
        transform: translateX(100%);
        transition: 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    body.nav-open .nav-links {
        transform: translateX(0);
    }
    .navbar.scrolled a {
        color: var(--cream);
    }
    .navbar.scrolled a.active {
        color: var(--logo-gold);
        border-bottom: 2px solid var(--cream);
        padding-bottom: 4px;
    }
    .navbar.scrolled .nav-dropdown-toggle{
        color: var(--cream);
    }

    /* Plain links and both dropdown wrappers span the drawer's full
       content width, so they and the dropdown panel items below them
       all share one common left/right edge. The "Book Appointment"
       pill (.cta) is deliberately excluded — it keeps its own natural
       (content-sized) width and shape, exactly as before. */
    .nav-links > a:not(.cta),
    .nav-dropdown {
        width: 100%;
        box-sizing: border-box;
    }

    .nav-dropdown {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        min-height: fit-content;
        position: relative;
    }

    .nav-dropdown-label {
        width: 100%;
        padding: 6px 0;
        box-sizing: border-box;
    }

    .nav-dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 16px;
        padding: 6px 10px;
    }

    /* Collapsible dropdown panel, mobile only.
       max-height starts at 0 with overflow hidden, so the panel is
       fully clipped and invisible while closed. assets/js/main.js sets
       an inline `max-height: <scrollHeight>px` on this element when its
       .nav-dropdown is opened (and clears it back to 0 on close) — the
       exact same technique already used for the FAQ accordion, rather
       than a CSS-only trick like animating grid-template-rows or
       guessing a flat max-height in pixels. Both of those approaches
       either clipped/overlapped content that came out taller or
       shorter than expected, or could end up visually "stuck" mid
       transition if opened and closed again quickly. Measuring the
       real content height in JS avoids both problems and matches
       every dropdown's actual size exactly, regardless of how many
       links or columns it contains.

       width/max-width/box-sizing here are the single source of truth
       for how wide the panel is allowed to be on mobile: they always
       win over the desktop .nav-dropdown-panel / .nav-dropdown-panel--fit
       rules because those are scoped to @media (min-width: 901px)
       above, which is simply inactive at this breakpoint. */
    .nav-dropdown-panel {
        position: static;
        margin-left: 45%;
        max-width: 80%;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        transform: none;
        padding: 0;
        margin-top: 0;
        text-align: left;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        transition: max-height 0.35s ease;
        pointer-events: auto;
    }

    /* Single column, full drawer width, with even vertical rhythm
       between the links regardless of which panel ("Our Clinic" — one
       group of 5 links — or "Dental Services" — three groups of 4/4/5)
       is open. Top/bottom padding is permanent (rather than animated
       in on open) since max-height: 0 + overflow: hidden on the parent
       already hides it completely while closed — one less thing to
       keep in sync with the JS-driven height. */
    .nav-dropdown-columns {
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 10px 0 16px;
    }

    .nav-dropdown-column {
        align-items: flex-start;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nav-dropdown-panel h4 { color: var(--logo-gold); margin-top: 10px; }

    .nav-dropdown-panel a {
        color: rgba(255,255,255,0.85);
        border-bottom: 1px solid rgba(255,255,255,0.12);
        /* v9.0.1: undo the desktop-only nowrap (added alongside the
           --single grid fix above) so long labels like "Cosmetic
           Treatments Blog" wrap normally instead of overflowing the
           narrow mobile drawer. */
        white-space: normal;
    }

    .logo strong {
        font-size: 26px;
    }

    .logo small {
        font-size: 13px;
    }

    /* v8.0.0: the old height:38px override here made the navbar
       wordmark logo LARGER on mobile than on desktop (30px), which was
       inconsistent with every other sizing rule on the site (mobile
       should generally be smaller or equal, never bigger). .logo-img's
       clamp(22px, 3.4vw, 30px) above already scales it down smoothly at
       this width, so no override is needed here any more. */

    .hero-content h1 {
        letter-spacing: 3px;
    }
     .hero-logo {
        height: clamp(100px, 5.5vw, 200px);
        width: auto;
    }
    .logo-img {
        height: clamp(45px, 4vw, 90px);
        width: auto;
        display: block;
    }
    .logo-img-rv {
        height: clamp(80px, 6.5vw, 140px);
        width: auto;
    }
}

/* ---------- 10. Responsive — small phones (<=600px) ---------- */
@media (max-width: 600px) {
    .page-banner { padding: 130px 18px 60px; }
    .breadcrumbs { margin-top: -40px; }
    .logo-img {
        height: clamp(38px, 3.5vw, 76px);
        width: auto;
        display: block;
    }
    .logo-img-rv {
        height: clamp(65px, 5.8vw, 100px);
        width: auto;
    }
    .hero-logo {
        height: clamp(90px, 5.0vw, 180px);
        width: auto;
    }
}

/* ---------- 11. Responsive — extra-small phones (<=480px) ---------- */
@media (max-width: 480px) {

    .navbar {
        padding: 16px;
    }

    /* Narrower drawer padding buys back horizontal room for the
       mega-menu's link text on very small phones, where the default
       35px side padding could otherwise crowd out longer service names
       (e.g. "Crowns & Bridges", "Sleep Apnea"). The drawer itself still
       tracks its own width (80%, capped at 360px) from the 900px rule
       above — only the inner breathing room shrinks here. */
    .nav-links {
        padding: 90px 22px;
        gap: 20px;
    }

    .hero-content p {
        font-size: 18px;
    }

    .hero-content h1 {
        font-size: 34px;
    }

    .cta,
    .hero-btn {
        padding: 14px 26px;
        font-size: 16px !important;
    }
}