/*
 * Stkcentrum theme — global stylesheet (reset, base, layout).
 * FE tokens: assets/src/css/tokens.css (enqueued). Site overlay: tokens.theme.css (merged at sync).
 * Component and block CSS are loaded on demand via the asset loader.
 *
 * overrides.css and patterns.css are intentionally UNLAYERED so they beat
 * unlayered core block styles (e.g. wp-block-library inline). Bundled after
 * layered content by scripts/copy-css.js — do not wrap them in @layer.
 */
@layer reset, base, layout, utilities;

@layer reset {
/* reset.css — layer: reset */

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin-block-end: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  margin: 0;
}

h1, h2, h3, h4, button, input, label {
  line-height: 1.1;
}

h1, h2, h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

}

@layer base {
/* base.css — layer: base
   Typography aligned with theme.json / Stkcentrum UI (global styles handle blocks). */

html {
  font-size: var(--base-font-size);
  color-scheme: light only;
}

body {
  font-size: var(--wp--preset--font-size--text-md, 1rem);
  line-height: 1.5;
  font-weight: 400;
  font-family: var(--primary-font);
  color: var(--text-color);
  background-color: var(--color-bg-primary);
  padding: 0;
  margin: 0;
  font-synthesis: none;
}

strong,
b {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--color-text-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: var(--wp--preset--font-size--display-lg, clamp(2.25rem, 1.99rem + 1.13vw, 3rem));
  line-height: 1.25;
}

h2 {
  font-size: var(--wp--preset--font-size--display-md, clamp(1.75rem, 1.57rem + 0.75vw, 2.25rem));
  line-height: 1.22;
}

h3 {
  font-size: var(--wp--preset--font-size--display-sm, clamp(1.5rem, 1.37rem + 0.56vw, 1.875rem));
  line-height: 1.27;
  letter-spacing: 0;
}

h4 {
  font-size: var(--wp--preset--font-size--display-xs, clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem));
  line-height: 1.33;
  letter-spacing: 0;
}

h5 {
  font-size: var(--wp--preset--font-size--text-xl, 1.25rem);
  line-height: 1.5;
  letter-spacing: 0;
}

h6 {
  font-size: var(--wp--preset--font-size--text-lg, 1.125rem);
  line-height: 1.56;
  letter-spacing: 0;
}

p {
  margin-bottom: 1.25rem;
  font-size: var(--wp--preset--font-size--text-md, 1rem);
}

a {
  color: var(--color-text-brand-secondary);
}

a:hover {
  color: var(--color-text-brand-primary);
}

}

@layer layout {
/* layout.css — layer: layout
   Page layout, #page, .entry-content, .blog-roll, .content-post. */

#page {
  /* Bleeding images (image-expand) paint past the content box; clip horizontal
     overflow at the viewport so the page does not get a sideways scrollbar.
     overflow-x only — vertical sticky header behaviour is preserved. */
  overflow-x: clip;
}

/* Universal top offset for every page and post.
   `.header` is `position: fixed; top: 0; height: var(--header-height)` so
   `#content` would otherwise start at y=0 and slide under the header. Push
   every template down by header-height + 32px of breathing room so the
   first block (hero, page heading, post title, archive intro, …) always
   starts comfortably below the fixed bar without each page template
   having to add its own padding-top. */
.site-content {
  padding-top: calc(var(--header-height) + 20px);
}

@media only screen and (max-width: 768px) {
  .site-content {
    /* Mobile header chrome shrinks (no utilities row on mobile, see
       components/header.css) so we can ease off the breathing room. */
    padding-top: calc(var(--header-height) + 16px);
  }
}

.admin-bar #page {
  margin-top: 0;
}

@media only screen and (max-width: 783px) {
  .admin-bar #page {
    margin-top: calc(var(--header-height) + 46px);
  }
}

/* Fallback classic-loop layout for home.php's `else` branch — when no Posts Page is
   configured, home.php emits `<main class="site-main blog-roll">` with raw <article>
   excerpts inside. These rules style THAT layout only.

   IMPORTANT: scope to `main.blog-roll`, not bare `.blog-roll`. The
   `stkcentrum/blog-roll` block also emits `<div class="blog-roll">` with its own
   `<article class="latest-posts__card">` children, and these legacy rules used to
   leak onto those cards — adding `padding: 1rem` (visible misalignment vs sections
   above/below), forcing `display: grid` + 65ch max-width, and applying `aspect-ratio: 2/1`
   to every image. Blog-roll and latest-posts blocks own their card visuals via
   co-located fragment CSS, so it must stay out of this selector's reach. */

