/* ==========================================================================
   layout.css — site layout, header, navigatie (mega menu), footer, taalswitcher
   ========================================================================== */

/* Site header */
.site-header {
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img { height: 56px; width: auto; }
.brand-text { display: none; }
.brand:hover { text-decoration: none; }

/* Navigatie pakt de beschikbare ruimte tussen logo en taalswitcher */
.primary-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: flex-end;
}

/* Hoofdnavigatie lijst */
.primary-nav .nav-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--space-4);
  align-items: center;
}

/* Top-level: gewone links (Home etc) en buttons (mega-triggers) krijgen dezelfde stijl */
.primary-nav .nav-list > li > a,
.primary-nav .nav-trigger {
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  padding: var(--space-2) 0;
  position: relative;
  white-space: nowrap;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.primary-nav .nav-list > li > a::after,
.primary-nav .nav-trigger::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  bottom: -3px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition);
}
[dir="rtl"] .primary-nav .nav-list > li > a::after,
[dir="rtl"] .primary-nav .nav-trigger::after {
  transform-origin: right center;
}
.primary-nav .nav-list > li > a:hover::after,
.primary-nav .nav-trigger:hover::after,
.primary-nav .nav-trigger[aria-expanded="true"]::after {
  transform: scaleX(1);
}

.nav-trigger-arrow {
  width: 10px;
  height: 7px;
  opacity: 0.55;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-trigger[aria-expanded="true"] .nav-trigger-arrow {
  transform: rotate(180deg);
  opacity: 1;
}

.primary-nav .has-children { position: static; }

/* Legacy submenu fallback (wordt nog gebruikt als 'children' set is in plaats van 'mega') */
.primary-nav .nav-submenu {
  list-style: none;
  margin: 0; padding: var(--space-2) 0;
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  min-width: 230px;
  box-shadow: var(--shadow);
  display: none;
}
.primary-nav .has-children:hover .nav-submenu,
.primary-nav .has-children:focus-within .nav-submenu {
  display: block;
}
.primary-nav .nav-submenu a {
  display: block;
  padding: var(--space-2) var(--space-4);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--fs-sm);
}
.primary-nav .nav-submenu a:hover {
  background: var(--color-sand);
  color: var(--color-primary);
}

/* ==========================================================================
   Mega menu panel
   Strekt zich uit van rand tot rand van de site-header
   ========================================================================== */
.mega-panel {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  width: 100%;
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-line);
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--color-saffron) 0%, var(--color-primary) 50%, var(--color-saffron) 100%) 1;
  box-shadow: 0 18px 36px rgba(42, 33, 24, 0.12);
  z-index: 60;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

/* Hover op desktop opent panel via pure CSS :hover.
   Geen JS-class manipulatie tijdens hover = geen flikker. */
@media (min-width: 901px) {
  /* Standaard: panel onzichtbaar via display none op het hidden attribuut */
  .has-mega .mega-panel[hidden] {
    display: none;
  }

  /* Bij hover op de <li>: panel zichtbaar */
  .has-mega:hover .mega-panel,
  .has-mega:focus-within .mega-panel {
    display: block;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Onzichtbare bridge boven het panel: overbrugt de gap tussen trigger
     en panel zodat de muis nooit uit hover gaat tijdens beweging naar
     beneden. De bridge is visueel transparant maar wel hoverbaar.
     Hij maakt deel uit van het panel zelf, dus de hover op het panel
     blijft actief zolang muis op de bridge is.
     Hoogte ruim genomen (32px) om elke header-hoogte te dekken. */
  .has-mega .mega-panel::before {
    content: "";
    position: absolute;
    top: -32px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 32px;
    background: transparent;
  }
}

.mega-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  position: relative;
}
.mega-inner::before {
  /* zachte zellige decoratie linksboven */
  content: "";
  position: absolute;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
  width: 80px;
  height: 80px;
  background-image: radial-gradient(circle at 50% 50%, var(--color-saffron) 0, var(--color-saffron) 1.5px, transparent 2px);
  background-size: 14px 14px;
  opacity: 0.18;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(0.3px);
}

/* Wanneer er een feature blok is: 2/3 kolommen + 1/3 feature */
.has-mega-feature .mega-inner {
  grid-template-columns: 1fr;
}
.mega-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5) var(--space-6);
}

.mega-panel--with-feature .mega-inner {
  grid-template-columns: 2.4fr 1fr;
  align-items: stretch;
}

.mega-col-heading {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  position: relative;
}
.mega-col-heading::after {
  content: "✦";
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  color: var(--color-saffron);
  font-size: 0.7em;
  opacity: 0.75;
}

