/* Theme-independent styles. Each theme lives in css/themes/<slug>.css,
   scoped to [data-fe-theme="<slug>"], and mostly just sets the tokens below. */

/* ── Tokens (themes override these) ─────────────────────────────────────── */
:root {
  --fe-font-body:    Georgia, 'Times New Roman', serif;
  --fe-font-heading: var(--fe-font-body);
  --fe-font-brand:   var(--fe-font-body);
  --fe-accent:       var(--bs-secondary-color);
  --fe-transition:   color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* ── Base & typography ──────────────────────────────────────────────────── */
body {
  font-family: var(--fe-font-body);
  transition: var(--fe-transition);
}

h1, h2, h3, h4, h5, h6, .page-title {
  font-family: var(--fe-font-heading);
}

.navbar-brand {
  font-family: var(--fe-font-brand);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
}

/* Sanskrit: IAST transliteration (lang="sa-Latn") is italic Noto Serif;
   Devanāgarī (lang="sa-Deva") has no italic form, so it stays upright. */
.deva {
  font-family: 'Noto Serif', serif;
  font-style: italic;
}
.deva:lang(sa-Deva) {
  font-family: 'Noto Serif Devanagari', serif;
  font-style: normal;
}

/* Inline Bootstrap Icons SVGs (icon() in site.php), sized like the old icon font */
.bi {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
main {
  padding: 2.5rem 0 3rem;
}

/* One column width for navbar, content and footer, so nothing moves between pages */
.container-page { max-width: 800px; }

/* Always reserve scrollbar space, so short and long pages centre identically */
html { scrollbar-gutter: stable; }

/* ── Components ─────────────────────────────────────────────────────────── */
.page-title {
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
}

.section-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fe-accent);
}

.icon-accent { color: var(--fe-accent); }

.project-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

footer {
  font-size: 0.85rem;
}
.footer-motto { font-size: 0.8rem; }

/* ── Theme switcher (rendered only when 2+ themes are enabled) ──────────── */
#theme-switcher {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.theme-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--bs-border-color);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, transform 0.1s;
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn.active { border-color: var(--bs-body-color); }

/* ── Accessibility ──────────────────────────────────────────────────────── */
/* Shown only on keyboard focus, above the sticky navbar */
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1100;
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-body-color);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}