/* AUTO-GENERATED from includes/state-city-cards.php — do not edit by hand. */
.site-geonav { margin: 30px auto 30px; }


/* -- PANEL -- WHITE (owner-final 01 Sep — dark dekh kar white chuna). Saaf white card-panel: */
.site-geonav__panel {
  position: relative; overflow: hidden;
  padding: 0;   /* JAD SE 0 (owner 01 Sep) — hero strip aur patti kinaare-se-kinaare */
  border-radius: 18px;
  /* Thos --c-surface (#1e1e1e) tha — body (#2d2e2f) se GEHRA, aur zameen ka dana */
  background: rgba(var(--c-shadow-rgb), .18);
  border: 1px solid var(--c-border);   /* shadow gayi (owner 01 Sep: 'faltu shadow khatam') */
  box-shadow: var(--elev-1);
}
@media (max-width: 619px) { .site-geonav__panel { border-radius: 16px; } }

/* (accordion 01 Sep ko marquee se badla — citywrap/toggle ka saara saman gaya) */

/* -- HERO STRIP -- EK rang, gold rail ke saath. Owner 11 Sep 2026: "iska ek color karo, */
.site-geonav__hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px;
  /* panel padding 0 hai — strip full-bleed band hai, apna radius nahi (panel ka radius kaat'ta hai) */
  padding: 16px 22px; border-radius: 0; margin-bottom: 20px;
  /* `--c-dark` tha — yaani BODY ka hi rang (#2d2e2f), isliye ye "band" panel ke */
  background-color: rgba(var(--c-shadow-rgb), .30);
  background-image:
    linear-gradient(90deg, var(--c-band-rail) 0 var(--c-band-rail-w), transparent var(--c-band-rail-w));
}
.site-geonav__heading {
  margin: 0; min-width: 0; display: flex; align-items: center; gap: 10px;
  font-size: clamp(17px, 1.9vw, 21px); font-weight: var(--fw-bold, 700);
  color: var(--c-text); line-height: 1.15; letter-spacing: -0.025em;
}
.site-geonav__heading i { font-size: 16px; color: var(--c-text); }
/* the hero's right-hand glass plate (date/ID chip), holding the geographic totals */
.site-geonav__hero-chip {
  justify-self: end; white-space: nowrap;
  padding: 8px 14px; border-radius: 12px;
  background: rgba(var(--c-dark-rgb), 0.3); border: 1px solid rgba(var(--c-border-rgb), 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--fs-13, 13px); font-weight: var(--fw-medium, 500);
  color: rgba(var(--c-text-rgb), 0.8);
}
.site-geonav__hero-chip b { color: var(--c-text); font-weight: var(--fw-bold, 700); font-variant-numeric: tabular-nums; }
@media (max-width: 619px) {
  .site-geonav__hero { padding: 13px 15px; margin-bottom: 13px; }
  .site-geonav__hero-chip { padding: 6px 11px; font-size: var(--fs-12, 12px); }
}

/* MARQUEE (owner-final 01 Sep): ek patli line, right→left lagataar. Track me poori line DO */
.site-geonav__marquee { overflow: hidden; padding-top: 6px; padding-bottom: 14px; }
.site-geonav__static { padding: 6px 20px 14px; }   /* wahi saans jo marquee me — dekhiye upar */
.site-geonav__track {
  display: flex; width: -webkit-max-content; width: max-content;
  animation: geonavScroll var(--mq-dur, 90s) linear infinite;
}
.site-geonav__marquee:hover .site-geonav__track,
.site-geonav__track.is-idle { animation-play-state: paused; }
@keyframes geonavScroll { to { transform: translateX(-50%); } }
.site-geonav__track + .site-geonav__track { margin-top: 14px; }   /* a city page's areas on two lines (24 Oct 2026) */
.site-geonav__mrow { display: flex; gap: 20px; padding-right: 20px; }
.site-geonav__static .site-geonav__mrow { flex-wrap: wrap; padding-right: 0; }
@media (prefers-reduced-motion: reduce) {
  .site-geonav__track { animation: none; }
  .site-geonav__marquee { overflow-x: auto; }
}

