/*
Theme Name: Julia Child (of GeneratePress)
Description: Editorial magazine-style child theme voor Julias Kookstudio. Warm creme + charcoal + terracotta, Cormorant serif + Inter body. Ottolenghi-inspired.
Author: Bishop Sound
Template: generatepress
Version: 0.1.1
*/

/* ============================================
   FONTS — Cormorant Garamond + Inter via Google Fonts
   ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600;700&display=swap");

/* ============================================
   CSS CUSTOM PROPERTIES — het hele palet in variabelen
   ============================================ */
:root {
  /* Warme base tones */
  --julia-cream: #faf6ef;
  --julia-cream-2: #f2ebdd;
  --julia-cream-3: #e8ddc9;

  /* Diep + donker */
  --julia-charcoal: #1a1614;
  --julia-charcoal-soft: #2a2521;
  --julia-charcoal-muted: #5a5148;

  /* Warm accent — terracotta */
  --julia-terracotta: #b8562e;
  --julia-terracotta-dark: #8a3f1e;
  --julia-terracotta-tint: #f4e6dc;

  /* Julia hot-pink logo accent */
  --julia-pink: #e4306f;
  --julia-pink-dark: #b31d55;

  /* Neutral utilities */
  --julia-line: #d9cfbb;
  --julia-muted-text: #7b7168;

  /* Typography */
  --julia-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --julia-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --julia-radius: 4px;
  --julia-radius-sm: 2px;
  --julia-content-max: 1240px;
}

/* ============================================
   BASE — body en typografie
   ============================================ */
body {
  background: var(--julia-cream);
  color: var(--julia-charcoal-soft);
  font-family: var(--julia-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title,
.gb-headline, .wp-block-heading {
  font-family: var(--julia-serif);
  font-weight: 400;
  color: var(--julia-charcoal);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .entry-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
}

h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  margin-top: 2em;
}

h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 500;
}

h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--julia-terracotta);
}

p {
  margin: 0 0 1.2em 0;
  max-width: 62ch;
}

a {
  color: var(--julia-terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
a:hover, a:focus {
  border-bottom-color: var(--julia-terracotta);
}

/* ============================================
   HEADER — subtiel, minimalistisch
   ============================================ */
.site-header {
  background: var(--julia-cream);
  border-bottom: 1px solid var(--julia-line);
  padding: 22px 0;
}

.site-logo img {
  max-height: 44px;
  width: auto;
}

.site-title, .main-title {
  font-family: var(--julia-serif) !important;
  font-weight: 500 !important;
  font-size: 1.8rem !important;
  letter-spacing: -0.01em;
  color: var(--julia-charcoal) !important;
}

.main-navigation a {
  font-family: var(--julia-sans);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--julia-charcoal) !important;
  border-bottom: none;
}
.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
  color: var(--julia-terracotta) !important;
}

/* ============================================
   BUTTONS — twee stijlen
   ============================================ */
.wp-block-button__link,
.button,
button,
input[type="submit"],
.gb-button {
  background: var(--julia-pink);
  color: #fff;
  font-family: var(--julia-sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 28px;
  border: none;
  border-radius: var(--julia-radius-sm);
  transition: background 200ms ease, transform 100ms ease;
  border-bottom: none;
}

.wp-block-button__link:hover,
.button:hover, button:hover,
input[type="submit"]:hover,
.gb-button:hover {
  background: var(--julia-pink-dark);
  color: #fff;
  border-bottom: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--julia-charcoal);
  border: 1.5px solid var(--julia-charcoal);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--julia-charcoal);
  color: var(--julia-cream);
}

/* ============================================
   HERO — donker charcoal, foto overlay
   ============================================ */
.julia-hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  background: var(--julia-charcoal);
  overflow: hidden;
  color: var(--julia-cream);
}

.julia-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26,22,20,0.3) 0%, rgba(26,22,20,0.75) 100%);
  z-index: 2;
}

.julia-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.julia-hero__inner {
  position: relative;
  z-index: 3;
  padding: 60px 40px;
  max-width: var(--julia-content-max);
  margin: 0 auto;
  width: 100%;
}

.julia-hero__eyebrow {
  font-family: var(--julia-sans);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 20px;
  color: var(--julia-cream-2);
}

.julia-hero h1 {
  font-family: var(--julia-serif);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.98;
  color: var(--julia-cream);
  margin: 0 0 24px 0;
  max-width: 14ch;
}

.julia-hero h1 em {
  font-style: italic;
  color: var(--julia-cream-3);
}

.julia-hero__lede {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 48ch;
  color: var(--julia-cream-2);
  margin: 0 0 32px 0;
}

.julia-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============================================
   PATTERNS — section spacing + cards
   ============================================ */
.julia-section {
  padding: 96px 40px;
  max-width: var(--julia-content-max);
  margin: 0 auto;
}

.julia-section--tight {
  padding: 60px 40px;
}

.julia-section__eyebrow {
  font-family: var(--julia-sans);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--julia-terracotta);
  margin-bottom: 12px;
}

.julia-section__title {
  font-family: var(--julia-serif);
  font-weight: 400;
  margin: 0 0 48px 0;
  max-width: 24ch;
}

/* Persona-cards grid */
.julia-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.julia-persona-card {
  background: var(--julia-cream-2);
  padding: 32px;
  border-radius: var(--julia-radius);
  transition: transform 200ms ease, background 200ms ease;
  border-bottom: 3px solid var(--julia-terracotta);
}

.julia-persona-card:hover {
  transform: translateY(-4px);
  background: var(--julia-cream-3);
}

.julia-persona-card h3 {
  font-family: var(--julia-serif);
  font-weight: 500;
  margin: 0 0 8px 0;
}

.julia-persona-card p {
  font-size: 0.95rem;
  color: var(--julia-charcoal-muted);
  margin: 0;
}

/* Workshop cards */
.julia-workshop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 32px;
}

.julia-workshop-card {
  background: var(--julia-cream-2);
  border-radius: var(--julia-radius);
  overflow: hidden;
  transition: transform 200ms ease;
}

.julia-workshop-card:hover {
  transform: translateY(-4px);
}

.julia-workshop-card__image {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  display: block;
}

.julia-workshop-card__body {
  padding: 24px 28px 28px 28px;
}

.julia-workshop-card__title {
  font-family: var(--julia-serif);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0 0 6px 0;
}

.julia-workshop-card__meta {
  font-family: var(--julia-sans);
  font-size: 0.85rem;
  color: var(--julia-terracotta);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Review quote-block */
.julia-quote {
  background: var(--julia-cream-2);
  border-left: 3px solid var(--julia-terracotta);
  padding: 32px 40px;
  font-family: var(--julia-serif);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--julia-charcoal);
  border-radius: 0 var(--julia-radius) var(--julia-radius) 0;
  max-width: 46rem;
}

.julia-quote__cite {
  display: block;
  margin-top: 16px;
  font-family: var(--julia-sans);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--julia-charcoal-muted);
  letter-spacing: 0.05em;
}

/* Dark section (for founder-story) */
.julia-section--dark {
  background: var(--julia-charcoal);
  color: var(--julia-cream-2);
  padding: 96px 0;
  max-width: 100%;
}

.julia-section--dark .julia-section__title,
.julia-section--dark h1,
.julia-section--dark h2,
.julia-section--dark h3 {
  color: var(--julia-cream);
}

.julia-section--dark .julia-section__eyebrow {
  color: var(--julia-terracotta-tint);
}

