/* 
 * Websly Ultra-Modern Navbar Styles (v5.1)
 * High-performance visual effects for premium navigation components.
 */

/* --- 1. Navbar Styles --- */

/* Neon Wide */
.websly-nav-neon {
    border-bottom: 2px solid var(--theme-accent);
    box-shadow: 0 4px 20px -5px rgba(var(--theme-accent-rgb), 0.4);
    transition: box-shadow 0.6s ease, border-color 0.6s ease;
}

#navbar.scrolled.websly-nav-neon {
    box-shadow: 0 10px 40px -10px rgba(var(--theme-accent-rgb), 0.6);
}

/* Kinetic Minimalist */
.websly-nav-kinetic {
    backdrop-filter: blur(0px); /* Transition to blur on scroll */
}

#navbar.scrolled.websly-nav-kinetic {
    backdrop-filter: blur(20px);
    background: color-mix(in srgb, var(--bg-theme-base) 80%, transparent);
}

/* --- Smart Hide Hiding State --- */
/* --- Smart Hide Hiding Styles (v5.1.2) --- */

/* Base hidden state - Slide (Default) */
#navbar.nav-hidden {
    transform: translateY(-115%) !important;
    pointer-events: none !important;
    opacity: 0.85; /* Subtle ghosting to prevent harsh blink */
}

/* Vertical Fade */
#navbar[data-smart-hide-anim="fade"].nav-hidden {
    transform: translateY(-20px) !important;
    opacity: 0 !important;
}

/* Scale Shrink */
#navbar[data-smart-hide-anim="shrink"].nav-hidden {
    transform: scale(0.95) translateY(-20px) !important;
    opacity: 0 !important;
}

/* Blur Dissolve (Premium) */
#navbar[data-smart-hide-anim="blur"].nav-hidden {
    filter: blur(12px) !important;
    transform: translateY(-10px) !important;
    opacity: 0 !important;
}

/* Creative Bend */
#navbar[data-smart-hide-anim="creative"].nav-hidden {
    transform: translateY(-115%) skewY(2deg) !important;
    opacity: 0.5 !important;
}

/* --- 2. Menu Item Hover Animations --- */

.websly-nav-links-wrap li {
    position: relative;
    list-style: none;
}

/* Base nav link — clean text, no chrome at rest.
   Explicitly resets background/border from any button class that may be
   applied via the customizer (e.g. btn-soft saved from a previous default).
   Opacity 0.75 at rest keeps links visually lighter than headings;
   full opacity on hover signals interactivity without any colour change.
*/
.websly-nav-link {
    display: flex;
    align-items: center;
    padding: 0.45rem 1.25rem;
    position: relative;
    isolation: isolate;
    z-index: 1;
    color: inherit !important;
    text-decoration: none;
    border-radius: 999px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.websly-nav-link-inner {
    position: relative;
    z-index: 1;
}

.websly-nav-link:hover {
    opacity: 1;
    background: none !important;
}

/* Active page — full opacity, no colour override */
.websly-nav-links-wrap .current-menu-item > .websly-nav-link,
.websly-nav-links-wrap .current-page-ancestor > .websly-nav-link {
    opacity: 1;
}

/* ── Magnet Pill Glow (opt-in) ────────────────────────────────────────────
   Now driven by the customizer's "Menu Item Hover Animation" → "Magnet Pill Glow".
   Previously rendered always-on via a class — now strictly opt-in.
   Uses currentColor so the pill is always visible regardless of dark/light surface.
   Separate in/out transitions: spring on enter, ease-out on leave.
*/
[data-nav-hover-primary="magnet-pill-glow"] .websly-nav-link::before,
[data-nav-hover-secondary="magnet-pill-glow"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    opacity: 0;
    transform: scale(0.82);
    /* Mouse-out: fast ease-out — no spring bounce on exit */
    transition: opacity 0.18s ease-out, transform 0.2s ease-out;
    z-index: 0;
}

[data-nav-hover-primary="magnet-pill-glow"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="magnet-pill-glow"] .websly-nav-link:hover::before {
    opacity: 1;
    transform: scale(1);
    /* Mouse-in: spring — feels magnetic and alive */
    transition: opacity 0.18s ease-in, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Menu Item Hover Color ────────────────────────────────────────────────
   Shifts the link text color on hover to a chosen palette token.
   Active (current page) links are excluded so the indicator wins.
*/
[data-nav-hover-color="accent"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover    { color: var(--theme-accent) !important; }
[data-nav-hover-color="primary"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover   { color: var(--theme-primary) !important; }
[data-nav-hover-color="secondary"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover { color: var(--theme-secondary) !important; }
[data-nav-hover-color="tertiary"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover  { color: var(--theme-tertiary) !important; }
[data-nav-hover-color="white"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover     { color: #ffffff !important; }
[data-nav-hover-color="black"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover     { color: #000000 !important; }
[data-nav-hover-color="muted"] .websly-nav-link:not(.current-menu-item .websly-nav-link):hover     { color: var(--text-muted) !important; }

/* ── Current Page Link Indicator ──────────────────────────────────────────
   Driven by data-nav-current-indicator. Decoupled from the hover animation
   so the active page can be marked independently of any hover behavior.
*/

/* Underline */
[data-nav-current-indicator="underline"] .current-menu-item > .websly-nav-link::after,
[data-nav-current-indicator="underline"] .current-page-ancestor > .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 1.5px;
    background: currentColor;
    opacity: 0.9;
    border-radius: 99px;
}

/* Overline */
[data-nav-current-indicator="overline"] .current-menu-item > .websly-nav-link::before,
[data-nav-current-indicator="overline"] .current-page-ancestor > .websly-nav-link::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 20%;
    width: 60%;
    height: 1.5px;
    background: currentColor;
    opacity: 0.9;
    border-radius: 99px;
}

/* Dot */
[data-nav-current-indicator="dot"] .current-menu-item > .websly-nav-link::after,
[data-nav-current-indicator="dot"] .current-page-ancestor > .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--theme-accent);
}

/* Magnet Pill — soft neutral pill behind text */
[data-nav-current-indicator="magnet-pill"] .current-menu-item > .websly-nav-link::before,
[data-nav-current-indicator="magnet-pill"] .current-page-ancestor > .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    z-index: 0;
}

/* Accent Pill — solid accent background */
[data-nav-current-indicator="accent-pill"] .current-menu-item > .websly-nav-link::before,
[data-nav-current-indicator="accent-pill"] .current-page-ancestor > .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--theme-accent);
    opacity: 0.85;
    z-index: 0;
}
[data-nav-current-indicator="accent-pill"] .current-menu-item > .websly-nav-link,
[data-nav-current-indicator="accent-pill"] .current-page-ancestor > .websly-nav-link {
    color: #ffffff !important;
}

/* Glow — soft accent halo behind text */
[data-nav-current-indicator="glow"] .current-menu-item > .websly-nav-link::before,
[data-nav-current-indicator="glow"] .current-page-ancestor > .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: -4px -8px;
    background: radial-gradient(circle, color-mix(in srgb, var(--theme-accent) 35%, transparent) 0%, transparent 70%);
    filter: blur(6px);
    z-index: 0;
    border-radius: 999px;
}

/* Accent Text Color */
[data-nav-current-indicator="accent-text"] .current-menu-item > .websly-nav-link,
[data-nav-current-indicator="accent-text"] .current-page-ancestor > .websly-nav-link {
    color: var(--theme-accent) !important;
}

/* Brackets [ ] */
[data-nav-current-indicator="bracketed"] .current-menu-item > .websly-nav-link .websly-nav-link-inner::before,
[data-nav-current-indicator="bracketed"] .current-page-ancestor > .websly-nav-link .websly-nav-link-inner::before {
    content: "[";
    position: absolute;
    left: -10px;
    opacity: 0.6;
}
[data-nav-current-indicator="bracketed"] .current-menu-item > .websly-nav-link .websly-nav-link-inner::after,
[data-nav-current-indicator="bracketed"] .current-page-ancestor > .websly-nav-link .websly-nav-link-inner::after {
    content: "]";
    position: absolute;
    right: -10px;
    opacity: 0.6;
}

/* Strikethrough */
[data-nav-current-indicator="strikethrough"] .current-menu-item > .websly-nav-link .websly-nav-link-inner::before,
[data-nav-current-indicator="strikethrough"] .current-page-ancestor > .websly-nav-link .websly-nav-link-inner::before {
    content: "";
    position: absolute;
    top: 55%;
    left: -5%;
    width: 110%;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   14. ULTRA-MODERN LAYOUTS & INTERACTION ENGINES (v5.1.2)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Gliding Marker Styles ──────────────────────────────────────────────────── */
.websly-nav-marker {
    background: var(--theme-accent);
    height: 2px;
    bottom: -4px;
    border-radius: 999px;
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-nav-animation="pill-glide"] .websly-nav-marker {
    height: 32px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(var(--text-theme-text-rgb), 0.08);
    backdrop-filter: blur(8px);
    z-index: -1;
}

[data-nav-animation="background-glow"] .websly-nav-marker {
    height: 48px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(var(--theme-accent-rgb), 0.15) 0%, transparent 70%);
    filter: blur(12px);
    z-index: -1;
}

[data-nav-animation="elastic-pill"] .websly-nav-marker {
    height: 38px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--theme-accent) 25%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    z-index: -1;
    box-shadow: 0 8px 20px -5px rgba(0, 0, 0, 0.15);
}

[data-nav-animation="dot-runner"] .websly-nav-marker {
    width: 6px !important;
    height: 6px;
    bottom: 4px;
    background: var(--theme-accent);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 12px var(--theme-accent);
    transform: translateX(-3px);
}

[data-nav-animation="liquid-slide"] .websly-nav-marker {
    height: 34px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    background: var(--theme-accent);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.12;
}

[data-nav-animation="luxe-expand"] .websly-nav-marker {
    height: 3px;
    bottom: -2px;
    background: linear-gradient(to right, transparent, var(--theme-accent), transparent);
    border-radius: 999px;
}

/* ── Layout: Split Logo Center ──────────────────────────────────────────────── */
#navbar[data-nav-width="split-logo-center"] {
    display: grid !important;
    grid-template-cols: 1fr auto 1fr !important;
}

