/* ==========================================================================
   ToolsForAll public UI — SmallSEOTools.com inspired restyle
   -------------------------------------------------------
   Design tokens: navy #10233f, blue #1677c8, orange #f58b24, soft gray #f4f7fb
   Radius: 12px; Font: Plus Jakarta Sans
   ========================================================================== */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --tfa-bg:#f4f7fb;
  --tfa-surface:#ffffff;
  --tfa-surface-2:#f8fafc;
  --tfa-text:#10233f;
  --tfa-muted:#687386;
  --tfa-line:#e2e6ea;
  --tfa-brand:#1677c8;
  --tfa-brand-dark:#0e589e;
  --tfa-orange:#f58b24;
  --tfa-green:#25a26b;
  --tfa-radius:12px;
  --tfa-radius-sm:8px;
  --tfa-shadow:0 1px 3px rgba(16,35,63,.06);
  --tfa-shadow-sm:0 1px 2px rgba(16,35,63,.05);
  --tfa-transition:.2s ease;
}

/* ─── Base & Typography ──────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{
  background:var(--tfa-bg);
  color:var(--tfa-text);
  font-family:'Plus Jakarta Sans',Inter,Arial,sans-serif;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--tfa-brand);text-decoration:underline}
a:hover{color:var(--tfa-brand-dark);text-decoration:none}
abbr[title]{border-bottom:1px dotted currentColor}

/* ─── Container ──────────────────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ─── Navbar ──────────────────────────────────────────────────────────────── */
.navbar{
  background:rgba(255,255,255,.9)!important;
  border-bottom:1px solid var(--tfa-line)!important;
  box-shadow:var(--tfa-shadow)!important;
  backdrop-filter:blur(10px);
  min-height:60px;
}
.navbar .container-xl{max-width:1200px}
.navbar-brand{
  font-size:1.25rem;
  font-weight:800;
  color:var(--tfa-text)!important;
}
.navbar-brand img{max-height:36px;width:auto}
.navbar-nav .nav-link,.navbar .btn{
  color:#38465a;
  font-weight:600;
}
.navbar .nav-item>.nav-link,.navbar-nav .nav-link{
  padding:.5rem .75rem;
  border-radius:var(--tfa-radius-sm);
  margin:.2rem .1rem;
}
.navbar .nav-item.active>.nav-link,.navbar-nav .nav-link.active{
  color:var(--tfa-brand)!important;
  background:rgba(22,119,200,.08);
}
.navbar .nav-item.active>.nav-link:after{
  content:"";position:absolute;left:.5rem;right:.5rem;bottom:-.25rem;height:2px;border-radius:2px;background:var(--tfa-brand)
}

/* ─── Home page ───────────────────────────────────────────────────────────── */
.home-hero{
  background:var(--tfa-surface);
  border-radius:var(--tfa-radius);
  box-shadow:var(--tfa-shadow);
  margin-bottom:2rem;
  overflow:hidden;
}
.home-hero .container{
  padding:2rem 1.5rem;
}
.home-hero__tag{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tfa-orange);background:rgba(245,139,36,.12);border:1px solid rgba(245,139,36,.3);padding:.35rem .65rem;border-radius:999px;margin-bottom:1rem;
}
.home-hero__title{
  font-size:clamp(1.8rem,4vw,2.5rem);
  line-height:1.1;
  letter-spacing:-.03em;
  font-weight:800;
  margin:0 0 .75rem;
}
.home-hero__sub{
  color:var(--tfa-muted);
  font-size:1rem;
  line-height:1.6;
  margin:0;
}
.home-search{
  margin:2rem 0;
  max-width:600px;
}
.home-search .form-control{
  border:1px solid var(--tfa-line)!important;
  border-radius:var(--tfa-radius)!important;
  box-shadow:var(--tfa-shadow-sm)!important;
  font-size:1rem;
  font-weight:550;
  padding:.6rem 1rem;
  height:48px;
  transition:var(--tfa-transition);
}
.home-search .form-control:focus{
  border-color:var(--tfa-brand)!important;
  box-shadow:0 0 0 3px rgba(22,119,200,.08)!important;
}
.home-search__btn{
  background:var(--tfa-brand);
  color:#fff;
  border:none;
  border-radius:var(--tfa-radius);
  font-weight:600;
  padding:.6rem 1.2rem;
  margin-left:.5rem;
  transition:var(--tfa-transition);
}
.home-search__btn:hover{background:var(--tfa-brand-dark)}

