/* =====================================================
   DEVMIXA – HEADER v3 (DEEP TEAL & CORAL, PILL NAV)
   Full redesign — new layout language, not a recolor of v2.
===================================================== */

:root {
    --primary: #0d4f4f;        /* deep teal */
    --primary-dark: #083a3a;
    --primary-light: #e8f3f2;  /* light teal tint, used for pill bg */
    --accent: #ff6b4a;         /* coral */
    --accent-dark: #e8552f;
    --secondary: #0f172a;
}

/* =====================================================
   FIXED HEADER WRAPPER
===================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

    background: #ffffff;
    border-bottom: 3px solid #0d4f4f;

    transition: box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 15px 40px rgba(13,79,79,0.12);
}

.site-header .container {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Push content below fixed header */
body {
    padding-top: 100px;
}

/* =====================================================
   LOGO
===================================================== */
.logo img {
    max-height: 54px;
    transition: 0.3s ease;
}

.logo img:hover {
    transform: scale(1.04);
}

/* =====================================================
   NAVIGATION — PILL CAPSULE
===================================================== */
.nav-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #e8f3f2;
    padding: 6px;
    border-radius: 999px;
}

.nav-link {
    position: relative;
    display: inline-block;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #0d4f4f;
    text-decoration: none;
    padding: 11px 22px;
    border-radius: 999px;
    transition: background 0.3s ease, color 0.3s ease;
}

.nav-link:hover {
    background: rgba(13,79,79,0.12);
}

.nav-link.active {
    background: #0d4f4f;
    color: #ffffff;
}

/* =====================================================
   CTA BUTTON — SOLID CORAL
===================================================== */
.header-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ff6b4a;
    color: #fff;
    padding: 14px 30px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;

    box-shadow: 0 14px 30px rgba(255,107,74,0.32);
    transition: 0.3s ease;
}

.header-cta a i {
    transition: transform 0.3s ease;
}

.header-cta a:hover {
    background: #e8552f;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(255,107,74,0.4);
}

.header-cta a:hover i {
    transform: translateX(4px);
}

/* =====================================================
   MOBILE NAV — FULL-SCREEN TAKEOVER (not a side drawer)
===================================================== */
.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    background: #e8f3f2;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    color: #0d4f4f;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

/* Instant tactile feedback on tap -- this is what makes the menu feel
   fast: the button reacts the moment you touch it, before the drawer
   even starts animating in. */
.menu-toggle:active {
    transform: scale(0.88);
    background: #d9ece9;
}

.nav-drawer-head {
    display: none;
}

.nav-pill .nav-link-icon {
    /* Higher specificity than Font Awesome's own ".fa-solid" base rule
       (which also sets a "display" value and loads after this file in
       <head>) -- without this, FA's rule wins the cascade tie and the
       icon shows on desktop even though it should be hidden there. */
    display: none;
}

.nav-close {
    display: none;
}

.nav-pill .nav-mobile-cta,
.nav-mobile-cta {
    display: none;
}

.nav-overlay {
    display: none;
}

