/**
 * Vloeren Kameraad — Navigation & Footer
 * Vertaald van Header.tsx + Footer.tsx (Manus React source)
 * Bronnen: index.css, components.css, design-tokens.css
 *
 * Bevat: topbar, site-header, main-nav, dropdown, mobile-menu,
 *        footer-main, footer-bottom, hide-mobile / hide-desktop
 */

/* =============================================================================
   HIDE UTILITIES (nav-specifiek gebruik)
   ============================================================================= */

/* Verberg op mobiel (<768px), toon op desktop */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block; /* override per context naar flex/grid waar nodig */
  }
}

/* Toon op mobiel, verberg op desktop */
.hide-desktop {
  display: block;
}

@media (min-width: 768px) {
  .hide-desktop {
    display: none;
  }
}

/* =============================================================================
   TOPBAR  (desktop informatiebalk boven de header)
   Bron: <div class="bg-[oklch(0.22_0.015_220)] text-[...] hidden md:block">
   ============================================================================= */

.topbar {
  background-color: var(--color-charcoal);          /* oklch(0.22 0.015 220) → #1a1a18 */
  color: var(--color-cream-dark);                    /* oklch(0.92 0.008 75) → #d4cfc4 */
  font-family: var(--font-body);
  font-size: var(--text-xs);                         /* 0.75rem / 12px */
  padding: 0.5rem 0;                                 /* py-2 */
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;                                     /* gap-1.5 */
}

.topbar-item svg {
  color: var(--color-gold);
  flex-shrink: 0;
}

.topbar-link {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-cream-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.topbar-link:hover {
  color: var(--color-gold);
}

.topbar-whatsapp:hover {
  color: #25D366;
}

/* =============================================================================
   SITE HEADER  (vaste header, wit, met scroll-shadow)
   Bron: <header className="fixed left-0 right-0 z-50 ...">
   ============================================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: var(--header-bg);               /* #ffffff */
  transition: box-shadow var(--transition-normal), background-color var(--transition-normal);
}

/* Toon topbar — header schuift naar beneden als announcement bar actief is */
.has-announcement .site-header {
  top: 36px;                                         /* var(--topbar-height) */
}

/* Na scrollen: shadow */
.site-header.is-scrolled {
  box-shadow: var(--header-shadow);                  /* 0 2px 24px rgba(26,26,24,0.10) */
}

/* =============================================================================
   BRAND BAR  (logo + telefoon + CTA's, desktop only)
   ============================================================================= */

.brand-bar {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--color-cream-mid, oklch(0.90 0.01 75));
}

.brand-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0;
}

.brand-bar .nav-logo img {
  height: 56px;                                      /* groter logo in brand-bar */
}

.brand-bar-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad);                           /* zelfde als .btn: 0.75rem 1.5rem */
  border: 2px solid var(--color-gold);
  border-radius: var(--btn-radius);
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  background: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.btn-outline-gold:hover {
  background-color: var(--color-gold);
  color: var(--color-charcoal);
}

/* =============================================================================
   MAIN NAV  (desktop: alleen menu, mobiel: logo + hamburger)
   ============================================================================= */

.main-nav {
  background-color: var(--color-cream, oklch(0.96 0.01 75));
  border-top: 1px solid var(--color-cream-mid, oklch(0.90 0.01 75));
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;                                      /* h-16 mobiel */
}

@media (min-width: 768px) {
  .nav-inner {
    height: auto;                                    /* auto — past zich aan inhoud aan */
  }
}

/* =============================================================================
   NAV LOGO
   ============================================================================= */

.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* Hide mobile logo in nav on desktop (brand-bar has its own logo) */
@media (min-width: 768px) {
  .main-nav .nav-logo.hide-desktop {
    display: none;
  }
}

.nav-logo img {
  height: 52px;                                      /* mobiel — groter/leesbaar */
  width: auto;
  object-fit: contain;
}

