* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: sans-serif;
    background-color: #fffaf5;
}

/* Pozadi stranek */
/* body {
  background: linear-gradient(to right, #222 0%, #222 20%, #fff8e1 20%, #fff8e1 80%, #222 80%, #222 100%);
}
 */
/* body {
  background-color: #faeacc; /* nebo #f0c987 nebo jiná barva
} */
body {
    background: url("images/Pozadi_VzorCarkovany_svetly.png") repeat;
    /*background-color: #f0c987; /* fallback barva pod vzorem */
}



/* Vnejsi ram.css */
.web-frame {
    max-width: 1200px;
    margin: 10px auto;
    border: 5px solid #aa5a0f;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    background-color: white;
}


/* Oddelovaci pruh - hlavicka, telo, zapati*/
.mezera_pruh {
    height: 2px;
    background-color: #bb681a; 
    /* Barva rámu webu */
}

/* Obrazek loga*/
.logo {
    height: 130px;
    border-radius: 12px;
    /* zaobleni rohu */
}



/* HLAVICKA.css - horizontalni pruh HEADER*/
.hlavicka {
    height: 150px;
    /*background: url("images/header-bg.png") repeat-x center center;*/
    /* background-color: #fddfbf; /* #ffe5cd; /* #fff2e6; */
    background: url("images/Pozadi_VzorPixelize_1200x160.png") repeat-x center center;
    background-size: cover;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
}


/* HLAVICKA - texty v hlavicce */
.header-text {
    text-align: center;
    flex-grow: 1;
}

.header-text h1 {
    font-size: 4em;
    color: #813f02;
    font-family: 'Playfair Display', serif;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

.header-text p {
    font-size: 1.2rem;
    color: #672b13;
    font-family: 'Trebuchet ms', serif;
}


/* TELO WEBU - horizontalni pruh ve stredu webu mezi hlavickou a zapatim */
.obsah-webu {
    display: flex;
    height: 750px;
}


.obsah-webu h1,
h2,
h3 {
    color: #813f02;
    font-family: 'Lato', sans-serif;
}


.obsah-webu h1 {
    font-size: 2.0rem;
}

.obsah-webu h2 {
    font-size: 1.4rem;
}

.obsah-webu h3 {
    font-size: 1.0rem;
}

.obsah-webu p {
    font-size: 15px;
    color: #4e3526;
    font-family: "Segoe UI", sans-serif;
}

.obsah-webu li {
    padding-left: 20px;
    /* Odsazeni obsahu od leveho okraje */
    margin-left: 0;
    /* nebo pridej margin-left, pokud chces i celkove posunuti */
    list-style-type: none;
    /* Volitelne: odstrani vychozi odrazky */

    color: #804000;
}


/* Podčást - MENU.css */
.menu {
    width: 150px;
    flex-shrink: 0;
    /* zabrani nezadoucimu zmenseni sirky */
    background-color:#fff2e6; /* #f5d6b4; */
    padding: 10px;
    font-family: 'Arial', sans-serif;
}


/* Polozky MENU*/
.menu ul {
    list-style: none;
}

.menu li {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0c4a3;
    color: #804000;
}

.menu li:hover {
    background-color: #fadfc6;
}

/* INFO - podcast webu, kam se natahuje obsah .html souboru z ./data */
.info {
    flex-grow: 1;
    padding: 20px;
    background-color: #fffaf0;
    overflow-y: auto;
}


.info img {
    max-width: 100%;
    height: auto;
    display: block;
}




/* Podčást AKCE.css - podcast webu (vertikalni pruh vpravo), kam se natahuje obsah souboru akce.html z ./data */
.actions {
    width: 175px;
    flex-shrink: 0;
    /* zabrani nezadoucimu zmenseni sirky */
    padding: 20px;
    background-color: #fff2e6;
    overflow-y: auto;
}


.actions img {
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 10px;
}



/* ZAPATI.css - horizontalni pruh FOOTER*/
.zapati {
    height: 40px;
    background-color: #f5d1a3;
    text-align: center;
    line-height: 40px;
    font-weight: bold;
    color: #804000;
}

.zapati p {
    font-size: 0.8em;
    color: #813f02;
    font-family: 'Playfair Display', serif;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}


/* LIGHTBOX - nastaveni zobrazovace zvetseneho obrazku*/
#lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
}



/* FOTO GALERIE - nastaveni matrice pro zobrazeni nahledu obrazku .css */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.gallery img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s;
}


.gallery img:hover {
    transform: scale(1.05);
}


/* Ram vlozene mapky */
.mapka-wrapper {
    display: flex;
    justify-content: center;
    /* vodorovne centrovani */
}



/* Tabulka cenik*/
.cenik-tabulka {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    box-shadow: 0px 3px 6px rgb(128, 128, 128);
    /* <<< Jemný stín */
}

.cenik-tabulka th,
.cenik-tabulka td {
    border: 1px solid #caa36a;
    padding: 10px;
    text-align: center;
}

.cenik-tabulka th[colspan] {
    background-color: #f8e7c7;
    font-size: 1.2em;
    font-weight: bold;
}


/* Oddelovac */
.oddelovac {
    height: 1px;
    background-color: #e0c39d; 
    margin: 2em 0;
}


/* Cislovany animovany seznam */
.seznam-anim-cislovany {
    counter-reset: krok;
    /* připrav číslování */
    margin-left: 2em;
    padding: 0;
    color: #a05c2f;
    font-size: 15px;
    font-family: "Segoe UI", sans-serif;
    line-height: 1.4;  /* mezery mezi radky v ramci jednoho li*/
}

.seznam-anim-cislovany li {
    list-style: none;
    counter-increment: krok;
    position: relative;
    margin-bottom: 0.5em;     /* mensi mezera mezi jednotlivymi li polozkami */
    padding-left: 2.5em;
    opacity: 0;
    transform: translateX(-10px);
    animation: fadeInLeft 0.6s ease forwards;
   
}

.seznam-anim-cislovany li::before {
    content: counter(krok) ".";
    position: absolute;
    left: 0;
    top: 0;
    width: 2em;
    /* rezervovaný prostor pro číslo */
    text-align: right;
}

.seznam-anim-cislovany.odrazky li::before {
    content: "\2022"; /* znak odrážky (•) */
}


/* Jemná animace pro seznam */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



/* "X" (KRIZEK) pro zavreni obrazku */
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 2em;
  color: white;
  z-index: 9999;
  cursor: pointer;
  user-select: none;
  background-color: rgba(255, 0, 0, 0.3);
}




/* 

#lightbox {
  cursor: pointer;
}

#lightbox img {
  cursor: default;
}
 */