/* ============================================
   Header Widget Styles
   ============================================ */

/* Base header styles */
.header-widget {
    position: relative;
    z-index: 1000;

    /* Brand sizing tokens - the logo height is derived from these so the
       mark and the site name / tagline text column can never drift apart.
       Overridden per-state below (shrunk, compact, mobile, no-tagline). */
    --brand-name-size: 1.25rem;
    --brand-tagline-size: 0.75rem;
    --brand-line-height: 1.2;
}

/* Hide desktop navbar on mobile - we use custom mobile menu instead */
@media (max-width: 1199.98px) {
    .header-widget #main-navbar {
        display: none !important;
    }
}

/* Brand inner: logo + text content side by side */
.navbar-brand-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* No tagline configured -> the mark should match the name line alone. */
.navbar-brand-inner:not(:has(.navbar-brand-tagline)) {
    --brand-tagline-size: 0rem;
}

/* Logo in navbar brand - height tracks the text column height (name +
   tagline line boxes) so the drawn mark reads the same size as the text
   next to it. --brand-logo-ink corrects for transparent padding baked into
   the logo file itself (see .brand-logo-padded below); it defaults to 1 for
   uploaded logos, which are assumed to be cropped tight already. */
.navbar-brand-logo {
    --brand-logo-ink: 1;
    height: calc(
        (var(--brand-name-size) + var(--brand-tagline-size))
        * var(--brand-line-height) / var(--brand-logo-ink)
    );
    width: auto;
    flex-shrink: 0;
}

/* Bundled Eventure marks (web/images/logos/eventure-*.png) carry ~8%
   transparent padding on every edge - measured ink bounding box is 0.8405 of
   the file height - so the box must be scaled up for the drawn circle to
   actually match the text block. */
.navbar-brand-logo.brand-logo-padded {
    --brand-logo-ink: 0.8405;
}

/* Logo-only brand (e.g. a community with no name/tagline configured): there
   is no text column to match, so fall back to a fixed height. */
.navbar-brand-inner:not(:has(.navbar-brand-content)) .navbar-brand-logo {
    height: 40px;
}

/* Text content: site name + tagline stacked vertically */
.navbar-brand-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: var(--brand-line-height);
}

.navbar-brand-text {
    display: block;
    font-size: var(--brand-name-size);
}

/* Beta marker pill riding high next to the site name (platform header only) */
.navbar-brand-beta {
    position: relative;
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: super;
    border-radius: 4px;
    color: currentColor;
    opacity: 0.55;
    background: transparent;
    border: 1px solid currentColor;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease,
        box-shadow 0.2s ease, color 0.2s ease;
}

.navbar-brand:hover .navbar-brand-beta {
    opacity: 0.8;
}

/* Flashy-but-discrete direct-hover: a small pill that shimmers through a
   scrolling rainbow gradient while its hue rotates, giving each hover a
   lively, ever-changing colour. */
.navbar-brand-beta:hover {
    opacity: 1;
    color: #fff;
    border-color: transparent;
    background: linear-gradient(120deg,
        #ff3d81, #ff8a3d, #ffd23d, #43e97b, #38b6ff, #b06bff, #ff3d81);
    background-size: 320% 320%;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 9px rgba(255, 61, 129, 0.55), 0 0 3px rgba(255, 255, 255, 0.35);
    transform: translateY(-1px) scale(1.1);
    animation: navbar-brand-beta-party 2.6s linear infinite;
}

@keyframes navbar-brand-beta-party {
    0% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    100% {
        background-position: 320% 50%;
        filter: hue-rotate(360deg);
    }
}

/* Light sweep that glides across the pill when the whole home link is hovered */
.navbar-brand-beta::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        currentColor 50%,
        transparent 100%
    );
    opacity: 0;
    transform: translateX(-180%) skewX(-18deg);
}

.navbar-brand:hover .navbar-brand-beta::after {
    animation: navbar-brand-beta-shine 0.9s ease-out;
}

