/* =========================================================================
   kovarina.com – lehký responzivní „kovářský" motiv (mobile-first)
   Tmavé pozadí, světlá obsahová karta, ocelovo-měděný akcent.
   ========================================================================= */

:root {
    --bg:        #0e0e0e;
    --bg-bar:    #1a1a1a;
    --card:      #ffffff;
    --ink:       #0a0a0a;
    --muted:     #6b6b6b;
    --line:      #e2e2e2;
    --accent:    #b08d57;          /* dekorace (rámečky, focus, na tmavém pozadí) */
    --accent-dk: #8c6d40;          /* akcent jako TEXT/pozadí tlačítek – AA ≈ 4,6:1 na bílé */
    --accent-darker: #705733;      /* hover (vyšší kontrast) */
    --maxw:      1040px;
    --font:      "Linux Biolinum", Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/* Dílenský podklad hlavičky: WebP (31 kB) kde ho prohlížeč umí v image-set(), jinak JPEG (54 kB).
   Stejnou adresu WebP přednačítá layout (preload) – musí se shodovat. */
:root { --bg-img: url('../images/bg.jpg'); }
@supports (background-image: image-set(url('../images/bg.jpg.webp') type('image/webp'))) {
    :root { --bg-img: image-set(url('../images/bg.jpg.webp') type('image/webp'), url('../images/bg.jpg') type('image/jpeg')); }
}

/* ---- Písmo Linux Biolinum (výběr klienta 10/2026) ------------------------
   Lokální WOFF2 (latinka vč. češtiny), licence SIL OFL – public/fonts/linux-biolinum/LICENSE.txt.
   size-adjust: Biolinum má menší výšku x než Arial (0,46 : 0,52) – zvětšení drží
   stejnou optickou velikost textu, takže velikosti v px níže zůstávají. */
@font-face { font-family: "Linux Biolinum"; font-style: normal; font-weight: 400; font-display: swap; size-adjust: 110%;
    src: url("../fonts/linux-biolinum/linux-biolinum-regular.woff2") format("woff2"); }
@font-face { font-family: "Linux Biolinum"; font-style: normal; font-weight: 700; font-display: swap; size-adjust: 110%;
    src: url("../fonts/linux-biolinum/linux-biolinum-bold.woff2") format("woff2"); }
@font-face { font-family: "Linux Biolinum"; font-style: italic; font-weight: 400; font-display: swap; size-adjust: 110%;
    src: url("../fonts/linux-biolinum/linux-biolinum-italic.woff2") format("woff2"); }
@font-face { font-family: "Linux Biolinum"; font-style: italic; font-weight: 700; font-display: swap; size-adjust: 110%;
    src: url("../fonts/linux-biolinum/linux-biolinum-bolditalic.woff2") format("woff2"); }

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

button, input, select, textarea { font-family: inherit; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent-dk); text-decoration: none; }
a:hover { color: var(--accent-darker); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-dk); outline-offset: 2px; }

