:root{
  /*
    Global colour tokens.  The default palette in the original template
    used a very dark primary colour (#0E2A47) for the header and other
    accents.  This resulted in a high‑contrast, almost navy look which
    clashed with the otherwise light UI.  To achieve a brighter and
    friendlier appearance we select a medium blue for the primary hue
    and leave all other colours unchanged.  The background remains
    off‑white for warmth and readability.

    Primary: #2C74B3 – a mid‑tone blue inspired by the web‑safe palette.
    Primary ink: white text for sufficient contrast on the header.
  */
  /*
    Use a very light background for the body and surfaces.  This keeps
    content feeling airy and modern without a dull yellow tint.
    Muted text colours are softened for improved contrast.
  */
  --bg:#F9FAFB;
  --surface:#FFFFFF;
  --ink:#0F172A;
  --muted:#64748B;
  --primary:#2C74B3;
  --primary-ink:#FFFFFF;
  --card:#FFFFFF;
  --border:#E5E7EB;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.04);
  --radius:14px;
  --space:14px;
  --maxw:1120px;
}
/*
  When the user prefers a dark colour scheme we override the global
  variables with a complementary dark palette.  Colours are chosen
  to provide sufficient contrast on dark backgrounds while maintaining
  the same hue relationships as the light theme.  Cards and headers
  remain distinct from the background and the primary accent colour
  stays constant across both modes.
*/
@media (prefers-color-scheme: dark) {
  :root {
    /*
      Adopt a dark palette that remains comfortable on the eyes.  We
      retain the same blue accent colour while brightening the ink and
      softening the muted tones.  Shadows are strengthened slightly to
      preserve depth on dark surfaces.
    */
    --bg:#0F172A;
    --surface:#1E293B;
    --ink:#F1F5F9;
    --muted:#94A3B8;
    --primary:#2C74B3;
    --primary-ink:#FFFFFF;
    --card:#1E293B;
    --border:#334155;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.3);
  }
}

/*
  Support dark mode.  When the user prefers a dark colour scheme we
  override the root variables with darker backgrounds and lighter
  text.  The primary colour is kept the same (a mid‑tone blue) to
  maintain brand consistency, while secondary surfaces and borders
  become darker.  Shadows are increased slightly to preserve depth on
  dark backgrounds.
*/
@media (prefers-color-scheme: dark) {
  :root{
    --bg:#0F172A;
    --surface:#1F2A37;
    --ink:#F1F5F9;
    --muted:#94A3B8;
    --primary:#2C74B3;
    --primary-ink:#FFFFFF;
    --card:#1E293B;
    --border:#334155;
    --shadow:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.3);
  }
}
html,body{background:var(--bg);color:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:16px}
.header{background:var(--primary);color:var(--primary-ink);border-radius:16px;margin:16px auto 24px;max-width:var(--maxw)}
.header a{color:var(--primary-ink);text-decoration:none}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;flex-wrap:wrap;row-gap:12px}
.nav{display:flex;gap:18px;font-weight:500;opacity:.95;flex-wrap:wrap}
@media (max-width:640px){
  .header-inner{justify-content:center}
  .nav{width:100%;justify-content:center;gap:12px}
  footer .links{gap:12px}
}
.hero{text-align:center;padding:24px 0 12px}
.hero h1{font-size:clamp(32px,5vw,48px);line-height:1.05;letter-spacing:-.02em}
.hero p{margin-top:8px;color:var(--muted);max-width:56ch;margin-inline:auto}
/* A custom grid class used on the dynamic category pages (e.g.
   /categories/[slug]).  It defines 1–3 columns at increasing
   breakpoints and removes list markers.  We avoid the generic `.grid`
   class name to prevent conflicts with Tailwind’s own `grid` utility. */
.cards-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Reset list styling on grid lists so category pages do not show
   unwanted bullets or padding.  Each `li` is rendered as a card. */
ul.grid{list-style:none;padding:0;margin:0}
ul.grid li{list-style:none}
.card{
  /* Make cards fill the available width of their grid cell and stack
     text vertically.  Using display:block ensures that anchor tags
     expand to the full width of their parent container, preventing
     content from being clipped when long titles wrap. */
  display: block;
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(15,23,42,.08),0 10px 28px rgba(15,23,42,.06)}
.card h3{
  margin: 2px 0 6px;
  font-size: 18px;
  /* Allow long calculator names to wrap onto multiple lines without
     overflowing the card. */
  word-wrap: break-word;
  white-space: normal;
}
.card p{
  color: var(--muted);
  font-size: 14px;
  /* Ensure descriptions wrap naturally within the card. */
  word-wrap: break-word;
  white-space: normal;
}
.ad-slot{border:1px dashed var(--border);background:#F8FAFC;border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;color:#64748B;font-size:14px}
.section{margin-block:24px}
.input{width:100%;border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:#FFF}
.input:focus{outline:2px solid #93C5FD;outline-offset:1px}
.btn-primary{background:var(--primary);color:var(--primary-ink);border:none;border-radius:12px;
  padding:12px 16px;font-weight:600;cursor:pointer}
.btn-primary:hover{filter:brightness(1.05)}
.faq summary{cursor:pointer;font-weight:600}
footer .links{display:flex;gap:16px;justify-content:center;color:var(--muted);flex-wrap:wrap}
footer .links a{color:inherit;text-decoration:none}
footer .links a:hover{text-decoration:underline;color:var(--ink)}