/*
Theme Name: Haegelsums Bledje
Theme URI: https://haegelsumsbledje.nl
Author: Stichting Het Haegelsums Bledje
Author URI: https://haegelsumsbledje.nl
Description: Custom block theme voor Het Haegelsums Bledje — het maandblad van Hegelsom. Eén signature rood, klassieke serif voor accenten, schone sans voor body. Volledig Site Editor compatible (FSE) met fixed header, mobiel full-screen menu, scroll-progressbar bovenaan, scroll-fade-in, count-up stats, back-to-top, continue logo-marquee en automatische form-styling.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: haegelsums-bledje
Tags: block-theme, full-site-editing, news, magazine, blog, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready
*/

/* Block themes get most styles from theme.json. This file is minimal — */
/* only progressive enhancements + interaction styles theme.json cannot express. */

:root {
  --bledje-rood: #C8102E;
  --bledje-rood-diep: #8E0B20;
  --bledje-inkt: #1A1A1A;
  --bledje-inkt-zacht: #3A3A3A;
  --bledje-papier: #FAF7F2;
  --bledje-papier-warm: #F1ECE3;
  --bledje-lijn: #E5E1D8;
  --bledje-subtiel: #8C8478;

  --bledje-shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --bledje-shadow: 0 4px 12px rgba(26, 26, 26, 0.06);
  --bledje-shadow-lg: 0 10px 30px rgba(26, 26, 26, 0.08);

  --bledje-trans: 0.25s cubic-bezier(.4,0,.2,1);

  /* Header height — overridden by JS once measured.
     Bumped from 72→88 in 2.4.0 to leave room for the bigger logo. */
  --bledje-header-h: 88px;

  /* Page scroll progress, 0% → 100%. Updated by JS via rAF. Drives the
     top-of-header progress bar. Defaults to 0% so the bar reads "empty"
     before JS runs. */
  --bledje-scroll-pct: 0%;
}

/* ═══════════════════════════════════════════════════
   GLOBAL — kill horizontal scroll, smooth scroll
   ═══════════════════════════════════════════════════ */

/* `overflow-x: clip` is the modern, sticky/fixed-friendly cousin of
   `overflow-x: hidden`. It prevents stray child overflow from creating
   a horizontal scrollbar without breaking position: sticky on descendants. */
html, body {
  overflow-x: clip;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
  /* Push anchor scroll targets below the fixed header */
  scroll-padding-top: calc(var(--bledje-header-h, 88px) + 12px);
}

/* Defensive: any direct child of the site root that's wider than viewport
   would cause horizontal scroll. Clip silently. */
.wp-site-blocks {
  overflow-x: clip;
}

::selection { background: var(--bledje-rood); color: #fff; }

/* Focus ring — brand red */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
  outline: 3px solid var(--bledje-rood);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Newspaper-style first-letter dropcap on .has-drop-cap (WP core class) */
p.has-drop-cap:not(:focus)::first-letter {
  font-family: var(--wp--preset--font-family--serif), Georgia, serif;
  color: var(--bledje-rood);
  font-weight: 700;
  font-size: 4.4em;
  line-height: 0.8;
  margin: 0.05em 0.1em 0 -0.05em;
  float: left;
}

/* ═══════════════════════════════════════════════════
   HEADER — fixed-position, no more sticky-parent bug
   ═══════════════════════════════════════════════════ */
header.wp-block-template-part {
  /* The wrapper acts as a flow-spacer so content below isn't covered. */
  min-height: var(--bledje-header-h, 88px);
}

.bledje-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: var(--bledje-papier);
  transition: background var(--bledje-trans), box-shadow var(--bledje-trans), padding var(--bledje-trans);
  /* NOTE: deliberately NO `contain` and NO `transform` / `filter` here.
     Any of those would make this element a containing block for fixed-
     position descendants, which would trap the .bledje-mobile-menu
     (a fixed-position child) inside the ~88px header and collapse it
     to zero height. That's the bug we hit in 2.4.0 first pass. */
}
.bledje-header.is-shrunk {
  /* NOTE: deliberately NOT using backdrop-filter here. backdrop-filter
     establishes a containing block for fixed descendants — which would
     re-trap the mobile menu inside the header the moment the page is
     scrolled past 80px. Solid-but-slightly-translucent background +
     box-shadow gives a similar shrink-cue without that side effect. */
  background: rgba(250, 247, 242, 0.97);
  box-shadow: 0 2px 14px rgba(26, 26, 26, 0.06);
}
.bledje-header-bar {
  /* Sits above the mobile menu (z-index 95) so the logo + burger
     remain visible when the menu is open. */
  position: relative;
  z-index: 110;
  background: var(--bledje-papier);
  transition: padding var(--bledje-trans);
}
.bledje-header.is-shrunk .bledje-header-bar {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
}
.bledje-header.is-shrunk .wp-block-site-logo img {
  height: 48px !important;
  transition: height var(--bledje-trans);
}

/* Logo sizing inside site-title block — bumped in 2.4.0.
   Was clamp(38px, 5vw, 52px); now bigger so the masthead has presence. */
.wp-block-site-logo img {
  height: clamp(54px, 7vw, 76px);
  width: auto;
  transition: height var(--bledje-trans), transform var(--bledje-trans);
}
/* Small interactive tilt on the brand mark — invites the eye, doesn't
   distract. Paused for reduced motion (see bottom of file). */
