/* ==========================================================================
   NFB-NEWSLINE Hawaii — front-end styles
   Tokens mirror the Figma variable collection (surface/*, typography/*, scale/*).
   ========================================================================== */

:root {
  /* Surfaces */
  --nl-surface-page: #e3e3e3;
  --nl-surface-card: #f1f1f1;
  --nl-surface-white: #ffffff;
  --nl-surface-subtle: #ccd5e1;
  --nl-surface-primary-card: #e6eaf0;
  --nl-surface-action: #012e6b;
  --nl-surface-action-hover: #012556;
  --nl-surface-action-inverted: #e6eaf0;
  --nl-surface-action-inverted-hover: #ccd5e1;
  /* Text */
  --nl-text-heading: #171717;
  --nl-text-body: #2e2e2e;
  --nl-text-heading-inverted: #e3e3e3;
  --nl-text-body-inverted: #c7c7c7;
  --nl-text-primary: #011c40;
  --nl-text-primary-hover: #00122b;
  --nl-text-primary-inverted: #e6eaf0;
  --nl-text-primary-inverted-hover: #ccd5e1;
  /* Borders / icons */
  --nl-border: #00122b;
  --nl-border-inverted: #e6eaf0;
  --nl-focus: #00122b;
  --nl-focus-inverted: #99abc4;
  --nl-surface-subtle-hover: #99abc4;
  --nl-text-secondary: #2e2e2e;
  --nl-text-secondary-inverted: #c7c7c7;
  /* Scale */
  --nl-s-25: 4px; --nl-s-50: 8px; --nl-s-75: 12px; --nl-s-100: 16px; --nl-s-150: 24px;
  --nl-s-200: 32px; --nl-s-300: 48px; --nl-s-400: 64px; --nl-s-600: 96px; --nl-s-800: 128px;
  --nl-radius-md: 8px; --nl-radius-lg: 16px;
  /* Type */
  --nl-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nl-fs-md: 1rem;        --nl-lh-md: 1.5rem;     /* 16/24 */
  --nl-fs-lg: 1.25rem;     --nl-lh-lg: 1.75rem;    /* 20/28 */
  --nl-fs-xl: 1.5625rem;   --nl-lh-xl: 2rem;       /* 25/32 */
  --nl-fs-h2: 1.9375rem;   --nl-lh-h2: 2.5rem;     /* 31/40 */
  --nl-fs-h1: 2.4375rem;   --nl-lh-h1: 3rem;       /* 39/48 */
  --nl-content: 960px;
  --nl-card-width: 1056px;
  --nl-text-measure: 720px;
  --nl-wide: 1376px;
  --nl-sidebar: 416px;

  /* Contextual (re-mapped inside inverted/navy contexts) */
  --nl-c-heading: var(--nl-text-heading);
  --nl-c-body: var(--nl-text-body);
  --nl-c-link: var(--nl-text-primary);
  --nl-c-link-hover: var(--nl-text-primary-hover);
  --nl-c-action: var(--nl-surface-action);
  --nl-c-action-hover: var(--nl-surface-action-hover);
  --nl-c-on-action: var(--nl-text-primary-inverted);
  --nl-c-on-action-hover: var(--nl-text-primary-inverted-hover);
  --nl-c-border: var(--nl-border);
  --nl-c-focus: var(--nl-focus);
  --nl-c-icon: var(--nl-border);
}

@media (max-width: 767px) {
  :root {
    --nl-fs-xl: 1.25rem;   --nl-lh-xl: 1.75rem;
    --nl-fs-h2: 1.5625rem; --nl-lh-h2: 2rem;
    --nl-fs-h1: 1.9375rem; --nl-lh-h1: 2.5rem;
  }
}

/* Inverted context: navy surfaces (header, action sections, action callouts, mobile menu) */
.nl-inverted,
.nl-section--action,
.nl-callout--action,
.site-header,
.nl-mobile-menu {
  --nl-c-heading: var(--nl-text-heading-inverted);
  --nl-c-body: var(--nl-text-body-inverted);
  --nl-c-link: var(--nl-text-primary-inverted);
  --nl-c-link-hover: var(--nl-text-primary-inverted-hover);
  --nl-c-action: var(--nl-surface-action-inverted);
  --nl-c-action-hover: var(--nl-surface-action-inverted-hover);
  --nl-c-on-action: var(--nl-text-primary);
  --nl-c-on-action-hover: var(--nl-text-primary-hover);
  --nl-c-border: var(--nl-border-inverted);
  --nl-c-focus: var(--nl-focus-inverted);
  --nl-c-icon: var(--nl-border-inverted);
  color: var(--nl-c-body);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--nl-surface-page);
  color: var(--nl-text-body);
  font-family: var(--nl-font);
  font-size: var(--nl-fs-lg);
  line-height: var(--nl-lh-lg);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
svg { display: inline-block; fill: currentColor; }
h1, h2, h3, h4, h5, h6 { color: var(--nl-c-heading); margin: 0; overflow-wrap: anywhere; }
h1, .nl-h1 { font-size: var(--nl-fs-h1); line-height: var(--nl-lh-h1); font-weight: 700; }
h2, .nl-h2 { font-size: var(--nl-fs-h2); line-height: var(--nl-lh-h2); font-weight: 700; }
h3, .nl-h3 { font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; }
h4, .nl-h4 { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; }
h5, h6 { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; }
p { margin: 0; }
p + p, ul + p, ol + p, p + ul, p + ol { margin-top: var(--nl-s-100); }
a { color: var(--nl-c-link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--nl-c-link-hover); }
strong, b { font-weight: 600; }
em, i { font-style: italic; }
ul, ol { margin: 0; padding-left: 1.4em; }
li + li { margin-top: var(--nl-s-50); }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--nl-c-border); margin: var(--nl-s-200) 0; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--nl-surface-action); color: #fff; }

