/* ==========================================================================
   TRmedia – LearnDash designrendszer v3
   Ugyanaz a paletta, tipográfia és arányrend, mint az aicourse.trmedia.hu
   nyitóoldalán. Nem egy kurzusra készült: minden LearnDash tartalomtípusra
   érvényes (kurzus, lecke, téma, kvíz), tehát az újonnan létrehozott
   kurzusok is automatikusan ezt kapják.

   Töltés: a TRmedia bővítmény enqueue-olja, kizárólag LearnDash oldalakon.
   ========================================================================== */

:root{
  --navy-950:#04121C;
  --navy-900:#08202F;
  --navy-850:#0C2A3C;
  --navy-800:#12384E;
  --navy-700:#1B4A63;

  --cream:#F5F2EC;
  --paper:#FFFDF9;

  --ink:#0A1922;
  --slate:#55666F;
  --mist:#A7BECC;
  --mist-dim:#7793A5;

  --ember:#FF7A45;
  --ember-deep:#E85F28;
  --sky:#7FD1FF;

  --r-xs:3px;
  --r-sm:8px;
  --r-md:14px;
  --r-lg:24px;

  --trm-maxw:1120px;
  --ease-out:cubic-bezier(.16,.84,.36,1);
}

/* --------------------------------------------------------------------------
   1. A blokktéma héja
   A Twenty Twenty-Five saját fejlécét és láblécét elrejtjük, és a bővítmény
   sajátot ír a helyükre (lásd a PHP-t). Így a tanulófelület ugyanúgy néz ki,
   mint a nyitóoldal, és nem kell a témát módosítani – témaváltás sem viszi el.
   -------------------------------------------------------------------------- */
body.learndash-cpt .wp-site-blocks > header.wp-block-template-part,
body.learndash-cpt .wp-site-blocks > footer.wp-block-template-part,
body.trm-surface .wp-site-blocks > header.wp-block-template-part,
body.trm-surface .wp-site-blocks > footer.wp-block-template-part{
  display:none !important;
}

body.learndash-cpt{
  background:var(--navy-950);
  color:var(--mist);
  font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

body.learndash-cpt .wp-site-blocks > main{
  background:var(--navy-950);
  max-width:none;
  padding-top:44px;
  padding-bottom:96px;
}

/* A téma "Written by … in" szerzősora egy kurzusfelületen zaj. A szerző nevét
   önmagában elrejteni nem elég, mert a körülötte lévő szöveg ("Written by",
   "in") a sablonban statikusan áll – ezért a cím utáni teljes meta-csoportot
   rejtjük el. */
body.learndash-cpt .wp-block-post-title + .wp-block-group,
body.learndash-cpt .wp-block-post-featured-image + .wp-block-group,
body.learndash-cpt .wp-block-post-author-name,
body.learndash-cpt .wp-block-post-terms,
body.learndash-cpt .taxonomy-category,
body.learndash-cpt .wp-block-post-date{
  display:none !important;
}

/* A tartalom UTÁN következő sablonblokkok (More posts, bejegyzés-navigáció,
   a fősávba ágyazott lábléc-csoport) blogszerűek, itt nem tartoznak ide.

   FONTOS a :has() kivétel. Leckeoldalon a LearnDash a tartalom BELSEJÉBE
   generál (the_content szűrő), kurzusoldalon viszont a tartalom UTÁNI
   testvérbe – ott van a „Tanfolyam tartalom” szekció és a teljes leckelista.
   Egy szűrés nélküli `~ *` szabály emiatt eltüntette az egész leckelistát a
   kurzusoldalról. Ezért amiben LearnDash-tartalom van, azt sosem rejtjük. */
body.learndash-cpt .wp-block-post-content ~ *:not(:has(.learndash-wrapper)):not(:has(.learndash)){
  display:none !important;
}
/* A kurzusokhoz tartozik boritokep – az a boltban dolgozik. A kurzusoldalon
   viszont a sablon a cim ala dobja, felig a tartalom szelessegen kivul, es
   ketto is lesz belole a sajat fejleccel. Itt elrejtjuk. */
body.learndash-cpt .wp-block-post-featured-image{ display:none !important }

body.learndash-cpt .wp-block-query,
body.learndash-cpt .wp-block-post-navigation-link,
body.learndash-cpt .wp-block-comments{
  display:none !important;
}
/* A "More posts" fejlec a fo tartalomcsoport TESTVERE, nem a tartalome, ezert a
   fenti ~ szabaly nem eri el. A query blokkot megelozo cimsort kulon rejtjuk. */
body.learndash-cpt .wp-block-group:has(> .wp-block-query){ display:none !important }
body.learndash-cpt h2.wp-block-heading:has(+ .wp-block-query){ display:none !important }

/* A cím és a tartalom közötti rés a rejtett meta-blokk miatt maradt nagy. */
body.learndash-cpt .wp-block-post-content{ margin-top:34px }

/* --------------------------------------------------------------------------
   2. Tipográfia
   -------------------------------------------------------------------------- */
body.learndash-cpt h1,
body.learndash-cpt h2,
body.learndash-cpt h3,
body.learndash-cpt h4,
body.learndash-cpt .wp-block-post-title,
body.learndash-cpt .elementor-heading-title,
body.learndash-cpt .ld-item-title,
body.learndash-cpt .ld-topic-title{
  font-family:'Fraunces','Iowan Old Style','Palatino Linotype',Georgia,serif;
  font-variation-settings:'SOFT' 0,'WONK' 0;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.018em;
  color:var(--paper);
  text-transform:none;
}

/* Néhány régi oldalon a címet nem a blokksablon, hanem egy Elementor
   fejléc-widget rajzolja ki – ezért mindkét szelektor kell. */
body.learndash-cpt .wp-block-post-title,
body.learndash-cpt h1.elementor-heading-title{
  font-size:clamp(2rem,4.6vw,3rem);
  letter-spacing:-.026em;
  margin:0 auto .5em;
  max-width:20ch;
  text-align:center;
}

body.learndash-cpt .entry-content h2,
body.learndash-cpt .wp-block-post-content h2{
  font-size:clamp(1.5rem,3vw,2rem);
  margin:2em 0 .6em;
}
body.learndash-cpt .entry-content h3,
body.learndash-cpt .wp-block-post-content h3{
  font-size:clamp(1.2rem,2.2vw,1.45rem);
  margin:1.9em 0 .5em;
}

body.learndash-cpt p{color:var(--mist); margin:0 0 1.15em}
body.learndash-cpt strong{color:var(--paper); font-weight:600}
body.learndash-cpt a{color:var(--sky)}
body.learndash-cpt a:hover{color:var(--ember)}

body.learndash-cpt .entry-content,
body.learndash-cpt .wp-block-post-content{
  max-width:var(--trm-maxw);
  margin-left:auto; margin-right:auto;
}

body.learndash-cpt .entry-content ul,
body.learndash-cpt .entry-content ol,
body.learndash-cpt .wp-block-post-content ul,
body.learndash-cpt .wp-block-post-content ol{
  padding-left:1.5em; margin:0 0 1.3em;
}
body.learndash-cpt .entry-content li,
body.learndash-cpt .wp-block-post-content li{ margin-bottom:.5em; color:var(--mist) }
body.learndash-cpt .entry-content li::marker,
body.learndash-cpt .wp-block-post-content li::marker{ color:var(--ember) }

body.learndash-cpt hr{
  border:0; height:1px; background:var(--navy-800); margin:2.6em 0;
}

/* Prompt-sablonok: a kódblokk itt tartalom, nem dísz – olvashatónak kell lennie. */
body.learndash-cpt pre{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-left:3px solid var(--ember);
  border-radius:var(--r-sm);
  padding:20px 22px;
  overflow-x:auto;
  margin:0 0 1.5em;
  color:var(--paper);
}
body.learndash-cpt pre code,
body.learndash-cpt code{
  font-family:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.87rem;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
  color:inherit;
  background:none;
  padding:0;
}
body.learndash-cpt :not(pre) > code{
  background:var(--navy-850);
  border:1px solid var(--navy-800);
  border-radius:var(--r-xs);
  padding:.1em .4em;
  color:var(--sky);
}

/* --------------------------------------------------------------------------
   3. Saját fejléc és lábléc (a bővítmény írja ki)
   -------------------------------------------------------------------------- */
.trm-ld-header{
  position:sticky; top:0; z-index:60;
  background:var(--navy-950);
  border-bottom:1px solid var(--navy-800);
}
body.admin-bar .trm-ld-header{ top:32px }
@media (max-width:782px){ body.admin-bar .trm-ld-header{ top:46px } }

.trm-ld-header .trm-ld-nav{
  max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.trm-ld-brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; font-size:1.15rem; color:var(--paper);
  letter-spacing:-.02em; text-decoration:none;
  font-family:'IBM Plex Sans',sans-serif;
}
.trm-ld-brand:hover{ color:var(--paper) }
.trm-ld-brand .trm-ld-mark{ height:31px; width:auto; flex:none; display:block }
.trm-ld-brand:hover .trm-ld-mark{ opacity:.85 }

.trm-ld-actions{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
body.learndash-cpt .trm-ld-link{
  font-size:.94rem; color:var(--mist); text-decoration:none; white-space:nowrap;
}
body.learndash-cpt .trm-ld-link:hover{ color:var(--ember) }
.trm-ld-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--navy-700); border-radius:var(--r-sm);
  padding:9px 16px; font-size:.9rem; font-weight:500;
  color:var(--paper); text-decoration:none; background:transparent;
  transition:border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.trm-ld-btn:hover{ border-color:var(--ember); color:var(--ember) }

.trm-ld-footer{
  background:var(--navy-950);
  border-top:1px solid var(--navy-800);
  padding:34px 0;
}
.trm-ld-footer .trm-ld-foot{
  max-width:1180px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace; font-size:.78rem;
  letter-spacing:.04em; color:var(--mist-dim);
}
.trm-ld-footer a{ color:var(--sky); text-decoration:none }
.trm-ld-footer a:hover{ color:var(--ember) }

/* --------------------------------------------------------------------------
   4. LearnDash felület
   -------------------------------------------------------------------------- */
body.learndash-cpt .learndash-wrapper{
  max-width:var(--trm-maxw);
  margin-left:auto; margin-right:auto;
  font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
}

/* Megjegyzés: a régi kurzusokon egy Elementor-elrendezés duplikálja a címet és a
   leckelistát. NEM CSS-sel rejtjük el – az egyszer már azt eredményezte, hogy a
   leckelista teljesen eltűnt, mert azon a kurzuson egyedül az Elementor widget
   rajzolta ki. A helyes megoldás a megjelenítés leválasztása:
   Eszközök → LearnDash kapcsolat javítása → „Elementor-elrendezés leválasztása". */

/* --------------------------------------------------------------------------
   4/a. RÉGI TESTRESZABÓ-SZABÁLY SEMLEGESÍTÉSE
   A téma globális stílusai között (Testreszabás → További CSS) ott van ez:

     .ld-item-list, .ld-course-content-list, #learndash-course-content,
     .learndash-wrapper .ld-section-heading,
     .learndash-wrapper .ld-item-list-navigation { display:none !important }

   Vagyis a LearnDash SAJÁT leckelistája teljesen el volt rejtve – nyilván
   azért, mert a kurzusoldalt korábban egy Elementor-elrendezés rajzolta ki a
   maga listájával. Most, hogy az Elementor le van választva, ettől a szabálytól
   a kurzusoldalon egyáltalán nem látszana a tananyag.

   Itt nagyobb specificitással visszakapcsoljuk. EZ KERÜLŐÚT: a helyes az, ha a
   fenti szabály törlődik a Testreszabó "További CSS" mezőjéből. Amíg ott van,
   minden új kurzusnál újratermelné a hibát.
   -------------------------------------------------------------------------- */
body.learndash-cpt .learndash-wrapper .ld-item-list,
body.learndash-cpt .learndash-wrapper .ld-course-content-list,
body.learndash-cpt .learndash-wrapper .ld-section-heading,
body.learndash-cpt .learndash-wrapper .ld-item-list-navigation,
body.learndash-cpt div#learndash-course-content{
  display:block !important;
}

