/* ============================================================================
   humboldtunion-bulgaria.org — single shared stylesheet (static rebuild)
   Traced 1:1 from docs/wave-d/phase2/design-tokens.md (Avada computed styles).
   Palette --c1..--c8 = the old theme global colors 1..8; --cgd = custom dark green.
   ========================================================================== */

:root {
  --c1: #ffffff;
  --c2: #f7f7f7;
  --c3: #dee5df;
  --c4: #81eea9;
  --c5: #009966;
  --c6: #407075;
  --c7: #464c55;
  --c8: #1f2124;
  --cgd: #025f2c;
  --c5-hover: #036343;            /* hsl(color5) s-5 l-10 */
  --site-width: 1200px;
  --serif: "EB Garamond", Arial, Helvetica, sans-serif;
  --sans: "DM Sans", Arial, Helvetica, sans-serif;
}

/* ---- reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--c8);
  background: var(--c1) url(/assets/uploads/2024/05/triangles.png) repeat;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--c8); transition: color .2s ease; text-decoration: none; } /* Avada default: no underlines */
a:hover { color: var(--c5); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--c8);
  line-height: 1.2;
}
h1 { font-size: 72px; margin: .67em 0; }
h2 { font-size: 54px; margin: 0 0 1.1em; }
h3 { font-size: 40px; margin: 1em 0; }
h4 { font-size: 30px; margin: 1.33em 0; }
h5 { font-size: 22px; margin: 1.67em 0; }
h6 { font-size: 16px; margin: 2.33em 0; }
/* Avada title-size classes (size decoupled from tag) */
.hsize1 { font-size: 72px; } .hsize2 { font-size: 54px; }
.hsize3 { font-size: 40px; } .hsize4 { font-size: 30px; }
.hsize5 { font-size: 22px; } .hsize6 { font-size: 16px; }
.t-center { text-align: center; }
/* Avada title highlight (hand-drawn stroke under the word, e.g. Ръководство) */
.hl { position: relative; display: inline-block; }
.hl > svg {
  position: absolute; top: 50%; left: 50%;
  width: calc(100% + .75em); height: calc(100% + .75em);
  transform: translate(-50%, -50%);
  margin-top: var(--hl-top, 7px);
  overflow: visible; pointer-events: none;
}
.hl > svg path {
  stroke: var(--c5); stroke-width: var(--hl-w, 4); fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* fusion-title headings: var-driven margins (Avada defaults 10px/15px = the
   global title_margin; per-breakpoint overrides come from --tm*m / --tm*s) */
.tt { margin: var(--tmt, 10px) var(--tmr, 0) var(--tmb, 15px) var(--tml, 0); }
@media (max-width: 1024px) {
  .tt {
    margin: var(--tmtm, var(--tmt, 10px)) var(--tmrm, var(--tmr, 0))
            var(--tmbm, var(--tmb, 15px)) var(--tmlm, var(--tml, 0));
  }
}
@media (max-width: 640px) {
  .tt {
    margin: var(--tmts, var(--tmtm, var(--tmt, 10px))) var(--tmrs, var(--tmrm, var(--tmr, 0)))
            var(--tmbs, var(--tmbm, var(--tmb, 15px))) var(--tmls, var(--tmlm, var(--tml, 0)));
  }
}
/* responsive text alignment (live: body .sm/md-text-align-*) */
@media (max-width: 640px) {
  .sm-center { text-align: center !important; } .sm-left { text-align: left !important; }
  .sm-right { text-align: right !important; } .sm-justify { text-align: justify !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .md-center { text-align: center !important; } .md-left { text-align: left !important; }
  .md-right { text-align: right !important; } .md-justify { text-align: justify !important; }
}
/* NOTE: live Avada does NOT shrink headings on mobile (probe 2026-07-08:
   h2 stays 54px at 375w) — no responsive heading override here. */
/* dropcap (Gate D fix #1) — traced 1:1 from live .fusion-dropcap: the span
   precedes the paragraph block; the float makes the text wrap around it.
   Default color = theme color5; /history/ carries an inline --cgd override. */
.dropcap {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; top: 4px; float: left;
  margin-right: 10px; padding: 0; height: 52px; line-height: 52px;
  color: var(--c5); font-size: 60px; text-transform: uppercase;
}
table { border-collapse: collapse; width: 100%; }
table td, table th { border: 1px solid var(--c3); padding: 8px 12px; }
hr.sep { border: 0; border-top: 1px solid var(--c3); margin: 12px 0; width: 100%; }

/* ---- generic layout (transcribed from Avada flex builder) ---------------- */
.sec {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-top: var(--pt, 0); padding-bottom: var(--pb, 0);
  background-repeat: no-repeat; /* Avada default — watermark bg images must not tile */
}
@media (max-width: 1024px) { .sec { padding-top: var(--ptm, var(--pt, 0)); padding-bottom: var(--pbm, var(--pb, 0)); } }
@media (max-width: 640px)  { .sec { padding-top: var(--pts, var(--ptm, var(--pt, 0))); padding-bottom: var(--pbs, var(--pbm, var(--pb, 0))); } }
.sec > .rowx { position: relative; z-index: 1; width: 100%; }
.sec > .mask {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: top right; background-repeat: no-repeat;
  pointer-events: none;
}
.pattern { background-image: url(/assets/uploads/2024/05/triangles.png); background-repeat: repeat; }
.rowx {
  display: flex; flex-wrap: wrap; align-items: stretch; /* Avada default (round-2) */
  margin-left: auto; margin-right: auto;
}
.rowx[style*="max-width"] { }
/* Column model traced from Avada (design-diff round 1): the column box is
   exactly --wl wide; spacing lives INSIDE it (inner-wrapper margins on live).
   The build tools emit --sl/--sr already resolved to row-relative % (spacing
   multiplied by the width fraction), per breakpoint (--slm/--srm, --sls/--srs). */
.colx {
  width: calc(var(--wl, 100%) - var(--sl, 0%) - var(--sr, 0%));
  margin-left: var(--sl, 0); margin-right: var(--sr, 0);
  margin-top: var(--mt, 0); margin-bottom: var(--mb, 0);
  padding: var(--pt, 0) var(--pr, 0) var(--pb, 0) var(--pl, 0);
  min-width: 0;
  display: flex; flex-direction: column; /* live column wrapper is a flex column */
}
.colx, .colw { background-repeat: no-repeat; }
.colx > .image + * { margin-top: 0; }
@media (max-width: 1024px) {
  .colx {
    width: calc(var(--wm, var(--wl, 100%)) - var(--slm, var(--sl, 0%)) - var(--srm, var(--sr, 0%)));
    margin-left: var(--slm, var(--sl, 0%)); margin-right: var(--srm, var(--sr, 0%));
    margin-top: var(--mtm, 0); margin-bottom: var(--mbm, 0);
    padding: var(--ptm, 0) var(--prm, 0) var(--pbm, 0) var(--plm, 0);
    order: var(--om, 0);
  }
  /* live: builder rows get 30px side insets below the content break */
  .rowx:not(.row-full) { max-width: calc(100% - 60px) !important; }
}
@media (max-width: 640px) {
  .colx {
    width: calc(var(--ws, 100%) - var(--sls, 0%) - var(--srs, 0%)) !important;
    margin-left: var(--sls, 0%); margin-right: var(--srs, 0%);
    margin-top: var(--mts, 0); margin-bottom: var(--mbs, 0);
    padding: var(--pts, 0) var(--prs, 0) var(--pbs, 0) var(--pls, 0);
    order: var(--os, 0);
  }
}
/* element visibility per breakpoint (live: fusion-no-*-visibility) */
@media (max-width: 640px) { .hide-s { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .hide-m { display: none !important; } }
@media (min-width: 1025px) { .hide-l { display: none !important; } }
.w-1-1 { --wl: 100%; } .w-1-2 { --wl: 50%; } .w-1-3 { --wl: 33.3333%; }
.w-2-3 { --wl: 66.6667%; } .w-1-4 { --wl: 25%; } .w-3-4 { --wl: 75%; }
.w-1-5 { --wl: 20%; } .w-2-5 { --wl: 40%; } .w-3-5 { --wl: 60%; }
.w-4-5 { --wl: 80%; } .w-1-6 { --wl: 16.6667%; } .w-5-6 { --wl: 83.3333%; }
/* live zeroes only paragraph edges inside text blocks; headings keep their
   margins (probe 2026-07-08: strip h4 keeps 1.33em margins on live) */
.text > p:first-child { margin-top: 0; }
.text > p:last-child { margin-bottom: 0; }
.image { display: block; }
.image img { display: block; }
img.cover { width: 100%; height: auto; object-fit: cover; }
.imgframe { display: inline-block; max-width: 100%; }
.image .imgframe:has(img.cover), .image .imgframe:has(img.cover) a { display: block; width: 100%; }

/* ---- buttons -------------------------------------------------------------- */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c5);
  color: var(--c1);
  font-family: var(--sans); font-size: 16px; line-height: 1.7;
  padding: 13px 29px;
  border: 0; border-radius: 4px; /* Avada default (probe 2026-07-08) */
  text-decoration: none; text-align: center;
}
a.btn:hover { background: var(--c5-hover); color: var(--c1); }
a.btn.btn-span { width: 100%; } /* fusion-button-span-yes */
a.btn .ico { margin-right: .6em; }
a.btn .ico.ico-right { margin: 0 0 0 .6em; }
a.btn-link, a.btn-link:hover { background: transparent; color: var(--c5); }
a.btn-link:hover { color: var(--c5-hover); }
.ico svg { vertical-align: -0.125em; }

/* ---- header ---------------------------------------------------------------- */
.site-header {
  position: relative;
  background-color: rgba(129, 238, 169, 0.3);
  background-image: url(/assets/uploads/2024/05/triangles.png);
  background-repeat: repeat;
  border-top: 10px solid var(--c6);
  border-bottom: 1px solid var(--c6);
  padding: 5px 30px;
}
.site-header > .mask {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%221920%22%20height%3D%22954%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M1697.02%200c48.23%2074.466%2073.5%20162.212%2071.63%20252.091-2.38%20113.804-48.07%20222.366-127.7%20303.434-79.62%2081.065-187.12%20128.499-300.47%20132.611-113.34%204.112-223.98-35.407-309.23-110.486-41.529-36.574-104.796-32.505-141.313%209.088-36.517%2041.594-32.454%20104.961%209.074%20141.535C1022.67%20837.18%201183.21%20894.546%201347.73%20888.577c164.52-5.969%20320.5-74.817%20435.99-192.395A646.282%20646.282%200%20001920%20489.919V954H0V0h1697.02zm-152.13%2037.429c50.71-22.192%20109.79.947%20131.97%2051.683a383.79%20383.79%200%200110.87%20279.732c-31.73%2091.288-96.71%20167.233-181.94%20212.762a384.921%20384.921%200%2001-278%2033.06c-93.53-24.262-174.53-82.823-226.82-164.088-29.965-46.559-16.532-108.606%2030-138.586%2046.53-29.979%20108.54-16.538%20138.51%2030.021%2024.99%2038.834%2063.75%2066.898%20108.61%2078.536a184.603%20184.603%200%2000133.31-15.847c40.83-21.815%2071.88-58.154%2087.03-101.727a183.148%20183.148%200%2000-5.19-133.5c-22.18-50.735.95-109.855%2051.65-132.046z%22%20fill%3D%22rgba%28255%2C255%2C255%2C1%29%22%2F%3E%3C%2Fsvg%3E");
  background-size: cover; background-position: top left;
}
.header-inner {
  position: relative;
  max-width: var(--site-width); margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 0; text-decoration: none; } /* live: title abuts logo box */
.brand img { width: 150px; height: auto; }
.brand-title {
  font-family: var(--serif); font-size: 32px; line-height: 1.2;
  color: var(--cgd); margin: 10px 0 5px;
}
/* live mobile header: logo (150px) stacked above the title, block centered,
   contents left-aligned (probe 2026-07-08: col x85, img 150, title 32px) */
@media (max-width: 900px) {
  .site-header { padding: 20px 30px 25px; } /* live mobile header paddings */
  .header-inner { flex-direction: column; align-items: center; }
  .brand { flex-direction: column; align-items: flex-start; width: 206px; } /* live col ~206-218px */
  .brand-title { margin-top: 10px; }
}

/* ---- navigation ------------------------------------------------------------ */
.site-nav { background: var(--c6); padding: 0 30px; position: relative; z-index: 5; }
.site-nav .nav-inner { max-width: var(--site-width); margin: 0 auto; }
.nav-toggle-box { display: none; }
.site-nav ul.menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch;
  justify-content: space-between; /* live: awb-menu ul justify space-between */
  font-family: var(--sans); font-size: 16px;
}
.site-nav ul.menu > li { position: relative; }
.site-nav ul.menu > li > a {
  display: flex; align-items: center; gap: 6px;
  min-height: 50px; padding: 0; /* live links carry no side padding */
  color: var(--c1); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav ul.menu > li > a:hover,
.site-nav ul.menu > li.current > a {
  color: var(--c8); border-bottom-color: var(--c5);
}
.site-nav .caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; display: inline-block;
}
.site-nav .sub {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 100%; left: 0; min-width: 200px; max-width: 240px;
  background: var(--c6);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 3px 10px 0 rgba(31, 33, 36, 0.03);
  display: none; z-index: 10;
}
.site-nav li:hover > .sub, .site-nav li:focus-within > .sub { display: block; }
.site-nav .sub a {
  display: block; padding: 10px 18px;
  color: var(--c2); text-decoration: none; font-size: 16px;
}
.site-nav .sub a:hover { background: var(--c2); color: var(--c8); }
.site-nav .sub li:last-child a { border-radius: 0 0 6px 6px; }
.lang-flag { width: 18px; height: 12px; margin-right: 6px; vertical-align: baseline; }

