/*
 * magazine.css — lutzschmitt.com Kirby 5 Theme
 *
 * Cleaned and consolidated from magazine-merged.css (March 2026).
 * Fully mobile-first rewrite of media queries (March 2026).
 * See css-cleanup-changelog.md in the project root for a full diff summary.
 *
 * BREAKPOINTS (mobile-first, min-width only)
 * ------------------------------------------
 *   sm  40rem   640px   Two-column grid, bleed images normalize
 *   md  52.5rem 840px   Desktop nav, header, typography, layout columns
 *   lg  64rem   1024px  Three-column grid, large typography
 *
 * SECTIONS
 * --------
 * 01  Custom Properties (Design Tokens)
 * 02  Fonts
 * 03  Base Reset & Typography
 * 04  Accent Color System
 * 05  Layout & Site Structure
 * 06  Site Header & Logo
 * 07  Navigation (Desktop + Mobile)
 * 08  Breadcrumbs
 * 09  Article Grid & Teasers
 * 10  Featured Article (.main-article)
 * 11  Single Article (Detail View)
 * 12  Search Page
 * 13  Contact Form
 * 14  Site Footer
 * 15  Shared Components
 * 16  Blocks & Layout Field
 * 17  Dark Mode
 */


/* =============================================================================
   01  Custom Properties (Design Tokens)
   ============================================================================= */