@keyframes navbar-brand-beta-shine {
    0% {
        transform: translateX(-180%) skewX(-18deg);
        opacity: 0;
    }
    10% {
        opacity: 0.25;
    }
    90% {
        opacity: 0.25;
    }
    100% {
        transform: translateX(320%) skewX(-18deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-brand:hover .navbar-brand-beta::after {
        animation: none;
    }

    /* Keep the colour, drop the motion for reduced-motion users. */
    .navbar-brand-beta:hover {
        animation: none;
        background-position: 50% 50%;
    }
}

/* ============================================
   Brand logo landing entrance
   Played on every page load (class added by
   initBrandLogoEntrance() in header.js): the
   logo mark starts zoomed out and slightly
   rotated, then "lands" onto the header with a
   small overshoot; the brand text fades in as
   the logo touches down.
   ============================================ */
.navbar-brand.brand-landing .navbar-brand-logo {
    animation: navbar-brand-logo-landing 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    transform-origin: center;
}

.navbar-brand.brand-landing .navbar-brand-content {
    animation: navbar-brand-content-arrive 0.5s ease-out 0.35s both;
}

@keyframes navbar-brand-logo-landing {
    0% {
        opacity: 0;
        transform: scale(2.4) rotate(-30deg) translateY(-8px);
    }
    55% {
        opacity: 1;
        transform: scale(1.06) rotate(4deg) translateY(0);
    }
    75% {
        transform: scale(0.94) rotate(-2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes navbar-brand-content-arrive {
    0% {
        opacity: 0;
        transform: translateX(-6px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Collapse the landing to a plain short fade - no scale/rotate. */
    .navbar-brand.brand-landing .navbar-brand-logo,
    .navbar-brand.brand-landing .navbar-brand-content {
        animation: navbar-brand-fade-in 0.4s ease-out both;
    }

    /* Idle wiggles and the logo hover moves are skipped in JS under reduced
       motion; this is the CSS-side backstop in case a class is ever added
       regardless. */
    .navbar-brand.brand-idle-shake .navbar-brand-logo,
    .navbar-brand.brand-idle-bounce .navbar-brand-logo,
    .navbar-brand.brand-idle-swing .navbar-brand-logo,
    .navbar-brand.brand-idle-spin .navbar-brand-logo,
    .navbar-brand.brand-idle-jello .navbar-brand-logo,
    .navbar-brand.brand-idle-wobble .navbar-brand-logo,
    .navbar-brand.brand-idle-tada .navbar-brand-logo {
        animation: none;
    }
}

@keyframes navbar-brand-fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* ============================================
   Brand logo idle wiggle + hover moves
   The idle timer (initBrandLogoIdle() in
   header.js) plays one of the first four moves
   every 12-25s while the visitor stays on the
   page. Pointing at the logo mark
   (initBrandLogoHover()) plays a random move
   from the full set of seven immediately.
   Each keyframe starts and ends at the
   identity transform so it can't fight the
   shrink-on-scroll transition on the logo.
   ============================================ */
.navbar-brand.brand-idle-shake .navbar-brand-logo {
    animation: brand-idle-shake 0.7s ease-in-out;
    transform-origin: center;
}

.navbar-brand.brand-idle-bounce .navbar-brand-logo {
    animation: brand-idle-bounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center bottom;
}

.navbar-brand.brand-idle-swing .navbar-brand-logo {
    animation: brand-idle-swing 1.1s ease-out;
    transform-origin: top center;
}

.navbar-brand.brand-idle-spin .navbar-brand-logo {
    animation: brand-idle-spin 1.0s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.navbar-brand.brand-idle-jello .navbar-brand-logo {
    animation: brand-idle-jello 0.9s both;
    transform-origin: center;
}

.navbar-brand.brand-idle-wobble .navbar-brand-logo {
    animation: brand-idle-wobble 0.9s ease-in-out;
    transform-origin: center bottom;
}

.navbar-brand.brand-idle-tada .navbar-brand-logo {
    animation: brand-idle-tada 1s ease-in-out;
    transform-origin: center;
}

@keyframes brand-idle-shake {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-8deg);
    }
    45% {
        transform: rotate(8deg);
    }
    70% {
        transform: rotate(-4deg);
    }
}

@keyframes brand-idle-bounce {
    0%, 100% {
        transform: translateY(0) scale(1, 1);
    }
    30% {
        transform: translateY(-6px) scale(0.96, 1.06);
    }
    55% {
        transform: translateY(0) scale(1.06, 0.94);
    }
    75% {
        transform: translateY(-2px) scale(0.98, 1.02);
    }
}

@keyframes brand-idle-swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-14deg);
    }
    45% {
        transform: rotate(9deg);
    }
    70% {
        transform: rotate(-5deg);
    }
    90% {
        transform: rotate(2deg);
    }
}

@keyframes brand-idle-spin {
    0% {
        transform: rotateY(0deg) scale(1);
    }
    50% {
        transform: rotateY(180deg) scale(1.1);
    }
    100% {
        transform: rotateY(360deg) scale(1);
    }
}

@keyframes brand-idle-jello {
    0%, 100% {
        transform: skewX(0deg) skewY(0deg);
    }
    22% {
        transform: skewX(-10deg) skewY(-10deg);
    }
    44% {
        transform: skewX(6deg) skewY(6deg);
    }
    66% {
        transform: skewX(-3deg) skewY(-3deg);
    }
    88% {
        transform: skewX(1deg) skewY(1deg);
    }
}

@keyframes brand-idle-wobble {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }
    18% {
        transform: translateX(-6px) rotate(-8deg);
    }
    38% {
        transform: translateX(5px) rotate(6deg);
    }
    58% {
        transform: translateX(-3px) rotate(-4deg);
    }
    78% {
        transform: translateX(2px) rotate(2deg);
    }
}

@keyframes brand-idle-tada {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    15% {
        transform: scale(0.92) rotate(-3deg);
    }
    30%, 50%, 70% {
        transform: scale(1.08) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.08) rotate(-3deg);
    }
    90% {
        transform: scale(1.02) rotate(0deg);
    }
}

.navbar-brand-tagline {
    display: block;
    font-size: var(--brand-tagline-size);
    opacity: 0.7;
    line-height: var(--brand-line-height);
    text-align: left;
}

/* Sticky header */
.header-sticky .navbar.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

/* Shadow effect */
.header-shadow .navbar {
    box-shadow: var(--shadow-sm);
}

/* Shrink on scroll - base state with transitions for smooth unshrink */
.header-shrink-on-scroll .navbar {
    transition: padding var(--duration-300) var(--ease-in-out),
                height var(--duration-300) var(--ease-in-out),
                box-shadow var(--duration-300) var(--ease-in-out);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.header-shrink-on-scroll .navbar-brand-logo {
    transition: height var(--duration-300) var(--ease-in-out);
}
.header-shrink-on-scroll .navbar-brand-tagline {
    transition: opacity var(--duration-200) var(--ease-in-out),
                max-height var(--duration-200) var(--ease-in-out);
    max-height: 20px;
    opacity: 1;
    overflow: hidden;
}
.header-shrink-on-scroll .navbar-brand-inner {
    transition: gap var(--duration-300) var(--ease-in-out);
}
.header-shrink-on-scroll .nav-link {
    transition: font-size var(--duration-300) var(--ease-in-out),
                padding var(--duration-300) var(--ease-in-out),
                color var(--duration-300) var(--ease-in-out);
}
.header-shrink-on-scroll .navbar-brand-text {
    transition: font-size var(--duration-300) var(--ease-in-out);
}

/* Shrunk state - dramatic reduction to ~half height */
.header-shrink-on-scroll .navbar.shrunk {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    /* Re-derive the brand sizing tokens - .navbar-brand-logo's height and
       .navbar-brand-text's font-size both read these, so the mark and the
       (now tagline-less) name line box stay matched. */
    --brand-name-size: 0.875rem;
    --brand-tagline-size: 0rem;
}
.header-shrink-on-scroll .navbar.shrunk .navbar-brand-tagline {
    opacity: 0;
    max-height: 0;
    pointer-events: none;
}
.header-shrink-on-scroll .navbar.shrunk .nav-link {
    font-size: 0.8125rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.header-shrink-on-scroll .navbar.shrunk .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}
.header-shrink-on-scroll .navbar.shrunk .navbar-brand-inner {
    gap: 4px;
}

/* Dark theme: stronger shadow when shrunk */
[data-theme="dark"] .header-shrink-on-scroll .navbar.shrunk {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Glassmorphism effect - uses CSS custom properties for dynamic configuration */
.header-glassmorphism .navbar {
    /* Fallback for older browsers - uses RGB variables */
    background: rgba(var(--bg-primary-rgb, 255, 255, 255), var(--glassmorphism-opacity, 0.8)) !important;
    /* Modern browsers with color-mix (auto-fallback in browsers that don't support it) */
    backdrop-filter: blur(var(--glassmorphism-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glassmorphism-blur, 10px));
    border-bottom: 1px solid rgba(var(--border-default-rgb, 200, 200, 200), var(--glassmorphism-border-opacity, 0.2));
    transition: background-color var(--duration-300) var(--ease-in-out), backdrop-filter var(--duration-300) var(--ease-in-out);
}

/* Dark theme glassmorphism adjustment */
[data-theme="dark"] .header-glassmorphism .navbar {
    background: rgba(var(--bg-primary-rgb, 24, 24, 27), var(--glassmorphism-opacity, 0.8)) !important;
}

/* Ensure navbar items are visible with glassmorphism */
.header-glassmorphism .navbar .nav-link {
    color: var(--text-primary);
}

/* Border bottom effect */
.header-border-bottom .navbar {
    border-bottom: 1px solid var(--border-default);
}

/* Hide on scroll down / Show on scroll up */
.header-hide-on-scroll .navbar {
    transition: transform var(--duration-300) var(--ease-in-out), padding var(--duration-300) var(--ease-in-out), box-shadow var(--duration-300) var(--ease-in-out);
}
.header-hide-on-scroll .navbar.hidden {
    transform: translateY(-100%);
    box-shadow: none;
}

/* Transparent at top of page */
.header-transparent-top .navbar {
    transition: background-color var(--duration-300) var(--ease-in-out), box-shadow var(--duration-300) var(--ease-in-out), border-color var(--duration-300) var(--ease-in-out);
}
.header-transparent-top .navbar.at-top {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
}
.header-transparent-top .navbar.at-top .nav-link,
.header-transparent-top .navbar.at-top .navbar-brand {
    /* Ensure text is visible on transparent background */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Elevated effect on scroll */
.header-elevated .navbar {
    transition: box-shadow var(--duration-300) var(--ease-in-out), transform var(--duration-150) var(--ease-in-out);
}
.header-elevated .navbar.elevated {
    box-shadow: var(--shadow-lg);
}

/* Compact header - always minimal height */
.header-compact .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    --brand-tagline-size: 0rem;
}
.header-compact .navbar-brand-tagline {
    display: none;
}

/* Background variants */
/* Dark background - light text (regardless of theme) */
.header-bg-dark .navbar {
    background-color: var(--color-neutral-900) !important;
    color: var(--color-neutral-100);
}
.header-bg-dark .navbar .nav-link,
.header-bg-dark .navbar .navbar-brand,
.header-bg-dark .navbar .navbar-brand-text,
.header-bg-dark .navbar .navbar-brand-tagline {
    color: var(--color-neutral-100) !important;
}
.header-bg-dark .navbar .nav-link:hover {
    color: var(--color-neutral-300) !important;
}
.header-bg-dark .navbar .navbar-toggler {
    color: var(--color-neutral-100);
    border-color: rgba(255, 255, 255, 0.2);
}
.header-bg-dark .navbar .navbar-toggler-icon {
    filter: invert(1);
}
/* Override theme variations for dark header */
[data-theme="light"] .header-bg-dark .navbar .nav-link,
[data-theme="light"] .header-bg-dark .navbar .navbar-brand,
[data-theme="dark"] .header-bg-dark .navbar .nav-link,
[data-theme="dark"] .header-bg-dark .navbar .navbar-brand {
    color: var(--color-neutral-100) !important;
}

/* Light background - dark text (regardless of theme) */
.header-bg-light .navbar {
    background-color: var(--color-neutral-100) !important;
    color: var(--color-neutral-900);
}
.header-bg-light .navbar .nav-link,
.header-bg-light .navbar .navbar-brand,
.header-bg-light .navbar .navbar-brand-text,
.header-bg-light .navbar .navbar-brand-tagline {
    color: var(--color-neutral-900) !important;
}
.header-bg-light .navbar .nav-link:hover {
    color: var(--color-neutral-600) !important;
}
.header-bg-light .navbar .navbar-toggler {
    color: var(--color-neutral-900);
    border-color: rgba(0, 0, 0, 0.2);
}
.header-bg-light .navbar .navbar-toggler-icon {
    filter: invert(0);
}
/* Override theme variations for light header */
[data-theme="light"] .header-bg-light .navbar .nav-link,
[data-theme="light"] .header-bg-light .navbar .navbar-brand,
[data-theme="dark"] .header-bg-light .navbar .nav-link,
[data-theme="dark"] .header-bg-light .navbar .navbar-brand {
    color: var(--color-neutral-900) !important;
}

/* Gradient background - configurable via CSS variables */
/* Define defaults on the header element (can be overridden by inline styles) */
.header-bg-gradient {
    --header-gradient: linear-gradient(to right, var(--color-primary-600) 0%, var(--color-secondary-600) 100%);
    --header-gradient-text: var(--color-neutral-0);
}

/* Apply the gradient to navbar using inherited variables */
.header-bg-gradient .navbar {
    background-image: var(--header-gradient) !important;
    background-size: 200% 200% !important;
    color: var(--header-gradient-text);
}

/* Animated gradient (when animation is enabled) */
.header-bg-gradient.header-gradient-animated .navbar {
    /* Fallback animation */
    animation: header-gradient-shift 8s ease-in-out infinite alternate;
    /* Override with CSS variable values if supported */
    animation-name: var(--header-gradient-animation-name, header-gradient-shift);
    animation-duration: var(--header-gradient-animation-duration, 8s);
    animation-timing-function: var(--header-gradient-animation-timing, ease-in-out);
    animation-iteration-count: infinite;
    animation-direction: var(--header-gradient-animation-direction, alternate);
}

/* Gradient animation keyframes */
@keyframes header-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes header-gradient-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

@keyframes header-gradient-hue {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.header-bg-gradient .navbar .nav-link,
.header-bg-gradient .navbar .navbar-brand,
.header-bg-gradient .navbar .navbar-brand-text,
.header-bg-gradient .navbar .navbar-brand-tagline {
    color: var(--header-gradient-text, var(--color-neutral-0)) !important;
}
.header-bg-gradient .navbar .navbar-toggler {
    color: var(--header-gradient-text, var(--color-neutral-0));
    border-color: rgba(255, 255, 255, 0.2);
}
.header-bg-gradient .navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* ============================================
   Fixed Background Headers - Widget Styling
   ============================================ */

/* Dark background header - light icons/buttons */
.header-bg-dark .navbar .btn,
.header-bg-dark .navbar .theme-switcher-btn,
.header-bg-dark .navbar .dropdown-toggle,
.header-bg-dark .navbar i,
.header-bg-dark .navbar .fa,
.header-bg-dark .navbar .fas,
.header-bg-dark .navbar .far,
.header-bg-dark .navbar .fab {
    color: var(--color-neutral-100) !important;
}
.header-bg-dark .navbar .btn:hover,
.header-bg-dark .navbar .theme-switcher-btn:hover {
    color: var(--color-neutral-300) !important;
}

/* Light background header - dark icons/buttons */
.header-bg-light .navbar .btn,
.header-bg-light .navbar .theme-switcher-btn,
.header-bg-light .navbar .dropdown-toggle,
.header-bg-light .navbar i,
.header-bg-light .navbar .fa,
.header-bg-light .navbar .fas,
.header-bg-light .navbar .far,
.header-bg-light .navbar .fab {
    color: var(--color-neutral-900) !important;
}
.header-bg-light .navbar .btn:hover,
.header-bg-light .navbar .theme-switcher-btn:hover {
    color: var(--color-neutral-600) !important;
}

/* Gradient background header - icons/buttons use gradient text color */
.header-bg-gradient .navbar .btn,
.header-bg-gradient .navbar .theme-switcher-btn,
.header-bg-gradient .navbar .dropdown-toggle,
.header-bg-gradient .navbar i,
.header-bg-gradient .navbar .fa,
.header-bg-gradient .navbar .fas,
.header-bg-gradient .navbar .far,
.header-bg-gradient .navbar .fab {
    color: var(--header-gradient-text, var(--color-neutral-0)) !important;
}
.header-bg-gradient .navbar .btn:hover,
.header-bg-gradient .navbar .theme-switcher-btn:hover {
    opacity: 0.8;
}

/* Ensure these rules apply regardless of theme */
[data-theme="light"] .header-bg-dark .navbar .btn,
[data-theme="light"] .header-bg-dark .navbar .theme-switcher-btn,
[data-theme="light"] .header-bg-dark .navbar i,
[data-theme="dark"] .header-bg-dark .navbar .btn,
[data-theme="dark"] .header-bg-dark .navbar .theme-switcher-btn,
[data-theme="dark"] .header-bg-dark .navbar i {
    color: var(--color-neutral-100) !important;
}

[data-theme="light"] .header-bg-light .navbar .btn,
[data-theme="light"] .header-bg-light .navbar .theme-switcher-btn,
[data-theme="light"] .header-bg-light .navbar i,
[data-theme="dark"] .header-bg-light .navbar .btn,
[data-theme="dark"] .header-bg-light .navbar .theme-switcher-btn,
[data-theme="dark"] .header-bg-light .navbar i {
    color: var(--color-neutral-900) !important;
}

.header-bg-transparent .navbar {
    background-color: transparent !important;
    box-shadow: none;
    border-bottom: none;
}

/* Mobile menu enhancements */
@media (max-width: 767.98px) {
    .navbar {
        --brand-tagline-size: 0.6rem;
    }

    /* Improve mobile menu padding */
    .navbar-collapse {
        padding-top: 1rem;
    }

    .navbar-collapse .nav-item {
        margin-bottom: 0.5rem;
    }
}

/* Medium screens */
@media (max-width: 1199.98px) {
    .header-shrink-on-scroll .navbar {
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
    }
    .header-shrink-on-scroll .navbar.shrunk {
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
    }
}

/* Right zone - vertically center all nav items */
.navbar-nav.ms-auto {
    align-items: center;
    gap: var(--space-1);
}

/* Primary (left) nav - extra horizontal breathing room between items */
@media (min-width: 1200px) {
    .navbar-nav.header-nav-primary {
        gap: var(--space-3);
    }

    .navbar-nav.header-nav-primary > .nav-item > .nav-link {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }
}

.navbar-nav.ms-auto > .nav-item > .nav-link {
    display: inline-flex;
    align-items: center;
}

/* Tighten padding on right-zone icon items (cart, bell, theme, user) */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav.ms-auto .nav-link {
        padding-right: var(--space-1);
        padding-left: var(--space-1);
    }

    .navbar-nav.ms-auto #cart-widget .btn-link {
        padding-left: var(--space-1);
        padding-right: var(--space-1);
    }
}

/* Login label - subtle style next to icon */
.login-label {
    margin-left: var(--space-1-5, 0.375rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    opacity: 0.7;
}

/* Icon in menu items */
.nav-link i {
    margin-right: var(--space-2);
}

/* Active menu item styling */
.navbar-nav .nav-item .nav-link.active {
    color: var(--color-primary-600);
    font-weight: 500;
    position: relative;
}

/* Active underline indicator - use ::before to avoid conflict with dropdown-toggle ::after */
.navbar-nav .nav-item .nav-link.active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.5rem;
    right: 0.5rem;
    height: 2px;
    background-color: var(--color-primary-600);
    border-radius: 1px;
}

/* Dropdown toggle: extend underline to full width */
.navbar-nav .nav-item .nav-link.dropdown-toggle.active::before {
    right: 0.5rem; /* Match regular nav-link */
}

/* Remove active underline for mega menu trigger (Explore) */
.navbar-nav .megamenu-item .megamenu-trigger.active::before {
    display: none;
}

/* Hide Bootstrap's default dropdown caret */
.navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
}

/* Custom dropdown caret (matching megamenu style) */
.navbar-nav .dropdown-caret {
    font-size: 0.65em;
    transition: transform var(--duration-200, 200ms) var(--ease-out, ease-out);
    margin-left: var(--space-1, 0.25rem);
}

/* Rotate caret on hover and when dropdown is open */
.navbar-nav .nav-item.dropdown:hover .dropdown-caret,
.navbar-nav .nav-item.dropdown.show .dropdown-caret {
    transform: rotate(180deg);
}

/* DISABLE caret rotation on hover when hover is disabled */
[data-hover-disabled] .navbar-nav .nav-item.dropdown:hover .dropdown-caret {
    transform: none;
}

[data-hover-disabled] .navbar-nav .nav-item.dropdown.show .dropdown-caret {
    transform: rotate(180deg);
}

/* Mobile: Don't rotate on hover, only when open */
@media (max-width: 1199.98px) {
    .navbar-nav .nav-item.dropdown:hover .dropdown-caret {
        transform: none;
    }

    .navbar-nav .nav-item.dropdown.show .dropdown-caret {
        transform: rotate(180deg);
    }
}

/* Dark theme active state */
[data-theme="dark"] .navbar-nav .nav-item .nav-link.active {
    color: var(--color-primary-400);
}

[data-theme="dark"] .navbar-nav .nav-item .nav-link.active::before {
    background-color: var(--color-primary-400);
}

/* Active state for gradient background header */
.header-bg-gradient .navbar-nav .nav-item .nav-link.active {
    color: var(--header-gradient-text, var(--color-neutral-0));
    font-weight: 600;
}

.header-bg-gradient .navbar-nav .nav-item .nav-link.active::before {
    background-color: var(--header-gradient-text, var(--color-neutral-0));
}

/* Active state for dark background header */
.header-bg-dark .navbar-nav .nav-item .nav-link.active {
    color: var(--color-neutral-0) !important;
}

.header-bg-dark .navbar-nav .nav-item .nav-link.active::before {
    background-color: var(--color-neutral-0);
}

/* Active state for light background header */
.header-bg-light .navbar-nav .nav-item .nav-link.active {
    color: var(--color-primary-700) !important;
}

.header-bg-light .navbar-nav .nav-item .nav-link.active::before {
    background-color: var(--color-primary-700);
}

/* Ensure active states work regardless of theme */
[data-theme="dark"] .header-bg-dark .navbar-nav .nav-item .nav-link.active,
[data-theme="light"] .header-bg-dark .navbar-nav .nav-item .nav-link.active {
    color: var(--color-neutral-0) !important;
}

[data-theme="dark"] .header-bg-light .navbar-nav .nav-item .nav-link.active,
[data-theme="light"] .header-bg-light .navbar-nav .nav-item .nav-link.active {
    color: var(--color-primary-700) !important;
}

/* Mobile: Adjust active indicator for stacked nav */
@media (max-width: 767.98px) {
    .navbar-nav .nav-item .nav-link.active {
        padding-left: calc(var(--space-3, 0.75rem) + 6px); /* Add space for indicator */
    }

    .navbar-nav .nav-item .nav-link.active::before {
        left: 0;
        right: auto;
        width: 3px;
        height: auto;
        top: 0.25rem;
        bottom: 0.25rem;
        border-radius: 2px;
    }

    .navbar-nav .nav-item .nav-link.dropdown-toggle.active::before {
        right: auto; /* Reset for mobile */
    }
}

/* Dropdown menu items */
.navbar-nav .dropdown-menu {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
    z-index: 1040; /* Must be higher than Bootstrap sticky-top (1020) */
}

/* Desktop hover state for regular dropdowns (consistent with mega menus) */
@media (min-width: 1200px) {
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* DISABLE hover when data-hover-disabled is set on header */
    [data-hover-disabled] .navbar-nav .nav-item.dropdown:hover > .dropdown-menu {
        display: none;
    }

    /* ENSURE .show class always works (click behavior and state) */
    .navbar-nav .nav-item.dropdown.show > .dropdown-menu,
    [data-hover-disabled] .navbar-nav .nav-item.dropdown.show > .dropdown-menu {
        display: block;
    }
}

.navbar-nav .dropdown-item {
    color: var(--text-primary);
}

.navbar-nav .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

.navbar-nav .dropdown-item.active {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
    font-weight: var(--font-weight-medium);
    border-left: 3px solid var(--color-primary-500);
    padding-left: calc(var(--space-4) - 3px);
}

.navbar-nav .dropdown-item.active:hover {
    background-color: var(--color-primary-100);
    color: var(--color-primary-700);
}

/* Dark theme dropdown active state */
[data-theme="dark"] .navbar-nav .dropdown-item.active {
    background-color: var(--color-primary-900);
    color: var(--color-primary-300);
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .navbar-nav .dropdown-item.active:hover {
    background-color: var(--color-primary-900);
    color: var(--color-primary-300);
}

/* Accessibility improvements */
.navbar-toggler:focus {
    box-shadow: var(--focus-ring-shadow);
}

/* Smooth transitions */
.navbar {
    background-color: var(--header-bg);
}

.navbar,
.navbar-brand,
.nav-link {
    transition: all var(--duration-300) var(--ease-in-out);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .dropdown-caret {
        transition: none;
    }
    .header-shrink-on-scroll .navbar,
    .header-shrink-on-scroll .navbar-brand-logo,
    .header-shrink-on-scroll .navbar-brand-tagline,
    .header-shrink-on-scroll .navbar-brand-inner,
    .header-shrink-on-scroll .nav-link,
    .header-shrink-on-scroll .navbar-brand-text {
        transition-duration: 0ms !important;
    }
}

/* ============================================
   Notification Bell Badge
   ============================================ */

/* Badge on notification bell icon */
.notification-bell-widget .nav-link,
#notificationDropdown {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    transform: translate(50%, -50%);
}

/* Badge on cart icon */
.cart-count-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.6rem;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    transform: translate(50%, -50%);
}

