/*
Theme Name:   OceanWP Child – Heinrich-Köhler-Schule
Theme URI:    https://www.heinrich-koehler-schule.de/
Description:  Child-Theme von OceanWP mit den CSS-Anpassungen für die Heinrich-Köhler-Schule.
Author:       saasweb
Author URI:   https://saasweb.net/
Template:     oceanwp
Version:      1.0.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  oceanwp-child
*/

/* =========================================================================
   1. Hilfsklassen
   ========================================================================= */

/* Elemente im mittleren Viewport-Bereich ausblenden */
@media screen and (min-width: 849px) and (max-width: 1200px) {
	.hide-a-bit {
		display: none;
	}
}

/* =========================================================================
   2. Header
   ========================================================================= */

/* Leere Top Bar: OceanWP gibt das Markup weiterhin aus und reserviert über
   "#top-bar { padding: 8px 0 }" (mobil 20px) Platz über dem Header. Das
   Padding hängt am Container, nicht am Inhalt – es bleibt also auch dann
   stehen, wenn OceanWP die Leiste selbst als "has-no-content" markiert.
   Greift nur im leeren Zustand: Sobald die Top Bar Inhalt bekommt, gelten
   wieder die Abstände des Parent-Themes. */
#top-bar.has-no-content {
	padding: 0;
}

#top-bar-wrap:has(#top-bar.has-no-content) {
	border-bottom: 0;
}

/* Header-Container auf maximal 1200px begrenzen */
@media screen and (min-width: 1200px) {
	header#site-header .elementor-container.elementor-column-gap-default {
		max-width: 1200px;
	}
}

/* Hauptnavigation: leichter Schatten auf den Menüpunkten */
header nav.elementor-nav-menu--main a {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

/* Spalten im Header auf volle Höhe strecken */
header#site-header .elementor-container.elementor-column-gap-default {
	align-items: stretch;
}

/* Menü-Widget über die volle Höhe der Spalte ziehen */
.elementor-element-4894384d .elementor-widget-nav-menu .elementor-widget-container,
.elementor-element-4894384d nav.elementor-nav-menu--main {
	height: 100%;
}

header#site-header .elementor-container .elementor-column.elementor-element {
	/* height: 100%; */
	height: 57px;
}

header#site-header .elementor-widget-wrap.elementor-element-populated {
	height: 100%;
	padding: 0;
}

header#site-header .elementor-widget-wrap.elementor-element-populated .elementor-element.elementor-widget {
	height: 100%;
}

/* Unterstreichung bei aktivem Menüpunkt und Hover.
   Es ist kein border-bottom, sondern Elementors Underline-Pointer: ein 3px
   hohes ::before/::after am unteren Rand des Links. Im Widget ist es weiss
   gesetzt und hebt sich damit kaum vom weissen Body-Hintergrund ab.
   Halbtransparentes Schwarz statt einer festen Farbe, damit die Linie auf
   allen sieben Menüfarben gleich gut sitzt – sie dunkelt den jeweiligen
   Hintergrund ab, statt eine eigene Farbe dagegenzusetzen. */
header#site-header nav.elementor-nav-menu--main .elementor-item::before,
header#site-header nav.elementor-nav-menu--main .elementor-item::after {
	background-color: rgba(0, 0, 0, .35);
}

/* Farbige Menüpunkte (Reihenfolge = Reihenfolge im Menü).
   Bewusst ">" statt Nachfahren-Selektor: sonst würden auch die <li> in den
   Untermenüs gezählt und bekämen eine eigene Farbe. */
header#site-header nav > ul > li:nth-child(1) {
	background-color: #894a73;
}

header#site-header nav > ul > li:nth-child(2) {
	background-color: #fe9704;
}

header#site-header nav > ul > li:nth-child(3) {
	background-color: #b43a39;
}

header#site-header nav > ul > li:nth-child(4) {
	background-color: #dc5420;
}

header#site-header nav > ul > li:nth-child(5) {
	background-color: #dfcf24;
}

header#site-header nav > ul > li:nth-child(6) {
	background-color: #96c11f;
}

header#site-header nav > ul > li:nth-child(7) {
	background-color: #009959;
}

/* Untermenüs übernehmen den Hintergrund ihres Elternpunktes. Nötig, weil
   das Dropdown absolut positioniert ist und nicht über der Farbfläche des
   Eltern-<li> liegt. "inherit" reicht bis in verschachtelte Ebenen durch. */
header#site-header nav > ul > li ul,
header#site-header nav > ul > li ul li {
	background-color: inherit;
}

/* Schriftfarbe der Menüpunkte.
   Elementor setzt das Weiss auf dem <a> selbst (.elementor-item). Von dort
   erbt nichts weiter – die <li> des Untermenüs bekämen die Textfarbe des
   Body (Anthrazit). Die Farbe wird deshalb hier am <li> der obersten Ebene
   verankert; von dort erbt der gesamte Untermenü-Baum.
   Wird die Menüfarbe im Elementor-Widget geändert, ist dieser Wert
   mitzuziehen. */
header#site-header nav > ul > li {
	color: #fff;
}

/* Links im Untermenü auf die geerbte Farbe ziehen – ohne diese Regel
   gewinnt Elementors ".elementor-nav-menu--dropdown a". Hover und Fokus
   bleiben ausgenommen, damit die Zustandsfarben aus dem Widget greifen. */
header#site-header nav > ul > li ul a:not(:hover):not(:focus) {
	color: inherit;
}

/* =========================================================================
   3. Startseite
   ========================================================================= */

/* Überschrift mit halbtransparentem grünem Balken hinterlegen */
#home .elementor-widget-container h1.elementor-heading-title {
	background-color: rgba(139, 195, 74, 0.85) !important;
	padding: 4px 16px !important;
	display: inline !important;
}

/* =========================================================================
   4. Footer
   ========================================================================= */

footer p,
footer ul.elementor-icon-list-items li {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}