/* =========================================================
   Lincs Lootcave Canonical Header
   Phase 1 — shell, hero, logo, actions, desktop nav rail
========================================================= */

:root {
    --ll-header-bg: #030409;
    --ll-header-panel: rgba(6, 7, 14, .90);
    --ll-header-panel-strong: rgba(4, 5, 10, .98);
    --ll-header-text: #f7f4ec;
    --ll-header-muted: rgba(247, 244, 236, .72);
    --ll-header-gold: #d4af37;
    --ll-header-gold-soft: #f0d66d;
    --ll-header-green: #8aff00;
    --ll-header-purple: #7d3cc7;
    --ll-header-border: rgba(212, 175, 55, .42);
}

/* ---------------------------------------------------------
   Header shell
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
    isolation: isolate !important;
    color: var(--ll-header-text) !important;
    background: var(--ll-header-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(138, 255, 0, .34) !important;
    box-shadow:
        0 16px 44px rgba(0, 0, 0, .56),
        inset 0 -1px 0 rgba(212, 175, 55, .14) !important;
}

/* The new hero uses the supplied cave artwork directly.
   Old generated cave/mist layers are no longer visual owners. */

body:not(.wp-admin) .ll-c4-header-shell>.ll-c4-cave-layer,
body:not(.wp-admin) .ll-c4-header-shell>.ll-c4-mist-layer,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-rock,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-top-gem,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-bottom-gem {
    display: none !important;
}

