/**
 * @file
 * Chrome — sidebar, mobile header, entrance header, brand mark.
 *
 * Loaded after style.css / header.css / menu.css / navigation.css so it
 * intentionally overrides the legacy blue chrome (--np-header-band) with
 * the editorial plum chrome (--np-bg-chrome) and persimmon accent
 * (--np-color-accent) defined in DESIGN.md.
 *
 * Two surfaces, hard contrast at the seam:
 *   - The plum sidebar carries identity and navigation.
 *   - The white page field carries reading and writing.
 *
 * Below 768px the sidebar collapses to an off-canvas drawer; a slim
 * 52px plum top bar carries the wordmark + hamburger.
 */

/* -----------------------------------------------------------------------
 * 1. Page-shell — kill the legacy radial-gradient atmospheric backdrop.
 *    DESIGN.md "What this system is not" explicitly forbids gradients,
 *    backdrop blurs, and ambient atmospheric effects. The page is the
 *    whisper-paper field; chrome lives at the edge of it.
 * --------------------------------------------------------------------- */
html, body {
  background: var(--np-bg-page);
}

.layout-container {
  background: var(--np-bg-page);
}

.main-content {
  background: var(--np-bg-page) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}

/* -----------------------------------------------------------------------
 * 2. Site header — desktop hides it; mobile uses it as a 52px plum bar.
 *    The desktop wordmark lives at the top of the sidebar (see section 3).
 * --------------------------------------------------------------------- */
.site-header {
  background: var(--np-bg-chrome) !important;
  color: var(--np-text-on-chrome) !important;
  height: var(--np-mobile-header-height);
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: none; /* hidden on desktop */
}

.site-header__inner {
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--np-space-4) !important;
  height: 100%;
  position: relative;
}

.site-branding {
  background: transparent !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: var(--np-space-3);
}

.site-branding__link {
  display: flex;
  align-items: center;
  gap: 14px;                /* persimmon mark to wordmark gap, per DESIGN */
  color: var(--np-text-on-chrome) !important;
  text-decoration: none;
  padding: 0;
  font: inherit;
  line-height: 1;
}

/* Persimmon vertical bar — the logo mark at any size, per DESIGN.md.
   Rendered as a ::before pseudo-element so the markup stays a single
   <a> with a single text node. */
.site-branding__link::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 26px;             /* wordmark height + ~6px (3px above cap, 3px below baseline) */
  background: var(--np-color-accent);
  border-radius: 1px;
  flex: 0 0 4px;
}

.site-branding__text {
  font-family: var(--np-font-serif) !important;
  font-style: normal;
  font-weight: 500 !important;     /* sole serif-500 exception per DESIGN.md */
  font-size: 22px !important;
  letter-spacing: -0.014em !important;
  color: var(--np-text-on-chrome) !important;
  line-height: 1;
}

/* Mobile-only: show the slim plum bar, surface the hamburger.
   Layout: hamburger LEFT (matches the off-canvas drawer side),
   wordmark + persimmon mark CENTERED, balanced 36px gutter on the
   right to mirror the hamburger and keep the brand truly centered. */
@media (max-width: 767px) {
  .site-header {
    display: flex;
    position: sticky;
    top: 0;
    z-index: var(--np-z-sticky);
  }
  .site-header__inner {
    display: grid !important;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: var(--np-space-3);
    padding: 0 var(--np-space-3) !important;
    justify-content: stretch;
  }
  .site-header__hamburger {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-self: start;
  }
  .site-branding {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin-left: 0 !important;
  }
}

/* -----------------------------------------------------------------------
 * 3. Sidebar — desktop plum chrome with wordmark at top.
 *    The sidebar's existing template renders into <div id="sidebar-menu"
 *    class="sidebar"> with a .sidebar-header (hamburger area). We use
 *    that .sidebar-header as the brand row on desktop and re-purpose
 *    .sidebar-title as the wordmark.
 * --------------------------------------------------------------------- */
.sidebar,
#sidebar-menu {
  background: var(--np-bg-chrome) !important;
  color: var(--np-text-on-chrome);
  width: var(--np-sidebar-width);
  border-right: none !important;
}

.sidebar .sidebar-header,
#sidebar-menu .sidebar-header {
  background: var(--np-bg-chrome);
  color: var(--np-text-on-chrome);
  padding: var(--np-space-5) var(--np-space-5) var(--np-space-4);
  display: flex;
  align-items: center;
  gap: 9px;                       /* tightened mark→wordmark gap */
  border-bottom: 1px solid rgba(240, 232, 216, 0.08);
}

/* Persimmon vertical bar before the wordmark — same mark as the mobile
   header's branding link. The .sidebar-title text becomes the wordmark.
   margin-top nudges the bar 2px below the flex-row centerline so it
   sits optically under the wordmark x-height instead of the bounding
   box midpoint (Charter sits high in its em-square, so true center
   reads as too-high). */
