/* ==========================================================
   SZOMBATI LEGAL - child theme egyedi CSS
   Fajl: wp-content/themes/szombati-legal/assets/css/szl-custom.css
   Eredet: Divi Kodreszlet v44 (2026-10-07) - innen koltozott a child theme-be.
   A Divi -> Kodreszletek alatti CSS-peldanyt az aktivalas es ellenorzes utan
   KI KELL KAPCSOLNI, kulonben minden szabaly ketszer fut.
   A lenti blokk-szamozas es changelog valtozatlan.
   ========================================================== */

/* ==========================================================
   SZOMBATI LEGAL - egyedi stilusok (v19)
   Header: demo meret + kompakt sticky navbar + lapos logo magassag-alapu meretezessel
           + nem kattinthato szulo menupont (Energiajog)
   v19: dropdown hover-hid javitas (lasd 1) HEADER / DROPDOWN HOVER-HID)
   v20: szerzo elrejtese az egyedi bejegyzes oldalon (5) BEJEGYZES META)
   v21: lenyilo szekciok + sorkizart elvalasztas az Energiajog oldalon (6) LENYILO SZEKCIOK)
   v22: vilagos nyil-link valtozat sotet hatteren (2) NYIL-LINK / --light)
   v23: Energiajog tartalomjegyzek 2x2 racs, egyforma magassagu kartyak (7) TARTALOMJEGYZEK)
   v24: horgonyok gorgetesi eltolasa a fix fejlec miatt + sima gorgetes (8) HORGONYOK)
   v27: automatikus elvalasztas kikapcsolva az ugyfel keresere (6) blokk)
   v28: header - nagyobb logo, egysegesitett kozepre igazitas, Divi 5 .et_menu_container szelektor,
        kompakt valtozat 981-1499px kozott; a korabbi balra tolo transform hack torolve (1) HEADER)
   v32: (a v28-ra epul, a header valtozatlan) fooldal hero video-hatter alulra igazitva (9) HERO HULLAM);
        blogcikkek sorkizarva, a v20-as szerzo-rejtes torolve (5) BLOG)
   v34: a sorkizaras inline style-lal megy a modulokban (ahogy a builder is irja), CSS nem kell hozza
   v35: hero hullam - Divi 5 szelektorra javitva (9) HERO HULLAM)
   v36: hero hullam - koztes fuggoleges pozicio szeles kepernyon (9) HERO HULLAM)
   v37: sticky header 70->84px, sticky logo 62->76px; a nyitott allapot valtozatlan (1) HEADER)
   v38: hero video CSS-alapu kitoltes (9); uj blokk: mobil/tablet - margo, oszloptordeles,
        hamburger 1280px alatt, telefonos cimsorok (10) MOBIL / TABLET)
   v40: logo kitolti a rendelkezesre allo helyet: a PNG atlatszo szegelyenek levagasa CSS-bol,
        a logo szelessege a menu melletti szabad helyhez igazodik (11) LOGO - KITOLTES);
        a v39-es clamp()-os meretezes ezzel kivaltva
   v41: logo levegosebb - kisebb felso hatar (nyitott 440, gorgetve 360, mobil 360px),
        a menutol valo tavolsag a szelesseggel no (32-64px) (11) LOGO - KITOLTES)
   v42: hamburger-menu 1280 -> 1440px ala (1280-1439px-en a teljes menu mellett a logo
        tul kicsi maradt); nagyobb hamburger-ikon (10) c) es (11) e))
   v43: fooldal hero sotetites a szoveg olvashatosagaert, statisztika-sor es blog-racs
        mobilon egymas alatt, logo-hamburger hezag keskeny ablakban (12) FOOLDAL; 11) d))
   v44: hero sotetites 0.5 -> 0.4 (12) a))
   child v1.1: blogcikk alcimek telefonon (13) BLOGCIKK CIMSOROK)
   Arculat: navy #0F2E5E | navy-deep #0A2148 | arany #C8A46A
            elefantcsont #F7F5F0 | vonal #E4DBCB
   ========================================================== */


/* ================= 1) HEADER ================= */

/* Feher sav + 1px also vonal, arnyek nelkul */
#main-header,
#main-header.et-fixed-header {
  background: #FFFFFF !important;
  box-shadow: none !important;
  border-bottom: 1px solid #E4DBCB !important;
  transition: height .28s ease, min-height .28s ease !important;
}

/* Kereso ikon nincs a demon */
#et_top_search,
.et_search_outer { display: none !important; }


