/* =============================================================================
   verbindt.digital – Custom CSS
   Aanvullend op Tailwind CDN
   ============================================================================= */

/* ─── Self-hosted fonts (AVG: geen Google Fonts CDN) ─────────────────────────── */
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-serif-display-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-variable-italic.woff2') format('woff2');
}

/* ─── Toegankelijkheid ───────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: #2A5C45;
  color: #F7F4EE;
  border-radius: 0 0 0.5rem 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Toetsenbord-geopende dropdown: zelfde effect als group-hover */
.dropdown-open {
  opacity: 1 !important;
  visibility: visible !important;
}

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

body {
  font-family: 'Inter', sans-serif;
  background-color: #F7F4EE;
  color: #1A1A1A;
  margin: 0;
}

h1, h2, h3 {
  font-family: 'DM Serif Display', serif;
  line-height: 1.2;
}

/* Page enter animation */
.page-transition {
  animation: pageIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Scroll-triggered animations ─────────────────────────────────────── */
.animated-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.animated-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

.service-card {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.service-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.service-card:nth-child(2) { transition-delay: 0.1s; }
.service-card:nth-child(3) { transition-delay: 0.2s; }
.service-card:nth-child(4) { transition-delay: 0.3s; }
.service-card:nth-child(5) { transition-delay: 0.4s; }

/* ─── Scroll-reveal op subpagina's ─────────────────────────────────────────
   Elke directe sectie van .reveal-page faded in bij het scrollen.
   Alleen actief als JS draait (html.js); zonder JS blijft alles zichtbaar. */
html.js .reveal-page > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}

html.js .reveal-page > *.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* No-JS fallback: nooit content verbergen als JavaScript uitstaat */
html:not(.js) .animated-section,
html:not(.js) .service-card,
html:not(.js) .reveal-page > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── Hero animations ──────────────────────────────────────────────────── */
.hero-title {
  opacity: 0;
  animation: fadeInUp30 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0s forwards;
}

.hero-subtitle {
  opacity: 0;
  animation: fadeInUp20 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards;
}

.hero-buttons {
  opacity: 0;
  animation: fadeInUp20 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s forwards;
}

.hero-pricing {
  opacity: 0;
  animation: fadeInUp20 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.6s forwards;
}

.hero-imac {
  opacity: 0;
  animation: fadeInScale 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
}

@keyframes fadeInUp30 {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUp20 {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── iMac animation ───────────────────────────────────────────────────── */
.imac-section {
  transition: opacity 0.6s ease;
}

.imac-cursor-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 100;
  transition: transform 1.8s cubic-bezier(0.43, 0.13, 0.23, 0.96);
}

/* Green bar reveal */
.imac-green-bar {
  transform: scaleX(0);
  transform-origin: left;
  animation: scaleInLeft 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 0.7s forwards;
}

.imac-text-line-1 {
  transform: scaleX(0);
  transform-origin: left;
  animation: scaleInLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.9s forwards;
}

.imac-text-line-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: scaleInLeft 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 1.0s forwards;
}

@keyframes scaleInLeft {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* iMac cards fade in */
.imac-card {
  opacity: 0;
  animation: fadeInUp20 0.5s ease forwards;
}

.imac-card:nth-child(1) { animation-delay: 1.0s; }
.imac-card:nth-child(2) { animation-delay: 1.1s; }
.imac-card:nth-child(3) { animation-delay: 1.2s; }

/* iMac circles fade in */
.imac-circle {
  opacity: 0;
  animation: fadeInScale 0.5s ease forwards;
}

.imac-circle:nth-child(1) { animation-delay: 0.4s; }
.imac-circle:nth-child(2) { animation-delay: 0.5s; }
.imac-circle:nth-child(3) { animation-delay: 0.6s; }

/* ─── Scroll to top ────────────────────────────────────────────────────── */
#scroll-to-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#scroll-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Backdrop blur polyfill voor oudere browsers ──────────────────────── */
@supports not (backdrop-filter: blur(12px)) {
  nav {
    background-color: #F7F4EE !important;
  }
}

/* ─── Configurator specifiek ───────────────────────────────────────────── */
.tier-btn.selected {
  border-color: #2A5C45 !important;
  background-color: rgba(42, 92, 69, 0.05) !important;
}

/* ─── Configurator: geselecteerde tier-knop ────────────────────────────── */
/* Verplaatst uit het inline <style>-blok van page-pakket-samenstellen.php. */
.config-tier-btn.selected {
  border-color: #2A5C45;
  background-color: rgba(42, 92, 69, 0.05);
}

/* ─── Prose: fallback-styling voor page.php en index.php ───────────────────
   De class `prose` staat op de content-wrapper van de generieke templates,
   maar bestaat nergens: de Tailwind-build heeft geen typography-plugin. Zonder
   deze regels rendert elke pagina zonder eigen template — waaronder straks de
   privacyverklaring en de algemene voorwaarden — als ongestylede tekstbrij.
   Bewust compact gehouden: fallback-styling, geen volledig typografiesysteem.
   De wrapper zet zelf al text-lg/leading-relaxed en een tekstkleur op 70%
   dekking; koppen krijgen daarom expliciet de volle #1A1A1A. */
.prose h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  line-height: 1.2;
  color: #1A1A1A;
  margin: 2.5rem 0 1rem;
}

.prose h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #1A1A1A;
  margin: 2rem 0 0.75rem;
}

