/**
 * DBC Site Header
 *
 * Replaces the two Elementor Theme Builder headers (light/dark). Variant
 * is driven by `.dbc-header--light` / `.dbc-header--dark` on the <header>.
 *
 * Breakpoints mirror dbc-breakpoints.css:
 *   mobile     <= 767
 *   tablet     <= 1024
 *   tablet-ext <= 1200
 *   desktop    >= 1201
 */

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */

:root {
    --dbc-header-max-width: 1200px;
    /* Padded track: border-box max-width so inner content stays `--dbc-header-max-width` wide. */
    --dbc-header-track-max: calc(var(--dbc-header-max-width) + 2 * var(--dbc-header-padding-x));
    --dbc-header-height: 100px;
    --dbc-header-height-compact: 76px;
    /* Horizontal padding inside the max-width track (static bar + mega rows).
       Non-zero at all breakpoints so boxed layouts never sit flush to the track
       edge in the “viewport > track but still capped” band. */
    --dbc-header-padding-x: clamp(16px, 4vw, 32px);
    --dbc-header-z: 100;
    /* Full-page dim behind header + mega while menu is open (body::before). */
    --dbc-header-mega-backdrop: #0000005c;

    --dbc-header-logo-w: 200px;

    --dbc-header-gap: 24px;
    --dbc-header-actions-gap: 14px;

    --dbc-header-radius: 999px;
    --dbc-header-icon-size: 22px;
    /* Slightly larger than other action glyphs (bell / profile / search). */
    --dbc-header-hamburger-icon-size: 24px;
    --dbc-header-tap: 40px;

    /* Search track: fluid between min and max (no breakpoint “snap” on width). */
    --dbc-header-searchbar-min: 320px;
    --dbc-header-searchbar-max: 650px;
    /* Grows with viewport; clamp() keeps it between min and max. */
    --dbc-header-searchbar-pref: 45vw;

    --dbc-header-dark-bg: #14171c;
    --dbc-header-dark-fg: #ffffff;

    --dbc-header-light-bg: transparent;
    --dbc-header-light-fg: #101010;

    --dbc-header-menu-bg: #ffffff;
    --dbc-header-menu-fg: #101010;
    --dbc-header-menu-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    --dbc-header-menu-border: rgba(0, 0, 0, 0.08);

    /* Light header: warm taupe search recess + soft stone icon color */
    --dbc-header-light-icon: #d6cec8;
    --dbc-header-light-search-recess: #a59186;
    --dbc-header-light-search-recess-icon-hover: #ece8e4;

    --dbc-header-transition: 180ms ease;
}

/* JetSmartFilters, DBC URL-driven SPAs (e.g. author leaderboards), and other
 * widgets that replace large DOM regions after reading query params can change
 * heights above the fold. Browser scroll anchoring then adjusts window.scrollY
 * to “keep” content stable — which pulls the first paint of the top bar upward
 * and clips the logo. Opting out at the document root avoids that class of bug
 * site-wide without per-feature hacks. */
html {
    overflow-anchor: none;
}

/* ---------------------------------------------------------------------------
 * Layout scaffolding
 * ------------------------------------------------------------------------- */

/* Outer bar: spans the full viewport so the background color paints from
   edge to edge. Content width is capped on `.dbc-header__inner` via `--dbc-header-track-max`. */
.dbc-header {
    position: relative;
    z-index: var(--dbc-header-z);
    width: 100%;
    box-sizing: border-box;
    color: var(--dbc-header-fg, #fff);
    background: var(--dbc-header-bg, transparent);
    transition: background var(--dbc-header-transition), color var(--dbc-header-transition);
}

.dbc-header--dark {
    --dbc-header-bg: var(--dbc-header-dark-bg);
    --dbc-header-fg: var(--dbc-header-dark-fg);
}

/* Light variant floats over the hero, still full-width so the transparent
   background covers the entire top strip uniformly. */
.dbc-header--light {
    --dbc-header-bg: var(--dbc-header-light-bg);
    --dbc-header-fg: var(--dbc-header-light-fg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Respect the WordPress admin bar when logged-in admin users view the site. */
.admin-bar .dbc-header--light { top: 32px; }
/* 782px = WordPress core admin-bar breakpoint (toolbar height/toggle), not DBC. */
@media screen and (max-width: 782px) {
    .admin-bar .dbc-header--light { top: 46px; }
}

/* Reserve vertical space for the light variant so hero content (e.g. the
   homepage countdown) doesn't slide under the transparent header. Only
   applied when the light variant is active (homepage), because the dark
   variant sits in normal flow and already pushes content down on its own. */
body.dbc-header-variant--light .neve-main,
body.dbc-header-variant--light main#content {
    padding-top: var(--dbc-header-height);
}

/* 3-column grid: [logo 200px] [searchbar 1fr, centered] [actions auto].
   Track uses `--dbc-header-track-max` so `padding-inline` sits outside the
   1200px content column (aligns with site max-width rows). */
.dbc-header__inner {
    display: grid;
    grid-template-columns: var(--dbc-header-logo-w) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--dbc-header-gap);
    height: var(--dbc-header-height);
    max-width: var(--dbc-header-track-max);
    margin: 0 auto;
    padding: 0 var(--dbc-header-padding-x);
    box-sizing: border-box;
}

/* One-frame compositor hint on the logo link only — keeps hamburger/bell
 * outside any transformed ancestor so icon colors don’t wash out. */
.dbc-header__logo.dbc-header__logo--gpu-flush {
    transform: translateZ(0);
}

/* ---------------------------------------------------------------------------
 * Hamburger (lives in actions group)
 * ------------------------------------------------------------------------- */

.dbc-header__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbc-header-tap);
    height: var(--dbc-header-tap);
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    border-radius: 10px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dbc-header-transition);
}

.dbc-header__hamburger-icon {
    display: block;
    width: var(--dbc-header-hamburger-icon-size);
    height: var(--dbc-header-hamburger-icon-size);
    background: transparent;
    flex-shrink: 0;
    line-height: 0;
}

.dbc-header__hamburger-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Light header: bars must read solid black (was gray via cached img / compositing). */
.dbc-header--light .dbc-header__hamburger-icon--light {
    color: #000000;
}

