/*----------------------------------------------
*
* [Theme JID Stylesheet]
*
* Theme    : Leverage – JID Aromastar
* Brand    : Navy gradient (#212443 → #2a2f64)
*
* HINWEIS ZUR ZENTRALEN FARBSTEUERUNG
* -----------------------------------
* Die fünf Markenfarben ganz oben in :root
* (--primary-color, --secondary-color, --logo-color,
*  --btn-color, --btn-color-2) werden zur Laufzeit vom
* "Theme-Farben"-Modul überschrieben (Ausgabe im Head
* über das Fragment jid/theme_colors).
*
*  - Footer + Navy-Sections sind per var() an die dunkle
*    Grundfarbe (--secondary-color) gekoppelt.
*  - Die Buttons hängen an eigenen Variablen (--btn-color /
*    --btn-color-2), damit die Button-Farbe unabhängig von
*    der Grundfarbe einstellbar ist.
*  - Das Logo (inline SVG) folgt --logo-color via currentColor.
*
----------------------------------------------*/

/*----------------------------------------------

[CONTENTS]

1. Brand Colors (Root)
2. Section Background Variants
3. Button Variants (eigene Button-Farben)
4. Footer Buttons (Solid, transparent)

----------------------------------------------*/

/*----------------------------------------------
1. Brand Colors (Root)
----------------------------------------------*/

/* #region Root */

:root {
    /* === Zentrale Markenfarben (per "Theme-Farben"-Modul überschreibbar) === */
    --primary-color:   #2a2f64;   /* Grundfarbe hell  – h1/Hero, Akzentlinien        */
    --secondary-color: #212443;   /* Grundfarbe dunkel – Footer, Navy-Sections        */
    --logo-color:      #E62646;   /* Logo (inline SVG, currentColor)                  */
    --btn-color:       #212443;   /* Button-Grundfarbe                                */
    --btn-color-2:     #1a1c33;   /* Button-Verlauf, dunklerer Stop (Hover)           */

    /* Header / Hero */
    --header-bg-color:    #f5f5f5;
    --nav-item-color:     #2f323a;
    --top-nav-item-color: #2f323a;
    --hero-bg-color:      #f5f5f5;
    --nav-brand-height:   110px;

    /* Footer folgt der dunklen Grundfarbe.
       Dunkle/farbige Section folgt der gewählten GRUNDFARBE HELL,
       damit der Hintergrund dem Theme folgt (nicht statisch navy). */
    --footer-bg-color: var(--secondary-color);
    --section-bg-navy: var(--primary-color);

    /* Section Background Levels (neutrale Graustufen, themenunabhängig) */
    --section-bg-light:  #f5f5f5;
    --section-bg-medium: #eeeeee;
    --section-bg-grey:   #e5e5e5;
}

/* #endregion Root */

/*----------------------------------------------
2. Section Background Variants
----------------------------------------------*/

/* #region Section BG */

/* WICHTIG: section-qualifiziert (section.bg-…), damit diese Regeln die
   theme-eigenen Hintergründe der main.css (section.section-1/2/7 { … })
   überschreiben. Gleiche Spezifität (0,0,1,1), aber theme-jid.css wird
   NACH main.css geladen → gewinnt. background-image:none neutralisiert
   einen evtl. gesetzten Section-Verlauf/-Image. */
section.bg-section-light  { background-color: var(--section-bg-light);  background-image: none; }
section.bg-section-medium { background-color: var(--section-bg-medium); background-image: none; }
section.bg-section-grey   { background-color: var(--section-bg-grey);   background-image: none; }
section.bg-section-navy   { background-color: var(--section-bg-navy);   background-image: none; }

/* Navy-Section: weiße Schrift */
.bg-section-navy,
.bg-section-navy h1,
.bg-section-navy h2,
.bg-section-navy h3,
.bg-section-navy h4,
.bg-section-navy h5,
.bg-section-navy h6,
.bg-section-navy p {
    color: #fff;
}

/* #endregion Section BG */

/*----------------------------------------------
3. Button Variants (eigene Button-Farben)
----------------------------------------------*/

/* #region Buttons */

/* Grundzustand: flache Button-Farbe = exakt die gewählte Farbe
   (background-image: none neutralisiert evtl. Theme-Verläufe der main.css) */
.primary-button {
    background-color: var(--btn-color);
    background-image: none;
    color: #fff;
}

.primary-button:hover,
.primary-button:focus {
    background-color: var(--btn-color);
    background-image: linear-gradient(45deg, var(--btn-color-2) 15%, var(--btn-color) 65%);
}

.dark-button:hover,
.dark-button:focus,
.dark-button:hover:after,
.dark-button:focus:after {
    background-color: var(--btn-color);
    background-image: linear-gradient(45deg, var(--btn-color-2) 15%, var(--btn-color) 65%);
}

/* #endregion Buttons */

/*----------------------------------------------
4. Footer Buttons (Solid, transparent)
----------------------------------------------*/

/* #region Footer Buttons */

footer .dark-button,
footer .dark-button:after {
    background-color: transparent;
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

footer .dark-button:before {
    display: none;
}

footer .dark-button:hover,
footer .dark-button:hover:after {
    background-color: rgba(255, 255, 255, 0.15);
    background-image: none;
    color: #fff;
    border-color: #fff;
}

footer .nav-link:hover,
footer a:hover {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    background-image: none;
    opacity: 1;
}

/* #endregion Footer Buttons */