/* ==========================================================================
   PETITOOL — vibrant indigo brand + per-language accent system.
   Mobile-first, CSS-only, no frameworks. WCAG AA body text. No layout shift:
   hover/active states use transform + box-shadow only (never padding/margin/
   border-width changes), so nothing reflows under the pointer.
   ========================================================================== */
:root {
  /* Brand: deep indigo duotone (NOT Kalkula's green — deliberate separation) */
  --brand: #343a8f;
  --brand-deep: #232654;
  --brand-ink: #191c40;
  --bg: #ffffff;
  --surface: #f4f5fc;
  --text: #1b1f31;
  --muted: #5a5f74;
  --border: #dde2f1;
  --radius: 12px;

  /* Default accent = pt (burnt orange). Overridden per language below. */
  --acc: #c2410c;
  --acc-deep: #93330b;
  --acc-soft: color-mix(in srgb, var(--acc) 8%, #ffffff);
  --btn-text: #ffffff;
}

/* Per-language hero-CTA accents. White button text on every accent is
   WCAG AA (>= 4.5:1) — verified by script, see DESIGN.md. */
html[lang="pt-BR"] { --acc: #c2410c; --acc-deep: #93330b; }
html[lang="tr"]    { --acc: #0e7490; --acc-deep: #0a5a6f; }
html[lang="ms"]    { --acc: #15803d; --acc-deep: #0e5c2b; }
html[lang="ru"]    { --acc: #1d4ed8; --acc-deep: #153aa3; }
html[lang="uk"]    { --acc: #b45309; --acc-deep: #874007; }
html[lang="pl"]    { --acc: #0369a1; --acc-deep: #024e78; }
html[lang="ro"]    { --acc: #be123c; --acc-deep: #8f0e2d; }
html[lang="vi"]    { --acc: #b91c1c; --acc-deep: #8a1414; }
html[lang="th"]    { --acc: #9d174d; --acc-deep: #741239; }
html[lang="tl"]    { --acc: #6d28d9; --acc-deep: #501ba3; }
html[lang="sw"]    { --acc: #4d7c0f; --acc-deep: #3a5e0b; }
html[lang="ar"]    { --acc: #047857; --acc-deep: #035c43; }
html[lang="ja"]    { --acc: #c62828; --acc-deep: #951e1e; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  line-height: 1.65; font-size: 17px;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 18px; }
a { color: var(--brand); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--acc) 65%, #ffffff);
  outline-offset: 2px;
}
img { max-width: 100%; }

/* ---------- Header: indigo duotone + accent rule ---------- */
.site-header {
  background:
    radial-gradient(130% 150% at 12% -20%, rgba(255,255,255,.16), rgba(255,255,255,0) 55%),
    linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 62%, #4c53bb 100%);
  color: #fff; padding: 16px 0 18px;
  border-bottom: 4px solid var(--acc);
  box-shadow: 0 4px 18px rgba(25,28,64,.28);
}
.site-header a { color: #fff; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.brand svg rect { fill: var(--brand-deep); } /* override legacy green badge via CSS */
.brand svg { filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.tagline { margin: 6px 0 12px; font-size: 14px; opacity: .88; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.lang-link {
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  padding: 5px 14px; border-radius: 20px; text-decoration: none;
  backdrop-filter: blur(2px);
  transition: background .15s ease, transform .15s ease;
}
.lang-link:hover { background: rgba(255,255,255,.32); transform: translateY(-1px); }
.lang-current {
  padding: 5px 14px; border-radius: 20px; background: #fff;
  color: var(--brand-deep); font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* ---------- Main ---------- */
main { padding: 28px 0 44px; }
h1 { font-size: 30px; line-height: 1.25; margin: 0 0 6px; color: var(--brand-ink); letter-spacing: -.015em; }
.subtitle { color: var(--muted); margin-top: 0; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.breadcrumb a { color: var(--muted); }

/* ---------- 3D hero buttons ----------
   Layered gradient + inset highlight + physical base shadow + ambient accent
   glow. :active collapses the base shadow and drops 3px = real press feel. */
.calc-copy, .gateway-links a {
  position: relative; display: inline-block; text-align: center;
  padding: 14px 30px; font-size: 18px; font-weight: 800; letter-spacing: .01em;
  color: var(--btn-text); text-decoration: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 82%, #ffffff) 0%,
    var(--acc) 52%,
    var(--acc-deep) 100%);
  border: 1px solid var(--acc-deep); border-radius: 14px; cursor: pointer;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 4px 0 var(--acc-deep),
    0 10px 22px rgba(10,10,30,.28),
    0 3px 12px color-mix(in srgb, var(--acc) 50%, transparent);
  transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.calc-copy:hover, .gateway-links a:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 5px 0 var(--acc-deep),
    0 14px 26px rgba(10,10,30,.3),
    0 4px 16px color-mix(in srgb, var(--acc) 55%, transparent);
}
.calc-copy:active, .gateway-links a:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.3),
    0 1px 0 var(--acc-deep),
    0 4px 10px rgba(10,10,30,.25);
  filter: brightness(.97);
}

/* ---------- Calculator widget: raised card with accent edge ---------- */
.calc {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-inline-start: 6px solid var(--acc);
  border-radius: 16px; padding: 22px; margin: 22px 0;
  box-shadow: 0 8px 24px rgba(25,28,64,.09);
}
.calc-label { display: block; font-weight: 700; margin-bottom: 8px; color: var(--brand-ink); }
.calc-input {
  width: 100%; max-width: 340px; padding: 13px 15px; font-size: 18px;
  border: 2px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.calc-input:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 20%, transparent);
}
.calc-result { margin-top: 16px; }
.calc-hint { color: var(--muted); margin: 0; }
.calc-error { color: #b3261e; font-weight: 600; margin: 0; }
.age-big { font-size: 20px; margin: 0 0 10px; }
.age-num { font-size: 36px; font-weight: 800; color: var(--acc-deep); }
.age-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.age-facts li {
  background: #fff; border: 1px solid var(--border);
  border-inline-start: 4px solid var(--acc);
  border-radius: 10px; padding: 10px 14px; font-size: 16px;
  box-shadow: 0 2px 6px rgba(25,28,64,.05);
}
.calc-copy { margin-top: 16px; }

/* ---------- Content ---------- */
.tool-page h2 { font-size: 22px; margin: 32px 0 10px; color: var(--brand-ink); }
.tool-page h3 { font-size: 18px; margin: 24px 0 8px; color: var(--brand-ink); }
.tool-box p, .faq-block p { margin: 0 0 14px; }
.formula {
  background: var(--acc-soft); border: 1.5px dashed var(--acc);
  border-radius: 10px; padding: 12px 16px; font-family: ui-monospace, monospace;
}

/* ---------- FAQ ---------- */
.faq-block details {
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px;
  background: #fff; overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-block details[open] {
  border-color: color-mix(in srgb, var(--acc) 55%, var(--border));
  box-shadow: 0 6px 16px rgba(25,28,64,.07);
}
.faq-block summary {
  padding: 13px 16px; cursor: pointer; font-weight: 700; color: var(--brand-ink);
  list-style-position: inside;
}
.faq-block summary:hover { color: var(--acc-deep); }
.faq-block details p { padding: 0 16px 14px; margin: 0; color: var(--text); }

/* ---------- Related / also-in link lists ---------- */
.related-tools ul, .also-in ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.related-tools li a, .also-in li a {
  display: block; padding: 12px 16px;
  background: linear-gradient(180deg, #ffffff, var(--surface));
  border: 1px solid var(--border); border-inline-start: 4px solid var(--border);
  border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--brand-ink);
  box-shadow: 0 2px 6px rgba(25,28,64,.05);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.related-tools li a:hover, .also-in li a:hover {
  border-color: color-mix(in srgb, var(--acc) 50%, var(--border));
  border-inline-start-color: var(--acc);
  background: var(--acc-soft);
  box-shadow: 0 6px 14px rgba(25,28,64,.09);
}

/* ---------- Hub: vibrant tool cards ---------- */
.tool-grid { display: grid; gap: 14px; margin: 22px 0; }
.tool-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px 18px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  box-shadow: 0 3px 10px rgba(25,28,64,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.tool-card::before { /* accent gradient stripe = portal-style color coding */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px;
  background: linear-gradient(90deg, var(--acc) 0%, color-mix(in srgb, var(--acc) 60%, var(--brand)) 100%);
}
.tool-card::after { /* soft accent glow, bottom-right */
  content: ""; position: absolute; inset: auto -40px -40px auto; width: 140px; height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.tool-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc) 45%, var(--border));
  box-shadow: 0 14px 30px rgba(25,28,64,.13),
              0 3px 10px color-mix(in srgb, var(--acc) 28%, transparent);
}
.tool-card:active { transform: translateY(-1px) scale(.99); }
.tool-card h2 { margin: 0 0 6px; font-size: 20px; }
.tool-card h2 a { text-decoration: none; color: var(--brand-deep); }
.tool-card h2 a:hover { color: var(--acc-deep); }
.tool-card p { margin: 0; color: var(--muted); font-size: 15px; }
.tool-soon { opacity: .6; }
.tool-soon::before { background: linear-gradient(90deg, var(--muted), var(--border)); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), #eceef8);
  padding: 24px 0 44px; font-size: 14px; color: var(--muted);
}
.also-from-us { margin: 0 0 8px; }
.copyright { margin: 0; }

/* ---------- Gateway (language picker) ---------- */
.gateway { text-align: center; padding: 48px 18px; max-width: 600px; margin: 0 auto; }
.gateway h1 {
  font-size: 36px; color: var(--brand-ink);
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  -webkit-background-clip: text; background-clip: text;
}
.gateway .subtitle { font-size: 18px; }
.gateway-links { display: grid; gap: 14px; margin-top: 28px; }
.gateway-links a { display: block; padding: 16px; font-size: 19px; border-radius: 14px; }
.gateway-links small { display: block; font-weight: 400; font-size: 14px; opacity: .9; margin-top: 2px; }

@media (min-width: 640px) {
  h1 { font-size: 38px; }
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .calc { padding: 26px; }
}

/* ---------- Responsive tables ---------- */
.tool-page table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; display: block; overflow-x: auto; border-radius: 10px; }
.tool-page thead, .tool-page tbody { display: table; width: 100%; }
.tool-page th, .tool-page td { padding: 9px 12px; border: 1px solid var(--border); text-align: left; white-space: nowrap; }
.tool-page th {
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  color: #fff; border-color: var(--brand-deep);
}
.tool-page tbody tr:nth-child(even) { background: var(--surface); }

/* ---------- Reduced motion: kill transitions/transforms ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  .calc-copy:hover, .gateway-links a:hover, .tool-card:hover, .lang-link:hover { transform: none; }
  .calc-copy:active, .gateway-links a:active, .tool-card:active { transform: none; }
}

/* ---- Brand prominence (2026-10-07): bigger name + badge, tagline under name, larger nav ---- */
.brand{font-size:32px;font-weight:800}
.brand svg{width:42px;height:42px}
.tagline{font-size:13.5px;opacity:.88;margin:6px 0 12px;max-width:34rem;line-height:1.4}
.lang-link,.lang-current{font-size:16px;font-weight:600}
@media (max-width:640px){
  .brand{font-size:25px}
  .brand svg{width:34px;height:34px}
  .tagline{font-size:12.5px}
  .lang-link,.lang-current{font-size:14px}
}