/* Az állapotsáv KÉT állapotban jelenik meg, és ez a kettő nem egyenrangú:

   - `.ld-course-status-not-enrolled`: ebben van az ár („Ingyenes”) és a
     „Kezdj hozzá” gomb. EZ A BEIRATKOZÁS TARTALÉK ÚTJA – akkor kell, ha az
     űrlapos automatikus beiratkozás valaha elromlana. Látszania KELL.
   - `.ld-course-status-enrolled`: csak a haladást írja ki, amit a saját
     [trm_haladas] dobozunk amúgy is mutat, ráadásul százalékos
     önpozicionálással kiegészítve. Ez duplikáció, ezért ezt rejtjük el.

   A Testreszabó régi szabálya mindkettőt elrejtette, tehát a beiratkozás
   gombot is. Ezért törölhető ott az egész blokk. */
body.learndash-cpt .ld-course-status.ld-course-status-enrolled{ display:none !important }
body.learndash-cpt .ld-course-status.ld-course-status-not-enrolled{ display:block !important }

/* Állapotsáv és haladás */
body.learndash-cpt .ld-course-status{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  padding:22px 24px;
  margin-bottom:28px;
  color:var(--mist);
}
body.learndash-cpt .ld-course-status .ld-status{
  background:var(--navy-800); color:var(--paper);
  border-radius:var(--r-xs); font-family:'IBM Plex Mono',monospace;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px;
}
body.learndash-cpt .ld-course-status .ld-status.ld-status-complete{
  background:var(--ember); color:#20120A;
}
body.learndash-cpt .ld-progress-heading,
body.learndash-cpt .ld-progress-stats{
  color:var(--mist); font-size:.85rem;
}
body.learndash-cpt .ld-progress-percentage,
body.learndash-cpt .ld-secondary-color{ color:var(--ember) !important }
body.learndash-cpt .ld-progress-bar{
  background:rgba(127,209,255,.16) !important;
  border:0 !important; border-radius:4px; height:8px; overflow:hidden;
}
body.learndash-cpt .ld-progress-bar .ld-progress-bar-percentage,
body.learndash-cpt .ld-secondary-background{
  background:var(--ember) !important; border-radius:4px;
}

/* Morzsamenü és lecke-állapotsáv.
   A LearnDash ezeket világosszürkére (#F0F3F6) festi, amin a mi világos
   szövegszínünk 1,5:1 kontrasztot adott – vagyis olvashatatlan volt. */
body.learndash-cpt .ld-lesson-status,
body.learndash-cpt .ld-topic-status,
body.learndash-cpt .ld-quiz-status,
body.learndash-cpt .ld-breadcrumbs{
  background:var(--navy-900) !important;
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  color:var(--mist) !important;
}
body.learndash-cpt .ld-lesson-status,
body.learndash-cpt .ld-topic-status,
body.learndash-cpt .ld-quiz-status{ padding:14px 18px; margin-bottom:26px }
body.learndash-cpt .ld-breadcrumbs{ border:0; background:transparent !important; padding:0 }
body.learndash-cpt .ld-breadcrumbs a{ color:var(--sky) !important }
body.learndash-cpt .ld-breadcrumbs a:hover{ color:var(--ember) !important }
body.learndash-cpt .ld-breadcrumbs-segments{ color:var(--mist-dim) !important }
body.learndash-cpt .ld-status.ld-status-progress,
body.learndash-cpt .ld-lesson-status .ld-status,
body.learndash-cpt .ld-topic-status .ld-status,
body.learndash-cpt .ld-quiz-status .ld-status{
  background:var(--navy-800) !important; color:var(--paper) !important;
}

