/* =========================
 *   Theme tokens
 *   ========================= */
:root{
    color-scheme: light;

    /* Base */
    --bg: #f7fafc;
    --fg: #0b0f14;
    --muted: #4b5563;

    /* Brand / accent (matrix green) */
    --accent: #00c77f;         /* light mode accent */
    --accent-2: #0ea5e9;       /* optional secondary */
    --glow: rgba(0,199,127,.45);

    /* Surfaces */
    --card: rgba(255,255,255,.75);
    --border: rgba(15,23,42,.14);

    /* Focus */
    --focus: var(--accent);

    /* Logo glow */
    --logo-glow: drop-shadow(0 0 6px var(--glow));
}

:root[data-theme="dark"]{
    color-scheme: dark;

    --bg: #0a0a0a;
    --fg: #00ff99;
    --muted: rgba(0,255,153,.75);

    --accent: #00ff99;
    --accent-2: #60a5fa;
    --glow: rgba(0,255,153,.55);

    --card: rgba(10,10,10,.65);
    --border: rgba(0,255,153,.22);

    --focus: var(--accent);

    --logo-glow: drop-shadow(0 0 5px rgba(0,255,153,.9));
}

/* =========================
 *   Base layout
 *   ========================= */
html:not([data-theme]){
  color-scheme: dark;
}

html{
  background-color: var(--bg);
  color: var(--fg);
  overflow-x: hidden;   /* oldalirány tiltás oké */
  overflow-y: visible;  /* <-- EZ A LÉNYEG: ne legyen auto */
  padding: 0 !important;
  margin: 0;
}

body{
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'Courier New', monospace;
  overflow: visible;    /* sticky-barát */
  max-width: 100%;
  scroll-behavior: smooth;
}

@media (max-width: 576px){
  .page-wrap{
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}

/* ===== Mobile typography scale ===== */
@media (max-width: 576px){
  html{
    font-size: 85%;
  }
}

/* ===== Mobile input zoom fix (iOS/Edge) ===== */
@media (max-width: 576px){
  /* attól zoomol be a böngésző, ha az input font-size < 16px */
  input,
  textarea,
  select,
  form {
    font-size: 16px !important;
  }
}

/* sticky-barát vízszintes tiltás */
@supports (overflow: clip) {
  body { overflow-x: clip; }
}

/* gesztus: csak függőleges húzás */
html, body { touch-action: pan-y; }

.page-wrap{
  padding: 1.5rem; /* kb p-4 */
}

/* Links (optional) */
a{
    color: var(--accent);
    text-underline-offset: 3px;
}
a:hover{ filter: brightness(1.05); }

/* Utility */
.no-pointer {
    pointer-events: none;
    cursor: default;
}

/* Logo */
#logo{
width: 140px;
height: auto;
margin-bottom: 1.5rem;
filter: var(--logo-glow);
}

/* Focus styles */
a:focus, button:focus{
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

html[data-theme="light"] .footer-text{
  color: #7b7b7b;
}

/* =========================
 *   Main head text
 * ========================= */

.main-head-text{
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    line-height: 1.15;
    letter-spacing: .04em;
}

/* DARK: erősebb mélység + finom zöld aura */
:root[data-theme="dark"] .main-head-text{
    text-shadow:
    0 2px 0 rgba(0,0,0,.85),
    0 14px 34px rgba(0,0,0,1),
    0 0 26px rgba(0,255,153,.90);
}

/* LIGHT: tiszta árnyék (nincs zöld “giccs”) */
:root[data-theme="light"] .main-head-text{
  color: #0b0f14;
  text-shadow:
  0 1px 0 rgba(255,255,255,.55),
  0 10px 22px rgba(2,6,23,.14),
  0 0 18px rgba(0,120,70,.10); /* enyhe akcent */
}

header .lang-btn{
  border-radius: 999px;
  padding: .25rem .6rem;
  font-weight: 500;
  letter-spacing: .04em;
  transition:
  color .15s ease,
  background-color .15s ease,
  box-shadow .15s ease,
  border-color .15s ease;
}

/* =========================
 *   Index logo style
 *   ========================= */

#xhLogoWrap{
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0.5rem auto 0;
  overflow: hidden;
  touch-action: pan-y;
}

/* a wrap kapjon fix arányt (logo 1:1) */
#xhLogoWrap::before{
content:"";
display:block;
padding-top: 100%; /* 1:1 */
}

/* canvas + img teljes fedés */
.logo-wrap img,
.logo-wrap canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.logo-wrap img{ pointer-events:none; }

/* LIGHT MODE: kap egy sötétes "üveg" hátteret, hogy a zöld mátrix ne ússzon el fehéren */
:root:not([data-theme="dark"]) .logo-wrap{
  background: #fff;
  border: 1px solid rgba(15,23,42,.14);
  box-shadow: 0 10px 30px rgba(2,6,23,.12);
}

/* DARK MODE: marad "nyers" fekete/olvadó */
:root[data-theme="dark"] .logo-wrap{
  background: #000;
  border: 1px solid rgba(0,255,153,.22);
  box-shadow: 0 0 0 1px rgba(0,255,153,.08), 0 18px 42px rgba(0,0,0,.55);
}