.wp-block-site-logo a:hover img,
.wp-block-site-logo:hover img {
  transform: rotate(-2deg) scale(1.03);
}

/* Header nav: subtle red on hover with animated underline */
.wp-block-navigation .wp-block-navigation-item__content {
  position: relative;
  transition: color var(--bledje-trans);
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: var(--bledje-rood);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.32s cubic-bezier(.4,0,.2,1);
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--bledje-rood);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Navigation submenu styling — solid background so it doesn't ghost
   over the content beneath. */
.wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: var(--bledje-papier) !important;
  background: var(--bledje-papier) !important;
  border: 1px solid var(--bledje-lijn) !important;
  border-radius: 4px;
  box-shadow: var(--bledje-shadow);
  padding: 0.5rem 0 !important;
  min-width: 220px;
  z-index: 110;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
  background: transparent;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 0.45rem 1rem;
  display: block;
  white-space: nowrap;
}
/* Submenu links don't get the underline-from-right treatment — they hover-fill instead. */
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
  display: none;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--bledje-papier-warm);
  color: var(--bledje-rood);
}

/* ═══════════════════════════════════════════════════
   SCROLL PROGRESS BAR — was the static red rule at the
   top of the header. Now visualizes how far you are on
   the page. Filled red portion grows as you scroll.
   ═══════════════════════════════════════════════════ */
.is-style-bledje-redrule {
  height: 4px !important;
  border: 0;
  /* Force full width — the header uses a constrained layout that would
     otherwise box this in to contentSize. */
  width: 100% !important;
  max-width: 100% !important;
  /* Track underneath (subtle red), fill on top driven by --bledje-scroll-pct.
     Gradient interpolates between stops at a single position, so it gives
     a clean leading edge without animating the background-image. */
  background-image: linear-gradient(
    to right,
    var(--bledje-rood) 0%,
    var(--bledje-rood) var(--bledje-scroll-pct, 0%),
    rgba(200, 16, 46, 0.16) var(--bledje-scroll-pct, 0%),
    rgba(200, 16, 46, 0.16) 100%
  ) !important;
  background-color: rgba(200, 16, 46, 0.16) !important;
  margin: 0 !important;
  opacity: 1 !important;
}
/* Belt-and-braces: the constrained-layout flow container that WP wraps
   around non-aligned children also gets the override, so the bar fills
   even if alignfull isn't honored for some reason. */
.bledje-header > .is-style-bledje-redrule,
.bledje-header > hr.is-style-bledje-redrule,
.bledje-header .wp-block-separator.is-style-bledje-redrule {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Above the mobile menu (z-index 95) so the scroll-progress remains
     visible when the menu is open. */
  position: relative;
  z-index: 110;
}

/* ═══════════════════════════════════════════════════
   MOBILE HAMBURGER + FULL-SCREEN MENU
   ═══════════════════════════════════════════════════
   v2.4.0 rewrite. Previous version was a 360px slide-in
   panel from the right with overflow-y:auto, which let
   menu content scroll up out of view when the keyboard
   came up on mobile and only dimmed the rest of the
   page (not a full overlay). New version is a full-screen
   overlay with backdrop blur, centered links, stagger
   fade-in, and the burger itself animates to X. */

.bledje-burger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 10px;
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  /* Stay above the overlay so it can also act as the close button. */
  z-index: 220;
}
.bledje-burger-line {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--bledje-inkt);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(.4,0,.2,1),
              opacity 0.18s linear,
              background var(--bledje-trans);
  transform-origin: center;
}
.bledje-burger:hover .bledje-burger-line {
  background: var(--bledje-rood);
}

/* Animate the three lines into an X when the menu is open.
   aria-expanded is toggled by the JS, so we can drive this purely from CSS. */
.bledje-burger[aria-expanded="true"] .bledje-burger-line:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  background: var(--bledje-rood);
}
.bledje-burger[aria-expanded="true"] .bledje-burger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.bledje-burger[aria-expanded="true"] .bledje-burger-line:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  background: var(--bledje-rood);
}

/* Full-viewport overlay menu.

   STACKING:
     header bar      z-index: 100  (logo + burger sit ABOVE the menu)
     mobile menu     z-index:  95  (fills the viewport behind the header)
     burger          z-index: 220  (highest, so its X-animation is on top
                                    of everything for tap target)

   The header has its own solid --bledje-papier background, so even
   though the menu technically fills the whole viewport (inset:0),
   the top ~88px is visually masked by the header — meaning the logo,
   site-title and burger stay visible while the menu is open. The
   menu's INNER pads itself down with padding-top so links land
   neatly below the header. */
.bledje-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: var(--bledje-papier);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s cubic-bezier(.4,0,.2,1),
              visibility 0.32s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bledje-mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
}

/* Inner column — content area starts below the header. Extra breathing
   room above the first link so it doesn't sit against the header edge. */
.bledje-mobile-menu-inner {
  width: 100%;
  min-height: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--bledje-header-h, 88px) + 2.25rem) 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 1.25rem;
  transform: translateY(12px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1),
              opacity 0.32s cubic-bezier(.4,0,.2,1);
  box-sizing: border-box;
}
.bledje-mobile-menu.is-open .bledje-mobile-menu-inner {
  transform: translateY(0);
  opacity: 1;
}

