/* ==========================================================================
   Fastols — New Homepage styles
   This file was referenced by templates/page.html (link rel=stylesheet
   href="/assets/css/homepage-new.css") but was missing from the project,
   so every ".home-*", ".cat-*", ".cc-*", ".popular-*", ".pt-*", ".cf-chip",
   ".all-tools-*", ".why-*", ".bc-*" and ".hs-*" element on index.html was
   rendering completely unstyled. That is what caused:
     1) the "Explore all tools" category grid overflowing off the right
        edge of the screen on mobile, and
     2) the empty round search icon floating in front of the category
        filter chips on desktop.
   ========================================================================== */

.homepage-new{overflow-x:hidden}

/* ---------- Hero ---------- */
.home-hero{padding:34px 0 30px;text-align:center;background:var(--bg)}
.home-hero h1{font-size:clamp(26px,4.8vw,48px);font-weight:900;letter-spacing:-1.1px;line-height:1.16;color:#000;max-width:820px;margin-inline:auto}
.home-sub{margin-top:14px;color:var(--ink-soft,#5b6270);font-size:clamp(15.5px,2vw,19px);max-width:600px;margin-inline:auto;line-height:1.65}

.home-search-wrap{position:relative;max-width:620px;margin:26px auto 0}
.home-search{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:8px 8px 8px 22px;box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s}
html[dir=rtl] .home-search{padding:8px 22px 8px 8px}
.home-search:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-50)}
.home-search>svg.icon{width:19px;height:19px;color:var(--ink-faint,#9aa1ae);flex-shrink:0}
.home-search input{flex:1;min-width:0;border:none;outline:0;font-size:15.5px;background:0 0;color:var(--ink)}
.home-search-submit{flex-shrink:0;display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;border-radius:999px;padding:12px 20px;transition:filter .18s,transform .18s}
.home-search-submit svg{width:16px;height:16px}
.home-search-submit span{white-space:nowrap}
.home-search-submit:hover{filter:brightness(1.06)}
.home-search-submit:active{transform:scale(.97)}
@media(max-width:480px){.home-search-submit span{display:none}.home-search-submit{padding:12px}}

.home-search-popup{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;z-index:40;max-height:360px;overflow:auto;display:none}
.home-search-popup:not(:empty){display:block}
.home-search-popup a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink)}
.home-search-popup a:hover{background:var(--bg-soft)}

/* ---------- Trust strip ---------- */
.home-trust{padding:0 0 8px}
.home-trust-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px}
.home-trust-item{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink-soft,#5b6270)}
.home-trust-item svg{width:16px;height:16px;color:#16a34a;flex-shrink:0}

/* ---------- Generic section wrapper ---------- */
.home-section{padding:48px 0}
.home-section--tight{padding-top:8px}
.home-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.home-section-head h2{font-size:clamp(20px,2.6vw,26px);font-weight:900;color:var(--ink)}
.home-section-head p{color:var(--ink-soft,#5b6270);margin-top:6px;font-size:14px}
.hs-eyebrow{display:block;font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.02em;margin-bottom:4px}
.hs-link{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:var(--ink)}
.hs-link svg{width:13px;height:13px}
.hs-link:hover{text-decoration:underline}

/* ---------- Trustpilot reviews (free badge, no paid widget) ---------- */
.trustpilot-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.trustpilot-badge{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:32px 24px}
.tp-badge-stars{display:flex;gap:6px}
.tp-badge-stars svg{width:26px;height:26px;fill:#00B67A}
.tp-badge-text{font-size:15px;font-weight:700;color:var(--ink);max-width:480px;line-height:1.7}
.tp-badge-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:14.5px;color:#fff;background:#00B67A;border-radius:999px;padding:13px 26px;transition:filter .18s,transform .18s}
.tp-badge-btn svg{width:16px;height:16px}
.tp-badge-btn:hover{filter:brightness(1.06)}
.tp-badge-btn:active{transform:scale(.97)}
html[dir=rtl] .tp-badge-btn svg{transform:scaleX(-1)}
@media(max-width:640px){.trustpilot-badge{padding:24px 16px}}

/* ---------- Popular tools grid ---------- */
.popular-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:640px){.popular-grid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media(min-width:1024px){.popular-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.popular-tool{display:flex;flex-direction:column;gap:10px;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:20px 18px;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;min-width:0}
.popular-tool:hover{border-color:#2DCC29;transform:translateY(-3px);box-shadow:0 16px 28px -18px rgba(20,20,43,.28)}
.popular-tool .pt-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;flex-shrink:0}
.popular-tool .pt-ico svg{width:20px;height:20px}
.popular-tool h3{font-size:14.5px;font-weight:800;color:#000;line-height:1.4}
.popular-tool .pt-desc{font-size:12.5px;color:var(--ink-soft,#5b6270);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.popular-tool .pt-desc:empty{display:none}
.popular-tool .pt-cta{margin-top:auto;padding-top:8px;font-size:12.5px;font-weight:700;color:#2DCC29;display:inline-flex;align-items:center;gap:5px}
.popular-tool .pt-cta svg{width:12px;height:12px;transition:transform .18s}
.popular-tool:hover .pt-cta svg{transform:translateX(-3px)}
html[dir=rtl] .popular-tool:hover .pt-cta svg{transform:scaleX(-1) translateX(-3px)}

/* ---------- Explore-all-tools category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
@media(min-width:640px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.cat-card{display:flex;align-items:center;gap:12px;min-width:0;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:16px;transition:transform .18s,box-shadow .18s,border-color .18s}
.cat-card:hover{border-color:#2DCC29;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.cat-card .cc-ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff}
.cat-card .cc-ico svg{width:20px;height:20px}
.cat-card .cc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-card .cc-name{font-size:13.5px;font-weight:800;color:#000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat-card .cc-count{font-size:11.5px;color:var(--ink-faint,#9aa1ae);font-weight:600}
.cat-card .cc-count:empty{display:none}


/* ---------- All tools: search + filter bar ---------- */
.all-tools-bar{display:flex;flex-direction:column;gap:14px;margin-bottom:22px}
.all-tools-search{position:relative;display:flex;align-items:center;max-width:420px}
.all-tools-search .ats-icon{position:absolute;inset-inline-start:16px;width:17px;height:17px;color:var(--ink-faint,#9aa1ae);pointer-events:none}
.all-tools-search input{width:100%;border:1.5px solid var(--border);background:var(--bg-soft);border-radius:999px;padding:12px 16px 12px 42px;font-size:14px;outline:0;color:var(--ink);transition:border-color .18s,background .18s}
html[dir=rtl] .all-tools-search .ats-icon{inset-inline-start:auto;inset-inline-end:16px}
html[dir=rtl] .all-tools-search input{padding:12px 42px 12px 16px}
.all-tools-search input:focus{border-color:var(--primary);background:#fff}

.cat-filter{display:flex;flex-wrap:nowrap;gap:9px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cat-filter::-webkit-scrollbar{display:none}
@media(min-width:900px){.cat-filter{flex-wrap:wrap;overflow-x:visible}}
.cf-chip{flex-shrink:0;background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:9px 16px;font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ink-soft,#5b6270);cursor:pointer;white-space:nowrap;transition:.18s}
.cf-chip:hover{border-color:var(--ink);color:var(--ink)}
.cf-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}

.all-tools-grid{margin-top:4px}
.all-tools-results-note{margin-top:18px;text-align:center;font-size:13px;color:var(--ink-faint,#9aa1ae)}
.all-tools-results-note:empty{display:none}

/* ---------- Why use Fastols ---------- */
.why-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:24px;transition:transform .2s,box-shadow .2s}
.why-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.why-card .wc-ico{width:44px;height:44px;border-radius:13px;background:var(--primary-50);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);margin-bottom:14px}
.why-card .wc-ico svg{width:21px;height:21px}
.why-card h3{font-size:15px;font-weight:800;margin-bottom:6px;color:#000}
.why-card p{font-size:13px;color:var(--ink-soft,#5b6270);line-height:1.7}

/* ---------- Blog teaser cards on the homepage (bc-* naming) ---------- */
.blog-card .bc-cover{position:relative;display:flex;align-items:center;justify-content:center;height:130px;background:linear-gradient(135deg,var(--c1,#2DCC29),var(--c2,#2DCC29));flex-shrink:0;overflow:hidden}
.blog-card .bc-cover svg{width:32px;height:32px;color:#fff}
.blog-card .bc-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.blog-card .bc-cat{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:800;color:#000;background:var(--primary-50);border-radius:999px;padding:4px 12px;margin-bottom:10px}
.blog-card .bc-cat:empty,.blog-card h3:empty,.blog-card p:empty,.blog-card .bc-more:empty{background:var(--bg-soft);color:transparent;border-radius:8px}
.blog-card h3{font-size:15.5px;font-weight:800;color:var(--ink);line-height:1.5;margin-bottom:8px}
.blog-card p{font-size:13px;color:var(--ink-soft,#5b6270);line-height:1.7;margin-bottom:14px;flex:1}
.blog-card .bc-more{font-size:13px;font-weight:700;color:#000}
.blog-more-cta{display:flex;justify-content:center;margin-top:26px}

/* ---------- Blog card: link arrow + hover ---------- */
.blog-card .bc-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--primary-dark)}
.blog-card .bc-more svg{width:16px;height:16px;transition:transform .18s}
.blog-card:hover .bc-more svg{transform:translateX(3px)}
html[dir=rtl] .blog-card:hover .bc-more svg{transform:scaleX(-1) translateX(3px)}

/* ---------- Blog card: responsive stacking on mobile ---------- */
@media(max-width:639px){
  .blog-grid{grid-template-columns:1fr;gap:14px}
  .blog-card .bc-cover{height:110px}
  .blog-card .bc-body{padding:16px 18px 18px}
  .blog-card h3{font-size:14.5px}
  .blog-card p{font-size:12.5px}
  .blog-card .bc-cat{font-size:10.5px;padding:3px 10px}
  /* All-tools grid: 2 columns on mobile for better card size */
  .all-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .all-tools-bar{margin-bottom:18px}
  .cat-filter{gap:7px}
  .cf-chip{font-size:12px;padding:7px 12px}
}

/* ---------- Desktop: ensure tool grid is 4-col and cards are consistent ---------- */
@media(min-width:1024px){
  .all-tools-grid{grid-template-columns:repeat(4,1fr);gap:18px}
  .tool-card{padding:26px 22px;gap:16px}
  .tool-ico{width:54px;height:54px}
  .tool-card h3{font-size:19px}
  .tool-card .desc{font-size:13.5px}
}

@media(min-width:1280px){
  .all-tools-grid{grid-template-columns:repeat(4,1fr);gap:22px}
  .tool-card{padding:28px 24px}
}

/* ---------- Tool card: ensure desc is visible and consistent ---------- */
.tool-card .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:20px}