/* canvas + img tökéletesen fedje egymást */
#matrixCanvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  z-index: 2;
  pointer-events:none;
}

/* rétegek */
#siteLogoMark{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce){
  #matrixCanvas{ display:none; }
}

/* =========================
 *   Matrix call style
 *   ========================= */

.matrix-screen{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  padding: 16px;
  min-height: 260px;
  border: 1px solid rgba(0,255,153,.28);
  background: #060a08;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}

html[data-theme="light"] .matrix-screen{
  background: #f6f8f7;
  border-color: rgba(0,120,70,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.14);
}

/* top line */
.matrix-topline{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 14px;
  line-height: 1.25;
  white-space: pre-wrap;
  word-break: break-word;
  color: rgba(120,255,120,.92);
}

html[data-theme="light"] .matrix-topline{
  color: rgba(0,120,70,.92);
}

/* blinking block cursor */
.matrix-cursor{
  display: inline-block;
  width: .7ch;
  height: 1.05em;
  vertical-align: -0.15em;
  margin-left: .1ch;
  background: rgba(120,255,120,.95);
  box-shadow: 0 0 12px rgba(0,255,153,.25);
  animation: matrixBlink .8s infinite steps(1,end);
}

html[data-theme="light"] .matrix-cursor{
  background: rgba(0,120,70,.95);
  box-shadow: 0 0 10px rgba(0,120,70,.18);
}

@keyframes matrixBlink{
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}

/* canvas layer */
.matrix-rain{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
  pointer-events: none;
}

html[data-theme="light"] .matrix-rain{
  background: rgba(255,255,255);
}

html[data-theme="dark"] .matrix-rain{
  background: rgba(0,0,0);
}

/* keep top line readable above canvas */
.matrix-topline{
  position: relative;
  z-index: 2;
}
.matrix-rain{ z-index: 1; }

/* failure overlay */
.matrix-failure{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  margin-top: 55px;
}

.matrix-failure-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid rgba(120,255,120,.9);
  color: rgba(120,255,120,.95);
  background: rgba(0,0,0,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0 26px rgba(0,255,153,.22);
}

html[data-theme="light"] .matrix-failure-box{
  border-color: rgba(0,120,70,.9);
  color: rgba(0,120,70,.95);
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 22px rgba(0,120,70,.14);
}

/* reboot overlay */
.matrix-reboot{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.matrix-reboot-box{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid rgba(120,255,120,.9);
  color: rgba(120,255,120,.95);
  background: rgba(0,0,0,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0 26px rgba(0,255,153,.22);
}

html[data-theme="light"] .matrix-reboot-box{
  border-color: rgba(0,120,70,.9);
  color: rgba(0,120,70,.95);
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 22px rgba(0,120,70,.14);
}

/* =========================
 *   Matrix overlay responsive sizing
 *   ========================= */

/* Base styles remain the same */
.matrix-failure-box,
.matrix-reboot-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding: 14px 18px;
  border-radius: 12px;
  border: 2px solid rgba(120,255,120,.9);
  color: rgba(120,255,120,.95);
  background: rgba(0,0,0,.55);
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: 0 0 26px rgba(0,255,153,.22);
  max-width: 90%; /* Prevents overlay from being too wide */
  margin: 0 auto; /* Centers the box */
}

/* Responsive font sizes for mobile */
@media (max-width: 576px) {
  .matrix-failure-box,
  .matrix-reboot-box {
    padding: 10px 14px; /* Smaller padding on mobile */
  }

  .matrix-failure-box h4,
  .matrix-reboot-box h4 {
    font-size: 0.9rem !important; /* Smaller heading on mobile */
    margin-bottom: 0.3rem !important;
  }

  .matrix-failure-box small,
  .matrix-reboot-box {
    font-size: 0.7rem !important; /* Smaller text on mobile */
    line-height: 1.2 !important;
  }
}

/* Extra small screens (phones) */
@media (max-width: 576px) {
  .matrix-failure-box,
  .matrix-reboot-box {
    padding: 8px 12px; /* Even smaller padding */
    border-radius: 8px; /* Smaller radius */
  }

  .matrix-failure-box h4,
  .matrix-reboot-box h4 {
    font-size: 0.8rem !important; /* Even smaller heading */
    margin-bottom: 0.2rem !important;
  }

  .matrix-failure-box small,
  .matrix-reboot-box {
    font-size: 0.65rem !important; /* Even smaller text */
  }

  /* Adjust positioning for small screens */
  .matrix-failure {
    margin-top: 40px !important; /* Less margin on small screens */
  }
}

/* For very small screens (under 576px) */
@media (max-width: 576px) {
  .matrix-failure-box,
  .matrix-reboot-box {
    padding: 6px 10px;
    max-width: 95%; /* Use more of the available width */
  }

  .matrix-failure-box h4,
  .matrix-reboot-box h4 {
    font-size: 0.75rem !important;
  }

  .matrix-failure-box small,
  .matrix-reboot-box {
    font-size: 0.6rem !important;
    letter-spacing: .05em; /* Less letter spacing on very small screens */
  }
}

/* Prevent text from breaking awkwardly */
.matrix-failure-box h4,
.matrix-reboot-box h4 {
  word-break: keep-all;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Light theme adjustments for mobile */
html[data-theme="light"] .matrix-failure-box,
html[data-theme="light"] .matrix-reboot-box {
  border-color: rgba(0,120,70,.9);
  color: rgba(0,120,70,.95);
  background: rgba(255,255,255,.75); /* Slightly more opaque for better readability */
  box-shadow: 0 0 22px rgba(0,120,70,.14);
}

/* Ensure the overlays stay centered and visible */
.matrix-failure,
.matrix-reboot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  padding: 10px; /* Add some padding to prevent touching edges */
}

/* Adjust failure overlay margin for mobile */
@media (max-width: 576px) {
  .matrix-failure {
    margin-top: 45px !important;
  }
}

/* Make sure the text inside wraps properly */
.matrix-failure-box .text-center,
.matrix-reboot-box .text-center {
  text-align: center !important;
  width: 100%;
}

/* screen flash */
.matrix-screen.flash{
  animation: matrixFlash .22s ease-out 1;
}
@keyframes matrixFlash{
  0%{ filter: brightness(1); }
  50%{ filter: brightness(1.8); }
  100%{ filter: brightness(1); }
}

/* Matrix topline: mindig balra, terminal mód */
.matrix-topline{
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;

  width: 100%;
  margin: 0;
  padding: 0;

  /* hogy a kurzor ne “középre” ugorjon */
  display: block;
}

/* ha valami parent flex/center miatt mégis furán viselkedik */
.matrix-screen{
  text-align: left !important;
}

.matrix-cursor{
  vertical-align: baseline;
}

.matrix-topline{
  min-height: 28px; /* fontos: a canvas NE nyúljon rá */
}

.matrix-green{
  color: rgba(120,255,120,.92);
  text-shadow: 0 0 8px rgba(0,255,153,.75);
}

/* =========================
 *   Sticky header (clean blur, no jump)
 * ========================= */

/* =========================
 *   Sticky/Floating header – Matrix glass (clean, no distortion)
 *   - fixed header + spacer (no layout jump)
 *   - dark/light theme aware
 *   ========================= */

:root{
  --header-h: 72px;
  --header-h-scrolled: 52px; /* 20px különbség */
  --header-blur: 22px;
}

/* Menü szélességének nővelése */
.navbar{
  max-width: 98% !important;
}

/* spacer tartja a layoutot, header fixen ül a tetején */
#header-spacer{
height: var(--header-h);
}

/* FIXED header (stabil, nem “ugrál” sticky flow-ban) */
header.bg-dark{
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 2000;
  isolation: isolate;

  height: var(--header-h);
  display: flex;
  align-items: center;

  /* “matrix glass” alap */
  background-color: rgba(0,0,0,.22) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(0,255,153,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);

  backdrop-filter: blur(var(--header-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--header-blur)) saturate(160%);

  transition:
  height .22s ease,
  background-color .22s ease,
  box-shadow .22s ease,
  border-color .22s ease,
  backdrop-filter .22s ease;
}

/* finom “scanline / glow” réteg (nem giccs, csak hangulat) */
header.bg-dark::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
  linear-gradient(to bottom,
                  rgba(0,255,153,.10),
                  rgba(0,0,0,0) 55%
                  ),
  repeating-linear-gradient(to bottom,
                            rgba(0,255,153,.05) 0px,
                            rgba(0,255,153,.05) 1px,
                            rgba(0,0,0,0) 3px,
                            rgba(0,0,0,0) 6px
                            );
  opacity: .18;
  mix-blend-mode: screen;
}

