/*
Theme Name: FreeToolBank
Theme URI: https://freetoolbank.com
Description: FreeToolBank child theme. Fast, clean, private online tools.
Author: FreeToolBank
Template: generatepress
Version: 1.0.0
Text Domain: freetoolbank
*/

/* ============================================================
   1. DESIGN TOKENS  —  CLAUDE.md §5.1, verbatim.
   The dark-mode block is intentionally duplicated across the
   media query and the [data-ftb-theme] selector. A media query
   cannot be overridden by JS, so the attribute selector must
   carry the same values for the manual toggle to work.
   KEEP THEM IN SYNC. Do not "simplify".
   ------------------------------------------------------------
   NOTE FOR STAGE 3: these tokens move to the ftb-core plugin at
   assets/css/core.css and this block is deleted. core.css must
   then be enqueued SITE-WIDE, not conditionally — only per-tool
   CSS is conditional. See CLAUDE.md §2.3 (portability): tool CSS
   must never depend on the theme.
   ============================================================ */

/* ---- LIGHT (default) ---- */
:root {
  --ftb-bg:#fff; --ftb-surface:#f7f8fa; --ftb-border:#e3e6ea;
  --ftb-text:#14181f; --ftb-text-muted:#5b6472;
  --ftb-primary:#2563eb; --ftb-primary-hover:#1d4ed8;
  --ftb-success:#15803d; --ftb-warning:#b45309; --ftb-error:#b91c1c;

  --ftb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", Arial, sans-serif;
  --ftb-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ftb-text-sm:.875rem; --ftb-text-base:1rem; --ftb-text-lg:1.25rem;
  --ftb-text-xl:1.563rem; --ftb-text-2xl:1.953rem; --ftb-text-3xl:2.441rem;

  --ftb-space-1:.25rem; --ftb-space-2:.5rem;  --ftb-space-3:.75rem;
  --ftb-space-4:1rem;   --ftb-space-6:1.5rem; --ftb-space-8:2rem;
  --ftb-space-12:3rem;  --ftb-space-16:4rem;

  --ftb-radius:8px; --ftb-radius-lg:12px;
  --ftb-shadow:0 1px 3px rgba(0,0,0,.08);
  --ftb-maxw:1200px; --ftb-maxw-prose:68ch;
}

/* ---- DARK ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-ftb-theme="light"]) {
    --ftb-bg:#0f1319; --ftb-surface:#171c24; --ftb-border:#2a313c;
    --ftb-text:#e8eaed; --ftb-text-muted:#9aa4b2;
    --ftb-primary:#60a5fa; --ftb-primary-hover:#93c5fd;
    --ftb-success:#4ade80; --ftb-warning:#fbbf24; --ftb-error:#f87171;
    --ftb-shadow:0 1px 3px rgba(0,0,0,.4);
  }
}

:root[data-ftb-theme="dark"] {
  --ftb-bg:#0f1319; --ftb-surface:#171c24; --ftb-border:#2a313c;
  --ftb-text:#e8eaed; --ftb-text-muted:#9aa4b2;
  --ftb-primary:#60a5fa; --ftb-primary-hover:#93c5fd;
  --ftb-success:#4ade80; --ftb-warning:#fbbf24; --ftb-error:#f87171;
  --ftb-shadow:0 1px 3px rgba(0,0,0,.4);
}

/* ---- Extended tokens (site chrome) ----
   Every one of these is derived from or contrast-checked against
   the §5.1 palette. Category gradients are the seven from
   STAGE-2 §2.3, tokenised so no raw hex appears below this block. */
:root {
  --ftb-header-h:64px;
  --ftb-focus:2px solid var(--ftb-primary);
  --ftb-focus-offset:2px;
  --ftb-tap:24px;
  --ftb-transition:150ms ease;

  --ftb-cat-developer-a:#2563eb;  --ftb-cat-developer-b:#1e40af;
  --ftb-cat-compliance-a:#15803d; --ftb-cat-compliance-b:#166534;
  --ftb-cat-business-a:#b45309;   --ftb-cat-business-b:#92400e;
  --ftb-cat-text-a:#7c3aed;       --ftb-cat-text-b:#5b21b6;
  --ftb-cat-converters-a:#0891b2; --ftb-cat-converters-b:#155e75;
  --ftb-cat-datetime-a:#be185d;   --ftb-cat-datetime-b:#9d174d;
  --ftb-cat-design-a:#ea580c;     --ftb-cat-design-b:#9a3412;

  --ftb-on-gradient:#fff;
}

