@import url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@500;600;700;800&family=Catamaran:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --maroon:#6B1F1F;
  --maroon-deep:#4A1414;
  --gold:#C9971C;
  --gold-bright:#E0B33E;
  --parchment:#EFDCA8;
  --parchment-soft:#F8F0DA;
  --ink:#3A2313;
  --ink-soft:rgba(58,35,19,0.72);
  --indigo:#2F3E6B;
  --line:rgba(58,35,19,0.14);
  --line-light:rgba(239,220,168,0.22);
  --font-display:'Baloo Thambi 2', cursive;
  --font-body:'Catamaran', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--parchment-soft);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
a:focus-visible, button:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(74,20,20,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-light);
}
nav{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 14px;
  padding:16px 28px;
  max-width:1120px; margin:0 auto;
  color:var(--parchment);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:0.01em;
  min-width:0;
}
.brand-mark{width:26px; height:26px; flex-shrink:0;}
nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  width:100%;
  order:3;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
}
@media(min-width:760px){ nav ul{ gap:12px 32px; width:auto; order:0; font-size:15px; } }
nav ul a{ text-decoration:none; color:var(--parchment); opacity:0.85; transition:opacity .2s ease; }
nav ul a:hover{opacity:1;}
.nav-cta{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--maroon-deep);
  background:var(--gold-bright);
  padding:8px 12px;
  border-radius:3px;
  text-decoration:none;
  white-space:nowrap;
}
@media(min-width:600px){ .nav-cta{font-size:13px; padding:9px 18px;} }
.nav-cta:hover{background:var(--parchment);}

.btn-primary{
  font-family:var(--font-body);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  color:var(--maroon-deep);
  background:var(--gold-bright);
  padding:14px 26px;
  border-radius:3px;
  display:inline-block;
  border:0;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.btn-primary:hover{ background:var(--parchment); transform:translateY(-1px); }

.btn-ghost{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  text-decoration:none;
  color:var(--maroon);
  border-bottom:1px solid var(--maroon);
  padding-bottom:2px;
  background:transparent;
}
.btn-ghost:hover{ color:var(--gold); border-bottom-color:var(--gold); }

.article-card-subheading,
.admin-article-subheading{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--indigo);
  line-height:1.6;
  margin:8px 0 12px;
}

/* ---------- sections ---------- */
section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--indigo);
  margin-bottom:12px;
}
.section-head h1, .section-head h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,3.4vw,36px);
  color:var(--maroon);
}
.section-head p{ margin-top:14px; color:var(--ink-soft); font-size:16px; }

h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(26px,3.4vw,42px);
  color:var(--maroon);
  margin-bottom:24px;
}

/* ---------- footer ---------- */
footer{
  background:var(--maroon-deep);
  color:rgba(239,220,168,0.65);
  padding:36px 0;
}
.footer-inner{
  display:flex; flex-direction:column; gap:12px;
  font-family:var(--font-mono); font-size:12.5px;
  text-align:center;
}
@media(min-width:700px){ .footer-inner{flex-direction:row; justify-content:space-between; text-align:left;} }

