/* Bold theme — component styles, applied via "Additional CSS class(es)" on core blocks. */

/* Generic page hero (templates/page.html). When the page has a featured
   image, functions.php injects it as a background-image + "has-photo" class
   at render time only (never into stored block HTML) and this covers the
   decorative blur blobs with a dark gradient for title legibility. Pages
   without a featured image keep the plain glow-blob background as before. */
.bold-page-hero.has-photo{ background-size:cover; background-position:center; }
.bold-page-hero.has-photo::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.92) 100%); pointer-events:none; }
.bold-page-hero.has-photo .bold-page-hero__blob{ display:none; }
.bold-page-hero.has-photo > .wp-block-group{ position:relative; z-index:2; }

/* No gap between the sticky header and whatever comes right after it
   (WP adds a default block-gap margin between top-level blocks). */
header.wp-block-template-part + *{ margin-block-start:0 !important; }

/* Safe side gutter so content never touches the screen edge, incl. mobile */
.wp-block-group.is-layout-constrained{
  padding-left:24px;
  padding-right:24px;
}

/* True edge-to-edge full-bleed, independent of WP's root-padding-aware
   alignment system (which needs theme.json wiring we don't have inside
   post-content). */
.wp-block-group.alignfull{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding-left:24px;
  padding-right:24px;
  box-sizing:border-box;
}
main .wp-block-group.alignfull{ margin-block-start:0 !important; margin-block-end:0 !important; }

header.wp-block-template-part:has(.is-menu-open){
  transform:none !important;
}

/* Sticky header. WordPress auto-wraps the "header" template part in its own
   <header class="wp-block-template-part"> that is exactly as tall as our
   header — leaving position:sticky on the inner header zero room to stick
   within that tight-fitting parent. Fix: make the OUTER auto-wrapper the
   sticky element (it sits among the page's other sections, so it has the
   whole page height to work with); the inner header just rides along. */
header.wp-block-template-part{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  transition:transform .3s ease;
}
header.wp-block-template-part.bold-header-hidden{
  transform:translateY(-100%);
}
@media (prefers-reduced-motion:reduce){ header.wp-block-template-part{ transition:none; } }

:root{
  --bold-black:#0A0A0A; --bold-surface:#161616; --bold-surface-2:#202020; --bold-border:#2E2E2E;
  --bold-white:#FFFFFF; --bold-muted:#A8A8A8;
  --bold-coral:#FF2D6B; --bold-coral-deep:#D81B4A;
  --bold-gold:#FF5A2B; --bold-gold-deep:#D9450F;
  --bold-gradient:linear-gradient(135deg, var(--bold-coral) 0%, var(--bold-gold) 100%);
  --bold-shadow:0 14px 34px -14px rgba(0,0,0,.6);
}

/* Mobile nav overlay — breathing room + bigger, centered touch targets */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding:110px 32px 40px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  gap:28px !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--display);
  font-size:1.9rem;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.wp-block-navigation__responsive-container.is-menu-open .bold-nav-cta{
  margin-top:12px;
}
/* Language switcher relocated here on mobile by header.js — bigger touch
   targets than the compact header-bar version, centered under the CTA. */
.wp-block-navigation__responsive-container.is-menu-open .bold-lang-switcher{
  margin-top:24px;
  justify-content:center;
  gap:16px;
}
.wp-block-navigation__responsive-container.is-menu-open .bold-lang-switcher img{
  width:28px !important;
  height:auto !important;
}
.wp-block-navigation__responsive-container-close{
  top:28px !important;
  right:24px !important;
}

/* Nav links: display font, uppercase, small caps feel. Anton is een smal,
   dicht lettertype — bij kleine formaten in hoofdletters heeft het meer
   letter-spacing nodig om leesbaar te blijven, vandaar .04em -> .07em hier
   (en overal elders waar Anton in hoofdletters/klein voorkomt). */
.bold-nav .wp-block-navigation-item__content{
  font-family:var(--wp--preset--font-family--display);
  font-weight:400;
  letter-spacing:.07em;
  text-transform:uppercase;
  font-size:1.05rem;
}
.bold-nav .wp-block-navigation-item__content:hover{ color:var(--bold-gold) !important; }
.bold-nav-cta .wp-block-button__link{ font-size:.85rem; padding:10px 20px; }

