/* ==========================================================================
   KDFTek /tools/ — Hero redesign v1 (Worker 2, 2026-10-03)
   --------------------------------------------------------------------------
   TERRITORY: hero region only — .tool-hero, .tools-search-wrap and children.
   Pure CSS. ZERO JS changes. No external assets (the search magnifier is an
   inline SVG data URI). No <title>/meta/JSON-LD/OG/AdSense changes.

   Why no DOM moves: this is a Next.js static export that hydrates against
   the __next_f flight payload (exact DOM structure incl. the green answer
   box and the ad slot order). Moving nodes would trigger a hydration
   mismatch and React would client-re-render the original structure back,
   so the "remove the green box" review item is solved the sanctioned way:
   the box is RESTYLED in place into the hero's elegant subheadline —
   every SEO word (incl. "Answer:" and the color-tools link) stays on the
   page, on the same .aeo-answer node the speakable JSON-LD points at.

   Loaded after the hashed Next.js CSS, the inline UX layer and the shared
   redesign tokens in <head>, so these rules win over them on equal
   specificity. Scoped strictly to hero selectors, so other workers'
   stylesheets cannot be affected.
   Built on the shared tokens (Worker 1): --brand-*, --shadow-*, --radius-*,
   --ease, --dur-base. Tap targets stay >= 44px.
   ========================================================================== */

/* ---------- 1. Hero panel: gradient mesh, generous spacing ---------- */
.tool-hero{
  position:relative;
  max-width:940px;
  margin:6px auto 26px;
  padding:64px 44px 54px;
  text-align:center;
  border-radius:var(--radius-2xl,28px);
  border:1px solid rgba(15,20,17,.08);
  overflow:hidden;
  background:
    radial-gradient(640px 360px at 8% 4%,   rgba(34,197,94,.20), transparent 62%),
    radial-gradient(560px 340px at 94% 8%,  rgba(34,197,94,.13), transparent 60%),
    radial-gradient(780px 480px at 50% 122%,rgba(21,128,61,.13), transparent 62%),
    radial-gradient(420px 260px at 88% 90%, rgba(124,58,237,.06), transparent 60%),
    #fbfdfc;
  box-shadow:var(--shadow-xl,0 24px 64px -12px rgba(15,20,17,.18));
}

