/*
Theme Name: ToolStack
Theme URI: https://example.com/toolstack
Author: Your Company
Author URI: https://example.com
Description: A lightweight, fast, SEO-focused theme for multi-tool / online-utility websites. Designed to wrap around an existing tools plugin without touching its functionality, URLs, or data. Provides homepage, tool page, category, directory, search and blog layouts in a modern SaaS visual style.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: toolstack
Tags: block-patterns, custom-logo, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready, wide-blocks

This theme is intentionally free of front-end JS frameworks and heavy libraries.
It only styles the site shell (header, footer, navigation, page layouts).
It never renders or duplicates tool functionality — that stays with your tools plugin.
*/

/* =========================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   Edit these — or override via Customizer, which writes
   inline overrides in inc/customizer.php — to rebrand.
   ========================================================= */
:root{
  /* Brand */
  --ts-primary: #4f46e5;
  --ts-primary-dark: #4338ca;
  --ts-secondary: #06b6d4;

  /* Neutral palette (light mode) */
  --ts-bg: #ffffff;
  --ts-bg-alt: #f7f8fb;
  --ts-surface: #ffffff;
  --ts-border: #e6e8ef;
  --ts-text: #16181d;
  --ts-text-muted: #5b6270;
  --ts-shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --ts-shadow-md: 0 4px 10px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.04);

  /* Layout */
  --ts-max-width: 1200px;
  --ts-radius-sm: 8px;
  --ts-radius-md: 14px;
  --ts-radius-lg: 20px;
  --ts-gap: 24px;
  --ts-header-h: 72px;

  /* Type */
  --ts-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
}

/* Dark mode: toggled by adding data-theme="dark" to <html> via assets/js/main.js (localStorage persisted) */
html[data-theme="dark"]{
  --ts-bg: #0f1115;
  --ts-bg-alt: #15181e;
  --ts-surface: #1a1d24;
  --ts-border: #2a2e37;
  --ts-text: #f1f2f4;
  --ts-text-muted: #a2a8b5;
  --ts-shadow: 0 1px 2px rgba(0,0,0,.4);
  --ts-shadow-md: 0 6px 16px rgba(0,0,0,.45);
}

/* =========================================================
   2. RESET & BASE
   ========================================================= */
*,*::before,*::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--ts-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ts-text);
  background: var(--ts-bg);
  overflow-x: hidden;
  transition: background-color .2s ease, color .2s ease;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--ts-primary); text-decoration:none; }
a:hover{ text-decoration: underline; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.25; font-weight:700; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.75rem); }
h2{ font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem); }
h3{ font-size: 1.2rem; }
p{ margin:0 0 1em; color: var(--ts-text-muted); }
table{ width:100%; border-collapse:collapse; }
.ts-container{ max-width: var(--ts-max-width); margin:0 auto; padding:0 20px; }
.ts-section{ padding: 56px 0; }
.ts-section--alt{ background: var(--ts-bg-alt); }
.ts-visually-hidden{ position:absolute !important; width:1px;height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--ts-primary); color:#fff; padding:12px 16px; z-index:10000; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* Focus visibility for accessible keyboard nav */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--ts-primary);
  outline-offset: 2px;
}

/* =========================================================
   3. BUTTONS
   ========================================================= */
