/* ═══════════════════════════════════════════════════════════════════════
   base.css — reset, typography and the fixed type scale.
   Mobile-first: every rule is authored at 360px, then widened.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Self-hosted fonts ──────────────────────────────────────────────
   Files live in /assets/fonts/. Run tools/fetch-fonts.sh once to
   populate them. font-display:swap means text is readable immediately
   and never blocks first paint.
   ──────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Noto Sans';
  src: url('/assets/fonts/noto-sans-latin-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Noto Sans';
  src: url('/assets/fonts/noto-sans-latin-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Noto Serif';
  src: url('/assets/fonts/noto-serif-latin-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
@font-face {
  font-family: 'Noto Sans Devanagari';
  src: url('/assets/fonts/noto-sans-devanagari-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Noto Serif Devanagari';
  src: url('/assets/fonts/noto-serif-devanagari-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;          /* page must never scroll sideways */
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { background: var(--surface-muted); }   /* avoids a white flash while loading */

input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ─── Headings — one fixed scale, used identically everywhere ────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  text-wrap: balance;          /* avoids a lonely last word */
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.015em; margin-bottom: var(--sp-5); }
h2 { font-size: var(--fs-h2); margin-top: var(--sp-7); }
h3 { font-size: var(--fs-h3); margin-top: var(--sp-6); }
h4 { font-size: var(--fs-h4); margin-top: var(--sp-5); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); }

/* First heading in a section should not push away from the top. */
h1:first-child, h2:first-child, h3:first-child, h4:first-child { margin-top: 0; }

p { margin: 0 0 var(--sp-4); }
p.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.6; }

small, .text-small { font-size: var(--fs-small); }
.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--text-muted) !important; }

/* ─── Links ──────────────────────────────────────────────────────────── */
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--primary-hover); }

/* Visible focus for every interactive element — never remove this. */
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ─── Lists ──────────────────────────────────────────────────────────── */
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }

/* ─── Devanagari ─────────────────────────────────────────────────────── */
[lang="hi"], [lang="sa"], .deva {
  font-family: var(--font-deva);
  line-height: var(--lh-loose);   /* matras need vertical room */
}
h1[lang="hi"], h2[lang="hi"], h3[lang="hi"], .deva-heading {
  font-family: 'Noto Serif Devanagari', var(--font-heading);
  line-height: 1.45;
}

/* ─── Layout helpers ─────────────────────────────────────────────────── */
.container-jain {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) { .container-jain { padding-inline: var(--sp-5); } }

/* The long-form reading column: 60–75 characters. */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
}
.prose > * { max-width: 100%; }
.prose h2 { color: var(--maroon); }
.prose img { border-radius: var(--r-md); margin-block: var(--sp-5); }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--accent-bright);
  background: var(--surface-warm);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-style: italic;
}
/* Let wide tables scroll inside themselves, never the page. */
.prose .table-wrap { overflow-x: auto; margin-block: var(--sp-5); }

.section { padding-block: var(--sp-7); }
@media (min-width: 992px) { .section { padding-block: var(--sp-8); } }

/* ─── Accessibility utilities ────────────────────────────────────────── */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--sp-2); top: -100px; z-index: 2000;
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-4);
  border: 2px solid var(--primary); border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

/* Every interactive target meets the 44px minimum on touch devices. */
@media (pointer: coarse) {
  a.btn, button, .nav-link, .dropdown-item, input[type="submit"] {
    min-height: var(--touch);
    display: inline-flex;
    align-items: center;
  }
}

/* ─── Print: let devotees print a shloka cleanly ─────────────────────── */
@media print {
  .jain-header, .jain-footer, .jain-share, .jain-signup,
  .jain-breadcrumb, .jain-seasonal-bar, .navbar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}