/* Public-header design tokens. Existing production layout CSS remains
 * authoritative until visual regression tests confirm exact parity.
 * Do not mutate layout metrics here: shared HTML is synchronized at build
 * preparation time, never replaced after the browser first paint. */
html header.site-header {
  --novelight-common-header-bg: rgba(250, 249, 246, 0.98);
  --novelight-common-header-ink: #0e1d35;
  --novelight-common-header-link: #28364a;
  --novelight-common-header-accent: #70460c;
}

/* Keep non-Home public header action controls at the approved Home dimensions.
   Do not modify Home itself; its existing CSS remains the visual baseline. */
@media (min-width: 1101px) {
  html body.novelight-public-header-page:not(.novelight-public-dark) header.site-header .header-actions > .header-search {
    width: 44px !important;
    height: 44px !important;
  }

  html body.novelight-public-header-page:not(.novelight-public-dark) header.site-header .header-actions > .login-action {
    height: 53px !important;
    min-height: 53px !important;
  }
}

/* Some older authentication pages have inline "header { height: 72px; }"
   declarations. They must not shrink the shared public header, whose height
   comes from the Home-derived .public-header-inner. Body-only auth content
   and the intentionally isolated preregistration trust pages are unchanged. */
html body.novelight-theme.novelight-public-header-page:not(.novelight-public-dark) header.site-header {
  height: auto !important;
}

/* Fail closed if either plaza release flag is OFF or the shared client failed to load. */
html:not(.novelight-community-released) header.site-header a[href="community.html"] {
  display: none !important;
}

/* Five-link navigation cannot wrap; a menu replaces it before desktop collision. */
html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .desktop-nav {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .desktop-nav a {
  text-decoration: none !important;
}
html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions {
  flex-wrap: nowrap !important;
}
@media (min-width: 901px) and (max-width: 1510px) {
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .public-header-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .desktop-nav {
    display: none !important;
  }
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .mobile-menu {
    display: block !important;
  }
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .mobile-menu > nav {
    z-index: 60;
  }
  /* Keep a stable header action box through login and account hydration. */
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions {
    display: flex !important;
    position: relative !important;
    width: 430px !important;
    min-width: 430px !important;
    height: 60px !important;
    flex: 0 0 430px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions > .mobile-menu {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
  }
  /* Middle widths use the mobile navigation instead of squeezing account and
     owner shortcuts into the same compact action row. Those destinations remain
     available in the menu, while the logo/search/login/menu coordinates stay fixed. */
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions > .nl-reader-account-bar,
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions > .novelight-admin-shortcut-desktop {
    display: none !important;
  }
  html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .mobile-menu .nl-reader-mobile-items {
    display: contents !important;
  }
}

/* Canonical Home signup treatment on every ordinary public header. */
html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions > .signup-action {
  border: 1px solid #e0ae4c !important;
  background: linear-gradient(135deg, #b87a17, #e2ad43) !important;
  color: #0b1018 !important;
  box-shadow: 0 8px 22px rgba(214, 164, 71, 0.18) !important;
}
html body:is(.novelight-public-dark, .novelight-public-header-page) header.site-header .header-actions > .signup-action:hover {
  background: linear-gradient(135deg, #c98b23, #f0c35d) !important;
  box-shadow: 0 10px 28px rgba(214, 164, 71, 0.27) !important;
}

/* Shared login / signed-in Studio dimensions. A light page previously rendered its
   53px height in content-box, then added 20+px padding/borders and reached 75px.
   Home's actual control is about 47px. Use border-box and the SAME control
   dimensions before and after authentication on all public headers. */
@media (min-width: 641px) {
  html body.novelight-public-dark header.site-header .header-actions > .login-action,
  html body.novelight-public-header-page:not(.novelight-public-dark) header.site-header .header-actions > .login-action {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 47px !important;
    min-height: 47px !important;
    max-height: 47px !important;
    padding: 8px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 641px) and (max-width: 1180px) {
  html body.novelight-public-dark header.site-header .header-actions > .login-action,
  html body.novelight-public-header-page:not(.novelight-public-dark) header.site-header .header-actions > .login-action {
    font-size: 14px !important;
  }
}
@media (max-width: 640px) {
  html body.novelight-public-dark header.site-header .header-actions > .login-action,
  html body.novelight-public-header-page:not(.novelight-public-dark) header.site-header .header-actions > .login-action {
    font-size: 16px !important;
  }
}