/* «Боги давніх українців» — пантеон, боги в літературі, перевір себе. Усі класи з префіксом zbg-. (mu-plugins/zno-bohy.php) */

/* сторінка на всю ширину: без бічної колонки */
.zno-bohy-page #secondary { display: none; }
body.zno-bohy-page .content-area,
body.zno-bohy-page .site-main { float: none; width: auto; max-width: none; }

.zbg { --red: #ff2b2b; --red-ink: #b0281c; --ink: #1f2328; --muted: #5b6470; --bg: #f6f9fc; --panel: #fff; --line: #d6e3ee;
  --ok: #1a7f37; --late: #a05a00; --recon: #8a2be2; --fake: #c62828;
  max-width: 900px; margin: 1.2em auto 2em; color: var(--ink); line-height: 1.5; -webkit-hyphens: manual; hyphens: manual; }
.zbg *, .zbg *::before, .zbg *::after { box-sizing: border-box; }
.zbg ul, .zbg ol, .entry-content .zbg ul, .entry-content .zbg ol { margin: 0; padding: 0; list-style: none; }
.zbg li, .entry-content .zbg li { margin: 0; }
.zbg p { margin: 0; }
.zbg a, .entry-content .zbg a { color: var(--red-ink); box-shadow: none; border: 0; }
.zbg h2 { margin: 0 0 .5em; padding: 0; border: 0; font: 500 1.3em/1.25 Oswald, sans-serif; }
.zbg h3 { margin: 0; padding: 0; border: 0; font: 500 1.15em/1.25 Oswald, sans-serif; }
.zbg .zbg-h4 { margin: 14px 0 6px; padding: 0; border: 0; font: 500 1em/1.3 Oswald, sans-serif; letter-spacing: .02em; color: #33404c; }

/* the theme paints every button:hover/:focus — reset */
.zbg button { width: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: inherit;
  text-transform: none; letter-spacing: normal; text-align: inherit; box-shadow: none; transition: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.zbg button:hover, .zbg button:focus { background: none; color: inherit; border: 0; box-shadow: none; outline: none; }
.zbg button:focus-visible, .zbg [tabindex]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.zbg-lead { font-size: 1.02em; margin-bottom: 1em !important; }

/* tabs */
.zbg-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.zbg .zbg-tab { font: 500 16px/1.2 Oswald, sans-serif; letter-spacing: .02em; padding: 9px 16px; border-radius: 10px;
  background: #fff; border: 1px solid var(--line); color: var(--ink); }
.zbg .zbg-tab:hover { background: var(--bg); border: 1px solid #b9cbdb; }
.zbg .zbg-tab[aria-selected="true"], .zbg .zbg-tab[aria-selected="true"]:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* капище 980 р. */
.zbg-temple { margin: 0 0 14px; padding: 10px 10px 12px; background: linear-gradient(#eef4fb, #fff 70%); border: 1px solid var(--line); border-radius: 14px; }
.zbg-temple svg { display: block; width: 100%; max-width: 640px; height: auto; margin: 0 auto; }
.zbg-temple figcaption { font-size: 14px; color: #33404c; text-align: center; max-width: 640px; margin: 4px auto 0; }
.zbg-hill { fill: #cfe0c3; }
.zbg-idol { cursor: pointer; outline: none; }
.zbg-idol__pole { fill: #8a5a33; stroke: #5e3b1e; stroke-width: 1.5; }
.zbg-idol__head { fill: #a8714a; stroke: #5e3b1e; stroke-width: 1.5; }
.zbg-idol__head--silver { fill: #d9dee4; stroke: #6b7580; }
.zbg-idol__gold { fill: none; stroke: #e0a800; stroke-width: 4; stroke-linecap: round; }
.zbg-idol__cap { fill: #6b4423; stroke: #5e3b1e; stroke-width: 1.5; stroke-linejoin: round; }
.zbg-idol__eye { fill: #3b2614; }
.zbg-idol__band { stroke: #5e3b1e; stroke-width: 1.5; }
.zbg-idol__sym { color: #fff3dc; }
.zbg-idol__name { font: 500 15px Oswald, sans-serif; fill: var(--ink); }
.zbg-idol:hover .zbg-idol__pole, .zbg-idol:focus-visible .zbg-idol__pole { fill: #a86f40; }
.zbg-idol:focus-visible .zbg-idol__name { text-decoration: underline; }
.zbg-idol.is-sel .zbg-idol__pole { fill: var(--red); stroke: var(--red-ink); }
.zbg-idol.is-sel .zbg-idol__name { fill: var(--red-ink); }

/* filters */
.zbg-filters, .zbg-modes { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 8px; font-size: 14px; }
.zbg-filters__label { color: var(--muted); margin-right: 2px; }
.zbg .zbg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; font-size: 14px; line-height: 1.3; color: var(--ink); }
.zbg .zbg-chip:hover { border: 1px solid #9fb4c7; background: #fff; }
.zbg .zbg-chip[aria-pressed="true"], .zbg .zbg-chip[aria-pressed="true"]:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.zbg .zbg-chip--only[aria-pressed="true"], .zbg .zbg-chip--only[aria-pressed="true"]:hover { background: var(--ok); border-color: var(--ok); }
.zbg-dot, .zbg-sdot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; background: var(--sc); }
.zbg .zbg-chip[aria-pressed="true"] .zbg-dot { box-shadow: 0 0 0 2px #fff; }
.zbg-count { font-size: 14px; color: var(--muted); margin: 2px 0 10px !important; }

/* cards */
.zbg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; grid-auto-flow: row dense; }
.zbg .zbg-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 12px 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--gc); text-align: left; min-height: 100%; }
.zbg .zbg-card:hover { border: 1px solid #9fb4c7; border-top: 5px solid var(--gc); background: #fff; box-shadow: 0 4px 14px rgba(0, 77, 128, .08); }
.zbg .zbg-card[aria-expanded="true"], .zbg .zbg-card[aria-expanded="true"]:hover { background: var(--bg); border-color: var(--gc); border-top: 5px solid var(--gc); box-shadow: 0 0 0 2px var(--gc); }
.zbg .zbg-card[hidden] { display: none; }
.zbg-icon { display: inline-block; width: 38px; height: 38px; color: var(--gc); flex: none; }
.zbg-icon svg { display: block; width: 100%; height: 100%; }
.zbg-icon--big { width: 54px; height: 54px; }
.zbg-icon--tiny { width: 18px; height: 18px; }
.zbg-card__name { font: 500 1.25em/1.2 Oswald, sans-serif; margin-top: 4px; }
.zbg-card__alt { font-size: 13px; color: var(--muted); line-height: 1.3; }
.zbg-card__gist { font-size: 15px; line-height: 1.35; margin: 4px 0 6px; flex: 1; }
.zbg-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }

/* status badges */
.zbg-st { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; color: #fff; white-space: nowrap; }
.zbg-st--chronicle { background: var(--ok); }
.zbg-st--late { background: var(--late); }
.zbg-st--recon { background: var(--recon); }
.zbg-st--fake { background: var(--fake); }

/* розгорнута картка */
.zbg-detail { grid-column: 1 / -1; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gc); border-radius: 14px; padding: 14px 16px 16px; scroll-margin-top: 80px; }
.zbg-detail__head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; }
.zbg-detail__head .zbg-icon { color: var(--gc); }
.zbg-detail__name { font: 500 1.6em/1.15 Oswald, sans-serif !important; }
.zbg-detail__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.zbg-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; border: 1px solid var(--sc); color: #2c333a; }
.zbg .zbg-close { font-size: 28px; line-height: 1; width: 36px; height: 36px; border-radius: 50%; text-align: center; color: var(--muted); }
.zbg .zbg-close:hover { background: var(--bg); color: var(--ink); }
.zbg-detail__body { margin-top: 10px; }
.zbg-detail__body > p + p { margin-top: .55em; }
.zbg-facts { margin: 10px 0 0; display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; }
.zbg-facts dt { font-weight: 500; font-size: 14px; color: #33404c; padding-top: 1px; }
.zbg-facts dd { margin: 0; }
.zbg-facts li { position: relative; padding-left: 14px; }
.zbg-facts li::before { content: ''; position: absolute; left: 2px; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--gc); }
.zbg-flag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 12px; background: #fff3d6; color: #7a5200; }
.zbg-quote { margin: 8px 0 !important; padding: 6px 0 6px 12px !important; border-left: 3px solid var(--gc, #9fb4c7); background: none !important; font-size: 1em !important; font-style: normal; }
.zbg-quote::before, .zbg-quote::after { content: none !important; }
.zbg-quote__orig { display: block; white-space: pre-line; font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: #2c333a; }
.zbg-quote__gloss { margin-top: 3px !important; font-size: 15px; }
.zbg-quote small { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); font-style: normal; }
.zbg-doubt { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff7e6; border: 1px solid #f1d9a6; font-size: 15px; }
.zbg-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.zbg-links__label { font-size: 14px; color: var(--muted); }
.zbg .zbg-wlink { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); text-decoration: none; }
.zbg .zbg-wlink:hover { border: 1px solid #9fb4c7; background: var(--bg); }
.zbg .zbg-wlink--god .zbg-icon { color: var(--gc); }
.zbg .zbg-wlink--post { background: #fff; color: var(--red-ink); }

/* правда чи вигадка */
.zbg-myth { margin-top: 26px; }
.zbg-myth__item { display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.zbg-myth__item .zbg-st { justify-self: start; margin-top: 2px; white-space: normal; text-align: center; }

/* боги в літературі */
.zbg-lead2 { margin-bottom: 12px !important; }
.zbg-work { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; scroll-margin-top: 80px; }
.zbg-work.is-hl { box-shadow: 0 0 0 2px var(--red); }
.zbg-work__top { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.zbg-grade { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 1.5; background: var(--bg); color: #33404c; border: 1px solid var(--line); }
.zbg-work__author { color: var(--muted); font-size: 15px; margin-bottom: 4px; }
.zbg-work__item { margin-top: 8px; }

/* перевір себе */
.zbg-modes { margin-bottom: 12px; }
.zbg-quiz { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.zbg-q__n { color: var(--muted); font-size: 14px; }
.zbg-q__text { font: 500 1.15em/1.35 Oswald, sans-serif; margin: 6px 0 12px !important; }
.zbg-opts { display: grid; gap: 8px; }
.zbg-opts--two { grid-template-columns: 1fr 1fr; }
.zbg .zbg-opt { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); text-align: left; width: 100%; }
.zbg .zbg-opt:hover { background: #fff; border: 1px solid #9fb4c7; }
.zbg .zbg-opt.is-ok, .zbg .zbg-opt.is-ok:hover { background: #dcf5e3; border-color: var(--ok); }
.zbg .zbg-opt.is-bad, .zbg .zbg-opt.is-bad:hover { background: #fde2e2; border-color: #c62828; }
.zbg .zbg-opt:disabled { cursor: default; color: var(--ink); }
.zbg-q__why { margin-top: 12px; padding: 10px 12px; background: var(--bg); border-radius: 10px; font-size: 15px; }
.zbg-q__nav { display: flex; justify-content: flex-end; margin-top: 14px; }
.zbg-q__after { margin: 8px 0 14px !important; }
.zbg .zbg-btn { font: 500 16px/1.2 Oswald, sans-serif; letter-spacing: .03em; border-radius: 10px; padding: 10px 20px;
  background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-ink); }
.zbg .zbg-btn:hover, .zbg .zbg-btn:focus { background: var(--red); color: #fff; box-shadow: 0 3px 0 var(--red-ink); }
.zbg .zbg-btn[hidden] { display: none; }
.zbg-score { font: 500 1.4em Oswald, sans-serif; }

.zbg-about { margin-top: 28px; font-size: 15px; color: #33404c; }
.zbg-about p + p { margin-top: .6em; }
/* статичний список для читачів без JS (JS його замінює) */
.zbg-static h3 { margin: 1em 0 .3em; }
.zbg-static li { margin: .35em 0; }

@media (max-width: 560px) {
  .zbg-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .zbg .zbg-card { padding: 10px 10px 8px; }
  .zbg-icon { width: 30px; height: 30px; }
  .zbg-icon--big { width: 42px; height: 42px; }
  .zbg-icon--tiny { width: 18px; height: 18px; }
  .zbg-card__name { font-size: 1.12em; }
  .zbg-card__gist { font-size: 14px; }
  .zbg-detail { padding: 12px; }
  .zbg-facts { grid-template-columns: 1fr; gap: 2px; }
  .zbg-facts dd { margin-bottom: 6px; }
  .zbg-myth__item { grid-template-columns: 1fr; gap: 4px; }
  .zbg-opts--two { grid-template-columns: 1fr; }
  .zbg .zbg-tab { padding: 8px 12px; font-size: 15px; }
  .zbg-idol__name { font-size: 21px; }
  .zbg-temple { padding: 8px 6px 10px; }
  .zbg-temple figcaption { font-size: 13px; line-height: 1.4; }
  /* сфери — однією стрічкою, що гортається вбік */
  .zbg-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px 8px; padding: 2px 16px 4px; }
  .zbg-filters::-webkit-scrollbar { display: none; }
  .zbg .zbg-chip { flex: none; white-space: nowrap; }
}