/*
Theme Name: VRONI. Dein Friseur
Theme URI: https://friseur-vroni.de
Author: VRONI.
Description: Individuelles Theme fuer friseur-vroni.de. Zwei Welten unter einem Dach - Damenwelt (hell, clean) und Herrenwelt (dunkel, warm). Fuer den Einsatz mit SiteOrigin Page Builder.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: vroni
*/

/* ===== Schriften =====
   DejaVu wird ueber Adobe Fonts geladen (Kit ycw6soj, siehe functions.php).
   Es wird nur der Book-Schnitt (400) verwendet. Fallbacks: Georgia / Verdana. */

/* ===== Farbkonzept ===== */
:root {
  /* Damenwelt */
  --vroni-weiss:      #FFFFFF;
  --vroni-offwhite:   #F4F0E7;
  --vroni-anthrazit:  #1A1A1A;
  --vroni-champagner: #C8A389;
  /* Herrenwelt */
  --vroni-eiche:      #281D19;
  --vroni-walnuss:    #5F4433;
  --vroni-messing:    #9E7A3C;
  --vroni-leinen:     #F5F0EA;
  /* Semantische Zuordnung */
  --bg-body:          var(--vroni-offwhite);
  --bg-card:          var(--vroni-weiss);
  --bg-dark:          var(--vroni-eiche);
  --bg-dark-card:     var(--vroni-walnuss);
  --text-primary:     var(--vroni-anthrazit);
  --text-on-dark:     var(--vroni-leinen);
  --accent-light:     var(--vroni-champagner);
  --accent-dark:      var(--vroni-messing);
  --btn-primary-bg:      var(--vroni-anthrazit);
  --btn-primary-text:    var(--vroni-leinen);
  --btn-primary-hover:   var(--vroni-messing);
  --btn-on-dark-bg:      var(--vroni-messing);
  --btn-on-dark-text:    var(--vroni-eiche);
  --btn-on-dark-hover:   var(--vroni-champagner);
}

/* ===== Basis ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: "dejavu-sans", 'DejaVu Sans', Verdana, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
b, strong { font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: "dejavu-serif", 'DejaVu Serif', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;      /* Headlines Caps-Only */
  letter-spacing: 0.1em;
  line-height: 1.2;
  margin: 0 0 0.6em;
}
h1 { font-size: clamp(40px, 4.6vw, 66px); letter-spacing: 0.05em; line-height: 1.15; }
h2 { font-size: 34px; }
h3 { font-size: 19px; }
a { color: var(--text-primary); text-decoration: none; transition: color .2s; }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }

