/* Egészségkonyha kezdőlap – mobil először, asztalon kiterül */
:root {
  --zold: #15803d;
  --zold-sotet: #0f5f2e;
  --zold-mely: #0f3d22;
  --zold-halvany: #f1f7f2;
  --zold-kep: #ddebdf;
  --tinta: #14261a;
  --halk: #3f5146;
  --vonal: #e3ece5;
  --vonal-eros: #cfddd2;
  --narancs: #c2410c;
  --narancs-hatter: #fff4e8;
  --narancs-vonal: #f5d9bc;
  --narancs-szoveg: #7a2a08;
  --sugar: 16px;
  /* 🔴 A BETŰTÍPUS a webhely saját betűje (felhasználói kérés, 2026-10-11): a lap a
   `landing_fonts` blokkot a `partials/inter_font.html`-re cseréli, ami — a nevével
   ellentétben, mérve — **Lora**-t tölt, és azt teszi az `--app-font`-ba. Így a
   kezdőlap ugyanúgy néz ki, mint a webhely többi lapja.

   Előzmény: a kapott csomag két ÚJ családot (Bricolage Grotesque + Manrope) húzott
   volna be BLOKKOLÓ stylesheettel; azt kivettem, és először a `landing_base`
   lovable-fontjait (Plus Jakarta Sans + DM Sans) használtuk. Most azok HELYETT megy
   a Lora — nem melléjük, különben a lap két készletet kérne le fölöslegesen. */
  --cim-font: var(--app-font, Georgia, 'Times New Roman', serif);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #fff;
  color: var(--tinta);
  font-family: var(--app-font, Georgia, 'Times New Roman', serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--zold); }
