/* ==========================================================================
   2. Layout Stránky (Wrapper, Hlavička, Hlavní Obsah, Patička)
   ========================================================================== */

/* --- Obalovač celé stránky --- */
.page-wrapper {
    display: flex;          /* Používá flexbox pro vnitřní uspořádání (hlavička, obsah, patička) */
    flex-direction: column; /* Obsah bude uspořádán vertikálně pod sebou */
    min-height: 100vh;      /* Zajišťuje, že obalovač zabere alespoň celou výšku okna */
    width: 100%;            /* Zabere celou dostupnou šířku */
}

/* --- Hlavička --- */
.app-header {
    text-align: center;     /* Centrování obsahu hlavičky (logo, nadpis) */
    padding: 20px 15px;     /* Vnitřní odsazení (nahoře/dole 20px, vlevo/vpravo 15px) */
    padding-bottom: 10px;   /* Specificky zmenšený spodní padding */
    flex-shrink: 0;         /* Zabrání zmenšování hlavičky, pokud by obsah tlačil */
}

/* --- Logo v hlavičce --- */
#app-logo {
    max-width: 250px;       /* Maximální šířka loga, aby nebylo příliš velké */
    height: auto;           /* Výška se automaticky přizpůsobí šířce pro zachování poměru stran */
    margin-bottom: 15px;    /* Vnější okraj pod logem pro odsazení od nadpisu */
    display: block;         /* Zajistí, že se logo chová jako blokový element (pro margin auto) */
    margin-left: auto;      /* Automatický levý okraj pro centrování */
    margin-right: auto;     /* Automatický pravý okraj pro centrování */
}

/* --- Hlavní nadpis stránky (H1) --- */
h1 {
    color: #2c3e50;         /* Barva textu nadpisu */
    margin-top: 0;          /* Nulový horní okraj (už řeší padding hlavičky) */
    margin-bottom: 15px;    /* Spodní okraj pod nadpisem */
    font-weight: 400;       /* Tloušťka písma (400 je normální) */
    font-size: 24px;        /* Velikost písma nadpisu */
}

/* --- Hlavní obsah (kontejner pro menu nebo text) --- */
.menu-content {
  
    display: flex;          /* Použijeme flexbox pro vnitřní uspořádání obsahu */
    flex-direction: column; /* Výchozí směr je sloupec (např. pro textové bloky, běžná menu) */
    align-items: center;    /* Centruje položky horizontálně (pokud je směr sloupec) */
    padding: 15px;          /* Vnitřní odsazení kontejneru */
    /* === KLÍČOVÁ ÚPRAVA PRO PŘETÉKÁNÍ === */
    overflow-y: auto;       /* Povolí vertikální rolování POUZE POKUD je obsah vyšší než kontejner */
                            /* Zabrání přetékání obsahu přes patičku a umožní rolovat jen obsah */
}

/* --- Patička --- */
.app-footer {
    text-align: center;     /* Centrování textu v patičce */
    padding: 10px 15px;     /* Vnitřní odsazení (nahoře/dole 10px, strany 15px) */
    margin-top: auto;       /* Automatický horní okraj - klíčové pro "přilepení" patičky dolů */
                            /* Funguje díky flex layoutu na .page-wrapper a flex-grow: 1 na .menu-content */
    background-color: #dee2e6; /* Barva pozadí patičky */
    color: #495057;         /* Barva textu v patičce */
    font-size: 12px;        /* Menší velikost písma */
    flex-shrink: 0;         /* Zabrání zmenšování patičky, pokud by obsah tlačil */
    border-top: 1px solid #adb5bd; /* Jemná horní linka pro vizuální oddělení od obsahu */
}

.app-footer p {
    margin: 0; /* Odstraní výchozí okraj odstavce uvnitř patičky */
}

/* --- Styly pro ikonu s textem do nápovědy--- */
.help-menu-list {
    list-style: none; /* Odstraní odrážky seznamu */
    padding: 0;
    margin: 1em 0; /* Přidá trochu vertikálního prostoru */
}

.help-menu-list li {
    display: flex; /* Použije Flexbox pro zarovnání ikony a textu */
    align-items: center; /* Vertikálně vycentruje ikonu a text */
    margin-bottom: 2em; /* Odsazení mezi položkami seznamu */
}

