/*
 Theme Name:   SICHTBARKEITSBEGLEITER
 Theme URI:    https://sichtbarkeitsbegleiter.de
 Description:  Ein von Lichtsignale gestaltetes Theme für den Sichtbarkeitsbegleiter
 Author:       Lichtsignale
 Author URI:   https://lichtsignale.de
 Template:     generatepress
 Version:      1.0
*/

/* Root-Variablen für Farben */
:root {
    --background-color: #F9FBF9; /* Hintergründe */
    --text-color: #292F36; /* Schriftfarbe */
    --header-nav-color: #36BFB6; /* Header und Navigation */
    --highlight-color: #FF7070; /* Hervorhebungen */
    --cta-color: #FF7070; /* Call-to-Action Farbe */
}

/* Hintergrundfarbe */
body,
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header, .site-info{
	background-color: var(--background-color)
}

/* Schriftfarbe für Standardtext */
body, p, .entry-content {
    color: var(--text-color);
}

/* Schriftfarbe auf farbigen Hintergründen */
.has-text-on-colored-bg {
    color: var(--text-on-colored-bg);
}

/* Header und Navigation */

.main-navigation.has-branding:not(.grid-container) .inside-navigation:not(.grid-container) .navigation-branding{
	margin-left: 20px !important;
}

.site-header, 
.main-navigation {
    background-color: var(--header-nav-color);
}

.main-title a,
.navigation-branding .main-title a,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items{
	text-transform: uppercase !important;
	letter-spacing: 0.1em !important;
	color: #fff;
	font-weight: 600 !important;
}

/* Li-Elemente auf 60px Höhe setzen */
.main-navigation .main-nav ul li {
    height: 60px; /* Höhe des Listenelements */
    display: flex; /* Flexbox zur vertikalen Zentrierung */
    align-items: center; /* Inhalte vertikal zentrieren */
}

/* Links mit normaler Schriftgröße */
.main-navigation .main-nav ul li a {
    height: auto; /* Links nicht auf 60px beschränken */
	line-height: 1;
	padding: 0 0 5px 0;
	margin: 0 20px;
	border-bottom: 3px solid transparent; /* Border-Bottom für Hover reservieren */
    transition: color 0.3s ease, border-color 0.3s ease; /* Weicher Übergang */
}

/* Hover- und Fokuszustand für Links */
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
    color: #fff; /* Schriftfarbe auf Weiß ändern */
    border-bottom: 3px solid #fff; /* Weißer Border beim Hover/Fokus */
}

/* Aktiver Zustand (current menu item) */
.main-navigation .main-nav ul li[class*="current-menu"] > a {
    color: #fff; /* Schriftfarbe auf Weiß für aktiven Link */
    border-bottom: 3px solid #fff; /* Weißer Border für aktiven Link */
}


/* Standardstil für Buttons */
.wp-block-button__link, 
.wp-element-button {
    background-color: #36BFB6; /* Türkis: Hauptfarbe */
    color: #fff; /* Weiße Schrift */
    border: none; /* Keine Rahmenlinie */
    padding: 10px 20px; /* Ausgewogene Innenabstände */
    font-size: 1rem; /* Standard-Schriftgröße */
    text-align: center; /* Text zentrieren */
    text-decoration: none; /* Keine Unterstreichung */
    border-radius: 5px; /* Abgerundete Ecken */
    transition: background-color 0.3s ease, color 0.3s ease; /* Weicher Übergang */
    display: inline-block; /* Block-Eigenschaften für zentrierte Buttons */
    cursor: pointer; /* Zeiger für Klickbarkeit */
}

/* Hover- und Fokuszustand */
.wp-block-button__link:hover, 
.wp-block-button__link:focus, 
.wp-element-button:hover, 
.wp-element-button:focus {
    background-color: #2AA49E; /* Dunkleres Türkis beim Hover/Fokus */
    color: #fff; /* Weiße Schrift bleibt */
}