/* mobile menu (checkbox hack — fully functional without JS) */
@media (max-width: 900px) {
  .site-nav { padding: 0 20px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    min-height: 68px; margin: 0 auto; color: var(--c1); font-size: 20px; cursor: pointer;
    width: 100%;
  }
  .site-nav ul.menu { display: none; flex-direction: column; padding-bottom: 10px; }
  .nav-toggle-box:checked ~ ul.menu { display: flex; }
  .site-nav ul.menu > li > a { min-height: 44px; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.15); }
  .site-nav .sub { position: static; display: block; box-shadow: none; border-radius: 0; background: rgba(0,0,0,.12); }
}
@media (min-width: 901px) { .nav-toggle { display: none; } }

/* ---- title bar (breadcrumbs + page title) ----------------------------------- */
.titlebar {
  position: relative;
  background-color: var(--c2);
  background-image: url(/assets/uploads/2024/05/triangles.png); background-repeat: repeat;
  padding: 25px 30px 35px;
}
.titlebar > .mask {
  position: absolute; inset: 0;
  background: var(--c2);
  -webkit-mask-image: none; /* solid veil with pattern showing subtly */
  opacity: .92;
}
.titlebar-inner { position: relative; max-width: var(--site-width); margin: 0 auto; }
.breadcrumbs { font-family: var(--sans); font-size: 13px; margin-bottom: 10px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin: 0 6px; color: var(--c8); opacity: .5; }
.breadcrumbs a { text-decoration: none; }
.titlebar h1 {
  font-family: var(--serif); font-size: 30px; font-weight: 400;
  text-align: center; margin: 10px 0 0;
}
.titlebar.tb-listing h1 { font-size: 40px; margin: 30px 0; }

