/* ==========================================================================
   site.css — Global engraving × glitch shell (all pages)
   ========================================================================== */

/* ---- Grain ---- */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

[data-theme="light"] .grain {
  opacity: 0.035;
  mix-blend-mode: multiply;
}

/* ---- Nav shell ---- */
.navbar {
  background: color-mix(in srgb, var(--bg-primary) 96%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar__brand .navbar__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--surface-border-hover);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  flex-shrink: 0;
}

/* ---- Tags / text links (shared) ---- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.55em;
  border: 1px solid var(--surface-border);
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  border-bottom: 1px solid transparent;
  padding-block: var(--space-2);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.btn-text:hover {
  color: var(--text-primary);
  border-bottom-color: var(--accent-primary);
}

.btn-text--dark {
  color: var(--text-muted-on-light, var(--text-secondary));
}

.btn-text--dark:hover {
  color: var(--text-on-light, var(--text-primary));
  border-bottom-color: var(--accent-primary);
}

/* ---- Section utilities ---- */
.section--light {
  background: var(--color-background-paper, var(--bg-paper, #ebe6dc));
  color: var(--color-text-dark, #161412);
  position: relative;
}

.section--light .section-head__title,
.section--light .intro__heading {
  color: var(--color-text-dark, #161412);
}

.section--light .section-head__subtitle,
.section--light .prose p {
  color: var(--text-muted-on-light, #5e5852);
}

.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-6) var(--space-8);
  align-items: start;
  margin-bottom: var(--space-12);
  text-align: left;
}

.section-head__index {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  line-height: 1;
  color: var(--accent-primary);
  opacity: 0.55;
}

.section-head__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  text-wrap: balance;
}

.section-head__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 42ch;
  line-height: var(--leading-normal);
}

.section-head--dark .section-head__title {
  color: var(--color-text-dark, #161412);
}

.section-head--dark .section-head__subtitle {
  color: var(--text-muted-on-light, #5e5852);
}

@media (max-width: 639px) {
  .section-head {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* ---- Page hero (inner pages) ---- */
.page-hero {
  text-align: left !important;
  padding: calc(var(--nav-height) + var(--space-12)) var(--space-5) var(--space-12);
  max-width: var(--container-xl);
  margin-inline: auto;
  border-bottom: 1px solid var(--surface-border);
  background:
    radial-gradient(ellipse 50% 80% at 90% 0%, color-mix(in srgb, var(--accent-primary) 12%, transparent), transparent 55%),
    var(--bg-primary);
}

.page-hero__title {
  font-family: var(--font-serif) !important;
  font-size: var(--text-4xl) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  max-width: 18ch;
  text-wrap: balance;
  margin-bottom: var(--space-5);
}

.page-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 48ch;
  line-height: var(--leading-relaxed);
  margin-inline: 0 !important;
}

/* ---- Level cards (szintek) ---- */
.level-card {
  border-radius: 0 !important;
  background: var(--bg-secondary);
  border: 1px solid var(--surface-border);
}

.level-card__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

.level-card__chapters-list a {
  border-radius: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

/* ---- Roadmap nodes ---- */
.roadmap-node__card {
  border-radius: 0 !important;
  background: var(--bg-secondary);
}

.roadmap-node__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

.roadmap-node__number {
  font-family: var(--font-mono);
}

/* ---- Search modal ---- */
.search-modal__content {
  border-radius: 0 !important;
  border: 1px solid var(--surface-border);
  background: var(--bg-elevated);
}

.search-modal__input {
  font-family: var(--font-body);
}

.search-modal__kbd {
  border-radius: 0;
  font-family: var(--font-mono);
}

/* ---- Buttons site-wide square ---- */
.btn {
  border-radius: var(--radius-sm) !important;
}

/* ---- Chapter header ---- */
.chapter-header__title {
  font-family: var(--font-serif);
  font-weight: 600;
}

.chapter-header__number {
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
}

.chapter-content h2 {
  font-family: var(--font-serif);
  font-weight: 600;
}

/* ---- Footer ---- */
.footer {
  border-top: 1px solid var(--surface-border);
  background: var(--bg-secondary);
}

.footer__column h4 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 400;
}

/* ==========================================================================
   Light mode contrast fixes
   ========================================================================== */

[data-theme="light"] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

[data-theme="light"] .navbar {
  background: color-mix(in srgb, var(--color-background-paper) 96%, transparent);
  border-bottom-color: var(--color-border-light);
}

[data-theme="light"] .navbar__link {
  color: var(--text-secondary);
}

[data-theme="light"] .navbar__link:hover,
[data-theme="light"] .navbar__link--active {
  color: var(--text-primary);
}

[data-theme="light"] .btn--primary {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--text-primary) 45%, transparent);
}

[data-theme="light"] .btn--primary:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, transparent);
  color: var(--text-primary);
}

