/* -------------------------------------------------------------------------- */
/* Top navigation — "Until the Dawn" banner bar                               */
/* -------------------------------------------------------------------------- */
/* Design integrated from the Claude Design export. The dynamic CMS menu
   ($Menu loop) and the active-character widget are preserved unchanged at the
   markup level (#topnav-tabs, li.toptab, #nav-character-*). Colours map onto the
   existing tokens in colors.css: gold = --color-decoration, light gold =
   --color-accent4, ivory = --color-foreground, sky = the --color-primary* blues.
   Sizes are scaled for the theme's 16pt rem base and are expected to be retuned
   on a later styling pass. */

/* ── Sticky shell ────────────────────────────────────────────────────────── */
#topnav
{
  position: sticky;
  top: 0;
  z-index: 10;          /* must stay above accordion stacking contexts */
  /* Translucent frosted backing on the whole pane (nav row + search tier) so
     both tiers share one surface and the sky shows faintly through. */
  background: color-mix(in oklab, var(--color-primary1) 78%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-bottom: 1rem;  /* gap between the sticky pane and page content */
}

.banner
{
  position: relative;
  /* Background lives on #topnav so the whole pane shares one continuous backing.
     No overflow:hidden (would clip the character dropdown) and no isolation
     (it trapped the dropdown's z-index inside .banner, letting the sibling
     search tier paint over it). No bottom border — #nav-bottom closes the pane. */
}

.banner-inner
{
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 12px 28px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  box-sizing: border-box;
}

/* ── Brand lockup ──────────────────────────────────────────────────────── */
.brand
{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand-emblem
{
  height: 52px;
  width: auto;
  display: block;
  /* Tight, zero-offset light glow that hugs the emblem's silhouette (the SVG
     already has a black border, so a dark drop-shadow looked muddy). */
  filter: drop-shadow(0 0 1.5px rgba(244, 236, 216, .8));
}


.brand-text
{
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1;
}

.brand-name
{
  font-family: tangerine, serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-foreground);
}

.brand-tag
{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: sans-serif;
  font-weight: 300;
  font-size: .5rem;
  letter-spacing: .26em;
  color: var(--color-text-dimmed);
  text-transform: uppercase;
}

/* ── Primary nav ───────────────────────────────────────────────────────── */
.nav
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

#topnav a
{
  text-decoration: none;
}

#topnav-tabs
{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  row-gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

#topnav li.toptab
{
  position: relative;
  float: none;          /* override the old floated layout */
  font-family: cinzel, serif;
  font-style: normal;
}

/* Separator between top-level items — replaces the export's <span class="nav-sep"> */
#topnav li.toptab + li.toptab::before
{
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--color-border);
}

#topnav li.toptab > a
{
  display: block;
  padding: 8px 14px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-text-normal);
  white-space: nowrap;
  opacity: .85;
  transition: opacity .15s, color .15s;
}

#topnav li.toptab > a:hover
{
  opacity: 1;
  color: var(--color-accent4);
}

/* Active state — $LinkingMode emits .current / .section; both map to the
   design's active-link treatment (gold text + short underline). */
#topnav li.toptab.current > a,
#topnav li.toptab.section > a
{
  color: var(--color-accent4);
  opacity: 1;
}

#topnav li.toptab.current > a::after,
#topnav li.toptab.section > a::after
{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 14px;
  height: 1px;
  background: var(--color-decoration);
  transform: translateX(-50%);
}