.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose p {
  line-height: 1.75;
  margin: 0 0 1.25rem;
}

.prose ul,
.prose ol {
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
}

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

.prose li { margin-bottom: 0.5rem; }

.prose a {
  color: #2A5C45;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.prose a:hover { color: #234d38; }

.prose strong {
  font-weight: 500;
  color: #1A1A1A;
}

/* Juridische documenten bevatten vaak tabellen (bijv. de subprocessor-lijst). */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 1rem;
}

.prose th,
.prose td {
  border: 1px solid rgba(26, 26, 26, 0.15);
  padding: 0.625rem 0.875rem;
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-weight: 500;
  color: #1A1A1A;
  background-color: rgba(42, 92, 69, 0.05);
}

.prose blockquote {
  border-left: 3px solid #2A5C45;
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
  font-style: italic;
}

/* ─── Responsive helpers ───────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hero-title {
    font-size: 3rem !important;
    line-height: 1.1;
  }
}

/* ─── Verminder beweging (WCAG 2.3.3) ──────────────────────────────────────
   Gebruikers met "prefers-reduced-motion: reduce" krijgen geen entrance-
   animaties, page-transitions of de iMac-cursoranimatie; alle content staat
   direct zichtbaar op zijn eindpositie. */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .hero-title,
  .hero-subtitle,
  .hero-buttons,
  .hero-pricing,
  .hero-imac,
  .animated-section,
  .service-card,
  html.js .reveal-page > *,
  .imac-cursor-wrapper,
  .imac-green-bar,
  .imac-text-line-1,
  .imac-text-line-2,
  .imac-card,
  .imac-circle {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Kaartstijl ────────────────────────────────────────────────────────────
   Eén plek voor de rand + schaduw die de witte content-kaarten sitebreed
   gebruiken, zodat de stijl op één plek aan te passen is in plaats van op
   elke losse Tailwind-class-string. */
.card-luxe {
  border: 1px solid #E8E4DC;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* ─── Juridische documenten ─────────────────────────────────────────────────
   Opmaak voor de automatisch omgezette .docx-inhoud (koppen, alinea's,
   lijsten, tabellen) op single-verbindt_legal.php, in dezelfde stijl als de
   rest van de site (serif-koppen, Inter-tekst, sage/gold-accenten). */
.legal-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 2rem 0 1rem;
  color: #1A1A1A;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 1.75rem 0 0.75rem;
  color: #1A1A1A;
}
.legal-content h4 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: #1A1A1A;
}
.legal-content p {
  margin: 0 0 1rem;
  line-height: 1.75;
  color: rgba(26, 26, 26, 0.8);
}
.legal-content ol {
  list-style: decimal;
  margin: 0 0 1.25rem;
  padding-left: 1.5rem;
  color: rgba(26, 26, 26, 0.8);
  line-height: 1.75;
}
.legal-content ol li { margin-bottom: 0.5rem; display: list-item; }
.legal-content a { color: #2A5C45; text-decoration: underline; }
.legal-content a:hover { text-decoration: none; }
.legal-content .legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}
.legal-content .legal-table td {
  border: 1px solid rgba(26, 26, 26, 0.1);
  padding: 0.625rem 0.875rem;
  vertical-align: top;
}