/* ---- Obsahová „karta" na tmavém pozadí ---------------------------------- */
#wrapper {
    max-width: var(--maxw);
    margin: 0 auto;
    background: var(--card);
    min-height: 100vh;
    box-shadow: 0 0 50px rgba(0, 0, 0, .6);
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 18px; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---- Horní kontaktní lišta ---------------------------------------------- */
.topbar {
    background: var(--bg);   /* stejná černá jako pozadí webu (dřív --bg-bar – lišta byla vidět jako šedší pruh) */
    color: #cfcfcf;
    font-size: 13.5px;
}
.topbar .container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    align-items: center;
    justify-content: flex-end;
    padding-top: 8px;
    padding-bottom: 8px;
}
.topbar a { color: #e6e6e6; }
.topbar a:hover { color: var(--accent); }
.topbar .sep { opacity: .35; }

/* Facebook v topbaru: ikona + text, hover/focus dává najevo, že jde o odkaz */
.topbar .social-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: 999px;
    color: #e6e6e6;
    border: 1px solid rgba(255, 255, 255, .22);
    margin: -5px 0;                /* prvek nezvyšuje výšku topbaru */
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.topbar .social-link svg { display: block; flex: none; }
.topbar .social-link:hover,
.topbar .social-link:focus-visible {
    color: #1a1a1a;
    background: var(--accent);
    border-color: var(--accent);
    transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
    .topbar .social-link { transition: none; }
    .topbar .social-link:hover,
    .topbar .social-link:focus-visible { transform: none; }
}

/* Mobil: obsah topbaru musí zůstat na jednom řádku */
@media (max-width: 700px) {
    .topbar { font-size: 12px; }
    .topbar .container {
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 10px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .topbar .container > * { white-space: nowrap; }
    .topbar .sep { display: none; }
    .topbar .social-link { gap: 5px; padding: 3px 9px; }
    .topbar .social-link svg { width: 14px; height: 14px; }
}

/* Úzké displeje (~do 380 px): Facebook zůstává jen jako ikona, ať se řádek nezalomí */
@media (max-width: 380px) {
    .topbar { font-size: 11.5px; }
    .topbar .container { gap: 8px; }
    .topbar .social-link { padding: 5px; border-radius: 50%; }
    .topbar .social-link span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ---- Hlavička: logo + navigace ------------------------------------------ */
#header-wrap .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    /* bez dělicí linky pod hlavičkou – dílenská fotka plynule přechází do obsahu (2026-10-08) */
}
/* Pevná výška + poměr stran: místo pro logo je rezervované ještě před načtením SVG (57 kB). S `width: auto`
   a jen max-height mělo logo do načtení 0×0 a hlavička pak poskočila o 29 px (CLS 0,14 – projevilo se
   po zapnutí HTTP cache, kdy HTML dorazí dřív než logo). 341 / 96 = rozměry z <img> v layoutu. */
#logo img { display: block; height: 74px; width: auto; aspect-ratio: 341 / 96; }

/* Moto v hlavičce mezi logem a menu */
.header-moto {
    flex: 1 1 auto;
    text-align: center;
    font-style: italic;
    color: var(--accent-dk);
    font-size: 17px;
    padding: 0 18px;
    line-height: 1.3;
}

/* Menu na PC se nikdy nezalamuje (dřív s dlouhým mottem padlo na 2 řádky – motta jsou náhodná a různě dlouhá,
   logo s kovářem je širší). Místo menu se zalomí motto; pod 1080 px jde motto na vlastní řádek pod logo a menu. */
@media (min-width: 801px) {
    #logo, #primary-menu { flex: none; }   /* logo ani menu se nesmí smrsknout – místo bere jen motto */
    #primary-menu ul { flex-wrap: nowrap; }
    .header-moto { min-width: 0; }
}
@media (min-width: 801px) and (max-width: 1080px) {
    #header-wrap .container { flex-wrap: wrap; row-gap: 0; }
    .header-moto { order: 3; flex-basis: 100%; text-align: left; padding: 0; margin-top: 2px; }
}

#primary-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#primary-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
}
#primary-menu a:hover { color: var(--accent-darker); }
#primary-menu li.current a { color: var(--accent-dk); border-bottom-color: var(--accent); }

/* Hamburger – skrytý na desktopu */
#primary-menu-trigger {
    display: none;
    width: 46px; height: 42px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
}
#primary-menu-trigger span,
#primary-menu-trigger span::before,
#primary-menu-trigger span::after {
    content: "";
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 22px; height: 2px;
    background: var(--ink);
    transition: .25s ease;
}
#primary-menu-trigger span { top: 50%; margin-top: -1px; }
#primary-menu-trigger span::before { top: -7px; }
#primary-menu-trigger span::after { top: 7px; }

/* Dílenský podklad (nářadí z bg.jpg) na desktopu: JEDEN souvislý pruh, který
   začíná hned pod horní lištou, prochází za logem a menu a dole mizí do bílé.
   Dřív ležel jen v obsahu (#content::before) a nad ním zůstával bílý pruh
   s logem/menu. Pruh visí na #header-wrap a přesahuje do obsahu – #content je
   v DOM až za ním a je `position: relative`, takže text se vykreslí nad fotkou.
   Zarovnání vpravo + zvětšení na 142.857 % ořízne levou část (plaketa).
   Sílu fotky lze ladit hodnotami bílého závoje v gradientu. */
