/* =========================================================================
   znakymestaobci.cz – moderní responzivní šablona (heraldický nádech)
   ========================================================================= */

:root {
    --c-purple: #443458;      /* heraldická purpurová (z původního webu) */
    --c-purple-dark: #2e2340;
    --c-gold: #b08222;        /* zlatá */
    --c-gold-light: #d9a93a;
    --c-red: #9e1b2f;
    --c-bg: #f7f5f0;
    --c-surface: #ffffff;
    --c-ink: #23202b;
    --c-muted: #6b6776;
    --c-border: #e3ded3;
    --shadow: 0 2px 8px rgba(40, 30, 60, 0.08);
    --shadow-lg: 0 8px 28px rgba(40, 30, 60, 0.16);
    --radius: 8px;
    --maxw: 1140px;
    --serif: Georgia, "Times New Roman", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-bg);
}

img { max-width: 100%; height: auto; }
a { color: var(--c-purple); }
a:hover { color: var(--c-red); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--c-gold); color: #fff; padding: 10px 16px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Hlavička ------------------------------------------------------------ */
.site-header {
    background: linear-gradient(135deg, var(--c-purple) 0%, var(--c-purple-dark) 100%);
    color: #fff;
    border-bottom: 4px solid var(--c-gold);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.brand-shield {
    font-size: 38px; line-height: 1; color: var(--c-gold-light);
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.4));
}
.brand-text { display: flex; flex-direction: column; }
.brand-name { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: .3px; }
.brand-claim { font-size: 13px; color: #cfc6df; }

/* --- Navigace ------------------------------------------------------------ */
.nav-toggle {
    display: none; flex-direction: column; gap: 5px; cursor: pointer;
    background: none; border: 0; padding: 8px;
}
.nav-toggle span { width: 26px; height: 3px; background: #fff; border-radius: 2px; transition: .25s; }

.main-nav { background: var(--c-purple-dark); }
.menu {
    display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.menu > .menu-item { position: relative; }
.menu > .menu-item > a {
    display: block; padding: 13px 16px; color: #efeaf6; text-decoration: none;
    font-size: 14.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
    border-bottom: 3px solid transparent;
}
.menu > .menu-item > a:hover,
.menu > .menu-item.is-active > a { background: rgba(255,255,255,.08); color: #fff; border-bottom-color: var(--c-gold); }

.submenu-toggle { display: none; background: none; border: 0; color: #efeaf6; font-size: 16px; cursor: pointer; }

.submenu {
    list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0;
    min-width: 240px; background: var(--c-surface); box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius) var(--radius); border-top: 3px solid var(--c-gold);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s; z-index: 40;
}
.menu-item.has-children:hover .submenu,
.menu-item.has-children:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu a { display: block; padding: 9px 18px; color: var(--c-ink); text-decoration: none; font-size: 15px; }
.submenu a:hover { background: var(--c-bg); color: var(--c-red); }

/* --- Layout obsahu ------------------------------------------------------- */
.page-grid { padding-top: 28px; padding-bottom: 40px; }
body.has-sidebar .page-grid {
    display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start;
}

.breadcrumbs { font-size: 13.5px; color: var(--c-muted); margin-bottom: 18px; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; color: var(--c-border); }
.breadcrumbs a { text-decoration: none; }

/* --- Typografie obsahu --------------------------------------------------- */
.content h1, .page-header h1 { font-family: var(--serif); font-size: 32px; line-height: 1.2; color: var(--c-purple); margin: 0 0 18px; }
.prose { font-size: 17px; }
.prose h2 { font-family: var(--serif); color: var(--c-purple-dark); font-size: 24px; margin-top: 1.6em; }
.prose h3 { font-size: 20px; color: var(--c-purple-dark); }
.prose p { margin: 0 0 1em; }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow); height: auto; }
.prose::after { content: ""; display: block; clear: both; }
.prose .alignright { float: right; margin: 4px 0 16px 24px; max-width: 45%; }
.prose .alignleft { float: left; margin: 4px 24px 16px 0; max-width: 45%; }
.prose .aligncenter { display: block; margin: 16px auto; }
.prose .alignnone { display: block; margin: 8px 0 16px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose a { color: var(--c-red); }
.lead { font-size: 20px; line-height: 1.55; color: var(--c-ink); }

.btn {
    display: inline-block; background: var(--c-gold); color: #fff; text-decoration: none;
    padding: 11px 22px; border-radius: var(--radius); font-weight: 600; transition: .15s;
}
.btn:hover { background: var(--c-gold-light); color: #fff; }

/* --- Domovská stránka ---------------------------------------------------- */
.hero { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 30px 32px; box-shadow: var(--shadow); margin-bottom: 30px; }
.section-cards { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.section-card { display: block; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: inherit; box-shadow: var(--shadow); transition: .18s; }
.section-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.section-card h3 { font-family: var(--serif); color: var(--c-purple); margin: 0 0 6px; }
.section-card p { margin: 0; font-size: 14.5px; color: var(--c-muted); }

/* --- Detail znaku (rodný list) ------------------------------------------- */
.znak { max-width: 860px; }
.znak-hero { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 28px; align-items: start; margin-bottom: 28px; }
.znak-figure { margin: 0; }
.znak-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.znak-figure figcaption { font-size: 13px; color: var(--c-muted); margin-top: 8px; text-align: center; }
.znak-meta { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 4px 0; box-shadow: var(--shadow); }
.znak-meta dl { margin: 0; }
.znak-meta .row { display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--c-border); }
.znak-meta .row:last-child { border-bottom: 0; }
.znak-meta dt { font-weight: 600; color: var(--c-muted); font-size: 14px; margin: 0; }
.znak-meta dd { margin: 0; }
.znak-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--c-border); }
.znak-nav a { text-decoration: none; font-weight: 600; }

/* --- Galerie (grid karet) ------------------------------------------------ */
.gallery-grid {
    display: grid; gap: 22px; list-style: none; margin: 24px 0 0; padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.znak-card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow); transition: .18s;
}
.znak-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.znak-card a { text-decoration: none; color: inherit; display: block; }
.znak-card .thumb { aspect-ratio: 4 / 3; background: #efe9dd; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.znak-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.znak-card .caption { padding: 12px 14px; }
.znak-card .caption strong { display: block; font-family: var(--serif); font-size: 17px; color: var(--c-purple); }
.znak-card .caption span { font-size: 13px; color: var(--c-muted); }
.thumb.is-placeholder img { object-fit: contain; padding: 16%; opacity: .85; }

/* --- Výpis článků (archive) ---------------------------------------------- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { padding: 18px 0; border-bottom: 1px solid var(--c-border); }
.post-list h2 { margin: 0 0 6px; font-size: 21px; }
.post-list h2 a { text-decoration: none; }
.post-meta { font-size: 13px; color: var(--c-muted); }

/* --- Sidebar ------------------------------------------------------------- */
.sidebar .widget { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; box-shadow: var(--shadow); }
.sidebar .widget-title { font-family: var(--serif); font-size: 18px; color: var(--c-purple); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--c-gold); }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { padding: 4px 0; }
.sidebar a { text-decoration: none; color: var(--c-ink); }
.sidebar a:hover { color: var(--c-red); }

/* --- Upozornění na chybějící obrázek ------------------------------------- */
.notice { background: #fbf6e9; border: 1px solid #ecd9a8; border-radius: var(--radius); padding: 12px 16px; font-size: 14.5px; color: #6b5a25; margin: 16px 0; }

/* --- Patička ------------------------------------------------------------- */
.site-footer { background: var(--c-purple-dark); color: #cfc6df; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 40px 20px 28px; }
.site-footer h3 { font-family: var(--serif); color: #fff; font-size: 18px; margin: 0 0 12px; }
.site-footer a { color: #cfc6df; text-decoration: none; }
.site-footer a:hover { color: var(--c-gold-light); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { padding: 3px 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 16px 20px; font-size: 13px; }
.footer-bottom p { margin: 0; }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox { position: fixed; inset: 0; background: rgba(20,15,30,.9); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 90vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-close { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: #fff; font-size: 38px; cursor: pointer; line-height: 1; }

/* --- Katalog erbů (kraje/obce) ------------------------------------------- */
.erb-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.erb-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: var(--shadow); transition: .18s; }
.erb-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.erb-card a { display: block; text-decoration: none; color: inherit; padding: 18px 14px 14px; text-align: center; }
.erb-thumb { display: flex; align-items: center; justify-content: center; height: 130px; margin-bottom: 12px; }
.erb-thumb img { max-height: 130px; max-width: 100%; width: auto; filter: drop-shadow(0 1px 3px rgba(0,0,0,.15)); }
.erb-caption strong { font-family: var(--serif); font-size: 16px; color: var(--c-purple); display: block; }
.erb-caption span { font-size: 12px; color: var(--c-muted); }
.erb-noimg { font-size: 46px; color: var(--c-border); line-height: 130px; }
.source-note { font-size: 13px; color: var(--c-muted); margin-top: 18px; }

.erb-detail { max-width: 820px; }
.erb-hero { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; }
.erb-figure { margin: 0; flex: 0 0 220px; text-align: center; }
.erb-figure img { max-width: 220px; max-height: 280px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.erb-figure figcaption { font-size: 12px; color: var(--c-muted); margin-top: 8px; }
.erb-figure figcaption a { color: var(--c-muted); }
.erb-facts { flex: 1; min-width: 220px; background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); padding: 4px 0; box-shadow: var(--shadow); margin: 0; }
.erb-facts .row { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 12px 18px;
    border-bottom: 1px solid var(--c-border); }
.erb-facts .row:last-child { border-bottom: 0; }
.erb-facts dt { font-weight: 600; color: var(--c-muted); font-size: 14px; margin: 0; }
.erb-facts dd { margin: 0; }
@media (max-width: 560px) { .erb-figure { flex-basis: 100%; } }

/* --- Blog: výpis článků -------------------------------------------------- */
.hero { margin-bottom: 28px; }
.hero h1 { font-family: var(--serif); font-size: 34px; color: var(--c-purple); margin: 0 0 10px; }
.post-feed { display: grid; gap: 26px; }
.post-card { display: grid; grid-template-columns: 220px 1fr; gap: 22px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.post-card:only-child, .post-card { transition: box-shadow .18s; }
.post-card:hover { box-shadow: var(--shadow-lg); }
.post-thumb { display: block; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; min-height: 150px; }
.post-card-body { padding: 18px 22px; }
.post-card.no-thumb, .post-card:not(:has(.post-thumb)) { grid-template-columns: 1fr; }
.post-card h2 { font-family: var(--serif); font-size: 23px; margin: 4px 0 10px; }
.post-card h2 a { color: var(--c-purple); text-decoration: none; }
.post-card h2 a:hover { color: var(--c-red); }
.post-meta { font-size: 13px; color: var(--c-muted); margin: 0; }
.post-meta a { color: var(--c-gold); text-decoration: none; font-weight: 600; }
.post-excerpt { margin: 8px 0 12px; color: #45414f; }
.read-more { font-weight: 600; text-decoration: none; color: var(--c-red); }

/* --- Blog: jednotlivý článek --------------------------------------------- */
.post { max-width: 760px; }
.post .page-header h1 { margin-top: 6px; }
.post-tags { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--c-border); }
.tags-label { color: var(--c-muted); font-size: 14px; margin-right: 6px; }
.tag { display: inline-block; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px;
    padding: 3px 12px; margin: 3px 4px 3px 0; font-size: 13px; text-decoration: none; color: var(--c-purple); }
.tag:hover { background: var(--c-gold); color: #fff; border-color: var(--c-gold); }
.back-link { margin-top: 24px; }
.back-link a { text-decoration: none; font-weight: 600; }

/* --- Patička: štítky ----------------------------------------------------- */
.footer-tags { padding: 8px 20px 4px; }
.footer-tags h3 { font-family: var(--serif); color: #fff; font-size: 16px; margin: 0 0 8px; }
.tag-cloud a { display: inline-block; color: #cfc6df; text-decoration: none; font-size: 13px;
    margin: 0 10px 6px 0; border-bottom: 1px dotted rgba(255,255,255,.25); }
.tag-cloud a:hover { color: var(--c-gold-light); }

/* --- Responzivita -------------------------------------------------------- */
@media (max-width: 1023px) {
    body.has-sidebar .page-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .main-nav { display: none; }
    .main-nav.is-open { display: block; }
    .menu { flex-direction: column; }
    .menu > .menu-item > a { border-bottom: 1px solid rgba(255,255,255,.08); text-transform: none; }
    .menu-item.has-children { display: flex; flex-wrap: wrap; align-items: center; }
    .menu-item.has-children > a { flex: 1; }
    .submenu-toggle { display: block; padding: 13px 16px; }
    .submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
        border-radius: 0; border-top: 0; background: rgba(0,0,0,.18); display: none; min-width: 0; }
    .submenu.is-open { display: block; }
    .submenu a { color: #efeaf6; padding-left: 32px; }
    .submenu a:hover { background: rgba(255,255,255,.06); color: #fff; }
    .znak-hero { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 22px; }
    body { font-size: 16px; }
    .content h1 { font-size: 27px; }
    .post-card { grid-template-columns: 1fr; }
    .post-thumb img { min-height: 0; max-height: 220px; }
    .hero h1 { font-size: 27px; }
    /* na mobilu obrázky neobtékají – plná šířka, vycentrované */
    .prose .alignright, .prose .alignleft { float: none; display: block; margin: 12px auto; max-width: 100%; }
}