/*
Theme Name: Eco Horizont
Theme URI: https://www.ecohorizont.hu/
Author: Rick (marveen)
Description: Az ecohorizont.hu Webnode-os kinezetenek atultetese sajat WordPress-temaba. Minden ertek MERT: a szinek, betuk es meretek a jelenlegi elo oldal szamitott stilusaibol (getComputedStyle) jottek, nem szemre.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: proprietary
Text Domain: ecohorizont
*/

/* ==========================================================================
   BETUK -- sajat kiszolgalasbol, nem Google-rol.
   Metropolis: a cimsorok betuje a jelenlegi oldalon (a Webnode CDN-jerol hoztuk le).
   Open Sans:  a menu es a szoveg betuje. A latin-ext ALTALTOZAT KELL a magyar o/u
               karakterekhez -- a sima latin subsetben nincs benne, es tofejek lennenek.
   ========================================================================== */
/* A 100-as (thin) es 200-as vagat KELL: a Webnode a lap-torzsben levo nagy cimsorokat
   52 pixeles, 100-as sulyu Metropolisszal szedi (megmerve az elo oldalon). Ha csak a
   400-800 vagatokat kotnenk be, a bongeszo a 400-asat huzna ra, es a vekony, levegos
   cimsorbol tomor, kover cim lenne -- ez volt a legszembetunobb elteres az elso koreben. */
@font-face { font-family: Metropolis; font-weight: 100; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-100.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 200; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-200.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 400; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-400.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 500; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-500.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 600; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-600.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 700; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-700.woff2) format('woff2'); }
@font-face { font-family: Metropolis; font-weight: 800; font-style: normal; font-display: swap;
  src: url(betuk/metropolis-800.woff2) format('woff2'); }

