/* ═══════════════════════════════════════════════════════════════
   DJ Martin — base.css
   Reset, tokenek, html/body, háttérréteg, alap elemek, a11y, utility
   ═══════════════════════════════════════════════════════════════ */

/* ── RESET ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── TOKENEK ───────────────────────────────────── */
:root {
  /* Johajot.hu paletta — sötét módra hangolva */
  --navy:       #071E38;
  --navy-mid:   #0C3459;
  --navy-deep:  #040f1e;
  --teal:       #0B8FA0;
  --teal-light: #3BC9DA;
  --gold:       #C9933A;
  --gold-light: #E5BE70;
  --gold-dim:   rgba(201,147,58,0.16);
  --text:       #ffffff;
  --muted:      rgba(255,255,255,0.58);
  --surface:    rgba(7,30,56,0.62);
  --border:     rgba(255,255,255,0.10);
  --border-teal:rgba(59,201,218,0.22);
  --blur:       24px;
  --radius-lg:  28px;
  --radius-md:  20px;
  --radius-sm:  12px;
  /* Kártyákhoz megmaradó változók */
  --cyan:       #3BC9DA;
  --purple:     #a78bfa;
  /* Betűcsaládok */
  --font-body:    'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

html { scroll-behavior: smooth; }

/* ── TELJES OLDAL HÁTTÉR ───────────────────────── */
body {
  font-family: var(--font-body);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  background-color: var(--navy-deep);
}

/* Háttérfotó réteg — hero-v2 (webp + jpg fallback), fix pozíció */
.bg-photo {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: url('/assets/images/hero-v2.jpg') center top / cover no-repeat;
  background-image: image-set(
    url('/assets/images/hero-v2.webp') type('image/webp'),
    url('/assets/images/hero-v2.jpg')  type('image/jpeg')
  );
}
@media (max-width: 768px) {
  .bg-photo {
    background-image: url('/assets/images/hero-v2-640.jpg');
    background-image: image-set(
      url('/assets/images/hero-v2-640.webp') type('image/webp'),
      url('/assets/images/hero-v2-640.jpg')  type('image/jpeg')
    );
  }
}

/* Sötét navy overlay az egész oldal felett */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(4,15,30,0.78) 0%,
      rgba(7,30,56,0.70) 40%,
      rgba(4,15,30,0.80) 100%);
  pointer-events: none;
}
/* Rétegsorrend: fotó 0 · overlay 1 · tartalom 2 */
body > * { position: relative; z-index: 2; }
body > .bg-photo { z-index: 0; }

/* ── ALAP ELEMEK ───────────────────────────────── */
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }

::selection { background: rgba(59,201,218,0.30); color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--teal-light); outline-offset: 3px;
}

/* ── SCREEN READER ─────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Ugrás a tartalomra — fókuszra láthatóvá válik */
.skip-link {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px; z-index: 1000;
  width: auto; height: auto; clip: auto; overflow: visible;
  padding: 12px 20px; border-radius: 999px;
  background: rgba(6,18,36,0.92);
  border: 1px solid rgba(59,201,218,0.4);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: var(--gold-light); font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 10px 30px rgba(4,12,26,0.6);
}

/* ── UTILITY ───────────────────────────────────── */
.section--tight-bottom { padding-bottom: 20px; }
.section--tight-top    { padding-top: 40px; }

/* ── CSÖKKENTETT MOZGÁS ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .eq i, .hero-wave .wt, .btn-bulik .pulse, .disco-glow, .hero-particles,
  .hero-eyebrow, .hero h1, .hero p, .hero-actions, .hero-scroll,
  .faq-item[open] .faq-a, .form-msg.show { animation: none !important; }
  .hero-particles, .disco-glow { display: none; }
}