/* ---- main --------------------------------------------------------------------- */
.site-main { display: block; }
.page-content > .sec > .rowx, .content-block > .sec > .rowx { }
.sec > .rowx { padding-left: 0; padding-right: 0; }
main a:not(.btn) { color: var(--c8); }
main a:not(.btn):hover { color: var(--c5); }

/* ---- post cards (archives, home news) ------------------------------------------ */
.cards { margin: 0 0 20px; } /* live: top margin nets to 0 (ul -20), bottom 20 stays */
ul.cards-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 40px 50px; /* live gutters: ul -20/-25 + li padding 20/25 */
}
/* grid items must not pick up column width/margin vars (they inherit!) */
.cards-grid > .colx {
  --sl: 0%; --sr: 0%; --slm: 0%; --srm: 0%; --sls: 0%; --srs: 0%;
  --mtm: 0px; --mbm: 0px; --mts: 0px; --mbs: 0px;
  width: auto !important; margin: 0;
}
.cards-2 ul.cards-grid { grid-template-columns: repeat(2, 1fr); }
.cards-3 ul.cards-grid { grid-template-columns: repeat(3, 1fr); }
.cards-4 ul.cards-grid { grid-template-columns: repeat(2, 1fr); } /* archive grid renders 2-up at 1200px, like live */
@media (max-width: 900px) {
  .cards-2 ul.cards-grid, .cards-3 ul.cards-grid, .cards-4 ul.cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cards-2 ul.cards-grid, .cards-3 ul.cards-grid, .cards-4 ul.cards-grid { grid-template-columns: 1fr; }
  /* live: single-column cards bleed over the column spacing to full row width */
  .colx .cards ul.cards-grid { margin: 0 -2%; }
}
.card {
  background: rgba(222, 229, 223, 0.2);   /* color3 at 20% */
  padding-bottom: 40px;
  display: flex; flex-direction: column;
}
.card .image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card .meta {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px;
  font-size: 13px; padding: 10px 10px 10px 20px; margin-bottom: 10px;
  min-height: 56px; /* live: --awb-height 40px + padding (probe 2026-07-08) */
  border-top: 1px solid var(--c3); border-bottom: 1px solid var(--c3); /* live meta band */
}
.card .meta a { text-decoration: none; }
.card h5, .card .hsize5 { margin: 0 40px 10px 30px; font-size: 22px; }
.card h5 a { text-decoration: none; }
/* live card separator is INVISIBLE and pins the read-more block to the card
   bottom (flex column: slack collapses on the tallest card) */
