/*
Theme Name: nxtlvl-PFenzl
Author: Paul-Vincent Fenzl
Description: Black-Gold Block-Theme fuer Paul-Vincent Fenzl. KI-Agenten, Podcast und Wachstum aus einem Guss. Fraunces + Hanken Grotesk, dunkles Premium-Design.
Version: 1.1.3
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nxtlvl-pfenzl
*/

/* ============================================================
   nxtlvl-PFenzl — zusaetzliches Feinschliff-CSS
   Die meisten Design-Werte kommen aus theme.json.
   Hier liegt nur, was sich dort nicht sauber abbilden laesst.
   ============================================================ */

:root {
  --nx-bg: #0a0a0c;
  --nx-bg2: #111015;
  --nx-panel: #16141a;
  --nx-line: rgba(201,162,75,0.18);
  --nx-gold: #c9a24b;
  --nx-gold-b: #e7cd8a;
  --nx-txt: #ece8df;
  --nx-muted: #8c867a;
}

/* Grain + Glow Atmosphaere auf dem Body */
body {
  position: relative;
  background-color: var(--nx-bg);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60% 50% at 80% -5%, rgba(201,162,75,0.12), transparent 60%),
    radial-gradient(45% 40% at 8% 18%, rgba(201,162,75,0.05), transparent 60%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wp-site-blocks { position: relative; z-index: 1; }

/* Logo-Schriftzug im Header */
.site-logo-text {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--nx-txt);
  text-decoration: none;
}
.site-logo-text b { color: var(--nx-gold); }

/* Navigation Hover */
.wp-block-navigation a:hover { color: var(--nx-gold-b) !important; }

/* ---------- Mobiles Overlay-Menue (dunkel, Vollbild) ---------- */
/* Hamburger-Icon golden */
.wp-block-navigation__responsive-container-open {
  color: var(--nx-gold) !important;
}

/* Das aufgeklappte Overlay: fest ueber den ganzen Bildschirm */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100000 !important;
  background-color: var(--nx-bg) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
}

/* Inhalt zentriert */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Menue-Liste untereinander, zentriert */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.8rem !important;
}

/* Menuepunkte: hell, gross, Fraunces */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  color: var(--nx-txt) !important;
  font-family: 'Fraunces', serif !important;
  font-size: 1.7rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover {
  color: var(--nx-gold-b) !important;
}

/* WordPress-eigenen Schliessen-Button ausblenden — wir nutzen ein
   eigenes, garantiert sichtbares X (per Theme-JS injiziert, siehe functions.php).
   Der native Button bleibt im DOM, damit das JS WPs Menue-Status sauber steuern kann. */
.wp-block-navigation__responsive-container-close {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Eigenes Schliessen-X: golden, fest oben rechts, immer sichtbar wenn Menue offen */
.pf-nav-close {
  position: fixed;
  top: 1.4rem;
  right: 1.4rem;
  z-index: 100002;
  width: 48px;
  height: 48px;
  display: none;            /* per JS auf flex gesetzt, sobald Menue offen */
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--nx-gold);
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 30px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s, transform .2s;
}
.pf-nav-close:hover { color: var(--nx-gold-b); transform: rotate(90deg); }

/* Buttons: Gold-Hover */
.wp-block-button__link:hover {
  background-color: var(--nx-gold-b) !important;
  border-color: var(--nx-gold-b) !important;
}

/* Sticky transparenter Header mit Blur */
.site-header-part {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10,10,12,0.6);
  border-bottom: 1px solid var(--nx-line);
}

/* feine Hairline-Trenner */
.nx-hairline { border: 0; height: 1px; background: var(--nx-line); }