/* Szekciócím ("Tanfolyam tartalom") */
body.learndash-cpt .ld-section-heading h2,
body.learndash-cpt .learndash-wrapper .ld-section-heading h2{
  font-size:clamp(1.3rem,2.6vw,1.7rem);
  color:var(--paper); margin:0 0 .3em;
}

/* Leckelista */
body.learndash-cpt .ld-item-list .ld-item-list-item{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  margin-bottom:10px;
  overflow:hidden;
  transition:border-color .2s var(--ease-out);
}
body.learndash-cpt .ld-item-list .ld-item-list-item:hover{ border-color:var(--navy-700) }
body.learndash-cpt .ld-item-list-item-preview{ padding:4px 6px }
body.learndash-cpt .ld-item-list-item a.ld-item-name,
body.learndash-cpt .ld-item-list-item .ld-item-name{ color:var(--paper) }
body.learndash-cpt .ld-item-title{
  font-size:1.05rem; color:var(--paper);
}
body.learndash-cpt .ld-item-details,
body.learndash-cpt .ld-item-component{ color:var(--mist-dim); font-size:.84rem }

/* Állapotikonok: a LearnDash zöld/kék helyett a saját akcentünk */
body.learndash-cpt .ld-status-icon.ld-status-incomplete{
  border-color:var(--navy-700) !important; background:transparent !important;
}
body.learndash-cpt .ld-status-icon.ld-status-complete,
body.learndash-cpt .ld-status-icon.ld-quiz-complete{
  background:var(--ember) !important; border-color:var(--ember) !important;
  color:#20120A !important;
}
body.learndash-cpt .ld-status-icon.ld-status-progress .ld-icon{ color:var(--ember) !important }

/* Témalista a leckén belül */
body.learndash-cpt .ld-table-list{
  background:var(--navy-950); border-top:1px solid var(--navy-800);
}
body.learndash-cpt .ld-table-list-header{
  background:var(--navy-850) !important; color:var(--mist) !important;
  font-family:'IBM Plex Mono',monospace; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase;
}
body.learndash-cpt .ld-table-list-item{ border-bottom:1px solid var(--navy-800) }
body.learndash-cpt .ld-table-list-item:last-child{ border-bottom:0 }
body.learndash-cpt .ld-table-list-item-preview a,
body.learndash-cpt .ld-topic-title{ color:var(--mist) }
body.learndash-cpt .ld-table-list-item-preview a:hover .ld-topic-title{ color:var(--ember) }
body.learndash-cpt .ld-table-list-footer{ background:var(--navy-900); border-top:1px solid var(--navy-800) }

/* Gombok */
body.learndash-cpt .ld-button,
body.learndash-cpt .learndash-wrapper .ld-button,
body.learndash-cpt input[type=submit].ld-button,
body.learndash-cpt .wpProQuiz_button,
body.learndash-cpt .wpProQuiz_button2{
  background:var(--ember) !important;
  color:#20120A !important;
  border:1px solid var(--ember) !important;
  border-radius:var(--r-sm) !important;
  font-family:'IBM Plex Sans',sans-serif !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  padding:12px 22px !important;
  text-transform:none !important;
  box-shadow:none !important;
  transition:background .2s var(--ease-out) !important;
}
body.learndash-cpt .ld-button:hover,
body.learndash-cpt .wpProQuiz_button:hover,
body.learndash-cpt .wpProQuiz_button2:hover{
  background:var(--ember-deep) !important; border-color:var(--ember-deep) !important;
}
body.learndash-cpt .ld-button.ld-button-alternate,
body.learndash-cpt .ld-button.ld-button-transparent{
  background:transparent !important;
  color:var(--paper) !important;
  border-color:var(--navy-700) !important;
}
body.learndash-cpt .ld-button.ld-button-alternate:hover{
  border-color:var(--ember) !important; color:var(--ember) !important;
}
/* A LearnDash saját színbeállítása (Beállítások → LD30 téma) most:
   elsődleges #12384E (navy-800), másodlagos #FF7A45, harmadlagos #7FD1FF.
   Az elsődleges szándékosan sötét: a LearnDash fehér szöveget tesz rá, ami a
   narancson csak 2,4:1 lenne. A gombok külön kapják meg a narancsot. */
body.learndash-cpt .ld-primary-color,
body.learndash-cpt .ld-primary-color-hover:hover{ color:var(--ember) !important }

/* A LearnDash saját generált stílusa (`.learndash-wrapper .ld-button`) magasabb
   specificitású, mint a fenti `.ld-button` szabály, ezért a hátteret a saját
   elsődleges színére (navy) állította – a mi sötét szövegszínünkkel együtt ez
   1,5:1 kontrasztot adott. A LearnDash szabálya
   `.learndash-wrapper:not(...):not(...) .ld-button` (5 osztály), és a generált
   szín-stíluslapja !important-tal jön, ezért itt tudatosan magasabb
   specificitást építünk (html + body + :not() lánc). Nem szép, de ez a
   legkisebb beavatkozás – a LearnDash stíluslapját nem kell módosítani. */
html body.learndash-cpt .learndash-wrapper:not(.x) .ld-button:not(.ld-button-alternate):not(.ld-button-transparent),
html body.learndash-cpt .ld-content-actions:not(.x) .ld-button:not(.ld-button-alternate):not(.ld-button-transparent){
  background:var(--ember) !important;
  color:#20120A !important;
  border-color:var(--ember) !important;
}
body.learndash-cpt .learndash-wrapper .ld-button.ld-button-alternate,
body.learndash-cpt .learndash-wrapper .ld-button.ld-button-transparent{
  background:transparent !important;
  color:var(--paper) !important;
  border-color:var(--navy-700) !important;
}
body.learndash-cpt .learndash-wrapper .ld-button.ld-button-alternate:hover,
body.learndash-cpt .learndash-wrapper .ld-button.ld-button-transparent:hover{
  border-color:var(--ember) !important; color:var(--ember) !important;
}

/* Kinyitó gomb a leckesoron */
body.learndash-cpt .ld-expand-button{
  background:transparent !important;
  border:1px solid var(--navy-700) !important;
  color:var(--mist) !important;
  border-radius:var(--r-xs) !important;
  font-family:'IBM Plex Mono',monospace !important;
  font-size:.72rem !important; letter-spacing:.08em !important;
  text-transform:uppercase !important;
  padding:7px 12px !important;
}
body.learndash-cpt .ld-expand-button:hover{ border-color:var(--ember) !important; color:var(--ember) !important }
body.learndash-cpt .ld-expand-button .ld-icon{ color:inherit !important }

/* Tartalom alatti navigáció (Előző / Következő lecke) */
body.learndash-cpt .ld-content-actions{
  border-top:1px solid var(--navy-800);
  margin-top:44px; padding-top:26px;
  background:transparent;
}
body.learndash-cpt .ld-content-action{ color:var(--mist) }

/* Fülek */
body.learndash-cpt .ld-tabs .ld-tab{
  background:transparent; border-bottom:2px solid transparent;
  color:var(--mist-dim); font-weight:500;
}
body.learndash-cpt .ld-tabs .ld-tab.ld-active{
  color:var(--paper); border-bottom-color:var(--ember);
}
body.learndash-cpt .ld-tabs .ld-tabs-navigation{ border-bottom:1px solid var(--navy-800) }

/* Értesítő dobozok */
body.learndash-cpt .ld-alert,
body.learndash-cpt .learndash-wrapper .ld-alert{
  background:var(--navy-900) !important;
  border:1px solid var(--navy-800) !important;
  border-left:3px solid var(--ember) !important;
  border-radius:var(--r-sm) !important;
  color:var(--mist) !important;
}
body.learndash-cpt .ld-alert-icon{ background:transparent !important; color:var(--ember) !important }

