/* Dienst.nl — redesign-laag, 25 juli 2026
   Additieve laag ná app.css. Verwijder dit bestand om terug te gaan naar de
   oude vormgeving; er is geen andere code van afhankelijk. */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────
   Rustiger vorm (minder ronding), warm papier i.p.v. koel blauwwit, en diepte
   die alleen nog iets betekent: hairlines dragen de structuur, schaduw is
   voorbehouden aan hover en aan het zoekveld. */
:root {
  --radius: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  --background: #fbfaf8;
  --surface: #ffffff;
  --surface-foreground: #11161d;
  --card: #ffffff;
  --card-foreground: #11161d;
  --foreground: #11161d;

  --muted: #f3f2ef;
  --muted-foreground: #5f6672;
  --secondary: #f3f2ef;
  --secondary-foreground: #11161d;

  --border: #e3e1db;
  --input: #d7d5cf;
  --field-bg: #ffffff;

  --primary: #101f33;
  --primary-foreground: #ffffff;
  --accent: #00706f;
  --accent-foreground: #ffffff;
  --ring: #00706f;

  --shadow-soft: 0 1px 2px rgba(17, 22, 29, 0.04);
  --shadow-card: 0 1px 2px rgba(17, 22, 29, 0.05);
  --shadow-lift: 0 12px 28px -20px rgba(17, 22, 29, 0.35), 0 2px 6px -3px rgba(17, 22, 29, 0.08);

  --account-bg: #f6f5f2;
  --account-panel-border: #e7e5df;
  --account-panel-radius: 0.875rem;
  --account-panel-shadow: 0 1px 2px rgba(17, 22, 29, 0.05);
  --account-divider: #eeece7;

  --edge: #cfccc4;
}