/* KPI-row */
.julia-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding: 40px 0;
}

.julia-kpi {
  border-top: 2px solid var(--julia-terracotta);
  padding-top: 20px;
}

.julia-kpi__value {
  font-family: var(--julia-serif);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--julia-charcoal);
  line-height: 1;
  margin-bottom: 6px;
}

.julia-kpi__label {
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Footer */
.site-footer {
  background: var(--julia-charcoal);
  color: var(--julia-cream-2);
  padding: 60px 40px 40px;
  font-size: 0.9rem;
}

.site-footer a {
  color: var(--julia-cream);
  border-bottom-color: transparent;
}

.site-footer a:hover {
  border-bottom-color: var(--julia-cream);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .julia-hero {
    min-height: 70vh;
  }
  .julia-section {
    padding: 60px 24px;
  }
  .julia-section--dark {
    padding: 60px 0;
  }
  .julia-hero__inner {
    padding: 40px 24px;
  }
}

/* ============================================
   FULL-BLEED sections — force break out van content container
   ============================================ */
.entry-content > .julia-hero,
.entry-content > .julia-section--dark,
.entry-content > .julia-section--tight {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: 100vw;
  width: 100vw;
}

/* Remove content-container padding/wrapping op single-page entry-content zodat julia-section zelf de padding regelt */
.page .entry-content,
.single .entry-content {
  padding: 0 !important;
  max-width: none;
}

/* GP inside-article no padding voor page context */
body.page .inside-article {
  padding: 0 !important;
  background: transparent;
  box-shadow: none;
  border: none;
}

body.page #content .grid-container {
  max-width: 100%;
  padding: 0;
}

body.page .site-content {
  padding: 0;
}

/* Header container blijft normaal */
body.page .site-header .inside-header {
  padding: 15px 40px !important;
  max-width: var(--julia-content-max);
  margin: 0 auto;
}

/* ============================================
   FIX: Navigation background force cream, links leesbaar
   ============================================ */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation.grid-container.grid-parent,
.main-navigation .main-nav > ul {
  background: var(--julia-cream) !important;
  border-top: 1px solid var(--julia-line);
  border-bottom: 1px solid var(--julia-line);
}

.main-navigation .main-nav > ul > li > a {
  color: var(--julia-charcoal) !important;
  background: transparent !important;
  padding: 18px 22px;
  font-family: var(--julia-sans);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li.current-menu-item > a {
  color: var(--julia-terracotta) !important;
  background: transparent !important;
}

/* Reserveren = laatste menu-item = highlighted CTA */
.main-navigation .main-nav > ul > li:last-child > a {
  color: var(--julia-cream) !important;
  background: var(--julia-pink) !important;
  border-radius: var(--julia-radius-sm);
  margin: 12px 0 12px 8px;
  padding: 12px 22px !important;
}

.main-navigation .main-nav > ul > li:last-child > a:hover,
.main-navigation .main-nav > ul > li:last-child > a:focus {
  background: var(--julia-pink-dark) !important;
  color: var(--julia-cream) !important;
}

/* Hide de entry-title op alle pages (was disable-content-title niet betrouwbaar) */
body.page .entry-header .entry-title,
body.page > .entry-title {
  display: none !important;
}

/* Nav container full width */
.main-navigation .inside-navigation {
  max-width: var(--julia-content-max);
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================
   FOOTER — donker met leesbare tekst
   ============================================ */
.footer-widgets,
.site-info,
.site-footer {
  background: var(--julia-charcoal) !important;
  color: var(--julia-cream-2) !important;
}

.footer-widgets {
  padding: 64px 40px 40px !important;
}

.footer-widgets-container {
  max-width: var(--julia-content-max);
  margin: 0 auto;
}

.footer-widgets .widget-title,
.footer-widgets h1, .footer-widgets h2, .footer-widgets h3,
.footer-widgets .wp-block-heading {
  color: var(--julia-cream) !important;
  font-family: var(--julia-serif);
  font-weight: 500;
}

.footer-widgets p,
.footer-widgets li,
.footer-widgets div,
.footer-widgets span,
.footer-widgets strong {
  color: var(--julia-cream-2) !important;
}

.footer-widgets a {
  color: var(--julia-cream) !important;
  border-bottom: 1px solid transparent;
}
.footer-widgets a:hover,
.footer-widgets a:focus {
  border-bottom-color: var(--julia-cream) !important;
  color: var(--julia-cream) !important;
}

.footer-widgets ul {
  padding-left: 0;
  list-style: none;
}

.site-info {
  padding: 22px 40px !important;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.85rem;
  color: var(--julia-muted-text) !important;
}

.site-info a {
  color: var(--julia-cream-2) !important;
}

/* ============================================
   HERO IMAGE crop-position — top-heavy voor personen (kruin behouden)
   ============================================ */
.julia-hero__bg {
  object-position: center 15%;
}

/* ============================================
   RESERVERINGS-WIZARD
   ============================================ */
.jr-wizard { margin: 0 auto;
  max-width: 780px;
  background: white;
  border: 1px solid var(--julia-line);
  border-radius: var(--julia-radius);
  padding: 0;
  overflow: hidden;
}
.jr-progress {
  display: flex;
  gap: 0;
  background: var(--julia-cream-2);
  border-bottom: 1px solid var(--julia-line);
  padding: 20px 24px;
}
.jr-progress__step {
  flex: 1;
  font-family: var(--julia-sans);
  font-size: 0.82rem;
  color: var(--julia-charcoal-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.jr-progress__step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--julia-line);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
}
.jr-progress__step.is-active { color: var(--julia-charcoal); font-weight: 600; }
.jr-progress__step.is-active span {
  background: var(--julia-terracotta);
  color: white;
  border-color: var(--julia-terracotta);
}
.jr-progress__step.is-done span {
  background: var(--julia-charcoal);
  color: white;
  border-color: var(--julia-charcoal);
}
.jr-step { padding: 40px; display: none; }
.jr-step.is-active { display: block; }
.jr-step__title { font-family: var(--julia-serif); font-weight: 500; font-size: 2rem; margin: 0 0 8px 0; }
.jr-step__lede { color: var(--julia-charcoal-muted); margin: 0 0 32px 0; font-size: 1rem; }

.jr-workshop-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 32px; }
.jr-workshop-option { display: block; cursor: pointer; position: relative; }
.jr-workshop-option input { position: absolute; opacity: 0; pointer-events: none; }
.jr-workshop-option__label {
  display: block; padding: 18px 20px; background: var(--julia-cream);
  border: 2px solid transparent; border-radius: var(--julia-radius);
  transition: border-color 150ms ease, background 150ms ease;
}
.jr-workshop-option__label strong { font-family: var(--julia-serif); font-weight: 500; font-size: 1.2rem; display: block; color: var(--julia-charcoal); margin-bottom: 4px; }
.jr-workshop-option__label em { font-style: normal; font-size: 0.85rem; color: var(--julia-charcoal-muted); }
.jr-workshop-option:hover .jr-workshop-option__label { background: var(--julia-cream-2); }
.jr-workshop-option input:checked + .jr-workshop-option__label { border-color: var(--julia-terracotta); background: var(--julia-terracotta-tint); }

.jr-count { display: flex; align-items: center; gap: 16px; justify-content: center; padding: 24px 0; }
.jr-count__btn {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--julia-charcoal);
  background: white; font-size: 1.6rem; cursor: pointer; color: var(--julia-charcoal);
  padding: 0; line-height: 1; font-family: inherit; letter-spacing: 0; text-transform: none;
}
.jr-count__btn:hover { background: var(--julia-charcoal); color: white; }
.jr-count input {
  font-family: var(--julia-serif); font-size: 3rem; font-weight: 500;
  text-align: center; border: none; width: 100px; color: var(--julia-charcoal);
  background: transparent; outline: none;
}
.jr-count input::-webkit-outer-spin-button, .jr-count input::-webkit-inner-spin-button { -webkit-appearance: none; }