@media (prefers-reduced-motion: reduce) {
  :root { --ftb-transition:0ms; }
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ============================================================
   2. BASE
   ============================================================ */

*, *::before, *::after { box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:var(--ftb-header-h); }

body.ftb {
  margin:0;
  background:var(--ftb-bg);
  color:var(--ftb-text);
  font-family:var(--ftb-font);
  font-size:var(--ftb-text-base);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}

.ftb h1, .ftb h2, .ftb h3, .ftb h4 {
  line-height:1.25; margin:0 0 var(--ftb-space-4); font-weight:700;
}
.ftb h1 { font-size:var(--ftb-text-3xl); letter-spacing:-.02em; }
.ftb h2 { font-size:var(--ftb-text-2xl); letter-spacing:-.01em; }
.ftb h3 { font-size:var(--ftb-text-xl); }
.ftb h4 { font-size:var(--ftb-text-lg); }
.ftb p  { margin:0 0 var(--ftb-space-4); }

.ftb a { color:var(--ftb-primary); text-decoration:underline; text-underline-offset:.15em; }
.ftb a:hover { color:var(--ftb-primary-hover); }

.ftb :focus-visible {
  outline:var(--ftb-focus); outline-offset:var(--ftb-focus-offset);
  border-radius:var(--ftb-radius);
}

.ftb code, .ftb pre { font-family:var(--ftb-mono); font-size:var(--ftb-text-sm); }

.ftb img { max-width:100%; height:auto; }

.ftb-wrap { width:100%; max-width:var(--ftb-maxw); margin:0 auto; padding:0 var(--ftb-space-4); }
.ftb-prose { max-width:var(--ftb-maxw-prose); }

.ftb-visually-hidden {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.ftb-skip {
  position:absolute; left:var(--ftb-space-2); top:calc(var(--ftb-space-2) * -1);
  z-index:100; transform:translateY(-200%);
  background:var(--ftb-bg); color:var(--ftb-text);
  border:1px solid var(--ftb-border); border-radius:var(--ftb-radius);
  padding:var(--ftb-space-2) var(--ftb-space-4);
  text-decoration:none; font-weight:600;
}
.ftb-skip:focus { transform:translateY(calc(var(--ftb-space-4) * 2)); }

/* ============================================================
   3. BUTTONS / CONTROLS
   ============================================================ */

.ftb-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--ftb-space-2);
  min-height:calc(var(--ftb-tap) * 2); min-width:var(--ftb-tap);
  padding:var(--ftb-space-3) var(--ftb-space-6);
  font:inherit; font-weight:600; line-height:1;
  border:1px solid transparent; border-radius:var(--ftb-radius);
  cursor:pointer; text-decoration:none;
  transition:background var(--ftb-transition), color var(--ftb-transition);
}
.ftb-btn-primary { background:var(--ftb-primary); color:var(--ftb-bg); }
.ftb-btn-primary:hover { background:var(--ftb-primary-hover); color:var(--ftb-bg); }

.ftb-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:calc(var(--ftb-tap) * 1.75); height:calc(var(--ftb-tap) * 1.75);
  padding:0; background:none; color:var(--ftb-text);
  border:1px solid var(--ftb-border); border-radius:var(--ftb-radius);
  cursor:pointer;
  transition:border-color var(--ftb-transition), color var(--ftb-transition);
}
.ftb-icon-btn:hover { border-color:var(--ftb-primary); color:var(--ftb-primary); }
.ftb-icon-btn svg { width:var(--ftb-space-6); height:var(--ftb-space-6); fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Theme toggle. .ftb-when-light shows while the LIGHT theme is active (and
   holds the moon icon — the mode you'd switch to). .ftb-when-dark is its
   inverse. The media query and attribute selector are both required, for the
   same reason the token blocks are duplicated. */
.ftb-when-dark { display:none; }
:root[data-ftb-theme="dark"] .ftb-when-light { display:none; }
:root[data-ftb-theme="dark"] .ftb-when-dark  { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-ftb-theme="light"]) .ftb-when-light { display:none; }
  :root:not([data-ftb-theme="light"]) .ftb-when-dark  { display:block; }
  :root[data-ftb-theme="light"] .ftb-when-light { display:block; }
  :root[data-ftb-theme="light"] .ftb-when-dark  { display:none; }
}

/* ============================================================
   4. HEADER
   ============================================================ */

