/* ═══════════════════════════════════════════════════════════
   style.css – Ortodoncie MUDr. Miroslava Švábová, CSc.
   Struktura:
     1. Proměnné a základ
     2. Typografie
     3. Layout – header a main
     4. Sekce – mapa
     5. Sekce – přesun ordinace
     6. Sekce – ordinační hodiny
     7. Pomocné třídy
     8. Responzivita
     9. Tisk
   ═══════════════════════════════════════════════════════════ */


/* ─── 1. Proměnné a základ ──────────────────────────────── */

:root {
    --barva-pozadi:     #ffffff;
    --barva-panel:      #f5f5f5;
    --barva-text:       #1a1a1a;
    --barva-akcent:     #009688;  /* tyrkysová */
    --barva-okraj:      #e0e0e0;

    --font:             system-ui, -apple-system, "Segoe UI", sans-serif;

    --mezera-s:         0.75rem;
    --mezera-m:         1.5rem;
    --mezera-l:         2.5rem;
    --mezera-xl:        4rem;

    --max-sirka:        680px;
    --polomer:          8px;
}

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

html {
    font-size: 18px;      /* větší základ pro čitelnost */
    scroll-behavior: smooth;
}

body {
    font-family:    var(--font);
    color:          var(--barva-text);
    background:     var(--barva-pozadi);
    line-height:    1.65;
    padding:        var(--mezera-l) var(--mezera-m);

    margin: 0;
    min-height: 100vh;
}

/* Styl pro široké obrazovky s myší */
@media (min-width: 1200px) { 
    /* Tyrkysové bloky na stranách */
    html {
        background-color: var(--barva-akcent);
    }

    body {
        max-width: 1200px;
        margin-inline: auto;
    }
}

/* ─── 2. Typografie ─────────────────────────────────────── */

h1 {
    font-size:      clamp(2rem, 5vw, 2.75rem);
    font-weight:    700;
    line-height:    1.15;
    letter-spacing: -0.02em;
    margin-top:     var(--mezera-s);
}

h2 {
    font-size:      1.2rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--barva-akcent);
    margin-bottom:  var(--mezera-m);
}

p {
    max-width:      60ch;
}

strong {
    font-weight: 600;
}


/* ─── 3. Layout – header a main ────────────────────────── */

header,
main {
    max-width:  var(--max-sirka);
    margin:     0 auto;
}

header {
    padding-bottom: var(--mezera-l);
    border-bottom:  3px solid var(--barva-akcent);
    margin-bottom:  var(--mezera-l);
}

.perex {
    font-size:      0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--barva-akcent);
    font-weight:    600;
}

.datum {
    margin-top: var(--mezera-s);
    font-size:  0.95rem;
    color:      #555;
}

/* Oddělení jednotlivých sekcí */
main > section {
    padding-bottom: var(--mezera-l);
    margin-bottom:  var(--mezera-l);
    border-bottom:  1px solid var(--barva-okraj);
}

main > section:last-child {
    border-bottom:  none;
    margin-bottom:  0;
    padding-bottom: 0;
}


/* ─── 4. Sekce – mapa ───────────────────────────────────── */

.adresa {
    font-size:     1.05rem;
    font-weight:   600;
    margin-bottom: var(--mezera-m);
}

.mapa-wrapper {
    position:      relative;
    width:         100%;
    aspect-ratio:  16 / 9;  /* zachová poměr na všech zařízeních */
    border-radius: var(--polomer);
    overflow:      hidden;
    border:        1px solid var(--barva-okraj);
}

.mapa-wrapper iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* Tlačítko pro odložené načtení mapy (dokud uživatel neklikne,
   iframe z mapy.com se nenačte a nenastaví cookies) */
.mapa-tlacitko {
    position:        absolute;
    inset:           0;
    width:           100%;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         var(--mezera-m);
    background:      var(--barva-panel);
    border:          none;
    border-radius:   var(--polomer);
    font-family:     var(--font);
    cursor:          pointer;
    text-align:      center;
    transition:      background-color 0.15s;
}

.mapa-tlacitko:hover,
.mapa-tlacitko:focus {
    background: #ebebeb;
    outline:    none;
}

.mapa-tlacitko:focus-visible {
    outline:        2px solid var(--barva-akcent);
    outline-offset: -2px;
}

.mapa-tlacitko-text {
    font-size:   1.05rem;
    font-weight: 600;
    color:       var(--barva-akcent);
}

.mapa-tlacitko-poznamka {
    max-width: 40ch;
    font-size: 0.8rem;
    color:     #666;
    font-weight: 400;
}


/* ─── 5. Sekce – přesun ordinace ───────────────────────── */

.presun {
    display:         flex;
    align-items:     center;
    gap:             var(--mezera-m);
    background:      var(--barva-panel);
    border-radius:   var(--polomer);
    padding:         var(--mezera-m);
}