.ts-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: var(--ts-radius-sm);
  font-weight:600; font-size:.95rem; border:1px solid transparent;
  cursor:pointer; transition: all .15s ease; line-height:1;
}
.ts-btn:hover{ text-decoration:none; }
.ts-btn--primary{ background: var(--ts-primary); color:#fff; }
.ts-btn--primary:hover{ background: var(--ts-primary-dark); }
.ts-btn--outline{ background:transparent; color:var(--ts-text); border-color: var(--ts-border); }
.ts-btn--outline:hover{ border-color: var(--ts-primary); color: var(--ts-primary); }
.ts-btn--sm{ padding:8px 14px; font-size:.85rem; }
.ts-btn--block{ width:100%; }

/* =========================================================
   4. HEADER
   ========================================================= */
.ts-header{
  position: sticky; top:0; z-index: 999;
  background: var(--ts-surface);
  border-bottom:1px solid var(--ts-border);
  height: var(--ts-header-h);
}
.ts-header__inner{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.ts-logo{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; color:var(--ts-text); flex-shrink:0; }
.ts-logo img{ max-height:36px; width:auto; }
.ts-primary-nav{ display:flex; }
.ts-primary-nav ul{ display:flex; align-items:center; gap:6px; }
.ts-primary-nav a{
  color: var(--ts-text); font-weight:500; font-size:.95rem;
  padding:10px 12px; border-radius: var(--ts-radius-sm);
}
.ts-primary-nav a:hover{ background: var(--ts-bg-alt); text-decoration:none; }
.ts-header__actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.ts-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius: 50%; border:1px solid var(--ts-border);
  background: var(--ts-surface); color: var(--ts-text); cursor:pointer;
}
.ts-icon-btn:hover{ background: var(--ts-bg-alt); }
.ts-hamburger{ display:none; }

@media (max-width: 900px){
  .ts-primary-nav{ display:none; }
  .ts-hamburger{ display:inline-flex; }
  .ts-header__actions .ts-btn--primary{ display:none; }
}

/* Mobile off-canvas menu */
.ts-mobile-menu{
  position:fixed; inset:0 0 0 auto; width:min(320px,85vw); height:100vh;
  background: var(--ts-surface); border-left:1px solid var(--ts-border);
  transform: translateX(100%); transition: transform .25s ease; z-index:1001;
  padding: 20px; overflow-y:auto;
}
.ts-mobile-menu.is-open{ transform: translateX(0); }
.ts-mobile-menu__overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none;
  transition: opacity .25s ease; z-index:1000;
}
.ts-mobile-menu__overlay.is-open{ opacity:1; pointer-events:auto; }
.ts-mobile-menu ul{ display:flex; flex-direction:column; gap:4px; margin-top:20px; }
.ts-mobile-menu a{ display:block; padding:12px 8px; color:var(--ts-text); font-weight:500; border-bottom:1px solid var(--ts-border); }

/* =========================================================
   5. HERO / SEARCH
   ========================================================= */
.ts-hero{ text-align:center; padding: 64px 0 48px; }
.ts-hero__desc{ max-width:620px; margin:0 auto 28px; font-size:1.05rem; }
.ts-search{
  max-width: 620px; margin: 0 auto; position:relative; display:flex; gap:8px;
}
.ts-search input[type="search"], .ts-search input[type="text"]{
  flex:1; padding: 15px 18px; border-radius: var(--ts-radius-md);
  border:1px solid var(--ts-border); background: var(--ts-surface); color: var(--ts-text);
  font-size:1rem; box-shadow: var(--ts-shadow);
}
.ts-search button{
  border-radius: var(--ts-radius-md); padding: 0 22px; border:none;
  background: var(--ts-primary); color:#fff; font-weight:600; cursor:pointer;
}
.ts-search__results{
  position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--ts-surface);
  border:1px solid var(--ts-border); border-radius: var(--ts-radius-md); box-shadow: var(--ts-shadow-md);
  max-height: 360px; overflow-y:auto; text-align:left; z-index: 50; display:none;
}
.ts-search__results.is-open{ display:block; }
.ts-search__result{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--ts-border); }
.ts-search__result:last-child{ border-bottom:none; }
.ts-search__result:hover{ background: var(--ts-bg-alt); }
.ts-popular-shortcuts{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px; }
.ts-popular-shortcuts a{
  font-size:.85rem; padding:6px 14px; border-radius:999px; border:1px solid var(--ts-border);
  color:var(--ts-text-muted);
}
.ts-popular-shortcuts a:hover{ border-color:var(--ts-primary); color:var(--ts-primary); text-decoration:none; }

/* =========================================================
   6. GRIDS: tool cards, category cards, feature cards
   ========================================================= */
