/*
=================================
--- CORE CSS ---
=================================
Refactored and optimized global styles.
Replaces main_style.css and navigation_spacing.css
*/

/* 
=================================
--- 1. FONTS & RESET --- 
=================================
*/

@font-face {
    font-family: 'Congenial';
    src: url('../fonts/Congenial_ExtraLight.otf') format('opentype');
    font-weight: 400;
    /* Regular maps to 400 here */
    font-style: normal;
}

@font-face {
    font-family: 'Congenial';
    src: url('../fonts/Congenial_Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Congenial';
    src: url('../fonts/Congenial_Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

main {
    margin-top: 100px;
}

@media (max-width: 480px) {
    main {
        margin-top: 70px;
    }
}

html,
body {
    margin: 0%;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    padding-left: var(--ks-safe-area-left);
    padding-right: var(--ks-safe-area-right);
    padding-bottom: var(--ks-safe-area-bottom);
    font-family: var(--ks-font-family-base);
    font-weight: var(--ks-font-weight-normal);
    font-size: var(--ks-font-size-base);
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* Legacy support */
    word-break: break-word;
    hyphens: auto;
    color: var(--ks-color-text-primary);
    background-color: var(--ks-color-white);
    line-height: var(--ks-line-height-normal);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* 
=================================
--- 2. GLOBAL LAYOUT & SPACING --- 
=================================
*/



h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ks-font-family-base);
    font-weight: var(--ks-font-weight-bold);
    color: var(--ks-color-text-primary);
    margin-top: 0;

    /* Improved typography for German compound words */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;

    /* Prevent orphaned words */
    orphans: 3;
    widows: 3;
}

/* Responsive Typography for Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.2;
        hyphens: auto;
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 2rem);
        line-height: 1.3;
        hyphens: auto;
    }
}

/* Utility class to disable hyphenation if needed */
.no-hyphenate {
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
}

strong,
b {
    font-weight: var(--ks-font-weight-bold);
}

img,
video,
audio,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    /* Prevent aspect ratio distortion */
}

figure {
    margin: 1.5em 0;
    max-width: 100%;
}

figure img {
    display: block;
    margin: 0 auto;
}

/* 
=================================
--- 3. TYPOGRAPHY (CMS CONTENT) --- 
=================================
Ensures consistent styling across all text blocks
*/

.text-block-content h1,
.page-content h1,
.page-content-wrapper h1,
.hero-subheadline h1,
.text-hero-content h1 {
    font-size: var(--ks-font-size-h1);
    /* Using variable directly, check if scaling is needed */
    line-height: var(--ks-line-height-tight);
}

/* Special scaling for H1 based on original CSS calc(var(--ks-font-size-h1) * 0.71) ~ 2.5rem */
/* If the variable is 3.5rem (56px) -> 0.71 is approx 2.5rem. 
   Lets stick to the variable system but maybe introduce a specific variable if needed. 
   For now, I will keep the calculation or just use H2 size if that matches closer, 
   but strictly following "Modul" instructions: replace static with vars. 
   Let's use a locally scoped override or a new utility if strictly needed. 
   Actually, let's trust the var system to be the source of truth, but if the original had a distinct override, preserve it cleanly.
*/
.text-block-content h1,
.page-content h1,
.page-content-wrapper h1,
.hero-subheadline h1,
.text-hero-content h1 {
    font-size: 2.5rem;
    /* Explicit override preserved from main_style.css until design tokens are fully aligned */
}

/* H2 Styling */
.text-block-content h2,
.page-content h2,
.page-content-wrapper h2,
.hero-subheadline h2,
.text-hero-content h2,
.ks-block-text h2,
.ks-container--narrow h2 {
    font-size: var(--ks-font-size-h2);
    line-height: 1.3;
    max-width: var(--ks-text-max-width);
    margin: 50px auto var(--ks-spacing-sm) auto;
    /* 50px top margin */
    text-align: left;
    border-bottom: 2px solid var(--ks-color-secondary);
    padding-bottom: 10px;
    padding-left: var(--ks-spacing-sm);
    padding-right: var(--ks-spacing-sm);

    /* Wortumbruch nur zwischen Wörtern erlauben - keine Silbentrennung */
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}

.text-block-content h3,
.page-content h3,
.page-content-wrapper h3,
.hero-subheadline h3,
.text-hero-content h3 {
    font-size: var(--ks-font-size-h3);
    line-height: 1.4;
}

.text-block-content h4,
.page-content h4,
.page-content-wrapper h4,
.hero-subheadline h4,
.text-hero-content h4 {
    font-size: var(--ks-font-size-h4);
    line-height: 1.5;
}

.text-block-content h5,
.page-content h5,
.page-content-wrapper h5,
.hero-subheadline h5,
.text-hero-content h5 {
    font-size: var(--ks-font-size-h5);
    line-height: var(--ks-line-height-normal);
}

.text-block-content h6,
.page-content h6,
.page-content-wrapper h6,
.hero-subheadline h6,
.text-hero-content h6 {
    font-size: var(--ks-font-size-h6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Paragraphs & Text Utility */
.text-block-content p,
.text-block-content li,
.text-block-content div,
.page-content p,
.page-content li,
.page-content div,
.page-content-wrapper p,
.page-content-wrapper li,
.hero-subheadline p,
.text-hero-content p {
    font-family: var(--ks-font-family-base);
    font-size: var(--ks-font-size-base);
    line-height: var(--ks-line-height-normal);
    color: var(--ks-color-text-primary);
    font-weight: var(--ks-font-weight-normal);
    max-width: 100%;
    /* Prevent overflow in flex items */
}

/* Content Width & Alignment Wrapper */
.text-hero-content,
.hero-subheadline,
.info-text,
.text-container {
    max-width: min(var(--ks-text-max-width), 100% - var(--ks-spacing-sm));
    margin: 0 auto;
    width: 100%;
    padding-left: max(var(--ks-spacing-sm), 15px);
    padding-right: max(var(--ks-spacing-sm), 15px);
    text-align: left;
    overflow-wrap: break-word;
    /* Ensure text doesn't flow out */
}

/* 
=================================
--- 4. NAVIGATION --- 
=================================
*/

.site-header {
    background-color: var(--ks-color-white);
    padding: 15px 30px;
    box-shadow: var(--ks-shadow-sm);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--ks-z-index-navigation);
}

.header-container {
    max-width: var(--ks-container-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Logo */
.site-branding .logo-link img {
    height: auto;
    width: 200px;
    display: block;
}

@media (max-width: 768px) {
    .site-branding .logo-link img {
        width: 150px;
    }

    .site-header {
        padding: 10px 20px;
    }
}

/* Desktop Nav Links */
.nav-links {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--ks-color-text-secondary);
    font-weight: var(--ks-font-weight-medium);
    padding: 5px 0;
    position: relative;
    transition: color var(--ks-transition-normal);
    white-space: nowrap;
}

/* Hover Underline Animation */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--ks-color-secondary);
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform var(--ks-transition-normal);
}

.nav-links a:hover {
    color: var(--ks-color-black);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Hamburger Menu (Mobile) */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger-menu .line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile Nav Styles - Now includes tablets */
@media (max-width: 1200px) {
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 100vh;
        background-color: var(--ks-color-white);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 25px;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links a {
        font-size: 1.2rem;
    }

    .hamburger-menu {
        display: block;
    }

    .hamburger-menu.active .line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger-menu.active .line:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

/* 
=================================
--- 5. FOOTER --- 
=================================
*/

.site-footer {
    background-color: var(--ks-color-white);
    color: var(--ks-color-text-primary);
    padding: var(--ks-spacing-lg) var(--ks-spacing-sm);
    font-size: var(--ks-font-size-base);
    position: relative;
    z-index: 50;
    border-top: 1px solid var(--ks-color-border);
}

.footer-container {
    max-width: var(--ks-content-max-width);
    margin: 0 auto;
}

.footer-logo {
    text-align: center;
    margin-bottom: 50px;
}

.footer-logo img {
    height: 100px;
    width: auto;
}

.footer-logo .tagline {
    margin: 5px 0 0 0;
    font-size: 0.9em;
    color: var(--ks-color-text-light);
}

.footer-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ks-spacing-md) var(--ks-spacing-lg);
    text-align: left;
    padding: 50px 0;
}

.footer-column {
    flex-basis: 200px;
    flex-grow: 0;
}

.footer-column h4 {
    font-size: 1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 20px;
    position: relative;
}

.footer-column h4::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--ks-color-primary);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a,
.footer-column h4 a {
    color: var(--ks-color-text-primary);
    text-decoration: none;
    transition: color var(--ks-transition-fast);
}

