/*
Theme Name:   vibecraft Child
Theme URI:    https://vibecraft.rocks
Description:  vibecraft.rocks Child Theme – Hello Elementor Basis mit vollständigem Brand Design System
Author:       Alex Januschewsky – Prompt Rocker
Author URI:   https://vibecraft.rocks
Template:     hello-elementor
Version:      1.0.0
License:      GPL-2.0-or-later
Text Domain:  vibecraft-child
*/

/* ================================================================
   FONTS via jsDelivr CDN (DSGVO-konform, kein Google Tracking)
================================================================ */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/sometype-mono@5/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/pixelify-sans@5/index.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/bricolage-grotesque@5/index.css');

/* ================================================================
   BRAND DESIGN TOKENS
   ----------------------------------------------------------------
   FARBEN
     --vc-yellow    #F0E000   Electric Yellow  – vibe / Akzent
     --vc-black     #0F0F0F   Near Black       – Hintergrund
     --vc-white     #FFFFFF   White            – craft / Text
     --vc-gray      #999999   Muted Text
     --vc-surface   #1A1A1A   Cards / Flächen
     --vc-border    #2A2A2A   Ränder / Trennlinien

   SCHRIFTEN
     --vc-font-display   Sometype Mono       Wordmark "vibe", Code
     --vc-font-pixel     Pixelify Sans       Wordmark "craft", Labels, Buttons
     --vc-font-body      Bricolage Grotesque Headlines, Fließtext

   TYPOGRAFIE-SKALA
     Display   82px    Wordmark
     H1        48px    Seitenheadlines
     H2        36px    Abschnittsheadlines
     H3        28px    Subheadlines
     H4        22px    Kartenheadlines
     Body      16px    Fließtext  (Bricolage Grotesque 400)
     Small     14px    Nebentexte
     Label     10px    Tags, Buttons (Pixelify Sans 700)
================================================================ */

:root {

  /* --- Farben --- */
  --vc-yellow:   #F0E000;
  --vc-black:    #0F0F0F;
  --vc-white:    #FFFFFF;
  --vc-gray:     #999999;
  --vc-surface:  #1A1A1A;
  --vc-border:   #2A2A2A;

  /* --- Schriften --- */
  --vc-font-display: 'Sometype Mono', 'Courier New', monospace;
  --vc-font-pixel:   'Pixelify Sans', monospace;
  --vc-font-body:    'Bricolage Grotesque', sans-serif;

  /* --- Typografie-Skala --- */
  --vc-text-display: 82px;
  --vc-text-h1:      48px;
  --vc-text-h2:      36px;
  --vc-text-h3:      28px;
  --vc-text-h4:      22px;
  --vc-text-body:    16px;
  --vc-text-small:   14px;
  --vc-text-label:   10px;

  /* --- Layout --- */
  --vc-radius:      3px;
  --vc-radius-card: 12px;

  /* --- Elementor Global Colors (Fallback, werden via PHP gesetzt) --- */
  --e-global-color-primary:   #F0E000;
  --e-global-color-secondary: #0F0F0F;
  --e-global-color-text:      #FFFFFF;
  --e-global-color-accent:    #999999;
}

/* ================================================================
   BASE RESET
================================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--vc-font-body);
  font-size: var(--vc-text-body);
  line-height: 1.7;
  color: var(--vc-white);
  background-color: var(--vc-black);
  margin: 0;
  padding: 0;
}

/* ================================================================
   TYPOGRAFIE
================================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vc-font-body);
  font-weight: 700;
  color: var(--vc-white);
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 0.75em;
}

h1 { font-size: var(--vc-text-h1); }
h2 { font-size: var(--vc-text-h2); }
h3 { font-size: var(--vc-text-h3); }
h4 { font-size: var(--vc-text-h4); }
h5 { font-size: var(--vc-text-body); }
h6 { font-size: var(--vc-text-small); }

p {
  font-family: var(--vc-font-body);
  font-size: var(--vc-text-body);
  color: var(--vc-gray);
  line-height: 1.7;
  margin-top: 0;
}

a {
  color: var(--vc-yellow);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover,
a:focus {
  color: var(--vc-white);
}

code,
pre,
kbd {
  font-family: var(--vc-font-display);
  background-color: var(--vc-surface);
  color: var(--vc-yellow);
  padding: 0.2em 0.45em;
  border-radius: var(--vc-radius);
  font-size: 0.9em;
}

pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--vc-border);
}

/* ================================================================
   ELEMENTOR WIDGET-OVERRIDES
================================================================ */

/* Container / Section */
.e-con,
.e-con-inner,
.elementor-section,
.elementor-section-wrap {
  background-color: var(--vc-black);
}