/* -- CARD -- styled like the member dashboard's old quick-action tile (.qa a, gone since 11 Oct 2026): a 160deg white */
.site-geonav__card {
  position: relative; overflow: hidden;
  display: inline-flex; flex-direction: column; align-items: stretch;
  flex-shrink: 0; white-space: nowrap;   /* marquee ka item — kabhi wrap nahi hota */
  /* padding JAD SE 0 (owner 01 Sep) — header-band apni padding rakhta hai, chips-row apni; */
  margin: 0; padding: 0;
  border-radius: 16px;
  /* Pehle yahan gold ka 12% wash tha (`.kpi--hero` ki naql — wo GULAABI theme ka */
  background: rgba(var(--c-shadow-rgb), .18);
  border: 1px solid rgba(var(--c-accent-rgb), 0.2);
  box-shadow: var(--elev-1);
  transition: transform .16s ease, border-color .16s ease, box-shadow .18s ease;
}
.site-geonav__card::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--main-color, var(--c-accent)), var(--c-dark));
}
/* kpi--hero's resting corner ring, scaled to the smaller card. The owner's arrow pointed at the */
.site-geonav__card::after {
  content: ""; position: absolute; right: -26px; top: -28px; width: 76px; height: 76px;
  /* 16px ki ye moti gold ring kone par ek MAILA dhabba banati thi (wahi olive wali */
  border: 16px solid rgba(var(--c-text-rgb), 0.035); border-radius: 18px; transform: rotate(14deg);
  pointer-events: none; transition: border-color .18s ease;
}
/* Minimal on purpose (owner): a 1px lift and a slightly firmer rim. No glow bloom, no icon */
.site-geonav__card:hover {
  /* Owner 12 Sep: "hover bilkul kam karo". Uthaav hata diya — ab sirf kinara thoda */
  border-color: rgba(var(--c-accent-rgb), 0.32);
  box-shadow: var(--elev-1);
}

/* -- STATE LINK -- pin + naam; iska ::after POORE card par phaila hai (stretched-link) — */
.site-geonav__headlink {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  /* HEADER-BAND (owner 01 Sep): state wali patti ka apna background — card ki padding 0 */
  padding: 12px 18px;
  background: rgba(var(--c-text-rgb), .05);
  border-bottom: 1px solid rgba(var(--c-accent-rgb), 0.14);   /* divider */
}
/* cities mode: header hi poora card hai — band poore card par, jhoothi divider nahi */
.site-geonav__card > .site-geonav__headlink:only-child { border-bottom: 0; }
.site-geonav__headlink::after { content: ""; position: absolute; inset: 0; }
.site-geonav__headlink:hover .site-geonav__state { color: var(--main-color, var(--c-accent)); }
.site-geonav__headlink:focus-visible { outline: 2px solid var(--main-color, var(--c-accent)); outline-offset: 3px; border-radius: 6px; }
/* .qa__icon - 34px, radius 10px, pink tint. */
.site-geonav__pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px;
  /* header-band khud pink hai — pin white, halki pink kinari, taaki band me doob na jaaye */
  background: var(--c-surface); border: 1px solid rgba(var(--c-accent-rgb), 0.16);
  color: var(--main-dark, var(--c-hover));
  transition: background .16s ease, color .16s ease;
}
.site-geonav__pin i { font-size: 15px; }
/* .qa__label */
.site-geonav__state {
  min-width: 0;
  font-size: var(--fs-17, 17px); font-weight: var(--fw-bold, 700);   /* owner 01 Sep: +2px */
  color: var(--navy, var(--c-text)); line-height: 1.2; letter-spacing: -0.01em;
}
/* Chips ki apni kataar — header (state) ke NEECHE (owner 01 Sep). Apni padding (card ki 0 hai). */
.site-geonav__cities { display: flex; gap: 8px; padding: 13px 18px 15px; }

/* -- CITY CHIP -- .nearby-area-btn's resting values (main.css:1764), the chip that already labels */
.site-geonav__city {
  display: inline-block; max-width: 100%;
  position: relative; z-index: 1;   /* stretched-link ke UPAR — chip apni city par le jaaye */
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid rgba(var(--main-rgb, 201, 15, 83), 0.18);
  background: rgba(var(--c-surface-rgb), 0.72);
  font-size: var(--fs-14, 14px); font-weight: var(--fw-medium, 500); line-height: 1.4;   /* owner 01 Sep: +2px */
  color: var(--c-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.site-geonav__city:hover {
  /* Pehle poora THOS gold bhar jaata tha — ek patti me 5-6 chip, kisi ek par cursor */
  background: rgba(var(--c-text-rgb), 0.08);
  border-color: rgba(var(--c-accent-rgb), 0.55);
  color: var(--c-accent); text-decoration: none;
}
.site-geonav__city:focus-visible { outline: 2px solid var(--main-color, var(--c-accent)); outline-offset: 2px; }

/* The dashboard's own coarse-pointer rule - a chip is a tap target here, not just a label. */
@media (hover: none) and (pointer: coarse) {
  .site-geonav__city { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-geonav__card, .site-geonav__city, .site-geonav__pin { transition: none; }
  .site-geonav__card:hover { transform: none; }
}
/* marquee's second copy: plain elements that open their page on click (state-city-cards.php) */
.site-geonav__mrow [data-href] { cursor: pointer; }