/**
 * ELFO Nav Behaviors — Frontend CSS
 * Classes toggled by nav-behaviors.js on scroll events.
 */

/* ── Shrink on scroll ──────────────────────────────────────────────────────── */

/* Compress vertical padding when scrolled */
[data-elfo-shrink="true"].elfo-nav--shrunk {
    padding-top:    8px !important;
    padding-bottom: 8px !important;
}

/* Scale logos down proportionally */
[data-elfo-shrink="true"].elfo-nav--shrunk img {
    max-height: 28px;
    width: auto;
    transition: max-height 0.35s ease;
}

/* ── bg-on-scroll=solid ────────────────────────────────────────────────────── */
/* When the user scrolls down, the nav gains a solid white background and a
   subtle shadow — regardless of its starting bg mode (transparent, glass, etc.) */

[data-elfo-bg-scroll="solid"].elfo-nav--scrolled {
    background:      rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow:      0 2px 24px rgba(0, 0, 0, 0.10);
}

/* Dark-glass variant: scrolled state uses a dark solid background */
[data-elfo-bg="glass-dark"][data-elfo-bg-scroll="solid"].elfo-nav--scrolled {
    background: rgba(15, 15, 15, 0.97) !important;
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* ── Smart contrast — light text (nav over dark section background) ─────────── */

.elfo-nav--light-text,
.elfo-nav--light-text a,
.elfo-nav--light-text button,
.elfo-nav--light-text [class*="elfo-btn"],
.elfo-nav--light-text nav,
.elfo-nav--light-text li {
    color: #ffffff !important;
}

/* Keep outline/ghost buttons legible */
.elfo-nav--light-text button[style*="border"],
.elfo-nav--light-text a[style*="border"] {
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Smart contrast — dark text (nav over light section background) ─────────── */

.elfo-nav--dark-text,
.elfo-nav--dark-text a,
.elfo-nav--dark-text button,
.elfo-nav--dark-text [class*="elfo-btn"],
.elfo-nav--dark-text nav,
.elfo-nav--dark-text li {
    color: #111111 !important;
}

/* ── Smart-hide transition (transform added inline by JS) ───────────────────── */

[data-elfo-pos="smart-hide"] {
    will-change: transform;
}