/* CalculatorDrive site theme (typography, colors, layout tokens) */

/* ===== FONTS ===== */
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url("../vendor/fonts/lora/lora-400.6a24bfe835a2.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:500;font-display:swap;src:url("../vendor/fonts/lora/lora-500.0a5879f383e8.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url("../vendor/fonts/lora/lora-600.14f8cf164069.woff2") format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/lora/lora-700.dc4d33806145.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url("../vendor/fonts/source-serif/source-serif-400.197cc326af6d.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url("../vendor/fonts/source-serif/source-serif-600.197cc326af6d.woff2") format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:700;font-display:swap;src:url("../vendor/fonts/source-serif/source-serif-700.197cc326af6d.woff2") format('woff2')}

/* ===== CSS CUSTOM PROPERTIES ===== */
:root {
  --md-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --md-font-body: 'Source Serif 4', Georgia, serif;
  --md-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --md-text: #242424;
  --md-text-secondary: #6B6B6B;
  --md-text-light: #757575;
  --md-green: #1a8917;
  --md-green-hover: #156d12;
  --md-bg: #ffffff;
  --md-bg-warm: #F7F4ED;
  --md-border: #E6E6E6;
  --md-border-light: #F2F2F2;
  --md-content-width: 680px;
  --md-feed-width: 1192px;
  --md-header-height: 57px;
}

/* ===== GLOBAL OVERRIDES ===== */
body {
  font-family: var(--md-font-body) !important;
  color: var(--md-text);
  background: var(--md-bg) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ===== HEADER — Medium Style ===== */
.site-header {
  background: var(--md-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--md-border) !important;
  box-shadow: none !important;
  transition: none !important;
}

.header-inner {
  max-width: var(--md-feed-width) !important;
  min-height: var(--md-header-height) !important;
  padding: 0 24px !important;
}

.header-logo-icon {
  display: none !important;
}

.header-logo-text {
  font-family: var(--md-font-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--md-text) !important;
  letter-spacing: -0.03em !important;
}

.header-nav-link {
  font-family: var(--md-font-ui) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  color: var(--md-text-secondary) !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
}

.header-nav-link:hover {
  color: var(--md-text) !important;
  background: transparent !important;
}

.header-nav-link::after {
  display: none !important;
}

.header-auth-btn {
  background: var(--md-green) !important;
  border: none !important;
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  min-height: 37px !important;
  box-shadow: none !important;
}

.header-auth-btn:hover {
  background: var(--md-green-hover) !important;
  transform: none !important;
}

.header-auth-btn.logout {
  background: transparent !important;
  color: var(--md-text) !important;
  border: 1px solid var(--md-border) !important;
}

.header-auth-btn.logout:hover {
  background: var(--md-bg-warm) !important;
}

/* ===== FOOTER — Minimal Medium ===== */
.site-footer {
  background: var(--md-bg) !important;
  border-top: 1px solid var(--md-border) !important;
}

.footer-grid-bg { display: none !important; }

.footer-inner {
  max-width: var(--md-feed-width) !important;
  padding: 48px 24px 0 !important;
}

.footer-brand-icon {
  background: var(--md-text) !important;
  border-radius: 50% !important;
}

.footer-brand-name {
  font-family: var(--md-font-serif) !important;
  font-weight: 700 !important;
  color: var(--md-text) !important;
}

.footer-col-title {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.875rem !important;
}

.footer-links a {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-secondary) !important;
}

.footer-links a:hover {
  color: var(--md-text) !important;
}

.footer-badge {
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
}

.footer-bottom {
  border-top: 1px solid var(--md-border) !important;
}

.footer-copyright {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-light) !important;
}

.footer-bottom-links a {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-light) !important;
}

/* ===== MOBILE DRAWER — Medium Style ===== */
.mobile-drawer {
  background: var(--md-bg) !important;
}

.drawer-link {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text) !important;
  border-radius: 4px !important;
}

.drawer-link:hover {
  background: var(--md-bg-warm) !important;
}

.drawer-link-icon {
  background: var(--md-bg-warm) !important;
  border-radius: 50% !important;
}

.drawer-auth-btn {
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
}

/* ===== HERO SECTION — Medium "Stay Curious" ===== */
.hero-section {
  background: var(--md-bg-warm) !important;
  border-bottom: 1px solid var(--md-border) !important;
  min-height: auto !important;
  padding: 80px 1rem 72px !important;
}

@media (min-width: 768px) {
  .hero-section { padding: 100px 2rem 88px !important; }
}

.hero-badge {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-secondary) !important;
}

.hero-badge-dot {
  background: var(--md-green) !important;
}

