/*
 * Clickpure - Main Stylesheet
 * Foundations, layout, header, footer, typography.
 * Mobile first. Performance first. Premium feel.
 *
 * Layers:
 *  1. Design tokens (CSS custom properties)
 *  2. Minimal scoped reset
 *  3. Base typography
 *  4. Layout primitives (.cp-site, .cp-container, .cp-section, .cp-main, .cp-sidebar)
 *  5. Header + navigation
 *  6. Footer
 *  7. Pagination
 *  8. Accessibility helpers
 *  9. Reduced motion
 */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Brand — Strahlende Brombeere is the Phase 8 theme default.
     * Customizer overrides --cp-color-primary at runtime; derived hover/dark/
     * soft/tint stay static (only the base primary is configurable). */
    --cp-color-primary: #d12d7a;
    --cp-color-primary-hover: #b3206a;
    --cp-color-primary-dark: #8b1450;
    --cp-color-primary-soft: #fce5ef;
    --cp-color-primary-tint: #fdf4f8;
    --cp-color-secondary: #101828;

    /* Short-form aliases the Customizer emits — bridged here as fallback
     * defaults so the variables resolve even if the Customizer block fails. */
    --cp-primary: var(--cp-color-primary);
    --cp-secondary: var(--cp-color-secondary);

    /* Surfaces — Customizer can override --cp-color-bg / --cp-color-surface. */
    --cp-color-bg: #f6f7fb;
    --cp-color-bg-soft: #fafafa;
    --cp-color-bg-muted: #f4f4f5;
    --cp-color-surface: #ffffff;
    --cp-bg: var(--cp-color-bg);
    --cp-surface: var(--cp-color-surface);

    /* Text — Customizer overrides --cp-color-text. */
    --cp-color-text: #111827;
    --cp-color-text-soft: #374151;
    --cp-color-text-muted: #6b7280;
    --cp-color-text-faint: #9ca3af;
    --cp-color-text-on-primary: #ffffff;
    --cp-text: var(--cp-color-text);

    /* Borders — Customizer overrides --cp-color-border. */
    --cp-color-border: #e5e7eb;
    --cp-color-border-soft: #f1f2f4;
    --cp-color-border-strong: #d1d5db;
    --cp-border: var(--cp-color-border);

    /* Semantic */
    --cp-color-success: #16a34a;
    --cp-color-success-soft: #dcfce7;
    --cp-color-warning: #f59e0b;
    --cp-color-warning-soft: #fef3c7;
    --cp-color-danger: #dc2626;
    --cp-color-danger-soft: #fee2e2;
    --cp-color-info: #0284c7;
    --cp-color-info-soft: #e0f2fe;

    /* Shadows (multi-layer, soft) */
    --cp-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
    --cp-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.07), 0 1px 2px rgba(17, 24, 39, 0.04);
    --cp-shadow-md: 0 4px 14px rgba(17, 24, 39, 0.08), 0 2px 4px rgba(17, 24, 39, 0.04);
    --cp-shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.10), 0 4px 12px rgba(17, 24, 39, 0.05);
    --cp-shadow-xl: 0 24px 50px rgba(17, 24, 39, 0.14);
    /* Customizer overrides this with a dynamic rgba() built from the primary hex. */
    --cp-shadow-focus: 0 0 0 3px rgba(209, 45, 122, 0.25);

    /* Radius */
    --cp-radius-xs: 4px;
    --cp-radius-sm: 6px;
    --cp-radius-md: 10px;
    --cp-radius-lg: 16px;
    --cp-radius-xl: 24px;
    --cp-radius-pill: 999px;

    /* Spacing scale */
    --cp-space-0: 0;
    --cp-space-1: 0.25rem;
    --cp-space-2: 0.5rem;
    --cp-space-3: 0.75rem;
    --cp-space-4: 1rem;
    --cp-space-5: 1.5rem;
    --cp-space-6: 2rem;
    --cp-space-7: 3rem;
    --cp-space-8: 4rem;
    --cp-space-9: 6rem;

    /* Containers */
    --cp-container-sm: 640px;
    --cp-container-md: 768px;
    --cp-container-lg: 1024px;
    --cp-container-xl: 1200px;
    --cp-container-2xl: 1320px;
    --cp-container-prose: 760px;

    /* Typography */
    --cp-font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --cp-font-body: var(--cp-font-system);
    --cp-font-heading: var(--cp-font-system);
    --cp-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --cp-text-xs: 0.75rem;
    --cp-text-sm: 0.875rem;
    --cp-text-base: 1rem;
    --cp-text-lg: 1.125rem;
    --cp-text-xl: 1.25rem;
    --cp-text-2xl: 1.5rem;
    --cp-text-3xl: 1.875rem;
    --cp-text-4xl: 2.25rem;
    --cp-text-5xl: 3rem;

    --cp-leading-tight: 1.2;
    --cp-leading-snug: 1.35;
    --cp-leading-normal: 1.55;
    --cp-leading-relaxed: 1.75;

    /* Transitions */
    --cp-transition-fast: 120ms ease;
    --cp-transition-base: 180ms ease;
    --cp-transition-slow: 280ms ease;

    /* Z-index */
    --cp-z-header: 100;
    --cp-z-overlay: 900;
    --cp-z-modal: 1000;
}

