/* ─────────────────────────────────────────────────────────────
   ETS Mega Menu — CSS
   Custom properties are injected by the module via hookDisplayHeader
   ───────────────────────────────────────────────────────────── */

/* ── CSS custom properties defaults ─────────────────────────── */
:root {
    --ets-accent:        #d4621a;
    --ets-accent-hover:  #b8510f;
    --ets-nav-bg:        #333333;
    --ets-sidebar-w:     280px;
    --ets-flyout-w:      860px;
    --ets-flyout-cols:   4;
    --ets-text-light:    #ffffff;
    --ets-text-muted:    rgba(255,255,255,0.65);
    --ets-transition:    180ms ease;
    --ets-z-nav:         500;
    --ets-z-flyout:      510;
    --ets-z-overlay:     900;
    --ets-z-backdrop:    890;
}

/* ── Base ────────────────────────────────────────────────────── */
.ets-megamenu *,
.ets-megamenu *::before,
.ets-megamenu *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.ets-megamenu {
    position: relative;
    background: var(--ets-nav-bg);
    z-index: var(--ets-z-nav);
    font-size: 0.9rem;
}

.ets-megamenu a {
    text-decoration: none;
    color: inherit;
}

/* ── Tab bar ─────────────────────────────────────────────────── */
.ets-tabs {
    display: flex;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ets-tabs::-webkit-scrollbar { display: none; }

.ets-tab-btn {
    background: transparent;
    border: none;
    color: var(--ets-text-muted);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color var(--ets-transition), border-color var(--ets-transition);
}

.ets-tab-btn:hover,
.ets-tab-btn.is-active {
    color: var(--ets-text-light);
    border-bottom-color: var(--ets-accent);
}

/* ── Panels ──────────────────────────────────────────────────── */
.ets-panel {
    display: none;
}
.ets-panel.is-active {
    display: block;
}

/* ── Sidebar + Flyout wrapper ────────────────────────────────── */
.ets-sidebar-flyout {
    display: flex;
    position: relative;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.ets-sidebar {
    list-style: none;
    width: var(--ets-sidebar-w);
    flex-shrink: 0;
    background: rgba(0,0,0,0.15);
}

.ets-sidebar-item {
    position: relative;
}

.ets-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    color: var(--ets-text-muted);
    transition: background var(--ets-transition), color var(--ets-transition);
}

.ets-sidebar-link:hover,
.ets-sidebar-item.is-open > .ets-sidebar-link {
    background: var(--ets-accent);
    color: var(--ets-text-light);
}

.ets-icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ets-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.ets-sidebar-label {
    flex: 1;
}

.ets-chevron {
    margin-left: auto;
    opacity: 0.6;
    font-size: 1.1em;
    transition: transform var(--ets-transition);
}
.ets-sidebar-item.is-open > .ets-sidebar-link .ets-chevron {
    transform: rotate(90deg);
}

/* ── Flyout ──────────────────────────────────────────────────── */
.ets-flyout {
    display: none;
    position: absolute;
    left: var(--ets-sidebar-w);
    top: 0;
    width: calc(var(--ets-flyout-w) - var(--ets-sidebar-w));
    min-height: 100%;
    background: #fff;
    box-shadow: 4px 4px 16px rgba(0,0,0,0.15);
    z-index: var(--ets-z-flyout);
    overflow-y: auto;
}

.ets-sidebar-item.is-open > .ets-flyout {
    display: block;
}

.ets-flyout-inner {
    display: grid;
    grid-template-columns: repeat(var(--ets-flyout-cols), 1fr);
    gap: 1.5rem;
    padding: 1.25rem;
}

.ets-flyout-heading {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: #222;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ets-accent);
    transition: color var(--ets-transition);
}
.ets-flyout-heading:hover {
    color: var(--ets-accent-hover);
}

.ets-flyout-list {
    list-style: none;
}

.ets-flyout-link {
    display: block;
    padding: 0.3rem 0;
    color: #555;
    font-size: 0.875rem;
    transition: color var(--ets-transition), padding-left var(--ets-transition);
}
.ets-flyout-link:hover {
    color: var(--ets-accent);
    padding-left: 0.35rem;
}

/* ── Mobile hamburger ────────────────────────────────────────── */
.ets-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.ets-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ets-text-light);
    border-radius: 2px;
    transition: transform var(--ets-transition), opacity var(--ets-transition);
}
.ets-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ets-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ets-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile overlay ──────────────────────────────────────────── */
.ets-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: min(340px, 100vw);
    height: 100%;
    background: #222;
    color: #eee;
    z-index: var(--ets-z-overlay);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ets-mobile-overlay.is-open {
    transform: translateX(0);
}

.ets-overlay-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: var(--ets-z-backdrop);
    opacity: 0;
    transition: opacity 280ms;
}
.ets-overlay-backdrop.is-open {
    opacity: 1;
}

.ets-mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.ets-mobile-title {
    font-weight: 700;
    font-size: 1rem;
}
.ets-mobile-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px 8px;
}

.ets-mobile-tab-section {
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ets-mobile-tab-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: transparent;
    border: none;
    color: #ddd;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.8rem 1.25rem;
    cursor: pointer;
    text-align: left;
    gap: 0.5rem;
}
.ets-mobile-tab-toggle:hover { background: rgba(255,255,255,0.06); }
.ets-mobile-chevron { margin-left: auto; transition: transform var(--ets-transition); }
.ets-mobile-tab-toggle[aria-expanded="true"] .ets-mobile-chevron { transform: rotate(90deg); }

.ets-mobile-items { list-style: none; }

.ets-mobile-link,
.ets-mobile-sublink,
.ets-mobile-leaflink {
    display: block;
    color: #ccc;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    transition: color var(--ets-transition), background var(--ets-transition);
}
.ets-mobile-link { padding-left: 2rem; font-weight: 500; }
.ets-mobile-sublink { padding-left: 3rem; }
.ets-mobile-leaflink { padding-left: 4rem; color: #aaa; }

.ets-mobile-link:hover,
.ets-mobile-sublink:hover,
.ets-mobile-leaflink:hover {
    color: var(--ets-accent);
    background: rgba(255,255,255,0.04);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ets-nav-inner { display: none; }
    .ets-hamburger { display: flex; }
    .ets-mobile-overlay { display: block; }
    .ets-overlay-backdrop { display: block; }
}