/*
Theme Name: Hello Elementor Child — Dein Weg
Description: Child theme of Hello Elementor for "Dein Weg" (deinweg-begleiter.de). Holds the design tokens (spacing, radius, elevation, buttons, form fields) plus project PHP. Color and typography live in the Elementor Kit. Fonts (DM Sans) and icons (Material Symbols Rounded) are SELF-HOSTED for DSGVO — do not load from Google CDN.
Author: Zimbro Agency
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child-deinweg
*/

/* =============================================================
   KIT TOKENS + IMPLEMENTATION — "Dein Weg"
   Color/typography come from the Kit; everything else lives here.
   Matches DESIGNER_BRIEF.md and the brand Style Guide.
   ============================================================= */

:root{
  /* ---- System colors: pulled from the Kit; fallback = brief values ---- */
  --c-primary:   var(--e-global-color-primary,   #1D2D49); /* Navy */
  --c-secondary: var(--e-global-color-secondary, #7B95A8); /* Dusty Blue */
  --c-accent:    var(--e-global-color-accent,    #5A7A8F); /* Deep Dusty — icons/links */
  --c-text:      var(--e-global-color-text,      #3D4F66); /* Body text */

  /* ---- Navy family ---- */
  --navy:#1D2D49; --navy-light:#2E4466; --navy-deep:#16233b;
  --navy-body:#C7D2DE; /* body text on navy */

  /* ---- Warm surfaces ---- */
  --cream:#FEFAF6; --warm-white:#FFFBF8; --cream-dark:#F5EDE6;

  /* ---- Dusty Blue accent family ---- */
  --accent:#7B95A8; --accent-light:#9BB3C4; --accent-pale:#D8E3EC; --accent-ultra-pale:#ECF1F5;

  /* ---- Text scale ---- */
  --text:#1D2D49; --text-body:#3D4F66; --text-secondary:#5A6A80; --text-faint:#A0AEBC;

  /* ---- Sparing specials ---- */
  --sage:#7A9E86; --sage-pale:#E8F0EB; --amber:#C4956E; --amber-pale:#F3EBE1;
  --icon:#5A7A8F;

  /* ---- Warm border / hairlines ---- */
  --border:#EBE3DA; --border-cool:#D8E3EC;

  /* ---- Spacing (base 4) ---- */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;

  /* ---- Radius ---- */
  --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-pill:999px;

  /* ---- Elevation (warm, low) ---- */
  --shadow-sm:0 1px 2px rgba(29,45,73,.06);
  --shadow-md:0 4px 22px rgba(29,45,73,.05);
  --shadow-lg:0 12px 34px rgba(29,45,73,.10);

  /* ---- Border / motion ---- */
  --border-w:1px;
  --transition:.2s ease;
  --focus-ring:0 0 0 3px color-mix(in srgb, var(--c-secondary) 30%, transparent);
}

/* ---- Details the Kit doesn't cover ---- */
::selection{ background: color-mix(in srgb, var(--c-secondary) 26%, transparent); }
:where(input, textarea)::placeholder{ color: var(--text-faint); opacity:1; }
:where(input, textarea){ caret-color: var(--c-secondary); }

a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--c-secondary); outline-offset:2px;
}

/* =============================================================
   MATERIAL SYMBOLS ROUNDED — SELF-HOSTED (DSGVO)
   Place the woff2 in the child theme and @font-face it (do NOT use Google CDN).
   Load via Elementor "Custom Fonts" as well, or keep this @font-face.
   ============================================================= */
@font-face{
  font-family:'Material Symbols Rounded';
  font-style:normal; font-weight:400; font-display:block;
  src:url('fonts/material-symbols-rounded.woff2') format('woff2');
}
.material-icons{
  font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal;
  line-height:1; letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr;
  font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing:antialiased;
}

/* =============================================================
   BUTTONS — variants and states (Theme Style covers the default only)
   Add the class in the Button widget's "CSS Classes" field.
   Default primary = Navy on light surfaces; warm-white on navy sections.
   ============================================================= */
.elementor-button{ transition: background var(--transition), color var(--transition), border-color var(--transition); }

/* On navy sections the primary CTA inverts to warm-white */
.dw-navy .elementor-button.sg-btn--primary,
.elementor-button.sg-btn--on-navy{
  background: var(--warm-white); color: var(--navy);
}
.dw-navy .elementor-button.sg-btn--primary:hover,
.elementor-button.sg-btn--on-navy:hover{ background: var(--accent-pale); }

/* Secondary (tonal dusty blue) */
.elementor-button.sg-btn--secondary{
  background: color-mix(in srgb, var(--c-secondary) 14%, #fff);
  color: var(--navy);
  border:1px solid color-mix(in srgb, var(--c-secondary) 30%, #fff);
}
.elementor-button.sg-btn--secondary:hover{ background: color-mix(in srgb, var(--c-secondary) 22%, #fff); }

/* Ghost / outline (used on navy for the "later" anchor) */
.elementor-button.sg-btn--ghost{
  background: transparent; color: var(--accent-light); border:2px solid var(--accent-light);
}
.elementor-button.sg-btn--ghost:hover{ background: rgba(155,179,196,.10); }
.elementor-button.sg-btn--disabled,
.elementor-button[aria-disabled="true"]{
  opacity:.55; pointer-events:none; cursor:not-allowed;
}

/* Sizes */
.elementor-button.sg-btn--sm{ padding:10px 18px; font-size:14px; }
.elementor-button.sg-btn--lg{ padding:15px 32px; font-size:17px; }

/* =============================================================
   FORM FIELDS — visual target for the waitlist embed.
   The waitlist form is HubSpot OR Gravity Forms (TBD with Diego).
   These tokens style whichever we embed:
     · Gravity Forms  -> scoped under .gform_wrapper (below)
     · HubSpot embed  -> add a mirrored block scoped to .hbspt-form once chosen
   On the navy CTA section the fields sit on a lighter navy card.
   ============================================================= */
.gform_wrapper .gform_fields{ gap: var(--space-md); }
.gform_wrapper .gfield_label{ font-weight:600; font-size:13.5px; color: var(--c-text); margin:0 0 6px; }
.gform_wrapper .gfield_required{ color: var(--amber); }

.gform_wrapper .ginput_container input:not([type=submit]):not([type=button]):not([type=radio]):not([type=checkbox]):not([type=file]),
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select{
  width:100%; box-sizing:border-box;
  font-size:15px; color: var(--text);
  padding:13px 16px;
  border: var(--border-w) solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--warm-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gform_wrapper .ginput_container textarea{ min-height:96px; resize:vertical; }
.gform_wrapper .ginput_container input:focus,
.gform_wrapper .ginput_container textarea:focus,
.gform_wrapper .ginput_container select:focus{
  outline:none; border-color: var(--navy); box-shadow: var(--focus-ring);
}
.gform_wrapper .gfield_description{ font-size:12px; color: var(--text-faint); margin-top:5px; }

/* Consent row */
.gform_wrapper .gfield_checkbox .gchoice{ display:flex; align-items:flex-start; gap:10px; margin:0 0 8px; }
.gform_wrapper .gchoice input[type=checkbox]{ accent-color: var(--navy); width:16px; height:16px; margin-top:3px; }
.gform_wrapper .gchoice label{ font-weight:400; font-size:14px; color: var(--text-body); line-height:1.5; }

/* Error / validation */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea{
  border-color: var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent);
}
.gform_wrapper .gfield_validation_message{ color:#8a5a34; font-size:12px; font-weight:500; margin-top:5px; }

/* Submit = primary button (Navy) */
.gform_wrapper .gform_footer .gform_button{
  font-weight:600; font-size:16px; color: var(--navy);
  background: var(--warm-white); border:none;
  border-radius: var(--radius-md); padding:14px 28px; cursor:pointer; width:100%;
  transition: background var(--transition);
}
.gform_wrapper .gform_footer .gform_button:hover{ background: var(--accent-pale); }

/* =============================================================
   RICH CONTENT — scoped to text-editor / post content.
   ============================================================= */
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) ul{ padding-left:1.2em; }
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) li{ margin:.35em 0; }
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) strong{ color: var(--text); font-weight:600; }
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) a{ color: var(--icon); }
:where(.elementor-widget-text-editor, .elementor-widget-theme-post-content) hr{
  border:0; border-top:1px solid var(--border); margin:2em 0;
}

/* =============================================================
   Accessibility
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* =============================================================
   SECTION DECO — faint dusty-blue circles on Navy sections.
   Add class "dw-hero" (hero) / "dw-cta" (waitlist) on the section container.
   ============================================================= */
.dw-hero, .dw-cta{ position:relative; overflow:hidden; }
.dw-hero::before, .dw-cta::before{
  content:""; position:absolute; width:640px; height:640px; border-radius:50%;
  background:rgba(123,149,168,.06); pointer-events:none; z-index:0;
}
.dw-hero::before{ top:-200px; right:-200px; }
.dw-cta::before{ bottom:-200px; left:-200px; }
.dw-hero > .e-con-inner, .dw-cta > .e-con-inner{ position:relative; z-index:1; }

/* Hero "Im Programm" index card */
.dw-index{ background:rgba(255,255,255,.04); border:1px solid rgba(155,179,196,.20); border-radius:12px; }
.dw-index .row{ border-top:1px solid rgba(155,179,196,.16); }
.dw-index .row:first-of-type{ border-top:0; }

/* =============================================================
   OPTIONAL — DM Sans self-hosted via @font-face (Weg B aus fonts/README).
   NUR aktivieren, wenn DM Sans NICHT über Elementor Custom Fonts läuft.
   woff2-Dateien in /fonts ablegen und diesen Block einkommentieren.
   =============================================================
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/dm-sans-400.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/dm-sans-500.woff2') format('woff2');}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/dm-sans-600.woff2') format('woff2');}
*/