/*
Theme Name: Civil Bázis
Theme URI: https://civilbazis.hu
Description: Kadence gyerektéma a Civil Bázis Egyesület oldalához. Arculati irány:
  konzervatív szerkezet, modern képi világ — "Csend" paletta.
Author: Civil Bázis
Template: kadence
Version: 1.0.0
Text Domain: civilbazis
*/

/* ==========================================================================
   Arculati tokenek — "Csend"

   A Kadence a globális palettát --global-palette1..15 néven adja ki. Az itt
   definiált nevek arra mutatnak, hogy a customizerben állított paletta és ez a
   fájl együtt mozogjon: ha a paletta változik, ez is követi.

   Miért van KÉT mályva: a #cb487b fehér szöveggel 4,42:1, sötéttel 3,85:1 —
   olyan középtónus, amin egyik irányú kis szöveg sem olvasható. A világos a nagy
   felületeké és a ferde sávoké (ott csak nagy cím van, elég a 3:1), a mély a
   fejlécsávé, a menüé, a linkeké és a kártyacímeké.
   ========================================================================== */

:root {
  --cb-mauve:        var(--global-palette1);  /* #cb487b — nagy felületek, ferde sávok */
  --cb-mauve-deep:   var(--global-palette2);  /* #a52a60 — fejlécsáv, menü, link, gomb */
  --cb-ink:          var(--global-palette3);  /* #1f1b1d — kenyérszöveg */
  --cb-muted:        var(--global-palette5);  /* halványabb szöveg */
  --cb-dark:         var(--global-palette7);  /* #2b282e — lábléc, sötét blokkok */
  --cb-surface:      var(--global-palette8);  /* #f5f5f0 — váltakozó sávok */
  --cb-white:        var(--global-palette9);
  --cb-blush:        var(--global-palette10); /* #f2ccdd — akcentus sötét felületen */

  --cb-measure:      66ch;   /* olvasható sorhossz */
  --cb-band-slope:   30%;    /* a ferde sáv dőlése — mindenhol azonos */
}

/* ==========================================================================
   Olvashatóság

   A sorkizárás a legnagyobb egyedi javítás: magyar szövegben, hosszú szavakkal,
   elválasztás nélkül csúnya "folyók" keletkeznek benne. A sorhossz korlátozása
   nélkül a szöveg 140 karakteres sorokban futott.
   ========================================================================== */

.entry-content p,
.entry-content li {
  text-align: left;
  hyphens: auto;
}

/* A sorhosszt a Kadence "narrow" elrendezése adja: 680px-es, középre zárt
   tartalomsáv (~78 karakter/sor). Így a cím, a morzsamenü és a szöveg egyszerre
   igazodik — saját max-width korlát nem kell, az balra csúsztatná a szöveget. */

/* ==========================================================================
   Fejléc és navigáció
   ========================================================================== */

/* A fejlécsáv színét a customizer adja (header_wrap_background) — itt NEM
   írjuk felül. Egy korábbi verzióban volt itt egy background szabály, ami
   csendben legyőzte a beállítást, és emiatt a színváltás nem látszott. */

.main-navigation a {
  transition: color .2s ease;
}

/* Aktív menüpont — a blush a mély mályván 4,66:1 */
.main-navigation .current-menu-item > a {
  border-bottom: 3px solid var(--cb-blush);
}

#site-navigation .menu-item a { cursor: pointer; }

#site-navigation .menu-item a > span {
  border-bottom: 1px solid transparent;
  transition: border-color .35s ease;
}

#site-navigation .menu-item:hover a > span {
  border-bottom-color: var(--cb-surface);
}

/* Almenük — asztali és mobil ugyanaz a viselkedés, ezért közös szabály.
   (Az eredeti CSS-ben ez négy, majdnem azonos blokkban szerepelt.) */
#site-navigation .sub-menu li.menu-item a,
#mobile-site-navigation .menu-item a,
#mobile-site-navigation .sub-menu li.menu-item a {
  text-decoration: none;
  text-underline-offset: 8px;
  text-decoration-color: transparent;
  transition: text-decoration-color .35s ease;
}

#site-navigation .sub-menu li.menu-item:hover a,
#site-navigation .sub-menu li.menu-item.current-menu-item a,
#mobile-site-navigation .sub-menu li.menu-item:hover a,
#mobile-site-navigation .sub-menu li.menu-item.current-menu-item a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--cb-blush);
}

