/*
Theme Name: Hybrid Athleten
Theme URI: https://hybrid-athleten.de
Description: Light, friendly athletic theme for Hybrid-Athleten.de
Version: 3.2
Author: Bob
License: GPL v2 or later
Text Domain: hybrid-athleten
*/

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #F7F8FA;
    color: #2D3748;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: #E94560; text-decoration: none; transition: color .2s; }
a:hover { color: #C73050; }

/* ===== LAYOUT ===== */
.ha-container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* ===== HEADER ===== */
.ha-header {
    background: #FFFFFF;
    border-bottom: 2px solid #E94560;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.ha-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
}
.ha-logo-link { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ha-logo-link img { max-height: 50px; width: auto; }
.ha-site-title { color: #1A1A2E; font-size: 22px; font-weight: 800; }

/* ===== NAV ===== */
.ha-nav {
    display: flex;
    align-items: center;
}
.ha-nav-list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.ha-nav-list > li { position: relative; }
.ha-nav-list > li > a {
    display: block;
    padding: 8px 12px;
    color: #4A5568;
    font-size: 14px;
    font-weight: 600;
    transition: color .2s;
}
.ha-nav-list > li > a:hover { color: #E94560; }
.ha-nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    min-width: 220px;
    padding: 8px 0;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    list-style: none;
}
.ha-nav-list .sub-menu li { list-style: none; }
.ha-nav-list > li:hover > .sub-menu { display: block; }
.ha-nav-list .sub-menu a {
    display: block;
    padding: 8px 16px;
    color: #4A5568;
    font-size: 14px;
}
.ha-nav-list .sub-menu a:hover { color: #E94560; background: #FFF5F7; }

.ha-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #1A1A2E;
    font-size: 28px;
    cursor: pointer;
}

/* ===== MAIN CONTENT ===== */
.ha-main { min-height: 60vh; }
.ha-content { max-width: 100%; }

/* ===== FOOTER ===== */
.ha-footer {
    background: #1A1A2E;
    border-top: 2px solid #E94560;
    padding: 48px 0 24px;
    color: #CBD5E0;
}
.ha-footer-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 32px;
}
.ha-footer-col h4 {
    color: #FF6B35;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 700;
}
.ha-footer-links {
    list-style: none;
    padding: 0;
}
.ha-footer-links a {
    color: #A0AEC0;
    font-size: 14px;
    display: block;
    padding: 4px 0;
}
.ha-footer-links a:hover { color: #FF6B35; }
.ha-footer-bottom {
    border-top: 1px solid #2D3748;
    padding-top: 16px;
    text-align: center;
    color: #718096;
    font-size: 13px;
}

/* ===== RESPONSIVE NAV ===== */
@media (max-width: 1024px) {
    .ha-nav-list > li > a { padding: 8px 8px; font-size: 13px; }
}
@media (max-width: 768px) {
    .ha-menu-toggle { display: block; }
    .ha-nav { display: none; }
    .ha-nav.ha-nav-open {
        display: block;
        position: absolute;
        top: 72px;
        left: 0;
        right: 0;
        background: #FFFFFF;
        padding: 16px;
        border-bottom: 2px solid #E94560;
        box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    }
    .ha-nav-open .ha-nav-list { flex-direction: column; white-space: normal; }
    .ha-nav-open .ha-nav-list > li > a { padding: 12px 16px; }
    .ha-nav-open .sub-menu {
        position: static;
        display: block;
        border: none;
        padding-left: 16px;
        box-shadow: none;
    }
    .ha-footer-cols { grid-template-columns: 1fr; }
}

/* ===== WP BLOCK OVERRIDES ===== */
.wp-block-group { margin: 0; }
.wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.ha-disclaimer { color: #718096 !important; font-size: 12px !important; font-style: italic; }

/* ===== HERO SECTIONS ===== */
.ha-hero {
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 50%, #0F3460 100%);
    min-height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.ha-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(circle at 80% 50%, rgba(233,69,96,0.12) 0%, transparent 60%);
    pointer-events: none;
}
.ha-hero-content { position: relative; z-index: 1; }
.ha-hero h1, .ha-hero .ha-section-title {
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 20px;
}
.ha-hero h1 .ha-accent, .ha-hero .accent { color: #FF6B35; }
.ha-hero p { color: rgba(255,255,255,0.85); font-size: 18px; max-width: 640px; }

/* ===== SECTION HEADINGS (light context) ===== */
h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; color: #1A1A2E; line-height: 1.1; margin-bottom: 20px; }
h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; color: #1A1A2E; margin-bottom: 24px; }
h3 { font-size: clamp(20px, 2.5vw, 28px); font-weight: 600; color: #2D3748; }
h4 { font-size: 18px; font-weight: 600; color: #2D3748; }

/* ===== CARDS (light) ===== */
.ha-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 28px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ha-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
    border-color: #E94560;
}
.ha-card-kraft { border-top: 3px solid #E94560; }
.ha-card-ausdauer { border-top: 3px solid #3182CE; }
.ha-card-kampf { border-top: 3px solid #FF6B35; }
.ha-card-supps { border-top: 3px solid #E2B04A; }
.ha-card-hormone { border-top: 3px solid #9B59B6; }

/* ===== PRODUCT TABLES (light) ===== */
.ha-table, .ha-product-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 30px 0;
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}
.ha-table thead th {
    background: #1A1A2E;
    color: #FFFFFF;
    font-weight: 700;
    padding: 16px 20px;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #E94560;
}
.ha-table tbody td {
    padding: 14px 20px;
    color: #2D3748;
    border-bottom: 1px solid #E2E8F0;
    font-size: 15px;
}
.ha-table tbody tr:nth-child(even) { background: #F7F8FA; }
.ha-table tbody tr:hover { background: #FFF5F7; }

/* ===== BUTTONS / CTA ===== */
.ha-btn, .ha-cta {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    text-align: center;
}
.ha-btn-red, .ha-cta-red {
    background: #E94560;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(233,69,96,0.25);
}
.ha-btn-red:hover, .ha-cta-red:hover {
    background: #d13550;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(233,69,96,0.4);
    color: #FFFFFF !important;
}

/* ===== CARD BUTTONS — red bg, white text, red border ===== */
.ha-card .ha-btn-red,
.wp-block-column .ha-card .ha-btn-red {
    background: #E94560 !important;
    color: #FFFFFF !important;
    border: 2px solid #E94560;
    box-shadow: none;
}
.ha-card .ha-btn-red:hover,
.wp-block-column .ha-card .ha-btn-red:hover {
    background: #FFFFFF !important;
    color: #E94560 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233,69,96,0.25);
}
.ha-btn-orange {
    background: #FF6B35;
    color: #FFFFFF !important;
    box-shadow: 0 4px 20px rgba(255,107,53,0.25);
}
.ha-btn-orange:hover {
    background: #e55d2e;
    transform: translateY(-2px);
    color: #FFFFFF;
}
.ha-btn-blue {
    background: #3182CE;
    color: #FFFFFF !important;
}
.ha-btn-blue:hover { background: #2B6CB0; color: #FFFFFF !important; }
.ha-btn-outline {
    background: transparent;
    border: 2px solid #E94560;
    color: #E94560;
}
.ha-btn-outline:hover {
    background: #E94560;
    color: #FFFFFF !important;
}

/* Amazon/Buy links */
a[href*="amazon"] { color: #FF6B35; font-weight: 600; }
a[href*="amazon"]:hover { color: #e55d2e; }

/* ===== CATEGORY BADGES ===== */
.ha-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ha-badge-kraft { background: #FFF5F7; color: #E94560; }
.ha-badge-ausdauer { background: #EBF4FF; color: #3182CE; }
.ha-badge-kampf { background: #FFF5EB; color: #FF6B35; }
.ha-badge-supps { background: #FFFFF0; color: #B7791F; }
.ha-badge-hormone { background: #FAF5FF; color: #9B59B6; }

/* ===== STAR RATINGS ===== */
.ha-stars { color: #E2B04A; font-size: 16px; letter-spacing: 2px; }
.ha-stars .ha-star-empty { color: #E2E8F0; }

/* ===== BLOCKQUOTES (light) ===== */
blockquote {
    border-left: 4px solid #E94560;
    background: #FFF5F7;
    padding: 20px 24px;
    border-radius: 0 12px 12px 0;
    margin: 30px 0;
    font-style: italic;
}
blockquote p { color: #2D3748; font-size: 17px; }

/* ===== AFFILIATE DISCLAIMER ===== */
.ha-disclaimer {
    font-size: 12px;
    color: #718096;
    font-style: italic;
    padding: 12px 0;
    border-top: 1px solid #E2E8F0;
    margin-top: 40px;
}

/* ===== WP TABLE OVERRIDES (light) ===== */
.wp-block-table table {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
}
.wp-block-table thead th {
    background: #1A1A2E;
    color: #FFFFFF;
    font-weight: 700;
    padding: 16px 20px;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 2px solid #E94560;
}
.wp-block-table tbody td {
    padding: 14px 20px;
    color: #2D3748;
    border-bottom: 1px solid #E2E8F0;
}
.wp-block-table tbody tr:nth-child(even) { background: #F7F8FA; }
.wp-block-table tbody tr:hover { background: #FFF5F7; }

/* ===== WP BLOCK GROUP OVERRIDES ===== */
.is-layout-constrained > .alignwide { max-width: 1400px; }
.wp-block-group { margin: 0; }
.wp-block-columns { display: flex; gap: 24px; flex-wrap: wrap; }

/* ===== SEPARATORS ===== */
.wp-block-separator { border-color: #E2E8F0; margin: 40px 0; }

/* ===== FOCUS ===== */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid #E94560;
    outline-offset: 2px;
}

/* ===== PARAGRAPH (light context) ===== */
p { color: #4A5568; }

/* ===== LISTS (light) ===== */
li { color: #4A5568; }
li::marker { color: #E94560; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .ha-hero { min-height: 40vh; }
    .ha-hero h1 { font-size: clamp(28px, 4vw, 48px); }
}
@media (max-width: 768px) {
    .ha-hero { min-height: 35vh; padding-top: 60px; padding-bottom: 60px; }
    .ha-hero h1 { font-size: 32px; }
    .ha-card { padding: 20px; }
    .ha-table, .wp-block-table { overflow-x: auto; display: block; }
    .ha-table thead th, .ha-table tbody td { padding: 10px 12px; }
}
@media (max-width: 480px) {
    .ha-hero h1 { font-size: 28px; }
    .ha-btn, .ha-cta { padding: 12px 24px; font-size: 14px; }
}


/* ===== FORCE LIGHT BACKGROUNDS (override inline dark styles) ===== */
.wp-block-group[style*="background-color:#0D0D12"],
.wp-block-group[style*="background-color:#0d0d12"] {
    background-color: #F7F8FA !important;
}

.wp-block-group[style*="background-color:#1A1A2E"],
.wp-block-group[style*="background-color:#1a1a2e"] {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
}

.wp-block-group[style*="background-color:#16213E"],
.wp-block-group[style*="background-color:#16213e"] {
    background-color: #EBF4FF !important;
}

.wp-block-group[style*="background-color:#0F3460"],
.wp-block-group[style*="background-color:#0f3460"] {
    background-color: #EBF4FF !important;
}

/* Force light card backgrounds */
.ha-card[style*="background-color:#1E1E32"],
.ha-card[style*="background-color:#1e1e32"],
.wp-block-column[style*="background-color:#1E1E32"],
.wp-block-column[style*="background-color:#1e1e32"] {
    background-color: #FFFFFF !important;
    border: 1px solid #E2E8F0;
}

/* Force light text in blocks that had dark backgrounds */
.wp-block-group[style*="background-color"] h1,
.wp-block-group[style*="background-color"] h2,
.wp-block-group[style*="background-color"] h3,
.wp-block-group[style*="background-color"] h4 {
    color: #1A1A2E !important;
}

.wp-block-group[style*="background-color"] p,
.wp-block-group[style*="background-color"] li,
.wp-block-group[style*="background-color"] td {
    color: #4A5568 !important;
}

.wp-block-group[style*="background-color"] a {
    color: #E94560 !important;
}

/* Hero stays dark (intentional) */
.ha-hero {
    background: linear-gradient(135deg, #1A1A2E 0%, #16213E 40%, #0F3460 100%) !important;
}
.ha-hero h1, .ha-hero h2, .ha-hero h3, .ha-hero p {
    color: #FFFFFF !important;
}
.ha-hero a {
    color: #FF6B35 !important;
}
/* Buttons inside hero must stay white */
.ha-hero .ha-btn-red,
.ha-hero .ha-btn-orange,
.ha-hero .ha-btn-blue,
.ha-hero .ha-cta-red,
.ha-hero a[style*="background"] {
    color: #FFFFFF !important;
}

/* Tables in content blocks need light style too */
.wp-block-group[style*="background-color"] .wp-block-table table {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}
.wp-block-group[style*="background-color"] .wp-block-table thead th {
    background: #1A1A2E !important;
    color: #FFFFFF !important;
}
.wp-block-group[style*="background-color"] .wp-block-table tbody td {
    color: #2D3748 !important;
    border-color: #E2E8F0 !important;
}


/* Datenschutz page — Leerzeilen zwischen Absätzen */
.page-id-61 div[style*="max-width: 1400px"] p {
    margin-bottom: 18px !important;
    line-height: 1.8 !important;
}
.page-id-61 div[style*="max-width: 1400px"] p:empty {
    height: 18px !important;
    margin: 0 !important;
}
.page-id-61 div[style*="max-width: 1400px"] ul {
    margin-bottom: 18px !important;
}
.page-id-61 div[style*="max-width: 1400px"] li {
    margin-bottom: 8px !important;
    line-height: 1.8 !important;
}
/* Impressum page — Leerzeilen zwischen Absätzen */
.page-id-60 div[style*="max-width: 1400px"] p {
    margin-bottom: 18px !important;
    line-height: 1.8 !important;
}
.page-id-60 div[style*="max-width: 1400px"] p:empty {
    height: 18px !important;
    margin: 0 !important;
}
.page-id-60 div[style*="max-width: 1400px"] ul {
    margin-bottom: 18px !important;
}
.page-id-60 div[style*="max-width: 1400px"] li {
    margin-bottom: 8px !important;
    line-height: 1.8 !important;
}

/* ===== COLUMN LAYOUT — 2 per row, equal width & height ===== */
.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
}
.wp-block-columns .wp-block-column {
    flex: 1 1 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    min-width: 280px !important;
}
.wp-block-columns .wp-block-column .ha-card {
    height: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}
.wp-block-columns .wp-block-column .ha-card > p:last-child,
.wp-block-columns .wp-block-column .ha-card > a:last-child {
    margin-top: auto !important;
}