/*
Theme Name: Didgeem
Theme URI: https://www.didgeem.nl/
Author: Didgeem
Author URI: https://www.didgeem.nl/
Description: Warme, aardse theme voor Didgeem — enthousiaste didgeridoo performer. Ingebouwde licht/donker-schakelaar, geen externe bestanden, geen build-stap. Het bijbehorende contactformulier met spambeveiliging zit in de plugin "Didgeem Contact".
Version: 1.1.1
Requires at least: 5.9
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: didgeem
Tags: one-column, two-columns, custom-colors, custom-menu, custom-logo, editor-style, featured-images, translation-ready, block-styles, wide-blocks, threaded-comments, rtl-language-support
*/

/* ==========================================================================
   Didgeem — stylesheet
   --------------------------------------------------------------------------
   One file, no build step, no frameworks. Edit the variables below to
   restyle the whole site. Everything else is standard CSS.

   Sections:
     1.  Design tokens (colours, type, spacing)
     2.  Reset
     3.  Typography
     4.  Layout primitives
     5.  Header + navigation
     6.  Hero
     7.  Content blocks
     8.  Cards
     9.  Forms
    10.  Footer
    11.  Utilities
    12.  Responsive
    13.  WordPress core classes
    14.  Block editor output
    15.  Print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   THEMES
   ------
   The site has two themes: light and dark. The `data-theme` attribute on
   <html> decides which one is active, and it wins over the visitor's
   operating-system setting — that is what makes the toggle in the header
   work.

     <html data-theme="light">   always light
     <html data-theme="dark">    always dark
     <html>                      follows the OS setting

   The third state is the default, before any choice has been made. Once the
   visitor uses the toggle, the inline script in functions.php writes the
   choice to localStorage and sets the attribute on every page from then on.

   COLOUR VALUES LIVE IN THIS ONE BLOCK. Change a colour here and it changes
   everywhere on the site.
   ========================================================================== */

/* --- Shared values: type, spacing, radii. Never change between themes. --- */
:root {
  /* --- Typography --- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  --step--1: clamp(0.84rem, 0.80rem + 0.20vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.56rem, 1.35rem + 1.05vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.55rem + 2.00vw, 2.90rem);
  --step-4:  clamp(2.44rem, 1.70rem + 3.70vw, 4.10rem);

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-body:  1.70;

  /* --- Spacing --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;

  /* --- Misc --- */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --wrap:        68rem;
  --wrap-narrow: 44rem;
}


/* --------------------------------------------------------------------------
   Colour values

   Both of these blocks hold exactly the same list of variables. To start
   with, they are written as a shared set (light) plus a dark override, so
   the dark theme only has to carry the values that actually differ.

   IMPORTANT: because :root and [data-theme="dark"] have the same
   specificity, the dark block must come AFTER the light one. Keep this
   order.
   -------------------------------------------------------------------------- */

/* Light — the default. Also applies when the OS asks for dark but the
   visitor has explicitly chosen light. */
:root,
[data-theme="light"] {
  --ochre:        #c8862b;   /* primary accent, warm golden earth   */
  --ochre-dark:   #9d6717;   /* hover / pressed                     */
  --ochre-soft:   #e8c88a;   /* tinted surfaces                     */
  --rust:         #a8502c;   /* secondary accent, red desert earth  */
  --olive:        #6b6b3f;   /* tertiary, subtle labels             */

  --charcoal:     #241f1a;   /* near-black text, warm undertone     */
  --bark:         #4a3f34;   /* secondary text                      */
  --stone:        #7d7268;   /* muted text, captions                */

  --sand:         #f5efe4;   /* page background                     */
  --sand-deep:    #ece2d2;   /* alternating section background      */
  --paper:        #fffdf9;   /* card surfaces                       */
  --line:         #ddd0bc;   /* hairline borders                    */
  --line-strong:  #c8b79c;

  --shadow-sm: 0 1px 2px rgba(36, 31, 26, 0.06),
               0 2px 8px rgba(36, 31, 26, 0.05);
  --shadow-md: 0 2px 6px rgba(36, 31, 26, 0.07),
               0 12px 32px rgba(36, 31, 26, 0.09);

  /* The footer is deliberately the same charcoal in both themes, so this
     one is a theme value rather than a fixed colour. */
  --footer-bg:   #241f1a;
}