.card hr.sep { margin: auto 30px 0; border: 0; }
.meta .msep::before { content: ""; }
.meta .mdate { white-space: nowrap; }
/* Gate D #3 (/category/памет/ + /en/in-memoriam/): name-only cards — the
   white name plate fills the grid cell, equal heights (min-height covers the
   2-line names so single-line rows match), content centered. */
.card:has(> div:only-child > a.btn:only-child) { padding-bottom: 0; }
.card:has(> div:only-child > a.btn:only-child) > div { display: flex; flex: 1 1 auto; }
.card:has(> div:only-child > a.btn:only-child) > div > a.btn { flex: 1 1 auto; min-height: 80px; }

/* ---- legal/plain content pages (owner directive 2026-07-10) ---------------------
   Classic-editor pages (Terms of Use, Privacy Policy) have no Fusion column to
   carry a background — same white/radius/padding plate convention as .blog-list. */
.legal-plate {
  max-width: var(--site-width); margin: 20px auto 40px;
  background: var(--c1); border-radius: 15px; padding: 35px 45px;
}
@media (max-width: 640px) { .legal-plate { padding: 20px 25px; } }

/* ---- blog list (Конференции BG layout) ------------------------------------------- */
/* white plate behind the text listing — owner design directive (Phase 3b),
   the live listing sat directly on the pattern background */