/* scrolled állapot: karcsúbb + kicsit sötétebb */
header.bg-dark.scrolled{
  height: var(--header-h-scrolled);
  background-color: rgba(0,0,0,.38) !important;
  border-bottom-color: rgba(0,255,153,.28);
  box-shadow: 0 14px 44px rgba(0,0,0,.35);
}

/* a nav bg-dark se fessen be */
header.bg-dark nav.navbar.bg-dark{
  background-color: transparent !important;
  background-image: none !important;
}

/* spacer együtt megy a magassággal */
#header-spacer.scrolled{
height: var(--header-h-scrolled);
}

/* NAVBAR: a belső bg-dark-ot kapcsold le, különben “dupla” fekete lesz */
header.bg-dark .navbar{
  background: transparent !important;
  padding-top: .25rem;
  padding-bottom: .25rem;
  background: transparent !important;
}

/* Linkek: matrixes hover, de kulturált */
header.bg-dark .nav-link{
  color: rgba(230,255,245,.92) !important;
  text-shadow: 0 0 10px rgba(0,255,153,.12);
  position: relative;
}
header.bg-dark .nav-link:hover{
  color: rgba(0,255,153,.95) !important;
}
header.bg-dark .nav-link::after{
  content:"";
  position:absolute;
  left:.25rem;
  right:.25rem;
  bottom:-.35rem;
  height:1px;
  background: rgba(0,255,153,.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  opacity:.8;
}
header.bg-dark .nav-link:hover::after{
  transform: scaleX(1);
}

header.bg-dark .nav-link.active{
  color: rgba(0,255,153,.98) !important;
}
header.bg-dark .nav-link.active::after{
  transform: scaleX(1);
}
html[data-theme="light"] header.bg-dark .nav-link.active{
  color: rgba(0,120,70,.98) !important;
}

/* Brand logo: torzítás nélkül kisebbre vált (csak height), nem scale-oljuk */
header.bg-dark .navbar-brand img{
  height: 40px;
  width: auto;
  transition: height .22s ease;
}
header.bg-dark.scrolled .navbar-brand img{
  height: 30px;
}

/* Toggler gomb kapjon “glass” keretet */
header.bg-dark .navbar-toggler{
  border-color: rgba(0,255,153,.35) !important;
  box-shadow: 0 0 0 2px rgba(0,255,153,.08);
}

/* Mobil menü: dropdown panel legyen üveg */
@media (max-width: 992px){
  header.bg-dark .navbar-collapse{
    margin-top: .5rem;
    padding: .75rem;
    border-radius: 14px;
    border: 1px solid rgba(0,255,153,.22);
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(var(--header-blur));
    -webkit-backdrop-filter: blur(var(--header-blur));
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
    max-height: min(70vh, 520px);
    overflow-y: auto;
  }
}

/* ===== Light theme: hamburger lines visible ===== */
html[data-theme="light"] header.bg-dark .navbar-toggler{
  border-color: rgba(15,23,42,.28) !important;
}

html[data-theme="light"] header.bg-dark .navbar-toggler-icon{
  /* sötét “három vonal” SVG */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815,23,42,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* LIGHT THEME: fehér üveg + sötét szöveg, zöld csak akcent */
:root[data-theme="light"] header.bg-dark{
  background-color: rgba(255,255,255,.45) !important;  /* <-- EZ */
  border-bottom-color: rgba(15,23,42,.14);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
:root[data-theme="light"] header.bg-dark.scrolled{
  background-color: rgba(255,255,255,.65) !important;  /* <-- EZ */
  box-shadow: 0 14px 34px rgba(2,6,23,.14);
}
:root[data-theme="light"] header.bg-dark .nav-link{
  color: rgba(2,6,23,.88) !important;
  text-shadow: none;
}
:root[data-theme="light"] header.bg-dark .nav-link:hover{
  color: rgba(0,120,70,.95) !important;
}
:root[data-theme="light"] header.bg-dark .navbar-toggler{
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: none;
}
@media (max-width: 992px){
  :root[data-theme="light"] header.bg-dark .navbar-collapse{
    background-color: rgba(255,255,255,.92) !important;
    border-color: rgba(15,23,42,.14);
    box-shadow: 0 16px 40px rgba(2,6,23,.12);
  }
}

/* Ha a böngésző nem tud blur-t: fallback */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  header.bg-dark{
    background: rgba(0,0,0,.85);
  }
  :root[data-theme="light"] header.bg-dark{
    background: rgba(255,255,255,.97);
  }
}

/* Light módban olvashatóság a fejlécre */
html[data-theme="light"] header.bg-dark{
  color: #0b0f14;
}

html[data-theme="light"] header.bg-dark .nav-link,
html[data-theme="light"] header.bg-dark .navbar-brand{
  color: #0b0f14 !important;
}

html[data-theme="light"] header.bg-dark .nav-link:hover{
  opacity: .85;
}

/* DARK TÉMA – nyelvválasztó gomb */
html[data-theme="dark"] header .lang-btn{
  color: rgba(230,255,245,.9);
  border-color: rgba(0,255,153,.35);
}

html[data-theme="dark"] header .lang-btn:hover{
  color: #00ff99;
  background: rgba(0,255,153,.12);
  box-shadow: 0 0 0 2px rgba(0,255,153,.15);
}

/* Aktív nyelv */
html[data-theme="dark"] header .lang-btn.active{
  color: #00ff99;
  background: rgba(0,255,153,.22);
  border-color: rgba(0,255,153,.6);
  box-shadow: 0 0 0 2px rgba(0,255,153,.25);
}

/* LIGHT TÉMA – nyelvválasztó gomb */
html[data-theme="light"] header .lang-btn{
  color: #0b0f14;                 /* <-- FONTOS: sötét szöveg */
  border-color: rgba(15,23,42,.25);
  background: transparent;
}

/* Hover: finom üveg + zöld jelzés */
html[data-theme="light"] header .lang-btn:hover{
  color: #064e3b;
  background: rgba(0,120,70,.08);
  border-color: rgba(0,120,70,.45);
  box-shadow: 0 0 0 2px rgba(0,120,70,.12);
}

/* Aktív nyelv – ez MOST MÁR LÁTSZIK */
html[data-theme="light"] header .lang-btn.active{
  color: #064e3b;
  background: rgba(0,120,70,.16);
  border-color: rgba(0,120,70,.65);
  box-shadow: 0 0 0 2px rgba(0,120,70,.22);
}

header .lang-btn{
  background-image: none !important;
  text-shadow: none !important;
}

/* ===== Mobile collapse: toggler always clickable ===== */
@media (max-width: 992px){
  header.bg-dark .navbar-toggler{
    position: relative;
    z-index: 2105; /* a lenyíló panel fölött */
  }

  header.bg-dark .navbar-collapse{
    z-index: 2100; /* a header alatt marad, de a content fölött */
  }
}

/* ===== Toggler shrink on scroll ===== */
header.bg-dark .navbar-toggler{
  border-radius: 6px;
  transition: padding .22s ease, transform .22s ease;
  margin-top: 5px;
}

header.bg-dark.scrolled .navbar-toggler{
  transform: scale(.94);
  margin-top: 0px;
}

header.bg-dark .navbar-toggler-icon{
  transition: width .22s ease, height .22s ease;
}

header.bg-dark.scrolled .navbar-toggler-icon{
  height: 1.05em;
}

/* =========================
 *   FaQ serach style
 *   ========================= */

.faq-suggestions{
  max-height: 320px;
  overflow: auto;
  border-radius: .75rem;
}

/* Light/Dark friendly backgrounds.
 *     Works with Bootstrap 5 data-bs-theme too. */
html[data-theme="dark"] .faq-search{
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
html[data-theme="light"] .faq-search,
.faq-search{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}

html[data-theme="light"] .faq-suggestions-text{
  color: var(--fg);
}

/* Keep dropdown readable in both themes */
html[data-theme="dark"] .faq-suggestions .list-group-item{
  background-color: rgba(33,37,41,.95);
  color: #f8f9fa;
  border-color: rgba(255,255,255,.12);
}
html[data-theme="dark"] .faq-suggestions .list-group-item:hover{
  background-color: rgba(33,37,41,1);
}

/* Avoid sticky padding glitch on very small screens */
@media (max-width: 576px){
  .faq-search{ padding-left: .25rem; padding-right: .25rem; }
}

/* =========================
 *   Cookie settings style
 *   ========================= */

#cookie-consent-status,
#cookie-proof-box{
overflow-anchor: none;
}

/* mobilon szépen törjön, és a gombok legyenek 2 sorban ha kell */
@media (max-width: 576px){
  #cookie-consent-status .cc-actions{
  width: 100%;
  justify-content: flex-start !important;
  }
  #cookie-consent-status .cc-actions .btn{
  flex: 1 1 160px;   /* ha nem fér, lemegy sorba */
  }
}