.sidebar .sidebar-header::before,
#sidebar-menu .sidebar-header::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 30px;
  background: var(--np-color-accent);
  border-radius: 1px;
  flex: 0 0 4px;
  margin-top: 2px;
}

.sidebar .sidebar-title,
#sidebar-menu .sidebar-title {
  margin: 0;
  font-family: var(--np-font-serif);
  font-weight: 500;             /* sole serif-500 exception */
  font-size: var(--np-text-lg);
  letter-spacing: -0.014em;
  color: var(--np-text-on-chrome);
  line-height: 1;
}

/* Drawer close X — only relevant on mobile (the drawer is fixed open
   on desktop, no close affordance needed). Hide on desktop. */
.sidebar-close {
  display: none;
}

/* Legacy hamburger-menu wrapper (older sidebar templates) — hide on
   desktop, mobile hamburger lives in the top bar (.site-header). */
.sidebar .hamburger-menu,
#sidebar-menu .hamburger-menu {
  display: none;
}

/* Sidebar nav items: cream type on plum, hover lifts a translucent
   cream wash, active item carries a 3px persimmon left rail. */
.sidebar .menu-title,
#sidebar-menu .menu-title,
.sidebar .secondary-item,
#sidebar-menu .secondary-item {
  color: var(--np-text-on-chrome) !important;
  background: transparent !important;
  text-decoration: none;
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  padding: var(--np-space-3) var(--np-space-5);
  display: flex;
  align-items: center;
  gap: var(--np-space-2);
  border-left: var(--np-border-width-rail) solid transparent;
  transition: background-color var(--np-duration-base) var(--np-ease-standard),
              border-color var(--np-duration-base) var(--np-ease-standard);
}

/* Hover and active states must override the legacy menu.css rules that
   set bg to --np-bg-secondary (warm cream). Without this override the
   cream background lands under the cream-on-chrome text and contrast
   collapses to near zero. */
.sidebar .menu-title:hover,
#sidebar-menu .menu-title:hover,
.sidebar .nav-item:hover > .menu-title,
#sidebar-menu .nav-item:hover > .menu-title,
.sidebar .secondary-item:hover,
#sidebar-menu .secondary-item:hover,
.sidebar .nav-item:hover,
#sidebar-menu .nav-item:hover {
  background: var(--np-bg-chrome-hover) !important;
  background-color: var(--np-bg-chrome-hover) !important;
  color: var(--np-text-on-chrome) !important;
}

.sidebar .menu-title.active,
#sidebar-menu .menu-title.active,
.sidebar .nav-item.active > .menu-title,
#sidebar-menu .nav-item.active > .menu-title,
.sidebar .nav-item.active .menu-title,
#sidebar-menu .nav-item.active .menu-title,
.sidebar .secondary-item.active,
#sidebar-menu .secondary-item.active,
.sidebar .nav-item.active,
#sidebar-menu .nav-item.active {
  background: var(--np-bg-chrome-hover) !important;
  background-color: var(--np-bg-chrome-hover) !important;
  border-left: var(--np-border-width-rail) solid var(--np-color-accent) !important;
  color: var(--np-text-on-chrome) !important;
}

/* Secondary nav (expanded children area) — the legacy rule paints it
   with --np-bg-primary (white) which is jarring against plum chrome.
   Keep the area in plum so the chrome reads as one surface. */
.sidebar .secondary-nav,
#sidebar-menu .secondary-nav,
.sidebar .secondary-nav.active,
#sidebar-menu .secondary-nav.active {
  background: transparent !important;
  background-color: transparent !important;
}

/* The .nav-item itself when active should NOT carry a left rail —
   the rail belongs to the .menu-title (the actual visible row), not
   to the parent <li> which extends across the whole sub-menu region. */
.sidebar .nav-item.active,
#sidebar-menu .nav-item.active {
  border-left: 0 !important;
  background: transparent !important;
}

/* Material Symbols icons inside the sidebar inherit cream type color. */
.sidebar .material-symbols-outlined,
#sidebar-menu .material-symbols-outlined {
  color: inherit !important;
  font-size: 20px;
}

/* Notification count pill — persimmon dot, cream type. */
.sidebar .update-count-wrapper,
#sidebar-menu .update-count-wrapper {
  margin-left: auto;
}

.sidebar .update-count.visible,
#sidebar-menu .update-count.visible {
  background: var(--np-color-accent) !important;
  color: var(--np-text-inverse) !important;
  border-radius: var(--np-radius-pill);
  padding: 2px 8px;
  font-size: var(--np-text-xs);
  font-weight: var(--np-weight-medium);
  line-height: 1.2;
}