/* --------------------------------------------------------------------------
   4/b. Fókusz mód (ld-focus)
   A LearnDash a lecke- és kvízoldalt egy külön, fókuszált sablonnal is
   kiszolgálja. Ennek saját osztálynevei vannak, ezért külön kell kezelni –
   enélkül itt maradna a gyári világos felület a sötét oldal közepén.
   -------------------------------------------------------------------------- */
body.learndash-cpt .ld-focus,
body.learndash-cpt .ld-focus-content,
body.learndash-cpt .ld-focus-main,
body.learndash-cpt .ld-focus-header,
body.learndash-cpt .ld-focus-sidebar{
  background:var(--navy-950) !important;
  color:var(--mist) !important;
}
body.learndash-cpt .ld-focus-header{ border-bottom:1px solid var(--navy-800) !important }
body.learndash-cpt .ld-focus-sidebar{ border-right:1px solid var(--navy-800) !important }
body.learndash-cpt .ld-focus-content h1,
body.learndash-cpt .ld-focus-content h2,
body.learndash-cpt .ld-focus-content .ld-focus-title{ color:var(--paper) !important }

/* A "Lecke tartalom" fejléc és a benne lévő sorok. A gyári változatban a
   fejléc élénkkék, a sorok fehér hátterűek – utóbbin a világos szövegünk
   olvashatatlan volt. */
body.learndash-cpt .ld-table-list-header.ld-primary-background,
body.learndash-cpt .ld-lesson-item-preview-heading,
body.learndash-cpt .ld-table-list-header{
  background:var(--navy-850) !important;
  color:var(--paper) !important;
  border:1px solid var(--navy-800) !important;
  border-bottom:0 !important;
}
body.learndash-cpt .ld-table-list-items,
body.learndash-cpt .ld-table-list .ld-table-list-item{
  background:var(--navy-900) !important;
  border-color:var(--navy-800) !important;
}
body.learndash-cpt .ld-table-list-item a,
body.learndash-cpt .ld-table-list-item-preview,
body.learndash-cpt .ld-table-list-item .ld-topic-title{ color:var(--mist) !important }
body.learndash-cpt .ld-table-list-item a:hover .ld-topic-title{ color:var(--ember) !important }

/* A "Vissza: Tanfolyam" link a LearnDash elsődleges színét kapja, ami nálunk
   sötét navy – navy háttéren láthatatlan. Külön kell színezni. */
body.learndash-cpt .ld-course-step-back,
body.learndash-cpt a.ld-primary-color{ color:var(--sky) !important }
body.learndash-cpt .ld-course-step-back:hover,
body.learndash-cpt a.ld-primary-color:hover{ color:var(--ember) !important }

/* Ha egy leckén maradt Elementor-fejléc, az saját, beégetett színnel jön.
   A leválasztó eszköz megszünteti, de amíg nem futott le, legyen olvasható. */
body.learndash-cpt .elementor-heading-title{ color:var(--paper) !important }

/* Lecke-navigáció a fókusz mód alján */
body.learndash-cpt .ld-content-action .ld-button,
body.learndash-cpt .ld-content-actions .ld-button{
  background:var(--ember) !important; color:#20120A !important; border-color:var(--ember) !important;
}
body.learndash-cpt .ld-content-action a:not(.ld-button){ color:var(--sky) !important }

/* --------------------------------------------------------------------------
   5. Kvíz (WpProQuiz)
   -------------------------------------------------------------------------- */
body.learndash-cpt .wpProQuiz_content{ color:var(--mist) }
body.learndash-cpt .wpProQuiz_header,
body.learndash-cpt .wpProQuiz_listItem,
body.learndash-cpt .wpProQuiz_question{
  background:var(--navy-900) !important;
  border:1px solid var(--navy-800) !important;
  border-radius:var(--r-md) !important;
  padding:22px 24px !important;
  margin-bottom:16px !important;
}
body.learndash-cpt .wpProQuiz_question_text,
body.learndash-cpt .wpProQuiz_header{ color:var(--paper) !important }
body.learndash-cpt .wpProQuiz_questionList{ border:0 !important; margin:0 !important }
body.learndash-cpt .wpProQuiz_questionListItem{
  border-bottom:1px solid var(--navy-800) !important;
  padding:12px 4px !important; margin:0 !important;
}
body.learndash-cpt .wpProQuiz_questionListItem:last-child{ border-bottom:0 !important }
body.learndash-cpt .wpProQuiz_questionListItem label{ color:var(--mist) !important; cursor:pointer }
body.learndash-cpt .wpProQuiz_questionListItem input[type=radio],
body.learndash-cpt .wpProQuiz_questionListItem input[type=checkbox]{ accent-color:var(--ember) }
body.learndash-cpt .wpProQuiz_time_limit .wpProQuiz_progress{ background:var(--ember) !important }
body.learndash-cpt .wpProQuiz_correct_answer{ background:rgba(255,122,69,.10) !important }
body.learndash-cpt .wpProQuiz_incorrect{ background:rgba(232,95,40,.12) !important }
body.learndash-cpt .wpProQuiz_response{
  background:var(--navy-850) !important; border:1px solid var(--navy-800) !important;
  border-radius:var(--r-sm) !important; color:var(--mist) !important;
}
body.learndash-cpt .wpProQuiz_results{ color:var(--mist) }
body.learndash-cpt .wpProQuiz_resultsList li{ color:var(--mist) }

/* --------------------------------------------------------------------------
   6. Saját haladás-doboz ([trm_haladas])
   -------------------------------------------------------------------------- */
body.learndash-cpt .trm-haladas{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  padding:20px 24px;
  max-width:var(--trm-maxw);
  margin:0 auto 26px;
}
body.learndash-cpt .trm-haladas-text{ color:var(--mist); margin:12px 0 0 }
body.learndash-cpt .trm-haladas-text strong{ color:var(--ember) }

/* --------------------------------------------------------------------------
   7. Jegyzetek (Notes by LearnDash)
   -------------------------------------------------------------------------- */
body.learndash-cpt .ld-notes,
body.learndash-cpt .learndash-notes-wrapper{
  background:var(--navy-900) !important;
  border:1px solid var(--navy-800) !important;
  border-radius:var(--r-md) !important;
  color:var(--mist) !important;
}
body.learndash-cpt .learndash-notes-wrapper textarea{
  background:var(--navy-950) !important;
  border:1px solid var(--navy-800) !important;
  border-radius:var(--r-sm) !important;
  color:var(--paper) !important;
}

/* Űrlapmezők általában (beadandó feltöltés, kvíz szabad szöveg) */
body.learndash-cpt input[type=text],
body.learndash-cpt input[type=email],
body.learndash-cpt input[type=number],
body.learndash-cpt textarea{
  background:var(--navy-950);
  border:1px solid var(--navy-800);
  border-radius:var(--r-sm);
  color:var(--paper);
  padding:11px 13px;
  font-family:inherit; font-size:.97rem;
}
body.learndash-cpt input[type=text]:focus,
body.learndash-cpt input[type=email]:focus,
body.learndash-cpt textarea:focus{
  outline:2px solid var(--ember); outline-offset:1px; border-color:var(--ember);
}

/* Fókuszjelölés végig látható legyen – billentyűzetes navigáció. */
body.learndash-cpt a:focus-visible,
body.learndash-cpt button:focus-visible,
body.learndash-cpt .ld-button:focus-visible{
  outline:2px solid var(--sky); outline-offset:2px;
}

/* --------------------------------------------------------------------------
   8. Reszponzív
   -------------------------------------------------------------------------- */
body.learndash-cpt img{ max-width:100%; height:auto }
body.learndash-cpt table{ display:block; overflow-x:auto; max-width:100% }

