/* ==========================================================================
   VILLAM — Mobile navigation
   Shared by index.html, blog.html, privacy-policy.html and /blog/*.html so the
   header behaves identically on every page.

   Load this AFTER each page's own styles. Several rules below (display, gap,
   font-size) sit at the same specificity as the per-page breakpoints they are
   meant to replace, so source order is what decides the winner.

   Above 700px nothing here applies and the desktop header is untouched. At or
   below 700px the six links collapse behind a toggle, because they no longer
   fit on one row: privacy-policy.html starts clipping "Contact" at ~620px and
   index.html at ~575px, so 700px clears both with room to spare.
   ========================================================================== */

.nav-toggle {
    display: none;                 /* desktop: the horizontal row is shown instead */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;                   /* 44px square — comfortable touch target */
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.nav-toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
}

/* Hamburger morphs into an X. Bars sit 7px apart (2px tall + 5px gap), so the
   outer two travel exactly 7px to meet in the middle. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 700px) {
    .nav-toggle {
        display: flex;
    }

    /* nav is position:fixed, so it is the containing block and its padding box
       spans the full viewport width. top:100% therefore drops the panel right
       under the bar at whatever height that bar happens to be (70px, or 60px
       under the pages' own 480px rule) — no value to keep in sync here. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        overflow: hidden;          /* cancels the desktop horizontal-scroll fallback */
        background-color: var(--dark-bg-secondary);
        border-bottom: 1px solid var(--border-color);
        box-shadow: 0 14px 28px rgba(0, 0, 0, .45);
        max-height: 0;
        /* visibility, not just height: collapsed links must leave the tab order */
        visibility: hidden;
        transition: max-height .3s ease, visibility 0s linear .3s;
    }

    .nav-links.open {
        max-height: 80vh;
        overflow-y: auto;
        visibility: visible;
        transition: max-height .35s ease, visibility 0s;
    }

    .nav-links a {
        display: block;
        padding: 15px 20px;        /* full-width row, ~52px tall */
        font-size: 14px;
        letter-spacing: .5px;
        border-bottom: 1px solid var(--border-color);
    }

    /* Contact is the conversion path — give it the site's CTA treatment rather
       than a sixth row of grey text. Mirrors .cta-button on the homepage. */
    .nav-links li:last-child a {
        margin: 12px 20px 16px;
        padding: 12px 20px;
        background-color: var(--primary-color);
        color: var(--dark-bg);
        font-weight: 600;
        text-align: center;
        border: 2px solid var(--primary-color);
        border-radius: 4px;
        transition: background-color .3s ease, color .3s ease;
    }

    .nav-links li:last-child a:hover,
    .nav-links li:last-child a:focus-visible {
        background-color: transparent;
        color: var(--primary-color);
    }

    /* no divider directly above the CTA */
    .nav-links li:nth-last-child(2) a {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-toggle-bar {
        transition: none;
    }
}