/*
 * Theme 2026 — the calm, photo-led look from the owner's design proposal
 * (large photo blocks, clear buttons, little text), applied site-wide.
 * Loaded by app/(frontend)/layout.tsx right after shared-styles.css.
 *
 * How it restyles the older pages without rewriting them:
 *   - The legacy "sticker" styling is routed through tokens that keep the
 *     original value as their fallback: hard offset shadows use
 *     var(--sk-hard[-sm], …), thick ink borders var(--sk-line, …) and small
 *     playful tilts rotate(calc(… * var(--sk-tilt, 1))). This file sets
 *     those tokens, so dropping this one stylesheet restores the old design.
 *   - Page-scoped legacy CSS (theme-reference/*.html) is injected as <style>
 *     inside <body>, i.e. AFTER this file. Rules below that must beat those
 *     blocks carry `:not(#_)`, which matches every element but adds ID-level
 *     specificity — no !important needed.
 */

:root {
  /* 2026 palette */
  --hp-teal: #0f3f4c;
  --hp-teal-700: #155566;
  --hp-cream: #fbf6ee;
  --hp-sky: #ddecee;
  --hp-amber: #f6c33f;
  --hp-amber-600: #e9b020;
  --hp-text: #1f3a44;
  --hp-line: rgba(15, 63, 76, 0.16);
  --hp-field: #6f8b94; /* form-field border: >= 3:1 on white (WCAG 1.4.11) */
  --hp-radius: 18px;

  /* Legacy tokens, re-pointed at the 2026 palette */
  --ink: #163b47;
  --ink-soft: #46606b;
  --paper: #fbf6ee;
  --paper-2: #f3ede2;
  --brand-yellow: #f6c33f;
  --brand-yellow-300: #f9d572;
  --brand-yellow-100: #fcefc9;
  --brand-yellow-50: #fef8e8;
  /* Logo green, orange and plum → teal, a deep terracotta and a dusty
     plum: the same colour roles (and category colours) in the calmer
     palette. Both fills carry white text at >= 4.5:1. */
  --brand-green: #0f3f4c;
  --brand-green-500: #155566;
  --brand-green-200: #cfe3e6;
  --brand-green-50: #eaf3f4;
  --brand-orange: #b5532f;
  --brand-orange-300: #d98a6a;
  --brand-orange-100: #f4d9cc;
  --brand-orange-50: #fbefe9;
  --brand-orange-text: #a34a2a;
  --brand-plum: #7d5c86;
  --brand-plum-300: #b39bbb;
  --brand-plum-100: #e7dcea;
  --brand-plum-50: #f4eff6;
  --shadow-sticker: 0 8px 24px rgba(15, 63, 76, 0.1);
  --shadow-sticker-lg: 0 14px 34px rgba(15, 63, 76, 0.14);

  /* Sticker-look switches (see header comment) */
  --sk-hard: 0 8px 24px rgba(15, 63, 76, 0.1);
  --sk-hard-sm: 0 2px 8px rgba(15, 63, 76, 0.08);
  --sk-line: 1px solid var(--hp-line);
  --sk-field: 1.5px solid var(--hp-field); /* inline-styled inputs */
  --sk-tilt: 0;
}

body { color: var(--hp-text); }
/* Keep anchor jumps and focused messages clear of the sticky header. */
html { scroll-padding-top: 88px; }

/* ---------- shared ---------- */

.hp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 24px 0;
}

.hp-h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hp-teal);
  margin: 0 0 28px;
}

.hp-spark {
  position: absolute;
  left: -34px;
  top: -18px;
  width: 34px;
  height: 34px;
  color: var(--hp-amber);
}

.hp-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn:focus-visible,
.hp-tile:focus-visible,
.hp-event:focus-visible,
.hp-link:focus-visible {
  outline: 3px solid var(--hp-amber-600);
  outline-offset: 3px;
}

.hp-btn-yellow {
  background: var(--hp-amber);
  color: var(--hp-teal);
  box-shadow: 0 6px 16px rgba(233, 176, 32, 0.35);
}
.hp-btn-yellow:hover { background: var(--hp-amber-600); }

.hp-btn-outline {
  background: #fff;
  color: var(--hp-teal);
  border: 2px solid var(--hp-teal);
}
.hp-btn-outline:hover { background: var(--hp-sky); }

.hp-btn-dark {
  background: var(--hp-teal);
  color: #fff;
}
.hp-btn-dark:hover { background: var(--hp-teal-700); }