/* ============================================
   Right-aligned Dropdowns - Viewport Boundary
   ============================================ */

/* Notification dropdown - prevent right edge overflow */
.notification-dropdown {
    right: 0;
    left: auto !important;
    /* Ensure it doesn't touch viewport edge */
    max-width: calc(100vw - var(--space-4, 1rem));
}

/* On smaller screens, ensure notification dropdown is more contained */
@media (max-width: 575.98px) {
    .notification-dropdown {
        width: calc(100vw - var(--space-4, 1rem)) !important;
        max-width: 320px;
        right: calc(-1 * var(--space-2, 0.5rem));
    }
}

/* Generic fix for all right-aligned dropdowns in navbar */
.navbar-nav .dropdown-menu-end {
    /* Ensure dropdowns don't overflow viewport right edge */
    right: 0;
    left: auto !important;
}

/* For dropdowns near right edge, add some breathing room */
.navbar-nav.ms-auto .dropdown-menu {
    /* Limit width to prevent viewport overflow */
    max-width: calc(100vw - var(--space-4, 1rem));
}

/* ============================================
   User Dropdown - 2-column layout (many items)
   ============================================ */

/* Activated by widgets/views/_user-dropdown.php when getMyMenuItems()
   returns >= 10 entries - prevents the bottom rows from being cropped
   on shorter viewports once enough features have been revealed by the
   mascot. Mobile breakpoint and giveaway dropdown stay single-column.
   Selectors mirror the `.navbar-nav .nav-item.dropdown:hover/.show`
   rules above so we outrank their `display: block` and switch to a
   2-column grid layout for the user dropdown specifically. */
