/*
Theme Name: Dintes Dental
Theme URI: https://paladius.cz
Author: Paladius
Author URI: https://paladius.cz
Description: Onepage web pro Dintes Dental - stomatologickou ordinaci ve Zlíně. Šablona na míru od Paladius.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dintes-dental
*/

/* -------------------------------------------------
   RESET
------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Aby fixní header nepřekrýval sekce při kliknutí na kotvu v menu */
#o-nas,
#tym,
#sluzby,
#cenik,
#kontakt {
    scroll-margin-top: 140px;
}

@media (max-width: 900px) {
    #o-nas,
    #tym,
    #sluzby,
    #cenik,
    #kontakt {
        scroll-margin-top: 110px;
    }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { font: inherit; border: none; background: none; padding: 0; margin: 0; cursor: pointer; }
input, textarea, select { font: inherit; }

/* -------------------------------------------------
   CSS PROMĚNNÉ
------------------------------------------------- */
:root {
    --color-primary:  #231F20; /* hlavní tmavá barva - text, nadpisy, logo */
    --color-accent:   #C39065; /* akcentová zlatavá/tan barva - CTA, čísla, zvýraznění */
    --color-accent-light: #D8B896;
    --color-text:     rgba(35, 31, 32, 0.65);
    --color-text-light: rgba(255, 255, 255, 0.75);
    --color-bg:       #ffffff;
    --color-bg-light: #FAF8F6;
    --color-dark:     #1F1F1F;
    --color-border:   rgba(35, 31, 32, 0.1);

    --font-heading:   'Montserrat', sans-serif;
    --font-primary:   'Urbanist', sans-serif;

    --max-width: clamp(1200px, 80vw, 1500px);
    --border-radius: 4px;
    --transition: all 0.3s ease;

    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
}

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-weight: 400;
    line-height: 1.2;
}

/* -------------------------------------------------
   FADE-IN UTILITY ANIMACE (IntersectionObserver, main.js)
------------------------------------------------- */
.fade-in,
.fade-in-left,
.fade-in-right {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in { transform: translateY(30px); }
.fade-in-left { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }

.fade-in.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }

/* -------------------------------------------------
   INTRO / LOADING ANIMACE
------------------------------------------------- */
#intro-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#intro-loader.intro-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#intro-loader .intro-logo {
    width: 220px;
    opacity: 0;
    transform: scale(0.92);
    animation: introLogoIn 1.1s ease forwards;
}

@keyframes introLogoIn {
    to { opacity: 1; transform: scale(1); }
}

body.intro-active {
    overflow: hidden;
}