@media (min-width: 768px) {
  .nav-logo img {
    height: 48px;                                    /* h-12 desktop */
  }
}

/* =============================================================================
   NAV MENU  (desktop horizontaal lijstje)
   Bron: <nav className="hidden lg:flex items-center gap-1">
   ============================================================================= */

.nav-menu {
  display: none;                                     /* mobiel: verborgen */
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .nav-menu {
    display: flex;
    align-items: center;
    gap: 0.25rem;                                    /* gap-1 */
  }
}

/* =============================================================================
   NAV ITEM  (elk menu-item inclusief dropdown wrapper)
   Bron: <div className="nav-item relative">
   ============================================================================= */

.nav-item {
  position: relative;
}

/* =============================================================================
   NAV LINK  (desktop knoppen / links in de nav)
   Bron: className="flex items-center gap-1 px-3 py-2 rounded text-sm font-semibold ..."
   ============================================================================= */

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;                                      /* gap-1 */
  padding: 0.5rem 0.75rem;                           /* py-2 px-3 */
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1;
  white-space: nowrap;
}

/* Desktop nav: gecentreerd menu */
@media (min-width: 1024px) {
  .main-nav .nav-link {
    color: var(--color-text-primary);
    padding: 0.75rem 0.75rem;
  }
  .main-nav .nav-link:hover {
    color: var(--color-gold);
  }
  .main-nav .nav-inner {
    justify-content: flex-start;
  }
}

.nav-link:hover {
  color: var(--color-gold);
}

/* Actieve staat: huidige pagina */
.nav-link.is-active,
.nav-item.is-active > .nav-link {
  color: var(--color-gold);
}

/* Nav-link met dropdown-chevron (button) */
.nav-link-dropdown {
  /* Erft van .nav-link — geen extra regels nodig */
}

/* Chevron roteren bij open dropdown */
.nav-item.is-open > .nav-link-dropdown svg,
.nav-link-dropdown[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-link svg {
  transition: transform var(--transition-fast);
}

/* =============================================================================
   NAV DROPDOWN  (mega-menu / submenu)
   Bron: .nav-dropdown in index.css (uitgebreid)
   ============================================================================= */

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--color-white);
  border: 1px solid var(--color-cream-mid);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 40px rgba(26, 26, 24, 0.12);
  padding: 1.5rem;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-normal),
              visibility var(--transition-normal),
              transform var(--transition-normal);
  z-index: 100;
}

/* Tonen bij hover of focus-within */
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =============================================================================
   NAV DROPDOWN ITEMS
   Bron: className="block px-3 py-2 rounded text-sm hover:bg-[cream] hover:text-gold"
   ============================================================================= */

.nav-dropdown-item {
  display: block;
  padding: 0.5rem 0.75rem;                           /* py-2 px-3 */
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background-color: var(--color-cream);
  color: var(--color-gold);
}

/* Uitgelicht item (★ Onze Specialiteit) */
.nav-dropdown-featured {
  color: var(--color-gold);
  font-weight: var(--font-semibold);
}

.nav-dropdown-featured:hover {
  background-color: var(--color-cream);
  color: var(--color-gold-dark);
}

/* Badge bovenin featured item */
.nav-dropdown-badge {
  display: inline-block;
  font-size: 0.6875rem;                              /* ~11px */
  font-weight: var(--font-bold);
  background-color: var(--color-gold);
  color: var(--color-charcoal);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  margin-right: 0.375rem;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

/* "Alle regio's →" link onderaan dropdown */
.nav-dropdown-more {
  color: var(--color-gold);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-cream-mid);
  padding-top: 0.75rem;
}

.nav-dropdown-more:hover {
  background-color: transparent;
  text-decoration: underline;
}

/* =============================================================================
   NAV CTA  (desktop: telefoon + offerte knop)
   Bron: <div className="hidden lg:flex items-center gap-3">
   ============================================================================= */

