@charset "UTF-8";
/* =============================================================================
   Nordicplan — global stylesheet (SCSS source)
   Globals only: design tokens, resets, shared button, header/footer template
   parts, search pill. Block-specific styles live in src/blocks/<slug>/style.scss
   and are auto-enqueued per-block by WordPress.

   Compiles to assets/css/main.css via `npm run build:css` (or watch:css).

   Conventions
   - SCSS with nesting. `&__suffix` BEM concatenation is allowed.
   - 4-space indentation, blank line between rule blocks.
   ============================================================================= */
:root {
  --np-radius-pill: 9999px;
  --np-radius-card: 20px;
  --np-radius-card-foot: 30px;
  --np-radius-hero-arc: 300px;
  --np-container-max: 1360px;
  --np-content-max: 1200px;
}

/* ---------- Resets ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--wp--preset--color--white);
  color: var(--wp--preset--color--black-mountain);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Lock body scroll when the search overlay is open. */
}
body.np-search-overlay-open {
  overflow: hidden;
}

main {
  margin-top: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--wp--preset--color--deep-ocean);
  text-decoration: none;
}
a:hover {
  color: var(--wp--preset--color--navy);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Shared button (used in blocks + core/button overrides) ---------- */
.np-btn,
.np-btn--outline,
.wp-block-button__link.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 24px;
  border: 1px solid #000;
  border-radius: var(--np-radius-pill);
  background: transparent;
  color: #000;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.002em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.np-btn:hover,
.np-btn--outline:hover,
.wp-block-button__link.wp-element-button:hover {
  background: #000;
  color: #fff;
}

/* ---------- Site header (template part: parts/header.html) ----------
   The header wrapper carries `has-global-padding` so root padding-inline is
   applied by WP's built-in class. The inner box just constrains width and
   centres — exactly the pattern WP uses for constrained children of a
   `has-global-padding` parent. Don't add padding-inline here or content will
   sit further inset than the page's constrained content below.
*/
.np-site-header {
  background: var(--wp--preset--color--white);
  padding-block: 28px;
  position: relative;
  z-index: 10;
}
.np-site-header .np-site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
}
.np-site-header .np-site-header__brand img,
.np-site-header .wp-block-site-logo img {
  max-height: 50px;
  width: auto;
}

.np-primary-nav .wp-block-navigation__container,
.np-primary-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}
.np-primary-nav a,
.np-primary-nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--deep-ocean);
  font-weight: 600;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.np-primary-nav a:hover,
.np-primary-nav .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--navy);
}
.np-primary-nav {
  /* Core collapses the nav to the hamburger overlay at min-width:600px, which
     leaves the inline menu wrapping to two lines on tablets (~600–900px).
     Push the switch to 900px (matching the theme's other breakpoints) by
     re-asserting the mobile behaviour below 900px: hide the inline container
     and show the open toggle. Scoped under .np-primary-nav so these outrank
     core's min-width:600px rules on specificity. */
}
@media (max-width: 900px) {
  .np-primary-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .np-primary-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* ---------- Search pill (used in header + footer) ----------
   Custom HTML form (parts/header.html, parts/footer.html). Layout is icon
   first (submit button) followed by the input — both share one rounded border
   so the pill reads as a single unit, matching the Figma design.
*/
.np-search-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 140px;
  padding: 4px 16px;
  margin: 0;
  border: 1px solid var(--wp--preset--color--black);
  border-radius: var(--np-radius-pill);
  background: transparent;
  color: var(--wp--preset--color--black);
}
.np-search-pill .np-search-pill__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.np-search-pill .np-search-pill__icon svg {
  display: block;
}
.np-search-pill .np-search-pill__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--wp--preset--font-family--sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  padding: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.np-search-pill .np-search-pill__input::placeholder {
  color: inherit;
  opacity: 1;
}
.np-search-pill .np-search-pill__input::-webkit-search-decoration, .np-search-pill .np-search-pill__input::-webkit-search-cancel-button {
  display: none;
}
.np-search-pill .np-search-pill__label {
  flex: 1;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

/* Dark-background variant (footer). */
.np-search-pill--on-dark {
  border-color: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--sand);
}
.np-search-pill--on-dark .np-search-pill__input::placeholder {
  color: var(--wp--preset--color--sand);
  opacity: 0.85;
}

