/* ─── Lékař roku — vlastní styl ────────────────────────────────────────────── */
/* Zachovává vizuální identitu puvodni_web, přizpůsobeno Simple Admin v3 HTML */

* { padding: 0; margin: 0; }

html { background-color: #f0f0f0; }

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.3;
}

h2 { font-size: 30px; }
h3 { font-size: 23px; }

.hidden { display: none !important; }

/* ─── Layout ────────────────────────────────────────────────────────────────── */
#page_home main,
#page_hlasovani main,
#page_o-ankete main,
#page_kontakty main,
#page_historie main,
#page_404 main {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

/* Fallback wrapper width */
main {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

/* ─── Header / Menu ─────────────────────────────────────────────────────────── */
#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 960px;
    margin: 0 auto;
    padding: 20px 0;
}

#logo {
    display: block;
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background: transparent url('/static/img/logo_unie.png') no-repeat center center;
    background-size: contain;
}

#logo:hover { opacity: 0.85; }

#menu {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 18px;
}

#menu .menu-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
}

#menu .menu-links li { display: block; }

#menu a, #menu a:visited {
    text-decoration: none;
    color: #000;
}

#menu a:hover, #menu a:active { color: #3C6D89; }

#menu a.active, #menu a.active:visited { color: #3C6D89; }

/* Hamburger trigger — skrytý na desktopu */
.menu-trigger {
    display: none;
    width: 30px;
    height: 26px;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}

.menu-trigger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #000;
    border-radius: 2px;
    left: 0;
    transition: .25s ease-in-out;
}

.menu-trigger span:nth-child(1) { top: 3px; }
.menu-trigger span:nth-child(2),
.menu-trigger span:nth-child(3) { top: 12px; }
.menu-trigger span:nth-child(4) { top: 21px; }

/* Animace do X při toggle */
#header.toggle .menu-trigger span:nth-child(1) { top: 12px; width: 0; left: 50%; }
#header.toggle .menu-trigger span:nth-child(2) { transform: rotate(45deg); }
#header.toggle .menu-trigger span:nth-child(3) { transform: rotate(-45deg); }
#header.toggle .menu-trigger span:nth-child(4) { top: 12px; width: 0; left: 50%; }

/* ─── Úvodní stránka ────────────────────────────────────────────────────────── */
.go {
    position: relative;
    width: 960px;
    height: 440px;
    background: #fff url('/static/img/background.png') no-repeat top left;
    margin-top: 0;
}

.go h1 {
    position: absolute;
    top: 150px;
    left: 50px;
    font-size: 32px;
}

.go h1 span {
    display: block;
    font-size: 84px;
    margin-left: -4px;
}

.mutton {
    width: 252px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    color: #fff;
    background-color: #ed1c24;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    top: 190px;
    left: 620px;
    border-radius: 5px;
    cursor: pointer;
    display: block;
}