/* ── Layout: Agency Sidebar ─────────────────────────────────────────────────── */
#navbar[data-nav-width="agency-sidebar"] {
    width: 80px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    background: rgba(var(--bg-theme-base-rgb), 0.95);
    backdrop-filter: blur(20px);
}
#navbar[data-nav-width="agency-sidebar"]:hover {
    width: 260px;
}
#navbar[data-nav-width="agency-sidebar"] .websly-nav-container ul {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 20px;
}
#navbar[data-nav-width="agency-sidebar"] .websly-nav-link-inner {
    opacity: 0;
    transition: opacity 0.3s ease;
}
#navbar[data-nav-width="agency-sidebar"]:hover .websly-nav-link-inner {
    opacity: 1;
}

/* ── 2. Menu Item Interaction Engines (v5.2 Overhaul) ── */

/* ── Primary Interaction: Underscore (Default) ───────────────────────── */
[data-nav-hover-primary="kinetic-underscore"] .websly-nav-link::after,
[data-nav-hover-secondary="kinetic-underscore"] .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    transition: width 0.32s cubic-bezier(0.8, 0, 0.2, 1), left 0.32s cubic-bezier(0.8, 0, 0.2, 1);
    border-radius: 99px;
}
[data-nav-hover-primary="kinetic-underscore"] .websly-nav-link:hover::after,
[data-nav-hover-secondary="kinetic-underscore"] .websly-nav-link:hover::after {
    width: 60%;
    left: 20%;
    opacity: 0.9;
}

/* ── Primary Interaction: Ambient Pulse ─────────────────────────────────── */
[data-nav-hover-primary="ambient-pulse"] .websly-nav-link::before,
[data-nav-hover-secondary="ambient-pulse"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    z-index: -1;
    border-radius: 8px;
    filter: blur(14px);
}
[data-nav-hover-primary="ambient-pulse"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="ambient-pulse"] .websly-nav-link:hover::before {
    opacity: 0.08;
    transform: scale(1.15);
}

/* ── Primary Interaction: Overline ──────────────────────────────────── */
[data-nav-hover-primary="kinetic-overline"] .websly-nav-link::before,
[data-nav-hover-secondary="kinetic-overline"] .websly-nav-link::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 0%;
    height: 1.5px;
    background: currentColor;
    opacity: 0.5;
    transition: width 0.32s cubic-bezier(0.8, 0, 0.2, 1), left 0.32s cubic-bezier(0.8, 0, 0.2, 1);
    border-radius: 99px;
}
[data-nav-hover-primary="kinetic-overline"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="kinetic-overline"] .websly-nav-link:hover::before {
    width: 60%;
    left: 20%;
    opacity: 0.9;
}

/* ── Primary Interaction: Brackets ──────────────────────────────────── */
[data-nav-hover-primary="kinetic-brackets"] .websly-nav-link-inner::before,
[data-nav-hover-secondary="kinetic-brackets"] .websly-nav-link-inner::before {
    content: "[";
    position: absolute;
    left: -12px;
    opacity: 0;
    transform: translateX(5px);
    transition: all 0.3s ease;
}
[data-nav-hover-primary="kinetic-brackets"] .websly-nav-link-inner::after,
[data-nav-hover-secondary="kinetic-brackets"] .websly-nav-link-inner::after {
    content: "]";
    position: absolute;
    right: -12px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
}
[data-nav-hover-primary="kinetic-brackets"] .websly-nav-link:hover .websly-nav-link-inner::before,
[data-nav-hover-secondary="kinetic-brackets"] .websly-nav-link:hover .websly-nav-link-inner::before {
    opacity: 0.4;
    transform: translateX(0);
}
[data-nav-hover-primary="kinetic-brackets"] .websly-nav-link:hover .websly-nav-link-inner::after,
[data-nav-hover-secondary="kinetic-brackets"] .websly-nav-link:hover .websly-nav-link-inner::after {
    opacity: 0.4;
    transform: translateX(0);
}

/* ── Primary Interaction: Double Edge ───────────────────────────────── */
[data-nav-hover-primary="kinetic-double"] .websly-nav-link::before,
[data-nav-hover-primary="kinetic-double"] .websly-nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0%;
    height: 1px;
    background: currentColor;
    opacity: 0.4;
    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-nav-hover-primary="kinetic-double"] .websly-nav-link::before { top: 0; }
[data-nav-hover-primary="kinetic-double"] .websly-nav-link::after  { bottom: 0; }
[data-nav-hover-primary="kinetic-double"] .websly-nav-link:hover::before,
[data-nav-hover-primary="kinetic-double"] .websly-nav-link:hover::after {
    width: 80%;
    left: 10%;
}

/* ── Primary Interaction: Strikethrough ─────────────────────────────── */
[data-nav-hover-primary="kinetic-strike"] .websly-nav-link-inner::before {
    content: "";
    position: absolute;
    top: 55%;
    left: -5%;
    width: 0;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: width 0.35s ease, opacity 0.3s ease;
}
[data-nav-hover-primary="kinetic-strike"] .websly-nav-link:hover .websly-nav-link-inner::before {
    width: 110%;
    opacity: 0.4;
}

/* ── ✨ 3. BACKGROUND EFFECTS (Decoupled v5.2) ───────────────────────────── */

/* ── Background / Glow Effects (v5.3 unified)
   Fire when the Primary or Secondary hover slot selects these. The old
   separate "Item Hover Background Effect" control was merged into those
   two slots, so there is a single authority per slot.
*/

/* Aura Glow (Faded Edges) */
[data-nav-hover-primary="aura-faded"] .websly-nav-link::before,
[data-nav-hover-secondary="aura-faded"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: -5px -10px;
    background: radial-gradient(circle, color-mix(in srgb, currentColor 15%, transparent) 0%, transparent 75%);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 0;
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 85%);
    mask-image: radial-gradient(circle, black 40%, transparent 85%);
}
[data-nav-hover-primary="aura-faded"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="aura-faded"] .websly-nav-link:hover::before {
    opacity: 1;
    transform: scale(1.1);
}

/* Mist Trace (Subtle Fog) */
[data-nav-hover-primary="mist-faded"] .websly-nav-link::before,
[data-nav-hover-secondary="mist-faded"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, currentColor 10%, transparent);
    filter: blur(12px);
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.4s ease;
    z-index: 0;
    border-radius: 999px;
}
[data-nav-hover-primary="mist-faded"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="mist-faded"] .websly-nav-link:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* Frost Bloom (Blurred Glass) */
[data-nav-hover-primary="frost-bloom-faded"] .websly-nav-link::before,
[data-nav-hover-secondary="frost-bloom-faded"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 2px 2px;
    background: rgba(var(--text-theme-text-rgb), 0.04);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    box-shadow: 0 0 15px color-mix(in srgb, currentColor 10%, transparent);
}
[data-nav-hover-primary="frost-bloom-faded"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="frost-bloom-faded"] .websly-nav-link:hover::before {
    opacity: 1;
}

/* Shadow Bloom (Soft Halo) */
[data-nav-hover-primary="shadow-bloom-faded"] .websly-nav-link:hover,
[data-nav-hover-secondary="shadow-bloom-faded"] .websly-nav-link:hover {
    text-shadow: 0 0 12px color-mix(in srgb, currentColor 40%, transparent);
}

/* Accent Halo (Feathered Ring) */
[data-nav-hover-primary="accent-halo-faded"] .websly-nav-link::before,
[data-nav-hover-secondary="accent-halo-faded"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--theme-accent);
    border-radius: 999px;
    opacity: 0;
    filter: blur(8px);
    transform: scale(0.9);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}
[data-nav-hover-primary="accent-halo-faded"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="accent-halo-faded"] .websly-nav-link:hover::before {
    opacity: 0.6;
    transform: scale(1.15);
}

/* Accent Pill (solid accent background) */
[data-nav-hover-primary="accent-pill"] .websly-nav-link::before,
[data-nav-hover-secondary="accent-pill"] .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--theme-accent);
    border-radius: 999px;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}
[data-nav-hover-primary="accent-pill"] .websly-nav-link:hover::before,
[data-nav-hover-secondary="accent-pill"] .websly-nav-link:hover::before {
    opacity: 0.9;
    transform: scale(1);
}
[data-nav-hover-primary="accent-pill"] .websly-nav-link:hover,
[data-nav-hover-secondary="accent-pill"] .websly-nav-link:hover {
    color: #ffffff !important;
}

/* --- 3. Interaction Mechanics (JavaScript Driven) --- */

