/* ============================================================================
   Just Another Day in CA — WordPress core block-style shim
   ----------------------------------------------------------------------------
   ONLY for the static render (tools/render-static.mjs). WordPress generates
   these rules itself at render time from block supports and theme.json; a
   file:// render has no WordPress, so without them every `wp-block-group`
   collapses to an unstyled div and the layout the markup describes is
   invisible.

   SCOPE IS DELIBERATELY NARROW. This is not a vendored copy of core. Every
   selector below was derived by grepping the actual emitted markup for
   `wp-block-*` and the layout classes the shim injects from each block's
   `layout` attribute:

     build/*.html, build/industries/*.html, theme/parts/*, theme/templates/*
       -> group · heading · list · list-item · paragraph · buttons · button
          (+ is-style-outline) · navigation (+ submenu/link) · post-content ·
          post-title · post-date · template-part
     shim-injected
       -> is-layout-flow | is-layout-constrained | is-layout-flex ·
          has-global-padding · is-nowrap · is-content-justification-* ·
          wp-container-core-*-is-layout-N

   Nothing else from core is here. When the markup grows a block this file does
   not cover, the render will show it unstyled, which is the honest failure —
   a stub rule that half-works would hide it.

   TOKENS, NEVER LITERALS. tools/raw-dimension-check.py scans this file exactly
   as it scans base.css. That is the point: the token values are still
   pitch-era and a literal here would sit outside the retune. Where core's own
   value has no token (core's outline-button border is 2px), this file reaches
   for the nearest token and says so at the rule rather than importing the
   literal.

   LOAD ORDER — tokens.css, THIS FILE, base.css, then the register stylesheet
   (wireframe.css or candidate.css). THIS FILE GOES BEFORE base.css, which is
   the order WordPress itself uses: core block styles are enqueued first and
   the theme overrides them.

   That order is load-bearing and was found by rendering, not by reasoning.
   With base.css first, this file's `.is-layout-flex { align-items: center }`
   beat base.css's `.site-footer__cols { align-items: flex-start }` on equal
   specificity, and the footer's three columns rendered vertically staggered.
   Same class of collision for the header bar's and nav's `gap`.

   This file carries layout only and asserts no brand.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   ROOT + BLOCK GAP

   Core's own theme.json sets spacing.blockGap to 24px and applies it as
   margin-block-start on flow siblings. --jad-space-6 is that value.
   ------------------------------------------------------------------------ */
.wp-site-blocks {
  display: block;
  max-width: 100%;
}

/* Core sets this on every container block. Without it, a group carrying both a
   width and horizontal padding overflows its own measure. */
.wp-block-group,
.wp-block-post-content,
.wp-block-buttons,
.wp-block-navigation {
  box-sizing: border-box;
}

:where(.wp-site-blocks) > * {
  margin-block-start: var(--jad-space-6);
  margin-block-end: 0;
}

:where(.wp-site-blocks) > :first-child {
  margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
   LAYOUT — FLOW  (`layout: {"type":"default"}`)
   Vertical stack, one gap between siblings, no gap at the ends.
   ------------------------------------------------------------------------ */
.is-layout-flow > * {
  margin-block-start: var(--jad-space-6);
  margin-block-end: 0;
}

.is-layout-flow > :first-child {
  margin-block-start: 0;
}

.is-layout-flow > :last-child {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   LAYOUT — CONSTRAINED  (`layout: {"type":"constrained"}`)

   The measure lives on the CHILDREN, not on the container. That is what lets a
   constrained section hold a full-bleed child later without the container
   fighting it, and it is why the container itself is not max-width'd here.

   contentSize 1030px == --jad-measure-prose · wideSize 1440px == --jad-maxw,
   the two values theme.json mirrors from tokens.css.
   ------------------------------------------------------------------------ */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--jad-measure-prose);
  margin-left: auto;
  margin-right: auto;
}

.is-layout-constrained > .alignwide {
  max-width: var(--jad-maxw);
}

.is-layout-constrained .alignfull {
  max-width: none;
}

.is-layout-constrained > * {
  margin-block-start: var(--jad-space-6);
  margin-block-end: 0;
}

.is-layout-constrained > :first-child {
  margin-block-start: 0;
}

.is-layout-constrained > :last-child {
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   ROOT PADDING — `useRootPaddingAwareAlignments: true` in theme.json

   Core puts the root gutter on every constrained block and then RESETS it on
   any constrained block nested inside another. The reset is the load-bearing
   half: `main > post-content` are both constrained, and without it the page
   body would carry two gutters.
   ------------------------------------------------------------------------ */
.has-global-padding {
  padding-inline: var(--jad-gutter);
}

.has-global-padding :where(.has-global-padding) {
  padding-inline: 0;
}

/* ---------------------------------------------------------------------------
   LAYOUT — FLEX  (`layout: {"type":"flex", ...}`)

   Per-instance justification and wrap come from the generated
   `wp-container-core-*-is-layout-N` rules the shim writes into the document's
   <style>, exactly as core does. Only the shared behaviour is here.
   ------------------------------------------------------------------------ */
.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--jad-space-6);
}

.is-layout-flex > * {
  margin: 0;
}

.is-vertical {
  flex-direction: column;
}

.is-nowrap {
  flex-wrap: nowrap;
}

.is-content-justification-left { justify-content: flex-start; }
.is-content-justification-center { justify-content: center; }
.is-content-justification-right { justify-content: flex-end; }
.is-content-justification-space-between { justify-content: space-between; }

