/* ============================================================
   HYRAX FASTENERS — Mobile Nav + Header Overlap Fix
   Drop-in. Load AFTER style.css so these rules win.
   ============================================================ */

/* ---- 1. Stop header from overlapping page content ----
   Your header is sticky/fixed, so content slides under it.
   We push <main> down by the header height.
   Adjust --hyrax-header-h if your header is taller/shorter. */
:root {
    --hyrax-header-h: 70px; /* height of .site-header on mobile */
    --hyrax-topbar-h: 0px; /* top-bar is hidden on mobile (d-none d-md-block) */
}

@media (min-width: 768px) {
    :root {
        --hyrax-header-h: 76px;
        --hyrax-topbar-h: 42px; /* top-bar visible on desktop */
    }
}

/* If your header is position:fixed, this spacer prevents overlap.
   If it's position:sticky you usually DON'T need this — test both:
   comment this block out if you get a double gap. */
body {
    scroll-padding-top: calc(var(--hyrax-header-h) + var(--hyrax-topbar-h));
}

main {
    /* Only needed when header is FIXED. Harmless small top padding otherwise.
       If you see a big empty gap under the header, delete this rule. */
}

/* Make the header reliably sit above everything else */
.site-header {
    position: sticky; /* change to fixed only if you specifically need it */
    top: 0;
    z-index: 1000;
    background: var(--color-surface, #fff);
}

/* ============================================================
   2. MOBILE NAV DRAWER
   ============================================================ */

/* Hamburger: hidden on desktop, shown on mobile */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 1100;
}

    .nav-toggle span {
        display: block;
        width: 26px;
        height: 2px;
        background: var(--color-text, #111);
        border-radius: 2px;
        transition: transform .3s ease, opacity .3s ease;
    }

    /* Animate hamburger -> X when open */
    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

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

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

/* Dark backdrop behind the open drawer */
.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 1050;
}

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

@media (max-width: 991px) {
    /* Show hamburger */
    .nav-toggle {
        display: flex;
    }

    /* Hide the desktop phone button on small screens if cramped (optional) */
    .nav-phone {
        display: none;
    }

    /* Turn .nav-links into a slide-in drawer from the right */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        height: 100dvh;
        width: min(82vw, 340px);
        margin: 0;
        padding: calc(var(--hyrax-header-h) + 20px) 24px 40px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        background: var(--color-surface, #fff);
        box-shadow: -8px 0 40px rgba(0, 0, 0, .25);
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        z-index: 1080;
        list-style: none;
    }

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

        .nav-links > li {
            width: 100%;
            border-bottom: 1px solid var(--color-border, #eee);
        }

            .nav-links > li > a {
                display: block;
                width: 100%;
                padding: 14px 4px;
                font-size: 1.05rem;
            }

    /* Dropdown: show as an accordion, expanded inline (no hover on mobile) */
    .nav-dropdown {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: var(--color-surface-2, #f7f7f7);
        border-radius: 8px;
        padding: 4px 0;
        margin: 0 0 10px;
    }

    .nav-item-dropdown.is-expanded .nav-dropdown {
        display: block;
    }

    .nav-dropdown a {
        display: block;
        padding: 11px 16px;
        font-size: .95rem;
    }

    /* Rotate the chevron when the dropdown is expanded */
    .nav-item-dropdown > a .fa-chevron-down {
        transition: transform .25s ease;
    }

    .nav-item-dropdown.is-expanded > a .fa-chevron-down {
        transform: rotate(180deg);
    }

    /* Lock body scroll when the drawer is open */
    body.nav-open {
        overflow: hidden;
    }
}