@media only screen and (min-width: 981px) {

  /* ---------- NYITOTT / OLDAL TETEJE: demo 104 px ---------- */
  #main-header {
    height: 108px !important;
    min-height: 108px !important;
    padding: 0 !important;
  }

  /* KONTENER - egyseges mindket allapotban, kozepre igazitva.
     A Divi 5 a header belso tarolojat .et_menu_container-nek nevezi
     (a .container osztaly nem biztos, hogy rajta van), ezert mindket
     szelektor szerepel. A max-width szandekosan szelesebb a 1248px-es
     tartalomnal: a nagy logo + 7 menupont + CTA egy sorban csak igy fer el. */
  body.et_fullwidth_nav #main-header .container,
  #main-header .container.et_menu_container,
  #main-header .container,
  #main-header .et_menu_container {
    width: 100% !important;
    max-width: 1520px !important;
    height: 108px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transform: none !important;
    transition: height .28s ease !important;
  }

  #main-header .logo_container {
    position: static !important;
    width: auto !important;
    height: 108px !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    transition: height .28s ease !important;
  }

  /* Az uj, laposabb logo magassag-alapon meretezett.
     Igy tenylegesen kitolti a 104px-es header vizualis teret,
     mikozben az oldalarany vegig megmarad. */
  #main-header #logo {
    display: block !important;
    width: auto !important;
    height: 92px !important;
    max-width: none !important;
    max-height: 92px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    transition: height .28s ease, max-height .28s ease !important;
  }

  #et-top-navigation {
    float: none !important;
    height: 108px !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: height .28s ease !important;
  }

  #top-menu-nav {
    float: none !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  #top-menu {
    display: flex !important;
    align-items: center !important;
    gap: 28px !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: gap .28s ease !important;
  }

  #top-menu > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* CTA ugyanabban a flex-sorban; a 36px gap adja a tavolsagot. */
  #top-menu > li.cta-gomb {
    margin-left: 0 !important;
  }

  #top-menu > li > a {
    position: relative !important;
    display: block !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    border: 0 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    letter-spacing: 0 !important;
    color: #0F2E5E !important;
    opacity: 1 !important;
    white-space: nowrap !important;
    transition: color .2s ease, font-size .28s ease, line-height .28s ease, padding .28s ease !important;
  }

  #top-menu > li:not(.cta-gomb) > a:hover {
    color: #C8A46A !important;
    opacity: 1 !important;
  }

  #top-menu > li.current-menu-item:not(.cta-gomb) > a,
  #top-menu > li.current-menu-ancestor:not(.cta-gomb) > a {
    padding-bottom: 6px !important;
    border-bottom: 2px solid #C8A46A !important;
  }

  /* --- NEM KATTINTHATO SZULO (Energiajog) ---
     A menupont URL-je '#', csak lenyitja a dropdownt.
     Beallitas: Megjelenes > Menuk > Energiajog > URL = #
     Itt csak a kurzor es az aktiv-allapot igazodik hozza. */
  #top-menu > li.menu-item-has-children > a[href="#"],
  #top-menu > li.menu-item-has-children > a[href$="/#"] {
    cursor: default !important;
  }

  /* a szulo akkor is arany alahuzast kap, ha valamelyik gyereke az aktualis oldal */
  #top-menu > li.current-menu-parent:not(.cta-gomb) > a,
  #top-menu > li.current_page_parent:not(.cta-gomb) > a,
  #top-menu > li.current-menu-ancestor:not(.cta-gomb) > a {
    padding-bottom: 6px !important;
    border-bottom: 2px solid #C8A46A !important;
    color: #0F2E5E !important;
  }

  /* Divi sajat nyil ki */
  #top-menu li > a:after { display: none !important; }

  /* Sajat chevron: NEM absolute, hanem a szoveg utan inline-flexben.
     Igy sticky allapotban sem tud belecsuszni a feliratba. */
  #top-menu .menu-item-has-children > a:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding-right: 2px !important;
  }

  #top-menu .menu-item-has-children > a:first-child:after {
    content: '' !important;
    display: inline-block !important;
    position: static !important;
    flex: 0 0 11px !important;
    width: 11px !important;
    height: 7px !important;
    margin: 1px 0 0 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none'%3E%3Cpath d='M1 1L5.5 5.5L10 1' stroke='%230F2E5E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px 7px !important;
    font-family: inherit !important;
    transform: none !important;
  }

  /* Dropdown */
  #top-menu > li > ul.sub-menu {
    top: 38px !important;
    left: -18px !important;
    width: 290px !important;
    min-width: 290px !important;
    padding: 10px !important;
    background: #FFFFFF !important;
    border: 1px solid #E4DBCB !important;
    border-top: 1px solid #E4DBCB !important;
    border-radius: 4px !important;
    box-shadow: 0 18px 40px rgba(15,46,94,.16) !important;
  }

  #top-menu > li > ul.sub-menu li {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #top-menu > li > ul.sub-menu li a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 14px !important;
    white-space: normal !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: #0F2E5E !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 3px !important;
    opacity: 1 !important;
  }

  #top-menu > li > ul.sub-menu li a:hover,
  #top-menu > li > ul.sub-menu li.current-menu-item > a {
    background: #F7F5F0 !important;
    color: #0F2E5E !important;
  }

  /* CTA nyitott allapot */
  #top-menu > li.cta-gomb > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 26px !important;
    border: 1px solid #C8A46A !important;
    border-radius: 999px !important;
    background: #C8A46A !important;
    color: #0A2148 !important;
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 18px !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    transition: background .2s ease, border-color .2s ease, padding .28s ease, font-size .28s ease !important;
  }

  #top-menu > li.cta-gomb > a:hover {
    background: #B8925A !important;
    border-color: #B8925A !important;
    color: #0A2148 !important;
  }

  #top-menu > li.cta-gomb > a:after { display: none !important; }


  /* ---------- STICKY / GORGETES UTAN ---------- */
  #main-header.et-fixed-header {
    height: 84px !important;
    min-height: 84px !important;
    padding: 0 !important;
  }

  body.et_fullwidth_nav #main-header.et-fixed-header .container,
  #main-header.et-fixed-header .container.et_menu_container,
  #main-header.et-fixed-header .container,
  #main-header.et-fixed-header .et_menu_container {
    height: 84px !important;
  }

  #main-header.et-fixed-header .logo_container { height: 84px !important; }

  /* A lapos logo stickyben is szinte teljesen kitolti a 66px-es savot. */
  #main-header.et-fixed-header #logo {
    width: auto !important;
    height: 76px !important;
    max-width: none !important;
    max-height: 76px !important;
  }

  #main-header.et-fixed-header #et-top-navigation {
    height: 84px !important;
    padding: 0 !important;
  }

  /* Ne szukuljon ossze tulzottan a menu, mert az auto bal margó
     ilyenkor jobbra tolna az egesz navigaciot a logotol. */
  #main-header.et-fixed-header #top-menu { gap: 26px !important; }

  #main-header.et-fixed-header #top-menu > li > a {
    padding: 7px 2px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }

  #main-header.et-fixed-header #top-menu > li.current-menu-item:not(.cta-gomb) > a,
  #main-header.et-fixed-header #top-menu > li.current-menu-ancestor:not(.cta-gomb) > a,
  #main-header.et-fixed-header #top-menu > li.current-menu-parent:not(.cta-gomb) > a {
    padding-bottom: 5px !important;
  }

  #main-header.et-fixed-header #top-menu .menu-item-has-children > a:first-child {
    gap: 7px !important;
    padding-right: 2px !important;
  }

  #main-header.et-fixed-header #top-menu > li.cta-gomb > a {
    padding: 12px 24px !important;
    font-size: 15px !important;
    line-height: 18px !important;
  }

  /* ---------- DROPDOWN HOVER-HID (v19 javitas) ----------
     Hiba: a menupont doboza 34px magas nyitott allapotban (8px padding +
     18px line-height), stickyben csak 32px (7px padding), a lenyilo viszont
     mindket allapotban fix top: 38px-en all. A kozottuk levo 4-6px-es savon
     a kurzor sem a li, sem a sub-menu folott nincs -> a li:hover megszunik
     es a lenyilo eltunik. Stickyben nagyobb a res, ezert ott feltunobb.

     Megoldas:
       a) stickyben a lenyilo top-ja is kovesse az alacsonyabb menupontot,
          igy a vizualis res mindket allapotban egyforma 4px;
       b) hoverkor egy atlatszo, athidalo sav a menupont alatt, a lenyilo
          teljes szelessegeben - igy atlosan mozgatott kurzornal sem szakad
          meg a hover.

     FIGYELEM: a ::after left es width erteke szandekosan azonos a
     #top-menu > li > ul.sub-menu left (-18px) es width (290px) ertekevel.
     Ha azok valtoznak, ezt is at kell irni. */

  #top-menu > li.menu-item-has-children {
    position: relative !important;
  }

  #top-menu > li.menu-item-has-children:hover::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: -18px !important;
    width: 290px !important;
    height: 10px !important;
    background: transparent !important;
    pointer-events: auto !important;
  }

  /* stickyben a menupont 2px-szel alacsonyabb, ezert a lenyilo is 2px-szel
     feljebb kerul: 36px. */
  #main-header.et-fixed-header #top-menu > li > ul.sub-menu {
    top: 36px !important;
  }

  body.et_fixed_nav #page-container { padding-top: 108px !important; }

  /* ---------- KOMPAKT: 981-1499px (laptop) ----------
     Ilyen szelessegen a nagy logo + 7 menupont + CTA nem fer el egy sorban,
     ezert a logo, a hezagok es a betumeret aranyosan kisebb. */
  @media only screen and (max-width: 1499px) {
    #main-header .container, #main-header .et_menu_container { padding: 0 24px !important; }
    #main-header #logo { height: 74px !important; max-height: 74px !important; }
    #main-header.et-fixed-header #logo { height: 54px !important; max-height: 54px !important; }
    #top-menu, #main-header.et-fixed-header #top-menu { gap: 20px !important; }
    #top-menu > li > a, #main-header.et-fixed-header #top-menu > li > a { font-size: 14px !important; }
    #top-menu > li.cta-gomb > a, #main-header.et-fixed-header #top-menu > li.cta-gomb > a { padding: 11px 20px !important; font-size: 14px !important; }
  }
}