/* Hide the legacy in-menu close button — the burger itself now closes. */
.bledje-mobile-close { display: none !important; }

.bledje-mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  max-width: 420px;
  align-items: center;
  text-align: center;
}
.bledje-mobile-link {
  display: inline-block;
  padding: 0.65rem 1rem;
  font-family: var(--wp--preset--font-family--serif, Georgia), serif;
  font-size: clamp(1.6rem, 5.5vw, 2.1rem);
  font-weight: 700;
  color: var(--bledje-inkt);
  text-decoration: none;
  letter-spacing: -0.015em;
  line-height: 1.15;
  transition: color var(--bledje-trans), transform var(--bledje-trans);
  position: relative;
  /* Stagger fade-in (delays applied below) */
  opacity: 0;
  transform: translateY(8px);
}
.bledje-mobile-menu.is-open .bledje-mobile-link {
  animation: bledje-mobile-link-in 0.45s cubic-bezier(.4,0,.2,1) forwards;
}
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(1) { animation-delay: 0.08s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(2) { animation-delay: 0.14s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(3) { animation-delay: 0.20s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(4) { animation-delay: 0.26s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(5) { animation-delay: 0.32s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(6) { animation-delay: 0.38s; }
.bledje-mobile-menu.is-open .bledje-mobile-link:nth-child(7) { animation-delay: 0.44s; }

@keyframes bledje-mobile-link-in {
  to { opacity: 1; transform: translateY(0); }
}

.bledje-mobile-link::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.4rem;
  width: 0;
  height: 2px;
  background: var(--bledje-rood);
  transition: width 0.28s cubic-bezier(.4,0,.2,1), left 0.28s cubic-bezier(.4,0,.2,1);
}
.bledje-mobile-link:hover {
  color: var(--bledje-rood);
}
.bledje-mobile-link:hover::before {
  width: 60%;
  left: 20%;
}

.bledje-mobile-cta {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.95em 2em;
  background: var(--bledje-rood);
  color: #fff;
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  text-align: center;
  transition: background var(--bledje-trans), transform var(--bledje-trans), box-shadow var(--bledje-trans);
  opacity: 0;
  transform: translateY(8px);
}
.bledje-mobile-menu.is-open .bledje-mobile-cta {
  animation: bledje-mobile-link-in 0.45s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.5s;
}
.bledje-mobile-cta:hover {
  background: var(--bledje-rood-diep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.28);
}
.bledje-mobile-meta {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--bledje-subtiel);
  font-family: var(--wp--preset--font-family--serif), Georgia, serif;
  font-style: italic;
  text-align: center;
  opacity: 0;
}
.bledje-mobile-menu.is-open .bledje-mobile-meta {
  animation: bledje-mobile-link-in 0.45s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay: 0.56s;
}

body.bledje-no-scroll {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════
   BUTTONS — Bledje styles
   ═══════════════════════════════════════════════════ */

/* Primary CTA (Steun ons!) — with subtle shine sweep on hover */
.wp-block-button.is-style-bledje-cta .wp-block-button__link,
a.bledje-cta,
button.bledje-cta,
.bledje-cta-link {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--bledje-rood);
  color: #fff !important;
  border: 0;
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.72em 1.5em;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--bledje-trans), background var(--bledje-trans), box-shadow var(--bledje-trans);
}
.wp-block-button.is-style-bledje-cta .wp-block-button__link::before,
a.bledje-cta::before,
button.bledje-cta::before,
.bledje-cta-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 0.55s cubic-bezier(.4,0,.2,1);
}
.wp-block-button.is-style-bledje-cta .wp-block-button__link:hover,
a.bledje-cta:hover,
button.bledje-cta:hover,
.bledje-cta-link:hover {
  background: var(--bledje-rood-diep);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.25);
}
.wp-block-button.is-style-bledje-cta .wp-block-button__link:hover::before,
a.bledje-cta:hover::before,
button.bledje-cta:hover::before,
.bledje-cta-link:hover::before {
  left: 120%;
}

/* Outline button */
.wp-block-button.is-style-bledje-outline .wp-block-button__link {
  background: transparent;
  color: var(--bledje-inkt);
  border: 2px solid var(--bledje-inkt);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  transition: background var(--bledje-trans), color var(--bledje-trans), transform var(--bledje-trans);
}
.wp-block-button.is-style-bledje-outline .wp-block-button__link:hover {
  background: var(--bledje-inkt);
  color: #fff;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════
   COMPONENT STYLES
   ═══════════════════════════════════════════════════ */

/* Eyebrow label (uppercase red small caps) */
.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bledje-rood);
}

/* Pull-quote with red border-left */
.wp-block-pullquote.is-style-bledje-pull {
  border-left: 4px solid var(--bledje-rood);
  border-top: 0;
  border-bottom: 0;
  padding: 0.6em 0 0.6em 1.4em;
  text-align: left;
  font-style: italic;
}