.footer-links a:hover,
.footer-column h4 a:hover {
    color: var(--ks-color-primary);
    /* Use primary color instead of hardcoded blue */
}

@media (max-width: 1200px) {
    .site-footer {
        padding-top: 80px;
    }

    .footer-grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        flex-direction: column;
        align-items: center;
        text-align: left;
    }

    .footer-column {
        width: 100%;
        max-width: 350px;
    }
}

/* 
=================================
--- 6. UTILITIES & CONTAINERS --- 
=================================
*/

.ks-container {
    max-width: var(--ks-container-max-width);
    margin: 0 auto;
    padding-left: var(--ks-spacing-sm);
    padding-right: var(--ks-spacing-sm);
}

.ks-container--content {
    max-width: var(--ks-content-max-width);
    margin: 0 auto;
    padding-left: var(--ks-spacing-sm);
    padding-right: var(--ks-spacing-sm);
}

.ks-container--narrow {
    max-width: var(--ks-text-max-width);
    margin: 0 auto;
    padding-left: var(--ks-spacing-sm);
    padding-right: var(--ks-spacing-sm);
}

.page-content-wrapper {
    max-width: var(--ks-text-max-width);
    margin: 0 auto;
    padding: var(--ks-spacing-sm);
}

/* Media (Audio/Video) */
.content-media {
    margin: 2rem 0;
    max-width: 100%;
}

