/*
 * gfp-nav.css
 * Menüpunkt „Programm" als Button im Lay-Menü.
 *
 * Die OPTIK kommt seit 22.9.2026 nicht mehr aus dieser Datei, sondern 1:1 aus
 * Lay Options → Buttons → Button 2 (.laybutton2), aus zwei Quellen:
 *   - Farbe, Schrift, Radius, Padding, Hover/Press: Lays Methode
 *     CSS_Output::get_laybutton_css_for_selectors('laybutton2', …), die
 *     site-integration.php als Inline-CSS an diesen Handle hängt;
 *   - das Pfeil-Icon: Lays site-weite Regel .laybutton2::after — dafür trägt der
 *     Menü-Link die Klasse laybutton2 (ebenfalls site-integration.php).
 * Geändert wird das alles in Lay, nicht hier. Vorher standen hier hartcodierte
 * lime Werte; die gibt es nur noch als Notnagel unten
 * (body.gfp-ohne-laybutton), falls Lays Methode fehlt.
 *
 * Hier bleibt nur, was Lays Button-CSS NICHT abdeckt: die Einpassung in die
 * Menüleiste. Zielt auf den Menüpunkt mit der Klasse .gfp-programm-cta
 * (site-weit, Desktop + Mobil).
 */

/* Desktop: Lay zentriert Menüpunkte standardmäßig per align-items:stretch, wodurch
   unser höherer Button-Text tiefer sitzt als der Text der Nachbarn. Lays eigener
   "Button-Style"-Menümodus löst genau das mit align-items:baseline auf der <ul> —
   das übernehmen wir hier, damit alle Menütexte auf derselben Grundlinie liegen,
   unabhängig vom zusätzlichen Innenabstand unseres Buttons. */
.laynav.desktop-nav > ul {
    align-items: baseline;
}

/* Feinjustierung: bei Versalien-Schriften ohne Unterlängen reicht reine
   Baseline-Ausrichtung optisch nicht ganz — kleiner manueller Nachschliff nur
   für die normalen Textlinks (nicht für unseren Button). */
.laynav.desktop-nav > ul > li.menu-item:not(.gfp-programm-cta) {
    position: relative;
    top: 4px;
}

/* Mobil bleibt jeder Menüpunkt eine eigene Zeile — dort reicht einfaches Zentrieren. */
.laynav.mobile-nav .gfp-programm-cta {
    display: flex;
    align-items: center;
}

/* Padding/Rahmen aus laybutton2 wirken nur auf einem Block. inline-FLEX statt
   inline-block, weil Lay das Pfeil-Icon als ::after anhängt und seine Buttons
   dafür selbst auf inline-flex + zentriert schaltet (build_laybutton_icon_css).
   Hier steht es unbedingt — ohne Icon verhält sich inline-flex wie inline-block,
   mit Icon säßen Text und Pfeil sonst auf der Grundlinie statt mittig. */
.laynav .gfp-programm-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* Lays .laybutton2 bringt auch die Button-Ränder mit (Lay Options → Buttons →
       Margin). In der Menüleiste bestimmt Lays Menü die Abstände — Lays eigener
       Menü-Button-Modus setzt aus demselben Grund margin:0. */
    margin: 0;
}

/* Lay unterstreicht Menülinks über das <span> IM Link (Menü-Optionen
   „Underline" bzw. der aktive Menüpunkt). laybutton2 setzt sein
   text-decoration:none nur auf dem <a> — beim Button soll gar nichts
   unterstrichen sein, auch nicht auf der eigenen Seite. */
.laynav .gfp-programm-cta > a span {
    text-decoration: none !important;
}

/* Etwas Luft zu den übrigen Menüpunkten */
.laynav.desktop-nav .gfp-programm-cta {
    margin-left: .4em;
}

/* ─── Notnagel ohne Lay ────────────────────────────────────────────────────
 * Die Body-Klasse setzt site-integration.php nur, wenn Lays
 * get_laybutton_css_for_selectors() fehlt (anderes Theme, ältere Lay-Version).
 * Dann bliebe der Menüpunkt ein nackter Textlink; diese Regeln bilden den
 * früheren lime Button nach. Im Normalfall greift hier nichts.
 */
body.gfp-ohne-laybutton .laynav .gfp-programm-cta > a {
    background: #CAD55A !important;
    color: #111111 !important;
    font-family: 'League Gothic', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: .10em;
    padding: 7px 18px !important;
    line-height: 1.15 !important;
    border-radius: 5px;
    transition: background .2s, transform .16s;
}

body.gfp-ohne-laybutton .laynav .gfp-programm-cta > a:hover,
body.gfp-ohne-laybutton .laynav .gfp-programm-cta > a:focus-visible {
    background: #d8e455 !important;
    color: #111111 !important;
    transform: scale(1.03);
}

body.gfp-ohne-laybutton .laynav .gfp-programm-cta > a:active {
    transform: scale(.97);
}

/* ─── Utility: Mouseover-Zoom ──────────────────────────────────────────────
 * Klasse .gfp-hover-zoom auf ein beliebiges Element setzen, um denselben
 * Vergrößerungseffekt wie bei Lays Buttons zu bekommen (site-weit verfügbar,
 * nicht auf Kursseiten beschränkt). Werte entsprechen Lays eigenen Buttons
 * (hoverScale 1.03 / pressScale .97).
 */
.gfp-hover-zoom {
    display: inline-block;
    transition: transform .16s;
}

.gfp-hover-zoom:hover {
    transform: scale(1.03);
}

.gfp-hover-zoom:active {
    transform: scale(.97);
}