@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap;
  src: url(betuk/open-sans-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap;
  src: url(betuk/open-sans-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap;
  src: url(betuk/open-sans-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap;
  src: url(betuk/open-sans-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap;
  src: url(betuk/open-sans-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap;
  src: url(betuk/open-sans-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

/* ==========================================================================
   TOKENEK -- mind mert ertek az elo oldalrol.
   ========================================================================== */
:root {
  --eh-zold: #69b33b;              /* rgb(105,179,59) -- a lap kiemelo szine */
  --eh-zold-sotet: #55942e;
  --eh-szoveg: #666666;            /* rgb(102,102,102) -- a leggyakoribb szovegszin (380 elem) */
  --eh-cim: #393939;               /* rgb(57,57,57) -- cimsorok es menu */
  --eh-halvany: #9d9d9d;           /* rgb(157,157,157) */
  --eh-hatter: #ffffff;
  --eh-sav: #f7f7f7;               /* a valtakozo szekcio-hatter */
  --eh-vonal: #e8e8e8;
  --eh-arnyek: rgba(0, 0, 0, .5);  /* a hero kepre kerulo atlatszo rateg */

  --eh-szeles: 1280px;             /* a szoveg-blokk 1267 px volt 1440-es nezetben */
  --eh-oldal-padding: 24px;
  --eh-fejlec-magas: 170px;        /* mert fejlec-magassag */
}

/* ==========================================================================
   ALAP
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;                /* mert: 25.6px / 16px */
  color: var(--eh-szoveg);
  background: var(--eh-hatter);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--eh-szoveg); text-decoration: none; }
a:hover { color: var(--eh-zold); }
main a:not(.eh-gomb) { text-decoration: underline; text-decoration-color: var(--eh-vonal); text-underline-offset: 3px; }
main a:not(.eh-gomb):hover { text-decoration-color: var(--eh-zold); }

h1, h2, h3, h4, h5, h6 {
  font-family: Metropolis, 'Open Sans', sans-serif;
  color: var(--eh-cim);
  margin: 0 0 .6em;
  line-height: 1.25;
}
h1 { font-size: 38px; font-weight: 700; }     /* mert */
/* A torzsben levo nagy cimsor. MERT ertek az elo oldalrol: 52px, font-weight 100,
   line-height 1.3, szin #393939. A migracio soran a Webnode h1-eit h2-re fokoztam le
   (egy lapon egy h1 legyen), tehat ez a stilus az o helyukre lep. */
h2 { font-size: clamp(28px, 3.7vw, 52px); font-weight: 100; line-height: 1.3; }
h3 { font-size: 19px; font-weight: 600; }     /* mert */
h4 { font-size: 17px; font-weight: 600; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.4em; }
li { margin-bottom: .35em; }
hr { border: 0; border-top: 1px solid var(--eh-vonal); margin: 2.4em 0; }
blockquote { margin: 1.6em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--eh-zold); color: var(--eh-cim); }

.eh-burok { max-width: var(--eh-szeles); margin: 0 auto; padding: 0 var(--eh-oldal-padding); }

/* ==========================================================================
   FELSO SAV (email + telefon, jobbra zarva) -- a mostani oldalon is ez van legfelul
   ========================================================================== */
.eh-felso {
  border-bottom: 1px solid var(--eh-vonal);
  font-size: 13px;
  color: var(--eh-cim);
}
.eh-felso .eh-burok { display: flex; justify-content: flex-end; gap: 26px; align-items: center; min-height: 40px; }
.eh-felso a { color: var(--eh-cim); text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 7px; }
.eh-felso a:hover { color: var(--eh-zold); }
.eh-felso svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--eh-halvany); }

/* ==========================================================================
   FEJLEC: logo balra, menu jobbra
   ========================================================================== */
.eh-fejlec { background: var(--eh-hatter); }
.eh-fejlec .eh-burok { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 130px; }
/* A logo FIX szelessegu es NEM zsugorodik. Ezen egyszer elhasaltam: a fejlec flex-tarolo,
   es amikor a menu tul hosszu volt, a bongeszo a logot huzta ossze 284-rol 168 pixelre --
   nem a menu tort at. A `flex: 0 0 auto` ezt zarja ki. */
.eh-logo { flex: 0 0 auto; }
.eh-logo img { width: 284px; max-width: 284px; height: auto; }   /* mert logo-meret */
.eh-logo .eh-nev { font-family: Metropolis, sans-serif; font-size: 26px; font-weight: 700; color: var(--eh-cim); }

.eh-menu { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.eh-menu > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: flex-end; }
.eh-menu ul { list-style: none; margin: 0; padding: 0; }
.eh-menu li { margin: 0; position: relative; }
.eh-menu a {
  font-size: 13px; font-weight: 500; color: var(--eh-cim);   /* mert menu-stilus */
  padding: 8px 0; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.eh-menu a:hover, .eh-menu .current-menu-item > a, .eh-menu .current_page_item > a { color: var(--eh-zold); }
/* Legordulo: a Webnode is nyilat rak a szulo-tetelekhez. */
.eh-menu .menu-item-has-children > a::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-left: 3px;
}
.eh-menu ul ul {
  position: absolute; top: 100%; left: -18px; min-width: 250px; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--eh-vonal); box-shadow: 0 8px 24px rgba(0,0,0,.09);
  padding: 8px 0; display: none; z-index: 60;
}
.eh-menu li:hover > ul, .eh-menu li:focus-within > ul { display: flex; }
.eh-menu ul ul a { padding: 9px 18px; display: block; font-size: 13.5px; }
.eh-menu ul ul ul { top: -9px; left: 100%; }
.eh-menu ul ul .menu-item-has-children > a::after { transform: rotate(-45deg); float: right; margin-top: 6px; }

/* Mobil-menu: reszlet nelkul is mukodjon (details/summary, JS nem kell). */
.eh-mobil { display: none; }
.eh-mobil summary { list-style: none; cursor: pointer; padding: 10px; }
.eh-mobil summary::-webkit-details-marker { display: none; }
.eh-mobil .eh-vonalak, .eh-mobil .eh-vonalak::before, .eh-mobil .eh-vonalak::after {
  display: block; width: 24px; height: 2px; background: var(--eh-cim); content: ''; position: relative;
}
.eh-mobil .eh-vonalak::before { top: -7px; } .eh-mobil .eh-vonalak::after { top: 5px; }

/* ==========================================================================
   HERO: kep + rateg + kozepre zart, feher cim
   ========================================================================== */