.blog-list {
  max-width: var(--site-width); margin: 20px auto 40px;
  background: var(--c1); border-radius: 15px; padding: 10px 45px 30px;
}
@media (max-width: 640px) { .blog-list { padding: 10px 20px 25px; } }
.entry { padding: 30px 0 20px; }
.entry h2 { font-size: 40px; margin: 0 0 20px; }
.entry h2 a { text-decoration: none; }
.entry .meta-info {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--c8); margin-top: 24px;
  border-top: 1px solid var(--c3); border-bottom: 1px solid var(--c3);
  padding: 8px 0;
}
.entry .meta-info a { text-decoration: none; }
.entry .align-left span + span { margin-left: 6px; }
.entry .read-more { color: var(--c5); text-decoration: none; }
.entry .read-more:hover { color: var(--c5-hover); }
.entry .read-more::after { content: " \203A"; }

/* ---- pagination -------------------------------------------------------------------- */
.pagination { display: flex; align-items: center; gap: 6px; margin: 30px 0; font-size: 14px; }
.pagination .current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px;
  background: var(--c5); color: var(--c1); border-radius: 2px;
}
.pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 6px;
  border: 1px solid var(--c3); border-radius: 2px;
  text-decoration: none;
}
.pagination a:hover { background: var(--c2); }
.pagination a.pagination-next, .pagination a.pagination-prev { border: 0; min-width: auto; }
.pagination .page-next::after { content: "\203A"; margin-left: 4px; }
.pagination .page-prev::before { content: "\2039"; margin-right: 4px; }


/* (marquee band removed — Todor's decision, Phase 3b gate 2026-07-08) */

/* ---- mission circles (home) — traced 1:1 from live computed styles
   (design-diff probe 2026-07-08): outer 500px ring 1px solid c4 with 10px
   padding; inner dashed 1px cgd circle; white disc = panel background;
   46px dark-green dots ON the outer circle at translate3d(-125,-216.5)/
   (-125,+216.5)/(250,0) of r=250 -> 25%/6.7%, 25%/93.3%, 100%/50%. -------- */