#cc-proof-hash{
  overflow-wrap: anywhere;
  word-break: break-word;     /* iOS/Edge kompatibilitás */
  display: inline-block;
  max-width: 100%;
}

#cc-proof-hash-line{
  max-width: 100%;
}
#cc-proof-hash{
  padding: .15rem .35rem;
  border-radius: .35rem;
  background: rgba(0,0,0,.05);
}

:root[data-theme="dark"] #cc-proof-hash{
  background: rgba(255,255,255,.08);
}

#cookie-proof-box .cc-hashline{
  margin-left: auto; /* desktop */
  max-width: 100%;
}

@media (max-width: 576px){
  #cookie-proof-box .cc-hashline{
  flex-basis: 100%;
  margin-left: 0;
  margin-top: .5rem;
  }
}

/* =========================
 * Cookie popup buttons – theme fix
 * ========================= */

/* LIGHT theme: btn-outline-light ne legyen "láthatatlan" */
html[data-theme="light"] #cookie-popup .btn-outline-light{
  color: #0b0f14 !important;
  border-color: rgba(15,23,42,.28) !important;
  background: rgba(255,255,255,.35) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] #cookie-popup .btn-outline-light:hover{
  color: rgba(0,120,70,.95) !important;
  border-color: rgba(0,120,70,.55) !important;
  background: rgba(0,120,70,.10) !important;
  box-shadow: 0 0 0 2px rgba(0,120,70,.12);
}