.mega-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mega-link {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition), transform var(--transition);
}
.mega-link:hover,
.mega-link:focus-visible {
  background: var(--color-sand);
  text-decoration: none;
  transform: translateX(2px);
}
[dir="rtl"] .mega-link:hover,
[dir="rtl"] .mega-link:focus-visible {
  transform: translateX(-2px);
}
.mega-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-saffron-light) 0%, var(--color-sand-dark) 100%);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background var(--transition), color var(--transition);
}
.mega-link-icon svg {
  width: 18px;
  height: 18px;
}
.mega-link:hover .mega-link-icon,
.mega-link:focus-visible .mega-link-icon {
  background: var(--color-primary);
  color: var(--color-bg-alt);
}
.mega-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.mega-link-label {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.3;
}
.mega-link-desc {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Feature blok rechts (CTA / spotlight) */
.mega-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--color-sand) 0%, var(--color-saffron-light) 100%);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-line);
  transition: transform var(--transition), box-shadow var(--transition);
}
.mega-feature:hover,
.mega-feature:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.mega-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.mega-feature-icon svg {
  width: 22px;
  height: 22px;
}
.mega-feature-eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  font-weight: 700;
}
.mega-feature-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-charcoal);
}
.mega-feature-desc {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.5;
  margin-top: var(--space-1);
}
.mega-feature-cta {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-top: var(--space-3);
}
.mega-feature::after {
  /* zellige ster waterstempel rechtsonder */
  content: "✦";
  position: absolute;
  bottom: -10px;
  inset-inline-end: -8px;
  font-size: 110px;
  color: var(--color-saffron);
  opacity: 0.07;
  font-weight: 700;
  pointer-events: none;
}

/* Backdrop achter actief mega panel op desktop */
.mega-backdrop {
  position: fixed;
  top: 0;
  inset-inline: 0;
  bottom: 0;
  background: rgba(42, 33, 24, 0.18);
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.mega-backdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Taalswitcher */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-size: var(--fs-sm);
}
.lang-switch-link {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color var(--transition), background var(--transition);
}
.lang-switch-link:hover {
  color: var(--color-primary);
  background: var(--color-sand);
}
.lang-switch-link.is-active {
  color: var(--color-primary);
  pointer-events: none;
}
.lang-switch-sep {
  color: var(--color-line-strong);
  font-weight: 300;
  user-select: none;
}

/* Mobiel hamburger toggle */
.nav-toggle {
  display: none;
  background: none; border: 0;
  cursor: pointer;
  padding: var(--space-2);
}
.nav-toggle-bar {
  display: block;
  width: 26px; height: 2px;
  background: var(--color-text);
  margin: 5px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Mobiel: accordion-stijl mega menu
   ========================================================================== */
@media (max-width: 900px) {
  .nav-toggle { display: block; order: 3; }
  .lang-switcher {
    margin-inline-start: auto;
    order: 2;
  }
  .primary-nav {
    flex: 1 0 100%;
    order: 4;
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    inset-inline-end: 0;
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }
  .primary-nav.is-open { display: block; }
  .primary-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .primary-nav .nav-list > li > a,
  .primary-nav .nav-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-line);
    text-align: start;
  }
  .primary-nav .nav-list > li > a::after,
  .primary-nav .nav-trigger::after {
    display: none;
  }
  .primary-nav .nav-list > li:first-child > a,
  .primary-nav .nav-list > li:first-child .nav-trigger {
    border-top: 0;
  }

  /* Mobiel mega panel: accordeon (relative, geen overlay) */
  .mega-panel {
    position: static;
    width: 100%;
    border: 0;
    border-image: none;
    box-shadow: none;
    background: var(--color-sand);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    overflow: hidden;
    max-height: 0;
    transition: max-height 240ms ease;
  }
  .mega-panel:not([hidden]) {
    max-height: 4000px;
  }
  .mega-inner {
    padding: var(--space-3) var(--space-5);
    grid-template-columns: 1fr !important;
    gap: var(--space-3);
  }
  .mega-inner::before { display: none; }
  .mega-columns {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .mega-col-heading {
    font-size: var(--fs-xs);
    margin-bottom: var(--space-2);
  }
  .mega-link {
    padding: var(--space-2);
  }
  .mega-link-icon {
    width: 32px;
    height: 32px;
  }
  .mega-feature {
    padding: var(--space-3);
  }
  .mega-feature-title {
    font-size: var(--fs-md);
  }

  /* Legacy submenu fallback op mobiel */
  .primary-nav .nav-submenu {
    position: static;
    border: 0;
    box-shadow: none;
    background: var(--color-sand);
    padding: 0;
    display: block;
  }
  .primary-nav .nav-submenu a {
    padding-inline-start: var(--space-7);
  }

  .mega-backdrop { display: none !important; }
}

/* Main */
main {
  display: block;
  padding: var(--space-7) 0 var(--space-8);
  min-height: 60vh;
}

/* Site footer */
.site-footer {
  position: relative;
  background: var(--color-charcoal);
  color: var(--color-sand-dark);
  padding: var(--space-8) 0 var(--space-5);
  margin-top: var(--space-8);
  overflow: hidden;
}