.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--hp-teal);
  text-decoration: none;
  white-space: nowrap;
}
.hp-link:hover { text-decoration: underline; }

/* ---------- photo tiles ---------- */

.hp-help .hp-h2 { margin-left: 34px; }

.hp-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.hp-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--hp-radius);
  overflow: hidden;
  background: var(--hp-teal);
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(15, 63, 76, 0.14);
}
.hp-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.hp-tile:hover img { transform: scale(1.04); }
.hp-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 30, 36, 0.78) 0%,
    rgba(10, 30, 36, 0.35) 38%,
    rgba(10, 30, 36, 0) 62%
  );
}

.hp-tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 30px;
}

.hp-tile-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  max-width: 12ch;
}

.hp-tile-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  background: #fff;
  color: var(--hp-teal);
  font-weight: 800;
  font-size: 1rem;
  transition: background-color 0.15s ease;
}
.hp-tile:hover .hp-tile-btn { background: var(--hp-amber); }

/* ---------- kennismaken ---------- */

.hp-visit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  min-height: 280px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--hp-sky);
}

.hp-visit-text {
  position: relative;
  z-index: 2;
  padding: 44px 0 44px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.hp-visit-text .hp-h2 { margin-bottom: 14px; }

.hp-visit-loc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  color: var(--hp-text);
  margin: 0 0 26px;
}
.hp-visit-loc svg { color: var(--hp-teal); }

.hp-visit-photo { position: relative; }
.hp-visit-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-visit-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, var(--hp-sky) 0%, rgba(221, 236, 238, 0) 35%);
}

/* ---------- link cards (Hulp & diensten) ---------- */

.page-hero .hp-btns { justify-content: center; margin-top: 26px; }

.hp-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.hp-more-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 52px 22px 22px;
  border-radius: var(--hp-radius);
  background: #fff;
  border: 1.5px solid var(--hp-sky);
  color: var(--hp-text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hp-more-card:hover { border-color: var(--hp-teal); transform: translateY(-2px); }
.hp-more-card:focus-visible { outline: 3px solid var(--hp-amber-600); outline-offset: 3px; }
.hp-more-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--hp-teal);
}
.hp-more-card svg {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -9px;
  color: var(--hp-teal);
}

