/* Licolor a.s. — design sjednocený s licolorvalnahromada.eu (navy / oranžová / světle modrá) */
:root {
    --navy: #0d3068;
    --blue: #0b3a8c;
    --orange: #f39200;
    --text: #142c52;
    --muted: #566c91;
    --line: #dbe5f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    background: linear-gradient(125deg, #f5f9ff 0, #e6f1ff 65%, #eff6ff 100%);
}
a { color: #0640a4; }
.wrap { max-width: 1320px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* --- Hlavička --- */
.top { background: #fff; border-bottom: 4px solid var(--orange); position: relative; z-index: 2; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 94px; }
.brand img { display: block; width: auto; height: 72px; max-width: 220px; object-fit: contain; }
.top-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; }
.top-nav a {
    color: #122b56; text-decoration: none; font-weight: 650; font-size: 15px;
    padding: 6px 0; border-bottom: 3px solid transparent; transition: color .2s, border-color .2s;
}
.top-nav a:hover { color: #f18a00; }
.top-nav a.active { color: #f18a00; border-bottom-color: var(--orange); }
.top-nav a:focus-visible, .menu-toggle:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.menu-toggle { display: none; }

/* --- Hero --- */
.hero { position: relative; overflow: hidden; background: linear-gradient(105deg, #e2efff 0%, #f4f9ff 52%, #daeaff 100%); }
.hero-inner { padding-top: 38px; padding-bottom: 47px; position: relative; z-index: 1; }
.eyebrow { font-size: 15px; font-weight: 750; letter-spacing: .02em; margin: 0 0 12px; display: flex; align-items: center; gap: 11px; text-transform: uppercase; }
.eyebrow:before { content: ""; display: inline-block; width: 4px; height: 25px; background: var(--orange); border-radius: 6px; }
.eyebrow span { color: var(--orange); }
h1 { color: var(--navy); font-size: clamp(32px, 4vw, 52px); letter-spacing: -.035em; line-height: 1.15; margin: 0 0 12px; font-weight: 800; }
.hero-desc { font-size: clamp(16px, 1.6vw, 21px); margin: 0; max-width: 810px; }
.wave { pointer-events: none; position: absolute; right: -5%; bottom: -8px; width: 49%; height: 100%; opacity: .83; }
.wave svg { width: 100%; height: 100%; overflow: visible; }
.wave path { stroke: #0b4b9a; stroke-width: 1.05; fill: none; }
.wave .orange-wave { stroke: #ff9100; stroke-width: 5; }

/* --- Obsah --- */
.main-content { padding-top: 30px; padding-bottom: 38px; }
.card {
    background: #fff; border: 1px solid #d4e2f2; border-left: 7px solid var(--orange);
    border-radius: 15px; box-shadow: 0 10px 25px rgba(27, 67, 113, .10);
    padding: 28px 36px 32px;
}
.cms-content { overflow-wrap: break-word; }
.cms-content > :first-child { margin-top: 0; }
.cms-content h2 { color: var(--navy); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; line-height: 1.25; margin: 1.2em 0 .5em; }
.cms-content h3 { color: var(--blue); font-size: 19px; line-height: 1.3; margin: 1.4em 0 .5em; padding-left: 12px; border-left: 4px solid var(--orange); }
.cms-content h1, .cms-content h4 { color: var(--navy); }
.cms-content p { margin: 0 0 .8em; }
.cms-content p, .cms-content ul, .cms-content ol { max-width: 880px; }
.cms-content ul, .cms-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.cms-content li { margin: 3px 0; }
.cms-content ul > li::marker { color: var(--orange); }
.cms-content strong { color: var(--navy); }
.cms-content img { max-width: 100%; height: auto; border-radius: 8px; }
.cms-content table { border-collapse: collapse; max-width: 100%; margin: 1em 0; font-size: 15px; }
.cms-content td, .cms-content th { border: 1px solid var(--line); padding: 6px 10px; text-align: left; }
.cms-content tr:nth-child(odd) td { background: #f5f9ff; }
.cms-content > br { display: none; } /* odřádkování mezi bloky z původního webu */

/* Třídy z původního webu, které převzatý obsah používá */
.cistic { clear: both; }
.odsaz { margin-top: 1em !important; }
.stred { text-align: center !important; }
.tucne { color: var(--orange); font-weight: bold; }
.cislo { list-style-type: decimal; }
.beztec { list-style: none; }
.obtpr { float: right; margin: 6px 0 12px 20px; }
.ramecek, .ramecekb { border: 1px solid var(--line); }
.sl6em, .sl9em, .sl12em, .sl13em, .sl18em { display: inline-block; }
.sl6em { width: 6em; } .sl9em { width: 9em; } .sl12em { width: 0; } .sl13em { width: 13em; } .sl18em { width: 18em; }
.lc-gallery { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 1.6em; }
.lc-gallery img { border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(27, 67, 113, .12); }

.flash { padding: 12px 16px; margin: 0 0 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.flash-error { border-color: #f3b4b4; background: #fff4f4; }
.flash-success { border-color: #b7e2c0; background: #f3fbf5; }

/* --- Kontakt --- */
.contact {
    margin-top: 36px; display: grid; grid-template-columns: 155px 230px minmax(0, 1fr); min-height: 164px; align-items: center;
    background: #fff; border: 1px solid #d4e2f2; border-radius: 15px; box-shadow: 0 10px 25px rgba(27, 67, 113, .09); overflow: hidden;
}
.contact-art {
    background: linear-gradient(145deg, #235593, #0c2c5e); height: 100%; display: grid; place-items: center;
    border-right: 7px solid var(--orange); transform: skewX(-12deg); margin-left: -18px;
}
.contact-art svg { transform: skewX(12deg); height: 67px; width: 67px; stroke: #fff; fill: none; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.contact h2 { padding: 0 28px; font-size: clamp(24px, 3vw, 37px); margin: 0; color: var(--navy); border-right: 1px solid #c5d3e5; line-height: 1.5; }
.contact-details { padding: 17px 27px 17px 55px; }
.contact-details strong { font-size: 19px; color: #0e2e63; }
.contact-details p { margin: 6px 0; display: flex; align-items: center; gap: 12px; }
.contact-details svg { flex: none; height: 20px; width: 20px; stroke: var(--orange); stroke-width: 2.3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* --- Patička --- */
.foot { background: #10396f; color: #fff; }
.foot-in { display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; padding-top: 17px; padding-bottom: 17px; font-size: 13px; }
.foot a { color: #fff; }
.foot a:hover { color: #ffd099; }

/* --- Tablet / mobil --- */
@media (max-width: 1100px) {
    .top-in { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
    .menu-toggle {
        display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
        background: #fff; color: #122b56; border: 1px solid var(--line); border-radius: 10px;
        padding: 9px 14px; font: 650 15px system-ui, sans-serif; cursor: pointer;
    }
    .menu-toggle svg { width: 20px; height: 20px; stroke: var(--orange); stroke-width: 2.4; fill: none; stroke-linecap: round; }
    .top-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 4px; }
    .top-nav.is-open { display: flex; }
    .top-nav a { padding: 11px 4px; border-bottom: 1px solid var(--line); }
    .top-nav a.active { border-bottom-color: var(--line); }
}
@media (max-width: 900px) {
    .wave { width: 65%; opacity: .4; }
    .contact { grid-template-columns: 120px 170px 1fr; }
    .contact-details { padding-left: 25px; }
}
@media (max-width: 650px) {
    .wrap { padding-left: 16px; padding-right: 16px; }
    .brand img { height: 55px; max-width: 145px; }
    .hero-inner { padding-top: 28px; padding-bottom: 34px; }
    .wave { width: 90%; opacity: .18; }
    .eyebrow { font-size: 12px; }
    .hero-desc { font-size: 16px; }
    .main-content { padding-top: 20px; }
    .card { padding: 20px 18px 22px; border-left-width: 5px; }
    .obtpr { float: none; display: block; margin: 10px auto; }
    .contact { grid-template-columns: 80px 1fr; }
    .contact-art { grid-row: 1 / 3; }
    .contact h2 { border: 0; padding: 18px 18px 0; font-size: 27px; }
    .contact-details { grid-column: 2; padding: 4px 18px 19px; }
    .contact-details strong { font-size: 17px; }
    .foot-in { font-size: 12px; }
}