.jr-price-summary { background: var(--julia-cream); border-radius: var(--julia-radius); padding: 16px 20px; margin-top: 24px; }
.jr-price-summary__row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.95rem; color: var(--julia-charcoal-muted); }
.jr-price-summary__row strong { color: var(--julia-charcoal); font-weight: 500; }
.jr-price-summary__row--total { border-top: 1px solid var(--julia-line); margin-top: 4px; padding-top: 12px; font-size: 1.15rem; }
.jr-price-summary__row--total strong { font-size: 1.4rem; font-family: var(--julia-serif); font-weight: 500; }

.jr-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 24px; max-height: 400px; overflow-y: auto; padding-right: 4px; }
.jr-slot { padding: 14px 16px; background: var(--julia-cream); border: 2px solid transparent; border-radius: var(--julia-radius); cursor: pointer; text-align: left; font-family: var(--julia-sans); font-size: 0.95rem; color: var(--julia-charcoal); transition: border-color 150ms ease, background 150ms ease; }
.jr-slot:hover { background: var(--julia-cream-2); }
.jr-slot.is-selected { border-color: var(--julia-terracotta); background: var(--julia-terracotta-tint); }
.jr-slot strong { display: block; margin-bottom: 2px; font-weight: 500; }
.jr-slot span { font-size: 0.85rem; color: var(--julia-charcoal-muted); }

.jr-summary-card { background: var(--julia-cream); border-radius: var(--julia-radius); padding: 20px 24px; margin-bottom: 32px; border-left: 3px solid var(--julia-terracotta); }
.jr-summary-card__row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.jr-summary-card__row:last-child { border-bottom: none; }
.jr-summary-card__row strong { color: var(--julia-charcoal); }
.jr-summary-card__row--total { font-family: var(--julia-serif); font-size: 1.15rem; }
.jr-summary-card__row--total strong { font-size: 1.5rem; }

.jr-form { display: grid; gap: 16px; }
.jr-field label { display: block; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--julia-charcoal-muted); margin-bottom: 6px; font-weight: 500; }
.jr-field input, .jr-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--julia-line); border-radius: var(--julia-radius-sm); font-family: var(--julia-sans); font-size: 1rem; background: white; color: var(--julia-charcoal); }
.jr-field input:focus, .jr-field textarea:focus { outline: none; border-color: var(--julia-terracotta); }
.jr-required { color: var(--julia-terracotta); }
.jr-help { display: block; font-size: 0.82rem; color: var(--julia-charcoal-muted); margin-top: 4px; }
.jr-field--checkbox label { text-transform: none; font-size: 0.92rem; letter-spacing: 0; color: var(--julia-charcoal); display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.5; }
.jr-field--checkbox input { width: auto; margin-top: 3px; }

.jr-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.jr-btn { padding: 14px 28px; background: var(--julia-pink); color: white; border: none; border-radius: var(--julia-radius-sm); font-family: var(--julia-sans); font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
.jr-btn:hover { background: var(--julia-pink-dark); }
.jr-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.jr-btn--ghost { background: transparent; color: var(--julia-charcoal); border: 1.5px solid var(--julia-charcoal); }
.jr-btn--ghost:hover { background: var(--julia-charcoal); color: white; }

.jr-status { margin-top: 16px; padding: 12px 16px; border-radius: var(--julia-radius); font-size: 0.95rem; display: none; }
.jr-status.is-loading { display: block; background: var(--julia-cream-2); color: var(--julia-charcoal); }
.jr-status.is-error { display: block; background: #fdecec; color: #a52424; border-left: 3px solid #a52424; }
.jr-status.is-success { display: block; background: #e9f5eb; color: #2f6237; border-left: 3px solid #2f6237; }

/* ============================================
   PRECIEZE hero-crop per foto
   Julia-portret: kruin behouden (hoger op de foto)
   Food-fotos: gewoon center
   ============================================ */
.julia-hero__bg { object-position: center center; } /* default reset */

/* Julia in rode jurk voor de kookstudio */
.julia-hero__bg[src*="7c2f5743"] { object-position: center 15%; }

/* Vietnamese workshop foto — kip is midden-links, geen actie nodig */
/* Chinese-Workshop, Thaise-workshop etc. zijn food-fotos, default OK */

/* ============================================
   MOBILE MENU FIX — burger button + collapsable
   ============================================ */
@media (max-width: 768px) {
  /* Toon de mobile-menu-button */
  .main-navigation.has-mobile-menu-button .menu-toggle,
  .main-navigation .menu-toggle {
    display: block !important;
    width: 100%;
    background: transparent;
    color: var(--julia-charcoal) !important;
    border: none;
    padding: 18px 22px;
    font-family: var(--julia-sans);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
  }

  .main-navigation.toggled .main-nav > ul {
    display: block !important;
  }

  .main-navigation .main-nav > ul {
    display: none;
    flex-direction: column;
    background: var(--julia-cream);
  }

  .main-navigation .main-nav > ul > li {
    display: block;
    width: 100%;
  }

  .main-navigation .main-nav > ul > li > a {
    padding: 14px 22px !important;
    border-bottom: 1px solid var(--julia-line);
  }

  /* Reserveren CTA-knop op mobile ook duidelijk */
  .main-navigation .main-nav > ul > li:last-child > a {
    margin: 8px 22px !important;
    text-align: center;
    display: block;
  }

  /* Hero op mobile iets minder hoog */
  .julia-hero {
    min-height: 60vh !important;
  }

  .julia-hero__inner {
    padding: 30px 20px !important;
  }

  .julia-section {
    padding: 48px 20px !important;
  }

  /* Wizard: kolommen naar 1 stack op mobile */
  .jr-workshop-picker,
  .jr-slots {
    grid-template-columns: 1fr !important;
  }

  .jr-progress {
    padding: 14px 16px;
    gap: 8px;
    overflow-x: auto;
  }

  .jr-progress__step {
    font-size: 0.7rem;
    white-space: nowrap;
  }
}

/* Reservering page: intro en wizard tegen elkaar zetten */
body.page-id-325 .julia-section:first-of-type { padding-bottom: 20px !important; }
body.page-id-325 .julia-section:nth-of-type(2) { padding-top: 20px !important; }

/* Wizard: gemaakte-keuzes indicator boven de step-content */
.jr-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  background: var(--julia-cream);
  border-bottom: 1px solid var(--julia-line);
  font-family: var(--julia-sans);
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
  align-items: center;
  animation: jr-fade-in 200ms ease;
}
@keyframes jr-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.jr-choices__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: white;
  border: 1px solid var(--julia-line);
  border-radius: 20px;
  color: var(--julia-charcoal);
}
.jr-choices__item strong {
  font-weight: 600;
  color: var(--julia-terracotta);
  margin-left: 2px;
}

/* Portrait-fotos als hero: center-crop op de tafel */
.julia-hero__bg[src*="julia-restaurant-groot"] { object-position: center 30%; }
.julia-hero__bg[src*="julia-restaurant-klein"] { object-position: center 30%; }

/* Text-only hero (zonder background img — voor workshop detail-pages waar food-fotos te klein zijn) */
.julia-hero--text {
  min-height: auto !important;
  padding: 80px 0 40px 0;
  background: var(--julia-charcoal);
  color: var(--julia-cream);
}
.julia-hero--text::before { display: none; }
.julia-hero--text .julia-hero__inner {
  padding: 20px 40px;
  max-width: var(--julia-content-max);
  margin: 0 auto;
}

/* Food-image binnen content-container, niet full-bleed */
.julia-food-showcase {
  padding: 60px 40px;
  max-width: var(--julia-content-max);
  margin: 0 auto;
}
.julia-food-showcase img {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--julia-radius);
  display: block;
  margin: 0 auto;
}