@media (min-width: 801px) {
    #header-wrap { position: relative; }
    #header-wrap > .container { position: relative; z-index: 1; }
    #header-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 660px;
        background:
            linear-gradient(to bottom,
                rgba(255, 255, 255, .62) 0%,
                rgba(255, 255, 255, .62) 16%,   /* konec řádku s logem a menu */
                rgba(255, 255, 255, .42) 26%,
                rgba(255, 255, 255, .42) 55%,
                #fff 100%),
            var(--bg-img) right top / 142.857% auto no-repeat;
        pointer-events: none;
        z-index: 0;
    }
}

/* ---- Obsah --------------------------------------------------------------- */
#content { padding: 100px 0 10px; position: relative; }
#content > * { position: relative; z-index: 1; }
#content .container { padding-left: 18px; padding-right: 18px; }
.content-wrap { padding: 30px 18px; }

#content h1, #content h2 { font-weight: 700; line-height: 1.2; margin: 0 0 14px; }
#content h1 { font-size: 30px; }
#content h2 { font-size: 23px; border-bottom: 2px solid var(--accent); padding-bottom: 6px; display: inline-block; }
#content h3 { font-size: 18px; }
/* „Napište nám“ – h2 kvůli pořadí nadpisů (h1 → h2), vzhled jako h3 */
#content h2.contact-form-title { font-size: 18px; border-bottom: 0; padding-bottom: 0; display: block; }
#content p { margin: 0 0 16px; }
#content ul { padding-left: 20px; }
#content hr { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* Nadpis stránky leží nad dílenskou fotkou (#content::before / #header-wrap::before) – BEZ podkladu
   (klient nechce obdélník, 2026-10-07): průhledné pozadí, jen akcentní pruh vlevo. Čitelnost nad fotkou
   drží jemná bílá záře kolem písma (text-shadow). Platí i pro nadpisy z WYSIWYG obsahu v DB (např. Kontakty). */
#content h1 {
    display: inline-block;
    max-width: 100%;
    background: transparent;
    border-left: 4px solid var(--accent);
    padding: 4px 20px 6px 16px;
    text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 14px rgba(255, 255, 255, .8);
}
/* Podtitul za pomlčkou (homepage) – menší, neutučněný, ale dost tmavý na čtení */
.page-title span {
    display: inline-block;
    font-weight: 400;
    font-size: .58em;
    color: #3a3a3a;
}

@media (max-width: 700px) {
    #content h1 { padding: 4px 14px 6px 12px; }
    .page-title span { font-size: .62em; }
}

/* Moto (witty podtitul) */
.moto { font-style: italic; color: var(--accent-dk); font-size: 18px; margin: 0 0 18px; }