@media (min-width: 1200px) {
    .navbar-nav .nav-item.dropdown:hover > .dropdown-menu.dropdown-menu-2col,
    .navbar-nav .nav-item.dropdown.show > .dropdown-menu.dropdown-menu-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-1, 4px);
        min-width: 520px;
        max-width: calc(100vw - var(--space-4, 1rem));
    }
    .dropdown-menu.dropdown-menu-2col > .dropdown-col-full {
        grid-column: 1 / -1;
    }
    .dropdown-menu.dropdown-menu-2col > li > .dropdown-item {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Top-right account dropdown (_user-dropdown.php): sizes to its widest row
   (the wh-dropdown-grid columns below use max-content) instead of a fixed
   min-width, so short label sets stay compact and long ones don't wrap. Capped
   so it can't run away on a very long org name - that name truncates instead,
   see .wh-org-name-truncate. */
.wh-account-menu-grid {
    width: max-content;
    min-width: 280px;
    max-width: min(32rem, calc(100vw - var(--space-4, 1rem)));
}
/* The acting-org header row must not drive the menu's width:max-content -
   width:0 + min-width:100% zeroes its intrinsic contribution (the menu is
   sized by the quick-links grid instead) while still rendering full-width,
   so the name below ellipsizes to exactly the leftover space with no dead
   padding on the right. Badges and the chevron are shrink-proof; only the
   name gives way. */
.wh-org-header-row {
    width: 0;
    min-width: 100%;
}
.wh-org-header-row > :not(.wh-org-name-truncate) {
    flex-shrink: 0;
}
.wh-org-name-truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Neutral outline chip for the current org's role (Owner/Admin/Member) next
   to the plan pill - text-bg-light had no dark-theme override and rendered
   as a hardcoded white block. */
.wh-role-chip {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Account dropdown header row: avatar + name + email, replacing the old
   bare "click the avatar, guess who you are" opening. Platform operators
   get a small pulsing shield next to their name instead of a full banner.
   Avatar and name are sibling Profile links; the Settings cog
   (.wh-account-settings-btn) sits right after the name, while the aside's
   chip row (lang/theme) owns the row's far right. */
.wh-account-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    /* No own vertical padding - the dropdown-menu's ~8px top padding and the
       box's own inner padding provide the breathing room. */
    padding: 0 var(--space-3, 12px);
}
/* Shrink-to-fit: the profile box takes only the width its avatar + name +
   email need (flex-basis auto, no grow). min-width:0 still lets the
   email ellipsize when the menu is genuinely narrow. Avatar and name are
   two sibling Profile anchors (an anchor can't nest the Settings cog link
   that sits after the name), so the box itself carries no link chrome. */
.wh-account-header-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex: 0 1 auto;
    min-width: 0;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border-radius: var(--radius-md, 6px);
}
/* The box keeps the old whole-anchor hover tone even though it's now split
   into sibling links; the Profile tint follows the name link's active state
   via :has (no anchor wraps the box anymore). */