[data-theme="dark"] {
  --ochre:       #e0a34a;
  --ochre-dark:  #f0b869;
  --ochre-soft:  #3a2d1a;
  --rust:        #d4754e;
  --olive:       #a3a36a;

  --charcoal:    #f3ece1;
  --bark:        #d6cab9;
  --stone:       #a2968a;

  --sand:        #1a1613;
  --sand-deep:   #221d19;
  --paper:       #262019;
  --line:        #3d342b;
  --line-strong: #52463a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45),
               0 12px 32px rgba(0, 0, 0, 0.5);

  --footer-bg:   #100d0b;
}

/* Follow the operating system, but only when the visitor has not made an
   explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --ochre:       #e0a34a;
    --ochre-dark:  #f0b869;
    --ochre-soft:  #3a2d1a;
    --rust:        #d4754e;
    --olive:       #a3a36a;

    --charcoal:    #f3ece1;
    --bark:        #d6cab9;
    --stone:       #a2968a;

    --sand:        #1a1613;
    --sand-deep:   #221d19;
    --paper:       #262019;
    --line:        #3d342b;
    --line-strong: #52463a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45),
                 0 12px 32px rgba(0, 0, 0, 0.5);

    --footer-bg:   #100d0b;
  }
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--sand);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select { font: inherit; color: inherit; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

p + p,
p + ul,
p + ol,
ul + p,
ol + p { margin-top: var(--space-md); }

a {
  color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 140ms ease;
}

a:hover { color: var(--ochre-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

strong { font-weight: 650; }

ul, ol { padding-left: 1.25em; }
li + li { margin-top: var(--space-xs); }

blockquote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--bark);
  border-left: 3px solid var(--ochre);
  padding-left: var(--space-md);
  margin-block: var(--space-lg);
}

.text-center blockquote {
  border-left: 0;
  border-top: 3px solid var(--ochre);
  padding-left: 0;
  padding-top: var(--space-md);
  margin-inline: auto;
  max-width: 38rem;
}


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--deep { background-color: var(--sand-deep); }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--charcoal);
  color: var(--sand);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
  color: var(--sand);
}

/* Small uppercase label used above headings */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre-dark);
  margin-bottom: var(--space-sm);
}

.section__head {
  max-width: 40rem;
  margin-bottom: var(--space-xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bark);
}

/* Decorative rule evoking a didgeridoo / spear shape */
.rule {
  width: 4.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--ochre), var(--rust));
  border-radius: 3px;
  margin-block: var(--space-md);
  border: 0;
}

.rule--center { margin-inline: auto; }


/* ==========================================================================
   5. HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--sand) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--charcoal);
  order: 1;
}

.brand:hover { color: var(--charcoal); }

.brand__mark {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  stroke: currentColor;
}

/* The mark keeps its own two-tone palette so it reads the same on both
   themes; the theme-aware parts are set inline in header.php. */
.brand__mark .mark-ring  { stroke: var(--ochre); }
.brand__mark .mark-wave1 { stroke: var(--rust); }
.brand__mark .mark-wave2 { stroke: var(--ochre); }

.brand__text { display: flex; flex-direction: column; }

.brand__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.brand__tagline {
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--stone);
  line-height: 1.3;
}

/* --- Main nav ---
   The nav holds the links and, on narrow screens, the menu button. The
   theme toggle sits beside it in .header-tools, not inside it. */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  order: 1;
}

.nav__list {
  display: flex;
  align-items: center;
  /* Tightens on narrower desktops so the five items stay on one line. */
  gap: clamp(0.75rem, 1.5vw, 1.75rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__list li { margin: 0; }

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-xs);
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--bark);
  text-decoration: none;
  letter-spacing: 0.01em;
  /* "Het instrument" must never break over two lines. */
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ochre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.nav__link:hover { color: var(--charcoal); }
.nav__link:hover::after { transform: scaleX(1); }

/* WordPress marks the current page with .current-menu-item (and related
   classes) rather than our own aria-current, so cover both. */
.nav__link[aria-current="page"],
.current-menu-item > .nav__link,
.current_page_item > .nav__link,
.current-menu-ancestor > .nav__link {
  color: var(--charcoal);
  font-weight: 650;
}

.nav__link[aria-current="page"]::after,
.current-menu-item > .nav__link::after,
.current_page_item > .nav__link::after,
.current-menu-ancestor > .nav__link::after { transform: scaleX(1); }