/* ---- Jednoduchý grid (náhrada bootstrap tříd) --------------------------- */
.row { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.row > [class*="col-"] { padding: 0 10px; }
[class*="col-"] { width: 100%; }
.col-xs-6 { width: 50%; }

@media (min-width: 768px) {
    .col-sm-4  { width: 33.3333%; }
    .col-sm-5  { width: 41.6667%; }
    .col-sm-6  { width: 50%; }
    .col-sm-7  { width: 58.3333%; }
    .col-sm-8  { width: 66.6667%; }
    .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
    .col-md-8 { width: 66.6667%; }
}

/* ---- Galerie ------------------------------------------------------------- */
.gallery-cell { margin-bottom: 22px; }
.gallery-cell picture { display: block; }
.gallery-thumb { height: 300px; width: auto; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
/* Do 991 px je sloupec úzký (na mobilu ~150 px) – pevná výška 300 px tam nechávala nad a pod fotkou na šířku
   ~200 px prázdna. Místo toho jednotný rámeček 4 : 3 přes celou šířku buňky (fotka se neořízne, jen se vejde). */
@media (max-width: 991px) {
	.gallery-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; }
}
.gallery-name { display: block; margin-top: 8px; font-weight: 600; text-align: center; }
/* Přehled galerií: jednotné čtvercové dlaždice (výřez z originálu, App\Web\Gallery\CoverTiles) */
.gallery-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 22px; }
.gallery-tile { display: block; text-decoration: none; }
.gallery-tile-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #ece7df; }
.gallery-tile-img picture, .gallery-tile-img img { display: block; width: 100%; height: 100%; }
.gallery-tile-img img { object-fit: cover; transition: transform .35s ease; }
.gallery-tile:hover .gallery-tile-img img, .gallery-tile:focus-visible .gallery-tile-img img { transform: scale(1.04); }
@media (max-width: 991px) { .gallery-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; } }
@media (prefers-reduced-motion: reduce) { .gallery-tile-img img { transition: none; } }
.gallery-caption { font-size: 13px; color: #666; margin-top: 6px; text-align: center; }

/* ---- Mapa v Kontaktech: obrázek + tlačítko, iframe až po kliknutí (ContentExtension::mapClickToLoad) ---- */
.map-facade { position: relative; overflow: hidden; background: #ece7df; }
.map-facade picture, .map-facade img { display: block; width: 100%; height: 100%; }
.map-facade img { object-fit: cover; }
.map-facade-btn {
    position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
    padding: 10px 18px; border: 0; border-radius: 3px; cursor: pointer;
    background: var(--accent-dk); color: #fff; font-weight: 700; font-size: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .25); white-space: nowrap;
}
.map-facade-btn:hover, .map-facade-btn:focus-visible { background: var(--accent-darker); }
.map-facade-attr { position: absolute; right: 0; bottom: 0; padding: 2px 6px; background: rgba(255, 255, 255, .85); color: #333; font-size: 12px; line-height: 1.4; }
.map-facade-attr a { color: inherit; }
.map-facade-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---- Tlačítka ------------------------------------------------------------ */
.button, button.button {
    display: inline-block;
    background: var(--accent-dk);
    color: #fff;
    padding: 11px 24px;
    border: none;
    border-radius: 3px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease;
}
.button:hover, button.button:hover { background: var(--accent-darker); color: #fff; }
.button-rounded { border-radius: 30px; }

/* ---- Formuláře ----------------------------------------------------------- */
.form-group { margin-bottom: 16px; }
.form-group label, form label { display: block; font-weight: 700; margin-bottom: 5px; font-size: 14px; }
.form-control {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    font: inherit;
    font-size: 15px;
    background: #fff;
}
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(176, 141, 87, .2); }
textarea.form-control { resize: vertical; }
.alert { padding: 12px 14px; border-radius: 4px; margin-bottom: 14px; }
.alert-success { background: #e8f4ec; color: #1e6b34; }
.alert-danger  { background: #fdecea; color: #9b2c2c; }

/* ---- Patička ------------------------------------------------------------- */
#footer { background: var(--bg-bar); color: #b3b3b3; padding: 26px 0; margin-top: 40px; font-size: 14px; }
#footer a { color: #ddd; }
#footer a:hover { color: var(--accent); }
#footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
#footer .copyright-links a { margin-left: 10px; }

/* ---- Go to top ----------------------------------------------------------- */
#gotoTop {
    position: fixed; right: 18px; bottom: 18px;
    width: 44px; height: 44px;
    background: var(--accent-dk);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center; justify-content: center;
    cursor: pointer; z-index: 50;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
#gotoTop:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#gotoTop::before { content: "▲"; font-size: 14px; }
#gotoTop.show { display: flex; }

/* ---- Lightbox ------------------------------------------------------------ */
.lb-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .93);
    display: none;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
}
.lb-overlay.open { display: flex; }
.lb-stage {
    max-width: 94vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.lb-title {
    color: #f0f0f0;
    font-size: 16px;
    text-align: center;
    margin: 0 0 12px;
    padding: 0 14px;
    max-width: 94vw;
}
.lb-overlay img {
    max-width: 94vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
}
.lb-counter { position: absolute; top: 14px; left: 18px; color: #ddd; font-size: 14px; }
.lb-close {
    position: absolute;
    top: 6px; right: 14px;
    width: 46px; height: 46px;
    background: none; border: none;
    color: #fff; font-size: 34px; line-height: 1;
    cursor: pointer; opacity: .85;
    z-index: 2;
}
.lb-btn {
    position: absolute;
    top: 64px; bottom: 0;
    width: 14%;
    min-width: 56px;
    background: none; border: none;
    color: #fff; font-size: 46px; line-height: 1;
    cursor: pointer; opacity: .7;
    z-index: 1;
}
.lb-btn:hover, .lb-close:hover { opacity: 1; }
.lb-prev { left: 0; }
.lb-next { right: 0; }

/* Mobil: navigace hlavně přes swipe, šipky menší a nenápadné */
@media (max-width: 700px) {
    .lb-btn { font-size: 34px; width: 18%; opacity: .55; }
    .lb-stage { max-width: 100vw; max-height: 84vh; }
    .lb-overlay img { max-width: 100vw; max-height: 76vh; }
    .lb-title { font-size: 14px; margin-bottom: 8px; }
}

/* =========================================================================
   MOBILNÍ ÚPRAVY
   ========================================================================= */
@media (max-width: 800px) {
    #primary-menu-trigger { display: block; }

    /* při hamburger menu není potřeba velký prostor nad nadpisem (100px) – stačí 20px */
    #content { padding-top: 20px; }

    .header-moto { flex-basis: 100%; order: 2; text-align: left; margin: 6px 0 0; font-size: 16px; padding: 0; }

    #primary-menu {
        flex-basis: 100%;
        order: 3;
        display: none;
    }
    #primary-menu.open { display: block; }
    #primary-menu ul { flex-direction: column; gap: 0; }
    #primary-menu li { border-top: 1px solid var(--line); }
    #primary-menu a { padding: 12px 4px; border-bottom: none; }
    #primary-menu li.current a { border-left: 3px solid var(--accent); padding-left: 10px; }

    #header-wrap .container { flex-wrap: wrap; }

    /* Mobil: dílenská fotka za logem a hamburgerem a dál dolů do obsahu (jako na desktopu) – pruh visí
       na #header-wrap::before, přesahuje pod hlavičku a mizí do bílé; #content je `position: relative`
       a v DOM až za hlavičkou, takže nadpis (poloprůhledná plaketa) i text leží nad fotkou.
       Pevná výška 380 px (ne podle hlavičky) – výřez ani měřítko se nemění při otevření/zavření menu.
       Bílý závoj drží logo, hamburger, položky menu i text obsahu čitelné. */
    #header-wrap { position: relative; }
    #header-wrap > .container { position: relative; z-index: 1; }
    #header-wrap::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 380px;
        background:
            linear-gradient(to bottom,
                rgba(255, 255, 255, .58) 0%,
                rgba(255, 255, 255, .50) 48%,   /* ~ spodek zavřené hlavičky – fotka tu je nejvýraznější */
                rgba(255, 255, 255, .62) 66%,   /* nadpis stránky */
                rgba(255, 255, 255, .90) 86%,   /* začátek textu */
                #fff 100%),
            var(--bg-img) right top / max(142.857%, 634px) auto no-repeat;
        /* šířka ≥ 142.857 % (jako desktop) ořízne vlevo prázdnou plaketu z bg.jpg; ≥ 634 px = výška ≥ 380 px,
           takže fotka vždy pokryje celý pruh (jinak by na úzkém displeji končila nad textem) */
        pointer-events: none;
        z-index: 0;
    }
    #primary-menu-trigger { background: rgba(255, 255, 255, .85); }
}

@media (max-width: 700px) {
    body { font-size: 15.5px; }
    #content h1 { font-size: 25px; }
    #content h2 { font-size: 20px; }

    /* plovoucí obrázky v obsahu na mobilu přes celou šířku */
    #content img[style*="float"] {
        float: none !important;
        display: block;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 16px !important;
    }
    /* rozložení obsahových tabulek do sloupce */
    #content table, #content table tbody, #content table tr, #content table td {
        display: block !important;
        width: auto !important;
        height: auto !important;
    }
}

/* ---- Ochrana osobních údajů ---------------------------------------------- */
/* Poznámka pod kontaktním formulářem (čl. 13 GDPR) s odkazem na zásady */
.form-note { font-size: 13px; color: #555; margin: 4px 0 18px; }
.form-note a { text-decoration: underline; }
.privacy-text { max-width: 820px; }
.privacy-text h2 { margin-top: 18px; }
.privacy-updated { font-size: 13px; color: #666; margin-top: 24px; }