/* ---------- 2. Scoped reset ----------
 * Only box-sizing is global. Industry standard, safe with WP and WooCommerce.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- 3. Base typography ---------- */
body.cp-body {
    margin: 0;
    font-family: var(--cp-font-body);
    font-size: var(--cp-text-base);
    line-height: var(--cp-leading-normal);
    color: var(--cp-color-text);
    background-color: var(--cp-color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.cp-body img,
.cp-body svg,
.cp-body video,
.cp-body iframe {
    max-width: 100%;
    height: auto;
}

/* Generic link color — kept moderate so WooCommerce button-links keep their look.
 * Underline-on-hover is added per context (.cp-content a, .cp-footer__nav a) only,
 * never globally — to avoid breaking WC `<a class="button">` styling. */
.cp-body a {
    color: var(--cp-color-primary);
    text-decoration: none;
    transition: color var(--cp-transition-fast);
}
.cp-body a:hover,
.cp-body a:focus-visible {
    color: var(--cp-color-primary-hover);
}

/* Global focus indicator — outline only, no border-radius (that would change the shape
 * of the focused element itself, not just the outline). Components with stronger focus
 * styles (.cp-button, .cp-form input) override with box-shadow. */
.cp-body :focus-visible {
    outline: 2px solid var(--cp-color-primary);
    outline-offset: 2px;
}

/* ---------- 4. Layout ---------- */
.cp-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cp-container {
    width: 100%;
    max-width: var(--cp-container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--cp-space-4);
    padding-right: var(--cp-space-4);
}
.cp-container--sm  { max-width: var(--cp-container-sm); }
.cp-container--md  { max-width: var(--cp-container-md); }
.cp-container--lg  { max-width: var(--cp-container-lg); }
.cp-container--xl  { max-width: var(--cp-container-xl); }
.cp-container--2xl { max-width: var(--cp-container-2xl); }
.cp-container--prose { max-width: var(--cp-container-prose); }

@media (min-width: 768px) {
    .cp-container {
        padding-left: var(--cp-space-5);
        padding-right: var(--cp-space-5);
    }
}

.cp-section {
    padding-top: var(--cp-space-7);
    padding-bottom: var(--cp-space-7);
}
.cp-section--tight { padding-top: var(--cp-space-5); padding-bottom: var(--cp-space-5); }
.cp-section--loose { padding-top: var(--cp-space-9); padding-bottom: var(--cp-space-9); }
.cp-section--soft  { background-color: var(--cp-color-bg-soft); }
.cp-section--muted { background-color: var(--cp-color-bg-muted); }
.cp-section--tint  { background-color: var(--cp-color-primary-tint); }

.cp-main {
    flex: 1 0 auto;
    padding-top: var(--cp-space-6);
    padding-bottom: var(--cp-space-8);
}

@media (min-width: 1024px) {
    .cp-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--cp-space-7);
        align-items: start;
    }
    .cp-layout--reverse {
        grid-template-columns: 300px minmax(0, 1fr);
    }
    .cp-layout--full {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cp-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-5);
}
.cp-sidebar .cp-widget {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-lg);
    padding: var(--cp-space-5);
}
.cp-sidebar .cp-widget__title {
    margin: 0 0 var(--cp-space-3);
    font-size: var(--cp-text-base);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cp-color-text-soft);
}