@media (max-width: 860px) {

    .site-header .container {
        height: 78px;
    }

    body {
        padding-top: 78px;
    }

    .logo img {
        max-height: 42px;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .header-cta {
        display: none;
    }

    /* -----------------------------------------------------------
       SLIDE-IN DRAWER (from the right) -- replaces the old
       full-screen fade+scale takeover. A drawer that slides in on
       its own transform is both quicker to perceive (content is
       already partly visible as it slides, vs. a full fade which
       reads as "nothing happening" for the first chunk of the
       animation) and cheaper for the browser (transform-only is
       GPU-composited; it doesn't also animate opacity+visibility
       across the full viewport).
    ----------------------------------------------------------- */
    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(84vw, 340px);
        height: 100%;
        display: flex;
        flex-direction: column;
        background: linear-gradient(165deg, #0d4f4f 0%, #083a3a 75%);
        box-shadow: -24px 0 60px rgba(0,0,0,0.35);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
                    visibility 0s linear 0.32s;
        z-index: 1200;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .main-nav::before {
        content: "";
        position: absolute;
        top: -90px;
        right: -90px;
        width: 260px;
        height: 260px;
        background: radial-gradient(circle, rgba(255,107,74,0.18), transparent 70%);
        pointer-events: none;
    }

    .main-nav.nav-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
    }

    /* Dark, blurred backdrop behind the drawer */
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(5,30,30,0.55);
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s ease, visibility 0s linear 0.28s;
        z-index: 1150;
    }

    .nav-overlay.is-open {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.28s ease;
    }

    /* Drawer header — small "Menu" label + close button, so the
       drawer reads as a designed panel instead of a lone floating X */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 20px 16px;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        position: relative;
        z-index: 1;
    }

    .nav-drawer-title {
        font-size: 12.5px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: rgba(255,255,255,0.5);
    }

    .nav-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: static;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.1);
        color: #fff;
        font-size: 15px;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
    }

    .nav-close:active {
        transform: scale(0.85);
        background: rgba(255,255,255,0.2);
    }

    .nav-pill {
        flex-direction: column;
        background: transparent;
        padding: 22px 16px 14px;
        gap: 2px;
        width: 100%;
        max-width: none;
        position: relative;
        z-index: 1;
    }

    .nav-link {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 16px;
        text-align: left;
        color: rgba(255,255,255,0.68);
        font-size: 16.5px;
        font-weight: 600;
        padding: 15px 14px;
        border-radius: 14px;
        position: relative;
        transition: background 0.2s ease, color 0.2s ease;

        /* Staggered entrance -- resting state; the keyframe below
           plays only while the drawer is open. */
        opacity: 0;
        transform: translateX(16px);
    }

    /* Thin divider between rows -- gives the list structure without
       the boxed/cluttered look that a background chip per icon had. */
    .nav-link + .nav-link {
        border-top: 1px solid rgba(255,255,255,0.06);
    }

    .nav-link.active {
        border-top-color: transparent;
    }

    .nav-link.active + .nav-link {
        border-top-color: transparent;
    }

    /* Plain icon glyph, no background chip -- fixed width only, so
       labels still line up regardless of which icon's natural shape
       is wider (house vs. a circle, for example). */
    .nav-pill .nav-link-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 22px;
        font-size: 16px;
        color: rgba(255,255,255,0.4);
        transition: color 0.2s ease;
    }

    .nav-link span {
        line-height: 1;
    }

    .nav-link:hover,
    .nav-link:active {
        background: rgba(255,255,255,0.06);
        color: #ffffff;
    }

    .nav-link:hover .nav-link-icon,
    .nav-link:active .nav-link-icon {
        color: #ff8a6c;
    }

    .nav-link.active {
        background: linear-gradient(90deg, rgba(255,107,74,0.2), rgba(255,107,74,0.02));
        color: #ffffff;
        font-weight: 700;
    }

    .nav-link.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 20px;
        border-radius: 3px;
        background: #ff6b4a;
    }

    .nav-link.active .nav-link-icon {
        color: #ff8a6c;
    }

    @keyframes navLinkIn {
        from { opacity: 0; transform: translateX(16px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    .main-nav.nav-open .nav-pill .nav-link {
        animation: navLinkIn 0.36s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    .main-nav.nav-open .nav-pill .nav-link:nth-child(1) { animation-delay: 0.06s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(2) { animation-delay: 0.10s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(3) { animation-delay: 0.14s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(4) { animation-delay: 0.18s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(5) { animation-delay: 0.22s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(6) { animation-delay: 0.26s; }
    .main-nav.nav-open .nav-pill .nav-link:nth-child(7) { animation-delay: 0.30s; }

    .nav-mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: auto 18px 24px;
        padding: 15px 20px;
        background: linear-gradient(135deg, #ff6b4a, #e8552f);
        color: #ffffff;
        font-weight: 700;
        font-size: 15.5px;
        border-radius: 999px;
        text-decoration: none;
        box-shadow: 0 15px 35px rgba(255,107,74,0.35);
        position: relative;
        z-index: 1;
        transition: transform 0.15s ease;
    }

    .nav-mobile-cta:active {
        transform: scale(0.97);
    }

    /* Hide the floating WhatsApp button while the drawer is open --
       it would otherwise sit on top of the "Get a Quote" button. */
    .nav-is-open .devmixa-whatsapp {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
}