/* ---------- MOBIL: a nem kattinthato szulo se vigyen sehova ----------
   (v38: 980 -> 1279px, v42: -> 1439px, mert a hamburger-menu mar 1440px alatt megjelenik) */
@media only screen and (max-width: 1439px) {
  .et_mobile_menu li.menu-item-has-children > a[href="#"] { cursor: default; }
  .et_mobile_menu li a { font-family: 'Work Sans', sans-serif; color: #0F2E5E !important; }
  .et_mobile_menu { border-top: 2px solid #C8A46A !important; }
  .et_mobile_menu li.cta-gomb a {
    background: #C8A46A; color: #0A2148 !important;
    border-radius: 999px; text-align: center;
    margin: 10px 5%; font-weight: 600;
  }
}


/* ================= 2) ALTALANOS ================= */

#footer-bottom { display: none; }   /* Divi alap lablec-sav (Theme Builder footert hasznalunk) */
h1 { line-height: 1.25; }
h2 { line-height: 1.3; }

/* Nyilas link - MINDEN "Tovabb", "Osszes cikk", "Ismerje meg" es a blog "tovabb".
   Hasznalat: <a class="szl-arrow" href="...">Szoveg</a>  (a nyilat a CSS adja).
   A nyil SVG-maszk, igy a vastagsaga fuggetlen a betutipustol. */
.szl-arrow,
#main-content .et_pb_post a.more-link,
#main-content .et_pb_post .et_pb_post_more {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Work Sans', sans-serif; font-weight: 600;
  color: #0F2E5E !important; text-decoration: none !important;
  transition: color .2s;
}
.szl-arrow::after,
#main-content .et_pb_post a.more-link::after,
#main-content .et_pb_post .et_pb_post_more::after {
  content: "";
  width: 15px; height: 12px; flex: none;
  background: #C8A46A;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%206h12M8.5%201.5L13%206l-4.5%204.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2015%2012%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%206h12M8.5%201.5L13%206l-4.5%204.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  transition: transform .2s;
}
.szl-arrow:hover,
#main-content .et_pb_post a.more-link:hover,
#main-content .et_pb_post .et_pb_post_more:hover { color: #C8A46A !important; }
.szl-arrow:hover::after,
#main-content .et_pb_post a.more-link:hover::after,
#main-content .et_pb_post .et_pb_post_more:hover::after { transform: translateX(4px); }

