/*
 * Bekehaz — testreszabások a Hadron témához (gyerektéma)
 *
 * Ez a fájl utolsóként töltődik be, ezért felülírja a Hadron / Quark 2 stílusait.
 */

/* Címsorok: a Quark2 nagy, vastag Cal Sans betűje helyett a szöveg betűtípusa (Inter),
   kisebb méretben és közepesen vastagon */
:root:root, :root[data-theme] { --pico-font-family-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: clamp(1.75rem, 1.5vw + 1.3rem, 2.25rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 1vw + 1.1rem, 1.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.015em; }
/* A Quark2 h2 fölötti rövid kiemelő vonala kikapcsolva, kérésre. */
h2::before { content: none; display: none; }
h3 { font-size: clamp(1.1rem, 0.6vw + 1rem, 1.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; }
h5 { font-size: 1rem; font-weight: 600; }

/* Kép-logó (a "BÉKEHÁZ" felirat + galambos jelvény, átlátszó háttérrel) a fejléc
   színes sávján. Az eredeti kép aránya kb. 2.6:1 (768x293), a magasság alapján
   méretezzük, hogy a görgetéskor zsugorodó fejlécben is arányos maradjon. */
.navbar-brand-image { text-decoration: none; }
/* Magasabb specificitás kell, mint a Quark2 ".navbar-brand img" (28px) alapértelmezéséhez,
   ezért a ".navbar-brand img.brand-logo-img" kombinációt is megcélozzuk, + !important a
   biztonság kedvéért. Szándékosan NEM függ a görgetési (.scrolled) állapottól — állandó
   méret nyitáskor is, görgetve is. Keskeny (mobil) képernyőn a kép szélessége (arány ~2,6:1)
   túlfutna a viewporton, ezért ott kisebb magasság. */
.navbar-brand img.brand-logo-img,
.brand-logo-img {
    height: 150px !important;
    width: auto;
    display: block;
}
@media (max-width: 640px) {
    .navbar-brand img.brand-logo-img,
    .brand-logo-img { height: 80px !important; }
    /* A kék sáv magassága arányosan a kisebb (80px-es) logóhoz igazítva
       (12px fejléc-margó + 50px felirat-alja + 20px). */
    #header::before { height: 82px; }
}

/* Oldalfejléc (a Hadron/Quark2 16 px behúzást ad neki, ezért kezdődött beljebb, mint a szöveg) */
.page-header { margin-bottom: 1.5rem; padding: 0; }
.page-header h1 { margin-bottom: 0.25rem; }
.page-header .lead { color: var(--q2-text-muted); font-size: 1.15rem; margin: 0; }

/* Útvonal-jelző */
.breadcrumbs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.9rem; color: var(--q2-text-muted); }
.breadcrumbs li::before { content: none; }
/* Pico: a nav > ol/li kap függőleges középre igazítást és belső margót — itt nem kell. */
nav .breadcrumbs { justify-content: flex-start; align-items: baseline; }
nav .breadcrumbs li { padding: 0; margin: 0; }
nav .breadcrumbs a { display: inline; padding: 0; margin: 0; }
nav .breadcrumbs a i { display: inline; margin-right: 0.25rem; }
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--q2-text-muted); }

/* Automatikus ikonok a hivatkozások után (a szövegben nem kell HTML) */
.content-item a[href$=".pdf"]::after,
.content-item a[href$=".PDF"]::after {
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 400;
    content: "\00a0\f1c1";
    font-size: 0.85em;
}
.content-item a[href$=".epub"]::after {
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    content: "\00a0\f02d";
    font-size: 0.85em;
}
.content-item a[href^="http"]:not([href*="bekehaz.hu"])::after {
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free";
    font-weight: 900;
    content: "\00a0\f08e";
    font-size: 0.7em;
}
/* A gombok és kártyák linkjei ne kapjanak ikont */
.content-item .btn::after,
.content-item .card a::after,
.content-item .video-embed a::after { content: none !important; }

/* Szélesebb tartalom-kártya (pl. beágyazott naptárhoz): a bal-jobb margó minimálisra csökkentve,
   a kártya kitölti a `.container`-t (a fejléccel/menüvel azonos, kb. 1200 px-es sávot). */
#body-wrapper > .container > .content-item.content-item--wide {
    max-width: none;
    padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}

/* Naptár */
.calendar-embed { margin-top: 1rem; overflow-x: auto; }
.calendar-embed iframe { width: 100%; min-width: 320px; border: 1px solid var(--q2-divider); border-radius: 6px; background: #fff; }

/* Idézetek: ne legyenek vastagok */
.content-item blockquote, .content-item blockquote p { font-weight: 400; }
.home-intro blockquote { margin: 1.25rem 0; }

/* Kezdőlap: kártyacsoportok */
.link-group { margin: 2.5rem auto 0; max-width: 60rem; }
.link-group .cards-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5rem; }
.link-group .card { display: flex; flex-direction: column; margin: 0; }
.link-group .card-image { line-height: 0; }
.link-group .card-image img { width: 100%; height: auto; display: block; }
.link-group .card-header h4 { margin: 0; }
.link-group .card-body p { margin: 0; }

