/*
Theme Name:   Natascha Nox — Blocksy Child
Theme URI:    https://nataschanox.com
Description:  Child-Theme für Blocksy. Enthält das Design-System (Farb- und Typo-Tokens) sowie projektspezifische Komponentenstile. Änderungen am Design gehören hierher, nicht ins Eltern-Theme.
Author:       Webpräsenz NN
Version:      0.1.2
Template:     blocksy
License:      GPL-2.0-or-later
Text Domain:  nn-child
Tags:         dark, custom-colors
*/

/* ==========================================================================
   0 · Schriften, lokal gehostet
   Ueber die WordPress-Font-Library unter wp-content/uploads/fonts/ abgelegt.
   Nur der latin-Subset: er deckt Deutsch vollstaendig ab (inkl. Umlaute, ss,
   Gedankenstrich, Mittelpunkt). latin-ext waere zusaetzliches Gewicht ohne
   Nutzen. Beide Dateien sind variable Fonts, ein File je Familie.
   Kein Google-CDN im Frontend - keine Drittanbieter-Verbindung, DSGVO-sauber.
   Pfad absolut ab Root, damit ein Domainwechsel nichts bricht.
   ========================================================================== */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/wp-content/uploads/fonts/cormorant-garamond-latin-var.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/wp-content/uploads/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1 · Design-Tokens
   Einzige Quelle für Farben, Abstände und Typo-Stufen.
   Violett ist Akzentfarbe: Rahmen, Hover, Fokus, Icons — niemals Fließtext.
   ========================================================================== */
:root {
  --nn-black:       #0A0A0C;
  --nn-surface:     #141418;
  --nn-raise:       #1B1B21;
  --nn-line:        #26262E;
  --nn-violet:      #7C00FE;
  --nn-violet-soft: #A855F7;
  --nn-text:        #ECEBF0;   /* ~15:1 auf --nn-black */
  --nn-muted:       #A0A0AE;   /*  ~7:1 auf --nn-black */
  --nn-paper:       #EFEDE8;   /* heller Grund für Print/Invers */

  /* Zustände */
  --nn-ok:      #4ADE80;
  --nn-warn:    #FBBF24;
  --nn-closed:  #71717A;

  /* Typo — Skala Major Third (1.25) */
  --nn-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --nn-sans:  "IBM Plex Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --nn-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --nn-fs-xs:  0.78rem;
  --nn-fs-sm:  0.9rem;
  --nn-fs-base: 1rem;
  --nn-fs-md:  1.25rem;
  --nn-fs-lg:  1.563rem;
  --nn-fs-xl:  1.953rem;
  --nn-fs-2xl: 2.441rem;
  --nn-fs-h1:  clamp(2.5rem, 5vw, 4rem);

  --nn-track-wide: 0.18em;   /* Versalien-Sperrung Wortmarke/Labels */
  --nn-track-label: 0.14em;

  /* Raster */
  --nn-gap:    clamp(1rem, 2.5vw, 2rem);
  --nn-section: clamp(3rem, 8vw, 6.5rem);
  --nn-radius: 2px;          /* bewusst minimal — kein Rundungs-Look */
  --nn-measure: 65ch;        /* Lesebreite Fließtext */
}

/* ==========================================================================
   2 · Basis
   ========================================================================== */
body {
  background: var(--nn-black);
  color: var(--nn-text);
  font-family: var(--nn-sans);
  font-weight: 300;
}

h1, h2, h3, .nn-display {
  font-family: var(--nn-serif);
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: var(--nn-fs-h1); line-height: 1.06; letter-spacing: 0.01em; }
h2 { font-size: var(--nn-fs-xl); line-height: 1.15; }
h3 { font-size: var(--nn-fs-md); line-height: 1.25; }

p, li { max-width: var(--nn-measure); }

a { color: var(--nn-violet-soft); text-underline-offset: 0.18em; }
a:hover { color: var(--nn-text); }

/* Tastaturfokus muss sichtbar sein — Befund Barrierefreiheit aus der Analyse */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--nn-violet-soft);
  outline-offset: 2px;
}

/* Sanftes Einblenden beim Scrollen. Die Klasse nn-reveal vergibt das Skript in
   functions.php nur an Elemente unterhalb des ersten Bildschirms; is-sichtbar
   kommt, sobald sie ins Bild kommen. Nur opacity und transform — beides laeuft
   auf dem Compositor und kostet weder Layout noch Ladezeit. Wer Bewegung
   reduziert hat, sieht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  .nn-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s ease;
    transition-delay: var(--nn-reveal-delay, 0ms);
  }
  .nn-reveal.is-sichtbar {
    opacity: 1;
    transform: none;
  }
}

/* Touch-Ziele mindestens 44 px */
.nn-btn, .wp-block-button__link, button[type="submit"] {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Eigener Button (Galerie "Mehr laden", Termin-CTA). Blocksy stylt nur seine
   eigenen Klassen; nn-termine bringt dieselbe Regel mit, damit das Plugin auch
   allein funktioniert. Fuer <button> zusaetzlich Rahmen und Schrift zuruecksetzen. */
.nn-btn {
  padding: 0.65rem 1.5rem;
  border: 0;
  background: var(--nn-violet);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: var(--nn-track-label);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--nn-radius);
  cursor: pointer;
}