/* ---------- panchang widget ---------- */
section.location-selector{
  padding:44px 0 16px;
}
section.ad-break{
  padding:14px 0 8px;
}
section.panchang{
  padding:28px 0 64px;
}
.location-selector .wrap{
  display:grid;
  grid-template-columns:minmax(320px, 360px) minmax(320px, 1fr);
  gap:12px;
  align-items:stretch;
}
.location-widget{
  width:min(360px, 100%);
  margin:8px 0 0;
  padding:14px;
  border:1px solid rgba(224,179,62,0.55);
  border-radius:10px;
  background:rgba(74,20,20,0.95);
  box-shadow:
    0 22px 34px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.28);
}
.hora-widget{
  margin:8px 0 0;
  width:min(420px, 100%);
  background:rgba(74,20,20,0.95);
  border:1px solid rgba(224,179,62,0.55);
  border-radius:10px;
  padding:14px;
  box-shadow:
    0 22px 34px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.28);
}
.location-widget h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:#f8d98a;
  margin-bottom:12px;
  text-align:center;
  border-bottom:1px solid rgba(224,179,62,0.35);
  padding-bottom:10px;
}
.hora-widget h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:#f8d98a;
  margin-bottom:12px;
  text-align:center;
  border-bottom:1px solid rgba(224,179,62,0.35);
  padding-bottom:10px;
}
.hora-grid{
  display:grid;
  gap:10px;
}
.hora-card{
  padding:11px 13px;
  border:1px solid rgba(224,179,62,0.26);
  border-left:3px solid rgba(224,179,62,0.26);
  border-radius:7px;
  background:linear-gradient(165deg, rgba(255,255,255,0.12), rgba(0,0,0,0.22));
  box-shadow:
    0 9px 16px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.24);
}
.hora-card-current{
  border-left:4px solid var(--gold-bright);
}
.hora-title{
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(248,217,138,0.78);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}
.hora-planet{
  margin-top:3px;
  font-family:var(--font-display);
  font-size:16px;
  color:#fff4d0;
}
.hora-time{
  margin-top:3px;
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(248,217,138,0.92);
}
.ad-slot{
  width:min(970px, 100%);
  min-height:96px;
  margin:0 auto;
  border:1px dashed rgba(201,151,28,0.65);
  border-radius:10px;
  background:rgba(74,20,20,0.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
}
.ad-slot-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  color:rgba(107,31,31,0.82);
  text-transform:uppercase;
}
.ad-slot-body{
  font-family:var(--font-body);
  font-size:14px;
  color:rgba(58,35,19,0.78);
}
.panchang .wrap {
  display:grid;
  grid-template-columns:minmax(420px, 1.1fr) minmax(520px, 1.4fr);
  gap:12px;
  align-items:stretch;
}
.panchang-widget,
.planetary-widget{
  background:rgba(74,20,20,0.95);
  border:1px solid rgba(224,179,62,0.55);
  border-radius:10px;
  padding:20px;
  box-shadow:
    0 22px 34px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -2px 0 rgba(0,0,0,0.28);
  margin:12px 0 0;
  height:100%;
  display:flex;
  flex-direction:column;
  perspective:900px;
}
.panchang-grid{
  display:grid;
  grid-auto-rows:minmax(0, 1fr);
  gap:10px;
  flex:1;
}
.panchang-widget h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:#f8d98a;
  margin-bottom:14px;
  text-align:center;
  border-bottom:1px solid rgba(224,179,62,0.35);
  padding-bottom:10px;
}
.panchang-location-controls{
  display:grid;
  gap:8px;
  margin-bottom:0;
  padding:10px;
  border:1px solid rgba(224,179,62,0.26);
  border-radius:8px;
  background:linear-gradient(165deg, rgba(255,255,255,0.08), rgba(0,0,0,0.18));
}
.location-coordinate-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}
.location-input-group{
  display:grid;
  gap:5px;
  position:relative;
}
.location-input-group:first-child{
  margin-bottom:8px;
}
.location-input{
  width:100%;
  border:1px solid rgba(224,179,62,0.35);
  border-radius:6px;
  background:rgba(27,13,13,0.72);
  color:#fff4d0;
  padding:9px 10px;
  font-family:var(--font-body);
  font-size:13px;
}
.location-input::placeholder{
  color:rgba(248,217,138,0.52);
}
.location-input-mono{
  font-family:var(--font-mono);
}
.location-suggestions{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  z-index:5;
  display:grid;
  gap:4px;
  margin-top:4px;
  padding:8px;
  border:1px solid rgba(224,179,62,0.35);
  border-radius:6px;
  background:rgba(27,13,13,0.96);
  box-shadow:0 14px 24px rgba(0,0,0,0.42);
}
.location-suggestions[hidden]{
  display:none !important;
}
.location-suggestion{
  border:0;
  border-radius:5px;
  background:rgba(255,255,255,0.04);
  color:#fff4d0;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:13px;
  padding:9px 10px;
  text-align:left;
}
.location-suggestion:hover,
.location-suggestion:focus-visible{
  background:rgba(224,179,62,0.18);
  outline:none;
}
.location-suggestion small{
  display:block;
  margin-top:2px;
  color:rgba(248,217,138,0.7);
  font-family:var(--font-mono);
  font-size:11px;
}
.location-apply-button{
  border:1px solid rgba(224,179,62,0.45);
  border-radius:6px;
  background:linear-gradient(180deg, #e0b33e 0%, #c9971c 100%);
  color:var(--maroon-deep);
  font-family:var(--font-body);
  font-weight:700;
  font-size:13px;
  padding:9px 12px;
  cursor:pointer;
}
.location-apply-button:hover{
  background:linear-gradient(180deg, #f0c85d 0%, #d9a82e 100%);
}
.location-apply-button:focus-visible,
.location-input:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}
@media(max-width:980px){
  .panchang .wrap{
    display:block;
  }
  .location-selector .wrap{
    grid-template-columns:1fr;
  }
}
.panchang-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid rgba(224,179,62,0.26);
  border-radius:7px;
  background:linear-gradient(165deg, rgba(255,255,255,0.12), rgba(0,0,0,0.22));
  box-shadow:
    0 9px 16px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.24);
  transform:translateZ(0);
  font-size:14px;
}
.panchang-label{
  font-family:var(--font-mono);
  font-size:10px;
  color:rgba(248,217,138,0.78);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}
.panchang-value{
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  color:#fff4d0;
  text-align:right;
}
.panchang-time{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
}
.panchang-pada{
  font-size:12px;
  color:rgba(248,217,138,0.82);
  font-weight:500;
}

/* ---------- planetary positions widget ---------- */
.planetary-widget h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:16px;
  color:#f8d98a;
  margin-bottom:14px;
  text-align:center;
  border-bottom:1px solid rgba(224,179,62,0.35);
  padding-bottom:10px;
}
.planetary-grid{
  display:grid;
  gap:14px;
  flex:1;
  align-content:start;
  grid-auto-rows:minmax(0, 1fr);
}
.planet-row{
  display:grid;
  grid-template-columns:70px 1fr 1fr;
  gap:8px;
  font-size:12px;
  padding:9px 12px;
  background:linear-gradient(165deg, rgba(255,255,255,0.12), rgba(0,0,0,0.22));
  border:1px solid rgba(224,179,62,0.26);
  border-left:4px solid var(--gold);
  border-radius:7px;
  box-shadow:
    0 9px 16px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.24);
  transform:translateZ(0);
}
.planet-name{
  font-family:var(--font-display);
  font-weight:600;
  color:#ffe9af;
}
.planet-info{
  font-family:var(--font-mono);
  color:rgba(248,217,138,0.82);
  font-size:11px;
}
.planet-rashi{
  font-family:var(--font-body);
  color:#fff4d0;
  font-weight:600;
}