/*
Theme Name:   Elara TravelLifeDrive Child
Theme URI:    https://travellifedrive.de
Description:  Child-Theme von Elara, angepasst an das Design von TravelLifeDrive (ehem. Joomla-Magazin für Auto, Reise & Zukunftsmobilität). Enthält eigene Farbpalette, Typografie (Poppins statt Playfair) und Block-Patterns für die Startseite.
Author:       Koch-Communications / TravelLifeDrive
Template:     elara
Version:      3.3.3
Text Domain:  elara-tld-child
*/

/* ==========================================================================
   1. Design-Tokens — aus dem Original-Joomla-Auftritt abgeleitet
   ========================================================================== */
:root {
	/* Farben */
	--tld-color-bg:            #e4e4e4; /* Seitenhintergrund */
	--tld-color-surface:       #ffffff; /* Content-Karten */
	--tld-color-primary:       #ef7d31; /* Orange – Logo, Headlines, Links, Kategorie-Tags */
	--tld-color-primary-dark:  #d8691f; /* Hover/Active */
	--tld-color-logo-grey:     #8a8a8a; /* "Life"-Teil im Logo */
	--tld-color-text:          #333333; /* Fließtext */
	--tld-color-text-muted:    #5a5a5a; /* Nebentext */
	--tld-color-nav-bg:        #4d4d4d; /* Navigationsleiste (auch aktiver Menüpunkt) */
	--tld-color-nav-active:    #1a1a1a; /* Dunkler Ton für Cookie-/Consent-Banner */
	--tld-color-header-bg:     #f2f2f2; /* Elaras echte Header-Widget-Fläche (.widget-area-header), jetzt auch für den Footer */
	--tld-color-border:        #dddddd; /* Trennlinien */
	--tld-color-caption-bg:    rgba(0, 0, 0, 0.75); /* Bildunterschrift-Overlay */

	/* Typografie */
	--tld-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--tld-font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* Radien / Schatten */
	--tld-radius: 4px;
	--tld-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   2. Basis-Overrides (überschreibt Elara-Defaults, inkl. Playfair-Headlines)
   ========================================================================== */
body {
	background-color: var(--tld-color-bg);
	color: var(--tld-color-text);
	font-family: var(--tld-font-body);
}

h1, h2, h3, h4, h5, h6,
.header-logo-text, .entry-title, .widget-title {
	font-family: var(--tld-font-heading) !important;
	font-weight: 700;
	color: var(--tld-color-primary) !important;
}

a {
	color: var(--tld-color-primary);
}

a:hover,
a:focus {
	color: var(--tld-color-primary-dark);
}

/* Elara setzt Links innerhalb des Beitrags-/Seiteninhalts auf Schwarz mit
   Unterstreichung (.single .entry-content a / .page .entry-content a,
   gleiche Spezifität wie hier, aber später geladen) — stattdessen jetzt
   überall das Child-Theme-Orange. Betrifft echte Einzelseiten/-beiträge
   UND den [tld_post]-Shortcode-Embed. Header, Footer und Menü nutzen
   eigene, davon unabhängige Selektoren (.main-navbar, .site-footer usw.)
   und sind hiervon nicht betroffen. */
.single .entry-content a,
.page .entry-content a,
.tld-post-embed .entry-content a {
	color: var(--tld-color-primary);
}

.single .entry-content a:hover,
.single .entry-content a:focus,
.single .entry-content a:active,
.page .entry-content a:hover,
.page .entry-content a:focus,
.page .entry-content a:active,
.tld-post-embed .entry-content a:hover,
.tld-post-embed .entry-content a:focus,
.tld-post-embed .entry-content a:active {
	color: var(--tld-color-primary-dark);
}

/* Elaras großer, fett hervorgehobener erster Buchstabe am Anfang des ersten
   Absatzes (64px, linksbündig ausgerichtet) soll nirgends mehr erscheinen —
   weder auf echten Einzelseiten/-beiträgen noch im [tld_post]-Shortcode-
   Embed. Gleiche/höhere Spezifität als Elaras eigene Regeln nötig, sonst
   gewinnen deren Werte trotz späterer Ladereihenfolge. */
.entry-singular .entry-content p:first-child:first-letter,
.entry-content .shop_attributes td p:first-child:first-letter {
	font-size: inherit;
	line-height: inherit;
	float: none;
	padding-right: 0;
	padding-left: 0;
}

/* ==========================================================================
   2b. Titel ausblenden (optional, pro Seite/Beitrag)
   Elara gibt den Titel auf Seiten (page.php) und Beiträgen (single.php)
   fest im Markup aus: <article ... <?php post_class('entry-singular'); ?>>
   > .entry-header > h1.entry-title. Über das Gutenberg-Feld "Zusätzliche
   CSS-Klasse(n)" (Dokument-Einstellungen → Erweitert) landet eine hier
   angegebene Klasse genau auf diesem <article>-Element (post_class()).
   Also einfach "tld-hide-title" dort eintragen, um den Titel nur auf
   dieser einen Seite/diesem Beitrag auszublenden — ohne Code.
   ========================================================================== */
.tld-hide-title .entry-header,
.tld-hide-title .entry-title {
	display: none;
}

/* ==========================================================================
   3. Logo / Site-Branding
   Echte Elara-Struktur (parts/site-identity.php):
   .logo > h1.header-logo-text > a  /  .tagline > p
   ========================================================================== */
.logo {
	padding: 0;
	margin-bottom: 0.25rem;
}

/* Höhere Spezifität als Elaras eigene Regeln .logo .header-logo-text
   (line-height:60px, margin-top:40px, margin-bottom:15px) und
   .elara-background-color-custom .logo .header-logo-text (padding-top:40px)
   — sonst gewinnen deren Werte trotz späterer Ladereihenfolge. */
.logo .header-logo-text,
.logo .custom-logo-link,
.elara-background-color-custom .logo .header-logo-text {
	margin-top: 0;
	margin-bottom: 0.25rem;
	padding-top: 0;
	line-height: 1.1;
}

.logo .header-logo-text,
.logo .header-logo-text a {
	font-weight: 700;
	font-size: 2.4rem;
	letter-spacing: -0.01em;
	color: var(--tld-color-primary);
}

.tagline,
.tagline p {
	color: var(--tld-color-text);
	font-weight: 400;
	margin: 0;
}

/* Kein zusätzlicher Leerraum zwischen Logo-Bereich und der Navigation
   darunter — reduziert den vorher zu großen Abstand zwischen Logo und Menü. */
.header > .default-background-color {
	margin-bottom: 0;
	padding-bottom: 0;
}

.wrapper-nav {
	margin-top: 0;
}

/* ==========================================================================
   4. Navigation
   Echte Elara-Struktur (parts/navigation-header.php):
   nav.main-navbar#main-navbar > ul.nav.navbar-nav.menu > li > a
   Bootstrap-Navwalker markiert den aktiven Punkt zusätzlich mit "active",
   behält "current-menu-item" aber als Klasse bei.
   ========================================================================== */
.main-navbar {
	background-color: var(--tld-color-nav-bg);
	border: none;
	margin-bottom: 0;
	border-radius: 0;
}

.main-navbar .navbar-nav > li > a {
	color: #ffffff;
	font-size: 1.4rem;
	font-weight: 700;
}

.main-navbar .navbar-nav > li.current-menu-item > a,
.main-navbar .navbar-nav > li > a:hover,
.main-navbar .navbar-nav > li > a:focus {
	color: var(--tld-color-primary);
	background-color: transparent;
}

/* Ausgewählter Menüpunkt: heller Grauton als Hintergrund, dazu die orange
   Textfarbe (siehe Regel oben) zur Kennzeichnung. */
.main-navbar .navbar-nav > li.current-menu-item {
	background-color: #e4e4e4;
}

/* ==========================================================================
   5. Content-Karten / Teaser (siehe template-parts/teaser-card.php)
   ========================================================================== */
.tld-card {
	background-color: var(--tld-color-surface);
	border-radius: var(--tld-radius);
	box-shadow: var(--tld-shadow-card);
	overflow: hidden;
}

.tld-card__title {
	color: var(--tld-color-primary);
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 0.75rem;
	padding: 1rem 1rem 0;
}

.tld-card__media {
	position: relative;
	line-height: 0;
}

.tld-card__media img {
	width: 100%;
	height: auto;
	display: block;
}

.tld-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--tld-color-caption-bg);
	color: #ffffff;
	font-size: 0.8rem;
	padding: 0.5rem 0.75rem;
}