/* Aktiver Zustand */
.wp-block-button__link:active, 
.wp-element-button:active {
    background-color: #249089; /* Noch dunkleres Türkis beim Klick */
    color: #fff; /* Weiße Schrift bleibt */
}

/* Deaktivierte Buttons */
.wp-block-button__link[disabled], 
.wp-element-button[disabled] {
    background-color: #A8DCD8; /* Helleres Türkis für deaktivierte Buttons */
    color: #f5f5f5; /* Hellgraue Schrift */
    cursor: not-allowed; /* Nicht klickbar */
    opacity: 0.6; /* Reduzierte Sichtbarkeit */
}



/* Einheitliche Schrift für alle Textelemente */
body, button, input, select, textarea, 
.main-title, .main-navigation a, .widget, .site-info {
    font-family: ivystyle-sans, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: clamp(1rem, 1vw + 0.5rem, 1.2rem); /* Dynamisch zwischen 16px und 19.2px */
    line-height: 1.5; /* Gute Lesbarkeit für Fließtext */
    margin: 0;
    padding: 0;
}

/* Setze font-weight 600 als Standard für „bold“ */
h1, h2, h3, h4, h5, h6, strong, b {
    font-weight: 600; /* Nutze den Semi-Bold Schriftschnitt */
}

/* Optional: Sicherstellen, dass keine anderen „bold“ Regeln Vorrang haben */
* {
    font-weight: inherit; /* Vererbt Schriftstärke, außer explizit überschrieben */
}


/* Überschriften */
h1 {
    font-size: clamp(1.5rem, 4vw, 2.4rem); /* Dynamisch zwischen 24px und 38px */
    font-weight: bold;
    line-height: 1.2; /* Enger Zeilenabstand */
}

h2 {
    font-size: clamp(1.25rem, 3.5vw, 2rem); /* Dynamisch zwischen 20px und 32px */
    font-weight: bold;
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.125rem, 3vw, 1.8rem); /* Dynamisch zwischen 18px und 29px */
    font-weight: bold;
    line-height: 1.2;
}

h4 {
    font-size: clamp(1rem, 2.5vw, 1.2rem); /* Dynamisch zwischen 16px und 19.2px (wie Fließtext) */
    font-weight: bold;
    line-height: 1.6; /* Gleicher Zeilenabstand wie Fließtext */
}

/* Responsive Anpassungen für kleinere Bildschirme */
@media (max-width: 480px) {
    html {
        font-size: 14px; /* Etwas kleinere Basisschriftgröße */
    }

    h1 {
        font-size: clamp(1.25rem, 5vw, 2rem); /* Dynamisch zwischen 20px und 32px */
    }

    h2 {
        font-size: clamp(1.125rem, 4vw, 1.75rem); /* Dynamisch zwischen 18px und 28px */
    }

    h3 {
        font-size: clamp(1rem, 3vw, 1.5rem); /* Dynamisch zwischen 16px und 24px */
    }

    h4 {
        font-size: clamp(1rem, 2.5vw, 1.2rem); /* Dynamisch zwischen 16px und 19.2px */
    }
}

/* Responsive Anpassungen für große Bildschirme */
@media (min-width: 1201px) {
    html {
        font-size: 18px; /* Größere Basisschriftgröße für großen Viewport */
    }
}

/* Globale Anpassung des Buchstaben-Abstands */
body, button, input, select, textarea, 
.main-title, .main-navigation a, .widget, .site-info {
    letter-spacing: -0.01em; /* Leicht negativer Abstand für kompaktere Texte */
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em; /* Überschriften minimal enger */
}

/* Für Monospace-Schriftarten oder Code-Blöcke */
code, pre, .wp-block-code {
    letter-spacing: 0; /* Standardabstand für klare Lesbarkeit */
}


/* Fließtexte begrenzen */
/* Begrenzung nur für direkte Kinder von .entry-content */
.entry-content > p, 
.entry-content > blockquote, 
.entry-content > h1, 
.entry-content > h2, 
.entry-content > h3, 
.entry-content > h4, 
.entry-content > ul, 
.entry-content > ol, 
.entry-content > pre, 
.entry-content > code {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}