/*
Theme Name: Telefoon-Herstel
Theme URI: https://telefoon-herstel.nl
Description: Custom child theme voor Telefoon-Herstel.nl, gebaseerd op het Telefoon-Herstel Design System.
Author: Glenn Schlebaum
Author URI: https://telefoon-herstel.nl
Template: hello-elementor
Version: 1.0.0
Text Domain: telefoon-herstel
*/

/* ==========================================================================
   DESIGN TOKENS — Telefoon-Herstel Design System
   ========================================================================== */

/* --- Fonts (Google Fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* --- Ink & paper (warm-tinted grayscale) --- */
  --ink-900: #101012;
  --ink-800: #1c1c1f;
  --ink-700: #2a2a2e;
  --ink-600: #44444a;
  --ink-500: #6b6b73;
  --ink-400: #9a9aa1;
  --ink-300: #c4c4c8;
  --ink-200: #e3e2df;
  --ink-100: #efeeea;
  --paper:   #faf9f6;
  --white:   #ffffff;

  /* --- Brand accent: signal red --- */
  --brand-700: #a81717;
  --brand-600: #c11f1f;
  --brand-500: #e62b2b;
  --brand-400: #f0494a;
  --brand-200: #f7b4b4;
  --brand-100: #fde7e7;

  /* --- Semantic status --- */
  --amber-500: #f5a623;
  --amber-100: #fdf0d6;
  --red-500:   #e5484d;
  --red-100:   #fce4e4;
  --blue-500:  #2f6df0;
  --blue-100:  #e2ebfd;

  /* --- Semantic aliases --- */
  --bg-page:        var(--paper);
  --bg-surface:     var(--white);
  --bg-raised:      var(--white);
  --bg-sunken:      var(--ink-100);
  --bg-inverse:     var(--ink-900);
  --bg-fill-subtle: var(--ink-100);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-inverse:   var(--paper);
  --text-onbrand:   var(--white);
  --text-link:      var(--brand-600);

  --border-subtle:  var(--ink-200);
  --border-default: var(--ink-300);
  --border-strong:  var(--ink-600);

  --brand:          var(--brand-500);
  --brand-hover:    var(--brand-400);
  --brand-press:    var(--brand-600);
  --brand-tint:     var(--brand-100);

  --focus-ring: color-mix(in srgb, var(--brand-500) 50%, transparent);

  /* --- Typography --- */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  --fs-display-xl: 72px;
  --fs-display-l:  56px;
  --fs-display-m:  44px;
  --fs-h1:         34px;
  --fs-h2:         27px;
  --fs-h3:         21px;
  --fs-lg:         18px;
  --fs-body:       16px;
  --fs-sm:         14px;
  --fs-xs:         12.5px;
  --fs-eyebrow:    12px;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tighter:  -0.03em;
  --ls-tight:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-eyebrow:  0.16em;

  /* --- Spacing (4px base grid) --- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --container-max: 1200px;
  --container-pad: 24px;
  --section-y:     96px;

  /* --- Radius --- */
  --radius-none: 0;
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(16,16,18,0.06);
  --shadow-sm: 0 1px 2px rgba(16,16,18,0.06), 0 2px 6px rgba(16,16,18,0.06);
  --shadow-md: 0 2px 4px rgba(16,16,18,0.05), 0 6px 16px rgba(16,16,18,0.08);
  --shadow-lg: 0 6px 12px rgba(16,16,18,0.06), 0 18px 40px rgba(16,16,18,0.12);
  --shadow-xl: 0 12px 24px rgba(16,16,18,0.08), 0 36px 70px rgba(16,16,18,0.16);
  --ring-hairline: inset 0 0 0 1px var(--border-subtle);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* --- Motion --- */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;
  --dur-slower: 420ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --press-scale: 0.97;
}

/* ==========================================================================
   BASE STYLES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--space-4);
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--brand-200); color: var(--ink-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   TYPOGRAPHY UTILITY CLASSES
   ========================================================================== */
.t-display-xl {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-display-xl); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
}
.t-display-l {
  font-family: var(--font-display); font-weight: var(--fw-black);
  font-size: var(--fs-display-l); line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
}
.t-display-m {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-display-m); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h1 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h1); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h2 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h2); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-h3 {
  font-family: var(--font-display); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.t-lead {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--fs-lg); line-height: var(--lh-relaxed);
}
.t-body {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-normal);
}
.t-sm {
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.t-eyebrow {
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow); line-height: 1;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: var(--brand);
}
.t-mono {
  font-family: var(--font-mono); font-weight: var(--fw-regular);
  font-size: var(--fs-sm); letter-spacing: 0;
}