.tld-card__excerpt {
	padding: 0.75rem 1rem 1rem;
	color: var(--tld-color-text);
	font-size: 0.95rem;
	line-height: 1.5;
}

.tld-card__cat {
	color: var(--tld-color-primary);
	font-weight: 700;
}

/* ==========================================================================
   6. Themen-/Sidebar-Box (siehe template-parts/theme-box.php)
   ========================================================================== */
.tld-themenbox {
	background-color: var(--tld-color-surface);
	border-radius: var(--tld-radius);
	box-shadow: var(--tld-shadow-card);
	padding: 1.25rem 1.5rem;
}

.tld-themenbox h3 {
	color: var(--tld-color-primary);
	margin-top: 0;
}

.tld-themenbox__item + .tld-themenbox__item {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--tld-color-border);
}

.tld-themenbox__item-title {
	font-weight: 700;
	display: block;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   7. Ticker "Demnächst" im Footer
   ========================================================================== */
.tld-ticker {
	background-color: var(--tld-color-surface);
	border-top: 1px solid var(--tld-color-border);
	border-bottom: 1px solid var(--tld-color-border);
	overflow: hidden;
	white-space: nowrap;
	padding: 0.6rem 0;
}

.tld-ticker__track {
	display: inline-block;
	padding-left: 100%;
	animation: tld-ticker-scroll 45s linear infinite;
}

.tld-ticker__track strong {
	color: var(--tld-color-primary);
}

@keyframes tld-ticker-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.tld-ticker__track {
		animation: none;
		padding-left: 0;
	}
}