/* --light valtozat: sotet (navy) hatteren, pl. az Energiajog hero
   tartalomjegyzeke. A nyil marad arany. Modositas: 2026-09 (v22) */
.szl-arrow--light { color: #FFFFFF !important; }
.szl-arrow--light:hover { color: #E7D5AE !important; }


/* ================= 3) BLOG kartyak =================
   A keret (1.5px arany, 4px), hatter, padding es a betutipusok a
   BLOG MODUL beallitasaiban vannak (Tervezes ful). Itt csak az, amit
   modulbol nem lehet: kep sarka, egyforma magassag, link alul. */
#main-content .et_pb_post .et_pb_image_container { margin: 0 0 20px !important; }
#main-content .et_pb_post .et_pb_image_container img { width: 100%; display: block; border-radius: 3px; }
#main-content .et_pb_post .post-meta,
#main-content .et_pb_post .entry-title,
#main-content .et_pb_post .post-content { padding-left: 14px; padding-right: 14px; }
#main-content .et_pb_post .entry-title { padding-bottom: 10px; }
#main-content .et_pb_post a.more-link,
#main-content .et_pb_post .et_pb_post_more { margin: 14px 14px 0; }

@media only screen and (min-width: 981px) {
  #main-content .et_pb_blog_grid .et_pb_salvattore_content,
  #main-content .et_pb_blog_grid > .et_pb_ajax_pagination_container > div { display: flex; flex-wrap: wrap; }
  #main-content .et_pb_blog_grid .column { display: flex; flex-direction: column; }
  #main-content .et_pb_post { display: flex; flex-direction: column; height: 100%; }
  /* a szoveg fent marad, csak a "tovabb" link ul a kartya aljan */
  #main-content .et_pb_post .post-content { display: flex; flex-direction: column; flex: 1; }
  #main-content .et_pb_post .post-content > p { margin: 0; }
  #main-content .et_pb_post .post-content a.more-link,
  #main-content .et_pb_post .post-content .et_pb_post_more { margin-top: auto; padding-top: 14px; }
}


/* ================= 4) TERKEPEK ================= */

/* Szurkearnyalatos Google terkep - Kapcsolat oldal es lablec.
   Hover-re visszaszinesedik, hogy interaktivnak hasson. */
.map-wrapper iframe,
.map-wrapper .et_pb_map {
  filter: grayscale(100%);
  transition: filter .3s ease;
}
.map-wrapper:hover iframe,
.map-wrapper:hover .et_pb_map { filter: grayscale(0%); }

/* Lablec terkep (Elerhetoseg hasab): sotet hatteren halvanyabb,
   hogy ne vonja el a figyelmet a kapcsolati adatokrol. */
.szl-footer-map iframe { filter: grayscale(100%) brightness(.82) contrast(1.05); }
.szl-footer-map:hover iframe { filter: grayscale(0%) brightness(1) contrast(1); }
@media only screen and (max-width: 980px) {
  .szl-footer-map iframe { height: 160px !important; }
}


/* ================= 5) BLOG ================= */

/* Blogcikkek torzse sorkizarva, az ugyfel keresere (2026-09).
   A szerzo megjelenik (Divi Theme Options > Layout > Author BE); a cikkek
   szerzoi dr. Szombati Zoltan es dr. Szombati Nora felhasznalok.
   A korabbi meta-sor rejtes (v20) torolve. Modositas: 2026-09 (v32) */

body.single-post .entry-content p,
body.single-post .entry-content li {
  text-align: justify;
}


/* ================= 6) LENYILO SZEKCIOK (Energiajog oldal) ================= */

/* Az egyoldalas Energiajog praxisleiras alszekcioi es a GYIK natív <details>
   elemekkel vannak lenyilova teve (Szoveg modulon belul, JS nelkul).
   A tartalom a DOM-ban marad, a kereso latja - csak vizualisan zart.
   Ha kesobb Divi Toggle modulra csereljuk, ez a blokk torolheto.
   Modositas: 2026-09 (v21) */

.szl-toggle {
  background: #FFFFFF;
  border: 1.5px solid #C8A46A;        /* kartya-szabvany */
  border-radius: 4px;
  margin: 0 0 10px;
}

.szl-toggle summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 52px 16px 20px;
}
.szl-toggle summary::-webkit-details-marker { display: none; }

.szl-toggle summary h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: #0F2E5E !important;
  text-align: left !important;
}

