/* =========================================================================
   MarineTL | Premium sticky header v2.8.0 for Fictioneer "Wide" header style
   Loaded by the plugin; no Additional CSS is required.
   - Frosted-glass bar with gilt hairline while stuck
   - Gold underline menu hover/current, glass dropdowns, refined site title
   - Stable compact geometry on smaller screens; title + tagline retained
   ========================================================================= */

/* ---- 1. Tokens (dark default, light override) ---- */
.header-style-wide .main-navigation {
  --mtl-glass-top: rgb(17 25 31 / 80%);
  --mtl-glass: rgb(11 17 22 / 90%);
  --mtl-ink: #fbf6ea;
  --mtl-ink-soft: #b9c4c3;
  --mtl-gold: #e8c48a;
  --mtl-gold-hi: #f6e2ba;
  --mtl-gold-lo: #d2a35d;
  --mtl-title: #f6e2ba;
  --mtl-line: rgb(232 196 138 / 55%);
  --mtl-hover: rgb(232 196 138 / 11%);
  --mtl-shadow: 0 18px 34px -18px rgb(0 0 0 / 70%);
  --mtl-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
:root[data-mode="light"] .main-navigation:is(.header-style-wide *) {
  --mtl-glass-top: rgb(255 252 245 / 84%);
  --mtl-glass: rgb(251 246 234 / 93%);
  --mtl-ink: #1b242b;
  --mtl-ink-soft: #4d5b63;
  --mtl-gold: #9a6a22;
  --mtl-gold-hi: #b98433;
  --mtl-gold-lo: #8a5c18;
  --mtl-title: #86581a;
  --mtl-line: rgb(154 106 34 / 45%);
  --mtl-hover: rgb(154 106 34 / 10%);
  --mtl-shadow: 0 16px 30px -18px rgb(30 38 46 / 45%);
}

/* ---- 2. The stuck bar (only once you scroll; at the very top the theme's own look stays) ---- */
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky:is(.header-style-wide *) {
  box-shadow: var(--mtl-shadow);
  transition: box-shadow .18s ease;
}
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky:is(.header-style-wide *) .main-navigation__background {
  background: linear-gradient(180deg, var(--mtl-glass-top), var(--mtl-glass)) !important; /* beats the theme's opacity vars */
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  filter: none;
  box-shadow: none;
}
/* Gilt hairline along the bottom edge, fading out at both ends. */
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky:is(.header-style-wide *) .main-navigation__background::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mtl-line) 18%, var(--mtl-line) 82%, transparent);
  pointer-events: none;
}

/* ---- 3. Site title / logo in the wide header ---- */
.header-style-wide .main-navigation .wide-header-identity__title-link {
  font-family: var(--mtl-serif);
  font-weight: 600;
  letter-spacing: -.02em;
  text-transform: none;
  transition: color .2s ease;
}
:root:not(.no-nav-sticky) body:not(.scrolled-to-top) .main-navigation.is-sticky:is(.header-style-wide *) .wide-header-identity__title-link { color: var(--mtl-title); }
@media (hover: hover) {
  .header-style-wide .main-navigation .wide-header-identity__title-link:hover { color: var(--mtl-gold); }
}

/* ---- 4. Menu: gold underline that draws in, soft pill hover ---- */
.header-style-wide .main-navigation .main-navigation__list > .menu-item > a {
  position: relative;
  letter-spacing: .02em;
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease;
}
.header-style-wide .main-navigation .main-navigation__list > .menu-item > a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 9px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--mtl-gold-hi), var(--mtl-gold-lo));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.2, .75, .2, 1);
}
.header-style-wide .main-navigation .main-navigation__list > .menu-item > a:focus-visible::after,
.header-style-wide .main-navigation .main-navigation__list > .menu-item.current-menu-item > a::after,
.header-style-wide .main-navigation .main-navigation__list > .menu-item.current-menu-ancestor > a::after,
.header-style-wide .main-navigation .main-navigation__list > .menu-item.current_page_item > a::after { transform: scaleX(1); }
@media (hover: hover) {
  .header-style-wide .main-navigation .main-navigation__list > .menu-item:hover > a { background-color: var(--mtl-hover); }
  .header-style-wide .main-navigation .main-navigation__list > .menu-item:hover > a::after { transform: scaleX(1); }
  .header-style-wide .main-navigation .icon-menu__item:hover { background-color: var(--mtl-hover); }
}
.header-style-wide .main-navigation a:focus-visible,
.header-style-wide .main-navigation button:focus-visible { outline: 2px solid var(--mtl-gold); outline-offset: -3px; }

/* ---- 5. Dropdown sub-menus as frosted glass ---- */
.header-style-wide .main-navigation .sub-menu {
  --navigation-height: 40px;
  border: 1px solid var(--mtl-line);
  border-radius: 14px;
  background: var(--mtl-glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 22px 44px -16px rgb(0 0 0 / 55%);
  /* Nested Fictioneer sub-menus are positioned outside their parent. Do not clip them. */
  overflow: visible;
  background-clip: padding-box;
}


/* ---- 6. Stable Wide-header geometry with title + tagline ----
   Do not change header dimensions when Fictioneer toggles .scrolled-to-top. Changing
   sticky-element height at that boundary can make the browser cross the threshold back
   and forth, which presents as a visible scroll jitter. Both identity lines remain
   present in every state; phones/tablets use one compact padding value in both states. */
.header-style-wide .main-navigation .wide-header-identity {
  min-width: 0;
}

.header-style-wide .main-navigation .wide-header-identity__tagline {
  display: block;
  margin-top: .32em;
  color: var(--mtl-ink-soft);
  line-height: 1.2;
  opacity: .92;
}

@media only screen and (max-width: 1023px) {
  .header-style-wide .main-navigation .main-navigation__wrapper {
    --v: 14px;
  }
}

/* ---- 7. Tablet / mobile: compact two-line identity; long text truncates ---- */
@media only screen and (max-width: 1023px) {
  .header-style-wide .main-navigation .main-navigation__wrapper { flex-wrap: nowrap; }
  .header-style-wide .main-navigation .main-navigation__left { min-width: 0; }
  .header-style-wide .main-navigation .wide-header-identity {
    min-width: 0;
    max-width: calc(100vw - 92px);
  }
  .header-style-wide .main-navigation .wide-header-identity__title-link,
  .header-style-wide .main-navigation .wide-header-identity__tagline {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .header-style-wide .main-navigation .wide-header-identity__tagline {
    margin-top: 4px;
    font-size: clamp(.78rem, 3.4vw, .92rem);
  }
  .header-style-wide .main-navigation .main-navigation__list > .menu-item > a::after { left: 10px; right: 10px; bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .header-style-wide .main-navigation * { transition-duration: .01ms !important; }
}

/* ---- Optional: taller bar (applies always, not only when stuck, so nothing jumps) ----
:root { --navigation-height: 52px; }
@media only screen and (min-width: 1024px) { :root { --navigation-height: 60px; } }
*/