.wh-account-header-main:hover {
    background-color: var(--bg-tertiary);
}
.wh-account-header-main:has(.wh-account-header-name-link.active) {
    background-color: var(--color-primary-100);
}
[data-theme="dark"] .wh-account-header-main:has(.wh-account-header-name-link.active) {
    background-color: var(--color-primary-900);
}
.wh-account-header-avatar-link {
    display: flex;
    flex-shrink: 0;
}
.wh-account-header-name-link {
    display: flex;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}
/* Stretched link: the name link's ::after blankets the whole identity box
   (.wh-account-header-main is the position:relative anchor), so clicking
   anywhere on the box - avatar, email, whitespace - opens the Profile.
   The Settings cog and the operator shield sit above the overlay
   (position:relative + z-index) so they stay individually interactive. */
.wh-account-header-name-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.wh-account-header-name-link:hover .wh-account-header-name,
.wh-account-header-name-link:focus-visible .wh-account-header-name,
.wh-account-header-name-link.active .wh-account-header-name {
    color: var(--color-primary-600);
}
[data-theme="dark"] .wh-account-header-name-link:hover .wh-account-header-name,
[data-theme="dark"] .wh-account-header-name-link:focus-visible .wh-account-header-name,
[data-theme="dark"] .wh-account-header-name-link.active .wh-account-header-name {
    color: var(--color-primary-400);
}

/* Settings cog: a plain icon button sitting right after the user's name
   (same .wh-account-header-name-row as the operator shield), above the
   stretched Profile link overlay (z-index 2 over its z-index 1). Muted at
   rest, primary + a quarter-turn spin on hover/focus of the cog itself, and
   it also spins whenever the whole identity box is hovered (second rule
   below) so hovering the user's name/avatar hints at Settings too. The
   tooltip carries the "Settings" label. */
.wh-account-settings-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px 4px;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    text-decoration: none;
}
.wh-account-settings-btn i {
    transition: transform 0.4s ease;
}
.wh-account-settings-btn:hover,
.wh-account-settings-btn:focus-visible,
.wh-account-header-main:hover .wh-account-settings-btn {
    color: var(--color-primary-600);
    text-decoration: none;
}
.wh-account-settings-btn:hover i,
.wh-account-settings-btn:focus-visible i,
.wh-account-header-main:hover .wh-account-settings-btn i {
    transform: rotate(90deg);
}
.wh-account-settings-btn.active {
    color: var(--color-primary-600);
}
[data-theme="dark"] .wh-account-settings-btn:hover,
[data-theme="dark"] .wh-account-settings-btn:focus-visible,
[data-theme="dark"] .wh-account-header-main:hover .wh-account-settings-btn,
[data-theme="dark"] .wh-account-settings-btn.active {
    color: var(--color-primary-400);
}
.wh-account-header-avatar {
    width: 44px;
    height: 44px;
    object-fit: cover;
    flex-shrink: 0;
}
.wh-account-header-text {
    min-width: 0;
    flex: 1 1 auto;
}
.wh-account-header-name-row {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}
.wh-account-header-name {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wh-account-header-email {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wh-account-header-shield {
    position: relative;
    z-index: 2;
    color: var(--color-warning-500, #f0ad4e);
    font-size: 0.8rem;
    flex-shrink: 0;
    cursor: default;
}

/* One-line sky strip (SkyCardWidget, mode=strip): moon phase + sunrise/sunset.
   Muted so it reads as ambient context, not another menu item - it links
   through to the full Sky Today panel on the profile page. Reused verbatim in
   the mobile identity card (mobile-menu.css loads alongside this file), where
   it stays on its own line under the role badge. */
.wh-account-sky {
    display: block;
    padding: 0 var(--space-3, 12px) var(--space-1, 4px);
    font-size: 0.78rem;
    color: var(--text-muted);
    text-decoration: none;
}
.wh-account-sky:hover {
    color: var(--text-secondary, var(--text-muted));
    text-decoration: none;
}
.wh-account-sky-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* In the desktop dropdown header row, float the sky strip + theme chips in a
   stacked right-hand column instead of the strip alone sitting inline - keeps
   username/email from shifting down. .wh-account-header is display:flex;
   align-items:center and .wh-account-header-text is flex:1 1 auto, so this
   column just gets pushed to the far edge and pinned to the top of the row.
   Theme lives here (not the menu-body preferences row,
   widgets/views/_preferences-rows.php) because it's a personal display
   preference that travels with the identity block. */
.wh-account-header-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Chip row over the sky strip: the aside stretches the profile box's
       full height, space-between pinning the strip to the email line. */
    justify-content: space-between;
    gap: var(--space-0-5, 2px);
    /* Follows the shrink-to-fit profile box instead of pinning to the menu's
       far right edge (margin-left:auto). */
    margin-left: var(--space-2, 8px);
    /* Ends at the email's bottom, not the box's - the box has this much
       inner bottom padding, so the strip and the email share a baseline. */
    margin-bottom: var(--space-1, 4px);
    align-self: stretch;
    flex-shrink: 0;
}
.wh-account-header-aside .wh-account-sky {
    padding: 0;
    white-space: nowrap;
    /* Same size as .wh-account-header-email on the left - the moon emoji
       inherits this too, so icon and labels match the email line. */
    font-size: 0.78rem;
}

/* Slightly larger theme chips in the account header aside than the stock
   .theme-switcher-account size (scoped here so other surfaces using the
   account switcher keep theirs). */
.wh-account-header-aside .theme-switcher-account .theme-segment-btn {
    width: calc(1.6rem + 2px);
    height: calc(1.6rem + 2px);
}
.wh-account-header-aside .theme-switcher-account .theme-segment-icon {
    font-size: 0.95rem;
}

/* Controls row in the aside: language flag chip | divider | theme chips. */
.wh-account-header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}
.wh-controls-divider {
    width: 1px;
    height: 1.1rem;
    background: var(--border-default);
    margin: 0 var(--space-1, 4px);
    flex-shrink: 0;
}

/* The language toggle: plain FLAG + code (no chip circle/ring) - the
   layout 'flag+code' makes language-flag-menu.php render the current code
   beside the flag (.language-flag-menu-current-code, web/css/language.css).
   Height matches the theme chips beside it so the row stays aligned. */
.wh-account-lang .language-flag-menu-toggle {
    width: auto;
    height: calc(1.6rem + 2px);
    padding: 0 2px;
    font-size: 0.95rem;
    color: var(--text-secondary);
}
.wh-account-lang .language-flag-menu-current-code {
    font-size: 0.72rem;
}
.wh-account-lang .language-flag-menu-toggle:hover,
.wh-account-lang .language-flag-menu-toggle:focus {
    color: var(--text-primary);
    transform: scale(1.08);
}

/* Active language inside the chip's dropdown gets the same primary ring
   as the chip itself (the stock .language-flag-menu-item.active is a flat
   tint - see web/css/language.css). */
.wh-account-lang .language-flag-menu-item.active {
    border: 1px solid var(--color-primary-500);
}

/* Two-column item grid shared by the user dropdown (Personal, Org quick-links)
   and the "+ Add" CTA menu sections. Reflows automatically, so a hidden item
   (feature flag / mascot reveal) just repacks the rest. Each section is its
   own <div class="wh-dropdown-grid"> block, but they all share one dropdown:
   the <ul> (.wh-account-menu-grid) is width:max-content, sized to the WIDEST
   row across every section (usually Org quick-links, with its longer labels
   and badges, or the header's org-name/email line) - every other section's
   div then stretches to that same width as a plain block box. The 1fr max
   below lets each column claim its share of that leftover width instead of
   stopping at its own min-content and leaving a blank strip on the right
   (what used to look like a phantom 3rd column); min-content as the floor
   still guarantees no label ever wraps (items are white-space: nowrap, so
   their min-content equals their full width). */
.wh-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(min-content, 1fr));
    column-gap: var(--space-1, 4px);
    row-gap: var(--space-px, 1px);
    padding: 0 var(--space-2, 8px);
}
.wh-dropdown-grid .dropdown-item {
    border-radius: var(--radius-md, 6px);
    padding-top: var(--space-1-5, 6px);
    padding-bottom: var(--space-1-5, 6px);
    white-space: nowrap;
    line-height: 1.2;
}
.wh-dropdown-grid .wh-grid-full {
    grid-column: 1 / -1;   /* Website Builder accent row spans both columns */
}