.nav-cta {
  display: none;                                     /* mobiel: verborgen */
}

@media (min-width: 1024px) {
  .nav-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;                                    /* gap-3 */
  }
}

/* Telefoon link in nav */
.nav-phone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
}

.nav-phone:hover {
  color: var(--color-gold);
}

/* =============================================================================
   NAV TOGGLE  (hamburger knop op mobiel)
   Bron: <button className="lg:hidden p-2 rounded text-[charcoal]">
   ============================================================================= */

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.nav-toggle:hover {
  color: var(--color-gold);
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }
}

/* =============================================================================
   MOBILE MENU  (uitschuifbaar menu onder de header)
   Bron: <div className="lg:hidden bg-white border-t ... max-h-[80vh] overflow-y-auto">
   ============================================================================= */

.mobile-menu {
  display: none;                                     /* verborgen standaard */
  background-color: var(--color-white);
  border-top: 1px solid var(--color-cream-mid);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.is-open {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

.mobile-menu > .container {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* =============================================================================
   MOBILE MENU LIST & ITEMS
   ============================================================================= */

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-menu-item {
  border: none;
}

/* =============================================================================
   MOBILE MENU LINK  (top-level links + submenu-toggle buttons)
   Bron: className="flex-1 py-3 text-sm font-semibold text-[charcoal]"
   ============================================================================= */

.mobile-menu-link {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.75rem 0;                                /* py-3 */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.mobile-menu-link:hover {
  color: var(--color-gold);
}

/* Toggle-knop (chevron) voor submenus */
.mobile-menu-toggle-btn {
  justify-content: space-between;
}

.mobile-menu-toggle-btn svg {
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.mobile-menu-toggle-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* =============================================================================
   MOBILE SUBMENU  (verborgen sublijst onder een nav-item)
   Bron: <div className="pl-4 pb-2 space-y-1">
   ============================================================================= */

.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem 1rem;                          /* pl-4 pb-2 */
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* =============================================================================
   MOBILE SUBMENU LINK
   Bron: className="block py-2 text-sm text-[taupe]"
   ============================================================================= */

.mobile-submenu-link {
  display: block;
  padding: 0.5rem 0;                                 /* py-2 */
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-normal);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.mobile-submenu-link:hover {
  color: var(--color-gold);
}

/* Uitgelicht submenu-item */
.mobile-submenu-link.is-featured {
  color: var(--color-gold);
  font-weight: var(--font-semibold);
}

/* =============================================================================
   MOBILE MENU CTA  (onderaan het mobile menu)
   Bron: <div className="pt-4 space-y-3 border-t border-[cream-mid]">
   ============================================================================= */

.mobile-menu-cta {
  padding-top: 1rem;
  margin-top: 0.75rem;
  border-top: 1px solid var(--color-cream-mid);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                                      /* space-y-3 */
}

/* =============================================================================
   MAIN CONTENT OFFSET  (pusht content onder de vaste 4-laags header)
   Mobiel: announcement 36 + nav 64 = 100px
   Desktop: announcement 36 + topbar 34 + brand-bar 80 + nav 49 = 199px
   ============================================================================= */

#main-content {
  padding-top: 100px;                                /* mobiel: announcement + nav */
}

@media (min-width: 768px) {
  #main-content {
    padding-top: 200px;                              /* desktop: 4-laags header */
  }
}

/* =============================================================================
   FOOTER — MAIN SECTIE
   Bron: <footer className="bg-[oklch(0.12_0.005_65)] text-[...]">
         <div className="container py-16">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
   ============================================================================= */

.site-footer {
  background-color: var(--color-charcoal);
  color: var(--color-cream-dark);
}

.footer-main {
  padding: 4rem 0;                                   /* py-16 */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;                                       /* gap-10 */
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* =============================================================================
   FOOTER BRAND  (kolom 1: logo + tagline + contact + social)
   ============================================================================= */

.footer-brand {
  /* Flow layout */
}

.footer-logo {
  margin-bottom: 1.5rem;
}

.footer-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);                   /* logo wit op donker bg */
}

.footer-tagline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-cream-dark);
  margin-bottom: 1.5rem;
}