/* Search-trigger variant (button instead of form). Uses the same pill chrome. */
.np-search-pill--trigger {
  cursor: pointer;
  background: transparent;
  width: auto;
  min-width: 110px;
}

/* ---------- Site footer (template part: parts/footer.html) ---------- */
.np-site-footer {
  background: var(--wp--preset--color--deep-ocean);
  color: var(--wp--preset--color--white);
}
.np-site-footer a {
  color: var(--wp--preset--color--white);
}
.np-site-footer a:hover {
  color: var(--wp--preset--color--sand);
}
.np-site-footer {
  /* Parent has `has-global-padding`, so no own padding-inline here.
     Same constrained-child pattern as the header. */
}
.np-site-footer .np-site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  column-gap: 48px;
  row-gap: 24px;
  align-items: start;
  width: 100%;
  max-width: var(--wp--style--global--content-size, 1200px);
  margin-inline: auto;
  padding-block: 48px;
}
.np-site-footer .np-site-footer__search {
  grid-column: 4;
  justify-self: end;
}
.np-site-footer .np-site-footer__brand p {
  margin: 0;
}
.np-site-footer .np-site-footer__logo img {
  width: 180px;
  height: auto;
}
.np-site-footer .np-site-footer__tagline {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
}
.np-site-footer .np-site-footer__orgnr {
  font-size: 14px;
  opacity: 0.9;
}
.np-site-footer .np-site-footer__heading {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
  color: var(--wp--preset--color--white);
}
.np-site-footer .np-site-footer__body {
  font-size: 14px;
  line-height: 23px;
  letter-spacing: 0.02em;
  margin: 0;
}
.np-site-footer .np-site-footer__body strong {
  font-weight: 500;
}
.np-site-footer .np-site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 30px;
}
.np-site-footer .np-site-footer__links a {
  text-decoration: underline;
}
@media (max-width: 900px) {
  .np-site-footer .np-site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
  .np-site-footer .np-site-footer__search {
    grid-column: 2;
    justify-self: end;
  }
}
@media (max-width: 600px) {
  .np-site-footer .np-site-footer__inner {
    grid-template-columns: 1fr;
  }
  .np-site-footer .np-site-footer__search {
    grid-column: 1;
    justify-self: start;
  }
}

/* =============================================================================
   Native-block sections (patterns/front-page.php)
   The pattern uses core/group + core/columns + core/heading + core/image +
   core/buttons with .np-* className hooks. Block-specific styles live in
   src/blocks/{hero,feature-row,card-grid,card}/style.scss and are auto-enqueued
   by WordPress when each block renders.
   ============================================================================= */
/* =============================================================================
   Chapter layout (templates/single-np_chapter.html, single-np_commentary.html)
   Two-column grid: sticky TOC sidebar (300px) + main content. The sidebar
   block has its own `position: sticky`; we just need the column to not collapse.
   ============================================================================= */
.np-chapter-layout__columns {
  align-items: flex-start;
}
@media (max-width: 900px) {
  .np-chapter-layout__columns {
    flex-direction: column;
    /* The columns blockGap is `0 48px` (row-gap 0, for the desktop row),
       so the stacked TOC and content touch. Restore the theme's default
       block spacing as a row-gap. The `&.wp-block-columns` bump (0,2,0)
       outranks WP's generated single-class `gap: 0 48px` rule. */
  }
  .np-chapter-layout__columns.wp-block-columns {
    row-gap: 24px;
  }
}

