/**
 * Beherzig Annual Report — Premium Polish Layer
 *
 * Additive design upgrade for reports/annual-2026.html (+ EN/FR/IT).
 * Loaded AFTER the existing inline \3c style> block, so all rules below
 * override the previous tier when there is conflict.
 *
 * Goal: lift the report from "functional" to "premium brand asset"
 * suitable for HNWI off-market audience and PDF print export.
 *
 * Phase 8 of docs/PLAN-Subpage-Foundation-Fix-2026-05-19.md
 */

/* -- Hero: more vertical breathing room + gold accent line above title -- */
.hero {
    padding: 110px 24px 100px;
    position: relative;
    overflow: hidden;
}

.hero-inner::before {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background: var(--accent, #c5a03e);
    margin: 0 auto 28px;
    opacity: 0.85;
}

.hero h1 {
    font-size: 3.4rem;
    letter-spacing: -0.01em;
}

.hero .subtitle {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.22rem;
}

.hero .year-badge {
    margin-top: 8px;
    padding: 10px 28px;
    box-shadow: 0 4px 18px rgb(197 160 62 / 28%);
}

/* -- KPI-Cards: subtle gold top-border, hover-elevation, dividers between -- */
.kpi-banner {
    padding: 56px 24px;
    border-top: 1px solid rgb(0 0 0 / 6%);
    border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.kpi {
    padding: 24px 16px;
    background: #fff;
    border-radius: 12px;
    border-top: 3px solid var(--accent, #c5a03e);
    box-shadow: 0 2px 8px rgb(0 0 0 / 4%);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgb(0 0 0 / 8%);
}

.kpi-value {
    font-size: 2.6rem;
    letter-spacing: -0.01em;
}

/* -- Section numbers: thin gold leading-line -- */
.section-num {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.section-num::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--accent, #c5a03e);
}

/* -- Findings: elevated card style, brown accent header -- */
.finding {
    padding: 28px 26px;
    background: #fff;
    border-left: 4px solid var(--accent, #c5a03e);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 4%);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.finding:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgb(0 0 0 / 8%);
}

.finding-num {
    color: var(--b, #5c4338);
}

.finding h3 {
    font-size: 1.25rem;
    color: var(--b, #5c4338);
}

/* -- Hotspots: refined hover + numbered rank emphasis -- */
.hotspot {
    box-shadow: 0 1px 3px rgb(0 0 0 / 3%);
}

.hotspot:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgb(0 0 0 / 9%);
    border-color: var(--accent, #c5a03e);
}

.hotspot-rank {
    font-size: 1.6rem;
    line-height: 1;
}

/* -- Region-blocks: subtle gold accent stripe -- */
.region-block {
    border-left: 3px solid var(--accent, #c5a03e);
    background: linear-gradient(90deg, rgb(247 245 242 / 100%) 0%, rgb(247 245 242 / 50%) 100%);
}

/* -- Persona-cards: cleaner border + premium feel -- */
.persona-card {
    box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
    transition: box-shadow 0.2s ease;
}

.persona-card:hover {
    box-shadow: 0 6px 20px rgb(0 0 0 / 7%);
}

/* -- Outlook: stronger CTA-like styling -- */
.outlook {
    background: linear-gradient(135deg, var(--c, #f7f5f2) 0%, #fff 60%, rgb(197 160 62 / 6%) 100%);
    border-top: 1px solid rgb(197 160 62 / 20%);
    border-bottom: 1px solid rgb(197 160 62 / 20%);
}

/* -- Lead-capture: more premium feel, gold accent details -- */
.lead-capture {
    padding: 56px 36px;
    background: linear-gradient(135deg, var(--g, #3d3937) 0%, var(--b, #5c4338) 100%);
    box-shadow: 0 12px 40px rgb(0 0 0 / 18%);
    position: relative;
    overflow: hidden;
}

.lead-capture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--accent, #c5a03e);
}

.lead-capture h2 {
    font-size: 2rem;
    margin-top: 16px;
}

.lead-capture input[type='text'],
.lead-capture input[type='email'] {
    padding: 16px 18px;
    font-size: 1rem;
    transition: box-shadow 0.2s;
}

.lead-capture input[type='text']:focus,
.lead-capture input[type='email']:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgb(197 160 62 / 35%);
}

/* -- Print/PDF optimization (A4) -- */
@media print {
    @page {
        size: a4;
        margin: 1.5cm 1.2cm;
    }

    body {
        font-size: 10pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .bc,
    .lead-capture,
    nav.beherzig-navigation,
    footer.beherzig-footer,
    .skip-link {
        display: none !important;
    }

    .hero {
        background: #fff !important;
        color: var(--g, #3d3937) !important;
        padding: 24px 0;
        page-break-after: avoid;
    }

    .hero h1 {
        font-size: 26pt;
        color: var(--g, #3d3937);
    }

    .hero .subtitle {
        color: var(--g, #3d3937);
    }

    .hero .year-badge {
        color: var(--g, #3d3937);
        background: transparent;
        border: 1px solid var(--accent, #c5a03e);
        box-shadow: none;
    }

    .kpi-banner {
        padding: 18px 0;
        background: #fff !important;
        page-break-inside: avoid;
    }

    .kpi {
        background: #fff;
        border: 1px solid var(--l, #e5e5e5);
        box-shadow: none;
    }

    .section {
        max-width: 100%;
        margin: 18px 0;
        padding: 0;
        page-break-inside: avoid;
    }

    .section h2 {
        font-size: 18pt;
        margin-bottom: 10pt;
        page-break-after: avoid;
    }

    .section h3 {
        font-size: 13pt;
        page-break-after: avoid;
    }

    .findings,
    .hotspots {
        display: block;
    }

    .finding,
    .hotspot {
        page-break-inside: avoid;
        margin-bottom: 12pt;
        box-shadow: none;
    }

    .outlook {
        background: #fff !important;
        page-break-inside: avoid;
        border: 1px solid var(--accent, #c5a03e);
    }

    a {
        color: var(--b, #5c4338);
        text-decoration: none;
    }

    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 8pt;
        color: var(--b8, #73574a);
    }
}

/* -- Reduced motion respect -- */
@media (prefers-reduced-motion: reduce) {
    .kpi,
    .finding,
    .hotspot,
    .persona-card {
        transition: none;
    }

    .kpi:hover,
    .finding:hover,
    .hotspot:hover {
        transform: none;
    }
}

/* -- Dark-mode harmonisation (respects prefers-color-scheme) -- */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1918;
        color: #e8e6e3;
    }

    .kpi-banner,
    .section {
        color: #e8e6e3;
    }

    .kpi,
    .finding,
    .hotspot,
    .persona-card {
        background: #2a2624;
        color: #e8e6e3;
    }

    .region-block {
        background: linear-gradient(90deg, #2a2624 0%, rgb(42 38 36 / 70%) 100%);
    }

    .outlook {
        background: #2a2624 !important;
        border-top-color: rgb(197 160 62 / 30%);
        border-bottom-color: rgb(197 160 62 / 30%);
    }

    .hotspot a {
        color: var(--accent, #c5a03e);
    }
}