/*
Theme Name: Arbdar Calc
Theme URI: https://calculator.arbdar.com
Description: Child theme of GeneratePress for calculator.arbdar.com. Clean, fast, ad-safe calculator UI.
Author: Arbdar
Template: generatepress
Version: 1.0.0
Text Domain: arbdar-calc
*/

/* ==========================================================================
   ARBDAR DESIGN SYSTEM — tokens
   Brand: trust blue #1147BB · Action: emerald #10BC83
   ========================================================================== */
:root {
  /* Primary — Trust Blue */
  --ab-p-50:#F2F6FC;  --ab-p-100:#E6ECFA; --ab-p-200:#C6D5F5; --ab-p-300:#8FAEEF;
  --ab-p-400:#5282EB; --ab-p-500:#1555E0; --ab-p-600:#1147BB; --ab-p-700:#0E3B9A;
  --ab-p-800:#0C307E; --ab-p-900:#09235D; --ab-p-950:#04122F;

  /* Accent — Action Emerald */
  --ab-a-50:#F2FCF9;  --ab-a-100:#E5FAF3; --ab-a-200:#C6F5E6; --ab-a-400:#51ECB8;
  --ab-a-500:#14E19D; --ab-a-600:#10BC83; --ab-a-700:#0D9B6C; --ab-a-800:#0B7F58;

  /* Neutrals */
  --ab-n-50:#F8FAFC;  --ab-n-100:#F1F5F9; --ab-n-200:#E2E8F0; --ab-n-300:#CBD5E1;
  --ab-n-400:#94A3B8; --ab-n-500:#64748B; --ab-n-600:#475569; --ab-n-700:#334155;
  --ab-n-800:#1E293B; --ab-n-900:#0F172A;

  /* Semantic */
  --ab-bg:#FFFFFF;
  --ab-surface:var(--ab-n-50);
  --ab-border:var(--ab-n-200);
  --ab-text:var(--ab-n-900);
  --ab-text-muted:var(--ab-n-600);
  --ab-link:var(--ab-p-600);
  --ab-success:var(--ab-a-700);
  --ab-danger:#DC2626;

  /* Type */
  --ab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ab-fs-body:1.0625rem;   /* 17px */
  --ab-fs-h1:1.875rem;      /* 30px */
  --ab-fs-h2:1.375rem;      /* 22px */
  --ab-fs-small:0.875rem;
  --ab-lh:1.6;

  /* Space / radius / shadow */
  --ab-s-1:.25rem; --ab-s-2:.5rem; --ab-s-3:.75rem; --ab-s-4:1rem;
  --ab-s-5:1.5rem; --ab-s-6:2rem; --ab-s-7:3rem;
  --ab-r-sm:4px; --ab-r:8px; --ab-r-lg:12px;
  --ab-shadow:0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.1);

  /* Layout */
  --ab-measure:720px;   /* reading column */
  --ab-wide:840px;      /* tool / table bleed */
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ab-bg:var(--ab-n-900); --ab-surface:var(--ab-n-800);
    --ab-border:#2A3A4F; --ab-text:#F1F5F9; --ab-text-muted:var(--ab-n-400);
    --ab-link:var(--ab-p-400); --ab-success:var(--ab-a-400);
  }
}
:root[data-theme="dark"] {
  --ab-bg:var(--ab-n-900); --ab-surface:var(--ab-n-800);
  --ab-border:#2A3A4F; --ab-text:#F1F5F9; --ab-text-muted:var(--ab-n-400);
  --ab-link:var(--ab-p-400); --ab-success:var(--ab-a-400);
}

/* ==========================================================================
   Base
   ========================================================================== */
body { font-family:var(--ab-font); font-size:var(--ab-fs-body); line-height:var(--ab-lh);
       color:var(--ab-text); background:var(--ab-bg); }
a { color:var(--ab-link); }
h1 { font-size:var(--ab-fs-h1); font-weight:700; letter-spacing:-.01em; }
h2 { font-size:var(--ab-fs-h2); font-weight:700; }