#mobile-site-navigation .menu-item a { text-transform: uppercase; }

#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner {
  background: transparent;
  overflow: hidden;
}

.popup-drawer .drawer-inner::before,
#mobile-drawer .drawer-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cb-dark) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

.popup-drawer .drawer-inner > *,
#mobile-drawer .drawer-inner > * { position: relative; z-index: 1; }

@media (max-width: 768px) {
  .site-branding a.brand img { max-width: 120px; }
}

/* ==========================================================================
   Fejléckép — a ferde sáv

   Ez az egyetlen elem, amit a Kadence nem tud magától. A sáv a fejléckép alján
   ül, és ő hordozza a címet meg a morzsamenüt. Ugyanaz a dőlés, mint a régi
   oldal fejléc-grafikáján, csak CSS-ben, hogy minden méretben éles maradjon.
   ========================================================================== */

.entry-hero-container-inner {
  position: relative;
  /* Kiemelt kép nélkül ez adja a tömör mályva sávot; képpel a fotó takarja.
     Így nem kell CSS-ből megkülönböztetni a két esetet. */
  background-color: var(--cb-mauve);
}

.entry-hero-container-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46%;
  min-height: 190px;
  background: var(--cb-mauve);
  clip-path: polygon(0 var(--cb-band-slope), 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

/* A cím a sáv ALJÁN üljön, ne a hero közepén: különben a ferde él fölé kerül,
   és fehér szöveggel a fotón landol. Alul-igazítás + bőséges alsó térköz. */
.entry-hero-container-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.entry-hero-container-inner > * { position: relative; z-index: 1; }

/* A Kadence a kiemelt képhez fixen "center center" pozíciót ír ki, és erre nincs
   customizer-beállítás. Egy közel négyzetes fotó egy széles, alacsony sávban
   viszont így a közepén vágódik — a szemek épp a ferde sáv alá kerülnek.
   Lejjebbi vágásponttal a lényeg a látható felső sávba kerül. */
.entry-hero-container-inner {
  background-position: center 68% !important;
}

/* Az .entry-header kitölti a teljes hero magasságot, és a Kadence függőlegesen
   középre húzza benne a címet — ezért a konténer alul-igazítása nem elég,
   magán a fejlécen kell alulra tenni a tartalmat. */
.entry-hero-container-inner .entry-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding-top: 0;
  padding-bottom: 2.75rem;
}

.entry-hero-container-inner .entry-title,
.entry-hero-container-inner #kadence-breadcrumbs,
.entry-hero-container-inner #kadence-breadcrumbs a {
  color: var(--cb-white);
}

#kadence-breadcrumbs { text-transform: uppercase; letter-spacing: 2px; }
#kadence-breadcrumbs a { text-decoration: none; }
#kadence-breadcrumbs a:hover { text-decoration: underline; }

/* ==========================================================================
   Tartalom
   ========================================================================== */

/* Szekciócím alatti vonal — az akcentus egyetlen dekoratív megjelenése */
.entry-content h2::after {
  content: "";
  display: block;
  width: 62px;
  height: 4px;
  margin-top: .75rem;
  background: var(--cb-mauve-deep);
}

/* Felsorolás — négyzetes pont a kör helyett.
   Csak az importált tartalomra és a valódi listablokkra: a
   wp-block-latest-posts is <ul>, azon ez műterméket okozna. */
.entry-content .article-text ul li,
.entry-content > ul.wp-block-list li {
  list-style: none;
  padding-left: 1.4em;
  position: relative;
}

.entry-content .article-text ul li::before,
.entry-content > ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--cb-mauve-deep);
}

/* ==========================================================================
   Lábléc

   A mályva egyik értéke sem használható a sötét láblécen: a világos 2,92:1,
   a mély 1,87:1. Ezért a kiemelések ott a blusht kapják (10,0:1).
   ========================================================================== */

.footer-html-inner h2,
.cb-footer-heading,
.site-footer-row-container-inner .widget-title {
  color: var(--cb-blush);
  font-family: Spectral, Georgia, serif;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* A szekciócím alatti vonal a láblécben is — de középre, mert a lábléc középre zárt. */
.footer-html-inner .cb-footer-heading::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: .75rem auto 0;
  background: var(--cb-blush);
}

.footer-links a {
  color: var(--cb-blush);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 3px;
  text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; }