/* Atelier 27 — gedrag en rustige beweging bovenop de bestaande template.
   Geen nieuwe vormentaal: dezelfde header, dezelfde lijnen, alleen verfijnd. */

html { scroll-padding-top: 6.5rem; }

/* De headerbalk uit de template blijft identiek, maar reist mee zodat boeken altijd bereikbaar is. */
.site-header { position: fixed; transition: background .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { background: #f2ece3f7; box-shadow: 0 1px 18px #24221f0f; }
.site-header nav a[aria-current] { text-decoration: underline; text-underline-offset: .4rem; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* Micro-interacties in de bestaande stijl. */
.text-link > span[aria-hidden="true"], .header-cta > span:last-child, .booking-button > span[aria-hidden="true"] { transition: transform .25s ease; }
.text-link:hover > span[aria-hidden="true"], .header-cta:hover > span:last-child, .booking-button:hover > span[aria-hidden="true"] { transform: translate(3px, -3px); }
.booking-button { transition: background .25s ease, color .25s ease; }
.faq-list summary, .service-list summary { transition: color .2s ease; }
.faq-list summary:hover { color: #806044; }
.margot-photo img, .work-item img { transition: transform 1.1s cubic-bezier(.2, .65, .3, 1); }
.margot-photo:hover img, .work-item:hover img { transform: scale(1.035); }
.mobile-menu summary span { transition: transform .2s ease; }

/* Binnenkomen van secties: zacht, kort en nooit blokkerend. */
.is-reveal-pending { opacity: 0; transform: translateY(18px); }
.is-revealed { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .65, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  .brand-lockup { animation: a27-arrive 1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy h1 { animation: a27-arrive .9s .1s both; }
  .hero-intro, .hero-actions { animation: a27-arrive .9s .22s both; }
  .service-list details[open] > .service-body, .faq-list details[open] > p { animation: a27-open .3s ease both; }
}
@keyframes a27-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes a27-open { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Instellingen die de beheerder per sectie kan kiezen. Altijd binnen het bestaande palet. */
.section-theme-light { background: var(--cream) !important; color: var(--ink); }
.section-theme-sand { background: var(--stone) !important; color: var(--ink); }
.section-theme-dark { background: var(--warm-black) !important; color: var(--cream); }
.section-theme-dark h2, .section-theme-dark h3, .section-theme-dark p, .section-theme-dark dd, .section-theme-dark td { color: inherit !important; }
.section-theme-dark .eyebrow, .section-theme-dark dt, .section-theme-dark .service-index, .section-theme-dark .step-number { color: #c7bbab !important; }
.section-theme-dark .service-list details, .section-theme-dark .faq-list, .section-theme-dark .faq-list details, .section-theme-dark .visit-grid article, .section-theme-dark .price-menu, .section-theme-dark .price-group, .section-theme-dark .practical-grid, .section-theme-dark .practical-grid dl > div { border-color: #f5f1e93d; }
.section-theme-dark .booking-button.on-light { background: var(--cream); color: var(--warm-black); }
.section-theme-dark .booking-button.on-light:hover { background: var(--sand); color: var(--warm-black); }
.section-space-compact { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.section-space-roomy { padding-top: 9rem !important; padding-bottom: 9rem !important; }

/* Foto's die de beheerder vervangt, komen als achtergrondvariabele binnen. */
[data-background="background"].brand-banner, [data-background="background"].materials-image { background-image: var(--section-photo); }
.hero-image[data-background="background"]::before { background-image: linear-gradient(135deg, #2b231d57, #1c19168a), var(--section-photo); }

@media (max-width: 900px) { html { scroll-padding-top: 5.5rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-reveal-pending { opacity: 1; transform: none; }
}