/* ── DOSSIER DROPDOWNS ───────────────────────────────────────────────────────
   One look for every quick-link dropdown on the site, matching the dossier tabs
   on the candle page: a tab with 45-degree sides that fills with the page accent
   and flips to dark text when it is open.

   Colour comes from whatever the page already defines, in this order:
     --dd-accent  (set one explicitly to override)
     --theme-color
     --gold
   so this file can be dropped into a page without touching its palette.

   It restyles both dropdown conventions in use:
     .nav-dropdown-wrap / -btn / -menu / -item   (opens on hover)
     .dd / .wbtn / .dd-menu / .dd-item           (opens on click, .open)
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --dd-ink:  #0a0710;
    --dd-bg:   rgba(6,8,14,0.97);
}
/* resolved per dropdown, not once at the root, so a single wrapper can set its
   own --dd-accent and have the tab, its trim and its menu all follow */
.nav-dropdown-wrap, .dd, .font-picker-btn, .nav-dropdown-btn {
    --dd-hue: var(--dd-accent, var(--theme-color, var(--gold, #e8a020)));
}

/* ── section colours ─────────────────────────────────────────────────────── */
.nav-dropdown-wrap.dd-aw   { --dd-accent: #ffd23f; }   /* Alien Worlds  */
.nav-dropdown-wrap.dd-pd   { --dd-accent: #4ea8ff; }   /* Planet Defenders */
.nav-dropdown-wrap.dd-ale  { --dd-accent: #46d98a; }   /* Alien Legends */
.nav-dropdown-wrap.dd-util { --dd-accent: #b07dff; }   /* Utility       */
#lang-picker               { --dd-accent: #e8ecf5; }   /* Language      */

/* ── the tab ─────────────────────────────────────────────────────────────── */
.nav-dropdown-btn,
.font-picker-btn,
.dd > .wbtn {
    -webkit-clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 100%, 0 100%);
    clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 100%, 0 100%);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 22px 7px !important;
    /* a 2px trim of the section colour, over frosted glass tinted the same.
       The last layer is an opaque band in the bar's own colour: the tab sits on
       top of the header's rule, and without it the rule shows through the glass. */
    background:
        linear-gradient(to bottom, var(--dd-hue) 0 2px, transparent 2px),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--dd-hue) 30%, transparent) 0%,
            color-mix(in srgb, var(--dd-hue) 10%, transparent) 46%,
            color-mix(in srgb, var(--dd-hue) 17%, transparent) 100%),
        linear-gradient(to top, var(--dd-bar-bg, #06080e) 0 var(--dd-bar-rule, 2px),
                                transparent var(--dd-bar-rule, 2px)) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.35);
    backdrop-filter: blur(7px) saturate(1.35);
    color: var(--dd-hue);
    line-height: 1.2;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    transition: background 0.15s, color 0.15s, filter 0.15s;
}
.nav-dropdown-btn:hover,
.font-picker-btn:hover,
.dd > .wbtn:hover,
.nav-dropdown-wrap:hover .nav-dropdown-btn {
    background:
        linear-gradient(to bottom, var(--dd-hue) 0 2px, transparent 2px),
        linear-gradient(to bottom,
            color-mix(in srgb, var(--dd-hue) 46%, transparent) 0%,
            color-mix(in srgb, var(--dd-hue) 20%, transparent) 46%,
            color-mix(in srgb, var(--dd-hue) 28%, transparent) 100%),
        linear-gradient(to top, var(--dd-bar-bg, #06080e) 0 var(--dd-bar-rule, 2px),
                                transparent var(--dd-bar-rule, 2px)) !important;
    color: #fff;
    filter: drop-shadow(0 -2px 7px color-mix(in srgb, var(--dd-hue) 55%, transparent));
}
/* open, or marking the current page: solid accent, dark text */
.nav-dropdown-btn.active,
.dd.open > .wbtn,
.nav-dropdown-wrap:hover .nav-dropdown-btn.active {
    background: linear-gradient(to bottom,
        color-mix(in srgb, var(--dd-hue) 100%, white 18%),
        var(--dd-hue)) !important;
    color: var(--dd-ink) !important;
    filter: drop-shadow(0 -2px 8px color-mix(in srgb, var(--dd-hue) 45%, transparent));
}

/* ── sit the tabs flush on the bar so they read as tabs out of a folder ─── */
.global-header { align-items: stretch !important; }
.global-header .logo-section { align-items: center; }
.global-header .nav-links {
    align-items: flex-end;
    /* clear the header's bottom padding AND its 2px rule, so the tabs sit over
       the line rather than having it run across their widest edge */
    margin-bottom: calc(-1 * (var(--dd-bar-pad, 15px) + var(--dd-bar-rule, 2px)));
    padding-bottom: 0;
    gap: 6px;
    position: relative;
    z-index: 1;
}
.global-header .nav-links > * { align-self: flex-end; }
.global-header .nav-dropdown-wrap { display: flex; align-items: flex-end; }
/* every tab ends on the same baseline, whatever is inside it */
.global-header .nav-dropdown-btn,
.global-header .nav-links > .nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; white-space: nowrap;          /* keep the caret on the label's line */
    min-height: 38px; box-sizing: border-box; margin: 0;
    /* the last 2px sit on the rule, so the tab covers it instead of being cut */
    padding-bottom: calc(7px + var(--dd-bar-rule, 2px)) !important;
}
.global-header .nav-links > .nav-btn { padding: 8px 16px 7px; }
.global-header .nav-links img { flex-shrink: 0; margin-right: 0 !important; }
.global-header .nav-links > .nav-btn { border-radius: 4px 4px 0 0; }
#lang-picker .nav-dropdown-btn { letter-spacing: 0; }

/* The trim on the angled sides. clip-path cuts a border off, so this is an
   even-odd ring — the tab's outline minus a copy inset by 2px — painted behind
   the label but in front of the tab's own background. */
.nav-dropdown-btn::before,
.font-picker-btn::before,
.dd > .wbtn::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: var(--dd-hue);
    -webkit-clip-path: polygon(evenodd,
        11px 0, calc(100% - 11px) 0, 100% 100%, 0 100%,
        2px 100%, calc(100% - 2px) 100%, calc(100% - 13px) 2px, 13px 2px);
    clip-path: polygon(evenodd,
        11px 0, calc(100% - 11px) 0, 100% 100%, 0 100%,
        2px 100%, calc(100% - 2px) 100%, calc(100% - 13px) 2px, 13px 2px);
}

/* ── the folder under it ─────────────────────────────────────────────────── */
.nav-dropdown-menu,
.dd .dd-menu {
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    border: none !important;
    border-top: 2px solid var(--dd-hue) !important;
    border-radius: 0 !important;
    background: var(--dd-bg) !important;
    padding: 4px 0 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,0.85) !important;
}