/* ---------- 2. Kicker → pill badge ---------- */
.tool-hero .kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:var(--text-xs,12px);
  font-weight:var(--weight-bold,700);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brand-800,#166534);
  background:rgba(255,255,255,.88);
  border:1px solid var(--line-brand,rgba(22,163,74,.28));
  border-radius:var(--radius-full,999px);
  padding:9px 18px;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(15,20,17,.06));
}
.tool-hero .kicker::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  flex:0 0 auto;
  background:var(--brand-500,#22c55e);
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

/* ---------- 3. Headline: refined display type ---------- */
.tool-hero h1{
  margin:20px auto 18px;
  max-width:20ch;
  font-size:clamp(36px,5.6vw,62px);
  line-height:1.04;
  letter-spacing:var(--tracking-display,-.025em);
  font-weight:var(--weight-extrabold,800);
  color:var(--ink);
  text-wrap:balance;
}

/* ---------- 4. The former green "answer" box → elegant subheadline ----
   Same node, same words, same link — the bolted-on box styling is gone. */
.tool-hero .aeo-answer{
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  margin:0 auto;
  max-width:64ch;
  font-size:clamp(15.5px,2vw,18.5px);
  line-height:1.65;
  color:var(--muted);
  text-align:center;
}
.tool-hero .aeo-answer strong{
  color:var(--brand-800,#166534);
  font-weight:var(--weight-bold,700);
}
.tool-hero .aeo-answer a{
  color:var(--brand-800,#166534);
  font-weight:var(--weight-semibold,600);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tool-hero .aeo-answer a:hover{color:var(--brand-600,#16a34a)}

/* ---------- 5. Hint line under the subheadline ---------- */
.tool-hero p:not(.aeo-answer){
  margin:16px auto 0;
  max-width:60ch;
  font-size:var(--text-sm,14px);
  line-height:1.6;
  color:var(--muted);
}

/* ---------- 6. Search block: centered, premium input ---------- */
.tools-search-wrap{
  max-width:780px;
  margin:0 auto 10px;
  position:relative;
}
.tools-search{display:block}
.tools-search input{
  width:100%;
  min-height:66px;
  font-size:17px;
  color:var(--ink);
  padding:17px 28px 17px 62px;
  border-radius:var(--radius-full,999px);
  border:1.5px solid rgba(15,20,17,.10);
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%235c6b62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:24px center;
  background-size:22px 22px;
  box-shadow:0 16px 40px -12px rgba(15,20,17,.14);
  transition:border-color var(--dur-base,250ms) var(--ease),
             box-shadow var(--dur-base,250ms) var(--ease),
             transform var(--dur-base,250ms) var(--ease);
  -webkit-appearance:none;
  appearance:none;
}
.tools-search input::placeholder{color:#9aa5a0;letter-spacing:.01em}
.tools-search input:hover{
  border-color:rgba(22,163,74,.45);
  box-shadow:0 18px 44px -12px rgba(15,20,17,.16);
}
.tools-search input:focus{
  outline:none;
  border-color:var(--brand-500,#22c55e);
  box-shadow:var(--ring,0 0 0 3px rgba(22,163,74,.18)),
             0 20px 48px -12px rgba(15,20,17,.18);
}

/* ---------- 7. Example chips ---------- */
.tools-examples{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
  justify-content:center;
}
.tools-chip{
  min-height:42px;
  padding:9px 18px;
  border-radius:var(--radius-full,999px);
  border:1px solid rgba(15,20,17,.10);
  background:rgba(255,255,255,.9);
  color:var(--muted);
  font-size:13.5px;
  font-weight:var(--weight-semibold,600);
  cursor:pointer;
  transition:border-color var(--dur-base,250ms) var(--ease),
             color var(--dur-base,250ms) var(--ease),
             box-shadow var(--dur-base,250ms) var(--ease),
             transform var(--dur-base,250ms) var(--ease);
}
.tools-chip:hover{
  border-color:var(--brand-500,#22c55e);
  color:var(--brand-800,#166534);
  box-shadow:var(--shadow-md,0 4px 12px -2px rgba(15,20,17,.08));
  transform:translateY(-1px);
}

/* ---------- 8. Category pills: wrapped row, premium active state ---------- */
.tools-cats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
  justify-content:center;
  overflow:visible;
  padding-bottom:0;
}
.tools-cats [role="tab"]{
  flex:0 1 auto;
  white-space:nowrap;
  min-height:48px;
  padding:12px 22px;
  border-radius:var(--radius-full,999px);
  border:1px solid rgba(15,20,17,.10);
  background:#fff;
  color:var(--muted);
  font-size:14px;
  font-weight:var(--weight-bold,700);
  cursor:pointer;
  transition:border-color var(--dur-base,250ms) var(--ease),
             color var(--dur-base,250ms) var(--ease),
             background-color var(--dur-base,250ms) var(--ease),
             box-shadow var(--dur-base,250ms) var(--ease),
             transform var(--dur-base,250ms) var(--ease);
}
.tools-cats [role="tab"]:hover{
  border-color:rgba(22,163,74,.5);
  color:var(--brand-800,#166534);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md,0 4px 12px -2px rgba(15,20,17,.08));
}
.tools-cats [role="tab"].on,
.tools-cats [role="tab"][aria-selected="true"]{
  background:var(--grad-brand,linear-gradient(135deg,#22c55e 0%,#16a34a 100%));
  border-color:transparent;
  color:#fff;
  box-shadow:var(--shadow-brand,0 8px 24px -8px rgba(22,163,74,.45));
}

/* ---------- 9. Mobile-first (390px): stacked pills, full-width search --- */
@media (max-width:640px){
  .tool-hero{
    padding:46px 22px 38px;
    border-radius:22px;
    margin:2px auto 20px;
  }
  .tool-hero h1{
    font-size:clamp(32px,9vw,40px);
    max-width:16ch;
  }
  .tool-hero .kicker{font-size:11px;padding:8px 14px}
  .tool-hero .aeo-answer{font-size:15px}
  .tools-search-wrap{margin-bottom:8px}
  .tools-search input{
    min-height:58px;
    font-size:16px; /* >=16px: no iOS zoom-on-focus */
    padding:14px 20px 14px 52px;
    background-position:19px center;
    background-size:20px 20px;
  }
  .tools-examples{justify-content:flex-start;margin-top:12px}
  .tools-chip{font-size:13px}
  .tools-cats{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:16px;
    overflow:visible;
  }
  .tools-cats [role="tab"]{
    white-space:normal;
    text-align:center;
    font-size:13px;
    line-height:1.3;
    min-height:50px;
    padding:10px 10px;
  }
}

/* ---------- 10. Reduced motion: keep it calm ---------- */
@media (prefers-reduced-motion:reduce){
  .tool-hero *,
  .tools-search-wrap *{transition:none}
}