/* Heading Widget */
.elementor-widget-heading .elementor-heading-title {
  font-family: var(--vc-font-body);
  font-weight: 700;
  color: var(--vc-white);
}

/* Text Editor Widget */
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor p {
  font-family: var(--vc-font-body);
  color: var(--vc-gray);
  font-size: var(--vc-text-body);
  line-height: 1.7;
}

/* Button Widget */
.elementor-button-wrapper .elementor-button {
  font-family: var(--vc-font-pixel) !important;
  background-color: var(--vc-yellow) !important;
  color: var(--vc-black) !important;
  border: none !important;
  border-radius: var(--vc-radius) !important;
  font-size: var(--vc-text-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  padding: 12px 20px !important;
  line-height: 1 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  text-transform: lowercase !important;
}

.elementor-button-wrapper .elementor-button:hover,
.elementor-button-wrapper .elementor-button:focus {
  background-color: var(--vc-white) !important;
  color: var(--vc-black) !important;
}

/* Divider Widget */
.elementor-widget-divider .elementor-divider-separator {
  border-color: var(--vc-border);
}

/* Image Widget */
.elementor-widget-image img {
  border-radius: var(--vc-radius-card);
}

/* Navigationsmenü */
.elementor-nav-menu a {
  font-family: var(--vc-font-body);
  color: var(--vc-gray);
  font-size: var(--vc-text-small);
}

.elementor-nav-menu a:hover {
  color: var(--vc-yellow);
}

/* ================================================================
   WORDPRESS BLOG
================================================================ */

.entry-title,
.entry-title a {
  font-family: var(--vc-font-body);
  font-weight: 700;
  color: var(--vc-white);
}

.entry-title a:hover {
  color: var(--vc-yellow);
}

.entry-content {
  font-family: var(--vc-font-body);
  color: var(--vc-gray);
  line-height: 1.7;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--vc-white);
  margin-top: 2rem;
}

.entry-content a {
  color: var(--vc-yellow);
}

.entry-content a:hover {
  color: var(--vc-white);
}

.entry-meta,
.posted-on,
.byline {
  font-family: var(--vc-font-pixel);
  font-size: 9px;
  color: var(--vc-gray);
  letter-spacing: 0.1em;
  line-height: 2;
}

/* ================================================================
   WOOCOMMERCE (vorbereitet für Shop-Phase)
================================================================ */

.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--vc-font-pixel) !important;
  background-color: var(--vc-yellow) !important;
  color: var(--vc-black) !important;
  border-radius: var(--vc-radius) !important;
  font-size: var(--vc-text-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border: none !important;
  transition: background-color 0.2s ease !important;
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
  background-color: var(--vc-white) !important;
  color: var(--vc-black) !important;
}

.woocommerce .price,
.woocommerce .woocommerce-Price-amount {
  font-family: var(--vc-font-display);
  color: var(--vc-yellow);
}

.woocommerce .product_title {
  font-family: var(--vc-font-body);
  color: var(--vc-white);
}

/* ================================================================
   UTILITY CLASSES
   (in Elementor als "CSS-Klasse" am Widget eintragen)
================================================================ */

/* Schriften */
.vc-font-display { font-family: var(--vc-font-display) !important; }
.vc-font-pixel   { font-family: var(--vc-font-pixel) !important; }
.vc-font-body    { font-family: var(--vc-font-body) !important; }

/* Farben */
.vc-yellow  { color: var(--vc-yellow) !important; }
.vc-white   { color: var(--vc-white) !important; }
.vc-gray    { color: var(--vc-gray) !important; }
.vc-black   { color: var(--vc-black) !important; }

/* Hintergründe */
.vc-bg-black   { background-color: var(--vc-black) !important; }
.vc-bg-surface { background-color: var(--vc-surface) !important; }
.vc-bg-yellow  { background-color: var(--vc-yellow) !important; }

/* Label-Stil (Pixelify Sans, klein, gelb) */
.vc-label {
  font-family: var(--vc-font-pixel) !important;
  font-size: var(--vc-text-label) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--vc-yellow) !important;
  line-height: 2 !important;
  text-transform: lowercase !important;
}

/* Button Outline */
.vc-btn-outline.elementor-button {
  background-color: transparent !important;
  color: var(--vc-gray) !important;
  border: 1px solid var(--vc-border) !important;
}

.vc-btn-outline.elementor-button:hover {
  border-color: var(--vc-yellow) !important;
  color: var(--vc-yellow) !important;
  background-color: transparent !important;
}

/* Card */
.vc-card {
  background-color: var(--vc-surface) !important;
  border-radius: var(--vc-radius-card) !important;
  border: 1px solid var(--vc-border) !important;
}