/*!
 * Lokadarshan design system — tokens + base
 * Shared by the public site (site.css) and the CMS (admin.css).
 *
 * Palette
 *   brand #C8007A  logo magenta (#E8008A) deepened for AA contrast — primary
 *                  actions, active states, breaking news
 *   navy  #14213D  structure (footer, dark bands, CMS chrome)
 *   gold  #B8862F  heritage accent (since-1963 mark, fellowship) — use sparingly
 *   ink   #191C23  text        paper #F3F4F7 page background
 * Type
 *   Anek Kannada (variable wdth/wght) — headlines, navigation, UI
 *   Noto Serif Kannada — long-form reading text (article body, excerpts)
 */

/* ---------- fonts (self-hosted; Anek Kannada is pinned to 92% width, weights 400-800) ---------- */
@font-face {
  font-family: "Anek Kannada";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../font/anek/anek-kannada.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}

@font-face {
  font-family: "Anek Kannada";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../font/anek/anek-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif Kannada";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../font/noto-serif/noto-serif-kannada.woff2") format("woff2");
  unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}

@font-face {
  font-family: "Noto Serif Kannada";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../font/noto-serif/noto-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---------- colour ---------- */
  --c-brand: #c8007a;
  --c-brand-deep: #9c005f;
  --c-brand-bright: #e8008a;
  --c-brand-tint: #fdebf5;
  --c-brand-line: #f6c7e2;
  --c-navy: #14213d;
  --c-navy-2: #22335a;
  --c-navy-3: #34497a;
  --c-navy-tint: #eaeef6;
  --c-gold: #b8862f;
  --c-gold-deep: #8f6620;
  --c-gold-tint: #f8f0e0;

  --c-ink: #191c23;
  --c-ink-2: #373d49;
  --c-muted: #5c6371;
  --c-subtle: #8a909c;
  --c-line: #e3e6ec;
  --c-line-2: #d0d5de;
  --c-paper: #f3f4f7;
  --c-paper-2: #eceef2;
  --c-surface: #fff;

  --c-success: #1c7c4f;
  --c-success-tint: #e6f4ec;
  --c-warning: #a86400;
  --c-warning-tint: #fdf2de;
  --c-danger: #b42318;
  --c-danger-tint: #fdecea;
  --c-danger-line: #f5c2bd;
  --c-info: #1f5fa8;
  --c-info-tint: #e7effa;

  /* category accents (tinted icon chips) */
  --c-cat-state: #1f5fa8;
  --c-cat-nation: #b35c00;
  --c-cat-world: #127a86;
  --c-cat-sport: #1c7c4f;
  --c-cat-ent: #9c2f86;
  --c-cat-biz: #5a4bb8;
  --c-cat-opinion: #8f6620;

  /* ---------- type ---------- */
  --f-ui: "Anek Kannada", "Noto Sans Kannada", "Nirmala UI", "Tunga", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-read: "Noto Serif Kannada", "Anek Kannada", "Nirmala UI", Georgia, serif;

  --t-2xs: 0.6875rem;
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.55vw, 1.4375rem);
  --t-2xl: clamp(1.4375rem, 1.2rem + 1vw, 1.8125rem);
  --t-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  --t-4xl: clamp(2.125rem, 1.4rem + 3.2vw, 3.5rem);

  --lh-tight: 1.28;
  --lh-snug: 1.42;
  --lh-body: 1.75;
  --lh-read: 1.95;

  --w-regular: 420;
  --w-medium: 520;
  --w-semi: 610;
  --w-bold: 700;
  --w-black: 780;

  /* Anek's width axis: headlines are set slightly condensed so long Kannada
     headlines stay on fewer lines without shrinking the type. */
  --stretch-head: 90%;
  --stretch-ui: 96%;

  /* ---------- space (4px grid) ---------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-section: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);
  --s-gutter: clamp(1rem, 0.6rem + 1.6vw, 2rem);

  /* ---------- shape & depth ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgb(20 33 61 / 0.06), 0 1px 1px rgb(20 33 61 / 0.04);
  --sh-2: 0 6px 16px -6px rgb(20 33 61 / 0.14), 0 2px 4px -2px rgb(20 33 61 / 0.06);
  --sh-3: 0 22px 44px -18px rgb(20 33 61 / 0.3), 0 6px 12px -6px rgb(20 33 61 / 0.1);
  --sh-focus: 0 0 0 3px rgb(200 0 122 / 0.25);

  /* ---------- layout ---------- */
  --container: 1280px;
  --container-narrow: 760px;
  --container-mid: 1040px;
  --header-h: 60px;

  /* ---------- motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 160ms;
  --d-base: 260ms;
  --d-slow: 620ms;
  --reveal-distance: 18px;

  --z-sticky: 50;
  --z-dropdown: 60;
  --z-drawer: 90;
  --z-toast: 100;

  color-scheme: light;
  accent-color: var(--c-brand);
}

/* ---------- reset (element-scoped, no universal reset) ---------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  font-weight: var(--w-regular);
  font-stretch: var(--stretch-ui);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--f-ui);
  font-weight: var(--w-bold);
  font-stretch: var(--stretch-head);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-wrap: balance;
}

:where(ul, ol)[class] {
  padding: 0;
  list-style: none;
}

:where(img, picture, video, canvas, svg, iframe) {
  display: block;
  max-width: 100%;
}

:where(img) {
  height: auto;
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

:where(button) {
  cursor: pointer;
}

:where(a) {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

:where(table) {
  border-collapse: collapse;
}

:where(hr) {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-6) 0;
}

::selection {
  background: var(--c-brand);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

[hidden] {
  display: none !important;
}

/* ---------- utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--c-navy);
  color: #fff;
  font-weight: var(--w-semi);
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform var(--d-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.container {
  width: min(100% - 2 * var(--s-gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--s-gutter), var(--container-narrow));
}

.container--mid {
  width: min(100% - 2 * var(--s-gutter), var(--container-mid));
}

.stack > * + * {
  margin-top: var(--stack-gap, var(--s-4));
}

.stack--5 {
  --stack-gap: var(--s-5);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--s-3));
}

.mt-4 { margin-top: var(--s-4); }
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.grid--gap-3 { --grid-gap: var(--s-3); }
.grid--gap-5 { --grid-gap: var(--s-5); }

.text-muted {
  color: var(--c-muted);
}

.nowrap {
  white-space: nowrap;
}

/* ---------- icons ---------- */
.fi {
  font-size: var(--icon-size, 1.1em);
}