.nn-btn:hover,
.nn-btn:focus-visible {
  background: var(--nn-violet-soft);
  color: #fff;
}

/* ==========================================================================
   3 · Labels und Eyebrows
   ========================================================================== */
.nn-label {
  font-family: var(--nn-mono);
  font-size: var(--nn-fs-xs);
  letter-spacing: var(--nn-track-label);
  text-transform: uppercase;
  color: var(--nn-violet-soft);
}

/* ==========================================================================
   4 · Bilder — feste Maße gegen Layout-Shift
   Behebt CLS 0,25 (Galerie) und 0,17 (Services) aus der SEO-Analyse.
   Jedes <img> braucht width/height im Markup — daraus leitet der Browser das
   Seitenverhältnis selbst ab und reserviert den Platz vor dem Laden.
   ========================================================================== */
.nn-media img,
.nn-gallery img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: var(--nn-surface);   /* Platzhalterfläche während des Ladens */
}

/* ==========================================================================
   5 · Galerie-Raster
   ========================================================================== */
/* Spaltenzahl fest gestaffelt statt auto-fill: auto-fill mit 240 px Minimum
   ergibt auf dem Handy nur eine Spalte und auf dem Desktop bis zu sieben. */
.nn-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--nn-gap);
}

@media (min-width: 640px) {
  .nn-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .nn-gallery { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   6 · Termin-Karten
   Status wird zusätzlich zur Farbe über Text codiert — Farbe allein genügt nicht.
   ========================================================================== */
.nn-termin {
  background: var(--nn-surface);
  border: 1px solid var(--nn-line);
  border-radius: var(--nn-radius);
  padding: var(--nn-gap);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.nn-termin__datum { font-variant-numeric: tabular-nums; }
.nn-termin--verfuegbar  { border-left: 2px solid var(--nn-ok); }
.nn-termin--auf-anfrage { border-left: 2px solid var(--nn-warn); }
.nn-termin--ausgebucht  { border-left: 2px solid var(--nn-closed); opacity: 0.65; }

/* ==========================================================================
   7 · Akkordeon (Services-Katalog)
   ========================================================================== */
.nn-akkordeon summary {
  cursor: pointer;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--nn-line);
  font-family: var(--nn-serif);
  font-size: var(--nn-fs-md);
}
.nn-akkordeon summary::marker { color: var(--nn-violet); }

/* ==========================================================================
   8 · Wortmarke im Header
   Das SVG erbt die Textfarbe über currentColor.
   ========================================================================== */
.nn-wortmarke svg { height: 40px; width: auto; color: var(--nn-text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   9 · Blocksy-Bruecke
   Blocksy liefert seine Palette als --theme-*-Variablen aus :root. Die
   Zuordnung steht hier auf :root:root und gewinnt damit ueber Spezifitaet,
   unabhaengig von der Reihenfolge der Stylesheets.
   ========================================================================== */
:root:root {
  --theme-palette-color-1: var(--nn-violet-soft);
  --theme-palette-color-2: var(--nn-text);
  --theme-palette-color-3: var(--nn-text);
  --theme-palette-color-4: var(--nn-text);
  --theme-palette-color-5: var(--nn-line);
  --theme-palette-color-6: var(--nn-surface);
  --theme-palette-color-7: var(--nn-raise);
  --theme-palette-color-8: var(--nn-black);

  --theme-text-color: var(--nn-text);
  --theme-headings-color: var(--nn-text);
  --theme-border-color: var(--nn-line);
  --theme-link-initial-color: var(--nn-violet-soft);
  --theme-link-hover-color: var(--nn-text);

  --theme-font-family: var(--nn-sans);
  --theme-font-weight: 300;
  --theme-font-size: 16px;
  --theme-line-height: 1.65;

  --theme-button-background-initial-color: var(--nn-violet);
  --theme-button-background-hover-color: var(--nn-violet-soft);
  --theme-button-text-initial-color: #FFFFFF;
  --theme-button-text-hover-color: #FFFFFF;
  --theme-button-min-height: 44px;
  --theme-button-padding: 12px 30px;
  --theme-button-font-size: var(--nn-fs-sm);
  --theme-button-font-weight: 400;
  --theme-button-border-radius: 2px;
  --theme-button-transform: uppercase;

  --theme-form-field-border-initial-color: var(--nn-line);
  --theme-form-field-border-focus-color: var(--nn-violet-soft);
  --theme-form-selection-field-initial-color: var(--nn-line);
  --theme-form-selection-field-active-color: var(--nn-violet-soft);

  --theme-selection-background-color: var(--nn-violet);
  --theme-selection-text-color: #FFFFFF;

  --theme-normal-container-max-width: 1200px;
  --theme-narrow-container-max-width: 760px;
}

/* Buttons: gesperrte Versalien, konsistent mit den Labels */
.wp-block-button__link,
.ct-button,
.wp-element-button {
  letter-spacing: var(--nn-track-label);
}

/* Header: die Wortmarke traegt den Namen, der Text-Titel ist Dopplung.
   Fuer Screenreader bleibt der Name im alt-Attribut des Logos. */
.site-title,
.site-description {
  display: none;
}

.site-logo-container img {
  height: 44px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 1000px) {
  .site-logo-container img { height: 60px; }
}

@media (max-width: 480px) {
  .site-logo-container img { height: 36px; }
}

/* Hauptmenue: Blocksy setzt 12 px fett. 14 px, halbfett und leicht gesperrt —
   das nimmt den Rhythmus der Wortmarke auf (Wunsch des Inhabers, 12.09.). */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a {
  --theme-font-size: 14px;
  --theme-font-weight: 600;
  --theme-letter-spacing: 0.08em;
}


/* ==========================================================================
   10 · Buehnenbild der Startseite
   Hochformat, begrenzte Hoehe, damit der Einstiegstext darunter im ersten
   Bildschirm sichtbar bleibt.
   ========================================================================== */
.nn-hero {
  margin: 0 0 var(--nn-section);
  max-width: 720px;
}

.nn-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: cover;
  object-position: center 20%;
  border: 1px solid var(--nn-line);
  border-radius: var(--nn-radius);
}

/* ==========================================================================
   Tippflaechen (S10)
   Blocksy setzt den Menue-Trigger auf Icon-Groesse (18 px), Fluent Forms die
   Checkboxen auf 13 px. 44 px (Trigger, Felder) und 22 px (Checkbox) sind die
   Untergrenzen, die auf dem Handy sicher treffbar sind.
   ========================================================================== */
.ct-header-trigger {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  margin-inline-end: -13px; /* Icon bleibt optisch buendig mit dem Rand */
}

.frm-fluent-form .ff-el-form-check-input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  margin: 0;
  accent-color: var(--nn-violet);
}

.frm-fluent-form .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-height: 44px;
  cursor: pointer;
}

.frm-fluent-form .ff-el-form-control:not(textarea) {
  min-height: 44px;
}

/* ==========================================================================
   Fluent Forms auf dunklem Grund
   Das Plugin-Standardtheme rechnet mit hellem Hintergrund: Text in Feldern
   #606266, Rahmen #dadbdd, weisser Hintergrund im Fokus. Auf Schwarz waere die
   Eingabe kaum lesbar (2,2:1). Die Plugin-Variablen werden hier umgebogen,
   :root:root schlaegt das :root des Plugins unabhaengig von der Ladereihenfolge.
   ========================================================================== */
:root:root {
  --fluentform-primary: var(--nn-violet-soft);
  --fluentform-secondary: var(--nn-text);
  --fluentform-border-color: var(--nn-line);
}

.fluentform.ff-default .ff-el-form-control,
.fluentform.ff-default .ff-el-form-control:focus {
  color: var(--nn-text);
  background-color: var(--nn-surface);
}

.fluentform.ff-default .ff-el-form-control:focus {
  border-color: var(--nn-violet-soft);
  box-shadow: 0 0 0 3px rgba(124, 0, 254, 0.35);
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--nn-muted);
  opacity: 1;
}