/* Focus: always visible, 3px ring, works on light and navy */
:focus { outline: 3px solid var(--nl-c-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--nl-c-focus); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
.nl-inverted :focus-visible, .site-header :focus-visible, .nl-section--action :focus-visible, .nl-callout--action :focus-visible, .nl-mobile-menu :focus-visible { box-shadow: 0 0 0 5px var(--nl-surface-action); }

@media (prefers-contrast: more) {
  .nl-callout, .nl-card, .nl-button { outline: 1px solid var(--nl-c-border); outline-offset: -1px; }
}

/* Accessibility helpers */
.screen-reader-text, .sr-only {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus, .sr-only:focus {
  background: var(--nl-surface-card); clip: auto !important; clip-path: none; color: var(--nl-text-primary); display: block; font-size: var(--nl-fs-lg); height: auto; left: 8px; line-height: normal; padding: 16px 24px; text-decoration: none; top: 8px; width: auto; z-index: 100000;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100001; background: var(--nl-surface-action-inverted); color: var(--nl-text-primary); padding: 16px 24px; font-weight: 500; text-decoration: underline; }
.skip-link:focus { left: 8px; top: 8px; outline: 3px solid var(--nl-focus); }
[hidden] { display: none !important; }

/* Icons */
.nl-icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: middle; }
.nl-icon--32 { width: 32px; height: 32px; }
.nl-icon--48 { width: 48px; height: 48px; }
.nl-icon--16 { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  background: var(--nl-surface-action);
  color: var(--nl-text-primary-inverted);
  /* Where the logo's right edge falls. Inside the centred container the logo moves
     right as the viewport grows, so the white band has to follow it. */
  --nl-logo-end: max(316px, calc(50vw - 404px));
}
/* The white → navy fade runs from the left edge of the viewport, while the header's
   content stays in the same centred container as the rest of the page. */
.site-header::before {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--nl-logo-end) + 260px);
  background: linear-gradient(90deg, #fff 0%, #fff calc(var(--nl-logo-end) + 24px), rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--nl-s-400);
  padding: var(--nl-s-400) var(--nl-s-300);
  max-width: 1440px;
  margin: 0 auto;
}
.site-header .custom-logo-link, .site-header__logo { position: relative; display: block; flex-shrink: 0; }
.site-header__logo img, .site-header .custom-logo { width: 268px; height: auto; display: block; }
.site-header__actions { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--nl-s-200); }
.site-header__utility { display: flex; align-items: center; gap: var(--nl-s-200); }

/* Search field (inverted on header, default on light surfaces) */
.nl-search { display: flex; align-items: center; gap: 8px; width: 502px; max-width: 100%; border: 1px solid var(--nl-c-border); border-radius: var(--nl-radius-md); padding: 0 var(--nl-s-100); background: transparent; color: var(--nl-c-link); }
.nl-search:focus-within { outline: 3px solid var(--nl-c-focus); outline-offset: 2px; }
.nl-search__input { flex: 1 1 0; min-width: 0; background: transparent; border: 0; padding: var(--nl-s-100) 0; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: inherit; }
.nl-search__input::placeholder { color: inherit; opacity: 1; }
.nl-search__input:focus { outline: none; }
.nl-search__submit { background: transparent; border: 0; padding: 12px; margin-right: -12px; cursor: pointer; color: inherit; display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.nl-search__submit .nl-icon { width: 20px; height: 20px; }
.nl-search--light { color: var(--nl-text-primary); border-color: var(--nl-border); }

/* Primary navigation (desktop) */
.site-nav { display: block; }
.nl-menu, .nl-menu ul { list-style: none; margin: 0; padding: 0; }
.nl-menu { display: flex; flex-wrap: nowrap; gap: var(--nl-s-200); align-items: flex-start; justify-content: flex-end; }
.nl-menu > li { position: relative; margin: 0; }
.nl-menu a, .nl-menu button { display: inline-flex; align-items: center; gap: var(--nl-s-50); padding: 4px 0; min-height: 44px; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: var(--nl-text-primary-inverted); background: transparent; border: 0; text-decoration: none; cursor: pointer; white-space: nowrap; }
.nl-menu a:hover, .nl-menu button:hover { color: var(--nl-text-primary-inverted-hover); text-decoration: underline; }
.nl-menu > .current-menu-item > a, .nl-menu > .current-menu-ancestor > a, .nl-menu > .current-menu-ancestor > button, .nl-menu > .current_page_parent > a, .nl-menu > .current-page-ancestor > button { text-decoration: underline; }
.nl-menu .nl-menu__chevron { width: 16px; height: 16px; transition: transform .15s; }
.nl-menu button[aria-expanded="true"] .nl-menu__chevron { transform: rotate(180deg); }
/* Without JavaScript the submenu is a plain visible list; the "js" class turns it into a dropdown. */
.nl-menu .sub-menu {
  min-width: 300px; padding: var(--nl-s-50) 0;
  background: var(--nl-surface-card); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md);
}
.js .nl-menu .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  margin-top: 8px;
  box-shadow: 0 8px 24px rgba(0, 18, 43, .25);
  display: none;
}
.nl-menu > li:last-child .sub-menu, .nl-menu > li.menu-item--align-right .sub-menu { left: auto; right: 0; }
.nl-menu .sub-menu.is-open { display: block; }
.nl-menu .sub-menu li { margin: 0; }
.nl-menu .sub-menu a { display: flex; width: 100%; padding: 12px var(--nl-s-150); color: var(--nl-text-primary); white-space: normal; }
.nl-menu .sub-menu a:hover { color: var(--nl-text-primary-hover); background: var(--nl-surface-primary-card); text-decoration: underline; }
.nl-menu .sub-menu a:focus-visible { outline-offset: -3px; box-shadow: none; }
.nl-menu .sub-menu .current-menu-item > a { text-decoration: underline; }

/* Mobile header */
.site-header__mobile { display: none; }
.nl-menu-toggle {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--nl-s-50);
  width: 120px; min-height: 100%; padding: var(--nl-s-200); border: 0; cursor: pointer;
  background: var(--nl-surface-action); color: var(--nl-text-primary-inverted); font-size: var(--nl-fs-lg); font-weight: 500; line-height: 1.2;
}
.nl-menu-toggle .nl-icon { width: 48px; height: 48px; }
.nl-menu-toggle:focus-visible { outline-offset: -4px; box-shadow: none; }
.nl-menu-toggle__close, .nl-menu-toggle[aria-expanded="true"] .nl-menu-toggle__open { display: none; }
.nl-menu-toggle[aria-expanded="true"] .nl-menu-toggle__close { display: inline-flex; flex-direction: column; align-items: center; gap: var(--nl-s-50); }
.nl-menu-toggle__open { display: inline-flex; flex-direction: column; align-items: center; gap: var(--nl-s-50); }