/* ---------- 5. Header ---------- */
.cp-header {
    position: relative;
    z-index: var(--cp-z-header);
    background: var(--cp-color-surface);
    border-bottom: 1px solid var(--cp-color-border-soft);
    transition: box-shadow var(--cp-transition-base);
}
.cp-header.cp-is-sticky-ready {
    position: sticky;
    top: 0;
}
.cp-header.cp-is-scrolled {
    box-shadow: var(--cp-shadow-sm);
}
.cp-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cp-space-4);
    flex-wrap: wrap;
    padding-top: var(--cp-space-4);
    padding-bottom: var(--cp-space-4);
}
.cp-header__brand {
    display: flex;
    align-items: center;
}
.cp-header__title {
    font-size: var(--cp-text-xl);
    font-weight: 800;
    color: var(--cp-color-text);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.cp-header__title:hover {
    color: var(--cp-color-primary);
}
.cp-header .custom-logo {
    max-height: 56px;
    width: auto;
}

/* Menu toggle (mobile) */
.cp-menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: 0;
    background: transparent;
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-md);
    cursor: pointer;
    transition: border-color var(--cp-transition-fast), background-color var(--cp-transition-fast);
}
.cp-menu-toggle:hover {
    border-color: var(--cp-color-primary);
}
.cp-menu-toggle:focus-visible {
    box-shadow: var(--cp-shadow-focus);
    outline: none;
}
.cp-menu-toggle__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--cp-color-text);
    border-radius: 2px;
}

/* Primary navigation */
.cp-nav {
    display: none;
    width: 100%;
    order: 3;
}
.cp-nav.cp-is-open {
    display: block;
    padding-top: var(--cp-space-3);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.cp-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-1);
}
.cp-nav__list li {
    position: relative;
}
.cp-nav__list a {
    display: block;
    padding: var(--cp-space-3) var(--cp-space-2);
    color: var(--cp-color-text);
    font-weight: 500;
    border-radius: var(--cp-radius-sm);
    transition: background-color var(--cp-transition-fast), color var(--cp-transition-fast);
    text-decoration: none;
}
.cp-nav__list a:hover {
    color: var(--cp-color-primary);
    background-color: var(--cp-color-primary-tint);
}
.cp-nav__list .current-menu-item > a,
.cp-nav__list .current_page_item > a {
    color: var(--cp-color-primary);
}

@media (min-width: 1024px) {
    .cp-menu-toggle { display: none; }
    .cp-nav {
        display: block;
        width: auto;
        order: initial;
        padding-top: 0;
        max-height: none;
        overflow: visible;
    }
    .cp-nav__list {
        flex-direction: row;
        gap: var(--cp-space-2);
        align-items: center;
    }
    .cp-nav__list a {
        padding: var(--cp-space-2) var(--cp-space-3);
    }
}

