@charset "UTF-8";
/* ============================================
   WILLEM VAN ORANJE — DE MUSICAL
   THEME SHARED STYLES

   Gedeelde styles voor alle blocks. Bron van waarheid voor
   kleuren, fonts, vorm en de gedeelde helper-classes.
   Spiegelt blocks-examples/modules/_brand/{brand,components-base,media}.css

   Compileren: npx gulp theme   (of npx gulp build / npx gulp watch)
   ============================================ */
/* --- Huisstijl-font: Beaufort for LOL --- */
/* pad is relatief t.o.v. blocks/assets/css/theme.css */
/*
 * Tien echte snitten: vijf gewichten (Light 300, Regular 400, Medium 500,
 * Bold 700, Heavy 900), elk met een cursieve tegenhanger. Elke @font-face
 * geeft precies één gewicht op — geen bereik. Een bereik opgeven vertelt de
 * browser dat één bestand alles daartussen dekt, en dan ziet 700 er precies
 * zo uit als 400.
 *
 * Er is geen 600. Vraagt de CSS daarom, dan pakt de browser volgens de
 * CSS-matchingregels de eerstvolgende zwaardere échte snit: Bold (700).
 *
 * Bestandsnamen exact zoals ze in /fonts staan — de live server is
 * case-sensitive, anders dan macOS. De .ttf staat achteraan als vangnet;
 * in de praktijk laadt elke browser de woff2 (±34 KB tegen ±97 KB).
 */
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Light.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Light.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-LightItalic.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-LightItalic.woff") format("woff"), url("../../../fonts/BeaufortforLOL-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Regular.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Regular.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Italic.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Italic.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Medium.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Medium.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-MediumItalic.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-MediumItalic.woff") format("woff"), url("../../../fonts/BeaufortforLOL-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Bold.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Bold.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-BoldItalic.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-BoldItalic.woff") format("woff"), url("../../../fonts/BeaufortforLOL-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-Heavy.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-Heavy.woff") format("woff"), url("../../../fonts/BeaufortforLOL-Heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Beaufort for LOL";
  src: url("../../../fonts/BeaufortforLOL-HeavyItalic.woff2") format("woff2"), url("../../../fonts/BeaufortforLOL-HeavyItalic.woff") format("woff"), url("../../../fonts/BeaufortforLOL-HeavyItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
/*
 * Nepvet én nepcursief uit: elk gewicht en elke cursief bestaat nu als echt
 * bestand, dus de browser hoeft er niets meer bij te verzinnen. Verzonnen
 * snitten staan naast de echte uitgesmeerd of scheefgetrokken.
 */
:root {
  font-synthesis: none;
}

/* --- CSS Custom Properties --- */
:root {
  /* ---- Merkkleuren — brandguide §2.
     Enige plek waar een kleur letterlijk staat. ---- */
  /* Primair */
  --navy: #00164D;
  --orange: #D0772E;
  --white: #FFFFFF;
  /* Secundair — staan zo in de brandguide, geen afgeleiden */
  --navy-hover: #00164E;
  --blue-grey: #334471;
  --grey-light: #E8EAEC;
  --grey-mid: #555555;
  --blue-light: #E5EDFF;
  /* ---- Afgeleid — niet met de hand invullen ---- */
  --navy-deep: color-mix(in srgb, var(--navy) 50%, black);
  --orange-deep: color-mix(in srgb, var(--orange) 87%, black);
  --line: color-mix(in srgb, var(--navy) 12%, transparent);
  --line-light: color-mix(in srgb, var(--white) 14%, transparent);
  /* Schaduw & overlay — basiskleur zonder alpha. Alpha per gebruik:
     box-shadow: 0 24px 50px rgb(from var(--shadow-color) r g b / .12); */
  --shadow-color: var(--navy-deep);
  --overlay: var(--navy-deep);
  /* Typografie — één huisstijl-font voor alle tekst (brandguide §3) */
  --font-display: "Beaufort for LOL", system-ui, sans-serif;
  --font-body: "Beaufort for LOL", system-ui, sans-serif;
  /* Maat & vorm */
  --maxw: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 0; /* vlak ontwerp: geen radius. Zet op 14px voor ronde hoeken. */
  --radius-sm: 0;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Formuliervelden */
  --surface: var(--white);
  --field-line: rgb(from var(--navy) r g b / .14);
  --field-line-strong: rgb(from var(--navy) r g b / .32);
  --field-placeholder: rgb(from var(--navy) r g b / .58);
  --error: #C0392B;
}

/* --- Base --- */
body {
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body) !important;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

p, li, td, th, input, textarea, select, label {
  font-family: var(--font-body) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--orange);
  color: var(--white);
}

