/*
Theme Name:   Divi Child – TSC Spandau
Theme URI:    https://tsc-spandau.de/
Description:  Child-Theme für Divi. Hier werden alle Design-Anpassungen als Code gepflegt – updatesicher gegenüber Divi-Updates.
Author:       TSC Spandau
Template:     Divi
Version:      1.0.1
Text Domain:  divi-child-tsc
*/

/* =====================================================================
 * 1) Design-Variablen (Vereins-CI)
 * ================================================================== */
:root {
	--tsc-brand: #c8102e;        /* Vereinsrot (TSC-Wappen) */
	--tsc-brand-dark: #97071f;   /* dunkleres Rot für Hover */
	--tsc-ink: #1a1a1a;          /* Schwarz aus dem Wappen */
	--tsc-accent: #c8102e;       /* Akzent = Rot */
	--tsc-text: #23272e;
	--tsc-bg-soft: #f6f7f9;
}

/* =====================================================================
 * 2) Typografie – etwas modernere, ruhigere Grundeinstellung
 *    (Divi setzt vieles inline – daher gezielt und ggf. mit höherer
 *     Spezifität überschreiben.)
 * ================================================================== */
body {
	color: var(--tsc-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	letter-spacing: -0.01em;
}

/* =====================================================================
 * 3) Buttons – einheitliche, moderne Optik
 * ================================================================== */
.et_pb_button,
a.et_pb_button {
	border-radius: 6px !important;
	font-weight: 600 !important;
	transition: transform .12s ease, box-shadow .12s ease !important;
}

.et_pb_button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 63, 143, 0.18);
}

/* =====================================================================
 * 4) Links
 * ================================================================== */
a {
	color: var(--tsc-brand);
}
a:hover {
	color: var(--tsc-brand-dark);
}

/* =====================================================================
 * 5) Feinschliff für die TSC-Tabellen (aus dem Plugin) im Divi-Kontext
 *    Farbe zentral hier steuern, überschreibt die Plugin-Defaults.
 * ================================================================== */
.tsc-table thead th {
	background: var(--tsc-brand);
}

/* =====================================================================
 * 6) TYPOGRAFIE – sportliche Schrift (Barlow Condensed / Barlow)
 *    Divi setzt Schriften teils inline -> gezielt mit !important.
 * ================================================================== */
html body,
body.et-db #et-boc,
.et_pb_text,
.et_pb_post_content,
p, li, td, input, textarea, select {
	font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html body {
	color: var(--tsc-text);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
#main-header .et_pb_menu__logo-wrap ~ *,
.et_pb_slide_title {
	font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif !important;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.02;
	font-weight: 800;
	text-wrap: balance;
	color: var(--tsc-ink);
}

/* Fließtext etwas kontrastreicher als Divi-Standardgrau */
.et_pb_text, .et_pb_post_content, .et_pb_blurb_description {
	color: var(--tsc-text);
}

/* Kleine Label/Overline-Optik (optional per Klasse einsetzbar) */
.tsc-eyebrow {
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 600;
	color: var(--tsc-brand);
}

/* =====================================================================
 * 7) NAVIGATION – Hauptmenü in Trikot-Optik, Hover-Unterstrich
 * ================================================================== */
/* #main-header-Präfix + !important, damit die Divi-Menüstile sicher überschrieben werden */
#main-header #top-menu li a,
#main-header #et-top-navigation nav > ul > li > a,
.et_pb_menu .et-menu li a {
	font-family: "Barlow Condensed", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: var(--tsc-ink) !important;
	opacity: 1 !important;
}
/* Aktiver Menüpunkt / Hover in Vereinsrot */
#main-header #top-menu li a:hover,
#main-header #top-menu li.current-menu-item > a,
#main-header #top-menu li.current_page_item > a {
	color: var(--tsc-brand) !important;
}

/* "Kinderschutz" war per Divi-Toolbox als roter Button (weißer Span) gestylt –
 * wir machen daraus einen normalen Menü-Link wie im Mockup.
 * (Zum erneuten Hervorheben diese Regel entfernen.) */
#main-header #top-menu li.cta-link > a > span {
	background: transparent !important;
	background-color: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-transform: uppercase !important;
	font-weight: 600 !important;
}

/* WICHTIG: KEIN ::after/::before für den Unterstrich verwenden – Divi nutzt
 * ::after für die Dropdown-Pfeile. Stattdessen text-decoration (sitzt immer
 * korrekt unter dem Text, nur bei Hover/aktiv). */
#main-header #top-menu > li > a:hover,
#main-header #top-menu > li.current-menu-item > a,
#main-header #top-menu > li.current_page_item > a,
#main-header #top-menu > li.current-menu-ancestor > a {
	text-decoration: underline !important;
	text-decoration-color: var(--tsc-brand) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 7px !important;
	text-decoration-skip-ink: none !important;
}

/* Falls Divi Toolbox eine eigene permanente Unterstrich-Linie via ::before
 * zeichnet: abschalten (betrifft NICHT die Dropdown-Pfeile auf ::after). */
#main-header #top-menu > li > a::before { display: none !important; }

/* ---- Probetraining: roter CTA-Button rechts ---- */
#main-header #top-menu > li.tsc-cta > a,
#main-header #top-menu > li.tsc-cta > a:hover {
	background-color: var(--tsc-brand) !important;
	color: #fff !important;
	padding: 10px 18px !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	display: inline-block;
	line-height: 1;
	position: relative;
	top: -9px;                       /* vertikal zu den anderen Links zentrieren */
	transition: background-color .2s ease, transform .12s ease;
}
#main-header #top-menu > li.tsc-cta > a:hover {
	background-color: var(--tsc-brand-dark) !important;
	transform: translateY(-1px);
}