/* Scrolled state for all navbars */
#navbar.scrolled {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.1);
}
/* Blade keeps compact padding even when scrolled */
#navbar.scrolled.ws-shape-blade {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* Pill Capsule specific transition */
#navbar[data-nav-style="pill-capsule"].scrolled {
    width: 85% !important;
    border-radius: 999px !important;
}

/* --- 4. 5.1 Surface Engine Bridges --- */

/* Material Overrides */
.ws-mat-glass,
.ws-mat-glass-3d,
.ws-mat-is-forced.ws-mat-glass,
.ws-mat-is-forced.ws-mat-glass-3d {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.ws-mat-solid,
.ws-mat-is-forced.ws-mat-solid {
    backdrop-filter: none;
    background: rgba(var(--bg-theme-surface-rgb, 255, 255, 255), 0.98) !important;
}

.ws-mat-transparent,
.ws-mat-is-forced.ws-mat-transparent {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Detached Bar Inner Styles */
.ws-mat-detached {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    pointer-events: auto;
}
.websly-nav-container.ws-mat-detached {
    transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Tone Overrides */
.ws-tone-accent {
    --text-theme-text-rgb: 255, 255, 255;
    background-color: var(--theme-accent) !important;
    color: var(--text-on-accent) !important;
}

/* ── Frame color token ───────────────────────────────────────────────────────
   --nav-frame-color is set as an inline CSS var on the <nav> element by PHP
   (navbar.php) based on the websly_navbar_frame_color customizer setting.
   Fallback: var(--theme-accent) so it always works even without customizer.
   All accent/glow/neon/gradient frames read from this single token.
   Neutral frames use currentColor so they always contrast with the navbar text.
*/

/* Frame Overrides — neutral (currentColor, always readable) */
.ws-frame-none        { border: none !important; }
.ws-frame-subtle      { border: 1px solid color-mix(in srgb, currentColor 9%,  transparent) !important; }
.ws-frame-strong      { border: 2px solid color-mix(in srgb, currentColor 22%, transparent) !important; }
.ws-frame-thick       { border: 3px solid color-mix(in srgb, currentColor 28%, transparent) !important; }
.ws-frame-thick-heavy { border: 4px solid color-mix(in srgb, currentColor 36%, transparent) !important; }

/* Frame Overrides — themed color (uses --nav-frame-color) */
.ws-frame-accent {
    border: 1px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 55%, transparent) !important;
}
.ws-frame-accent-strong {
    border: 2px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 75%, transparent) !important;
}
.ws-frame-accent-thick {
    border: 3px solid var(--nav-frame-color, var(--theme-accent)) !important;
}
.ws-frame-accent-heavy {
    border: 4px solid var(--nav-frame-color, var(--theme-accent)) !important;
}
.ws-frame-accent-bottom {
    border: none !important;
    border-bottom: 2px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 65%, transparent) !important;
}
.ws-frame-accent-bottom-thick {
    border: none !important;
    border-bottom: 3px solid var(--nav-frame-color, var(--theme-accent)) !important;
}
.ws-frame-accent-bottom-glow {
    border: none !important;
    border-bottom: 2px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 80%, transparent) !important;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 45%, transparent),
                0 1px 6px  color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 60%, transparent) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. PREMIUM MATERIAL VARIANTS
   Each adds backdrop, background, and shadow. Applied via ws-mat-{slug}.
   ───────────────────────────────────────────────────────────────────────────── */

/* Glass Frost — heavy blur, maximum frosting. Great over images/video heroes. */
.ws-mat-glass-frost,
.ws-mat-is-forced.ws-mat-glass-frost {
    backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
    -webkit-backdrop-filter: blur(48px) saturate(220%) brightness(1.08);
    background: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] .ws-mat-glass-frost,
.dark .ws-mat-glass-frost,
[data-theme="dark"] .ws-mat-is-forced.ws-mat-glass-frost,
.dark .ws-mat-is-forced.ws-mat-glass-frost {
    background: rgba(0, 0, 0, 0.28) !important;
}

/* Glass Silk — feather-light blur. Barely-there, ultra-refined. */
.ws-mat-glass-silk,
.ws-mat-is-forced.ws-mat-glass-silk {
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset;
}
[data-theme="dark"] .ws-mat-glass-silk,
.dark .ws-mat-glass-silk,
[data-theme="dark"] .ws-mat-is-forced.ws-mat-glass-silk,
.dark .ws-mat-is-forced.ws-mat-glass-silk {
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Glass Dark — smoked tinted glass. Strong dark contrast over any bg. */
.ws-mat-glass-dark,
.ws-mat-is-forced.ws-mat-glass-dark {
    backdrop-filter: blur(32px) saturate(180%) brightness(0.75);
    -webkit-backdrop-filter: blur(32px) saturate(180%) brightness(0.75);
    background: rgba(0, 0, 0, 0.42) !important;
    color: #fff !important;
    --text-theme-text-rgb: 255, 255, 255;
}

/* Glass Aurora — glass tinted with theme accent, slow breathing animation. */
.ws-mat-glass-aurora,
.ws-mat-is-forced.ws-mat-glass-aurora {
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(var(--theme-accent-rgb), 0.12) 0%,
        rgba(var(--accent-secondary-rgb, var(--theme-accent-rgb)), 0.07) 50%,
        rgba(var(--theme-accent-rgb), 0.04) 100%
    ) !important;
    background-size: 200% 200% !important;
    animation: ws-aurora-drift 10s ease infinite;
}

/* ── New Semantic Materials (v5.1 Expansion) ────────────────────────────── */

.ws-mat-solid-primary,
.ws-mat-is-forced.ws-mat-solid-primary {
    background-color: var(--theme-primary) !important;
    color: var(--text-on-primary, #fff) !important;
    backdrop-filter: none !important;
}

.ws-mat-solid-secondary,
.ws-mat-is-forced.ws-mat-solid-secondary {
    background-color: var(--theme-secondary) !important;
    color: var(--text-on-secondary, #fff) !important;
    backdrop-filter: none !important;
}

.ws-mat-glass-primary,
.ws-mat-is-forced.ws-mat-glass-primary {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    color: var(--theme-primary) !important;
}

.ws-mat-glass-secondary,
.ws-mat-is-forced.ws-mat-glass-secondary {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    background: rgba(var(--theme-secondary-rgb), 0.15) !important;
    color: var(--theme-secondary) !important;
}

.ws-mat-soft-accent,
.ws-mat-is-forced.ws-mat-soft-accent {
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: rgba(var(--theme-accent-rgb), 0.08) !important;
}

@keyframes ws-aurora-drift {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}

/* Gradient Brand — primary → secondary theme gradient. Fully opaque. */
.ws-mat-gradient-brand,
.ws-mat-is-forced.ws-mat-gradient-brand {
    backdrop-filter: none;
    background: linear-gradient(
        135deg,
        var(--theme-accent) 0%,
        var(--accent-secondary, color-mix(in srgb, var(--theme-accent) 60%, #fff)) 100%
    ) !important;
    color: #fff !important;
    --text-theme-text-rgb: 255, 255, 255;
}

/* Gradient Primary — monochrome shades of the primary accent color. */
.ws-mat-gradient-primary,
.ws-mat-is-forced.ws-mat-gradient-primary {
    backdrop-filter: none;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-accent) 70%, #000) 0%,
        var(--theme-accent) 50%,
        color-mix(in srgb, var(--theme-accent) 70%, #fff) 100%
    ) !important;
    color: #fff !important;
    --text-theme-text-rgb: 255, 255, 255;
}

/* Gradient Glass — translucent high-end gradient over glass. */
.ws-mat-gradient-glass,
.ws-mat-is-forced.ws-mat-gradient-glass {
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    background: linear-gradient(
        135deg,
        rgba(var(--theme-accent-rgb), 0.25) 0%,
        rgba(var(--accent-secondary-rgb, var(--theme-accent-rgb)), 0.15) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Gradient Ethereal — ultra-light, almost white tinted glass. */
.ws-mat-gradient-ethereal,
.ws-mat-is-forced.ws-mat-gradient-ethereal {
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(var(--theme-accent-rgb), 0.08) 50%,
        rgba(255, 255, 255, 0.2) 100%
    ) !important;
}

/* Gradient Secondary — monochrome shades of the secondary accent. */
.ws-mat-gradient-secondary,
.ws-mat-is-forced.ws-mat-gradient-secondary {
    backdrop-filter: none;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 70%, #000) 0%,
        var(--accent-secondary, var(--theme-accent)) 50%,
        color-mix(in srgb, var(--accent-secondary, var(--theme-accent)) 70%, #fff) 100%
    ) !important;
    color: #fff !important;
    --text-theme-text-rgb: 255, 255, 255;
}

/* ── Premium Surfaces ─────────────────────────────────────────────────────── */

.ws-mat-satin,
.ws-mat-is-forced.ws-mat-satin {
    background: rgba(var(--bg-theme-surface-rgb, 255,255,255), 0.85) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 20px rgba(0,0,0,0.05) !important;
}

.ws-mat-shimmer,
.ws-mat-is-forced.ws-mat-shimmer {
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%) !important;
    background-size: 200% 100% !important;
    animation: ws-shimmer-sweep 2s linear infinite;
}

.ws-mat-chrome,
.ws-mat-is-forced.ws-mat-chrome {
    background: linear-gradient(to bottom, #f0f0f0, #c0c0c0, #f0f0f0) !important;
    border: 1px solid #aaa !important;
    color: #333 !important;
}

.ws-mat-velvet,
.ws-mat-is-forced.ws-mat-velvet {
    background: #1a1a1a !important;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5) !important;
    color: #eee !important;
}

.ws-mat-mica,
.ws-mat-is-forced.ws-mat-mica {
    background: rgba(var(--bg-theme-surface-rgb, 255,255,255), 0.7) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.ws-mat-mesh,
.ws-mat-is-forced.ws-mat-mesh {
    background-color: var(--bg-theme-surface, #fff) !important;
    background-image: radial-gradient(rgba(0,0,0,0.1) 1px, transparent 1px) !important;
    background-size: 4px 4px !important;
}

/* ── Special Materials ─────────────────────────────────────────────────────── */

.ws-mat-neumorphic,
.ws-mat-is-forced.ws-mat-neumorphic {
    background: var(--bg-theme-base) !important;
    box-shadow: 6px 6px 12px rgba(0,0,0,0.1), -6px -6px 12px rgba(255,255,255,0.8) !important;
}

.ws-mat-noise,
.ws-mat-is-forced.ws-mat-noise {
    background: var(--bg-theme-surface) !important;
    position: relative;
}
.ws-mat-noise::after,
.ws-mat-is-forced.ws-mat-noise::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAy...' ); /* noise texture */
    pointer-events: none;
}

/* Neumorphic — soft inset/outset shadows on the surface colour.
   Works best when navbar is over a section with a matching base tone. */
.ws-mat-neumorphic {
    backdrop-filter: none;
    background: var(--bg-theme-surface, #1a1a2e) !important;
    box-shadow:
        8px 8px 16px rgba(0,0,0,0.22),
        -8px -8px 16px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    border: none !important;
}

/* Noise — matte solid with subtle grain texture for depth.
   Uses an SVG data-URI noise overlay via ::after. */
.ws-mat-noise {
    backdrop-filter: none;
    background: var(--bg-theme-surface) !important;
    position: relative;
    overflow: hidden;
}
.ws-mat-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. PREMIUM FRAME / BORDER VARIANTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Glow — themed shadow halo + soft inner highlight */
.ws-frame-glow {
    border: 1px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 35%, transparent) !important;
    box-shadow:
        0 0 18px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 18%, transparent),
        0 0 40px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 8%,  transparent),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Gradient — border visually changes from accent to secondary */
.ws-frame-gradient {
    border: 1px solid transparent !important;
    background-clip: padding-box, border-box;
    background-image: none, linear-gradient(135deg,
        rgba(var(--theme-accent-rgb), 0.65),
        rgba(var(--accent-secondary-rgb, var(--theme-accent-rgb)), 0.35));
    background-origin: padding-box, border-box;
}
/* Fallback for glass elements where background-image is already set */
.ws-mat-glass.ws-frame-gradient,
.ws-mat-glass-frost.ws-frame-gradient,
.ws-mat-glass-silk.ws-frame-gradient,
.ws-mat-glass-aurora.ws-frame-gradient,
.ws-mat-gradient-mesh.ws-frame-gradient {
    border: 1px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 50%, transparent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 12px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 10%, transparent) !important;
    background-image: none !important;
}

/* Neon — high-intensity glow, use sparingly for hero/landing pages */
.ws-frame-neon {
    border: 1px solid color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 60%, transparent) !important;
    box-shadow:
        0 0 6px  color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 50%, transparent),
        0 0 20px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 25%, transparent),
        0 0 50px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 10%, transparent),
        inset 0 0 6px color-mix(in srgb, var(--nav-frame-color, var(--theme-accent)) 6%, transparent) !important;
}