.nl-mobile-menu { background: var(--nl-surface-action); color: var(--nl-text-primary-inverted); padding: var(--nl-s-150) var(--nl-s-100) var(--nl-s-300); }
.js .nl-mobile-menu { display: none; }
@media (min-width: 1280px) { .nl-mobile-menu { display: none; } }
.nl-mobile-menu.is-open { display: block; }
.nl-mobile-menu .nl-search { width: 100%; margin-bottom: var(--nl-s-150); }
.nl-mobile-menu .nl-button { width: 100%; margin-bottom: var(--nl-s-150); }
.nl-mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.nl-mobile-menu li { margin: 0; border-top: 1px solid rgba(230, 234, 240, .35); }
.nl-mobile-menu li:last-child { border-bottom: 1px solid rgba(230, 234, 240, .35); }
.nl-mobile-menu a, .nl-mobile-menu button { display: flex; align-items: center; justify-content: space-between; gap: var(--nl-s-100); width: 100%; padding: var(--nl-s-100); min-height: 56px; background: transparent; border: 0; color: var(--nl-text-primary-inverted); font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.nl-mobile-menu a:hover, .nl-mobile-menu button:hover { text-decoration: underline; color: var(--nl-text-primary-inverted-hover); }
.nl-mobile-menu a:focus-visible, .nl-mobile-menu button:focus-visible { outline-offset: -3px; box-shadow: none; }
.nl-mobile-menu .current-menu-item > a { text-decoration: underline; }
.nl-mobile-menu .sub-menu { background: rgba(0, 18, 43, .35); }
.js .nl-mobile-menu .sub-menu { display: none; }
.nl-mobile-menu .sub-menu.is-open { display: block; }
.nl-mobile-menu .sub-menu a { padding-left: var(--nl-s-300); font-weight: 400; }
.nl-mobile-menu .sub-menu li { border-top: 1px solid rgba(230, 234, 240, .2); }
.nl-mobile-menu .sub-menu li:last-child { border-bottom: 0; }
.nl-mobile-menu button[aria-expanded="true"] .nl-menu__chevron { transform: rotate(180deg); }

@media (max-width: 1279px) {
  .site-header { background: var(--nl-surface-white); color: var(--nl-text-primary); }
  .site-header::before { display: none; }
  .site-header__inner { display: none; }
  .site-header__mobile { display: flex; align-items: stretch; justify-content: space-between; background: var(--nl-surface-white); }
  .site-header__mobile .site-header__logo { padding: var(--nl-s-200) var(--nl-s-300); }
  .site-header__mobile .site-header__logo img, .site-header__mobile .custom-logo { width: 224px; }
  .site-header__mobile .custom-logo-link:focus-visible { outline-color: var(--nl-focus); box-shadow: 0 0 0 5px #fff; }
}
@media (max-width: 479px) {
  .site-header__mobile .site-header__logo { padding: var(--nl-s-100); }
  .site-header__mobile .site-header__logo img, .site-header__mobile .custom-logo { width: 180px; }
  .nl-menu-toggle { width: 96px; padding: var(--nl-s-100); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .site-header { --nl-logo-end: 264px; }
  .site-header__inner { gap: var(--nl-s-200); padding: var(--nl-s-300) var(--nl-s-200); }
  .site-header__logo img, .site-header .custom-logo { width: 232px; }
  .nl-search { width: 420px; }
  .nl-menu { gap: var(--nl-s-150); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.nl-hero {
  position: relative; isolation: isolate;
  background-color: #1b2a3a; background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--nl-text-body-inverted);
  padding: var(--nl-s-800) var(--nl-s-200);
  --nl-c-heading: var(--nl-text-heading-inverted);
  --nl-c-body: var(--nl-text-body-inverted);
  --nl-c-link: var(--nl-text-primary-inverted);
  --nl-c-link-hover: var(--nl-text-primary-inverted-hover);
  --nl-c-action: var(--nl-surface-action-inverted);
  --nl-c-action-hover: var(--nl-surface-action-inverted-hover);
  --nl-c-on-action: var(--nl-text-primary);
  --nl-c-on-action-hover: var(--nl-text-primary-hover);
  --nl-c-border: var(--nl-border-inverted);
  --nl-c-focus: var(--nl-focus-inverted);
}
.nl-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.nl-hero__inner { position: relative; max-width: var(--nl-wide); margin: 0 auto; }
/* hero-row: the content column, plus (on sub-pages) the section-nav panel in a fixed 30% column. */
.nl-hero__row { display: flex; align-items: flex-start; gap: var(--nl-s-300); }
.nl-hero__content { display: flex; flex-direction: column; gap: var(--nl-s-400); max-width: 706px; min-width: 0; }
.nl-hero--compact .nl-hero__content { gap: var(--nl-s-200); }
.nl-hero--subpage .nl-hero__content { flex: 1 1 0; max-width: none; }
.nl-hero__aside { flex: 0 0 var(--nl-sidebar); width: var(--nl-sidebar); max-width: 100%; min-width: 0; }
.nl-hero__title { color: var(--nl-text-heading-inverted); }
.nl-hero--subpage .nl-hero__title { font-size: var(--nl-fs-h2); line-height: var(--nl-lh-h2); }
.nl-hero__text { font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); color: var(--nl-text-body-inverted); }
.nl-hero__text p + p { margin-top: var(--nl-s-100); }
.nl-hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-100); width: 100%; }
.nl-hero__actions { display: flex; flex-wrap: wrap; gap: var(--nl-s-100); }
.nl-hero__actions .nl-button { flex: 0 1 auto; padding-left: var(--nl-s-150); padding-right: var(--nl-s-150); }
.nl-hero__note { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); color: var(--nl-text-primary-inverted); }
.nl-hero :focus-visible { box-shadow: 0 0 0 5px rgba(0,0,0,.85); }
@media (max-width: 1023px) {
  .nl-hero__row { flex-direction: column; gap: var(--nl-s-300); }
  .nl-hero--subpage .nl-hero__content { width: 100%; }
  .nl-hero__aside { flex-basis: auto; width: 100%; }
}
@media (max-width: 767px) {
  .nl-hero { padding: var(--nl-s-400) var(--nl-s-100); }
  .nl-hero__content { gap: var(--nl-s-200); }
  .nl-hero__actions { flex-direction: column; width: 100%; }
  .nl-hero__actions .nl-button { flex-basis: auto; width: 100%; }
}

/* --------------------------------------------------------------------------
   List, list-item, section-nav, page-toc
   The list is a labelled column of single-line rows (usually links). The two
   navigation panels are built from it: the section-nav scrim in a sub-page hero,
   and the "On This Page" table of contents beside documentation pages.
   -------------------------------------------------------------------------- */
.nl-list {
  display: flex; flex-direction: column; gap: var(--nl-s-75); width: 100%;
  --nl-list-text: var(--nl-text-primary);
  --nl-list-text-hover: var(--nl-text-primary-hover);
  --nl-list-hover: var(--nl-surface-subtle-hover);
  --nl-list-active: var(--nl-surface-action);
  --nl-list-on-active: var(--nl-text-primary-inverted);
  --nl-list-heading: var(--nl-text-secondary);
  --nl-list-focus: var(--nl-border);
}
.nl-list--inverted {
  --nl-list-text: var(--nl-text-primary-inverted);
  --nl-list-text-hover: var(--nl-text-primary-inverted-hover);
  --nl-list-hover: var(--nl-surface-action-hover);
  --nl-list-active: var(--nl-surface-action-inverted);
  --nl-list-on-active: var(--nl-text-primary);
  --nl-list-heading: var(--nl-text-secondary-inverted);
  --nl-list-focus: var(--nl-border-inverted);
}
.nl-list__heading { margin: 0; padding: 0 var(--nl-s-100); font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-weight: 600; letter-spacing: .5px; color: var(--nl-list-heading); }
.nl-list__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-s-25); width: 100%; }
.nl-list__li { margin: 0; }
.nl-list__item {
  display: flex; align-items: center; gap: var(--nl-s-75); width: 100%;
  padding: var(--nl-s-50) var(--nl-s-100); border-radius: var(--nl-radius-md);
  font-size: 1.125rem; line-height: 1.375rem; font-weight: 500;
  color: var(--nl-list-text); text-decoration: none; overflow-wrap: anywhere;
}
.nl-list__item .nl-icon { width: 16px; height: 16px; }
a.nl-list__item:hover { background: var(--nl-list-hover); color: var(--nl-list-text-hover); text-decoration: underline; }
.nl-list__item:focus-visible { outline: 2px solid var(--nl-list-focus); outline-offset: -2px; box-shadow: none; }
.nl-list__item.is-active, a.nl-list__item.is-active:hover { background: var(--nl-list-active); color: var(--nl-list-on-active); font-weight: 600; text-decoration: none; }