/* Videólista */
.video-group-title { margin: 2.25rem 0 1rem; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem; }
.video-card { background: var(--q2-bg-elev); border: 1px solid var(--q2-divider); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.video-card .grav-youtube { margin-bottom: 0; max-width: none; }
.video-body { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.video-body h3 { font-size: 1.05rem; line-height: 1.35; margin: 0; }
.video-desc { font-size: 0.92rem; color: var(--q2-text-muted); }
.video-desc p { margin: 0; }
.video-actions { margin: auto 0 0; padding-top: 0.5rem; }

/* Táblázatok: keskeny képernyőn vízszintesen görgethetők, nem lógnak ki az oldalból */
.content-item table { display: block; max-width: 100%; overflow-x: auto; }
.content-item table th, .content-item table td { vertical-align: top; }
/* Hosszú fájlnevek/linkek ne szélesítsék az oldalt */
.content-item a { overflow-wrap: anywhere; }
.content-item table th, .content-item table td { overflow-wrap: normal; word-break: normal; }

/* Legördülő menü: "Videók" csoportcím és a hozzá tartozó, beljebb húzott elemek */
.dropmenu li.menu-label { display: block; margin: 0.35rem 0 0; padding: 0.55rem 0.875rem 0.15rem; border-top: 1px solid var(--q2-divider); }
.dropmenu li.menu-label span { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--q2-text-muted); }
.dropmenu li.menu-sub > a { padding-left: 1.6rem; }
.overlay .overlay-menu li.menu-label { margin: 0.6rem 0 0; padding: 0.35rem 0 0 0.75rem; border-top: 1px solid var(--q2-divider); }
.overlay .overlay-menu li.menu-label span { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--q2-text-muted); }
.overlay .overlay-menu li.menu-sub > a { padding-left: 1.5rem; }

/* Programok: egyforma méretű kártyák. A "További részletek" gombra a kép és a teljes
   leírás egy felugró ablakban (popup) jelenik meg — a kártya maga nem fordul/nyúlik,
   ezért a rács minden sorban, minden eseménynél azonos magasságú marad, függetlenül
   attól, hogy egy adott eseménynek van-e képe vagy hosszú leírása. (Korábban a kártya a
   hátlapján lévő teljes szöveg/kép méretéhez igazodott, ami rövid és hosszú leírású
   események között nagy, széttagoló méretkülönbséget okozott.) A cím és az összegzés
   sor-számra van korlátozva (`-webkit-line-clamp`) egy hozzá tartozó `min-height`-tal,
   hogy sem egy hosszú cím, sem egy hosszú leírás ne nyújtsa meg a kártyát — és rövid
   szöveg esetén se legyen alacsonyabb a szomszédjainál. */
.events-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1.5rem; align-items: stretch; }

.event-card { position: relative; }
.event-card-face {
    height: 100%;
    background: var(--q2-bg-elev);
    border: 1px solid var(--q2-divider);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 1rem 1.15rem 0.9rem;
    display: flex; flex-direction: column;
}

