/* HAZ / Agent Zero extensions on top of vanilla Pico.
   Site-specific tweaks belong in child/css/pico/pico-override.css.
   Framework-agnostic haz_* utilities live in css/haz/haz.css. */

/* Atkinson Hyperlegible — HAZ default (static/haz/fonts silo) */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/haz/fonts/Atkinson Hyperlegible/Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/haz/fonts/Atkinson Hyperlegible/Next/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/haz/fonts/Atkinson Hyperlegible/Mono/AtkinsonHyperlegibleMono-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/haz/fonts/Atkinson Hyperlegible/Mono/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf") format("truetype");
}

:root,
:host {
  --pico-font-family-sans-serif: "Atkinson Hyperlegible Next", system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
  --pico-font-family-monospace: "Atkinson Hyperlegible Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
  --pico-font-family: var(--pico-font-family-sans-serif);
}

/* Call out <main> the same way Pico calls out <article> (card panel).
   Horizontal inset lives on the shared body > measure-shell list below. */
main {
  margin-bottom: var(--pico-block-spacing-vertical);
  padding-block: var(--pico-block-spacing-vertical);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

/* #57 — measure-shell inset. One horizontal token for measure-column body children
   (including main). Nested articles must not double-inset. Header/footer are
   full-bleed chrome; their content rows share measure width with main’s outer edges
   (no extra padding-inline — that would sit inside the card’s inset).
   Outside gutters (screen edge → measure) are --haz_measure %, not this pad. */
body > main,
body > aside,
body > section {
  padding-inline: var(--pico-block-spacing-horizontal);
}

main article {
  padding-inline: 0;
}

/* #58 — blog meta + pages list. Pico skips classless dl/dt/dd; HAZ kit defaults live here.
   Child may override brand tweaks; structure stays pico-x. */
.haz_blog_meta {
  margin-bottom: 1.25rem;
  padding-left: 1rem;
  font-size: 0.9375rem;
  opacity: 0.9;
}

.haz_blog_meta dl {
  margin: 0;
}

.haz_blog_meta dl > div {
  margin-bottom: 1.25rem;
}

.haz_blog_meta dl > div:last-child {
  margin-bottom: 0;
}

.haz_blog_meta dl > div > div {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
}

.haz_blog_meta dt {
  margin: 0;
  font-weight: 700;
}

.haz_blog_meta dd {
  margin: 0;
}

.haz_blog_meta dd ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haz_blog_meta dd li {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.haz_pages_list,
.haz_pages_list > li {
  list-style: none;
}

.haz_pages_list {
  padding: 0;
  margin: 0;
}

.haz_pages_list > li > article > :first-child {
  margin-top: 0;
}

.haz_pages_list .haz_blog_meta {
  margin-bottom: 0;
}

/* Classless page measure: center body children without Pico .container.
   Chrome spans full bleed; inner rows + main use --haz_measure (child override).
   Mobile-first: wider column (tighter outside gutters) by default; 90% from 40rem. */
body {
  display: grid;
  grid-template-columns: 1fr var(--haz_measure, min(45rem, 95%)) 1fr;
}

@media (min-width: 40rem) {
  body {
    grid-template-columns: 1fr var(--haz_measure, min(45rem, 90%)) 1fr;
  }
}

body > * {
  grid-column: 2;
}

/* Site chrome: full-bleed shell; content rows match main’s outer measure edges. */
body > header,
body > footer {
  grid-column: 1 / -1;
  background-color: var(--pico-background-color);
  background-image: none;
}

body > header {
  padding-bottom: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 200;
}

html[data-scrolled="true"] body > header {
  padding-block: 0.5rem;
}

.haz_header_site > div,
.haz_footer_site > div {
  width: 100%;
  max-width: var(--haz_measure, min(45rem, 95%));
  margin-inline: auto;
}

@media (min-width: 40rem) {
  .haz_header_site > div,
  .haz_footer_site > div {
    max-width: var(--haz_measure, min(45rem, 90%));
  }
}

.haz_header_site > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 0.75rem;
}

html[data-scrolled="true"] .haz_header_site > div:first-child {
  padding-block: 0;
}

.haz_header_site > div:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: 0;
}

/* Header controls — mobile-first: no gap / no inline pad; restore from 40rem. */
.haz_header_site__col_other {
  display: flex;
  align-items: center;
  gap: 0;
}

.haz_header_site__col_other .haz_btn {
  padding: 0.4rem 0.2rem;
}

@media (min-width: 40rem) {
  .haz_header_site__col_other {
    gap: 0.15rem;
  }

  .haz_header_site__col_other .haz_btn {
    padding: 0.4rem;
  }
}

.haz_search {
  display: inline-flex;
  align-items: center;
}