.content-video video {
    width: 100%;
    border-radius: var(--ks-border-radius-md);
    background: #000;
    display: block;
}

.content-audio audio,
.audio-wrapper audio {
    width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: var(--ks-border-radius-md);
}

/* 
=================================
--- 7. HOME PAGE RESPONSIVE FIX --- 
=================================
*/

@media (max-width: 768px) {

    .page-home .main-content-row,
    .page-home .row,
    .page-home .flex-container {
        flex-direction: column !important;
        display: flex;
    }

    .page-home .col,
    .page-home .col-4,
    .page-home .col-md-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }
}


/* ==========================================
   REUSABLE PATTERNS - COACHING SECTIONS
   ========================================== */

.ks-pattern-coaching {
    padding: var(--ks-spacing-lg) var(--ks-spacing-sm);
    transition: background-color var(--ks-transition-normal);
}

.ks-pattern-coaching__container {
    max-width: var(--ks-content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ks-grid-gap-md);
    align-items: center;
}

.ks-pattern-coaching--bg-white {
    background-color: var(--ks-color-white);
}

.ks-pattern-coaching--bg-colored {
    background-color: var(--ks-color-light-bg);
}

.ks-pattern-coaching--layout-reverse .ks-pattern-coaching__container {
    direction: rtl;
}

.ks-pattern-coaching--layout-reverse * {
    direction: ltr;
}

.ks-pattern-coaching__image img {
    width: 100%;
    height: auto;
    border-radius: var(--ks-border-radius-md);
    box-shadow: var(--ks-shadow-md);
}

.ks-pattern-coaching__text h2 {
    font-size: var(--ks-font-size-h2);
    margin-bottom: var(--ks-spacing-sm);
    color: var(--ks-color-text-primary);
}

.ks-pattern-coaching__text p {
    line-height: var(--ks-line-height-normal);
    color: var(--ks-color-text-secondary);
}

.ks-pattern-coaching__button {
    display: inline-block;
    margin-top: var(--ks-spacing-sm);
    padding: 12px 30px;
    background-color: var(--ks-color-accent);
    color: var(--ks-color-black);
    text-decoration: none;
    border-radius: var(--ks-border-radius-md);
    font-weight: var(--ks-font-weight-bold);
    transition: transform var(--ks-transition-fast), background-color var(--ks-transition-fast);
}

.ks-pattern-coaching__button:hover {
    background-color: var(--ks-color-accent-hover);
    color: var(--ks-color-white);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .ks-pattern-coaching__container {
        grid-template-columns: 1fr;
        gap: var(--ks-spacing-sm);
    }

    .ks-pattern-coaching--layout-reverse .ks-pattern-coaching__container {
        direction: ltr;
    }

    .ks-pattern-coaching__image,
    .ks-pattern-coaching__text {
        order: initial;
    }
}


/* ==========================================
   REUSABLE PATTERNS - HERO SECTIONS
   ========================================== */