.event-top-row { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 0.6rem; }
.event-date {
    min-width: 62px; text-align: center; border-radius: 8px;
    background: var(--q2-accent); color: var(--q2-accent-contrast, #fff);
    padding: 0.35rem 0.2rem 0.3rem; flex: none;
}
.event-date-month { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.92; }
.event-date-day { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.event-date-weekday { font-size: 0.7rem; opacity: 0.92; }

.event-main-info { flex: 1; min-width: 0; }
.event-title {
    margin: 0 0 0.15rem; font-size: 1.05rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.3em * 2);
}
.event-datetime { font-size: 0.9rem; }
.event-location { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--q2-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event-location a { color: var(--q2-link); }

.event-summary {
    margin-top: 0.5rem; font-size: 0.9rem; color: var(--q2-text-muted); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    min-height: calc(1.4em * 3);
}
.event-footer { margin-top: auto; padding-top: 0.5rem; text-align: right; }
/* "További részletek": a sablon kiemelő színével (--q2-accent) hangsúlyos nyomógombként,
   nem sima szöveges linkként. */
.event-details-link {
    all: revert; font: inherit; font-size: 0.85rem; font-weight: 600; line-height: 1.2;
    color: var(--q2-accent-contrast, #fff); background: var(--q2-accent);
    border: none; border-radius: 6px; padding: 0.5rem 1rem; cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: filter 0.15s ease, transform 0.05s ease;
}
.event-details-link:hover { filter: brightness(0.92); text-decoration: none; }
.event-details-link:active { transform: translateY(1px); }
.event-details-link:focus-visible { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; }

/* Részletek popup: a kártyához tartozó <template class="event-details-source"> teljes
   tartalma (kép + teljes leírás) ide klónozódik meg-nyitáskor — a kép csak ekkor
   töltődik be, nem minden kártyánál eleve. */
.details-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.72); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.details-modal[hidden] { display: none; }
.details-modal-inner {
    position: relative; background: var(--q2-bg-elev); border-radius: 12px;
    max-width: 34rem; width: 100%; max-height: 90vh; overflow-y: auto;
    padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
.details-modal-close {
    all: revert; position: absolute; top: 0.6rem; right: 0.75rem; font-size: 1.5rem; line-height: 1;
    background: none; border: none; cursor: pointer; color: var(--q2-text-muted); padding: 0.25rem;
}
.details-modal-close:hover { color: var(--q2-text-strong); }
.details-modal-body .event-details-image { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin-bottom: 0.75rem; cursor: zoom-in; }
.details-modal-body .event-details-title { margin: 0 0 0.35rem; font-size: 1.15rem; }
.details-modal-body .event-details-date-location { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--q2-text-muted); }
.details-modal-body .event-details-text { font-size: 0.95rem; }
.details-modal-body .event-details-text p { margin: 0 0 0.6rem; }

/* A kép-nagyító popup a részletek popup FÖLÖTT nyílhat meg (nagyobb z-index), mivel a
   kép a részletek popup tartalmán belülről nyitható. */
.image-modal { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.82); display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 1rem; }
.image-modal[hidden] { display: none; }
.image-modal-inner { max-width: 100%; max-height: 100%; overflow: auto; }
.image-modal-inner img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }

/* Korábbi programok: egyszerű "dátum | cím" lista a kártyarács alatt. A cím kattintható,
   és ugyanaz a részletek-popup nyílik meg rá, mint a kártyáknál (lásd .event-details-source
   és custom.js — mindkettőt a közös .event-item osztály fogja össze). */
.past-events { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--q2-divider); }
.past-events-title { margin: 0 0 0.9rem; font-size: 1.2rem; }
.past-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.past-event-row { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; font-size: 0.95rem; }
.past-event-date { color: var(--q2-text-muted); flex: none; }
.past-event-sep { color: var(--q2-divider); }
.past-event-title {
    all: revert; font: inherit; color: var(--q2-link); background: none; border: none;
    padding: 0; cursor: pointer; text-decoration: underline; text-align: left;
}
.past-event-title:hover { text-decoration: none; }
.past-event-title:focus-visible { outline: 2px solid var(--q2-focus-ring); outline-offset: 2px; }

/* Beszámoló-kártyák (Korábbi rendezvényeink): a Programok-kártyák (.event-card) mintáját
   követik, kiegészítve egy borítóképpel. A popup-ban (.report-details-gallery) az összes
   feltöltött kép egy görgethető csíkban jelenik meg, egyenként megnyithatók nagyítva
   (ugyanaz a .image-modal mechanizmus, mint a meghívóknál). */
.report-cover { margin: -1rem -1.15rem 0.75rem; overflow: hidden; border-radius: 10px 10px 0 0; }
.report-cover img { width: 100%; height: 160px; object-fit: cover; display: block; }
.report-title { margin-top: 0; }
.report-datetime { margin-bottom: 0.4rem; }

.report-details-gallery {
    display: flex; gap: 0.5rem; overflow-x: auto; margin-bottom: 0.75rem; padding-bottom: 0.25rem;
}
.report-details-gallery .report-details-thumb {
    width: 96px; height: 72px; object-fit: cover; border-radius: 6px; flex: none;
    margin-bottom: 0; cursor: zoom-in;
}

/* ===========================================================================
   2 hasábos elrendezés: keskeny bal navigációs oldalsáv + jobb oldali fő
   tartalom. A háttér fehér marad, csak a fejléc/lábléc sáv lesz színes
   (l. lejjebb). A `bekehaz-layout` a Quark 2 `.container`-ét bontja két
   oszlopra — l. templates/partials/base.html.twig (block body override) és
   templates/partials/bekehaz-sidebar.html.twig.
   =========================================================================== */
.bekehaz-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 20%) 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}
.bekehaz-sidebar { min-width: 0; }
.bekehaz-main { min-width: 0; }

.bekehaz-sidebar-nav {
    position: sticky;
    top: calc(var(--q2-header-height, 4rem) + 1.5rem);
    background: var(--q2-bg-elev);
    border: 1px solid var(--q2-divider);
    border-radius: 10px;
    padding: 1.25rem 1.25rem 1.4rem;
}
.bekehaz-sidebar-title { margin: 0 0 1rem; font-size: 1.15rem; }
.bekehaz-sidebar-title a { color: var(--q2-text-strong); text-decoration: none; }
.bekehaz-sidebar-title a:hover { color: var(--q2-link); }