@media (max-width:760px){
  body.learndash-cpt{ font-size:16px }
  body.learndash-cpt .wp-site-blocks > main{ padding-top:28px; padding-bottom:64px }
  .trm-ld-header .trm-ld-nav{ padding:12px 18px }
  .trm-ld-brand .trm-ld-mark{ height:25px }
  .trm-ld-btn{ font-size:.82rem; padding:8px 13px }
  .trm-ld-footer .trm-ld-foot{ padding:0 18px; flex-direction:column; align-items:flex-start; gap:8px }
  body.learndash-cpt .ld-course-status{ padding:18px }
  body.learndash-cpt pre{ padding:16px 15px }
  body.learndash-cpt pre code{ font-size:.8rem }
}

/* Mozgáscsökkentés – EN 301 549 / WCAG 2.2 elvárás, nem opció. */
@media (prefers-reduced-motion:reduce){
  body.learndash-cpt *,
  body.learndash-cpt *::before,
  body.learndash-cpt *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}


/* --------------------------------------------------------------------------
   9. Téma-oldal elrendezése
   A tartalmat a bővítmény PHP szűrője rendezi át (lásd TRM_LD_Theme::topic_layout).
   Mind a négy rész EGY rácsban van. A bevezető és a zárógondolat mindkét
   oszlopon átér (szöveg + kép szélessége), a törzsszöveg és a kép közéjük ül.

     ┌────────────────────────┐
     │ A lecke célja          │
     ├───────────────┬────────┤
     │ törzsszöveg   │  KÉP   │
     ├───────────────┴────────┤
     │ Útravaló gondolat      │
     └────────────────────────┘
   -------------------------------------------------------------------------- */
.trm-topic{ margin:0 }

.trm-topic--media{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,clamp(300px,36%,460px));
  grid-template-rows:auto auto auto;
  column-gap:44px;
  align-items:start;
}
.trm-topic--media > .trm-topic-intro{ grid-column:1 / -1; grid-row:1 }
.trm-topic--media > .trm-topic-main { grid-column:1;      grid-row:2 }
.trm-topic--media > .trm-topic-media{ grid-column:2;      grid-row:2 }
.trm-topic--media > .trm-topic-note { grid-column:1 / -1; grid-row:3 }

.trm-topic-main > *:first-child{ margin-top:0 }

/* A ragadós pozíció a KÉPEN van, nem az oszlopon. Ha az oszlop ragad, a
   görgetés lecsúsztatja a saját rácscellájából, és ráúszik az alatta lévő
   zárógondolatra – élesben pontosan ez történt. Így viszont a nyújtott
   oszlop a korlát: a kép nem tud kilépni a középső sávból. */
.trm-topic--media > .trm-topic-media{ align-self:stretch }
.trm-topic-media{ position:static }
.trm-topic-media img{
  position:sticky; top:104px;
  width:100%; height:auto; display:block;
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
}

/* A leckeábrák feliratai 300px-en olvashatatlanok voltak. Asztali nézetben
   ezért a rács kilóg a szövegoszlopból: a kép nagyobb lesz, a szöveg
   sorhossza mégsem szűkül. Negatív margóval, nem transzformmal – utóbbi
   elrontaná a kép ragadós pozicionálását. */
/* A negatív margós kitörés itt már fölösleges: a tartalomsáv maga is
   1120px széles (lásd a 12. szakaszt), a rács ezt a szélességet kapja. */

/* A két kiemelt doboz. Ugyanaz a forma, más az akcentus: a nyitó szakasz
   égszínkék (ez a keret), a zárógondolat narancs (ez a hangsúly). */
.trm-topic-intro,
.trm-topic-note{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  padding:26px 30px;
}
.trm-topic-intro{ border-left:3px solid var(--sky); margin:0 0 34px }
.trm-topic-note { border-left:3px solid var(--ember); margin-top:44px }
.trm-topic-intro > *:first-child,
.trm-topic-note  > *:first-child{ margin-top:0 }
.trm-topic-intro > *:last-child,
.trm-topic-note  > *:last-child{ margin-bottom:0 }
body.learndash-cpt .trm-topic-intro h3,
body.learndash-cpt .trm-topic-note h3{
  font-size:clamp(1.1rem,2vw,1.3rem);
  margin-bottom:.6em;
}
body.learndash-cpt .trm-topic-note em{ color:var(--paper); font-style:italic }

@media (max-width:900px){
  .trm-topic--media{ grid-template-columns:1fr; grid-template-rows:none; row-gap:28px }
  .trm-topic--media > .trm-topic-intro,
  .trm-topic--media > .trm-topic-main,
  .trm-topic--media > .trm-topic-note,
  .trm-topic--media > .trm-topic-media{ grid-column:1; grid-row:auto }
  .trm-topic-media{ max-width:100%; margin-inline:auto }
  .trm-topic-media img{ position:static }
  body.learndash-cpt .trm-topic-intro{ margin-bottom:0 }
  body.learndash-cpt .trm-topic-note{ margin-top:0 }
  body.learndash-cpt .trm-topic-intro,
  body.learndash-cpt .trm-topic-note{ padding:20px 18px }
}

/* --------------------------------------------------------------------------
   10. Mobil és tablet (900px alatt): 92% tartalomszélesség és nagyobb betű
   A blokktéma "has-global-padding" beállítása kis kijelzőn túl sokat vesz el,
   a vászon-sablonos oldalaknál pedig egyáltalán nincs oldalsó térköz. Ezért
   itt egy helyen, minden LearnDash oldaltípusra rögzítjük: 92% szélesség,
   azaz 4-4% oldalsó levegő.

   FONTOS: az oldalsó térköz CSAK a legkülső sávon van. Ha minden szinten
   92%-ot adnánk, a szűkítések összeszoroznának – az Elementor-sablonos
   témaoldalon két beágyazott 92% és egy 10px widget-padding 390px-en 76%-ot
   eredményezett a kért 92% helyett. Ezért kívül padding, beljebb 100%.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  body.learndash-cpt{ font-size:17.5px; line-height:1.62 }

  body.learndash-cpt .wp-site-blocks > main,
  body.learndash-cpt .elementor-section.elementor-top-section{
    padding-left:4% !important;
    padding-right:4% !important;
  }
  body.learndash-cpt .wp-site-blocks > main{
    padding-top:24px;
    padding-bottom:60px;
  }
  body.learndash-cpt .wp-site-blocks > main > .wp-block-group,
  body.learndash-cpt .elementor-column,
  body.learndash-cpt .elementor-widget-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body.learndash-cpt .wp-block-post-title,
  body.learndash-cpt .elementor-widget-theme-post-title,
  body.learndash-cpt .elementor-section > .elementor-container,
  body.learndash-cpt .entry-content,
  body.learndash-cpt .wp-block-post-content,
  body.learndash-cpt .trm-haladas,
  body.learndash-cpt > .learndash,
  body.learndash-cpt .learndash-wrapper--course,
  body.learndash-cpt .learndash-wrapper--lesson,
  body.learndash-cpt .learndash-wrapper--topic,
  body.learndash-cpt .learndash-wrapper--quiz{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box;
  }

  /* A blokktéma "teljes szélességű" blokkjai negatív margóval törnek ki a
     fősáv paddingjéből. Mióta a padding tőlünk jön, ez a kitörés oldalanként
     4%-kal túllógatná az oldalt – vízszintes görgetés lenne belőle. */
  body.learndash-cpt .alignfull,
  body.learndash-cpt .alignwide{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* A kurzusoldalon a leckelista a tartalom UTÁNI testvérben ül, és ott a
     blokktéma újra ráteszi a globális oldalsó paddingot (has-global-padding),
     a LearnDash pedig a saját konténereit is behúzza. Ezek a szűkítések a
     legkülső 4%-ra rakódnak – ettől lett a kurzusoldal mobilon 90% alatt.
     A main-t szándékosan kihagyjuk: az adja az egyetlen oldalsó levegőt. */
  /* Mérve élesben 390px-en: a kurzusoldal leckelistája 285px volt (76%).
     A hiányzó 60px az .entry-content 30-30px oldalsó paddingja – ez a
     tartalom UTÁNI testvérben ül, ahová a LearnDash a leckelistát rakja. */
  body.learndash-cpt .entry-content,
  body.learndash-cpt .wp-block-post-content,
  body.learndash-cpt .has-global-padding:not(main),
  body.learndash-cpt .learndash,
  body.learndash-cpt .learndash-wrapper,
  body.learndash-cpt .ld-tabs,
  body.learndash-cpt .ld-tabs-content,
  body.learndash-cpt .ld-tab-content,
  body.learndash-cpt #learndash-course-content,
  body.learndash-cpt .ld-item-list,
  body.learndash-cpt .ld-course-content-list{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box;
  }

  /* A cím mobilon ne legyen 20ch-re szorítva. */
  body.learndash-cpt .wp-block-post-title,
  body.learndash-cpt h1.elementor-heading-title{ max-width:100% !important }

  body.learndash-cpt .trm-topic-note{ padding:20px 18px }
  body.learndash-cpt .ld-lesson-status,
  body.learndash-cpt .ld-topic-status,
  body.learndash-cpt .ld-quiz-status{ padding:14px 16px }
}