/* ---------------------------------------------------------------------------
   TYPOGRAPHIC BLOCKS

   Margin only. Every visual property (family, size, weight, colour) belongs to
   the register stylesheet, so the neutral wireframe can claim no brand.
   ------------------------------------------------------------------------ */
.wp-block-heading {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-block-post-title {
  margin-block-start: 0;
  margin-block-end: 0;
}

.wp-block-list {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: var(--jad-space-8);
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
   BUTTONS

   core/buttons declares no layout attribute in the markup because core
   supplies flex as its default; the shim injects `is-layout-flex` to match.

   Core's outline style uses a 2px border. There is no 2px token, and importing
   the literal would put a brand-visible value outside the retune, so this
   reaches for --jad-hairline. The register stylesheet owns the final weight.
   ------------------------------------------------------------------------ */
.wp-block-buttons {
  gap: var(--jad-space-4);
}

.wp-block-button {
  margin: 0;
}

.wp-block-button__link {
  display: inline-block;
  text-decoration: none;
  padding: var(--jad-space-3) var(--jad-space-5);
  border-radius: var(--jad-radius-sm);
  min-height: var(--jad-target-min);
  cursor: pointer;
  word-break: break-word;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
  border: var(--jad-hairline) solid currentColor;
  background-color: transparent;
  color: currentColor;
}

/* ---------------------------------------------------------------------------
   POST CONTENT
   ------------------------------------------------------------------------ */
.wp-block-post-content {
  display: block;
}

.wp-block-post-date {
  display: inline;
}

/* ---------------------------------------------------------------------------
   NAVIGATION

   The static expansion of `wp:navigation`. Core ships this as an
   Interactivity-API script module; the shim emits the same DOM contract and
   the same aria attributes, driven by ~40 lines of vanilla JS in the document.

   `overlayMenu: "mobile"` — core's breakpoint is 600px. Below it the list is a
   full-screen dialog behind a hamburger; at and above it the list is inline
   and both toggle buttons are gone.
   ------------------------------------------------------------------------ */
.wp-block-navigation {
  position: relative;
}

/* THE GAP INHERITANCE CHAIN, and it is not optional.
   base.css sets the item spacing on `.primary-nav`, which is the <nav>. The
   list sits four elements deeper, inside the responsive-container wrappers, so
   a single `gap: inherit` on the list inherits the *wrapper's* gap (normal)
   and the spacing silently vanishes — the first render came out reading
   "The DataPressAbout". Every wrapper between the nav and the list has to pass
   the value down. Core does exactly this for the same reason. */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container-content {
  gap: inherit;
}

.wp-block-navigation__container,
.wp-block-navigation__submenu-container {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: inherit;
}

.wp-block-navigation-item {
  display: flex;
  align-items: center;
  position: relative;
}

.wp-block-navigation-item__content {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* --- the open/close controls --------------------------------------------- */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  background: transparent;
  border: none;
  padding: var(--jad-space-2);
  color: currentColor;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- the overlay --------------------------------------------------------- */
.wp-block-navigation__responsive-container {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--jad-color-cream);
  color: var(--jad-color-navy);
  padding: var(--jad-space-8);
  overflow: auto;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex;
  flex-direction: column;
  gap: var(--jad-space-6);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  align-self: flex-end;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jad-space-4);
  font-size: var(--jad-text-lead);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  flex-wrap: wrap;
}

/* Inside the overlay the submenu is a nested list, never a popover — a
   floating panel inside a full-screen dialog has nothing to float over. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--jad-space-2);
  width: 100%;
  padding-inline-start: var(--jad-space-6);
  border: none;
  background: transparent;
  font-size: var(--jad-text-nav);
}

/* --- inline (>= 600px) --------------------------------------------------- */
@media (min-width: 600px) {
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .wp-block-navigation__responsive-container {
    display: block;
    position: static;
    background: transparent;
    padding: 0;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation__container {
    flex-direction: row;
  }
}

/* --- submenu (inline mode) ----------------------------------------------- */
.wp-block-navigation__submenu-icon,
.wp-block-navigation-submenu__toggle {
  background: transparent;
  border: none;
  padding: 0 var(--jad-space-1);
  color: currentColor;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* THE SUBMENU'S CLOSED STATE IS DELIBERATELY OVER-SPECIFIED (three classes).
   Closed-by-default is a correctness property of the static expansion, not a
   style preference, so it must not depend on a register stylesheet loaded
   after this one leaving it alone. It did not: candidate.css § Core-layout
   stand-ins restates `.primary-nav .wp-block-navigation__submenu-container
   { display: flex }` at two classes, which beat a one-class `display: none`
   here and pinned the Industries submenu permanently open in the candidate
   comp. Matching the toggle at three classes makes the state survive any
   register. */
@media (min-width: 600px) {
  .wp-block-navigation .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--jad-space-3);
    min-width: var(--jad-measure-short);
    padding: var(--jad-space-4);
    background: var(--jad-color-cream);
    border: var(--jad-hairline) solid var(--jad-scrim-navy-13);
    font-size: var(--jad-text-nav);
  }

  .wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
  .wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container,
  .wp-block-navigation .wp-block-navigation-submenu.is-open > .wp-block-navigation__submenu-container {
    display: flex;
  }
}

/* The dialog owns the scroll while it is open. */
html.has-modal-open {
  overflow: hidden;
}