/* WordPress wraps every menu item in a <ul><li> for submenus. We do not use
   dropdowns, but keep a nested list from breaking the row if one appears. */
.nav__list .sub-menu {
  list-style: none;
  padding-left: var(--space-md);
}

/* --- Mobile toggle --- */
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-xs);
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  color: var(--charcoal);
  font-size: 0.9rem;
  font-weight: 550;
}

.nav__toggle:hover { border-color: var(--ochre); }

.nav__toggle-bars {
  position: relative;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 200ms ease, top 200ms ease;
}

.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after  { top: 6px; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { top: 0; transform: rotate(-45deg); }


/* --- Theme toggle (light / dark) -----------------------------------------
   A single button showing the theme it will switch TO: a sun while the dark
   theme is active, a moon while the light one is. That is the convention
   people expect, and it means the label never has to say "currently".
   ------------------------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  flex: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--bark);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease,
              background-color 180ms ease;
}

.theme-toggle:hover {
  color: var(--ochre-dark);
  border-color: var(--ochre);
  background-color: color-mix(in srgb, var(--ochre) 10%, transparent);
}

.theme-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Swap which icon is visible. The attribute lives on <html>, so the button
   never needs its own state and cannot drift out of sync with the theme. */
.theme-toggle .theme-toggle__sun { display: none; }
.theme-toggle .theme-toggle__moon { display: block; }

[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: none; }

/* When no explicit choice has been made yet the theme follows the OS, so
   the button has to follow the OS too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .theme-toggle__sun { display: block; }
  :root:not([data-theme]) .theme-toggle .theme-toggle__moon { display: none; }
}

/* Groups what sits at the right end of the header: on wide screens the nav
   links and then the theme toggle; on narrow screens the menu button and
   then the theme toggle. Either way the toggle ends up in the far right
   corner, on the same row as the logo.

   order: 2 (with .brand at order 1) keeps it last even though it comes
   before the nav in the markup. */
.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  order: 2;
}


/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--sand-deep);
  background-image:
    radial-gradient(ellipse 80% 60% at 78% 22%, rgba(200, 134, 43, 0.20), transparent 62%),
    radial-gradient(ellipse 70% 55% at 12% 88%, rgba(168, 80, 44, 0.14), transparent 60%);
  border-bottom: 1px solid var(--line);
}

/* Faint concentric "sound rings" — drawn in CSS, no image needed */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-radial-gradient(circle at 82% 30%,
      transparent 0 46px,
      rgba(200, 134, 43, 0.13) 46px 47px,
      transparent 47px 96px);
  opacity: 0.85;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-3xl);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero__title {
  font-size: var(--step-4);
  line-height: 1.05;
  margin-bottom: var(--space-md);
}

.hero__title em {
  display: block;
  font-style: normal;
  color: var(--rust);
}

.hero__lede {
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--bark);
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* Didgeridoo illustration */
.hero__art {
  max-width: 22rem;
  margin-inline: auto;
  width: 100%;
}

.hero__art svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(36, 31, 26, 0.16));
}

/* Compact hero used on inner pages */
.page-head {
  position: relative;
  overflow: hidden;
  background-color: var(--sand-deep);
  background-image:
    radial-gradient(ellipse 70% 80% at 85% 10%, rgba(200, 134, 43, 0.18), transparent 65%);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-xl);
}

.page-head__inner { position: relative; z-index: 1; }

.page-head h1 {
  font-size: var(--step-3);
  margin-bottom: var(--space-sm);
}

.page-head p {
  color: var(--bark);
  max-width: 42rem;
}

/* Breadcrumb */
.crumbs {
  font-size: var(--step--1);
  color: var(--stone);
  margin-bottom: var(--space-md);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.crumbs li { margin: 0; }

.crumbs li + li::before {
  content: "/";
  margin-right: var(--space-xs);
  color: var(--line-strong);
}

.crumbs a { color: var(--stone); text-decoration: none; }
.crumbs a:hover { color: var(--ochre-dark); text-decoration: underline; }


/* ==========================================================================
   7. CONTENT BLOCKS
   ========================================================================== */

/* Two-column split: text beside a visual / aside */
.split {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

.prose > * + * { margin-top: var(--space-md); }

.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); }
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }

/* Pulled-out fact panel */
.panel {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

.panel__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-bottom: var(--space-md);
}