/* ==========================================================================
   8. Footer
   Echte Elara-Klasse ist ".footer" (footer.php), nicht ".site-footer".
   Hintergrund entspricht der echten Elara-Header-Widget-Fläche
   (.widget-area-header, #f2f2f2). Die innere .default-background-color ist
   bei Elara standardmäßig weiß und muss hier überschrieben werden, sonst
   verdeckt sie die neue Hintergrundfarbe.
   ========================================================================== */
.footer {
	background-color: var(--tld-color-header-bg);
	color: var(--tld-color-text);
	font-size: 0.85rem;
}

.footer .default-background-color {
	background-color: transparent;
}

.footer a {
	color: var(--tld-color-primary);
}

.footer a:hover,
.footer a:focus {
	color: var(--tld-color-primary-dark);
}

/* ==========================================================================
   9. Beitrags-Einbettung ([tld_post]-Shortcode)
   ========================================================================== */
.tld-post-embed {
	margin-bottom: 2rem;
}

.tld-post-embed .entry-header {
	margin-bottom: 1rem;
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
	clear: both;
}

/* Absicherung gegen Float-Kollaps: falls der Titel (h2.entry-title) durch
   umgebendes CSS (z. B. individuelles Block-CSS an Spalten/Container)
   gefloatet wird, würde .entry-header sonst auf Höhe 0 zusammenfallen,
   obwohl der Titel selbst sichtbar irgendwo im Layout auftaucht. */
.tld-post-embed .entry-header::after {
	content: "";
	display: table;
	clear: both;
}

.tld-post-embed .entry-title {
	float: none !important;
	position: static !important;
}

.tld-post-embed__thumb {
	margin-bottom: 1rem;
}

/* Elaras großzügiger Absatzabstand (.entry-singular .entry-content p,
   33px oben/unten) wirkt im Shortcode-Embed zu groß — hier auf 12px
   reduziert. Betrifft nur den Embed, echte Einzelseiten/-beiträge behalten
   weiterhin 33px. */
.tld-post-embed .entry-content p {
	margin-top: 12px;
	margin-bottom: 12px;
}

.tld-post-embed__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--tld-radius);
}

.tld-post-embed__error {
	color: var(--tld-color-text-muted);
	font-style: italic;
}

.tld-post-embed--more .entry-content .more-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 700;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 782px) {
	.logo .header-logo-text {
		font-size: 1.7rem;
	}
}

/* Utility-Klasse für Spalten-Blöcke: Reihenfolge unterhalb 991px umkehren
   (untereinander gestapelt, aber in umgekehrter Reihenfolge). Einfach im
   Editor bei "Zusätzliche CSS-Klasse(n)" des jeweiligen Spalten-Blocks
   eintragen: tld-reverse-mobile. !important nötig, da Gutenberg selbst ab
   einer bestimmten Breite bereits flex-direction: column setzt. */
@media (max-width: 991px) {
	.wp-block-columns.tld-reverse-mobile {
		flex-direction: column-reverse !important;
	}
}

/* ==========================================================================
   11. Titel auf einzelnen Rubrikseiten ausgeblendet
   Dieser Abschnitt bitte bei künftigen Änderungen unverändert erhalten
   bzw. bei neuen Seiten entsprechend ergänzen.
   ========================================================================== */
/* Auto - Titel weglassen */
.page-id-29256 .entry-title { display: none; }
/* Auto im Alltag - Titel weglassen */
.page-id-30762 .entry-title { display: none; }
/* Zukunftsmobilität - Titel weglassen */
.page-id-30769 .entry-title { display: none; }
/* Hotels dieser Welt - Titel weglassen */
.page-id-30775 .entry-title { display: none; }
/* Reise - Titel weglassen */
.page-id-30781 .entry-title { display: none; }
/* Kontaktformular - Titel weglassen */
.page-id-27892 .entry-title { display: none; }