.ts-grid{ display:grid; gap: var(--ts-gap); }
.ts-grid--4{ grid-template-columns: repeat(4, 1fr); }
.ts-grid--3{ grid-template-columns: repeat(3, 1fr); }
.ts-grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px){ .ts-grid--4{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 780px){ .ts-grid--4, .ts-grid--3{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .ts-grid--4, .ts-grid--3, .ts-grid--2{ grid-template-columns: 1fr; } }

.ts-card{
  background: var(--ts-surface); border:1px solid var(--ts-border); border-radius: var(--ts-radius-md);
  padding: 22px; box-shadow: var(--ts-shadow); transition: box-shadow .15s ease, transform .15s ease;
  display:flex; flex-direction:column; height:100%;
}
.ts-card:hover{ box-shadow: var(--ts-shadow-md); transform: translateY(-2px); }
.ts-card__icon{
  width:44px; height:44px; border-radius: var(--ts-radius-sm); background: var(--ts-bg-alt);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:14px; color: var(--ts-primary);
}
.ts-card__title{ font-size:1.05rem; margin-bottom:6px; }
.ts-card__title a{ color:var(--ts-text); }
.ts-card__title a:hover{ color: var(--ts-primary); text-decoration:none; }
.ts-card__desc{ font-size:.9rem; flex:1; margin-bottom:14px; }
.ts-card__meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ts-badge{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.03em; font-weight:700;
  color: var(--ts-primary); background: rgba(79,70,229,.08); padding:4px 9px; border-radius:6px;
}

.ts-category-card{ text-align:center; padding:26px 18px; }
.ts-category-card__icon{ font-size:2rem; margin-bottom:10px; }
.ts-category-card__count{ font-size:.8rem; color:var(--ts-text-muted); margin-bottom:12px; }

/* =========================================================
   7. FEATURES / WHY-US
   ========================================================= */
.ts-feature{ text-align:center; padding:10px; }
.ts-feature__icon{ font-size:1.8rem; margin-bottom:10px; }

/* =========================================================
   8. CTA BANDS
   ========================================================= */
.ts-cta{
  text-align:center; padding: 56px 24px; border-radius: var(--ts-radius-lg);
  background: linear-gradient(135deg, var(--ts-primary), var(--ts-primary-dark));
  color:#fff;
}
.ts-cta h2{ color:#fff; }
.ts-cta p{ color: rgba(255,255,255,.85); }
.ts-cta .ts-btn--primary{ background:#fff; color: var(--ts-primary); }
.ts-cta .ts-btn--primary:hover{ background:#f1f1f1; }

/* =========================================================
   9. BREADCRUMBS
   ========================================================= */
.ts-breadcrumbs{ font-size:.85rem; color: var(--ts-text-muted); margin-bottom: 18px; }
.ts-breadcrumbs a{ color: var(--ts-text-muted); }
.ts-breadcrumbs a:hover{ color: var(--ts-primary); }
.ts-breadcrumbs__sep{ margin: 0 6px; opacity:.6; }

/* =========================================================
   10. TOOL PAGE
   ========================================================= */
.ts-tool-header{ padding: 32px 0 8px; }
.ts-tool-intro{ max-width: 760px; font-size:1.05rem; }
.ts-tool-interface{
  background: var(--ts-surface); border:1px solid var(--ts-border); border-radius: var(--ts-radius-lg);
  padding: clamp(16px, 3vw, 32px); box-shadow: var(--ts-shadow-md); margin: 28px 0;
  min-height: 160px;
}
.ts-tool-interface__label{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ts-text-muted); margin-bottom:14px; }

.ts-steps{ counter-reset: ts-step; display:grid; gap:18px; grid-template-columns: repeat(4,1fr); }
@media (max-width:780px){ .ts-steps{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:520px){ .ts-steps{ grid-template-columns: 1fr; } }
.ts-step{ position:relative; padding: 20px 18px 18px; background:var(--ts-bg-alt); border-radius: var(--ts-radius-md); }
.ts-step::before{
  counter-increment: ts-step; content: counter(ts-step);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; background: var(--ts-primary); color:#fff;
  font-weight:700; font-size:.85rem; margin-bottom:12px;
}

.ts-faq{ max-width: 820px; }
.ts-faq__item{ border-bottom:1px solid var(--ts-border); padding: 16px 0; }
.ts-faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:12px; cursor:pointer;
  font-weight:600; list-style:none;
}
.ts-faq__q::-webkit-details-marker{ display:none; }
.ts-faq__q::after{ content:"+"; font-size:1.3rem; color:var(--ts-text-muted); transition: transform .15s ease; }
details[open] .ts-faq__q::after{ transform: rotate(45deg); }
.ts-faq__a{ margin-top:10px; }

/* =========================================================
   11. DIRECTORY / CATEGORY FILTERS
   ========================================================= */
.ts-filters{ display:flex; flex-wrap:wrap; gap:8px; margin: 20px 0 30px; }
.ts-filters a{
  padding:8px 16px; border-radius:999px; border:1px solid var(--ts-border); font-size:.85rem; color:var(--ts-text);
}
.ts-filters a.is-active, .ts-filters a:hover{ background: var(--ts-primary); border-color: var(--ts-primary); color:#fff; text-decoration:none; }

/* =========================================================
   12. BLOG
   ========================================================= */
.ts-post-card__img{ border-radius: var(--ts-radius-md); overflow:hidden; margin-bottom:14px; aspect-ratio: 16/9; background:var(--ts-bg-alt); }
.ts-post-card__img img{ width:100%; height:100%; object-fit:cover; }
.ts-post-meta{ font-size:.8rem; color:var(--ts-text-muted); margin-bottom:6px; }
.ts-single-content{ max-width: 760px; margin: 0 auto; }
.ts-single-content h2, .ts-single-content h3{ margin-top:1.6em; }
.ts-single-content img{ border-radius: var(--ts-radius-md); }
.ts-toc{ background: var(--ts-bg-alt); border-radius: var(--ts-radius-md); padding:18px 22px; margin: 24px 0; }
.ts-toc__title{ font-weight:700; margin-bottom:8px; }
.ts-share{ display:flex; gap:10px; margin: 30px 0; }

/* =========================================================
   13. SIDEBAR / AD SLOTS
   ========================================================= */
.ts-layout--with-sidebar{ display:grid; grid-template-columns: 1fr 300px; gap: 40px; align-items:start; }
@media (max-width: 900px){ .ts-layout--with-sidebar{ grid-template-columns: 1fr; } }
.ts-widget{ background: var(--ts-surface); border:1px solid var(--ts-border); border-radius: var(--ts-radius-md); padding:20px; margin-bottom:20px; }
.ts-ad-slot{
  text-align:center; font-size:.75rem; color: var(--ts-text-muted); border:1px dashed var(--ts-border);
  border-radius: var(--ts-radius-sm); padding: 14px; margin: 24px 0; overflow:hidden;
}
.ts-ad-slot:empty{ display:none; }

/* =========================================================
   14. FOOTER
   ========================================================= */
.ts-footer{ background: var(--ts-bg-alt); border-top:1px solid var(--ts-border); padding: 50px 0 20px; margin-top: 60px; }
.ts-footer__grid{ display:grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 30px; margin-bottom: 36px; }
@media (max-width: 780px){ .ts-footer__grid{ grid-template-columns: repeat(2,1fr); } }
.ts-footer__col h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.ts-footer__col ul li{ margin-bottom:8px; }
.ts-footer__col a{ color: var(--ts-text-muted); font-size:.9rem; }
.ts-footer__col a:hover{ color: var(--ts-primary); }
.ts-footer__social{ display:flex; gap:10px; margin-top:6px; }
.ts-footer__bottom{
  border-top:1px solid var(--ts-border); padding-top:20px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:.8rem; color:var(--ts-text-muted);
}

/* =========================================================
   15. RESPONSIVE TABLES (for any tool/comparison tables in content)
   ========================================================= */
.ts-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* =========================================================
   16. UTILITIES
   ========================================================= */
.ts-mt-0{ margin-top:0; } .ts-mb-0{ margin-bottom:0; }
.ts-text-center{ text-align:center; }
.ts-flex{ display:flex; align-items:center; }
.ts-gap-8{ gap:8px; } .ts-gap-16{ gap:16px; }
img[loading]{ background: var(--ts-bg-alt); }