/* Inner Glow — subtle inward highlight, no outer shadow. Elegant restraint. */
.ws-frame-inner {
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. PREMIUM HOVER ANIMATION VARIANTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Accent Pill — accent-tinted background blooms in on hover */
.websly-hover-accent-pill .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-default, currentColor) 16%, transparent);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.18s ease-out, transform 0.2s ease-out;
    z-index: 0;
}
.websly-hover-accent-pill .websly-nav-link:hover::before {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.18s ease-in, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.websly-hover-accent-pill .current-menu-item > .websly-nav-link::before {
    opacity: 0.65;
    transform: scale(1);
}

/* Gradient Sweep — diagonal gradient sweeps across the link on hover */
.websly-hover-gradient-sweep .websly-nav-link {
    overflow: hidden;
}
.websly-hover-gradient-sweep .websly-nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(var(--theme-accent-rgb), 0.15) 45%,
        rgba(var(--accent-secondary-rgb, var(--theme-accent-rgb)), 0.10) 55%,
        transparent 100%
    );
    opacity: 0;
    transform: translateX(-110%);
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease;
    z-index: 0;
}
.websly-hover-gradient-sweep .websly-nav-link:hover::before {
    opacity: 1;
    transform: translateX(110%);
}
.websly-hover-gradient-sweep .current-menu-item > .websly-nav-link::before {
    opacity: 1;
    transform: translateX(0);
    background: rgba(var(--theme-accent-rgb), 0.10);
}

/* Dot Indicator — small accent dot rises under the active/hovered link */
.websly-hover-dot-indicator .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scale(0) translateY(4px);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme-accent);
    box-shadow: 0 0 6px rgba(var(--theme-accent-rgb), 0.6);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
    opacity: 0;
}
.websly-hover-dot-indicator .websly-nav-link:hover::after,
.websly-hover-dot-indicator .current-menu-item > .websly-nav-link::after {
    transform: translateX(-50%) scale(1) translateY(0);
    opacity: 1;
}

/* Glow Bloom — item glows outward with a soft accent shadow */
.websly-hover-glow-bloom .websly-nav-link {
    transition: opacity 0.2s ease, text-shadow 0.3s ease, filter 0.3s ease;
}
.websly-hover-glow-bloom .websly-nav-link:hover {
    filter: drop-shadow(0 0 8px rgba(var(--theme-accent-rgb), 0.45));
    opacity: 1;
}
.websly-hover-glow-bloom .current-menu-item > .websly-nav-link {
    filter: drop-shadow(0 0 5px rgba(var(--theme-accent-rgb), 0.3));
    opacity: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. PREMIUM NAVBAR SHAPE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

/* Island Wide — floating bar wider than pill-capsule, square-ish ends on desktop */
#navbar[data-nav-style="island-wide"].scrolled {
    width: 92% !important;
}

/* Glass Bar — full-width topbar, gains blur on scroll from transparent start */
#navbar[data-nav-style="glass-bar"] {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition:
        backdrop-filter 0.5s ease,
        background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#navbar[data-nav-style="glass-bar"].scrolled {
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8b. MODERN NAVBAR SHAPES
   ───────────────────────────────────────────────────────────────────────────── */

/* Notched — Chamfered / cut corners via clip-path.
   The 12px cut at each corner gives an angular, technical aesthetic.
   Uses polygon to snip corners diagonally. */
.ws-shape-notched {
    clip-path: polygon(
        12px 0%, calc(100% - 12px) 0%,
        100% 12px, 100% calc(100% - 12px),
        calc(100% - 12px) 100%, 12px 100%,
        0% calc(100% - 12px), 0% 12px
    );
    border-radius: 0 !important;
}
/* Notched border simulation — since clip-path clips real borders,
   add a subtle inset shadow to define the edge */
.ws-shape-notched {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

/* Undercut — Flat top (flush with page edge), rounded bottom.
   Best used with full width + no floating gap for a docked-to-top feel. */
.ws-shape-undercut {
    border-radius: 0 0 1.25rem 1.25rem !important;
}

/* Tapered — wider at center, slightly narrower at the edges.
   Creates a subtle lens/boat shape using border-radius on opposite axes. */
.ws-shape-tapered {
    border-radius: 50% / 100% !important;
}
/* Taper is too extreme on mobile — relax it */
@media (max-width: 767px) {
    .ws-shape-tapered {
        border-radius: 1.5rem !important;
    }
}

/* Blade — Ultra-thin low-profile bar. Height is reduced, padding is minimal,
   radius is just enough to soften. Feels like a floating HUD strip. */
.ws-shape-blade {
    border-radius: 0.5rem !important;
    min-height: 0 !important;
}
.ws-shape-blade .websly-nav-link {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* Island — Compact capsule with generous rounding and heavy elevation.
   Works best on contained or floating-center width. Similar to pill but
   adds elevation + slightly tighter proportions. */
.ws-shape-island {
    border-radius: 1rem !important;
    box-shadow:
        0 8px 32px rgba(0,0,0,0.12),
        0 2px 8px rgba(0,0,0,0.08) !important;
}
#navbar.is-scrolled.ws-shape-island {
    box-shadow:
        0 12px 48px rgba(0,0,0,0.18),
        0 4px 12px rgba(0,0,0,0.10) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   9. BORDER / FRAME AT PAGE TOP
   Suppresses border and shadow when at the very top, before any scrolling.
   JS adds .is-scrolled once the user has scrolled past 50px.
   ───────────────────────────────────────────────────────────────────────────── */
#navbar[data-hide-border-top="true"]:not(.is-scrolled) {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   10. SMART HIDE — slide off on scroll-down, slide back on scroll-up
   JS adds .nav-hidden when scrolling down, removes it when scrolling up.
   ───────────────────────────────────────────────────────────────────────────── */
#navbar {
    will-change: transform;
}

#navbar.nav-hidden {
    transform: translateY(-24px);
    opacity: 0;
    pointer-events: none;
}