/* nyito/zaro jel jobb oldalon */
.szl-toggle summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 10px;
  font-family: 'Work Sans', sans-serif;
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  color: #C8A46A;
}
.szl-toggle[open] summary::after { content: '\2013'; }   /* en dash */
.szl-toggle[open] summary { border-bottom: 1px solid #E4DBCB; }

.szl-toggle__body { padding: 18px 20px 4px; }
.szl-toggle__body p:last-child,
.szl-toggle__body ul:last-child { margin-bottom: 14px; }

/* Automatikus elvalasztas: az ugyfel keresere (2026-09-17) KIKAPCSOLVA -
   a rovid, keskeny blokkokban (navy sav, kartyak) zavaro volt. Sorkizart
   bekezdeseknel emiatt a szokozok egyenetlenebbek lehetnek. (v27) */
.et_pb_text p,
.et_pb_text li,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4 {
  -webkit-hyphens: manual;
  hyphens: manual;
}

@media (max-width: 767px) {
  .szl-toggle summary { padding: 14px 44px 14px 16px; }
  .szl-toggle summary h3 { font-size: 18px !important; }
}

/* ================= 7) TARTALOMJEGYZEK (Energiajog oldal) ================= */

/* Az egyoldalas Energiajog ugromenuje: egy Szoveg modulban 4 kartya,
   2x2 racsban. Kartya-szabvany (elefantcsont, 1.5px arany, 4px sarok).
   A racs miatt az egy sorban levo kartyak egyforma magasak, a linkek
   pedig fuggolegesen egyenletesen toltik ki a kartyat (space-evenly),
   igy a rovidebb lista sem hagy ures helyet. Modositas: 2026-09 (v23) */

.szl-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  text-align: left;
}

