/* ==========================================================================
   COMMON.CSS — mega menu, theme toggle, category hubs, calculator,
   trending strip, saved/bookmarks, reading time
   ========================================================================== */

/* ---- theme toggle + bookmark icon in utility bar ---- */
.util-actions{ display:flex; align-items:center; gap:14px; }
.theme-toggle, .saved-link{
  display:flex; align-items:center; gap:5px; background:none; border:none; color:#C9D3DC;
  font-family:var(--f-mono); font-size:11px; cursor:pointer; padding:4px 8px; border-radius:20px;
  transition:background .2s;
}
.theme-toggle:hover, .saved-link:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.theme-toggle svg, .saved-link svg{ width:13px; height:13px; }

/* ---- MEGA MENU ---- */
nav.main-nav{ position:static; }
.nav-item{ position:relative; }
.nav-item > a{ display:flex; align-items:center; gap:4px; }
.nav-item > a .caret{ font-size:9px; opacity:.6; transition:transform .2s; }
.nav-item:hover > a .caret{ transform:rotate(180deg); }
.mega-panel{
  position:absolute; top:100%; left:0; background:var(--paper-2); border:1px solid var(--line);
  border-radius:6px; box-shadow:var(--shadow); padding:14px; display:none; min-width:240px;
  grid-template-columns:1fr 1fr; gap:2px 16px; z-index:60;
}
.nav-item:hover .mega-panel{ display:grid; animation:pop-in .18s ease; }
.mega-panel a{ font-size:12.5px; padding:7px 8px; border-radius:4px; color:var(--text-soft); white-space:nowrap; }
.mega-panel a:hover{ background:var(--paper); color:var(--gold); }
.mega-panel .all-link{ grid-column:1/-1; font-weight:700; color:var(--gold); border-top:1px solid var(--line); margin-top:4px; padding-top:9px; }

@media(max-width:960px){
  .mega-panel{ position:static; display:none !important; box-shadow:none; border:none; grid-template-columns:1fr; padding:0 0 0 14px; }
  .nav-item.mobile-open .mega-panel{ display:flex !important; flex-direction:column; }
  .nav-item > a .caret{ margin-left:auto; }
}