/* ==========================================================================
   ELEMENTOR OVERRIDES — Map design tokens to Elementor output
   ========================================================================== */

/* Container widths */
.elementor-section .elementor-container {
  max-width: var(--container-max);
}

/* Headings in Elementor */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-display);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}

/* Body text in Elementor */
.elementor-widget-text-editor {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* Buttons */
.elementor-button {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-bold) !important;
  border-radius: var(--radius-md) !important;
  transition: all var(--dur-base) var(--ease-out) !important;
  letter-spacing: var(--ls-tight);
}

/* Primary button (brand red) */
.elementor-button.th-btn-primary,
.elementor-widget-button .elementor-button {
  background-color: var(--brand) !important;
  color: var(--text-onbrand) !important;
  border: none !important;
}
.elementor-button.th-btn-primary:hover,
.elementor-widget-button .elementor-button:hover {
  background-color: var(--brand-hover) !important;
}
.elementor-button.th-btn-primary:active,
.elementor-widget-button .elementor-button:active {
  background-color: var(--brand-press) !important;
  transform: scale(var(--press-scale));
}

/* Secondary button */
.elementor-button.th-btn-secondary {
  background-color: var(--bg-surface) !important;
  color: var(--text-strong) !important;
  border: 1px solid var(--border-default) !important;
}
.elementor-button.th-btn-secondary:hover {
  background-color: var(--bg-fill-subtle) !important;
}

/* Cards */
.th-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.th-card.th-card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* USP strip (dark bar) */
.th-usp-strip {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.th-usp-strip .th-usp-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Eyebrow labels */
.th-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--space-3);
  display: block;
}

/* Brand CTA banner */
.th-cta-banner {
  background: var(--brand);
  border-radius: var(--radius-2xl);
  padding: var(--space-12) var(--space-12);
  color: var(--white);
}
.th-cta-banner h2 {
  color: var(--white);
}
.th-cta-banner p {
  color: rgba(255,255,255,0.85);
}

/* Badges */
.th-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  padding: 3px 10px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.02em;
}
.th-badge--brand {
  background: var(--brand);
  color: var(--white);
}
.th-badge--neutral {
  background: var(--bg-fill-subtle);
  color: var(--text-muted);
}

/* Price tag */
.th-price {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.th-price--strike {
  text-decoration: line-through;
  color: var(--text-faint);
  font-weight: var(--fw-regular);
}
.th-price--from::before {
  content: 'vanaf ';
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  font-size: 0.85em;
}

/* Stars */
.th-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--brand);
}

/* Alert / info box */
.th-alert {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.th-alert--info    { background: var(--blue-100);  color: var(--blue-500); }
.th-alert--warning { background: var(--amber-100); color: var(--amber-500); }
.th-alert--danger  { background: var(--red-100);   color: var(--red-500); }
.th-alert--success { background: var(--brand-100); color: var(--brand-600); }

/* FAQ Accordion (Elementor) */
.elementor-widget-accordion .elementor-accordion-item {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-3) !important;
  overflow: hidden;
}
.elementor-widget-accordion .elementor-tab-title {
  font-family: var(--font-display) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--text-strong) !important;
  padding: var(--space-5) var(--space-6) !important;
}
.elementor-widget-accordion .elementor-tab-content {
  font-family: var(--font-body) !important;
  color: var(--text-body) !important;
  padding: 0 var(--space-6) var(--space-5) !important;
}

/* Forms */
.elementor-field-textual {
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  border: 1px solid var(--border-default) !important;
  border-radius: var(--radius-sm) !important;
  padding: var(--space-3) var(--space-4) !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
}
.elementor-field-textual:focus {
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* Header (sticky) */
.th-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  height: 72px;
}
.th-header nav a {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text-muted);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.th-header nav a:hover,
.th-header nav a.current {
  color: var(--text-strong);
  text-decoration: none;
}
.th-header .th-phone {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: var(--fw-bold);
  color: var(--text-body);
}

/* Footer */
.th-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  margin-top: var(--space-20);
}
.th-footer h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--paper);
  margin-bottom: var(--space-4);
}
.th-footer a {
  color: var(--ink-400);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.th-footer a:hover {
  color: var(--paper);
  text-decoration: none;
}
.th-footer .th-footer-bottom {
  border-top: 1px solid var(--ink-700);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-500);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-display-xl: 40px;
    --fs-display-l:  34px;
    --fs-display-m:  28px;
    --fs-h1:         26px;
    --fs-h2:         22px;
    --fs-h3:         18px;
    --section-y:     56px;
    --container-pad: 16px;
  }
}