.hero-title {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text) !important;
  font-size: clamp(2.75rem, 7vw, 6.5rem) !important;
  letter-spacing: -0.04em !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  margin-bottom: 2rem !important;
}

.hero-title .gradient-text {
  color: var(--md-text) !important;
  -webkit-text-fill-color: var(--md-text) !important;
}

.hero-subtitle {
  font-family: var(--md-font-body) !important;
  color: var(--md-text-secondary) !important;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  line-height: 1.6 !important;
  max-width: 600px !important;
}

.hero-search-wrap {
  max-width: 600px !important;
}

.hero-search-input {
  border: 1px solid var(--md-border) !important;
  border-radius: 24px !important;
  font-family: var(--md-font-ui) !important;
  background: var(--md-bg) !important;
  padding: 14px 130px 14px 48px !important;
  font-size: 0.9375rem !important;
}

.hero-search-input:focus {
  border-color: var(--md-text) !important;
  box-shadow: none !important;
}

.hero-search-btn {
  background: var(--md-green) !important;
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  font-weight: 500 !important;
  padding: 8px 20px !important;
}

.hero-search-btn:hover {
  background: var(--md-green-hover) !important;
  transform: translateY(-50%) !important;
}

.quick-tag {
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  border-color: var(--md-border) !important;
  color: var(--md-text-secondary) !important;
  background: var(--md-bg) !important;
}

.quick-tag:hover {
  border-color: var(--md-text) !important;
  color: var(--md-text) !important;
  background: var(--md-bg) !important;
}

/* ===== CATEGORY CARDS — Medium Style ===== */
.cat-card {
  border-radius: 4px !important;
  border: 1px solid var(--md-border) !important;
  background: var(--md-bg) !important;
  padding: 24px !important;
}

.cat-card:hover {
  transform: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  border-color: #ccc !important;
}

.cat-icon {
  border-radius: 50% !important;
  background: var(--md-bg-warm) !important;
  color: var(--md-text) !important;
}

.cat-card-title {
  font-family: var(--md-font-serif) !important;
  font-weight: 700 !important;
  color: var(--md-text) !important;
}

.cat-card-count {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-light) !important;
}

.cat-card-desc {
  font-family: var(--md-font-body) !important;
  color: var(--md-text-secondary) !important;
}

.cat-card-tag {
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  background: var(--md-bg-warm) !important;
  border-color: transparent !important;
  color: var(--md-text-secondary) !important;
}

.cat-card-link {
  color: var(--md-green) !important;
  font-family: var(--md-font-ui) !important;
}

/* ===== SECTION LABELS ===== */
.section-label {
  font-family: var(--md-font-ui) !important;
  background: transparent !important;
  border: none !important;
  color: var(--md-text-light) !important;
  padding: 0 !important;
}

.section-title {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text) !important;
  font-weight: 700 !important;
}

.section-desc {
  font-family: var(--md-font-body) !important;
  color: var(--md-text-secondary) !important;
}

/* ===== STATS SECTION ===== */
.stats-section {
  background: var(--md-bg-warm) !important;
  border-top: 1px solid var(--md-border) !important;
  border-bottom: 1px solid var(--md-border) !important;
}

.stat-card {
  background: var(--md-bg) !important;
  border: 1px solid var(--md-border) !important;
  border-radius: 4px !important;
}

.stat-number {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text) !important;
}

.stat-label {
  font-family: var(--md-font-ui) !important;
  color: var(--md-text-secondary) !important;
}

/* ===== FEATURE CARDS ===== */
.feature-card {
  border-radius: 4px !important;
  border: 1px solid var(--md-border) !important;
  background: var(--md-bg) !important;
}

.feature-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.feature-icon {
  background: var(--md-bg-warm) !important;
  color: var(--md-text) !important;
  border-radius: 50% !important;
}

.feature-title {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text) !important;
}

.feature-desc {
  font-family: var(--md-font-body) !important;
  color: var(--md-text-secondary) !important;
}

/* ===== CTA SECTION ===== */
.cta-section {
  background: var(--md-bg-warm) !important;
  border-top: 1px solid var(--md-border) !important;
}

.cta-btn-primary {
  background: var(--md-green) !important;
  border: 1px solid var(--md-green) !important;
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  color: #fff !important;
}

.cta-btn-primary:hover {
  background: var(--md-green-hover) !important;
  transform: none !important;
}

.cta-btn-secondary {
  border-radius: 20px !important;
  font-family: var(--md-font-ui) !important;
  border-color: var(--md-text) !important;
  color: var(--md-text) !important;
}