/* --- Typografie-helpers --- */
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  color: var(--navy);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
  margin: 0 0 0.85rem;
  color: var(--navy);
}

.lead {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--grey-mid);
  /*
   * Bootstrap zet `.lead { font-weight: 300 }`. Een class wint van de
   * `p, li`-regel in scss/_base.scss, dus zonder deze regel blijft de
   * inleiding Light terwijl de rest van de leestekst Regular is.
   * theme.css laadt na bootstrap.min.css, dus dit wint.
   */
  font-weight: 400;
}

.eyebrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 1rem;
}

.u-accent {
  color: var(--orange);
  font-style: italic;
}

/* --- Tekstkleur-schema's ---

   Zet één van deze classes op een sectie of een wrapper daarbinnen; alles
   eronder volgt: bovenkopje, koppen, lopende tekst en de omlijnde knop. Zo
   hoeft een block dat op een donkere of lichte ondergrond staat geen eigen
   kleuren te herhalen — dat was tot nu toe in elk block apart overgeschreven.

   Het bovenkopje wijkt bewust af van de rest: op een donkere ondergrond
   blijft het oranje (dat leest daar prima en het is de accentkleur), op een
   licht of oranje vlak wordt het marineblauw, want oranje op oranje is
   onzichtbaar.

   LET OP de laadvolgorde: theme.css komt vóór de style.css van een block.
   Een block-regel met gelijke specificiteit wint dus hiervan. Zet in
   block-SCSS daarom géén kleuren meer op koppen, tekst of bovenkopje — geef
   het block een van deze classes mee vanuit render.php. */
.u-text-white {
  color: var(--white);
}
.u-text-white .eyebrow {
  color: var(--orange);
}
.u-text-white h1, .u-text-white h2, .u-text-white h3, .u-text-white h4, .u-text-white h5, .u-text-white h6,
.u-text-white .h2, .u-text-white .h3 {
  color: var(--white);
}
.u-text-white p {
  color: var(--white);
}

.u-text-navy {
  color: var(--navy);
  /* Een omlijnde knop is standaard wit omrand en dus onzichtbaar op een licht
     vlak — precies de situatie waarin je dit schema kiest. */
}
.u-text-navy .eyebrow {
  color: var(--navy);
}
.u-text-navy h1, .u-text-navy h2, .u-text-navy h3, .u-text-navy h4, .u-text-navy h5, .u-text-navy h6,
.u-text-navy .h2, .u-text-navy .h3 {
  color: var(--navy);
}
.u-text-navy p {
  color: rgb(from var(--navy) r g b/0.78);
}
.u-text-navy .btn--ghost {
  --bg: transparent;
  --fg: var(--navy);
  --bg-hover: var(--navy);
  --fg-hover: var(--white);
  border-color: rgb(from var(--navy) r g b/0.45);
}

/* --- Links --- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  text-decoration: none;
  color: var(--orange);
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.link:hover::after {
  transform: scaleX(1);
}

.link--sm {
  font-size: 0.9rem;
}

/* --- Knoppen — hover wisselt alleen van kleur; vulling = border --- */
.btn {
  --bg: var(--orange);
  --fg: var(--white);
  --bg-hover: var(--orange-deep);
  --fg-hover: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--fg);
  background: var(--bg);
  border: 1.5px solid var(--bg);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover {
  color: var(--fg-hover);
  background: var(--bg-hover);
  border-color: var(--bg-hover);
}

.btn--ghost {
  --bg: transparent;
  --fg: var(--white);
  --bg-hover: var(--white);
  --fg-hover: var(--navy);
  border-color: rgb(from var(--white) r g b/0.45);
}

.btn--navy {
  --bg: var(--navy);
  --fg: var(--white);
  --bg-hover: var(--orange);
  --fg-hover: var(--white);
}

/* Material Symbols in knoppen: schaalt mee met de knoptekst */
.material-symbols-rounded,
.material-symbols-outlined {
  -webkit-font-smoothing: antialiased;
}

