/* ===========================================================================
   AnkJyotish v2 — Base + shell (Magic Square)
   =========================================================================== */

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:var(--lh);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv05";
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--sindoor); color:var(--bone); }
:focus-visible { outline:2px solid var(--ring); outline-offset:3px; border-radius:2px; }
button { font:inherit; color:inherit; }

/* ---- Type ---------------------------------------------------------------- */
h1,h2,h3,h4 {
  font-family:var(--font-display);
  font-optical-sizing:auto;
  color:var(--ink);
  line-height:var(--lh-tight);
  font-weight:500;
  letter-spacing:-.01em;
}
h1 { font-size:var(--fs-h1); font-weight:600; }
h2 { font-size:var(--fs-h2); }
h3 { font-size:var(--fs-h3); }
p { max-width:68ch; }

/* eyebrow / label — a structural device used consistently */
.eyebrow {
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:var(--fs-2xs); color:var(--accent-ink);
}
.eyebrow::before {
  content:""; width:1.6em; height:1px; background:var(--accent); opacity:.6;
}
.muted   { color:var(--text-muted); }
.faint   { color:var(--text-faint); }
.accent  { color:var(--accent); }
.tnum    { font-variant-numeric:tabular-nums; }

/* ---- Layout -------------------------------------------------------------- */
.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--sp-5); }
.container--narrow { max-width:var(--container-narrow); }
.container--wide   { max-width:var(--container-wide); }
.section { padding-block:var(--sp-7); }
.hidden { display:none !important; }

/* ---- Header -------------------------------------------------------------- */
.site-header { border-bottom:1px solid var(--rule); background:var(--bone); position:sticky; top:0; z-index:40; }
.site-header__inner { display:flex; align-items:center; gap:var(--sp-5); min-height:66px; }
.brand { display:flex; align-items:center; gap:.7rem; }
.brand__mark { width:26px; height:26px; flex:none; color:var(--ink); }
.brand__mark .on { fill:var(--sindoor); }
.brand__name { font-family:var(--font-display); font-weight:600; font-size:1.12rem; letter-spacing:-.01em; }
.brand__name b { color:var(--sindoor); font-weight:600; }

.nav { margin-left:auto; display:flex; align-items:center; gap:var(--sp-5); }
.nav a {
  font-size:var(--fs-sm); font-weight:500; color:var(--ink-2);
  padding-block:.4rem; position:relative; transition:color var(--t-fast);
}
.nav a:hover { color:var(--ink); }
.nav a.is-active { color:var(--ink); }
.nav a.is-active::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--sindoor);
}
.nav-toggle { display:none; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --bg-btn:var(--ink); --fg-btn:var(--bone);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:var(--fs-base); line-height:1;
  padding:.85rem 1.5rem; border:1px solid var(--bg-btn); border-radius:var(--r-pill); cursor:pointer;
  background:var(--bg-btn); color:var(--fg-btn);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t-fast);
}
.btn:hover { --bg-btn:var(--sindoor); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn--block { width:100%; }
.btn--ghost {
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.btn--ghost:hover { background:transparent; border-color:var(--ink); color:var(--sindoor); transform:none; }
.linklike { color:var(--accent-ink); font-weight:600; border-bottom:1px solid currentColor; padding-bottom:1px; }
.linklike:hover { color:var(--ink); }

/* ---- Forms (underline / editorial) -------------------------------------- */
.form-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--sp-4) var(--sp-5); }
.field { display:flex; flex-direction:column; gap:.35rem; }
.col-3 { grid-column:span 3; } .col-4 { grid-column:span 4; }
.col-6 { grid-column:span 6; } .col-12 { grid-column:span 12; }
.label { font-size:var(--fs-2xs); font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); }

.input {
  width:100%; font-family:var(--font-body); font-size:var(--fs-lg); color:var(--ink);
  background:transparent; border:0; border-bottom:1.5px solid var(--line-2);
  padding:.5rem .1rem; transition:border-color var(--t-fast);
}
.input::placeholder { color:var(--ink-3); }
.input:hover { border-color:var(--ink-3); }
.input:focus { outline:none; border-color:var(--sindoor); }
.input--error { border-color:var(--red); }
.field__error { font-size:var(--fs-xs); color:var(--red); }
.input[type="date"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }

/* segmented (gender) — two ink-outlined pills */
.segmented { display:inline-flex; border:1.5px solid var(--line-2); border-radius:var(--r-pill); padding:3px; width:fit-content; }
.segmented input { position:absolute; opacity:0; pointer-events:none; }
.segmented label { padding:.5rem 1.25rem; border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); cursor:pointer; transition:all var(--t-fast); }
.segmented label:hover { color:var(--ink); }
.segmented input:checked + label { background:var(--ink); color:var(--bone); }
.segmented input:focus-visible + label { outline:2px solid var(--ring); outline-offset:2px; }

/* ---- Coming soon / 404 --------------------------------------------------- */
.standalone { min-height:56vh; display:grid; place-content:center; justify-items:center; text-align:center; gap:var(--sp-4); }
.standalone h1 { font-size:var(--fs-hero); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--rule); margin-top:var(--sp-8); }
.site-footer__inner { display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; justify-content:space-between; padding-block:var(--sp-5); color:var(--ink-2); font-size:var(--fs-sm); }
.site-footer .heart { color:var(--sindoor); }
.site-footer a { border-bottom:1px solid var(--line-2); }
.site-footer a:hover { border-color:var(--ink); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:760px) {
  .col-3,.col-4,.col-6 { grid-column:span 12; }
  .nav {
    display:none; position:absolute; top:66px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--bone); border-bottom:1px solid var(--rule); padding:var(--sp-3) var(--sp-5);
  }
  .nav.is-open { display:flex; }
  .nav a { width:100%; padding:.7rem 0; border-bottom:1px solid var(--rule); }
  .nav a.is-active::after { display:none; }
  .nav-toggle {
    display:inline-flex; margin-left:auto; background:transparent; border:1px solid var(--line-2);
    color:var(--ink); border-radius:var(--r); padding:.45rem .65rem; cursor:pointer; font-size:1.1rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}