/* Unified transition — covers smart-hide fade, scroll material change, and top-gap shift */
#navbar {
    transition:
        transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.32s ease,
        background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.3s ease,
        box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.45s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11. NAVBAR VISUAL PRESETS (External Style Adoption System)
   Each preset is a distinct visual personality applied via .ws-nav-preset-{slug}.
   All presets use Websly semantic tokens so they respect the active theme.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Preset: SVG Outline ─────────────────────────────────────────────────────
   Adapted from uiverse.io/SelfMadeSystem/ancient-donkey-33.
   A single animated SVG rect traces the border of the hovered nav item.
   The highlight moves dynamically via JS (websly-main.js).
   Uses --nav-frame-color so it inherits the user's chosen frame color.
*/
.ws-nav-svg-outline-container {
    position: relative;
}

/* The SVG overlay sits behind nav link text */
.ws-nav-preset-svg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

/* The animated rect — hidden at rest */
.ws-nav-preset-svg-rect {
    stroke-dashoffset: 5;
    stroke-dasharray: 0 0 0 1000;
    transition: stroke-dasharray 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                x 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                y 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 0;
    transition: opacity 0.25s ease, x 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                y 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                height 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active rect — shown when a link is hovered (JS adds .is-active) */
.ws-nav-svg-outline-container:hover .ws-nav-preset-svg-rect,
.ws-nav-preset-svg-rect.is-active {
    opacity: 1;
}

/* When preset is svg-outline: remove default nav link backgrounds to avoid double effects */
.ws-nav-preset-svg-outline .websly-nav-link::before,
.ws-nav-preset-svg-outline .websly-nav-link::after {
    display: none !important;
}

/* ── Preset: Ambient Halo ─────────────────────────────────────────────────────
   An accent-tinted ambient glow blooms beneath the navbar.
   Creates a premium "floating above light" effect. 100% CSS, no JS.
*/
.ws-nav-preset-ambient-halo {
    position: relative;
}

.ws-nav-preset-ambient-halo::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 40px;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--theme-accent-rgb), 0.28) 0%,
        rgba(var(--theme-accent-rgb), 0.12) 40%,
        transparent 70%
    );
    filter: blur(16px);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.5s ease;
}

/* At top of page, halo is stronger; fades slightly on scroll */
#navbar[data-hide-border-top="true"]:not(.is-scrolled).ws-nav-preset-ambient-halo::after {
    opacity: 0.9;
}
#navbar.is-scrolled.ws-nav-preset-ambient-halo::after {
    opacity: 0.5;
    width: 60%;
}

/* ── Preset: Minimal Line ─────────────────────────────────────────────────────
   Ultra-clean editorial style. Removes all borders/frames, adds a single 1px
   bottom line that fades in on scroll. Inspired by high-end agency sites.
*/
.ws-nav-preset-minimal-line {
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent !important;
    transition:
        border-bottom-color 0.4s ease,
        background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        top 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#navbar.is-scrolled.ws-nav-preset-minimal-line {
    border-bottom-color: color-mix(in srgb, currentColor 18%, transparent) !important;
}

/* Nav links for minimal-line: letter-spacing + small caps feel */
.ws-nav-preset-minimal-line .websly-nav-link {
    letter-spacing: 0.08em;
    border-radius: 0 !important;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

/* ── Preset: Aurora Trail ─────────────────────────────────────────────────────
   An animated aurora gradient flows across the full width of the navbar.
   Uses @keyframes for a slow, breathing accent movement.
*/
@keyframes ws-nav-aurora-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.ws-nav-preset-aurora-trail::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        rgba(var(--theme-accent-rgb), 0) 0%,
        rgba(var(--theme-accent-rgb), 0.15) 25%,
        rgba(var(--accent-secondary-rgb, var(--theme-accent-rgb)), 0.12) 50%,
        rgba(var(--theme-accent-rgb), 0.08) 75%,
        rgba(var(--theme-accent-rgb), 0) 100%
    );
    background-size: 300% 100%;
    animation: ws-nav-aurora-flow 8s ease infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.12);
}

/* Extra glow pulse on the aurora trail */
.ws-nav-preset-aurora-trail {
    overflow: visible;
}

/* ── Preset: Spotlight Bar ────────────────────────────────────────────────────
   A moving spotlight illuminates the hovered menu item from above.
   Pure CSS spotlight cone via radial-gradient, positioned via JS custom property.
*/
.ws-nav-preset-spotlight-bar .websly-nav-links-wrap {
    position: relative;
}

.ws-nav-preset-spotlight-bar .websly-nav-links-wrap::before {
    content: '';
    position: absolute;
    top: -28px;
    left: var(--spotlight-x, 50%);
    transform: translateX(-50%);
    width: 80px;
    height: 56px;
    background: radial-gradient(
        ellipse at top,
        rgba(var(--nav-frame-color-rgb, var(--theme-accent-rgb)), 0.45) 0%,
        rgba(var(--nav-frame-color-rgb, var(--theme-accent-rgb)), 0.15) 40%,
        transparent 70%
    );
    filter: blur(8px);
    pointer-events: none;
    transition: left 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.25s ease;
    opacity: 0;
    z-index: 2;
}

.ws-nav-preset-spotlight-bar .websly-nav-links-wrap:hover::before {
    opacity: 1;
}

/* ── Legibility Helper ───────────────────────────────────────────────────────
   Ensures high-contrast text readability on complex backgrounds.
*/
.ws-nav-legibility-high {
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11b. NEW ULTRA-MODERN PRESETS (5.1 EXPANSION)
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Preset: Ether Blur ───────────────────────────────────────────────────────
   Ultra-blurred floating island with a chromatic aberration border.
   Gives a "heavy light" feel.
*/
.ws-nav-preset-ether-blur {
    backdrop-filter: blur(60px) saturate(250%) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.2),
        0 0 0 1px rgba(var(--theme-accent-rgb), 0.2) inset !important;
}
.ws-nav-preset-ether-blur::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(45deg, #ff00ea, #00d2ff, #ff00ea);
    background-size: 200% 200%;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.2;
    animation: ws-aurora-drift 6s linear infinite;
}

/* ── Preset: Holographic HUD ─────────────────────────────────────────────────
   Technical HUD bar with an animated subtle grid and horizontal scanline.
*/
.ws-nav-preset-holographic-hud {
    background: rgba(var(--bg-theme-base-rgb), 0.65) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(var(--theme-accent-rgb), 0.3) !important;
}
.ws-nav-preset-holographic-hud::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(var(--theme-accent-rgb), 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--theme-accent-rgb), 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.2;
    z-index: 0;
}
.ws-nav-preset-holographic-hud::after {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, rgba(var(--theme-accent-rgb), 0.05), transparent);
    animation: ws-hud-scan 4s linear infinite;
    pointer-events: none;
}
@keyframes ws-hud-scan {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* ── Preset: Kinetic Reveal ──────────────────────────────────────────────────
   Invisible/minimal at rest, "blooms" into its full material on hover.
*/
.ws-nav-preset-kinetic-reveal {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: blur(0px) !important;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.ws-nav-preset-kinetic-reveal:hover {
    background: var(--bg-theme-surface) !important;
    border-color: color-mix(in srgb, currentColor 15%, transparent) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* ── Preset: Cyber Notched ───────────────────────────────────────────────────
   Requires Notched shape. Adds energy "pips" at the corners.
*/
.ws-nav-preset-cyber-notched {
    position: relative;
}
.ws-nav-preset-cyber-notched::before,
.ws-nav-preset-cyber-notched::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--theme-accent);
    box-shadow: 0 0 10px var(--theme-accent);
    z-index: 10;
    border-radius: 50%;
}
.ws-nav-preset-cyber-notched::before { top: 6px; left: 6px; }
.ws-nav-preset-cyber-notched::after { bottom: 6px; right: 6px; }

/* ── Preset: Ethereal Flow ───────────────────────────────────────────────────
   Liquid-like mesh gradient that shifts slowly.
*/
.ws-nav-preset-ethereal-flow {
    background: 
        radial-gradient(circle at 20% 30%, rgba(var(--theme-accent-rgb), 0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(var(--accent-secondary-rgb), 0.12), transparent 40%),
        rgba(var(--bg-theme-base-rgb), 0.8) !important;
    background-size: 200% 200% !important;
    animation: ws-aurora-drift 12s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────────
   11c. LEGIBILITY MODES — Redesigned v2
   All modes use !important to beat base .websly-nav-link rules.
   No mode changes link padding or layout — all effects use pseudo-elements
   or text properties only, preserving flex-gap between links.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Shadow Depth — Inspired by Linear.app / Apple macOS navbar ───────────────
   Three-layer composite shadow: dark base shadow + tiny highlight + wide ambient.
   Creates the perception of text floating slightly above the background surface.
   Works on both light and dark backgrounds.
*/
.ws-nav-legibility-shadow-depth .websly-nav-link {
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.55),
        0 -1px 0 rgba(255, 255, 255, 0.04),
        0 2px 12px rgba(0, 0, 0, 0.38) !important;
    opacity: 1 !important;
}
.ws-nav-legibility-shadow-depth .websly-nav-link:hover,
.ws-nav-legibility-shadow-depth .current-menu-item > .websly-nav-link {
    opacity: 1 !important;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.6),
        0 -1px 0 rgba(255, 255, 255, 0.06),
        0 2px 16px rgba(0, 0, 0, 0.45) !important;
}

/* ── Frosted Capsule — Inspired by visionOS / macOS menu extras ───────────────
   A soft glass backdrop behind each link using ::before pseudo-element.
   Key design decisions:
   - Uses absolute ::before so layout is NEVER affected (no padding changes)
   - CSS mask-image with horizontal gradient gives SOFT FADED EDGES
   - backdrop-filter creates the frosted glass effect
   - Overrides the hover-animation ::before with the frosted look
*/
.ws-nav-legibility-frosted .websly-nav-link {
    position: relative !important;
    /* Ensure no padding is added by this mode */
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
}
.ws-nav-legibility-frosted .websly-nav-link::before {
    content: '' !important;
    position: absolute !important;
    inset: -1px -4px !important;           /* Slightly wider than text, no layout change */
    border-radius: 99px !important;
    background: rgba(var(--bg-theme-base-rgb, 20, 18, 28), 0.22) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    /* Soft faded edges via CSS mask gradient */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.5) 8%,
        black 20%,
        black 80%,
        rgba(0,0,0,0.5) 92%,
        transparent 100%
    ) !important;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,0.5) 8%,
        black 20%,
        black 80%,
        rgba(0,0,0,0.5) 92%,
        transparent 100%
    ) !important;
    opacity: 1 !important;
    transform: scale(1) !important;        /* Override hover-pill scale animation */
    z-index: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, background 0.2s ease !important;
}
.ws-nav-legibility-frosted .websly-nav-link:hover::before {
    background: rgba(var(--bg-theme-base-rgb, 20, 18, 28), 0.38) !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}