.dbc-header__hamburger:hover,
.dbc-header__hamburger:focus-visible {
    background: rgba(128, 128, 128, 0.15);
    outline: 0;
}

/* Show the icon that matches the variant. */
.dbc-header--light .dbc-header__hamburger-icon--dark,
.dbc-header--dark  .dbc-header__hamburger-icon--light {
    display: none;
}

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

.dbc-header__logo {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    line-height: 0;
    text-decoration: none;
    width: var(--dbc-header-logo-w);
    flex: 0 0 var(--dbc-header-logo-w);
    max-width: 100%;
}

/* Enforce the 200px rule: the logo image always fills the logo column
   at its declared width and scales vertically from its natural aspect. */
.dbc-header__logo-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.dbc-header--light .dbc-header__logo-img--dark,
.dbc-header--dark  .dbc-header__logo-img--light {
    display: none;
}

/* Full wordmark at all breakpoints; compact assets stay in the DOM hidden. */
.dbc-header__logo-img--full {
    display: block;
}

.dbc-header__logo-img--compact {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Centered searchbar (middle grid column)
 * ------------------------------------------------------------------------- */

.dbc-header__searchbar {
    width: 100%;
    /* Never wider than the grid column or the cap; never smaller than the
       track minimum until the column itself is narrower. */
    max-width: min(
        100%,
        clamp(
            var(--dbc-header-searchbar-min),
            var(--dbc-header-searchbar-pref),
            var(--dbc-header-searchbar-max)
        )
    );
    margin: 0 auto;
    min-width: 0;
}

/* Shown with inline header search (hidden together with bottom-nav breakpoint). */
@media (min-width: 768px) {
    .dbc-header__searchbar {
        min-width: min(var(--dbc-header-searchbar-min), 100%);
    }
}

.dbc-header__searchbar > * {
    width: 100%;
}

/* ---------------------------------------------------------------------------
 * Searchbar colour overrides — restore the opaque "Elementor-era" look.
 *
 * The shortcode default ships a translucent pill that blends into whatever
 * the hero shows through. In the header we want a solid, readable pill with
 * a subtle darker recess for the mic + submit icons, matching the reference.
 * ------------------------------------------------------------------------- */

.dbc-header__searchbar .dbc-searchbar-input-wrapper {
    /* Stretch (base searchbar is align-items: center) so the input field,
       mic, and submit share one full-height row with no sliver gaps at the
       white/dark join. */
    align-items: stretch !important;
    /* True pill: base searchbar uses 25px, which is taller than a ~32px row
       and makes the end caps look like flat ovals. Large radius => ends track
       height (stadium), matching the 1.5px outer ring. */
    border-radius: 9999px !important;
    box-sizing: border-box;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.32) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow: hidden !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.dbc-header__searchbar .dbc-searchbar-input-wrapper:focus-within {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.45) !important;
    /* Inset shadow + 1px border both follow the pill curve and read as a second inner edge. */
    box-shadow: none !important;
    outline: none !important;
}

.dbc-header__searchbar .dbc-searchbar-input {
    color: #1a1a1a !important;
    align-self: stretch !important;
    box-sizing: border-box;
    /* Opaque: matches wrapper so the seam is only the flex edge to #2c2f33. */
    background: #ffffff !important;
}

.dbc-header__searchbar .dbc-searchbar-input-wrapper:focus-within .dbc-searchbar-input {
    background: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

.dbc-header__searchbar .dbc-searchbar-input:focus,
.dbc-header__searchbar .dbc-searchbar-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.dbc-header__searchbar .dbc-searchbar-input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

/* Grouped darker recess for the mic/submit icons on the right.
   - Both buttons share the same static background color so they read as a
     single continuous block.
   - All corners are flat: the submit is a straight rectangle. The right pill
     curve comes only from the wrapper’s `overflow: hidden` + pill radius, so
     we don’t stack a second border-radius on the button (it reads as a ghost
     / double arc next to the clip).
   - `align-self: stretch` (base .dbc-searchbar is align-items: center) so
     the recess fills the full pill height. Otherwise a hairline of the
     wrapper bg can show at the top/bottom of the right curve, reading as
     a second line along the radius. */
.dbc-header__searchbar .dbc-searchbar-mic,
.dbc-header__searchbar .dbc-searchbar-submit {
    color: var(--dbc-header-light-icon) !important;
    background: var(--dbc-header-light-search-recess) !important;
    /* Neve / WP / WebKit: kill any default rule between adjacent buttons. */
    border: 0 !important;
    border-radius: 0 !important;
    border-inline: none !important;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    /* WebKit/UA inner bevels read as a second dashed line on the right curve. */
    box-shadow: none !important;
    outline: none;
    margin: 0;
    padding: 4px 12px !important;
    background-clip: padding-box;
    -webkit-tap-highlight-color: transparent;
}

.dbc-header__searchbar .dbc-searchbar-mic {
    position: relative;
    padding: 4px 10px 4px 12px !important;
}

.dbc-header__searchbar .dbc-searchbar-submit {
    position: relative;
    /* Do not use negative margin overlap here — it often reads as a grey seam. */
    padding: 4px 12px 4px 10px !important;
}

.dbc-header__searchbar .dbc-searchbar-mic::-moz-focus-inner,
.dbc-header__searchbar .dbc-searchbar-submit::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Hover: lighten icon slightly; keep the taupe recess static. */
.dbc-header__searchbar .dbc-searchbar-mic:hover,
.dbc-header__searchbar .dbc-searchbar-submit:hover {
    color: var(--dbc-header-light-search-recess-icon-hover) !important;
    background: var(--dbc-header-light-search-recess) !important;
}

.dbc-header__searchbar .dbc-searchbar-mic:active,
.dbc-header__searchbar .dbc-searchbar-submit:active {
    color: #ffffff !important;
    background: var(--dbc-header-light-search-recess) !important;
}

.dbc-header__searchbar .dbc-searchbar-mic:focus-visible,
.dbc-header__searchbar .dbc-searchbar-submit:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Mic + search: same box size as hamburger / bell / profile glyphs (20px
   in dbc-searchbar.css looks a touch light next to 22px header icons). */
.dbc-header__searchbar .dbc-searchbar-mic svg,
.dbc-header__searchbar .dbc-searchbar-submit svg {
    width: var(--dbc-header-icon-size) !important;
    height: var(--dbc-header-icon-size) !important;
}

.dbc-header__searchbar .dbc-searchbar-mic svg path,
.dbc-header__searchbar .dbc-searchbar-mic svg line,
.dbc-header__searchbar .dbc-searchbar-submit svg circle,
.dbc-header__searchbar .dbc-searchbar-submit svg line {
    stroke-width: 2 !important;
}

/* ---------------------------------------------------------------------------
 * Dark-variant searchbar overrides
 *
 * The default (light) searchbar styling above uses black-on-white chrome
 * to read against a bright/transparent background. On the dark header the
 * icon recess and outer border both need to shift into a cooler, darker
 * grey so the pill sits well on top of the #14171c bar.
 * ------------------------------------------------------------------------- */

.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-input-wrapper {
    /* Real border, not a box-shadow “ring”: 0 0 0 1.5px outside the box + white
       fill painted a different AA path than the #2c2f33 flex cells reads as a
       permanent double line on the radius. Border’s inner edge meets the same
       #2c2f33 as mic/submit; input still carries its own white. */
    border: 1.5px solid #4b4e51 !important;
    background: #2c2f33 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-input-wrapper:focus-within {
    border: 1.5px solid #5c6066 !important;
    /* Keep shell #2c2f33 like mic/submit so no white “halo” bleeds inside the border on the curve
       (wrapper white + rectangular recess + overflow clip = subpixel double-line). */
    background: #2c2f33 !important;
    box-shadow: none !important;
    outline: none !important;
}

.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-mic,
.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-submit {
    background: #2c2f33 !important;
    color: #aaabad !important;
    box-shadow: none !important;
    outline: none;
}

.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-mic:hover,
.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-submit:hover,
.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-mic:active,
.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-submit:active {
    background: #2c2f33 !important;
    color: #e8e8ea !important;
}

.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-mic:focus-visible,
.dbc-header--dark .dbc-header__searchbar .dbc-searchbar-submit:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * Right-hand actions group: [hamburger] [bell] [profile]
 * All three children share the same 40×40 tap target so they sit with
 * visually identical spacing from center to center.
 * ------------------------------------------------------------------------- */

.dbc-header__actions {
    display: flex;
    align-items: center;
    gap: var(--dbc-header-actions-gap);
    justify-self: end;
    min-width: 0;
}

/* Match hamburger: same 40×40, same radius, no transform on this box so the
   hover background lines up in the row. The old translate(-2px, 2px) applied
   here moved the whole hit area; put that nudge on the inner wrapper only so
   the icon/badge position is unchanged. */
.dbc-header__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbc-header-tap);
    height: var(--dbc-header-tap);
    flex: 0 0 auto;
    position: relative;
    box-sizing: border-box;
    margin: 0 0 0 -2px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    transition: background var(--dbc-header-transition);
}