/* Tabular figures everywhere numbers matter */
.ab-result, .ab-table td, .ab-input { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Calculator widget
   ========================================================================== */
.ab-calc {
  background:var(--ab-surface); border:1px solid var(--ab-border);
  border-radius:var(--ab-r-lg); padding:var(--ab-s-5);
  margin:0 0 var(--ab-s-5); max-width:var(--ab-wide);
}
.ab-calc__row { display:flex; flex-wrap:wrap; gap:var(--ab-s-3); align-items:flex-end; }
.ab-field { display:flex; flex-direction:column; gap:var(--ab-s-1); flex:1 1 160px; min-width:0; }
.ab-field label { font-size:var(--ab-fs-small); font-weight:600; color:var(--ab-text-muted); }
.ab-input {
  width:100%; padding:.625rem .75rem; font-size:1.0625rem;
  border:1px solid var(--ab-n-300); border-radius:var(--ab-r);
  background:var(--ab-bg); color:var(--ab-text); min-height:44px; /* tap target */
}
.ab-input:focus { outline:2px solid var(--ab-p-500); outline-offset:1px; border-color:var(--ab-p-500); }

.ab-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem 1.25rem; min-height:44px; font-size:1rem; font-weight:600;
  border:0; border-radius:var(--ab-r); cursor:pointer; text-decoration:none;
}
.ab-btn--calc { background:var(--ab-a-600); color:#04241A; }
.ab-btn--calc:hover { background:var(--ab-a-700); color:#fff; }
.ab-btn--primary { background:var(--ab-p-600); color:#fff; }
.ab-btn--primary:hover { background:var(--ab-p-700); }
.ab-btn--ghost { background:transparent; color:var(--ab-link); border:1px solid var(--ab-border); }

/* Result block — min-height reserved to prevent CLS */
.ab-result {
  margin-top:var(--ab-s-4); padding:var(--ab-s-4);
  background:var(--ab-p-50); border:1px solid var(--ab-p-200);
  border-radius:var(--ab-r); min-height:84px;
}
:root[data-theme="dark"] .ab-result,
@media (prefers-color-scheme: dark) { }
.ab-result__value { font-size:1.75rem; font-weight:700; color:var(--ab-p-700); line-height:1.2; }
.ab-result__label { font-size:var(--ab-fs-small); color:var(--ab-text-muted); margin-bottom:var(--ab-s-1); }
.ab-result__steps { margin-top:var(--ab-s-3); font-size:var(--ab-fs-small); color:var(--ab-text-muted); }

/* ==========================================================================
   Content blocks
   ========================================================================== */
.ab-prose { max-width:var(--ab-measure); }
.ab-table { width:100%; border-collapse:collapse; margin:var(--ab-s-4) 0; }
.ab-table th, .ab-table td { padding:.5rem .75rem; border:1px solid var(--ab-border); text-align:left; }
.ab-table thead th { background:var(--ab-n-100); font-size:var(--ab-fs-small); }
.ab-table tbody tr:nth-child(odd) { background:var(--ab-n-50); }
.ab-scroll-x { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.ab-faq details {
  border:1px solid var(--ab-border); border-radius:var(--ab-r);
  padding:var(--ab-s-3) var(--ab-s-4); margin-bottom:var(--ab-s-2); background:var(--ab-surface);
}
.ab-faq summary { font-weight:600; cursor:pointer; }

/* Related calculators */
.ab-related { max-width:var(--ab-wide); margin:var(--ab-s-6) 0; }
.ab-related__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--ab-s-3); }
.ab-card {
  display:block; padding:var(--ab-s-3) var(--ab-s-4); background:var(--ab-surface);
  border:1px solid var(--ab-border); border-radius:var(--ab-r);
  text-decoration:none; color:var(--ab-text); font-weight:600;
}
.ab-card:hover { border-color:var(--ab-p-400); }
.ab-card small { display:block; font-weight:400; color:var(--ab-text-muted); margin-top:2px; }

/* Breadcrumbs */
.ab-crumbs { font-size:var(--ab-fs-small); color:var(--ab-text-muted); margin-bottom:var(--ab-s-3); }
.ab-crumbs a { color:var(--ab-text-muted); }

/* Trust / byline */
.ab-byline {
  display:flex; flex-wrap:wrap; gap:var(--ab-s-3); align-items:center;
  font-size:var(--ab-fs-small); color:var(--ab-text-muted);
  border-top:1px solid var(--ab-border); border-bottom:1px solid var(--ab-border);
  padding:var(--ab-s-3) 0; margin:var(--ab-s-4) 0;
}

/* ==========================================================================
   Ad slots — FIXED dimensions to guarantee CLS = 0
   ========================================================================== */
.ab-ad { display:block; margin:var(--ab-s-5) auto; text-align:center; overflow:hidden; }
.ab-ad::before { content:"Advertisement"; display:block; font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ab-n-400); margin-bottom:4px; }
.ab-ad--leaderboard { min-height:90px;  max-width:728px; }
.ab-ad--rect        { min-height:250px; max-width:336px; }
.ab-ad--rail        { min-height:600px; max-width:300px; }
@media (max-width:768px){
  .ab-ad--leaderboard { min-height:100px; max-width:320px; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.ab-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
         clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:600px){
  :root { --ab-fs-h1:1.625rem; --ab-fs-body:1rem; }
  .ab-calc { padding:var(--ab-s-4); }
  .ab-field { flex:1 1 100%; }
}

/* ==========================================================================
   HOMEPAGE + HUB COMPONENTS
   ========================================================================== */
.ab-page { max-width:var(--ab-wide); margin:0 auto; padding:var(--ab-s-5) var(--ab-s-4); }

.ab-hero { text-align:center; margin-bottom:var(--ab-s-5); }
.ab-hero h1 { margin:0 0 var(--ab-s-2); }
.ab-hero__sub { max-width:640px; margin:0 auto; color:var(--ab-text-muted); }

/* --- Basic calculator (homepage head-term tool) --- */
.ab-basic {
  max-width:340px; margin:0 auto var(--ab-s-5);
  background:var(--ab-surface); border:1px solid var(--ab-border);
  border-radius:var(--ab-r-lg); padding:var(--ab-s-4); box-shadow:var(--ab-shadow);
}
.ab-basic__screen {
  background:var(--ab-bg); border:1px solid var(--ab-border); border-radius:var(--ab-r);
  padding:var(--ab-s-3) var(--ab-s-4); margin-bottom:var(--ab-s-3);
  font-size:1.75rem; font-weight:700; text-align:right; min-height:64px;
  display:flex; align-items:center; justify-content:flex-end;
  overflow-x:auto; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.ab-basic__keys { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--ab-s-2); }
.ab-key {
  min-height:52px; font-size:1.125rem; font-weight:600; cursor:pointer;
  border:1px solid var(--ab-border); border-radius:var(--ab-r);
  background:var(--ab-bg); color:var(--ab-text);
}
.ab-key:hover { border-color:var(--ab-p-400); }
.ab-key:active { transform:translateY(1px); }
.ab-key--op { background:var(--ab-p-50); color:var(--ab-p-700); border-color:var(--ab-p-200); }
.ab-key--fn { background:var(--ab-n-100); color:var(--ab-text-muted); }
.ab-key--eq { background:var(--ab-a-600); color:#04241A; border-color:var(--ab-a-700); }
.ab-key--eq:hover { background:var(--ab-a-700); color:#fff; }
.ab-key--wide { grid-column:span 2; }

/* --- Quick chips --- */
.ab-chips { display:flex; flex-wrap:wrap; gap:var(--ab-s-2); justify-content:center; margin-bottom:var(--ab-s-5); }
.ab-chip {
  display:inline-block; padding:.375rem .875rem; border-radius:999px;
  background:var(--ab-p-50); color:var(--ab-p-700); border:1px solid var(--ab-p-200);
  text-decoration:none; font-size:var(--ab-fs-small); font-weight:600;
}
.ab-chip:hover { background:var(--ab-p-100); }

/* --- Trust strip --- */
.ab-trust {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--ab-s-4);
  border-top:1px solid var(--ab-border); padding-top:var(--ab-s-5); margin-top:var(--ab-s-6);
}
.ab-trust strong { display:block; margin-bottom:var(--ab-s-1); }
.ab-trust span { color:var(--ab-text-muted); font-size:var(--ab-fs-small); }

@media (max-width:600px){
  .ab-basic { max-width:100%; }
}

/* --- Footer --- */
.ab-footer-nav { margin-bottom:var(--ab-s-2); }
.ab-footer-menu { list-style:none; display:flex; flex-wrap:wrap; gap:var(--ab-s-4);
  justify-content:center; margin:0; padding:0; }
.ab-footer-menu a { font-size:var(--ab-fs-small); text-decoration:none; }
.ab-footer-menu a:hover { text-decoration:underline; }
.ab-footer-legal { font-size:var(--ab-fs-small); color:var(--ab-text-muted); margin:var(--ab-s-2) 0; }
.ab-theme-toggle { background:transparent; border:1px solid var(--ab-border);
  color:var(--ab-text-muted); border-radius:var(--ab-r); padding:.25rem .75rem;
  font-size:var(--ab-fs-small); cursor:pointer; }
.ab-theme-toggle:hover { border-color:var(--ab-p-400); color:var(--ab-link); }