/* ============================================
   PRICE-CARD grid
   ============================================ */
.julia-price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.julia-price-card {
  position: relative;
  background: var(--julia-cream-2);
  border-radius: var(--julia-radius);
  padding: 28px 30px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.julia-price-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,22,20,0.06);
}
.julia-price-card--featured {
  background: white;
  border: 1px solid var(--julia-terracotta-tint);
  box-shadow: 0 4px 12px rgba(184,86,46,0.06);
}
.julia-price-card__badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 3px 10px;
  background: var(--julia-terracotta);
  color: white;
  font-family: var(--julia-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 12px;
}
.julia-price-card__badge--soft {
  background: transparent;
  color: var(--julia-terracotta);
  border: 1px solid var(--julia-terracotta);
}
.julia-price-card__head h3 {
  font-family: var(--julia-serif);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--julia-charcoal);
  margin: 0 0 4px 0;
  line-height: 1.2;
}
.julia-price-card__gerechten {
  font-family: var(--julia-sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--julia-terracotta);
  font-weight: 500;
}
.julia-price-card__body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--julia-charcoal-soft);
  margin: 0;
  min-height: 3.2em;
}
.julia-price-card__prijzen {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--julia-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.julia-price-card__prijs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.julia-price-card__prijs--muted { opacity: 0.6; }
.julia-price-card__label {
  font-family: var(--julia-sans);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--julia-charcoal-muted);
  font-weight: 500;
}
.julia-price-card__amount {
  font-family: var(--julia-serif);
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--julia-charcoal);
  line-height: 1.1;
}
.julia-price-card__amount em {
  font-style: normal;
  font-family: var(--julia-sans);
  font-size: 0.75rem;
  color: var(--julia-charcoal-muted);
  font-weight: 400;
  margin-left: 3px;
  letter-spacing: 0.03em;
}

/* Price-card: thumbnail + reserveer link */
.julia-price-card__thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--julia-radius-sm);
  display: block;
  margin: 0 0 4px 0;
}
.julia-price-card__cta {
  display: block;
  margin-top: 12px;
  padding: 10px 16px;
  background: var(--julia-charcoal);
  color: var(--julia-cream) !important;
  text-align: center;
  border-radius: var(--julia-radius-sm);
  font-family: var(--julia-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 200ms ease;
  border-bottom: none !important;
}
.julia-price-card__cta:hover {
  background: var(--julia-pink) !important;
  color: var(--julia-cream) !important;
}
.julia-price-card--featured .julia-price-card__cta {
  background: var(--julia-pink);
}
.julia-price-card--featured .julia-price-card__cta:hover {
  background: var(--julia-pink-dark) !important;
}

/* Hero: iets minder hoog site-wide */
.julia-hero { min-height: 68vh !important; }
.julia-hero[style*="55vh"] { min-height: 48vh !important; }
.julia-hero[style*="60vh"] { min-height: 50vh !important; }
.julia-hero[style*="62vh"] { min-height: 52vh !important; }
@media (max-width: 768px) {
  .julia-hero { min-height: 55vh !important; }
}

/* Mobile horizontal-overflow guard */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
.julia-hero,
.julia-section--dark,
.julia-section--tight,
.entry-content > * {
  max-width: 100vw;
}

/* Progress-bar op mobile: labels verstoppen, alleen cirkels */
@media (max-width: 640px) {
  .jr-progress {
    justify-content: space-between;
    gap: 4px;
    padding: 14px 12px;
    overflow-x: visible;
  }
  .jr-progress__step {
    font-size: 0;  /* verberg de tekst */
    flex: 0 0 auto;
  }
  .jr-progress__step span {
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
  }
  .jr-progress__step.is-active {
    font-size: 0.7rem;  /* toon alleen actieve label */
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
}

.julia-hero[style*="40vh"] { min-height: 38vh !important; }

/* Contact page: 2-column grid naar 1-column op mobiel */
@media (max-width: 768px) {
  .page-id-326 .julia-section > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

.jr-slots-fallback {
  margin: 16px 0 0 0;
  padding: 12px 16px;
  background: var(--julia-cream-2);
  border-left: 3px solid var(--julia-terracotta);
  border-radius: var(--julia-radius-sm);
  font-size: 0.92rem;
  color: var(--julia-charcoal-soft);
  line-height: 1.5;
}
.jr-slots-fallback a {
  color: var(--julia-terracotta);
  font-weight: 600;
}

/* Wizard datum-picker: manual sectie */
.jr-picker__label {
  font-family: var(--julia-sans);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--julia-terracotta);
  font-weight: 600;
  margin: 0 0 12px 0;
}
.jr-picker__divider {
  text-align: center;
  margin: 28px 0 20px 0;
  position: relative;
}
.jr-picker__divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--julia-line);
}
.jr-picker__divider span {
  position: relative;
  background: white;
  padding: 0 16px;
  font-family: var(--julia-sans);
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.jr-manual__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.jr-manual__field label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--julia-charcoal-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.jr-manual__field input,
.jr-manual__field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--julia-line);
  border-radius: var(--julia-radius-sm);
  font-family: var(--julia-sans);
  font-size: 1rem;
  background: white;
  color: var(--julia-charcoal);
}
.jr-manual__field input:focus,
.jr-manual__field select:focus {
  outline: none;
  border-color: var(--julia-terracotta);
}
.jr-manual__note {
  margin: 12px 0 0 0;
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
}
@media (max-width: 640px) {
  .jr-manual__row { grid-template-columns: 1fr; }
}