.bekehaz-sidebar-block + .bekehaz-sidebar-block { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--q2-divider); }
.bekehaz-sidebar-subtitle {
    margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--q2-text-muted);
}
.bekehaz-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.bekehaz-sidebar-item {
    display: grid; grid-template-columns: 64px 1fr; align-items: start; gap: 0.6rem;
    color: var(--q2-text); text-decoration: none; line-height: 1.3;
}
.bekehaz-sidebar-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; hyphens: auto; overflow-wrap: break-word; }
.bekehaz-sidebar-text .bekehaz-sidebar-item-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; }
.bekehaz-sidebar-thumb {
    display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); transition: filter 0.15s ease;
}
.bekehaz-sidebar-item:hover .bekehaz-sidebar-thumb { filter: brightness(1.08); }
/* Kép nélküli tétel: a bélyegkép helyén a kiemelő színű dátum-jelvény (meghívó: nap + hónap,
   beszámoló: évszám), hogy a lista akkor is egységes maradjon. */
.bekehaz-sidebar-thumb-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--q2-accent) 16%, var(--q2-bg-elev));
    color: var(--q2-accent); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    box-shadow: none;
}
.bekehaz-sidebar-thumb-date b { font-size: 1.1rem; line-height: 1.1; letter-spacing: 0; }
.bekehaz-sidebar-item:hover .bekehaz-sidebar-item-title { color: var(--q2-link); text-decoration: underline; }
.bekehaz-sidebar-date { font-size: 0.78rem; color: var(--q2-text-muted); }
.bekehaz-sidebar-item-title { font-size: 0.92rem; font-weight: 500; }
.bekehaz-sidebar-empty { margin: 0; font-size: 0.88rem; color: var(--q2-text-muted); }

/* Oldalanként egyedi, Markdown-ból jövő oldalsáv-tartalom (l. header.sidebar_content) —
   kompaktabb tipográfia, hogy a keskeny hasábba illeszkedjen. */
.bekehaz-sidebar-custom h1,
.bekehaz-sidebar-custom h2,
.bekehaz-sidebar-custom h3,
.bekehaz-sidebar-custom h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.7rem;
    line-height: 1.3;
}
.bekehaz-sidebar-custom p { font-size: 0.88rem; line-height: 1.5; margin: 0 0 0.75rem; color: var(--q2-text); }
.bekehaz-sidebar-custom p:last-child { margin-bottom: 0; }
.bekehaz-sidebar-custom a { color: var(--q2-link); }
.bekehaz-sidebar-custom ul,
.bekehaz-sidebar-custom ol { margin: 0 0 0.75rem; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.5; }
.bekehaz-sidebar-custom li { margin-bottom: 0.35rem; }
.bekehaz-sidebar-custom hr { border: none; border-top: 1px solid var(--q2-divider); margin: 1.1rem 0; }
.bekehaz-sidebar-custom em { color: var(--q2-text-muted); }

/* Kisebb (tablet/mobil) képernyőn a bal hasáb a fő tartalom fölé kerül,
   nem mellé — egyoszlopos elrendezés. */
@media (max-width: 900px) {
    .bekehaz-layout { grid-template-columns: 1fr; }
    .bekehaz-sidebar-nav { position: static; }
}

/* ===========================================================================
   Színes fejléc- és lábléc-sáv a korábbi fekete helyett; a fő tartalom
   háttere (és a bal oldalsáv kártyája) fehér/világos marad. A Hadron
   "header-transparent" viselkedését (átlátszó, amíg nincs görgetve) itt
   felülírjuk állandó, tömör színre.
   =========================================================================== */
:root { --bekehaz-bar-bg: var(--q2-accent); }
/* Sötét (night) módban a fejléc/lábléc a logóban ténylegesen használt kék
   színt kapja, nem az általános kiemelő színt. A logó PNG-jéből kinyert,
   a galamb-ikon tényleges (a ~60%-os áttetszőségtől független) RGB-értéke:
   kb. rgb(9, 172, 255) ≈ #09acff. */
:root[data-theme="dark"] { --bekehaz-bar-bg: #04324d; } /* sötét mód: a logó galambjának kékjénél (≈ #006496) sötétebb, így a galamb is kiválik */

body #header,
body.header-transparent #header,
body.header-transparent.scrolled #header,
body.scrolled #header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    position: relative;
}
/* A fejléc eredeti felső belső margója (2 rem = 32px) túl sok üres helyet
   hagyott a logó fölött; 20px-szel feljebb húzzuk az egész sávot (12px
   belső margóra csökkentve — pont annyira, mint amennyi görgetve amúgy is
   volt, tehát nyitáskor és görgetve most egyforma). */