[data-theme="dark"] .ws-nav-legibility-frosted .websly-nav-link::before,
.dark .ws-nav-legibility-frosted .websly-nav-link::before {
    background: rgba(0, 0, 0, 0.35) !important;
}

/* ── Smear Blur — Wide backdrop smear behind ALL links (Raycast / Framer style) ─
   Applied to the <ul> container using ::before so it spans the whole link group.
   Creates a "smeared" region where the background becomes legible under all links.
   No changes to individual link styles.
*/
.ws-nav-legibility-smear-blur.websly-nav-links-wrap {
    position: relative !important;
    isolation: isolate !important;
}
.ws-nav-legibility-smear-blur.websly-nav-links-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: -8px -24px !important;           /* Extend 24px past the link group on each side */
    border-radius: 999px !important;
    background: rgba(var(--bg-theme-base-rgb, 10, 8, 18), 0.18) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    /* Ellipse fade mask — fades at the outer edges of the entire group */
    -webkit-mask-image: radial-gradient(
        ellipse 85% 100% at center,
        black 40%,
        rgba(0,0,0,0.7) 65%,
        transparent 100%
    ) !important;
    mask-image: radial-gradient(
        ellipse 85% 100% at center,
        black 40%,
        rgba(0,0,0,0.7) 65%,
        transparent 100%
    ) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}
[data-theme="dark"] .ws-nav-legibility-smear-blur.websly-nav-links-wrap::before,
.dark .ws-nav-legibility-smear-blur.websly-nav-links-wrap::before {
    background: rgba(0, 0, 0, 0.32) !important;
}

/* ── Text Stroke — Ultra-thin text outline for any background ─────────────────
   Uses -webkit-text-stroke for a hairline outline that works on dark OR light bgs.
   At 0.4px it's barely-there but instantly readable. No layout impact whatsoever.
   Inspired by many premium design system dark-mode nav implementations.
*/
.ws-nav-legibility-text-stroke .websly-nav-link {
    -webkit-text-stroke: 0.4px rgba(var(--text-theme-text-rgb, 255,255,255), 0.6) !important;
    text-stroke: 0.4px rgba(var(--text-theme-text-rgb, 255,255,255), 0.6) !important;
    opacity: 1 !important;
}
.ws-nav-legibility-text-stroke .websly-nav-link:hover,
.ws-nav-legibility-text-stroke .current-menu-item > .websly-nav-link {
    -webkit-text-stroke: 0.5px rgba(var(--text-theme-text-rgb, 255,255,255), 0.9) !important;
    text-stroke: 0.5px rgba(var(--text-theme-text-rgb, 255,255,255), 0.9) !important;
    opacity: 1 !important;
}

/* ── Glow Ambient — Soft radial accent aura (Linear / Raycast active state) ──
   Uses ::before to create a soft accent-colored radial glow bloom.
   Active/current-page link glows at rest at low opacity.
   All links bloom to full glow on hover.
   Override the default magnet-glow ::before with the ambient variant.
*/
.ws-nav-legibility-glow-ambient .websly-nav-link::before {
    content: '' !important;
    position: absolute !important;
    inset: -8px -12px !important;
    border-radius: 999px !important;
    background: radial-gradient(
        circle at center,
        rgba(var(--theme-accent-rgb), 0.28) 0%,
        rgba(var(--theme-accent-rgb), 0.12) 45%,
        transparent 85%
    ) !important;
    filter: blur(8px) !important;
    opacity: 0 !important;
    transform: scale(0.85) !important;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}
.ws-nav-legibility-glow-ambient .websly-nav-link:hover::before {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}
/* Active/current page: persistent dim glow */
.ws-nav-legibility-glow-ambient .current-menu-item > .websly-nav-link::before,
.ws-nav-legibility-glow-ambient .current-page-ancestor > .websly-nav-link::before {
    opacity: 0.55 !important;
    transform: scale(1) !important;
}


/* ── Preset: Linear Obsidian ────────────────────────────────────────────────
   Adapted from Linear/Raycast. Deep dark glass, sharp contrast, violet glow.
*/
.ws-nav-preset-linear-obsidian {
    background: rgba(13, 13, 18, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.2) inset !important;
}
.ws-nav-preset-linear-obsidian .websly-nav-link:hover {
    color: #a78bfa !important;
}

/* ── Preset: Framer Silk ────────────────────────────────────────────────────
   Soft, pillowy glass with extreme blur and subtle spring animations.
*/
.ws-nav-preset-framer-silk {
    backdrop-filter: blur(40px) saturate(180%) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}
.ws-nav-preset-framer-silk .websly-nav-link {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ws-nav-preset-framer-silk .websly-nav-link:hover {
    transform: translateY(-2px) scale(1.05);
}

/* ── Preset: Raycast Tech ────────────────────────────────────────────────────
   Dense, technical HUD look with mono fonts and grid lines.
*/
.ws-nav-preset-raycast-tech {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    letter-spacing: -0.02em;
}
.ws-nav-preset-raycast-tech .websly-nav-link::before {
    background: rgba(var(--theme-accent-rgb), 0.12) !important;
    border-radius: 6px !important;
}

/* ── Preset: Geist Minimal ───────────────────────────────────────────────────
   Pure Vercel aesthetic. No borders, no background (solid on scroll), high contrast.
*/
.ws-nav-preset-geist-minimal {
    border-radius: 0 !important;
    text-transform: lowercase;
}
#navbar.scrolled.ws-nav-preset-geist-minimal {
    border-bottom: 1px solid var(--theme-accent) !important;
}