/* Persona-cards krijgen nu een foto bovenaan */
.julia-persona-card {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.julia-persona-card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  transition: transform 300ms ease;
}
.julia-persona-card:hover .julia-persona-card__image {
  transform: scale(1.03);
}
.julia-persona-card__body {
  padding: 24px 28px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.julia-persona-card h3 {
  font-family: var(--julia-serif);
  font-weight: 500;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
}

/* Persona-cards: rode border-bottom weg nu er fotos boven staan */
.julia-persona-card { border-bottom: none !important; }

/* ============================================
   HEADER redesign — editorial + sticky
   ============================================ */
.site-header {
  padding: 0 !important;
  background: var(--julia-cream);
  border-bottom: 1px solid var(--julia-line);
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 200ms ease, box-shadow 200ms ease;
}
.site-header .inside-header {
  padding: 22px 40px !important;
  max-width: var(--julia-content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

/* Site title — grote serif */
.site-title, .main-title, .site-title a, .main-title a {
  font-family: var(--julia-serif) !important;
  font-weight: 500 !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.01em;
  color: var(--julia-charcoal) !important;
  line-height: 1;
  border-bottom: none !important;
}
.site-title a:hover, .main-title a:hover {
  color: var(--julia-charcoal) !important;
}

/* Tagline verbergen — te druk in de header, staat wel in OG/meta */
.site-description { display: none !important; }

/* Nav rechts van title */
.site-branding, .site-logo {
  flex: 0 0 auto;
  margin: 0;
}

/* Main navigation direct naast title */
.main-navigation {
  position: static !important;
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.main-navigation .inside-navigation {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: none;
  margin: 0;
}
.main-navigation .main-nav > ul {
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-navigation .main-nav > ul > li > a {
  padding: 10px 16px !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.14em !important;
}
.main-navigation .main-nav > ul > li:last-child > a {
  margin: 0 0 0 8px !important;
  padding: 8px 18px !important;
}

/* Header on scroll — subtiele shadow */
.site-header.jr-scrolled {
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(26,22,20,0.05);
}


/* ============================================
   EDITORIAL HEADER (v2) — brand mark + wordmark, inline nav
   ============================================ */

/* Site header container */
.site-header {
  background: var(--julia-cream) !important;
  border-bottom: 1px solid var(--julia-line);
  position: sticky;
  top: 0;
  z-index: 500;
  transition: box-shadow .25s ease, background .25s ease, padding .25s ease;
}

/* One-row layout: brand left, nav right */
.site-header .inside-header,
body.page .site-header .inside-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 32px !important;
  padding: 20px 40px !important;
  max-width: var(--julia-content-max);
  margin: 0 auto;
  flex-wrap: nowrap !important;
  transition: padding .25s ease;
}
.site-header.jr-scrolled .inside-header {
  padding: 12px 40px !important;
}

/* Brand: mark + wordmark ----------------------- */
.site-branding {
  flex: 0 1 auto !important;
  text-align: left !important;
  margin: 0 !important;
  min-width: 0;
}
.main-title.julia-brand { margin: 0 !important; padding: 0; line-height: 1; }

.julia-brand__link {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  text-decoration: none !important;
  color: var(--julia-charcoal) !important;
}
.julia-brand__link:hover { color: var(--julia-charcoal) !important; }

.julia-brand__mark {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(228, 48, 111, 0.14);
  flex-shrink: 0;
  transition: width .25s ease, height .25s ease, box-shadow .25s ease;
}
.site-header.jr-scrolled .julia-brand__mark {
  width: 40px; height: 40px;
}

.julia-brand__word {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--julia-serif);
  color: var(--julia-charcoal);
}
.julia-brand__word-1 {
  font-style: italic;
  font-weight: 500;
  font-size: 1.55rem;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}
.julia-brand__word-2 {
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--julia-sans);
  color: var(--julia-charcoal-soft);
}

/* Nav: inline in header, no border-top/bottom -- */
.main-navigation,
.main-navigation .inside-navigation,
.main-navigation.grid-container.grid-parent,
.main-navigation .main-nav > ul {
  background: transparent !important;
  border: none !important;
}
.main-navigation {
  flex: 0 0 auto !important;
  width: auto !important;
}
.main-navigation .inside-navigation {
  padding: 0 !important;
  max-width: none;
}
.main-navigation .main-nav > ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
}
.main-navigation .main-nav > ul > li {
  position: relative;
}
.main-navigation .main-nav > ul > li > a {
  color: var(--julia-charcoal) !important;
  background: transparent !important;
  padding: 10px 14px !important;
  font-family: var(--julia-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  transition: color .2s ease;
}
.main-navigation .main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1px;
  background: var(--julia-pink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.main-navigation .main-nav > ul > li:hover > a::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li:focus-within > a::after {
  transform: scaleX(1);
}
.main-navigation .main-nav > ul > li:hover > a,
.main-navigation .main-nav > ul > li.current-menu-item > a {
  color: var(--julia-charcoal) !important;
  background: transparent !important;
}

/* Last nav item = RESERVEREN pink pill */
.main-navigation .main-nav > ul > li:last-child > a {
  margin-left: 10px !important;
  padding: 8px 18px !important;
  background: var(--julia-pink) !important;
  color: #ffffff !important;
  border-radius: 999px;
  letter-spacing: 0.14em;
  transition: background .2s ease, transform .2s ease;
}
.main-navigation .main-nav > ul > li:last-child > a::after { display: none; }
.main-navigation .main-nav > ul > li:last-child > a:hover,
.main-navigation .main-nav > ul > li:last-child > a:focus {
  background: #c22560 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Sticky-scroll subtle look */
.site-header.jr-scrolled {
  background: rgba(250, 246, 239, 0.94) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 16px rgba(26,22,20,0.06);
}

/* ============================================
   MOBILE HEADER (≤900px) — one row + drawer
   ============================================ */
@media (max-width: 1180px) {
  .site-header .inside-header,
  body.page .site-header .inside-header {
    padding: 14px 20px !important;
    gap: 16px !important;
  }
  .site-header.jr-scrolled .inside-header {
    padding: 8px 18px !important;
  }

  .julia-brand__link { gap: 10px; }
  .julia-brand__mark { width: 40px; height: 40px; }
  .site-header.jr-scrolled .julia-brand__mark { width: 36px; height: 36px; }
  .julia-brand__word-1 { font-size: 1.25rem; }
  .julia-brand__word-2 { font-size: 0.72rem; letter-spacing: 0.14em; }

  /* Burger button */
  .main-navigation .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    background: transparent !important;
    color: var(--julia-charcoal) !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    font-family: var(--julia-sans);
    font-size: 0.72rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-weight: 600;
    border: 1px solid var(--julia-line);
    border-radius: 999px;
  }
  .main-navigation .menu-toggle:hover,
  .main-navigation .menu-toggle:focus-visible {
    background: var(--julia-charcoal) !important;
    color: #ffffff !important;
  }

  /* Nav hidden until toggled */
  .main-navigation .main-nav > ul {
    display: none !important;
  }
  .main-navigation.toggled .main-nav > ul {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    right: 12px !important;
    left: auto !important;
    min-width: 260px !important;
    max-width: calc(100vw - 24px);
    background: #faf6ef !important;
    border: 1px solid var(--julia-line) !important;
    border-radius: var(--julia-radius);
    box-shadow: 0 12px 32px rgba(26,22,20,0.14);
    flex-direction: column !important;
    padding: 6px 0 !important;
    gap: 0 !important;
    z-index: 600;
  }
  .main-navigation.toggled .main-nav > ul > li {
    display: block !important;
    width: 100% !important;
    background: transparent !important;
  }
  .main-navigation.toggled .main-nav > ul > li > a {
    display: block !important;
    padding: 13px 22px !important;
    text-align: left !important;
    background: transparent !important;
    border-bottom: 1px solid var(--julia-line);
    letter-spacing: 0.14em;
  }
  .main-navigation.toggled .main-nav > ul > li:last-child > a {
    margin: 10px 12px 4px !important;
    padding: 12px 20px !important;
    border-bottom: none !important;
    text-align: center !important;
    background: var(--julia-pink) !important;
    color: #ffffff !important;
    border-radius: 999px;
  }
  .main-navigation .main-nav > ul > li > a::after { display: none; }
}

/* Extra safety: no wrap smaller than 900px keeps brand + burger inline */
@media (max-width: 480px) {
  .julia-brand__word-1 { font-size: 1.1rem; }
  .julia-brand__word-2 { font-size: 0.68rem; }
  .julia-brand__mark { width: 36px; height: 36px; }
}

/* ============================================
   RESERVERING — inline calendar + tijdvak buttons
   ============================================ */

.jr-picker {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 8px;
}
.jr-picker__block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jr-picker__label {
  font-family: var(--julia-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--julia-terracotta);
  font-weight: 600;
}
.jr-picker__note {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: var(--julia-charcoal-muted);
  font-style: italic;
}

/* Calendar ------------------------------------- */
.jr-calendar {
  background: #fff;
  border: 1px solid var(--julia-line);
  border-radius: var(--julia-radius);
  padding: 20px 22px 22px;
  max-width: 460px;
  box-shadow: 0 1px 4px rgba(26,22,20,0.03);
}
.jr-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.jr-cal__title {
  font-family: var(--julia-serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--julia-charcoal);
  text-transform: capitalize;
  letter-spacing: 0.01em;
}
.jr-cal__nav {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--julia-line);
  background: transparent;
  color: var(--julia-charcoal);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.jr-cal__nav:hover:not(:disabled) {
  background: var(--julia-charcoal);
  color: #fff;
  border-color: var(--julia-charcoal);
}
.jr-cal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.jr-cal__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.jr-cal__dow span {
  text-align: center;
  font-family: var(--julia-sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--julia-charcoal-muted);
  padding: 6px 0;
}
.jr-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.jr-cal__cell {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--julia-charcoal);
  font-family: var(--julia-sans);
  font-size: 0.95rem;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.jr-cal__cell:hover:not(.jr-cal__cell--disabled):not(.jr-cal__cell--empty) {
  background: var(--julia-cream-warm);
}
.jr-cal__cell--today {
  outline: 1px solid var(--julia-line);
  font-weight: 600;
}
.jr-cal__cell--selected,
.jr-cal__cell--selected:hover {
  background: var(--julia-pink) !important;
  color: #fff !important;
  font-weight: 600;
  outline: none;
}
.jr-cal__cell--disabled {
  color: var(--julia-line);
  cursor: not-allowed;
  background: transparent;
}
.jr-cal__cell--empty {
  cursor: default;
}

/* Tijdvak buttons ----------------------------- */
.jr-timeslots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 460px;
}
.jr-timeslot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--julia-line);
  border-radius: var(--julia-radius-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .15s ease;
  font-family: var(--julia-sans);
}
.jr-timeslot strong {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--julia-charcoal);
  letter-spacing: 0.01em;
}
.jr-timeslot span {
  font-size: 0.85rem;
  color: var(--julia-charcoal-muted);
}
.jr-timeslot:hover {
  border-color: var(--julia-pink);
  background: var(--julia-cream-warm);
}
.jr-timeslot.is-selected {
  border-color: var(--julia-pink);
  background: var(--julia-pink);
}
.jr-timeslot.is-selected strong,
.jr-timeslot.is-selected span {
  color: #fff;
}

