/* Óvári Patikák — közös design tokenek és alap komponensek.
   Minden patika-oldal ezt tölti be elsőként; az oldal saját <style>-ja
   csak az adott oldalra jellemző szekciókat tartalmazza. */

:root{
  --paper:#F5F6F1;
  --paper-raise:#ECEFE7;
  --ink:#12211D;
  --ink-soft:#4E5D58;
  --teal:#2B9E96;
  --teal-text:#146E66;
  --pink:#FB4171;
  --pink-text:#BE1E4C;
  --neon-mint:#03FF9E;
  --neon-pink:#FF0596;

  /* Anyapatikánkénti kiemelő szín (lásd website/PLAN.md, 2. pont).
     A Fehér Kígyó a --pink/--pink-text/--neon-pink hármast használja
     (utóbbi csak ritka, extra hangsúlyra) — a többi patika saját tokent kap. */
  --segito:#B8842E;
  --segito-text:#8A601C;
  --kantharosz:#1E9E3F;
  --kantharosz-text:#147A30;
  --faber:#2358A8;
  --faber-text:#2358A8;

  --line: rgba(18,33,29,.12);
  --line-on-ink: rgba(245,246,241,.16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --wrap: 1180px;

  /* Leveles alap-háttér + "lap" (panel) rendszer — lásd website/PLAN.md.
     --leaf-color-t az oldal saját kiemelő színére állítva (a body elemen,
     inline style-lal) mondja meg, milyen színű leveleket lássunk. */
  --leaf-color: var(--pink);

  /* Oldal-azonosító akcentus (lásd website/PLAN.md, 7i pont) — a fejléc
     keretét, a "melyik patikán vagyok" jelzőt és a badge-pöttyöt színezi.
     Alapértelmezetten a Fehér Kígyó pinkje; a másik 3 oldal a body elemen
     inline style-lal felülírja a saját tokenjére (--faber/--kantharosz/--segito). */
  --accent: var(--pink);
  --page-gutter: 18px;
  --panel-radius: 4px;
  --panel-gap: 40px;
  --panel-max: calc(var(--wrap) + 100px);
}
@media (max-width:640px){
  :root{ --page-gutter:10px; --panel-gap:24px; }
}

*{box-sizing:border-box;}
html{ background:#050706; }
body{
  margin:0;
  background:transparent;
  padding-inline: var(--page-gutter);
  color:var(--ink);
  font-family:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- leveles alap-háttér (mindig a legalsó réteg) ---------- */
.leaf-bg{
  position:fixed; inset:0;
  z-index:-1;
  overflow:hidden;
  background:radial-gradient(ellipse 1100px 760px at 22% 12%, #182420 0%, #0c1310 48%, #050706 100%);
}
.leaf-canvas{
  position:absolute; inset:-15%;
  color:var(--leaf-color);
  opacity:.5;
}
.leaf-canvas-svg{ width:100%; height:100%; display:block; }

/* ---------- "lap" (panel) — a tartalmi szekciók így úsznak a leveles alapon ---------- */
.panel{
  max-width:var(--panel-max);
  margin-inline:auto;
  margin-block-end:var(--panel-gap);
  background:var(--paper);
  border-radius:var(--panel-radius);
}
.panel:last-child{ margin-block-end:0; }
.panel-block{
  padding-block:56px;
  border-top:1px solid var(--line);
}
.panel-block:first-child{ border-top:none; }
@media (max-width:640px){
  .panel-block{ padding-block:36px; }
}
h1,h2,h3{
  font-family:'Montserrat', sans-serif;
  margin:0;
  text-wrap:balance;
  letter-spacing:-0.01em;
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.lede{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic;
  font-weight:500;
  text-wrap:balance;
}

.wrap{
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}
@media (max-width:640px){
  .wrap{ padding-inline:18px; }
}

/* ---------- nyelvváltó (a fejléc navigációjának utolsó eleme) ---------- */
.lang-switch{
  display:flex; align-items:center; gap:2px;
  list-style:none; margin:0; padding:0;
  padding-left:12px; margin-left:2px;
  border-left:1px solid var(--line);
}
.lang-switch li{ display:contents; }
.lang-switch a{
  display:inline-block;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  color:var(--ink-soft); text-decoration:none;
  padding:4px 7px; border-radius:999px;
  transition:color .2s, background .2s;
}
.lang-switch a:hover, .lang-switch a:focus-visible{ color:var(--ink); background:rgba(18,33,29,.06); }
@media (max-width:640px){
  .lang-switch{ border-left:none; padding-left:0; margin-left:0; }
}
.lang-switch a[aria-current="true"]{ background:var(--accent); color:var(--ink); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:var(--page-gutter);
  z-index:40;
  background:rgba(245,246,241,.92);
  backdrop-filter: blur(10px);
  box-shadow:0 14px 34px -18px rgba(5,7,6,.55);
  border:1.5px solid var(--accent);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:14px;
  gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.brand img{ width:34px; height:auto; }
.brand-word{
  font-weight:800; font-size:1.02rem; line-height:1.1;
}
.brand-word em{ display:block; font-style:normal; font-weight:500; color:var(--ink-soft); font-size:.72rem; letter-spacing:.06em; }
.brand-current{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}
.brand-current-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.site-header nav{
  display:flex; align-items:center; gap:22px;
}
.site-header nav a{
  text-decoration:none;
  font-weight:600; font-size:.88rem;
  color:var(--ink-soft);
  white-space:nowrap;
  transition: color .2s;
}
.site-header nav a:hover, .site-header nav a:focus-visible{ color:var(--teal-text); }
/* A nav a márka alá tördelődik, amint a kettő már nem fér el egy sorban —
   ez megbízhatóbb, mint a sorban zsúfolt, szavanként törő linkek (hosszabb
   nyelvi verzióknál, pl. német, ez már 950–1080px körül gondot okozott). */
@media (max-width:1200px){
  .site-header .wrap{ flex-wrap:wrap; row-gap:10px; }
  .site-header nav{ flex-wrap:wrap; width:100%; gap:12px 18px; }
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 12px;
  font-size:.74rem; font-weight:600;
  color:var(--ink-soft);
  white-space:nowrap;
}
.badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* ---------- buttons / pill ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(245,246,241,.08);
  border:1px solid var(--line-on-ink);
  border-radius:999px;
  padding:7px 14px 7px 10px;
  font-size:.82rem; font-weight:600;
  color:var(--neon-mint);
}
.pill svg{ width:14px; height:14px; flex:none; }

.cta-row{
  margin-top:30px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center;
  background:var(--pink);
  color:var(--ink);
  font-weight:700; font-size:.94rem;
  padding:13px 24px;
  border-radius:999px;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow:0 0 0 0 rgba(251,65,113,0);
}
.btn:hover, .btn:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 10px 26px -10px rgba(251,65,113,.55);
}
.btn-ghost{
  color:var(--paper);
  font-weight:600; font-size:.94rem;
  text-decoration:none;
  border-bottom:1px solid var(--line-on-ink);
  padding-bottom:2px;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover, .btn-ghost:focus-visible{ color:var(--neon-mint); border-color:var(--neon-mint); }

/* ---------- wave dividers ---------- */
.wave{ display:block; width:100%; height:auto; position:relative; z-index:1; }
.wave--to-paper{ margin-top:-2px; }

/* ---------- footer ---------- */
.site-footer{ padding-block:56px 30px; }
.footer-grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:36px;
}
@media (max-width:720px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h3{ font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-bottom:14px; }
.footer-grid .brand{ margin-bottom:14px; }
.footer-grid p, .footer-grid a{ font-size:.92rem; line-height:1.8; text-decoration:none; color:var(--ink); }
.footer-grid .muted{ color:var(--ink-soft); }
.footer-bottom{
  margin-top:46px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.78rem; color:var(--ink-soft);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}