/* Match the hamburger/profile hover affordance. :focus-within picks up
   keyboard focus on the button that the notification-bell shortcode
   renders inside this wrapper, so both pointer and keyboard users get
   the same visual feedback. */
.dbc-header__bell:hover,
.dbc-header__bell:focus-within {
    background: rgba(128, 128, 128, 0.15);
}

.dbc-header__bell .dbc-notification-bell-wrapper {
    /* Optical nudge: bell glyph + badge; outer .dbc-header__bell stays
       aligned with the hamburger. */
    transform: translate(-2px, 2px);
    width: var(--dbc-header-icon-size);
    height: var(--dbc-header-icon-size);
}

.dbc-header__bell .dbc-notification-bell {
    width: var(--dbc-header-icon-size);
    height: var(--dbc-header-icon-size);
}

.dbc-header__bell .dbc-notification-bell svg {
    width: var(--dbc-header-icon-size);
    height: var(--dbc-header-icon-size);
}

.dbc-header--light .dbc-header__bell--dark,
.dbc-header--dark  .dbc-header__bell--light {
    display: none;
}

/* ---------------------------------------------------------------------------
 * Profile button + dropdown
 * ------------------------------------------------------------------------- */

.dbc-header__profile {
    position: relative;
    flex: 0 0 auto;
    /* Optical: avatar reads a hair high vs hamburger + bell; match their vertical center. */
    transform: translateY(2px);
}

/* Logged-out: no bell column; keep glyph aligned with the hamburger row (no downward nudge). */
body.dbc-header-logged-out .dbc-header__profile {
    transform: none;
}

.dbc-header__profile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dbc-header-tap);
    height: var(--dbc-header-tap);
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 999px;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--dbc-header-transition), box-shadow var(--dbc-header-transition);
}

.dbc-header__profile-toggle:hover,
.dbc-header__profile-toggle:focus-visible {
    background: rgba(128, 128, 128, 0.15);
    outline: 0;
}

.dbc-header__profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
    background: rgba(255, 255, 255, 0.1);
}

.dbc-header__profile-icon {
    width: var(--dbc-header-icon-size);
    height: var(--dbc-header-icon-size);
    display: block;
    background: transparent;
}

/* Light header: user glyph is inline SVG + currentColor (same strategy as hamburger). */
.dbc-header--light .dbc-header__profile-icon--light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    color: #000000 !important;
}

.dbc-header--light .dbc-header__profile-icon--light svg {
    display: block;
    width: var(--dbc-header-icon-size);
    height: var(--dbc-header-icon-size);
    flex-shrink: 0;
}

.dbc-header--light .dbc-header__profile-icon--dark,
.dbc-header--dark  .dbc-header__profile-icon--light {
    display: none;
}

.dbc-header__profile-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--dbc-header-menu-bg);
    color: var(--dbc-header-menu-fg);
    border: 1px solid var(--dbc-header-menu-border);
    border-radius: 14px;
    box-shadow: var(--dbc-header-menu-shadow);
    z-index: calc(var(--dbc-header-z) + 10);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity var(--dbc-header-transition), transform var(--dbc-header-transition);
    pointer-events: none;
}

.dbc-header__profile-menu[hidden] {
    display: none;
}

.dbc-header__profile.is-open .dbc-header__profile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dbc-header__profile-menu-item {
    margin: 0;
    padding: 0;
}