/* Mobile calendar tweaks ---------------------- */
@media (max-width: 640px) {
  .jr-calendar { padding: 16px 14px 18px; }
  .jr-cal__title { font-size: 1.05rem; }
  .jr-cal__cell { font-size: 0.9rem; }
  .jr-timeslots { grid-template-columns: 1fr; }
  .jr-timeslot { padding: 12px 14px; }
}

/* Hoofdmenu iets van de rechterkant af */
@media (min-width: 1181px) {
  .site-header .main-navigation {
    margin-right: 24px;
  }
}

/* RESERVEREN pill — vertical centering + gelijke hoogte met nav-items */
@media (min-width: 1181px) {
  .main-navigation .main-nav > ul > li:last-child > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 10px 22px !important;
    min-height: 34px;
  }
}

/* Anchor scroll offset — wizard mag niet onder sticky header vallen */
#jr-wizard { scroll-margin-top: 92px; }
@media (max-width: 1180px) { #jr-wizard { scroll-margin-top: 72px; } }

/* ============================================
   MOBILE HEADER OVERRIDE — force one-row layout
   ============================================ */
@media (max-width: 1180px) {
  /* Force inside-header flex row met brand + burger */
  .site-header .inside-header,
  body.page .site-header .inside-header,
  .site-header .grid-container.grid-parent.inside-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    width: 100% !important;
    /* Zonder border-box telt die 16px padding links en rechts BOVENOP de 100%,
       dus 422px in een scherm van 390. Het menu viel daardoor buiten beeld. */
    box-sizing: border-box !important;
  }

  /* Site branding compact + left */
  .site-header .site-branding {
    flex: 1 1 auto !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: calc(100% - 90px);
    min-width: 0;
  }
  .site-header .julia-brand__link {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0 !important;
  }

  /* Navigation shrink-to-fit — geen full width */
  .site-header .main-navigation,
  .site-header nav.main-navigation.grid-container.grid-parent {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
  }
  .site-header .main-navigation .inside-navigation,
  .site-header .main-navigation.grid-container .inside-navigation {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    background: transparent !important;
  }

  /* Burger knop compact */
  .site-header .main-navigation .menu-toggle,
  .site-header .main-navigation.has-mobile-menu-button .menu-toggle,
  .main-navigation.toggled .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--julia-charcoal) !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    font-family: var(--julia-sans) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border: 1px solid var(--julia-line) !important;
    border-radius: 999px !important;
    min-height: 34px !important;
    max-height: 40px !important;
    flex: 0 0 auto !important;
  }
  .site-header .main-navigation .menu-toggle:hover,
  .site-header .main-navigation .menu-toggle:focus {
    background: var(--julia-charcoal) !important;
    color: #fff !important;
    border-color: var(--julia-charcoal) !important;
  }

  /* Burger icon smaller */
  .site-header .main-navigation .menu-toggle::before,
  .site-header .main-navigation .menu-toggle .gp-icon {
    font-size: 0.9rem !important;
    line-height: 1 !important;
  }

  /* Brand mark + text sizes on mobile */
  .site-header .julia-brand__mark { width: 40px !important; height: 40px !important; }
  .site-header.jr-scrolled .julia-brand__mark { width: 36px !important; height: 36px !important; }
  .julia-brand__word-1 { font-size: 1.15rem !important; }
  .julia-brand__word-2 { font-size: 0.68rem !important; }
}

@media (max-width: 380px) {
  .site-header .julia-brand__mark { width: 34px !important; height: 34px !important; }
  .julia-brand__word-1 { font-size: 1.02rem !important; }
  .julia-brand__word-2 { font-size: 0.62rem !important; }
  .site-header .main-navigation .menu-toggle { padding: 6px 10px !important; font-size: 0.65rem !important; }
}

/* ============================================
   MOBILE HEADER v3 — nav now moved INTO header via JS
   ============================================ */
@media (max-width: 1180px) {
  /* Force one row */
  .site-header .inside-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  .site-header .site-branding {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  /* Nav now sits INSIDE the header, shrink-to-fit */
  .site-header nav.main-navigation {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    position: relative !important;
  }
  .site-header nav.main-navigation .inside-navigation {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    max-width: none !important;
  }

  /* MENU pill — subtly rounded, NOT circle */
  .site-header nav.main-navigation .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--julia-charcoal) !important;
    padding: 9px 16px !important;
    margin: 0 !important;
    font-family: var(--julia-sans) !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    border: 1px solid var(--julia-line) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
  }
  .site-header nav.main-navigation .menu-toggle:hover,
  .site-header nav.main-navigation .menu-toggle:focus-visible,
  .site-header nav.main-navigation.toggled .menu-toggle {
    background: var(--julia-charcoal) !important;
    color: #fff !important;
    border-color: var(--julia-charcoal) !important;
  }

  /* Hide the desktop-only mobile-menu-text label so pill is compact */
  .site-header nav.main-navigation .menu-toggle .mobile-menu {
    display: inline !important;
  }

  /* Drawer when toggled */
  .site-header nav.main-navigation .main-nav > ul {
    display: none !important;
  }
  .site-header nav.main-navigation.toggled .main-nav > ul {
    display: flex !important;
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 240px !important;
    max-width: calc(100vw - 32px);
    background: #faf6ef !important;
    border: 1px solid var(--julia-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(26,22,20,0.14);
    flex-direction: column !important;
    padding: 6px 0 !important;
    gap: 0 !important;
    z-index: 700 !important;
  }
}