/* LIGHT theme: az "Accept all" (btn-light) legyen gombszerűbb + matrix akcent */
html[data-theme="light"] #cookie-popup .btn.btn-light{
  color: rgba(0,120,70,.95) !important;
  background: rgba(255,255,255,.65) !important;
  border-color: rgba(0,120,70,.45) !important;
  box-shadow: 0 0 0 2px rgba(0,120,70,.10);
}

html[data-theme="light"] #cookie-popup .btn.btn-light:hover{
  background: rgba(255,255,255,.85) !important;
  border-color: rgba(0,120,70,.65) !important;
  box-shadow: 0 0 0 2px rgba(0,120,70,.18);
}

/* opcionális: a cookie sáv "alert-light" light módban legyen üveg, ne papír */
html[data-theme="light"] #cookie-alert.alert.alert-light{
  background: rgba(255,255,255,.55) !important;
  border-color: rgba(15,23,42,.12) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* =========================
 *   Cookie serach style
 *   ========================= */

/* ===== Cookie settings modal theme fix (Bootstrap 5.3.3) ===== */

/* A backdrop maradjon normális */
#cookieSettingsModal .modal-backdrop {
opacity: .6;
}

/* LIGHT */
html[data-theme="light"] #cookieSettingsModal .modal-content.cookie-modal-body {
  background-color: #fff !important;
  color: #212529 !important;
  border: 1px solid rgba(0,0,0,.15) !important;
}