/* Secondary nav (sub-items) — slightly indented, no rail of their own. */
.sidebar .secondary-nav,
#sidebar-menu .secondary-nav {
  background: transparent;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar .secondary-nav .secondary-item,
#sidebar-menu .secondary-nav .secondary-item {
  padding-left: calc(var(--np-space-5) + var(--np-space-6));
  font-size: var(--np-text-sm);
}

/* -----------------------------------------------------------------------
 * 4. Mobile sidebar — off-canvas drawer behavior.
 * --------------------------------------------------------------------- */
@media (max-width: 767px) {
  .layout-container {
    flex-direction: column;
  }

  /* The outer .sidebar IS the drawer in our pattern. The legacy
     menu.css mobile rules expected the outer to stay static and
     .sidebar-content to slide; we override both because chrome.css
     is the new authority for mobile sidebar behavior. */
  body .sidebar,
  body #sidebar-menu {
    position: fixed !important;
    top: var(--np-mobile-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--np-mobile-drawer-width) !important;
    height: auto !important;                      /* override legacy 60px */
    background: var(--np-bg-chrome) !important;
    transform: translateX(-100%) !important;
    transition: transform var(--np-duration-slow) var(--np-ease-emphasis) !important;
    z-index: var(--np-z-overlay) !important;
    overflow-y: auto;
    box-shadow: none;
  }

  body .sidebar.sidebar-open,
  body #sidebar-menu.sidebar-open {
    transform: translateX(0) !important;
    box-shadow: var(--np-shadow-lg);
    width: var(--np-mobile-drawer-width) !important;   /* override legacy 280px */
  }

  /* Inside the drawer, the content slides nowhere — it just is. The
     legacy .sidebar-content translate transform must be neutralized. */
  body .sidebar .sidebar-content,
  body #sidebar-menu .sidebar-content {
    transform: none !important;
    background: transparent !important;
  }

  /* Drawer brand row on mobile: the top header already shows the
     persimmon mark + "Neopoet" wordmark, so a second wordmark inside
     the drawer is redundant. Suppress the brand bits and keep only
     the close affordance, right-aligned. */
  .sidebar .sidebar-header,
  #sidebar-menu .sidebar-header {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--np-space-3);
    padding: var(--np-space-4) var(--np-space-5);
    border-bottom: 1px solid rgba(240, 232, 216, 0.10);
    background: var(--np-bg-chrome);
    height: auto;
  }
  .sidebar .sidebar-header::before,
  #sidebar-menu .sidebar-header::before {
    content: none;
  }
  .sidebar .sidebar-title,
  #sidebar-menu .sidebar-title {
    display: none !important;
  }

  /* Drawer close X — distinct from the top-bar hamburger but uses
     the same JS toggle (.hamburger-toggle class). */
  .sidebar-close {
    background: transparent;
    border: none;
    color: var(--np-text-on-chrome);
    cursor: pointer;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--np-radius-circle);
    transition: background-color var(--np-duration-base) var(--np-ease-standard);
  }
  .sidebar-close:hover {
    background: var(--np-bg-chrome-hover);
  }
  .sidebar-close__icon {
    font-size: 24px;
    line-height: 1;
    font-weight: var(--np-weight-regular);
  }

  .main-content {
    margin-left: 0 !important;
  }

  /* Scrim that dims content when the drawer is open. The drawer JS
     toggles `.menu-open` on <body>. Inset 52px from the top so the
     plum top bar (with its hamburger close affordance) stays clickable. */
  body.menu-open::after {
    content: "";
    position: fixed;
    inset: var(--np-mobile-header-height) 0 0 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--np-z-overlay) - 1);
  }

  /* Neutralize the legacy navigation.css scrim — it covers the entire
     viewport (top: 0 with z-index 999), trapping clicks on the top bar
     and the hamburger so the drawer can't be closed. The chrome.css
     ::after scrim above replaces it correctly. */
  body.menu-open::before {
    content: none !important;
    display: none !important;
  }
}

/* -----------------------------------------------------------------------
 * 5. Hamburger button styling — overrides Olivero's default look.
 * --------------------------------------------------------------------- */
.site-header__hamburger {
  display: none;          /* desktop hides the hamburger */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 0 8px;
  cursor: pointer;
  margin-left: auto;
  color: var(--np-text-on-chrome);
}

.site-header__hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--np-text-on-chrome);
  border-radius: 1px;
}

@media (max-width: 767px) {
  .site-header__hamburger {
    display: inline-flex;
  }
}

/* -----------------------------------------------------------------------
 * 6. Entrance header — the partial in templates/includes/entrance-header.
 *    A 4px persimmon vertical rule beside a serif welcome headline.
 *    Page-scale echo of the logo mark. Used on dashboard / contest
 *    index / anthology landing / onboarding completion only.
 * --------------------------------------------------------------------- */
