/* Bhav-Tau shared theme: brand tokens, resets, and the sidebar/hamburger
   component used by every page. Homepage keeps its own inline styles too —
   these are duplicated on purpose (same values) so this file can be added
   without touching index.html's existing, already-working CSS. */

:root{
  --lac:#6E1216;
  --lac-deep:#490B0E;
  --lac-line:#8A2A2C;
  --ivory:#F3E9D2;
  --ivory-dim:#C9B694;
  --gold:#D6A94A;
  --silver:#BFC7D0;
  --up:#7FBF6A;
  --down:#E8836F;
  --num: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --dev: "Tiro Devanagari Hindi", Georgia, serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:
    radial-gradient(120% 80% at 50% -10%, #7d181c 0%, var(--lac) 42%, var(--lac-deep) 100%);
  color:var(--ivory);
  font-family:var(--num);
  min-height:100vh;
  padding:clamp(16px,4vw,40px) clamp(14px,4vw,32px) 40px;
  -webkit-font-smoothing:antialiased;
}

.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---- shared card / price display kit (mirrors homepage look) ---- */

main{max-width:760px;margin:0 auto;display:grid;gap:clamp(14px,2.6vw,20px)}

.card{
  border:1px solid var(--lac-line);
  border-radius:3px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.10));
  padding:clamp(18px,4vw,28px) clamp(16px,4vw,30px);
  position:relative;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(214,169,74,.16);
}

.metal{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.metal h2{font-family:var(--dev);font-weight:400;font-size:clamp(20px,4.6vw,26px);line-height:1.1}
.metal h2 span{display:block;font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-dim);margin-top:4px}

.big{
  font-size:clamp(40px,12vw,84px);font-weight:800;line-height:.92;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.12em;
}
.big .rs{font-size:.42em;font-weight:500;color:var(--ivory-dim);letter-spacing:0}
.gold-num{color:var(--gold)}
.silver-num{color:var(--silver)}

.unit{margin-top:8px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory-dim)}
.delta{margin-top:12px;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.delta.up{color:var(--up)} .delta.down{color:var(--down)} .delta.flat{color:var(--ivory-dim)}

.sub{
  margin-top:18px;padding-top:14px;border-top:1px dashed rgba(214,169,74,.25);
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:clamp(14px,3.4vw,17px);
}
.sub .lbl{font-family:var(--dev);color:var(--ivory-dim);font-size:.95em}
.sub .val{font-weight:700;font-variant-numeric:tabular-nums}

.live{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){ .dot{animation:none} }

.note{margin-top:14px;font-size:12px;line-height:1.6;color:var(--ivory-dim);max-width:52ch;margin-inline:auto;text-align:center}

/* ---- shared inner-page header ---- */

.pageHead{max-width:760px;margin:0 auto 22px;padding-top:52px;text-align:center}
.pageHead h1{font-family:var(--dev);font-weight:400;font-size:clamp(22px,5vw,30px);color:var(--ivory);line-height:1.2}
.pageHead p{margin-top:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim)}
.backHome{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.backHome:hover{text-decoration:underline}

footer.pageFoot{max-width:760px;margin:26px auto 0;text-align:center}

/* ---- tabs / chips used by calculator + price history ---- */

.metal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.metal-tab, .chip{
  font-family:var(--num);font-size:12px;font-weight:700;letter-spacing:.05em;
  padding:9px 14px;border-radius:2px;border:1px solid var(--lac-line);
  background:rgba(0,0,0,.14);color:var(--ivory-dim);cursor:pointer;
}
.metal-tab:hover, .chip:hover{color:var(--ivory);border-color:var(--gold)}
.metal-tab.active, .chip.active{color:var(--lac-deep);background:var(--gold);border-color:var(--gold)}

.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.range-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}

.custom-weight{margin-top:14px}
.custom-weight label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:6px}
.custom-weight input, input.field{
  width:100%;max-width:220px;background:rgba(0,0,0,.3);border:1px solid var(--lac-line);color:var(--ivory);
  font-family:var(--num);font-weight:700;font-size:15px;padding:10px 12px;border-radius:2px;
  font-variant-numeric:tabular-nums;
}

.calc-result{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(214,169,74,.25)}
.calc-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:8px}
.calc-note{margin-top:14px;font-size:11px;color:var(--ivory-dim);letter-spacing:.04em}

