/* KundliDost website — brand tokens mirror frontend/src/common/theme.ts */
:root {
  --bg: #1a1b3a;
  --surface: #232450;
  --surface-light: #2e2f63;
  --accent: #e8a93c;
  --accent-soft: #f2c879;
  --text: #f5f2e9;
  --muted: #a9a7c4;
  --border: #3a3b72;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", "Noto Sans Devanagari", Arial, sans-serif;
  line-height: 1.65;
}

.container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* Header */
header {
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
  background: rgba(26, 27, 58, 0.92);
  backdrop-filter: blur(8px);
  z-index: 10;
}
/* Vertical padding only — the shorthand `padding: 14px 0` used to reset the
   24px horizontal gutter this element inherits from .container (same
   specificity, declared later), so on phones the header sat flush against the
   screen edge. Desktop hid it behind .container's auto margins. */
.nav { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 40px; height: 40px; }
.brand-name { font-size: 20px; font-weight: 600; color: var(--text); }
.brand-name b { color: var(--accent); font-weight: 600; }
nav.links { display: flex; gap: 18px; }
/* inline-block + vertical padding so the tap target clears ~44px. As bare
   inline text these were 21px tall — under the 24px WCAG 2.5.8 minimum and
   well under what a thumb reliably hits. */
nav.links a {
  color: var(--muted); text-decoration: none; font-size: 14px;
  display: inline-block; padding: 12px 2px;
}
nav.links a:hover { color: var(--accent-soft); }

/* Hero */
.hero { text-align: center; padding: 88px 0 64px; }
.hero .mark { width: 108px; height: 108px; margin-bottom: 28px; }
.hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 600; line-height: 1.25; }
.hero h1 span { color: var(--accent); }
.hero p.tag { color: var(--muted); font-size: 18px; margin: 18px auto 8px; max-width: 560px; }
.hero p.hindi { color: var(--accent-soft); font-size: 16px; margin-bottom: 36px; }
.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  padding: 14px 36px;
  border-radius: 28px;
  text-decoration: none;
  font-size: 16px;
}
.cta:hover { background: var(--accent-soft); }
.cta-note { color: var(--muted); font-size: 13px; margin-top: 14px; }

/* Features */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; padding: 24px 0 72px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
}
.card .icon { font-size: 28px; margin-bottom: 12px; }
.card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--accent-soft); }
.card p { color: var(--muted); font-size: 14px; }

/* Sections */
section.block { padding: 48px 0; border-top: 1px solid var(--border); }
section.block h2 { font-size: 26px; font-weight: 600; margin-bottom: 16px; }
section.block h2 span { color: var(--accent); }
section.block p { color: var(--muted); max-width: 720px; }

/* Legal pages */
/* Same gutter fix as .nav — privacy/terms use <main class="container legal">. */
.legal { padding-top: 56px; padding-bottom: 72px; max-width: 780px; margin: 0 auto; }
.legal h1 { font-size: 30px; margin-bottom: 6px; }
.legal .updated { color: var(--muted); font-size: 13px; margin-bottom: 32px; }
.legal h2 { font-size: 19px; color: var(--accent-soft); margin: 32px 0 10px; }
.legal p, .legal li { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.legal ul { padding-left: 22px; }
.legal strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--accent); }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 32px 0 44px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; }
footer p { color: var(--muted); font-size: 13px; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--muted); font-size: 13px; text-decoration: none; display: inline-block; padding: 9px 2px; }
footer a:hover { color: var(--accent-soft); }
.disclaimer { text-align: center; color: var(--muted); font-size: 13px; padding: 0 0 28px; }

/* ---------------------------------------------------------------------------
   Content links. Previously only .legal a, nav.links a and footer a were
   styled, so links inside section.block fell back to the browser default blue
   — unreadable on this background.

   Gold alone is not enough: #f2c879 is 10.5:1 against the page (fine) but only
   ~1.5:1 against the muted body text around it, and WCAG needs 3:1 for links
   distinguished by colour alone. The underline satisfies 1.4.1 instead, which
   is the standard fix. --------------------------------------------------- */
main p a, main li a, main h3 a, .legal a {
  color: var(--accent-soft);
  text-decoration: underline;
  text-decoration-color: rgba(232, 169, 60, 0.45);
  text-underline-offset: 3px;
}
main p a:hover, main li a:hover, main h3 a:hover, .legal a:hover {
  color: #ffdca0;
  text-decoration-color: var(--accent);
}

