/* Ecolopolis — base styles uit _html/index.html; font-paden relatief aan deze CSS. */
/* Voorkom horizontale scroll: 100vw is breder dan body als er een verticale scrollbar is */
    html {
      overflow-x: hidden;
      width: 100%;
    }
    body {
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;
    }
    html.ecolopolis-html,
    body.ecolopolis-body {
      min-height: 100vh;
    }
    body.ecolopolis-body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    #ecolopolis-header {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 1000;
    }
    @font-face {
      font-family: 'Platform';
      src: url('../fonts/platform/Platform-Regular-Web.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Platform';
      src: url('../fonts/platform/Platform-Medium-Web.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Platform';
      src: url('../fonts/platform/Platform-Bold-Web.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca Italic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca Bold Italic.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca Black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Roca';
      src: url('../fonts/roca/Roca Black Italic.ttf') format('truetype');
      font-weight: 900;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Circular XX';
      src: url('../fonts/circular/CircularXX-Book.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    /* Alleen font-families; maten via Tailwind (mobiel-first) */
    .hero-title-font {
      font-family: 'Platform', sans-serif;
      font-weight: 700;
      letter-spacing: 0;
    }
    .hero-subtitle-font {
      font-family: 'Roca', Georgia, serif;
      font-weight: 400;
      letter-spacing: 0;
    }
    /* Platform Bold — o.a. intro-blok (ontwerp: 48px / 48px op desktop) */
    .platform-bold {
      font-family: 'Platform', sans-serif;
      font-weight: 700;
      letter-spacing: 0;
    }
    .platform-regular {
      font-family: 'Platform', sans-serif;
      font-weight: 400;
    }
    .platform-medium {
      font-family: 'Platform', sans-serif;
      font-weight: 500;
      letter-spacing: 0;
    }
    /* Circular XX Book — carousel bodytekst + Over Ecolopolis */
    .circular-book {
      font-family: 'Circular XX', sans-serif;
      font-weight: 400;
    }
    /* Carousel-paginatie: 10px tussen zichtbare dots; padding + negatieve marge = tikzone zonder extra visuele ruimte */
    .carousel-dot {
      box-sizing: content-box;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 11px;
      height: 10px;
      padding: 12.5px;
      margin: -12.5px;
      border: 0;
      background: transparent;
      cursor: pointer;
    }
    /* Onder md (768px): track vult container; slidebreedte zet carousel-JS (peek 20px + gap). */
    @media (max-width: 767px) {
      #carousel-track {
        width: 100% !important;
      }
      .carousel-container .carousel-slide {
        box-sizing: border-box;
        min-width: 0 !important;
      }
      /* Actieve slide: kolom gecentreerd; andere slides: links uitgelijnd zodat peek beeld toont */
      .carousel-slide-inner {
        align-items: flex-start;
      }
      .carousel-slide.is-carousel-active .carousel-slide-inner {
        align-items: center;
      }
    }
    .parallax-layer {
      will-change: transform;
    }
    /* ── Thema-kaarten (tabs) ── */
    .pillar-stack {
      --pillar-tab-min-h: 72px;
      --pillar-tab-overlap: 24px;
      position: relative;
    }
    .pillar-tab {
      position: relative;
      cursor: pointer;
    }
    .pillar-tab + .pillar-tab,
    .pillar-tab + .pillar-stack__footer {
      margin-top: calc(-1 * var(--pillar-tab-overlap));
    }
    .pillar-stack__footer {
      min-height: var(--pillar-tab-min-h);
      display: flex;
      align-items: center;
      border-radius: 16px 16px 0 0;
    }
    .pillar-tab__panel {
      position: relative;
      z-index: 1;
      background-color: var(--tab-bg);
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
      transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
    }
    .pillar-tab:hover .pillar-tab__panel,
    .pillar-tab.is-expanded .pillar-tab__panel,
    .pillar-tab--open .pillar-tab__panel {
      transform: translateY(-12px);
      box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.16);
    }
    .pillar-tab__head {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      height: var(--pillar-tab-min-h);
      padding: 0 20px;
    }
    .pillar-tab__title {
      min-height: 24px;
      width: 100%;
    }
    .pillar-tab__body {
      display: grid;
      grid-template-rows: 0fr;
      background-color: var(--tab-bg);
      transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    .pillar-tab__body-inner {
      min-height: 0;
      overflow: hidden;
      padding: 0 20px 16px;
    }
    .pillar-tab:hover .pillar-tab__body,
    .pillar-tab.is-expanded .pillar-tab__body,
    .pillar-tab--open .pillar-tab__body {
      grid-template-rows: 1fr;
    }
    .pillar-tab:hover .pillar-tab__body-inner,
    .pillar-tab.is-expanded .pillar-tab__body-inner,
    .pillar-tab--open .pillar-tab__body-inner {
      padding-top: 4px;
    }
    .ecolopolis-popup .leaflet-popup-content-wrapper {
      padding: 0;
      border-radius: 0.75rem;
      box-shadow: none;
      background: transparent;
    }
    .ecolopolis-popup .leaflet-popup-content {
      margin: 0;
      background: transparent;
    }
    .ecolopolis-popup .leaflet-popup-tip {
      display: none;
    }
    /* Leaflet default: .leaflet-container a.leaflet-popup-close-button { color: #757575 } — hogere specificiteit */
    .leaflet-container .ecolopolis-popup a.leaflet-popup-close-button {
      color: #000;
      opacity: 1;
    }
    .leaflet-container .ecolopolis-popup a.leaflet-popup-close-button:hover,
    .leaflet-container .ecolopolis-popup a.leaflet-popup-close-button:focus {
      color: #000;
      opacity: 1;
    }
    /* Headerlogo: draait naar cursor + max. 20px verschuiving; vertaling terug bij rust, hoek blijft */
    #header-logo-link {
      color: #ff00ff;
      transition: color 1s ease-out;
    }
    @media (prefers-reduced-motion: reduce) {
      #header-logo-link {
        transition: none;
      }
    }
    #header-logo {
      display: block;
      transform-origin: center center;
      will-change: transform;
      transition: transform 0.28s ease-out;
    }

    /* Fallbackpagina’s zonder Tailwind */
    .site-main {
      box-sizing: border-box;
      max-width: 42rem;
      margin-left: auto;
      margin-right: auto;
      padding: 6rem 1rem 4rem;
    }
    .entry-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 0 1rem;
    }
    .entry-content {
      line-height: 1.6;
    }
    .entry-content > * + * {
      margin-top: 1rem;
    }