/* --------------------------------------------------------------------------
   11. Profilom oldal ([trm_profilom])
   Ugyanaz a nyelv, mint a tanulófelületé: navy kártyák, narancs akcentus,
   Fraunces címek. A haladás-sáv szándékosan ugyanaz a forma, mint a
   kurzusoldalon – a tanuló ugyanazt a jelet lássa, bárhol nézi.
   -------------------------------------------------------------------------- */
.trm-profil{ max-width:var(--trm-maxw); margin:0 auto }

.trm-profil-fej{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-left:3px solid var(--sky);
  border-radius:var(--r-md);
  padding:26px 30px;
  margin-bottom:44px;
}
.trm-profil-cimke{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mist-dim); margin:0 0 .4em;
}
body.learndash-cpt .trm-profil-fej h2{ font-size:clamp(1.5rem,3vw,2rem); margin:0 0 .25em }
.trm-profil-email{ margin:0; color:var(--mist-dim); font-size:.95rem }
.trm-profil-kilep{
  display:inline-block; margin-top:14px;
  font-size:.9rem; color:var(--mist-dim); text-decoration:underline;
}
body.learndash-cpt .trm-profil-kilep:hover{ color:var(--ember) }

.trm-profil-blokk{ margin-bottom:48px }
body.learndash-cpt .trm-profil-blokk h3{ font-size:clamp(1.25rem,2.4vw,1.6rem); margin:0 0 .3em }
.trm-profil-sub{ color:var(--mist-dim); font-size:.95rem; margin:0 0 20px }

.trm-profil-lista{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:18px }
/* A tartalom-lista szabálya (padding-left:1.5em) itt beljebb tolná a
   kártyákat a fejléc-dobozhoz képest – ezért külön nullázzuk. */
body.learndash-cpt ul.trm-profil-lista,
body.learndash-cpt ul.trm-profil-elojegyzes{
  padding-left:0 !important;
  margin-left:0 !important;
  list-style:none;
}
body.learndash-cpt .trm-profil-lista li,
body.learndash-cpt .trm-profil-elojegyzes li{ margin-bottom:0 }
.trm-profil-kartya{
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  padding:24px 26px;
}
.trm-profil-kartya--kesz{ border-left:3px solid var(--sky) }
.trm-profil-kartya--folyamatban{ border-left:3px solid var(--ember) }
.trm-profil-kartya--uj{ border-left:3px solid var(--navy-700) }

.trm-profil-kartya-fej{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
body.learndash-cpt .trm-profil-kartya h4{ font-size:1.2rem; margin:0 }
body.learndash-cpt .trm-profil-kartya h4 a{ color:var(--paper); text-decoration:none }
body.learndash-cpt .trm-profil-kartya h4 a:hover{ color:var(--ember) }
.trm-profil-allapot{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mist-dim); white-space:nowrap;
}

.trm-profil-sav{
  height:8px; border-radius:4px; overflow:hidden;
  background:rgba(127,209,255,.18); margin:16px 0 10px;
}
.trm-profil-sav span{ display:block; height:100%; background:var(--ember); border-radius:4px }
.trm-profil-meta{ margin:0 0 18px; font-size:.94rem }