.szl-toc__card {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 14px;
  min-height: 96px;
  padding: 22px 26px;
  background: #F7F5F0;
  border: 1.5px solid #C8A46A;
  border-radius: 4px;
}

.szl-toc__card .szl-arrow {
  display: flex;                  /* a nyil a sor vegen, a szoveg tordelhet */
  align-items: center;
  justify-content: space-between;
  font-size: 16.5px;
  line-height: 1.5;
  hyphens: manual;                /* linkszovegben ne valasszon el */
}
.szl-toc__card .szl-arrow::after { margin-left: 14px; }

@media (max-width: 767px) {
  .szl-toc { grid-template-columns: 1fr; gap: 14px; }
  .szl-toc__card { min-height: 0; padding: 18px 20px; }
}

/* ================= 8) HORGONYOK (oldalon beluli ugras) ================= */

/* A fejlec sticky (66px), ezert egy #horgonyra ugraskor a celelem a fejlec ala
   kerulne. A scroll-margin-top ennyivel lejjebb allitja meg a gorgetest.
   Erintett: fooldal "Szakterületeink" gomb -> #szakteruleteink,
   Energiajog tartalomjegyzek -> #szl-fejezet-1 ... #szl-gyik.
   Modositas: 2026-09 (v24) */

html { scroll-behavior: smooth; }

#main-content [id] {
  scroll-margin-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ================= 9) HERO HULLAM (fooldal) ================= */

/* A fooldal hero-szekciojanak video-hattere. Divi 5 DOM (5.11.1):
     .et_pb_section.et-pb-has-background-video
       > span.et-pb-background-video (absolute, a szekcio merete)
         > .mejs-container > .mejs-inner > .mejs-mediaelement > ... > video
   A Divi JS betolteskor pixelre meretezi a .mejs-containert, de ablak-
   atmeretezeskor nem mindig szamolja ujra -> kisebb ablakban a video nem
   fedi a szekciot (kek/szurke sav marad), visszanagyitva pedig elcsuszik.
   Ezert a JS meretezest CSS-sel felulirjuk: minden szint kitolti a
   szekciot, a video pedig "cover" modon toltodik, fuggolegesen 75%-nal
   rogzitve (a hullam a video also feleben van). Barmilyen atmeretezesnel
   azonnal helyes, JS nelkul.
   Modositas: 2026-09 (v38; a v35-v37 bottom-rogzites kivaltva) */

body.page-id-16 .et_pb_section_0 .et-pb-background-video .mejs-container,
body.page-id-16 .et_pb_section_0 .et-pb-background-video .mejs-inner,
body.page-id-16 .et_pb_section_0 .et-pb-background-video .mejs-mediaelement,
body.page-id-16 .et_pb_section_0 .et-pb-background-video mediaelementwrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

body.page-id-16 .et_pb_section_0 .et-pb-background-video video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: 50% 75% !important;
}

/* ================= 10) MOBIL / TABLET ================= */

/* Az ugyfel visszajelzese alapjan (2026-09-29), elo meres utan:
   a) OLDALMARGO: a sorok 100% szelesek (max 1248px), ezert 1248px alatt a
      szoveg az ablak szeleig ert. 1300px alatt 24px, telefonon 20px margo
      marad mindket oldalon (a Blog sablon is igy viselkedik).
   b) OSZLOPOK: az "egyforma oszlopok" sorok (kartyak, Kapcsolat info-kartyak,
      Szakteruleteink) flex-wrap: nowrap beallitasuak, ezert telefonon is
      egymas mellett maradtak (kb. 80px szeles oszlopok). 980px alatt
      tordelnek: tableten a 3-4 oszlopos sorok 2-esevel, telefonon 1-esevel.
   c) MENU: a teljes menu (logo + 7 pont + CTA) kb. 1260px-t igenyel, ezert
      tableten (1024-1180px) a Kapcsolatfelvetel kilogott. 1280px alatt a
      hamburger-menu jelenik meg (a Divi sajat mobil menuje).
   d) CIMSOROK: telefonon a desktop betumeretek tul nagyok, arányosan kisebbek.
   Modositas: 2026-09 (v38) */