/* ---------- 6. Footer ---------- */
.cp-footer {
    margin-top: auto;
    background: var(--cp-color-bg-soft);
    border-top: 1px solid var(--cp-color-border-soft);
    padding-top: var(--cp-space-7);
    padding-bottom: var(--cp-space-5);
    color: var(--cp-color-text-soft);
}
.cp-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cp-space-6);
    margin-bottom: var(--cp-space-6);
}
@media (min-width: 640px) {
    .cp-footer__cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    .cp-footer__cols {
        grid-template-columns: 2fr 1fr 1fr;
    }
}
.cp-footer__col-title {
    margin: 0 0 var(--cp-space-3);
    font-size: var(--cp-text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cp-color-text);
}
.cp-footer__brand {
    font-size: var(--cp-text-xl);
    font-weight: 800;
    color: var(--cp-color-text);
    letter-spacing: -0.01em;
}
.cp-footer__tagline {
    margin-top: var(--cp-space-2);
    color: var(--cp-color-text-muted);
    font-size: var(--cp-text-sm);
}
.cp-footer__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-2);
}
.cp-footer__nav a {
    color: var(--cp-color-text-soft);
    text-decoration: none;
    font-size: var(--cp-text-sm);
}
.cp-footer__nav a:hover {
    color: var(--cp-color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.cp-footer__bottom {
    padding-top: var(--cp-space-5);
    border-top: 1px solid var(--cp-color-border-soft);
    display: flex;
    flex-direction: column;
    gap: var(--cp-space-2);
    align-items: center;
    text-align: center;
}
@media (min-width: 768px) {
    .cp-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}
.cp-footer__copy {
    margin: 0;
    color: var(--cp-color-text-muted);
    font-size: var(--cp-text-sm);
}

/* ---------- 7. Pagination ---------- */
.cp-pagination,
.navigation.pagination {
    margin-top: var(--cp-space-6);
}
.cp-pagination .nav-links,
.navigation.pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-1);
    justify-content: center;
}
.cp-pagination .page-numbers,
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--cp-space-3);
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-color-surface);
    color: var(--cp-color-text);
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--cp-transition-fast), color var(--cp-transition-fast),
                background-color var(--cp-transition-fast);
}
.cp-pagination .page-numbers:hover {
    border-color: var(--cp-color-primary);
    color: var(--cp-color-primary);
}
.cp-pagination .page-numbers.current {
    background: var(--cp-color-primary);
    color: var(--cp-color-text-on-primary);
    border-color: var(--cp-color-primary);
}
.cp-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* ---------- 8. Accessibility helpers ---------- */
/* Skip-link: visually hidden until focused. Does NOT use .screen-reader-text
 * to avoid focus-style collision (both classes have their own :focus rules). */
.cp-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--cp-z-modal);
    background: var(--cp-color-primary);
    color: var(--cp-color-text-on-primary);
    padding: var(--cp-space-2) var(--cp-space-4);
    border-radius: 0 0 var(--cp-radius-md) 0;
    font-weight: 600;
    text-decoration: none;
}
.cp-skip-link:focus {
    left: 0;
    color: var(--cp-color-text-on-primary);
    outline: none;
}

/* WordPress core class — must keep this exact name; WP outputs it in widgets,
 * comments, search forms etc., and accessibility tooling expects it. */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--cp-color-bg);
    clip: auto !important;
    clip-path: none;
    color: var(--cp-color-text);
    display: block;
    font-size: var(--cp-text-base);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ---------- 9. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * Phase 6 — Customizer-driven layout & visibility
 * ============================================================ */

/* ---------- Site branding ---------- */
.cp-site-branding {
    display: flex;
    align-items: center;
    gap: var(--cp-space-3);
    flex-wrap: wrap;
}
.cp-site-logo {
    display: inline-flex;
    align-items: center;
}
.cp-site-logo img,
.cp-site-logo .custom-logo {
    max-height: 56px;
    width: auto;
}
.cp-site-title {
    font-size: var(--cp-text-xl);
    font-weight: 800;
    color: var(--cp-color-text);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.cp-site-tagline {
    font-size: var(--cp-text-sm);
    color: var(--cp-color-text-muted);
}

/* ---------- Header variants ---------- */
.cp-header-standard .cp-header__inner {
    /* Default flex behaviour already defined under .cp-header__inner. */
}
.cp-header-centered .cp-header__inner {
    flex-direction: column;
    text-align: center;
    gap: var(--cp-space-3);
}
.cp-header-centered .cp-site-branding {
    justify-content: center;
}
.cp-header-centered .cp-header-actions {
    justify-content: center;
}
@media (min-width: 1024px) {
    .cp-header-centered .cp-nav {
        order: 3;
        width: 100%;
    }
    .cp-header-centered .cp-nav__list {
        justify-content: center;
    }
}
.cp-header-minimal .cp-header__inner {
    padding-top: var(--cp-space-3);
    padding-bottom: var(--cp-space-3);
}
.cp-header-minimal .cp-header-actions {
    display: none;
}

/* Sticky behaviour — already wired via .cp-is-sticky-ready in section 5.
 * Add explicit .cp-header-sticky class for templates that want to detect it. */
.cp-header-sticky.cp-is-sticky-ready {
    position: sticky;
    top: 0;
}

/* ---------- Header actions (right side) ---------- */
.cp-header-actions {
    display: flex;
    align-items: center;
    gap: var(--cp-space-2);
    margin-left: auto;
}
.cp-header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid var(--cp-color-border);
    border-radius: var(--cp-radius-md);
    color: var(--cp-color-text);
    cursor: pointer;
    transition: border-color var(--cp-transition-fast), color var(--cp-transition-fast);
}
.cp-header-search-toggle:hover {
    border-color: var(--cp-color-primary);
    color: var(--cp-color-primary);
}
.cp-header-search-toggle:focus-visible {
    outline: none;
    box-shadow: var(--cp-shadow-focus);
}
.cp-account-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--cp-space-2);
    color: var(--cp-color-text);
    text-decoration: none;
    border-radius: var(--cp-radius-md);
    transition: color var(--cp-transition-fast);
}
.cp-account-link:hover {
    color: var(--cp-color-primary);
    text-decoration: none;
}
.cp-header-cta {
    /* Inherits .cp-button cp-button-primary styles from components.css. */
    margin-left: var(--cp-space-1);
}

