/* ============================

       HEADER / NAV — exact copy of index.html computed styles

    ============================ */

.site-header {

    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    background: rgba(10, 12, 15, 0.92);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid rgba(255, 77, 0, 0.15);

    padding-top: 0;
    /* overridden to 0 by inline style block in index.html */

}



.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}



.nav-wrap {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 84px;

    gap: 2rem;

}



/* Logo — exact inline style from index.html img tag */

.nav-logo {
    display: flex;
    align-items: center;
}



/* Nav links — style.css base */

.nav-links {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}

.nav-links>a {

    font-family: var(--font-display);

    font-weight: 600;

    font-size: 0.9rem;

    letter-spacing: 0.05em;

    color: var(--smoke);

    padding: 0.4rem 0.8rem;

    border-radius: 4px;

    transition: color 0.2s, background 0.2s;

}

.nav-links>a:hover,

.nav-links>a.active {
    color: var(--white);
    background: var(--steel);
}



/* Dropdown wrapper — v2.css */

.nav-item {

    position: relative;

    display: inline-block;

}

.nav-item>a {

    font-family: var(--font-display);

    font-weight: 600;

    font-size: 0.9rem;

    letter-spacing: 0.05em;

    color: var(--smoke);

    padding: 0.4rem 0.8rem;

    border-radius: 4px;

    transition: color 0.2s, background 0.2s;

    display: flex;

    align-items: center;

    gap: 0.3rem;

}

.nav-item>a:hover,

.nav-item>a.active {
    color: var(--white);
    background: var(--steel);
}



/* Dropdown arrow — v2.css */

.nav-item.has-dropdown>a::after {

    content: '▾';

    font-size: 0.7rem;

    color: var(--smoke);

    transition: transform 0.2s;

}

.nav-item.has-dropdown:hover>a::after {
    transform: rotate(180deg);
}



/* Dropdown panel — v2.css base, overridden by index.html inline style */

.nav-dropdown {

    display: none;

    position: absolute;

    top: 100%;
    /* index.html inline override: top:100% */

    padding-top: 12px;
    /* index.html inline override: padding-top:12px (gap bridge) */

    left: 0;

    min-width: 150px;

    background: var(--carbon);

    border: 1px solid rgba(255, 77, 0, 0.15);

    border-radius: 8px;

    padding: 12px 0.5rem 0.5rem;
    /* top padding acts as hover bridge */

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

    z-index: 1100;

    animation: dropIn 0.18s ease;

}

@keyframes dropIn {

    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

}

/* hover + focus-within — scoped to DIRECT child dropdown only, so hovering
   "Services" no longer also force-opens the nested Installation submenu */

.nav-item.has-dropdown:hover > .nav-dropdown,

.nav-item.has-dropdown:focus-within > .nav-dropdown {
    display: block;
}


/* ============================
   NESTED (FLYOUT) SUBMENU
   Services > Installation > For Home / For Business
   Narrower box, opens beside "Installation" only on its own hover
============================ */

.nav-dropdown .nav-item.has-dropdown {
    position: relative;
}

/* right-pointing arrow for the nested trigger */
.nav-dropdown .nav-item.has-dropdown > a::after {
    content: '▸';
}

.nav-dropdown .nav-item.has-dropdown:hover > a::after,
.nav-dropdown .nav-item.has-dropdown:focus-within > a::after {
    transform: rotate(90deg);
}

/* Flyout position + reduced width for the Installation submenu box */
.nav-dropdown .nav-item.has-dropdown > .nav-dropdown {
    top: -13px;
    left: 100%;
    padding-top: 0.5rem;
    padding-left: 6px;
    margin-left: 0;
    min-width: 140px;
}



.nav-dropdown a {

    display: block;

    padding: 0.55rem 0.9rem;

    font-family: var(--font-display);

    font-size: 0.88rem;

    font-weight: 500;

    color: var(--smoke);

    border-radius: 5px;

    transition: all 0.15s;

    letter-spacing: 0.03em;

}

.nav-dropdown a:hover {
    color: var(--fire);
    background: rgba(255, 77, 0, 0.15);
}



/* CTA button */

.nav-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.btn-nav {

    background: var(--fire);

    color: #fff;

    font-family: var(--font-display);

    font-weight: 700;

    font-size: 0.85rem;

    letter-spacing: 0.05em;

    padding: 0.55rem 1.2rem;

    border-radius: 4px;

    white-space: nowrap;

    transition: all 0.2s;

    box-shadow: 0 0 12px rgba(255, 77, 0, 0.3);

    display: inline-block;

}

.btn-nav:hover {
    background: var(--fire-soft);
    box-shadow: var(--shadow-hot);
    transform: translateY(-1px);
    color: #fff;
}



/* Hamburger toggle */

.nav-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

    padding: 4px;

}

.nav-toggle span {

    width: 24px;
    height: 2px;

    background: var(--white);

    border-radius: 2px;

    transition: all 0.3s;

    display: block;

}



/* Mobile — style.css @640px breakpoint */

@media (max-width: 640px) {

    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

}

.nav-mobile-open .nav-links {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 84px;
    left: 0;
    right: 0;

    background: var(--ink);

    border-bottom: 1px solid rgba(200, 208, 220, 0.08);

    padding: 1rem 1.5rem;

    gap: 0.5rem;

    align-items: flex-start;

    z-index: 999;

}


/* ============================
   MOBILE NAV FIX
============================ */
@media (max-width: 900px) {
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .site-header.nav-mobile-open .nav-links {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid rgba(200, 208, 220, 0.08);
    padding: 1rem 1.5rem;
    gap: 0.5rem;
    align-items: flex-start;
    z-index: 999;
  }

  .site-header.nav-mobile-open .nav-links > a,
  .site-header.nav-mobile-open .nav-item > a {
    width: 100%;
    padding: 0.75rem 0.8rem;
  }

  .nav-item {
    width: 100%;
  }

  .nav-item.has-dropdown > a {
    justify-content: space-between;
  }

  .nav-dropdown {
    position: static;
    display: none;
    width: 100%;
    min-width: 100%;
    margin-top: 0.35rem;
    padding: 0.4rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    box-shadow: none;
    animation: none;
  }

  /* Scoped to DIRECT child only — tapping "Services" no longer also
     force-opens the nested Installation submenu underneath it. */
  .nav-item.has-dropdown.mobile-open > .nav-dropdown {
    display: block;
  }

  .nav-item.has-dropdown.mobile-open > a::after {
    transform: rotate(180deg);
  }

  /* Nested (Installation → For Home / For Business) becomes an indented,
     narrower block on mobile instead of full width, and stays hidden
     until "Installation" itself is tapped. */
  .nav-dropdown .nav-item.has-dropdown > .nav-dropdown {
    top: auto;
    left: auto;
    margin-left: 0;
    margin-top: 0.35rem;
    padding-left: 0.5rem;
    width: 85%;
    min-width: 0;
    border-left: 2px solid rgba(255, 77, 0, 0.25);
  }
}