/* Pagefind Component UI — theme via --pf-* host tokens; do not rename pagefind-* classes. */
:root {
  --pf-font: var(--pico-font-family);
  --pf-text: var(--pico-color);
  --pf-text-secondary: var(--pico-muted-color, var(--pico-secondary));
  --pf-text-muted: var(--pico-muted-color);
  --pf-background: var(--pico-background-color);
  --pf-border: var(--pico-muted-border-color, var(--pico-border-color));
  --pf-border-focus: var(--pico-primary);
  --pf-hover: var(--pico-secondary-background);
  --pf-skeleton: var(--pico-secondary-background);
  --pf-mark: var(--pico-mark-color);
  --pf-outline-focus: var(--haz_chrome, var(--pico-primary));
  --pf-modal-backdrop: rgba(0, 0, 0, 0.45);
  /* Undo PF’s px type scale — inherit the site body. */
  --pf-summary-font-size: inherit;
  --pf-result-title-font-size: inherit;
  --pf-result-excerpt-font-size: inherit;
  --pf-border-radius: var(--pico-border-radius);
}

/* Icon chrome buttons — keep lean vs Pico’s default button chrome */
.haz_btn {
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  background: transparent;
}

.haz_btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.haz_btn svg {
  width: 1.5rem;
  height: 1.5rem;
}

#haz_btn_color_scheme,
#haz_btn_nav_main,
#haz_btn_search {
  display: inline-flex;
  gap: 0.33rem;
}

#haz_btn_nav_main[aria-expanded="false"] svg.haz_svg__close_x {
  display: none;
}

#haz_btn_nav_main[aria-expanded="true"] svg.haz_svg__hamburger {
  display: none;
}

#haz_btn_search[aria-expanded="false"] svg.haz_svg__close_x {
  display: none;
}

#haz_btn_search[aria-expanded="true"] svg.haz_svg__search {
  display: none;
}

html:has(dialog[open]),
html:has(dialog[open]) body {
  overflow: hidden;
}

.haz_search_pagefind_modal,
.haz_search_pagefind_modal [data-pf-theme] {
  /* PF :root / [data-pf-theme] load later with hardcoded light+dark. Re-bind here so Pico’s data-theme wins both ways. */
  --pf-font: var(--pico-font-family);
  --pf-text: var(--pico-color);
  --pf-text-secondary: var(--pico-muted-color, var(--pico-secondary));
  --pf-text-muted: var(--pico-muted-color);
  --pf-background: var(--pico-background-color);
  --pf-border: transparent;
  --pf-border-focus: var(--haz_chrome, var(--pico-primary));
  --pf-hover: var(--pico-secondary-background);
  --pf-skeleton: var(--pico-secondary-background);
  --pf-mark: var(--pico-mark-color);
  --pf-outline-focus: var(--haz_chrome, var(--pico-primary));
  --pf-modal-backdrop: var(--pico-modal-overlay-background-color);
  --pf-border-radius: var(--pico-border-radius);
  --pf-shadow-sm: var(--pico-card-box-shadow);
  --pf-shadow-md: var(--pico-card-box-shadow);
  --pf-shadow-lg: var(--pico-card-box-shadow);
}

.haz_search_pagefind_modal {
  --haz_search_field_max: 32rem;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 1rem;
  border: none;
  overflow: hidden;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--pico-background-color);
  color: var(--pico-color);
  opacity: 0;
  transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.haz_search_pagefind_modal[open] {
  display: flex;
  opacity: 1;
  line-height: inherit;
}

@starting-style {
  .haz_search_pagefind_modal[open] {
    opacity: 0;
  }
}

.haz_search_pagefind_modal::backdrop {
  background: var(--pico-modal-overlay-background-color);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s ease, overlay 0.2s ease allow-discrete, display 0.2s ease allow-discrete;
}

.haz_search_pagefind_modal[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .haz_search_pagefind_modal[open]::backdrop {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .haz_search_pagefind_modal,
  .haz_search_pagefind_modal::backdrop {
    transition: none;
  }
}

.haz_search_pagefind_modal__close {
  align-self: flex-end;
}

.haz_search_pagefind_modal :is(pagefind-config, pagefind-input, pagefind-summary, pagefind-results) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.haz_search_pagefind_modal pagefind-input {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: var(--haz_search_field_max);
  margin-inline: auto;
  --pf-input-font-size: 1.25rem;
  --pf-input-height: 2.75rem;
}

.haz_search_pagefind_modal pagefind-summary {
  display: block;
  width: 100%;
  max-width: var(--haz_search_field_max);
  margin-inline: auto;
  font-size: 1rem;
  text-align: center;
  --pf-summary-font-size: 1rem;
}

.haz_search_pagefind_modal pagefind-results {
  overflow: auto;
  flex: 1;
  min-height: 0;
  width: 100%;
  margin-inline: auto;
  border-top: 2px solid var(--haz_chrome, var(--pico-primary));
  --pf-results-gap: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--pico-muted-color) var(--pico-card-background-color);
}

.haz_search_pagefind_modal pagefind-results::-webkit-scrollbar {
  width: 0.5rem;
}