/* a) oldalmargo */
@media only screen and (max-width: 1300px) {
  #page-container .et_pb_row,
  .et-l--footer .et_pb_row {
    width: calc(100% - 48px) !important;
    max-width: 1248px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media only screen and (max-width: 767px) {
  #page-container .et_pb_row,
  .et-l--footer .et_pb_row {
    width: calc(100% - 40px) !important;
  }
}

/* b) oszlopok tordelese */
@media only screen and (max-width: 980px) {
  #page-container .et_pb_row,
  .et-l--footer .et_pb_row {
    flex-wrap: wrap !important;
    row-gap: 24px !important;
  }
  #page-container .et_pb_row > .et_pb_column,
  .et-l--footer .et_pb_row > .et_pb_column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  #page-container .et_pb_row:has(> .et_pb_column:nth-child(3)) {
    column-gap: 24px !important;
  }
  #page-container .et_pb_row:has(> .et_pb_column:nth-child(3)) > .et_pb_column {
    flex: 0 0 calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
  }
}

/* c) hamburger-menu 981-1439px kozott is (v42: 1279 -> 1439px, a logo miatt) */
@media only screen and (min-width: 981px) and (max-width: 1439px) {
  #main-header #top-menu-nav { display: none !important; }
  #main-header #et_mobile_nav_menu { display: block !important; }
  #main-header #et-top-navigation { justify-content: flex-end !important; }
  #main-header .et_mobile_menu { top: 100% !important; }
}

/* hamburger ikon navy minden meretben (Divi alap: kek #2ea3f2) */
#main-header .mobile_nav .mobile_menu_bar:before { color: #0F2E5E !important; }

/* d) cimsorok telefonon */
@media only screen and (max-width: 767px) {
  #page-container .et_pb_text h1 { font-size: 32px !important; line-height: 1.2 !important; }
  #page-container .et_pb_text h2 { font-size: 26px !important; line-height: 1.25 !important; }
  #page-container .et_pb_text h3 { font-size: 20px !important; }
  #page-container .et_pb_text h4 { font-size: 21px !important; }
}



/* ================= 11) LOGO - KITOLTES ================= */
/* OK: a logo PNG-je (Secondary-logo_szines.png, 1801x462) minden oldalon 150px
   atlatszo szegelyt tartalmaz, a tenyleges logo csak 1501x164 - a kepdoboz
   magassaganak ~35%-a. Ezert latszott a logo mindig kicsinek.
   MEGOLDAS:
   - a kep 120%-os szelessegu, negativ margoval: a szegely kilog es nem foglal
     helyet, a link doboza pontosan a tenyleges logo meretu lesz
     (%-os margo a szulo SZELESSEGEHEZ viszonyit - fuggolegesen is -, ezert
     aranyosan skalazodik; 150/1501 = 9.994%, alul 148/1501 = 9.861%)
   - a logo-tarolo flex-elem: kitolti a menu melletti szabad helyet (a menu nem
     zsugorodik), egy felso hataron belul.
   !! HA A LOGO FAJLT LECSERELIK (szegely nelkuli / SVG), EZ A BLOKK a) RESZE
      TOROLHETO/ATIRANDO - kulonben a vagas a logobol is levagna.
   Finomhangolas: a max-width ertekek (nyitott / gorgetett / mobil). */

/* a) a szegely levagasa - minden meretben */
html body #main-header .logo_container #logo {
  display: block !important;
  width: 119.987% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: -9.994% -9.994% -9.861% -9.994% !important;
  object-fit: fill !important;
  transform: none !important;
}

/* b) desktop + hamburger-sav: a logo kitolti a szabad helyet */
@media only screen and (min-width: 981px) {
  /* nagy kepernyon szelesebb header-kontener -> tobb hely a logonak */
  body.et_fullwidth_nav #main-header .container,
  #main-header .container.et_menu_container,
  #main-header .et_menu_container { max-width: 1760px !important; }

  #main-header .logo_container,
  #main-header.et-fixed-header .logo_container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 440px !important;       /* nyitott: logo max. 440x48px -> 30px levego fent/lent */
    margin-right: clamp(32px, calc(8vw - 70px), 64px) !important; /* hezag a menuig: 1440px-en 45, 1680px+ 64 */
    transition: max-width .28s ease !important;
  }
  #main-header.et-fixed-header .logo_container {
    max-width: 360px !important;       /* gorgetve: max. 360x39px -> 22px levego (84px-es sav) */
  }
  #main-header .logo_container .logo_helper { display: none !important; }
  #main-header .logo_container > a {
    display: block !important;
    width: 100% !important;
    line-height: 0 !important;
  }
  #main-header #et-top-navigation { flex: 0 0 auto !important; }
}

/* c) 1500-1699px: a kompakt menu (14px, 20px hezag) marad, kulonben a nagyobb
      menu ebben a savban kisebbre szoritana a logot, mint 1499px-en */
