/* Natpukovil — component styles. Every colour, length and radius is a token. */
.nk-root, .nk-root * { box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--ink); background: var(--surface); font-size: 17px; line-height: 28px; margin: 0; }

/* ---------- metal text: the emblem's gradient, for display type on band only ---------- */
.nk-metal { background: linear-gradient(180deg, var(--highlight-gold) 0%, var(--antique-gold) 55%, var(--warm-bronze) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Button ---------- */
.nk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: 600; font-size: 15px; line-height: 20px; padding: 10px var(--space-6); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.nk-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nk-btn-lg { font-size: 17px; line-height: 24px; padding: var(--space-3) var(--space-8); }
.nk-btn-primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.nk-btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.nk-btn-secondary { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.nk-btn-secondary:hover { border-color: var(--ink); }
.nk-btn-ghost { background: transparent; color: var(--link); padding-left: var(--space-2); padding-right: var(--space-2); }
.nk-btn-ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
.nk-on-band .nk-btn:focus-visible { outline-color: var(--focus-on-band); }
.nk-on-band .nk-btn-secondary { color: var(--on-band); border-color: var(--band-accent); }
.nk-on-band .nk-btn-secondary:hover { background: rgba(255,210,122,0.08); }
.nk-on-band .nk-btn-ghost { color: var(--band-accent); }
.nk-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Badge ---------- */
.nk-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 13px; line-height: 20px; font-weight: 600; padding: 0 var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--ink-muted); background: var(--surface-raised); }
.nk-badge-gold { background: var(--action); border-color: var(--action); color: var(--on-action); }
.nk-badge-success { background: var(--success-soft); border-color: transparent; color: var(--success); }
.nk-badge-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.nk-badge-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }

/* ---------- OrnamentDivider ---------- */
.nk-divider { display: flex; align-items: center; gap: var(--space-2); color: var(--warm-bronze); margin: 0 auto; }
.nk-divider-line { flex: 1; height: 1px; background: currentColor; position: relative; }
.nk-divider-line::before { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: var(--radius-full); background: currentColor; }
.nk-divider-line:first-child::before { left: 0; }
.nk-divider-line:last-child::before { right: 0; }
.nk-divider svg { flex: none; display: block; }
.nk-on-band .nk-divider, .nk-divider.nk-on-band { color: var(--antique-gold); }

/* ---------- SectionHeading ---------- */
.nk-sh { display: flex; flex-direction: column; gap: var(--space-2); max-width: var(--prose-max); }
.nk-sh-center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.nk-sh-eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-bronze); margin: 0; }
.nk-sh-tamil { font-family: var(--font-tamil); font-size: 22px; line-height: 36px; font-weight: 600; color: var(--ink-muted); margin: 0; }
.nk-sh-title { font-family: var(--font-display); font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: .02em; color: var(--ink); margin: 0; }
.nk-sh-lede { font-size: 20px; line-height: 32px; color: var(--ink-muted); margin: var(--space-2) 0 0; }
.nk-sh .nk-divider { width: 200px; margin: var(--space-2) 0 0; }
.nk-sh-center .nk-divider { margin: var(--space-2) auto 0; }
.nk-on-band .nk-sh-eyebrow { color: var(--band-accent); }
.nk-on-band .nk-sh-tamil, .nk-on-band .nk-sh-lede { color: var(--on-band-muted); }
.nk-on-band .nk-sh-title { color: var(--on-band); }

/* ---------- Band (header, hero, footer share it) ---------- */
.nk-band { background: var(--band); color: var(--on-band); }

/* ---------- SiteHeader ---------- */
.nk-header { display: flex; align-items: center; gap: var(--space-6); height: var(--header-height); padding: 0 var(--space-8); border-bottom: 1px solid var(--band-rule); }
.nk-header-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; min-width: 0; }
.nk-header-brand img { width: 48px; height: 48px; border-radius: var(--radius-full); flex: none; }
.nk-header-names { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.nk-header-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: .08em; color: var(--band-accent); }
.nk-header-tamil { font-family: var(--font-tamil); font-size: 13px; line-height: 20px; color: var(--on-band-muted); }
.nk-header-nav { display: flex; gap: var(--space-6); margin-left: auto; }
.nk-header-nav a { color: var(--on-band); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 20px; padding: var(--space-1) 0; border-bottom: 2px solid transparent; }
.nk-header-nav a:hover { color: var(--band-accent); }
.nk-header-nav a[aria-current="page"] { color: var(--band-accent); border-bottom-color: var(--band-accent); }
.nk-header-nav a:focus-visible, .nk-header-brand:focus-visible { outline: 2px solid var(--focus-on-band); outline-offset: 4px; }
.nk-header-menu { display: none; margin-left: auto; background: none; border: 1px solid var(--band-accent); color: var(--band-accent); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3); font: 600 15px/20px var(--font-sans); }
@media (max-width: 760px) {
  .nk-header { padding: 0 var(--space-4); height: 64px; }
  .nk-header-nav, .nk-header .nk-btn { display: none; }
  .nk-header-menu { display: inline-block; }
}

