/* ============================================================
   IBEX DARK — „Kabinlámpa" téma (1c)
   Ráépülő dark stíluslap a turavitorlazo.hu új designjához.

   TELEPÍTÉS:
   1. Másold ezt a fájlt a helyi oldal styles mappájába:
      c:\Users\Varro\Documents\ibex\ibex\site\styles\ibex-dark.css
   2. Az index.html-ben a meglévő stíluslapok UTÁN add hozzá:
      <link rel="stylesheet" href="site/styles/ibex-dark.css">
      (az útvonalat igazítsd ahhoz, ahogy a többi css be van kötve)

   Paletta:
   háttér      #081020   (éjszakai tenger)
   felület     #0d1a2e   (kártyák)
   arany       #e3c37c   (fő akcent — „kabinlámpa")
   türkiz      #14a9b0   (másodlagos akcent, linkek)
   ============================================================ */

:root {
  /* Hátterek */
  --bg-page:   #081020;
  --bg-soft:   #0d1a2e;
  --bg-softer: #0b1626;
  --bg-dark:   #060b16;

  /* Szöveg */
  --text:       rgba(214, 224, 236, 0.88);
  --text-muted: rgba(190, 200, 215, 0.7);

  /* Borderek */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Sand → arany akcent */
  --sand:      rgba(227, 195, 124, 0.07);
  --sand-dark: rgba(227, 195, 124, 0.28);

  /* Arany akcent (új token) */
  --gold: #e3c37c;

  /* Árnyékok — mélyebbek sötét háttéren */
  --shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow:    0 6px 28px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-cta: 0 4px 20px rgba(227, 195, 124, 0.25);
  --shadow-cta-hover: 0 8px 28px rgba(227, 195, 124, 0.35);
}

::selection { background: rgba(227, 195, 124, 0.35); }

body { background: var(--bg-page); color: var(--text); }

a { color: var(--teal-light); }
a:hover { color: var(--gold); }

/* ---------- NAV ---------- */
.nav {
  background: rgba(6, 11, 22, 0.97);
  border-bottom: 1px solid rgba(227, 195, 124, 0.15);
}
.nav-brand small { color: var(--gold); }
.nav-link.active { color: #081020; background: var(--gold); }
@media (max-width: 880px) {
  .nav-links { background: #060b16; }
}

/* ---------- HERO ---------- */
.hero { background: var(--bg-page); }
.hero-overlay {
  background: linear-gradient(to bottom,
    rgba(8, 16, 32, 0.3) 0%, rgba(8, 16, 32, 0.55) 50%, rgba(8, 16, 32, 0.95) 100%);
}
.hero-home .hero-overlay {
  background: linear-gradient(160deg,
    rgba(8, 16, 32, 0.72) 0%, rgba(8, 16, 32, 0.45) 55%, rgba(8, 16, 32, 0.92) 100%);
}
.hero-eyebrow { color: var(--gold); }
.hero-subtitle, .hero-tagline { color: rgba(255, 244, 222, 0.85); }
.hero-meta strong { color: var(--gold); }

/* ---------- CÍMEK (a light designban navy — sötéten világos) ---------- */
.section-title, .card-title, .trip-row-title, .crew-name,
.news-title, .prose h2, .prose h3, .year-band h3,
.fact-table dd, .contact-card h3,
.t-h2, .t-h2-accented, .t-card-title, .t-section-title {
  color: rgba(240, 244, 250, 0.95);
}
.section-eyebrow { color: var(--gold); }

/* Bal oldali akcent-csík: teal → arany */
.prose h2, .t-h2-accented { border-left-color: var(--gold); }
.pull-quote {
  color: rgba(255, 244, 222, 0.85);
  border-left-color: var(--gold);
}

/* ---------- KÁRTYÁK ---------- */
.card {
  background: var(--bg-soft);
  border-color: var(--border);
}
.card:hover { border-color: rgba(227, 195, 124, 0.35); }
.card-meta { color: var(--gold); }

/* ---------- UTAK LISTA ---------- */
.trip-row { border-bottom-color: var(--border); }
.trip-row:hover { background: var(--bg-soft); }
.trip-row-date { color: var(--gold); }
.trip-row-arrow { color: var(--gold); }
.year-band h3 { color: var(--gold); }
.year-band-rule { background: rgba(227, 195, 124, 0.25); }

/* ---------- LEGÉNYSÉG ---------- */
.crew-card { border-bottom-color: var(--border); }
.crew-miles { background: var(--gold); color: #081020; }
.crew-trip { border-left-color: rgba(227, 195, 124, 0.35); }
.crew-trip-date { color: var(--gold); }

/* ---------- HÍREK ---------- */
.news-item { border-bottom-color: var(--border); }
.news-date { color: var(--gold); }

/* ---------- STATISZTIKA ---------- */
.stats { background: var(--border); border-color: var(--border); }
.stat { background: var(--bg-soft); }
.stat-num { color: var(--gold); }

/* ---------- GOMBOK ---------- */
.btn {
  background: var(--gold);
  color: #081020;
  font-weight: 700;
}
.btn:hover { background: #ecd193; color: #081020; }
.btn-ghost {
  background: transparent;
  border-color: rgba(20, 169, 176, 0.5);
  color: var(--teal-light);
}
.btn-ghost:hover { border-color: var(--teal-light); background: rgba(20, 169, 176, 0.08); }
.back-link { color: var(--teal-light); }
.back-link:hover { color: var(--gold); }

/* ---------- KAPCSOLAT ---------- */
.contact-card {
  background: rgba(227, 195, 124, 0.07);
  border-color: rgba(227, 195, 124, 0.28);
}
.contact-row strong { color: var(--gold); }
input, textarea, select {
  background: var(--bg-soft) !important;
  color: rgba(240, 244, 250, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}
input:focus, textarea:focus { border-color: var(--gold) !important; }

/* ---------- GALÉRIA + LIGHTBOX ---------- */
.gallery-item { background: #101a2f; }
.lightbox { background: rgba(4, 7, 15, 0.96); }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--bg-dark);
  border-top: 1px solid rgba(227, 195, 124, 0.14);
}
.footer h4 { color: var(--gold); }
.footer a:hover { color: var(--gold); }

/* ---------- EGYÉB ---------- */
.section-dark { background: var(--bg-softer); }
.t-eyebrow { color: var(--gold); }
.t-link { color: var(--teal-light); border-bottom-color: rgba(20, 169, 176, 0.5); }
.t-link:hover { color: var(--gold); }
.t-caption { color: rgba(227, 195, 124, 0.8); }
.prose figcaption { color: rgba(227, 195, 124, 0.8); }