main.blog-roll article {
  display: grid;
  grid-template-columns:
    [grid-start] 1fr
    [content-start] minmax(min(100%, calc(var(--content-width) / 2)), 1fr)
    [content-end] 1fr
    [grid-end];
  width: 100%;
  row-gap: 1rem;
  max-width: 65ch;
  margin: 0 auto;
  padding: 1rem;
}

main.blog-roll article > * {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  grid-column: content;
}

main.blog-roll article img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

.entry-content {
  width: 100%;
  /* margin: 5vb auto; */
  margin: 0 auto;
}

.screen-reader-text {
  display: none;
}

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

/* Content post (single) layout */
.content-post {
  --default-post-width: var(--content-width);
  --post-content-width: var(--post-width, var(--default-post-width));
}

.content-post .entry-header,
.content-post .post-thumbnail,
.content-post .entry-content {
  width: 100%;
  row-gap: 1rem;
  margin: 5vb auto;
}

.content-post .entry-header > *,
.content-post .post-thumbnail > * {
  max-width: var(--post-content-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

.content-post .post-author {
  max-width: var(--post-content-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

}

@layer utilities {
/* utilities.css — layer: utilities
   Add utility classes as needed. */

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: currentColor;
  stroke: none;
}


}

/* Unlayered overrides — must beat core unlayered block styles. */
/* overrides.css — UNLAYERED on purpose.
   Bundled after @layer blocks by scripts/copy-css.js so these rules beat
   unlayered core block styles (wp-block-library inline). Use sparingly. */

/* Theme width alignment: Content (default) < Wide < Large < Full.
   Specificity must beat `.is-layout-constrained > :where(:not(.alignfull))`
   (content-size). Editor root uses `.is-root-container` as the layout parent. */
.is-layout-constrained > .alignlarge,
.is-root-container > .alignlarge,
body .is-root-container > .wp-block.alignlarge {
  max-width: min(87.5rem, 100%);
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* core/button — is-style-outline (secondary). Figma Buttons/Button Size=xl Hierarchy=Secondary.
   States: Default (flat), Hover/Loading (bg-primary-hover), Focused (focus ring), Disabled (50%). */
.wp-block-button.is-style-outline > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-sizing: border-box;
  /* Border eats 2px of the 48px xl height — subtract from padding. */
  padding: calc(var(--spacing-lg) - 1px) 1.125rem;
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xs);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--text-md);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:active,
.wp-block-button.is-style-outline > .wp-block-button__link[aria-busy="true"] {
  background-color: var(--color-bg-primary-hover);
  color: var(--color-text-secondary-hover);
  border-color: var(--color-border-primary);
}

.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  outline: none;
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-color: var(--color-border-primary);
  box-shadow:
    0 0 0 2px var(--color-bg-primary),
    0 0 0 4px var(--color-border-brand);
}