.cta-btn-secondary:hover {
  background: var(--md-text) !important;
  color: var(--md-bg) !important;
  transform: none !important;
}

/* ===== SHARE FAB ===== */
.share-fab {
  background: var(--md-text) !important;
  border: none !important;
}

.share-fab .fa-solid {
  font-family: "Font Awesome 6 Free", sans-serif !important;
  font-weight: 900 !important;
  color: inherit;
  line-height: 1;
  pointer-events: none;
}

.share-fab:hover:not(.active) {
  transform: scale(1.05) !important;
}

.share-fab.active {
  transform: rotate(45deg) !important;
}

/* ===== BLOG POST LIST OVERRIDES ===== */
.bg-gradient-to-br.from-gray-900 {
  background: var(--md-bg) !important;
  border-bottom: 1px solid var(--md-border);
}

.bg-gradient-to-br.from-gray-900 h1 {
  color: var(--md-text) !important;
  font-family: var(--md-font-serif) !important;
}

.bg-gradient-to-br.from-gray-900 p {
  color: var(--md-text-secondary) !important;
}

.bg-gradient-to-br.from-gray-900 .bg-white\/10,
.bg-gradient-to-br.from-gray-900 .bg-white {
  font-family: var(--md-font-ui) !important;
}

/* Blog cards */
.bg-white.rounded-xl {
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--md-border) !important;
}

.bg-white.rounded-xl:hover {
  box-shadow: none !important;
}

/* Blog post detail */
.prose {
  font-family: var(--md-font-body) !important;
  color: var(--md-text) !important;
  font-size: 1.25rem !important;
  line-height: 1.8 !important;
}

.prose h1, .prose h2, .prose h3 {
  font-family: var(--md-font-serif) !important;
  color: var(--md-text) !important;
}

/* Reading progress bar */
#reading-progress {
  background: var(--md-green) !important;
}

/* ===== AUTH PAGES ===== */
.auth-card {
  border-radius: 4px !important;
}

.auth-title, .auth-card h1 {
  font-family: var(--md-font-serif) !important;
}

.auth-submit-btn {
  background: var(--md-green) !important;
  border-radius: 20px !important;
}

.auth-submit-btn:hover {
  background: var(--md-green-hover) !important;
  box-shadow: none !important;
}

.auth-link {
  color: var(--md-green) !important;
}

.auth-icon-circle {
  background: var(--md-bg-warm) !important;
}

/* ===== CALCULATOR PAGES ===== */
.bg-slate-900 {
  background: var(--md-bg-warm) !important;
}

.bg-slate-900 h1 {
  color: var(--md-text) !important;
  font-family: var(--md-font-serif) !important;
}

.bg-slate-900 .text-transparent {
  -webkit-text-fill-color: var(--md-green) !important;
  color: var(--md-green) !important;
  background: none !important;
}

.bg-slate-900 p,
.bg-slate-900 span,
.bg-slate-900 .text-slate-400,
.bg-slate-900 .text-slate-500,
.bg-slate-900 .text-xs {
  color: var(--md-text-secondary) !important;
}

.bg-slate-900 .text-white {
  color: var(--md-text) !important;
}

.bg-slate-900 .bg-blue-500\/10,
.bg-slate-900 .border-blue-400\/20 {
  background: rgba(26,137,23,0.08) !important;
  border-color: rgba(26,137,23,0.2) !important;
}

.bg-slate-900 .text-blue-300 {
  color: var(--md-green) !important;
}

.bg-slate-900 .bg-emerald-400 {
  background: var(--md-green) !important;
}

/* Calculator category pills */
.bg-white\/5 {
  background: rgba(0,0,0,0.04) !important;
  border-color: var(--md-border) !important;
}

.bg-white\/5:hover {
  background: rgba(0,0,0,0.08) !important;
}

/* Calculator tool links */
.bg-gray-50 .inline-flex.items-center {
  font-family: var(--md-font-ui) !important;
}

/* CTA in calc pages */
.bg-blue-600 {
  background: var(--md-green) !important;
}

.bg-blue-600:hover,
.hover\:bg-blue-700:hover {
  background: var(--md-green-hover) !important;
}

/* ===== BREADCRUMBS ===== */
nav[aria-label*="Breadcrumb"] a,
nav[aria-label*="Breadcrumb"] span {
  font-family: var(--md-font-ui) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--md-bg); }
::-webkit-scrollbar-thumb { background: var(--md-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #ccc; }

/* ===== SELECTION COLOR ===== */
::selection { background: rgba(26,137,23,0.15); }

/* ===== SMOOTH TRANSITIONS ===== */
a, button { transition: color 0.15s ease, background-color 0.15s ease; }