html[data-theme="light"] #cookieSettingsModal .modal-header,
html[data-theme="light"] #cookieSettingsModal .modal-body,
html[data-theme="light"] #cookieSettingsModal .modal-footer {
  background-color: transparent !important;
  color: inherit !important;
}

html[data-theme="light"] #cookieSettingsModal .modal-title,
html[data-theme="light"] #cookieSettingsModal .form-check-label {
  color: #212529 !important;
}

html[data-theme="light"] #cookieSettingsModal .text-body-secondary {
  color: rgba(33,37,41,.75) !important;
}

/* DARK */
html[data-theme="dark"] #cookieSettingsModal .modal-content.cookie-modal-body {
  background-color: #111 !important;
  color: #f1f1f1 !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}

html[data-theme="dark"] #cookieSettingsModal .modal-header,
html[data-theme="dark"] #cookieSettingsModal .modal-body,
html[data-theme="dark"] #cookieSettingsModal .modal-footer {
  background-color: transparent !important;
  color: inherit !important;
}

html[data-theme="dark"] #cookieSettingsModal .modal-title,
html[data-theme="dark"] #cookieSettingsModal .form-check-label {
  color: #f1f1f1 !important;
}

html[data-theme="dark"] #cookieSettingsModal .text-body-secondary {
  color: rgba(241,241,241,.75) !important;
}

/* Checkbox dark finomítás */
html[data-theme="dark"] #cookieSettingsModal .form-check-input {
  background-color: #222;
  border-color: #555;
}
html[data-theme="dark"] #cookieSettingsModal .form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

@media (max-width: 576px) {
  #cookie-popup .btn { width: 100%; }
  #cookie-popup .d-flex { width: 100%; }
}

/* =========================
 * Scroll-to-top button theme fix
 * ========================= */

/* Alap (dark) – maradhat matrixos */
#scrollTopBtn{
border-width: 1px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
#scrollTopBtn:hover{
transform: translateY(-1px);
}

/* LIGHT theme – ne legyen bg-dark, legyen üveg + sötét szöveg */
html[data-theme="light"] #scrollTopBtn{
  background-color: rgba(255,255,255,.55) !important;
  color: rgba(2,6,23,.88) !important;
  border-color: rgba(15,23,42,.22) !important;
  box-shadow: 0 10px 26px rgba(2,6,23,.12);
}

/* Hover lightban: finom zöld akcent, hogy “matrix” maradjon */
html[data-theme="light"] #scrollTopBtn:hover{
  background-color: rgba(255,255,255,.75) !important;
  border-color: rgba(0,120,70,.55) !important;
  color: rgba(0,120,70,.95) !important;
  box-shadow: 0 0 0 2px rgba(0,120,70,.14), 0 12px 30px rgba(2,6,23,.14);
}

/* ===== TOC FINAL (sticky panel + inner scroll) ===== */
:root{ --toc-top: 96px; } /* header alatt */

.toc{
  position: sticky;
  top: var(--toc-top);

  /* FONTOS: legyen valódi height, ne csak max-height */
  height: calc(100dvh - var(--toc-top) - 16px);

  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(0,255,153,.18);
  background: rgba(0,0,0,.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);

  /* belső ne lógjon ki */
  overflow: hidden;

  /* belső scroll stabilan működjön */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.toc-nav{
  /* a nav töltse ki a panel magasságát és görgessen */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;

  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  padding-right: .25rem;
}

.toc-title{
  margin: 0 0 .75rem 0;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(230,255,245,.92);
}

.toc-link{
  border-radius: 10px;
  padding: .22rem .5rem !important;
  margin: .08rem 0;
  color: rgba(230,255,245,.90) !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.toc-link:hover{
  color: rgba(0,255,153,.95) !important;
  background: rgba(0,255,153,.10);
  box-shadow: 0 0 0 2px rgba(0,255,153,.10);
  text-decoration: none;
}

.toc-link.active{
  color: rgba(0,255,153,.98) !important;
  background: rgba(0,255,153,.16);
  box-shadow: 0 0 0 2px rgba(0,255,153,.18);
}

/* LIGHT */
html[data-theme="light"] .toc{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.40);
  box-shadow: 0 12px 32px rgba(2,6,23,.10);
}
html[data-theme="light"] .toc-title{ color: rgba(2,6,23,.88); }
html[data-theme="light"] .toc-link{ color: rgba(2,6,23,.78) !important; }
html[data-theme="light"] .toc-link:hover{
  color: rgba(0,120,70,.95) !important;
  background: rgba(0,120,70,.08);
  box-shadow: 0 0 0 2px rgba(0,120,70,.10);
}
html[data-theme="light"] .toc-link.active{
  color: rgba(0,120,70,.98) !important;
  background: rgba(0,120,70,.14);
  box-shadow: 0 0 0 2px rgba(0,120,70,.14);
}

/* ===== TOC link focus / active FIX ===== */

/* NE rajzoljon böngésző outline-ot */
.toc-link{
  outline: none !important;
}

/* Bootstrap / browser focus shadow kilövése */
.toc-link:focus,
.toc-link:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Aktív állapotnál a zöld keret legyen “belső” */
.toc-link.active{
  box-shadow:
  inset 0 0 0 2px rgba(0,255,153,.55),
  0 0 0 0 transparent !important;
}

/* Hover állapotnál is belső legyen */
.toc-link:hover{
  box-shadow:
  inset 0 0 0 2px rgba(0,255,153,.35) !important;
}

#rulesNav{
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow: auto;
}