.icon-chip {
  --chip-c: var(--c-brand);
  display: inline-grid;
  place-items: center;
  width: var(--chip-size, 2.5rem);
  height: var(--chip-size, 2.5rem);
  flex: none;
  border-radius: var(--r-md);
  color: var(--chip-c);
  background: var(--c-paper-2);
  background: color-mix(in srgb, var(--chip-c) 11%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-c) 18%, transparent);
  font-size: calc(var(--chip-size, 2.5rem) * 0.46);
  transition: transform var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out);
}

.icon-chip--sm {
  --chip-size: 2rem;
  border-radius: var(--r-sm);
}

.icon-chip--lg {
  --chip-size: 3.25rem;
  border-radius: var(--r-lg);
}

.icon-chip--round {
  border-radius: 50%;
}

.icon-chip--navy { --chip-c: var(--c-navy-2); }
.icon-chip--gold { --chip-c: var(--c-gold); }
.icon-chip--state { --chip-c: var(--c-cat-state); }
.icon-chip--nation { --chip-c: var(--c-cat-nation); }
.icon-chip--world { --chip-c: var(--c-cat-world); }
.icon-chip--sport { --chip-c: var(--c-cat-sport); }
.icon-chip--ent { --chip-c: var(--c-cat-ent); }
.icon-chip--biz { --chip-c: var(--c-cat-biz); }
.icon-chip--opinion { --chip-c: var(--c-cat-opinion); }
.icon-chip--success { --chip-c: var(--c-success); }
.icon-chip--info { --chip-c: var(--c-info); }
.icon-chip--warning { --chip-c: var(--c-warning); }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-ui);
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  font-stretch: var(--stretch-ui);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out),
    transform var(--d-fast) var(--ease-out);
}

.btn .fi {
  transition: transform var(--d-base) var(--ease-out);
}

.btn:hover {
  --btn-bd: var(--c-ink-2);
}

.btn:hover .fi-rr-arrow-small-right,
.btn:hover .fi-rr-angle-small-right {
  transform: translateX(3px);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.btn--primary {
  --btn-bg: var(--c-brand);
  --btn-fg: #fff;
  --btn-bd: var(--c-brand);
  box-shadow: 0 6px 14px -8px rgb(200 0 122 / 0.75);
}

.btn--primary:hover {
  --btn-bg: var(--c-brand-deep);
  --btn-bd: var(--c-brand-deep);
}

.btn--dark {
  --btn-bg: var(--c-navy);
  --btn-fg: #fff;
  --btn-bd: var(--c-navy);
}

.btn--dark:hover {
  --btn-bg: var(--c-navy-2);
  --btn-bd: var(--c-navy-2);
}

.btn--gold {
  --btn-bg: var(--c-gold);
  --btn-fg: #fff;
  --btn-bd: var(--c-gold);
}

.btn--gold:hover {
  --btn-bg: var(--c-gold-deep);
  --btn-bd: var(--c-gold-deep);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
}

.btn--ghost:hover {
  --btn-bg: var(--c-paper-2);
  --btn-bd: transparent;
}

.btn--light {
  --btn-bg: rgb(255 255 255 / 0.08);
  --btn-fg: #fff;
  --btn-bd: rgb(255 255 255 / 0.35);
}

.btn--light:hover {
  --btn-bg: #fff;
  --btn-fg: var(--c-navy);
  --btn-bd: #fff;
}

.btn--danger {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-danger);
  --btn-bd: var(--c-danger-line);
}