.circles {
  position: relative;
  width: min(500px, 100%); aspect-ratio: 1;
  margin: 0 auto;
  padding: 10px;
  border-radius: 50%;
  border: 1px solid var(--c4);
  background: transparent;
}
.circles-inner {
  position: relative; width: 100%; height: 100%;
  border: 1px dashed var(--cgd); border-radius: 50%;
  overflow: hidden;
}
.circles-panel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 10px;
  background: var(--c1);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s;
}
.circles-panel.active { opacity: 1; visibility: visible; }
.circles-title { font-family: var(--serif); font-size: 20px; line-height: 1.2; color: var(--c7); margin: 0; }
.circles-text { font-size: 16px; line-height: 1.7; color: var(--c7); margin-top: .5em; }
.circles-dot {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--cgd); color: var(--c1); border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: 2px 2px 5px 1px var(--c4);
  transition: background .5s ease-in-out;
  z-index: 2;
}
.circles-dot.d1 { left: 25%; top: 6.7%; }
.circles-dot.d2 { left: 25%; top: 93.3%; }
.circles-dot.d3 { left: 100%; top: 50%; }
.circles-dot:hover, .circles-dot.active { background: var(--c8); color: var(--c1); }

/* ---- checklist (home foundation links) — live: transparent ul, items carry
   the c4 background (10px/15px padding, contiguous rows), 27px icon circles -- */
ul.checklist { list-style: none; margin: 10px 0; padding: 0; background: transparent; }
ul.checklist li { display: flex; gap: 11px; align-items: flex-start; padding: 10px 10px 10px 15px; background: var(--c4); }
ul.checklist .ico.circle {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%;
  background: var(--cgd); color: var(--c1);
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
  margin-top: 0;
}
ul.checklist a { color: var(--c8); text-decoration: none; }
ul.checklist li p { margin: 0; } /* authoring artifact: <p> wrappers in items 2,3 */

/* ---- photo galleries (Kolleg etc.) ------------------------------------------------ */
.gallery-wrap { width: 100%; }
.gallery { display: grid; gap: 10px; width: 100%; margin: 10px 0; }
.gallery-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .gallery-3, .gallery-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gallery-2, .gallery-3, .gallery-4 { grid-template-columns: 1fr; } }
.gallery-item img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid var(--c5); border-radius: 5px; display: block;
}
.gallery-item a { display: block; }

/* ---- lightbox (vanilla, self-hosted — owner request Phase 3b; no-JS fallback:
   the anchors remain plain links to the full image) --------------------------- */
.lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 17, 19, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.lb img {
  max-width: calc(100vw - 120px); max-height: calc(100vh - 80px);
  width: auto; height: auto; box-shadow: 0 8px 40px rgba(0,0,0,.6);
  border-radius: 4px;
}
.lb button {
  position: absolute; background: transparent; border: 0; cursor: pointer;
  color: var(--c1); opacity: .8; padding: 16px; line-height: 1;
}
.lb button:hover { opacity: 1; color: var(--c4); }
.lb .lb-prev, .lb .lb-next { top: 50%; transform: translateY(-50%); font-size: 48px; font-family: var(--serif); }
.lb .lb-prev { left: 8px; }
.lb .lb-next { right: 8px; }
.lb .lb-close { top: 8px; right: 8px; font-size: 32px; }
.lb .lb-count {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  color: var(--c1); font-size: 14px; opacity: .8;
}
@media (max-width: 640px) { .lb img { max-width: 100vw; max-height: calc(100vh - 60px); } }

/* ---- footer -------------------------------------------------------------------------------- */
/* Solid contrasting bar (owner directive 2026-07-10): the old --c2 near-white +
   faint triangle tile barely separated from the page background. Reuses the
   nav's --c6 teal so header/footer bookend the page in the same brand tone. */
.site-footer {
  background: var(--c6);
  color: var(--c1);
  border-radius: 12px 12px 0 0;
  margin-top: 3px;
  padding: 16px 30px;
  font-size: 14px;
}
.footer-inner {
  margin: 0 auto; /* live footer content spans the padded row, no 1200px cap */
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px;
}
@media (min-width: 901px) { .footer-inner > .f-social { margin-right: 56px; } } /* live: icons end ~56px in */
.footer-inner > .f-copy { flex: 1 1 260px; font-size: 13px; color: var(--c1); }
.footer-inner > .f-menu { flex: 1 1 auto; font-size: 13px; }
.footer-inner > .f-social { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.f-menu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding: 0; justify-content: center; }
.f-menu a { text-decoration: none; color: var(--c1); }
.f-menu a:hover { color: var(--c4); }
.f-social .social { display: inline-flex; gap: 20px; }
.f-social a { color: var(--c1); font-size: 20px; } /* live social icons: 20px */
.f-social a:hover { color: var(--c4); }
.social { display: flex; gap: 20px; }