/* ── Preset: Stripe Gloss ────────────────────────────────────────────────────
   Vivid, colorful, high-end commercial tech aesthetic.
*/
.ws-nav-preset-stripe-gloss {
    box-shadow: 
        0 50px 100px -20px rgba(50, 50, 93, 0.15),
        0 30px 60px -30px rgba(0, 0, 0, 0.2) !important;
}
.ws-nav-preset-stripe-gloss .websly-nav-link:hover {
    color: var(--theme-accent) !important;
    background: rgba(var(--theme-accent-rgb), 0.05) !important;
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. NEW MODERN VISUAL PRESETS — Industry-Standard Designs
   All use semantic tokens where applicable for theme compatibility.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Preset: Vercel Clean ──────────────────────────────────────────────────────
   Inspired by vercel.com — ultra-minimal, transparent top, solid on scroll.
   Works best with 'full' width and 'square' shape + smart-hide.
*/
.ws-nav-preset-vercel-clean {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#navbar.is-scrolled.ws-nav-preset-vercel-clean {
    background: color-mix(in srgb, var(--bg-theme-base) 94%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
.ws-nav-preset-vercel-clean .websly-nav-link {
    border-radius: 6px !important;
    font-size: 0.875rem !important;
}

/* ── Preset: Apple Blur ───────────────────────────────────────────────────────
   Inspired by apple.com — max backdrop blur, very subtle border, full-width bar.
   Works best with 'full' width, 'square' shape, floating gap OFF.
*/
.ws-nav-preset-apple-blur {
    backdrop-filter: blur(44px) saturate(210%) brightness(1.04) !important;
    -webkit-backdrop-filter: blur(44px) saturate(210%) brightness(1.04) !important;
    background: rgba(var(--bg-theme-base-rgb, 250,250,250), 0.72) !important;
    border-bottom: 1px solid color-mix(in srgb, currentColor 6%, transparent) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}
[data-theme="dark"] .ws-nav-preset-apple-blur,
.dark .ws-nav-preset-apple-blur {
    background: rgba(var(--bg-theme-base-rgb, 29,29,31), 0.85) !important;
}
.ws-nav-preset-apple-blur .websly-nav-link {
    border-radius: 6px !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.ws-nav-preset-apple-blur .websly-nav-link:hover {
    transform: scale(1.04) !important;
}

/* ── Preset: Notion Editorial ─────────────────────────────────────────────────
   Inspired by notion.so — clean white/offblack, elegant weight hierarchy.
   Works with full-width, no floating gap. Uses semantic tokens.
*/
.ws-nav-preset-notion-editorial {
    background: color-mix(in srgb, var(--bg-theme-base) 97%, transparent) !important;
    border-bottom: 1.5px solid color-mix(in srgb, currentColor 10%, transparent) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
}
.ws-nav-preset-notion-editorial .websly-nav-link {
    border-radius: 4px !important;
    letter-spacing: -0.01em !important;
    opacity: 0.8 !important;
    font-size: 0.875rem !important;
}
.ws-nav-preset-notion-editorial .websly-nav-link:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, currentColor 6%, transparent) !important;
}
.ws-nav-preset-notion-editorial .current-menu-item > .websly-nav-link {
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* ── Preset: Arc Vivid ────────────────────────────────────────────────────────
   Inspired by Arc Browser — colorful vivid gradient pill. Uses theme accent.
   Best with detached-bar or floating-center + pill shape.
*/
.ws-nav-preset-arc-vivid {
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--theme-accent) 85%, #000) 0%,
        var(--theme-accent) 45%,
        color-mix(in srgb, var(--theme-accent) 75%, var(--accent-secondary, #fff)) 100%
    ) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    box-shadow:
        0 8px 32px rgba(var(--theme-accent-rgb), 0.4),
        0 2px 8px rgba(var(--theme-accent-rgb), 0.25),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    color: #fff !important;
    --text-theme-text-rgb: 255, 255, 255;
}
.ws-nav-preset-arc-vivid .websly-nav-link {
    color: rgba(255,255,255,0.88) !important;
    border-radius: 999px !important;
}
.ws-nav-preset-arc-vivid .websly-nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.14) !important;
}
.ws-nav-preset-arc-vivid .current-menu-item > .websly-nav-link {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
}

/* ── Preset: Shadcn Minimal ───────────────────────────────────────────────────
   Inspired by shadcn/ui — extremely neutral, zero chrome, semantic tokens.
   Best with 'full' width, 'square' shape, floating gap OFF.
*/
.ws-nav-preset-shadcn-minimal {
    background: var(--bg-theme-base) !important;
    border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.ws-nav-preset-shadcn-minimal .websly-nav-link {
    border-radius: 6px !important;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    opacity: 0.72 !important;
}
.ws-nav-preset-shadcn-minimal .websly-nav-link:hover {
    opacity: 1 !important;
    background: color-mix(in srgb, currentColor 7%, transparent) !important;
}
.ws-nav-preset-shadcn-minimal .current-menu-item > .websly-nav-link {
    opacity: 1 !important;
    background: color-mix(in srgb, currentColor 8%, transparent) !important;
    font-weight: 600 !important;
}

/* ── Preset: Luma Glass ───────────────────────────────────────────────────────
   Inspired by Luma AI — deep premium dark glass, chromatic accent sheen.
   Best with detached-bar or contained layout. Uses theme accent.
*/
.ws-nav-preset-luma-glass {
    background: rgba(12, 10, 18, 0.82) !important;
    backdrop-filter: blur(36px) saturate(200%) brightness(0.9) !important;
    -webkit-backdrop-filter: blur(36px) saturate(200%) brightness(0.9) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    box-shadow:
        0 0 0 1px rgba(var(--theme-accent-rgb), 0.15) inset,
        0 20px 60px rgba(0,0,0,0.5),
        0 0 40px rgba(var(--theme-accent-rgb), 0.06) !important;
    color: #f5f3ff !important;
    --text-theme-text-rgb: 245, 243, 255;
    position: relative;
    overflow: visible;
}
.ws-nav-preset-luma-glass .websly-nav-link {
    color: rgba(245, 243, 255, 0.75) !important;
}
.ws-nav-preset-luma-glass .websly-nav-link:hover {
    color: #fff !important;
    background: rgba(255,255,255,0.08) !important;
}
.ws-nav-preset-luma-glass .current-menu-item > .websly-nav-link {
    color: #fff !important;
    background: rgba(var(--theme-accent-rgb), 0.14) !important;
}
@keyframes ws-luma-shimmer {
    0%, 100% { background-position: 200% 0; }
    50%       { background-position: 0% 0; }
}

/* ── Preset: Replicate Technical ──────────────────────────────────────────────
   Inspired by replicate.com AI labs. Sharp, technical, high-contrast.
   Uses monospace fallback and a signature "top laser line".
*/
.ws-nav-preset-replicate-technical {
    background: rgba(10, 10, 12, 0.85) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
    letter-spacing: -0.02em !important;
}
/* Laser Top Line */
.ws-nav-preset-replicate-technical::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--theme-accent), transparent);
    box-shadow: 0 0 10px var(--theme-accent);
    z-index: 10;
}
.ws-nav-preset-replicate-technical .websly-nav-link {
    font-size: 0.825rem !important;
    text-transform: uppercase !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease, filter 0.2s ease !important;
}
.ws-nav-preset-replicate-technical .websly-nav-link:hover,
.ws-nav-preset-replicate-technical .current-menu-item > .websly-nav-link {
    opacity: 1 !important;
}

/* ── Preset: Supabase Clean ───────────────────────────────────────────────────
   Inspired by supabase.com. Ultra-minimalist modern SaaS, focuses on micro-contrast.
*/
.ws-nav-preset-supabase-clean {
    background: rgba(var(--bg-theme-base-rgb), 0.6) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid color-mix(in srgb, currentColor 8%, transparent) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.08) !important;
}
.ws-nav-preset-supabase-clean .websly-nav-link {
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    padding: 0.35rem 0.9rem !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
}
.ws-nav-preset-supabase-clean .websly-nav-link:hover {
    background: color-mix(in srgb, currentColor 6%, transparent) !important;
    transform: translateY(-1px) !important;
}
.ws-nav-preset-supabase-clean .current-menu-item > .websly-nav-link {
    background: color-mix(in srgb, var(--theme-accent) 8%, transparent) !important;
    color: var(--theme-accent) !important;
}
/* ── 5. NAVBAR COLOR MODE ENGINE (v5.2 Fix) ─────────────────────────────── */

#navbar[data-nav-color-mode="dark"],
#navbar[data-nav-color-mode="dark"] .websly-nav-link,
#navbar[data-nav-color-mode="dark"] .websly-nav-phone-link,
#navbar[data-nav-color-mode="dark"] .websly-nav-icon-btn {
    --text-theme-text-rgb: 255, 255, 255;
    color: #fff !important;
}

#navbar[data-nav-color-mode="light"],
#navbar[data-nav-color-mode="light"] .websly-nav-link,
#navbar[data-nav-color-mode="light"] .websly-nav-phone-link,
#navbar[data-nav-color-mode="light"] .websly-nav-icon-btn {
    --text-theme-text-rgb: 0, 0, 0;
    color: #000 !important;
}

#navbar[data-nav-color-mode="dark"] .websly-nav-marker {
    background: #fff !important;
}

#navbar[data-nav-color-mode="light"] .websly-nav-marker {
    background: #000 !important;
}

/* ── ✨ 6. INDUSTRY VISUAL MODELS (v5.2 Expansion) ───────────────────────── */

/* 1. Midjourney Magma — Dark Glow */
.ws-nav-preset-midjourney-magma {
    background: rgba(8, 8, 12, 0.92) !important;
    border: 1px solid rgba(255, 170, 0, 0.15) !important;
    box-shadow: 
        0 10px 40px -10px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 140, 0, 0.1) inset !important;
}
.ws-nav-preset-midjourney-magma .websly-nav-link:hover {
    color: #ffaa00 !important;
}

/* 2. Netflix Cinematic — Bold Black/Red */
.ws-nav-preset-netflix-cinematic {
    background: #000000 !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}
.ws-nav-preset-netflix-cinematic .websly-nav-link:hover,
.ws-nav-preset-netflix-cinematic .current-menu-item > .websly-nav-link {
    color: #e50914 !important;
}

/* 3. Slack Playful — Soft Multi-tone */
.ws-nav-preset-slack-playful {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1), 
        0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}
.ws-nav-preset-slack-playful .websly-nav-link:hover {
    background: #611f69 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
}

/* 4. Figma Canvas — Pro Gray HUD */
.ws-nav-preset-figma-canvas {
    background: #2c2c2c !important;
    border: 1px solid #444 !important;
    color: #ddd !important;
    font-size: 0.8rem !important;
}
.ws-nav-preset-figma-canvas .websly-nav-link:hover,
.ws-nav-preset-figma-canvas .current-menu-item > .websly-nav-link {
    background: #18a0fb !important;
    color: #fff !important;
    border-radius: 4px !important;
}

/* 5. Uber Luxury — High Contrast Mono */
.ws-nav-preset-uber-luxury {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 2px solid #000 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25em !important;
    font-weight: 900 !important;
}
.dark .ws-nav-preset-uber-luxury {
    background: #000000 !important;
    color: #ffffff !important;
    border-bottom: 2px solid #fff !important;
}
.ws-nav-preset-uber-luxury .websly-nav-link:hover {
    letter-spacing: 0.35em !important;
    opacity: 0.7;
}

