/*
Theme Name:        Kreativlösungen Pokorny
Theme URI:         https://www.kreativloesungen-pokorny.at
Description:       Child-Theme auf Basis von Spectra One – individueller Look für Arbeitgeberpositionierung in der Hotellerie.
Author:            DI Peter Pokorny
Author URI:        https://www.kreativloesungen-pokorny.at
Template:          spectra-one
Version:           1.0.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       pokorny-child
Tags:              business, consulting, hotel, employer-branding
*/

/* ============================================================
   SPECTRA ONE FIXES & ENTRY CONTENT
   ============================================================ */

.wp-block-post-content {
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position:     relative !important;
}

.wp-block-post-content .alignfull {
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position:     relative !important;
}

/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* Primärfarben */
  --color-navy:         #1C2B4A;
  --color-navy-light:   #243558;
  --color-navy-muted:   #3A4F72;

  /* Akzentfarbe Gold */
  --color-gold:         #B89A5A;
  --color-gold-light:   #D4B87A;
  --color-gold-dark:    #9A7E3E;

  /* Hintergrundfarben */
  --color-cream:        #F5F2EC;
  --color-cream-dark:   #EDE9E0;
  --color-white:        #FFFFFF;

  /* Textfarben */
  --color-text-primary:   #1C2B4A;
  --color-text-secondary: #4A5E7A;
  --color-text-muted:     #7A8FA8;
  --color-text-on-dark:   #F5F2EC;

  /* Trennlinien */
  --color-border:         rgba(28, 43, 74, 0.12);
  --color-border-gold:    rgba(184, 154, 90, 0.35);

  /* Typografie */
  --font-heading:  'Cormorant Garamond', Georgia, serif;
  --font-body:     'Raleway', system-ui, -apple-system, sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  /* Schriftgrößen (fluid) */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Abstände */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;

  /* Radien */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;

  /* Übergänge */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* Maximale Inhaltsbreite */
  --max-width:      1200px;
  --max-width-text:  720px;

  /* Fluid Typografie Scale */
  --fluid-h1:  clamp(2.25rem,  4vw + 1rem, 4rem);
  --fluid-h2:  clamp(1.75rem,  3vw + 0.75rem, 3rem);
  --fluid-h3:  clamp(1.375rem, 2vw + 0.5rem,  2rem);
  --fluid-h4:  clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
  --fluid-lg:  clamp(1rem,     0.5vw + 0.875rem, 1.25rem);
  --fluid-body: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);

  /* Schatten */
  --shadow-sm:  0 2px  8px rgba(28, 43, 74, 0.06);
  --shadow-md:  0 4px 20px rgba(28, 43, 74, 0.10);
  --shadow-lg:  0 8px 40px rgba(28, 43, 74, 0.14);
  --shadow-gold: 0 4px 20px rgba(184, 154, 90, 0.20);
  /* Ultra-softer Schatten für Boxen auf beigem Grund */
  --shadow-premium: 0 12px 35px rgba(28, 43, 74, 0.03), 0 1px 6px rgba(0, 0, 0, 0.01);

  /* Animation Easing */
  --ease-out:   cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0.0, 1.0, 1);
  --ease-inout: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ============================================================
   BASIS-RESET & GLOBALE STILE
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  line-height:      1.7;
  color:            var(--color-text-primary);
  background-color: var(--color-cream);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-heading);
  font-weight:  700;
  line-height:  1.2;
  color:        var(--color-navy);
  margin-top:   0;
}

h1 { font-size: var(--fluid-h1); }
h2 { font-size: var(--fluid-h2); }
h3 { font-size: var(--fluid-h3); }
h4 { font-size: var(--fluid-h4); }

p {
  margin-top:    0;
  margin-bottom: var(--space-md);
  color:         var(--color-text-secondary);
  max-width:     var(--max-width-text);
}

.eyebrow,
.wp-block-heading.is-style-eyebrow {
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-gold);
  margin-bottom:  var(--space-sm);
}

blockquote {
  border-left:    3px solid var(--color-gold);
  margin:         var(--space-xl) 0;
  padding:        var(--space-md) var(--space-xl);
  background:     var(--color-cream-dark);
  border-radius:  0 var(--radius-md) var(--radius-md) 0;
}

blockquote p {
  font-family: var(--font-heading);
  font-style:  italic;
  font-size:   var(--text-xl);
  color:       var(--color-navy);
  margin:      0;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.wp-block-button__link,
.wp-element-button,
button {
  font-family:     var(--font-body);
  font-weight:     600;
  font-size:       var(--text-sm);
  letter-spacing:  0.04em;
  border-radius:   var(--radius-sm);
  transition:      all var(--transition-base);
  cursor:          pointer;
  border:          none;
  display:         inline-block;
}

/* Primärer Button (Gold) */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button__link {
  background-color: var(--color-gold);
  color:            var(--color-navy) !important;
  padding:          0.85rem 2rem; /* Leicht erhöht für Premium-Look */
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button__link:hover {
  background-color: var(--color-gold-dark);
  transform:        translateY(-2px);
}

/* Ghost Button (Outline) - Perfekt für "Wie es funktioniert" */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color:            var(--color-gold) !important;
  border:           1.5px solid var(--color-border-gold);
  padding:          0.85rem 2rem;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color:     var(--color-gold);
  background-color: rgba(184, 154, 90, 0.08);
  transform:        translateY(-2px);
}

/* Flex-Abstand für Buttons im Hero-Bereich */
.wp-block-buttons {
  gap: var(--space-md) !important;
}

/* ============================================================
   HIGH-END CUSTOM CLASSES (Für Gutenberg "Zusätzliche CSS-Klassen")
   ============================================================ */

/* 1. Schmerzpunkte mit roter Linie (Bild 7) */
.agency-pain-point {
    border-left: 3px solid #b33939 !important; /* Edles Dunkelrot */
    padding-left: var(--space-lg) !important;   /* Zwingt den Text zum Atmen */
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.agency-pain-point:hover {
    transform: translateX(4px);
}

/* 2. Prozess-Schritte Soft-Shadow-Boxen (Bild 4 & 5) */
.agency-step-box {
    background: var(--color-white) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-xl) var(--space-2xl) !important;
    box-shadow: var(--shadow-premium) !important;
    border: 1px solid rgba(28, 43, 74, 0.03) !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base) !important;
}
.agency-step-box:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