/* =========================================================
 * Anchor offset + Jump highlight (csicsa pack)
 * - sticky header + FAQ sticky search offset
 * - jump flash + lift + subtle glow
 * - optional scanline accent
 * - TOC focus ring fix (no white clip)
 * ========================================================= */

/* ===== Anchor offset (sticky header + FAQ search) ===== */
:root{
  --header-current-h: var(--header-h-scrolled, 62px); /* fallback */
  --faq-sticky-gap: 10px;
}

/* ===== TOC link focus/active FIX (no invisible white overlay) ===== */
.toc-link{
  outline: none !important;
}
.toc-link:focus,
.toc-link:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Hover/Active keret belső (inset), így nem tud “letakaródni” */
.toc-link:hover{
  box-shadow: inset 0 0 0 2px rgba(0,255,153,.35) !important;
}
.toc-link.active{
  box-shadow: inset 0 0 0 2px rgba(0,255,153,.55) !important;
}
html[data-theme="light"] .toc-link:hover{
  box-shadow: inset 0 0 0 2px rgba(0,120,70,.30) !important;
}
html[data-theme="light"] .toc-link.active{
  box-shadow: inset 0 0 0 2px rgba(0,120,70,.55) !important;
}

/* ===== FAQ search: always visible under header ===== */
.faq-search{
  position: sticky;
  top: calc(var(--header-current-h) + var(--faq-sticky-gap)) !important;
  z-index: 1200;

  /* hogy ne “folyjon rá” a szöveg és legyen kis levegő */
  padding-top: .75rem;
  padding-bottom: .75rem;
  margin-top: .25rem;

  /* üveg panel */
  border-radius: 16px;
  border: 1px solid rgba(0,255,153,.18);
  background: rgba(0,0,0,.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

html[data-theme="light"] .faq-search{
  border-color: rgba(15,23,42,.12);
  background: rgba(255,255,255,.55);
  box-shadow: 0 12px 32px rgba(2,6,23,.10);
}

/* ===== FAQ search layout polish (input + button alignment) ===== */

.faq-search{
  overflow: hidden; /* ne lógjon ki semmi a lekerekítésből */
}

.faq-search .d-flex{
  align-items: stretch; /* input és gomb egy magasság */
}

/* Input / button egységes magasság */
.faq-search #faqSearch,
.faq-search #faqSearchReset{
  height: 44px;
  line-height: 44px; /* monospace-nél is stabil */
  padding-top: 0;
  padding-bottom: 0;
}

/* Input belső padding, hogy ne legyen “összenyomva” */
.faq-search #faqSearch{
  line-height: normal;          /* a szöveg ne csússzon */
  padding: 0 .9rem;             /* vízszintes padding */
}

/* Gomb legyen szép üveg + matrix akcent (dark/light) */
.faq-search #faqSearchReset{
  padding: 0 1rem;
  white-space: nowrap;
  border-radius: 12px;
}

/* Input keret és háttér finomítása */
html[data-theme="dark"] .faq-search #faqSearch{
  background: rgba(0,0,0,.28);
  border-color: rgba(0,255,153,.22);
  color: rgba(230,255,245,.92);
}
html[data-theme="light"] .faq-search #faqSearch{
  background: rgba(255,255,255,.70);
  border-color: rgba(15,23,42,.14);
  color: rgba(2,6,23,.88);
}

/* Mobilon legyen mindkettő teljes széles */
@media (max-width: 576px){
  .faq-search #faqSearch,
  .faq-search #faqSearchReset{
    width: 100%;
  }
}

/* ===== FAQ search: inner padding / spacing ===== */

/* A teljes üveg doboz kapjon rendes belső paddinget */
.faq-search{
  padding: .9rem 1rem;           /* <-- ettől nem lesz a szélén */
}

/* A cím/szöveg ne tapadjon a szélekhez */
.faq-search > div > div:first-child{
  padding-left: .1rem;
  padding-right: .1rem;
}

/* A sor (input + gomb) kapjon kis oldalsó levegőt is */
.faq-search .d-flex{
  margin-top: .35rem;
}

/* Input és gomb ne érjen a doboz széléhez */
.faq-search #faqSearch{
  border-radius: 12px;
}

.faq-search #faqSearchReset{
  border-radius: 12px;
}

@media (max-width: 576px){
  .faq-search{
    padding: .8rem .85rem;
  }
}