a:hover { color: var(--zold-sotet); }
h1, h2 { font-family: var(--cim-font); font-weight: 800; margin: 0; }
h2 { font-size: 26px; letter-spacing: -0.4px; margin-bottom: 16px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.tarto { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Fejléc */
.fejlec { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--vonal); }
.fejlec-sor { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.logo { display: flex; align-items: center; text-decoration: none; color: var(--zold); }
/* A kép a MAGASSÁGÁVAL van méretezve, a szélesség abból adódik — így a logó
   arányai akkor sem torzulnak, ha egyszer más képfájl kerül a helyére. */
.logo-kep { height: 40px; width: auto; display: block; }
.gomb-kicsi { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--vonal-eros); color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 14px; }

/* Gombok */
.gomb { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: 17px; padding: 0 20px; }
.gomb-fo { background: var(--zold); color: #fff; }
.gomb-fo:hover { background: var(--zold-sotet); color: #fff; }
.gomb-masod { background: #fff; color: var(--zold-sotet); border: 1.5px solid var(--zold); }
.gomb-sor { display: flex; flex-wrap: wrap; gap: 10px; }
.gomb-sor .gomb-fo { flex: 1 1 220px; }
.gomb-sor .gomb-masod { flex: 1 1 160px; }

/* Nyitókép */
.hos { background: var(--zold-halvany); }
.hos-belso { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; padding-bottom: 32px; }
.hos-szoveg { display: flex; flex-direction: column; gap: 18px; }
.cimke { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--vonal-eros); border-radius: 20px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--zold-sotet); }
.hos h1 { font-size: 36px; line-height: 1.08; letter-spacing: -0.8px; }
.hos-lead { font-size: 17px; color: var(--halk); }
.hos-kep { width: 100%; height: 210px; border-radius: 18px; object-fit: cover; }
.ar-cimke { align-self: flex-start; margin: 0; font-size: 15px; font-weight: 700; color: var(--zold-sotet); }
.ar-cimke span { color: var(--narancs); white-space: nowrap; }

.kep-hely { background: var(--zold-kep); border: 2px dashed #9dbca4; color: #2f4a37; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }

/* Határidő-sáv */
.hatarido { background: var(--narancs-hatter); border-top: 1px solid var(--narancs-vonal); border-bottom: 1px solid var(--narancs-vonal); }
.hatarido-sor { display: flex; align-items: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.hatarido-ikon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--narancs); display: flex; align-items: center; justify-content: center; }
.hatarido strong { display: block; font-size: 15px; color: var(--narancs-szoveg); }
.hatarido span { font-size: 14px; color: #5c3b22; }

/* Bizalmi sáv — „rólunk számokban”. Üres adatnál a sablon ki sem írja. */
.bizalom { background: var(--zold-halvany); border-bottom: 1px solid var(--vonal); }
.bizalom-sor { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; padding-top: 18px; padding-bottom: 18px; }
.bizalom-sor li { display: flex; flex-direction: column; gap: 2px; }
.bizalom-sor strong { font-family: var(--cim-font); font-size: 26px; line-height: 1.1; color: var(--zold-sotet); }
.bizalom-sor span { font-size: 13px; color: var(--halk); }

/* Szakaszok és rácsok */
.szakasz { padding-top: 32px; padding-bottom: 8px; }
.racs-4, .racs-3, .racs-2 { display: grid; gap: 12px; }
.racs-4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.racs-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.racs-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.halk { color: var(--halk); font-size: 15px; margin-bottom: 14px; }
.cim-sor { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.szoveg-link { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; }

.elonyok li { background: var(--zold-halvany); border-radius: var(--sugar); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.elonyok strong { font-size: 15px; }
.elonyok span { font-size: 14px; color: var(--halk); }

.lepesek li { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 16px; }
.lepesek .szam { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--zold); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.lepesek div { display: flex; flex-direction: column; gap: 2px; }
.lepesek div span { font-size: 14px; color: var(--halk); }

.etrendek { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.etrend-kartya { height: 100%; display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); border: 1px solid var(--vonal); border-radius: var(--sugar); overflow: hidden; }
.etrend-kartya:hover { color: var(--tinta); border-color: var(--zold); }
.etrend-kep { height: 110px; border: 0; font-size: 12px; }
img.etrend-kep { width: 100%; object-fit: cover; }
.etrend-szoveg { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.etrend-szoveg strong { font-size: 15px; }
.etrend-szoveg span { font-size: 13px; color: var(--halk); }
/* ⚠️ A tartalékot INLINE `style`-lal rejtjük, nem `:has()`-sal: a `:has()` régebbi
   Safarikban nem működik, és ott mindkét kép látszana. A szerver dönti el, kell-e
   rejteni; az `onerror` pedig egy sorral előhozza. */

/* A következő rendelhető nap fogása — a kategória-cím alatt, kiemelve, mert ez a
   konkrét, ma is igaz információ; a kategória-szöveg alatta állandó. */
.etrend-szoveg .etrend-napi { color: var(--zold-sotet); font-weight: 600; font-size: 13.5px; }

/* Pipás ígéret-listák. A pipa CSS-ből jön (`::before`), nem a szövegbe írt
   karakterként: így a felolvasó nem olvassa fel minden sor előtt, és a szöveg
   tisztán szerkeszthető marad. */
.pipak { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pipak li { position: relative; padding-left: 20px; font-size: 13px; color: var(--halk); }
.pipak li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 10px; height: 6px; border-left: 2px solid var(--zold); border-bottom: 2px solid var(--zold); transform: rotate(-45deg); }
.minden-etelre { margin-top: 14px; background: var(--zold-halvany); border-radius: 12px; padding: 14px 16px; }
.minden-etelre li { font-size: 14px; color: var(--tinta); }

/* Ajánlat */
.ajanlat { display: flex; flex-wrap: wrap; text-decoration: none; color: #fff; background: var(--zold-mely); border-radius: 18px; overflow: hidden; }
.ajanlat:hover { color: #fff; }
.ajanlat-kep { flex: 1 1 260px; min-height: 160px; background: #2c5a3b; color: #e3f0e6; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; }
img.ajanlat-kep { object-fit: cover; padding: 0; }
.ajanlat-szoveg { flex: 1 1 260px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.ajanlat-szoveg strong { font-family: var(--cim-font); font-size: 24px; line-height: 1.15; }
.ajanlat-szoveg span { font-size: 15px; color: #d7e7db; }
.ajanlat .jelveny { align-self: flex-start; background: #f59e0b; color: #1f1300; font-size: 12px; font-weight: 800; border-radius: 10px; padding: 3px 10px; }
.ajanlat .ajanlat-cta { color: #fff; font-weight: 700; margin-top: 4px; }

/* Átvevő pontok */
.atvevok li { display: flex; flex-direction: column; padding: 12px 14px; background: var(--zold-halvany); border-radius: 12px; }
.atvevok strong { font-size: 15px; }
.atvevok span { font-size: 14px; color: var(--halk); }

/* Vélemények */
.velemenyek figure { margin: 0; border: 1px solid var(--vonal); border-radius: var(--sugar); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.velemenyek blockquote { margin: 0; font-size: 15px; }
.velemenyek figcaption { font-size: 13px; color: var(--halk); }

/* Lábléc */
.lablec { margin-top: 36px; background: var(--zold-mely); color: #e3f0e6; }
.lablec-belso { display: flex; flex-direction: column; gap: 10px; padding-top: 28px; padding-bottom: 104px; }
.lablec a { color: #e3f0e6; }
/* 🔴 Az `align-self: flex-start` NEM dísz. A `.lablec-belso` oszlop-irányú flex
   konténer, és a flex alapértelmezett `align-items: stretch`-e a `width: auto` képet
   RÁHÚZZA a teljes szélességre — a logó szétnyúlva, torzan jelent meg (mérve a
   kiküldött lapon). A `flex-start` visszaadja a saját méretét. Ugyanez a fejlécben
   nem jött elő, mert a `.logo` sor-irányú. */
.lablec-logo-kep { height: 34px; width: auto; display: block; align-self: flex-start; }
.lablec .lablec-tel { color: #fff; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.lablec-linkek { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; }
.halk-vilagos { font-size: 13px; color: #b9d2bf; }

/* Lebegő alsó sáv */
.also-sav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--vonal); box-shadow: 0 -4px 16px rgba(20, 38, 26, 0.08); padding-bottom: env(safe-area-inset-bottom); }
.also-sav-sor { display: flex; align-items: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.also-sav-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.also-sav-info span { font-size: 12px; color: var(--halk); }
.also-sav-info strong { font-size: 14px; }
.gomb-also { min-height: 48px; font-size: 16px; border-radius: 12px; }

/* Asztali nézet: nyitókép két oszlopban, alsó sáv elrejtve */
@media (min-width: 900px) {
  .hos-belso { flex-direction: row; align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 56px; }
  .hos-szoveg { flex: 1 1 0; }
  .hos-kep { flex: 1 1 0; height: 360px; }
  .hos h1 { font-size: 52px; }
  .szakasz { padding-top: 48px; }
  .also-sav { display: none; }
  .lablec-belso { padding-bottom: 40px; }
  .ar-cimke { font-size: 17px; }
  .bizalom-sor strong { font-size: 32px; }
  .minden-etelre { flex-direction: row; flex-wrap: wrap; gap: 8px 28px; }
}