/* Section-nav: a scrim over the hero photo (black 45%, white 20% hairline), not a surface token. */
.nl-section-nav {
  display: flex; flex-direction: column; gap: var(--nl-s-75); width: 100%;
  padding: var(--nl-s-150) var(--nl-s-50);
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--nl-radius-lg);
  color: var(--nl-text-primary-inverted);
}
.nl-section-nav__divider { border: 0; border-top: 1px solid rgba(255, 255, 255, .2); margin: 0; }
.nl-section-nav .nl-list__item:focus-visible { box-shadow: none; }
@media (max-width: 1023px) { .nl-section-nav { padding: 20px var(--nl-s-50); } }

/* Page-toc: no fill, 1px border, 16 radius. */
.nl-toc { width: 100%; padding: var(--nl-s-150) var(--nl-s-50); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-lg); background: transparent; }
.nl-toc .nl-list__heading { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-weight: 600; color: var(--nl-list-heading); }

/* --------------------------------------------------------------------------
   Documentation layout (page-templates/documentation.php)
   page-body splits 70/30: the sections on the left, the sticky table of contents in a
   fixed column on the right. On narrow screens the contents sit above the sections.
   Guide pages use one page surface: sections are transparent and separated by spacing;
   a navy section keeps its fill and becomes a rounded block.
   -------------------------------------------------------------------------- */
.nl-docs__inner { display: flex; align-items: flex-start; gap: var(--nl-s-300); max-width: var(--nl-wide); margin: 0 auto; padding: var(--nl-s-600) var(--nl-s-200); }
.nl-docs__aside { order: 2; flex: 0 0 var(--nl-sidebar); width: var(--nl-sidebar); min-width: 0; position: sticky; top: var(--nl-s-150); max-height: calc(100vh - var(--nl-s-300)); overflow-y: auto; }
.nl-docs__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--nl-s-400); }
.nl-docs__body > .nl-section { padding: 0; background: transparent; width: 100%; }
.nl-docs__body > .nl-section--action { background: var(--nl-surface-action); border-radius: var(--nl-radius-lg); padding: var(--nl-s-300); }
.nl-docs__body > .nl-section > .nl-section__inner { max-width: none; margin: 0; }
.nl-docs__body .nl-section__inner--card { max-width: none; background: transparent; border-radius: 0; padding: 0; }
.nl-docs .nl-docs__body > :where(:not(.nl-section)) { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.nl-docs__body h2, .nl-docs__body h3 { scroll-margin-top: var(--nl-s-150); }
@media (max-width: 1023px) {
  .nl-docs__inner { flex-direction: column; gap: var(--nl-s-300); padding: var(--nl-s-400) var(--nl-s-100); }
  .nl-docs__aside { order: 0; position: static; flex-basis: auto; width: 100%; max-height: none; overflow: visible; }
  .nl-docs__body > .nl-section--action { padding: var(--nl-s-150); }
}

/* --------------------------------------------------------------------------
   Sections & layout
   -------------------------------------------------------------------------- */
.nl-section { padding: var(--nl-s-600) var(--nl-s-200); background: var(--nl-surface-page); color: var(--nl-c-body); }
.nl-section--lg { padding-top: var(--nl-s-800); padding-bottom: var(--nl-s-800); }
.nl-section--page { background: var(--nl-surface-page); }
.nl-section--card, .nl-section--white-card { background: var(--nl-surface-card); }
.nl-section--white { background: var(--nl-surface-white); }
.nl-section--subtle { background: var(--nl-surface-subtle); }
.nl-section--primary-card { background: var(--nl-surface-primary-card); }
.nl-section--action { background: var(--nl-surface-action); }
.nl-section__inner { max-width: var(--nl-content); margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-200); }
.nl-section__inner--card { max-width: var(--nl-card-width); background: var(--nl-surface-card); border-radius: var(--nl-radius-lg); padding: var(--nl-s-300); }
.nl-section__inner--center { align-items: center; text-align: center; }
.nl-section__inner--center > * { margin-left: auto; margin-right: auto; }
.nl-section__inner--tight { gap: var(--nl-s-150); }
.nl-section__inner > p, .nl-section__inner > h2, .nl-section__inner > h3, .nl-section__inner > h4, .nl-section__inner > ul, .nl-section__inner > ol, .nl-section__inner > .nl-faq, .nl-section__inner > .nl-contact, .nl-section__inner > .nl-note { max-width: var(--nl-text-measure); width: 100%; }
.nl-section__inner > .nl-steps, .nl-section__inner > .nl-keys, .nl-section__inner > .nl-grid, .nl-section__inner > .nl-stack, .nl-section__inner > .nl-callout, .nl-section__inner > .nl-methods, .nl-section__inner > .nl-actions, .nl-section__inner > .nl-links, .nl-section__inner > table, .nl-section__inner > .wp-block-buttons, .nl-section__inner > .wp-block-table, .nl-section__inner > .wp-block-columns { width: 100%; }
.nl-section__inner > .nl-actions { width: auto; }
.nl-section__inner--center > .nl-actions { justify-content: center; }
.nl-section__inner > .nl-links { width: auto; }
.nl-lead, .nl-section__inner > p.nl-lead, .is-style-lead { font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); }
.nl-note, .is-style-note { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-style: italic; }
.nl-small, .is-style-small { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-subheading { font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); }
.nl-section--action h1, .nl-section--action h2, .nl-section--action h3, .nl-section--action h4 { color: var(--nl-text-heading-inverted); }
.nl-section--action .nl-note, .nl-section--action p { color: var(--nl-text-body-inverted); }
.nl-section--action .nl-strong, .nl-section--action p.nl-emphasis { color: var(--nl-text-heading-inverted); font-weight: 500; }
.nl-emphasis { font-weight: 500; color: var(--nl-c-heading); }