.ftb-header {
  position:sticky; top:0; z-index:50;
  height:var(--ftb-header-h);
  background:var(--ftb-bg);
  border-bottom:1px solid var(--ftb-border);
}
.ftb-header-inner {
  display:flex; align-items:center; gap:var(--ftb-space-4);
  height:var(--ftb-header-h);
}

.ftb-logo { display:flex; align-items:center; flex:0 0 auto; text-decoration:none; }
.ftb-logo img { display:block; max-height:calc(var(--ftb-header-h) - var(--ftb-space-8)); width:auto; }
.ftb-logo-text { font-weight:700; font-size:var(--ftb-text-lg); color:var(--ftb-text); text-decoration:none; }

.ftb-nav { margin-left:auto; }
.ftb-nav ul { display:flex; align-items:center; gap:var(--ftb-space-1);
  list-style:none; margin:0; padding:0; }
.ftb-nav a {
  display:flex; align-items:center;
  min-height:calc(var(--ftb-tap) * 1.5);
  padding:var(--ftb-space-2) var(--ftb-space-3);
  color:var(--ftb-text); text-decoration:none; font-size:var(--ftb-text-sm);
  font-weight:600; border-radius:var(--ftb-radius);
}
.ftb-nav a:hover { color:var(--ftb-primary); background:var(--ftb-surface); }

.ftb-header-search { flex:0 1 auto; max-width:calc(var(--ftb-maxw) / 5); width:100%; }
.ftb-header-actions { display:flex; align-items:center; gap:var(--ftb-space-2); flex:0 0 auto; }

.ftb-menu-toggle { display:none; }

/* ============================================================
   5. SEARCH
   ============================================================ */

.ftb-search { position:relative; display:flex; width:100%; }
.ftb-search input[type="search"] {
  flex:1 1 auto; width:100%;
  min-height:calc(var(--ftb-tap) * 1.75);
  padding:var(--ftb-space-2) var(--ftb-space-3);
  font:inherit; font-size:var(--ftb-text-sm);
  color:var(--ftb-text); background:var(--ftb-surface);
  border:1px solid var(--ftb-border); border-radius:var(--ftb-radius);
}
.ftb-search input[type="search"]::placeholder { color:var(--ftb-text-muted); opacity:1; }

.ftb-search-hint {
  position:absolute; right:var(--ftb-space-3); top:50%; transform:translateY(-50%);
  font-family:var(--ftb-mono); font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted); pointer-events:none;
}
.ftb-search input:focus ~ .ftb-search-hint { display:none; }

/* Homepage hero search — the primary CTA */
.ftb-search-hero { max-width:var(--ftb-maxw-prose); margin:0 auto;
  gap:var(--ftb-space-2); flex-wrap:wrap; }
.ftb-search-hero input[type="search"] {
  min-height:calc(var(--ftb-tap) * 2.25);
  padding:var(--ftb-space-3) var(--ftb-space-4);
  font-size:var(--ftb-text-lg); background:var(--ftb-bg);
}
.ftb-search-hero .ftb-btn { flex:0 0 auto; }
.ftb-search-note {
  margin:var(--ftb-space-3) 0 0; font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted); text-align:center; width:100%;
}

/* ============================================================
   6. HOMEPAGE
   ============================================================ */

.ftb-hero { padding:var(--ftb-space-16) 0 var(--ftb-space-12); text-align:center; }
.ftb-hero h1 { margin-bottom:var(--ftb-space-4); }
.ftb-hero-sub {
  max-width:var(--ftb-maxw-prose); margin:0 auto var(--ftb-space-8);
  font-size:var(--ftb-text-lg); color:var(--ftb-text-muted);
}

.ftb-section { padding:var(--ftb-space-12) 0; }
.ftb-section-head { margin-bottom:var(--ftb-space-8); }
.ftb-section-head h2 { margin-bottom:var(--ftb-space-2); }
.ftb-section-head p { color:var(--ftb-text-muted); margin:0; }

.ftb-grid { display:grid; gap:var(--ftb-space-4); grid-template-columns:1fr; }
@media (min-width:480px) { .ftb-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px) { .ftb-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .ftb-grid-4 { grid-template-columns:repeat(4,1fr); } }