/* ---------------------------------------------------------
   Main cave hero
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(72px, 1fr) minmax(180px, 360px) minmax(180px, 1fr) !important;
    align-items: center !important;
    gap: clamp(16px, 3vw, 42px) !important;

    width: 100% !important;
    max-width: none !important;
    min-height: clamp(190px, 19vw, 290px) !important;

    margin: 0 !important;
    padding:
        clamp(22px, 3vw, 42px) clamp(18px, 4vw, 72px) !important;

    overflow: visible !important;

    background:
        linear-gradient(90deg,
            rgba(1, 2, 5, .62) 0%,
            rgba(1, 2, 5, .18) 28%,
            rgba(1, 2, 5, .05) 50%,
            rgba(1, 2, 5, .18) 72%,
            rgba(1, 2, 5, .62) 100%),
        linear-gradient(180deg,
            rgba(2, 3, 7, .16),
            rgba(2, 3, 7, .38)),
        url("../desktop-header-bg.png") center center / cover no-repeat !important;

    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;

    box-shadow:
        inset 0 -30px 46px rgba(0, 0, 0, .42),
        inset 0 1px 0 rgba(255, 255, 255, .03) !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame::before,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame::after {
    display: none !important;
}

/* ---------------------------------------------------------
   Left menu zone
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-left-zone {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 0 !important;

    position: relative !important;
    z-index: 5 !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle {
    display: grid !important;
    place-items: center !important;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;

    padding: 0 !important;
    border: 1px solid rgba(212, 175, 55, .42) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(180deg,
            rgba(15, 12, 24, .92),
            rgba(5, 5, 10, .96)) !important;

    color: var(--ll-header-text) !important;

    box-shadow:
        inset 0 0 18px rgba(125, 60, 199, .16),
        0 10px 24px rgba(0, 0, 0, .42) !important;

    cursor: pointer !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle span {
    width: 20px !important;
    height: 2px !important;
    margin: 2px 0 !important;

    border-radius: 999px !important;

    background:
        linear-gradient(90deg,
            var(--ll-header-gold-soft),
            var(--ll-header-green)) !important;

    box-shadow: 0 0 8px rgba(138, 255, 0, .26) !important;
}

/* ---------------------------------------------------------
   Logo
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: center !important;
    align-self: center !important;

    width: min(100%, 340px) !important;
    height: auto !important;
    min-height: 150px !important;

    display: grid !important;
    place-items: center !important;

    position: relative !important;
    z-index: 4 !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb::before,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb::after {
    display: none !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb a {
    display: grid !important;
    place-items: center !important;

    width: 100% !important;
    height: 100% !important;

    text-decoration: none !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-img {
    width: clamp(180px, 18vw, 310px) !important;
    max-width: 100% !important;
    max-height: 190px !important;

    object-fit: contain !important;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, .62)) drop-shadow(0 0 18px rgba(125, 60, 199, .22)) !important;
}

/* ---------------------------------------------------------
   Header actions
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions {
    grid-column: 3 !important;
    grid-row: 1 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 12px !important;

    width: auto !important;
    min-width: 0 !important;

    position: relative !important;
    z-index: 6 !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;

    display: grid !important;
    place-items: center !important;

    padding: 0 !important;

    border: 1px solid rgba(212, 175, 55, .36) !important;
    border-radius: 16px !important;

    background:
        linear-gradient(180deg,
            rgba(15, 12, 24, .92),
            rgba(5, 5, 10, .96)) !important;

    color: var(--ll-header-text) !important;

    box-shadow:
        inset 0 0 18px rgba(125, 60, 199, .14),
        0 10px 24px rgba(0, 0, 0, .42) !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action:hover,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action:focus-visible,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle:hover,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle:focus-visible {
    border-color: rgba(138, 255, 0, .72) !important;
    color: var(--ll-header-gold-soft) !important;

    box-shadow:
        inset 0 0 18px rgba(138, 255, 0, .08),
        0 0 0 3px rgba(138, 255, 0, .08),
        0 12px 26px rgba(0, 0, 0, .46) !important;

    outline: none !important;
}

/* The tablet/mobile header begins at the canonical 1180px breakpoint. */
@media (min-width: 1181px) {
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle {
        display: none !important;
    }
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action svg {
    width: 22px !important;
    height: 22px !important;
}

/* ---------------------------------------------------------
   Desktop navigation rail
--------------------------------------------------------- */

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav {
    display: block !important;

    width: 100% !important;
    max-width: none !important;

    padding: 0 clamp(18px, 3vw, 52px) !important;

    background:
        linear-gradient(180deg,
            rgba(7, 6, 12, .98),
            rgba(3, 4, 8, .99)) !important;

    border-top: 1px solid rgba(255, 255, 255, .05) !important;
    border-bottom: 1px solid rgba(138, 255, 0, .24) !important;

    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, .08),
        0 8px 24px rgba(0, 0, 0, .24) !important;

    position: relative !important;
    z-index: 7 !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav>.ll-c4-desktop-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: clamp(8px, 1.35vw, 20px) !important;

    min-height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>li {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 64px !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>li>a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 42px !important;

    padding: 0 16px !important;

    border: 1px solid transparent !important;
    border-radius: 999px !important;

    background: transparent !important;

    color: rgba(247, 244, 236, .90) !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: .025em !important;

    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    transition:
        color .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>li>a::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    bottom: 5px !important;

    width: 0 !important;
    height: 2px !important;

    transform: translateX(-50%) !important;

    border-radius: 999px !important;

    background:
        linear-gradient(90deg,
            transparent,
            var(--ll-header-purple),
            var(--ll-header-green),
            var(--ll-header-gold-soft),
            transparent) !important;

    box-shadow:
        0 0 9px rgba(138, 255, 0, .34),
        0 0 13px rgba(125, 60, 199, .18) !important;

    transition: width .18s ease !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>li:hover>a,
body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>.current-menu-item>a,
body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>.current-menu-ancestor>a {
    color: var(--ll-header-gold-soft) !important;

    border-color: rgba(212, 175, 55, .28) !important;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(125, 60, 199, .16),
            transparent 58%),
        linear-gradient(180deg,
            rgba(18, 13, 29, .74),
            rgba(6, 6, 12, .60)) !important;

    box-shadow:
        inset 0 0 16px rgba(125, 60, 199, .10),
        0 0 16px rgba(138, 255, 0, .045) !important;

    transform: translateY(-1px) !important;
}

body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>li:hover>a::after,
body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>.current-menu-item>a::after,
body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav .ll-c4-desktop-menu>.current-menu-ancestor>a::after {
    width: calc(100% - 26px) !important;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1180px) {

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame {
        grid-template-columns:
            minmax(0, 1fr) auto minmax(0, 1fr) !important;

        align-items: center !important;

        min-height: 190px !important;

        padding-left: 24px !important;
        padding-right: 24px !important;

        position: relative !important;
    }

    /* Left menu stays pinned to the left side. */
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-left-zone {
        grid-column: 1 !important;
        grid-row: 1 !important;

        justify-self: start !important;
        align-self: center !important;

        width: auto !important;
        min-width: 0 !important;
    }

    /* Logo remains in normal layout and is mathematically centred. */
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb {
        grid-column: 2 !important;
        grid-row: 1 !important;

        position: relative !important;

        left: auto !important;
        top: auto !important;
        right: auto !important;

        transform: none !important;

        justify-self: center !important;
        align-self: center !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;

        z-index: 4 !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-img {
        width: clamp(150px, 20vw, 240px) !important;
    }

    /* Actions stay pinned to the right side. */
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions {
        grid-column: 3 !important;
        grid-row: 1 !important;

        justify-self: end !important;
        align-self: center !important;

        width: auto !important;
        min-width: 0 !important;
    }

    /* Standalone notifications belong to the full desktop header only.
   Tablet/mobile surface unread notifications through the account action. */
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action.ll-c4-notifications-toggle {
        display: none !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav {
        display: none !important;
    }


}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 760px) {

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame {
        grid-template-columns:
            minmax(0, 1fr) auto minmax(0, 1fr) !important;

        min-height: 92px !important;

        gap: 8px !important;

        padding: 10px 12px !important;

        background:
            linear-gradient(90deg,
                rgba(1, 2, 5, .70),
                rgba(1, 2, 5, .20) 50%,
                rgba(1, 2, 5, .70)),
            url("../desktop-header-bg.png") center 48% / cover no-repeat !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb {
        min-height: 72px !important;
        width: 100% !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-img {
        width: clamp(92px, 24vw, 130px) !important;
        max-height: 70px !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle,
    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 12px !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions {
        gap: 6px !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* =========================================================
   Canonical Header — Desktop Hero Composition
   Tuned for the new purple/green cave artwork.
========================================================= */

@media (min-width: 1181px) {

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-main-frame {
        min-height: 220px !important;

        background:
            linear-gradient(90deg,
                rgba(1, 2, 5, .46) 0%,
                rgba(1, 2, 5, .12) 24%,
                rgba(1, 2, 5, .02) 50%,
                rgba(1, 2, 5, .12) 76%,
                rgba(1, 2, 5, .46) 100%),
            linear-gradient(180deg,
                rgba(2, 3, 7, .06) 0%,
                rgba(2, 3, 7, .22) 100%),
            url("../desktop-header-bg.png") center 48% / cover no-repeat !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-orb {
        width: min(100%, 390px) !important;
        min-height: 150px !important;
    }

    body:not(.wp-admin) .ll-c4-header-shell .ll-c4-logo-img {
        width: clamp(220px, 19vw, 340px) !important;
        max-height: 200px !important;
    }
}

/* =========================================================
   Canonical Header — Action Button Polish
========================================================= */

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle {
    border-color: rgba(212, 175, 55, .44) !important;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(125, 60, 199, .18),
            transparent 46%),
        linear-gradient(180deg,
            rgba(14, 11, 24, .94),
            rgba(5, 5, 10, .98)) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .025),
        inset 0 0 18px rgba(125, 60, 199, .16),
        0 10px 24px rgba(0, 0, 0, .44) !important;
}

body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action:hover,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-actions .ll-c4-action:focus-visible,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle:hover,
body:not(.wp-admin) .ll-c4-header-shell .ll-c4-mobile-toggle:focus-visible {
    border-color: rgba(138, 255, 0, .72) !important;

    color: var(--ll-header-gold-soft) !important;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(138, 255, 0, .10),
            transparent 44%),
        linear-gradient(180deg,
            rgba(18, 13, 30, .96),
            rgba(5, 5, 10, .99)) !important;

    box-shadow:
        inset 0 0 18px rgba(125, 60, 199, .20),
        0 0 0 3px rgba(138, 255, 0, .08),
        0 0 18px rgba(138, 255, 0, .10),
        0 12px 26px rgba(0, 0, 0, .48) !important;

    transform: translateY(-1px) !important;
}

/* =========================================================
   Canonical Header — Desktop Navigation Rail
========================================================= */

@media (min-width: 1181px) {

    body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav {
        position: relative !important;
        isolation: isolate !important;

        background:
            radial-gradient(ellipse at 50% 0%,
                rgba(111, 38, 164, .13) 0%,
                rgba(111, 38, 164, .04) 38%,
                transparent 68%),
            linear-gradient(90deg,
                rgba(3, 4, 9, .98) 0%,
                rgba(9, 7, 17, .96) 28%,
                rgba(10, 7, 19, .96) 50%,
                rgba(5, 10, 11, .96) 72%,
                rgba(3, 4, 9, .98) 100%) !important;

        border-top: 1px solid rgba(212, 175, 55, .18) !important;
        border-bottom: 1px solid rgba(125, 60, 199, .20) !important;

        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .018),
            inset 0 -14px 30px rgba(0, 0, 0, .20),
            0 12px 34px rgba(0, 0, 0, .20) !important;
    }

    /* Fine illuminated seam directly beneath the cave hero. */
    body:not(.wp-admin) .ll-c4-header-shell+.ll-c4-desktop-nav::before {
        content: "" !important;

        position: absolute !important;
        top: -1px !important;
        left: 50% !important;

        width: min(860px, 72vw) !important;
        height: 1px !important;

        transform: translateX(-50%) !important;

        background:
            linear-gradient(90deg,
                transparent 0%,
                rgba(125, 60, 199, .25) 18%,
                rgba(212, 175, 55, .50) 38%,
                rgba(138, 255, 0, .58) 50%,
                rgba(212, 175, 55, .50) 62%,
                rgba(125, 60, 199, .25) 82%,
                transparent 100%) !important;

        box-shadow:
            0 0 12px rgba(138, 255, 0, .10),
            0 0 20px rgba(125, 60, 199, .10) !important;

        pointer-events: none !important;
        z-index: 0 !important;
    }
}