/* Preferences row (widgets/views/_preferences-rows.php): one full-width row
   per control (theme row only in the guest menu - the authenticated menu's
   theme chips live in the header aside instead, see .wh-account-header-aside
   above). Plain flex, left-aligned - unlike .wh-dropdown-grid below there's
   only ever one group per row now, so there's no second column to balance. */
.wh-prefs-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
}
.wh-prefs-row-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    color: var(--text-muted);
    font-size: 0.8rem;
}
.wh-prefs-row-label {
    white-space: nowrap;
    margin-right: 2px;
}

/* Invite Friends: deliberately distinct from the neutral menu items - a
   soft green "grow together" accent (referral = planting a seed), sitting
   right next to Logout so the invite happens on the way out. */
.wh-invite-friends-item {
    color: var(--color-success-600, #16a34a);
    font-weight: 600;
    background: rgba(var(--color-success-500-rgb, 34, 197, 94), 0.08);
}
.wh-invite-friends-item i {
    color: var(--color-success-500, #22c55e);
}
.wh-invite-friends-item:hover,
.wh-invite-friends-item:focus {
    color: var(--color-success-700, #15803d);
    background: rgba(var(--color-success-500-rgb, 34, 197, 94), 0.16);
}

/* Logout: sits right next to Invite Friends in the same row - a matching
   soft red accent so the pair reads as a balanced exit row (green left,
   red right), rather than Logout looking like an unstyled leftover. */
.wh-logout-item {
    color: var(--color-error-600, #dc2626);
    font-weight: 600;
    background: rgba(var(--color-error-500-rgb, 239, 68, 68), 0.08);
}
.wh-logout-item i {
    color: var(--color-error-500, #ef4444);
}
.wh-logout-item:hover,
.wh-logout-item:focus {
    color: var(--color-error-700, #b91c1c);
    background: rgba(var(--color-error-500-rgb, 239, 68, 68), 0.16);
}
/* Exit row override: the shared .wh-dropdown-grid gives both columns an
   equal 1fr share, which stretches the icon-only Logout button into a wide
   colored slab and drags the whole dropdown wider than it needs to be.
   Here the invite CTA keeps the flexible share and Logout's column shrinks
   to its own content, so the button stays a compact, adaptive icon chip. */
.wh-exit-row {
    grid-template-columns: minmax(min-content, 1fr) auto;
}
.wh-logout-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--space-3, 12px);
    padding-right: var(--space-3, 12px);
}
.wh-logout-icon-only i {
    margin: 0;
}

/* Operator-only Clear Cache row: reuses the warning tone of the account
   header's "Platform Mode" shield (see .wh-account-header-shield) so both
   read as the same platform-operator affordance. */
.wh-operator-item {
    color: var(--color-warning-600, #b45309);
    background: rgba(var(--color-warning-500-rgb, 245, 158, 11), 0.08);
}
.wh-operator-item i {
    color: var(--color-warning-500, #f59e0b);
}
.wh-operator-item:hover,
.wh-operator-item:focus {
    color: var(--color-warning-700, #92400e);
    background: rgba(var(--color-warning-500-rgb, 245, 158, 11), 0.16);
}

/* ============================================
   "+ Add" CTA dropdown - sectioned 2-column layout
   ============================================ */

/* Desktop header dropdown AND mobile bottom-bar dropup: each section is a
   full-width header row plus a 2-column wh-dropdown-grid of create links,
   so the menu stays compact as the mascot/chain reveals more items. */
.cta-dropdown-menu {
    min-width: min(24rem, calc(100vw - var(--space-4, 1rem)));
    padding-bottom: var(--space-2, 8px);
}

.cta-dropdown-menu .cta-dropdown-section + .cta-dropdown-section {
    margin-top: var(--space-2, 8px);
    padding-top: var(--space-2, 8px);
    border-top: 1px solid var(--border-default);
}

.cta-dropdown-menu .dropdown-header {
    padding-top: 0;
    padding-bottom: var(--space-1, 4px);
}

/* Group label + optional inline "+ add new" shortcut sit on one row. */
.cta-dropdown-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
}

.cta-add-new {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    background: var(--color-primary-500, #3aa8e0);
    padding: 2px 10px;
    border-radius: 999px;
    margin-right: var(--space-3, 12px);
    transition: background 0.15s ease, transform 0.15s ease;
}

.cta-add-new:hover,
.cta-add-new:focus {
    text-decoration: none;
    color: #fff;
    background: var(--color-primary-600, #2490c8);
    transform: translateY(-1px);
}

/* Allow columns to shrink below the grid's 150px floor on narrow phones. */
.cta-dropdown-menu .wh-dropdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Icon, label and "New" badge stay on ONE row: the item is a flex row,
   icon/badge never shrink, the label ellipsizes if the column gets tight. */
.cta-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.cta-dropdown-menu .dropdown-item i,
.cta-dropdown-menu .dropdown-item .badge {
    flex-shrink: 0;
}

.cta-dropdown-menu .dropdown-item .cta-item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   Notification Dropdown Dark Theme Support
   ============================================ */

/* Notification dropdown background */
.notification-dropdown {
    background-color: var(--bg-primary);
    border-color: var(--border-default);
}

/* Notification dropdown header */
.notification-dropdown .border-bottom {
    border-color: var(--border-default) !important;
}

.notification-dropdown h6 {
    color: var(--text-primary);
}

/* Notification dropdown footer */
.notification-dropdown .border-top {
    border-color: var(--border-default) !important;
    background-color: var(--bg-secondary);
}

/* Notification items */
.notification-item {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-default);
    transition: background-color var(--duration-150) var(--ease-in-out);
}

.notification-item:hover,
.notification-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Unread notification styling */
.notification-unread {
    background-color: var(--bg-secondary);
    border-left: 3px solid var(--color-primary-500);
}

.notification-unread:hover,
.notification-unread:focus {
    background-color: var(--bg-tertiary);
}

/* Dark theme specific adjustments */
[data-theme="dark"] .notification-unread {
    background-color: var(--color-primary-950);
    border-left-color: var(--color-primary-400);
}

[data-theme="dark"] .notification-unread:hover,
[data-theme="dark"] .notification-unread:focus {
    background-color: var(--color-primary-900);
}

/* Notification text colors */
.notification-item strong {
    color: var(--text-primary);
}

.notification-item .text-muted {
    color: var(--text-muted) !important;
}

/* Empty state */
.notification-dropdown .text-muted {
    color: var(--text-muted) !important;
}

/* Badge styling */
.notification-item .badge.bg-primary {
    background-color: var(--color-primary-500) !important;
}

/* ============================================
   Floating Language Switcher (Desktop Only)
   Absolutely positioned top-right, aligned with navbar container edge
   ============================================ */

.header-language-floating {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    pointer-events: none;
}

.header-language-floating .container {
    display: flex;
    justify-content: flex-end;
}

.header-language-floating-inner {
    pointer-events: auto;
    margin-top: 44px;
    margin-right: 10px;
}

/* ============================================
   Mobile Persistent Icons (Cart + Notifications)
   ============================================ */

.mobile-persistent-icons {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: var(--space-1-5, 0.375rem);
    transition: transform var(--duration-300) var(--ease-in-out), opacity var(--duration-300) var(--ease-in-out);
}

/* Website Builder pages (body.autohide-mobile-icons): header.js slides the
   cluster up and out while the sticky builder tab bar (#wb-tabs) floats, so
   the two never overlap; it returns once the bar is back in its natural
   position (top of page). Pages without a tab bar (community landing) hide
   on scroll down / show on scroll up instead. */
.mobile-persistent-icons.icons-hidden {
    transform: translateY(calc(-100% - 14px));
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-persistent-icons {
        transition: none;
    }
}

.mobile-persistent-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full, 50%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-150) var(--ease-in-out),
                color var(--duration-150) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
}

.mobile-persistent-icon:hover {
    background: var(--bg-tertiary);
    color: var(--color-primary-600);
}

/* Brand variant (Create New +) */
.mobile-persistent-icon-brand {
    background: var(--color-primary-600);
    color: #fff;
}

.mobile-persistent-icon-brand:hover {
    background: var(--color-primary-700);
    color: #fff;
}

[data-theme="dark"] .mobile-persistent-icon-brand {
    background: var(--color-primary-500);
    color: #fff;
}

[data-theme="dark"] .mobile-persistent-icon-brand:hover {
    background: var(--color-primary-400);
    color: #fff;
}

.mobile-persistent-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold, 700);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full, 50%);
    background-color: var(--color-danger-500, #ef4444);
    color: #fff;
    text-align: center;
}

/* Dark theme adjustments */
[data-theme="dark"] .mobile-persistent-icon {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .mobile-persistent-icon:hover {
    background: var(--bg-secondary);
    color: var(--color-primary-400);
}

/* Mobile persistent dropup (shared) */
.mobile-persistent-dropup {
    position: relative;
    display: flex;
}

.mobile-persistent-dropup .dropdown-toggle::after {
    display: none;
}

.mobile-persistent-dropup .dropdown-menu {
    min-width: 180px;
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: var(--shadow-lg);
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

.mobile-persistent-dropup .dropdown-item {
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.875rem);
}

.mobile-persistent-dropup .dropdown-item:hover {
    background-color: var(--bg-tertiary);
}

/* Cart & Notification widget overrides - style nav-link toggles as persistent icon circles */
.mobile-persistent-cart .dropdown,
.mobile-persistent-notification,
.mobile-persistent-notification .notification-bell-widget {
    display: flex;
}

.mobile-persistent-cart .nav-link,
.mobile-persistent-notification .nav-link {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--radius-full, 50%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color var(--duration-150) var(--ease-in-out),
                color var(--duration-150) var(--ease-in-out);
    box-shadow: var(--shadow-sm);
    line-height: 1;
}

.mobile-persistent-cart .nav-link i,
.mobile-persistent-notification .nav-link i {
    margin: 0 !important;
    line-height: 1;
}

.mobile-persistent-cart .nav-link:hover,
.mobile-persistent-notification .nav-link:hover {
    background: var(--bg-tertiary);
    color: var(--color-primary-600);
}

[data-theme="dark"] .mobile-persistent-cart .nav-link,
[data-theme="dark"] .mobile-persistent-notification .nav-link {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .mobile-persistent-cart .nav-link:hover,
[data-theme="dark"] .mobile-persistent-notification .nav-link:hover {
    background: var(--bg-secondary);
    color: var(--color-primary-400);
}

/* Badge positioning inside persistent icon circles */
.mobile-persistent-cart .cart-count-badge,
.mobile-persistent-notification .notification-badge {
    position: absolute;
    top: -2px;
    right: -4px;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold, 700);
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    transform: none;
}

/* Widget dropdown menus: open upward and constrain width */
.mobile-persistent-cart .dropdown-menu,
.mobile-persistent-notification .dropdown-menu {
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: var(--shadow-lg);
    background-color: var(--bg-secondary);
    border-color: var(--border-default);
}

.mobile-persistent-notification .notification-dropdown {
    width: 300px !important;
    max-width: calc(100vw - var(--space-4, 1rem));
    right: 0;
}

/* ============================================
   Mobile Create Section (+ Create New)
   ============================================ */

.mobile-create-section {
    border-bottom: 1px solid var(--border-default);
}

.mobile-create-section + .mobile-nav-section {
    padding-top: 0;
}

.mobile-nav-item.mobile-nav-item-bordered {
    border-bottom: 1px solid var(--border-muted) !important;
}

.mobile-create-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary-600);
}

[data-theme="dark"] .mobile-create-toggle {
    color: var(--color-primary-400);
}

.mobile-create-title-text {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-create-chevron {
    font-size: 0.7rem;
    transition: transform var(--duration-200, 200ms) var(--ease-out, ease-out);
}

.mobile-create-toggle.expanded .mobile-create-chevron {
    transform: rotate(180deg);
}

.mobile-create-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2, 0.5rem);
    padding: 0;
}

.mobile-create-grid.open {
    padding: 0;
}

/* Column-major fill: used by the Personal accordion so each column reads as
   a logical pair (e.g. Profile/Settings) instead of the row-major order the
   Create New / Organization grids use. Row count is set inline per-render
   via --mobile-grid-rows since the item count is dynamic. */
.mobile-create-grid.mobile-grid-flow-column {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--mobile-grid-rows, 2), 1fr);
}