/* --- Category card ---
   The gradient lives in the ICON TILE, never behind text.

   Measured white-on-gradient contrast, gradient start colours (2026-08-08):

     developer   #2563eb  5.17:1  body PASS
     compliance  #15803d  5.02:1  body PASS
     business    #b45309  5.02:1  body PASS
     text        #7c3aed  5.70:1  body PASS
     converters  #0891b2  3.68:1  body FAIL  ← below the §9 4.5:1 floor
     datetime    #be185d  6.04:1  body PASS
     design      #ea580c  3.56:1  body FAIL  ← below the §9 4.5:1 floor

   Two of the seven cannot legally carry body-size white text. All seven clear
   the 3:1 UI-component threshold, so a white ICON on the gradient is fine.
   Card text therefore sits on --ftb-surface at full token contrast.

   DO NOT move text back onto the gradient. On a site that sells accessibility
   compliance tools, shipping a WCAG failure in the furniture is indefensible.
   If the palette changes, re-measure both themes before it ships (§5.1). */
.ftb-cat {
  display:flex; flex-direction:column; gap:var(--ftb-space-3);
  padding:var(--ftb-space-6);
  background:var(--ftb-surface);
  border:1px solid var(--ftb-border); border-radius:var(--ftb-radius-lg);
}
.ftb-cat-icon {
  display:flex; align-items:center; justify-content:center;
  width:var(--ftb-space-12); height:var(--ftb-space-12);
  border-radius:var(--ftb-radius); color:var(--ftb-on-gradient);
  background-image:linear-gradient(135deg, var(--ftb-cat-a), var(--ftb-cat-b));
}
.ftb-cat-icon svg { width:var(--ftb-space-6); height:var(--ftb-space-6);
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ftb-cat h3 { margin:0; font-size:var(--ftb-text-lg); }
.ftb-cat p { margin:0; color:var(--ftb-text-muted); font-size:var(--ftb-text-sm); }

.ftb-cat-developer  { --ftb-cat-a:var(--ftb-cat-developer-a);  --ftb-cat-b:var(--ftb-cat-developer-b); }
.ftb-cat-compliance { --ftb-cat-a:var(--ftb-cat-compliance-a); --ftb-cat-b:var(--ftb-cat-compliance-b); }
.ftb-cat-business   { --ftb-cat-a:var(--ftb-cat-business-a);   --ftb-cat-b:var(--ftb-cat-business-b); }
.ftb-cat-text       { --ftb-cat-a:var(--ftb-cat-text-a);       --ftb-cat-b:var(--ftb-cat-text-b); }
.ftb-cat-converters { --ftb-cat-a:var(--ftb-cat-converters-a); --ftb-cat-b:var(--ftb-cat-converters-b); }
.ftb-cat-datetime   { --ftb-cat-a:var(--ftb-cat-datetime-a);   --ftb-cat-b:var(--ftb-cat-datetime-b); }
.ftb-cat-design     { --ftb-cat-a:var(--ftb-cat-design-a);     --ftb-cat-b:var(--ftb-cat-design-b); }

.ftb-cat-status {
  margin-top:auto; align-self:flex-start;
  padding:var(--ftb-space-1) var(--ftb-space-3);
  font-size:var(--ftb-text-sm); font-weight:600;
  color:var(--ftb-text-muted);
  background:var(--ftb-bg);
  border:1px solid var(--ftb-border); border-radius:var(--ftb-radius);
}

/* --- Empty states — honest, never fake counts --- */
.ftb-empty {
  padding:var(--ftb-space-8); text-align:center;
  color:var(--ftb-text-muted);
  background:var(--ftb-surface);
  border:1px dashed var(--ftb-border); border-radius:var(--ftb-radius-lg);
}
.ftb-empty p:last-child { margin-bottom:0; }

/* --- Why FreeToolBank --- */
.ftb-why { background:var(--ftb-surface); border-top:1px solid var(--ftb-border);
  border-bottom:1px solid var(--ftb-border); }
.ftb-why h3 { display:flex; align-items:center; gap:var(--ftb-space-2);
  margin-bottom:var(--ftb-space-2); }
.ftb-why h3 svg { width:var(--ftb-space-6); height:var(--ftb-space-6);
  flex:0 0 auto; color:var(--ftb-primary);
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.ftb-why p { color:var(--ftb-text-muted); margin:0; }

/* --- Trust line --- */
.ftb-trust {
  padding:var(--ftb-space-8) 0; text-align:center;
  font-size:var(--ftb-text-lg); font-weight:600;
}

/* ============================================================
   7. PAGE / 404
   ============================================================ */

.ftb-page { padding:var(--ftb-space-12) 0 var(--ftb-space-16); }
.ftb-page-header { margin-bottom:var(--ftb-space-8); }
.ftb-page-content > * { max-width:var(--ftb-maxw-prose); }
.ftb-page-content h2 { margin-top:var(--ftb-space-8); }
.ftb-page-content h3 { margin-top:var(--ftb-space-6); }
.ftb-page-content ul, .ftb-page-content ol {
  max-width:var(--ftb-maxw-prose); padding-left:var(--ftb-space-6);
  margin:0 0 var(--ftb-space-4);
}
.ftb-page-content li { margin-bottom:var(--ftb-space-2); }
.ftb-page-content table {
  width:100%; max-width:var(--ftb-maxw-prose);
  border-collapse:collapse; margin:0 0 var(--ftb-space-6);
  font-size:var(--ftb-text-sm);
}
.ftb-page-content th, .ftb-page-content td {
  padding:var(--ftb-space-3); text-align:left;
  border-bottom:1px solid var(--ftb-border);
}
.ftb-page-content th { font-weight:700; background:var(--ftb-surface); }
.ftb-updated { margin-top:var(--ftb-space-8); font-size:var(--ftb-text-sm);
  color:var(--ftb-text-muted); }

.ftb-404 { padding:var(--ftb-space-16) 0; text-align:center; }
.ftb-404 .ftb-search { max-width:var(--ftb-maxw-prose); margin:var(--ftb-space-8) auto 0; }

.ftb-results { padding:var(--ftb-space-12) 0 var(--ftb-space-16); }
.ftb-result { padding:var(--ftb-space-4) 0; border-bottom:1px solid var(--ftb-border); }
.ftb-result h2 { font-size:var(--ftb-text-lg); margin-bottom:var(--ftb-space-1); }
.ftb-result p { margin:0; color:var(--ftb-text-muted); font-size:var(--ftb-text-sm); }

/* ============================================================
   8. FOOTER
   ============================================================ */

.ftb-footer {
  margin-top:var(--ftb-space-16);
  background:var(--ftb-surface);
  border-top:1px solid var(--ftb-border);
}
.ftb-footer-cols {
  display:grid; gap:var(--ftb-space-8);
  grid-template-columns:1fr;
  padding:var(--ftb-space-12) 0;
}
@media (min-width:480px) { .ftb-footer-cols { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .ftb-footer-cols { grid-template-columns:repeat(4,1fr); } }

.ftb-footer h2 {
  margin-bottom:var(--ftb-space-4);
  font-size:var(--ftb-text-sm); font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--ftb-text);
}
.ftb-footer ul { list-style:none; margin:0; padding:0; }
.ftb-footer li { margin-bottom:var(--ftb-space-1); }
.ftb-footer li a, .ftb-footer li span {
  display:inline-flex; align-items:center;
  min-height:var(--ftb-tap);
  font-size:var(--ftb-text-sm);
}
.ftb-footer li a { color:var(--ftb-text-muted); text-decoration:none; }
.ftb-footer li a:hover { color:var(--ftb-primary); text-decoration:underline; }
.ftb-footer li span { color:var(--ftb-text-muted); }

.ftb-footer-bottom {
  display:flex; flex-wrap:wrap; gap:var(--ftb-space-2) var(--ftb-space-6);
  justify-content:space-between; align-items:center;
  padding:var(--ftb-space-6) 0;
  border-top:1px solid var(--ftb-border);
  font-size:var(--ftb-text-sm); color:var(--ftb-text-muted);
}
.ftb-footer-bottom p { margin:0; }

/* ============================================================
   9. MOBILE  (<768px)
   ============================================================ */

@media (max-width:767px) {
  .ftb-header-search { display:none; }
  .ftb-menu-toggle { display:inline-flex; order:3; }

  .ftb-nav {
    display:none; position:absolute; left:0; right:0; top:var(--ftb-header-h);
    padding:var(--ftb-space-4);
    background:var(--ftb-bg); border-bottom:1px solid var(--ftb-border);
    box-shadow:var(--ftb-shadow);
  }
  .ftb-nav.is-open { display:block; }
  .ftb-nav ul { flex-direction:column; align-items:stretch; gap:var(--ftb-space-1); }
  .ftb-nav a { min-height:calc(var(--ftb-tap) * 1.75); font-size:var(--ftb-text-base); }

  .ftb-hero { padding:var(--ftb-space-12) 0 var(--ftb-space-8); }
  .ftb h1 { font-size:var(--ftb-text-2xl); }
  .ftb h2 { font-size:var(--ftb-text-xl); }
  .ftb-search-hero input[type="search"] { font-size:var(--ftb-text-base); }
  .ftb-search-hero .ftb-btn { width:100%; }
  .ftb-search-hint { display:none; }
}