/*
Theme Name: Toolflow
Theme URI: https://example.com/toolflow
Author: Toolflow
Author URI: https://example.com
Description: A fast, modern theme for online-tools websites. Built to pair with the Toolflow Core plugin, it ships a hero search, category browsing and clean tool pages out of the box. Works with any content if the plugin is inactive.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: toolflow
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

:root{
	--tf-bg:#FAFAFC; --tf-surface:#FFFFFF; --tf-surface-2:#F4F4F8;
	--tf-ink:#14141B; --tf-ink-2:#3A3A47; --tf-muted:#71717F;
	--tf-line:#E9E9F0; --tf-line-2:#DCDCE6;
	--tf-primary:#5B45E0; --tf-primary-700:#4332C0; --tf-primary-50:#EFEDFD; --tf-accent:#FF5C72;
	--tf-radius:12px; --tf-radius-sm:8px;
	--tf-shadow-sm:0 1px 2px rgba(20,20,27,.06),0 1px 3px rgba(20,20,27,.04);
	--tf-shadow:0 4px 16px rgba(20,20,27,.07),0 2px 6px rgba(20,20,27,.05);
	--tf-shadow-lg:0 18px 48px rgba(20,20,27,.14);
	--tf-font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	--tf-display:"Space Grotesk",var(--tf-font);
	--tf-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
	--tf-wrap:1140px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:var(--tf-font); color:var(--tf-ink); background:var(--tf-bg); line-height:1.6; font-size:16px; }
a{ color:var(--tf-primary-700); }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4{ font-family:var(--tf-display); line-height:1.2; color:var(--tf-ink); }
.tf-wrap{ max-width:var(--tf-wrap); margin:0 auto; padding:0 22px; }
.screen-reader-text{ position:absolute !important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:8px 14px; border-radius:8px; z-index:1000; box-shadow:var(--tf-shadow); }

/* ---------- header ---------- */
.site-header{ position:sticky; top:0; z-index:200; background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--tf-line); }
.site-header__inner{ display:flex; align-items:center; gap:20px; height:66px; }
.site-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--tf-display); font-weight:700; font-size:20px; color:var(--tf-ink); }
.site-brand__mark{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--tf-primary),#7C5CFC); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 12px rgba(91,69,224,.35); }
.site-brand img{ max-height:36px; width:auto; }
.main-nav{ margin-left:auto; }
.main-nav ul{ list-style:none; display:flex; gap:6px; margin:0; padding:0; align-items:center; }
.main-nav a{ text-decoration:none; color:var(--tf-ink-2); font-weight:600; font-size:14.5px; padding:8px 14px; border-radius:8px; transition:background .14s,color .14s; }
.main-nav a:hover, .main-nav .current-menu-item > a{ background:var(--tf-primary-50); color:var(--tf-primary-700); }
.nav-toggle{ display:none; margin-left:auto; background:var(--tf-surface); border:1px solid var(--tf-line-2); border-radius:8px; width:42px; height:42px; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{ content:""; display:block; width:18px; height:2px; background:var(--tf-ink); position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- hero ---------- */
.hero{ position:relative; padding:72px 0 60px; text-align:center; overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 120% at 50% -10%, rgba(91,69,224,.10), transparent 60%); pointer-events:none; }
.hero__eyebrow{ display:inline-block; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--tf-primary-700); background:var(--tf-primary-50); padding:6px 14px; border-radius:999px; margin-bottom:18px; }
.hero h1{ font-size:clamp(32px,5vw,52px); margin:0 0 16px; letter-spacing:-.02em; }
.hero h1 .grad{ background:linear-gradient(120deg,var(--tf-primary),#9333EA 60%,var(--tf-accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero p.lead{ font-size:18px; color:var(--tf-muted); max-width:600px; margin:0 auto 30px; }
.hero__search{ margin-bottom:18px; }
.hero__stats{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; margin-top:30px; color:var(--tf-muted); font-size:14px; }
.hero__stats b{ color:var(--tf-ink); font-family:var(--tf-display); }

/* ---------- sections ---------- */
.section{ padding:34px 0; }
.section__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.section__head h2{ font-size:24px; margin:0; display:flex; align-items:center; gap:10px; }
.section__head a.more{ font-size:14px; font-weight:600; text-decoration:none; color:var(--tf-primary-700); }
.section__dot{ width:10px; height:10px; border-radius:3px; background:var(--c,var(--tf-primary)); display:inline-block; }

/* ---------- single tool ---------- */
.tool-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:36px; padding:32px 0 60px; align-items:start; }
.breadcrumbs{ font-size:13px; color:var(--tf-muted); margin:0 0 14px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.breadcrumbs a{ text-decoration:none; color:var(--tf-primary-700); font-weight:600; }
.breadcrumbs span.sep{ color:var(--tf-line-2); }
.tool-header h1{ font-size:34px; margin:0 0 8px; letter-spacing:-.01em; }
.tool-header p.excerpt{ color:var(--tf-muted); font-size:17px; margin:0 0 22px; }
.article{ font-size:16px; color:var(--tf-ink-2); }
.article h2{ font-size:22px; margin:30px 0 12px; }
.article h3{ font-size:18px; margin:22px 0 10px; }
.article p{ margin:0 0 16px; }
.article ul:not(.tf-feat):not(.tf-steps), .article ol:not(.tf-steps){ margin:0 0 16px; padding-left:22px; }
.article a{ color:var(--tf-primary-700); }
.sidebar{ position:sticky; top:86px; display:flex; flex-direction:column; gap:20px; }
.widget-card{ background:var(--tf-surface); border:1px solid var(--tf-line); border-radius:var(--tf-radius); padding:18px; box-shadow:var(--tf-shadow-sm); }
.widget-card h3{ font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--tf-muted); margin:0 0 14px; }
.related-list{ display:flex; flex-direction:column; gap:4px; }
.related-list a{ display:flex; align-items:center; gap:10px; text-decoration:none; padding:9px 10px; border-radius:9px; color:var(--tf-ink); transition:background .14s; }
.related-list a:hover{ background:var(--tf-surface-2); }
.related-list .ri{ width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--c,var(--tf-primary)); background:color-mix(in srgb,var(--c,var(--tf-primary)) 12%,white); }
.related-list .rn{ font-size:14px; font-weight:600; }