.dbc-header__profile-menu-item a {
    display: block;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.4;
    transition: background var(--dbc-header-transition);
}

.dbc-header__profile-menu-item a:hover,
.dbc-header__profile-menu-item a:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: 0;
}

.dbc-header__profile-menu-item--logout a {
    color: #b00020;
}

/* ---------------------------------------------------------------------------
 * Mega menu
 * ------------------------------------------------------------------------- */

.dbc-header__mega {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--dbc-admin-offset, 0px);
    height: 70vh;
    width: 100%;
    box-sizing: border-box;
    /* Viewport gutters; padded tracks use `--dbc-header-track-max` so content stays 1200px-wide. */
    padding-inline: var(--dbc-header-padding-x);
    display: flex;
    flex-direction: column;
    /* Full-bleed white behind inner track + side gutters (footer keeps its own gray) */
    background: #ffffff;
    color: var(--dbc-header-menu-fg);
    box-shadow: none;
    border-top: 0;
    z-index: calc(var(--dbc-header-z) + 20);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--dbc-header-transition), transform var(--dbc-header-transition), visibility var(--dbc-header-transition);
    pointer-events: none;
    visibility: hidden;
    max-height: 70vh;
    overflow: hidden;
    /* Keep menu typography stable on mobile/tablet (no auto text inflation). */
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.dbc-header__mega[hidden] {
    display: none;
}

.dbc-header.is-mega-open .dbc-header__mega {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.dbc-header__mega-inner {
    flex: 1 1 auto;
    min-height: 0;
    max-width: var(--dbc-header-max-width);
    width: 100%;
    margin: 0 auto;
    /* Vertical only; topbar/footer inner tracks carry the same horizontal inset as static header. */
    /* clamp(MIN, preferred, MAX): MIN must be ≤ MAX. Same intent as 18–20px band around 2.8vw. */
    padding: clamp(18px, 2.8vw, 20px) 0 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Size-based BOTD rail: viewport can be >1200px while this box is already <1200px (mega gutters). */
    container-type: inline-size;
    container-name: dbc-mega-inner;
}

.dbc-header__mega-toolbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 0;
    margin-bottom: 20px;
}

.dbc-header__mega-results-summary {
    min-width: 0;
    flex: 1 1 auto;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.35;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    visibility: hidden;
}

.dbc-header__mega-results-summary.is-visible {
    opacity: 1;
    visibility: visible;
}

.dbc-header__mega-view-toggle {
    order: 1;
    flex: 0 0 auto;
}

.dbc-header__mega-results-summary {
    order: 2;
}

.dbc-header__mega-view-toggle {
    position: relative;
    appearance: none;
    width: 58px;
    height: 32px;
    border: 1px solid #d0d4da;
    background: #e9ecef;
    color: #4b5563;
    border-radius: 999px;
    padding: 0;
    cursor: pointer;
    transition: border-color var(--dbc-header-transition), background var(--dbc-header-transition);
}

.dbc-header__mega-view-toggle:hover,
.dbc-header__mega-view-toggle:focus-visible {
    background: #e3e7eb;
    border-color: #bcc2ca;
    outline: 0;
}

.dbc-header__mega-view-toggle-track-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #67707a;
    transition: opacity var(--dbc-header-transition);
}

.dbc-header__mega-view-toggle-track-icon--menu {
    left: 9px;
    opacity: 0;
}

.dbc-header__mega-view-toggle-track-icon--search {
    right: 9px;
    opacity: 1;
}

.dbc-header__mega-view-toggle-thumb {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--dbc-header-transition);
}

.dbc-header__mega-view-toggle-thumb-icon {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: #334155;
    transition: opacity var(--dbc-header-transition);
}

.dbc-header__mega-view-toggle-thumb-icon--menu {
    opacity: 1;
}

.dbc-header__mega-view-toggle-thumb-icon--menu svg {
    display: block;
    transform: translate(-1px, -0.5px);
}

.dbc-header__mega-view-toggle-thumb-icon--search {
    opacity: 0;
}

.dbc-header__mega-view-toggle.is-search-view .dbc-header__mega-view-toggle-thumb {
    transform: translateX(26px);
}

.dbc-header__mega-view-toggle.is-search-view .dbc-header__mega-view-toggle-track-icon--menu {
    opacity: 1;
}

.dbc-header__mega-view-toggle.is-search-view .dbc-header__mega-view-toggle-track-icon--search {
    opacity: 0;
}

.dbc-header__mega-view-toggle.is-search-view .dbc-header__mega-view-toggle-thumb-icon--menu {
    opacity: 0;
}

.dbc-header__mega-view-toggle.is-search-view .dbc-header__mega-view-toggle-thumb-icon--search {
    opacity: 1;
}

.dbc-header.is-mega-open .dbc-header__inner {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Dim page behind header + mega while menu is open (see ::before).
 * Lock both `html` and `body` so the window scrollbar hides (only the mega panel scrolls). */
html.dbc-header-mega-open,
body.dbc-header-mega-open {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}

body.dbc-header-mega-open {
}

/* Stacking: just under `.dbc-header` (`--dbc-header-z`) so the bar + mega stay crisp above the dim. */
body.dbc-header-mega-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: calc(var(--dbc-header-z) - 1);
    background: var(--dbc-header-mega-backdrop);
    pointer-events: auto;
    opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
    body.dbc-header-mega-open::before {
        opacity: 0;
        animation: dbc-mega-backdrop-fade 0.22s ease-out forwards;
    }
}

@keyframes dbc-mega-backdrop-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Full-bleed dark strip behind mega top bar (ignore mega shell side padding). */
.dbc-header__mega-top-wrap {
    flex: 0 0 auto;
    width: calc(100% + 2 * var(--dbc-header-padding-x));
    max-width: none;
    margin-inline: calc(-1 * var(--dbc-header-padding-x));
    background: #14171c;
    box-sizing: border-box;
    /* Match static `.dbc-header__inner` height (100px desktop, 90px ≤1024) — no extra vertical padding band */
    height: var(--dbc-header-height);
    min-height: var(--dbc-header-height);
    max-height: var(--dbc-header-height);
    display: flex;
    align-items: stretch;
    /* .dbc-header__mega sets menu body color (#101010); reset strip to same foreground as static dark header */
    color: var(--dbc-header-dark-fg, #ffffff);
}

.dbc-header__mega-top-inner {
    flex: 1 1 auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    max-width: var(--dbc-header-track-max);
    width: 100%;
    margin: 0 auto;
    /* Match `.dbc-header__inner`: padding eats from track so grid aligns to 1200px content. */
    padding: 0 var(--dbc-header-padding-x);
    box-sizing: border-box;
    color: inherit;
}

.dbc-header__mega-top {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: var(--dbc-header-logo-w) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    background: transparent;
    padding: 0;
}

/* Row: grid so the close can use aspect-ratio:1 with a definite row height from the pill (no min-height inflation). */
.dbc-header__mega-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    align-self: center;
    gap: clamp(12px, 2vw, 24px);
    min-width: 0;
}