/* Tile / card — with a small "corner accent" on hover */
.is-style-bledje-tile {
  background: #fff;
  border: 1px solid var(--bledje-lijn);
  padding: clamp(1.2rem, 2.5vw, 2rem);
  position: relative;
  overflow: hidden;
  transition: transform var(--bledje-trans), box-shadow var(--bledje-trans), border-color var(--bledje-trans);
}
.is-style-bledje-tile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--bledje-rood) transparent transparent;
  opacity: 0;
  transform: translate(8px, -8px);
  transition: opacity var(--bledje-trans), transform var(--bledje-trans);
  pointer-events: none;
}
.is-style-bledje-tile:hover {
  transform: translateY(-3px);
  border-color: var(--bledje-rood);
  box-shadow: var(--bledje-shadow);
}
.is-style-bledje-tile:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

/* Short red anchor rule (under titles) — keep separate from the top redrule */
.wp-block-separator.is-style-bledje-rule {
  width: 36px;
  max-width: 36px;
  height: 3px;
  background: var(--bledje-rood);
  border: 0;
  margin-left: 0;
  opacity: 1;
}

/* Counter element marker used by JS (count-up animation).
   Tabular numbers prevent width jitter while the digits change. */
.bledje-stat-number,
[data-bledje-stat-target] {
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════
   HERO PATTERN
   ═══════════════════════════════════════════════════ */
.bledje-hero-grid {
  align-items: center;
  gap: 3rem !important;
}

/* Gentle hover/idle float for the haan — pure CSS, no JS. */
.bledje-hero-haan img {
  display: block;
  margin: 0 auto;
  animation: bledje-haan-float 6s ease-in-out infinite;
  transition: transform var(--bledje-trans);
  will-change: transform;
}
.bledje-hero-haan:hover img {
  animation-play-state: paused;
  transform: translateY(-3px) rotate(-1.5deg);
}
@keyframes bledje-haan-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════
   FOOTER — three-column grid with credits row
   ═══════════════════════════════════════════════════ */
.bledje-footer {
  border-top: 4px solid var(--bledje-rood);
}

/* Top: 3 columns on desktop, stacks on mobile */
.bledje-footer-cols {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.bledje-footer-col h5,
.bledje-footer-col .bledje-footer-col-title {
  margin: 0 0 0.85rem;
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bledje-rood);
}
.bledje-footer-col p,
.bledje-footer-col li {
  margin: 0 0 0.4rem;
  font-size: 0.93rem;
  color: var(--bledje-inkt-zacht);
  line-height: 1.5;
}
.bledje-footer-col a {
  color: var(--bledje-inkt-zacht);
  text-decoration: none;
  transition: color var(--bledje-trans);
  font-weight: 500;
}
.bledje-footer-col a:hover {
  color: var(--bledje-rood);
}
.bledje-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bledje-footer-brand-block h4 {
  margin: 0 0 0.35rem !important;
  font-family: var(--wp--preset--font-family--serif) !important;
  font-size: 1.6rem !important;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bledje-footer-brand-block .bledje-footer-tagline {
  margin: 0 0 1rem !important;
  font-family: var(--wp--preset--font-family--serif) !important;
  font-style: italic !important;
  color: var(--bledje-subtiel) !important;
  font-size: 1rem !important;
}

/* Credits row — hosting + ontwerp & onderhoud.
   In the bottom strip they sit on the LEFT (desktop) / TOP (mobile),
   so left-align by default. */
.bledje-footer-credits {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: flex-start;
}
.bledje-footer-credit {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
}
.bledje-footer-credit-label {
  margin: 0 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bledje-subtiel) !important;
  font-weight: 600;
}
.bledje-footer-credit-logo {
  display: inline-flex !important;
  align-items: center;
  margin: 0 !important;
  transition: opacity var(--bledje-trans), transform var(--bledje-trans);
}
.bledje-footer-credit-logo img {
  max-height: 32px;
  width: auto;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.75;
  transition: filter var(--bledje-trans), opacity var(--bledje-trans);
}
.bledje-footer-credit-logo:hover img,
.bledje-footer-credit-logo a:hover img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
}

/* Bottom strip: credits left, © right (desktop). On phones it stacks
   column with credits on top and © at the bottom — see phone media query. */
.bledje-footer-bottom {
  align-items: center;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}
.bledje-footer-copy {
  margin: 0 !important;
  color: var(--bledje-subtiel);
  font-size: 0.84rem;
  white-space: nowrap;
  text-align: right;
}

/* Image hover (advertisers — non-marquee context) */
.bledje-adverteerder img {
  filter: grayscale(0.2);
  transition: filter var(--bledje-trans), transform var(--bledje-trans);
}
.bledje-adverteerder:hover img {
  filter: grayscale(0);
  transform: scale(1.03);
}

/* Reading-friendly post body */
.entry-content > p,
.wp-block-post-content > p {
  max-width: 68ch;
}
.entry-content > p.alignwide,
.entry-content > p.alignfull,
.wp-block-post-content > p.alignwide,
.wp-block-post-content > p.alignfull {
  max-width: none;
}

/* Bijdrage-list (Verenigingen, etc.) */
.bledje-bijdrage-list a {
  display: block;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--bledje-lijn);
  font-family: var(--wp--preset--font-family--serif), Georgia, serif;
  font-size: 1.15rem;
  color: var(--bledje-inkt);
  text-decoration: none;
  transition: color var(--bledje-trans), padding-left var(--bledje-trans);
}
.bledje-bijdrage-list a:hover,
.bledje-bijdrage-list a[aria-current="true"] {
  color: var(--bledje-rood);
  padding-left: 0.5rem;
}