body #header { padding-top: 12px; }
/* A kék sáv NEM a teljes fejlécet tölti ki, hanem egy önálló, a fejléc MÖGÖTT
   elhelyezkedő réteg (#header::before), aminek a magassága rögzített és
   KISEBB, mint a fejléc teljes (a 150px magas logót is magába foglaló)
   magassága. Így a logó képének alsó, a felirat alatti része (a galamb
   "farktolla") kilóg a kékből, és a fehér oldalháttéren folytatódik — a
   felirat (ami a logóképen belül feljebb van) mindvégig a kék sávon marad.
   A magasságot a logókép saját pixelei alapján számoltuk: a fejléc felső
   belső margója (2 rem = 32px, görgetve 0.75 rem = 12px) + a felirat alja a
   150px magas logóképen belül (94px) + 20px ráhagyás. */
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 126px; /* 12px fejléc-margó (immár nyitva is) + 94px (felirat alja a logóban) + 20px */
    background: var(--bekehaz-bar-bg);
    z-index: 0;
}
#header .container { position: relative; z-index: 1; }
body #header,
body #header .navbar-brand,
body #header .theme-toggle,
body #header .login-status-wrapper,
body #header .dropmenu > ul > li > a {
    color: #ffffff !important;
}
body #header .navbar-brand svg path { fill: #ffffff !important; }
body #header .dropmenu > ul > li > a.active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.22);
}
body #header .dropmenu > ul > li > a:hover:not(.active) {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14);
}
/* Legördülő almenü panel: saját (világos) hátterén marad a szokásos szöveg-szín. */
body #header .dropmenu li > ul a { color: var(--q2-text) !important; }
body #header .dropmenu li > ul a:hover { color: var(--q2-link) !important; }

#footer {
    background: var(--bekehaz-bar-bg);
    color: #ffffff !important;
    border-top: none;
    padding-block: 5px; /* 20px -> 5px mindkét oldalon = 30px-szel alacsonyabb lábléc */
    font-size: 0.92rem !important; /* megegyezik a bal oldalsav szoveganak meretevel (.bekehaz-sidebar-item-title) */
}
#footer p { color: #ffffff !important; margin: 0 0 0.4rem; font-size: 0.92rem !important; /* a p,li{font-size:1rem} (theme.css) kozvetlenul a <p>-t celozza, orokles helyett itt kell felulirni */ }
#footer p:last-child { margin-bottom: 0; }
#footer a { color: #ffffff !important; font-weight: 600; }
#footer a:hover { text-decoration: underline; }

/* Kiadványaink: automatikusan két (kisebb képernyőn egy) oszlopba rendezett
   kártyarács, minden kártyában kis borítókép + cím + leírás egymás mellett. */
.kiadvany-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.kiadvany-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--q2-bg-elev);
    border: 1px solid var(--q2-divider);
    border-radius: 10px;
    padding: 1rem;
}
.kiadvany-cover { flex: none; width: 88px; }
.kiadvany-cover img { width: 100%; height: auto; display: block; border-radius: 4px; }
.kiadvany-info { min-width: 0; }
.kiadvany-info h5 { margin: 0 0 0.4rem; font-size: 0.98rem; line-height: 1.3; }
.kiadvany-info p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--q2-text-muted); }
.kiadvany-info p:last-child { margin-bottom: 0; }
.kiadvany-info ul { margin: 0.3rem 0 0.5rem; padding-left: 1.1rem; font-size: 0.9rem; color: var(--q2-text-muted); }
.kiadvany-info ul li { margin-bottom: 0.15rem; }

/* ===========================================================================
   Plakátkiállítás (templates/kiallitas.html.twig, js/kiallitas.js)
   =========================================================================== */
.kiallitas-toc .kiallitas-toc-list { margin: 0; padding: 0 0 0 1.4rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.88rem; line-height: 1.35; list-style: decimal; }
.kiallitas-toc .kiallitas-toc-list li { display: list-item; margin: 0; padding: 0; text-align: left; }
.kiallitas-toc-list a { color: var(--q2-text); text-decoration: none; }
.kiallitas-toc-list a:hover { color: var(--q2-link); text-decoration: underline; }
.kiallitas-sor { scroll-margin-top: 1.5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; padding: 2.5rem 0; border-top: 1px solid var(--q2-divider); }
.kiallitas-sor--forditott .kiallitas-plakat { order: 2; }
.kiallitas-plakat { margin: 0; }
.kiallitas-plakat img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.kiallitas-nagyit { all: unset; display: block; cursor: zoom-in; border-radius: 8px; }
.kiallitas-nagyit:focus-visible { outline: 3px solid var(--q2-focus-ring); outline-offset: 3px; }
.kiallitas-szoveg h2 { margin-top: 0; }
@media (max-width: 800px) {
    .kiallitas-sor { grid-template-columns: 1fr; }
    .kiallitas-sor--forditott .kiallitas-plakat { order: 0; }
}
@media (max-width: 900px) { .kiallitas-aside { display: none; } }