.mutton:hover { background-color: #3C6D89; color: #fff; }

/* ─── Partneři ──────────────────────────────────────────────────────────────── */
.partners {
    position: relative;
    margin-top: 30px;
    margin-bottom: 80px;
}

.partners span { position: absolute; left: -9999em; }

.partners .block { text-align: center; }

.partners .title {
    display: block;
    margin: 40px 0 0;
}

.partners a {
    display: inline-block;
    transition: opacity .2s ease;
    opacity: 1;
    background-size: auto 100% !important;
}

.partners a:focus, .partners a:hover { opacity: 0.6; }

.partners a.horni {
    vertical-align: baseline;
    margin: 60px 30px 0 30px;
}

.partners a.spodni {
    vertical-align: top;
    margin: 60px 20px 0 20px;
}

.partners .egis {
    background: transparent url('/static/img/partneri/egis_web.png') no-repeat center center;
    width: 220px; height: 120px;
    margin: 40px 20px -10px 20px !important;
}

.partners .vzp {
    background: transparent url('/static/img/partneri/logo_vzp.png') no-repeat center center;
    width: 200px; height: 80px;
}

.partners .allianz {
    background: transparent url('/static/img/partneri/logo_allianz.png') no-repeat center center;
    background-size: contain !important;
    width: 280px; height: 80px;
}

.partners .mojeobrazovka {
    background: transparent url('/static/img/partneri/mojeobrazovka_web2.png') no-repeat center center;
    width: 200px; height: 100px;
}

.partners .dvojka {
    background: transparent url('/static/img/partneri/cro2.png') no-repeat center center;
    background-size: 100% auto !important;
    width: 200px; height: 120px;
}

.partners .hci {
    background: transparent url('/static/img/partneri/logo_hci.png') no-repeat center center;
    width: 142px; height: 60px;
    margin: 80px 20px 0 20px !important;
}

/* ─── Textové stránky ───────────────────────────────────────────────────────── */
.formular, .default {
    background-color: #fff;
    padding: 110px 60px 50px;
    font-size: 18px;
    color: #777;
    min-height: 600px;
}

.default { padding-bottom: 110px; }

.formular a, .formular a:visited,
.default a, .default a:visited {
    text-decoration: none;
    color: #3C6D89;
}

.formular a:hover, .default a:hover { text-decoration: underline; }

.formular h1, .default h1 {
    font-size: 32px;
    color: #777;
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #DDD;
    position: relative;
}

.formular h1 span {
    font-weight: normal;
    position: absolute;
    display: block;
    right: 0;
    top: 0;
}

.default p { margin-bottom: 15px; }
.default ul { padding: 0 0 20px 20px; }
.default ul li { margin-bottom: 15px; }

/* ─── Hlasovací formulář ────────────────────────────────────────────────────── */
.formular table { width: 100%; }

.formular table td {
    width: 66%;
    padding: 5px 0;
    position: relative;
}

.formular table td.label {
    width: 34%;
    padding-right: 10px;
}

.formular table td label.clickable { cursor: pointer; }
.formular table td label.myerror { color: #ff0000; }
.formular table td label.clickable input { margin-right: 10px; }

.formular table td .third {
    width: 29%;
    float: left;
    margin-left: 4.3%;
    position: relative;
    padding: 10px 0;
}

/* position: relative nutné pro absolutně pozicovaný checkbox uvnitř labelu */
.formular table td .third label,
.formular table td .half label,
.formular table tr.user_confirm td label {
    position: relative;
}

.formular table td .third label { font-weight: bold; }

.formular table td .half {
    width: 40%;
    float: left;
    margin-left: 5%;
    position: relative;
    padding: 10px 0;
}

.formular .third label:hover,
.formular .user_confirm label:hover { cursor: pointer; }

.formular input[type="text"] {
    width: 95%;
    padding: 2.3%;
    font-size: 22px;
    border: 1px solid #ddd;
    background-color: #fafafa;
}

.formular input[type="checkbox"] {
    position: absolute;
    top: 5px;
    left: -22px;
}

.formular sup { font-size: 12px; margin: 0 5px; }

.formular button {
    padding: 30px 50px;
    color: #fff;
    background-color: #3C6D89;
    border: 1px solid #fff;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    float: right;
}

.formular button:hover { background-color: #4984a7; }

.formular table tr.user_confirm td {
    padding: 30px 0 30px 30px;
    width: 95%;
}

.formular table tr.info td { padding-top: 30px; }

.legend {
    padding-top: 40px;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    font-size: 16px;
    clear: both;
}

/* ─── Stavové zprávy ────────────────────────────────────────────────────────── */
.error {
    border: 1px solid #d55000;
    background-color: #ffdbc6;
    color: #d55000;
    padding: 20px;
    margin-bottom: 40px;
}

.success {
    border: 1px solid #1CD500;
    background-color: #CAFFC6;
    color: #1CD500;
    padding: 20px;
    margin-bottom: 40px;
}

span.required { color: #ed1c24; font-weight: bold; }

div.hlasovani {
    display: block;
    padding: 30px 0;
    text-align: center;
    font-weight: bold;
}

div.hlasovani h2 { padding-bottom: 20px; }

/* ─── Kontakty ──────────────────────────────────────────────────────────────── */
.contacts {
    position: relative;
    width: 100%;
    padding-top: 60px;
}

.contacts .half {
    float: left;
    width: 50%;
}

/* ─── Historie / Vyhlášení ──────────────────────────────────────────────────── */
.alternate h2 {
    padding-top: 0;
    padding-bottom: 60px;
    clear: both;
}

.alternate h3 {
    padding-top: 60px;
    padding-bottom: 20px;
    clear: both;
}

.alternate .listina { padding-bottom: 80px; }

.alternate .listina h2 { padding: 0 0 10px; }

#submenu {
    position: absolute;
    top: 25px;
    right: 40px;
    font-size: 18px;
    max-width: 750px;
}

#submenu ul { list-style-type: none; }

#submenu ul li {
    display: inline-block;
    padding: 3px 15px;
    margin: 0 0 10px;
    border-right: 1px solid #ddd;
}

#submenu a { color: #3C6D89; text-decoration: none; }
#submenu a:hover { text-decoration: underline; }
#submenu a.active { font-weight: bold; }

.historie-seznam { padding: 20px 0; }

.historie-rok {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.historie-rok a { color: #3C6D89; text-decoration: none; }
.historie-rok a:hover { text-decoration: underline; }

iframe {
    display: block;
    width: 840px;
    height: 472px;
    margin: 20px 0;
    max-width: 100%;
}

/* ─── Patička ───────────────────────────────────────────────────────────────── */
#footer {
    width: 960px;
    margin: 0 auto;
    clear: both;
    color: #3c6d89;
    border-top: 1px solid #3c6d89;
    font-size: 14px;
    padding: 2px 0 40px;
    margin-top: 50px;
}

#footer a, #footer a:visited { color: #3c6d89; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer .left { float: left; }
#footer .right { float: right; }

/* ─── Utility ───────────────────────────────────────────────────────────────── */
.clear { clear: both; }
.pb0 { padding-bottom: 0 !important; }
.mt100 { margin-top: 100px !important; }

/* ═══════════════════════════════════════════════════════════════════════════════
   RESPONZIVNÍ / MOBILNÍ VERZE
   breakpoint 980px = tablet, 640px = mobil
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 980px) {

    /* Layout — fluid místo fixed 960px */
    main,
    #page_home main, #page_hlasovani main, #page_o-ankete main,
    #page_kontakty main, #page_historie main, #page_404 main {
        width: 100%;
        box-sizing: border-box;
    }

    #header {
        width: 100%;
        padding: 12px 20px;
        box-sizing: border-box;
        gap: 0;
        position: relative;
        z-index: 20;
    }

    #logo {
        width: 52px;
        height: 52px;
    }

    #menu {
        gap: 0;
    }

    /* Hamburger viditelný, přilepený vpravo */
    .menu-trigger { display: block; }

    /* Nav skrytý — zobrazí se jen při toggle */
    #menu .menu-links {
        display: none;
    }

    /* Otevřené menu — fullscreen overlay */
    #header.toggle .menu-links {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #3C6D89;
        z-index: 100;
        padding: 80px 40px 40px;
    }

    #header.toggle .menu-links li {
        display: block;
        margin: 0 0 20px 0;
    }

    #header.toggle .menu-links li a {
        font-size: 26px;
        font-weight: bold;
        color: #fff;
    }

    #header.toggle .menu-links li a.active { color: #ffd; }

    /* Hamburger na vrchu overlaye */
    #header.toggle .menu-trigger {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 101;
    }

    #header.toggle .menu-trigger span { background: #fff; }

    /* Homepage hero */
    .go {
        width: 100%;
        height: auto;
        min-height: 200px;
        padding: 30px 20px 30px;
        box-sizing: border-box;
        background-size: cover;
    }

    .go h1 {
        position: static;
        font-size: 26px;
        margin-bottom: 20px;
    }

    .go h1 span { font-size: 60px; }

    .mutton {
        position: static;
        display: inline-block;
        width: auto;
        height: auto;
        line-height: normal;
        padding: 10px 30px;
    }

    /* Patička */
    #footer {
        width: 100%;
        padding: 10px 20px 30px;
        box-sizing: border-box;
        margin-top: 30px;
    }
}