/* ---------- Hero ---------- */
.nk-hero { position: relative; overflow: hidden; padding: var(--space-24) var(--space-8); text-align: center; background: radial-gradient(ellipse at 50% 35%, var(--smoky-brown) 0%, var(--band) 70%); }
.nk-hero-inner { position: relative; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.nk-hero-emblem { width: 200px; height: 200px; border-radius: var(--radius-full); box-shadow: var(--shadow-glow); margin-bottom: var(--space-4); }
.nk-hero-eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--band-accent); margin: 0; }
.nk-hero-tamil { font-family: var(--font-tamil); font-size: 36px; line-height: 56px; font-weight: 600; color: var(--band-accent); margin: 0; }
.nk-hero-title { font-family: var(--font-display); font-size: 64px; line-height: 72px; font-weight: 600; letter-spacing: .04em; margin: 0; }
.nk-hero-lede { font-size: 20px; line-height: 32px; color: var(--on-band-muted); margin: 0; max-width: var(--prose-max); }
.nk-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-top: var(--space-4); }
.nk-hero .nk-divider { width: 240px; }
@media (max-width: 760px) {
  .nk-hero { padding: var(--space-16) var(--space-4); }
  .nk-hero-emblem { width: 140px; height: 140px; }
  .nk-hero-title { font-size: 40px; line-height: 48px; }
  .nk-hero-tamil { font-size: 26px; line-height: 40px; }
}

/* ---------- Card ---------- */
.nk-card { display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; color: inherit; text-decoration: none; }
a.nk-card:hover { border-color: var(--border-strong); }
a.nk-card:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nk-card-media { aspect-ratio: 16 / 9; background: var(--surface-sunken); overflow: hidden; }
.nk-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nk-card-body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); flex: 1; }
.nk-card-eyebrow { font-family: var(--font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--warm-bronze); margin: 0; }
.nk-card-title { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: .02em; margin: 0; color: var(--ink); }
.nk-card-tamil { font-family: var(--font-tamil); font-size: 15px; line-height: 26px; color: var(--ink-muted); margin: 0; }
.nk-card-text { font-size: 15px; line-height: 24px; color: var(--ink-muted); margin: 0; }
.nk-card-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.nk-card-featured { box-shadow: var(--shadow-glow); border-color: var(--antique-gold); }
[data-theme="sanctum"] .nk-card-eyebrow, [data-theme="sanctum"] .nk-sh-eyebrow { color: var(--antique-gold); }

/* ---------- TimingsTable ---------- */
.nk-timings { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); }
.nk-timings-title { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; margin: 0 0 var(--space-4); }
.nk-timings table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.nk-timings th, .nk-timings td { text-align: left; padding: var(--space-3) 0; border-top: 1px solid var(--border); vertical-align: top; }
.nk-timings tr:first-child th, .nk-timings tr:first-child td { border-top: 0; }
.nk-timings th { font-weight: 600; color: var(--ink); }
.nk-timings th span { display: block; font-family: var(--font-tamil); font-weight: 400; font-size: 13px; line-height: 22px; color: var(--ink-muted); }
.nk-timings td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; padding-left: var(--space-4); }
.nk-timings td small { display: block; font-weight: 400; font-size: 13px; line-height: 20px; color: var(--ink-muted); white-space: normal; }

