/*
Theme Name: MVZ Dr. Roth & Kollegen
Theme URI: https://www.nervenarztpraxis-ostfildern.de/
Author: MVZ Dr. Roth & Kollegen
Author URI: https://www.nervenarztpraxis-ostfildern.de/
Description: Redaktionelles Hybrid-Theme (klassische Templates + theme.json v3) für das Medizinische Versorgungszentrum Dr. Roth & Kollegen – Fachärzte für Neurologie, Psychiatrie und Psychotherapie. DSGVO-konform ohne externe Verbindungen, barrierefrei nach EAA/BFSG/WCAG 2.1 AA, Block-Editor-Parität mit Patterns und Block-Styles.
Version: 3.1.1
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mvz-roth
Domain Path: /languages
Tags: custom-logo, custom-menu, editor-style, block-patterns, block-styles, translation-ready, accessibility-ready, three-columns, wide-blocks, full-width-template
*/

/* =========================================================================
   CASCADE LAYERS
   -------------------------------------------------------------------------
   Declared once, here, so file load order can never change which rule wins.
   Anything unlayered (WordPress core block CSS, theme.json Global Styles,
   plugin CSS) still outranks every layer below — which is deliberate: block
   content authored in the editor must keep the styles the editor showed.
   ========================================================================= */
@layer tokens, base, layout, components, pages, utilities;

/* =========================================================================
   DESIGN TOKENS
   -------------------------------------------------------------------------
   theme.json is the single source of truth for every value that also exists
   as a block-editor preset. Each token below reads the generated
   --wp--preset--* custom property and falls back to the literal value, so the
   theme still renders correctly if Global Styles CSS is absent (e.g. an
   aggressive page cache, or a plugin that dequeues it).
   ========================================================================= */