.misto {
    display:        flex;
    flex-direction: column;
    gap:            0.25rem;
    flex:           1;
    min-width:      0;  /* zabrání přetékání ve flex */
}

.stitek {
    font-size:      0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          #777;
    font-weight:    600;
}

.ulice {
    font-size:   1rem;
    font-weight: 600;
}

.cast {
    font-size: 0.9rem;
    color:     #555;
}

/* Zvýraznění nové adresy */
.misto--nova .ulice {
    color: var(--barva-akcent);
}

.sipka {
    font-size:   2rem;
    font-weight: 300;
    color:       var(--barva-akcent);
    flex-shrink: 0;
    line-height: 1;
}

/* ─── 5.1. Sekce – aktuatlity ──────────────────────── */

.aktuality {
    margin-block: 2rem;
}

.aktualita {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: var(--barva-panel);
}

.aktualita-datum {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: #555;
}

.aktualita p {
    margin: 0 0 0.75rem;
}

.aktualita p:last-child {
    margin-bottom: 0;
}

.kontakt-odkaz {
    color: var(--barva-text);
    text-decoration: none;
    border-bottom: 1px solid var(--barva-okraj);
    transition: border-color 0.15s;
}

.kontakt-odkaz:hover,
.kontakt-odkaz:focus {
    border-color: var(--barva-akcent);
    outline: none;
}

/* ─── 6. Sekce – ordinační hodiny ──────────────────────── */

table {
    border-collapse: collapse;
    margin-top:      var(--mezera-m);
    width:           100%;
    max-width:       420px;  /* rozšířeno pro dvě časová pásma */
}

table th,
table td {
    padding:       0.5rem 0;
    text-align:    left;
    border-bottom: 1px solid var(--barva-okraj);
}

table th {
    font-weight: 400;
    color:       #555;
    width:       40%;
}

table td {
    font-weight: 500;
}

/* Vizuální odlišení zavřeného dne */
.zavreno {
    color:       #999;
    font-weight: 400;
}

/* Poslední řádek bez spodní linky */
table tr:last-child th,
table tr:last-child td {
    border-bottom: none;
}


/* ─── 7. Sekce – kontakt ────────────────────────────────── */

.kontakt {
    margin-top: var(--mezera-m);
    display:    flex;
    flex-direction: column;
    gap:        0.75rem;
}

.kontakt-radek {
    display: flex;
    gap:     var(--mezera-m);
}

.kontakt dt {
    font-weight: 400;
    color:       #555;
    min-width:   80px;
}

.kontakt dd {
    font-weight: 500;
}

.kontakt a {
    color:           var(--barva-text);
    text-decoration: none;
    border-bottom:   1px solid var(--barva-okraj);
    transition:      border-color 0.15s;
}

.kontakt a:hover,
.kontakt a:focus {
    border-color: var(--barva-akcent);
    outline:      none;
}


/* ─── 8. Pomocné třídy ──────────────────────────────────── */

/* Vizuálně skrytý text přístupný pro čtečky obrazovky */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}


/* ─── 9. Responzivita ───────────────────────────────────── */

/* Na úzkých mobilech (pod 400 px) – přesun pod sebou */
@media (max-width: 400px) {
    .presun {
        flex-direction: column;
        text-align:     center;
        align-items:    center;
    }

    .sipka {
        transform: rotate(90deg);
    }
}

/* Na velkých obrazovkách – více bílého prostoru */
@media (min-width: 1200px) {
    body {
        padding: var(--mezera-xl) var(--mezera-m);
    }
}


/* ─── 10. Tisk ──────────────────────────────────────────── */

@media print {
    :root {
        --barva-akcent: #000;
        --barva-text:   #000;
    }

    body {
        font-size: 12pt;
        color:     #000;
        background: #fff;
        padding:   0;
        margin:    0;
    }

    /* Tiskové okraje */
    @page {
        size:   A4 portrait;
        margin: 2cm 2cm 2cm 2cm;
    }

    /* Mapa se netiskne */
    .mapa-wrapper {
        display: none;
    }

    /* Zrušení pozadí panelu */
    .presun {
        background: none;
        border:     1pt solid #ccc;
        padding:    12pt;
    }

    /* Zrušení stínů a zaoblení */
    header,
    main > section {
        border-color: #000;
    }

    /* Barva akcentu pouze černá */
    h2,
    .perex,
    .stitek,
    .sipka,
    .misto--nova .ulice {
        color: #000;
    }

    /* Kontaktní odkazy tisknout jako prostý text */
    .kontakt a {
        color:         #000;
        border-bottom: none;
        text-decoration: none;
    }

    /* Zabránit zlomení bloků přes stránku */
    header,
    section,
    .presun,
    table {
        page-break-inside: avoid;
    }
}