.help-icon {
    width: 45px; /* Zachová vaši velikost */
    height: 45px;
    margin-right: 10px; /* Mezera mezi ikonou a textem */
    flex-shrink: 0; /* Zajistí, že se ikona nezmenší, pokud je text dlouhý */
}

/* Styly pro ikony v iOS instrukcích */
.inline-icon.ios-icon {
    vertical-align: middle; /* Lepší zarovnání s textem */
    height: 1.2em; /* Upravte velikost podle potřeby */
    width: auto;
    margin: 0 0.2em; /* Malá mezera kolem ikony */
}

/* Styly pro sekce Přidat na plochu */
.add-to-home-section {
    margin-bottom: 1.5em;
    padding-left: 10px; /* Lehké odsazení */
    border-left: 3px solid #eee; /* Vizuální oddělení */
}

.add-to-home-section h3 {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.add-to-home-section ol {
    padding-left: 20px; /* Standardní odsazení pro číslovaný seznam */
}

.add-to-home-section ol li {
    margin-bottom: 0.5em; /* Mezera mezi kroky */
}

/* === Styly pro video === */
.modal-video-container {
    margin: 1em 0; /* Vertikální odsazení kontejneru videa */
    background-color: #f0f0f0; /* Jemné pozadí pro odlišení */
    padding: 10px; /* Malý vnitřní okraj */
    border-radius: 8px; /* Stejné zaoblení jako u videa */
    text-align: center; /* Vycentruje video, pokud by bylo užší než kontejner */
}

.modal-video-container video {
    display: block; /* Odstraní případné mezery pod videem */
    max-width: 100%; /* Zajistí responzivitu - nepřeteče */
    height: auto;      /* Zachová poměr stran */
    border-radius: 4px; /* Zaoblené rohy pro video (přesunuto z inline stylu) */
    border: 1px solid #ccc; /* Jemný okraj kolem videa */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Jemný stín */
    margin: 0 auto; /* Vycentruje video v kontejneru */
}
hr {
    border: none;                /* Odstraní výchozí rámeček/efekty */
    border-top: 1px solid #ccc;  /* Vytvoří tenkou horní linku (1px) s šedou barvou (#ccc) */
    height: 0;                   /* Zajistí, že element nemá žádnou výšku navíc */
    margin: 1.5em 0;             /* Přidá vertikální odsazení (nahoře a dole) - upravte podle potřeby */
    color: #ccc;                 /* Barva pro starší prohlížeče (někdy se používá) */
    background-color: #ccc;      /* Barva pro některé jiné případy */
    overflow: visible;           /* Standardní hodnota, někdy potřeba pro reset */
}
main {
  flex-grow: 1; /* KLÍČOVÉ: Main vyplní veškeré volné místo a odtlačí patičku */
  /* Nepotřebujete zde nutně display: flex, pokud nechcete speciálně zarovnávat .menu-content a .centered-controls mezi sebou */
    display: flex;
  flex-direction: column;
  /* ============================ */

}
/* === centrování nadpisu- vyberte AR scénu === */
.centered-heading h1 {
    text-align: center !important;
    margin-top: 1rem;
    margin-bottom: 2rem;
}



/* === NOVÉ STYLY pro druhý kontejner === */
/* V layout.css nebo pages.css */
.centered-controls {
  display: flex;
  flex-direction: column; /* Seřadí své potomky POD sebe */
  align-items: center;   /* Zarovná potomky horizontálně NA STŘED */
  padding: 1rem 0;       /* Odsazení nahoře/dole */
  gap: 15px;             /* Mezera MEZI mapou, tlačítkem zpět a nápovědou */
  margin-top: auto; 
}

/* Můžete přidat specifické styly pro prvky uvnitř .centered-controls, pokud je potřeba */
/* Např. zajistit minimální/maximální šířku */
.centered-controls .map-section-minimal,
.centered-controls .back-button-container,{
   width: 90%; /* Nebo jiná šířka */
   max-width: 400px; /* Maximální šířka pro lepší vzhled na velkých obrazovkách */
}

.centered-controls .map-button-minimal,
.centered-controls .back-button {
   display: block; /* Aby odkaz/tlačítko zabralo celou šířku kontejneru */   
   text-align: center; /* Vycentrování textu v tlačítku */
}