/* ---- fade-in on scroll (JS adds .visible; without JS everything stays visible).
   Timing per element from the original animation attrs: --fx-dur/--fx-delay
   (live: fadeInLeft 1.3s; the two strip buttons fadeIn 2.0s delay 0.5s). ------- */
html.js [data-fx] {
  opacity: 0; transform: none;
  transition: opacity var(--fx-dur, 1.3s) ease var(--fx-delay, 0s);
}
html.js [data-fx="fade-left"] {
  transform: translateX(-40px);
  transition: opacity var(--fx-dur, 1.3s) ease var(--fx-delay, 0s),
              transform var(--fx-dur, 1.3s) ease var(--fx-delay, 0s);
}
html.js [data-fx].visible { opacity: 1; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-fx] { opacity: 1; transition: none; }
}

/* ---- content plates (owner design directives, Phase 3b) --------------------------------------------
   Post/page main content columns: white plate, rounded corners, roomier padding.
   Inline column backgrounds (e.g. the устав watermark) still win over the
   plate background; radius/padding apply uniformly. */
/* Gate D 2026-07-08: .tpl-post-or-page-en (the 142 EN twins — the URL
   inventory couldn't split EN posts from pages) was missing from every plate
   rule, leaving EN pages plateless on the raw pattern. Now included. */
.tpl-post .page-content > .sec > .rowx > .colx,
.tpl-page .page-content > .sec > .rowx > .colx,
.tpl-post-or-page-en .page-content > .sec > .rowx > .colx,
.tpl-pagination .page-content > .sec > .rowx > .colx {
  background-color: var(--c1);
  border-radius: 15px;
  padding: 35px 45px 45px;
}
@media (max-width: 640px) {
  .tpl-post .page-content > .sec > .rowx > .colx,
  .tpl-page .page-content > .sec > .rowx > .colx,
  .tpl-post-or-page-en .page-content > .sec > .rowx > .colx,
  .tpl-pagination .page-content > .sec > .rowx > .colx {
    padding: 25px 20px 30px;
  }
}
/* Gate D #2 (унифицирани платки, /секции/ + /en/sections/): plate columns in
   one row stretch to equal height regardless of text length; rows the builder
   vertically centered keep centering their content INSIDE the stretched plate.
   (!important beats the builder's inline align-items/justify-content.) */
.tpl-post .page-content > .sec > .rowx,
.tpl-page .page-content > .sec > .rowx,
.tpl-post-or-page-en .page-content > .sec > .rowx,
.tpl-pagination .page-content > .sec > .rowx { align-items: stretch !important; }
.tpl-post .page-content > .sec > .rowx[style*="align-items:center"] > .colx,
.tpl-page .page-content > .sec > .rowx[style*="align-items:center"] > .colx,
.tpl-post-or-page-en .page-content > .sec > .rowx[style*="align-items:center"] > .colx,
.tpl-pagination .page-content > .sec > .rowx[style*="align-items:center"] > .colx {
  justify-content: center !important;
}
/* Gate D #4: the pattern must never show through a plate — nested pattern
   sections inside a plate column lose the texture. Sections with a solid
   inline background keep it (e.g. the conference venue band's milky
   var(--c2)); the rest read as the plate's own white. */
.tpl-post .page-content > .sec > .rowx > .colx .sec.pattern,
.tpl-page .page-content > .sec > .rowx > .colx .sec.pattern,
.tpl-post-or-page-en .page-content > .sec > .rowx > .colx .sec.pattern,
.tpl-pagination .page-content > .sec > .rowx > .colx .sec.pattern { background-image: none; }
/* Home "view all news/events" — proper buttons (owner directive 2026-07-08,
   "по-слик, текст на един ред" 2026-07-09: slim, nowrap, tighter padding).
   Child combinators keep card read-more links (li.card > div > a) unaffected. */
.tpl-home .colx:not(.card) > div > a.btn-link {
  background: var(--c5); color: var(--c1);
  white-space: nowrap;
  font-size: 15px; line-height: 1.4;
  padding: 9px 20px; border-radius: 10px;
}
.tpl-home .colx:not(.card) > div > a.btn-link:hover { background: var(--c5-hover); color: var(--c1); }