/* ── Dropdown panel ────────────────────────────────────────────────────── */
#topnav .dropdown-content
{
  list-style: none;
  margin: 0;
  padding: .4rem;
  background: var(--color-primary2);
  border: 1px solid var(--color-decoration-dark);
  border-radius: .4rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

#topnav .dropdown-content li > a
{
  display: block;
  padding: .3rem .6rem;
  font-size: .55rem;
  letter-spacing: .12em;
  color: var(--color-text-normal);
  border-radius: .25rem;
}

#topnav .dropdown-content li > a:hover
{
  color: var(--color-accent4);
}

/* Desktop: the original in-row child <ul>s are not shown in the nav row at all.
   Their content is rendered instead as the static .nav-submenu row (driven by
   the active section in TopNav.ss). The mobile breakpoint below re-shows them
   stacked under their parent inside the hamburger menu. */
@media (min-width: 681px)
{
  #topnav li.toptab.dropdown > .dropdown-content
  {
    display: none;
  }
}

/* ── Submenu row (static second tier) ────────────────────────────────────── */
/* Reads as the nav bar expanded by one row: same frosted pane (no background
   of its own), aligned to the same 1320px column, just an extra line of links.
   No separator between it and the nav row. */
.nav-submenu
{
  position: relative;
  z-index: 1;
}

.nav-submenu-inner
{
  max-width: 1320px;
  margin: 0 auto;
  padding: 2px 28px 8px;   /* horizontal matches .banner-inner; tight to the nav row above */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px;
}

.nav-subitem
{
  position: relative;
  padding: 4px 12px;
  font-family: cinzel, serif;
  font-size: .52rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--color-text-normal);
  text-decoration: none;
  opacity: .8;
  white-space: nowrap;
  transition: opacity .15s, color .15s;
}

.nav-subitem:hover
{
  opacity: 1;
  color: var(--color-accent4);
}

/* Active child (the current page) — gold, matching the top-row active state */
.nav-subitem.current,
.nav-subitem.section
{
  color: var(--color-accent4);
  opacity: 1;
}

/* ── Hamburger button (hidden on desktop) ────────────────────────────────── */
#topnav-hamburger
{
  display: none;          /* shown only at the mobile breakpoint */
  cursor: pointer;
  padding: .5rem .75rem;
  font-size: 1.1rem;
  background: none;
  border: none;
  color: var(--color-text-highlight);
}

/* ── Third tier: hamburger + search row ──────────────────────────────────── */
/* On desktop the hamburger is hidden, so this row is just the search bar. On
   mobile the hamburger appears at the left, before the search include. */
.search-tier
{
  display: flex;
  align-items: center;
}

/* ── Meta column: world tag + CTA / character widget ──────────────────────── */
.meta
{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.brand-tag .dot
{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent4);
  box-shadow: 0 0 8px var(--color-accent4);
}

.cta
{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid var(--color-decoration);
  color: var(--color-foreground);
  font-family: cinzel, serif;
  font-weight: 600;
  font-size: .55rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background .15s, color .15s;
}

.cta:hover
{
  background: var(--color-decoration);
  color: var(--color-primary1);
}

.cta-arrow
{
  font-size: .85rem;
  line-height: 1;
}

/* ── Active character portrait widget (now an in-flow .meta item) ─────────── */
#nav-character-widget
{
  position: relative;   /* anchor for the absolutely-positioned dropdown menu */
}

.nav-character-portrait
{
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 20%;
  overflow: visible;
  border: 1px solid var(--color-decoration-dark);
  background: var(--color-primary4);
  transition: border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-character-portrait:hover
{
  border-color: var(--color-decoration);
}

.nav-character-portrait img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20%;
  display: block;
}

.nav-character-portrait > span
{
  font-size: .6rem;
  color: var(--color-text-dimmed);
  font-family: 'courgette';
}

/* ── Notification count badge ───────────────────────────────────────────── */
.notification-badge
{
  background-color: var(--color-decoration);
  color: var(--color-background) !important;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-style: normal;
  font-family: sans-serif !important;
  font-weight: bold;
  line-height: 1;
  min-width: 1rem;
  padding: .1rem .25rem;
  text-align: center;
  position: absolute;
  top: -.3rem;
  right: -.3rem;
  z-index: 1;
}

/* ── Portrait button reset ──────────────────────────────────────────────── */
.nav-character-portrait-btn
{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: block;
  line-height: 0;
  vertical-align: top;
}

/* ── Character dropdown menu ─────────────────────────────────────────────── */
.nav-character-menu
{
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 10rem;
  background: var(--color-primary2);
  border-style: ridge;
  border-width: medium;
  border-color: var(--color-secondary2);
  border-radius: .5rem;
  padding: .4rem .25rem;
  z-index: 20;          /* above sticky nav */
}