:root {
  /* Colors — overridden per-theme by .dark on <html> */
  --text-color:        #222222;
  --muted-color:       #3f3f3f;
  --bg-color:          #ffffff;
  --border-color:      #dddddd;
  --link-color:        #2c3dd6;
  --link-hover:        #560bed;

  /* Accent — base defaults, overridden per-page via .accent-hXX classes on <html> */
  --accent-color:      #0066cc;

  /* Accessible accent aliases (used for links, fills, focus rings) */
  --accent-aa-link:    var(--accent-color, #0066cc);
  --accent-aa-fill:    var(--accent-color, #0066cc);
  --accent-aa-on-fill: #ffffff;
  --accent-aa-focus:   var(--accent-aa-link);

  /* Layout */
  --overview-max-width: 96rem;

  /* Elevated surface (cards, inputs, code blocks in light mode) */
  --surface-color: #f5f5f5;

  /* Code blocks */
  --code-bg: #f5f5f5;

  /* Typography */
  --font-ui: "InterVariable", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* =============================================================================
   02  Fonts
   Only Inter Variable.
   ============================================================================= */

@font-face {
  font-family: "InterVariable";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}


/* =============================================================================
   03  Base Reset & Typography
   ============================================================================= */

html {
  font-size: 100%;
  overflow-x: visible;
}

/* Ensure [hidden] always wins regardless of display rules set elsewhere */
[hidden] {
  display: none !important;
}

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Fluid body font size */
body {
  font-family: var(--font-ui);
  font-size: clamp(1.1rem, 1rem + 0.24vw, 1.3rem);
  font-weight: 480;
  line-height: 1.65;
  color: var(--text-color);
  background: var(--bg-color);
  margin: 0;
  font-feature-settings: "case" 1, "ss03" 1, "cv01" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv06" 1;
}

button,
input,
select,
textarea {
  font-family: var(--font-ui);
  font-feature-settings: "case" 1, "ss03" 1, "cv01" 1, "cv02" 1, "cv03" 1, "cv04" 1, "cv06" 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-synthesis: none;
  letter-spacing: -0.01em;
  color: var(--text-color);
}

p {
  color: var(--text-color);
  margin-bottom: 1.35rem;
}

a {
  color: var(--link-color);
  text-decoration: underline;
  transition: color 0.2s ease, border-color 0.2s ease,
              background-color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--link-hover);
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: 1.35rem 0;
}

ul, ol {
  line-height: 1.6;
  padding-left: 2em;
}

/* Reset padding for navigation/UI lists */
.nav-list,
.footer-nav,
.share-buttons,
.social-icons__list {
  padding-left: 0;
}

ol ol > li {
  list-style: lower-alpha;
}

/*
 * Blockquote — for KirbyText (textarea) content only.
 * Inside .blocks-content this is overridden in Section 16.
 */
blockquote {
  border: none;
  margin-bottom: 1.35rem;
  padding: 1.35rem 1.35rem 1.35rem 2rem;
  position: relative;
}

blockquote::before {
  color: var(--accent-color, #03a6d4);
  content: "\201C";
  font-family: inherit;
  font-size: clamp(3rem, 2.3rem + 2vw, 4rem);
  line-height: 1;
  position: absolute;
  left: 0;
  top: 1.35rem;
  text-align: center;
  width: 2rem;
}

blockquote p {
  font-style: italic;
  line-height: 1.25;
}

cite {
  color: var(--muted-color, #3f3f3f);
  display: block;
  font-size: clamp(0.85rem, 0.82rem + 0.08vw, 0.9rem);
  font-style: normal;
  margin-top: 1.35rem;
}

cite::before {
  content: "\2014\00a0";
}

pre {
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: 1.35rem 1.75rem;
  overflow-x: auto;
  background: var(--code-bg, #f5f5f5);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono", monospace;
}

table {
  color: var(--text-color);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  font-size: 0.9em;
  width: 100%;
}

table th,
table td {
  border-bottom: 1px solid var(--border-color);
  line-height: 1.2;
  margin: 0;
  overflow: visible;
  padding: 2.5%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Keep data tables readable on narrow viewports without breaking page reflow */
.single-article .entry-content table,
.template-default .site-main .container table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep numbering column readable in source tables */
.single-article .entry-content table th:first-child,
.single-article .entry-content table td:first-child,
.template-default .site-main .container table th:first-child,
.template-default .site-main .container table td:first-child {
  width: 5.5rem;
  min-width: 5.5rem;
  white-space: nowrap;
  text-align: center;
}

table th {
  background: var(--border-color);
  border: none;
  font-size: 0.85em;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

table td + td {
  border-left: 1px solid var(--border-color);
}

figure {
  margin: 0 0 1.35rem; /* reset browser default 40px inline margin */
}

figcaption {
  color: var(--muted-color);
  font-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  margin-top: 0.45rem;
  text-align: center;
}

/*
 * Prevent media from overflowing containers.
 * NOTE: height: auto on <iframe> breaks video blocks — overridden in Section 16.
 */
embed, iframe, img, object, video, picture {
  max-width: 100%;
  display: block;
  height: auto;
}

/* KirbyText image alignment helpers */
.alignleft,
.alignright,
.aligncenter {
  margin-bottom: 1em;
}

@media (min-width: 52.5rem) {
  .alignleft,
  .alignright {
    max-width: 50%;
  }
  .alignleft {
    float: left;
    margin-right: 1.5em;
  }
  .alignright {
    float: right;
    margin-left: 1.5em;
  }
}

.aligncenter img {
  clear: both;
  display: block;
  margin: 0 auto;
}

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Form inputs inherit body font */
.input {
  font: inherit;
  color: inherit;
}

/* Focus rings — :focus-visible only (modern browsers).
 * Avoids showing focus ring on mouse click while keeping keyboard/touch accessible. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.submenu-toggle:focus-visible,
.nav-toggle:focus-visible,
.header-icon:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}


/* =============================================================================
   04  Accent Color System
   All .accent-* classes are applied to <html> by header.php.
   Use only --accent-color in templates and components.
   ============================================================================= */

.accent {
  --accent-hue-light:   #0066cc;
  --accent-hue-dark:    #0052cc;
  --accent-color-light: var(--accent-hue-light);
  --accent-color-dark:  var(--accent-hue-dark);
  --accent-color:       var(--accent-color-light, #0066cc);
  --accent-color-small: var(--accent-hue-light);
}

.dark .accent,
.dark.accent {
  --accent-color:       var(--accent-color-dark, #4d9fff) !important;
  --accent-color-small: var(--accent-hue-dark) !important;
  --link-color:         var(--accent-color, #82b4ff);
  --link-hover:         color-mix(in srgb, var(--accent-color, #82b4ff) 80%, white);
}

/* Small-text accent: 25% darkened in light mode, 20% lightened in dark mode */
@supports (color: color-mix(in srgb, white 50%, black)) {
  .accent {
    --accent-color-small: color-mix(in srgb, var(--accent-hue-light) 75%, black);
  }
  .dark .accent,
  .dark.accent {
    --accent-color-small: color-mix(in srgb, var(--accent-hue-dark) 80%, white) !important;
  }
}

/* 24 hue definitions — light mode / dark mode pairs */
.accent-h01 { --accent-hue-light: #195aa4; --accent-hue-dark: #086ae2; }
.accent-h02 { --accent-hue-light: #1d8add; --accent-hue-dark: #24a0ff; }
.accent-h03 { --accent-hue-light: #0c71ac; --accent-hue-dark: #327ba9; }
.accent-h04 { --accent-hue-light: #00afc8; --accent-hue-dark: #0cc3df; }
.accent-h05 { --accent-hue-light: #00a5aa; --accent-hue-dark: #00ccc9; }
.accent-h06 { --accent-hue-light: #00b37d; --accent-hue-dark: #00e09d; }
.accent-h07 { --accent-hue-light: #116f57; --accent-hue-dark: #157960; }
.accent-h08 { --accent-hue-light: #78af00; --accent-hue-dark: #5e8d00; }
.accent-h09 { --accent-hue-light: #3dad00; --accent-hue-dark: #59bf22; }
.accent-h10 { --accent-hue-light: #dca000; --accent-hue-dark: #e8b321; }
.accent-h11 { --accent-hue-light: #ff4f00; --accent-hue-dark: #ff7438; }
.accent-h12 { --accent-hue-light: #bd0000; --accent-hue-dark: #fe2020; }
.accent-h13 { --accent-hue-light: #e1127a; --accent-hue-dark: #d03e5b; }
.accent-h14 { --accent-hue-light: #ad004b; --accent-hue-dark: #ad004b; }
.accent-h15 { --accent-hue-light: #e0006c; --accent-hue-dark: #d24880; }
.accent-h16 { --accent-hue-light: #c20084; --accent-hue-dark: #c34f9e; }
.accent-h17 { --accent-hue-light: #ff00bb; --accent-hue-dark: #e123a5; }
.accent-h18 { --accent-hue-light: #ff2ef8; --accent-hue-dark: #fc4dff; }
.accent-h19 { --accent-hue-light: #8525e4; --accent-hue-dark: #bf70ff; }
.accent-h20 { --accent-hue-light: #2e49d8; --accent-hue-dark: #6670ff; }
.accent-h21 { --accent-hue-light: #31474e; --accent-hue-dark: #9fc7e0; }
.accent-h22 { --accent-hue-light: #2f376a; --accent-hue-dark: #909bd8; }
.accent-h23 { --accent-hue-light: #aa8540; --accent-hue-dark: #c0b193; }
.accent-h24 { --accent-hue-light: #c97208; --accent-hue-dark: #d98217; }

/* Hues where white text fails WCAG AA on the accent fill — use dark text instead.
   Light mode: hues with high luminance (gold, lime, orange).
   Dark mode: additional hues that lighten in dark variant. */
.accent-h08,
.accent-h09,
.accent-h10,
.accent-h24 { --accent-aa-on-fill: #1a1a1a; }

.dark .accent-h06,
.dark .accent-h09,
.dark .accent-h10,
.dark .accent-h21,
.dark .accent-h23,
.dark .accent-h24 { --accent-aa-on-fill: #1a1a1a; }


/* =============================================================================
   05  Layout & Site Structure
   ============================================================================= */

.container {
  width: min(var(--overview-max-width, 96rem), 100% - 32px);
  margin: 0 auto;
}

/*
 * Detail / reading pages: narrow column.
 * Overview pages (home, articles, page-layout) use --overview-max-width (no override needed).
 */
.template-article        .site-main .container,
.template-article-blocks .site-main .container,
.template-page-blocks    .site-main .container,
.template-default        .site-main .container,
.template-contact        .site-main .container,
.template-author         .site-main .container,
.template-results        .site-main .container,
.template-search         .site-main .container {
  max-width: 48rem;
}

.site-header,
.site-main,
.site-footer {
  background: transparent;
}

.site-main {
  min-height: 50vh;
  padding-bottom: 8px;
}

.main-header {
  margin: 14px 0 35px;
}

.main-header.tag {
  text-transform: capitalize;
}


/* =============================================================================
   06  Site Header & Logo
   Base = mobile (compact). Desktop layout at --bp-md (min-width: 52.5rem).
   ============================================================================= */

/* Mobile: compact header */
.site-header {
  margin-top: 1em;
  margin-bottom: 0.7em;
}

.site-header .container {
  position: relative;
}

.site-header-row {
  display: flex;
  align-items: flex-start;
  gap: 0.68rem;
  min-width: 0;
}

.site-header-row > * {
  min-width: 0;
}

/* Desktop: expanded header */
@media (min-width: 52.5rem) {
  .site-header {
    margin-top: 3em;
    margin-bottom: 3em;
  }
  .site-header-row {
    align-items: center;
    gap: 1rem;
    min-height: 4.5rem;
  }
}

.site-branding {
  padding-top: 12px;
}

/* Logo link — animated two-line underline on hover */
.site-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
  position: relative;
  color: var(--text-color, #1f2a37);
  --logo-word-underline-1-start: 0%;
  --logo-word-underline-1-end:   76%;
  --logo-word-underline-2-start: 32%;
  --logo-word-underline-2-end:   2%;
  --logo-word-underline-top:     72%;
}

.site-logo-link::before,
.site-logo-link::after {
  content: "";
  position: absolute;
  top: var(--logo-word-underline-top);
  height: 2px;
  background: var(--text-color, #1f2a37);
  opacity: 0;
  pointer-events: none;
}

.site-logo-link::before {
  left: var(--logo-word-underline-1-start);
  right: calc(var(--logo-word-underline-1-end) + 3px);
}

.site-logo-link::after {
  left: var(--logo-word-underline-2-start);
  right: var(--logo-word-underline-2-end);
}

.site-logo-link:hover::before,
.site-logo-link:focus-visible::before,
.site-logo-link:hover::after,
.site-logo-link:focus-visible::after {
  opacity: 1;
}

.site-logo-link:focus-visible {
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 4px;
  border-radius: 0px;
}

/* Mobile: smaller logo */
.site-logo {
  display: block;
  width: auto;
  max-height: 3.32rem;
}

/* Desktop: full-size logo */
@media (min-width: 52.5rem) {
  .site-logo {
    max-height: 3.96rem;
  }
}

/* Skip to content link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -4em;
  padding: 8px 12px;
  background: var(--bg-color);
  color: var(--text-color);
  border: 2px solid var(--text-color);
  z-index: 1000;
  text-decoration: none;
}

.skip-link:focus {
  top: 16px;
}

/* Social icons */
.social-icons__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.2em;
  list-style: none;
  margin: 0.4em 0.4em 0 0.4em;
}

.social-icons__link {
  display: inline-flex;
  color: var(--text-color, #1f2a37);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
  border-bottom: none;
}

.social-icons__link:hover,
.social-icons__link:focus-visible {
  color: var(--accent-color, #0066cc);
  opacity: 0.8;
}

.social-icons__link svg {
  width: 2em;
  height: 2em;
  fill: currentColor;
  display: block;
}


/* =============================================================================
   07  Navigation (Desktop + Mobile)
   Mobile = full-screen overlay. Desktop = inline nav bar.
   ============================================================================= */

.site-navigation {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 100%;
}

.site-navigation button {
  font: inherit;
}

.site-logo-link--desktop {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-logo-link--mobile,
.nav-overlay,
.nav-desktop-bar {
  min-width: 0;
}

.nav-toggle {
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  align-self: center;
  margin: 0 0 0 auto;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: 0.3rem;
  border-radius: 999px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
  z-index: 5;
  flex-shrink: 0;
}

.nav-toggle .icon-bar {
  background-color: var(--text-color);
  width: 1.4rem;
  height: 2px;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.is-open .top-bar { transform: translateY(6px) rotate(45deg); }
.nav-toggle.is-open .middle-bar { opacity: 0; }
.nav-toggle.is-open .bottom-bar { transform: translateY(-6px) rotate(-45deg); }

.site-navigation .nav-panel[hidden] {
  display: none !important;
}

.nav-desktop-bar {
  display: none;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0.95rem 1rem 0.85rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}

.nav-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.site-logo-link--mobile {
  display: inline-flex;
  max-width: min(68vw, 17rem);
}

.nav-close {
  flex: 0 0 auto;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
}

.nav-close__icon,
.nav-close__icon::before,
.nav-close__icon::after {
  display: block;
}

.nav-close__icon::before,
.nav-close__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.45rem;
  height: 2px;
  background: currentColor;
  transform-origin: center;
}

.nav-close__icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-close__icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-overlay__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0.9rem;
  margin-top: 1rem;
}

.nav-search-form {
  margin-bottom: 0.1rem;
}

.nav-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
}

.nav-search-input,
.header-search-input {
  min-height: 3rem;
  border: 1px solid #d5dde8;
  border-radius: 0;
  padding: 0.5rem 0.85rem;
  font-size: clamp(0.95rem, 0.93rem + 0.08vw, 1rem);
  line-height: 1.2;
  background: var(--bg-color);
}

.nav-search-input::placeholder,
.header-search-input::placeholder {
  color: #78869a;
}

.nav-search-input {
  width: 100%;
}

.nav-search-submit,
.header-search-submit,
.header-icon {
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}

.nav-search-submit,
.header-search-submit,
.header-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0;
}

.nav-search-submit::before,
.header-search-toggle::before,
.header-search-submit::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon-search.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../images/icon-search.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.header-icon:hover,
.header-icon:focus-visible,
.nav-search-submit:hover,
.nav-search-submit:focus-visible,
.header-search-submit:hover,
.header-search-submit:focus-visible,
.nav-theme-toggle:hover,
.nav-theme-toggle:focus-visible {
  color: var(--accent-color, #0066cc);
  background: transparent;
}

.nav-list,
.nav-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list--mobile {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.nav-list--mobile .nav-item {
  width: 100%;
  min-width: 0;
}

.nav-list--mobile .nav-item > a,
.nav-list--mobile .submenu-toggle,
.nav-meta-item a {
  border: 0;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-start;
  background: none;
  color: var(--text-color);
  text-decoration: none;
  font-size: clamp(1.4rem, 4.4vw, 2.2rem);
  font-weight: 490;
  line-height: 1.2;
  padding: 0.4rem 0;
  text-align: right;
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  min-width: 0;
}

.nav-list--mobile .nav-item > a,
.nav-list--mobile .submenu-toggle {
  font-size: clamp(1.6rem, 4.4vw, 2.2rem);
}

.nav-list--mobile .submenu {
  margin-top: 0.1rem;
  padding: 0 0 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  min-width: 0;
}

.nav-list--mobile .submenu a {
  color: #617086;
  text-decoration: none;
  font-size: clamp(0.94rem, 0.92rem + 0.08vw, 1rem);
  line-height: 1.28;
}

.nav-meta-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.15rem;
}

.nav-social {
  display: flex;
  justify-content: right;
  padding-top: 0.55rem;
}

.nav-social .social-icons__list {
  gap: 0.95rem;
}

.nav-social .social-icons__link {
  width: 2.1rem;
  height: 2.1rem;
}

.nav-social .social-icons__link svg {
  width: 1.4rem;
  height: 1.4rem;
}

.nav-overlay__spacer {
  flex: 1 1 auto;
  min-height: 0.75rem;
}

.nav-overlay__footer {
  border-top: 1px solid #d9e2ec;
  margin-top: 0.15rem;
  padding-top: 0.8rem;
  padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0));
}

.nav-theme-toggle {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.15rem 0;
  justify-content: flex-end;
  gap: 0.55rem;
  border-radius: 0;
  border-width: 0;
  font-size: clamp(0.98rem, 0.92rem + 0.22vw, 1.1rem);
  font-weight: 470;
  background: transparent;
  text-align: right;
}

.theme-toggle::before,
.nav-theme-toggle__icon {
  content: "";
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask-image: url("../images/icon-darkmode.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../images/icon-darkmode.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.nav-theme-toggle::before {
  content: none;
}

.dark .theme-toggle::before,
.dark .nav-theme-toggle__icon {
  -webkit-mask-image: url("../images/icon-lightmode.svg");
  mask-image: url("../images/icon-lightmode.svg");
}

.site-navigation .nav-item > a:hover,
.site-navigation .submenu-toggle:hover,
.site-navigation .nav-meta-item a:hover {
  color: var(--accent-color, #0066cc);
}

.site-navigation .nav-item > a:focus-visible,
.site-navigation .submenu-toggle:focus-visible,
.site-navigation .nav-meta-item a:focus-visible {
  color: var(--text-color);
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 3px;
}

.site-navigation .nav-item[data-active="true"] > a,
.site-navigation .nav-list a.active,
.site-navigation .submenu a.active,
.site-navigation .nav-meta-item[data-active="true"] > a,
.site-navigation .nav-meta-list a.active {
  color: var(--accent-color, #0066cc) !important;
}

.submenu[hidden] {
  display: none;
}

.header-actions--desktop {
  display: none;
}

@media (min-width: 52.5rem) {
  .site-header-row {
    align-items: center;
  }

  .nav-toggle {
    display: none;
  }

  .site-logo-link--desktop {
    display: inline-flex;
  }

  .site-navigation .nav-panel {
    display: block;
    flex: 1;
    width: 100%;
  }

  .site-navigation .nav-panel[hidden] {
    display: block !important;
  }

  .nav-overlay {
    display: none;
  }

  .nav-desktop-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    width: 100%;
    min-height: 3.5rem;
  }

  .nav-list--desktop {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
    margin-left: auto;
  }

  .nav-list--desktop .nav-item {
    width: auto;
  }

  .nav-list--desktop .nav-item > a,
  .nav-list--desktop .submenu-toggle {
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    color: var(--text-color);
    text-decoration: none;
    font-size: clamp(0.98rem, 0.96rem + 0.08vw, 1.04rem);
    font-weight: 500;
    line-height: 1.2;
    padding: 0.62rem 0;
    width: auto;
  }

  .nav-list--desktop .submenu {
    list-style: none;
    padding: 0.3rem 0 0 0.85rem;
    margin: 0;
  }

  .nav-list--desktop .submenu li {
    padding: 4px 0;
  }

  .site-navigation .nav-item > a:hover,
  .site-navigation .submenu-toggle:hover {
    border-bottom-color: currentColor;
  }

  .site-navigation .nav-item[data-active="true"] > a,
  .site-navigation .nav-list--desktop a.active,
  .site-navigation .nav-list--desktop .submenu a.active {
    border-bottom-color: var(--accent-color, #0066cc);
  }

  .header-actions--desktop {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.35rem;
  }

  .header-search-toggle {
    display: inline-flex;
    position: relative;
  }

  .header-search-form--desktop {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 14rem;
    opacity: 1;
    overflow: hidden;
    transition: max-width 0.2s ease, opacity 0.2s ease, margin-right 0.2s ease;
  }

  .header-search-form--desktop.is-collapsed {
    max-width: 0;
    opacity: 0;
    margin-right: 0;
    pointer-events: none;
  }

  .header-search-toggle[aria-expanded="true"] {
    display: none;
  }

  .header-search-input--desktop {
    width: 10.5rem;
    min-height: 3rem;
    padding: 0.55rem 0.9rem;
    font-size: clamp(0.95rem, 0.93rem + 0.08vw, 1rem);
  }

  .header-search-submit {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
  }
}


/* =============================================================================
   08  Breadcrumbs
   Base = mobile (compact). Full size at --bp-sm (min-width: 40rem).
   ============================================================================= */

/* Mobile: smaller */
.breadcrumbs {
  margin: 0 0 1rem;
  color: var(--muted-color);
  font-size: clamp(0.86rem, 0.8rem + 0.1vw, 1rem);
  line-height: 1.45;
}

.breadcrumbs-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

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

.breadcrumbs-item::after {
  content: "/";
  color: #8d98a8;
  margin: 0 0.35rem;
}

.breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 0.6rem 0.3rem 0.6rem 0.3rem;
}

.breadcrumbs-home-icon {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 0.8;
  padding: 0rem 0.4rem;
  transform: translateY(-0.02em);
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
  border-bottom-color: currentColor;
}

.breadcrumbs-current {
  color: var(--text-color);
  font-weight: 560;
}

/* Wider screens: full breadcrumb size */
@media (min-width: 40rem) {
  .breadcrumbs {
    margin-bottom: 1.15rem;
  }
  .breadcrumbs-item + .breadcrumbs-item::before {
    margin: 0 0.4rem;
  }
}


/* =============================================================================
   09  Article Grid & Teasers
   Grid: 1 col base → 2 col at --bp-sm → 3 col at --bp-lg.
   Typography: mobile-first sizes, scale up at --bp-md and --bp-lg.
   ============================================================================= */

/* Mobile: single column */
.article-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  column-gap: calc(20px + 0.5em);
  row-gap: calc(20px + 1em);
}

/* sm (640px): two columns */
@media (min-width: 40rem) {
  .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* lg (1024px): three columns */
@media (min-width: 64rem) {
  .article-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.article-grid .grid-item {
  display: flex;
  align-items: stretch;
}

.article-grid .grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hide rule dividers between featured article and grid */
.article-grid .grid-item hr,
.main-article + hr {
  display: none;
}

/* Teaser card */
.type-post a {
  text-decoration: none;
  color: inherit;
}

.article-grid .grid-item .type-post {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-bottom: 0.8rem;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.article-grid .grid-item .type-post > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.15rem;
}

.article-grid .grid-item .type-post .entry-header {
  padding: 0;
}

.article-grid .grid-item .type-post .entry-content,
.article-grid .grid-item .type-post .entry-footer {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.article-grid .grid-item .type-post .entry-content {
  flex: 1 1 auto;
}

.article-grid .grid-item .type-post .entry-footer {
  margin-top: auto;
  margin-bottom: 0;
}

/* Animated accent bar at card bottom */
.article-grid .grid-item .type-post::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.05em;
  background: #e8edf3;
  transition: height 0.2s ease, background-color 0.2s ease;
}

.article-grid .grid-item .type-post:hover::after,
.article-grid .grid-item .type-post:focus-within::after {
  height: 0.1em;
  background: var(--accent-color, #0066cc);
}

/* Full-card focus ring */
.article-grid .grid-item .type-post:focus-within {
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 2px;
}

/* Suppress inner-link outline — card-level ring covers it */
.article-grid .grid-item .type-post > a:focus,
.article-grid .grid-item .type-post > a:focus-visible {
  outline: none;
}

/* Zoom image on hover */
.article-grid .grid-item .zoom {
  overflow: hidden;
}

.article-grid .grid-item .zoom img {
  transition: transform 0.25s ease;
  transform: scale(1);
}

.article-grid .grid-item .type-post > a:hover .zoom img,
.article-grid .grid-item .type-post > a:focus .zoom img {
  transform: scale(1.04);
}

/* Entry media */
.entry-media {
  /* Mobile: bleed past container padding */
  margin: 0 -1em;
}

.entry-media img {
  width: 100%;
  display: block;
}

/* sm (640px): restore normal margin */
@media (min-width: 40rem) {
  .entry-media {
    margin-left: 0;
    margin-right: 0;
  }
}

.article-grid .entry-media img {
  aspect-ratio: 16/7;
  object-fit: cover;
}

/* Entry typography — mobile-first */
article a .entry-date {
  color: var(--muted-color);
  font-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  margin-bottom: 8px;
}

.entry-title,
.entry-title a {
  color: var(--accent-color, #0066cc);
  transition: color 0.2s ease;
  margin: 0 0 8px;
}

.entry-title a:hover,
.entry-title a:focus {
  color: color-mix(in srgb, var(--accent-color, #0066cc) 86%, white);
}

article a:hover .entry-title,
article a:focus .entry-title {
  color: var(--accent-aa-focus, var(--accent-color, #0066cc));
}

article a:focus {
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 4px;
}

/* Article grid entry title: fluid scale */
.article-grid .entry-title {
  font-size: clamp(1.3125rem, 1.12rem + 0.95vw, 1.7rem);
  line-height: 1.28;
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Article grid entry content: fluid scale */
.article-grid .entry-content {
  color: var(--text-color);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.68;
}

.article-grid .entry-content p {
  margin-top: 0.4rem;
  margin-bottom: 1.1rem;
}

article .entry-footer {
  font-size: 1em;
}

article .entry-footer .entry-meta {
  margin-bottom: 14px;
}

.entry-footer-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

@media (min-width: 52.5rem) {
  article .entry-footer .entry-meta {
    text-align: right;
  }
  .entry-footer-layout {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* Tag links */
.tag-links {
  display: block;
  text-align: left;
  color: var(--muted-color);
  font-size: clamp(0.9375rem, 0.91rem + 0.08vw, 1rem);
  line-height: 1.55;
  position: relative;
  padding-left: 1.1em;
}

.tag-links a {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
}

.tag-links a:hover,
.tag-links a:focus-visible {
  color: var(--accent-color, #0066cc);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.tag-links a:not(:last-child)::after {
  content: ", ";
}

/* Tag icon before label list */
.tag-links::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 0.82em;
  height: 0.82em;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask-image: url("../images/icon-tag.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../images/icon-tag.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.tag-links--no-icon {
  padding-left: 0;
}

.tag-links--no-icon::before {
  display: none;
}

.tag-icon {
  display: inline-flex;
  width: 0.82em;
  height: 0.82em;
  background-color: currentColor;
  opacity: 0.72;
  -webkit-mask-image: url("../images/icon-tag.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../images/icon-tag.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  vertical-align: middle;
  margin-right: 0.2em;
}

.tag-links a::before {
  content: none;
}

/* Teaser intro — fluid scale */
.teaser-intro {
  margin: 0 0 2rem;
  max-width: 42rem;
  color: var(--text-color);
}

.teaser-intro a:link, .teaser-intro a:visited {
  color: var(--text-color);
  text-decoration: none;
}

.teaser-intro a:hover, .teaser-intro a:focus-within {
	text-decoration: underline;
}

.teaser-intro h1 {
  font-size: clamp(2rem, 1.42rem + 1.8vw, 2.6rem);
  font-variation-settings: "wgth" 800;
  font-weight: 800;
  line-height: 1.15;
  margin: 0;
}


@media (min-width: 52.5rem) {
  .teaser-intro {
    margin: 0 0 4rem;
  }
}

.teaser-intro p {
  margin: 0.45rem 0 0.95rem;
}


/* =============================================================================
   10  Featured Article (.main-article)
   ============================================================================= */

.main-article {
  border: 0;
  border-bottom: 0.08em solid var(--border-color);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0.7rem;
  background: transparent;
}

.main-article:hover,
.main-article:focus-within {
  border-bottom-color: var(--accent-color, #0066cc);
}

.main-article:focus-within {
  outline: 3px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 3px;
}

/* Suppress inner-link outline — article-level ring covers it */
.main-article > a:focus,
.main-article > a:focus-visible {
  outline: none;
}

.main-article .entry-title {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.main-article .entry-content {
  margin-top: 0.45rem;
}


/* =============================================================================
   11  Single Article (Detail View)
   Typography and figure: mobile-first, scale up at --bp-md and --bp-lg.
   ============================================================================= */

.single-article {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;	
  padding: 0;
}

/* Entry title: fluid scale */
.single-article .entry-title {
  font-size: clamp(1.95rem, 1.28rem + 2.1vw, 2.75rem);
  line-height: 1.2;
  margin-top: 0;
}

/* Intro and content: fluid scale */
.single-article .intro {
  font-size: clamp(1.2rem, 1.1rem + 0.42vw, 1.4rem);
  line-height: 1.86;
}

.single-article .entry-content {
  font-size: clamp(1.125rem, 1rem + 0.34vw, 1.25rem);
  line-height: 1.82;
  hyphens: none;
  letter-spacing: 0.002em;
}

.single-article .content-columns,
.single-article .entry-footer {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Cover image: mobile = full-bleed, desktop = contained */
.single-article > figure {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.single-article > figure img {
  width: 100%;
}

@media (min-width: 52.5rem) {
  .single-article > figure {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .single-article > figure img {
    width: auto;
  }
}

/* No border-radius on article images */
img,
figure,
.entry-media,
.entry-media img,
.single-article figure,
.single-article figure img {
  border-radius: 0;
}

/* Content links */
.entry-content a,
.intro a,
.entry-summary a,
.footer-copy a {
  color: var(--accent-color, #0066cc);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
  overflow-wrap: anywhere;
}

/* Prevent long legal/source URLs and embeds from pushing viewport width */
.site-main .container {
  overflow-wrap: anywhere;
}

.site-main .container iframe {
  max-width: 100%;
  width: 100%;
}

/* Normalize legacy embed iframes with fixed inline pixel heights */
.entry-content iframe[src*="slideshare.net"],
.blocks-content iframe[src*="slideshare.net"],
.layout-column iframe[src*="slideshare.net"] {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
}

.entry-content a:hover,
.intro a:hover,
.entry-summary a:hover,
.footer-copy a:hover {
  color: color-mix(in srgb, var(--accent-color, #0066cc) 84%, black);
}

/* Inline term popovers (KirbyTag: term) */
.term-popover {
  position: relative;
  display: inline;
}

.term-popover__trigger {
  appearance: none;
  border: 0;
  background: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 0.14em;
  cursor: help;
}

.term-popover__trigger:hover {
  color: var(--accent-color, #0066cc);
}

.term-popover__trigger:focus-visible {
  outline: 2px solid var(--accent-aa-focus, var(--accent-color, #0066cc));
  outline-offset: 2px;
}

.term-popover__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 30;
  width: max-content;
  max-width: min(36ch, 80vw);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-color);
  line-height: 1.5;
  font-size: 0.95em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28), 0 0 10px rgba(0, 0, 0, 0.35);
}

.term-popover.term-popover--below .term-popover__panel {
  top: calc(100% + 0.35rem);
  bottom: auto;
}

.single-article .entry-content p,
.single-article .entry-content ul,
.single-article .entry-content ol {
  margin-bottom: 1.05em;
}

.single-article .entry-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.single-article .entry-meta {
  color: var(--muted-color);
  font-size: clamp(0.9375rem, 0.91rem + 0.08vw, 1rem);
}

.single-article .entry-meta a {
  color: var(--accent-color, #0066cc);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color, #0066cc) 65%, var(--border-color));
}

/* Share buttons */
.share-buttons {
  margin: 1.35rem 0;
  text-align: center;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.share-buttons .share-button {
  margin-bottom: 0;
}

.share-buttons .button {
  border: 1px solid var(--border-color);
  background: var(--bg-color);
  color: var(--text-color);
  padding: 0.45rem 0.72rem;
  text-decoration: none;
}

.share-buttons .button:hover,
.share-buttons .button:focus {
  border-color: var(--accent-color, #0066cc);
  color: var(--accent-color, #0066cc);
}

/* Back to top */
.controls {
  margin: 42px 0 0;
  text-align: center;
}

.controls a {
  color: var(--text-color);
  font-size: clamp(1rem, 0.84rem + 0.5vw, 1.25rem);
  padding: 12px 24px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  min-height: 44px;
}

.controls a:hover,
.controls a:focus {
  color: var(--accent-color, #0066cc);
  border-color: var(--accent-color, #0066cc);
}

.control-icon {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  position: relative;
}

.go-top .control-icon {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 0;
  background: url("../images/smilie-top-icon.svg") center / contain no-repeat;
}

.go-top .control-icon::after {
  content: none;
}

.loadmore .control-icon {
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 0;
  background: url("../images/smilie-load-more-icon.svg") center / contain no-repeat;
}

.loadmore .control-icon::after {
  content: none;
}

/* Author page */
.author-bio {
  text-align: center;
}

.author-bio .author-avatar {
  border-radius: 50%;
  box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.5);
  margin-top: 1.35rem;
}

.author-content {
  max-width: 720px;
  margin: 0 auto;
}


/* =============================================================================
   12  Search Page
   Base = mobile (stacked). Side-by-side at --bp-sm (min-width: 40rem).
   ============================================================================= */

/* Mobile: stacked layout */
.search-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  margin-bottom: 1.1rem;
}

.search-page-form {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.search-page-input {
  flex: 1;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: var(--bg-color);
}

/* sm (640px): side-by-side layout */
@media (min-width: 40rem) {
  .search-page-header {
    align-items: center;
    justify-content: space-between;
  }
  .search-page-form {
    width: auto;
  }
  .search-page-input {
    width: min(24rem, 72vw);
  }
}

.search-page-submit {
  min-height: 2.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background: var(--surface-color);
  color: var(--text-color);
  cursor: pointer;
}

.search-results-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-result-item {
  padding: 0 0 1rem;
  margin: 0 0 1rem;
  border-bottom: 1px dashed var(--border-color);
}

.search-result-title {
  margin: 0 0 0.2rem;
  font-size: clamp(1.25rem, 1.16rem + 0.34vw, 1.4rem);
  line-height: 1.32;
}

.search-result-title a {
  color: inherit;
  text-decoration: none;
}

.search-result-title a:hover,
.search-result-title a:focus-visible {
  color: var(--accent-color, #0066cc);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.search-result-meta,
.search-result-labels,
.search-results-empty {
  margin: 0;
  color: var(--muted-color);
}

.search-result-labels {
  margin-top: 0.18rem;
}


/* =============================================================================
   13  Contact Form
   ============================================================================= */

.contact-form {
  margin-top: 1.5rem;
  max-width: 36rem;
}

.contact-form .form-group {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.form-label-optional {
  font-weight: 400;
  color: var(--muted-color);
  font-size: 0.9em;
}

.contact-form .input {
  border: 2px solid var(--border-color);
  border-radius: 0.2rem;
  padding: 0.55rem 0.85rem;
  width: 100%;
  min-height: 2.75rem;
  font-size: inherit;
  background: var(--bg-color);
  transition: border-color 0.2s ease;
}

.contact-form .input:focus {
  outline: 3px solid var(--accent-color, #0066cc);
  outline-offset: 2px;
  border-color: var(--accent-color, #0066cc);
}

.contact-form textarea.input {
  min-height: 8rem;
  resize: vertical;
}

/* Radio group */
.form-group--radio fieldset,
fieldset.form-group--radio {
  border: 0;
  padding: 0;
  margin: 0 0 1.25rem;
}

fieldset.form-group--radio legend {
  font-weight: 500;
  margin-bottom: 0.55rem;
  padding: 0;
}

.form-radio-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.form-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-weight: 400;
}

.form-radio-label input[type="radio"] {
  accent-color: var(--accent-color, #0066cc);
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  cursor: pointer;
}

/* Honeypot — visually and semantically hidden */
.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form button[type="submit"] {
  margin-top: 0.5rem;
  border-top-left-radius: 15px 245px;
  border-top-right-radius: 265px 16px;
  border-bottom-right-radius: 18px 195px;
  border-bottom-left-radius: 205px 15px;
  border: 4px #000000 solid !important;
  color: #000000 !important;
  font-weight: 800;
  text-transform: uppercase;
  background-color: rgb(255,230,0)!important;
}

.contact-form button:hover {
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

.form-hint {
  margin: 0 0 1rem;
  color: var(--muted-color);
  font-size: clamp(0.875rem, 0.85rem + 0.08vw, 0.925rem);
}

/* Success message */
.contact-success {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent-color, #0066cc);
  background: color-mix(in srgb, var(--accent-color, #0066cc) 6%, white);
}

.alert {
  border: 2px solid #b42318;
  background: #fdecea;
  color: #341a17;
  padding: 12px 16px;
  margin-bottom: 16px;
}


/* =============================================================================
   14  Site Footer
   ============================================================================= */

.site-footer {
  clear: both;
  font-size: 1em;
  margin-top: 48px;
  padding: 2em 0 3em;
  background: none;
}

.footer-layout {
  display: grid;
  gap: 16px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

.footer-nav a,
.site-footer a {
  color: var(--accent-color, #0066cc);
  text-decoration: none;
}

.footer-nav a:hover,
.site-footer a:hover {
  color: color-mix(in srgb, var(--accent-color, #0066cc) 80%, black);
  text-decoration: underline;
}

.footer-social {
  text-align: center;
}

@media (min-width: 52.5rem) {
  .site-footer {
    text-align: left;
  }
  .footer-layout {
    grid-template-columns: 1fr auto auto;
    align-items: center;
  }
  .footer-nav {
    justify-content: flex-end;
  }
  .footer-social {
    text-align: right;
  }
}


/* =============================================================================
   15  Shared Components
   ============================================================================= */

/* Generic button / link-button */
.button,
.btn {
  font-size: inherit;
  margin-bottom: 0.25em;
  padding: 0.5em 1em;
  border: 1px solid var(--text-color);
  background: transparent;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.button:hover,
.button:focus,
.btn:hover,
.btn:focus {
  background: var(--text-color);
  color: var(--bg-color);
}

.dark .button,
.dark .btn {
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .button:hover,
.dark .button:focus,
.dark .btn:hover,
.dark .btn:focus {
  background: var(--border-color);
  color: var(--text-color);
}

/* Button icon placeholder */
.button-icon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: currentColor;
}

/*
 * Accent-colored submit buttons (contact form, search).
 * Other <button> elements override background: transparent individually.
 */
input[type="submit"],
button[type="submit"]:not(.nav-search-submit):not(.header-search-submit) {
  background-color: var(--accent-color, #0066cc);
  border-color: var(--accent-color, #0066cc);
  color: var(--accent-aa-on-fill, white);
  cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:not(.nav-search-submit):not(.header-search-submit):hover {
  background-color: color-mix(in srgb, var(--accent-color, #0066cc) 86%, white);
  border-color:     color-mix(in srgb, var(--accent-color, #0066cc) 86%, white);
}


/* =============================================================================
   16  Blocks & Layout Field
   Styles for Kirby 5 blocks editor output (.blocks-content) and
   layout field grid (.layout-row / .layout-columns / .layout-column).
   ============================================================================= */

/* --- Grid structure --- */

.layout-row {
  margin-block: 2rem;
}

/* First row: no top gap */
.layout-row:first-child {
  margin-top: 0;
}

/* Extra spacing between rows on layout pages */
.template-page-layout .layout-row + .layout-row {
  margin-top: 2.5rem;
}

.layout-columns {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap, 1.5rem);
}

/* Mobile: all columns full-width */
.layout-column {
  grid-column: span 12;
}

/* md (840px): respect --span variable set by PHP template */
@media (min-width: 52.5rem) {
  .layout-column {
    grid-column: span var(--span, 12);
  }
}

/* --- Block spacing --- */

.blocks-content > *,
.layout-column > * {
  margin-block: 0 1rem;
}

.blocks-content img,
.layout-column img {
  max-width: 100%;
  height: auto;
}

.blocks-content figure,
.layout-column figure {
  margin: 0 0 1.5rem;
}

/* --- Code block --- */

.blocks-content pre,
.layout-column pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--code-bg, #f5f5f5);
  border-radius: 4px;
}

/* --- Blockquote ---
 * Suppresses the global ::before (big quote character + 63px padding)
 * and replaces with a left border style.
 * Kirby quote block outputs: <blockquote>text<footer>citation</footer></blockquote>
 */
.blocks-content blockquote::before,
.layout-column blockquote::before {
  content: none;
}

.blocks-content blockquote,
.layout-column blockquote {
  padding: 1rem 0 1rem 1.25rem;
  margin: 0 0 1.35rem;
  border: none;
  border-inline-start: 3px solid var(--accent-color, #0066cc);
  font-style: normal;
}

.blocks-content blockquote p,
.layout-column blockquote p {
  font-style: italic;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.blocks-content blockquote p:last-child,
.layout-column blockquote p:last-child {
  margin-bottom: 0;
}

/* Kirby uses <footer> inside <blockquote> for citation, not <cite> */
.blocks-content blockquote > footer,
.layout-column blockquote > footer {
  color: #5a6678;
  font-size: clamp(0.9rem, 0.88rem + 0.08vw, 0.95rem);
  font-style: normal;
  font-weight: 480;
  margin-top: 0.65rem;
  padding: 0;
  background: transparent;
  border: none;
}

.blocks-content blockquote > footer::before,
.layout-column blockquote > footer::before {
  content: "\2014\00a0";
}

/* --- Gallery block ---
 * Kirby outputs: <figure><ul><li><img></li>…</ul><figcaption></figcaption></figure>
 * Mobile: single column. sm (640px): auto-fill grid.
 */
.blocks-content figure > ul,
.layout-column figure > ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 40rem) {
  .blocks-content figure > ul,
  .layout-column figure > ul {
    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
    gap: calc(20px + 0.5em);
  }
}

.blocks-content figure > ul > li,
.layout-column figure > ul > li {
  margin: 0;
  padding: 0;
}

.blocks-content figure > ul > li > img,
.layout-column figure > ul > li > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Single-image galleries: preserve intrinsic ratio */
.blocks-content figure > ul > li:only-child > img,
.layout-column figure > ul > li:only-child > img {
  height: auto;
  object-fit: contain;
}

/* --- Video block ---
 * Kirby outputs: <figure><iframe …></figure> or <figure><video …></figure>
 * The global rule (embed, iframe…) sets height: auto which collapses iframes.
 * Override with aspect-ratio here.
 */
.blocks-content figure > iframe,
.layout-column figure > iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Embedded iframes (e.g. SlideShare/Matomo): give a visible surface/frame */
.site-main .container figure:has(> iframe) {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  padding: 0.5rem;
}

.site-main .container figure:has(> iframe) > iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  border: 0;
}

.blocks-content figure > video,
.layout-column figure > video {
  width: 100%;
  height: auto;
}

/* --- Image block ---
 * Kirby outputs: <figure data-ratio="16/9" data-crop="true"><img></figure>
 */
.blocks-content figure[data-crop="true"] > img,
.layout-column figure[data-crop="true"] > img {
  object-fit: cover;
  width: 100%;
}

.blocks-content figure[data-ratio] > img,
.layout-column figure[data-ratio] > img {
  width: 100%;
}

.blocks-content figure[data-ratio="auto"] > img,
.layout-column figure[data-ratio="auto"] > img {
  aspect-ratio: auto;
}

.blocks-content figure[data-ratio="1/1"] > img,
.layout-column figure[data-ratio="1/1"] > img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.blocks-content figure[data-ratio="3/2"] > img,
.layout-column figure[data-ratio="3/2"] > img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blocks-content figure[data-ratio="4/3"] > img,
.layout-column figure[data-ratio="4/3"] > img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.blocks-content figure[data-ratio="16/9"] > img,
.layout-column figure[data-ratio="16/9"] > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* --- figcaption --- */

.blocks-content figcaption,
.layout-column figcaption {
  color: #777;
  font-size: clamp(0.8125rem, 0.79rem + 0.08vw, 0.875rem);
  margin-top: 0.5rem;
  text-align: center;
}

/* --- Links inside blocks --- */

.blocks-content a,
.layout-column a {
  color: var(--accent-color, #0066cc);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blocks-content a:hover,
.layout-column a:hover {
  color: color-mix(in srgb, var(--accent-color, #0066cc) 86%, black);
}

/* --- Cover media (.cover-media) ---
 * Wraps both image and video covers across all templates.
 * .page-cover-image is an additional modifier class for page-blocks/page-layout.
 */
.cover-media {
  margin: 0 0 1.6rem 0;
  padding: 0;
  line-height: 0;
  position: relative;
}

/* Shared rules for both img and video inside cover-media */
.cover-media img,
.cover-media video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/* Video-specific: poster sits behind video, same dimensions */
.cover-media__poster {
  display: none; /* hidden by default; shown via reduced-motion media query */
}

.cover-media__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

/* prefers-reduced-motion: hide video, show poster still-image instead */
/* Note: .cover-media prefix needed to outweigh .cover-media video { display: block } (0,1,1) */
@media (prefers-reduced-motion: reduce) {
  .cover-media .cover-media__video {
    display: none;
  }
  .cover-media .cover-media__poster {
    display: block;
  }
}

/* page-blocks / page-layout modifier */
.page-cover-image {
  margin: 0 0 2rem;
}


/* =============================================================================
   17  Dark Mode
   Applied when JS toggles .dark on <html>.
   ============================================================================= */

.dark {
  color-scheme: dark;
  --text-color:   #e1e7f0;
  --muted-color:  #9aaabf;
  --bg-color:     #10131a;
  --border-color: #252c3a;
  --link-color:   #82b4ff;
  --link-hover:   #aacfff;
  --code-bg:       #1a2030;
  --surface-color: #1a2030; /* elevated surface: inputs, cards, code blocks */
}

/* --- Base --- */

/* Headings: use --text-color in dark mode.
 * h1 excludes .entry-title (accent-colored) and .teaser-intro h1 (handled below).
 * p: excluded here to avoid overriding component-specific colours via low-specificity
 *    tag+class selector (.dark p 0,1,1 would beat class-only selectors 0,1,0). */
.dark h1:not(.entry-title),
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: var(--text-color);
}


.dark a {
  color: var(--link-color);
}

.dark a:hover,
.dark a:focus {
  color: var(--link-hover);
}

/* Dark-mode link behavior: match global accent link tokens in content areas */
.dark .entry-content a,
.dark .intro a,
.dark .entry-summary a,
.dark .blocks-content a,
.dark .layout-column a,
.dark .tag-links a,
.dark .single-article .entry-meta a,
.dark .footer-copy a {
  color: var(--link-color);
}

.dark .entry-content a:hover,
.dark .entry-content a:focus,
.dark .intro a:hover,
.dark .intro a:focus,
.dark .entry-summary a:hover,
.dark .entry-summary a:focus,
.dark .blocks-content a:hover,
.dark .blocks-content a:focus,
.dark .layout-column a:hover,
.dark .layout-column a:focus,
.dark .tag-links a:hover,
.dark .tag-links a:focus,
.dark .single-article .entry-meta a:hover,
.dark .single-article .entry-meta a:focus,
.dark .footer-copy a:hover,
.dark .footer-copy a:focus {
  color: var(--link-hover);
}

.dark hr {
  border-top-color: var(--border-color);
}

.dark pre {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: #c8d8ee;
}

.dark table {
  background: var(--surface-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark table th {
  background: var(--border-color);
}

.dark table th,
.dark table td {
  border-color: var(--border-color);
}

.dark blockquote {
  color: #c0cad8;
}

/* --- Header --- */

.dark .skip-link {
  background: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark .site-logo {
  filter: invert(1);
}

/* --- Navigation --- */

.dark .site-navigation {
  border-color: var(--border-color);
}

.dark .nav-toggle .icon-bar {
  background-color: var(--text-color);
}

.dark .nav-item a,
.dark .submenu-toggle {
  color: var(--text-color);
}

.dark .nav-overlay {
  background: rgba(16, 19, 26, 0.96);
}

.dark .nav-overlay__footer {
  border-top-color: var(--border-color);
}

.dark .nav-search-input,
.dark .header-search-input {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .nav-search-input::placeholder,
.dark .header-search-input::placeholder {
  color: #90a0b6;
}

.dark .nav-meta-item a,
.dark .nav-list--mobile .submenu a {
  color: #a9b6c8;
}

/* --- Breadcrumbs --- */

.dark .breadcrumbs {
  color: #8394a9;
}

.dark .breadcrumbs-current {
  color: var(--text-color);
}

/* --- Article grid --- */

.dark .article-grid .type-post {
  background: transparent;
}

.dark .article-grid .entry-title {
  color: var(--accent-color, #82b4ff);
}

.dark .article-grid .entry-content {
  color: #c0cad8;
}

/* Accent bar at card bottom — needs explicit dark value (light #e8edf3 is visible on dark) */
.dark .article-grid .grid-item .type-post::after {
  background: #2a3347;
}

.dark .article-grid .grid-item .type-post:hover::after,
.dark .article-grid .grid-item .type-post:focus-within::after {
  background: var(--accent-color, #82b4ff);
}

/* Entry date — #333333 is near-black, invisible on dark backgrounds */
.dark article a .entry-date {
  color: var(--muted-color);
}

/* Teaser intro (home / articles listing) — #324054 is near-black on dark */
.dark .teaser-intro {
  color: var(--text-color);
}

/* --- Featured article --- */

.dark .main-article {
  background: transparent;
  border-bottom-color: var(--border-color);
}

/* --- Single article --- */

.dark .single-article .entry-footer {
  border-top-color: var(--border-color);
}

.dark .single-article .entry-meta {
  color: var(--muted-color);
}

.dark .single-article .entry-meta a {
  border-bottom-color: color-mix(in srgb, var(--accent-color, #82b4ff) 50%, var(--border-color));
}

/* figcaption outside .blocks-content (e.g. article cover images) */
.dark figcaption {
  color: var(--muted-color);
}

/* --- Share buttons --- */

.dark .share-buttons .button {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* --- Controls (back to top) --- */

.dark .controls a {
  color: var(--text-color);
  border-color: var(--border-color);
}

.dark .controls a:hover,
.dark .controls a:focus {
  color: var(--link-color);
  border-color: var(--link-color);
}

/* --- Tag links --- */

.dark .tag-links {
  color: #8394a9;
}

/* --- Footer --- */

.dark .site-footer {
  border-top-color: var(--border-color);
  background: linear-gradient(180deg, #10131a 0%, #0d1016 100%);
}

.dark .footer-nav a,
.dark .site-footer a {
  color: var(--link-color);
}

/* --- Contact --- */

.dark .contact-form .input {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

.dark .form-label-optional,
.dark .form-hint {
  color: var(--muted-color);
}

.dark .contact-success {
  background: color-mix(in srgb, var(--accent-color, #82b4ff) 8%, var(--bg-color));
}

.dark .alert {
  background: #2a0f0e;
  border-color: #c04040;
  color: #f4c0c0;
}

/* --- Search --- */

.dark .search-result-item {
  border-bottom-color: var(--border-color);
}

.dark .search-result-meta,
.dark .search-result-labels,
.dark .search-results-empty {
  color: #8394a9;
}

.dark .search-page-input,
.dark .search-page-submit {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: var(--text-color);
}

/* --- Blocks & Layout Field --- */

.dark .blocks-content figcaption,
.dark .layout-column figcaption {
  color: #8394a9;
}

.dark .blocks-content blockquote,
.dark .layout-column blockquote {
  border-inline-start-color: var(--accent-color, #82b4ff);
  color: #c0cad8;
}

.dark .blocks-content blockquote > footer,
.dark .layout-column blockquote > footer {
  color: #8394a9;
}

/* .dark pre already covers all pre elements — this rule is redundant but kept
   for specificity clarity in block/layout contexts */
.dark .blocks-content pre,
.dark .layout-column pre {
  background: var(--surface-color);
  border-color: var(--border-color);
  color: #c8d8ee;
}

/* Gallery images: subtle border in dark mode */
.dark .blocks-content figure > ul > li > img,
.dark .layout-column figure > ul > li > img {
  border: 1px solid var(--border-color);
}

/* Video iframe: subtle border in dark mode */
.dark .blocks-content figure > iframe,
.dark .layout-column figure > iframe {
  border: 1px solid var(--border-color);
}

.dark .site-main .container figure:has(> iframe) {
  background: color-mix(in srgb, var(--surface-color) 84%, black);
  border-color: var(--border-color);
}


/* Cover media */
.dark .cover-media img,
.dark .cover-media video {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}