/* ---- section member lists (Gate D round 2 directive, 2026-07-08) --------------------
   "Състав на секцията": one plate = the heading + a plain list of links to the
   member profile pages (replaces the scattered card grid + pagination). */
.member-list { list-style: none; margin: 10px 0 0; padding: 0; }
.member-list li { padding: 6px 0; border-bottom: 1px solid var(--c2); }
.member-list li:last-child { border-bottom: 0; }
.member-list a { color: var(--c8); }
.member-list a:hover { color: var(--c5); }

/* ---- contact page (Gate D round 2 directive, 2026-07-08) ----------------------------
   Single column: title + intro on top; below them one row — building photo
   left, postal address right; on mobile the photo stacks above the address. */
.contact-row { display: flex; align-items: center; gap: 45px; margin-top: 35px; }
.contact-row .contact-photo { flex: 1 1 55%; min-width: 0; }
.contact-row .contact-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
.contact-row .contact-addr { flex: 1 1 45%; }
.contact-row .contact-addr .tt { margin-top: 0; }
@media (max-width: 800px) {
  .contact-row { flex-direction: column; align-items: stretch; gap: 25px; margin-top: 25px; }
}

/* ---- misc / content ------------------------------------------------------------------------------ */
.content-block { }
.page-content { overflow-x: clip; }
.text img { height: auto; }
.divPersonalPageUserTitle { font-weight: 700; margin-top: 1em; }
blockquote { border-left: 3px solid var(--c5); margin: 1em 0; padding: .5em 1.5em; background: var(--c2); }

/* 404 */
.error-page { max-width: 720px; margin: 80px auto; padding: 0 24px; text-align: center; }
.error-page h1 { font-size: 54px; }

/* ---- site search (issue 9b632285) ------------------------------------------
   Magnifier in the header (spot of the dropped Avada search pill) + overlay.
   Progressive: the button only shows when JS runs (html.js); index+MiniSearch
   are lazy-loaded by site.js on first open. */
.search-btn { display: none; }
html.js .search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  border: 1px solid var(--c5); background: rgba(255, 255, 255, 0.6);
  color: var(--c5); font-size: 18px; cursor: pointer;
  transition: background .2s, color .2s;
}
html.js .search-btn:hover, html.js .search-btn:focus-visible {
  background: var(--c5); color: var(--c1);
}
@media (max-width: 900px) {
  /* stacked mobile header: pin the magnifier to the top-right corner */
  html.js .search-btn { position: absolute; top: 0; right: 0; margin: 0; }
}

.so {
  position: fixed; inset: 0; z-index: 1100; /* above the lightbox (1000) */
  background: rgba(31, 33, 36, 0.75);
  overflow-y: auto; padding: 9vh 20px 40px;
}
.so-panel {
  max-width: 680px; margin: 0 auto;
  background: var(--c1); border-radius: 15px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.so-bar { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--c3); }
.so-bar .so-ico { color: var(--c5); font-size: 18px; flex: 0 0 auto; display: inline-flex; }
.so-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: 18px; color: var(--c8); padding: 6px 0;
}
.so-input::placeholder { color: var(--c7); opacity: .6; }
.so-input::-webkit-search-cancel-button { -webkit-appearance: none; } /* we have .so-close */
.so-close {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--c7); font-size: 26px; line-height: 1; padding: 2px 6px;
}
.so-close:hover { color: var(--c8); }
.so-results { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.so-results li { border-bottom: 1px solid var(--c2); }
.so-results li:last-child { border-bottom: 0; }
.so-results a { display: block; padding: 14px 22px; text-decoration: none; }
.so-results .so-title {
  font-family: var(--serif); font-size: 19px; line-height: 1.3; color: var(--cgd);
  display: block; margin-bottom: 4px;
}
.so-results .so-snip { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--c7); display: block; }
.so-results li.active a, .so-results a:hover { background: var(--c2); }
.so-results li.active .so-title { color: var(--c5); }
.so-results mark { background: var(--c4); color: inherit; padding: 0 1px; border-radius: 2px; }
.so-status { padding: 12px 22px 16px; font-family: var(--sans); font-size: 14px; color: var(--c7); }
.so-status:empty { display: none; }
@media (max-width: 640px) {
  .so { padding: 4vh 10px 24px; }
  .so-bar { padding: 14px 16px; }
  .so-results a { padding: 12px 16px; }
}