.np-chapter-layout__sidebar {
  flex: 0 0 300px;
}
@media (max-width: 900px) {
  .np-chapter-layout__sidebar {
    /* The column carries an inline `flex-basis:300px` (from the block's
       width:300px). Once the row flips to `flex-direction: column`, that
       basis becomes a reserved 300px *height* — an empty gap below the
       collapsed TOC. Override it (!important to beat the inline style) so
       the column is just as tall as its content. */
    flex: 0 0 auto !important;
    width: 100%;
  }
}

.np-chapter-layout__main {
  flex: 1;
  min-width: 0;
}

/* =============================================================================
   Plan archive (templates/archive-np_chapter.html)
   Full-bleed sand-soft band. `<main>` is alignfull + constrained +
   has-global-padding so it follows the same container rules as the rest of
   the site — the inner block aligns with the header/breadcrumb above. The
   ship image is alignfull (escapes the max-width) and absolutely positioned
   to bleed past the viewport's right edge.
   ============================================================================= */
.np-plan-archive {
  position: relative;
  overflow: hidden;
  min-height: 720px;
  /* Pale outer circle peeking from the top-right corner. Sized in vw so the
     proportion holds across screen widths; capped on very wide monitors. */
}
.np-plan-archive::before {
  content: "";
  position: absolute;
  top: -22vw;
  right: -28vw;
  width: 70vw;
  height: 70vw;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: #b9d2e2;
  z-index: 0;
  pointer-events: none;
}
.np-plan-archive {
  /* Constrained child — gets max-width + centering from WP's constrained
     layout on the parent. No own padding-inline; parent's has-global-padding
     handles the viewport-edge inset. */
}
.np-plan-archive .np-plan-archive__inner {
  position: relative;
  z-index: 2;
  /* Neutralise the TOC sidebar's chapter-sidebar chrome so it reads as
     a plain title + list flush inside the band. */
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar {
  max-width: 360px;
  margin-inline: 0; /* override constrained centering */
  background: transparent;
  border-radius: 0;
  position: static;
  padding: 0;
  max-height: none;
  overflow: visible;
  /* This landing IS the TOC — never collapse it on mobile, and drop
     the rail's tap-to-expand affordances. */
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar .np-toc-sidebar__subtitle,
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar .np-toc-sidebar__chevron {
  display: none;
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar .np-toc-sidebar__panel {
  display: block !important;
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar .np-toc-sidebar__header {
  cursor: default;
  margin: 0;
  padding: 0;
  border-bottom: none;
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--display);
  line-height: 1.1;
  margin: 0 0 28px;
}
.np-plan-archive .np-plan-archive__inner .np-toc-sidebar__item {
  padding: 12px 0;
}
.np-plan-archive {
  /* Ship image — alignfull child, so WP excludes it from the constrained
     max-width and applies the viewport-edge negative margins. Position
     absolute then handles the off-canvas placement. */
}
.np-plan-archive .np-plan-archive__ships {
  position: absolute;
  margin: 0;
  top: 50%;
  right: -11vw;
  transform: translateY(-50%);
  width: 75vw;
  height: 75vw;
  max-width: 1200px;
  max-height: 1200px;
  border-radius: 50%;
  overflow: hidden;
  background: #a4c2d5;
  z-index: 1;
  pointer-events: none;
}
.np-plan-archive .np-plan-archive__ships img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}
@media (max-width: 900px) {
  .np-plan-archive {
    min-height: 0;
    padding-bottom: 380px !important;
  }
  .np-plan-archive::before {
    width: 460px;
    height: 460px;
    max-width: none;
    max-height: none;
    right: -220px;
    top: auto;
    bottom: -40px;
  }
  .np-plan-archive .np-plan-archive__inner .np-toc-sidebar {
    max-width: none;
  }
  .np-plan-archive .np-plan-archive__ships {
    width: 600px;
    height: 600px;
    max-width: none;
    max-height: none;
    right: -180px;
    top: auto;
    bottom: -180px;
    transform: none;
  }
}