html {
  min-height: 100%;
  background: url('img/fejlec.jpg') center / cover no-repeat fixed #000;
  background-attachment: fixed;
}

:root{
      --bg:#0b0f14;--fg:#e8eef6;--muted:#a9b3c1;--acc:#7bd389;--warn:#ffd166;--danger:#ef476f;--card:#121823;--chip:#1b2330;
    }
    html,body{margin:0;padding:0;background: transparent;color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.6}
    a{color:var(--acc);text-decoration:none} a:hover{text-decoration:underline}
    header{position:sticky;top:0;background:linear-gradient(180deg,#0b0f1499,#0b0f1400);backdrop-filter:saturate(150%) blur(6px);z-index:20;padding:1rem 1.2rem;border-bottom:1px solid #ffffff10}
    .wrap{max-width:1100px;margin:0 auto;padding:0 1.2rem}
    h1{font-size:2rem;margin:.2rem 0 .6rem 0}
    .subtitle{color:var(--muted);font-size:1rem;margin:0}
    nav.toc{margin:1rem 0 2rem 0;background:var(--card);border:1px solid #ffffff12;border-radius:14px;padding:1rem}
    nav.toc h2{font-size:1.1rem;margin:0 0 .6rem 0}
    nav.toc ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.35rem;padding-left:1rem;margin:0}
    nav.toc li{list-style:disc;color:var(--muted)}
    section.card{background:var(--card);border:1px solid #ffffff12;border-radius:16px;padding:1.2rem;margin:1rem 0}
    section.card h2{margin-top:0}
    h3{margin:.8rem 0 .4rem 0}
    .lead{font-size:1.05rem;color:#e9f4ff}
    .muted{color:var(--muted)}
    .chip{display:inline-block;background:var(--chip);border:1px solid #ffffff12;color:var(--muted);padding:.1rem .5rem;border-radius:999px;font-size:.85rem;margin:.15rem .25rem}
    .important{background:#ffd16610;border-left:3px solid var(--warn);padding:.8rem;border-radius:10px}
    .danger{background:#ef476f10;border-left:3px solid var(--danger)}
    blockquote{margin:1rem 0;padding:.8rem 1rem;border-left:3px solid #5fa8d3;background:#2a35461a;border-radius:8px;color:#e0ecff}
    ul,ol{padding-left:1.2rem}
    .src{color:var(--muted);font-size:.85rem}
    .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
    .kv{display:grid;grid-template-columns:180px 1fr;gap:.6rem;margin:.5rem 0}
    .kv b{color:#d2e6ff}
    footer{color:var(--muted);text-align:center;padding:2rem 0}
    code.kwd{background:#ffffff12;padding:.05rem .35rem;border-radius:6px}
/* Shared site nav + hero (extra styles) */
header .wrap.headrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.brand a {
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--fg);
}
.topnav {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.topnav .navlink {
  color: var(--fg);
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #ffffff12;
  transition: background 0.2s ease;
}
.topnav .navlink:hover,
.topnav .navlink.active {
  background: #ffffff20;
}
.hero {
  /* Add a full‑bleed background image to the hero section.  */
  margin: 0 0 2rem 0;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background-image: url('img/fejlec.jpg');
  background-size: cover;
  background-position: center;
}

/* The inner container overlays a semi‑transparent layer over the image to improve text contrast. */
.hero .inner {
  padding: 3rem 1.2rem;
  background: rgba(0, 0, 0, 0.65);
}
.hero h1 {
  margin: 0 0 0.6rem 0;
  font-size: 2.4rem;
  color: var(--fg);
}
.hero p.lead {
  margin: 0;
  font-size: 1.2rem;
  color: #cde6ff;
}
.center { text-align: center; }
.signal-icon { width: 64px; height: 64px; display: inline-block; margin-bottom: 0.4rem; }
.btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid #ffffff12;
  background: var(--acc);
  color: #0b0f14;
  font-weight: 700;
  text-decoration: none;
  transition: filter 0.2s;
}
.btn:hover { filter: brightness(1.1); }
.card.center { text-align: center; }

/* Mystical pattern background and vibrant accents reflecting Shipibo motifs */


/* Apply a soft neon‑inspired border and inner glow to cards */
section.card {
  border-image: linear-gradient(90deg, #ff71ce, #01cdfe, #05ffa1, #b967ff, #fffb96) 1;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 0 20px #00ffd21a inset;
}

/* Add subtle glow to headings to evoke a mystical feel */
h1,
h2,
h3 {
  text-shadow: 0 2px 4px #00000080, 0 0 8px #00ffd2;
}


/* opaque background */
  backdrop-filter: none;        /* no transparency */
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
  min-width: 480px;             /* wider so two-row grid has room */
  max-width: 80vw;
  display: grid;
  grid-template-rows: repeat(2, auto);  /* exactly two rows */
  grid-auto-flow: column;               /* fill by columns so items flow into 2 rows */
  column-gap: 16px;
  row-gap: 6px;
  padding-top: .75rem;
  padding-bottom: .75rem;
}
.topnav .dropdown:hover .dropdown-menu,
.topnav .dropdown:focus-within .dropdown-menu { display: grid; }
.topnav .dropdown-menu .dropdown-item {
  display: block;
  padding: .3rem .5rem;
  line-height: 1.4;
  border-radius: 8px;
  white-space: nowrap;
}
.topnav .dropdown-menu .dropdown-item:hover {
  background: rgba(0,0,0,.06);
}
@media (max-width: 720px) {
  .topnav .dropdown-menu {
    position: static;
    max-width: 100%;
    min-width: 0;
    grid-template-rows: auto;     /* stack on small screens */
    grid-auto-flow: row;
  }
}

/* prevent off-screen */
  display: grid;
  grid-template-rows: repeat(2, auto);  /* exactly two rows */
  grid-auto-flow: column;               /* fill by columns */
  column-gap: 16px;
  row-gap: 6px;
}
.topnav .dropdown.open .dropdown-menu { display: grid; }
.topnav .dropdown-menu .dropdown-item {
  display: block;
  padding: .38rem .6rem;
  line-height: 1.35;
  border-radius: 8px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.topnav .dropdown-menu .dropdown-item:hover {
  background: rgba(255,255,255,.08);
}
/* Mobile behavior: full width stack */
@media (max-width: 720px) {
  .topnav .dropdown-menu {
    left: 0; right: 0; transform: none;
    min-width: 0; max-width: none;
    position: static;
    grid-template-rows: auto;
    grid-auto-flow: row;
  }
}


/* --- Subnav for Szent medicinák (green inline links under header) --- */
.subnav.subnav-medicina { background: transparent; border-top: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); }
.subnav.subnav-medicina .wrap { padding: .5rem 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.subnav.subnav-medicina .subnav-title { color: #2e7d32; font-weight: 700; margin-right: .5rem; }
.subnav.subnav-medicina .subnav-link { color: #2e7d32; text-decoration: none; font-weight: 600; }
.subnav.subnav-medicina .subnav-link:hover { text-decoration: underline; }
.subnav.subnav-medicina .subnav-link.active { text-decoration: underline; }

@media (max-width: 720px) {
  .subnav.subnav-medicina .wrap { gap: .25rem .5rem; }
}






/* --- Psychedelic Szent medicinák subnav (animated, hardcore) --- */
:root{
  --sv-green-1:#0f3d2e;
  --sv-green-2:#185f43;
  --sv-green-3:#2e7d32;
  --sv-green-4:#1b5e20;
  --sv-deep:#0b1612;
}

/* Keep topnav minimal & clean */
.topnav .navlink{ margin-right:.25rem; padding:.45rem .65rem; text-decoration:none; font-weight:600; }
.topnav .navlink.active{ text-decoration:underline; }

/* Subnav container with animated psychedelic border-like background */
.subnav.subnav-medicina{
  position: relative;
  border: 0;
  overflow: hidden;
  background: transparent;
}
.subnav.subnav-medicina::before{
  content:"";
  position:absolute; inset:-2px;
  background: conic-gradient(
    from 0deg,
    #ff007a, #ff8a00, #ffee00, #7aff00, #00ffd5, #4d7cff, #b44dff, #ff4df0, #ff007a
  );
  filter: saturate(1.25) blur(10px);
  animation: sv-spin 18s linear infinite;
  opacity:.9;
  z-index:0;
}
.subnav.subnav-medicina::after{
  content:"";
  position:absolute; inset:2px;
  background: linear-gradient(135deg, rgba(6,18,13,.92), rgba(12,35,27,.92));
  border-radius: 12px;
  z-index:0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(0,0,0,.25);
}

/* Content wrapper sits above the animated layer */
.subnav.subnav-medicina .wrap{
  position: relative; z-index:1;
  padding: .8rem 1rem;
  display:flex; flex-wrap:wrap; gap:.6rem .7rem; align-items:center;
}

/* Title */
.subnav.subnav-medicina .subnav-title{
  color:#d7fbe7; font-weight:900; text-transform:uppercase; letter-spacing:.08em; margin-right:.35rem;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}

/* Neon/glass pills */
.subnav.subnav-medicina .subnav-link{
  display:inline-block;
  padding:.46rem .9rem;
  border-radius: 9999px;
  background: rgba(255,255,255,.06);
  color:#f8fffb;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.15px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 1px 10px rgba(0,0,0,.25),
    0 0 0 1px rgba(0,0,0,.15) inset,
    0 2px 12px rgba(64,255,203,.15);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease;
}
.subnav.subnav-medicina .subnav-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow:
    0 2px 16px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.2) inset,
    0 6px 24px rgba(64,255,203,.25);
}
.subnav.subnav-medicina .subnav-link.active{
  background: linear-gradient(135deg, #8cffd1, #7aff00);
  color:#062016;
  border-color: rgba(0,0,0,.25);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.18) inset,
    0 6px 26px rgba(122,255,0,.35),
    0 2px 12px rgba(0,0,0,.3);
}

/* Animation keyframes */
@keyframes sv-spin{
  0%{ transform: rotate(0turn); }
  100%{ transform: rotate(1turn); }
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .subnav.subnav-medicina::before{ animation: none; }
}

/* Mobile tweaks */
@media (max-width:720px){
  .subnav.subnav-medicina .wrap{ gap:.45rem .45rem; padding:.7rem .85rem; }
  .subnav.subnav-medicina .subnav-link{ padding:.44rem .8rem; }
}


/* ===== Compact header & hero tweaks (added 2025-09-11 05:55:24) ===== */
header{ padding:.35rem 1rem !important; }
.brand a{ font-size:.95rem !important; letter-spacing:.06em; line-height:1; }
.topnav{ gap:.35rem !important; }
.topnav .navlink{ font-size:.85rem !important; padding:.3rem .5rem !important; }

/* Subnav (Szent medicinák stb.) — make it slimmer */
.subnav .wrap{ padding:.45rem .6rem !important; gap:.35rem .35rem !important; }
.subnav .subnav-title{ font-size:.9rem !important; }
.subnav .subnav-link{ font-size:.85rem !important; padding:.34rem .6rem !important; }

/* Hero section much shorter + smaller typographic scale */
.hero .inner{ padding:1rem .9rem !important; }
.hero h1{ font-size:1.25rem !important; margin:.1rem 0 .35rem 0 !important; }
.hero .lead{ font-size:.95rem !important; margin:0 !important; line-height:1.4 !important; }

/* General headings a bit smaller overall (optional) */
h1{ font-size:1.6rem !important; }
h2{ font-size:1.15rem !important; }
h3{ font-size:1rem !important; }

@media (max-width:720px){
  header{ padding:.3rem .8rem !important; }
  .topnav .navlink{ font-size:.82rem !important; padding:.28rem .45rem !important; }
  .hero .inner{ padding:.8rem .8rem !important; }
  .hero h1{ font-size:1.1rem !important; }
  .hero .lead{ font-size:.92rem !important; }
}


/* --- Mobile fix: keep all Szent medicinák links visible --- */
.subnav.subnav-medicina .subnav-link { position: relative; z-index: 1; display: inline-flex; }
@media (max-width: 720px){
  .subnav.subnav-medicina .wrap{ display:flex; flex-wrap: wrap; overflow-x: visible; gap:.45rem .6rem; }
  .subnav.subnav-medicina .subnav-link{ flex:0 0 auto; white-space: nowrap; }
}