/* Definition-style list for facts */
.facts { list-style: none; padding: 0; margin: 0; }

.facts li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-bottom: 1px dashed var(--line);
  font-size: var(--step--1);
}

.facts li:last-child { border-bottom: 0; }
.facts li + li { margin-top: 0; }

.facts dt,
.facts .facts__key {
  color: var(--stone);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 600;
}

.facts .facts__val { text-align: right; color: var(--charcoal); }


/* ==========================================================================
   8. CARDS
   ========================================================================== */

.card-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms ease, box-shadow 200ms ease,
              border-color 200ms ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--ochre-soft);
}

.card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ochre);
  margin-bottom: var(--space-2xs);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
}

.card__text {
  color: var(--bark);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  flex-grow: 1;
}

.card__link {
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--rust);
  align-self: flex-start;
}

.card__link::after { content: " \2192"; }
.card__link:hover { text-decoration: underline; }


/* ==========================================================================
   9. BUTTONS + FORMS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, transform 180ms ease;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background-color: var(--ochre);
  color: #241f1a;
  border-color: var(--ochre);
}

.btn--primary:hover {
  background-color: var(--ochre-dark);
  border-color: var(--ochre-dark);
  color: #241f1a;
}

.btn--ghost {
  background-color: transparent;
  color: var(--charcoal);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--ochre);
  color: var(--charcoal);
  background-color: color-mix(in srgb, var(--ochre) 8%, transparent);
}

.form { display: grid; gap: var(--space-md); }

.field { display: grid; gap: var(--space-2xs); }

.field label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bark);
}

.field .hint {
  font-size: 0.78rem;
  color: var(--stone);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.68rem 0.8rem;
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--charcoal);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.field input:hover,
.field textarea:hover,
.field select:hover { border-color: var(--ochre-soft); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ochre) 22%, transparent);
  outline: none;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field--required label::after {
  content: " *";
  color: var(--rust);
}

/* Honeypot — visually and programmatically hidden from humans */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Status messages after form submission */
.alert {
  border-radius: var(--radius);
  padding: var(--space-md);
  border: 1px solid;
  font-size: var(--step--1);
}

.alert--ok {
  background-color: color-mix(in srgb, #4f7a3a 12%, var(--paper));
  border-color: color-mix(in srgb, #4f7a3a 40%, var(--line));
  color: color-mix(in srgb, #35521f 80%, var(--charcoal));
}

.alert--error {
  background-color: color-mix(in srgb, var(--rust) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--rust) 40%, var(--line));
  color: color-mix(in srgb, #7a3418 80%, var(--charcoal));
}

/* Neither success nor a mistake the visitor made: something is switched
   off or unavailable. Amber, to read as "attention" rather than "error". */
.alert--notice {
  background-color: color-mix(in srgb, var(--ochre) 14%, var(--paper));
  border-color: color-mix(in srgb, var(--ochre) 42%, var(--line));
  color: color-mix(in srgb, #6b4508 82%, var(--charcoal));
}

[data-theme="dark"] .alert--notice,
[data-theme="dark"] .alert--error {
  color: var(--charcoal);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .alert--notice,
  :root:not([data-theme]) .alert--error {
    color: var(--charcoal);
  }
}

.alert ul { margin-top: var(--space-xs); }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  margin-top: auto;
  background-color: var(--footer-bg);
  color: color-mix(in srgb, var(--sand) 78%, transparent);
  padding-block: var(--space-xl);
  font-size: var(--step--1);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.site-footer h2 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
  margin-bottom: var(--space-sm);
}

.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--ochre); text-decoration: underline; }

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: var(--space-2xs); }

.site-footer__brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--sand);
  margin-bottom: var(--space-2xs);
}

.site-footer__bottom {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  color: color-mix(in srgb, var(--sand) 55%, transparent);
}

/* Used on the error page, where the footer has no columns above it. */
.site-footer__bottom--bare {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}


/* ==========================================================================
   11. UTILITIES
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-lg { margin-top: var(--space-lg); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Squared-off variant of .wrap, so a column can sit inside a section
   that already provides the horizontal padding. */
.wrap--flush { padding-inline: 0; }

/* Two buttons side by side with a small gap, without inline styles. */
.mt-inline { margin-top: var(--space-sm); }