.dbc-header__mega-logo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    width: var(--dbc-header-logo-w);
    line-height: 0;
    text-decoration: none;
}

.dbc-header__mega-logo .dbc-header__logo-img--compact {
    display: none !important;
}

.dbc-header__mega-logo .dbc-header__logo-img--light {
    display: none !important;
}

.dbc-header__mega-logo .dbc-header__logo-img--dark {
    display: block !important;
}

.dbc-header__mega-logo-mobile {
    display: none;
    align-items: center;
    align-self: center;
    width: var(--dbc-header-logo-w);
    line-height: 0;
    text-decoration: none;
}

.dbc-header__mega-logo-mobile .dbc-header__logo-img--compact {
    display: none !important;
}

.dbc-header__mega-logo-mobile .dbc-header__logo-img--light {
    display: none !important;
}

.dbc-header__mega-logo-mobile .dbc-header__logo-img--dark {
    display: block !important;
}

/* Same host model as .dbc-header__searchbar (block), not a flex container — avoids different flex/min-height behavior vs static bar */
.dbc-header__mega-search {
    min-width: 0;
    min-height: 0;
}

.dbc-header__mega-search > * {
    width: 100%;
}

.dbc-header__mega-search .dbc-searchbar-wrapper {
    width: 100%;
}

.dbc-header__mega-search .dbc-searchbar {
    width: 100%;
}

/* Mega topbar: same chrome as `.dbc-header--dark .dbc-header__searchbar` — no fixed height (do not inflate vs static). */
.dbc-header__mega-search .dbc-searchbar-input-wrapper {
    box-sizing: border-box;
    align-items: stretch !important;
    border-radius: 9999px !important;
    border: 1.5px solid #4b4e51 !important;
    background: #2c2f33 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Clip recess + input to the pill so the right cap does not show a UA/anti-alias seam. */
    overflow: hidden !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}

.dbc-header__mega-search .dbc-searchbar-input-wrapper:focus-within {
    border: 1.5px solid #5c6066 !important;
    background: #2c2f33 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Mega: same field sizing as static header — no extra padding/line-height (dbc-searchbar.css). */
.dbc-header__mega-search .dbc-searchbar-input {
    color: #1a1a1a !important;
    align-self: stretch !important;
    box-sizing: border-box;
    background: #ffffff !important;
}

.dbc-header__mega-search .dbc-searchbar-input-wrapper:focus-within .dbc-searchbar-input {
    background: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

.dbc-header__mega-search .dbc-searchbar-input:focus,
.dbc-header__mega-search .dbc-searchbar-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.dbc-header__mega-search .dbc-searchbar-input::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

.dbc-header__mega-search .dbc-searchbar-mic,
.dbc-header__mega-search .dbc-searchbar-submit {
    background: #2c2f33 !important;
    color: #aaabad !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-inline: none !important;
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    outline: none;
    margin: 0;
    padding: 4px 12px !important;
    background-clip: padding-box;
    -webkit-tap-highlight-color: transparent;
}

.dbc-header__mega-search .dbc-searchbar-mic {
    padding: 4px 10px 4px 12px !important;
}

.dbc-header__mega-search .dbc-searchbar-submit {
    padding: 4px 12px 4px 10px !important;
}

.dbc-header__mega-search .dbc-searchbar-mic:hover,
.dbc-header__mega-search .dbc-searchbar-submit:hover,
.dbc-header__mega-search .dbc-searchbar-mic:active,
.dbc-header__mega-search .dbc-searchbar-submit:active {
    background: #2c2f33 !important;
    color: #e8e8ea !important;
}

.dbc-header__mega-search .dbc-searchbar-mic:focus-visible,
.dbc-header__mega-search .dbc-searchbar-submit:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.dbc-header__mega-search .dbc-searchbar-mic::-moz-focus-inner,
.dbc-header__mega-search .dbc-searchbar-submit::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.dbc-header__mega-search .dbc-searchbar-mic svg,
.dbc-header__mega-search .dbc-searchbar-submit svg {
    width: var(--dbc-header-icon-size) !important;
    height: var(--dbc-header-icon-size) !important;
}

.dbc-header__mega-search .dbc-searchbar-mic svg path,
.dbc-header__mega-search .dbc-searchbar-mic svg line,
.dbc-header__mega-search .dbc-searchbar-submit svg circle,
.dbc-header__mega-search .dbc-searchbar-submit svg line {
    stroke-width: 2 !important;
}

.dbc-header__mega-close-wrap {
    display: flex;
    box-sizing: border-box;
    align-self: stretch;
    justify-self: end;
    width: auto;
    min-width: 0;
    height: auto;
    aspect-ratio: 1 / 1;
}

.dbc-header__mega-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1.5px solid #4b4e51;
    border-radius: 50%;
    background: #2c2f33;
    cursor: pointer;
    color: #aaabad;
    line-height: 0;
    transition:
        background var(--dbc-header-transition),
        color var(--dbc-header-transition),
        border-color var(--dbc-header-transition);
    -webkit-tap-highlight-color: transparent;
}

@keyframes dbc-mega-close-x-spin {
    to {
        transform: rotate(360deg);
    }
}

.dbc-header__mega-close-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.dbc-header__mega-close-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    transform-origin: 50% 50%;
}

.dbc-header__mega-close-wrap:hover .dbc-header__mega-close-icon svg,
.dbc-header__mega-close-wrap:focus-within .dbc-header__mega-close-icon svg {
    animation: dbc-mega-close-x-spin 0.48s ease-out;
}