.nl-grid { display: grid; gap: var(--nl-s-150); grid-template-columns: 1fr; width: 100%; }
.nl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nl-grid > * { min-width: 0; }
@media (max-width: 767px) { .nl-grid--2, .nl-grid--3 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1023px) { .nl-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nl-stack { display: flex; flex-direction: column; gap: var(--nl-s-100); width: 100%; }
.nl-stack--lg { gap: var(--nl-s-150); }
.nl-stack--xl { gap: var(--nl-s-200); }
.nl-stack--none { gap: 0; }
.nl-actions { display: flex; flex-wrap: wrap; gap: var(--nl-s-100); align-items: flex-start; }
.nl-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 767px) {
  .nl-section { padding: var(--nl-s-400) var(--nl-s-100); }
  .nl-section--lg { padding-top: var(--nl-s-600); padding-bottom: var(--nl-s-600); }
  .nl-section__inner--card { padding: var(--nl-s-150); }
  .nl-actions { flex-direction: column; align-items: stretch; }
  .nl-actions .nl-button, .nl-actions .wp-block-button { width: 100%; }
  .nl-section__inner > .nl-actions { width: 100%; }
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */
.nl-button, .wp-block-button__link, .wp-element-button, button.nl-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--nl-s-50);
  padding: 14px var(--nl-s-400); min-height: 60px; border-radius: 0;
  background: var(--nl-c-action); color: var(--nl-c-on-action);
  border: 2px solid var(--nl-c-action);
  font-family: var(--nl-font); font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500;
  text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.nl-button:hover, .wp-block-button__link:hover, .wp-element-button:hover { background: var(--nl-c-action-hover); border-color: var(--nl-c-action-hover); color: var(--nl-c-on-action-hover); text-decoration: none; }
.nl-button--outlined, .is-style-outline .wp-block-button__link, .is-style-nl-outlined .wp-block-button__link, .is-style-outlined .wp-block-button__link {
  background: transparent !important; color: var(--nl-c-action) !important; border-color: var(--nl-c-action) !important;
}
.nl-button--outlined:hover, .is-style-outline .wp-block-button__link:hover, .is-style-nl-outlined .wp-block-button__link:hover, .is-style-outlined .wp-block-button__link:hover {
  color: var(--nl-c-action) !important; border-color: var(--nl-c-action) !important; background: rgba(1, 46, 107, .08) !important; text-decoration: underline;
}
.nl-inverted .nl-button--outlined:hover, .nl-section--action .nl-button--outlined:hover, .nl-hero .nl-button--outlined:hover, .nl-callout--action .nl-button--outlined:hover { background: rgba(230, 234, 240, .12) !important; }
.nl-button--block { width: 100%; }
.nl-button .nl-icon { width: 20px; height: 20px; }
@media (max-width: 767px) { .nl-button, .wp-block-button__link { padding-left: var(--nl-s-200); padding-right: var(--nl-s-200); width: 100%; } .wp-block-button { width: 100%; } }
/* Explicit tone overrides (used when a button sits on a surface that differs from its section) */
.nl-button--tone-default { --nl-c-action: var(--nl-surface-action); --nl-c-action-hover: var(--nl-surface-action-hover); --nl-c-on-action: var(--nl-text-primary-inverted); --nl-c-on-action-hover: var(--nl-text-primary-inverted-hover); }
.nl-button--tone-inverted { --nl-c-action: var(--nl-surface-action-inverted); --nl-c-action-hover: var(--nl-surface-action-inverted-hover); --nl-c-on-action: var(--nl-text-primary); --nl-c-on-action-hover: var(--nl-text-primary-hover); }

.nl-link { display: inline-flex; align-items: center; gap: var(--nl-s-50); padding: 4px 0; min-height: 36px; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: var(--nl-c-link); text-decoration: none; }
.nl-link:hover { color: var(--nl-c-link-hover); text-decoration: underline; }
.nl-link .nl-link__arrow, .nl-link .nl-icon { width: 16px; height: 16px; }
.nl-link--block { display: flex; }

/* Inline links inside prose always underlined (WCAG 1.4.1) */
.entry-content p a:not(.nl-button):not(.nl-link):not(.wp-block-button__link), .entry-content li a:not(.nl-button):not(.nl-link), .nl-callout__detail a, .nl-faq__a a, .comment-content a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Callout
   -------------------------------------------------------------------------- */
.nl-callout { display: flex; align-items: center; gap: var(--nl-s-100); padding: var(--nl-s-150); border-radius: var(--nl-radius-md); width: 100%; color: var(--nl-c-body); }
.nl-callout--subtle { background: var(--nl-surface-subtle); }
.nl-callout--action { background: var(--nl-surface-action); color: var(--nl-text-body-inverted); }
.nl-callout--outlined { border: 2px solid var(--nl-border); background: transparent; }
.nl-callout--outlined-inverted { border: 2px solid var(--nl-border-inverted); background: transparent; }
.nl-callout--card { background: var(--nl-surface-card); }
.nl-callout--stack { flex-direction: column; align-items: flex-start; }
.nl-callout__icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--nl-c-icon); }
.nl-callout--action .nl-callout__icon { color: var(--nl-border-inverted); }
.nl-callout__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--nl-s-25); }
.nl-callout__title { margin: 0; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 400; color: var(--nl-text-primary); }
.nl-callout--action .nl-callout__title { color: var(--nl-text-primary-inverted); }
.nl-callout__detail { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); color: var(--nl-text-body); }
.nl-callout--action .nl-callout__detail { color: var(--nl-text-body-inverted); }
.nl-callout__action { flex-shrink: 0; }
.nl-callout--stack .nl-callout__body { width: 100%; }
.nl-callout--stack .nl-callout__action { margin-top: var(--nl-s-50); }
.nl-callout__title a { color: inherit; }
@media (max-width: 767px) {
  .nl-callout { flex-direction: column; align-items: flex-start; }
  .nl-callout__action { width: 100%; }
}

/* --------------------------------------------------------------------------
   Steps, key tables, FAQ, contact, cards
   -------------------------------------------------------------------------- */
.nl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-s-200); width: 100%; counter-reset: nl-step; }
.nl-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--nl-s-150); align-items: start; margin: 0; counter-increment: nl-step; }
.nl-step__num { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: var(--nl-surface-action); color: var(--nl-text-primary-inverted); font-size: var(--nl-fs-xl); line-height: 1; font-weight: 500; }
.nl-step__num::before { content: counter(nl-step); }
.nl-step__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-50); padding-top: 8px; }
.nl-step__title { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); }
.nl-step__body p { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); }
.nl-step__body .nl-button { margin: var(--nl-s-50) 0; }
.nl-step__body > * + * { margin-top: 0; }
.nl-section--action .nl-step__num { background: var(--nl-surface-action-inverted); color: var(--nl-text-primary); }

