:root {
    --bordo: #800020; /* Sytá vínová */
    --sunflower: #FFC30B; /* Slunečnicová žlutá */
    --beige: #FFEDC5; /* Teplé neutrální pozadí */
    --text: #2D1E1E; /* Tmavé písmo ladící k bordó */
    --white: #FCFAFA; /* Čistší bílá pro vnitřek karty */
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: 'Cormorant Garamond', serif;
    background-color: var(--white);
    color: var(--text);
    overflow-x: hidden;
}


@font-face {
    font-family: 'Queen of the Moon';
    src: url('assets/fonts/queen-of-the-moon/QueenoftheMoonLight.woff2') format('woff2'), url('assets/fonts/queen-of-the-moon/QueenoftheMoonLight.woff') format('woff');
    font-weight: 300;
    font-style: normal; /* bylo italic */
    font-display: swap;
}

/* --- ROZVRŽENÍ SEKCÍ --- */
section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100vh;
    padding: 10vh 5vw;
    position: relative;
    z-index: 1; /* Aby sekce tvořila kontext pro obrázky */
}
    /* Texty a tlačítka musí být VŽDY nad dekorativními obrázky */
    section > * {
        z-index: 2;
        position: relative;
    }

    section.alt {
        background-color: var(--beige);
    }

/* --- TYPOGRAFIE --- */

/* Hlavní název (Klárka & Kája) */
h1 {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family: 'Queen of the Moon', cursive;
    font-size: clamp(6rem, 10vw + 2rem, 12rem);
    color: var(--bordo);
    margin: 5vh 0 0 0;
    font-weight: 400;
    font-style: italic; /* Aby Safari vědělo, že má použít tu kurzivní verzi fontu */
    line-height: 1.1; /* Aby u velkého písma nebyly obří mezery nad/pod */
    text-transform: none; /* Safari občas blbne, když se snaží dělat automatická velká písmena */
}

/* Nadpisy sekcí */
h2 {
    font-size: clamp(2.5rem, 4vw + 1rem, 3.5rem); /* Zmenšeno */
    color: var(--bordo);
    font-style: italic;
    font-weight: 600;
    margin: 0 0 1.5rem 0; /* Margin-top nastaven na 0, zruší obří mezeru např. u Harmonogramu */
    letter-spacing: normal; /* Zúženo - zrušeno umělé roztahování písmen */
    
}

/* Běžný text (subtext) */
p {
    font-size: clamp(1.25rem, 1vw + 1rem, 1.5rem);
    max-width: 800px;
    line-height: 1.6;
    margin: 0.5rem 0;
}

/* Zvýraznění klíčových slov */
.daje {
    color: var(--bordo);
    font-weight: bold;    
}

/* Dělicí linka mezi texty */
.divider {
    width: 35vw;
    height: 2px;
    background: var(--sunflower);
    margin: 2.5rem 0;
}

/* --- TLAČÍTKA --- */
.button {
    display: inline-block;
    background: var(--bordo);
    color: var(--white);
    text-decoration: none;
    padding: 15px 35px;
    border-radius: 50px;
    margin: 10px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    font-size: 1.5rem;
    border: 2px solid var(--bordo);
    transition: all 0.3s ease;
}

    .button:hover {
        background: var(--sunflower);
        border-color: var(--sunflower);
        color: var(--bordo);
        transform: scale(1.05);
    }

/* --- OBRÁZKY A DEKORACE --- */

/* Pro rohové obrázky */
.img-over {
    position: absolute;
    pointer-events: none;
    z-index: 0; /* Zůstane pod textem */
    width: clamp(150px, 25vw, 350px);
}


/* --- HARMONOGRAM (Do řady) --- */
.timeline {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    max-width: 1000px;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px; /* Šířka jedné položky */
}

    .timeline-item p {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--bordo);
        margin-bottom: 0.5rem;
        line-height: 1.2;
    }

.timeline-icon {
    width: 60px; /* Velikost malé slunečnice pod textem */
    height: auto;
}

/* --- NOVÁ POZADÍ A ODSAZENÍ PRO SEKCE --- */


/* --- SJEDNOCENÝ STYL PRO SEKCE S RÁMEM --- */
.bg-ram-section {
    background-image: url('assets/slunecnice-ram.png');
    background-size: cover;
    background-position: top center ;
    background-repeat: no-repeat;

    position: relative;
    z-index: 1;


    /* prostor pro horní květiny */
    padding-top: clamp(180px, 22vh, 260px);
    padding-bottom: 10vh;

    /* zabrání kolapsu sekce */
    min-height: 70vh;
}





/* Pozadí pro Dary (rohová slunečnice jako pozadí) */
.bg-roh-pd {
    background-image: url('assets/slunecnice-rohPD.png');
    background-size: clamp(150px, 30vw, 400px);
    background-position: right bottom;
    background-repeat: no-repeat;
    min-height: auto !important; /* Zruší zbytečně velkou výšku sekce */
    padding-top: 10vh !important; /* Menší mezera nahoře */
    padding-bottom: clamp(150px, 25vh, 300px) !important; /* Dostatek místa dole pro kytici */
}