/* ---------- Use-Case-Kaesten: Hover ---------- */
.nx-card {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.nx-card:hover {
  transform: translateY(-4px);
  border-color: var(--nx-gold) !important;
  box-shadow: 0 10px 40px -12px rgba(201,162,75,0.25);
}

/* ---------- KI-Demo-Widget (Branchen-Umschalter) ---------- */
.nx-demo { border: 1px solid var(--nx-line); border-radius: 6px; background: var(--nx-bg2); overflow: hidden; max-width: 1120px; margin: 0 auto; }
.nx-demo-tabs { display: flex; gap: 10px; padding: 16px; border-bottom: 1px solid var(--nx-line); flex-wrap: wrap; }
.nx-demo-tab { flex: 1; min-width: 150px; text-align: left; cursor: pointer; font-family: 'Hanken Grotesk', sans-serif; padding: 16px 18px; border-radius: 4px; background: var(--nx-bg); border: 1px solid var(--nx-line); transition: all .25s; color: var(--nx-txt); }
.nx-demo-tab:hover { border-color: var(--nx-gold); }
.nx-demo-tab.on { background: var(--nx-gold); border-color: var(--nx-gold); color: #0a0a0c; }
.nx-demo-tab .t { font-size: 15px; font-weight: 600; display: block; }
.nx-demo-tab .k { font-size: 12px; opacity: .7; margin-top: 3px; display: block; }
.nx-spark { border-left: 2px solid var(--nx-gold); padding: 6px 0 6px 24px; margin: 26px 16px; }
.nx-spark .q { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(20px,3vw,28px); line-height: 1.2; color: var(--nx-txt); }
.nx-spark .s { color: var(--nx-muted); font-size: 15px; line-height: 1.6; margin-top: 12px; }
.nx-chat { padding: 22px; min-height: 240px; max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.nx-msg { max-width: 84%; padding: 12px 15px; border-radius: 4px; font-size: 14.5px; line-height: 1.55; white-space: pre-wrap; }
.nx-msg.u { align-self: flex-end; background: var(--nx-panel); border: 1px solid var(--nx-line); color: var(--nx-txt); }
.nx-msg.a { align-self: flex-start; border-left: 2px solid var(--nx-gold); padding-left: 15px; color: var(--nx-txt); }
.nx-msg.a .who { color: var(--nx-gold); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; display: block; margin-bottom: 5px; }
.nx-empty { color: var(--nx-muted); font-size: 14px; }
.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.nx-chip { background: var(--nx-panel); border: 1px solid var(--nx-line); color: var(--nx-muted); font-family: inherit; font-size: 12.5px; padding: 8px 13px; border-radius: 999px; cursor: pointer; transition: all .2s; }
.nx-chip:hover { color: var(--nx-gold-b); border-color: var(--nx-gold); }
.nx-inputrow { display: flex; gap: 10px; border-top: 1px solid var(--nx-line); padding: 16px 18px; }
.nx-inputrow input { flex: 1; background: var(--nx-bg); border: 1px solid var(--nx-line); color: var(--nx-txt); font-family: inherit; font-size: 14.5px; padding: 12px 14px; border-radius: 3px; outline: none; }
.nx-inputrow input:focus { border-color: var(--nx-gold); }
.nx-send { background: var(--nx-gold); color: #0a0a0c; border: 0; padding: 0 22px; border-radius: 3px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: background .2s; }
.nx-send:hover { background: var(--nx-gold-b); }
.nx-send:disabled { opacity: .4; cursor: default; }
.nx-lockcta { border-top: 1px solid var(--nx-line); padding: 22px; }
.nx-lockcta .l { font-family: 'Fraunces', serif; font-size: 18px; color: var(--nx-gold-b); }
.nx-lockcta p { color: var(--nx-muted); font-size: 14px; margin: 8px 0 16px; }
.nx-lockcta .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.nx-btn { font-family: inherit; font-size: 14px; font-weight: 500; padding: 13px 24px; border-radius: 3px; cursor: pointer; border: 1px solid var(--nx-gold); transition: all .25s; text-decoration: none; display: inline-block; }
.nx-btn-fill { background: var(--nx-gold); color: #0a0a0c; }
.nx-btn-fill:hover { background: var(--nx-gold-b); }
.nx-btn-ghost { background: transparent; color: var(--nx-txt); border-color: var(--nx-line); }
.nx-btn-ghost:hover { border-color: var(--nx-gold); color: var(--nx-gold-b); }
.nx-dots span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--nx-gold); margin-right: 4px; animation: nxblink 1.2s infinite both; }
.nx-dots span:nth-child(2){ animation-delay:.2s } .nx-dots span:nth-child(3){ animation-delay:.4s }
@keyframes nxblink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* ============================================================
   Responsive Abstaende — seitliches Padding auf schmalen Screens
   Verhindert, dass Inhalt am Bildschirmrand klebt.
   ============================================================ */
@media (max-width: 781px) {
  /* EIN einziger seitlicher Gutter — nur auf der obersten Ebene (main).
     Verschachtelte constrained-Gruppen bekommen KEIN eigenes Padding mehr,
     sonst stapeln sich die Abstaende (main + Section + Content + Box = ~66px)
     und quetschen den Inhalt in eine schmale Mittelspalte. */
  .wp-site-blocks main {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  /* Volle-Breite-Elemente (alignfull) brechen aus main aus —
     ihnen den Gutter direkt geben. */
  .wp-site-blocks .alignfull {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  /* Eingebettete Snippet-Inhalte (Podcast) */
  #pf-podcast {
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  /* Hero-Abstand oben etwas reduzieren auf Mobil */
  .wp-site-blocks main > .wp-block-group:first-child {
    padding-top: 3.5rem !important;
  }
}

/* ============================================================
   KI-Demo-Widget — Mobil-Feinschliff
   WICHTIG: Das Panel .nx-demo bekommt KEIN eigenes Aussen-Padding.
   Die seitliche Luft liefert der umgebende constrained-Container (1,4rem).
   Frueher stapelten sich Container- + Panel- + Kinder-Padding (~66px links)
   und quetschten den Assistenten in einen schmalen Streifen.
   ============================================================ */
@media (max-width: 781px) {
  .nx-demo { border-radius: 6px; }

  .nx-demo-tabs { padding: 12px; gap: 8px; }
  .nx-demo-tab { flex: 1 1 100%; min-width: 0; width: 100%; padding: 13px 15px; }

  .nx-spark { margin: 20px 14px; padding-left: 16px; }
  .nx-spark .q { font-size: clamp(19px, 5.5vw, 26px); }

  .nx-chat { padding: 16px 14px; min-height: 180px; }
  .nx-msg { max-width: 92%; }

  /* Chips-Wrapper (Inline-Padding aus dem Template entschaerfen) */
  .nx-chipswrap,
  .nx-demo > div[style*="padding:0 22px"] { padding: 0 14px 14px !important; }

  .nx-inputrow { padding: 12px 14px; gap: 8px; }
  .nx-inputrow input { min-width: 0; }
  .nx-send { padding: 0 16px; white-space: nowrap; }

  .nx-lockcta { padding: 18px 14px; }
}

/* Header-Padding bleibt konsistent — Logo nicht am Rand */
@media (max-width: 781px) {
  .site-header-part {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }
}

/* ============================================================
   Ueberschriften — Ueberlauf-Schutz
   Lange Marken-/Komposita-Woerter (z. B. „WachstumsTanten") duerfen
   nicht ueber den Rand schieben und das Layout breiter ziehen.
   ============================================================ */
h1, h2, h3, h4, .wp-block-heading, .wp-block-post-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Kein versehentlicher horizontaler Ueberlauf der ganzen Seite
   (verhindert das „Rauszoomen" auf dem Handy). */
.wp-site-blocks { overflow-x: clip; }

@media (max-width: 600px) {
  /* Groesste Schriftgrade auf schmalen Screens deckeln, damit auch
     ein langes Wort ohne Umbruch in die Breite passt. */
  :root {
    --wp--preset--font-size--huge: clamp(2rem, 8.5vw, 2.6rem);
    --wp--preset--font-size--x-large: clamp(1.7rem, 7vw, 2.2rem);
  }
  .has-huge-font-size  { font-size: clamp(2rem, 8.5vw, 2.6rem) !important; }
  .has-x-large-font-size { font-size: clamp(1.7rem, 7vw, 2.2rem) !important; }
}

/* ============================================================
   Erfahrungs-Sektion — Icons & CTA
   ============================================================ */
.nx-erfahrung-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}

.nx-ei-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--nx-muted);
  line-height: 1.4;
  white-space: nowrap;
}

.nx-ei-dot {
  font-size: 0.4rem;
  color: var(--nx-gold);
  flex-shrink: 0;
  position: relative;
  top: -1px;
}

.nx-erfahrung-cta {
  font-size: 0.75rem;
  color: var(--nx-muted);
  opacity: 0.6;
  letter-spacing: 0.04em;
  margin: 0;
}

@media (max-width: 768px) {
  .nx-erfahrung-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1.5rem;
  }
  .nx-ei-item {
    font-size: 0.9rem;
    white-space: normal;
  }
}