/* Nagyító (div, nem <dialog>: a Quark 2 a <dialog>-ot saját maga formázza).
   Alapból a képernyőhöz igazítva; a képre kattintva eredeti méret (görgethető). */
html.kiallitas-nyitva { overflow: hidden; }
.kiallitas-lightbox { position: fixed; inset: 0; z-index: 1200; background: rgba(15, 23, 42, 0.95); }
.kiallitas-lightbox[hidden] { display: none; }
.kiallitas-lb-tartalom { position: absolute; inset: 3rem 3.5rem 2.2rem; overflow: auto; display: flex; }
.kiallitas-lb-kep { margin: auto; display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 6px; cursor: zoom-in; }
.kiallitas-lb--teljes .kiallitas-lb-kep { max-width: none; max-height: none; cursor: zoom-out; }
.kiallitas-lb-sugo { position: absolute; bottom: 0.4rem; left: 0; right: 0; margin: 0; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.kiallitas-lb--teljes .kiallitas-lb-sugo { display: none; }
.kiallitas-lightbox button { all: unset; box-sizing: border-box; position: absolute; z-index: 1; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; padding: 0.4rem 0.8rem; border-radius: 6px; }
.kiallitas-lightbox button:hover, .kiallitas-lightbox button:focus-visible { background: rgba(255, 255, 255, 0.15); }
.kiallitas-lightbox .kiallitas-lb-bezar { top: 0.3rem; right: 0.6rem; }
.kiallitas-lightbox .kiallitas-lb-elozo { left: 0.3rem; top: 50%; transform: translateY(-50%); }
.kiallitas-lightbox .kiallitas-lb-kovetkezo { right: 0.3rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
    .kiallitas-lb-tartalom { inset: 3rem 0.5rem 2rem; }
    .kiallitas-lightbox .kiallitas-lb-elozo, .kiallitas-lightbox .kiallitas-lb-kovetkezo { top: 0.3rem; transform: none; font-size: 2rem; }
    .kiallitas-lightbox .kiallitas-lb-kovetkezo { left: 3.5rem; right: auto; }
}

/* Alapítóink oldal: könyvajánlók (borító balra, szöveg mellette) */
.alapito-konyv { display: flow-root; margin: 1.5rem 0 2rem; }
.alapito-konyv h3 { margin-top: 0; }
.content-item img.alapito-konyv-borito { float: left; width: 9.5rem; height: auto; margin: 0.25rem 1.5rem 1rem 0; border-radius: 0; box-shadow: none; border: 0; background: none; }
@media (max-width: 520px) { .content-item img.alapito-konyv-borito { float: none; display: block; margin: 0 0 1rem; } }

/* Bal oldalsáv listái: a Quark 2 nav-li formázása (középre igazítás, behúzás) ne érvényesüljön */
.bekehaz-sidebar-nav .bekehaz-sidebar-list { align-items: stretch; margin: 0; padding: 0; }
.bekehaz-sidebar-nav .bekehaz-sidebar-list li { display: block; margin: 0; padding: 0; text-align: left; }
.bekehaz-sidebar-nav .bekehaz-sidebar-item { align-items: flex-start; text-align: left; width: 100%; margin: 0; padding: 0; }

/* Alapítóink bal oldalsáv: a kiállítások első plakátja linkként */
.bekehaz-sidebar-custom img.oldalsav-kiallitas-kep { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); margin: 0.25rem 0 0.5rem; }

/* Kiállítás-oldalak: a tartalomjegyzék görgetéskor is látható marad (sticky).
   Az aside a teljes sor magasságát kitölti, így a benne lévő doboz végig "tapadhat";
   ha a lista magasabb a képernyőnél, a dobozon belül görgethető. */
