/* =============================================================================
   TGH GLOBALS.CSS — Universeel Design Systeem
   Project : Zelfstandig taxibedrijf Gent
   Prefix  : tgh_
   Scope   : .tgh_site > .tgh_page > .tgh_page_[page]
   Aanpak  : Mobile first vanaf 360px
   Versie  : 1.0
   ============================================================================= */

/* =============================================================================
   01. RESET & BASIS
   ============================================================================= */

.tgh_site,
.tgh_site *,
.tgh_site *::before,
.tgh_site *::after {
  box-sizing: border-box;
}

.tgh_site {
  margin: 0;
  font-family: var(--tgh_font-base);
  font-size: var(--tgh_text-base);
  line-height: var(--tgh_line-normal);
  color: var(--tgh_color-text);
  background: var(--tgh_color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tgh_site :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {
  margin: 0;
}

.tgh_site :where(ul, ol) {
  padding: 0;
}

.tgh_site :where(img, picture, svg, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

.tgh_site :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.tgh_site a {
  color: var(--tgh_color-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/* =============================================================================
   02. GLOBAL DESIGN TOKENS
   ============================================================================= */

.tgh_site {
  /* ---------------------------------------------------------------------------
     02.1 Typography
     --------------------------------------------------------------------------- */
  --tgh_font-base: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tgh_font-heading: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --tgh_text-xs: 0.75rem;
  --tgh_text-sm: 0.875rem;
  --tgh_text-base: 1rem;
  --tgh_text-lg: 1.125rem;
  --tgh_text-xl: 1.25rem;
  --tgh_text-2xl: 1.5rem;
  --tgh_text-3xl: clamp(1.875rem, 1.55rem + 1.45vw, 2.5rem);
  --tgh_text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3.25rem);
  --tgh_text-5xl: clamp(2.625rem, 2rem + 2.8vw, 4rem);

  --tgh_line-tight: 1.15;
  --tgh_line-normal: 1.55;
  --tgh_line-relaxed: 1.7;

  --tgh_weight-regular: 400;
  --tgh_weight-medium: 500;
  --tgh_weight-semibold: 600;
  --tgh_weight-bold: 700;
  --tgh_weight-extrabold: 800;

  /* ---------------------------------------------------------------------------
     02.2 Spacing
     --------------------------------------------------------------------------- */
  --tgh_space-0: 0;
  --tgh_space-1: 0.25rem;
  --tgh_space-2: 0.5rem;
  --tgh_space-3: 0.75rem;
  --tgh_space-4: 1rem;
  --tgh_space-5: 1.25rem;
  --tgh_space-6: 1.5rem;
  --tgh_space-8: 2rem;
  --tgh_space-10: 2.5rem;
  --tgh_space-12: 3rem;
  --tgh_space-16: 4rem;
  --tgh_space-20: 5rem;
  --tgh_space-24: 6rem;

  --tgh_section-y: clamp(3rem, 2.2rem + 3vw, 6rem);
  --tgh_container-gutter: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  --tgh_gap-grid: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  --tgh_gap-form: 1rem;

  /* ---------------------------------------------------------------------------
     02.3 Containers
     --------------------------------------------------------------------------- */
  --tgh_container-xs: 40rem;
  --tgh_container-sm: 48rem;
  --tgh_container-md: 64rem;
  --tgh_container-lg: 72rem;
  --tgh_container-xl: 80rem;
  --tgh_container-2xl: 90rem;
  --tgh_reading-width: 46rem;

  /* ---------------------------------------------------------------------------
     02.4 Radius
     --------------------------------------------------------------------------- */
  --tgh_radius-xs: 0.375rem;
  --tgh_radius-sm: 0.5rem;
  --tgh_radius-md: 0.75rem;
  --tgh_radius-lg: 1rem;
  --tgh_radius-xl: 1.25rem;
  --tgh_radius-2xl: 1.5rem;
  --tgh_radius-round: 50%;
  --tgh_radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     02.5 Shadows
     --------------------------------------------------------------------------- */
  --tgh_shadow-xs: 0 1px 2px rgb(0 0 0 / 0.05);
  --tgh_shadow-sm: 0 4px 14px rgb(0 0 0 / 0.08);
  --tgh_shadow-md: 0 8px 30px rgb(0 0 0 / 0.12);
  --tgh_shadow-lg: 0 18px 50px rgb(0 0 0 / 0.16);
  --tgh_shadow-focus: 0 0 0 4px rgb(212 175 55 / 0.24);

  /* ---------------------------------------------------------------------------
     02.6 Motion
     --------------------------------------------------------------------------- */
  --tgh_ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --tgh_transition-fast: 160ms var(--tgh_ease-standard);
  --tgh_transition-base: 240ms var(--tgh_ease-standard);
  --tgh_transition-slow: 320ms var(--tgh_ease-standard);

  /* ---------------------------------------------------------------------------
     02.7 Z-index
     --------------------------------------------------------------------------- */
  --tgh_z-base: 1;
  --tgh_z-sticky: 50;
  --tgh_z-header: 100;
  --tgh_z-dropdown: 200;
  --tgh_z-overlay: 500;
  --tgh_z-modal: 1000;
  --tgh_z-toast: 1100;

  /* ---------------------------------------------------------------------------
     02.8 Component sizing
     --------------------------------------------------------------------------- */
  --tgh_input-height: 48px;
  --tgh_button-height: 48px;
  --tgh_button-height-lg: 54px;
  --tgh_header-height: 72px;
  --tgh_touch-target: 44px;

  /* ---------------------------------------------------------------------------
     02.9 SOURCE PALETTE — extracted from supplied Taxi Gent page
     --------------------------------------------------------------------------- */
  --tgh_palette-gold-500: #D4AF37;
  --tgh_palette-gold-600: #B78C1F;
  --tgh_palette-black: #000000;
  --tgh_palette-white: #FFFFFF;
  --tgh_palette-bordeaux-700: #800020;
  --tgh_palette-gray-100: #F0F0F0;
  --tgh_palette-gray-700: #777777;
  --tgh_palette-gray-900: #111111;

  /* ---------------------------------------------------------------------------
     02.10 BRAND TOKENS — default active palette
     --------------------------------------------------------------------------- */
  --tgh_color-primary: var(--tgh_palette-gold-500);
  --tgh_color-primary-hover: var(--tgh_palette-gold-600);
  --tgh_color-secondary: var(--tgh_palette-black);
  --tgh_color-accent: var(--tgh_palette-bordeaux-700);

  /* ---------------------------------------------------------------------------
     02.11 TEXT TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-text: var(--tgh_palette-gray-900);
  --tgh_color-text-muted: var(--tgh_palette-gray-700);
  --tgh_color-text-soft: #5F5F5F;
  --tgh_color-text-inverse: var(--tgh_palette-white);
  --tgh_color-heading: var(--tgh_palette-black);
  --tgh_color-link: var(--tgh_palette-bordeaux-700);
  --tgh_color-link-hover: #5F0018;

  /* ---------------------------------------------------------------------------
     02.12 BACKGROUND / SURFACE TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-bg: var(--tgh_palette-white);
  --tgh_color-bg-light: var(--tgh_palette-white);
  --tgh_color-bg-soft: var(--tgh_palette-gray-100);
  --tgh_color-bg-dark: var(--tgh_palette-black);
  --tgh_color-surface: var(--tgh_palette-white);
  --tgh_color-surface-soft: #F8F8F8;
  --tgh_color-surface-dark: #111111;
  --tgh_color-section: var(--tgh_palette-white);
  --tgh_color-section-alt: var(--tgh_palette-gray-100);
  --tgh_color-section-dark: var(--tgh_palette-black);

  /* ---------------------------------------------------------------------------
     02.13 BORDER / DIVIDER TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-border: #E4E4E4;
  --tgh_color-border-strong: #BDBDBD;
  --tgh_color-border-dark: rgb(255 255 255 / 0.18);
  --tgh_color-divider: #EAEAEA;
  --tgh_color-divider-dark: rgb(255 255 255 / 0.15);

  /* ---------------------------------------------------------------------------
     02.14 BUTTON TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-button-primary-bg: var(--tgh_color-primary);
  --tgh_color-button-primary-bg-hover: var(--tgh_color-primary-hover);
  --tgh_color-button-primary-text: var(--tgh_palette-black);

  --tgh_color-button-secondary-bg: var(--tgh_palette-black);
  --tgh_color-button-secondary-bg-hover: #1A1A1A;
  --tgh_color-button-secondary-text: var(--tgh_palette-white);

  --tgh_color-button-accent-bg: var(--tgh_color-accent);
  --tgh_color-button-accent-bg-hover: #66001A;
  --tgh_color-button-accent-text: var(--tgh_palette-white);

  --tgh_color-button-ghost-text: var(--tgh_palette-white);
  --tgh_color-button-ghost-border: rgb(255 255 255 / 0.40);

  /* ---------------------------------------------------------------------------
     02.15 FORM TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-input-bg: var(--tgh_palette-white);
  --tgh_color-input-text: var(--tgh_palette-gray-900);
  --tgh_color-input-placeholder: #767676;
  --tgh_color-input-border: #CFCFCF;
  --tgh_color-input-border-hover: #9A9A9A;
  --tgh_color-input-border-focus: var(--tgh_color-primary);
  --tgh_color-input-dark-bg: rgb(0 0 0 / 0.35);
  --tgh_color-input-dark-border: rgb(255 255 255 / 0.20);
  --tgh_color-input-dark-text: var(--tgh_palette-white);

  /* ---------------------------------------------------------------------------
     02.16 TRUST / RATING TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-trust: var(--tgh_color-primary);
  --tgh_color-rating: var(--tgh_color-primary);
  --tgh_color-highlight: #FFF7D6;
  --tgh_color-highlight-border: #E4C65D;

  /* ---------------------------------------------------------------------------
     02.17 FEEDBACK / STATUS TOKENS
     --------------------------------------------------------------------------- */
  --tgh_color-success: #166534;
  --tgh_color-success-bg: #F0FDF4;
  --tgh_color-success-border: #86EFAC;

  --tgh_color-warning: #92400E;
  --tgh_color-warning-bg: #FFFBEB;
  --tgh_color-warning-border: #FCD34D;

  --tgh_color-error: #B91C1C;
  --tgh_color-error-bg: #FEF2F2;
  --tgh_color-error-border: #FCA5A5;

  --tgh_color-info: #1D4ED8;
  --tgh_color-info-bg: #EFF6FF;
  --tgh_color-info-border: #93C5FD;

  /* ---------------------------------------------------------------------------
     02.18 OVERLAY / TRANSPARENCY TOKENS
     --------------------------------------------------------------------------- */
  --tgh_overlay-header: rgb(0 0 0 / 0.85);
  --tgh_overlay-soft: rgb(0 0 0 / 0.35);
  --tgh_overlay-panel: rgb(255 255 255 / 0.06);
  --tgh_overlay-panel-border: rgb(255 255 255 / 0.18);
  --tgh_overlay-gold-border: rgb(212 175 55 / 0.25);
}

/* =============================================================================
   03. THEME SYSTEM — 20 schemes
   Add one theme class to the .tgh_site wrapper.
   Default palette is the supplied Gold / Black / Bordeaux page palette.
   ============================================================================= */

/* 03.01 — Gent Gold & Bordeaux (source page / default) */
.tgh_site.tgh_theme-gent-gold {
  --tgh_color-primary: #D4AF37;
  --tgh_color-primary-hover: #B78C1F;
  --tgh_color-secondary: #000000;
  --tgh_color-accent: #800020;
  --tgh_color-link: #800020;
  --tgh_color-bg-soft: #F0F0F0;
  --tgh_color-bg-dark: #000000;
}

/* 03.02 — Classic Taxi Yellow */
.tgh_site.tgh_theme-classic-yellow {
  --tgh_color-primary: #FFCC00;
  --tgh_color-primary-hover: #E5B800;
  --tgh_color-secondary: #111111;
  --tgh_color-accent: #2D2D2D;
  --tgh_color-link: #6B5200;
  --tgh_color-bg-soft: #FFFBEA;
  --tgh_color-bg-dark: #101010;
}

/* 03.03 — Luxury Gold */
.tgh_site.tgh_theme-luxury-gold {
  --tgh_color-primary: #C9A227;
  --tgh_color-primary-hover: #AC8719;
  --tgh_color-secondary: #151515;
  --tgh_color-accent: #6B4F1D;
  --tgh_color-link: #6B4F1D;
  --tgh_color-bg-soft: #F5F1E8;
  --tgh_color-bg-dark: #121212;
}

/* 03.04 — Premium Navy */
.tgh_site.tgh_theme-premium-navy {
  --tgh_color-primary: #102A43;
  --tgh_color-primary-hover: #0B1F33;
  --tgh_color-secondary: #243B53;
  --tgh_color-accent: #F0B429;
  --tgh_color-link: #0F4C81;
  --tgh_color-bg-soft: #F1F6FA;
  --tgh_color-bg-dark: #0B1F33;
}

/* 03.05 — Midnight Blue */
.tgh_site.tgh_theme-midnight-blue {
  --tgh_color-primary: #0F172A;
  --tgh_color-primary-hover: #020617;
  --tgh_color-secondary: #1E293B;
  --tgh_color-accent: #38BDF8;
  --tgh_color-link: #0369A1;
  --tgh_color-bg-soft: #F1F5F9;
  --tgh_color-bg-dark: #020617;
}

/* 03.06 — Metropolitan Blue */
.tgh_site.tgh_theme-metropolitan-blue {
  --tgh_color-primary: #0F4C81;
  --tgh_color-primary-hover: #0A3A64;
  --tgh_color-secondary: #1D5F99;
  --tgh_color-accent: #FFD166;
  --tgh_color-link: #0F4C81;
  --tgh_color-bg-soft: #F4F9FD;
  --tgh_color-bg-dark: #0A2942;
}

/* 03.07 — Executive Teal */
.tgh_site.tgh_theme-executive-teal {
  --tgh_color-primary: #0F766E;
  --tgh_color-primary-hover: #115E59;
  --tgh_color-secondary: #134E4A;
  --tgh_color-accent: #F59E0B;
  --tgh_color-link: #0F766E;
  --tgh_color-bg-soft: #F0FDFA;
  --tgh_color-bg-dark: #042F2E;
}

/* 03.08 — Emerald */
.tgh_site.tgh_theme-emerald {
  --tgh_color-primary: #166534;
  --tgh_color-primary-hover: #14532D;
  --tgh_color-secondary: #052E16;
  --tgh_color-accent: #FACC15;
  --tgh_color-link: #166534;
  --tgh_color-bg-soft: #F0FDF4;
  --tgh_color-bg-dark: #052E16;
}

/* 03.09 — Urban Orange */
.tgh_site.tgh_theme-urban-orange {
  --tgh_color-primary: #121212;
  --tgh_color-primary-hover: #000000;
  --tgh_color-secondary: #272727;
  --tgh_color-accent: #F97316;
  --tgh_color-link: #C2410C;
  --tgh_color-bg-soft: #FFF7ED;
  --tgh_color-bg-dark: #111111;
}

/* 03.10 — Red Express */
.tgh_site.tgh_theme-red-express {
  --tgh_color-primary: #991B1B;
  --tgh_color-primary-hover: #7F1D1D;
  --tgh_color-secondary: #450A0A;
  --tgh_color-accent: #FBBF24;
  --tgh_color-link: #991B1B;
  --tgh_color-bg-soft: #FEF2F2;
  --tgh_color-bg-dark: #450A0A;
}

/* 03.11 — Burgundy Premium */
.tgh_site.tgh_theme-burgundy-premium {
  --tgh_color-primary: #800020;
  --tgh_color-primary-hover: #66001A;
  --tgh_color-secondary: #1A0A0F;
  --tgh_color-accent: #D4AF37;
  --tgh_color-link: #800020;
  --tgh_color-bg-soft: #FBF5F6;
  --tgh_color-bg-dark: #1A0A0F;
}

/* 03.12 — Royal Purple */
.tgh_site.tgh_theme-royal-purple {
  --tgh_color-primary: #4C1D95;
  --tgh_color-primary-hover: #3B1676;
  --tgh_color-secondary: #2E1065;
  --tgh_color-accent: #F59E0B;
  --tgh_color-link: #5B21B6;
  --tgh_color-bg-soft: #FAF5FF;
  --tgh_color-bg-dark: #2E1065;
}

/* 03.13 — Slate Corporate */
.tgh_site.tgh_theme-slate-corporate {
  --tgh_color-primary: #334155;
  --tgh_color-primary-hover: #1E293B;
  --tgh_color-secondary: #0F172A;
  --tgh_color-accent: #F59E0B;
  --tgh_color-link: #334155;
  --tgh_color-bg-soft: #F8FAFC;
  --tgh_color-bg-dark: #0F172A;
}

/* 03.14 — Silver Corporate */
.tgh_site.tgh_theme-silver-corporate {
  --tgh_color-primary: #374151;
  --tgh_color-primary-hover: #1F2937;
  --tgh_color-secondary: #111827;
  --tgh_color-accent: #D4AF37;
  --tgh_color-link: #374151;
  --tgh_color-bg-soft: #F9FAFB;
  --tgh_color-bg-dark: #111827;
}

/* 03.15 — Cobalt */
.tgh_site.tgh_theme-cobalt {
  --tgh_color-primary: #1D4ED8;
  --tgh_color-primary-hover: #1E40AF;
  --tgh_color-secondary: #172554;
  --tgh_color-accent: #FBBF24;
  --tgh_color-link: #1D4ED8;
  --tgh_color-bg-soft: #EFF6FF;
  --tgh_color-bg-dark: #172554;
}

/* 03.16 — Petrol */
.tgh_site.tgh_theme-petrol {
  --tgh_color-primary: #155E75;
  --tgh_color-primary-hover: #164E63;
  --tgh_color-secondary: #083344;
  --tgh_color-accent: #F59E0B;
  --tgh_color-link: #155E75;
  --tgh_color-bg-soft: #ECFEFF;
  --tgh_color-bg-dark: #083344;
}

/* 03.17 — Forest */
.tgh_site.tgh_theme-forest {
  --tgh_color-primary: #365314;
  --tgh_color-primary-hover: #1A2E05;
  --tgh_color-secondary: #1A2E05;
  --tgh_color-accent: #EAB308;
  --tgh_color-link: #365314;
  --tgh_color-bg-soft: #F7FEE7;
  --tgh_color-bg-dark: #1A2E05;
}

/* 03.18 — Graphite & Lime */
.tgh_site.tgh_theme-graphite-lime {
  --tgh_color-primary: #27272A;
  --tgh_color-primary-hover: #18181B;
  --tgh_color-secondary: #09090B;
  --tgh_color-accent: #A3E635;
  --tgh_color-link: #3F6212;
  --tgh_color-bg-soft: #FAFAFA;
  --tgh_color-bg-dark: #09090B;
}

/* 03.19 — Espresso */
.tgh_site.tgh_theme-espresso {
  --tgh_color-primary: #4A2C2A;
  --tgh_color-primary-hover: #35201E;
  --tgh_color-secondary: #241716;
  --tgh_color-accent: #D6A756;
  --tgh_color-link: #6B3D39;
  --tgh_color-bg-soft: #FBF7F2;
  --tgh_color-bg-dark: #241716;
}

/* 03.20 — Black & Champagne */
.tgh_site.tgh_theme-black-champagne {
  --tgh_color-primary: #0A0A0A;
  --tgh_color-primary-hover: #000000;
  --tgh_color-secondary: #171717;
  --tgh_color-accent: #E7C873;
  --tgh_color-link: #6F571A;
  --tgh_color-bg-soft: #FBF8EF;
  --tgh_color-bg-dark: #0A0A0A;
}

/* Keep semantic component tokens synchronized with active theme tokens. */
.tgh_site {
  --tgh_color-button-primary-bg: var(--tgh_color-primary);
  --tgh_color-button-primary-bg-hover: var(--tgh_color-primary-hover);
  --tgh_color-button-secondary-bg: var(--tgh_color-secondary);
  --tgh_color-button-accent-bg: var(--tgh_color-accent);
  --tgh_color-input-border-focus: var(--tgh_color-primary);
  --tgh_color-trust: var(--tgh_color-primary);
  --tgh_color-rating: var(--tgh_color-primary);
  --tgh_shadow-focus: 0 0 0 4px color-mix(in srgb, var(--tgh_color-primary) 24%, transparent);
}

/* =============================================================================
   04. TYPOGRAPHY FOUNDATIONS
   ============================================================================= */

.tgh_site :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tgh_font-heading);
  color: var(--tgh_color-heading);
  font-weight: var(--tgh_weight-bold);
  line-height: var(--tgh_line-tight);
  text-wrap: balance;
}

.tgh_site h1 { font-size: var(--tgh_text-4xl); }
.tgh_site h2 { font-size: var(--tgh_text-3xl); }
.tgh_site h3 { font-size: var(--tgh_text-2xl); }
.tgh_site h4 { font-size: var(--tgh_text-xl); }
.tgh_site h5 { font-size: var(--tgh_text-lg); }
.tgh_site h6 { font-size: var(--tgh_text-base); }

.tgh_site :where(p, li, label, input, select, textarea, button) {
  font-size: var(--tgh_text-base);
}

/* =============================================================================
   05. GLOBAL LAYOUT FOUNDATIONS
   ============================================================================= */

.tgh_site .tgh_container {
  width: min(100% - (2 * var(--tgh_container-gutter)), var(--tgh_container-lg));
  margin-inline: auto;
}

.tgh_site .tgh_container--narrow {
  max-width: var(--tgh_container-xs);
}

.tgh_site .tgh_container--wide {
  max-width: var(--tgh_container-xl);
}

.tgh_site .tgh_section {
  padding-block: var(--tgh_section-y);
}

/* =============================================================================
   06. ACCESSIBILITY FOUNDATIONS
   ============================================================================= */

.tgh_site :focus-visible {
  outline: 3px solid var(--tgh_color-primary);
  outline-offset: 3px;
  box-shadow: var(--tgh_shadow-focus);
}

.tgh_site .tgh_sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .tgh_site *,
  .tgh_site *::before,
  .tgh_site *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =============================================================================
   07. RESPONSIVE FOUNDATION — MOBILE FIRST
   ============================================================================= */

/* Mobile: 360px+ is the base, always 1 content column. */

@media (min-width: 600px) {
  .tgh_site {
    --tgh_container-gutter: 1.25rem;
  }
}

@media (min-width: 768px) {
  .tgh_site {
    --tgh_container-gutter: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tgh_site {
    --tgh_header-height: 80px;
  }
}

@media (min-width: 1280px) {
  .tgh_site {
    --tgh_container-gutter: 2rem;
  }
}