/* =============================================================================
   FOOTER CONTACT
   Bron: <address className="..."> + <div className="space-y-3 text-sm">
   ============================================================================= */

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-style: normal;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cream-dark);
}

.footer-contact-item svg {
  color: var(--color-gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contact-item a {
  color: var(--color-cream-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-contact-item a:hover {
  color: var(--color-gold);
}

/* =============================================================================
   FOOTER SOCIAL
   Bron: <div className="flex gap-3 mt-6">
         each: className="w-9 h-9 bg-[charcoal-mid] rounded flex items-center justify-center hover:bg-gold"
   ============================================================================= */

.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.footer-social-link {
  width: 2.25rem;                                    /* w-9 */
  height: 2.25rem;
  background-color: var(--color-charcoal-mid);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cream-dark);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.footer-social-link:hover {
  background-color: var(--color-gold);
  color: var(--color-charcoal);
}

/* =============================================================================
   FOOTER NAV COLUMNS  (kolommen 2-4)
   Bron: <div> per kolom + <h3 className="text-white font-bold text-sm uppercase tracking-widest mb-5">
   ============================================================================= */

.footer-nav-col {
  /* Flow layout */
}

.footer-nav-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);           /* 0.1em */
  margin-bottom: 1.25rem;
  margin-top: 0;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cream-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-nav-link:hover {
  color: var(--color-gold);
}

/* =============================================================================
   FOOTER BOTTOM BAR
   Bron: <div className="border-t border-[charcoal-mid]"> + container py-5
         flex flex-col sm:flex-row justify-between text-xs text-[taupe]
   ============================================================================= */

.footer-bottom {
  border-top: 1px solid var(--color-charcoal-mid);
}

.footer-bottom > .container {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

@media (min-width: 640px) {
  .footer-bottom-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }
}

.footer-copyright {
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 1rem;
}

.footer-legal-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-link:hover {
  color: var(--color-gold);
}

/* =============================================================================
   FOOTER CTA BAND  (gouden band bovenaan de footer)
   Bron: <div className="bg-[gold] py-12">
         flex flex-col md:flex-row items-center justify-between gap-6
   ============================================================================= */

.footer-cta {
  background-color: var(--color-gold);
  padding: 3rem 0;                                   /* py-12 */
}

.footer-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .footer-cta-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.footer-cta-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--color-charcoal);
  margin: 0 0 0.25rem;
}

@media (min-width: 768px) {
  .footer-cta-title {
    font-size: var(--text-3xl);
  }
}

.footer-cta-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-charcoal-mid);
  margin: 0;
}

.footer-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .footer-cta-actions {
    flex-direction: row;
  }
}

/* ================================================================
   DIENST CARDS (image overlay title)
   ================================================================ */

.dienst-card {
  display: block;
  text-decoration: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.dienst-card:hover {
  transform: translateY(-4px);
}

.dienst-card-image {
  position: relative;
  height: 14rem;
  overflow: hidden;
}

.dienst-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.dienst-card:hover .dienst-card-image img {
  transform: scale(1.05);
}

.dienst-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(26,26,24,0.7) 0%, rgba(26,26,24,0.1) 60%);
}

.dienst-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
}

.dienst-card-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: white;
  z-index: 1;
}

/* ================================================================
   TRUST STRIP (below stats bar)
   ================================================================ */

.trust-strip {
  background: var(--color-cream);
  padding: 1rem 0;
  border-top: 1px solid var(--color-cream-mid);
  border-bottom: 1px solid var(--color-cream-mid);
}

.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.trust-strip-item {
  white-space: nowrap;
}