@media (min-width: 30rem) {
  .mt-inline { margin-top: 0; margin-left: var(--space-sm); }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* Two-column layouts kick in on wider screens */
@media (min-width: 52rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    padding-block: var(--space-3xl);
  }

  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this width the nav collapses behind a toggle. 56rem rather than 52rem
   because the five Dutch labels ("Het instrument", "Klank en muziek",
   "Vakantie Didge") need the extra room — below this they would break over
   two lines instead of the menu button appearing. */
@media (max-width: 55.99rem) {
  .nav__toggle { display: inline-flex; }

  /* Everything stays on ONE row: logo on the left, then the menu button
     and the theme toggle together at the right. No wrapping, no second
     row. */
  .site-header__inner {
    position: relative;
    flex-wrap: nowrap;
    gap: var(--space-sm);
    padding-block: var(--space-sm);
  }

  /* The brand may shrink, but the buttons never do. */
  .brand { min-width: 0; }
  .brand__mark { width: 1.9rem; height: 1.9rem; }
  .brand__name { font-size: 1.2rem; }

  .nav {
    order: 1;
    margin-left: auto;
    gap: var(--space-sm);
  }

  /* Menu button, then the toggle to its right. */
  .header-tools {
    order: 2;
    gap: var(--space-sm);
  }

  .nav__list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    padding: var(--space-xs) var(--space-md) var(--space-md);
    display: none;
  }

  .nav__list[data-open="true"] { display: flex; }

  .nav__link {
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
  }

  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__link::after { display: none; }

  /* Submenus stay visible inside the collapsed panel instead of nesting. */
  .nav__list .sub-menu { padding-left: var(--space-md); }

  .hero__inner {
    padding-block: var(--space-2xl);
    text-align: left;
  }

  .hero__art { max-width: 17rem; }
}

@media (max-width: 30rem) {
  :root { --space-2xl: 3.5rem; --space-3xl: 4.5rem; }
  .brand__tagline { display: none; }
}


/* ==========================================================================
   13. WORDPRESS CORE CLASSES
   --------------------------------------------------------------------------
   WordPress and its accessibility guidelines expect a number of class
   names to exist. These are the ones this theme actually uses.
   ========================================================================== */

/* Screen-reader text. WordPress core prints .screen-reader-text itself. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  clip: auto !important;
  clip-path: none;
  color: var(--charcoal);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  height: auto;
  left: var(--space-md);
  line-height: normal;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  top: var(--space-md);
  width: auto;
  z-index: 100000;
}

/* The admin bar pushes the sticky header down a little. */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* Alignment classes from the block editor. */
.alignleft {
  float: left;
  margin: var(--space-2xs) var(--space-md) var(--space-md) 0;
}

.alignright {
  float: right;
  margin: var(--space-2xs) 0 var(--space-md) var(--space-md);
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide  { margin-inline: calc(var(--space-md) * -1); max-width: 100vw; }
.alignfull  { margin-inline: calc(50% - 50vw); max-width: 100vw; }

/* Captions under images. */
.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption {
  color: var(--stone);
  font-size: var(--step--1);
  margin-top: var(--space-xs);
  text-align: center;
}

/* Images that link nowhere should not look clickable. */
img.alignnone,
.alignnone img { margin-bottom: var(--space-md); }

/* Post navigation between articles. */
.post-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}

.post-nav a {
  font-size: var(--step--1);
  font-weight: 600;
}

/* Pagination and screen-reader-friendly page links. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 2.4rem;
  padding-inline: var(--space-xs);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--bark);
  font-size: var(--step--1);
}

.pagination .page-numbers:hover {
  border-color: var(--ochre);
  color: var(--charcoal);
}

.pagination .page-numbers.current {
  background-color: var(--ochre);
  border-color: var(--ochre);
  color: #241f1a;
  font-weight: 700;
}

/* Tag / category chips. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
}

.chips li { margin: 0; }

.chip {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--stone);
  text-decoration: none;
}

.chip:hover { border-color: var(--ochre); color: var(--charcoal); }

/* Entry meta line under a post title. */
.entry-meta {
  font-size: var(--step--1);
  color: var(--stone);
  margin-bottom: var(--space-md);
}

.entry-meta a { color: var(--stone); }
.entry-meta a:hover { color: var(--ochre-dark); }

/* Search form. */
.search-form {
  display: flex;
  gap: var(--space-xs);
  align-items: stretch;
}

