/* Vikingo Tematika frontend. A vikingo tematika designterv (koncepcio-4-bongeszo-racs)
   1:1 portja .vk-tematika scope alatt. A --vk-* design tokenekre fallback értékkel
   hivatkozunk: a vikingo.hu-n a téma tokenjei érvényesülnek, tokenek nélkül is
   használható marad a widget.

   Minden leszármazott szabály ".vk-tematika " előtaggal (dupla osztály-specificitás)
   és explicit resetekkel készül, mert az Elementor kit globális gomb-, címsor- és
   bekezdés-stílusai különben felülírnák a widget elemeit. */

/* A designterv fontjai, csak a használt vágatok; akkor töltődnek, amikor a widget
   CSS-e (feltételes enqueue). Clash Display: Fontshare licenc, DM Mono: OFL. */
@font-face {
    font-family: 'Clash Display';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Clash Display';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/DMMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'DM Mono';
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/DMMono-Medium.ttf') format('truetype');
}

.vk-tematika,
.vk-tematika-mini {
    --vkt-paper:    var(--vk-paper, #F3EEEB);
    --vkt-paper-2:  var(--vk-paper-2, #F6EFE8);
    --vkt-white:    var(--vk-white, #FFFFFF);
    --vkt-ink:      var(--vk-ink, #3E2E45);
    --vkt-sand:     var(--vk-sand, #DCD0C3);
    --vkt-coral:    var(--vk-coral, #FF544D);
    --vkt-mauve:    var(--vk-mauve, #7A687F);
    /* a coral sáv hover-árnyalata (a designterv szerint); az oldal design
       systeme a --vk-coral-tint változóval bírálhatja felül */
    --vkt-toc-hover: var(--vk-coral-tint, #FFEBE9);
    --vkt-gutter:   var(--vk-gutter, clamp(20px, 5.5vw, 80px));
    /* a rács közös sormagassága: bal modul = 1 sor, jobb cím = 2 sor, jobb lecke = 1 sor */
    --vkt-row: 76px;
    /* Fontok: elobb az Elementor Variables nevei (--vk-clash-display, --vk-dm-mono),
       vegso tartalek a becsomagolt font. A --vk-font-* nevek is tamogatottak. */
    --vkt-font-body:    var(--vk-font-body, var(--vk-clash-display, 'Clash Display', system-ui, sans-serif));
    --vkt-font-display: var(--vk-font-display, var(--vk-clash-display, 'Clash Display', system-ui, sans-serif));
    --vkt-font-mono:    var(--vk-font-mono, var(--vk-dm-mono, 'DM Mono', ui-monospace, 'SFMono-Regular', monospace));

    box-sizing: border-box;
    color: var(--vkt-ink);
    font-family: var(--vkt-font-body);
}

/* A widget mindig a rendelkezésre álló teljes szélességet tölti ki, így a
   panelváltásnál a hosszabb leckecímek nem ugráltatják a szélességet.
   A data-e-type szelektor az Elementor widget-burkolóra kell: flex konténerben
   az elem különben tartalom-szélességű lenne, és modulváltáskor átméreteződne
   (a rejtett panelek nem számítanak bele a tartalom-szélességbe). */
[data-e-type="vk-tematika"],
[data-e-type="vk-tematika-mini"] {
    display: block;
    width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
}
.vk-tematika {
    display: block;
    width: 100%;
    max-width: 100%;
}
.vk-tematika .vk-tematika-split {
    width: 100%;
}

.vk-tematika *,
.vk-tematika *::before,
.vk-tematika *::after,
.vk-tematika-mini * {
    box-sizing: border-box;
}

/* ---- szakaszfejléc ---- */
.vk-tematika .vk-tematika-header {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vw, 16px);
    margin: 0 0 clamp(28px, 4vw, 40px);
    padding: 0;
}
.vk-tematika .vk-tematika-eyebrow {
    font-family: var(--vkt-font-mono);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    color: var(--vkt-coral);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}
.vk-tematika .vk-tematika-heading {
    font-family: var(--vkt-font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--vkt-ink);
    margin: 0;
    padding: 0;
}
.vk-tematika .vk-tematika-lead {
    margin: 0;
    padding: 0;
    max-width: 64ch;
    font-family: var(--vkt-font-body);
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.6;
    letter-spacing: .01em;
    color: var(--vkt-ink);
}

/* ---- osztott szakasz: sand keret, szögletes, árnyék nélkül ----
   A teljes szélességű felső/alsó vonalat az Elementor oldal adja hozzá
   (szándékosan nem a widget), ezért itt csak bal/jobb border van. */
.vk-tematika .vk-tematika-split {
    border-left: 1px solid var(--vkt-sand);
    border-right: 1px solid var(--vkt-sand);
    border-top: none;
    border-bottom: none;
    border-radius: 0;
    background: var(--vkt-white);
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}

/* bal: modul-index (coral sáv) */
.vk-tematika .vk-tematika-toc {
    border-right: 1px solid var(--vkt-sand);
    display: flex;
    flex-direction: column;
    background: var(--vkt-coral);
    min-width: 0;
}
.vk-tematika .vk-tematika-list {
    display: flex;
    flex-direction: column;
}

/* A modul-elem <button>: minden vizuális tulajdonság explicit, hogy az Elementor kit
   és a téma gomb-stílusai (kitöltés, pill sarok, árnyék, nagybetűsítés) ne érjék el.
   A szelektorok szándékosan három osztály mélyek, mert a kit :hover szabályai
   különben azonos specificitással, betöltési sorrendtől függően nyernének. */
.vk-tematika .vk-tematika-list > .vk-tematika-m {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: var(--vkt-row);
    min-height: 0;
    margin: 0;
    padding: 0 clamp(18px, 2vw, 24px);
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    border-radius: 0;
    box-shadow: none;
    outline-offset: -2px;
    cursor: pointer;
    text-align: left;
    text-transform: none;
    text-decoration: none;
    letter-spacing: normal;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    transition: background .15s ease;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m:last-child {
    border-bottom: none;
}
/* Színállapotok (a designterv szerint, szándékosan):
   alap coral + fehér; hover világos korall + ink cím + coral sorszám;
   aktív fehér + ugyanezek. A világos sorok alsó vonala sand, különben
   két világos sor között eltűnne az elválasztó. */
.vk-tematika .vk-tematika-list > .vk-tematika-m:hover,
.vk-tematika .vk-tematika-list > .vk-tematika-m:focus {
    background: var(--vkt-toc-hover);
    border: none;
    border-bottom: 1px solid var(--vkt-sand);
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    text-transform: none;
    letter-spacing: normal;
    padding: 0 clamp(18px, 2vw, 24px);
}
.vk-tematika .vk-tematika-list > .vk-tematika-m:last-child:hover,
.vk-tematika .vk-tematika-list > .vk-tematika-m:last-child:focus {
    border-bottom: none;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active,
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active:hover,
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active:focus {
    background: var(--vkt-white);
    border: none;
    border-bottom: 1px solid var(--vkt-sand);
    border-radius: 0;
    box-shadow: none;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active:last-child {
    border-bottom: none;
}

.vk-tematika .vk-tematika-m-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}
.vk-tematika .vk-tematika-m-num {
    flex: none;
    font-family: var(--vkt-font-mono);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
    color: var(--vkt-white);
    font-variant-numeric: tabular-nums;
    min-width: 28px;
    transition: color .15s ease;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m:hover .vk-tematika-m-num,
.vk-tematika .vk-tematika-list > .vk-tematika-m:focus .vk-tematika-m-num,
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active .vk-tematika-m-num {
    color: var(--vkt-coral);
}
.vk-tematika .vk-tematika-m-title {
    flex: 1;
    font-family: var(--vkt-font-display);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: .02em;
    color: var(--vkt-white);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .15s ease;
    /* Flex gyerekként a nowrap cím min-width:auto-t kapna, ami mobilon a teljes
       rácsot a képernyőnél szélesebbre feszítené; így ellipszissel rövidül. */
    min-width: 0;
    max-width: 100%;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m:hover .vk-tematika-m-title,
.vk-tematika .vk-tematika-list > .vk-tematika-m:focus .vk-tematika-m-title,
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active .vk-tematika-m-title {
    color: var(--vkt-ink);
}
/* a meta bal széle a címhez igazodik: sorszám (28px) + térköz (14px) */
.vk-tematika .vk-tematika-m-meta {
    padding-left: 42px;
    font-family: var(--vkt-font-mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .8);
    font-variant-numeric: tabular-nums;
    transition: color .15s ease;
}
.vk-tematika .vk-tematika-list > .vk-tematika-m:hover .vk-tematika-m-meta,
.vk-tematika .vk-tematika-list > .vk-tematika-m:focus .vk-tematika-m-meta,
.vk-tematika .vk-tematika-list > .vk-tematika-m.is-active .vk-tematika-m-meta {
    color: var(--vkt-mauve);
}

/* a modul beágyazott leckelistája (mobil harmonika-test): asztalon rejtve */
.vk-tematika .vk-tematika-m-body {
    display: none;
}

/* jobb: lecke-panel; a cím 2 rács-sort foglal, a vonalak innen indulnak */
.vk-tematika .vk-tematika-panel {
    display: flex;
    flex-direction: column;
    background: var(--vkt-white);
    min-width: 0;
}
.vk-tematika .vk-tematika-panel-item {
    display: none;
    flex-direction: column;
    flex: 1;
}
.vk-tematika .vk-tematika-panel-item.is-active {
    display: flex;
}
.vk-tematika .vk-tematika-panel-head {
    min-height: calc(var(--vkt-row) * 2);
    padding: 0 clamp(24px, 3.2vw, 44px);
    border-bottom: 1px solid var(--vkt-sand);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.vk-tematika .vk-tematika-panel-title {
    font-family: var(--vkt-font-display);
    font-weight: 500;
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.2;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--vkt-ink);
    margin: 0;
    padding: 0;
}

/* lecke sorok: 1 rács-sor magasak, így a vonalak a bal oszlophoz igazodnak */
.vk-tematika .vk-tematika-lessons {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vk-tematika .vk-tematika-lesson {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 20px);
    /* min-height a fix height helyett: túl hosszú (többsoros) leckenévnél a sor
       inkább nőjön, mint hogy a szöveg kicsorduljon. */
    min-height: var(--vkt-row);
    padding: 10px clamp(24px, 3.2vw, 44px);
    border-bottom: 1px solid var(--vkt-sand);
    margin: 0;
    list-style: none;
}
.vk-tematika .vk-tematika-lesson:last-child {
    border-bottom: none;
}
.vk-tematika .vk-tematika-lesson-name {
    flex: 1;
    min-width: 0;
    font-family: var(--vkt-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: .04em;
    color: var(--vkt-ink);
}
.vk-tematika .vk-tematika-lesson-time {
    flex: none;
    font-family: var(--vkt-font-mono);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: .02em;
    color: var(--vkt-mauve);
    font-variant-numeric: tabular-nums;
}
.vk-tematika .vk-tematika-lesson-quiz {
    flex: none;
    font-family: var(--vkt-font-mono);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--vkt-mauve);
    border: 1px solid var(--vkt-sand);
    border-radius: 0;
    background: transparent;
    padding: 2px 8px;
}

/* szerkesztőknek szóló jelzés hiányzó kurzusnál */
.vk-tematika-notice {
    border: 1px dashed var(--vk-coral, #FF544D);
    color: var(--vk-ink, #3E2E45);
    background: var(--vk-paper-2, #F6EFE8);
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* mini összegző önállóan */
.vk-tematika-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 11px 18px;
}
.vk-tematika-mini .vk-tematika-sum-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--vkt-font-mono);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .02em;
    color: var(--vkt-ink);
    font-variant-numeric: tabular-nums;
}
.vk-tematika-mini .vk-tematika-sum-item svg {
    width: 15px;
    height: 15px;
    flex: none;
    stroke: var(--vkt-coral);
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* JS nélkül minden modul leckelistája látszódjon (progressive enhancement):
   a .vk-tematika-nojs osztályt a JS azonnal leveszi. */
.vk-tematika.vk-tematika-nojs .vk-tematika-panel-item {
    display: flex;
}

/* ============================================================
   MOBIL (max 860px): harmonika - az aktív modul leckéi közvetlenül a
   modul-gomb alatt nyílnak ki, a jobb oldali panel eltűnik.
   ============================================================ */
@media (max-width: 860px) {
    .vk-tematika .vk-tematika-split {
        /* minmax(0,1fr): a rács sose nőjön a képernyőnél szélesebbre a tartalom miatt */
        grid-template-columns: minmax(0, 1fr);
    }
    .vk-tematika .vk-tematika-toc {
        border-right: none;
    }
    .vk-tematika .vk-tematika-panel {
        display: none; /* az asztali detail-panel eltűnik, a harmonika veszi át */
    }
    .vk-tematika .vk-tematika-list > .vk-tematika-m,
    .vk-tematika .vk-tematika-list > .vk-tematika-m:hover,
    .vk-tematika .vk-tematika-list > .vk-tematika-m:focus {
        padding-left: var(--vkt-gutter);
        padding-right: var(--vkt-gutter);
    }
    /* mobilon nincs hover-állapot (érintés), csak a nyitott modul világos */
    .vk-tematika .vk-tematika-list > .vk-tematika-m:hover:not(.is-active) {
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, .3);
    }
    .vk-tematika .vk-tematika-list > .vk-tematika-m:hover:not(.is-active) .vk-tematika-m-num,
    .vk-tematika .vk-tematika-list > .vk-tematika-m:hover:not(.is-active) .vk-tematika-m-title {
        color: var(--vkt-white);
    }
    .vk-tematika .vk-tematika-list > .vk-tematika-m:hover:not(.is-active) .vk-tematika-m-meta {
        color: rgba(255, 255, 255, .8);
    }

    /* harmonika-test: az aktív modul-gomb után nyílik ki */
    .vk-tematika .vk-tematika-m-body {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s ease;
        background: var(--vkt-white);
    }
    .vk-tematika .vk-tematika-list > .vk-tematika-m.is-active + .vk-tematika-m-body {
        grid-template-rows: 1fr;
        border-bottom: 1px solid var(--vkt-sand);
    }
    .vk-tematika .vk-tematika-m-body-inner {
        overflow: hidden;
        min-height: 0;
    }
    .vk-tematika .vk-tematika-m-body .vk-tematika-lesson {
        padding-left: var(--vkt-gutter);
        padding-right: var(--vkt-gutter);
    }
    .vk-tematika .vk-tematika-m-body .vk-tematika-lesson:last-child {
        border-bottom: none;
    }

    /* JS nélkül minden harmonika-test nyitva */
    .vk-tematika.vk-tematika-nojs .vk-tematika-m-body {
        grid-template-rows: 1fr;
    }
}