/* ============================================================
   Variation 2 — "Material card" style
   Soft-grey page background, white elevated cards, deeper hover lift
   ============================================================ */
body.variant-material {
  background: #e6ecf1;
}

body.variant-material .nav {
  background: rgba(230, 236, 241, 0.85);
}

body.variant-material .hero {
  background: var(--bg);
  border-radius: 24px;
  margin: 24px 32px 0;
  padding: 64px 48px;
  box-shadow: 0 1px 2px rgba(60,64,67,0.06), 0 8px 24px rgba(60,64,67,0.10);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  body.variant-material .hero { margin: 12px; padding: 40px 24px; }
}

body.variant-material .section {
  padding: 56px 0;
}

body.variant-material .section-soft {
  background: transparent;
}

/* Wrap each section in a card */
body.variant-material .section .wrap {
  background: var(--bg);
  border-radius: 24px;
  padding: 56px;
  box-shadow: 0 1px 2px rgba(60,64,67,0.06), 0 8px 24px rgba(60,64,67,0.10);
  border: 1px solid var(--border);
}
@media (max-width: 720px) {
  body.variant-material .section .wrap { padding: 32px 24px; border-radius: 16px; }
}

body.variant-material .info-card,
body.variant-material .skill-cat,
body.variant-material .lab-card,
body.variant-material .hobby-card,
body.variant-material .tg-item,
body.variant-material .lang-row,
body.variant-material .ref-card,
body.variant-material .contact-card {
  background: var(--bg-tint);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

body.variant-material .skill-tag {
  background: var(--bg);
  border: none;
}

body.variant-material .nav-link:hover {
  background: rgba(0,0,0,0.04);
}

body.dark.variant-material .section .wrap,
body.dark.variant-material .hero {
  background: #2a2a2a;
}

/* Dark mode + mono accent: accent flips to near-white, so flip button text to dark for legibility */
body.dark .btn-primary,
body.dark .nav-cta {
  color: #202124 !important;
}
body.dark .btn-primary:hover,
body.dark .nav-cta:hover {
  color: #000 !important;
}

/* ============================================================
   Variation 3 — "Colored header" style
   Solid blue header strip, white page below, bold magazine layout
   ============================================================ */
body.variant-banner .nav {
  background: var(--accent);
  border-bottom: none;
  color: #fff;
}
body.variant-banner .nav.scrolled {
  background: var(--accent);
  border-bottom: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
body.variant-banner .nav-brand,
body.variant-banner .nav-link {
  color: rgba(255,255,255,0.92);
}
body.variant-banner .nav-brand-dot {
  background: #fff;
}
body.variant-banner .nav-link:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
body.variant-banner .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,0.18);
}
body.variant-banner .nav-cta {
  background: #fff;
  color: var(--accent) !important;
}
body.variant-banner .nav-cta:hover {
  background: rgba(255,255,255,0.92);
}
body.variant-banner .theme-toggle {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.92);
}
body.variant-banner .theme-toggle:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}

/* Banner-style hero */
body.variant-banner .hero {
  background: var(--accent);
  color: #fff;
  padding: 100px 0 120px;
  margin-bottom: -64px;
  position: relative;
}
body.variant-banner .hero h1 {
  color: #fff;
}
body.variant-banner .hero h1 .accent {
  color: rgba(255,255,255,0.7);
}
body.variant-banner .hero-sub {
  color: rgba(255,255,255,0.85);
}
body.variant-banner .hero-meta {
  color: rgba(255,255,255,0.85);
}
body.variant-banner .hero-meta-icon {
  color: rgba(255,255,255,0.7);
}
body.variant-banner .hero-eyebrow {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.92);
}
body.variant-banner .hero-eyebrow-dot {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.25);
}
body.variant-banner .btn-primary {
  background: #fff;
  color: var(--accent);
}
body.variant-banner .btn-primary:hover {
  background: rgba(255,255,255,0.92);
}
body.variant-banner .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
body.variant-banner .btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
}
body.variant-banner .hero-photo {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
  border-width: 4px;
  border-style: solid;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

/* Sections sit on neutral white, with stronger title styling */
body.variant-banner .section { padding: 80px 0; }
body.variant-banner .section-eyebrow {
  color: var(--accent);
  font-weight: 500;
}
body.variant-banner .section-title {
  font-weight: 700;
}
body.variant-banner .skill-cat-icon,
body.variant-banner .lab-card-icon,
body.variant-banner .hobby-card-icon,
body.variant-banner .ref-avatar {
  background: var(--accent);
  color: #fff;
}
body.variant-banner .tl-period-current {
  background: var(--accent);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

body.variant-banner .contact-card {
  background: var(--accent);
  color: #fff;
  border: none;
}
body.variant-banner .contact-card h2 { color: #fff; }
body.variant-banner .contact-card p { color: rgba(255,255,255,0.85); }
body.variant-banner .contact-card .btn-primary {
  background: #fff;
  color: var(--accent);
}
body.variant-banner .contact-card .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
body.variant-banner .contact-card .btn-ghost:hover {
  background: rgba(255,255,255,0.15);
}
body.variant-banner .contact-channels {
  border-top-color: rgba(255,255,255,0.2);
}
body.variant-banner .contact-ch {
  color: rgba(255,255,255,0.85);
}