/* ================================================================
   SECTION LABEL SUB (spotlight)
   ================================================================ */

.section-label-sub {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

/* ================================================================
   WERKPROCES GRID (2-col met quote-afbeelding)
   ================================================================ */

.werkproces-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .werkproces-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.werkproces-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.werkproces-step {
  display: flex;
  gap: 1.25rem;
}

.werkproces-step-num {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: oklch(0.98 0.008 75);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-gold);
}

.werkproces-step-title {
  font-family: var(--font-body);
  font-weight: var(--font-bold);
  color: var(--color-text-primary);
  margin: 0 0 0.25rem;
  font-size: var(--text-base);
}

.werkproces-step-desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
  line-height: var(--leading-relaxed);
}

.werkproces-image-col {
  position: relative;
}

.werkproces-quote {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: oklch(0.12 0.005 65 / 0.92);
  padding: 1.25rem;
  border-radius: var(--radius-sm);
}

.werkproces-quote-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-style: italic;
  color: white;
  line-height: var(--leading-relaxed);
  margin: 0;
}

.werkproces-quote-cite {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-gold);
  margin: 0.5rem 0 0;
}

/* ================================================================
   SHOWROOM SECTION (2-col grid, dark bg with image overlay)
   ================================================================ */

.showroom-section {
  position: relative;
  overflow: hidden;
  background-color: oklch(0.22 0.015 220);
  padding: 5rem 0;
}

.showroom-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.20;
}

.showroom-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1024px) {
  .showroom-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.showroom-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.showroom-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.showroom-info-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: white;
  margin-bottom: 0.25rem;
}

.showroom-info-value {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: oklch(0.80 0.008 75);
  line-height: 1.6;
}

.showroom-gallery-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.showroom-gallery-2x2 .showroom-gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 1;
  position: relative;
}

.showroom-gallery-item .img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.showroom-gallery-item:hover .img-cover {
  transform: scale(1.05);
}

/* btn-gold for showroom */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--color-gold);
  color: var(--color-charcoal);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.btn-gold:hover {
  background: var(--color-gold-hover);
}

/* ================================================================
   REVIEW SCORE
   ================================================================ */

.review-score {
  margin-bottom: 0.5rem;
  font-family: var(--font-body);
}

/* ================================================================
   BEKENDE NEDERLANDERS
   ================================================================ */

.bekende-nederlanders {
  padding: 3rem 0;
  background: white;
  border-top: 1px solid var(--color-cream-mid);
  border-bottom: 1px solid var(--color-cream-mid);
}

.bekende-namen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2rem;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ================================================================
   FOOTER CTA (inside footer)
   ================================================================ */

.footer-cta {
  padding: 3rem 0;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-cream-mid);
  text-align: center;
}

/* ================================================================
   FOOTER GRID — 5 columns on desktop
   ================================================================ */

@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  }
}

/* ================================================================
   FOOTER HOURS
   ================================================================ */

.footer-hours {
  margin: 0;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.footer-hours-row dt {
  color: var(--color-text-muted);
}

.footer-hours-row dd {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ================================================================
   MOBILE STICKY BAR
   ================================================================ */

.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  background: var(--color-charcoal);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0.5rem;
  gap: 0.5rem;
}

.mobile-sticky-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: white;
  text-decoration: none;
  transition: background 0.2s;
}

.mobile-sticky-item:hover {
  background: rgba(255,255,255,0.1);
}

.mobile-sticky-cta {
  background: var(--color-gold);
  color: var(--color-charcoal);
  font-weight: 600;
  border-radius: var(--radius-lg);
}

.mobile-sticky-cta:hover {
  background: var(--color-gold-hover);
}

/* Hide on desktop */
@media (min-width: 768px) {
  .mobile-sticky-bar {
    display: none;
  }
}

/* Add bottom padding to body for sticky bar (mobile only) */
@media (max-width: 767px) {
  body {
    padding-bottom: 4rem;
  }
}