/* Search panel under the header bar.
 * [hidden] handles visibility — no display rule needed in the base state. */
.cp-header-search-panel {
    width: 100%;
    background: var(--cp-color-surface);
    border-top: 1px solid var(--cp-color-border-soft);
}
.cp-header-search-panel .cp-container {
    padding-top: var(--cp-space-3);
    padding-bottom: var(--cp-space-3);
}

/* ---------- Footer column variants ---------- */
.cp-footer-columns-2 .cp-footer__cols {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .cp-footer-columns-2 .cp-footer__cols { grid-template-columns: 1fr 1fr; }
}

.cp-footer-columns-3 .cp-footer__cols {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .cp-footer-columns-3 .cp-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cp-footer-columns-3 .cp-footer__cols { grid-template-columns: 2fr 1fr 1fr; }
}

.cp-footer-columns-4 .cp-footer__cols {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .cp-footer-columns-4 .cp-footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .cp-footer-columns-4 .cp-footer__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---------- Social links ---------- */
.cp-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cp-space-2);
    margin-top: var(--cp-space-3);
}
.cp-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--cp-color-text-soft);
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border-soft);
    border-radius: 50%;
    transition: color var(--cp-transition-fast), border-color var(--cp-transition-fast);
    text-decoration: none;
}
.cp-social-link:hover {
    color: var(--cp-color-primary);
    border-color: var(--cp-color-primary);
    text-decoration: none;
}
.cp-social-link svg {
    width: 18px;
    height: 18px;
}

/* ---------- Article content width (body-scoped) ---------- */
body.cp-article-narrow .cp-article { max-width: 640px; }
body.cp-article-normal .cp-article { max-width: 760px; }
body.cp-article-wide   .cp-article { max-width: 920px; }

