/* Divine Jyotish Vaibhav - devotional saffron/red identity
   palette: temple-red #a51212 | deep #7d0d0d | marigold #f2a51c
   gold #c8901f | cream #fdf4ea | ink #3a2020 | line #e9d5c2 */
:root{
  --red:#a51212; --red-deep:#7d0d0d; --marigold:#f2a51c; --gold:#c8901f;
  --cream:#fdf4ea; --card:#ffffff; --ink:#3a2020; --muted:#8a6f63;
  --line:#e9d5c2; --shadow:0 6px 24px rgba(125,13,13,.10);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Mukta",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  line-height:1.6;font-size:17px}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:"Marcellus",Georgia,serif;font-weight:400;color:var(--red-deep);
  line-height:1.2;letter-spacing:.2px}

/* header */
.site-header{background:linear-gradient(180deg,var(--red) 0%,var(--red-deep) 100%);
  color:#fff;padding:14px 20px;box-shadow:var(--shadow);position:sticky;top:0;z-index:20}
.brand{font-family:"Yatra One",cursive;font-size:1.9rem;text-align:center;
  letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.25)}
.brand a{color:#fff}
.brand a:hover{text-decoration:none;color:#ffe9c7}
.om{color:var(--marigold);margin:0 .4rem;font-family:serif}
.main-nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-top:10px}
.main-nav a{color:#ffe9c7;font-weight:600;font-size:.98rem;padding:4px 2px;border-bottom:2px solid transparent}
.main-nav a:hover{color:#fff;border-bottom-color:var(--marigold);text-decoration:none}
.nav-cta{background:var(--marigold);color:#5a2d00 !important;border-radius:20px;
  padding:4px 16px !important}
.nav-cta:hover{background:#ffb733;border-bottom-color:transparent !important}

/* hero */
.hero{background:
   radial-gradient(1200px 300px at 50% -60px, rgba(242,165,28,.20), transparent),
   var(--cream);
  text-align:center;padding:64px 20px 54px;border-bottom:3px solid var(--line)}
.hero h1{font-size:2.9rem;margin:0 0 10px}
.hero .tagline{font-size:1.15rem;color:var(--muted);max-width:640px;margin:0 auto 26px}
.hero-clean{min-height:56vh;display:flex;flex-direction:column;justify-content:center;
  align-items:center;border-bottom:none}

/* homepage left/right tab sidebars (logged-in users only) */
.home-layout{display:grid;grid-template-columns:200px 1fr 200px;gap:24px;
  align-items:start;max-width:1100px;margin:0 auto;padding:40px 20px}
.home-hero{min-height:0;padding:24px 0;border-bottom:none}
.home-side{display:flex;flex-direction:column;gap:10px;padding-top:12px}
.home-side a{display:block;padding:12px 16px;border-radius:10px;background:var(--card);
  border:1px solid var(--line);border-left:4px solid var(--marigold);font-weight:600;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:transform .08s ease}
.home-side a:hover{transform:translateY(-1px)}
@media (max-width:760px){
  .home-layout{grid-template-columns:1fr;padding:24px 16px}
  .home-hero{order:1}
  .home-side-left{order:2}
  .home-side-right{order:3}
}

/* buttons */
.btn{display:inline-block;background:linear-gradient(180deg,var(--marigold),var(--gold));
  color:#5a2d00;font-weight:700;border:none;border-radius:26px;padding:13px 30px;
  font-size:1.05rem;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s ease}
.btn:hover{transform:translateY(-1px);text-decoration:none;filter:brightness(1.04)}
.btn-outline{background:#fff;color:var(--red);border:2px solid var(--red)}
.btn-sm{padding:6px 16px;font-size:.8rem;border-radius:18px}

/* layout */
.wrap{max-width:1000px;margin:0 auto;padding:36px 20px}
.narrow{max-width:560px}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:28px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.section-eyebrow{color:var(--gold);font-weight:700;letter-spacing:2px;text-transform:uppercase;font-size:.8rem}

/* forms */
label{display:block;font-weight:600;margin:14px 0 5px}
input,select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus{outline:3px solid rgba(242,165,28,.45);border-color:var(--gold)}
.row{display:flex;gap:12px}.row>div{flex:1}
.checkbox-row{display:flex;align-items:center;gap:10px;margin-top:16px}
.checkbox-row input{width:auto}
.radio-row{display:flex;gap:22px;margin-top:6px}
.radio-row label{display:flex;align-items:center;gap:8px;font-weight:600;margin:0}
.radio-row input{width:auto}

/* tables */
table{width:100%;border-collapse:collapse;margin-top:14px;font-size:.95rem;background:#fff}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left}
th{background:#fae9d3;color:var(--red-deep);font-weight:700}
tr:nth-child(even) td{background:#fdf7ef}

/* misc */
.flash-wrap{max-width:1000px;margin:16px auto 0;padding:0 20px}
.flash{background:#fff3d6;border:1px solid var(--gold);color:#6b4a00;
  padding:11px 16px;border-radius:10px;margin-bottom:8px}
.muted{color:var(--muted)}
.badge{display:inline-block;background:var(--red);color:#fff;border-radius:20px;
  padding:2px 12px;font-size:.8rem;font-weight:700}
.notice{background:#fff;border:1px dashed var(--gold);border-radius:12px;padding:18px;margin-top:18px}
.autocomplete{position:relative}
.suggestions{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);
  border-radius:0 0 10px 10px;max-height:240px;overflow:auto;z-index:5;box-shadow:var(--shadow)}
.suggestions div{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.suggestions div:hover,.suggestions .active{background:#fae9d3}

/* footer */
.site-footer{background:var(--red-deep);color:#f6dcc4;text-align:center;padding:26px 20px;margin-top:50px}
.site-footer p{margin:4px 0}
.site-footer .muted{color:#e0b79b;font-size:.85rem}

@media (max-width:560px){
  .brand{font-size:1.4rem}.hero h1{font-size:2.1rem}.row{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* ---- Kundli diagram ---- */
.dg-wrap{margin:20px 0 6px}
.dg-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:12px}
.dg-toggle .btn-outline{padding:6px 15px;font-size:.95rem;margin-right:6px}
.dg-fromlabel{font-weight:600}
.dg-fromlabel select{width:auto;display:inline-block;margin-left:6px}
.dg-holder{max-width:440px}
.dg-svg{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
.dg-frame{fill:none;stroke:var(--red-deep);stroke-width:.6}
.dg-grid{stroke:var(--line);stroke-width:.5}
.dg-center{fill:#fdf7ef;stroke:var(--red-deep);stroke-width:.6}
.dg-lagna{stroke:var(--red);stroke-width:1.1}
.dg-sign{font-size:3px;fill:var(--gold);font-weight:700}
.dg-house{font-size:3px;fill:var(--muted)}
.dg-planet{font-size:4.2px;fill:var(--red-deep);font-weight:700;text-anchor:middle;cursor:pointer}
.dg-planet:hover{fill:var(--marigold)}
.dg-planet-sm{font-size:3.3px;fill:var(--red-deep);font-weight:700;text-anchor:middle;cursor:pointer}
.dg-planet-sm:hover{fill:var(--marigold)}
.dg-tip{position:absolute;display:none;z-index:50;background:#2a1414;color:#fff;
  padding:8px 11px;border-radius:8px;font-size:.85rem;line-height:1.45;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:230px}

/* ---- Lagna row + dasha drill-down ---- */
.lagna-row td{background:#fbe7d0 !important;font-weight:700}
.ds-tree{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin-top:8px}
.ds-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--line);font-size:.95rem}
.ds-row:hover{background:#fdf7ef}
.ds-tw{width:14px;display:inline-block;color:var(--gold);font-weight:700;text-align:center}
.ds-lbl{color:var(--muted);font-size:.78rem}
.ds-dt{margin-left:auto;color:var(--muted);font-size:.85rem;white-space:nowrap}
.ds-row.ds-cur{background:#fff3d6}
.ds-children{background:#fffdf9}

/* ---- navigation dropdowns (added for Muhurt/Kundali/Numerology menus) ---- */
.nav-drop{position:relative;display:inline-block}
.nav-drop-btn{background:none;border:0;cursor:pointer;color:#ffe9c7;font-weight:600;
  font-size:.98rem;font-family:inherit;padding:4px 2px;border-bottom:2px solid transparent}
.nav-drop-btn:hover{color:#fff;border-bottom-color:var(--marigold)}
.nav-drop .caret{font-size:.7em;opacity:.85}
.nav-menu{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);
  min-width:200px;background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:6px;display:none;z-index:30}
.nav-drop.open .nav-menu{display:block}
.nav-menu a{display:block;color:var(--ink);font-weight:600;padding:9px 14px;border-radius:8px;
  border-bottom:0;font-size:.95rem}
.nav-menu a:hover{background:#fae9d3;color:var(--red-deep);text-decoration:none}
.nav-menu::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%) rotate(45deg);
  width:12px;height:12px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line)}
@media (max-width:760px){
  .nav-menu{position:static;transform:none;box-shadow:none;border:0;padding:0 0 0 14px;
    min-width:0;background:transparent}
  .nav-menu::before{display:none}
  .nav-menu a{color:#ffe9c7;padding:5px 2px}
  .nav-menu a:hover{background:transparent;color:#fff}
  .nav-drop{display:block;width:100%;text-align:center}
}

/* ---- premium chart extras: D9 / transit / vargas / ashtakavarga ---- */
.xtra-charts{display:flex;flex-wrap:wrap;gap:24px;margin:10px 0 6px}
.xtra-chart{flex:1 1 320px;max-width:440px}
.xtra-cap{font-weight:700;color:var(--red-deep);margin-bottom:6px;text-align:center}
.varga-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.varga-tab{background:#fff;border:1px solid var(--red);color:var(--red);border-radius:18px;
  padding:5px 14px;font-size:.9rem;font-weight:600;cursor:pointer;font-family:inherit}
.varga-tab.on,.varga-tab:hover{background:var(--red);color:#fff}
table.akv{font-size:.9rem}
table.akv td,table.akv th{text-align:center;padding:6px 8px}
table.akv .tot{font-weight:700;background:#fae9d3}
table.akv tr.sav td{font-weight:700;background:#fff3d6}
@media print{
  .varga-tabs,.dg-controls{display:none !important}
  .xtra-charts{display:block}
  .xtra-chart{max-width:340px;page-break-inside:avoid}
}

/* ============================================================
   MOBILE  -  hamburger nav + table/chart handling for phones
   ============================================================ */
.nav-toggle{display:none;position:absolute;right:16px;top:16px;
  width:42px;height:38px;background:rgba(0,0,0,.12);border:0;border-radius:9px;
  cursor:pointer;padding:9px 8px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:3px;background:#fff;border-radius:2px;
  transition:transform .2s,opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:760px){
  .site-header{position:relative;padding:14px 16px}
  .nav-toggle{display:flex}
  .brand{font-size:1.35rem;padding-right:48px}
  /* nav hidden until hamburger opens it */
  .main-nav{display:none;flex-direction:column;align-items:stretch;gap:2px;margin-top:14px}
  .main-nav.open{display:flex}
  .main-nav > a,.nav-drop-btn{display:block;width:100%;text-align:center;
    padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.15)}
  .nav-cta{margin-top:8px;align-self:center;width:auto;padding:8px 26px !important}
  .nav-drop{width:100%}
  .nav-drop-btn{border-bottom:1px solid rgba(255,255,255,.15) !important}

  /* wide tables: let them scroll sideways instead of breaking the layout */
  main table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .wide{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* charts fill the width */
  .dg-holder,.xtra-chart{max-width:100%}
  .xtra-charts{gap:28px}

  /* comfortable tap targets + readable base size */
  .btn,.varga-tab,.nav-cta{min-height:42px}
  body{font-size:16px}
  .wrap{padding:22px 14px}
  h1{font-size:1.8rem}
}

@media (max-width:420px){
  .brand{font-size:1.15rem}
  .varga-tab{font-size:.82rem;padding:6px 11px}
  table.akv td,table.akv th{padding:5px 6px;font-size:.82rem}
}

/* ============================================================
   GLOBAL PRINT  -  hide site chrome on every printed page
   ============================================================ */
@media print{
  /* the menu, header brand and footer never belong in a printout */
  .site-header, .main-nav, .nav-toggle, .site-footer, .flash-wrap,
  nav, header, footer, .no-print, .dj-bar, .dg-controls, .varga-tabs{
    display:none !important;
  }
  body{background:#fff !important;color:#000 !important}
  main, .wrap{margin:0 !important;padding:0 !important;max-width:100% !important}
  a[href]:after{content:"" !important}          /* no URL noise */
  @page{ margin:12mm 10mm; }
}

/* ---- golden Ganesha divider between header and body ---- */
.ganesha-divider{
  display:flex; align-items:center; justify-content:center; gap:0;
  margin:6px 0 0; padding:0; position:relative; z-index:5;
}
.ganesha-divider .gd-line{
  flex:1; height:3px; max-width:38%;
  background:linear-gradient(90deg, transparent, #e0a83a 18%, #ffe9a8 50%, #e0a83a 82%, transparent);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.ganesha-divider .gd-icon{
  width:74px; height:74px; margin:0 10px;   /* centred on the line, fully visible */
  border-radius:50%;
  background:#fff;                           /* clean disc behind the image */
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.28));
}
@media (max-width:560px){
  .ganesha-divider .gd-icon{width:58px;height:58px;margin:0 8px}
  .ganesha-divider .gd-line{max-width:32%}
}
@media print{ .ganesha-divider{display:none !important} }

/* reusable autocomplete box (place_ac.js) - matches the birthplace styling */
.ac-suggestions{position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;
  border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  max-height:260px;overflow-y:auto;margin-top:4px}
.ac-suggestions div{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line);font-size:.94rem}
.ac-suggestions div:last-child{border-bottom:0}
.ac-suggestions div:hover,.ac-suggestions .active{background:#fae9d3;color:var(--red-deep)}

/* Varga Devata nature colour-coding */
.vd-benefic{background:#e2efda}
.vd-malefic{background:#fce4e4}
.vd-mixed{background:#fff2cc}