/* ===== Jump highlight – glow pulse (single ring, no double line) ===== */

.jump-highlight{
  position: relative;
  z-index: 1;
  border-radius: 14px;
  animation: jumpLift 420ms cubic-bezier(.22,.68,.32,1.15) 1;
}

/* nincs ::before (scanline off) */
.jump-highlight::before{ content: none !important; }

/* 1 db keret: csak inset (nincs outline) */
.jump-highlight::after{
  content:"";
  position:absolute;
  inset: -6px;
  border-radius: 16px;
  pointer-events:none;

  /* ALAP: egyetlen keret */
  box-shadow: inset 0 0 0 2px rgba(0,255,153,.65);

  /* pulse */
  animation: glowPulseDark 900ms ease-out 1;
}

html[data-theme="light"] .jump-highlight::after{
  box-shadow: inset 0 0 0 2px rgba(0,120,70,.65);
  animation: glowPulseLight 900ms ease-out 1;
}

/* lift */
@keyframes jumpLift{
  0%{ transform: translateY(0) scale(1); filter: brightness(1); }
  35%{ transform: translateY(-4px) scale(1.01); filter: brightness(1.06); }
  100%{ transform: translateY(0) scale(1); filter: none; }
}

/* DARK pulse: keret végig ugyanott, csak a glow lélegzik */
@keyframes glowPulseDark{
  0%{
    box-shadow:
    inset 0 0 0 2px rgba(0,255,153,.65),
    0 0 0 0 rgba(0,255,153,0),
    0 0 0 0 rgba(0,255,153,0);
  }
  45%{
    box-shadow:
    inset 0 0 0 2px rgba(0,255,153,.65),
    0 0 0 10px rgba(0,255,153,.12),
    0 0 24px 6px rgba(0,255,153,.18);
  }
  100%{
    box-shadow:
    inset 0 0 0 2px rgba(0,255,153,.65),
    0 0 0 0 rgba(0,255,153,0),
    0 0 0 0 rgba(0,255,153,0);
  }
}

/* LIGHT pulse: finomabb glow, de ugyanaz az egy keret */
@keyframes glowPulseLight{
  0%{
    box-shadow:
    inset 0 0 0 2px rgba(0,120,70,.65),
    0 0 0 0 rgba(0,120,70,0),
    0 0 0 0 rgba(0,120,70,0);
  }
  45%{
    box-shadow:
    inset 0 0 0 2px rgba(0,120,70,.65),
    0 0 0 10px rgba(0,120,70,.10),
    0 0 22px 6px rgba(0,120,70,.16);
  }
  100%{
    box-shadow:
    inset 0 0 0 2px rgba(0,120,70,.65),
    0 0 0 0 rgba(0,120,70,0),
    0 0 0 0 rgba(0,120,70,0);
  }
}

/* ===== Mobile navbar collapse: always open DOWN, not "split" ===== */
header.bg-dark{ overflow: visible; } /* biztos ami biztos */

@media (max-width: 576px){
  /* ne középre igazítson, különben "szétfelé" nyílik */
  header.bg-dark{
    align-items: flex-start;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  /* referencia az abszolút lenyíló panelhez */
  header.bg-dark .navbar{
    position: relative;
    align-items: flex-start;
  }

  /* a lenyíló panel a navbar ALÁ kerüljön */
  header.bg-dark .navbar-collapse{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    /* a saját üveg stílusod maradhat */
    margin-top: .5rem;
  }
}

/* ===== Resource list-group item: theme-aware, nice spacing, correct rounding ===== */

.resource-li{
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  border-radius: 12px !important;

  padding: .7rem .9rem;
  margin: .45rem 0;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: 0 10px 24px rgba(0,0,0,.10);

  display: flex;
  align-items: flex-start;
  gap: .6rem;
}

/* pipa ikon */
.resource-li::before{
  content: "✓";
  flex: 0 0 auto;

  margin-top: .15em;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;

  color: rgba(0,255,153,.95);
}

/* Light téma pipa */
html[data-theme="light"] .resource-li::before{
  color: rgba(0,120,70,.95);
}

/* Dark finomhangolás (matrix vibe) */
html[data-theme="dark"] .resource-li{
  background: rgba(10,10,10,.55);
  border-color: rgba(0,255,153,.20);
  color: rgba(235,255,248,.92);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}

/* Hover: kulturált */
.resource-li:hover{
  transform: translateY(-1px);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

html[data-theme="dark"] .resource-li:hover{
  box-shadow: 0 16px 36px rgba(0,0,0,.38);
}

/* list-group-flush ne húzzon vonalakat a kártyák közé */
ul.list-group.list-group-flush{
  border: 0 !important;
}
ul.list-group.list-group-flush > .list-group-item{
  border-width: 1px !important;
}

.no-check::before{
  content: none !important;
}

/* ===== GDPR badge theme switch (footer) ===== */
.gdpr-badge{ display: none; }

html[data-theme="dark"] .gdpr-dark{ display: inline-block; }
html[data-theme="light"] .gdpr-light{ display: inline-block; }