/* ---- CATEGORY HUB PAGE ---- */
.cat-hero{ background:var(--ink); color:#fff; padding:44px 0 34px; }
.cat-hero .eyebrow{ color:var(--gold); }
.cat-hero h1{ color:#fff; font-size:34px; margin-top:8px; }
.cat-hero p{ color:#93A2AE; max-width:640px; margin-top:10px; font-size:14px; line-height:1.6; }

.subcat-tabs{ display:flex; gap:8px; flex-wrap:wrap; padding:18px 0; }
.subcat-tab{
  font-family:var(--f-mono); font-size:11.5px; padding:8px 15px; border-radius:20px; border:1px solid var(--line);
  background:var(--paper-2); color:var(--text-soft); white-space:nowrap; transition:.2s;
}
.subcat-tab:hover{ border-color:var(--gold); color:var(--gold); }
.subcat-tab.on{ background:var(--ink); border-color:var(--ink); color:#fff; }

.unofficial-badge{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:10.5px;
  background:var(--gold-soft); color:#7A5D1C; padding:5px 11px; border-radius:20px; margin-bottom:16px;
}
[data-theme="dark"] .unofficial-badge{ color:var(--gold); }

.empty-cat{ text-align:center; padding:60px 20px; color:var(--text-soft); font-size:13.5px; border:1px dashed var(--line); border-radius:6px; }

/* ---- TRENDING STRIP (homepage) ---- */
.trending-strip{ background:var(--ink); padding:16px 0; overflow:hidden; }
.trending-strip .wrap{ display:flex; align-items:center; gap:16px; }
.trending-strip .lbl{ font-family:var(--f-mono); font-size:11px; color:var(--gold); font-weight:700; text-transform:uppercase; letter-spacing:.08em; flex-shrink:0; display:flex; align-items:center; gap:6px; }
.trending-scroll{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; }
.trending-scroll::-webkit-scrollbar{ display:none; }
.trending-chip{ font-size:12.5px; color:#DDE4E9; white-space:nowrap; padding:8px 16px; background:rgba(255,255,255,0.05); border-radius:20px; flex-shrink:0; border:1px solid rgba(255,255,255,0.08); }
.trending-chip:hover{ background:rgba(255,255,255,0.1); color:#fff; }
.trending-badge{ font-family:var(--f-mono); font-size:9px; background:var(--red); color:#fff; padding:2px 7px; border-radius:20px; text-transform:uppercase; letter-spacing:.05em; margin-left:6px; }

/* ---- BOOKMARK STAR on cards ---- */
.bookmark-btn.saved{ color:var(--gold); border-color:var(--gold); }
.bookmark-btn svg{ transition:transform .2s; }
.bookmark-btn.saved svg{ fill:var(--gold); transform:scale(1.1); }

/* ---- reading time chip ---- */
.reading-time{ font-family:var(--f-mono); font-size:10.5px; color:var(--text-soft); }

/* ==========================================================================
   SIP / LUMPSUM CALCULATOR
   ========================================================================== */
.calc-box{ background:var(--paper-2); border:1px solid var(--line); border-radius:8px; padding:30px; }
.calc-tabs{ display:flex; gap:8px; margin-bottom:26px; }
.calc-tab{ font-family:var(--f-mono); font-size:12.5px; font-weight:600; padding:10px 20px; border-radius:20px; border:1px solid var(--line); background:var(--paper); color:var(--text-soft); }
.calc-tab.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; }
@media(max-width:800px){ .calc-grid{ grid-template-columns:1fr; } }

.calc-field{ margin-bottom:22px; }
.calc-field .row-label{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.calc-field label{ font-size:13px; font-weight:600; color:var(--text); }
.calc-field .val-pill{ font-family:var(--f-mono); font-size:13px; font-weight:700; color:var(--gold); background:var(--gold-soft); padding:4px 12px; border-radius:20px; }
.calc-field input[type="range"]{
  width:100%; -webkit-appearance:none; height:5px; border-radius:4px; background:var(--line); outline:none;
}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--gold);
  cursor:pointer; border:3px solid var(--paper-2); box-shadow:0 0 0 1px var(--gold);
}
.calc-field input[type="range"]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--gold); cursor:pointer; border:3px solid var(--paper-2);
}
.calc-field .minmax{ display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10px; color:var(--text-soft); margin-top:4px; }

.calc-result{ background:var(--paper); border-radius:8px; padding:24px; display:flex; flex-direction:column; align-items:center; }
.donut-wrap{ position:relative; width:180px; height:180px; margin-bottom:22px; }
.donut-wrap svg{ transform:rotate(-90deg); }
.donut-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut-center .lbl{ font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); }
.donut-center .amt{ font-family:var(--f-mono); font-size:19px; font-weight:700; color:var(--ink); margin-top:2px; text-align:center; }

.calc-legend{ width:100%; display:flex; flex-direction:column; gap:12px; }
.calc-legend .lg-row{ display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:10px 0; border-bottom:1px dashed var(--line); }
.calc-legend .lg-row:last-child{ border-bottom:none; font-weight:700; font-size:14.5px; }
.calc-legend .swatch{ width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:8px; }
.calc-legend .amount{ font-family:var(--f-mono); font-weight:700; }

/* ---- SAVED PAGE ---- */
.saved-hero{ padding:40px 0 20px; }
.saved-empty{ text-align:center; padding:70px 20px; }
.saved-empty svg{ width:44px; height:44px; color:var(--line); margin-bottom:14px; }

/* ---- newsletter strip ---- */
.newsletter-strip{ background:var(--ink); padding:40px 0; }
.newsletter-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.newsletter-inner h3{ color:#fff; font-size:20px; }
.newsletter-inner p{ color:#93A2AE; font-size:13px; margin-top:4px; }
.newsletter-form{ display:flex; gap:8px; flex-wrap:wrap; }
.newsletter-form input{ padding:11px 16px; border-radius:20px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); color:#fff; font-size:13px; min-width:220px; }
.newsletter-form input::placeholder{ color:#7C8B96; }
.newsletter-form button{ padding:11px 22px; border-radius:20px; background:var(--gold); color:#fff; font-weight:600; font-size:13px; border:none; }