/*
 * HPHC — 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; }
/* Alcímek (h2): a Quark2 fölé húzott rövid díszvonala nélkül */
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; }

/* Szöveges "logó": a webhely neve */
.navbar-brand-text { text-decoration: none; }
.navbar-brand-text .brand-text {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--q2-text-strong);
    letter-spacing: 0.01em;
}
@media (max-width: 640px) {
    .navbar-brand-text .brand-text { font-size: 0.9rem; }
}

/* Logó a név előtt (a Quark2 28 px-re korlátozná a képet a fejlécben).
   Alapállapotban 72 px, görgetés után (összehúzódó fejléc) és mobilon kisebb. */
.navbar-brand-text { gap: 0.75rem; }
.navbar-brand .brand-logo { height: 72px; width: 72px; flex: none; transition: height 0.2s ease, width 0.2s ease; }
.header-animated.scrolled #header .navbar-brand .brand-logo { height: 48px; width: 48px; }
/* „hphc.hu” felirat: a logó kékjében, félkövéren */
:root[data-theme=light] { --hphc-brand-blue: #1445a2; }
:root[data-theme=dark]  { --hphc-brand-blue: #7fb0ff; }
.navbar-brand-text .brand-text { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.04em; color: var(--hphc-brand-blue); }
@media (max-width: 640px) {
    .navbar-brand .brand-logo { height: 56px; width: 56px; }
    .navbar-brand-text .brand-text { font-size: 1.15rem; }
}

/* Linkek világos témában: a kiemelőszínnél (hphc.yaml: accent-color) sötétebb arany.
   A dupla :root a <head>-ben kiírt kiemelőszín-stílus felülírásához kell. Sötét témát nem érint. */
:root:root[data-theme=light] { --q2-link: #654808; }

/* Halvány, a logó kékjéhez igazodó fejléc, alul vékony arany csíkkal */
:root[data-theme=light] {
    --hphc-header-bg: linear-gradient(180deg, rgba(226, 237, 255, 0.92) 0%, rgba(241, 246, 255, 0.88) 100%);
    --hphc-header-line: #e3b448;
}
:root[data-theme=dark] {
    --hphc-header-bg: linear-gradient(180deg, rgba(16, 32, 66, 0.92) 0%, rgba(11, 20, 40, 0.88) 100%);
    --hphc-header-line: #b98a26;
}
#header,
body.header-transparent.scrolled #header {
    background: var(--hphc-header-bg);
    border-bottom: 3px solid var(--hphc-header-line);
}

/* 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ő a menü és a tartalom-kártya között. A fejléc és a kártya közti távolság
   ugyanakkora, mint a breadcrumb nélküli oldalakon (Quark2: #body-wrapper felső térköze,
   clamp(2.5rem, 5vw, 4rem)): a felső térközből levonjuk az útvonal-jelző sorának magasságát
   (0.85rem × 1.3) és az alatta lévő 0.75rem-es margót. */
#body-wrapper:has(> .container > .crumbs-nav) { padding-top: calc(clamp(2.5rem, 5vw, 4rem) - 0.85rem * 1.3 - 0.75rem); }
.crumbs-nav { margin: 0; padding: 0; }
.breadcrumbs { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0 0 0.75rem; padding: 0; font-size: 0.85rem; line-height: 1.3; color: var(--q2-text-muted); }
.breadcrumbs li { font-size: inherit; line-height: inherit; margin: 0; padding: 0; }
.breadcrumbs li::before { content: none; }
.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*="hphc.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; }