/*
Theme Name: MLCalculators Child
Theme URI: https://mlcalculators.com/
Description: Fast, accessible child theme for mlcalculators.com. Built on GeneratePress for near-zero CSS/JS overhead, tuned for 100/100 Core Web Vitals with a polished, consistent interactive-calculator design system.
Author: mlcalculators
Template: generatepress
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: mlcalculators-child
*/

/* =========================================================================
   Brand tokens
   ========================================================================= */
:root{
  --c-accent:#4f46e5;      /* indigo */
  --c-accent-2:#7c3aed;
  --c-accent-d:#3730a3;
  --c-ink:#0f172a;
  --c-muted:#64748b;
  --c-line:#e5e7eb;
  --c-soft:#f8fafc;
  --c-soft-2:#eef2ff;
  --c-radius:16px;
  --c-shadow:0 6px 24px rgba(15,23,42,.07);
  --c-shadow-lg:0 14px 40px rgba(49,46,129,.14);
}

/* =========================================================================
   Base + typography (system stack = no font download, no CLS)
   ========================================================================= */
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  color:var(--c-ink);background:#f4f6fb;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
.entry-content{font-size:1.05rem;line-height:1.75}
.entry-content p{margin:0 0 1.15em}
.entry-content h2{font-size:1.65rem;line-height:1.25;margin:1.8em 0 .6em;font-weight:800;letter-spacing:-.015em}
.entry-content h3{font-size:1.22rem;line-height:1.3;margin:1.5em 0 .5em;font-weight:700}
.entry-content a{color:var(--c-accent);text-underline-offset:2px}
.entry-content a:hover{color:var(--c-accent-d)}
.entry-content ul,.entry-content ol{margin:0 0 1.15em 1.25em;line-height:1.7}
.entry-content li{margin:.35em 0}
.entry-content code{background:var(--c-soft-2);border:1px solid #dfe3f3;padding:1px 6px;border-radius:6px;font-size:.9em;color:var(--c-accent-d)}

/* Content surface: give the article a white card on the soft page bg */
.site-content .content-area{margin-top:26px;margin-bottom:40px}
.single .inside-article,.page .inside-article{background:#fff;border:1px solid var(--c-line);border-radius:20px;box-shadow:var(--c-shadow);padding:34px 40px}
.entry-header .entry-title{font-size:2.15rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 .2em}

/* Tables */
.entry-content table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.96rem}
.entry-content th,.entry-content td{border:1px solid var(--c-line);padding:9px 12px;text-align:left}
.entry-content thead th{background:var(--c-soft);font-weight:700}

/* =========================================================================
   Header + navigation
   ========================================================================= */
.site-header{background:#fff;border-bottom:1px solid var(--c-line);box-shadow:0 1px 0 rgba(15,23,42,.02)}
.main-title{font-weight:800;letter-spacing:-.02em}
.main-title a{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.main-navigation{background:transparent}
.main-navigation .main-nav ul li a{font-weight:600;font-size:.95rem;color:#334155}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item>a{color:var(--c-accent);background:transparent}
.main-navigation .main-nav ul li.current-menu-item>a{box-shadow:inset 0 -2px 0 var(--c-accent)}
.main-navigation .menu-toggle{font-weight:700}

/* Homepage: no boxed article, hero owns the H1 */
.home .inside-article{background:transparent;border:0;box-shadow:none;padding:0}
.home .entry-header{display:none}

/* =========================================================================
   HERO (homepage)
   ========================================================================= */
.mlc-hero{background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 60%,#6d28d9 100%);color:#fff;
  border-radius:22px;padding:48px 44px;box-shadow:var(--c-shadow-lg);margin:0 0 34px}
.mlc-hero h1,.mlc-hero .h1{font-size:2.5rem;line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.mlc-hero p{font-size:1.18rem;line-height:1.6;color:#e9e7ff;margin:0 0 24px;max-width:60ch;font-weight:400}
.mlc-hero .mlc-cta{display:inline-flex;gap:12px;flex-wrap:wrap}
.mlc-btn{display:inline-block;font-weight:700;border-radius:12px;padding:13px 22px;text-decoration:none;transition:transform .12s ease,box-shadow .12s ease}
.mlc-btn-primary{background:#fff;color:var(--c-accent-d)}
.mlc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);color:var(--c-accent-d)}
.mlc-btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.mlc-btn-ghost:hover{background:rgba(255,255,255,.22);color:#fff}

/* =========================================================================
   TOPIC CARDS (homepage "browse by topic")
   ========================================================================= */
.mlc-topics{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:10px 0 8px;padding:0;list-style:none}
.mlc-topic{position:relative;display:block;background:#fff;border:1px solid var(--c-line);border-radius:var(--c-radius);
  padding:22px 22px 20px;box-shadow:var(--c-shadow);text-decoration:none;color:var(--c-ink);overflow:hidden;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.mlc-topic::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-2))}
.mlc-topic:hover{transform:translateY(-3px);box-shadow:var(--c-shadow-lg);border-color:#c7d2fe;color:var(--c-ink)}
.mlc-topic .ico{font-size:1.6rem;line-height:1;margin-bottom:10px;display:block}
.mlc-topic .t{font-weight:800;font-size:1.12rem;margin:0 0 4px}
.mlc-topic .d{color:var(--c-muted);font-size:.93rem;margin:0}
.mlc-topic .go{margin-top:12px;font-weight:700;color:var(--c-accent);font-size:.9rem;display:inline-block}
.mlc-topic.soon{opacity:.72}
.mlc-topic.soon::after{content:"Coming soon";position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);background:var(--c-soft);border:1px solid var(--c-line);padding:3px 8px;border-radius:999px}

/* =========================================================================
   Calculator design system (.mlc-*) — UNSCOPED so it works anywhere
   ========================================================================= */
.mlc{width:100%;box-sizing:border-box;color:var(--c-ink);line-height:1.55}
.mlc *{box-sizing:border-box}
.mlc-card{background:#fff;border:1px solid var(--c-line);border-radius:18px;padding:24px;box-shadow:var(--c-shadow)}
.mlc-title{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:1.3rem;font-weight:800}
.mlc-badge{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-2));color:#fff;font-size:.72rem;padding:4px 10px;border-radius:999px;font-weight:800;letter-spacing:.02em}
.mlc-sub{color:var(--c-muted);margin:0 0 16px;font-size:.92rem}
.mlc label{display:block;font-weight:700;margin:0 0 6px;font-size:.9rem}
.mlc input,.mlc textarea,.mlc select{width:100%;padding:11px 13px;border:1px solid var(--c-line);border-radius:11px;font-size:16px;background:var(--c-soft);color:var(--c-ink);transition:border-color .12s,box-shadow .12s}
.mlc input:focus,.mlc textarea:focus,.mlc select:focus{outline:none;border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(79,70,229,.18);background:#fff}
.mlc-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.mlc-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.mlc button.mlc-go{cursor:pointer;border:0;border-radius:12px;font-weight:700;padding:13px 20px;font-size:.98rem;background:linear-gradient(135deg,var(--c-accent),var(--c-accent-d));color:#fff;flex:1;min-width:160px;box-shadow:0 6px 16px rgba(79,70,229,.28);transition:filter .12s,transform .12s}
.mlc button.mlc-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.mlc button.mlc-clr{cursor:pointer;border:1px solid var(--c-line);border-radius:12px;font-weight:700;padding:13px 20px;background:#fff;color:var(--c-accent-d)}
.mlc button.mlc-clr:hover{background:var(--c-soft-2)}
.mlc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.mlc-stat{background:var(--c-soft);border:1px solid var(--c-line);border-radius:13px;padding:15px}
.mlc-stat .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);font-weight:800}
.mlc-stat .v{font-size:1.4rem;font-weight:800;margin-top:4px;word-break:break-word}
.mlc-stat.hl{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border-color:#c7d2fe}
.mlc-stat.hl .v{color:var(--c-accent-d)}

/* Examples + options controls (used by calculators) */
.mlc-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 2px}
.mlc-tools .lbl{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted);margin-right:2px}
.mlc-chip{cursor:pointer;border:1px solid #c7d2fe;background:var(--c-soft-2);color:var(--c-accent-d);border-radius:999px;padding:6px 13px;font-size:.85rem;font-weight:700;transition:background .12s,transform .12s}
.mlc-chip:hover{background:#e0e7ff;transform:translateY(-1px)}
.mlc-opts{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed var(--c-line)}
.mlc-opt{display:flex;align-items:center;gap:8px}
.mlc-opt label{margin:0;font-size:.86rem;color:#475569}
.mlc-opt select,.mlc-opt input{width:auto;padding:7px 10px;font-size:.9rem}
.mlc details.mlc-steps{margin-top:16px;border:1px solid var(--c-line);border-radius:13px;background:var(--c-soft);padding:0 16px}
.mlc details.mlc-steps summary{cursor:pointer;padding:13px 0;font-weight:800;color:var(--c-accent-d)}

/* Article callouts */
.mlc-lead{font-size:1.14rem;font-weight:600;border-left:4px solid var(--c-accent);padding:2px 0 2px 16px;color:#1e293b}
.mlc-key{background:linear-gradient(135deg,#eef2ff,#f5f3ff);border:1px solid #c7d2fe;border-radius:var(--c-radius);padding:18px 24px;margin:1.5em 0}
.mlc-key h3{margin-top:0;color:var(--c-accent-d)}
.mlc-callout{border-radius:12px;padding:15px 20px;margin:1.4em 0;border-left:5px solid;font-size:1rem}
.mlc-callout.info{background:#eef2ff;border-color:var(--c-accent)}
.mlc-callout.tip{background:#ecfdf5;border-color:#059669}
.mlc-callout.warn{background:#fffbeb;border-color:#d97706}

/* WP button blocks */
.entry-content .wp-block-button__link{background:linear-gradient(135deg,var(--c-accent),var(--c-accent-d));border:0;border-radius:12px;font-weight:700}

/* Footer */
.site-footer,.site-info{background:#0f172a;color:#cbd5e1}
.site-info a{color:#e0e7ff}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:768px){
  .single .inside-article,.page .inside-article{padding:22px 20px;border-radius:16px}
  .entry-header .entry-title{font-size:1.7rem}
  .mlc-hero{padding:32px 24px}
  .mlc-hero h1,.mlc-hero .h1{font-size:1.9rem}
  .mlc-hero p{font-size:1.05rem}
  .entry-content{font-size:1rem}
  .entry-content h2{font-size:1.4rem}
  .mlc-card{padding:18px}
}