/* ==========================================================================
   Base – Novadecor
   ========================================================================== */

:root {
  --font-inter: 'Inter', system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #171717;
  background-color: #fff;
}

#main-content,
main,
.collection-page,
.page-product {
  flex: 1 0 auto;
}

/* Ruimte voor fixed header - CSS-only berekening (geen JavaScript shifts meer).
   Mobiel: 40px announcement + 64px header = 104px → round naar 108px voor safety.
   Desktop: 44px announcement + 96px header + 48px nav = 188px.
   CRITICAL: Deze values zijn exact afgestemd op header.php structuur. */
main,
.page-product,
.collection-page {
  padding-top: 108px;
}
@media (min-width: 1024px) {
  main,
  .page-product,
  .collection-page {
    padding-top: 188px;
  }
}

/* Optioneel: JS kan deze variable nog steeds updaten voor edge cases, maar geen shift meer */
main[style*="--header-height"],
.page-product[style*="--header-height"],
.collection-page[style*="--header-height"] {
  padding-top: var(--header-height, 108px);
}
@media (min-width: 1024px) {
  main[style*="--header-height"],
  .page-product[style*="--header-height"],
  .collection-page[style*="--header-height"] {
    padding-top: var(--header-height, 188px);
  }
}

/* Productpagina: body EN inner div hebben beide .page-product → dubbele spacer.
   Alleen body krijgt de spacer; nested div.page-product niet. */
body.page-product > .page-product {
  padding-top: 0;
}

[data-header-placeholder]:empty,
[data-search-modal-placeholder]:empty,
[data-mobile-menu-placeholder]:empty,
[data-footer-placeholder]:empty {
  min-height: 0;
}

.min-h-screen {
  min-height: 100vh;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}