.btn .material-symbols-rounded,
.btn .material-symbols-outlined {
  font-size: 1.35em;
  margin-right: 0.45em;
}

.btn--lg {
  padding: 1.05rem 2.2rem;
  font-size: 1rem;
}

.btn--sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
}

.btn--block {
  width: 100%;
}

.btn--arrow::after {
  content: "→";
  margin-left: 0.5em;
}

/* --- Layout-helpers --- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
}

.section--narrow {
  max-width: 880px;
}

.section--dark {
  max-width: none;
  background: var(--navy-deep);
  color: var(--white);
}
.section--dark .section-head {
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
}
.section--dark .h2 {
  color: var(--white);
}
.section--dark .lead {
  color: var(--white);
}

.section-head {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  max-width: 720px;
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head--center .eyebrow {
  display: block;
}

/* --- Media (duotone-beelden uit _brand/media.css) --- */
.media {
  position: relative;
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--tall {
  aspect-ratio: 4/5;
}

.media--2x3 {
  aspect-ratio: 2/3;
} /* portretfoto's zoals ze geschoten zijn (cast) */
.media--square {
  aspect-ratio: 1/1;
}

.media--wide {
  aspect-ratio: 3/2;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}

.media--portrait {
  aspect-ratio: 5/6;
}

/* --- Grain overlay --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- Pop-up (dialog) ---

   Gedeelde modal op basis van <dialog> + showModal(): Esc, focus vasthouden en
   terugzetten doet de browser. Eerst alleen in sticky-tabs (Cast & Creatives);
   nu ook bij de zaalplattegrond in Ticketprijzen. Gebruik:

     <dialog class="dialog [dialog--light] [dialog--wide]">
       <button class="dialog__close" aria-label="Sluiten">&times;</button>
       …inhoud…
     </dialog>

   Het openen en de scroll-lock van de body doet het script van het block;
   sluiten bij een klik op de achtergrond ook (event.target === dialog). */
.dialog {
  /* Centreren moet hier expliciet: de theme-brede reset in scss/_reset.scss
     (`body, html, * { margin: 0 }`) overschrijft de browserregel
     `dialog:modal { margin: auto }`, en dan plakt de modal met inset 0
     linksboven in het venster. */
  inset: 0;
  margin: auto;
  width: min(46rem, 100vw - 2rem);
  max-height: min(44rem, 100dvh - 2rem);
  padding: 0;
  border: 0;
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
  /* Zachte in-/uitgang. transition-behavior: allow-discrete laat display en
     overlay meelopen, zodat ook het sluiten animeert; @starting-style geeft
     de begintoestand bij het openen. Browsers zonder deze ondersteuning
     tonen de modal gewoon direct. */
  opacity: 0;
  transform: translateY(1.25rem) scale(0.98);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), overlay 0.32s var(--ease) allow-discrete, display 0.32s var(--ease) allow-discrete;
}
.dialog[open] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.dialog::backdrop {
  background: rgb(from var(--overlay) r g b/0.78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.32s var(--ease), overlay 0.32s var(--ease) allow-discrete, display 0.32s var(--ease) allow-discrete;
}
.dialog[open]::backdrop {
  opacity: 1;
}

@starting-style {
  .dialog[open] {
    opacity: 0;
    transform: translateY(1.25rem) scale(0.98);
  }
  .dialog[open]::backdrop {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog,
  .dialog::backdrop {
    transition: none;
  }
  .dialog {
    opacity: 1;
    transform: none;
  }
}
/* Licht vlak, voor beelden met donkere details (zoals de zaalplattegrond). */
.dialog--light {
  background: var(--white);
  color: var(--navy);
}

.dialog--wide {
  width: min(60rem, 100vw - 2rem);
  max-height: calc(100dvh - 2rem);
}

.dialog__close {
  position: absolute;
  z-index: 1;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--white);
  background: rgb(from var(--white) r g b/0.12);
  border: 0;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.dialog__close:hover {
  background: var(--orange);
}
.dialog__close:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.dialog--light .dialog__close {
  color: var(--navy);
  background: rgb(from var(--navy) r g b/0.08);
}
.dialog--light .dialog__close:hover {
  color: var(--white);
  background: var(--orange);
}