/* ═══════════════════════════════════════════════════
   FORMS — automatic Bledje styling
   ═══════════════════════════════════════════════════
   Targets: any form inside the content area, plus
   Forminator forms which the site uses (e.g. the
   "Offerte aanvragen" form on /adverteren/).
   Use .bledje-form-container to opt non-content forms
   in to the same look. */

.bledje-form-container,
.entry-content form,
.wp-block-post-content form,
.forminator-custom-form {
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
}

/* Card framing for Forminator forms placed directly in post content
   (e.g. /contact/). Also applied when wrapped in .bledje-form-container.
   Skipped if it would double up. */
.bledje-form-container,
.entry-content .forminator-custom-form,
.wp-block-post-content .forminator-custom-form {
  max-width: 640px;
  margin: 1.5rem 0 2rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 1.75rem);
  background: var(--bledje-papier);
  border: 1px solid var(--bledje-lijn);
  border-left: 3px solid var(--bledje-rood);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.03);
}
/* Don't double-frame if the user wraps a Forminator form in
   .bledje-form-container manually. */
.bledje-form-container .forminator-custom-form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Labels */
.bledje-form-container label,
.entry-content form label,
.wp-block-post-content form label,
.forminator-custom-form .forminator-label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bledje-inkt);
  letter-spacing: 0.01em;
}
.forminator-required {
  color: var(--bledje-rood);
  margin-left: 0.15em;
}

/* Text-like inputs + textarea + select */
.bledje-form-container input[type="text"],
.bledje-form-container input[type="email"],
.bledje-form-container input[type="tel"],
.bledje-form-container input[type="url"],
.bledje-form-container input[type="search"],
.bledje-form-container input[type="number"],
.bledje-form-container input[type="password"],
.bledje-form-container input[type="date"],
.bledje-form-container input[type="time"],
.bledje-form-container textarea,
.bledje-form-container select,
.entry-content form input[type="text"],
.entry-content form input[type="email"],
.entry-content form input[type="tel"],
.entry-content form input[type="url"],
.entry-content form input[type="search"],
.entry-content form input[type="number"],
.entry-content form input[type="password"],
.entry-content form textarea,
.entry-content form select,
.wp-block-post-content form input[type="text"],
.wp-block-post-content form input[type="email"],
.wp-block-post-content form input[type="tel"],
.wp-block-post-content form input[type="url"],
.wp-block-post-content form input[type="search"],
.wp-block-post-content form textarea,
.wp-block-post-content form select,
.forminator-custom-form .forminator-input,
.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="url"],
.forminator-custom-form input[type="number"],
.forminator-custom-form textarea,
.forminator-custom-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.95rem;
  border: 1px solid var(--bledje-lijn);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--bledje-inkt);
  border-radius: 4px;
  transition: border-color var(--bledje-trans), box-shadow var(--bledje-trans), background var(--bledje-trans);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

/* Selects need a chevron back since we stripped native appearance */
.bledje-form-container select,
.entry-content form select,
.wp-block-post-content form select,
.forminator-custom-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231A1A1A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Placeholders */
.bledje-form-container ::placeholder,
.entry-content form ::placeholder,
.wp-block-post-content form ::placeholder,
.forminator-custom-form ::placeholder {
  color: var(--bledje-subtiel);
  opacity: 1;
}

/* Focus */
.bledje-form-container input:focus,
.bledje-form-container textarea:focus,
.bledje-form-container select:focus,
.entry-content form input:focus,
.entry-content form textarea:focus,
.entry-content form select:focus,
.wp-block-post-content form input:focus,
.wp-block-post-content form textarea:focus,
.wp-block-post-content form select:focus,
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form input:focus,
.forminator-custom-form textarea:focus,
.forminator-custom-form select:focus {
  outline: none;
  border-color: var(--bledje-rood);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

/* ────────────────────────────────────────────────────
   Field states + helper text
   ──────────────────────────────────────────────────── */

/* Per-field error wrapper. The form HTML uses BOTH names depending on
   version: `forminator-error` (the old class) AND `forminator-has_error`
   (the current one). Match both. */
.forminator-custom-form .forminator-error input,
.forminator-custom-form .forminator-error textarea,
.forminator-custom-form .forminator-error select,
.forminator-custom-form .forminator-has_error input,
.forminator-custom-form .forminator-has_error textarea,
.forminator-custom-form .forminator-has_error select,
.forminator-custom-form input[aria-invalid="true"],
.forminator-custom-form textarea[aria-invalid="true"],
.forminator-custom-form select[aria-invalid="true"] {
  border-color: var(--bledje-rood) !important;
  background: rgba(200, 16, 46, 0.04) !important;
}

/* Inline per-field error text ("Dit veld is vereist...") */
.forminator-custom-form .forminator-error-message {
  display: block;
  margin: 0.4rem 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--bledje-rood);
  font-weight: 500;
}
/* Forminator hides empty errors by default. Don't show the slot when the
   field is valid. */
.forminator-custom-form .forminator-error-message:empty {
  display: none;
}

/* Description text under field (used for textarea character counter
   "0 / 180", and for any hint text Forminator emits) */