.nl-keys { width: 100%; border-collapse: collapse; }
.nl-keys caption { text-align: left; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); padding-bottom: var(--nl-s-100); }
.nl-keys thead th { text-align: left; font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-weight: 600; color: var(--nl-c-heading); padding: 0 0 var(--nl-s-50); }
.nl-keys tbody th, .nl-keys tbody td { border-bottom: 1px solid var(--nl-c-border); padding: var(--nl-s-75) 0; vertical-align: top; text-align: left; font-weight: 400; }
.nl-keys tbody th { width: 1%; white-space: nowrap; padding-right: var(--nl-s-150); }
.nl-keys tbody td { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); color: var(--nl-c-body); }
.nl-key { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; padding: 4px 12px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md); background: var(--nl-surface-card); color: var(--nl-text-heading); font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 600; white-space: normal; }
.nl-keys--wrap tbody th { white-space: normal; width: 30%; }
@media (max-width: 599px) {
  .nl-keys tbody th { white-space: normal; }
  .nl-keys tbody tr { display: grid; grid-template-columns: 1fr; gap: 6px; padding: var(--nl-s-75) 0; border-bottom: 1px solid var(--nl-c-border); }
  .nl-keys tbody th, .nl-keys tbody td { border: 0; padding: 0; width: auto; }
  .nl-keys thead { display: none; }
}
/* Core table block styled as key table */
.wp-block-table.is-style-nl-keys table { width: 100%; }
.wp-block-table.is-style-nl-keys td, .wp-block-table.is-style-nl-keys th { border: 0; border-bottom: 1px solid var(--nl-c-border); padding: var(--nl-s-75) 0; }
.wp-block-table.is-style-nl-keys td:first-child, .wp-block-table.is-style-nl-keys th:first-child { width: 1%; white-space: nowrap; padding-right: var(--nl-s-150); }
.wp-block-table.is-style-nl-keys td:first-child > *, .wp-block-table.is-style-nl-keys tbody th:first-child { display: inline-flex; min-width: 96px; justify-content: center; padding: 4px 12px; border: 1px solid var(--nl-border); border-radius: var(--nl-radius-md); background: var(--nl-surface-card); color: var(--nl-text-heading); font-weight: 600; }

.nl-faq { display: flex; flex-direction: column; gap: var(--nl-s-200); }
.nl-faq__item { display: flex; flex-direction: column; gap: var(--nl-s-50); }
.nl-faq__q { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); }
.nl-faq__a { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); color: var(--nl-c-body); }

.nl-contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-50); }
.nl-contact__name { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); }
.nl-contact__role, .nl-contact__detail { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); color: var(--nl-c-body); }
.nl-contact__links { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; }
.nl-contact__links a { overflow-wrap: anywhere; }
.nl-contact + .nl-contact { margin-top: var(--nl-s-200); }

.nl-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-100); padding: var(--nl-s-200); background: var(--nl-surface-card); border: 1px solid var(--nl-border); border-radius: var(--nl-radius-lg); color: var(--nl-text-body); text-decoration: none; height: 100%; }
a.nl-card { color: var(--nl-text-body); }
a.nl-card:hover { border-color: var(--nl-surface-action); box-shadow: 0 0 0 1px var(--nl-surface-action); }
a.nl-card:hover .nl-link { text-decoration: underline; }
.nl-card__icon { width: 48px; height: 48px; color: var(--nl-border); }
.nl-card__title { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 700; color: var(--nl-text-heading); }
.nl-card__body { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); }
.nl-card .nl-link { margin-top: auto; color: var(--nl-text-primary); }
.nl-card--event { gap: var(--nl-s-75); }
.nl-event__date { display: inline-flex; padding: 4px 12px; border-radius: var(--nl-radius-md); background: var(--nl-surface-subtle); color: var(--nl-text-heading); font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-weight: 600; }
.nl-event__location { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }

.nl-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nl-s-200); width: 100%; }
.nl-methods--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-method { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--nl-s-100); min-width: 0; }
.nl-method__icon { width: 48px; height: 48px; color: var(--nl-border); }
.nl-method__title { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 700; color: var(--nl-text-heading); }
.nl-method--medium .nl-method__title { font-weight: 500; }
.nl-method__body { font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); }
.nl-method__note { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-method .nl-button { margin-top: auto; padding-left: var(--nl-s-150); padding-right: var(--nl-s-150); }
.nl-card .nl-button, .nl-callout .nl-button { padding-left: var(--nl-s-200); padding-right: var(--nl-s-200); }
@media (max-width: 767px) { .nl-methods, .nl-methods--2 { grid-template-columns: 1fr; gap: var(--nl-s-300); } }
@media (min-width: 768px) and (max-width: 1023px) { .nl-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.nl-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--nl-s-300); width: 100%; }
.nl-logos img { max-height: 300px; width: auto; }
.nl-logos figure { margin: 0; }
.nl-logos figcaption { font-size: var(--nl-fs-md); text-align: center; margin-top: var(--nl-s-50); }

/* --------------------------------------------------------------------------
   Regular content (posts / free-form pages) and core block mapping
   -------------------------------------------------------------------------- */
.entry-content > :where(:not(.nl-section):not(.alignfull):not([class*="is-style-nl-section-"]):not(.wp-block-cover)) {
  max-width: calc(var(--nl-content) + 2 * var(--nl-s-200)); margin-left: auto; margin-right: auto; padding-left: var(--nl-s-200); padding-right: var(--nl-s-200);
}
.entry-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure, table, .wp-block-buttons, .nl-faq, .nl-contact, .nl-callout, .nl-steps, .nl-grid, .nl-stack, .nl-keys, .wp-block-table, .wp-block-image, .wp-block-quote, .wp-block-columns, .wp-block-list, .wp-block-heading, .wp-block-paragraph) { margin-top: var(--nl-s-150); }
.entry-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure, table, .wp-block-buttons, .nl-faq, .nl-contact, .nl-callout, .nl-steps, .nl-grid, .nl-stack, .nl-keys, .wp-block-table):first-child { margin-top: var(--nl-s-600); }
.entry-content > :where(p, ul, ol, h2, h3, h4, blockquote, figure, table, .wp-block-buttons, .nl-faq, .nl-contact, .nl-callout, .nl-steps, .nl-grid, .nl-stack, .nl-keys, .wp-block-table):last-child { margin-bottom: var(--nl-s-600); }
.entry-content > :where(h2) { margin-top: var(--nl-s-300); }
.entry-content > :where(h2, h3, h4, p, ul, ol, blockquote) { max-width: calc(var(--nl-text-measure) + 2 * var(--nl-s-200)); margin-left: auto; margin-right: auto; }
.entry-content .alignwide { max-width: var(--nl-card-width); }
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content blockquote { border-left: 4px solid var(--nl-surface-action); padding-left: var(--nl-s-150); font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); }
.entry-content blockquote cite { display: block; font-size: var(--nl-fs-md); font-style: normal; margin-top: var(--nl-s-50); }
.entry-content pre { overflow-x: auto; background: var(--nl-surface-card); padding: var(--nl-s-100); }
.entry-content table:not(.nl-keys) th, .entry-content table:not(.nl-keys) td { border: 1px solid var(--nl-c-border); padding: var(--nl-s-75); text-align: left; }
.entry-content table:not(.nl-keys) th { background: var(--nl-surface-subtle); }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content img.alignleft { float: left; margin: 0 var(--nl-s-150) var(--nl-s-100) 0; }
.entry-content img.alignright { float: right; margin: 0 0 var(--nl-s-100) var(--nl-s-150); }
.entry-content figcaption, .wp-caption-text { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); margin-top: var(--nl-s-50); }
.wp-caption { max-width: 100%; }