/* ===== Header ===== */
.vroni-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 6vw;
  background: var(--bg-body);
  border-bottom: 1px solid rgba(200,163,137,.4);
  position: sticky; top: 0; z-index: 1000;
}
/* Platz fuer die WP-Adminbar */
body.admin-bar .vroni-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .vroni-header { top: 46px; } }
.vroni-logo { font-family: "dejavu-serif", 'DejaVu Serif', Georgia, serif; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; }
.vroni-logo .punkt { color: var(--accent-light); }
.vroni-nav ul { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.vroni-nav a { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 4px; }
.vroni-nav .current-menu-item > a,
.vroni-nav .current_page_item > a { border-bottom: 2px solid var(--accent-light); }

/* ===== Buttons (auch fuer SiteOrigin-Button-Widgets per Klasse) ===== */
.vroni-btn, .vroni-btn-dark, .vroni-btn-outline, .vroni-btn-outline-dark {
  display: inline-block; padding: 15px 38px;
  font-family: "dejavu-sans", 'DejaVu Sans', Verdana, sans-serif;
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  border-radius: 0; cursor: pointer; transition: all .2s;
}
.vroni-btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.vroni-btn:hover { background: var(--btn-primary-hover); color: var(--btn-primary-text); }
.vroni-btn-dark { background: var(--btn-on-dark-bg); color: var(--btn-on-dark-text); }
.vroni-btn-dark:hover { background: var(--btn-on-dark-hover); color: var(--btn-on-dark-text); }
.vroni-btn-outline { background: transparent; border: 1px solid var(--accent-light); color: var(--text-primary); }
.vroni-btn-outline:hover { background: var(--accent-light); color: var(--vroni-weiss); }
.vroni-btn-outline-dark { background: transparent; border: 1px solid var(--accent-dark); color: var(--text-on-dark); }
.vroni-btn-outline-dark:hover { background: var(--accent-dark); color: var(--btn-on-dark-text); }

/* ===== Inhaltsbreite: max 1120px, Hintergruende full-bleed ===== */
body .panel-row-style {
  padding-left: max(24px, calc((100vw - 1120px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1120px) / 2)) !important;
}
.vroni-header, .vroni-footer {
  padding-left: max(24px, calc((100vw - 1120px) / 2)) !important;
  padding-right: max(24px, calc((100vw - 1120px) / 2)) !important;
}

/* ===== SiteOrigin-Zeilen: nahtlose Sektionswechsel ===== */
body .panel-grid { margin-bottom: 0 !important; }
body .so-panel { margin-bottom: 24px; }
body .so-panel:last-child { margin-bottom: 0; }

/* Hero: Buttons nebeneinander */
.vroni-hero .so-panel.widget_sow-button { display: inline-block; vertical-align: middle; margin: 0 16px 0 0; }

/* ===== SiteOrigin-Button-Widgets ===== */
.so-widget-sow-button .ow-button-base a {
  text-transform: uppercase; letter-spacing: .15em;
  border-radius: 0 !important; box-shadow: none !important; border: none;
  font-family: "dejavu-sans", 'DejaVu Sans', Verdana, sans-serif;
}
/* Outline-Variante: Widget-Klasse "vroni-btn-outline" */
a.vroni-btn-outline, .so-widget-sow-button .ow-button-base a.vroni-btn-outline {
  background: transparent !important;
  border: 1px solid var(--vroni-champagner) !important;
  color: var(--vroni-anthrazit) !important;
}
a.vroni-btn-outline:hover, .so-widget-sow-button .ow-button-base a.vroni-btn-outline:hover {
  background: var(--vroni-champagner) !important;
  color: var(--vroni-weiss) !important;
}

/* ===== Dunkle Sektionen (Herrenwelt) =====
   Im Page Builder der Zeile die Klasse "vroni-dunkel" geben. */
.vroni-dunkel, .vroni-dunkel p, .vroni-dunkel li { color: var(--text-on-dark); }
.vroni-dunkel h1, .vroni-dunkel h2, .vroni-dunkel h3 { color: var(--text-on-dark); }
.vroni-dunkel .akzent, .vroni-dunkel h2 em, .vroni-dunkel h3 em { color: var(--accent-dark); font-style: normal; }
.vroni-dunkel a { color: var(--text-on-dark); }
.vroni-dunkel a:hover { color: var(--accent-dark); }

/* Helle Sektionen: Akzent */
.akzent { color: var(--accent-light); }

/* ===== Content / Seiten ===== */
.vroni-content { max-width: 1040px; margin: 0 auto; padding: 60px 6vw; }
.page .vroni-content-full { padding: 0; max-width: none; } /* SiteOrigin uebernimmt */

/* ===== 404 ===== */
.vroni-404 { max-width: 720px; margin: 0 auto; padding: 140px 24px 160px; text-align: center; }
.vroni-404-eyebrow { letter-spacing: .3em; text-transform: uppercase; color: var(--vroni-messing); font-size: 12px; margin: 0 0 16px; }
.vroni-404 h1 { font-size: clamp(32px, 4vw, 52px); }
.vroni-404-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

/* ===== Footer ===== */
.vroni-footer {
  background: var(--bg-dark);
  border-top: 1px solid rgba(158,122,60,.35);
  padding: 28px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 13px; color: rgba(245,240,234,.7);
}
.vroni-footer a { color: rgba(245,240,234,.7); }
.vroni-footer a:hover { color: var(--accent-dark); }
.vroni-footer-menu ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }

@media (max-width: 760px) {
  .vroni-header { flex-direction: column; gap: 14px; }
  .vroni-nav ul { flex-wrap: wrap; gap: 16px 24px; justify-content: center; }
  h2 { font-size: 26px; }
}