/* ---------- DonateCard ---------- */
.nk-donate { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.nk-donate-head h3 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; margin: 0; }
.nk-donate-head p { margin: 0; }
.nk-donate-tamil { font-family: var(--font-tamil); font-size: 15px; line-height: 26px; color: var(--ink-muted); }
.nk-donate-desc { font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.nk-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); border: 0; padding: 0; margin: 0; }
.nk-chip { font: 600 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: transparent; color: var(--ink); cursor: pointer; }
.nk-chip:hover { border-color: var(--ink); }
.nk-chip[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.nk-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nk-donate-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.nk-donate .nk-btn { align-self: stretch; }

/* ---------- TextField ---------- */
.nk-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nk-field label { font-weight: 600; font-size: 15px; line-height: 20px; color: var(--ink); }
.nk-field input, .nk-field textarea, .nk-field select { font: 400 17px/24px var(--font-sans); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px var(--space-3); width: 100%; }
.nk-field input::placeholder, .nk-field textarea::placeholder { color: var(--ink-muted); }
.nk-field input:focus-visible, .nk-field textarea:focus-visible, .nk-field select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.nk-field-hint { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.nk-field-error input, .nk-field-error textarea { border-color: var(--danger); }
.nk-field-error .nk-field-hint { color: var(--danger); font-weight: 600; }

/* ---------- Alert ---------- */
.nk-alert { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); color: var(--ink); font-size: 15px; line-height: 24px; border: 1px solid var(--border); }
.nk-alert svg { flex: none; margin-top: 2px; }
.nk-alert-title { font-weight: 600; margin: 0; }
.nk-alert-body { margin: 0; }
.nk-alert-info svg { color: var(--warm-bronze); }
.nk-alert-success { background: var(--success-soft); border-color: transparent; }
.nk-alert-success svg, .nk-alert-success .nk-alert-title { color: var(--success); }
.nk-alert-danger { background: var(--danger-soft); border-color: transparent; }
.nk-alert-danger svg, .nk-alert-danger .nk-alert-title { color: var(--danger); }
.nk-alert-warning { background: var(--warning-soft); border-color: transparent; }
.nk-alert-warning svg, .nk-alert-warning .nk-alert-title { color: var(--warning); }
[data-theme="sanctum"] .nk-alert-info svg { color: var(--antique-gold); }

/* ---------- SocialLinks ---------- */
.nk-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nk-social-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; line-height: 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); transition: border-color .15s ease, background-color .15s ease; }
.nk-social-icons .nk-social-link { width: 44px; height: 44px; }
.nk-social-labels .nk-social-link { min-height: 44px; padding: 0 var(--space-4) 0 var(--space-3); }
.nk-social-link:hover { border-color: var(--ink); background: var(--surface-sunken); }
.nk-social-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nk-social-img { display: block; object-fit: contain; }
.nk-on-band .nk-social-link { color: var(--band-accent); border-color: var(--band-rule); }
.nk-on-band .nk-social-link:hover { border-color: var(--band-accent); background: rgba(255,210,122,0.08); }
.nk-on-band .nk-social-link:focus-visible { outline-color: var(--focus-on-band); }
.nk-footer-social { margin-top: var(--space-4); }
/* keep the icon row horizontal inside lists that stack (footer columns, menus) */
.nk-footer ul.nk-social, ul.nk-social { flex-direction: row; flex-wrap: wrap; align-items: center; }
.nk-footer .nk-social li { display: flex; }
.nk-footer a.nk-social-link, .nk-footer a.nk-social-link:hover { text-decoration: none; }

/* ---------- SiteFooter ---------- */
.nk-footer { padding: var(--space-16) var(--space-8) var(--space-8); }
.nk-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-8); max-width: var(--content-max); margin: 0 auto; }
.nk-footer-brand { display: flex; gap: var(--space-4); align-items: flex-start; }
.nk-footer-brand img { width: 72px; height: 72px; border-radius: var(--radius-full); flex: none; }
.nk-footer-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 24px; letter-spacing: .06em; color: var(--band-accent); margin: 0; }
.nk-footer-tamil { font-family: var(--font-tamil); font-size: 13px; line-height: 22px; color: var(--on-band-muted); margin: 0; }
.nk-footer-addr { font-size: 15px; line-height: 24px; color: var(--on-band-muted); margin: var(--space-2) 0 0; font-style: normal; }
.nk-footer h4 { font-family: var(--font-display); font-size: 13px; line-height: 16px; letter-spacing: .18em; text-transform: uppercase; color: var(--band-accent); margin: 0 0 var(--space-3); }
.nk-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.nk-footer li, .nk-footer a { font-size: 15px; line-height: 24px; color: var(--on-band); text-decoration: none; }
.nk-footer a:hover { color: var(--band-accent); text-decoration: underline; text-underline-offset: 3px; }
.nk-footer a:focus-visible { outline: 2px solid var(--focus-on-band); outline-offset: 2px; }
.nk-footer-legal { max-width: var(--content-max); margin: var(--space-12) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--band-rule); font-size: 13px; line-height: 20px; color: var(--on-band-muted); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 760px) { .nk-footer { padding: var(--space-12) var(--space-4) var(--space-6); } .nk-footer-grid { grid-template-columns: 1fr; } }