.bekehaz-layout > .kiallitas-aside { align-self: stretch; }
.kiallitas-aside .kiallitas-toc {
    position: sticky;
    top: calc(var(--q2-header-height, 4rem) + 1rem);
    max-height: calc(100vh - var(--q2-header-height, 4rem) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.kiallitas-toc-list a.aktiv { color: var(--q2-link); font-weight: 600; }

/* Bal oldalsáv: további (nem tapadó) dobozok, pl. az adatkezelési tájékoztató linkje */
.bekehaz-sidebar-box {
    margin-top: 1rem;
    background: var(--q2-bg-elev);
    border: 1px solid var(--q2-divider);
    border-radius: 10px;
    padding: 1rem 1.25rem 1.1rem;
    font-size: 0.92rem;
}
.bekehaz-sidebar-box .bekehaz-sidebar-subtitle { margin-bottom: 0.4rem; }
.bekehaz-sidebar-box a { color: var(--q2-text); text-decoration: none; font-weight: 500; }
.bekehaz-sidebar-box a:hover, .bekehaz-sidebar-box a[aria-current="page"] { color: var(--q2-link); text-decoration: underline; }

/* Társszervezeteink: áttekintő lista (logó + név, soronként) és az aloldalak logója */
.tsz-lista { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.25rem; }
.tsz-lista p { margin: 0; }
.tsz-lista p a { display: flex; align-items: center; gap: 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--q2-divider); border-radius: 10px; background: var(--q2-bg-elev); color: var(--q2-text-strong); text-decoration: none; font-weight: 500; }
.tsz-lista p a:hover { border-color: var(--q2-link); color: var(--q2-link); }
.tsz-lista p a::after { content: none !important; }
.content-item img.tsz-kep { flex: none; width: 5.5rem; height: 5.5rem; object-fit: contain; margin: 0; box-shadow: none; border-radius: 0; }
.content-item img.tsz-logo { float: right; width: 11rem; max-width: 40%; height: auto; margin: 0.25rem 0 1rem 1.5rem; box-shadow: none; border-radius: 0; }
@media (max-width: 520px) { .content-item img.tsz-logo { float: none; display: block; margin: 0 auto 1rem; } .tsz-lista p a { gap: 0.8rem; } .content-item img.tsz-kep { width: 4rem; height: 4rem; } }

/* Felső menü: 6 menüpont (a Kiadványaink rejtve) — széles képernyőn nagyobb betű, 1260 px alatt kisebb */
.dropmenu .navigation { gap: 0 !important; }
.dropmenu .navigation > li > a { padding-left: 10px !important; padding-right: 10px !important; font-size: 16px; }
/* Lenyíló menü: az aktív (éppen megnyitott) oldal sora olvasható legyen (eddig sötét háttér + sötét szöveg) */
body #header .dropmenu .navigation li ul a.active,
body #header .dropmenu .navigation li ul a.active:hover { background: var(--q2-accent) !important; color: #fff !important; }
@media (max-width: 1260px) {
    .dropmenu .navigation > li > a { padding-left: 6px !important; padding-right: 6px !important; font-size: 13px; }
}
/* 1100 px alatt a menüpontok már nem férnek ki egy sorba: ilyenkor a mobil (hamburger) menü
   jelenik meg (a Quark 2 / Hadron 860 px-es töréspontja helyett). */
@media (max-width: 1100px) {
    .desktop-menu { display: none; }
    .mobile-menu { display: block; }
    .mobile-container { display: block; }
    #header .navbar { min-height: 64px; }
    .navbar-section.actions { display: none; }
    body .mobile-menu { top: 2rem; right: 2rem; min-height: 64px; display: flex; align-items: center; }
}

/* Mobil (hamburger) menü megnyitva: világosszürke háttér, hogy a logó fehér „BÉKEHÁZ” felirata látsszon.
   Sötét módban a sötét háttér marad (azon a fehér felirat eleve látszik). */
:root:not([data-theme="dark"]) #overlay.overlay { background: #b9c1ca; }
:root:not([data-theme="dark"]) #overlay .overlay-menu a { color: #1f2530; }
:root:not([data-theme="dark"]) #overlay .overlay-menu li.menu-label span { color: #3a414e; }

/* A fejléc (kék sáv) és a tartalom közötti távolság felére csökkentve (kb. 133 px → 67 px).
   A logó galambjának farktolla a sáv alá lóg (kb. 36 px), ennél lejjebb kezdődik a tartalom. */
@media (min-width: 641px) {
    body #header { padding-bottom: 0; }
    #body-wrapper.section { padding-top: 30px; }
}

/* ===========================================================================
   Beszámolók (WP-ről migrált rendezvény-beszámolók): kártya -> saját oldal,
   évenkénti archívum (/programjaink/beszamolok[/ÉÉÉÉ]), galéria + nagyító.
   =========================================================================== */
.report-card-link { color: inherit; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.report-card-link:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14); transform: translateY(-2px); }
.report-card-link:hover .report-title { color: var(--q2-link); }
.report-cover { position: relative; }
.report-cover-empty { height: 160px; background: color-mix(in oklab, var(--q2-accent) 18%, var(--q2-bg-elev)); }
.report-org {
    display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    background: var(--q2-accent); color: var(--q2-accent-contrast, #fff);
    border-radius: 4px; padding: 0.12rem 0.45rem; line-height: 1.3;
}
.report-cover .report-org { position: absolute; top: 0.5rem; right: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.report-datetime { font-size: 0.85rem; color: var(--q2-text-muted); }
.report-alcim { margin: 0.1rem 0 0; font-size: 0.88rem; color: var(--q2-text-muted); font-style: italic; }
.beszamolok-tovabb { margin-top: 1.25rem; text-align: center; }
.beszamolok-tovabb .event-details-link { display: inline-block; }

.beszamolo-evek { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem; margin: 0.5rem 0 1.5rem; }
.reports-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1.1rem; }
.reports-grid .report-cover img, .reports-grid .report-cover-empty { height: 150px; }
.beszamolo-evek a {
    padding: 0.3rem 0.65rem; border: 1px solid var(--q2-divider); border-radius: 6px;
    font-size: 0.92rem; text-decoration: none; color: var(--q2-text);
}
.beszamolo-evek a span { color: var(--q2-text-muted); font-size: 0.8rem; }
.beszamolo-evek a:hover { border-color: var(--q2-accent); }
.beszamolo-evek a.active { background: var(--q2-accent); border-color: var(--q2-accent); color: var(--q2-accent-contrast, #fff); }
.beszamolo-evek a.active span { color: inherit; opacity: 0.85; }

.beszamolo .page-header .lead { margin-bottom: 0.3rem; font-style: italic; }
.beszamolo-meta { display: flex; align-items: center; gap: 0.6rem; color: var(--q2-text-muted); margin: 0; }
.beszamolo-szoveg { margin: 1rem 0 1.5rem; }
.beszamolo-szoveg blockquote { margin: 1rem 0; padding: 0.5rem 1rem; border-left: 3px solid var(--q2-accent); }
.beszamolo-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); gap: 0.6rem; }
.beszamolo-kep { display: block; border-radius: 6px; overflow: hidden; cursor: zoom-in; }
.beszamolo-kep img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.2s ease; }
.beszamolo-kep:hover img { transform: scale(1.04); }
.beszamolo-vissza { margin-top: 1.5rem; }