/* Full-width section heading inside the 3-col create grid. Spans every column
   so the curated "+ Create New" groups (Create / Manage / Community) read as
   labeled sections. */
.mobile-create-section-label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 0.5rem) 2px var(--space-1, 0.25rem);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

/* Inline "+ add new" in the mobile section label opts out of the uppercase
   treatment and keeps its own compact spacing. */
.mobile-create-section-label .cta-add-new {
    margin-right: 0;
    text-transform: none;
    letter-spacing: 0;
}

.mobile-create-section-label:first-child {
    padding-top: 0;
}

.mobile-create-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-2, 0.5rem) 2px;
    min-height: 4rem;
    border-radius: var(--radius-md, 0.375rem);
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.25;
    transition: background-color var(--duration-150) var(--ease-in-out),
                transform var(--duration-150) var(--ease-in-out);
}

/* Keep labels on a single line where possible so the grid stays
   visually rhythmic. Text-overflow handles the rare overlong case. */
.mobile-create-item span {
    width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-create-item i {
    font-size: 1.125rem;
    color: var(--color-primary-600);
}

[data-theme="dark"] .mobile-create-item i {
    color: var(--color-primary-400);
}

.mobile-create-item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.mobile-create-item:active {
    transform: translateY(0);
}

/* Thin vertical splitter rendered in the column gap to the LEFT of an item
   that starts a new section (i.e., the first item after a config divider).
   The strict 3-per-row grid keeps regular gaps clean and only highlights
   actual group changes. Hidden when the section-start lands at column 1
   (no left-side gap exists at the row edge). */
.mobile-create-item {
    position: relative;
}

.mobile-create-item-section-start::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-2, 0.5rem) / 2);
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--border-default);
    opacity: 0.55;
    pointer-events: none;
}

