/**
 * André Template - Custom Styles
 * Erweitert base.css mit template-spezifischen Styles
 */

/* =============================================================================
   Typografie & Farben
   ============================================================================= */

/* Gelasio (lokal, variable 400–700) – metrik-kompatibler Georgia-Ersatz */
@font-face {
    font-family: 'Gelasio';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/gelasio-latin-var.woff2') format('woff2');
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Gelasio', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
    color: #8d3c4b; /* Das Hauptrot */
}

/* Logo-Schriftzug in der Navigation – gleiche Serif wie die Überschriften */
.site-logo-text {
    font-family: 'Gelasio', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
}

h1 {
    font-size: 2.25rem !important;
    margin-bottom: 2rem !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

h2 {
    font-size: 1.75rem !important;
    margin-top: 2.5rem !important;
    margin-bottom: 1rem !important;
}

/* =============================================================================
   Hero Section - André Style (Fullwidth Background)
   ============================================================================= */

/* Die Sektion, die den Hero enthält */
section:has(.hero-section-andre) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 3rem !important;
    position: relative;
    overflow: hidden;
    min-height: 450px; /* Default Mindesthöhe - wird durch Inline-Style (VH) überschrieben */
}

/* Die 4 farbigen Kacheln gehören zum Header: als unterster Block des
   sticky Headers bleiben sie beim Scrollen immer sichtbar. */
header::after {
    content: "";
    display: block;
    height: 50px;
    width: 100%;
    background: linear-gradient(to right,
        #c19ea3 0%, #c19ea3 25%,
        #7f4e58 25%, #7f4e58 50%,
        #8d3c4b 50%, #8d3c4b 75%,
        #7e7272 75%, #7e7272 100%
    );
}

/* Container-Anpassung für Fullwidth */
section:has(.hero-section-andre) .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: inherit;
    display: flex;
    flex-direction: column;
}

.hero-section-andre {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: inherit; /* Übernimmt die Höhe von der Sektion (über den Container) */
    padding: 2rem !important;
    text-align: center;
}

.hero-section-andre h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    border-bottom: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 1000px;
    line-height: 1.2 !important;
    /* Keine Silbentrennung im Hero – Wörter sollen ganz umbrechen statt
       „Psychothera-pie“; overflow-wrap bleibt als Notbremse für Mini-Screens */
    hyphens: none;
}

@media (max-width: 768px) {
    header::after {
        height: 40px;
    }
    
    section:has(.hero-section-andre) {
        min-height: 300px;
    }
    
    .hero-section-andre h1 {
        font-size: 2.25rem !important;
    }
}

/* =============================================================================
   Mobile Navigation - Modern-spezifische Anpassungen
   ============================================================================= */

.nav-menu {
    background: white;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}

.nav-menu > li {
    border-bottom: 1px solid #f3f4f6;
}

.nav-menu > li:last-child {
    border-bottom: none;
}

.nav-menu > li > a {
    padding: 1rem 1.5rem;
    font-weight: 500;
    color: #1f2937;
}

.nav-menu > li > a:not(.nav-cta):hover,
.nav-menu > li > a:not(.nav-cta):active {
    background: #f9fafb;
    padding-left: 1.75rem;
}

/* Aktiver Link - Modern */
.nav-menu > li > a.bg-primary-50 {
    background: rgba(var(--primary-rgb, 37, 99, 235), 0.1);
    color: inherit;
}

.nav-menu > li > a.text-primary-600 {
    color: inherit;
}

/* Submenü - Modern */
.nav-menu .group ul {
    background: #f9fafb;
}

.nav-menu .group ul li {
    border-bottom: 1px solid #e5e7eb;
}

.nav-menu .group ul li:last-child {
    border-bottom: none;
}

.nav-menu .group ul li a {
    padding: 0.75rem 1.5rem 0.75rem 2.5rem;
    font-size: 0.9rem;
    color: #6b7280;
}

.nav-menu .group ul li a:hover,
.nav-menu .group ul li a:active {
    background: #f3f4f6;
}

/* =============================================================================
   Kontaktformular - Modern-spezifisches Select Styling
   ============================================================================= */

.contact-form select {
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    height: auto !important;
    min-height: 3rem !important;
}

.contact-form select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

/* =============================================================================
   Links - Modern Template Styling
   ============================================================================= */

.prose a,
div[class*="prose"] a,
p a,
li a,
td a,
.text-content a {
    color: var(--primary-600);
}

.prose a:hover,
div[class*="prose"] a:hover,
p a:hover,
li a:hover,
td a:hover,
.text-content a:hover {
    color: var(--primary-700);
}

/* CTA in der Navigation: Schrift bleibt weiß – die generische li a:hover-Regel
   oben würde sie sonst auf Primary färben (unsichtbar auf Primary-Button) */
header .nav-cta,
header .nav-cta:hover {
    color: #ffffff;
}