/* Nagyító: a Pico a <dialog>-ot átstílusozza, ezért erősebb szelektorokkal állítjuk vissza. */
body dialog.beszamolo-lightbox {
    position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0; background: rgba(10, 15, 25, 0.92);
    display: none; align-items: center; justify-content: center;
}
body dialog.beszamolo-lightbox[open] { display: flex; }
body dialog.beszamolo-lightbox::backdrop { background: transparent; }
body dialog.beszamolo-lightbox img { max-width: calc(100vw - 7rem); max-height: calc(100vh - 4rem); object-fit: contain; border-radius: 4px; }
body dialog.beszamolo-lightbox button {
    position: absolute; width: auto; margin: 0; padding: 0.2rem 0.8rem; background: rgba(255, 255, 255, 0.12);
    border: 0; border-radius: 6px; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; box-shadow: none;
}
body dialog.beszamolo-lightbox button:hover { background: rgba(255, 255, 255, 0.25); }
body dialog.beszamolo-lightbox .blb-close { top: 0.75rem; right: 0.75rem; }
body dialog.beszamolo-lightbox .blb-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
body dialog.beszamolo-lightbox .blb-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
body dialog.beszamolo-lightbox .blb-count { position: absolute; bottom: 0.75rem; left: 0; right: 0; text-align: center; color: #ddd; font-size: 0.9rem; }
@media (max-width: 640px) {
    body dialog.beszamolo-lightbox img { max-width: 100vw; }
    body dialog.beszamolo-lightbox .blb-prev, body dialog.beszamolo-lightbox .blb-next { top: auto; bottom: 0.4rem; transform: none; }
}

/* Beszámolók: évek + szervezetek szerinti böngészés (Programjaink alján és az archívumban). */
.beszamolo-navigacio { margin-top: 1.75rem; display: grid; gap: 0.25rem; }
.beszamolok-archiv .beszamolo-navigacio { margin: 0.5rem 0 1.5rem; }
.beszamolo-nav-cim { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--q2-text-muted); }
.beszamolo-navigacio .beszamolo-evek { margin: 0 0 0.9rem; }
.beszamolo-ev-cim { margin: 1.75rem 0 0.75rem; font-size: 1.3rem; }
a.report-org { text-decoration: none; }
a.report-org:hover { filter: brightness(0.9); color: var(--q2-accent-contrast, #fff); }

/* Nyitólap: "Meghívó" szakasz — két hasábos kártyarács, a kártya tetején a meghívó képe.
   A meghívók gyakran álló plakátok: a kép a teljes szélességet kitölti, a felső részét mutatjuk. */
.home-meghivok { margin-top: 2.5rem; }
.home-meghivok > h2 { margin: 0 0 1rem; }
.meghivok-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .meghivok-grid { grid-template-columns: 1fr; } }
.meghivo-cover img { height: 200px; object-position: center top; }
.rendezvenyeink-beszamolok { margin-top: 1rem; }