/* ==========================================================================
   Fireside-style redesign — Hadlay Kalan
   Loaded AFTER style.css. Scoped, override-only, presentation-only.
   Reference: firesidedc.com — clean white surfaces, teal accent, calm type,
   generous whitespace, soft-shadow cards. No JS hooks are touched.
   Remove this single <link> to fully revert.
   ========================================================================== */

/* ---- 1. Palette + type tokens (pure Fireside teal, whole app) ---------- */
:root {
  --primary: #0d9488;              /* teal */
  --primary-dark: #0f766e;
  --primary-light: rgba(204,251,241,0.7);
  --secondary: #0f766e;
  --secondary-light: rgba(204,251,241,0.6);
  --accent: #14b8a6;               /* bright teal for gradient stops */
  --accent-light: rgba(204,251,241,0.8);
  --danger: #ef4444;
  --danger-light: rgba(254,226,226,0.8);

  --bg: #f8fafc;
  --bg-solid: #f8fafc;
  --card: #ffffff;
  --card-solid: #ffffff;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-border: #e2e8f0;
  --glass-border-subtle: #eef2f6;
  --text: #0f172a;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-lg: 0 10px 30px rgba(15,23,42,0.08), 0 3px 8px rgba(15,23,42,0.05);
  --shadow-glass: 0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --radius: 16px;
  --radius-sm: 12px;
}

/* ---- 2. Page canvas ---------------------------------------------------- */
body {
  /* -apple-system/BlinkMacSystemFont render real San Francisco for Latin
     text and numerals on Mac/iPhone; Devanagari has no SF coverage, so the
     browser falls through per-glyph to Hind automatically — best of both. */
  font-family: -apple-system, BlinkMacSystemFont, 'Hind', system-ui, 'Segoe UI', sans-serif;
  background: var(--bg-solid) !important;
  background-attachment: initial !important;
  color: var(--text);
}
/* Drop the ambient green/amber glow blobs — Fireside is flat white */
body::before,
body::after { display: none !important; }

h1, h2, h3, h4, h5,
.header-title, .hk-section-head, .section-header h3 {
  letter-spacing: -0.01em;
}