/* Long-form reading text — the horoscope and panchang prose. Full --text
   rather than --muted: muted passes contrast but is tiring for paragraphs. */
.lead { color: var(--text); font-size: 1.1rem; line-height: 1.9; }
section.block p.lead { color: var(--text); }

/* Navigation chips (rashis, cities). These are navigation, not prose, so they
   get a button affordance instead of underlines — which also stops a 45-city
   list reading as a wall of underlined text. */
.linklist { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.linklist a, .linklist strong {
  display: inline-block;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent-soft);
  text-decoration: none;
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s;
}
.linklist a:hover { background: var(--surface-light); border-color: var(--accent); color: #ffdca0; }
.linklist strong { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: 600; }

/* Key/value rows — replaces <p> with <br> for panchang data. */
.kv { width: 100%; max-width: 620px; border-collapse: collapse; margin-top: 8px; }
.kv td { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--muted); }
.kv tr:last-child td { border-bottom: none; }
.kv td:last-child { text-align: right; color: var(--text); font-weight: 500; }

/* The one number people came for. */
.highlight {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 18px;
}
.highlight .label { color: var(--muted); font-size: 14px; margin-bottom: 4px; }
.highlight .value { color: var(--accent-soft); font-size: clamp(24px, 4vw, 32px); font-weight: 600; line-height: 1.3; }
.highlight.soft { border-left-color: var(--accent-soft); }

/* SEO page headers are text-only — no need for hero's big top padding. */
.hero.compact { padding: 44px 0 8px; text-align: left; }
.hero.compact h1 { font-size: clamp(26px, 4.4vw, 38px); }
.hero.compact p.tag { margin-left: 0; max-width: 720px; }

.faq h3 { font-size: 17px; color: var(--accent-soft); margin: 22px 0 6px; }

/* Call-to-action panel. The button used to sit inline in a <p> with no top
   margin, left-aligned in a 1040px column — it read as stray text rather than
   the primary action. Boxed and centred, it becomes the obvious next step. */
.cta-panel {
  background: linear-gradient(160deg, rgba(232, 169, 60, 0.10), rgba(35, 36, 80, 0.55));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 40px 32px;
  margin: 52px 0 8px;
  text-align: center;
}
.cta-panel h2 { font-size: clamp(21px, 3.2vw, 27px); margin-bottom: 12px; }
.cta-panel p { color: var(--muted); max-width: 620px; margin: 0 auto 26px; }
.cta-panel .cta { margin: 0; }
.cta-panel .cta-sub { font-size: 13px; margin: 16px auto 0; color: var(--muted); }

/* Whole-card links (hub grids). Card titles alone were ~25px tall targets;
   making the card itself the anchor gives a large, obvious hit area. */
a.card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
a.card:hover { border-color: var(--accent); background: var(--surface-light); transform: translateY(-2px); }
a.card h3 { color: var(--accent-soft); text-decoration: none; }
a.card .more { color: var(--accent-soft); font-size: 14px; margin-top: 10px; display: block; }

/* Standalone navigation links ("See all cities →"). WCAG 2.5.8 exempts links
   inline in a sentence, but these stand alone, so they get a real target. */
.textlink { display: inline-block; padding: 11px 0; }

@media (max-width: 560px) {
  /* Was display:none, which left the SEO pages with no navigation at all on
     phones — where most of this traffic lands. */
  .nav { flex-wrap: wrap; row-gap: 8px; }
  /* width:100% so the wrapped row is bounded by the container padding instead
     of overflowing it. */
  nav.links { width: 100%; gap: 14px; flex-wrap: wrap; }
  nav.links a { font-size: 13px; white-space: nowrap; }
  .hero { padding: 56px 0 40px; }
  .hero.compact { padding: 28px 0 4px; }
  .linklist a, .linklist strong { padding: 10px 15px; font-size: 14px; }
  /* The Hindi CTA label wrapped to two lines at 390px — trim padding and size
     so the primary action stays a single, confident line. */
  .cta { padding: 15px 22px; font-size: 15px; }
  .cta-panel { padding: 32px 20px; margin: 40px 0 4px; border-radius: 16px; }
}