/* --- KONTTAKTY  --- */
.bg-roh-left {
    background-image: url('assets/slunecnice-rohLD.png') ;
    background-size: clamp(150px, 30vw, 400px) ; /* Sjednoceno s .bg-roh-pd */
    background-position: left bottom; /* Změněno na bottom, aby to sedělo v rohu */
    background-repeat: no-repeat ;
    min-height: auto !important;
    padding-top: 10vh !important;
    padding-bottom: clamp(150px, 25vh, 300px) !important; /* Prostor pro kytici v rohu */
}

/* --- DRESSCODE ÚPRAVA (Bez rámu) --- */
.bg-transparent-section {
    background: var(--white); /* Nebo var(--beige), pokud je v alt sekci */
    position: relative;
    padding-top: 5vh !important;
    padding-bottom: 5vh !important;
}

/* --- DRESSCODE (Zrušení všech efektů obrázku) --- */
.img-dresscode-clean {
    max-width: 100%;
    height: auto;
    margin-top: 2rem;
    border: none !important; /* Natvrdo zruší rámeček */
    box-shadow: none !important; /* Natvrdo zruší stín */
    border-radius: 0 !important; /* Zruší zaoblení */
    mix-blend-mode: multiply; /* Splyne s krémovým/bílým pozadím */
}



/* --- RESPONZIVITA PRO MOBILY --- */
@media (max-width: 768px) {
    section {
        padding: 60px 20px;
        min-height: auto;
    }

    /* Na mobilu spodní široké rámy skryjeme, nebo je necháme, ale změníme chování */
    .img-over {
        width: 45vw;
    }
    .bg-ram-section {
        /* Změna na 'contain' zajistí, že se obrázek nedeformuje a neroztáhne */
        background-size: cover;
        background-position: top center;

        /* Padding na mobilu musí být dostatečný, aby text nezačínal v kytkách */
        /* Výpočet: cca 30% šířky obrazovky zabírá horní grafika rámu */
        padding-top:clamp(140px, 28vh, 220px);
        padding-bottom: 60px;
    
   

        /* stabilní výška */
        min-height: 60vh;


    }
}




/* Login Screen */
#login-screen {
    position: fixed;
    inset: 0;
    background: var(--beige);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px; 
}

.login-card {
    background: white;
    border-top: 5px solid var(--sunflower); /* Žlutý proužek navíc pro Slunečnicový akcent */
    padding: clamp(2rem, 5vw, 4rem); /* Větší padding pro pocit vzdušnosti */
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    width: 90%;
    max-width: 550px; /* Trochu širší karta */
    container-type: inline-size;
}

/* Styl pro logo Klárka & Karel */
.login-logo {
    font-family: 'Queen of the Moon', cursive;
    font-style: normal;
    font-weight: 300;

    font-size: clamp(2.5rem, 16cqw, 7rem); /* Písmo se nyní zmenšuje podle šířky KARTY (cqw), nikoliv celého okna. 
       To zajistí, že nikdy nevyteče přes okraj karty. */
    color: var(--bordo);
    margin: 0;
    line-height: 1.1;
    margin-bottom: 0.5rem;
    
    white-space: nowrap; /* Zakáže zalomení na nový řádek */
    display: block; /* Zajistí správné chování elementu */
    width: 100%; /* Drží se šířky kontejneru */
}

.login-card p {
    font-family: 'Cormorant Garamond', serif;
    color: var(--text);
    margin-bottom: 2rem;
    font-size: 1.6rem;
}

#password {
    width: 100%;
    padding: 15px;
    margin-bottom: 1rem;
    border: 1px solid #ddd; /* Sjednocen rámeček */
    border-radius: 8px;
    text-align: center;
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
}

/* Tlačítko Vstoupit  */
.login-card button {
    background-color: var(--bordo); 
    color: var(--white);
    border: 2px solid var(--bordo);
    padding: 15px 30px;
    border-radius: 50px;
    cursor: pointer;
    font-family: 'cormorant garamond', serif;
    font-weight: 600;
    font-size: 1.5rem;
    transition: transform 0.2s, opacity 0.2s;
    width: 100%; /* Aby tlačítko ladilo k šířce inputu */
}
    .login-card button:hover {
        background-color: var(--sunflower);
        border-color: var(--sunflower);
        color: var(--bordo); /* Text se změní na vínovou pro kontrast */
        transform: scale(1.02);
        opacity: 0.9;
    }
 #error {
    color: var(--bordo);
    font-size: 1.5rem;
    min-height: 1.5rem;
    margin: 10px;
}

/* --- Konec opravy pro Login Screen --- */