.chart-wrap{margin-top:6px}
.chart-empty{
  padding:34px 16px;text-align:center;color:var(--ivory-dim);font-size:13px;line-height:1.7;
  border:1px dashed var(--lac-line);border-radius:3px;
}

.city-list{list-style:none;display:grid;gap:10px}
.city-list a{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:16px 18px;border:1px solid var(--lac-line);border-radius:3px;color:var(--ivory);text-decoration:none;
  background:rgba(0,0,0,.1);font-size:15px;
}
.city-list a:hover{border-color:var(--gold)}
.city-list a .arrow{color:var(--gold)}

.city-links{max-width:760px;margin:22px auto 0;text-align:center;font-size:12px;color:var(--ivory-dim);letter-spacing:.04em}
.city-links a{color:var(--ivory-dim);text-decoration:none;margin:0 4px}
.city-links a:hover{color:var(--gold)}

.about-copy{max-width:640px;margin:0 auto;font-size:14px;line-height:1.85;color:var(--ivory)}
.about-copy h2{font-family:var(--dev);font-weight:400;font-size:19px;margin:22px 0 8px;color:var(--gold)}
.about-copy p{margin-bottom:12px;color:var(--ivory-dim)}
.about-copy ul{margin:0 0 12px 18px;color:var(--ivory-dim)}
.about-copy li{margin-bottom:6px}

/* ------------------------------------------------------------------ */
/* Sidebar navigation (injected by assets/sidebar.js on every page)   */
/* ------------------------------------------------------------------ */

.hamburger{
  position:fixed;top:16px;left:16px;z-index:60;
  width:42px;height:42px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(0,0,0,.22);border:1px solid var(--lac-line);border-radius:4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hamburger:hover{border-color:var(--gold)}
.hamburger span{width:18px;height:2px;background:var(--gold);display:block;transition:transform .2s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sidebarOverlay{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:70;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.sidebarOverlay.open{opacity:1;pointer-events:auto}

.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:82vw;max-width:300px;z-index:80;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14)), var(--lac);
  border-right:1px solid var(--lac-line);
  transform:translateX(-100%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:4px 0 26px rgba(0,0,0,.4);
}
.sidebar.open{transform:translateX(0)}
@media (min-width:768px){ .sidebar{width:300px} }

.sidebar-head{padding:22px 20px 8px;position:relative}
.sidebar-close{
  position:absolute;top:12px;right:10px;background:none;border:none;color:var(--ivory-dim);
  font-size:24px;line-height:1;cursor:pointer;padding:6px 10px;
}
.sidebar-close:hover{color:var(--ivory)}
.sidebar-brand{font-family:var(--num);font-weight:800;letter-spacing:.1em;font-size:16px;color:var(--gold)}
.sidebar-sub{margin-top:4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-dim)}

.sidebar-nav{list-style:none;padding:8px 12px 22px;flex:1}
.sidebar-nav a, .sidebar-expand{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:13px 10px;border-radius:3px;color:var(--ivory);text-decoration:none;
  font-size:14px;letter-spacing:.01em;background:none;border:none;cursor:pointer;
  font-family:var(--num);text-align:left;-webkit-tap-highlight-color:transparent;
}
.sidebar-nav a:hover, .sidebar-expand:hover{background:rgba(214,169,74,.08)}
.sidebar-nav a.active{color:var(--gold);background:rgba(214,169,74,.1)}
.sidebar-expand{justify-content:space-between}
.sidebar-expand .chev{
  width:7px;height:7px;flex:0 0 auto;border-right:2px solid var(--ivory-dim);border-bottom:2px solid var(--ivory-dim);
  transform:rotate(-45deg);transition:transform .2s ease;
}
.sidebar-expand[aria-expanded="true"] .chev{transform:rotate(45deg)}
.sidebar-sub-nav{list-style:none;max-height:0;overflow:hidden;transition:max-height .2s ease;padding-left:16px}
.sidebar-sub-nav.open{max-height:280px}
.sidebar-sub-nav a{padding:10px 10px;font-size:13px;color:var(--ivory-dim)}
.sidebar-sub-nav a:hover{color:var(--ivory)}

body.sidebar-locked{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .sidebar, .sidebarOverlay, .hamburger span, .sidebar-expand .chev, .sidebar-sub-nav{transition:none}
}