/* Match mega search mic / submit stroke (see `.dbc-header__mega-search .dbc-searchbar-mic svg path`). */
.dbc-header__mega-close-icon svg path {
    stroke-width: 2 !important;
}

@media (prefers-reduced-motion: reduce) {
    .dbc-header__mega-close-wrap:hover .dbc-header__mega-close-icon svg,
    .dbc-header__mega-close-wrap:focus-within .dbc-header__mega-close-icon svg {
        animation: none;
    }
}

.dbc-header__mega-close-wrap:hover .dbc-header__mega-close,
.dbc-header__mega-close-wrap:focus-within .dbc-header__mega-close {
    background: #3d4249;
    border-color: #5c6066;
    outline: 0;
    color: #e8e8ea;
}

.dbc-header__mega-content {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    /* Slightly wider rail + tighter gap so Book of the Day can read larger without extra side “air”. */
    grid-template-columns: minmax(0, 1fr) clamp(260px, 26vw, 340px);
    gap: clamp(12px, 1.6vw, 22px);
    align-items: start;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.06);
    background: #ffffff;
    border-radius: 12px;
    /* Keep global spacing in mega-inner; add a small end inset so content breathes away from scrollbar. */
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

/* Must follow the two-column rule above: otherwise `grid-template-columns` on
 * `.dbc-header__mega-content` overrides this and keeps an empty 2nd track when
 * the rail is `display:none` (explicit columns still reserve the rail width). */
@supports (container-type: inline-size) {
    @container dbc-mega-inner (max-width: 1199px) {
        .dbc-header__mega-content {
            grid-template-columns: 1fr;
        }

        .dbc-header__mega-rail {
            display: none !important;
        }
    }
}

/* Column 1: spotlight row + four-column nav; column 2: Book of the Day rail */
.dbc-header__mega-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.8vw, 52px);
}

.dbc-header__mega-spotlights {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    width: 100%;
}

.dbc-mega-spotlight {
    display: block;
    min-width: 0;
    text-decoration: none;
    color: #101010;
    border-radius: 12px;
}

.dbc-mega-spotlight:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 3px;
}

.dbc-mega-spotlight__clip {
    position: relative;
    display: block;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dbc-mega-spotlight__media {
    display: block;
    aspect-ratio: 16 / 10;
    transform-origin: center center;
    will-change: transform;
}

.dbc-mega-spotlight__img-inner {
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.dbc-mega-spotlight:hover .dbc-mega-spotlight__img-inner,
.dbc-mega-spotlight:focus-visible .dbc-mega-spotlight__img-inner {
    transform: scale(1.07);
}

.dbc-mega-spotlight__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bottom chrome (divider + label + arrow) overlaid on the image */
.dbc-mega-spotlight__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: stretch;
    pointer-events: none;
    border-radius: inherit;
}

.dbc-mega-spotlight__overlay-inner {
    width: 100%;
    padding: 14px 16px 16px;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.35) 45%,
        rgba(0, 0, 0, 0) 100%
    );
}

.dbc-mega-spotlight__rule-track {
    display: block;
    overflow: hidden;
    height: 1px;
    margin-bottom: 10px;
}

.dbc-mega-spotlight__rule {
    display: block;
    height: 1px;
    width: 100%;
    background: #fff;
    transform-origin: left center;
    will-change: transform;
}

.dbc-mega-spotlight__caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.dbc-mega-spotlight__label-track {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.dbc-mega-spotlight__label-text {
    display: block;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    font-synthesis: none;
    line-height: 1.25;
    letter-spacing: 0.02em;
    color: #fff;
    will-change: transform;
}

.dbc-mega-spotlight__arrow-slot {
    flex: 0 0 auto;
    width: 30px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 0;
}

.dbc-mega-spotlight__arrow {
    display: block;
    color: #fff;
    transform: translate3d(-130%, 0, 0);
    transition: transform 0.48s cubic-bezier(0.33, 1, 0.68, 1);
}

.dbc-mega-spotlight__arrow-svg {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.dbc-mega-spotlight__arrow-svg path {
    stroke-width: 1.5 !important;
}

.dbc-mega-spotlight:hover .dbc-mega-spotlight__arrow,
.dbc-mega-spotlight:focus-visible .dbc-mega-spotlight__arrow {
    transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    .dbc-mega-spotlight__clip {
        clip-path: none;
    }

    .dbc-mega-spotlight__media,
    .dbc-mega-spotlight__label-text,
    .dbc-mega-spotlight__rule {
        will-change: auto;
        transform: none;
    }

    .dbc-mega-spotlight__img-inner {
        transition: none;
        transform: none;
    }

    .dbc-mega-spotlight__arrow {
        transform: none;
        transition: none;
    }

    .dbc-mega-spotlight:hover .dbc-mega-spotlight__img-inner,
    .dbc-mega-spotlight:focus-visible .dbc-mega-spotlight__img-inner {
        transform: none;
    }
}

.dbc-header__mega-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: clamp(16px, 2.2vw, 30px);
}

.dbc-header__mega-column {
    min-width: 0;
}

/* Match .dbc-notification-dropdown-title (dbc-notifications.css) */
.dbc-header__mega-heading {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dedede;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 24px;
    color: rgb(102, 102, 102);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-synthesis: none;
}

.dbc-header__mega-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dbc-header__mega-list li + li {
    margin-top: 8px;
}

.dbc-header__mega-list a {
    font: inherit;
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    font-size: 13px;
    line-height: 1.4;
}

.dbc-header__mega-list a:hover,
.dbc-header__mega-list a:focus-visible {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 3px;
    outline: 0;
}

/* GSAP: line-rise reveal (yPercent) for headings + links — clip overflow */
.dbc-header__mega-content .dbc-mega-reveal {
    display: block;
    overflow: hidden;
}

.dbc-header__mega-content .dbc-mega-reveal__text {
    display: block;
    will-change: transform;
}

/* Animated heading rule (GSAP scaleX); replaces static border when --has-line is set in JS */
.dbc-header__mega-content .dbc-header__mega-heading--has-line {
    border-bottom: 0;
    padding-bottom: 0;
}

.dbc-header__mega-content .dbc-mega-heading-line {
    display: block;
    height: 1px;
    margin-top: 10px;
    background-color: #dedede;
    transform-origin: left center;
    transform: scaleX(0);
    will-change: transform;
}

.dbc-header__mega-rail {
    min-height: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: visible;
}

/* [book_of_the_day]: em-based 3D chrome scales with this font-size; row is full rail width
   (no centered “gutter” from justify-content:center + fixed 23em width). */
.dbc-header__mega-rail-inner {
    width: 300px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    box-sizing: border-box;
    font-size: clamp(6px, 0.7vw, 8.1px);
    padding: 0 0 12px;
}

.dbc-header__mega-rail .dbc-bod-rail-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}

