/* ==========================================================================
   HARSHYA.IN — UNIFIED DESIGN SYSTEM TOKENS & FOUNDATIONS
   Spec: Design Report 22 October 2026 (Sections 4, 5, 6, 8, 9, 10, 11, 12)
   WCAG 2.2 AAA/AA Compliant • Light Theme Only • Mobile-First Fluid System
   ========================================================================== */

:root {

  /* Standard Design System Semantic Aliases */
  --color-primary: var(--accent);
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --font-body: var(--font-display);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-pill);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);

  color-scheme: light;

  /* ------------------------------------------------------------------------
     1. COLOR PALETTE (Light Only — WCAG 2.2 Contrast Verified)
     ------------------------------------------------------------------------ */
  --paper: #FBF8F3;            /* Page background */
  --surface: #FFFFFF;          /* Cards, forms, panels */
  --ink: #1F2933;              /* Body text (13.9:1 on paper) */
  --muted: #52606D;            /* Secondary text (6.1:1 on paper) */
  --accent: #A32A2E;           /* Primary buttons, links (6.8:1 on paper, 7.2:1 on white) */
  --accent-ink: #FFFFFF;       /* Text on accent (7.2:1) */
  --teal: #0F6B73;             /* Secondary accent / highlights (6.2:1 on white) */
  --focus: #1D4ED8;            /* Focus ring (6.7:1 on white) */
  --line: #8A8174;             /* Input borders, high-contrast UI (3.6:1 on paper) */
  --line-soft: #E7E0D3;        /* Decorative dividers only */

  /* Status Colors */
  --ok: #1B7F4B;               /* Success status text (5.0:1 on white) */
  --ok-bg: #ECFDF5;
  --warn: #9A5B00;             /* Warning status text (5.4:1 on white) */
  --warn-bg: #FFFBEB;
  --danger: #B42318;           /* Danger status text (6.6:1 on white) */
  --danger-bg: #FEF2F2;

  /* ------------------------------------------------------------------------
     2. SPACING SCALE (8px Base Unit with 4px Half-Step)
     ------------------------------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ------------------------------------------------------------------------
     3. RADII & SHADOWS
     ------------------------------------------------------------------------ */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(31, 41, 51, 0.06);
  --shadow-md: 0 4px 12px rgba(31, 41, 51, 0.08);
  --shadow-lg: 0 12px 28px rgba(31, 41, 51, 0.12);

  /* ------------------------------------------------------------------------
     4. Z-INDEX SCALE (Section 9.2)
     ------------------------------------------------------------------------ */
  --z-base: 0;
  --z-sticky: 100;
  --z-fab: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ------------------------------------------------------------------------
     5. TYPOGRAPHY & FLUID TYPE SCALE (Section 6)
     ------------------------------------------------------------------------ */
  --font-display: 'Cinzel', 'Source Serif 4', Georgia, serif;
  --font-text: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-sm: 0.875rem;         /* 14px */
  --text-base: 1rem;           /* 16px */
  --text-lg: 1.25rem;          /* 20px */
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
}

/* --------------------------------------------------------------------------
   6. GLOBAL BASE & DOCUMENT RESETS (LIGHT ONLY)
   -------------------------------------------------------------------------- */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  background-color: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font: 400 var(--text-base)/1.65 var(--font-text);
  color: var(--ink);
  background-color: var(--paper);
  background: var(--paper) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

/* Anchor offset for sticky header */
[id] {
  scroll-margin-top: 72px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  line-height: 1.25;
  margin-top: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-2xl); font-family: var(--font-display); }
h2 { font-size: var(--text-xl); font-family: var(--font-display); }
h3 { font-size: var(--text-lg); }

/* Body Paragraphs & Readable Length */
p, li {
  max-width: 68ch;
}

/* Accessible Focus Ring */
:focus-visible {
  outline: 3px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Scrim for text over photographs */
.photo-scrim {
  background: linear-gradient(to top, rgba(31, 41, 51, 0.76) 0%, rgba(31, 41, 51, 0.2) 60%, transparent 100%);
  color: #FFFFFF;
}

/* Standard Eyebrow */
.eyebrow,
.section-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   7. LAYOUT: CONTAINER, GRID, CARDS & SNAP-ROW (Section 4.3)
   -------------------------------------------------------------------------- */
.container {
  --gutter: clamp(16px, 4vw, 32px);
  width: min(100% - 2 * var(--gutter), 1200px);
  margin-inline: auto;
}

.section {
  padding-block: clamp(40px, 6vw, 80px);
}

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* Unified Card Anatomy */
.card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card__media {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}

.card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
}

.card__title {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2) 0;
  color: var(--ink);
  line-height: 1.3;
}

/* Stretched link for single-click card */
.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* Snap Row for 5-Item Sets */
.snap-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
}

.snap-row > * {
  scroll-snap-align: start;
}