/* ============================================
   HERO — houd Julia in beeld op mobile
   ============================================ */
@media (max-width: 1180px) {
  .julia-hero__bg { object-position: 75% center !important; }
}

/* Hoofdmenu meer lucht van rechterrand op desktop */
@media (min-width: 1181px) {
  .site-header .inside-header,
  body.page .site-header .inside-header {
    padding-right: 64px !important;
  }
  .site-header .main-navigation {
    margin-right: 0 !important;
  }
}

/* ============================================
   Availability states — kalender + tijdvakken
   ============================================ */

/* Kalender dag-cel varianten */
.jr-cal__cell--partial {
  position: relative;
}
.jr-cal__cell--partial::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--julia-terracotta);
}
.jr-cal__cell--full {
  color: var(--julia-charcoal-muted) !important;
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(0,0,0,0.04) 3px 5px) !important;
  text-decoration: line-through;
  cursor: not-allowed !important;
}
.jr-cal__cell--full:hover {
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(0,0,0,0.04) 3px 5px) !important;
}

/* Legende onder de kalender */
.jr-cal__legend {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--julia-line);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--julia-sans);
  font-size: 0.75rem;
  color: var(--julia-charcoal-muted);
}
.jr-cal__legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 6px 0 12px;
}
.jr-cal__legend-dot--free { background: var(--julia-line); }
.jr-cal__legend-dot--partial { background: var(--julia-terracotta); }
.jr-cal__legend-dot--full { background: var(--julia-charcoal-muted); }
.jr-cal__legend-dot:first-of-type { margin-left: 0; }

/* Tijdvak states */
.jr-timeslot--partial {
  border-style: dashed !important;
  border-color: var(--julia-terracotta) !important;
}
.jr-timeslot--partial strong {
  color: var(--julia-charcoal) !important;
}
.jr-timeslot--partial span {
  color: var(--julia-terracotta) !important;
  font-size: 0.78rem !important;
}
.jr-timeslot--bezet {
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(0,0,0,0.03) 3px 5px) !important;
  border-color: var(--julia-line) !important;
  cursor: not-allowed !important;
  opacity: 0.6;
}
.jr-timeslot--bezet strong,
.jr-timeslot--bezet span {
  color: var(--julia-charcoal-muted) !important;
}
.jr-timeslot--bezet:hover {
  border-color: var(--julia-line) !important;
  background: repeating-linear-gradient(-45deg, transparent 0 3px, rgba(0,0,0,0.03) 3px 5px) !important;
  transform: none !important;
}

/* ============================================
   Reviews layout — alternerend foto + quote
   ============================================ */
.julia-reviews {
  display: flex;
  flex-direction: column;
  gap: 72px;
  margin-top: 8px;
}
.julia-review {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 40px;
  align-items: center;
}
.julia-review--photo-right {
  grid-template-columns: 6fr 5fr;
}
.julia-review--photo-right .julia-review__photo { order: 2; }
.julia-review--photo-right .julia-review__body { order: 1; }

.julia-review__photo {
  overflow: hidden;
  border-radius: var(--julia-radius);
  aspect-ratio: 4 / 5;
  background: var(--julia-cream-warm);
  box-shadow: 0 4px 20px rgba(26,22,20,0.08);
}
.julia-review__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.julia-review:hover .julia-review__photo img {
  transform: scale(1.03);
}

.julia-review__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.julia-review__eyebrow {
  font-family: var(--julia-sans);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--julia-terracotta);
  font-weight: 600;
}
.julia-review__quote {
  font-family: var(--julia-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--julia-charcoal);
  margin: 0;
  border: none;
  padding: 0;
  quotes: none;
}
.julia-review__author {
  font-family: var(--julia-sans);
  font-style: normal;
  font-size: 0.95rem;
  color: var(--julia-charcoal-muted);
  font-weight: 500;
}

