/*
Theme Name: Praxis Hammerschmidt
Theme URI: https://praxis-hammerschmidt.de
Author: Axel Hammerschmidt
Author URI: https://praxis-hammerschmidt.de
Description: Modernes, pixel-perfektes Block-Theme (FSE & Classic) für die Hausarztpraxis Axel Hammerschmidt in Köln-Kalk. 100% identisch zur Praxis-Webseite aufgebaut mit allen Templates, dynamischen Tailwind-Tokens, barrierefreien Formularen und interaktiver Navigation.
Version: 4.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: praxis-hammerschmidt
Tags: block-theme, full-site-editing, custom-colors, custom-typography, custom-logo, medical, elementor-ready
*/

/* -------------------------------------------------------------------------
   1. Google Fonts & Material Symbols Icon Font
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

/* -------------------------------------------------------------------------
   2. Design Tokens & CSS Custom Properties
   ------------------------------------------------------------------------- */
:root {
    --primary: #00386c;
    --primary-container: #1a4f8b;
    --on-primary: #ffffff;
    --on-primary-container: #9bc2ff;
    --primary-fixed: #d5e3ff;
    --primary-fixed-dim: #a6c8ff;
    
    --secondary: #0062a0;
    --secondary-container: #72b8ff;
    --on-secondary: #ffffff;
    --on-secondary-container: #004878;
    --secondary-fixed: #d0e4ff;
    --secondary-fixed-dim: #9bcaff;
    
    --tertiary: #31383e;
    --tertiary-container: #484f56;
    --on-tertiary: #ffffff;
    --on-tertiary-container: #b9c1c8;
    --tertiary-fixed: #dce3eb;
    --tertiary-fixed-dim: #c0c7cf;
    
    --surface: #f8f9fa;
    --surface-dim: #d9dadb;
    --surface-bright: #f8f9fa;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f4f5;
    --surface-container: #edeeef;
    --surface-container-high: #e7e8e9;
    --surface-container-highest: #e1e3e4;
    
    --on-surface: #191c1d;
    --on-surface-variant: #424750;
    --inverse-surface: #2e3132;
    --inverse-on-surface: #f0f1f2;
    --inverse-primary: #a6c8ff;
    
    --outline: #737781;
    --outline-variant: #c2c6d1;
    --surface-tint: #2f5f9c;
    --background: #f8f9fa;
    --on-background: #191c1d;
    --surface-variant: #e1e3e4;
    --emergency-red: #D1232A;
    --ink-slate: #2D3748;
    --border-muted: #E2E8F0;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
}

/* -------------------------------------------------------------------------
   3. Base HTML & Body Settings
   ------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

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

body {
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* Material Symbols Icon Font Definition */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
    vertical-align: middle;
}

/* Explicit Color Utilities for 100% reliable rendering */
.bg-primary { background-color: var(--primary) !important; color: #ffffff !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

.bg-primary-container { background-color: var(--primary-container) !important; color: #ffffff !important; }
.text-primary-container { color: var(--primary-container) !important; }

.bg-secondary { background-color: var(--secondary) !important; color: #ffffff !important; }
.text-secondary { color: var(--secondary) !important; }

.bg-secondary-container { background-color: var(--secondary-container) !important; color: #004878 !important; }
.text-secondary-container { color: var(--secondary-container) !important; }
.text-on-secondary-container { color: #004878 !important; }

.bg-surface { background-color: var(--surface) !important; }
.bg-surface-container-lowest { background-color: var(--surface-container-lowest) !important; }
.bg-surface-container-low { background-color: var(--surface-container-low) !important; }
.bg-surface-container { background-color: var(--surface-container) !important; }
.bg-surface-container-high { background-color: var(--surface-container-high) !important; }
.bg-surface-container-highest { background-color: var(--surface-container-highest) !important; }

.text-on-surface { color: var(--on-surface) !important; }
.text-on-surface-variant { color: var(--on-surface-variant) !important; }
.text-on-primary { color: var(--on-primary) !important; }
.text-white { color: #ffffff !important; }

.bg-emergency-red { background-color: var(--emergency-red) !important; color: #ffffff !important; }
.text-emergency-red { color: var(--emergency-red) !important; }

.bg-primary-fixed { background-color: var(--primary-fixed) !important; color: #001c3b !important; }
.text-on-primary-fixed { color: #001c3b !important; }

/* Typography fonts & sizes */
.font-display-lg { font-family: 'Manrope', sans-serif !important; font-weight: 800 !important; }
.font-headline-lg { font-family: 'Manrope', sans-serif !important; font-weight: 700 !important; }
.font-headline-md { font-family: 'Manrope', sans-serif !important; font-weight: 600 !important; }
.font-body-lg { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; }
.font-body-md { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; }
.font-label-bold { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; }
.font-caption { font-family: 'Inter', sans-serif !important; font-weight: 400 !important; }

/* Custom UI Utilities */
.backdrop-blur-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.text-glow-primary {
    text-shadow: 0 0 20px rgba(0, 56, 108, 0.4);
}

.form-card {
    background: #ffffff;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
}

.form-input-focus:focus {
    outline: none;
    box-shadow: 0 0 0 2px #0062a0;
}

/* Cologne Skyline Banner at bottom */
.cologne-banner {
    background: linear-gradient(to top, rgba(248, 249, 250, 0.95), rgba(248, 249, 250, 0.6)), 
                url('https://images.unsplash.com/photo-1596489370002-f8c650a3692d?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center bottom;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Checkmark draw animation for confirmation pages */
.success-checkmark-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 0.6s ease-out forwards;
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@media (min-width: 640px) {
    .time-slot-options {
        justify-content: flex-start !important;
        gap: 1.25rem !important;
    }
    .time-slot-options > span {
        min-width: 205px !important;
        flex-shrink: 0 !important;
    }
}