.forminator-custom-form .forminator-description {
  display: block;
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--bledje-subtiel);
  font-style: italic;
  text-align: right;
}
.forminator-custom-form .forminator-description span {
  font-style: normal;
}

/* Top-of-form response banner (errors AND success).
   Forminator toggles aria-hidden — we follow that. */
.forminator-custom-form .forminator-response-message {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 4px;
  border-left: 3px solid var(--bledje-rood);
  font-size: 0.92rem;
  line-height: 1.5;
  display: none;
}
.forminator-custom-form .forminator-response-message[aria-hidden="false"]:not(:empty),
.forminator-custom-form .forminator-response-message.forminator-show {
  display: block;
}
.forminator-custom-form .forminator-response-message.forminator-error {
  background: rgba(200, 16, 46, 0.06);
  border-left-color: var(--bledje-rood);
  color: var(--bledje-rood-diep);
}
.forminator-custom-form .forminator-response-message.forminator-success {
  background: rgba(46, 125, 50, 0.06);
  border-left-color: #2e7d32;
  color: #1b5e20;
}

/* Admin "Formulier bewerken" link — only visible to logged-in editors,
   but make it subtle so it doesn't fight the form visually. */
.forminator-edit-module {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity var(--bledje-trans);
}
.forminator-edit-module:hover {
  opacity: 1;
}
.forminator-edit-module a {
  color: var(--bledje-subtiel);
  text-decoration: underline;
  text-decoration-color: var(--bledje-lijn);
  text-underline-offset: 2px;
}

/* reCAPTCHA: don't let the row eat vertical space when invisible
   (badge is fixed-positioned anyway). */
.forminator-custom-form .forminator-field-captcha:empty,
.forminator-custom-form .forminator-g-recaptcha.recaptcha-invisible {
  margin: 0;
}

textarea {
  min-height: var(--forminator-textarea-min-height, 140px);
  resize: vertical;
}
.forminator-custom-form textarea {
  min-height: var(--forminator-textarea-min-height, 140px);
}

/* Row layout for Forminator's grid */
.forminator-custom-form .forminator-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.1rem;
}
.forminator-custom-form .forminator-row:last-of-type,
.forminator-custom-form .forminator-row-last {
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.forminator-custom-form .forminator-col {
  flex: 1 1 100%;
  min-width: 0;
}
.forminator-custom-form .forminator-col-md-6 {
  flex: 1 1 calc(50% - 0.5rem);
  min-width: 200px;
}
.forminator-custom-form .forminator-col-12 {
  flex: 1 1 100%;
}
.forminator-custom-form .forminator-field {
  margin: 0;
}
.forminator-custom-form .forminator-no-margin {
  margin: 0;
}

/* ────────────────────────────────────────────────────
   Custom radio + checkbox styling.

   v2.4.0 first try used sibling-span replacements
   (.forminator-radio-bullet / -checkbox-box) and hid the
   native input — that broke because those spans aren't
   actually emitted by Forminator in this setup, so the
   controls vanished.

   v2.4.0 second pass styles the native <input> DIRECTLY
   with appearance:none. Works in any plugin, in any
   markup. Robust to label/ wrapper changes.

   v2.4.0 THIRD pass: bump specificity. Forminator's own
   plugin CSS uses `.forminator-custom-form .forminator-radio
   input[type="radio"] { position:absolute !important; ... }`
   to hide native inputs, and at equal specificity their
   later-loaded stylesheet wins. We stack THREE classes on
   the form element (`.forminator-ui`, `.forminator-custom-form`,
   `.forminator-design--default` — all always present per
   Forminator's render) to outrank them.
   ──────────────────────────────────────────────────── */

.forminator-ui.forminator-custom-form input[type="radio"],
.forminator-ui.forminator-custom-form input[type="checkbox"],
.forminator-ui.forminator-custom-form.forminator-design--default input[type="radio"],
.forminator-ui.forminator-custom-form.forminator-design--default input[type="checkbox"],
form.forminator-custom-form input[type="radio"],
form.forminator-custom-form input[type="checkbox"],
.bledje-form-container input[type="radio"],
.bledje-form-container input[type="checkbox"],
.entry-content form input[type="radio"],
.entry-content form input[type="checkbox"],
.wp-block-post-content form input[type="radio"],
.wp-block-post-content form input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  display: inline-block !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  max-width: none !important;
  margin: 0 0.55rem 0 0 !important;
  padding: 0 !important;
  border: 1.5px solid var(--bledje-lijn) !important;
  background: #fff !important;
  vertical-align: -3px;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: border-color var(--bledje-trans), background var(--bledje-trans), box-shadow var(--bledje-trans);
  /* override any Forminator visually-hidden tricks */
  clip: auto !important;
  clip-path: none !important;
  overflow: visible !important;
}

.forminator-ui.forminator-custom-form input[type="radio"],
.forminator-ui.forminator-custom-form.forminator-design--default input[type="radio"],
form.forminator-custom-form input[type="radio"],
.bledje-form-container input[type="radio"],
.entry-content form input[type="radio"],
.wp-block-post-content form input[type="radio"] {
  border-radius: 50% !important;
}
.forminator-ui.forminator-custom-form input[type="checkbox"],
.forminator-ui.forminator-custom-form.forminator-design--default input[type="checkbox"],
form.forminator-custom-form input[type="checkbox"],
.bledje-form-container input[type="checkbox"],
.entry-content form input[type="checkbox"],
.wp-block-post-content form input[type="checkbox"] {
  border-radius: 3px !important;
}

