/*
Theme Name:  Astra Child – FaBaNutri
Description: Child-Theme für fabanutri.de. Eigenes CSS nur hier oder im Customizer.
Template:    astra
Version:     1.0.0
Author:      Christoph Fach
Text Domain: astra-child-fabanutri
*/

/* ============================================================
   FABANUTRI DESIGNSYSTEM
   Quelle: Ist-Zustand der Coming-Soon-Seite unter Twenty Twenty-Five,
   erfasst 01.08.2026 vor dem Astra-Wechsel.
   Schrift (Manrope), Grundfarben und Container-Breite kommen aus dem
   Astra-Customizer – hier nur, was der Customizer nicht kann.
   ============================================================ */

/* Markenverlauf: Material-Design-Palette (Green 500 → Light Blue 500 →
   Purple 500 → Deep Orange 500 → Orange 500). Übernommen aus dem
   TT5-Stand, dort als linear-gradient(90deg, …) auf dem Schriftzug. */
:root {
  --fbn-green: #4caf50;
  --fbn-blue: #03a9f4;
  --fbn-purple: #9c27b0;
  --fbn-deep-orange: #ff5722;
  --fbn-orange: #ff9800;

  --fbn-brand-gradient: linear-gradient(
    90deg,
    var(--fbn-green),
    var(--fbn-blue),
    var(--fbn-purple),
    var(--fbn-deep-orange),
    var(--fbn-orange)
  );

  /* Einzelfarbe für Fallback und Flächen, bei denen ein Verlauf nicht
     trägt (Buttons, Rahmen). Mittelton des Verlaufs. */
  --fbn-brand-solid: #9c27b0;
}

/* ---------- Marken-Schriftzug „FaBaNutri" ----------
   Wird im Header (Site-Titel) und im Footer eingesetzt.
   Für den Footer die Klasse .fbn-gradient-text am Element setzen. */

/* Fallback zuerst: Ohne background-clip wäre der Schriftzug sonst
   unsichtbar – das ist der klassische Fehler bei Verlaufstext. */
.site-title a,
.fbn-gradient-text {
  color: var(--fbn-brand-solid);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .site-title a,
  .fbn-gradient-text {
    background-image: var(--fbn-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Unterstreichung wie im TT5-Stand. Dort kam sie vom Standard-Link-
   Styling und wurde vom Verlauf mit eingefärbt. Astra unterstreicht
   den Site-Titel nicht von sich aus – hier bewusst nachgezogen.
   Wenn der Schriftzug ohne Unterstrich gewünscht ist: diesen Block
   ersatzlos löschen. */
.site-title a,
.fbn-gradient-text {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
}

/* Hover: Verlauf leicht anheben statt Farbwechsel (Farbwechsel ist bei
   background-clip nicht sichtbar). */
.site-title a:hover,
.site-title a:focus-visible {
  opacity: 0.82;
}

/* Sichtbarer Fokus – bei transparentem Text sonst kaum wahrnehmbar. */
.site-title a:focus-visible,
.fbn-gradient-text a:focus-visible {
  outline: 2px solid var(--fbn-brand-solid);
  outline-offset: 3px;
}

/* ---------- Footer ----------
   TT5-Stand: zentriert, Schriftzug + Claim + zwei Rechtstext-Links. */
.site-footer .fbn-gradient-text {
  display: inline-block;
  font-weight: 800;
  line-height: 1.2;
}

.fbn-footer-claim {
  margin: 0.25em 0 0;
}

/* ---------- Barrierefreiheit ----------
   Verlaufstext hat je nach Hintergrund schwankenden Kontrast. Bei
   erhöhtem Kontrastbedarf auf die Einzelfarbe zurückfallen. */
@media (prefers-contrast: more) {
  .site-title a,
  .fbn-gradient-text {
    background-image: none;
    color: var(--fbn-brand-solid);
    -webkit-text-fill-color: var(--fbn-brand-solid);
  }
}

/* Druck: Verlaufstext druckt sonst als nichts. */
@media print {
  .site-title a,
  .fbn-gradient-text {
    background-image: none;
    color: #000;
    -webkit-text-fill-color: #000;
  }
}