.np-entrance-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--np-space-6);
  padding: var(--np-space-10) 0 var(--np-space-8);
  background: var(--np-bg-primary);
}

.np-entrance-header__rule {
  width: 4px;
  background: var(--np-structural-rule);
  border-radius: 1px;
  align-self: stretch;
  min-height: 160px;
}

.np-entrance-header__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--np-space-3);
}

.np-entrance-header__headline {
  margin: 0;
  font-family: var(--np-font-serif);
  font-weight: var(--np-weight-medium);   /* sans-medium token; serif renders at 400 */
  font-size: var(--np-text-hero);
  line-height: var(--np-leading-tight);
  letter-spacing: var(--np-tracking-tight);
  color: var(--np-text-primary);
}

.np-entrance-header__meta {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  line-height: var(--np-leading-normal);
  color: var(--np-text-secondary);
  margin: 0;
}

/* -----------------------------------------------------------------------
 * 7. Olivero header overrides — Olivero ships its own .site-header
 *    treatment that bleeds through above. Force our chrome to win
 *    everywhere it matters.
 * --------------------------------------------------------------------- */
.region-header,
.region-primary-menu,
.region-secondary-menu {
  background: transparent !important;
}

/* -----------------------------------------------------------------------
 * 7.5 Default link color across page content.
 *
 *    Olivero's CSS sets `a { color: #1475ad }` very low in the cascade.
 *    Every unstyled <a> on the site (search results, entity-bylines,
 *    field-rendered links, body-text inline links) inherits this blue.
 *    Editorial register: links default to persimmon, the action color.
 *    Specific contexts still override (sidebar nav stays cream-on-plum;
 *    .breadcrumb stays muted; entity titles stay ink).
 * --------------------------------------------------------------------- */
.main-content a,
.region--content a,
.layout-container .main-content a {
  color: var(--np-text-link);
}

.main-content a:hover,
.region--content a:hover,
.layout-container .main-content a:hover {
  color: var(--np-text-link-hover);
}

/* Entity title links default to ink — they're content, not actions.
   Per DESIGN.md the title names the unit of work (a poem, a resource,
   a workshop); persimmon is reserved for the verb that matters. Hover
   shifts to persimmon to signal interactivity. !important because
   the views-overrides cell-link selector outranks this on specificity
   for any title rendered inside a Views row, and we want titles to
   read as ink consistently. */
.main-content h1 a,
.main-content h2 a,
.main-content h3 a,
.main-content h4 a,
.region--content h1 a,
.region--content h2 a,
.region--content h3 a,
.region--content h4 a {
  color: var(--np-text-primary) !important;
  text-decoration: none;
}

.main-content h1 a:hover,
.main-content h2 a:hover,
.main-content h3 a:hover,
.main-content h4 a:hover,
.region--content h1 a:hover,
.region--content h2 a:hover,
.region--content h3 a:hover,
.region--content h4 a:hover {
  color: var(--np-text-link) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Sidebar links and other chrome anchors must NOT pick up the
   persimmon link color — they need cream-on-plum. The .sidebar
   selector wins by specificity, but explicit re-statement guards
   against future cascade surprises. */
.sidebar a,
#sidebar-menu a,
.site-header a {
  color: inherit;
}

/* -----------------------------------------------------------------------
 * 8. Breadcrumb — Olivero defaults to a blue link color; our editorial
 *    pattern is sans, muted, with single-character separators. Per
 *    DESIGN.md component.breadcrumb.
 * --------------------------------------------------------------------- */
.breadcrumb,
.breadcrumb__list,
nav.breadcrumb ol {
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  color: var(--np-text-tertiary);
  margin: 0 0 var(--np-space-4);
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--np-space-2);
}

.breadcrumb__item,
.breadcrumb li {
  list-style: none;
}

.breadcrumb__link,
.breadcrumb a {
  color: var(--np-text-tertiary) !important;
  text-decoration: none;
  font-family: var(--np-font-sans);
  font-size: var(--np-text-base);
  font-weight: var(--np-weight-regular);
}

.breadcrumb__link:hover,
.breadcrumb a:hover {
  color: var(--np-text-secondary) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Single-character separator between items, sans, hairline weight.
   Olivero (in some templates / chains) applies BOTH a 45° transform
   AND a 2px slate-grey right border to the breadcrumb separator
   pseudo, which together render our `›` as a `]`-bracket-shaped
   artifact. Override every chrome property the parent may have set
   so the chevron renders cleanly as a single character. */
.breadcrumb__item + .breadcrumb__item::before,
.breadcrumb li + li::before {
  content: "›" !important;
  color: var(--np-text-tertiary);
  margin-right: var(--np-space-2);
  transform: none !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-regular);
  display: inline;
}