/* Decoratieve zellige tegelband bovenaan de footer */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background: var(--color-terracotta);
  background-image:
    linear-gradient(45deg, var(--color-saffron) 25%, transparent 25%),
    linear-gradient(-45deg, var(--color-saffron) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--color-saffron) 75%),
    linear-gradient(-45deg, transparent 75%, var(--color-saffron) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
  z-index: 1;
}

/* Subtiel zellige patroon op de footer-achtergrond */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 14px 0 0 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%23d99b2c' stroke-width='1' opacity='0.10'><path d='M40 8 L48 24 L64 16 L56 32 L72 40 L56 48 L64 64 L48 56 L40 72 L32 56 L16 64 L24 48 L8 40 L24 32 L16 16 L32 24 Z'/><circle cx='40' cy='40' r='5'/></g></svg>");
  background-size: 80px 80px;
  background-repeat: repeat;
  pointer-events: none;
}
.site-footer > .container {
  position: relative;
  z-index: 2;
  padding-top: var(--space-3);
}

.site-footer a {
  color: var(--color-sand);
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer a:hover {
  color: var(--color-saffron-light);
  text-decoration: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.footer-brand {
  position: relative;
}
.footer-brand .brand img { filter: none; }
.footer-tagline {
  margin-top: var(--space-3);
  color: #c8b89e;
  font-size: var(--fs-sm);
  font-style: italic;
  font-family: var(--font-display);
  max-width: 32ch;
  line-height: 1.55;
}
.footer-update {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: #9c8b71;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--space-1) var(--space-3);
  background: rgba(217, 155, 44, 0.08);
  border: 1px solid rgba(217, 155, 44, 0.18);
  border-radius: 999px;
}
.footer-update::before {
  content: "✦";
  color: var(--color-saffron);
  font-size: 0.9em;
}

/* Footer kolom-headings: serif font + saffraan kleur + onderlijntje */
.footer-heading {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  margin: 0 0 var(--space-4);
  color: var(--color-saffron-light);
  position: relative;
  padding-bottom: var(--space-2);
  display: inline-block;
}
.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-saffron) 0%, transparent 100%);
  border-radius: 1px;
}
[dir="rtl"] .footer-heading::after {
  left: auto;
  right: 0;
  background: linear-gradient(-90deg, var(--color-saffron) 0%, transparent 100%);
}

.footer-list {
  list-style: none;
  padding: 0; margin: 0;
}
.footer-list li {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  position: relative;
  padding-left: 0;
  transition: padding-left var(--transition);
}
.footer-list a {
  position: relative;
  display: inline-block;
  padding: 2px 0;
}
.footer-list a::before {
  content: "›";
  position: absolute;
  left: -14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-saffron);
  opacity: 0;
  transition: opacity var(--transition), left var(--transition);
  font-weight: 700;
}
[dir="rtl"] .footer-list a::before {
  left: auto;
  right: -14px;
  content: "‹";
}
.footer-list a:hover {
  padding-left: 14px;
  color: var(--color-saffron-light);
}
[dir="rtl"] .footer-list a:hover {
  padding-left: 0;
  padding-right: 14px;
}
.footer-list a:hover::before {
  opacity: 1;
  left: 0;
}
[dir="rtl"] .footer-list a:hover::before {
  left: auto;
  right: 0;
}

/* Decoratieve scheiding tussen footer-grid en footer-bottom */
.footer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: var(--color-saffron);
  opacity: 0.7;
}
.footer-divider::before,
.footer-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(217, 155, 44, 0.4) 50%, transparent 100%);
}
.footer-divider span {
  font-size: 0.9rem;
  letter-spacing: 0.4em;
}

.footer-bottom {
  padding-top: 0;
  font-size: var(--fs-sm);
  color: #c8b89e;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: flex-start;
}
.footer-bottom > p { margin: 0; }
.footer-disclaimer {
  font-size: var(--fs-xs);
  max-width: 60ch;
  opacity: 0.85;
  line-height: 1.55;
  margin: 0;
}
.footer-cookie-button {
  background: none;
  border: 1px solid rgba(217, 155, 44, 0.25);
  border-radius: 999px;
  color: #c8b89e;
  text-decoration: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  font: inherit;
  font-size: var(--fs-xs);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footer-cookie-button:hover {
  background: rgba(217, 155, 44, 0.10);
  border-color: var(--color-saffron);
  color: var(--color-saffron-light);
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-3); }
}

/* ==========================================================================
   RTL specifieke aanpassingen voor Arabisch
   ========================================================================== */

[dir="rtl"] body {
  line-height: 1.75;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
  font-family: var(--font-body);
  letter-spacing: 0;
}

[dir="rtl"] .mega-feature-cta span[aria-hidden="true"] {
  transform: scaleX(-1);
  display: inline-block;
}

[dir="rtl"] nav[aria-label] span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}