/*
 * Calculators section styles — reuses design tokens (colors, radii, spacing)
 * from the :root variables defined/rendered via css/styles.css. Loaded as an
 * extra stylesheet on /calculators and its sub-pages (see Router/index.php).
 */

/* Shared hero banner, mirrors .blog-hero */
.calc-hero{padding:calc(var(--nav-h) + 50px) 24px 10px;text-align:center}
.calc-hero .kick{font-size:.82rem;font-weight:500;letter-spacing:1.5px;color:var(--purple);direction:ltr}
.calc-hero h1{font-size:clamp(1.9rem,4.5vw,2.8rem);font-weight:700;margin-top:10px;letter-spacing:-.4px}
.calc-hero p{color:var(--muted);font-weight:300;margin-top:10px;max-width:50ch;margin-inline:auto}
.calc-hero .breadcrumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.calc-hero .breadcrumbs a{color:var(--muted)} .calc-hero .breadcrumbs a:hover{color:var(--cyan)}

/* TOOL INDEX: card grid linking to each calculator */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:var(--maxw);margin:0 auto;padding:50px 24px}
.tool-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:30px;transition:border-color .25s,transform .25s}
.tool-card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.tool-card .ic{width:36px;height:36px;color:var(--cyan);margin-bottom:16px}
.tool-card h2{font-size:1.2rem;font-weight:600;margin-bottom:10px}
.tool-card p{font-size:.92rem;color:var(--muted);font-weight:300;line-height:1.8;margin-bottom:18px}
.tool-card .btn{align-self:flex-start}

/* CALCULATOR FORM */
.calc-form{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-card);padding:34px}
.calc-group{margin-bottom:30px}
.calc-label{display:block;font-size:.95rem;font-weight:600;margin-bottom:14px}

/* shape / mode selector buttons */
.option-grid{display:flex;flex-wrap:wrap;gap:10px}
.opt{font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:8px;background:rgba(10,22,40,.5);border:1px solid var(--border);color:var(--muted);padding:11px 18px;border-radius:var(--r-btn);font-size:.88rem;font-weight:500;transition:background .2s,color .2s,border-color .2s}
.opt .ic{width:18px;height:18px;flex-shrink:0}
.opt:hover{color:var(--text);border-color:var(--cyan)}
.opt.active{background:var(--cyan);color:#04121a;border-color:var(--cyan);font-weight:600}
.opt.active .ic{color:#04121a}

/* numeric inputs */
.calc-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input-field{display:flex;flex-direction:column;gap:8px}
.input-field.full{grid-column:1 / -1}
.input-field label{font-size:.82rem;color:var(--muted)}
.input-field input,.input-field select{font-family:inherit;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-btn);color:var(--text);padding:11px 14px;font-size:.92rem}
.input-field input:focus,.input-field select:focus{outline:none;border-color:var(--cyan)}
.input-field input::placeholder{color:var(--muted)}
.input-hint{font-size:.78rem;color:var(--muted);font-weight:300;margin-top:-2px}

/* result */
.calc-result{margin:30px 0 0;text-align:center;background:var(--card2);border:1px solid var(--border);border-radius:var(--r-card);padding:24px}
.calc-result-label{font-size:.82rem;color:var(--muted);letter-spacing:1px}
.calc-result-value{font-size:1.5rem;font-weight:700;margin:10px 0;direction:ltr;color:var(--cyan)}
.calc-result-value.placeholder{font-size:.92rem;font-weight:400;color:var(--muted);direction:rtl}
.calc-result-note{font-size:.8rem;color:var(--muted);font-weight:300}
.calc-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.calc-result-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-btn);padding:14px}
.calc-result-item .lbl{font-size:.78rem;color:var(--muted)}
.calc-result-item .val{font-size:1.05rem;font-weight:700;direction:ltr;color:var(--cyan);margin-top:6px}

/* shape diagram caption */
.shape-note{font-size:.82rem;color:var(--muted);font-weight:300;margin-top:14px;text-align:center}

/* SEO ARTICLE CONTENT — mirrors .post .content typography */
.calc-article{max-width:74ch;margin:0 auto;padding:var(--pad) 24px;font-weight:300;line-height:1.9;text-align:justify}
.calc-article h2{font-size:1.4rem;font-weight:600;margin:34px 0 14px;letter-spacing:-.2px}
.calc-article h2:first-child{margin-top:0}
.calc-article h3{font-size:1.15rem;font-weight:600;margin:28px 0 12px}
.calc-article p{margin-bottom:16px}
.calc-article ul,.calc-article ol{margin:0 0 16px 0;padding-inline-start:1.6em}
.calc-article li{margin-bottom:6px}
.calc-article code{font-family:monospace;background:var(--card2);padding:2px 6px;border-radius:4px;font-size:.88em;direction:ltr;display:inline-block}
.calc-article blockquote{border-inline-start:3px solid var(--cyan);padding-inline-start:18px;color:var(--muted);margin:20px 0}
.calc-article a{color:var(--cyan)}
.calc-article a:hover{text-decoration:underline}

/* TABLET */
@media(max-width:860px){
  .tool-grid{grid-template-columns:1fr}
  .calc-inputs{grid-template-columns:1fr 1fr}
  .calc-result-grid{grid-template-columns:1fr}
}
/* MOBILE */
@media(max-width:600px){
  .calc-form{padding:22px}
  .calc-inputs{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}