@media (max-width: 900px) {
  .hp-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hp-btns .hp-btn { flex: 1 1 100%; }
  .hp-more { grid-template-columns: 1fr; }

  .hp-section { padding: 44px 16px 0; }
  .hp-help .hp-h2 { margin-left: 26px; }
  .hp-spark { left: -28px; width: 28px; height: 28px; }

  .hp-tiles { grid-template-columns: 1fr; gap: 14px; }
  .hp-tile-body { padding: 20px 22px; }

  .hp-visit { grid-template-columns: 1fr; }
  .hp-visit-text { padding: 32px 24px 28px 48px; }
  .hp-visit-photo { aspect-ratio: 16 / 9; }
  .hp-visit-photo::before {
    background: linear-gradient(180deg, var(--hp-sky) 0%, rgba(221, 236, 238, 0) 30%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hp-btn,
  .hp-more-card,
  .hp-tile img { transition: none; }
  .hp-btn:hover,
  .hp-more-card:hover { transform: none; }
  .hp-tile:hover img { transform: none; }
}

/* ---------- header ---------- */

.nav-shell {
  top: 0;
  padding: 0;
  background: var(--hp-cream);
  border-bottom: 1px solid rgba(15, 63, 76, 0.08);
}
.nav {
  max-width: 1200px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 14px 24px;
}
.nav-brand {
  color: var(--hp-teal);
  font-weight: 800;
  font-size: 1.2rem;
}
.nav-brand .logo-mark { border: 0; }
.nav-link,
.nav-link.active,
.nav-link.active[href] {
  background: transparent;
  color: var(--hp-teal);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 0.98rem;
}
.nav-link:hover { background: transparent; text-decoration: underline; text-underline-offset: 6px; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--hp-amber);
}
.nav-cta,
.nav-admin {
  border-radius: 12px;
  box-shadow: none;
}
.nav-cta {
  border: 0;
  background: var(--hp-amber);
  color: var(--hp-teal);
  padding: 11px 18px;
}
.nav-cta:hover,
.nav-cta:active { transform: none; box-shadow: none; background: var(--hp-amber-600); }
.nav-admin { background: #fff; color: var(--hp-teal); border: 2px solid var(--hp-teal); }
.nav-admin:hover,
.nav-admin:active { transform: none; box-shadow: none; background: var(--hp-sky); }

@media (max-width: 899px) {
  .nav-shell { top: 0; padding: 0; }
  .nav { padding: 10px 16px; }
  .nav-cta { clip-path: none; }
  /* shared-styles clips these to a pill on phones (a WebKit shadow fix);
     the 2026 shapes are rounded rectangles, so clip to their own radius or
     the outline buttons lose the ends of their border. */
  .btn:not(#_) { clip-path: inset(0 round 14px); }
  .cookie-btn:not(#_),
  .footer-newsletter-btn:not(#_),
  .foot-credit:not(#_) { clip-path: inset(0 round 12px); }
  /* The footer already keeps room for the menu button; main's own 80px on
     top of the footer's margin left a large empty band on every page. */
  main { padding-bottom: 0; }
}

/* ---------- footer ---------- */

.foot { background: var(--hp-teal); }
.foot-brand .logo-row img { border: 0; }
.foot-col a:hover { color: var(--hp-amber); }
.footer-newsletter-btn,
.foot-credit {
  background: var(--hp-amber);
  color: var(--hp-teal);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.footer-newsletter-btn svg { stroke: var(--hp-teal); }
.footer-newsletter-btn:hover,
.foot-credit:hover {
  background: var(--hp-amber-600);
  transform: none;
  box-shadow: none;
}
.footer-newsletter-btn:active,
.foot-credit:active { transform: none; box-shadow: none; }
.footer-newsletter-btn:focus-visible,
.foot-credit:focus-visible { outline-color: var(--hp-amber); }

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

.btn:not(#_) {
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: none;
}
.btn:not(#_):hover { transform: translateY(-2px); box-shadow: none; }
.btn:not(#_):active { transform: none; box-shadow: none; }
.btn-yellow:not(#_),
.btn-orange:not(#_) {
  background: var(--hp-amber);
  color: var(--hp-teal);
  box-shadow: 0 6px 16px rgba(233, 176, 32, 0.32);
}
.btn-yellow:not(#_):hover,
.btn-orange:not(#_):hover { background: var(--hp-amber-600); box-shadow: 0 6px 16px rgba(233, 176, 32, 0.32); }
.btn-primary:not(#_),
.btn-green:not(#_) {
  background: var(--hp-teal);
  color: #fff;
}
.btn-primary:not(#_):hover,
.btn-green:not(#_):hover { background: var(--hp-teal-700); }
.btn-secondary:not(#_),
.btn-cream:not(#_) {
  background: #fff;
  color: var(--hp-teal);
  border-color: var(--hp-teal);
}
.btn-secondary:not(#_):hover,
.btn-cream:not(#_):hover { background: var(--hp-sky); }

/* ---------- page tops and section heads ---------- */

.page-hero:not(#_) { padding: 64px 16px 44px; }
.page-hero-blobs { display: none; }
.page-hero .eyebrow:not(#_),
.section-head .eyebrow:not(#_) {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  color: var(--hp-teal-700);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
}
.page-hero .eyebrow .dot:not(#_),
.section-head .eyebrow .swatch:not(#_) {
  background: var(--hp-amber);
  border: 0;
}
.page-hero h1:not(#_) {
  color: var(--hp-teal);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.page-hero .lead:not(#_),
.section-head p:not(#_) { color: var(--hp-text); }
.section-head h2:not(#_) { color: var(--hp-teal); font-weight: 800; }
/* Accent words in headings: keep the italic, drop the orange and the tilt.
   Without the tilt the inline-block isn't needed, and it let a closing "."
   wrap onto a line of its own. */
:is(h1, h2, h3) em:not(#_) { color: inherit; }
.page-hero h1 em:not(#_) { display: inline; }
.page-hero h1 .underline:not(#_)::after { background: var(--hp-amber); opacity: 0.55; }

/* Coloured feature bands → the calm dark-teal band of the design. */
.bg-green:not(#_),
.bg-plum:not(#_) { background: var(--hp-teal); }

/* ---------- form fields ---------- */

:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):not(#_) {
  border: 1.5px solid var(--hp-field);
  border-radius: 12px;
  box-shadow: none;
  background-color: #fff;
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):not(#_):hover {
  transform: none;
  box-shadow: none;
}
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea):not(#_):focus {
  border-color: var(--hp-teal);
  box-shadow: 0 0 0 3px rgba(246, 195, 63, 0.5);
  outline: none;
}
/* The € amount fields: their wrapper is the visible box (it shows the focus
   ring via :focus-within), so the input inside stays bare. The double :not(#_)
   outranks the field rule above. */
:is(.amount-custom, .cqd-custom):not(#_) { border: 1.5px solid var(--hp-field); border-radius: 12px; }
:is(.amount-custom, .cqd-custom) input:not(#_):not(#_),
:is(.amount-custom, .cqd-custom) input:not(#_):not(#_):focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(.amount-custom, .cqd-custom):not(#_):focus-within {
  border-color: var(--hp-teal);
  box-shadow: 0 0 0 3px rgba(246, 195, 63, 0.5);
}
.nl-form button[type="submit"]:not(#_) {
  background: var(--hp-amber);
  color: var(--hp-teal);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.nl-form button[type="submit"]:not(#_):hover { background: var(--hp-amber-600); transform: none; }

/* Contact band: the e-mail button wrapped mid-address on phones. */
@media (max-width: 640px) {
  .big-call .phone:not(#_) {
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 14px 20px;
    word-break: normal;
    overflow-wrap: anywhere;
  }
}

/* Scrapbook "tape" strips on cards belong to the old sticker look. */
:is(.contact-form, .donate-form-card, .signup-card, .intro-card, .newsletter-card, .thanks-card):not(#_)::before,
:is(.signup-card, .thanks-card):not(#_)::after,
:is(.story-photo .tape, .featured-tape, .cover-tape, .gal-tape):not(#_) { display: none; }

/* Every form's send button: the design's dark teal. The donate button uses
   the amber of the header's "Doneer". */
.submit-btn:not(#_) {
  background: var(--hp-teal);
  color: #fff;
  border: 0;
  border-radius: 14px;
  min-height: 56px;
}
.submit-btn:not(#_):hover { background: var(--hp-teal-700); transform: none; }
.submit-btn:not(#_):active { transform: none; }
.donate-form-card .submit-btn:not(#_) { background: var(--hp-amber); color: var(--hp-teal); }
.donate-form-card .submit-btn:not(#_):hover { background: var(--hp-amber-600); }
.donate-form-card .submit-btn .total:not(#_) { background: rgba(15, 63, 76, 0.12); }
/* Pending forms disable the button; show it. */
.submit-btn:disabled:not(#_) { opacity: 0.6; cursor: progress; }

/* ---------- cookie notice ---------- */

.cookie-btn:not(#_) {
  background: var(--hp-amber);
  color: var(--hp-teal);
  border: 0;
  border-radius: 12px;
  box-shadow: none;
}
.cookie-btn:not(#_):hover { background: var(--hp-amber-600); transform: none; box-shadow: none; }

/* ---------- mobile menu ---------- */

.mobile-fab::before { background: var(--hp-teal); border: 0; }
.mobile-fab::after { display: none; }
.mobile-fab.is-open::before { background: var(--hp-teal-700); }
.mobile-menu-panel { border-top: 0; }
.mobile-menu-link,
a.mobile-menu-link:focus,
a.mobile-menu-link:focus-visible,
.mobile-menu-admin,
.mobile-menu-doneer {
  border-radius: 14px;
  clip-path: inset(0 round 14px);
}
.mobile-menu-link { border: 1px solid var(--hp-line); color: var(--hp-teal); }
.mobile-menu-link.active:not(#_) {
  background: var(--hp-teal);
  border-color: var(--hp-teal);
  color: #fff;
}
.mobile-menu-admin { border: 2px solid var(--hp-teal); box-shadow: none; }
.mobile-menu-doneer {
  background: var(--hp-amber);
  color: var(--hp-teal) !important; /* legacy rule sets white !important */
  border: 0;
  box-shadow: none;
}
.mobile-menu-doneer:hover,
.mobile-menu-doneer:active { box-shadow: none; }
/* Leave room for the round close button, which sits over the sheet's
   bottom-right corner. */
.mobile-menu-doneer:not(#_) { margin-right: 72px; }
.mobile-menu-more {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mobile-menu-more a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--hp-sky);
  color: var(--hp-teal);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
}
.mobile-menu-more a.active { background: var(--hp-teal); color: #fff; }