/* 6. Robinhood Neon — Toxic Financial */
.ws-nav-preset-robinhood-neon {
    background: rgba(0, 0, 0, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(0, 255, 140, 0.1) !important;
}
.ws-nav-preset-robinhood-neon .websly-nav-link {
    color: #00ff8c !important;
    font-weight: 600 !important;
}
.ws-nav-preset-robinhood-neon .websly-nav-link:hover {
    background: rgba(0, 255, 140, 0.1) !important;
    box-shadow: 0 0 15px rgba(0, 255, 140, 0.2) !important;
}

/* 7. GitHub Clean — Tech Minimal */
.ws-nav-preset-github-clean {
    background: #f6f8fa !important;
    border: 1px solid #d0d7de !important;
    color: #24292f !important;
}
.dark .ws-nav-preset-github-clean {
    background: #0d1117 !important;
    border: 1px solid #30363d !important;
    color: #c9d1d9 !important;
}
.ws-nav-preset-github-clean .websly-nav-link:hover {
    background: rgba(208, 215, 222, 0.3) !important;
    border-radius: 6px !important;
}
.dark .ws-nav-preset-github-clean .websly-nav-link:hover {
    background: rgba(48, 54, 61, 0.5) !important;
}

/* ── Preset: SiteDrop Clean ───────────────────────────────────────────────────
   Inspired by sitedrop.ai. Compact 56px bar, muted link text that lifts to
   foreground on hover, with a primary-color underline that grows from left
   to full width. Subtle bottom border defines the bar without chrome.
*/
.ws-nav-preset-sitedrop-clean {
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent) !important;
}
.ws-nav-preset-sitedrop-clean .websly-nav-link {
    font-size: 0.8125rem !important; /* 13px to match SiteDrop */
    font-weight: 500 !important;
    opacity: 0.65 !important;
    padding: 0.25rem 0 !important;
    transition: opacity 0.2s ease, color 0.2s ease !important;
}
.ws-nav-preset-sitedrop-clean .websly-nav-link:hover {
    opacity: 1 !important;
}
/* Growing underline — left-anchored, full width on hover, primary color. */
.ws-nav-preset-sitedrop-clean .websly-nav-link::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--theme-primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 99px;
}
.ws-nav-preset-sitedrop-clean .websly-nav-link:hover::after {
    width: 100%;
}
/* Active page: full underline at rest. */
.ws-nav-preset-sitedrop-clean .current-menu-item > .websly-nav-link::after,
.ws-nav-preset-sitedrop-clean .current-page-ancestor > .websly-nav-link::after {
    width: 100%;
    opacity: 0.75;
}
/* Tighten gap between menu items to feel like SiteDrop's gap-7. */
.ws-nav-preset-sitedrop-clean .websly-nav-links-wrap {
    gap: 1.75rem !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   MATERIAL OVERRIDE AUTHORITY (v5.3)
   When the user picks anything other than "Inherit from Preset" in the
   Navbar Material Override control, navbar.php adds the .ws-mat-is-forced
   class alongside the ws-mat-{slug} class. The two-class combo already has
   higher specificity (20) than any single-class preset rule (10), so the
   earlier .ws-mat-is-forced.ws-mat-* blocks at lines 600-720 naturally win.
   Glass is the exception — its base rule only sets backdrop-filter, not a
   background — so we assert an explicit background here to guarantee the
   navbar is never transparent when Glass is forced over a preset.
   ═════════════════════════════════════════════════════════════════════════ */
.ws-mat-is-forced.ws-mat-glass {
    background-color: var(--surface-bg-glass, rgba(var(--bg-base-rgb), 0.65)) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
   HOVER EFFECT AUTHORITY (v5.3)
   When BOTH Primary and Secondary hover animations are "none", the user
   expects zero hover chrome beyond the base opacity/color lift. Presets
   (Raycast Tech, Luma Glass, Arc Vivid, Stripe Gloss, Robinhood Neon,
   Framer Silk, Apple Blur, Figma Canvas, Slack Playful, GitHub Clean,
   SiteDrop Clean, Notion Editorial, Shadcn Minimal, Supabase Clean) used
   to force their own background / filter drop-shadow / text-shadow /
   transform / ::before halo on hover — this rule neutralises every one
   of them in a single pass.

   Both attribute selectors required so a user picking Primary=none but
   Secondary=aura-faded still gets the Secondary effect — only the
   preset's own forced hover is suppressed when the user has explicitly
   opted out of all hover animation.

   Specificity: #navbar + [attr] + [attr] + .class + :hover = (1,3,1)
   = 131, beats every preset's single-class :hover rule (21) regardless
   of source order.
   ═════════════════════════════════════════════════════════════════════════ */
#navbar[data-nav-hover-primary="none"][data-nav-hover-secondary="none"] .websly-nav-link:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    transform: none !important;
    border-color: transparent !important;
}
#navbar[data-nav-hover-primary="none"][data-nav-hover-secondary="none"] li:not(.current-menu-item):not(.current-page-ancestor) > .websly-nav-link:hover::before,
#navbar[data-nav-hover-primary="none"][data-nav-hover-secondary="none"] li:not(.current-menu-item):not(.current-page-ancestor) > .websly-nav-link:hover::after {
    opacity: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
    width: 0 !important;
}

/* -- 15. MOBILE LAYOUT ENGINE (v5.2) -------------------------------------- */

.websly-mobile-nav {
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* Full Drawer (Default) */
.websly-mobile-nav[data-layout='full-screen'] {
    inset: 0;
    width: 100%;
    height: 100vh;
    gap: 1.5rem;
}

/* Compact Dropdown */
.websly-mobile-nav[data-layout='compact-drop'] {
    top: var(--navbar-height, 80px);
    left: 1.5rem;
    right: 1.5rem;
    height: auto;
    max-height: calc(100vh - var(--navbar-height, 80px) - 3rem);
    border-radius: 2rem;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform-origin: top center;
    border: 1px solid rgba(var(--text-theme-text-rgb), 0.1);
    gap: 1.5rem;
    overflow-y: auto;
}

.websly-mobile-nav[data-layout='compact-drop'] .mobile-nav-links {
    gap: 0.75rem;
}

.websly-mobile-nav[data-layout='compact-drop'] .mobile-nav-links a {
    font-size: 1.5rem;
}

/* Minimal Split Grid */
.websly-mobile-nav[data-layout='minimal-split'] {
    inset: 0;
    padding-top: 15vh;
    gap: 0;
}

.websly-mobile-nav[data-layout='minimal-split'] .mobile-nav-links {
    display: grid;
    grid-template-cols: 1fr 1fr;
    gap: 1rem;
    text-align: left;
    max-width: 90%;
}

.websly-mobile-nav[data-layout='minimal-split'] .mobile-nav-links li {
    border-bottom: 1px solid rgba(var(--text-theme-text-rgb), 0.08);
    padding: 0.5rem 0;
}

.websly-mobile-nav[data-layout='minimal-split'] .mobile-nav-links a {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Layout-specific Close Button Positioning */
.websly-mobile-nav[data-layout='compact-drop'] #mobile-nav-close {
    display: none; /* In compact mode, clicking the toggle or outside is enough */
}


/* Search-Style Overlay (Linear/Apple Search Style) */
.websly-mobile-nav[data-layout='search-overlay'] {
    inset: 0;
    background: rgba(var(--bg-theme-base-rgb), 0.5) !important;
    backdrop-filter: blur(40px) saturate(200%) !important;
    justify-content: flex-start;
    padding-top: 10vh;
}

.websly-mobile-nav[data-layout='search-overlay'] .mobile-nav-links {
    max-width: 600px;
    text-align: left;
    align-items: flex-start;
    gap: 0;
}

.websly-mobile-nav[data-layout='search-overlay'] .mobile-nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(var(--text-theme-text-rgb), 0.05);
}

.websly-mobile-nav[data-layout='search-overlay'] .mobile-nav-links a {
    display: block;
    padding: 1.25rem 0;
    font-size: 1.25rem;
    font-weight: 500;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.websly-mobile-nav[data-layout='search-overlay'] .mobile-nav-links a:hover {
    opacity: 1;
    padding-left: 0.5rem;
    color: var(--theme-accent) !important;
}

/* Modern Bottom Stack (App-Style) */
.websly-mobile-nav[data-layout='bottom-stack'] {
    top: auto;
    bottom: 1.5rem;
    left: 1rem;
    right: 1rem;
    height: auto;
    min-height: 40vh;
    border-radius: 2.5rem;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.3);
    transform-origin: bottom center;
    justify-content: flex-end;
}

.websly-mobile-nav[data-layout='bottom-stack'] .mobile-nav-links {
    flex-direction: column-reverse;
    gap: 0.5rem;
}

.websly-mobile-nav[data-layout='bottom-stack'] .mobile-nav-links a {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Origin UI Open-Close Menu Hamburger (Modern Animated SVG) ── */
.ws-hamburger-svg {
    display: block;
    overflow: visible;
}

.ws-hamburger-svg path {
    transform-origin: center;
    transition: transform 300ms cubic-bezier(.5,.85,.25,1.1);
}

.ws-hamburger-path-1 {
    transform: translateY(-7px);
}

.ws-hamburger-path-2 {
    transition: transform 300ms cubic-bezier(.5,.85,.25,1.8) !important;
}

.ws-hamburger-path-3 {
    transform: translateY(7px);
}

/* Toggled State */
#mobile-menu-toggle[aria-expanded="true"] .ws-hamburger-path-1 {
    transform: translateX(0) translateY(0) rotate(315deg);
}

#mobile-menu-toggle[aria-expanded="true"] .ws-hamburger-path-2 {
    transform: rotate(45deg);
}

#mobile-menu-toggle[aria-expanded="true"] .ws-hamburger-path-3 {
    transform: translateY(0) rotate(135deg);
}