@media (max-width: 780px) {
  .julia-review,
  .julia-review--photo-right {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .julia-review--photo-right .julia-review__photo { order: 0; }
  .julia-review--photo-right .julia-review__body { order: 1; }
  .julia-review__photo { aspect-ratio: 4 / 3; }
  .julia-reviews { gap: 56px; }
}

/* MENU button — platter, subtiele hoekjes */
@media (max-width: 1180px) {
  .site-header nav.main-navigation .menu-toggle,
  .site-header .main-navigation .menu-toggle,
  .main-navigation .menu-toggle {
    border-radius: 4px !important;
  }
}

/* MENU-knop — identiek gedrag open + dicht (voorkomt shape-flip bij toggle) */
@media (max-width: 1180px) {
  .site-header nav.main-navigation .menu-toggle,
  .site-header nav.main-navigation.toggled .menu-toggle,
  .main-navigation.toggled .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    font-family: var(--julia-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    border: 1px solid var(--julia-line) !important;
    background: transparent !important;
    color: var(--julia-charcoal) !important;
    box-shadow: none !important;
    width: auto !important;
    gap: 0 !important;
  }
  .site-header nav.main-navigation.toggled .menu-toggle {
    background: var(--julia-charcoal) !important;
    color: #fff !important;
    border-color: var(--julia-charcoal) !important;
  }

  /* Elk GeneratePress icon/svg binnen de toggle uit — alleen "MENU" tekst */
  .site-header nav.main-navigation .menu-toggle::before,
  .site-header nav.main-navigation .menu-toggle::after,
  .site-header nav.main-navigation .menu-toggle svg,
  .site-header nav.main-navigation .menu-toggle .gp-icon {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }
}


/* Fix: knop mag geen zwart-blijven na klik-toggle (was :focus persistence) */
@media (max-width: 1180px) {
  .site-header nav.main-navigation:not(.toggled) .menu-toggle:not(:hover):not(:focus-visible) {
    background: transparent !important;
    color: var(--julia-charcoal) !important;
    border-color: var(--julia-line) !important;
  }
  .site-header nav.main-navigation.toggled .menu-toggle {
    background: var(--julia-charcoal) !important;
    color: #fff !important;
    border-color: var(--julia-charcoal) !important;
  }
}

/* Header fix: .site-branding krimpt onder z\u27n eigen content-breedte,
   waardoor het brand-link overlapt met de nav-items. Niet meer laten krimpen. */
@media (min-width: 1181px) {
  .site-header .site-branding {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
  /* Zorg dat nav wel mag krimpen zodat header ademt bij kleinere schermen */
  .site-header nav.main-navigation {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  /* Iets minder padding op de nav-items bij smallere desktop-schermen */
  .site-header nav.main-navigation .main-nav > ul > li > a {
    padding: 10px 12px !important;
  }
  .site-header nav.main-navigation .main-nav > ul > li:last-child > a {
    padding: 10px 20px !important;
  }
  .site-header nav.main-navigation .main-nav > ul {
    gap: 2px !important;
  }
}

/* Nav-items niet laten wrappen, en compact bij smallere schermen */
@media (min-width: 1181px) {
  .site-header nav.main-navigation .main-nav > ul > li > a {
    white-space: nowrap !important;
  }
}
@media (min-width: 1181px) and (max-width: 1200px) {
  .site-header nav.main-navigation .main-nav > ul > li > a {
    padding: 10px 9px !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
  }
  .site-header nav.main-navigation .main-nav > ul > li:last-child > a {
    padding: 8px 14px !important;
    margin-left: 6px !important;
  }
}

/* Nav-content mag niet buiten z\u27n nav-container vallen */
@media (min-width: 1181px) {
  .site-header nav.main-navigation .inside-navigation,
  .site-header nav.main-navigation.grid-container .inside-navigation {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .site-header nav.main-navigation .main-nav > ul {
    justify-content: flex-end !important;
  }
}

/* Language switcher */
.julia-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--julia-sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  margin-left: 16px;
}
.julia-lang__link {
  color: var(--julia-charcoal-muted) !important;
  text-decoration: none !important;
  padding: 4px 2px;
  transition: color .2s ease;
}
.julia-lang__link:hover { color: var(--julia-pink) !important; }
.julia-lang__link.is-active {
  color: var(--julia-charcoal) !important;
  border-bottom: 1px solid var(--julia-charcoal);
}
.julia-lang__sep {
  color: var(--julia-line);
}

@media (max-width: 1180px) {
  .julia-lang {
    margin-left: 12px;
    order: 3;
  }
}

/* Language switcher — absolute in top-right van sticky header */
.site-header { position: sticky; }
.site-header > .julia-lang {
  position: absolute;
  top: 8px;
  right: 12px;
  z-index: 600;
  margin: 0;
  font-size: 0.7rem;
}
@media (max-width: 1180px) {
  .site-header > .julia-lang {
    top: 22px;
    right: 118px;
    font-size: 0.7rem;
    gap: 4px;
    padding: 4px 6px;
    background: rgba(250, 246, 239, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 4px;
  }
}
@media (max-width: 480px) {
  .site-header > .julia-lang {
    top: 20px;
    right: 106px;
    font-size: 0.65rem;
    padding: 3px 5px;
  }
}

/* Language-conditional footer content — using :lang() selector */
[data-lang="nl"] { display: none; }
[data-lang="en"] { display: none; }
:lang(nl) [data-lang="nl"] { display: initial; }
:lang(en) [data-lang="en"] { display: initial; }
/* For ul/list elements */
:lang(nl) ul[data-lang="nl"], :lang(nl) p[data-lang="nl"] { display: block; }
:lang(en) ul[data-lang="en"], :lang(en) p[data-lang="en"] { display: block; }

/* GP clearfix hack — pseudo-elementen tellen als flex-items en verstoren spacing */
.site-header .inside-header::before,
.site-header .inside-header::after {
  display: none !important;
  content: none !important;
}

/* Geen witte ruimte tussen header en eerste hero — WP-core margin-top override */
.inside-article > .entry-content,
.inside-article > .entry-content:not(:first-child) {
  margin-top: 0 !important;
}

/* ============ EDITABLE-BLOCK REFACTOR (The Steward) ============ */
.julia-section .wp-block-heading:not(.julia-section__title){ font-family:var(--julia-serif); font-weight:500; line-height:1.15; color:var(--julia-charcoal); margin:0 0 16px; }
.julia-section p:not([class*="__"]){ line-height:1.65; color:var(--julia-charcoal-soft); margin:0 0 16px; }
.julia-section--dark .wp-block-heading, .julia-section--dark p{ color:var(--julia-cream); }
.wp-block-group.julia-hero__inner > *, .wp-block-group[class*="julia-section"] > *{ margin-block-start:0 !important; margin-top:0 !important; }
.julia-hero__inner .julia-hero__eyebrow{ margin-top:0 !important; }
.wp-block-group.julia-hero__inner, .wp-block-group[class*="julia-section"]{ gap:0 !important; }
.julia-section > .wp-block-group, .julia-hero > .wp-block-group{ width:100%; }

/* Block-gap écht neutraliseren (WP wrapt in wp-block-group__inner-container / is-layout-flow) */
.julia-hero .wp-block-group__inner-container > *,
.julia-hero .is-layout-flow > *,
[class*="julia-section"] .wp-block-group__inner-container > *,
[class*="julia-section"] .is-layout-flow > *,
[class*="julia-section"].is-layout-flow > *{ margin-block-start:0 !important; margin-top:0 !important; }

/* Inner-container van geconverteerde groups mag geen eigen padding/breedte-constraint hebben */
.julia-hero .wp-block-group__inner-container,
[class*="julia-section"] .wp-block-group__inner-container{ padding:0 !important; max-width:none !important; }
.julia-hero .wp-block-group__inner-container > *,
[class*="julia-section"] .wp-block-group__inner-container > *{ max-width:none; }
/* generated section styles */
.julia-sty-2516135e{ max-width: 640px; text-align: center !important; }
.julia-sty-828e6e02{ max-width: 640px !important; }
.julia-sty-2e61b773{ max-width: 780px !important; }
.julia-sty-3c73ce38{ max-width: 820px !important; }
.julia-sty-01859488{ background: var(--julia-cream-2); max-width: 100% !important; }
.julia-sty-693f5f98{ max-width: 900px !important; }
.julia-sty-b3dae9a2{ text-align: center; padding-bottom: 120px !important; }
.julia-sty-25e52174{ padding-top: 0 !important; }
.julia-sty-c774805b{ max-width: 780px; padding-top: 20px !important; }
.julia-sty-9dcd2ef3{ max-width: 780px; padding-top: 20px; padding-bottom: 30px !important; }
.julia-sty-2b3963f4{ padding: 80px 0 !important; }
.julia-sty-04db7b9d{ text-align: center; padding-bottom: 100px !important; }
.julia-sty-df947628{ max-width: 1080px; padding-top: 0 !important; }
.julia-sty-0f0a2149{ padding-top: 60px; padding-bottom: 60px !important; }
.julia-sty-0764d2b0{ text-align: center; padding-bottom: 120px; padding-top: 40px !important; }
.julia-sty-3a339a54{ background: var(--julia-cream-2); max-width: 100%; padding-left: 40px; padding-right: 40px !important; }
.julia-sty-c8c00a0a{ text-align: center; padding-top: 40px; padding-bottom: 120px !important; }
.julia-sty-9c24589b{ max-width: 1100px !important; }

/* fix 12 jul: paragraaf-contrast in donkere secties (refactor-regressie — .julia-section p won van .julia-section--dark p) */
.julia-section--dark .wp-block-heading,
.julia-section--dark .julia-section p,
.julia-section--dark p:not([class*="__"]){ color:var(--julia-cream); }


/* ============================================
   KNOPPEN DIE AFBREKEN (mobiel)
   ============================================ */
/* Een inline-element met padding dat over twee regels breekt, krijgt die
   padding op beide regels apart. Dat gaf bij lange knopteksten twee losse
   grijze blokken die over elkaar heen vielen ("Reserveer en laat Julia
   adviseren"). inline-block houdt het een enkel blok. */
.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  display: inline-block;
  text-align: center;
  max-width: 100%;
  text-wrap: balance;
}