.mobile-create-item-section-start:nth-child(3n+1)::before {
    display: none;
}

/* ==========================================================================
   Mobile Org Switcher - nested accordion below the org quick-links grid.
   Mirrors the desktop header's collapsible "acting-as" switcher
   (.wh-org-switcher-list in _user-dropdown.php): same data source
   (OrgPickerHelper::tree), same search JS/CSS (OrgPickerWidget::registerAssets,
   the .org-picker__* classes below), same POST-per-row switch. See
   mobile-menu.js initMobileAccordions() for the ancestor-safe exclusive-open
   logic that lets this open without collapsing its parent org grid.

   Deliberately NOT a grid cell (see _mobile-menu.php: #mobileOrgGrid wraps
   the 3-col quick-links grid AND this toggle+panel as plain full-width
   siblings) - an earlier version lived inside the quick-links grid and its
   long "Switch organization" label blew out that grid's column tracks
   (nowrap labels force a 1fr column's min-width past its fair share).
   ========================================================================== */

.mobile-org-switcher-toggle {
    border-top: 1px solid var(--border-muted);
    margin-top: var(--space-1, 0.25rem);
}

.mobile-org-switcher-list {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-4, 1rem) var(--space-2, 0.5rem);
}

/* The generic .mobile-nav-subitems.open rule (mobile-menu.css) caps every
   accordion panel at max-height:500px with overflow:hidden. That panel now
   has to fit inside the OUTER #mobileOrgGrid wrapper's own 500px cap
   alongside the quick-links grid and this toggle, so both need a taller,
   ID-scoped cap here (specificity/order-proof against that generic rule)
   plus its own internal scroll once genuinely long. */
#mobileOrgGrid.open {
    max-height: 900px;
}

#mobileOrgSwitcherList.open {
    max-height: 320px;
    overflow-y: auto;
}

.mobile-org-switcher-list .org-picker__search {
    margin: var(--space-2, 0.5rem) 0;
}

.mobile-org-switcher-group {
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem) var(--space-1, 0.25rem);
    font-size: 0.65rem;
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.mobile-org-switcher-row {
    margin: 0;
}

.mobile-org-switcher-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem);
    border: none;
    background: none;
    color: var(--text-primary);
    text-align: left;
    font-size: 0.8125rem;
    font-weight: var(--font-weight-medium, 500);
    border-radius: var(--radius-md, 0.375rem);
    cursor: pointer;
    transition: background-color var(--duration-150) var(--ease-in-out);
}

.mobile-org-switcher-item:hover,
.mobile-org-switcher-item.active {
    background: var(--bg-tertiary);
}

.mobile-org-switcher-logo {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm, 0.25rem);
    object-fit: cover;
    flex-shrink: 0;
}

.mobile-org-switcher-logo-fallback {
    width: 20px;
    flex-shrink: 0;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.mobile-org-switcher-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-org-switcher-role {
    flex-shrink: 0;
    color: var(--text-tertiary);
    font-size: 0.7rem;
}

.mobile-org-switcher-empty {
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.mobile-org-switcher-divider {
    height: 1px;
    margin: var(--space-1, 0.25rem) 0;
    background: var(--border-muted);
}

.mobile-org-switcher-link {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-1, 0.25rem);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    border-radius: var(--radius-md, 0.375rem);
    transition: background-color var(--duration-150) var(--ease-in-out);
}

.mobile-org-switcher-link i {
    width: 14px;
    text-align: center;
    font-size: 0.7rem;
}

.mobile-org-switcher-link:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    text-decoration: none;
}

/* ==========================================================================
   Header Strips - Getting Started + Discover banners (full-width sticky rows)
   - Position: sticky at top of viewport, above the navbar visually.
   - Dissolve on scroll down, reappear on scroll up (driven by header.js).
   - Strip the bars' rounded-card appearance so they read as edge-to-edge bars,
     while preserving their colors, shimmer, and label styling.
   ========================================================================== */

.header-strips {
    position: sticky;
    top: 0;
    z-index: 1031;
    transition: opacity 0.35s ease;
    will-change: opacity;
}

/* Fade out on scroll-down. The strips themselves keep their layout space
   (so main's padding-top stays constant and content doesn't jump), but the
   fixed-top navbar slides up over them so there is no visible gap between
   the page content and the header while they fade away. */
.header-strips.dissolved {
    opacity: 0;
    pointer-events: none;
}

/* Push the fixed-top navbar down by the strips height when they are visible,
   then slide it up to top:0 (covering the now-invisible strips) when they
   dissolve. The navbar's top transition matches the strips' opacity fade. */
.header-widget.header-sticky .navbar.fixed-top {
    top: var(--strips-height, 0);
    transition: top 0.35s ease;
}

.header-widget.header-sticky .header-strips.dissolved ~ .navbar.fixed-top {
    top: 0;
}

/* Strip the rounded-card look: full-width, edge-to-edge, no margins.
   Keep the colors, shimmer animation, dismiss button, and label styling.
   !important needed because the banner markup carries Bootstrap `mb-2`. */
.header-strips .gs-banner,
.header-strips .discover-banner {
    border-radius: 0;
    margin: 0 !important;
    padding-left: 0.75rem;
    padding-right: 2rem;
    box-shadow: none;
}

.header-strips .gs-banner {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(235, 152, 52, 0.45);
}

.header-strips .discover-banner {
    border-bottom: 1px solid var(--border-default);
}

/* Each strip is full-width; inner content stays comfortably centered. */
.header-strips .gs-banner > .d-flex,
.header-strips .discover-banner > .d-flex {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* Dismiss button sits comfortably against the right edge of the strip,
   not against a rounded card corner. */
.header-strips .gs-dismiss,
.header-strips .discover-dismiss {
    right: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .header-strips,
    .header-widget.header-sticky .navbar.fixed-top {
        transition: none;
    }
    .header-strips.dissolved {
        opacity: 0;
    }
}

/* Mobile/tablet (<1200px): flip the stack so the icon strip (navbar) is on top
   and the dismissible info strips sit BELOW it. The Getting Started pill
   row also becomes a horizontally scrollable strip so it never wraps and
   overlaps the logo / right-side icons. */
@media (max-width: 1199.98px) {
    /* Strips: pulled out of normal flow and pinned below the navbar. */
    .header-strips {
        position: fixed;
        top: var(--header-height-mobile, 56px);
        left: 0;
        right: 0;
        z-index: 1029; /* below navbar (1030), above page content */
    }

    /* Navbar always pinned at top:0 on mobile - cancel the desktop rule
       that pushes it down by --strips-height. */
    .header-widget.header-sticky .navbar.fixed-top,
    .header-widget .navbar.fixed-top {
        top: 0 !important;
    }

    /* Pills become a horizontal scroll strip - no wrap, no overlap. */
    .header-strips .gs-banner > .d-flex {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-right: 2.5rem; /* breathing room for dismiss button */
        gap: 0.5rem;
    }
    .header-strips .gs-banner > .d-flex::-webkit-scrollbar {
        display: none;
    }
    .header-strips .gs-banner .gs-step,
    .header-strips .gs-banner .gs-dot {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Same treatment for DiscoverBanner so it never wraps awkwardly. */
    .header-strips .discover-banner > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-right: 2.5rem;
    }
    .header-strips .discover-banner > .d-flex::-webkit-scrollbar {
        display: none;
    }
    .header-strips .discover-banner > .d-flex > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* Mobile/tablet (<1200px): the main mobile menu bar always gets a SOLID
   background - white on light theme, black on dark theme. Glassmorphism
   and transparent-on-top only apply to the desktop header; on small
   screens the bar overlaps page content and must not show through. */
@media (max-width: 1199.98px) {
    .header-glassmorphism .navbar,
    .header-transparent-top .navbar.at-top {
        background: #ffffff !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme="dark"] .header-glassmorphism .navbar,
    [data-theme="dark"] .header-transparent-top .navbar.at-top {
        background: #000000 !important;
    }
}