/* Group block styles → sections */
.wp-block-group.is-style-nl-section-page, .wp-block-group.is-style-nl-section-card, .wp-block-group.is-style-nl-section-subtle, .wp-block-group.is-style-nl-section-primary-card, .wp-block-group.is-style-nl-section-action, .wp-block-group.is-style-nl-section-white { padding: var(--nl-s-600) var(--nl-s-200); }
.wp-block-group.is-style-nl-section-page { background: var(--nl-surface-page); }
.wp-block-group.is-style-nl-section-card { background: var(--nl-surface-card); }
.wp-block-group.is-style-nl-section-subtle { background: var(--nl-surface-subtle); }
.wp-block-group.is-style-nl-section-primary-card { background: var(--nl-surface-primary-card); }
.wp-block-group.is-style-nl-section-white { background: var(--nl-surface-white); }
.wp-block-group.is-style-nl-section-action { background: var(--nl-surface-action); color: var(--nl-text-body-inverted); }
.wp-block-group.is-style-nl-section-action { --nl-c-heading: var(--nl-text-heading-inverted); --nl-c-body: var(--nl-text-body-inverted); --nl-c-link: var(--nl-text-primary-inverted); --nl-c-link-hover: var(--nl-text-primary-inverted-hover); --nl-c-action: var(--nl-surface-action-inverted); --nl-c-action-hover: var(--nl-surface-action-inverted-hover); --nl-c-on-action: var(--nl-text-primary); --nl-c-on-action-hover: var(--nl-text-primary-hover); --nl-c-border: var(--nl-border-inverted); --nl-c-focus: var(--nl-focus-inverted); --nl-c-icon: var(--nl-border-inverted); }
.wp-block-group.is-style-nl-section-action h1, .wp-block-group.is-style-nl-section-action h2, .wp-block-group.is-style-nl-section-action h3 { color: var(--nl-text-heading-inverted); }
.wp-block-group.is-style-nl-card { background: var(--nl-surface-card); border-radius: var(--nl-radius-lg); padding: var(--nl-s-300); }
.wp-block-group.is-style-nl-callout-subtle { background: var(--nl-surface-subtle); border-radius: var(--nl-radius-md); padding: var(--nl-s-150); }
.wp-block-group.is-style-nl-callout-outlined { border: 2px solid var(--nl-border); border-radius: var(--nl-radius-md); padding: var(--nl-s-150); }
.wp-block-group.is-style-nl-callout-action { background: var(--nl-surface-action); color: var(--nl-text-body-inverted); border-radius: var(--nl-radius-md); padding: var(--nl-s-150); }
.wp-block-group.is-style-nl-callout-action * { color: var(--nl-text-primary-inverted); }
.wp-block-buttons { gap: var(--nl-s-100); }
.wp-block-button__link { border-radius: 0 !important; }
.wp-block-columns { gap: var(--nl-s-150); }
.wp-block-list.is-style-nl-checklist, ul.nl-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--nl-s-100); }
.wp-block-list.is-style-nl-checklist li, ul.nl-checklist li { display: flex; gap: var(--nl-s-100); align-items: center; padding: var(--nl-s-150); border-radius: var(--nl-radius-md); background: var(--nl-surface-subtle); color: var(--nl-text-primary); margin: 0; }
.wp-block-list.is-style-nl-checklist li::before, ul.nl-checklist li::before { content: ""; flex-shrink: 0; width: 32px; height: 32px; background: var(--nl-border); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm113-303L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* --------------------------------------------------------------------------
   Posts, archives, search, 404
   -------------------------------------------------------------------------- */
.nl-archive { padding: var(--nl-s-600) var(--nl-s-200); }
.nl-archive__inner { max-width: var(--nl-content); margin: 0 auto; display: flex; flex-direction: column; gap: var(--nl-s-200); }
.nl-post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-s-150); }
.nl-post-list li { margin: 0; }
.nl-post-card { display: flex; flex-direction: column; gap: var(--nl-s-50); padding: var(--nl-s-200); background: var(--nl-surface-card); border-radius: var(--nl-radius-lg); }
.nl-post-card__title { margin: 0; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 700; }
.nl-post-card__title a { color: var(--nl-text-primary); text-decoration: none; }
.nl-post-card__title a:hover { text-decoration: underline; }
.nl-post-card__meta { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-post-meta { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-pagination { display: flex; flex-wrap: wrap; gap: var(--nl-s-50); }
.nl-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 var(--nl-s-100); border: 2px solid var(--nl-border); border-radius: var(--nl-radius-md); color: var(--nl-text-primary); text-decoration: none; font-weight: 500; }
.nl-pagination .page-numbers.current { background: var(--nl-surface-action); color: var(--nl-text-primary-inverted); border-color: var(--nl-surface-action); }
.nl-pagination a.page-numbers:hover { text-decoration: underline; }
.post-navigation .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nl-s-100); }
.post-navigation a { font-weight: 500; }