/* Hover / focus */
.forminator-ui.forminator-custom-form input[type="radio"]:hover,
.forminator-ui.forminator-custom-form input[type="checkbox"]:hover,
form.forminator-custom-form input[type="radio"]:hover,
form.forminator-custom-form input[type="checkbox"]:hover,
.bledje-form-container input[type="radio"]:hover,
.bledje-form-container input[type="checkbox"]:hover {
  border-color: var(--bledje-rood) !important;
}
.forminator-ui.forminator-custom-form input[type="radio"]:focus-visible,
.forminator-ui.forminator-custom-form input[type="checkbox"]:focus-visible,
form.forminator-custom-form input[type="radio"]:focus-visible,
form.forminator-custom-form input[type="checkbox"]:focus-visible,
.bledje-form-container input[type="radio"]:focus-visible,
.bledje-form-container input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.18) !important;
  border-color: var(--bledje-rood) !important;
}

/* RADIO — checked state: red ring + red dot */
.forminator-ui.forminator-custom-form input[type="radio"]:checked,
form.forminator-custom-form input[type="radio"]:checked,
.bledje-form-container input[type="radio"]:checked,
.entry-content form input[type="radio"]:checked,
.wp-block-post-content form input[type="radio"]:checked {
  border-color: var(--bledje-rood) !important;
}
.forminator-ui.forminator-custom-form input[type="radio"]:checked::after,
form.forminator-custom-form input[type="radio"]:checked::after,
.bledje-form-container input[type="radio"]:checked::after,
.entry-content form input[type="radio"]:checked::after,
.wp-block-post-content form input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bledje-rood);
}

/* CHECKBOX — checked state: red fill + white tick */
.forminator-ui.forminator-custom-form input[type="checkbox"]:checked,
form.forminator-custom-form input[type="checkbox"]:checked,
.bledje-form-container input[type="checkbox"]:checked,
.entry-content form input[type="checkbox"]:checked,
.wp-block-post-content form input[type="checkbox"]:checked {
  background: var(--bledje-rood) !important;
  border-color: var(--bledje-rood) !important;
}
.forminator-ui.forminator-custom-form input[type="checkbox"]:checked::after,
form.forminator-custom-form input[type="checkbox"]:checked::after,
.bledje-form-container input[type="checkbox"]:checked::after,
.entry-content form input[type="checkbox"]:checked::after,
.wp-block-post-content form input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* NOTE: previous versions defensively hid .forminator-radio-bullet
   and .forminator-checkbox-box assuming Forminator wouldn't emit them.
   If your install DOES emit them, leaving them visible alongside the
   native input would show two controls. Keep them hidden ONLY when
   they appear as siblings of an already-styled native input, not
   universally. */
.forminator-ui.forminator-custom-form .forminator-radio input[type="radio"] ~ .forminator-radio-bullet,
.forminator-ui.forminator-custom-form .forminator-checkbox input[type="checkbox"] ~ .forminator-checkbox-box {
  display: none !important;
}

/* Wrapper labels around radios/checkboxes — keep their text and the
   custom input nicely aligned. */
.forminator-custom-form .forminator-radio,
.forminator-custom-form .forminator-checkbox,
.bledje-form-container label.bledje-radio,
.bledje-form-container label.bledje-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 1.25rem 0.5rem 0;
  padding: 0.35rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--bledje-inkt);
  font-weight: 500;
  line-height: 1.45;
}
.forminator-custom-form .forminator-checkbox,
.bledje-form-container label.bledje-checkbox {
  align-items: flex-start;
}
.forminator-custom-form .forminator-checkbox-label,
.forminator-custom-form .forminator-radio-label {
  flex: 1;
}

/* Radio/checkbox group label (the question above) */
.forminator-custom-form .forminator-field[role="radiogroup"] > .forminator-label,
.forminator-custom-form .forminator-field[role="group"] > .forminator-label,
.forminator-custom-form .forminator-field span.forminator-label {
  display: block;
  margin-bottom: 0.65rem;
}

/* Submit button — matches the bledje-cta look */
.forminator-custom-form .forminator-button-submit,
.bledje-form-container button[type="submit"],
.bledje-form-container input[type="submit"],
.entry-content form button[type="submit"],
.entry-content form input[type="submit"],
.wp-block-post-content form button[type="submit"],
.wp-block-post-content form input[type="submit"] {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--bledje-rood);
  color: #fff;
  border: 0;
  font-family: var(--wp--preset--font-family--sans), system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 0.85em 2em;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--bledje-trans), background var(--bledje-trans), box-shadow var(--bledje-trans);
  margin-top: 0.5rem;
}
.forminator-custom-form .forminator-button-submit:hover,
.bledje-form-container button[type="submit"]:hover,
.bledje-form-container input[type="submit"]:hover,
.entry-content form button[type="submit"]:hover,
.entry-content form input[type="submit"]:hover,
.wp-block-post-content form button[type="submit"]:hover,
.wp-block-post-content form input[type="submit"]:hover {
  background: var(--bledje-rood-diep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(200, 16, 46, 0.25);
}

/* reCAPTCHA badge container — strip extra spacing */
.forminator-custom-form .forminator-field-captcha {
  margin: 0.5rem 0;
}

/* ═══════════════════════════════════════════════════
   LOGO MARQUEE — continuous horizontal slider voor adverteerders
   ═══════════════════════════════════════════════════ */
.bledje-logo-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  padding: 1rem 0;
}