.btn--danger:hover {
  --btn-bg: var(--c-danger);
  --btn-fg: #fff;
  --btn-bd: var(--c-danger);
}

.btn--sm {
  min-height: 2.25rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--t-xs);
}

.btn--lg {
  min-height: 3.25rem;
  padding: 0.7rem 1.6rem;
  font-size: var(--t-md);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: 2.75rem;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 2.25rem;
}

/* ---------- chips & badges ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.7em;
  border-radius: var(--r-pill);
  background: var(--c-brand-tint);
  color: var(--c-brand-deep);
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}

a.chip:hover {
  background: var(--c-brand);
  color: #fff;
}

.chip--navy {
  background: var(--c-navy-tint);
  color: var(--c-navy-2);
}

.chip--gold {
  background: var(--c-gold-tint);
  color: var(--c-gold-deep);
}

.chip--solid {
  background: var(--c-brand);
  color: #fff;
}

.chip--success { background: var(--c-success-tint); color: var(--c-success); }
.chip--warning { background: var(--c-warning-tint); color: var(--c-warning); }
.chip--info { background: var(--c-info-tint); color: var(--c-info); }
.chip--muted { background: var(--c-paper-2); color: var(--c-muted); }

/* ---------- forms ---------- */
.field {
  display: grid;
  gap: var(--s-1);
}

.field__label {
  font-size: var(--t-sm);
  font-weight: var(--w-semi);
  color: var(--c-ink-2);
}

.field__label .req {
  color: var(--c-brand);
  margin-inline-start: 2px;
}

.field__help {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

.field__error {
  font-size: var(--t-xs);
  font-weight: var(--w-semi);
  color: var(--c-danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--c-line-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--t-base);
  line-height: 1.4;
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out);
}

.textarea {
  min-height: 7rem;
  resize: vertical;
}

.select {
  appearance: none;
  padding-inline-end: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-subtle);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--c-subtle);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: var(--sh-focus);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea {
  border-color: var(--c-danger);
  background: #fffafa;
}

/* ---------- alerts ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--alert-c, var(--c-info));
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-size: var(--t-sm);
  box-shadow: var(--sh-1);
}

.alert .fi {
  color: var(--alert-c, var(--c-info));
  font-size: 1.2em;
  margin-top: 0.15em;
}

.alert--success { --alert-c: var(--c-success); }
.alert--error { --alert-c: var(--c-danger); }
.alert--warning { --alert-c: var(--c-warning); }
.alert--info { --alert-c: var(--c-info); }

/* ---------- reveal motion (public + CMS) ----------
   Content is visible by default. Only when JS has confirmed support and the
   user has not asked for reduced motion (html.motion-ok) do elements start
   hidden and animate in once, via IntersectionObserver in motion.js. */
.motion-ok [data-reveal] {
  opacity: 0;
  transform: translate3d(var(--rx, 0), var(--ry, var(--reveal-distance)), 0) scale(var(--rs, 1));
  transition:
    opacity var(--d-slow) var(--ease-out),
    transform var(--d-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ok [data-reveal="fade"] { --ry: 0; }
.motion-ok [data-reveal="left"] { --rx: calc(var(--reveal-distance) * -1.6); --ry: 0; }
.motion-ok [data-reveal="right"] { --rx: calc(var(--reveal-distance) * 1.6); --ry: 0; }
.motion-ok [data-reveal="zoom"] { --ry: 0; --rs: 0.96; }

.motion-ok [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* word-by-word headline reveal (words are wrapped by motion.js; never
   split below word level, which would break Kannada conjuncts) */
.motion-ok [data-reveal-words] .rw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.motion-ok [data-reveal-words].is-revealed .rw {
  opacity: 1;
  transform: none;
}

/* image mask reveal */
.motion-ok [data-reveal="image"] {
  --ry: 0;
  opacity: 1;
  clip-path: inset(0 0 100% 0 round var(--r-lg));
  transform: none;
  transition: clip-path 900ms var(--ease-out);
}

.motion-ok [data-reveal="image"].is-revealed {
  clip-path: inset(0 0 0 0 round var(--r-lg));
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .btn,
  .btn .fi,
  .icon-chip,
  .input,
  .select,
  .textarea {
    transition: none;
  }
}

@media print {
  body {
    background: #fff;
  }
}