.dbc-header__mega-rail .image-as-a-book.custom-image {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: 58%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    margin-bottom: 12px;
    /* Fluid width in the rail; keep ~1:1.4 cover proportion (replaces fixed 23em × 1.4). */
    height: auto;
    aspect-ratio: 1 / 1.4;
}

.dbc-header__mega-rail .dbc-bod-rail-meta {
    margin-top: 0;
    margin-bottom: 10px;
    width: 100%;
    padding-right: 0;
}

.dbc-header__mega-rail .dbc-bod-rail-label {
    margin: 0 0 16px;
    font-family: "Noto Serif Vithkuqi", "Noto Serif", Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #111827;
}

.dbc-header__mega-rail .dbc-bod-rail-title {
    margin: 0 0 3px;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: 0;
    color: #1f2937;
}

.dbc-header__mega-rail .dbc-bod-rail-authors {
    margin: 0;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 300;
    color: #64748b;
}

.dbc-header__mega-rail .dbc-bod-rail-by {
    display: none;
}

.dbc-header__mega-rail .dbc-bod-rail-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 44px;
    padding: 0 16px;
    border-radius: 999px;
    background: #f5c518;
    border: 1px solid #e0bc1f;
    color: #1a1a1a;
    text-decoration: none;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.dbc-header__mega-rail .dbc-bod-rail-cta:hover,
.dbc-header__mega-rail .dbc-bod-rail-cta:focus-visible {
    filter: brightness(0.98);
    color: #1a1a1a;
    text-decoration: none;
    outline: 0;
}

/* Book of the Day rail — staggered entrance when mega menu body is visible (menu mode). */
@keyframes dbc-bod-rail-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes dbc-bod-rail-book-in {
    from {
        opacity: 0;
        transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg) translate3d(0, 18px, 0) scale(0.96);
    }

    to {
        opacity: 1;
        transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg) translate3d(0, 0, 0) scale(1);
    }
}

.dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-meta {
    animation: dbc-bod-rail-fade-up 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-card > .image-as-a-book.custom-image {
    animation: dbc-bod-rail-book-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

.dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-cta {
    animation: dbc-bod-rail-fade-up 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.48s both;
}

@media (prefers-reduced-motion: reduce) {
    .dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-meta,
    .dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-cta {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .dbc-header.is-mega-open:not(.is-mega-search-active) .dbc-header__mega-rail .dbc-bod-rail-card > .image-as-a-book.custom-image {
        animation: none;
        opacity: 1;
        transform: perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg);
    }
}

/* Search mode: hide TOC; results node is moved into host (single instance, no duplicate). */
.dbc-header.is-mega-search-active .dbc-header__mega-content {
    display: none;
}

/* While results live in the top form, hide the duplicate dropdown under the input */
.dbc-header.is-mega-search-active .dbc-header__mega-search .dbc-searchbar-form > .dbc-searchbar-results {
    display: none !important;
}

.dbc-header__mega-results-host[hidden] {
    display: none;
}

.dbc-header__mega-results-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.06);
    margin-top: 0;
    background: #ffffff;
    border-radius: 12px;
    padding: 0 10px 0 0;
    box-sizing: border-box;
}

.dbc-header__mega-content::-webkit-scrollbar,
.dbc-header__mega-results-host::-webkit-scrollbar {
    width: 6px;
}

.dbc-header__mega-content::-webkit-scrollbar-thumb,
.dbc-header__mega-results-host::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 999px;
}