.search-form input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  background-color: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--charcoal);
}

.search-form input[type="search"]:focus {
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ochre) 22%, transparent);
  outline: none;
}

/* Empty-state message. */
.empty-state {
  background-color: var(--paper);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  text-align: center;
  color: var(--bark);
}

/* Comment list. */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-list li + li { margin-top: var(--space-lg); }

.comment-list .children {
  list-style: none;
  padding-left: var(--space-lg);
  margin-top: var(--space-lg);
}

.comment-body {
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.comment-meta {
  font-size: var(--step--1);
  color: var(--stone);
  margin-bottom: var(--space-sm);
}

.comment-author img {
  display: inline-block;
  border-radius: 50%;
  margin-right: var(--space-xs);
  vertical-align: middle;
}

.comment-respond { margin-top: var(--space-xl); }


/* ==========================================================================
   14. BLOCK EDITOR OUTPUT
   --------------------------------------------------------------------------
   The block editor emits its own markup. These rules keep that markup
   looking like the rest of the site without touching the blocks themselves.
   ========================================================================== */

/* Every block sits in .entry-content, which mirrors .prose. */
.entry-content > * + * { margin-top: var(--space-md); }

.entry-content h2 { margin-top: var(--space-xl); }
.entry-content h3 { margin-top: var(--space-lg); }
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

.entry-content ul,
.entry-content ol { padding-left: 1.25em; }

/* Buttons made with the block editor. */
.entry-content .wp-block-button__link {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.72rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
}

.entry-content .wp-block-button__link:hover { text-decoration: none; }

/* Separator becomes the ochre-to-rust rule. */
.entry-content .wp-block-separator {
  width: 4.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--ochre), var(--rust));
  border: 0;
  border-radius: 3px;
  margin-block: var(--space-lg);
}

/* Quotes use the same treatment as our own blockquote. */
.entry-content .wp-block-quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--bark);
  border-left: 3px solid var(--ochre);
  padding-left: var(--space-md);
}

.entry-content .wp-block-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--stone);
}

/* Tables. */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.entry-content th,
.entry-content td {
  padding: var(--space-sm);
  border: 1px solid var(--line);
  text-align: left;
}

.entry-content th {
  background-color: var(--sand-deep);
  font-weight: 650;
}

/* Code. */
.entry-content code,
.entry-content pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.entry-content code {
  background-color: var(--sand-deep);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.entry-content pre {
  background-color: var(--sand-deep);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-md);
  overflow-x: auto;
}

.entry-content pre code { background: none; padding: 0; }

/* Images and galleries. */
.entry-content figure { margin-block: var(--space-lg); }
.entry-content img { border-radius: var(--radius); }

.entry-content .wp-block-gallery {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  list-style: none;
  padding: 0;
}

/* Photographs on the Vakantie Didge page.
   Five snapshots from 2008 in wildly different shapes — the homemade
   didgeridoo is almost four times as tall as it is wide, and at full width
   it would run off the bottom of the screen. Capping the height and letting
   the width follow keeps every picture on one screen without cropping any
   of them, and the width:auto plus the two max- values means the browser
   scales the image to fit both limits and never distorts it. */
.entry-content .foto img {
  display: block;
  height: auto;
  margin-inline: auto;
  max-height: 30rem;
  max-width: 100%;
  width: auto;
}

/* The row of three at the end of the page.
   The pictures are only 137-177px wide, so letting each one stretch to a
   full third of the text column would leave three small photos marooned in
   three large empty boxes. Sizing each column to its own picture and
   centring the group instead packs them together the way they were meant to
   be seen. flex-shrink stays at 1, so on a narrow screen the row wraps
   rather than overflowing. */
.entry-content .foto-rij {
  align-items: flex-start;
  justify-content: center;
}

.entry-content .foto-rij .wp-block-column { flex: 0 1 auto; }

/* Featured image on a single post. */
.post-thumbnail { margin-bottom: var(--space-lg); }
.post-thumbnail img { border-radius: var(--radius-lg); width: 100%; }

/* Columns block. */
.entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.entry-content .wp-block-column { flex: 1 1 16rem; }


/* ==========================================================================
   15. PRINT
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .hero__art,
  .btn,
  .post-nav,
  .pagination,
  .comment-respond { display: none !important; }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  .hero,
  .page-head,
  .section--deep { background: none !important; }
}