/* ── the files inside ────────────────────────────────────────────────────── */
.nav-dropdown-item,
.dd .dd-item {
    color: #b9c2cf !important;          /* was #555 on several pages — 2.7:1 */
    white-space: nowrap;                /* two-word labels must not wrap */
    border-radius: 0 !important;
    padding: 7px 16px !important;
    letter-spacing: 1.3px;
    border-left: 2px solid transparent;
    transition: background 0.13s, color 0.13s, border-color 0.13s;
}
.nav-dropdown-item:hover,
.dd .dd-item:hover {
    background: color-mix(in srgb, var(--dd-hue) 14%, transparent) !important;
    color: var(--dd-hue) !important;
    border-left-color: var(--dd-hue);
}
.nav-dropdown-item.active,
.dd .dd-item.active {
    color: var(--dd-hue) !important;
    border-left-color: var(--dd-hue);
    background: color-mix(in srgb, var(--dd-hue) 8%, transparent) !important;
}

/* Browsers without color-mix fall back to the accent at full strength, which
   would drown the resting tab — keep those on a plain translucent ground. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .nav-dropdown-btn,
    .font-picker-btn,
    .dd > .wbtn                    { background:
        linear-gradient(to bottom, var(--dd-hue) 0 2px, transparent 2px),
        rgba(255,255,255,0.07) !important; }
    .nav-dropdown-btn:hover,
    .dd > .wbtn:hover,
    .nav-dropdown-wrap:hover .nav-dropdown-btn { background: rgba(255,255,255,0.12); }
    .nav-dropdown-item:hover,
    .dd .dd-item:hover             { background: rgba(255,255,255,0.08) !important; }
    .nav-dropdown-item.active,
    .dd .dd-item.active            { background: rgba(255,255,255,0.05) !important; }
}