/* --------------------------------------------------------------------------
   8. FIXED LAYERS, SAFE AREAS & MOBILE STACKING (Section 9.2)
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  padding-top: env(safe-area-inset-top);
}

.bottom-nav {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  background: rgba(251, 248, 243, 0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

main {
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.fab {
  position: fixed;
  right: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: var(--z-fab);
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE TABLES & CONTAINMENT (Section 11)
   -------------------------------------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  margin: var(--space-4) 0;
  background: var(--surface);
}

.table-scroll table,
table.data-table {
  min-width: 640px;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface);
}

.table-scroll th,
table.data-table th {
  background: #f8f6f0;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--line-soft);
}

.table-scroll td,
table.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
}

.table-scroll tr:last-child td,
table.data-table tr:last-child td {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   10. MOTION SPEC & PREFERS-REDUCED-MOTION (Section 10.3)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track {
    animation: none !important;
    overflow-x: auto !important;
  }
}

.ticker__track {
  animation: ticker 60s linear infinite;
}

.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track,
.ticker[data-paused='true'] .ticker__track {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   11. NATIVE DIALOG COMPONENT & INERT (Section 8)
   -------------------------------------------------------------------------- */
dialog.site-dialog {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: var(--space-6);
  background: var(--surface);
  color: var(--ink);
  max-width: min(90vw, 560px);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
}

dialog.site-dialog::backdrop {
  background: rgba(31, 41, 51, 0.55);
  backdrop-filter: blur(4px);
}

/* --------------------------------------------------------------------------
   12. STANDARDIZED MOBILE BOTTOM NAVIGATION DOCK (Section 12)
   -------------------------------------------------------------------------- */
.harshya-mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 72px;
  }

  .harshya-mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid var(--line-soft, #EAE4D9) !important;
    box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 0 8px !important;
  }

  .harshya-mobile-bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--muted, #64748B) !important;
    text-decoration: none !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    min-width: 54px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    padding: 4px 6px !important;
    transition: all 0.15s ease !important;
  }

  .harshya-mobile-bottom-nav a:hover,
  .harshya-mobile-bottom-nav a.active {
    color: var(--accent, #8B2E3F) !important;
    background: rgba(139, 46, 63, 0.08) !important;
  }

  .harshya-mobile-bottom-nav .mob-icon {
    font-size: 17px !important;
    line-height: 1 !important;
  }
}

/* =============================================================================
   HARSHYA.IN — UNIVERSAL PORTAL MASTERPIECE DESIGN SYSTEM (2026 EDITION)
   Applies across all 225+ encyclopedia hubs, destination pages, route guides,
   districts, exams, and civic portals.
   WCAG 2.2 AAA/AA Compliant · Strict Light Theme · Zero CLS · Kashmiri Royal Aesthetic
   ============================================================================= */

:root {

  /* Standard Design System Semantic Aliases */
  --color-primary: var(--accent);
  --color-bg: var(--paper);
  --color-surface: var(--surface);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --font-body: var(--font-display);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-pill);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);

  --tp-pantone-crimson: #9E483F;
  --tp-pantone-crimson-dark: #82362E;
  --tp-pantone-crimson-hover: #823830;
  --tp-pantone-oat: #F5E1C5;
  --tp-pantone-oat-soft: #FAF0E1;
  --tp-pantone-oat-warm: #FBF8F3;
  --tp-pantone-gold: #C17A3A;
  --tp-pantone-gold-light: #FDF3E7;
  --tp-pine-green: #2F4A3C;
  --tp-ink: #2A1815;
  --tp-ink-muted: #4A3732;
  --tp-ink-subtle: #6E524B;
  --tp-surface: #FFFFFF;
  --tp-border: #E5C8A2;
  --tp-border-subtle: rgba(229, 200, 162, 0.4);
  --tp-shadow-sm: 0 2px 8px rgba(42, 24, 21, 0.04);
  --tp-shadow-md: 0 4px 18px rgba(42, 24, 21, 0.06);
  --tp-shadow-lg: 0 12px 32px rgba(42, 24, 21, 0.10);
  --tp-radius-sm: 8px;
  --tp-radius-md: 12px;
  --tp-radius-lg: 16px;
  --tp-radius-pill: 999px;
}

/* 1. Global Page Foundation */
html {
  scroll-behavior: smooth;
  color-scheme: light;
}