/* Direct-child links only (Dashboard, Log out) — chips handled separately */
.nav-character-menu > a
{
  display: block;
  padding: .3rem .6rem;
  font-family: redressed;
  font-style: italic;
  font-size: 1.1rem;
  color: var(--color-text-normal);
  text-decoration: none;
  white-space: nowrap;
  border-radius: .3rem;
}

.nav-character-menu > a:hover
{
  color: var(--color-highlight);
}

.nav-character-menu hr
{
  border: none;
  border-top: 1px solid var(--color-border);
  margin: .3rem .4rem;
}

.nav-menu-section-label
{
  display: block;
  padding: .15rem .6rem;
  font-size: 0.7rem;
  font-family: sans-serif;
  font-style: normal;
  color: var(--color-text-dimmed);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Chip container inside the menu */
.nav-chips
{
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .3rem .4rem;
}

/* Character chip links — full-width rows for consistent layout */
a.nav-character-chip
{
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  white-space: normal;    /* allow name to wrap rather than overflow */
  align-items: center;    /* keep icon centred against two text lines */
}

a.nav-character-chip:hover
{
  border-color: var(--color-decoration-dark);
  color: var(--color-highlight);
}

a.nav-character-chip.active
{
  border-color: var(--color-decoration);
  color: var(--color-decoration);
}

/* Two-line text block inside the chip */
.nav-character-chip .chip-text
{
  display: flex;
  flex-direction: column;
  gap: .05rem;
}

.nav-character-chip .chip-name
{
  line-height: 1.2;
}

.nav-character-chip .chip-server
{
  font-size: .6rem;
  color: var(--color-text-dimmed);
  line-height: 1.2;
}

a.nav-character-chip.active .chip-server
{
  color: var(--color-decoration-dark);
}

/* ── Bottom decorative hairline ─────────────────────────────────────────── */
/* Two-part treatment matching the design export: a gold gradient glow with a
   faint solid companion line just beneath it, so the pane base reads as a
   defined edge rather than a single thin glow. */
#nav-bottom
{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-decoration) 18%, var(--color-decoration) 82%, transparent);
  opacity: .55;
  border-bottom: 1px solid var(--color-decoration-dark);
}

/* ── Mobile breakpoint ───────────────────────────────────────────────────── */
@media (max-width: 680px)
{
  .banner-inner
  {
    /* Brand on the left, meta (auth/widget) on the right — one row. The nav no
       longer occupies a row of its own; its menu opens as an overlay. */
    grid-template-columns: auto 1fr;
  }

  #topnav-hamburger
  {
    display: block;
  }
  /* Anchor the open menu to the whole pane, not the brand row: neutralise the
     intermediate positioned ancestors on mobile and make #topnav the containing
     block. (The active-underline ::after anchors to its <a>, not these, so this
     is safe here.) */
  #topnav { position: sticky; }            /* already sticky; the containing block */
  .banner, .banner-inner { position: static; }

  /* .nav holds only #topnav-tabs now (the hamburger moved to .search-tier).
     #topnav-tabs is an absolute overlay, so .nav collapses to nothing and adds
     no row — this removes the empty band between brand and search. */
  .nav
  {
    position: static;
  }

  /* Open menu = overlay dropping below the whole pane, anchored to #topnav
     (which is position:sticky). Closed = display:none. The page doesn't reflow
     when it opens; the panel floats over the content below the pane. */
  #topnav-tabs
  {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-primary1);
    border-bottom: 1px solid var(--color-decoration-dark);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
    padding: .5rem 0;
    z-index: 30;          /* above the search tier and page content */
  }

  #topnav-tabs.open
  {
    display: flex;
  }

  /* No vertical separators when items are stacked */
  #topnav li.toptab + li.toptab::before
  {
    display: none;
  }

  #topnav li.toptab > a
  {
    padding: .5rem 1rem;
  }

  /* Submenu children render stacked and indented under their parent */
  #topnav .dropdown-content
  {
    position: static;
    display: block;
    padding-left: 1.5rem;
    background: none;
    border: none;
    box-shadow: none;
  }
}