.trm-profil-gombok{ display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.trm-profil-cta{
  display:inline-block;
  background:var(--ember); color:#20120A !important;
  font-weight:600; text-decoration:none;
  padding:11px 20px; border-radius:var(--r-sm);
}
.trm-profil-cta:hover{ background:var(--ember-deep); color:#20120A !important }
.trm-profil-link{ font-size:.94rem }

.trm-profil-ures{
  background:var(--navy-900);
  border:1px dashed var(--navy-700);
  border-radius:var(--r-md);
  padding:26px 30px;
}
.trm-profil-ures p{ margin:0 0 16px }
body.learndash-cpt .trm-profil-ures h2{ font-size:1.5rem; margin:0 0 .4em }

.trm-profil-elojegyzes{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.trm-profil-elojegyzes li{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-sm);
  padding:14px 18px;
}
.trm-profil-elo-nev{ color:var(--paper) }
.trm-profil-elo-datum{ color:var(--mist-dim); font-size:.9rem; white-space:nowrap }

@media (max-width:900px){
  .trm-profil-fej,
  .trm-profil-kartya,
  .trm-profil-ures{ padding:20px 18px }
  .trm-profil-gombok{ gap:14px }
}

/* --------------------------------------------------------------------------
   12. Szövegbe szúrt, fekvő leckeábra
   A .trm-inline képet az elrendezés-szűrő szándékosan a helyén hagyja: nem
   emeli a jobb oszlopba, így a teljes szövegszélességet megkapja.
   -------------------------------------------------------------------------- */
body.learndash-cpt figure:has(img.trm-inline),
body.learndash-cpt p:has(img.trm-inline){ margin:30px 0 34px }
body.learndash-cpt picture:has(> img.trm-inline){ display:block }
body.learndash-cpt img.trm-inline{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
}
/* A szöveg ugyanolyan széles, mint az ábra.
   A blokktéma és a LearnDash is szűkebb konténert ad (645px); ezt asztali
   nézetben felnyitjuk a designrendszer mércéjére, hogy a szöveg és a kép
   egy vonalban álljon. Mobilon a 10. szakasz szabályai maradnak érvényben. */
@media (min-width:901px){
  body.learndash-cpt .wp-block-post-content,
  body.learndash-cpt .entry-content,
  body.learndash-cpt .learndash,
  body.learndash-cpt .learndash-wrapper{
    max-width:min(var(--trm-maxw), calc(100vw - 96px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:900px){
  body.learndash-cpt figure:has(img.trm-inline),
  body.learndash-cpt p:has(img.trm-inline){ margin:22px 0 26px }
}

/* --------------------------------------------------------------------------
   13. Szöveges ábrablokk (.trm-abra)
   Ami eddig PNG volt, most HTML. Ugyanaz a forma, de:
   - a valódi Fraunces / IBM Plex betűvel, nem helyettesítővel,
   - kijelölhető, kereshető, képernyőolvasóval felolvasható,
   - mobilon magától újratördelődik, nincs szükség külön álló változatra.
   -------------------------------------------------------------------------- */
.trm-abra{
  margin:34px 0 38px;
  padding:26px 28px 28px;
  background:var(--navy-900);
  border:1px solid var(--navy-800);
  border-radius:var(--r-lg);
}
body.learndash-cpt .trm-abra-fej{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin:0 0 18px;
}

body.learndash-cpt ul.trm-abra-lista{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:16px;
}
body.learndash-cpt ul.trm-abra-lista > li{ margin:0 }

.trm-abra--racs    ul.trm-abra-lista{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) }
.trm-abra--folyamat ul.trm-abra-lista{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)) }
.trm-abra--sorok   ul.trm-abra-lista{ grid-template-columns:repeat(auto-fit,minmax(310px,1fr)) }
.trm-abra--ketto   ul.trm-abra-lista{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px }

.trm-abra-elem{
  position:relative;
  background:var(--navy-850);
  border:1px solid var(--navy-800);
  border-radius:var(--r-md);
  padding:18px 20px 18px 24px;
}
.trm-abra-elem::before{
  content:'';
  position:absolute; left:0; top:16px; bottom:16px; width:3px;
  border-radius:2px; background:var(--ember);
}
.trm-abra-elem--sky::before  { background:var(--sky) }
.trm-abra-elem--zold::before { background:#5FD3A6 }
.trm-abra-elem--mist::before { background:var(--mist-dim) }

body.learndash-cpt .trm-abra-tag{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember); margin-bottom:.5em;
}
.trm-abra-elem--sky  .trm-abra-tag{ color:var(--sky) }
.trm-abra-elem--zold .trm-abra-tag{ color:#5FD3A6 }
.trm-abra-elem--mist .trm-abra-tag{ color:var(--mist-dim) }

body.learndash-cpt .trm-abra-cim{
  display:block; color:var(--paper); font-weight:600;
  font-size:1.02rem; line-height:1.3; margin-bottom:.35em;
}
body.learndash-cpt .trm-abra-szoveg{
  display:block; color:var(--mist); font-size:.94rem; line-height:1.5;
}

/* Két hasáb: mit csinál jól / mit ront el */
.trm-abra--ketto .trm-abra-elem{ padding:22px 24px }
body.learndash-cpt .trm-abra-pontok{
  list-style:none; margin:0; padding:0;
}
body.learndash-cpt .trm-abra-pontok li{
  position:relative; padding-left:18px; margin:0 0 .55em;
  color:var(--mist); font-size:.94rem; line-height:1.5;
}
body.learndash-cpt .trm-abra-pontok li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75;
}
body.learndash-cpt .trm-abra-elem--sky   .trm-abra-pontok li::before{ background:var(--sky); opacity:1 }
body.learndash-cpt .trm-abra-elem--ember .trm-abra-pontok li::before{ background:var(--ember); opacity:1 }
body.learndash-cpt .trm-abra-elem--zold  .trm-abra-pontok li::before{ background:#5FD3A6; opacity:1 }

/* A záró gondolat ugyanaz a hangsúly, mint az ábrákon volt */
body.learndash-cpt .trm-abra-zaro{
  margin:20px 0 0;
  padding:16px 20px;
  background:var(--navy-950);
  border:1px solid var(--navy-800);
  border-left:3px solid var(--ember);
  border-radius:var(--r-md);
  color:var(--paper);
  font-size:.96rem;
}
body.learndash-cpt .trm-abra-zaro strong{
  display:block;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin-bottom:.5em; font-weight:500;
}

@media (max-width:900px){
  .trm-abra{ padding:20px 18px 22px; margin:26px 0 28px }
  body.learndash-cpt ul.trm-abra-lista{ grid-template-columns:1fr !important; gap:14px }
}

/* Az ábra saját címe – ugyanaz a betű, mint a leckecímeké. */
body.learndash-cpt .trm-abra-fej{ margin:0 0 6px }
body.learndash-cpt .trm-abra-focim{
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.15rem,1.7vw,1.42rem);
  line-height:1.25; font-weight:600;
  color:var(--paper);
  margin:0 0 20px;
  padding:0 0 16px;
  border-bottom:1px solid var(--navy-800);
}
/* Két hasábnál a hasáb címe hordozza a színt – ahogy a képen is. */
body.learndash-cpt .trm-abra--ketto .trm-abra-elem--sky   .trm-abra-cim{ color:var(--sky) }
body.learndash-cpt .trm-abra--ketto .trm-abra-elem--ember .trm-abra-cim{ color:var(--ember) }
body.learndash-cpt .trm-abra--ketto .trm-abra-cim{ font-size:1.08rem; margin-bottom:.75em }
@media (max-width:900px){
  body.learndash-cpt .trm-abra-focim{ font-size:1.12rem; margin-bottom:16px; padding-bottom:13px }
}

/* --------------------------------------------------------------------------
   14. Webshop (body.trm-shop)
   A bolt, a kosár, a pénztár, a fiók és a jogi oldalak.

   Miért világos alapon: a Stripe a bankkártyamezőit világos felületre
   rajzolja. Sötét háttéren azok kilógnának a képből, és a pénztár az a hely,
   ahol a legkevésbé engedhetünk meg magunknak bizonytalanságot. Ugyanaz a
   márka, csak a nyitóoldal világos sávjának hangnemében.
   -------------------------------------------------------------------------- */
:root{
  --shop-bg:#F5F2EC;
  --shop-card:#FFFDF9;
  --shop-ink:#12202B;
  --shop-muted:#5C6B78;
  --shop-line:#E3DDD3;
}

body.trm-shop{
  background:var(--shop-bg);
  color:var(--shop-ink);
  font-family:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body.trm-shop .wp-site-blocks > main{ background:var(--shop-bg) }

body.trm-shop main .wp-block-group,
body.trm-shop .woocommerce,
body.trm-shop .wp-block-woocommerce-cart,
body.trm-shop .wp-block-woocommerce-checkout,
body.trm-shop .entry-content{
  max-width:var(--trm-maxw);
  margin-inline:auto;
}
body.trm-shop main{ padding:46px 28px 90px }

body.trm-shop h1,
body.trm-shop h2,
body.trm-shop h3,
body.trm-shop .wc-block-components-title,
body.trm-shop .product_title{
  font-family:'Fraunces',Georgia,serif;
  color:var(--shop-ink);
  font-weight:600; letter-spacing:-.01em; line-height:1.2;
}
body.trm-shop h1,
body.trm-shop .product_title{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin:0 0 .5em }
body.trm-shop h2{ font-size:clamp(1.4rem,2.2vw,1.85rem) }
body.trm-shop a{ color:var(--ember-deep) }
body.trm-shop a:hover{ color:var(--ember) }

/* Kenyérmorzsa és rendezés – halkabbra */
body.trm-shop .woocommerce-breadcrumb,
body.trm-shop .woocommerce-result-count{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--shop-muted);
}
body.trm-shop .woocommerce-breadcrumb a{ color:var(--shop-muted) }

/* Terméklista */
body.trm-shop ul.products{ gap:28px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
body.trm-shop ul.products::before,
body.trm-shop ul.products::after{ content:none }
body.trm-shop ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important;
  background:var(--shop-card);
  border:1px solid var(--shop-line);
  border-radius:var(--r-lg);
  padding:20px 20px 24px;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
}
body.trm-shop ul.products li.product:hover{ border-color:var(--ember); transform:translateY(-2px) }
body.trm-shop ul.products li.product img{ border-radius:var(--r-md); margin-bottom:16px }
body.trm-shop ul.products li.product .woocommerce-loop-product__title{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.12rem !important; line-height:1.25; font-weight:600;
  color:var(--shop-ink); padding:0; margin:0 0 8px;
}
body.trm-shop ul.products li.product .price,
body.trm-shop .woocommerce div.product p.price{
  color:var(--shop-ink) !important; font-weight:600;
  font-size:1.05rem; margin:0 0 16px;
}
body.trm-shop ul.products li.product .button{ margin-top:auto }

/* Gombok – ugyanaz a narancs, mint a nyitóoldalon */
body.trm-shop .woocommerce a.button,
body.trm-shop .woocommerce button.button,
body.trm-shop .woocommerce input.button,
body.trm-shop .woocommerce a.button.alt,
body.trm-shop .woocommerce button.button.alt,
body.trm-shop .wc-block-components-button:not(.is-link){
  background:var(--ember) !important;
  color:#20120A !important;
  border:1px solid var(--ember) !important;
  border-radius:999px !important;
  font-weight:600 !important;
  font-family:'IBM Plex Sans',sans-serif !important;
  padding:12px 22px !important;
  box-shadow:none !important;
  text-transform:none !important;
}
body.trm-shop .woocommerce a.button:hover,
body.trm-shop .woocommerce button.button:hover,
body.trm-shop .woocommerce a.button.alt:hover,
body.trm-shop .woocommerce button.button.alt:hover,
body.trm-shop .wc-block-components-button:not(.is-link):hover{
  background:var(--ember-deep) !important;
  border-color:var(--ember-deep) !important;
}
body.trm-shop .wc-block-components-button__text{ color:inherit }

/* Kosár és pénztár blokkok */
body.trm-shop .wc-block-components-sidebar,
body.trm-shop .wc-block-components-order-summary,
body.trm-shop .wp-block-woocommerce-cart-order-summary-block{
  background:var(--shop-card);
  border:1px solid var(--shop-line);
  border-radius:var(--r-lg);
  padding:22px 24px;
}
body.trm-shop .wc-block-components-product-name{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:var(--shop-ink);
}
body.trm-shop .wc-block-components-totals-item__label,
body.trm-shop .wc-block-components-totals-item__value{ color:var(--shop-ink) }
body.trm-shop .wc-block-components-checkout-step__title{
  font-family:'Fraunces',Georgia,serif; color:var(--shop-ink);
}
body.trm-shop .wc-block-components-checkout-step__description,
body.trm-shop .wc-block-components-text-input label{ color:var(--shop-muted) }

/* A pénztár űrlapmezőit szándékosan nem színezzük át: a Stripe a saját
   kártyamezőit ehhez a világos alaphoz igazítja. */

/* Fiókom */
body.trm-shop .woocommerce-MyAccount-navigation ul{ list-style:none; margin:0; padding:0 }
body.trm-shop .woocommerce-MyAccount-navigation li{ border-bottom:1px solid var(--shop-line) }
body.trm-shop .woocommerce-MyAccount-navigation li a{
  display:block; padding:11px 2px; text-decoration:none; color:var(--shop-ink); font-weight:500;
}
body.trm-shop .woocommerce-MyAccount-navigation li.is-active a{ color:var(--ember-deep) }

/* Értesítések */
body.trm-shop .woocommerce-message,
body.trm-shop .woocommerce-info,
body.trm-shop .woocommerce-error{
  background:var(--shop-card);
  border-top:3px solid var(--ember);
  border-radius:var(--r-md);
  color:var(--shop-ink);
}

/* Kosárszám a fejlécben */
.trm-ld-cart{ position:relative }
.trm-ld-cart-num{
  display:inline-block; min-width:19px; margin-left:7px; padding:1px 5px;
  border-radius:999px; background:var(--ember); color:#20120A;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:.7rem; font-weight:600; text-align:center; line-height:1.5;
}

@media (max-width:900px){
  body.trm-shop main{ padding:30px 4% 64px }
  body.trm-shop ul.products{ grid-template-columns:1fr; gap:20px }
}

/* --- 14b. A blokk-alapú terméklista (WooCommerce Product Collection) -------
   A bolt nem a régi rövidkódos sablont használja, hanem blokkokat: más
   osztálynevek, ugyanaz a forma. -------------------------------------------- */
body.trm-shop ul.wc-block-product-template,
body.trm-shop .wc-block-product-template{
  list-style:none; margin:0; padding:0;
  display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
body.trm-shop li.wc-block-product{
  background:var(--shop-card);
  border:1px solid var(--shop-line);
  border-radius:var(--r-lg);
  padding:18px 18px 22px;
  display:flex; flex-direction:column;
  transition:border-color .18s ease, transform .18s ease;
  text-align:left !important;
}
body.trm-shop li.wc-block-product:hover{ border-color:var(--ember); transform:translateY(-2px) }
body.trm-shop li.wc-block-product img{ border-radius:var(--r-md) }
body.trm-shop li.wc-block-product > *{ text-align:left !important }

body.trm-shop li.wc-block-product .wp-block-post-title{
  font-family:'Fraunces',Georgia,serif !important;
  font-size:1.1rem !important; line-height:1.28; font-weight:600;
  margin:14px 0 6px !important;
}
body.trm-shop li.wc-block-product .wp-block-post-title a{
  color:var(--shop-ink) !important; text-decoration:none;
}
body.trm-shop li.wc-block-product:hover .wp-block-post-title a{ color:var(--ember-deep) !important }

body.trm-shop .wc-block-components-product-price,
body.trm-shop .wc-block-components-product-price__value{
  color:var(--shop-ink) !important; font-weight:600; font-size:1rem;
}
body.trm-shop li.wc-block-product .wc-block-components-product-button{
  margin-top:auto; padding-top:16px;
}

/* Gombok a blokkos felületen – a téma fekete pirulája helyett a márkanarancs */
body.trm-shop .wc-block-components-product-button__button,
body.trm-shop .wp-block-button__link.wp-element-button,
body.trm-shop button.wp-element-button,
body.trm-shop a.wp-element-button{
  background:var(--ember) !important;
  background-color:var(--ember) !important;
  color:#20120A !important;
  border:1px solid var(--ember) !important;
  border-radius:999px !important;
  font-family:'IBM Plex Sans',sans-serif !important;
  font-weight:600 !important;
  padding:11px 20px !important;
  box-shadow:none !important;
  width:auto !important;
}
body.trm-shop .wc-block-components-product-button__button:hover,
body.trm-shop .wp-block-button__link.wp-element-button:hover,
body.trm-shop button.wp-element-button:hover,
body.trm-shop a.wp-element-button:hover{
  background:var(--ember-deep) !important;
  background-color:var(--ember-deep) !important;
  border-color:var(--ember-deep) !important;
  color:#20120A !important;
}

/* Rendezés és találatszám egy sorban, halkan */
body.trm-shop .wc-block-product-template__responsive-wrapper,
body.trm-shop .wp-block-woocommerce-product-collection-no-results{ margin-top:8px }
body.trm-shop .wc-block-product-sort-select select,
body.trm-shop .woocommerce-ordering select{
  background:var(--shop-card);
  border:1px solid var(--shop-line);
  border-radius:var(--r-md);
  padding:8px 12px;
  color:var(--shop-ink);
  font-family:'IBM Plex Sans',sans-serif;
}

/* A termékoldal galériája és összefoglalója */
body.trm-shop .wp-block-woocommerce-product-image-gallery img{ border-radius:var(--r-lg) }
body.trm-shop .wc-block-components-product-summary{ color:var(--shop-muted) }

/* --- 14c. Üres expressz-fizetés doboz elrejtése ----------------------------
   Ha az Apple Pay / Google Pay nem érhető el a látogató böngészőjében, a
   WooCommerce akkor is kirajzol egy üres keretet és egy „Vagy" elválasztót.
   Ez egy üres dobozt ígér, amiben nincs semmi – rosszabb, mintha ott sem
   lenne. Csak akkor mutatjuk, ha tényleg van benne gomb. -------------------- */
body.trm-shop .wc-block-components-express-payment:not(:has(button, iframe, [role="button"])),
body.trm-shop .wc-block-components-express-payment:not(:has(button, iframe, [role="button"])) + .wc-block-components-express-payment-continue-rule,
body.trm-shop .wp-block-woocommerce-checkout-express-payment-block:not(:has(button, iframe, [role="button"])){
  display:none !important;
}
body.trm-shop .wc-block-components-express-payment__title-container{ margin-bottom:10px }

/* A pénztár és a kosár doboza egységes kerettel */
body.trm-shop .wc-block-components-express-payment{
  border:1px solid var(--shop-line);
  border-radius:var(--r-lg);
  background:var(--shop-card);
}