/* Text Hero (ohne Bild) */
.ks-hero-text {
    background-color: var(--ks-color-gray-bg);
    padding: var(--ks-spacing-xl) var(--ks-spacing-sm) var(--ks-spacing-lg);
    text-align: left;
}

.ks-hero-text__content {
    max-width: var(--ks-text-max-width);
    margin: 0 auto;
    padding-left: var(--ks-spacing-sm);
    padding-right: var(--ks-spacing-sm);
}

.ks-hero-text__content h1 {
    font-size: var(--ks-font-size-h1);
    color: var(--ks-color-text-primary);
    margin-bottom: var(--ks-spacing-sm);
    font-weight: var(--ks-font-weight-bold);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

.ks-hero-text__subheadline {
    font-size: var(--ks-font-size-xl);
    color: var(--ks-color-text-secondary);
    line-height: var(--ks-line-height-normal);
    margin-top: var(--ks-spacing-sm);
}

/* Image Hero */
.ks-hero-image {
    height: 50vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.ks-hero-image__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    z-index: 1;
}

.ks-hero-image__title {
    font-size: var(--ks-font-size-h1);
    color: var(--ks-color-white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 2;
    padding: 0 var(--ks-spacing-lg);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

@media (max-width: 768px) {
    .ks-hero-text__content h1 {
        font-size: 2.5rem;
    }

    .ks-hero-image {
        height: 40vh;
    }

    .ks-hero-image__title {
        font-size: 2.5rem;
        padding: 0 var(--ks-spacing-md);
    }
}


/* ==========================================
   REUSABLE PATTERNS - CTA BUTTONS
   ========================================== */

.ks-button {
    display: inline-block;
    padding: 14px 32px;
    border-radius: var(--ks-border-radius-md);
    text-decoration: none;
    font-weight: var(--ks-font-weight-bold);
    font-size: var(--ks-font-size-base);
    transition: transform var(--ks-transition-fast),
        box-shadow var(--ks-transition-fast),
        background-color var(--ks-transition-fast);
    cursor: pointer;
    border: none;
}

.ks-button--primary {
    background-color: var(--ks-color-accent);
    color: var(--ks-color-black);
}

.ks-button--primary:hover {
    background-color: var(--ks-color-accent-hover);
    color: var(--ks-color-white);
    transform: translateY(-3px);
    box-shadow: var(--ks-shadow-md);
}

.ks-button--secondary {
    background-color: var(--ks-color-secondary);
    color: var(--ks-color-white);
}

.ks-button--secondary:hover {
    background-color: var(--ks-color-secondary-hover);
    transform: translateY(-3px);
    box-shadow: var(--ks-shadow-md);
}

.ks-button--large {
    padding: 16px 40px;
    font-size: var(--ks-font-size-lg);
}

.ks-button--small {
    padding: 10px 24px;
    font-size: var(--ks-font-size-sm);
}


/* ==========================================
   PAGE TABS NAVIGATION
   ========================================== */

.subnav-container {
    background-color: var(--ks-color-white);
    border-bottom: 1px solid #eee;
    padding: 20px 15px;
    margin-top: 115px;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
}

.page-tabs-nav {
    margin: 0;
    background: transparent;
    padding: 0;
    border: none;
}

.page-tabs {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.page-tabs a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: var(--ks-color-text-light);
    font-weight: 500;
    font-size: 1.1rem;
    position: relative;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.page-tabs a:hover {
    color: var(--ks-color-primary);
}

.page-tabs .active a {
    color: var(--ks-color-primary);
    font-weight: 700;
}

.page-tabs .active a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--ks-color-primary);
}

/* Specific override for Die Kunst des Lebens */
.page-die-kunst-des-lebens .page-tabs a:hover,
.page-die-kunst-des-lebens .page-tabs .active a {
    color: var(--ks-color-brand-purple);
}

.page-die-kunst-des-lebens .page-tabs .active a::after {
    background-color: var(--ks-color-brand-purple);
}

/* Mobile Scroll Fix for Tabs */
@media (max-width: 768px) {
    .page-tabs {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
        gap: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        width: 100%;
        box-sizing: border-box;
    }

    .page-tabs::-webkit-scrollbar {
        display: none;
    }

    .page-tabs li {
        flex-shrink: 0;
    }

    .page-tabs a {
        font-size: 1rem;
        padding: 10px 0;
    }
}