/* ---------- archive header ---------- */
.archive-hero{ padding:44px 0 10px; text-align:center; }
.archive-hero h1{ font-size:38px; margin:0 0 10px; }
.archive-hero p{ color:var(--tf-muted); max-width:600px; margin:0 auto; }

/* filter bar */
.filterbar{ display:flex; flex-direction:column; gap:14px; margin:24px 0 28px; }
.filterbar__search{ position:relative; max-width:520px; margin:0 auto; width:100%; }
.filterbar__search input{ width:100%; font-family:var(--tf-font); font-size:15px; padding:12px 16px; border:1px solid var(--tf-line-2); border-radius:12px; background:var(--tf-surface); box-shadow:var(--tf-shadow-sm); }
.filterbar__search input:focus{ outline:none; border-color:var(--tf-primary); box-shadow:0 0 0 3px var(--tf-primary-50); }
.filterbar__cats{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.filter-chip{ font-family:var(--tf-font); font-size:13.5px; font-weight:600; color:var(--tf-ink-2); background:var(--tf-surface); border:1px solid var(--tf-line); border-radius:999px; padding:8px 15px; cursor:pointer; transition:background .14s,color .14s,border-color .14s; }
.filter-chip:hover{ border-color:var(--tf-line-2); }
.filter-chip.is-active{ background:var(--tf-primary); color:#fff; border-color:var(--tf-primary); }

/* ---------- generic content / page ---------- */
.page-content{ padding:40px 0 60px; }
.entry-content{ max-width:760px; margin:0 auto; font-size:17px; }
.entry-content h1{ font-size:34px; } .entry-content h2{ font-size:24px; margin-top:28px; }
.entry-content img{ border-radius:var(--tf-radius); }
.post-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; padding:30px 0; }
.post-card{ background:var(--tf-surface); border:1px solid var(--tf-line); border-radius:var(--tf-radius); overflow:hidden; box-shadow:var(--tf-shadow-sm); transition:transform .14s,box-shadow .14s; }
.post-card:hover{ transform:translateY(-3px); box-shadow:var(--tf-shadow); }
.post-card a{ text-decoration:none; color:inherit; }
.post-card__body{ padding:18px; }
.post-card__body h2{ font-size:18px; margin:0 0 8px; }
.post-card__body p{ font-size:14px; color:var(--tf-muted); margin:0; }

/* pagination */
.pagination{ display:flex; gap:8px; justify-content:center; padding:20px 0 40px; flex-wrap:wrap; }
.pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 12px; border-radius:9px; border:1px solid var(--tf-line); background:var(--tf-surface); color:var(--tf-ink-2); text-decoration:none; font-weight:600; }
.pagination .page-numbers.current{ background:var(--tf-primary); color:#fff; border-color:var(--tf-primary); }

/* ---------- footer ---------- */
.site-footer{ background:var(--tf-ink); color:#C7C7D1; margin-top:40px; padding:46px 0 28px; }
.site-footer a{ color:#C7C7D1; text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:30px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--tf-display); font-weight:700; font-size:18px; color:#fff; margin-bottom:12px; }
.footer-col h4{ color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.05em; margin:0 0 14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:14px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:34px; padding-top:18px; font-size:13px; color:#8A8A98; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* ---------- 404 ---------- */
.error-404{ text-align:center; padding:80px 0; }
.error-404 .big{ font-family:var(--tf-display); font-size:96px; font-weight:700; color:var(--tf-primary); line-height:1; }

/* ---------- responsive ---------- */
@media (max-width:860px){
	.tool-layout{ grid-template-columns:1fr; }
	.sidebar{ position:static; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.main-nav{ position:fixed; inset:66px 0 auto 0; background:var(--tf-surface); border-bottom:1px solid var(--tf-line); padding:12px 22px; box-shadow:var(--tf-shadow); transform:translateY(-120%); transition:transform .2s; }
	.main-nav.is-open{ transform:translateY(0); }
	.main-nav ul{ flex-direction:column; align-items:stretch; gap:2px; }
	.main-nav a{ display:block; padding:12px 14px; }
	.nav-toggle{ display:inline-flex; }
}
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){ .post-card,.main-nav{ transition:none; } }