.bledje-logo-marquee .wp-block-gallery,
.bledje-logo-marquee .bledje-marquee-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  align-items: center !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
  margin: 0 !important;
  animation: bledje-marquee var(--bledje-marquee-duration, 60s) linear infinite;
}
.bledje-logo-marquee:hover .wp-block-gallery,
.bledje-logo-marquee:hover .bledje-marquee-track,
.bledje-logo-marquee:focus-within .wp-block-gallery,
.bledje-logo-marquee:focus-within .bledje-marquee-track {
  animation-play-state: paused;
}

.bledje-logo-marquee .wp-block-image,
.bledje-logo-marquee figure.wp-block-image {
  flex: 0 0 auto !important;
  width: clamp(96px, 12vw, 140px) !important;
  max-width: 140px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.bledje-logo-marquee .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(0.55) contrast(0.95);
  opacity: 0.88;
  transition: filter var(--bledje-trans), opacity var(--bledje-trans), transform var(--bledje-trans);
}
.bledje-logo-marquee .wp-block-image:hover img {
  filter: grayscale(0) contrast(1);
  opacity: 1;
  transform: scale(1.06);
}

@keyframes bledje-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.bledje-logo-marquee:not(.is-ready) .wp-block-gallery,
.bledje-logo-marquee:not(.is-ready) .bledje-marquee-track {
  animation: none;
}

/* ═══════════════════════════════════════════════════
   SCROLL FADE-IN
   ═══════════════════════════════════════════════════ */
.bledje-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.bledje-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   BACK-TO-TOP
   ═══════════════════════════════════════════════════ */
.bledje-totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 48px;
  height: 48px;
  border: 0;
  background: var(--bledje-rood);
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--bledje-trans), visibility var(--bledje-trans), transform var(--bledje-trans), background var(--bledje-trans);
  z-index: 90;
  box-shadow: var(--bledje-shadow);
}
.bledje-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.bledje-totop:hover {
  background: var(--bledje-rood-diep);
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════
   MOBILE BREAKPOINTS
   ═══════════════════════════════════════════════════ */

/* Tablet & below — show hamburger, hide desktop nav + cta */
@media (max-width: 900px) {
  .bledje-burger {
    display: inline-flex;
  }
  .bledje-primary-nav,
  .bledje-cta-wrap {
    display: none !important;
  }
  :root {
    --bledje-header-h: 76px;
  }
  .bledje-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .bledje-hero-text {
    text-align: left;
  }
  .bledje-hero-visual {
    margin-top: 0 !important;
  }
  .bledje-hero-haan img {
    animation-duration: 8s;
  }
  .bledje-logo-marquee .wp-block-image {
    width: 96px !important;
  }
  .bledje-logo-marquee .wp-block-image img {
    max-height: 60px;
  }
  /* Footer: stack 3-col into 1 */
  .bledje-footer-cols {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .bledje-footer-credits {
    justify-content: flex-start;
  }
}

/* Phone */
@media (max-width: 600px) {
  .bledje-brand-text .wp-block-site-tagline {
    display: none;
  }
  .wp-block-site-logo img {
    height: 52px;
  }

  .bledje-hero-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .bledje-hero-buttons .wp-block-button {
    width: 100%;
  }
  .bledje-hero-buttons .wp-block-button__link {
    display: block;
    text-align: center;
  }

  .bledje-footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left;
    gap: 1.25rem;
  }
  .bledje-footer-credits {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .bledje-footer-copy {
    white-space: normal;
    font-size: 0.78rem;
  }

  /* Forminator: side-by-side cols also stack on phone */
  .forminator-custom-form .forminator-col-md-6 {
    flex: 1 1 100%;
  }

  .bledje-totop {
    width: 42px;
    height: 42px;
    right: 0.85rem;
    bottom: 0.85rem;
  }
}

/* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .bledje-reveal {
    opacity: 1;
    transform: none;
  }
  .bledje-mobile-link,
  .bledje-mobile-cta,
  .bledje-mobile-meta {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .bledje-logo-marquee {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .bledje-logo-marquee .wp-block-gallery,
  .bledje-logo-marquee .bledje-marquee-track {
    animation: none !important;
    transform: none !important;
  }
  .bledje-hero-haan img {
    animation: none !important;
  }
  .wp-block-site-logo a:hover img,
  .wp-block-site-logo:hover img {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════ */
@media print {
  .wp-block-navigation,
  .wp-block-button,
  .bledje-burger,
  .bledje-mobile-menu,
  .bledje-totop,
  .bledje-newsletter,
  .bledje-logo-marquee,
  .bledje-footer { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .bledje-header { position: static !important; }
  header.wp-block-template-part { min-height: 0 !important; }
  .is-style-bledje-redrule {
    background: var(--bledje-rood) !important;
  }
}