@media only screen and (min-width: 1500px) and (max-width: 1699px) {
  #main-header .container, #main-header .et_menu_container { padding: 0 24px !important; }
  #top-menu, #main-header.et-fixed-header #top-menu { gap: 20px !important; }
  #top-menu > li > a, #main-header.et-fixed-header #top-menu > li > a { font-size: 14px !important; }
  #top-menu > li.cta-gomb > a, #main-header.et-fixed-header #top-menu > li.cta-gomb > a { padding: 11px 20px !important; font-size: 14px !important; }
}

/* d) tablet es telefon (Divi mobil fejlec): a hamburger mellett a teljes szelesseg */
@media only screen and (max-width: 980px) {
  #main-header .logo_container > a {
    display: inline-block !important;
    vertical-align: middle !important;
    width: min(calc(100% - 76px), 360px) !important; /* v43: 100vw helyett 100% - asztali
       gepen a gorgetosav miatt a 100vw szelesebb, es a logo osszeert a hamburgerrel */
    line-height: 0 !important;
  }
}

/* e) hamburger-ikon: nagyobb, jobban kattinthato (Divi alap: 32px)
      v42 - ugyfel-visszajelzes: tul kicsi volt */
@media only screen and (max-width: 1439px) {
  #main-header .mobile_nav .mobile_menu_bar:before {
    font-size: 44px !important;
    line-height: 1 !important;
  }
}
/* hamburger-savban (981-1439px) a Divi alap 24px also padding felfele tolta az ikont */
@media only screen and (min-width: 981px) and (max-width: 1439px) {
  #main-header .mobile_nav .mobile_menu_bar { padding-bottom: 0 !important; }
}
/* tablet/telefon: az ikon fuggolegesen a logo kozepere, a fejlec magassaga valtozatlan */
@media only screen and (max-width: 980px) {
  #main-header .mobile_nav .mobile_menu_bar {
    padding: 0 0 20px !important;
    margin-top: -4px !important;
  }
}
@media only screen and (max-width: 767px) {
  #main-header .mobile_nav .mobile_menu_bar:before { font-size: 40px !important; }
}


/* ================= 12) FOOLDAL - HERO, STATISZTIKA, BLOG ================= */
/* Ugyfel-visszajelzes 2026-09-30. Osztalyok a Fooldal (ID 16) importjaban:
   .szl-hero (hero szekcio), .szl-hero-stats (17+ ev / HU-DE-EN / szakteruletek oszlop) */

/* a) HERO SOTETITES
   Ok: a szekcio navy szinatmenete a hatterben a VIDEO ALATT van (a Divi 5 a videot a
   hatter fole teszi), ezert a szoveg kozvetlenul a vibralo hullamon ult.
   Megoldas: 40%-os fekete reteg (v43: 50%, v44: 40%) a videora, a sorok folotte. Erosseg: az rgba utolso erteke. */
.et_pb_section.szl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, .4);
}
.et_pb_section.szl-hero > .et_pb_row {
  position: relative;
  z-index: 2;
}

/* b) STATISZTIKA-SOR tableten es telefonon: egymas alatt, elvalaszto vonalak nelkul
      (980px alatt mar nem fer ki egy sorba, a tores pedig a vonalat a sor elejere tette) */
@media only screen and (max-width: 980px) {
  .et_pb_column.szl-hero-stats {
    flex-direction: column !important;
    align-items: flex-start !important;
    row-gap: 18px !important;
  }
  .et_pb_column.szl-hero-stats > .et_pb_module {
    padding-left: 0 !important;
    border-left: 0 !important;
  }
}

/* c) BLOG-RACS telefonon: 1 oszlop (a Divi 5 blog-racs fix 3 oszlopos maradt) */
@media only screen and (max-width: 767px) {
  #page-container .et_pb_blog .et_pb_blog_posts.et_grid_module {
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
  }
}


/* ================= 13) BLOGCIKK CIMSOROK ================= */
/* Ugyfel-visszajelzes 2026-10-07: telefonon a blogcikkek alcimei osszezsugorodtak.
   Ok: a Divi alap szabalya - @media (max-width:479px) { .et_pb_post h2 { font-size:16px } } -
   a blogracs kartyacimeihez keszult, de az egyedi bejegyzes oldalan a teljes cikk is
   .et_pb_post osztalyt kap, igy a cikk H2 alcimei 16px-esek lettek (kisebbek a H3-nal).
   Megoldas: a cikk tartalmaban a H2 meret visszaallitasa, a H3 sormagassaga 1.0 -> 1.3. */
body.single .et_pb_post .entry-content h2 {
  font-size: 26px !important;
  line-height: 1.3 !important;
}
body.single .et_pb_post .entry-content h3 {
  line-height: 1.3 !important;
}
@media only screen and (max-width: 479px) {
  body.single .et_pb_post .entry-content h2 { font-size: 24px !important; }
}