.wp-block-button.is-style-outline > .wp-block-button__link:disabled,
.wp-block-button.is-style-outline > .wp-block-button__link[disabled],
.wp-block-button.is-style-outline > .wp-block-button__link[aria-disabled="true"] {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-color: var(--color-border-primary);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* core/button — primary (default). Figma Buttons/Button Size=xl Hierarchy=Primary.
   States: Default (flat), Hover/Loading (solid_hover + skeuomorphic), Focused (focus ring), Disabled (50%). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link {
  --btn-shadow:
    0 1px 2px 0 rgba(0, 0, 0, 0.05),
    inset 0 -2px 0 0 rgba(0, 0, 0, 0.05),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  box-sizing: border-box;
  padding: var(--spacing-lg) 1.125rem;
  background-color: var(--color-bg-brand-solid);
  color: var(--color-text-white);
  border: none;
  border-radius: var(--radius-xs);
  font-family: var(--wp--preset--font-family--sans);
  font-size: var(--wp--preset--font-size--text-md);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:active,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link[aria-busy="true"] {
  background-color: var(--color-bg-brand-solid-hover);
  box-shadow: var(--btn-shadow);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:focus-visible {
  outline: none;
  background-color: var(--color-bg-brand-solid);
  box-shadow:
    0 0 0 2px var(--color-bg-primary),
    0 0 0 4px var(--color-border-brand),
    var(--btn-shadow);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:disabled,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link[disabled],
.wp-block-button:not(.is-style-outline) > .wp-block-button__link[aria-disabled="true"] {
  background-color: var(--color-bg-brand-solid);
  box-shadow: var(--btn-shadow);
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* core/button icons — Figma Buttons/Button Size=xl trailing icon: 20×20.
   Primary icons are white @ 60% opacity (not solid white). */
.wp-block-button[class*="has-icon__"] > .wp-block-button__link .fragmentiv-icon,
.wp-block-button[class*="has-icon__"] > .wp-block-button__link .fragmentiv-icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link .fragmentiv-icon,
.wp-block-button:not(.is-style-outline) > .wp-block-button__link .fragmentiv-icon-wrap svg {
  opacity: 0.6;
}

/* Keep Untitled UI stroke weight; fragmentiv-icons forces 1.25. */
.wp-block-button[class*="has-icon__"] > .wp-block-button__link .fragmentiv-icon[fill="none"] :where(path, line, circle, polyline, rect),
.wp-block-button[class*="has-icon__"] > .wp-block-button__link .fragmentiv-icon-wrap svg[fill="none"] :where(path, line, circle, polyline, rect) {
  stroke-width: 1.67;
}

/* core/buttons — stack full-width when 2+ buttons on mobile. */
@media (max-width: 781px) {
  .wp-block-buttons:has(> .wp-block-button:nth-child(2)) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .wp-block-buttons:has(> .wp-block-button:nth-child(2)) > .wp-block-button,
  .wp-block-buttons:has(> .wp-block-button:nth-child(2)) > .wp-block-button > .wp-block-button__link {
    width: 100%;
  }
}

/* core/details — FAQ accordion: dividers, item rhythm, icons, answer color. */

.wp-block-details {
  padding-block: var(--spacing-3xl);
}

.wp-block-details:first-child {
  border-top: none;
  padding-top: 0;
}

.wp-block-details:last-child {
  padding-bottom: 0;
}

.wp-block-details[open] > summary {
  margin-bottom: var(--spacing-md);
}

.wp-block-details > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-xl);
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* Hide default marker in all browsers. */
.wp-block-details > summary::-webkit-details-marker,
.wp-block-details > summary::marker {
  display: none;
  content: '';
}

/* Plus/minus icons on summary. */
.wp-block-details > summary::after {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url("../icons/plus-circle.svg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
}

.wp-block-details[open] > summary::after {
  background-image: url("../icons/minus-circle.svg");
}

/* Answer text + remove default paragraph top margin inside accordion. */
.wp-block-details > :not(summary) {
  color: var(--color-text-tertiary);
  margin-block-start: 0;
}

.wp-block-details > :not(summary):last-child {
  margin-block-end: 0;
}

/* core/group grid — stretch children so cards in a row share equal height. */
.wp-block-group-is-layout-grid > .wp-block-group {
  height: 100%;
}

/* core/list — Figma Text md: 4px disc, ~11px to text, 24px line boxes (no extra item gap). */
.wp-block-list:not(.is-style-icon-list) {
  list-style: none;
  padding-inline-start: 0;
  margin: 0;
}

.wp-block-list:not(.is-style-icon-list) > :where(li, .wp-block-list-item) {
  position: relative;
  padding-inline-start: 0.9375rem; /* 4px bullet + ~11px gap */
  margin-block: 0;
}

.wp-block-list:not(.is-style-icon-list) > :where(li, .wp-block-list-item)::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.75em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: currentColor;
  transform: translateY(-50%);
}

/* core/list — is-style-icon-list: feature checklists with selectable icons.
   Icons are CSS ::before decorations driven by data-icon on ul/li (set via block attributes). */
.wp-block-list.is-style-icon-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-list.is-style-icon-list[data-columns="2"] {
  columns: 2;
  column-gap: var(--spacing-4xl);
}

.wp-block-list.is-style-icon-list[data-columns="3"] {
  columns: 3;
  column-gap: var(--spacing-4xl);
}

.wp-block-list.is-style-icon-list > :where(li, .wp-block-list-item) {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  break-inside: avoid;
  margin-bottom: var(--spacing-md);
}

.wp-block-list.is-style-icon-list > :where(li, .wp-block-list-item)::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 9999px;
  background-color: var(--color-fg-success-primary);
  mask-image: url("../icons/check-circle.svg");
  -webkit-mask-image: url("../icons/check-circle.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 1rem 1rem;
  -webkit-mask-size: 1rem 1rem;
}

@media (max-width: 48rem) {
  .wp-block-list.is-style-icon-list[data-columns="2"],
  .wp-block-list.is-style-icon-list[data-columns="3"] {
    columns: 1;
  }
}

/* patterns.css — UNLAYERED. Block style CSS not covered by theme.json. */

.is-style-badge-brand {
  width: fit-content;
  margin-inline: auto;
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-full, 9999px);
  border: 1px solid var(--color-border-brand);
  background-color: var(--color-bg-brand-primary);
  color: var(--color-text-brand-tertiary);
  font-weight: 500;
  line-height: var(--line-height-text-sm, 1.43);
}

/* patterns-manifest:start — generated by scripts/build-patterns-manifest.mjs */
/* patterns-manifest:end */