/* =====================================================================
   Additional Services — header mega-menu (desktop) + drawer accordion (mobile)
   Layers on top of rgz-shell.css. Uses the brand tokens with hard fallbacks
   so it renders correctly even if a token is missing. Purely additive:
   nothing here touches the existing nav links.
   ===================================================================== */

/* ---- Desktop trigger (sits inside .nav, styled like a .nav-link) ---- */
.nav-mega-wrap { display: inline-flex; align-items: center; }
.nav-mega-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--text-secondary, #6B6B6B);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s var(--ease, ease);
}
.nav-mega-btn:hover,
.nav-mega-wrap.is-open .nav-mega-btn,
.nav-mega-btn.active { color: var(--accent-orange, #FF6B35); }
.nav-mega-caret {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s var(--ease, ease);
}
.nav-mega-wrap.is-open .nav-mega-caret { transform: rotate(180deg); }

/* ---- Desktop panel: full-width dropdown anchored under the sticky header ---
   .nav-mega-wrap is deliberately NOT positioned, so this absolute box resolves
   against .header (position: sticky = a containing block). Full width keeps it
   on-screen at every desktop size; the inner panel centres the columns. */
.nav-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1200;
    background: var(--bg-white, #FFFFFF);
    border-top: 1px solid var(--border-light, #EAEAEA);
    border-bottom: 1px solid var(--border-light, #EAEAEA);
    box-shadow: 0 24px 48px -18px rgba(15, 23, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s var(--ease, ease), transform 0.2s var(--ease, ease), visibility 0.2s;
}
.nav-mega-wrap.is-open .nav-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-mega-panel {
    max-width: 1100px;
    margin: 0 auto;
    padding: 26px clamp(20px, 4vw, 40px) 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px 30px;
}
.nav-mega-col { min-width: 0; }
.nav-mega-title {
    display: block;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-orange, #FF6B35);
    padding: 0 8px;
    margin-bottom: 6px;
}
.nav-mega-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    border-radius: var(--radius-md, 10px);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #1A1A1A);
    transition: background 0.15s var(--ease, ease), color 0.15s var(--ease, ease);
}
.nav-mega-item:hover,
.nav-mega-item:focus-visible {
    background: var(--accent-orange-light, #FFF0EB);
    color: var(--accent-orange-hover, #E85A28);
    outline: none;
}
.nav-mega-chev {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    stroke: var(--accent-orange, #FF6B35);
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.15s var(--ease, ease);
}
.nav-mega-item:hover .nav-mega-chev { transform: translateX(2px); }
/* Current page (2026-09-07 audit): the trigger lit up on a service page but the
   page's own row inside the panel did not, so the visitor had no way to see
   which of the 17 they were on. header.php marks it .active + aria-current. */
.nav-mega-item.active,
.mobile-acc-item.active {
    background: var(--accent-orange-light, #FFF0EB);
    color: var(--accent-orange-hover, #E85A28);
    font-weight: 600;
}

/* Tighten the primary nav a touch when the 6-item row gets close to the
   hamburger breakpoint, so nothing wraps between 901px and ~1000px. */
@media (max-width: 1000px) {
    .nav-mega-btn { font-size: 13px; }
}

/* The desktop mega-menu never shows once the drawer takes over. */
@media (max-width: 900px) {
    .nav-mega-wrap { display: none; }
}

/* ---- Mobile: accordion row inside the slide-in drawer ---- */
.mobile-acc { display: block; }
.mobile-acc-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}
.mobile-acc-caret {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.25s var(--ease, ease);
}
.mobile-acc.is-open .mobile-acc-btn { color: var(--accent-orange, #FF6B35); }
.mobile-acc.is-open .mobile-acc-caret { transform: rotate(180deg); }

.mobile-acc-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s var(--ease, ease);
}
.mobile-acc.is-open .mobile-acc-panel { max-height: 1400px; }
.mobile-acc-inner { padding: 4px 0 8px 6px; }
.mobile-acc-title {
    display: block;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-orange, #FF6B35);
    padding: 10px 12px 4px;
}
.mobile-acc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary, #1A1A1A);
    border-radius: var(--radius-md, 10px);
}
.mobile-acc-item::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-orange, #FF6B35);
    opacity: 0.55;
}
.mobile-acc-item:hover,
.mobile-acc-item:active {
    background: var(--accent-orange-light, #FFF0EB);
    color: var(--accent-orange-hover, #E85A28);
}

/* ---- Drawer open: hide the live-chat launcher (2026-09-07 audit) ----
   #rgChatRoot (js/live-chat.js) sits at z-index 2147483000, above the drawer
   (100001), so on phones the orange launcher floated over the accordion items
   and squarely over the drawer's "Get Started" button. The drawer is a modal
   dialog; nothing else should be tappable while it is open. Two selectors:
   the sibling form works everywhere today (live-chat.js appends its root to
   <body>, after the drawer), :has() covers any future DOM order. */
.mobile-nav.active ~ #rgChatRoot,
body:has(.mobile-nav.active) #rgChatRoot { visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
    .nav-mega, .nav-mega-caret, .nav-mega-chev,
    .mobile-acc-caret, .mobile-acc-panel { transition: none; }
}