body {
  background-color: var(--tp-pantone-oat-warm) !important;
  color: var(--tp-ink) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* 2. Global Editorial Typography */
h1, .h1, .hero-title, .page-title, .dp-hero-title, .mp-hero-title {
  font-family: 'Newsreader', 'Crimson Text', Georgia, serif !important;
  color: var(--tp-ink) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
}

h2, .h2, .section-title, .cluster-title {
  font-family: 'Newsreader', Georgia, serif !important;
  color: var(--tp-ink) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h3, .h3, .card-title, .sub-heading {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
  color: var(--tp-ink) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

p, li, td, dd {
  color: var(--tp-ink-muted);
  line-height: 1.75;
}

strong, b {
  color: var(--tp-ink);
  font-weight: 700;
}

/* 3. Global Card & Grid Architecture */
.card, .bento-card, .feature-card, .grid-card, .topic-card,
.district-card, .place-card, .stat-card, .content-card,
.cluster-card, .dp-itin-card, .topic-pillar-card, .mp-card {
  background: var(--tp-surface) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius-lg) !important;
  box-shadow: var(--tp-shadow-md) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.card:hover, .bento-card:hover, .feature-card:hover, .grid-card:hover,
.topic-card:hover, .district-card:hover, .place-card:hover,
.dp-itin-card:hover, .topic-pillar-card:hover, .mp-card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--tp-pantone-crimson) !important;
  box-shadow: var(--tp-shadow-lg) !important;
}

/* 4. Badges, Eyebrows & Pills */
.badge, .pill, .tag, .meta-tag, .chip, .dp-badge, .mp-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--tp-pantone-oat-soft) !important;
  color: var(--tp-pantone-crimson) !important;
  border: 1px solid rgba(158, 72, 63, 0.25) !important;
  border-radius: var(--tp-radius-pill) !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* 5. Universal Callouts & Advisory Boxes */
.callout, .takeaway-box, .tip-box, .advisory-card, .note-box,
blockquote, .highlight-box, .dp-alert {
  background: var(--tp-pantone-oat-soft) !important;
  border-left: 4px solid var(--tp-pantone-crimson) !important;
  border-top: 1px solid var(--tp-border) !important;
  border-right: 1px solid var(--tp-border) !important;
  border-bottom: 1px solid var(--tp-border) !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 16px 20px !important;
  margin: 24px 0 !important;
  color: var(--tp-ink-muted) !important;
}

/* 6. Universal Data Tables */
table, .data-table, .fare-table, .rate-table, .mp-fare-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius-md) !important;
  overflow: hidden !important;
  margin: 20px 0 !important;
  background: var(--tp-surface) !important;
}

table th, .data-table th, .fare-table th, .mp-fare-table th {
  background: var(--tp-pantone-oat-soft) !important;
  color: var(--tp-ink) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid var(--tp-border) !important;
  text-align: left !important;
}

table td, .data-table td, .fare-table td, .mp-fare-table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--tp-border-subtle) !important;
  color: var(--tp-ink-muted) !important;
  font-size: 14px !important;
}

table tr:last-child td {
  border-bottom: none !important;
}

table tr:hover td {
  background: rgba(245, 225, 197, 0.2) !important;
}

/* 7. Buttons & Form Controls */
.btn, .button, .btn-primary, .mp-btn, .dp-btn-calc-jump {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, var(--tp-pantone-crimson) 0%, var(--tp-pantone-crimson-dark) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--tp-pantone-crimson-dark) !important;
  border-radius: var(--tp-radius-pill) !important;
  padding: 10px 22px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(158, 72, 63, 0.2) !important;
}

.btn:hover, .button:hover, .btn-primary:hover, .mp-btn:hover, .dp-btn-calc-jump:hover {
  background: var(--tp-pantone-crimson-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(158, 72, 63, 0.3) !important;
}

input[type="text"], input[type="search"], input[type="email"], select, textarea {
  border: 1.5px solid var(--tp-border) !important;
  border-radius: var(--tp-radius-md) !important;
  background: var(--tp-surface) !important;
  color: var(--tp-ink) !important;
  padding: 10px 14px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--tp-pantone-crimson) !important;
  box-shadow: 0 0 0 3px rgba(158, 72, 63, 0.15) !important;
}

/* 8. Top Navigation Elevation */
.bp-topbar, .mp-header {
  background: rgba(251, 248, 243, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1.5px solid var(--tp-border) !important;
}

.bp-nav-link, .mp-nav-link {
  color: var(--tp-ink-muted) !important;
  font-weight: 600 !important;
  transition: color 0.2s ease, background 0.2s ease !important;
  border-radius: var(--tp-radius-pill) !important;
  padding: 6px 14px !important;
}

.bp-nav-link:hover, .mp-nav-link:hover {
  color: var(--tp-pantone-crimson) !important;
  background: var(--tp-pantone-oat-soft) !important;
}

.bp-nav-link.active, .mp-nav-link.active {
  color: var(--tp-pantone-crimson) !important;
  background: rgba(158, 72, 63, 0.08) !important;
  font-weight: 800 !important;
}

/* 9. Accordions & FAQs */
details, .faq-item, .accordion-item {
  background: var(--tp-surface) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius-md) !important;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

details[open], .faq-item.active {
  border-color: var(--tp-pantone-crimson) !important;
  box-shadow: var(--tp-shadow-sm) !important;
}

summary {
  font-weight: 700 !important;
  color: var(--tp-ink) !important;
  cursor: pointer !important;
  list-style: none !important;
}

summary::-webkit-details-marker {
  display: none !important;
}

/* 10. Footers */
footer, .footer, .bp-footer, .mp-footer {
  background: var(--tp-pantone-oat-soft) !important;
  border-top: 1.5px solid var(--tp-border) !important;
  color: var(--tp-ink-muted) !important;
  padding: 40px 20px !important;
  margin-top: 60px !important;
}