/* 3. Zahlen-Sektion vertikale Ausrichtung (Bild 8) */
.agency-stats-columns .wp-block-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* ============================================================
   SPECTRA ONE CORE OVERRIDES (HEADER & FOOTER)
   ============================================================ */

.site-header,
header .wp-block-group {
  background-color: var(--color-navy) !important;
  border-bottom:    1px solid rgba(184, 154, 90, 0.2) !important;
}

.site-header .wp-block-group__inner-container,
header .wp-block-group__inner-container {
  padding-top:    1rem !important;
  padding-bottom: 1rem !important;
  max-width:      var(--max-width);
  margin:         0 auto;
  padding-left:   var(--space-xl);
  padding-right:  var(--space-xl);
}

.site-header .wp-block-site-logo img,
header .wp-block-site-logo img {
  filter:           brightness(0) invert(1);
  max-height:       60px;
  width:            auto;
}

.wp-block-navigation a {
  font-family:     var(--font-body) !important;
  font-size:       0.8125rem !important;   
  font-weight:     500 !important;
  letter-spacing:  0.05em !important;
  text-transform:  uppercase !important;
  color:           rgba(245, 242, 236, 0.7) !important;
}

.wp-block-navigation a:hover,
.wp-block-navigation .current-menu-item > a {
  color: var(--color-gold) !important;
}

/* ============================================================
   HERO-BEREICH & PHOTOMODUS
   ============================================================ */

.wp-block-cover,
.hero-section {
  min-height:       80vh;
  background-color: var(--color-navy-light) !important;
}

/* Linear-Gradient Overlay für perfekte Lesbarkeit des Hero-Textes */
.hero-with-overlay::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background: linear-gradient(
    95deg,
    rgba(28, 43, 74, 0.94) 0%,
    rgba(28, 43, 74, 0.80) 45%,
    rgba(28, 43, 74, 0.25) 100%
  ) !important;
  z-index:         1;
}

.hero-with-overlay .wp-block-cover__inner-container {
  position:        relative;
  z-index:         2;
}

/* ============================================================
   UTILITIES & SEKTIONEN
   ============================================================ */

.section-cream      { background-color: var(--color-cream) !important; padding: var(--space-3xl) var(--space-xl); }
.section-navy       { background-color: var(--color-navy) !important; padding: var(--space-3xl) var(--space-xl); }
.section-cream-dark { background-color: var(--color-cream-dark) !important; padding: var(--space-3xl) var(--space-xl); }

.section-navy p { color: rgba(245, 242, 236, 0.78) !important; }
.section-navy h1, .section-navy h2, .section-navy h3 { color: var(--color-text-on-dark) !important; }

.wp-block-image.is-style-gold-frame img {
    box-shadow: 8px 8px 0px rgba(184,154,90,0.45) !important;
    border-radius: 12px !important;
}

/* ============================================================
   MEDIA QUERIES (RESPONSIVE)
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --space-4xl: 4rem;
    --space-3xl: 3rem;
  }
  .wp-block-post-content .alignfull,
  .entry-content .alignfull {
    width:        100vw !important;
    max-width:    100vw !important;
    margin-left:  calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    position:     relative !important;
    left:         0 !important;
  }
}

@media (max-width: 768px) {
  :root {
    --space-4xl: 3rem;
    --space-3xl: 2rem;
  }

  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .site-header .wp-block-group__inner-container,
  header .wp-block-group__inner-container {
    padding-left:  var(--space-md) !important;
    padding-right: var(--space-md) !important;
  }

  .wp-block-cover,
  .hero-section {
    min-height: 60vh;
    padding:    var(--space-2xl) var(--space-md);
  }

  .entry-content .wp-block-group,
  .section-cream,
  .section-navy,
  .section-cream-dark {
    padding: var(--space-2xl) var(--space-md) !important;
  }
  
  .wp-block-post-content .alignfull,
  .entry-content .alignfull {
    width:        100vw !important;
    max-width:    100vw !important;
  }
}

/* Erzwingt die echte volle Breite für den Header ohne Theme-Ränder */
.wp-block-template-part header, 
.site-header, 
.page-id-cookie-policy-eu .entry-header {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
}

/* Verhindert horizontales Scrollen auf Mobilgeräten */
body, html {
    overflow-x: hidden !important;
}