/* Category grid on home */
.home-categories{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.2rem;margin-top:2rem;
}
.home-category{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:1.2rem;
  text-decoration:none;
  color:var(--tfa-text);
  transition:var(--tfa-transition);
  display:flex;align-items:center;gap:.6rem;
}
.home-category:hover{background:#f1f5fa;border-color:#d8dce5}
.home-category .icon{
  width:36px;height:36px;border-radius:var(--tfa-radius-sm);
  background:var(--tfa-surface-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.home-category .icon svg{width:20px;height:20px;fill:var(--tfa-brand)}
.home-category .title{font-weight:600;font-size:.95rem}
.home-category .count{color:var(--tfa-muted);font-size:.8rem}

/* Popular tools grid */
.home-popular{
  margin-top:2rem;
  max-width:500px;
}
.home-popular .card{
  border:none;
  border-radius:var(--tfa-radius);
  box-shadow:var(--tfa-shadow);
  transition:var(--tfa-transition);
  height:100%;
  display:flex;flex-direction:column;
}
.home-popular .card-img{
  height:140px;
  border-radius:var(--tfa-radius) var(--tfa-radius) 0 0;
  background:var(--tfa-surface-2);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.home-popular .card-img img{max-width:80px;margin:auto}
.home-popular .card-body{
  padding:1rem;
  flex:1;
  display:flex;flex-direction:column;justify-content:space-between;
}
.home-popular .card-title{font-size:.95rem;font-weight:600;margin:0 0 .3rem}
.home-popular .card-text{font-size:.85rem;color:var(--tfa-muted);line-height:1.4;margin:0 0 .8rem}
.home-popular .card-link{
  align-self:flex-end;
  font-size:.8rem;
  color:var(--tfa-brand);
  font-weight:600;
}
.home-popular .card-link:hover{text-decoration:underline}

/* ─── Tool page ──────────────────────────────────────────────────────────── */
.tool-page .page-header{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:2rem 1.5rem 1rem;
  margin-bottom:1.5rem;
  box-shadow:var(--tfa-shadow);
}
.tool-page .page-header .title{
  font-size:clamp(1.8rem,4vw,2.2rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin:0 0 .3rem;
}
.tool-page .page-header .sub{
  color:var(--tfa-muted);
  font-size:.9rem;
}
.tool-page .tool-meta{
  margin-top:.5rem;
  font-size:.85rem;
  color:var(--tfa-muted);
}
.tool-page .tool-meta .category{
  display:inline-block;margin-right:.8rem;
  font-weight:500;
  color:var(--tfa-brand);
}
.tool-page .tool-description{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:1.5rem;
  margin-bottom:1.5rem;
  line-height:1.7;
  color:var(--tfa-text);
}
.tool-page .tool-description p{margin:0 0 1rem}
.tool-page .tool-description h3,.tool-page .tool-description h4{
  color:var(--tfa-text);
  font-weight:600;
  margin:1rem 0 .5rem;
}
.tool-page .tool-actions{
  background:var(--tfa-surface-2);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:1rem;
  margin-top:1rem;
}
.tool-page .related-tools{
  margin-top:2rem;
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:1.5rem;
}
.tool-page .related-tools h3{
  font-size:1.1rem;
  font-weight:700;
  margin:0 0 1rem;
  color:var(--tfa-text);
}
.tool-page .related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1rem;
}
.tool-page .related-card{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  padding:1rem;
  text-decoration:none;
  color:var(--tfa-text);
  transition:var(--tfa-transition);
}
.tool-page .related-card:hover{background:#f1f5fa;border-color:#d8dce5}
.tool-page .related-card .title{font-weight:600;font-size:.85rem;margin:0 0 .3rem}
.tool-page .related-card .desc{font-size:.8rem;color:var(--tfa-muted);line-height:1.4;margin:0}

/* ─── Tool iframe / embed ────────────────────────────────────────────────── */
.tool-iframe{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  overflow:hidden;
  margin:1rem 0;
}
.tool-iframe iframe{
  width:100%;height:500px;border:none;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.footer{
  background:var(--tfa-text,#10233f);
  color:#c7d4e2;
  margin-top:3rem;
  padding:2rem 0;
}
.footer h3,.footer p,.footer a{
  color:inherit!important;
}
.footer h3{font-size:1rem;font-weight:700;margin:0 0 .8rem}
.footer p{font-size:.85rem;margin:0 0 .8rem}
.footer a:hover{color:#fff!important}
.footer .footer-links{list-style:none;padding:0;margin:0}
.footer .footer-links li{margin:0 0 .5rem}
.footer .footer-links a{color:#c7d4e2;font-size:.85rem;transition:var(--tfa-transition)}
.footer .footer-links a:hover{color:#fff}
.footer .bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1rem;margin-top:1.5rem;font-size:.8rem;color:rgba(255,255,255,.5)}
.footer .social-share a{
  width:36px;height:36px;border-radius:var(--tfa-radius);
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  color:#c7d4e2;
  margin-right:.4rem;
  transition:var(--tfa-transition);
}
.footer .social-share a:hover{background:rgba(255,255,255,.25);color:#fff}

/* ─── Blog page ───────────────────────────────────────────────────────────── */
.blog-feature{
  background:var(--tfa-surface);
  border:1px solid var(--tfa-line);
  border-radius:var(--tfa-radius);
  overflow:hidden;
  margin-bottom:1.5rem;
  box-shadow:var(--tfa-shadow);
}
.blog-feature img{
  width:100%;height:220px;object-fit:cover;
}
.blog-feature .meta{
  background:var(--tfa-surface-2);
  padding:.75rem 1rem;
  font-size:.8rem;
  color:var(--tfa-muted);
}
.blog-feature .title{
  padding:1rem 1rem 0;
  font-size:1.1rem;
  font-weight:700;
}
.blog-feature .title a{color:var(--tfa-text)}
.blog-list{margin:0;padding:0}
.blog-list li{
  padding:1rem 0;border-bottom:1px solid var(--tfa-line);
  list-style:none;
}
.blog-list li:last-child{border-bottom:none}
.blog-list .title{font-weight:600;font-size:.95rem}
.blog-list .meta{color:var(--tfa-muted);font-size:.8rem}

/* ─── Forms ──────────────────────────────────────────────────────────────── */
.form-control,.select2-container .select2-selection{
  border:1px solid var(--tfa-line)!important;
  border-radius:var(--tfa-radius)!important;
  box-shadow:none!important;
  font-size:1rem;
  transition:var(--tfa-transition);
}
.form-control:focus{
  border-color:var(--tfa-brand)!important;
  box-shadow:0 0 0 3px rgba(22,119,200,.08)!important;
}
.form-label{font-weight:600;margin-bottom:.4rem}
.form-text{font-size:.85rem;color:var(--tfa-muted)}
.btn{
  border-radius:var(--tfa-radius);
  font-weight:600;
  transition:var(--tfa-transition);
}
.btn-primary{background:var(--tfa-brand);border-color:var(--tfa-brand);color:#fff}
.btn-primary:hover{background:var(--tfa-brand-dark);border-color:var(--tfa-brand-dark)}
.btn-secondary{background:var(--tfa-surface);border:1px solid var(--tfa-line);color:var(--tfa-text)}
.btn-secondary:hover{background:#f1f5fa}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:768px){
  /* Mobile font size minimum 16px for readability */
  html{font-size:16px}
  .container{padding:0 1rem}
  .navbar{min-height:56px}
  .navbar .nav-item>.nav-link,.navbar-nav .nav-link{
    padding:.75rem .5rem;
    font-size:1rem;
  }
  /* Tap targets minimum 48px */
  .btn,.nav-link,.item-box,.home-category{
    min-height:48px;
  }
  .btn{
    padding:12px 16px;
  }
  .home-hero .container{padding:1.5rem 1rem}
  .home-search{max-width:100%}
  .home-search .form-control{height:48px;padding:.75rem .8rem}
  .home-search .form-control:focus{box-shadow:0 0 0 3px rgba(22,119,200,.1)!important}
  .home-category{padding:1rem}
  .home-category .icon{width:30px;height:30px}
  .footer{padding:1.5rem 0}
  .footer .bottom{font-size:.75rem}
}

@media(max-width:480px){
  .home-categories{grid-template-columns:1fr}
  .home-popular{max-width:100%}
  .tool-page .page-header{padding:1.5rem}
  .tool-page .tool-description{padding:1rem}
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*:before,*{transition:none!important;animation:none!important}
  .navbar .nav-item.active>.nav-link:after{display:none}