/* ---- 3. Top header ----------------------------------------------------- */
.top-header {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.header-logo-wrap {
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  box-shadow: 0 2px 8px rgba(13,148,136,0.25);
}
/* Header wordmark: retint the gradient-fill text to teal (color alone
   can't win against -webkit-text-fill-color, so we override the gradient) */
.header-title {
  background: linear-gradient(135deg, var(--primary-dark), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
}
.header-title-sub { color: var(--text-light); }

/* ---- 4. Bottom nav — floating rounded "iOS home" bar ------------------- */
.bottom-nav {
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: auto;
  max-width: 100%;
  height: 62px;
  border-radius: 28px;
  padding: 0 6px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(15,23,42,0.14), 0 2px 8px rgba(15,23,42,0.08);
}
/* Give the scroll area room to clear the floating bar */
.main-content { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
/* Selected-tab pill: shorter than the bar so it sits inset with breathing room */
.bottom-nav .nav-item {
  height: 48px;
  margin: 0 2px;
  border-radius: 16px;
}
.bottom-nav .nav-item.active {
  background: rgba(13,148,136,0.12);
  border: 1px solid rgba(13,148,136,0.22);
  box-shadow: none;
}
/* "पोस्ट" (post) FAB — strip its always-on teal circle so it reads as a
   plain nav item like the rest; it still gets the same active pill above. */
.bottom-nav .nav-fab-icon {
  background: none;
  box-shadow: none;
  color: var(--text-light);
  transform: none;
  width: auto;
  height: auto;
  font-size: 19px;
}
.bottom-nav .nav-center-fab:active .nav-fab-icon { transform: none; }
body.hk-perf-lite .bottom-nav .nav-fab-icon { box-shadow: none; transform: none; }
/* Higher specificity than style.css's .nav-center-fab.active .nav-fab-icon
   (3 classes), which otherwise wins and re-applies the teal circle. */
.bottom-nav .nav-center-fab.active,
.bottom-nav .nav-center-fab.active .nav-fab-icon {
  background: none;
  box-shadow: none;
}
.bottom-nav .nav-center-fab.active .nav-fab-icon { color: var(--primary); }
.bottom-nav .nav-item.active .nav-fab-icon { color: var(--primary); }
.bottom-nav .nav-label-light { color: var(--text-light); }
.bottom-nav .nav-center-fab.active .nav-label-light { color: var(--primary); font-weight: 700; }
.bottom-nav .nav-item.active .nav-label-light { color: var(--primary); font-weight: 700; }
.nav-fab-icon {
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  box-shadow: 0 4px 14px rgba(13,148,136,0.35);
}

/* ---- 5. Emergency SOS strip (kept red, flattened + rounded) ----------- */
.hk-sos-strip {
  background: #fef2f2;
  border-bottom: 1px solid #fee2e2;
}
.hk-sos-label { color: #b91c1c; }
.hk-sos-btn {
  background: #ffffff;
  border: 1px solid #fecaca;
  box-shadow: 0 1px 2px rgba(220,38,38,0.08);
}
.hk-sos-btn:active { background: #fff1f1; }
.hk-sos-num { color: #dc2626; }
.hk-sos-txt { color: #991b1b; }

/* ---- 6. Hero (dark orb banner -> clean light hero) -------------------- */
.hk-hero-banner {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text);
  box-shadow: var(--shadow);
  padding: 26px 22px 24px;
  min-height: 0;
}
/* Kill decorative orbs + floating emoji */
.hk-hero-orb,
.hk-float { display: none !important; }

.hk-hero-badge {
  background: var(--primary-light);
  border: 1px solid rgba(13,148,136,0.18);
  color: var(--primary-dark);
}
.hk-hero-title {
  color: var(--text);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: -0.02em;
  text-shadow: none;
}
.hk-hero-tagline {
  color: var(--text-secondary);
  opacity: 1;
  font-style: normal;
  font-weight: 500;
}
.hk-hero-sub { color: var(--text-light); opacity: 1; }
.hk-hero-meta span {
  background: #f1f5f9;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.hk-hero-meta span i { color: var(--primary); }
.hk-hero-weather {
  background: var(--primary-light);
  border: 1px solid rgba(13,148,136,0.18);
}
/* Large, thin, tabular numeral — like the current-conditions temperature
   in Apple's Weather app (SF Pro renders this natively on Mac/iPhone). */
.hk-weather-temp {
  color: var(--primary-dark);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ---- 7+9. "Today" widget — stats + weather grouped into one card, like
   an iOS Smart Stack combining two widgets with an inset hairline row
   divider instead of two separate floating cards. ---------------------- */
.hk-today-widget {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  margin: 12px 12px 0;
  overflow: hidden;
}
.hk-today-widget .hk-village-stats {
  margin: 0;
  padding: 16px 14px 12px;
  gap: 2px;
}
.hk-today-widget .hk-vstat {
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 14px;
  padding: 8px 8px 6px;
}
.hk-today-widget .hk-vstat::after { display: none; }
.hk-today-widget .hk-vstat:active { background: #f8fafc; }
.hk-vstat-val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.hk-vstat-lbl {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hk-widget-divider {
  height: 1px;
  background: var(--border);
  margin: 0 16px;
}
.hk-today-widget .hk-weather-strip {
  margin: 0;
  padding: 14px 16px;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: none;
}

/* ---- 8. Section headings ---------------------------------------------- */
.hk-section-head { color: var(--text); font-weight: 700; }

.hk-ws-pill {
  background: var(--primary-light);
  color: var(--primary-dark);
}
.hk-ws-rain { background: rgba(14,165,233,0.10); color: #0284c7; }

/* ---- 10. Today's info banner (amber -> teal) -------------------------- */
.hk-today-info-banner {
  background: var(--primary-light);
  border: 1px solid rgba(13,148,136,0.20);
  box-shadow: var(--shadow);
}
.hk-tib-label { color: var(--primary-dark); }
.hk-tib-text { color: var(--text); }
.hk-tib-btn {
  background: var(--primary);
  box-shadow: 0 2px 8px rgba(13,148,136,0.35);
}

/* ---- 11. Service tiles — iOS Home Screen icon grid --------------------- */
.hk-svc-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.hk-svc-card::before { display: none; }
.hk-svc-card:active { box-shadow: var(--shadow); }
.hk-svc-label { color: var(--text); }
/* Every icon sits in a uniform tinted squircle — iOS app-icon corner
   ratio (~22% of icon size) — instead of floating bare on the card. */
.hk-svc-icon--big,
.hk-svc-icon--big:not(:has(i)) {
  background: #f1f5f9;
  box-shadow: none;
  border-radius: 22%;
}
/* Lost & Found tile — warm brown, matches the topic badge's dot color */
.hk-svc-brown .hk-svc-icon { background: linear-gradient(135deg, #b45309, #78350f); }

/* ---- 12. App download card — App Store-style "GET" capsule button ----- */
.hk-app-dl-card {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
  box-shadow: 0 8px 24px rgba(13,148,136,0.28);
}
.hk-app-dl-glow {
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, transparent 70%);
}
.hk-app-dl-btn {
  background: #ffffff;
  color: var(--primary-dark);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  flex-direction: row;
  border-radius: 999px;
  padding: 10px 20px;
  gap: 6px;
}
.hk-app-dl-btn i { font-size: 13px; }
.hk-app-dl-btn span { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; }

/* ---- 13. Mandi card ---------------------------------------------------- */
.hk-mandi-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--primary);
  box-shadow: var(--shadow);
}

/* ---- 14. Section cards + see-all -------------------------------------- */
.section-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.section-card::before { display: none; }
.section-header h3 { color: var(--text); }
.section-header h3 i { color: var(--primary); }
.see-all-btn { color: var(--primary); }

/* ---- 15. Business services + contacts quick-access -------------------- */
.hk-biz-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.contacts-home-card {
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.contacts-home-icon { color: var(--primary); }

/* ---- 15b. Fixed app-install banner + profile download button (amber -> teal) */
.app-dl-banner-btn,
.profile-app-dl-btn {
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  box-shadow: 0 3px 12px rgba(13,148,136,0.32);
}
.app-dl-banner {
  /* sit above the floating nav bar */
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(15,23,42,0.14);
}

/* ---- 16. Full weather widget — reframe its outer container ------------- */
/* The internal dark radar/map stays (self-contained module); just seat it
   in a clean card so it sits harmoniously in the light layout. */
.hk-weather-full {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* ---- 18. Posts page — Apple/macOS-style cards -------------------------- */
.post-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin: 14px 12px;
}
.post-card:hover { box-shadow: var(--shadow-lg); }
body.hk-perf-lite .post-card { box-shadow: var(--shadow) !important; }

.post-header { padding: 16px 18px 0; }
.post-avatar {
  background: linear-gradient(135deg, var(--accent), var(--primary-dark));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--border);
}
.post-author-name { color: var(--text); font-weight: 700; }
.post-time { color: var(--text-light); }
.post-title { padding: 12px 18px 0; font-size: 16.5px; letter-spacing: -0.01em; }
.post-content { padding: 8px 18px; color: var(--text-secondary); }
.post-see-more { padding: 0 18px 6px; color: var(--primary); }

/* Topic tag: macOS Finder-style colored dot + neutral label, not a solid
   pastel block — reads as a subtle system tag rather than a loud sticker. */
.post-topic-badge {
  border-radius: 20px;
  text-transform: none;
  letter-spacing: 0;
  gap: 6px;
}
.post-topic-badge.topic-message,
.post-topic-badge.topic-issue,
.post-topic-badge.topic-good_work,
.post-topic-badge.topic-announcement,
.post-topic-badge.topic-feedback,
.post-topic-badge.topic-thanks,
.post-topic-badge.topic-lost_found,
.post-topic-badge.topic-other {
  background: #f8fafc;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.post-topic-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tag-c, var(--primary));
  flex-shrink: 0;
}
.post-topic-badge.topic-message      { --tag-c: #3b82f6; }
.post-topic-badge.topic-issue        { --tag-c: #f97316; }
.post-topic-badge.topic-good_work    { --tag-c: #22c55e; }
.post-topic-badge.topic-announcement { --tag-c: #eab308; }
.post-topic-badge.topic-feedback     { --tag-c: #a855f7; }
.post-topic-badge.topic-thanks       { --tag-c: #ec4899; }
.post-topic-badge.topic-lost_found   { --tag-c: #a16207; }
.post-topic-badge.topic-other        { --tag-c: #94a3b8; }

/* Action toolbar: quiet icon buttons, teal hover, Apple system-red "like" */
.post-like-btn:hover,
.post-comment-btn:hover { background: var(--primary-light); color: var(--primary-dark); }
.post-share-btn:hover   { background: var(--primary-light); color: var(--primary-dark); }
.post-like-btn.liked,
.post-like-btn.liked i,
.like-animate i,
.prs-likes { color: #ff3b30 !important; }

/* Filter pills -> macOS segmented control: flat gray track, floating
   white active segment with a soft shadow, instead of a solid color fill. */
.filter-pills {
  background: #f1f5f9;
  border-radius: 16px;
  margin: 10px 12px 4px;
  padding: 4px;
  gap: 4px;
}
body.hk-perf-lite .filter-pills { box-shadow: none !important; }
.pill {
  background: transparent;
  border: 1.5px solid transparent;
  box-shadow: none;
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 7px 14px;
}
.pill.active {
  background: #ffffff;
  color: var(--primary-dark);
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(15,23,42,0.14);
}

/* ---- 19. Modal windows — macOS window chrome (applies app-wide) -------- */
.modal-overlay {
  background: rgba(15,23,42,0.38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-content {
  position: relative;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 22px 22px 0 0;
  padding-top: 40px;
  box-shadow: 0 -24px 60px rgba(15,23,42,0.18), 0 -2px 10px rgba(15,23,42,0.06);
}
body.hk-perf-lite .modal-content {
  box-shadow: 0 -24px 60px rgba(15,23,42,0.18) !important;
}
/* iOS/macOS sheet grabber */
.modal-content::after {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 36px; height: 4px;
  border-radius: 2px;
  background: #e2e8f0;
  z-index: 1;
}
/* Traffic-light trio. Real macOS only reveals the ×/−/+ glyphs on mouse
   HOVER — on a touch screen that hover state never fires, so a literal
   port would show three blank dots forever. Here all three symbols are
   always visible instead, sized up slightly (18px) for touch legibility
   and tap comfort. Only the red dot is functional (the real close
   button); yellow/green are decorative pseudo-elements living on that
   same button, so tapping anywhere across the trio also closes it. */
.modal-close {
  position: absolute;
  top: 14px; left: 16px; right: auto;
  float: none;
  width: 18px; height: 18px;
  min-width: 0;
  border-radius: 50%;
  background: #ff5f57;
  border: none;
  color: rgba(90,0,0,0.7);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  z-index: 2;
  padding: 0;
  line-height: 1;
}
.modal-close::before,
.modal-close::after {
  position: absolute;
  top: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.modal-close::before {
  content: '−';
  left: 24px;
  background: #febc2e;
  color: rgba(90,60,0,0.7);
}
.modal-close::after {
  content: '+';
  left: 48px;
  background: #28c840;
  color: rgba(6,60,6,0.7);
}
.modal-close:active { background: #d94a42; }
.modal-title { padding-top: 6px; padding-left: 0; padding-right: 0; }

/* ---- 20. Accessibility polish ------------------------------------------ */
:where(a, button, .hk-svc-card, .hk-vstat, .nav-item, .see-all-btn):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}