.fluentform select.ff-el-form-control option {
  color: var(--nn-text);
  background: var(--nn-surface);
}

.fluentform .ff-el-help-message {
  color: var(--nn-muted);
  font-style: normal;
}

/* ==========================================================================
   Pruefsiegel [nn_siegel]
   ========================================================================== */
.nn-siegel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 2rem 0;
  padding: 0;
  list-style: none;
}

.nn-siegel__item {
  margin: 0;
  width: var(--nn-siegel-groesse, 140px);
  max-width: 40vw;
}

.nn-siegel img {
  width: 100%;
  height: auto;
  display: block;
}

.nn-siegel a {
  display: block;
  border-radius: 50%;
}

.nn-siegel a:hover img { filter: brightness(1.12); }

/* Abschluss der Startseite: Siegel und Instagram, per Linie vom Inhalt
   abgesetzt und zentriert — wie am Ende der bisherigen Seite. Gruppenblock
   mit der Klasse nn-abschluss im Seiteninhalt. */
.nn-abschluss {
  margin-top: var(--nn-section);
  padding-top: calc(var(--nn-section) / 2);
  border-top: 1px solid var(--nn-line);
  text-align: center;
}

.nn-abschluss h2 { margin-bottom: 0; }

.nn-abschluss p {
  margin-inline: auto;
  color: var(--nn-muted);
}