/* Quote attribution (review teasers) */
.bold-attribution{ font-family:var(--wp--preset--font-family--display); }

/* Centered text (used where a section needs centered content) */
.bold-text-center{ text-align:center; }

/* Hero — full-bleed photo with the title/CTA content on top */
/* min-height is now set per-block via the editor's own "Minimum height"
   field (Dimensions panel — enabled site-wide by appearanceTools:true in
   theme.json), so the client can resize the hero themselves without
   touching code. This is just a sane fallback if that field is ever
   cleared. */
.bold-hero{ position:relative; overflow:hidden; min-height:420px; display:flex; align-items:flex-end; }
.bold-hero-bg{ position:absolute; inset:0; margin:0; z-index:0; }
.bold-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.bold-hero-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,.6) 55%,rgba(10,10,10,.96) 100%); }
.bold-hero-content{ position:relative; z-index:2; padding:60px 24px 56px; max-width:1160px; margin:0 auto; width:100%; box-sizing:border-box; }
.bold-hero-title{ font-size:clamp(2.6rem,7vw,4.6rem); line-height:.95; margin:0 0 20px; max-width:26ch; }
.bold-hero-text{ color:#D5D5D5; max-width:56ch; font-size:1.05rem; line-height:1.6; margin:0 0 28px; }
.bold-hero .wp-block-buttons{ margin:0; }

/* Footer */
.bold-footer-bar{ height:3px; background:linear-gradient(90deg,#FF2D6B,#FF5A2B); margin-bottom:56px; }
.bold-footer-logo{ display:flex; align-items:center; text-decoration:none; }
.bold-footer-logo img{ height:32px; width:auto; display:block; }
.bold-footer-tagline{ color:#A8A8A8; font-size:.9rem; margin-top:14px; max-width:32ch; }
.bold-footer-heading{ font-family:var(--wp--preset--font-family--display); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bold-gold); margin:0 0 14px; }
.bold-footer-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.bold-footer-list li{ margin:0; }
.bold-footer-list a{ color:#D5D5D5; text-decoration:none; font-size:.92rem; }
.bold-footer-list a:hover{ color:var(--bold-gold); }
.bold-footer-social{ gap:14px !important; }
.bold-footer-social .wp-block-social-link{ width:auto; height:auto; }
.bold-footer-social .wp-social-link a{ padding:0; color:#D5D5D5; }
.bold-footer-social .wp-social-link svg{ width:20px; height:20px; }
.bold-footer-social .wp-social-link:hover{ background:transparent; color:var(--bold-gold); }
.bold-footer-divider{ height:1px; background:#2E2E2E; margin:36px 0 20px; }
.bold-footer-bottom{ font-size:.8rem; color:#A8A8A8; }
.bold-footer-bottom p{ margin:0; }
.bold-footer-credit a{ color:#A8A8A8; text-decoration:underline; text-decoration-color:#2E2E2E; }
.bold-footer-credit a:hover{ color:var(--bold-gold); text-decoration-color:var(--bold-gold); }

/* Eyebrow label */
.bold-eyebrow{font-family:var(--wp--preset--font-family--display);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bold-gold);}

/* Gradient text helper — usable via "Additional CSS class" on any heading/paragraph */
.bold-gradient-text{background:var(--bold-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Buttons */
.wp-block-button__link{transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;}
.wp-block-button__link:hover{transform:translateY(-1px);}
/* Buttons met expliciet oranje ("gold") als achtergrondkleur: effen kleur,
   geen verloop meer (matcht de titelkleur var(--wp--preset--color--gold)).
   Alleen deze klasse, zodat knoppen met een andere, bewust gekozen stijl
   (bv. zwart met witte rand/tekst) hun eigen styling houden. */
.wp-block-button__link.has-gold-background-color{ background:var(--wp--preset--color--gold) !important; color:var(--wp--preset--color--white) !important; }
main a:not(.wp-element-button){
  color:var(--bold-coral);
  text-decoration-color:var(--bold-border);
  transition:color .15s ease, text-decoration-color .15s ease;
}
main a:not(.wp-element-button):hover{ color:var(--bold-gold); text-decoration-color:var(--bold-gold); }

/* Product photo — fill the card width as a clean square crop instead of
   showing the small 300x300 source at its native size with empty space
   around it. */
.bold-product-photo{ margin:0; aspect-ratio:1/1; overflow:hidden; background:var(--bold-surface-2); }
.bold-product-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Perskit bandfoto's — stacked full-width, with spacing between them */
.bold-perskit-photo{ margin:0 0 24px; }
.bold-perskit-photo img{ width:100%; height:auto; display:block; }

/* Cards */
.bold-card{background:var(--bold-surface);border:1px solid var(--bold-border);border-radius:4px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;}
.bold-card:hover{transform:translateY(-3px);box-shadow:var(--bold-shadow);}

/* Blog/news post cards */
.bold-postcard{border:1px solid var(--bold-border);border-radius:4px;overflow:hidden;}
.bold-postcard a{ text-decoration:none; }

/* Optredens / agenda / boekingsformulier — styles the "gigs-core" plugin's
   [gigs_agenda] + [gigs_boekingsformulier] shortcodes and blocks.
   The plugin's own pg-frontend.css defines --pg-color-* variables on
   .pg-agenda/.pg-booking-form-wrap/.pg-gig-view specifically so a theme can
   reskin it without a specificity fight (see that file's header comment) —
   override the VARIABLES first, then layer Bold-specific layout on top.
   The !important here is deliberate and matches the plugin's own approach
   for the same reason: this must keep working regardless of stylesheet
   load order or future changes on the plugin side. */
.pg-booking-form-wrap,
.pg-agenda,
.pg-gig-view{
  --pg-color-text:var(--bold-white) !important;
  --pg-color-muted:var(--bold-muted) !important;
  --pg-color-border:var(--bold-border) !important;
  --pg-color-accent:var(--bold-gold) !important;
  --pg-color-accent-contrast:var(--bold-black) !important;
  --pg-color-bg-subtle:var(--bold-surface) !important;
  --pg-color-input-bg:var(--bold-surface) !important;
  --pg-color-input-text:var(--bold-white) !important;
  --pg-radius:2px !important;
  --pg-font:var(--wp--preset--font-family--body) !important;
}
.pg-agenda-status--vrij{ background:var(--bold-surface-2) !important; color:var(--bold-muted) !important; }
.pg-agenda-status--optie{ background:var(--bold-surface-2) !important; color:var(--bold-gold) !important; }
.pg-agenda-status--bevestigd{ background:var(--bold-surface-2) !important; color:var(--bold-white) !important; }
.pg-agenda-label--uitverkocht{ background:var(--bold-coral) !important; color:var(--bold-white) !important; }

/* Layout tweaks beyond what a colour variable can express. */
.pg-agenda{ gap:0; }
/* Plugin default is flex-wrap:wrap, which drops info onto a new "line" below
   the date as soon as it doesn't fit beside it (e.g. a long address) — force
   nowrap so the date and info always sit side by side, with the info text
   itself wrapping inside its own column instead. */
.pg-agenda-item{ border-radius:0; border-left:none; border-right:none; padding:28px 4px; position:relative; flex-wrap:nowrap; align-items:flex-start; }
.pg-agenda-datum{ padding-top:2px; }
.pg-agenda-item + .pg-agenda-item{ border-top:none; margin-top:-1px; }
.pg-agenda-item--besloten{ opacity:.75; }
.pg-agenda-datum{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:72px; font-weight:normal; position:relative; padding-right:24px; }
.pg-agenda-datum::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:2px; height:56px; background:var(--bold-coral); border-radius:2px; opacity:.7; }
.pg-agenda-dag{ display:block; font-family:var(--wp--preset--font-family--display); font-size:2.4rem; line-height:1; color:var(--bold-white); }
.pg-agenda-maand{ display:block; font-family:var(--wp--preset--font-family--display); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bold-gold); margin-top:4px; }
.pg-agenda-titel{ font-weight:700; font-size:1.15rem; }
.pg-agenda-meer-info{ align-self:flex-start; margin-top:2px; font-family:var(--wp--preset--font-family--display); text-transform:uppercase; letter-spacing:.07em; border:none !important; border-radius:2px; color:var(--bold-white) !important; background:var(--bold-gradient); padding:8px 16px; text-decoration:none !important; }
.pg-agenda-meer-info:hover{ background:var(--bold-coral); color:var(--bold-white) !important; }
.pg-agenda-meer-info.pg-agenda-tickets{ background:var(--bold-coral); }
.pg-agenda-meer-info.pg-agenda-tickets:hover{ background:var(--bold-gradient); color:var(--bold-white) !important; }
@media (max-width:560px){
  .pg-agenda-item{ padding:22px 4px; }
  .pg-agenda-datum{ min-width:52px; padding-right:18px; }
  .pg-agenda-datum::after{ height:46px; }
  .pg-agenda-dag{ font-size:1.9rem; }
  .pg-agenda-titel{ font-size:1.05rem; }
}

/* Boekingsformulier layout tweaks (colours come from the variables above). */
.pg-field--half{ min-width:0; }
.pg-button{ font-weight:normal; text-transform:uppercase; letter-spacing:.07em; }

/* Gravity Forms — dark/gold theming so booking forms match the site.
   Boekingsformulieren blijven een Gravity Forms shortcode/blok; deze CSS
   stylet het formulier zodra dat na migratie weer actief is. */
.gform_wrapper{ --gf-color-primary:var(--bold-gold); font-family:var(--wp--preset--font-family--body); }
.gform_wrapper .gform_fields{ row-gap:20px; }
.gform_wrapper label,
.gform_wrapper legend{ color:var(--bold-white) !important; font-weight:600; font-size:.92rem; }
.gform_wrapper .gform-field-label--type-sub{ color:var(--bold-muted) !important; font-weight:400; font-size:.82rem; }
.gform_wrapper .gfield_required{ color:var(--bold-coral) !important; }
.gform_wrapper .gfield_description,
.gform_wrapper .gfield_consent_description{ color:var(--bold-muted) !important; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea{
  background:var(--bold-surface) !important;
  border:1px solid var(--bold-border) !important;
  border-radius:2px !important;
  color:var(--bold-white) !important;
  padding:12px 14px !important;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder{ color:var(--bold-muted) !important; opacity:1; }
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus{
  border-color:var(--bold-gold) !important;
  box-shadow:0 0 0 1px var(--bold-gold) !important;
  outline:none !important;
}
.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer{ margin-top:8px; }
.gform_wrapper .gform_button{
  font-family:var(--wp--preset--font-family--display) !important;
  text-transform:uppercase; letter-spacing:.04em;
  background:var(--bold-gradient) !important;
  color:var(--bold-white) !important;
  border:none !important; border-radius:2px !important;
  padding:14px 30px !important; font-size:.9rem !important;
  cursor:pointer; transition:background .15s ease;
}
.gform_wrapper .gform_button:hover{ background:var(--bold-coral) !important; color:var(--bold-white) !important; }
.gform_wrapper .validation_error{
  color:var(--bold-coral) !important; border-color:var(--bold-coral) !important; background:transparent !important;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gfield_description.validation_message{
  color:var(--bold-coral) !important;
}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea{ border-color:var(--bold-coral) !important; }

/* Boekingsformulier — layout/colour basics (input bg/text, field sizing,
   required website-honeypot hiding) already come from the plugin's own CSS
   once the --pg-color-* variables above are set. What's left here is the
   asterisk colour and the two spots the plugin still hardcodes light-theme
   colours directly rather than through a variable: the datum-status text
   and the success/error form message, both of which need a dark-theme
   version or they'd show as a bright, clashing box on this site. */
.pg-field label span[aria-hidden]{ color:var(--bold-coral); }
.pg-field input:focus,
.pg-field select:focus,
.pg-field textarea:focus{ border-color:var(--bold-gold) !important; box-shadow:0 0 0 1px var(--bold-gold); outline:none; }
.pg-datum-status[data-state="checking"]{ color:var(--bold-muted) !important; }
.pg-datum-status[data-state="conflict"]{ color:var(--bold-coral) !important; }
.pg-datum-status[data-state="ok"]{ color:var(--bold-gold) !important; }
.pg-form-message[data-state="success"]{ background:var(--bold-surface) !important; color:var(--bold-gold) !important; }
.pg-form-message[data-state="error"]{ background:var(--bold-surface) !important; color:var(--bold-coral) !important; }
@media (max-width:560px){
  .pg-field--half{ flex-basis:100%; }
}
.gform_confirmation_message{ color:var(--bold-gold); font-family:var(--wp--preset--font-family--display); text-transform:uppercase; letter-spacing:.02em; }

/* Floating WhatsApp button */
.bold-whatsapp{ position:fixed; right:22px; bottom:22px; width:54px; height:54px; border-radius:50%; background:var(--bold-gradient); display:flex; align-items:center; justify-content:center; box-shadow:var(--bold-shadow); z-index:50; transition:transform .15s ease, background .15s ease; }
.bold-whatsapp:hover{ transform:scale(1.06); background:var(--bold-coral); }
.bold-whatsapp svg{ display:block; }

@media (prefers-reduced-motion:no-preference){
  .bold-float{ animation:bold-float 6s ease-in-out infinite; }
}
@keyframes bold-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* ---------------------------------------------------------------------
   Festival landing page (page-id-153): transparent overlay header, a
   full-bleed tall video hero, a swipeable photo slider (a real
   core/gallery — every photo stays an individually editable image
   block, only the scroll/snap presentation is CSS), and card-style
   grids so the page reads as clear blocks instead of stacked text.
   Scoped to this one page — the rest of the site keeps its normal
   solid sticky header.
   --------------------------------------------------------------------- */

body.page-id-153 header.wp-block-template-part{
  position:absolute !important;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent !important;
  box-shadow:none !important;
}
body.page-id-153 header.wp-block-template-part .wp-block-group.has-black-background-color{
  background:linear-gradient(to bottom, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%) !important;
  border-bottom:none !important;
}

.bold-festival-hero.wp-block-group.alignfull{
  padding:0 !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  position:relative;
}
/* A live YouTube stream stretched to "cover" a tall full-bleed hero has to
   be rendered far larger than its own source resolution, which is what
   made it blurry. A sharp still photo has no such ceiling, so it's the
   poster; the real embed block stays in the content (fully editable —
   swap the URL any time) but is visually hidden and only used as the
   data source for the video ID, which opens in a normal-sized lightbox
   on click (assets/festival-video-lightbox.js) — never upscaled. */
.bold-festival-hero-poster{ margin:0 !important; }
.bold-festival-hero-poster img{
  width:100%;
  height:88vh; min-height:560px; max-height:900px;
  object-fit:cover; display:block;
}
/* Hidden on the live site (it's only the data source the lightbox reads
   the video ID from) but NOT inside the editor — this stylesheet is also
   loaded there via add_editor_style(), and the editor's own preview
   frame is the only <body> that carries "editor-styles-wrapper", so this
   keeps the block visible and clickable there to change the video URL. */
body:not(.editor-styles-wrapper) .bold-festival-hero-video-source{ display:none !important; }

.bold-festival-hero-play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:88px; height:88px; border-radius:50%;
  background:rgba(10,10,10,.55);
  border:3px solid #fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:5; padding:0;
  transition:transform .2s ease, background-color .2s ease;
}
.bold-festival-hero-play:hover{
  transform:translate(-50%,-50%) scale(1.08);
  background-color:var(--bold-coral);
}
.bold-festival-hero-play svg{ width:30px; height:30px; fill:#fff; margin-left:4px; }

.bold-video-lightbox{
  position:fixed; inset:0;
  background:rgba(5,5,5,.92);
  display:flex; align-items:center; justify-content:center;
  z-index:9999; padding:32px; box-sizing:border-box;
}
.bold-video-lightbox[hidden]{ display:none; }
.bold-video-lightbox__inner{
  width:100%; max-width:960px; aspect-ratio:16/9; position:relative;
}
.bold-video-lightbox__inner iframe{ width:100%; height:100%; border:0; display:block; }
.bold-video-lightbox__close{
  position:absolute; top:-42px; right:0;
  color:#fff; font-size:2rem; line-height:1;
  background:none; border:0; cursor:pointer; padding:4px 8px;
}
.bold-video-lightbox__close:hover{ color:var(--bold-gold); }

.bold-festival-logo{ position:relative; z-index:2; }
.bold-festival-logo img{ max-width:840px; width:90%; margin:0 auto; }

/* Full-width photo row: every photo keeps its own natural aspect ratio —
   fixed height, width simply follows from that (no cropping) — so
   portrait and landscape shots sit naturally side by side. The row
   never needs to overflow the page itself: it's full-bleed (align:full)
   and only scrolls internally (with normal, modest padding this time —
   an earlier attempt used huge 42vw padding without box-sizing, which
   is what actually caused the page-level horizontal scrollbar bug).
   The active/featured photo simply gets a taller height, which grows
   its width proportionally too. Auto-rotation + click-to-select are
   handled by assets/festival-slider.js — every photo stays its own
   real, editable core/image block underneath (add more any time by
   inserting another image block into this row in the editor). */
.bold-festival-slider.wp-block-group{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:center;
  gap:16px !important;
  width:100%;
  max-width:100%;
  /* Fixed to the active photo's height + vertical padding so the row
     never changes size as the featured photo rotates — otherwise
     everything below it visibly jumps on every rotation. */
  height:448px;
  box-sizing:border-box;
  overflow-x:auto;
  overflow-y:hidden;
  padding:24px 5vw !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.bold-festival-slider.wp-block-group::-webkit-scrollbar{ display:none; }
.bold-festival-slider .wp-block-image{
  flex:0 0 auto !important;
  width:auto !important;
  height:260px !important;
  margin:0 !important;
  opacity:.6;
  transition:height .5s ease, opacity .5s ease;
  cursor:pointer;
  border-radius:8px;
  overflow:hidden;
}
.bold-festival-slider .wp-block-image.is-active{
  height:400px !important;
  opacity:1;
}
.bold-festival-slider .wp-block-image img{
  width:auto !important; height:260px !important;
  max-width:none !important;
  aspect-ratio:unset !important;
  object-fit:contain !important; border-radius:8px; display:block;
  box-shadow:var(--bold-shadow);
  transition:height .5s ease;
}
.bold-festival-slider .wp-block-image.is-active img{
  height:400px !important;
}
@media (max-width:599px){
  .bold-festival-slider.wp-block-group{ height:320px; padding:16px 8vw !important; gap:10px !important; }
  .bold-festival-slider .wp-block-image,
  .bold-festival-slider .wp-block-image img{ height:200px !important; }
  .bold-festival-slider .wp-block-image.is-active,
  .bold-festival-slider .wp-block-image.is-active img{ height:280px !important; }
}

.bold-feature-card, .bold-anthem-card{
  background:var(--bold-surface);
  border:1px solid var(--bold-border);
  border-radius:4px;
  padding:28px;
  height:100%;
  box-sizing:border-box;
}
.bold-feature-card h3, .bold-anthem-card h3{ margin-top:0; }

/* Flags-only language switcher (assets: [bold_lang_switcher] shortcode,
   see functions.php) — pll_the_languages() outputs bare <li> items with
   no <ul> wrapper, so without this they stack vertically with default
   browser bullets instead of sitting inline next to the nav. */
.bold-lang-switcher{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;
}
.bold-lang-switcher li{
  list-style:none;
  margin:0;
  display:flex;
}
.bold-lang-switcher a{
  display:flex;
  align-items:center;
  opacity:.55;
  transition:opacity .2s ease;
}
.bold-lang-switcher a[aria-current="true"],
.bold-lang-switcher a:hover{
  opacity:1;
}
.bold-lang-switcher img{
  display:block;
  border-radius:2px;
  /* Polylang zet zelf width="16" height="11" + een inline style op de
     <img> — !important nodig om dat te overrulen. */
  width:22px !important;
  height:auto !important;
}