/* ── 2. Basis ── */
body {
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* ── 3. Knoppen ──
   Eén maatsysteem, echte hover-kleuren i.p.v. transparantie. Inkt is de
   standaard actie, teal is de opvallende actie en wordt spaarzaam gebruikt. */
.btn {
  padding: 0.625rem 1.125rem;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-sm {
  padding: 0.4375rem 0.875rem;
  border-radius: 0.4375rem;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #1a3252; opacity: 1; }

.btn-dark { background: var(--foreground); color: #fff; }
.btn-dark:hover { background: #262f3b; opacity: 1; }

.btn-accent { background: var(--accent); color: #fff; border: none; }
.btn-accent:hover { background: #005b5a; }

.btn-outline { background: var(--surface); color: var(--foreground); border: 1px solid var(--input); }
.btn-outline:hover { background: var(--muted); border-color: var(--edge); }

/* ── 4. Header ── */
.site-header {
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
}

.header-search {
  border-radius: var(--radius-lg);
  border-color: var(--input);
  box-shadow: none;
}

.header-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--input));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Zoeken is overal dezelfde actie, dus overal dezelfde kleur. */
.header-search-btn.btn-primary {
  background: var(--accent);
  color: #fff;
  border-radius: 0.4375rem;
}

.header-search-btn.btn-primary:hover { background: #005b5a; }

/* ── 5. Hero ──
   Zoeken is de hoofdrol, niet de poster: geen glow, geen zwevende kaartjes
   over de foto, en een kop die ruimte laat voor de eerste advertenties. */
.hero {
  padding: 2.75rem 0 3rem;
  border-bottom: 1px solid var(--border);
}

@media (min-width: 768px) {
  .hero { padding: 4.25rem 0 3.75rem; }
}

.hero::before { display: none; }

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

.hero-badge {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}

.hero-badge svg { color: var(--accent); }

.hero h1 {
  font-size: clamp(2.125rem, 4.6vw, 3.375rem);
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 1rem;
}

.hero-desc {
  font-size: 1.0625rem;
  max-width: 33rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.hero-search {
  padding: 0.4375rem;
  border-color: var(--input);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}

.hero-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--input));
}

.hero-search .btn {
  border-radius: 0.5rem;
  padding: 0.6875rem 1.375rem;
}

.hero-search .btn-primary { background: var(--accent); color: #fff; }
.hero-search .btn-primary:hover { background: #005b5a; }

.hero-trust { font-size: 0.8125rem; }

.hero-card,
.hero-stat { display: none; }

.hero-visual { padding: 0; margin: 0; }

.hero-image-wrap {
  aspect-ratio: 4 / 4.5;
  border-radius: var(--radius-2xl);
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

/* ── 6. Secties ── */
.section { padding: 4.25rem 0; }

.section-header { margin-bottom: 1.75rem; }

.section-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.03em;
}

.section-header p { max-width: 44rem; }

.section-link {
  color: var(--foreground);
  border-bottom: 1px solid color-mix(in srgb, var(--foreground) 25%, transparent);
  padding-bottom: 1px;
}

.section-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  text-decoration: none;
}

/* ── 7. Rubriekkaarten ── */
.category-card {
  padding: 1.125rem;
  gap: 0.625rem;
  border-radius: var(--radius-2xl);
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.category-card:hover {
  transform: translateY(-1px);
  border-color: var(--edge);
  box-shadow: var(--shadow-lift);
}

.category-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
  box-shadow: none;
}

.category-icon-svg { width: 1.125rem; height: 1.125rem; }

.category-card-title h3 { font-size: 0.9375rem; }

.category-tag { font-size: 0.6875rem; }

.category-more {
  background: #f2f8f8;
  color: #00706f;
  font-size: 0.6875rem;
}

.category-more:hover {
  background: color-mix(in srgb, #00706f 12%, #f2f8f8);
  color: #005b5a;
}

/* ── 8. Advertentiekaarten ──
   Hairline eerst, schaduw alleen bij hover. Prijs staat als rustige chip
   linksonder in de foto, zodat hij niet met de badge rechtsboven vecht. */
.listings-grid { gap: 1rem; }

.listing-card {
  border-radius: var(--radius-2xl);
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.listing-card:hover {
  transform: translateY(-1px);
  border-color: var(--edge);
  box-shadow: var(--shadow-lift);
}

.listing-image { aspect-ratio: 16 / 10; }

.listing-card:hover .listing-image img { transform: scale(1.02); }

.listing-badge {
  top: 0.625rem;
  left: 0.625rem;
  border-radius: 0.4375rem;
  border: 1px solid rgba(17, 22, 29, 0.06);
  background: color-mix(in srgb, #fff 93%, transparent);
}

.listing-price-badge {
  top: 0.55rem;
  right: 0.55rem;
  bottom: auto;
  left: auto;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  background: #00706f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.listing-body {
  padding: 0.875rem 0.9375rem 1rem;
  gap: 0.4375rem;
}

.listing-title { font-size: 0.9375rem; letter-spacing: -0.012em; }

.listing-title a:hover { color: var(--accent); }

/* Aanbieder en beoordeling blijven op één regel; lange namen korten af,
   zodat "(7)" niet als losse regel onder de sterren hangt. */
.listing-footer {
  padding-top: 0.625rem;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.listing-card--gevraagd .listing-footer {
  width: 100%;
  border-top: 1px solid rgba(0, 112, 111, 0.35);
}

.listing-provider {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-rating {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* .listing-reviews is in app.css twee dingen: het aantal beoordelingen in een
   kaart én de reviewsectie op de detailpagina. Die laatste regel duwde het
   getal in de kaart naar een eigen regel. */
.listing-rating .listing-reviews {
  margin: 0;
  padding: 0;
  border: none;
}

.listing-cat-pill { font-size: 0.6875rem; }

/* Gevraagd: eigen kleur, maar binnen het merk (teal) i.p.v. crème/goud. */
.listing-card--gevraagd {
  background: color-mix(in srgb, var(--accent) 5%, #fff);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow: none;
}

.listing-card--gevraagd:hover {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow: var(--shadow-lift);
}

.listing-card--gevraagd .listing-price--inline {
  color: var(--accent);
  font-weight: 800;
}

.listing-badge--gevraagd.listing-badge--static,
.listing-cat-pill--gevraagd {
  background: color-mix(in srgb, var(--accent) 11%, #fff);
  color: #00595a;
  border: none;
}

/* ── 8b. Zoekresultaten in lijstvorm ──
   De rij hergebruikt .listing-footer uit de kaart; in een horizontale rij is
   die scheidingslijn een losse streep, dus die halen we weg. */
.listing-row {
  padding: 0.875rem;
  border-radius: var(--radius-2xl);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.listing-row:hover {
  border-color: var(--edge);
  box-shadow: var(--shadow-lift);
}

.listing-row-image { border-radius: var(--radius-lg); }

.listing-row .listing-footer {
  border-top: none;
  padding-top: 0.25rem;
  gap: 0.75rem;
  justify-content: flex-start;
}

.listing-row .listing-provider { flex: 0 0 auto; }

.search-refine .btn-primary { background: var(--accent); color: #fff; }
.search-refine .btn-primary:hover { background: #005b5a; }

/* ── 9. Zo werkt het ──
   Licht paneel met genummerde kolommen; het donkere accent bewaren we voor
   de CTA eronder, zodat de pagina één duidelijk zwaartepunt heeft. */
.how-section { padding: 0.5rem 0 4rem; }

.how-box {
  padding: 2rem;
  gap: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background: var(--surface);
  color: var(--foreground);
}

@media (min-width: 768px) {
  .how-box {
    padding: 2.75rem 3rem;
    grid-template-columns: 0.9fr 1.4fr;
  }
}

.how-intro h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  letter-spacing: -0.03em;
}

.how-intro p { color: var(--muted-foreground); }

.how-steps { gap: 1.25rem 1.5rem; }

.how-step {
  padding: 0.875rem 0 0;
  border: none;
  border-top: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius: 0;
  background: none;
}

.how-step-num {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.how-step strong { font-size: 0.9375rem; }

.how-step p { color: var(--muted-foreground); }

/* ── 10. CTA ── */
.cta-section { padding: 0 0 4.5rem; }

.cta-box {
  padding: 2.25rem;
  border: none;
  border-radius: var(--radius-2xl);
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}

@media (min-width: 768px) {
  .cta-box {
    padding: 3rem 3.25rem;
    grid-template-columns: 1.3fr 1fr;
  }
}

.cta-box h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  letter-spacing: -0.03em;
}

.cta-box > div > p { color: rgba(255, 255, 255, 0.72); }

.cta-box .btn-dark { background: var(--accent); color: #fff; }
.cta-box .btn-dark:hover { background: #008180; }

.cta-box .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.cta-box .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.cta-feature {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
}

.cta-feature svg { color: #4fbdbb; }

/* ── 11. Footer ── */
.site-footer {
  padding: 3.25rem 0 2rem;
  background: var(--background);
  border-top: 1px solid var(--border);
}

.footer-col h4 {
  font-size: 0.6875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-foreground);
}

.footer-col a:hover { color: var(--accent); }

/* ── 12. Detailpagina ──
   Aanbiederkaart blijft in beeld bij lange beschrijvingen. */
.listing-detail { padding-top: 1.75rem; }

@media (min-width: 960px) {
  .listing-detail-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 2.5rem;
  }

  .listing-detail-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 1.25rem);
  }
}

.listing-detail-content h1 { letter-spacing: -0.03em; }

.listing-gallery-viewport { border-radius: var(--radius-2xl); }

.provider-card {
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-soft);
}

.listing-rating svg,
.provider-rating svg {
  fill: var(--accent);
  color: var(--accent);
}

/* ── 13. Donkere modus ── */
@media (prefers-color-scheme: dark) {
  :root.auto-dark {
    --background: #0e1116;
    --surface: #161a21;
    --card: #161a21;
    --muted: #1d222a;
    --secondary: #1d222a;
    --border: rgba(255, 255, 255, 0.1);
    --input: rgba(255, 255, 255, 0.14);
    --field-bg: #161a21;
    --edge: rgba(255, 255, 255, 0.22);
    --accent: #2fa8a6;
    --primary: #2b4a75;
    --shadow-lift: 0 12px 30px -18px rgba(0, 0, 0, 0.7);
  }

  :root.auto-dark .listing-card--gevraagd {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }

  :root.auto-dark .listing-badge--gevraagd.listing-badge--static,
  :root.auto-dark .listing-cat-pill--gevraagd {
    background: color-mix(in srgb, var(--accent) 18%, var(--surface));
    color: #7fd3d1;
  }

  :root.auto-dark .cta-box { background: #16202f; }

  :root.auto-dark .listing-badge {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--foreground);
  }
}