@layer tokens {
    :root {
        /* Ink scale — warm sophisticated blacks */
        --ink-deep: var(--wp--preset--color--ink-deep, #0a1518);
        --ink: var(--wp--preset--color--ink, #1a2426);
        --ink-soft: var(--wp--preset--color--ink-soft, #4a5760);
        --ink-mute: var(--wp--preset--color--ink-mute, #626b71);
        --color-text-light: var(--ink-mute);

        /* Paper — warm off-whites for editorial feel */
        --paper: var(--wp--preset--color--paper, #faf7f2);
        --paper-warm: var(--wp--preset--color--paper-warm, #f4ede0);
        --paper-cream: var(--wp--preset--color--paper-cream, #ebe0cc);
        --pure-white: var(--wp--preset--color--white, #ffffff);

        /* Brand teal — refined and deepened */
        --teal: var(--wp--preset--color--teal, #0d4a5c);
        --teal-deep: var(--wp--preset--color--teal-deep, #062a36);
        --teal-soft: var(--wp--preset--color--teal-soft, #1a6d85);
        --teal-pale: var(--wp--preset--color--teal-pale, #e6eef0);
        --teal-glow: rgba(13, 74, 92, 0.08);

        /* Organic accents */
        --sage: var(--wp--preset--color--sage, #a8baa4);
        --sage-deep: var(--wp--preset--color--sage-deep, #6e8268);
        --clay: var(--wp--preset--color--clay, #c8896a);
        --clay-soft: var(--wp--preset--color--clay-soft, #f1d9c4);
        --clay-pale: #faf0e6;

        /* Functional */
        --alert: var(--wp--preset--color--alert, #c9543a);
        --alert-soft: #fce8e3;
        --success: var(--wp--preset--color--success, #4a6b47);

        /* Lines */
        --line: rgba(26, 36, 38, 0.08);
        --line-strong: rgba(26, 36, 38, 0.16);
        --line-teal: rgba(13, 74, 92, 0.14);
        --border: var(--line-strong);

        /* Typography */
        --font-display: var(--wp--preset--font-family--display, 'Fraunces', 'Fraunces Fallback', 'Cormorant Garamond', 'Times New Roman', Georgia, serif);
        --font-body: var(--wp--preset--font-family--body, 'Inter Tight', 'Inter Tight Fallback', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

        /* Fluid type scale */
        --text-xs: var(--wp--preset--font-size--x-small, clamp(0.72rem, 0.7vw + 0.6rem, 0.78rem));
        --text-sm: var(--wp--preset--font-size--small, clamp(0.82rem, 0.75vw + 0.65rem, 0.9rem));
        --text-base: var(--wp--preset--font-size--medium, clamp(0.95rem, 0.85vw + 0.7rem, 1.05rem));
        --text-lg: var(--wp--preset--font-size--large, clamp(1.05rem, 0.95vw + 0.8rem, 1.18rem));
        --text-xl: var(--wp--preset--font-size--x-large, clamp(1.25rem, 1.3vw + 0.9rem, 1.5rem));
        --text-2xl: var(--wp--preset--font-size--2-x-large, clamp(1.5rem, 1.8vw + 1rem, 1.95rem));
        --text-3xl: var(--wp--preset--font-size--3-x-large, clamp(2rem, 3vw + 1.2rem, 3rem));
        --text-4xl: var(--wp--preset--font-size--4-x-large, clamp(2.5rem, 4.5vw + 1.4rem, 4.5rem));
        --text-5xl: var(--wp--preset--font-size--display, clamp(3rem, 6vw + 1.5rem, 6rem));
        --text-mega: clamp(3.5rem, 8vw + 1rem, 8.5rem);

        /* Spacing */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;
        --space-24: 6rem;
        --space-32: 8rem;
        --space-40: 10rem;

        /* Layout */
        --container: 1320px;
        --container-narrow: 880px;
        --container-wide: 1480px;
        --gutter: clamp(1.25rem, 4vw, 2.5rem);
        --section-y: clamp(4rem, 9vw, 8rem);
        --header-h: 72px;

        /* Radii */
        --r-sm: 6px;
        --r: 14px;
        --r-lg: 22px;
        --r-xl: 32px;
        --r-pill: 999px;

        /* Shadows — soft and atmospheric */
        --shadow-xs: var(--wp--preset--shadow--xs, 0 1px 2px rgba(26, 36, 38, 0.04));
        --shadow-sm: var(--wp--preset--shadow--sm, 0 2px 4px rgba(26, 36, 38, 0.04), 0 4px 12px rgba(26, 36, 38, 0.04));
        --shadow: var(--wp--preset--shadow--md, 0 4px 8px rgba(26, 36, 38, 0.04), 0 12px 30px rgba(26, 36, 38, 0.08));
        --shadow-lg: var(--wp--preset--shadow--lg, 0 8px 20px rgba(26, 36, 38, 0.06), 0 24px 60px rgba(26, 36, 38, 0.12));
        --shadow-glow: 0 0 0 1px rgba(13, 74, 92, 0.06), 0 10px 40px rgba(13, 74, 92, 0.08);

        /* Motion */
        --ease: cubic-bezier(0.22, 1, 0.36, 1);
        --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
        --t-fast: 200ms;
        --t-base: 360ms;
        --t-slow: 600ms;
    }

    /* Motion tokens collapse when the visitor asks for reduced motion, so every
       transition that references them stops without scattering !important
       overrides through the sheet. */
    @media (prefers-reduced-motion: reduce) {
        :root {
            --t-fast: 0.01ms;
            --t-base: 0.01ms;
            --t-slow: 0.01ms;
        }
    }
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
@layer base {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html {
        /*
         * `overflow-x: clip`, not `hidden`.
         *
         * The off-canvas mobile panel is parked outside the viewport and, being
         * position:fixed, still stretches the document's scrollable width in
         * Chromium — 55px of phantom horizontal scrolling at 320px, which fails
         * WCAG 1.4.10 (Reflow). `hidden` would fix it too, but it turns the
         * element into a scroll container and silently breaks position:sticky
         * for every descendant, which is exactly the trap the previous version
         * fell into with `body { overflow-x: hidden }`. `clip` clips without
         * creating a scroll container, so the sticky header and the sticky
         * in-page nav keep working.
         */
        overflow-x: clip;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-size-adjust: 100%;
        scroll-padding-top: calc(var(--header-h) + var(--space-6));
    }

    /* WCAG 2.3.3 — smooth scrolling is opt-in for people who tolerate motion. */
    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }

    body {
        font-family: var(--font-body);
        font-size: var(--text-base);
        font-weight: 400;
        line-height: 1.6;
        color: var(--ink);
        background: var(--paper);
        font-feature-settings: "ss01", "cv11";
        /* No overflow-x:hidden here — it silently breaks position:sticky for
           every descendant. Horizontal overflow is contained per component. */
    }

    img, svg, video, canvas { max-width: 100%; display: block; }
    img, video { height: auto; }
    button, input, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; }
    a { color: var(--teal); text-decoration: none; transition: color var(--t-fast) var(--ease); }
    a:hover { color: var(--teal-soft); }
    ul, ol { list-style: none; }
    ::selection { background: var(--teal); color: var(--paper); }

    h1, h2, h3, h4, h5 {
        font-family: var(--font-display);
        font-weight: 400;
        line-height: 1.05;
        color: var(--ink-deep);
        letter-spacing: -0.015em;
        font-feature-settings: "ss01";
        text-wrap: balance;
    }
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-xl); }

    p { color: var(--ink-soft); line-height: 1.7; text-wrap: pretty; }

    /*
     * German compounds are long — "Schweigepflichtentbindung",
     * "Elektroenzephalogramm", "Reproduktionstoxikologie". At 320px several of
     * them were wider than the viewport and got clipped, which is content loss
     * under WCAG 1.4.10 (Reflow). `overflow-wrap` is the safety net everywhere;
     * automatic hyphenation is switched on only at narrow widths, where a
     * broken word beats a lost one. The `lang` attribute WordPress prints on
     * <html> is what tells the browser which hyphenation dictionary to use.
     */
    h1, h2, h3, h4, h5, h6,
    p, li, dt, dd, th, td, strong, summary, figcaption, label, legend, address {
        overflow-wrap: break-word;
    }

    @media (max-width: 600px) {
        h1, h2, h3, h4, h5, h6, p, li, dd, td {
            hyphens: auto;
            -webkit-hyphens: auto;
        }
    }

    /* ---- Focus states (WCAG 2.4.7 / 1.4.11) ---- */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
    input:focus-visible, select:focus-visible, textarea:focus-visible,
    summary:focus-visible {
        outline: 2px solid var(--teal);
        outline-offset: 3px;
        border-radius: var(--r-sm);
    }
    /* Forced-colors (Windows High Contrast): never let a custom outline vanish. */
    @media (forced-colors: active) {
        a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
        input:focus-visible, select:focus-visible, textarea:focus-visible {
            outline: 3px solid Highlight;
        }
    }

    /* ---- In-content link distinction (WCAG 1.4.1 — not by colour alone) ---- */
    .content-block p a,
    .content-block li a,
    .legal-content p a,
    .legal-content li a,
    .info-box a,
    .subpage-content p a,
    .subpage-content li a,
    .entry-content p a,
    .entry-content li a {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
    .content-block p a:hover,
    .legal-content p a:hover,
    .info-box a:hover,
    .entry-content p a:hover {
        text-decoration-thickness: 2px;
    }

    /* ---- Reveal-on-scroll ---- */
    @keyframes fadeUp {
        from { opacity: 0; transform: translateY(24px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
    }
    .fade-in.visible { opacity: 1; transform: translateY(0); }

    /* WCAG 2.3.3 — content must never be trapped in its hidden start state.
       With reduced motion the start state is already visible, no JS required. */
    @media (prefers-reduced-motion: reduce) {
        .fade-in { opacity: 1; transform: none; }
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* Fallback for browsers without JS: never leave revealed content hidden. */
    .no-js .fade-in { opacity: 1; transform: none; }

    /* Customizer selective refresh */
    .customize-partial-refreshing { opacity: 0.5; transition: opacity var(--t-fast); }
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
@layer utilities {
    .container {
        width: 100%;
        max-width: var(--container);
        margin: 0 auto;
        padding-inline: var(--gutter);
    }
    .container-narrow { max-width: var(--container-narrow); }
    .container-wide { max-width: var(--container-wide); }

    .sr-only,
    .screen-reader-text {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    .sr-only-focusable:focus,
    .screen-reader-text:focus {
        position: static; width: auto; height: auto; margin: 0;
        overflow: visible; clip-path: none; white-space: normal;
    }

    .eyebrow {
        display: inline-flex; align-items: center; gap: var(--space-2);
        font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500;
        color: var(--teal); text-transform: uppercase; letter-spacing: 0.16em;
    }
    .eyebrow::before {
        content: ''; width: 24px; height: 1px; background: currentColor; display: inline-block;
    }

    .display-italic { font-style: italic; font-feature-settings: "ss01"; color: var(--teal); }

    /* ---- Skip link (WCAG 2.4.1) ---- */
    .skip-link {
        position: absolute; left: -9999px; top: -9999px; z-index: 10001;
        background: var(--ink-deep); color: var(--paper);
        padding: var(--space-3) var(--space-5); border-radius: 0 0 var(--r) 0;
        font-size: var(--text-sm); font-weight: 500;
    }
    .skip-link:focus { left: 0; top: 0; color: var(--paper); }
}