/* ---------- Archive grid (body-scoped) ---------- */
body.cp-archive-grid-1 .cp-grid { grid-template-columns: 1fr; }
body.cp-archive-grid-2 .cp-grid { grid-template-columns: 1fr; }
body.cp-archive-grid-3 .cp-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
    body.cp-archive-grid-2 .cp-grid,
    body.cp-archive-grid-3 .cp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) {
    body.cp-archive-grid-3 .cp-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Blog visibility toggles ----------
 * Note: "Show author" controls only the byline in the meta row.
 * The author-box has its own independent toggle (handled in PHP via
 * cp_should_show_author_box()) and must NOT be coupled to this rule. */
body.cp-hide-author .cp-article-byline { display: none !important; }

body.cp-hide-date .cp-article-posted-on { display: none !important; }

body.cp-hide-reading-time .cp-article-reading-time,
body.cp-hide-reading-time .cp-article-meta-sep,
body.cp-hide-reading-time .cp-card__meta-sep { display: none !important; }

body.cp-hide-category-badge .cp-card__category,
body.cp-hide-category-badge .cp-card__category-inline,
body.cp-hide-category-badge .cp-article-category { display: none !important; }

body.cp-hide-single-thumbnail .cp-article--single .cp-article-thumb { display: none !important; }

/* ---------- WooCommerce visibility & grid overrides ---------- */
body.cp-wc-hide-sale .woocommerce span.onsale,
body.cp-wc-hide-sale .cp-sale-flash { display: none !important; }

body.cp-wc-hide-card-ratings .woocommerce ul.products li.product .star-rating { display: none !important; }

@media (max-width: 767px) {
    body.cp-wc-grid-m-1 .woocommerce ul.products,
    body.cp-wc-grid-m-1 .woocommerce-page ul.products { grid-template-columns: 1fr !important; }
    body.cp-wc-grid-m-2 .woocommerce ul.products,
    body.cp-wc-grid-m-2 .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) {
    body.cp-wc-grid-d-2 .woocommerce ul.products,
    body.cp-wc-grid-d-2 .woocommerce-page ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    body.cp-wc-grid-d-3 .woocommerce ul.products,
    body.cp-wc-grid-d-3 .woocommerce-page ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    body.cp-wc-grid-d-4 .woocommerce ul.products,
    body.cp-wc-grid-d-4 .woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ============================================================
 * Phase 7 — Page Templates & Landing system (layout-level rules)
 * ============================================================ */

/* ---------- Template body-class behaviours ---------- */

/* Full Width — drop the container max-width inside main.cp-page so the
 * page content can stretch. Header and footer containers stay unaffected
 * because the rule is scoped to `main.cp-page`. */
body.cp-template-full-width main.cp-page > .cp-container {
    max-width: none;
}

/* Narrow — confine the article and page content to a comfortable
 * reading column. Per-page rather than container-wide so other parts
 * (breadcrumbs, page header) can still span normally. */
body.cp-template-narrow .cp-article,
body.cp-template-narrow .cp-page-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Calculator — single-column dashboard width. */
body.cp-template-calculator .cp-article,
body.cp-template-calculator .cp-page-content {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Affiliate — wider container for product boxes & comparison tables. */
body.cp-template-affiliate .cp-article,
body.cp-template-affiliate .cp-page-content {
    max-width: var(--cp-container-lg);
    margin-left: auto;
    margin-right: auto;
}

/* Magazine Hub — prose-width intro, full container for the posts grid. */
body.cp-template-magazine-hub .cp-magazine-hub__intro {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Header / Footer hide via post meta ---------- */
/* Set _cp_page_hide_header / _cp_page_hide_footer on a page to fully hide
 * either via display:none. Markup still renders so wp_head, wp_footer and
 * hook output (SEO plugins, analytics) keep working. */
body.cp-no-header .cp-header { display: none; }
body.cp-no-footer .cp-footer { display: none; }

/* ---------- Landing Clean — reduced header & footer ---------- */
/* Removes navigation, header actions and footer columns. Keeps the brand
 * area + bottom copyright line so the page still has minimal identity. */
body.cp-template-landing-clean .cp-nav,
body.cp-template-landing-clean .cp-menu-toggle,
body.cp-template-landing-clean .cp-header-actions,
body.cp-template-landing-clean .cp-header-search-panel {
    display: none !important;
}
body.cp-template-landing-clean .cp-breadcrumbs { display: none; }
body.cp-template-landing-clean .cp-footer__cols { display: none; }
body.cp-template-landing-clean .cp-footer {
    padding-top: var(--cp-space-4);
    padding-bottom: var(--cp-space-4);
}
body.cp-template-landing-clean .cp-footer__bottom {
    border-top: 0;
    padding-top: 0;
}

/* ============================================================
 * Phase 8 — Per-page width / background / hero classes
 * Driven by post meta from the "Clickpure Seitenoptionen" admin meta box.
 * ============================================================ */

/* ---------- Width variants ---------- */
body.cp-width-default {
    /* Inherits template-driven width. */
}
body.cp-width-narrow .cp-article,
body.cp-width-narrow .cp-page-content,
body.cp-width-narrow .cp-landing-content {
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.cp-width-normal .cp-article,
body.cp-width-normal .cp-page-content,
body.cp-width-normal .cp-landing-content {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.cp-width-wide .cp-article,
body.cp-width-wide .cp-page-content,
body.cp-width-wide .cp-landing-content {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
body.cp-width-full main.cp-page > .cp-container,
body.cp-width-full main.cp-page .cp-landing-hero > .cp-container {
    max-width: none !important;
}
body.cp-width-full .cp-article,
body.cp-width-full .cp-page-content,
body.cp-width-full .cp-landing-content {
    max-width: none !important;
}

/* ---------- Background variants ---------- */
body.cp-bg-default { /* inherits theme default */ }

body.cp-bg-soft {
    background-color: var(--cp-color-bg-soft);
}

body.cp-bg-gradient {
    background:
        linear-gradient(180deg, var(--cp-color-primary-tint) 0%, var(--cp-color-bg) 35%, var(--cp-color-bg) 100%);
    background-attachment: fixed;
}

body.cp-bg-clean {
    background-color: #ffffff;
}

/* Dark mode override — only on pages that opt in. Components automatically
 * adapt because they consume the same CSS variables. */
body.cp-bg-dark {
    --cp-color-bg: #0b0f1c;
    --cp-color-bg-soft: #131825;
    --cp-color-bg-muted: #1a1f2e;
    --cp-color-surface: #1a1f2e;
    --cp-color-text: #e7eaf0;
    --cp-color-text-soft: #c5cad4;
    --cp-color-text-muted: #94a3b8;
    --cp-color-text-faint: #64748b;
    --cp-color-border: #2a3344;
    --cp-color-border-soft: #1f2632;
    --cp-color-border-strong: #3a4458;
    background-color: var(--cp-color-bg);
    color: var(--cp-color-text);
}
body.cp-bg-dark a:not(.cp-button):not(.cp-button-primary):not(.cp-button-secondary) {
    color: var(--cp-color-primary);
}

/* ---------- Hero layout variants (apply to landing-hero AND page-header) ---------- */
body.cp-hero-default {
    /* Inherits .cp-landing-hero default split. */
}

body.cp-hero-centered .cp-landing-hero__inner {
    grid-template-columns: 1fr !important;
    text-align: center;
    justify-items: center;
}
body.cp-hero-centered .cp-landing-hero__body {
    align-items: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
body.cp-hero-centered .cp-landing-hero__media {
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}
body.cp-hero-centered .cp-page-header {
    text-align: center;
    align-items: center;
}

body.cp-hero-split .cp-landing-hero__inner {
    /* Explicit two-column split — only if image is present. */
}
@media (min-width: 1024px) {
    body.cp-hero-split .cp-landing-hero--has-image .cp-landing-hero__inner {
        grid-template-columns: 1.2fr 1fr;
    }
}

body.cp-hero-minimal .cp-landing-hero {
    padding-top: var(--cp-space-5);
    padding-bottom: var(--cp-space-5);
    background: none;
}
body.cp-hero-minimal .cp-landing-hero__media {
    display: none;
}
body.cp-hero-minimal .cp-landing-hero__inner {
    grid-template-columns: 1fr !important;
}
body.cp-hero-minimal .cp-page-header {
    margin-bottom: var(--cp-space-3);
}

body.cp-hero-card .cp-landing-hero {
    padding-top: var(--cp-space-5);
    padding-bottom: var(--cp-space-5);
    background: none;
}
body.cp-hero-card .cp-landing-hero__inner {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border-soft);
    border-radius: var(--cp-radius-xl);
    box-shadow: var(--cp-shadow-lg);
    padding: var(--cp-space-7);
}
body.cp-hero-card .cp-page-header {
    background: var(--cp-color-surface);
    border: 1px solid var(--cp-color-border-soft);
    border-radius: var(--cp-radius-xl);
    box-shadow: var(--cp-shadow-md);
    padding: var(--cp-space-6);
}