/* Aanvullende opmaak naast de Tailwind-klassen in index.html. */
body {
  background-color: #FAF9F6;
  color: #1A1C1E;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

details summary::-webkit-details-marker {
  display: none;
}

details[open] summary .faq-icon {
  transform: rotate(45deg);
}

/* Rustiger winkelbeeld: foto's en inhoud in plaats van decoratieve kaarten. */
:root {
  --footer-background: #0e253c;
  --accent-text: #805d30;
  --beige-donker: #d6d3ce;
  --button-gold: #C8A35C;
}

body .site-header {
  background: #FAF9F6;
}

.site-header a[class*="rounded"] {
  width: 176px;
  height: 44px;
  padding: 0 16px;
  justify-content: center;
  border-width: 1px;
  border-style: solid;
  white-space: nowrap;
}

.site-header a[class*="rounded"] .material-symbols-outlined {
  font-size: 19px;
}

body main h1[class],
body main h2[class],
body main h3[class] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  text-wrap: balance;
}

body main h1 > span[class] {
  color: inherit;
  font: inherit;
}

body a {
  text-underline-offset: 0.2em;
}

body a:focus-visible {
  outline: 2px solid #805d30;
  outline-offset: 4px;
}

body a[class*="rounded"] {
  border-radius: 4px;
  box-shadow: none;
  background-color: #0e253c;
  border-color: #0e253c;
  color: #fff;
}

body a[class*="rounded"] * {
  color: inherit;
}

body a[class*="rounded"]:hover {
  background-color: #173a59;
  border-color: #173a59;
  color: #fff;
}

body a[class*="rounded"] .material-symbols-outlined {
  color: #fff;
}

/* Secundaire acties in het goud van het logo; afspraken blijven donkerblauw. */
body a[class*="rounded"][href^="tel:"],
body a[class*="rounded"][href^="https://maps.google.com/"] {
  background-color: var(--button-gold);
  border-color: var(--button-gold);
  color: #0e253c;
}

body a[class*="rounded"][href^="tel:"]:hover,
body a[class*="rounded"][href^="https://maps.google.com/"]:hover {
  background-color: #b9934d;
  border-color: #b9934d;
  color: #0e253c;
}

body a[class*="rounded"][href^="tel:"] .material-symbols-outlined,
body a[class*="rounded"][href^="https://maps.google.com/"] .material-symbols-outlined {
  color: #0e253c;
}

body a:hover,
body img:hover,
body .group:hover img,
body a:hover > div {
  transform: none;
}

/* Bestaande eerste sectie is de introductie met de winkelfoto. */
main > section:first-child {
  background: #FAF9F6;
}

main > section:first-child .relative.rounded-3xl {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

main > section:first-child .rounded-2xl {
  border-radius: 2px;
}

/* Op mobiel komt de winkelfoto vóór de introductietekst. */
@media (max-width: 1023px) {
  main > section:first-child .grid > .relative {
    order: -1;
  }
}

main > section:first-child .flex.flex-wrap > div {
  padding-left: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* De agenda behoudt zijn eigen bediening en hoogte. */
body #booking-section .rounded-2xl {
  border: 2px solid var(--beige-donker);
  border-radius: 24px;
  box-shadow: none;
}

body #booking-section iframe {
  border-radius: 22px;
  box-shadow: none;
}

body #booking-section .rounded-xl {
  border-radius: 4px;
  box-shadow: none;
}

/* Kleine decoratieve labels wijken voor de bestaande koppen en uitleg. */
#booking-section .uppercase,
.care-section .absolute,
.care-section .grid > div > div:last-child {
  display: none;
}

body #booking-section .self-start {
  padding: 0;
  background: transparent;
  border: 0;
}

.care-section > .text-center,
.contact-section > .text-center {
  margin-left: 0;
  text-align: left;
}

.care-section .grid > div {
  background: transparent;
  border: 2px solid var(--beige-donker);
  border-radius: 24px;
  box-shadow: none;
}

.care-section .p-6 {
  padding: 1.25rem;
}

.care-section .p-6 p {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.contact-section .grid > div {
  padding: 1.75rem;
  background: transparent;
  border: 2px solid var(--beige-donker);
  border-radius: 24px;
  box-shadow: none;
}

.contact-section .w-11 {
  width: auto;
  height: auto;
  justify-content: flex-start;
  background: transparent;
  border-radius: 0;
}

.contact-section .text-xs {
  font-size: 0.875rem;
  line-height: 1.6;
}

main .text-brand-gold,
header .text-brand-gold {
  color: var(--accent-text);
}

.contact-section ul {
  font-variant-numeric: tabular-nums;
}

body .site-footer {
  background-color: var(--footer-background);
  color: #d9e2ea;
}

.site-footer .text-stone-400,
.site-footer .text-stone-500 {
  color: #bfccd8;
}

.site-footer .border-stone-800 {
  border-color: #395065;
}

.site-footer a:focus-visible {
  outline-color: #C59B63;
}

@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth {
    scroll-behavior: auto;
  }

  body *,
  body *::before,
  body *::after {
    animation: none !important;
    transition: none !important;
  }
}