@media (max-width: 640px) {

    /* Textové stránky — méně paddingu */
    .formular, .default {
        padding: 30px 20px 40px;
        min-height: 0;
    }

    .default { padding-bottom: 40px; }

    .formular h1, .default h1 {
        font-size: 24px;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    /* Formulář — tabulka → block, labely přes celou šířku */
    .formular table,
    .formular table tbody,
    .formular table tr,
    .formular table td {
        display: block;
        width: 100% !important;
    }

    .formular table td.label {
        padding: 15px 0 4px;
        font-weight: bold;
    }

    /* Kategorie — třetiny → plná šířka pod sebou, bez odsazení */
    .formular table td .third {
        width: 100%;
        float: none;
        margin-left: 0;
        padding: 6px 0;
    }

    .formular table td .half {
        width: 100%;
        float: none;
        margin-left: 0;
        padding: 4px 0;
    }

    /* Checkbox a radio — zpátky do flow, flex layout */
    .formular input[type="checkbox"],
    .formular input[type="radio"] {
        position: static;
        margin: 0;
        flex-shrink: 0;
    }

    .formular table td .third label,
    .formular table td .half label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .formular table tr.user_confirm td {
        padding: 20px 0;
    }

    .formular table tr.user_confirm td label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }

    .formular input[type="text"] {
        width: 100%;
        box-sizing: border-box;
        font-size: 18px;
        padding: 8px 10px;
    }

    .formular button {
        float: none;
        width: 100%;
        padding: 18px 20px;
        font-size: 18px;
        margin-top: 10px;
    }

    /* Kontakty — half → plná šířka */
    .contacts .half {
        float: none;
        width: 100%;
        margin-bottom: 30px;
    }

    /* Submenu ročníků — wrapping */
    #submenu {
        position: static;
        max-width: 100%;
        margin-top: 15px;
        font-size: 14px;
    }

    #submenu ul li {
        padding: 3px 8px;
        margin-bottom: 6px;
    }

    /* Menu — zalomit do více řádků */
    #menu { font-size: 15px; }

    #menu ul li {
        display: inline-block;
        margin: 4px 8px 4px 0;
    }

    /* Partneři — menší loga */
    .partners a.horni { margin: 30px 15px 0; }
    .partners a.spodni { margin: 30px 10px 0; }

    .partners .egis { width: 160px; height: 90px; margin: 20px 10px -5px !important; }
    .partners .vzp  { width: 150px; height: 60px; }
    .partners .allianz { width: 220px; height: 60px; }
    .partners .mojeobrazovka { width: 150px; height: 75px; }
    .partners .dvojka { width: 150px; height: 90px; }
    .partners .hci  { width: 110px; height: 45px; margin: 50px 10px 0 !important; }

    /* iframe — plná šířka */
    iframe { width: 100%; height: auto; aspect-ratio: 16/9; }

    /* Patička — stack */
    #footer .left, #footer .right { float: none; display: block; }
    #footer .right { margin-top: 5px; }

    /* Homepage hero — menší na mobilu */
    .go { min-height: 150px; padding: 20px 15px; }
    .go h1 { font-size: 20px; }
    .go h1 span { font-size: 44px; }
}