.dbc-header__mega-content::-webkit-scrollbar-track,
.dbc-header__mega-results-host::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
    border-radius: 999px;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-searchbar-results {
    position: static;
    display: block;
    visibility: visible;
    opacity: 1;
    transform: none;
    margin-top: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow-y: visible;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-searchbar-results.dbc-results-visible {
    display: block;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-results-list {
    background: transparent;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-results-subtitle-wrapper {
    border-bottom-color: #e0e0e0;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-results-subtitle {
    color: #666;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-book-title,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-person-name,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-trending-term {
    color: #333;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-rating-number {
    color: #000;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-book-authors,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-book-description,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-person-type,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-loading,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-no-results,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-error {
    color: #666;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-book-description {
    color: #000;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-book,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-person,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-trending-search-item {
    background: transparent;
    box-shadow: none;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-book {
    padding: 12px 0;
    margin: 0;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-person {
    padding: 12px 14px;
    margin: 0;
    border-radius: 12px;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-trending-search-item {
    margin-bottom: 0;
}

.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-book:hover,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-person:hover,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-trending-search-item:hover,
.dbc-header.is-mega-search-active .dbc-header__mega-results-host .dbc-search-result-selected {
    background: #f5f5f5;
    border-radius: 0;
    box-shadow: none;
}

/* Full-bleed gray strip; copy + buttons constrained to header track width */
.dbc-header__mega-footer {
    flex: 0 0 auto;
    width: calc(100% + 2 * var(--dbc-header-padding-x));
    max-width: none;
    margin: 0;
    margin-inline: calc(-1 * var(--dbc-header-padding-x));
    margin-top: auto;
    padding: 0;
    border-top: 1px solid #c8c8c8;
    border-bottom: 1px solid #c8c8c8;
    background: #ececed;
    box-sizing: border-box;
}

.dbc-header__mega-footer-inner {
    max-width: var(--dbc-header-track-max);
    width: 100%;
    margin: 0 auto;
    /* Match `.dbc-header__inner` / mega top track (1200px content inside padded max). */
    padding: 14px var(--dbc-header-padding-x);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.dbc-header__mega-footer-copy {
    margin: 0;
    font-size: 13px;
    color: #5a5a5a;
}

/* Logged-in: brand + ® on one baseline row, pushed to the right. */
.dbc-header__mega-footer-copy--logged-in {
    margin-inline-start: auto;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.06em;
    text-align: right;
}

.dbc-header__mega-footer-copy--logged-in .dbc-header__mega-footer-brand {
    font-weight: 500;
}

.dbc-header__mega-footer-copy--logged-in .dbc-header__mega-footer-reg {
    flex-shrink: 0;
    font-size: 1em;
    font-weight: 500;
    line-height: inherit;
}

.dbc-header__mega-footer-actions {
    display: inline-flex;
    gap: 10px;
    margin-inline-start: auto;
}

.dbc-header__mega-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.dbc-header__mega-footer-btn-icon {
    display: inline-flex;
    line-height: 0;
    flex-shrink: 0;
}

.dbc-header__mega-footer-btn-icon svg {
    display: block;
}

.dbc-header__mega-footer-btn--ghost {
    color: #1a1a1a;
    border: 1px solid #d8d8d8;
    background: #fff;
}

.dbc-header__mega-footer-btn--accent {
    color: #1a1a1a;
    border: 1px solid #e0bc1f;
    background: #f5c518;
}

.dbc-header__mega-footer-btn:hover,
.dbc-header__mega-footer-btn:focus-visible {
    text-decoration: none;
    filter: brightness(0.98);
    outline: 0;
}

.admin-bar {
    --dbc-admin-offset: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar {
        --dbc-admin-offset: 46px;
    }
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------- */

/* Tablet landscape (<= 1200) — inner is viewport-wide; logo column tightens. */
@media (max-width: 1200px) {
    :root {
        --dbc-header-logo-w: 190px;
    }

    /* Tablet landscape: full-height drawer + no BOTD rail; spotlights stay 3-up until mobile (<=767). */
    .dbc-header__mega {
        height: calc(100vh - var(--dbc-admin-offset, 0px));
        max-height: calc(100vh - var(--dbc-admin-offset, 0px));
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }

    @supports (height: 100dvh) {
        .dbc-header__mega {
            height: calc(100dvh - var(--dbc-admin-offset, 0px));
            max-height: calc(100dvh - var(--dbc-admin-offset, 0px));
        }
    }

    .dbc-header__mega-content {
        grid-template-columns: 1fr;
        border-radius: 0;
    }

    .dbc-header__mega-rail {
        display: none !important;
    }

    .dbc-header__mega-inner {
        padding: 16px 0 12px;
    }

    .dbc-header__mega-results-host {
        border-radius: 0;
    }

    .dbc-header__mega-heading {
        margin: 0 0 6px;
        padding-bottom: 6px;
        border-bottom-color: #e8e8e8;
    }

    .dbc-header__mega-content .dbc-mega-heading-line {
        background-color: #e8e8e8;
    }

    .dbc-header__mega-list a {
        display: block;
        padding: 8px 0;
    }

    .dbc-header__mega-list li + li {
        margin-top: 0;
    }
}

/* Tablet portrait (<= 1024, DBC_BP_TABLET) — tighter bar. Nav columns → 2-up; Explore
 * spotlight row stays desktop rules until mobile (<=767) where spotlights stack 1 column. */
@media (max-width: 1024px) {
    :root {
        --dbc-header-height: 90px;
        --dbc-header-logo-w: 190px;
        --dbc-header-gap: 18px;
    }
    .dbc-header__mega-top {
        grid-template-columns: var(--dbc-header-logo-w) minmax(0, 1fr);
        gap: 14px;
    }

    .dbc-header__mega-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(14px, 2.4vw, 24px);
        row-gap: clamp(32px, 5.5vw, 48px);
        align-items: start;
    }
}

/* Mobile (<= 767) — DBC_BP_MOBILE: same breakpoint as the bottom nav; inline
   search is off (nav provides search). Two-column header [logo] [actions]. */
@media (max-width: 767px) {
    :root {
        /* Same wordmark column as tablet (full logo, not compact mark). */
        --dbc-header-logo-w: 190px;
        --dbc-header-icon-size: 22px;
    }

    .dbc-header__inner {
        grid-template-columns: auto 1fr;
        height: var(--dbc-header-height);
        padding-top: 0;
        padding-bottom: 0;
    }

    .dbc-header__searchbar {
        display: none;
    }

    body.dbc-header-variant--light .neve-main,
    body.dbc-header-variant--light main#content {
        padding-top: var(--dbc-header-height);
    }

    .dbc-header__profile-menu {
        min-width: 200px;
    }

    .dbc-header__mega-inner {
        padding: clamp(18px, 4vw, 26px) 0 20px;
    }

    .dbc-header__mega-toolbar {
        display: none;
    }

    .dbc-header__mega-top {
        grid-template-columns: minmax(0, 1fr);
    }

    .dbc-header__mega-logo {
        display: none;
    }

    .dbc-header__mega-search-row {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .dbc-header__mega-logo-mobile {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .dbc-header__mega-close-wrap {
        flex: 0 0 var(--dbc-header-tap);
        align-self: center;
        justify-self: auto;
        width: var(--dbc-header-tap);
        height: var(--dbc-header-tap);
        min-width: var(--dbc-header-tap);
        min-height: var(--dbc-header-tap);
        aspect-ratio: 1 / 1;
    }

    .dbc-header__mega-search {
        display: none;
    }

    .dbc-header__mega-spotlights {
        grid-template-columns: 1fr;
    }

    /* Shorter spotlight tiles on mobile (16/10 → 16/5 ≈ half the previous height). */
    .dbc-mega-spotlight__media {
        aspect-ratio: 16 / 5;
    }

    .dbc-mega-spotlight__overlay-inner {
        padding: 10px 12px 12px;
    }

    .dbc-mega-spotlight__label-text {
        font-size: 13px;
    }

    .dbc-header__mega-heading {
        margin-bottom: 8px;
    }

    .dbc-header__mega-footer-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dbc-header__mega-footer-actions {
        justify-content: flex-end;
    }
}

/* Extra-narrow phones — drop the bell to keep the header from wrapping. */
@media (max-width: 400px) {
    .dbc-header__bell {
        display: none !important;
    }
}