/* ============================================================
   style.css — Global variables, reset, base, typography
   Includes full dark mode via [data-theme="dark"]
   ============================================================ */

/* ── Light Mode (default) ── */
:root {
  --blue:        #1a56db;
  --blue-dark:   #1341b0;
  --blue-light:  #e8f0ff;
  --blue-mid:    #3b72f5;
  --accent:      #f59e0b;
  --accent2:     #10b981;
  --text:        #0f172a;
  --text-muted:  #64748b;
  --text-light:  #94a3b8;
  --bg:          #f8faff;
  --card:        #ffffff;bod
  --border:      #e2e8f0;
  --shadow:      0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(26,86,219,.07);
  --shadow-hover:0 8px 32px rgba(26,86,219,.16);
  --radius:      14px;
  --radius-sm:   8px;
  --header-bg:   rgba(255,255,255,.95);
  --mobile-nav-bg: #ffffff;
  --input-bg:    #ffffff;
  --formula-bg:  var(--bg);
  --example-bg:  var(--bg);
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --blue:        #4a80f0;
  --blue-dark:   #3b72f5;
  --blue-light:  #1e2d4a;
  --blue-mid:    #6694f5;
  --accent:      #f59e0b;
  --accent2:     #10b981;
  --text:        #e2e8f0;
  --text-muted:  #94a3b8;
  --text-light:  #64748b;
  --bg:          #0d1117;
  --card:        #161b22;
  --border:      #2d3748;
  --shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --shadow-hover:0 8px 32px rgba(0,0,0,.4);
  --header-bg:   rgba(22,27,34,.96);
  --mobile-nav-bg: #161b22;
  --input-bg:    #1e2533;
  --formula-bg:  #1e2533;
  --example-bg:  #1e2533;
}

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

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 15px;
  transition: background .25s, color .25s;
  overflow-x: hidden;
  width: 100%;
}
/* ── Icon wrappers ── */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-wrap svg {
  stroke-width: 2;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Size variants */
.tool-icon .icon-wrap svg         { width: 24px; height: 24px; }
.cat-icon .icon-wrap svg          { width: 28px; height: 28px; }
.calc-card-header .icon .icon-wrap svg { width: 28px; height: 28px; stroke: #fff; }
.sc-icon .icon-wrap svg           { width: 20px; height: 20px; }
.ri-icon .icon-wrap svg           { width: 18px; height: 18px; }
.search-icon .icon-wrap svg       { width: 18px; height: 18px; stroke: var(--text-light); }
.logo-mark .icon-wrap svg         { width: 18px; height: 18px; stroke: #fff; }
.breadcrumb .icon-wrap svg        { width: 14px; height: 14px; }
.back-btn .icon-wrap svg          { width: 16px; height: 16px; }
.btn-outline .icon-wrap svg,
.btn-primary .icon-wrap svg       { width: 15px; height: 15px; }
.hamburger .icon-wrap svg         { width: 22px; height: 22px; }
.sri-icon .icon-wrap svg          { width: 18px; height: 18px; }
.highlight-bar .hl-icon .icon-wrap svg { width: 22px; height: 22px; stroke: var(--accent); }
.trending-badge .icon-wrap svg    { width: 10px; height: 10px; }
.see-all .icon-wrap svg           { width: 14px; height: 14px; }
.tool-arrow .icon-wrap svg        { width: 16px; height: 16px; }
.calc-btn .icon-wrap svg          { width: 16px; height: 16px; stroke: #fff; }
.faq-q .faq-icon .icon-wrap svg   { width: 18px; height: 18px; stroke: var(--blue); }
footer .logo-mark .icon-wrap svg  { width: 18px; height: 18px; stroke: #fff; }
.mobile-nav-close .icon-wrap svg  { width: 24px; height: 24px; }
.mobile-nav a .icon-wrap svg      { width: 18px; height: 18px; }
.hero-badge .icon-wrap svg        { width: 12px; height: 12px; stroke: var(--blue); }
.filter-btn .icon-wrap svg        { width: 14px; height: 14px; }
.tab-btn .icon-wrap svg           { width: 15px; height: 15px; }
.content-block h3 .icon-wrap svg  { width: 18px; height: 18px; stroke: var(--blue); }
.result-box h4 .icon-wrap svg     { width: 14px; height: 14px; stroke: var(--text-muted); }
.footer-col a .icon-wrap svg      { width: 13px; height: 13px; stroke: rgba(255,255,255,.4); }
.dark-toggle .icon-wrap svg       { width: 18px; height: 18px; }

/* ── Shared Button Styles ── */
.btn-outline {
  padding: 7px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  color: var(--text);
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}

.btn-primary {
  padding: 7px 18px;
  background: var(--blue);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

/* ── Dark Mode Toggle Button ── */
.dark-toggle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.dark-toggle:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}

/* ── Header ── */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  transition: background .25s, border-color .25s;
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  height: 62px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue), var(--blue-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 17px;
  box-shadow: 0 2px 8px rgba(26,86,219,.35);
}
.logo-text {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
  transition: color .25s;
}
.logo-text span { color: var(--blue); }

nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 8px;
  transition: all .2s;
}
nav a:hover, nav a.active {
  color: var(--blue);
  background: var(--blue-light);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 6px;
  border: none;
  background: none;
  color: var(--text);
}

/* ── Mobile Nav ── */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--mobile-nav-bg);
  z-index: 999;
  flex-direction: column;
  padding: 24px;
  gap: 8px;
  transition: background .25s;
}
.mobile-nav.open { display: flex; }
.mobile-nav-close {
  align-self: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.mobile-nav a {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s, color .2s, border-color .2s;
}
.mobile-nav a:hover { background: var(--blue-light); color: var(--blue); }

/* ── Main Container ── */
.container {
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: 0 16px;
}
.section { padding: 48px 0; }
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.section-title {
  font-family: 'Sora', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.section-title span { color: var(--blue); }

.see-all {
  font-size: 13px;
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.see-all:hover { text-decoration: underline; }

/* ── Footer ── */
footer {
  background: #0f172a;
  color: rgba(255,255,255,.7);
  padding: 48px 24px 24px;
  margin-top: 64px;
}
[data-theme="dark"] footer {
  background: #060b12;
  border-top: 1px solid var(--border);
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}
.footer-brand .logo-text { color: #fff; }
.footer-brand p { font-size: 13px; line-height: 1.7; margin-top: 10px; }
.footer-col h4 { font-weight: 700; font-size: 14px; color: #fff; margin-bottom: 14px; }
.footer-col a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  text-decoration: none;
  margin-bottom: 8px;
  transition: color .2s;
}
.footer-col a:hover { color: var(--blue-mid); }
.footer-col a:hover .icon-wrap svg { stroke: var(--blue-mid); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 20px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-bottom a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  margin-left: 16px;
}

/* ── Animations ── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  animation: fadeIn .5s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; transform: translateY(0); }
}
.fade-in:nth-child(1)  { animation-delay: .00s; }
.fade-in:nth-child(2)  { animation-delay: .05s; }
.fade-in:nth-child(3)  { animation-delay: .10s; }
.fade-in:nth-child(4)  { animation-delay: .15s; }
.fade-in:nth-child(5)  { animation-delay: .20s; }
.fade-in:nth-child(6)  { animation-delay: .25s; }
.fade-in:nth-child(7)  { animation-delay: .30s; }
.fade-in:nth-child(8)  { animation-delay: .35s; }
.fade-in:nth-child(9)  { animation-delay: .40s; }
.fade-in:nth-child(10) { animation-delay: .45s; }

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}