[data-theme="light"] .chapter-card {
  background: var(--bg-secondary);
  border-color: var(--surface-border);
}

[data-theme="light"] .chapter-card__title {
  color: var(--text-primary);
}

[data-theme="light"] .stats--noir {
  /* keep dark dramatic block even in light mode */
  color: var(--color-text-light);
}

[data-theme="light"] .hero--engrave,
[data-theme="light"] .hero--engrave.hero {
  /* hero stays charcoal in light mode for cinematic contrast */
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(61, 26, 22, 0.45), transparent 60%),
    var(--color-background-charcoal);
}

[data-theme="light"] .hero--engrave .hero__title,
[data-theme="light"] .hero--engrave .hero__subtitle,
[data-theme="light"] .hero--engrave .tag {
  color: var(--color-text-light);
}

[data-theme="light"] .hero--engrave .hero__subtitle {
  color: #a8a29a;
}

[data-theme="light"] .hero--engrave .btn--primary {
  color: var(--color-text-light);
  border-color: color-mix(in srgb, var(--color-text-light) 70%, transparent);
}

[data-theme="light"] .hero--engrave .btn-text {
  color: #a8a29a;
}

/* Homepage light nav: definitive dark-on-paper (see also home.css end block) */
[data-theme="light"] body.page-home .navbar,
[data-theme="light"] .page-home .navbar {
  background: #ebe6dc !important;
  border-bottom-color: rgba(22, 20, 18, 0.16) !important;
}

[data-theme="light"] body.page-home .navbar .navbar__brand,
[data-theme="light"] body.page-home .navbar .navbar__wordmark,
[data-theme="light"] body.page-home .navbar .navbar__mark,
[data-theme="light"] .page-home .navbar .navbar__brand,
[data-theme="light"] .page-home .navbar .navbar__wordmark,
[data-theme="light"] .page-home .navbar .navbar__mark {
  color: #161412 !important;
}

[data-theme="light"] body.page-home .navbar .navbar__mark,
[data-theme="light"] .page-home .navbar .navbar__mark {
  border-color: rgba(22, 20, 18, 0.45) !important;
}

[data-theme="light"] body.page-home .navbar .navbar__link,
[data-theme="light"] .page-home .navbar .navbar__link {
  color: #3a342e !important;
}

[data-theme="light"] body.page-home .navbar .navbar__link:hover,
[data-theme="light"] body.page-home .navbar .navbar__link--active,
[data-theme="light"] .page-home .navbar .navbar__link:hover,
[data-theme="light"] .page-home .navbar .navbar__link--active {
  color: #161412 !important;
}

[data-theme="light"] body.page-home .navbar .navbar__search,
[data-theme="light"] body.page-home .navbar .theme-toggle,
[data-theme="light"] .page-home .navbar .navbar__search,
[data-theme="light"] .page-home .navbar .theme-toggle {
  color: #3a342e !important;
}

[data-theme="light"] body.page-home .navbar .btn--nav,
[data-theme="light"] .page-home .navbar .btn--nav {
  color: #161412 !important;
  border-color: rgba(22, 20, 18, 0.55) !important;
}

[data-theme="light"] body.page-home .navbar .navbar__hamburger span,
[data-theme="light"] .page-home .navbar .navbar__hamburger span {
  background: #161412 !important;
}

[data-theme="light"] .page-home .section--light {
  background: var(--color-background-paper);
}

[data-theme="light"] .page-home .chapters {
  background: var(--bg-primary);
}

[data-theme="light"] .page-home .cta-final {
  background: var(--bg-primary);
}

[data-theme="light"] .page-home .cta-final__title {
  color: var(--text-primary);
}

[data-theme="light"] .mobile-menu {
  background: var(--bg-primary);
}

/* Theme-color meta is updated by theme.js */