.haz_search_pagefind_modal pagefind-results::-webkit-scrollbar-track {
  background: var(--pico-card-background-color);
}

.haz_search_pagefind_modal pagefind-results::-webkit-scrollbar-thumb {
  background: var(--pico-muted-color);
  border-radius: var(--pico-border-radius);
}

.haz_search_pagefind_modal :is(.pf-result-title, .pf-result-excerpt, .pf-heading-link, .pf-heading-excerpt) {
  line-height: inherit;
}

/* PF layers :is(*, #\#)×3 on these classes — match that so hide/title stick. */
:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-result-excerpt {
  display: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-result-title {
  font-size: 1.25rem;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-summary {
  color: var(--haz_chrome, var(--pico-primary));
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-heading-chip, .pf-heading-link, .pf-heading-excerpt) {
  font-size: inherit;
  line-height: inherit;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-link, .pf-heading-link) {
  color: var(--haz_chrome, var(--pico-primary));
  text-decoration: underline;
  text-underline-offset: 0.125em;
}

/* PF-WTF: Component UI paints "#" on heading chips via ::before — not indexed text. */
:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-heading-link::before {
  content: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-link, .pf-heading-link):is(:hover, :focus) {
  color: var(--pico-primary-hover);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-card, .pf-heading-chip) {
  border: none;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
  color: var(--pico-color);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-card, .pf-heading-chip):hover {
  border: none;
  box-shadow: var(--pico-card-box-shadow);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-card, .pf-heading-chip):has(:focus-visible) {
  border: none;
  box-shadow: var(--pico-card-box-shadow), 0 0 0 var(--pf-outline-width) var(--haz_chrome, var(--pico-primary));
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal :is(.pf-result-excerpt, .pf-heading-excerpt) mark {
  color: var(--pico-mark-color);
  background-color: var(--pico-mark-background-color);
  font-weight: inherit;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-heading-chips {
  padding-inline-start: 1rem;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-input-clear {
  background: var(--haz_chrome, var(--pico-primary));
  color: var(--pico-primary-inverse, #fff);
  font-size: inherit;
  border: none;
  border-radius: inherit;
  box-shadow: none;
  background-image: none;
  inset-inline-end: 5px;
  height: calc(100% - 10px);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-input-clear:hover {
  background: var(--pico-primary-hover);
  color: var(--pico-primary-inverse, #fff);
  box-shadow: none;
  background-image: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-input-wrapper::before {
  width: 1.25rem;
  height: 1.25rem;
  top: calc((var(--pf-input-height) - 1.25rem) / 2);
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-input {
  padding-inline-start: 2.5rem;
  padding-inline-end: 3.5rem;
  font-weight: inherit;
  border: 3px solid var(--haz_chrome, var(--pico-primary));
  border-radius: inherit;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-input:is(:focus, :focus-visible) {
  border-color: var(--haz_chrome, var(--pico-primary));
  box-shadow: 0 0 0 var(--pf-outline-width) var(--haz_chrome, var(--pico-primary));
  outline: none;
}

:is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-results {
  padding: 2rem 1rem 1rem 1rem;
}

@media (min-width: 40rem) {
  .haz_search_pagefind_modal {
    width: min(var(--haz_measure, 45rem), 90vw);
    max-width: min(var(--haz_measure, 45rem), 90vw);
    height: min(40rem, 90vh);
    max-height: 90vh;
    margin: auto;
  }

  .haz_search_pagefind_modal pagefind-input,
  .haz_search_pagefind_modal pagefind-summary {
    max-width: 26rem;
  }

  :is(*, #\#):is(*, #\#):is(*, #\#) .haz_search_pagefind_modal .pf-results {
    max-width: 34rem;
    margin-inline: auto;
  }
}

html[data-theme="dark"] #haz_btn_color_scheme svg.haz_svg__sun {
  display: none;
}

html[data-theme="light"] #haz_btn_color_scheme svg.haz_svg__moon {
  display: none;
}

/* haz_img width utilities — mobile-first; pct of content box per tier.
   MQ rem must match settings: min_tablet/min_desktop × content_width (0.5/0.8 × 45rem).
   Shortcode emits haz_img_w_m__* + haz_img_w_t__* + haz_img_w_d__* from key. */
.haz_img_w_m__25 { width: 25%; height: auto; }
.haz_img_w_m__50 { width: 50%; height: auto; }
.haz_img_w_m__75 { width: 75%; height: auto; }
.haz_img_w_m__100 { width: 100%; height: auto; }

@media (min-width: 22.5rem) {
  .haz_img_w_t__25 { width: 25%; }
  .haz_img_w_t__50 { width: 50%; }
  .haz_img_w_t__75 { width: 75%; }
  .haz_img_w_t__100 { width: 100%; }
}

@media (min-width: 36rem) {
  .haz_img_w_d__25 { width: 25%; }
  .haz_img_w_d__50 { width: 50%; }
  .haz_img_w_d__75 { width: 75%; }
  .haz_img_w_d__100 { width: 100%; }
}