.eh-hero {
  min-height: 300px;                       /* mert hero-magassag */
  display: flex; align-items: center; justify-content: center;
  position: relative; background: var(--eh-cim) center / cover no-repeat;
  padding: 60px var(--eh-oldal-padding);
}
.eh-hero::after { content: ''; position: absolute; inset: 0; background: var(--eh-arnyek); }
.eh-hero h1 {
  position: relative; z-index: 1; margin: 0; text-align: center;
  color: rgba(255, 255, 255, .88);         /* mert: rgba(255,255,255,.8) */
  font-size: clamp(26px, 4vw, 38px); font-weight: 700;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.eh-hero--sima { min-height: 0; padding: 54px var(--eh-oldal-padding) 0; background: none; }
.eh-hero--sima::after { display: none; }
.eh-hero--sima h1 { color: var(--eh-cim); text-shadow: none; }

/* ==========================================================================
   TARTALOM
   ========================================================================== */
.eh-tartalom { padding: 54px 0 72px; }
.eh-tartalom > .eh-burok > *:first-child { margin-top: 0; }
/* A Webnode-bol atvett szoveg-igazitas. Ezt a szamitott `text-align`-bol mertem ki
   oldalankent, nem osztaly-nevbol -- a Webnode `wnd-align-center` osztalya csak az egyik
   ut, ahogy kozepezni lehet. */
.eh-tartalom .eh-kozep { text-align: center; }
.eh-tartalom .eh-jobb { text-align: right; }
.eh-tartalom figure { margin: 1.8em 0; }
.eh-tartalom figcaption { font-size: 13.5px; color: var(--eh-halvany); margin-top: .5em; text-align: center; }
.eh-tartalom table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.eh-tartalom th, .eh-tartalom td { border: 1px solid var(--eh-vonal); padding: 10px 12px; text-align: left; }
.eh-tartalom th { background: var(--eh-sav); color: var(--eh-cim); font-weight: 600; }
/* A szeles tablazat NE feszitse szet a lapot mobilon. */
.eh-tabla-csusz { overflow-x: auto; }

/* Galeria: a Webnode is racsba rendezi a fotokat. */
.eh-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 1.8em 0; }
.eh-galeria figure { margin: 0; }
.eh-galeria img { width: 100%; height: 230px; object-fit: cover; border-radius: 2px; }

.eh-gomb {
  display: inline-block; background: var(--eh-zold); color: #fff !important;
  padding: 13px 30px; border-radius: 2px; font-size: 14px; font-weight: 600;
  text-decoration: none !important; border: 0; cursor: pointer;
}
.eh-gomb:hover { background: var(--eh-zold-sotet); color: #fff !important; }

/* ==========================================================================
   LABLEC
   ========================================================================== */
.eh-lablec { background: var(--eh-sav); border-top: 1px solid var(--eh-vonal); padding: 40px 0; font-size: 14px; }
.eh-lablec .eh-burok { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.eh-lablec a { text-decoration: underline; text-underline-offset: 2px; }
.eh-lablec-menu { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width: 980px) {
  .eh-menu { display: none; }
  .eh-mobil { display: block; }
  .eh-fejlec .eh-burok { min-height: 88px; }
  .eh-logo img { width: 200px; }
  .eh-mobil[open] .eh-mobil-lap {
    position: absolute; left: 0; right: 0; background: #fff; border-top: 1px solid var(--eh-vonal);
    box-shadow: 0 12px 28px rgba(0,0,0,.1); padding: 8px 0; z-index: 70; max-height: 74vh; overflow-y: auto;
  }
  .eh-mobil-lap ul { list-style: none; margin: 0; padding: 0; }
  .eh-mobil-lap li { border-bottom: 1px solid var(--eh-vonal); }
  .eh-mobil-lap li:last-child { border-bottom: 0; }
  .eh-mobil-lap a { display: block; padding: 12px var(--eh-oldal-padding); font-size: 15px; color: var(--eh-cim); }
  .eh-mobil-lap ul ul a { padding-left: calc(var(--eh-oldal-padding) + 18px); color: var(--eh-szoveg); font-size: 14px; }
  .eh-fejlec { position: relative; }
  .eh-felso .eh-burok { justify-content: center; gap: 16px; font-size: 12px; flex-wrap: wrap; }
  h1 { font-size: 28px; } h2 { font-size: 22px; }
  .eh-galeria img { height: 180px; }
}