/* Aktiver/Hover-Menüpunkt in Vereinsrot */
#top-menu li a:hover,
#top-menu li.current-menu-item > a { color: var(--tsc-brand) !important; }

/* Sticky-Header dezent absetzen */
#main-header { box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.05); }

/* ---------------------------------------------------------------------
 * NAV-FIX: Das Plugin "Divi Toolbox" blendet das horizontale Menü bis
 * 1300px aus und zeigt bis dahin den Hamburger. Viele Laptops sind aber
 * 1280–1366px breit -> Nutzer sehen unnötig den Hamburger.
 * Wir holen das Desktop-Menü schon ab 981px zurück.
 * (Sauberere Alternative: in den Divi-Toolbox-Einstellungen den
 *  "Mobile menu breakpoint" von 1300 auf 980 stellen.)
 * ------------------------------------------------------------------ */
@media only screen and (min-width: 981px) and (max-width: 1300px) {
	/* Höhere Spezifität (2 IDs) als die Toolbox-Regel "#top-menu" (1 ID), damit sie gewinnt. */
	#et-top-navigation #top-menu { display: block !important; }
	#main-header #et_mobile_nav_menu,
	.dtb-menu #et_mobile_nav_menu,
	.dtb_mobile #main-header #et_mobile_nav_menu { display: none !important; }
}

/* =====================================================================
 * 8) BUTTONS – einheitlich, modern, rot
 * ================================================================== */
.et_pb_button,
a.et_pb_button,
.et_pb_promo_button,
.woocommerce a.button {
	font-family: "Barlow Condensed", sans-serif !important;
	text-transform: uppercase !important;
	letter-spacing: .05em !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	border-width: 2px !important;
	padding: .7em 1.3em !important;
	transition: transform .12s ease, background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

/* Primär-Button: gefüllt rot */
.et_pb_button.tsc-btn-primary,
a.et_pb_button.tsc-btn-primary {
	background-color: var(--tsc-brand) !important;
	color: #fff !important;
	border-color: var(--tsc-brand) !important;
}
.et_pb_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(200,16,46,.22);
}
.et_pb_button.tsc-btn-primary:hover {
	background-color: var(--tsc-brand-dark) !important;
	border-color: var(--tsc-brand-dark) !important;
}

/* =====================================================================
 * 9) LINKS & AKZENTE
 * ================================================================== */
a { color: var(--tsc-brand); }
a:hover { color: var(--tsc-brand-dark); }

/* Divi-Trennlinien / Akzentbalken in Vereinsrot */
.et_pb_divider .et_pb_divider_internal,
.et-l .et_pb_divider:before { border-color: var(--tsc-brand) !important; }

/* =====================================================================
 * 10) KARTEN (Blurb-/Text-Module) – dezenter Hover, moderne Kanten
 * ================================================================== */
.et_pb_blurb, .et_pb_column .et_pb_text.tsc-card {
	transition: transform .15s ease, box-shadow .2s ease;
}
.et_pb_blurb:hover { transform: translateY(-3px); }

/* =====================================================================
 * 11) KOPF-INFOLEISTE (#top-header) – dunkler, moderner Ton
 * ================================================================== */
/* Divi setzt die Leiste per Inline-CSS mit sehr hoher Spezifität + !important
 * (normal UND im Sticky-Zustand). Wir matchen dieselben Selektoren mit
 * zusätzlichem body-Präfix, damit unsere dunkle Leiste gewinnt. */
body.et_secondary_nav_enabled #page-container #top-header,
body.et_fixed_nav #page-container .et-fixed-header#top-header {
	background-color: var(--tsc-ink) !important;
}
body #page-container #top-header,
body #page-container #top-header a { color: #cfc9c9 !important; }
body #page-container #top-header a:hover { color: #fff !important; }

/* =====================================================================
 * 12) Feinschliff Plugin-Tabellen (aus tsc-vereinsdaten) im Divi-Kontext
 * ================================================================== */
.tsc-table thead th {
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: .05em;
}


/* Untermenüs (Dropdown): Breite an den längsten Eintrag anpassen, damit lange
   Punkte wie „Interventionsleitfaden" nicht auf zwei Zeilen umbrechen. */
#main-header #top-menu li ul.sub-menu {
	width: auto !important;
	min-width: 200px;
}
#main-header #top-menu li ul.sub-menu li,
#main-header #top-menu li ul.sub-menu li a {
	white-space: nowrap;
}

/* Team-Kacheln ("Alle Teams" / Team-Übersicht) – modernes Karten-Design
   statt dickem roten Rahmen. Greift auf allen Seiten mit diesen Kacheln. */
#main-content .et_pb_text.et_clickable.et_pb_with_border {
	border: 1px solid var(--tsc-border, #e6dfdb) !important;
	border-radius: 12px !important;
	background: #fff;
	padding: .85rem .6rem !important;
	box-shadow: 0 1px 2px rgba(23,24,26,.05);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
#main-content .et_pb_text.et_clickable.et_pb_with_border:hover {
	transform: translateY(-3px);
	border-color: var(--tsc-brand, #c8102e) !important;
	box-shadow: 0 8px 22px rgba(200,16,46,.14);
}
#main-content .et_pb_text.et_clickable.et_pb_with_border h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: #23201e;
	transition: color .15s ease;
}
#main-content .et_pb_text.et_clickable.et_pb_with_border:hover h3 {
	color: var(--tsc-brand, #c8102e);
}