/* Forms (search page, comments) */
.nl-form { display: flex; flex-direction: column; gap: var(--nl-s-150); max-width: var(--nl-text-measure); }
.nl-field { display: flex; flex-direction: column; gap: var(--nl-s-50); }
.nl-field label { font-weight: 500; color: var(--nl-c-heading); }
.nl-field input, .nl-field textarea, .nl-field select, .nl-input { width: 100%; padding: 14px var(--nl-s-100); min-height: 56px; border: 2px solid var(--nl-border); border-radius: var(--nl-radius-md); background: var(--nl-surface-white); color: var(--nl-text-body); font-size: var(--nl-fs-lg); }
.nl-field textarea { min-height: 160px; }
.nl-field .nl-field__hint { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-field .nl-field__error { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); font-weight: 600; color: #9b1c1c; }
.nl-field [aria-invalid="true"] { border-color: #9b1c1c; }
.nl-alert { padding: var(--nl-s-150); border-radius: var(--nl-radius-md); border: 2px solid var(--nl-border); background: var(--nl-surface-card); }
.nl-alert--error { border-color: #9b1c1c; }
.nl-alert__title { font-weight: 600; margin: 0 0 var(--nl-s-50); }
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: var(--nl-s-150) 0; border-top: 1px solid var(--nl-c-border); }
.comment-list .children { list-style: none; padding-left: var(--nl-s-200); }
.comment-meta { font-size: var(--nl-fs-md); }
.comment-form label { display: block; font-weight: 500; margin-bottom: 4px; }
.comment-form input:not([type="checkbox"]):not([type="submit"]), .comment-form textarea { width: 100%; padding: 14px var(--nl-s-100); border: 2px solid var(--nl-border); border-radius: var(--nl-radius-md); background: #fff; }
.comment-form p { margin-top: var(--nl-s-100); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--nl-surface-card); border-top: 1px solid var(--nl-border); padding: var(--nl-s-400) var(--nl-s-300); color: var(--nl-text-body); }
.site-footer__inner { max-width: 1344px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--nl-s-300); }
.site-footer__main { display: grid; grid-template-columns: 320px repeat(3, minmax(0, 1fr)); gap: var(--nl-s-400); align-items: start; }
.site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--nl-s-100); }
.site-footer__brand img, .site-footer__brand .custom-logo { width: 224px; height: auto; }
.site-footer__tagline { font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.site-footer__heading { margin: 0; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: var(--nl-text-heading); }
.site-footer__col { display: flex; flex-direction: column; gap: var(--nl-s-50); min-width: 0; }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--nl-s-25); }
.site-footer__col li { margin: 0; }
.site-footer__col a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; padding: 4px 0; min-height: 36px; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: var(--nl-text-primary); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; color: var(--nl-text-primary-hover); }
.site-footer__help { display: flex; flex-direction: column; gap: var(--nl-s-75); }
.site-footer__help dl { margin: 0; display: flex; flex-direction: column; gap: var(--nl-s-75); font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.site-footer__help dt { font-weight: 500; color: var(--nl-text-heading); }
.site-footer__help dd { margin: 0; overflow-wrap: anywhere; }
.site-footer__help dd a { color: var(--nl-text-primary); font-weight: 500; text-decoration: underline; overflow-wrap: anywhere; }
.site-footer__legal { display: flex; flex-direction: column; gap: var(--nl-s-100); font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.site-footer__divider { border: 0; border-top: 1px solid var(--nl-border); margin: 0; }
.site-footer__legal-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--nl-s-100) var(--nl-s-150); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 4px var(--nl-s-150); list-style: none; margin: 0; padding: 0; }
.site-footer__legal-links li { margin: 0; }
.site-footer__legal-links a { display: inline-flex; align-items: center; padding: 4px 0; min-height: 36px; font-size: var(--nl-fs-lg); line-height: var(--nl-lh-lg); font-weight: 500; color: var(--nl-text-primary); text-decoration: none; }
.site-footer__legal-links a:hover { text-decoration: underline; }
@media (max-width: 1279px) {
  .site-footer { padding: var(--nl-s-400) var(--nl-s-200); }
  .site-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nl-s-300); }
}
@media (max-width: 639px) {
  .site-footer { padding: var(--nl-s-300) var(--nl-s-100); }
  .site-footer__main { grid-template-columns: 1fr; }
  .site-footer__legal-row { flex-direction: column; align-items: flex-start; }
}

/* Print */
@media print {
  .site-header, .site-footer, .nl-mobile-menu, .skip-link { display: none !important; }
  .nl-hero { background: none !important; color: #000; padding: 16px 0; }
  .nl-hero::before { display: none; }
  .nl-hero__title, .nl-hero__text { color: #000; }
  .nl-section { padding: 16px 0; background: none !important; color: #000; }
  .nl-section-nav, .nl-toc, .nl-docs__aside { display: none !important; }
  .nl-hero__row, .nl-docs__inner { display: block; }
  .nl-docs__body > .nl-section--action { background: none !important; padding: 16px 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .nl-list__item[href^="#"]::after { content: none; }
}

/* --------------------------------------------------------------------------
   Breadcrumbs, page links
   -------------------------------------------------------------------------- */
.nl-breadcrumbs { padding: var(--nl-s-150) var(--nl-s-200) 0; max-width: calc(var(--nl-content) + 2 * var(--nl-s-200)); margin: 0 auto; }
.nl-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nl-s-50); font-size: var(--nl-fs-md); line-height: var(--nl-lh-md); }
.nl-breadcrumbs li { margin: 0; display: flex; align-items: center; gap: var(--nl-s-50); }
.nl-breadcrumbs li + li::before { content: "/"; color: var(--nl-text-body); }
.nl-breadcrumbs a { color: var(--nl-text-primary); text-decoration: underline; padding: 4px 0; }
.nl-page-links { display: flex; gap: var(--nl-s-50); flex-wrap: wrap; align-items: center; max-width: calc(var(--nl-content) + 2 * var(--nl-s-200)); margin: var(--nl-s-200) auto; padding: 0 var(--nl-s-200); }
.nl-page-links a { padding: 8px 12px; border: 2px solid var(--nl-border); }
.nl-section--meta { padding-top: var(--nl-s-200); padding-bottom: 0; }
.nl-comments { display: flex; flex-direction: column; gap: var(--nl-s-150); }

/* Ordered-list variant of the steps component, for editors who prefer a core list block */
.wp-block-list.is-style-nl-steps, ol.nl-steps-list {
  list-style: none; padding: 0; counter-reset: nl-step; display: flex; flex-direction: column; gap: var(--nl-s-200);
}
.wp-block-list.is-style-nl-steps > li, ol.nl-steps-list > li {
  counter-increment: nl-step; margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--nl-s-150); align-items: start;
}
.wp-block-list.is-style-nl-steps > li::before, ol.nl-steps-list > li::before {
  content: counter(nl-step);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px;
  background: var(--nl-surface-action); color: var(--nl-text-primary-inverted); font-size: var(--nl-fs-xl); font-weight: 500;
}
.wp-block-list.is-style-nl-steps > li > strong:first-child, ol.nl-steps-list > li > strong:first-child { display: block; font-size: var(--nl-fs-xl); line-height: var(--nl-lh-xl); font-weight: 500; color: var(--nl-c-heading); }

/* A core group carrying a callout style keeps the icon on the left when one is present */
.wp-block-group.is-style-nl-callout-subtle, .wp-block-group.is-style-nl-callout-outlined, .wp-block-group.is-style-nl-callout-action {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--nl-s-100);
}
.wp-block-group.is-style-nl-callout-subtle > *, .wp-block-group.is-style-nl-callout-outlined > *, .wp-block-group.is-style-nl-callout-action > * { flex: 1 1 240px; margin: 0; }
.wp-block-group.is-style-nl-callout-subtle > .nl-icon, .wp-block-group.is-style-nl-callout-outlined > .nl-icon, .wp-block-group.is-style-nl-callout-action > .nl-icon { flex: 0 0 auto; }