/*
Theme Name: Usfans Spreadsheet
Theme URI: https://sheetfinds.com
Author: Usfans Team
Author URI: https://sheetfinds.com
Description: SEO-optimized WordPress theme for Usfans Spreadsheet product guides. 11-category dropdown, 12 original SEO articles, 1500-word homepage buying guide, Schema.org JSON-LD, responsive multicolour layout, direct SheetFinds product links.
Version: 1.0
Requires at least: 5.6
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usfans
Tags: blog, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* ── Design tokens ───────────────────────────────────── */
:root {
  --n0: hsl(210,25%,98%);
  --n1: hsl(210,20%,95%);
  --n2: hsl(210,16%,90%);
  --n3: hsl(210,12%,80%);
  --n4: hsl(210, 8%,62%);
  --n5: hsl(210, 7%,45%);
  --n6: hsl(210, 8%,30%);
  --n7: hsl(215,10%,18%);
  --n8: hsl(220,14%,10%);

  --a-pale:  hsl(220,85%,94%);
  --a-light: hsl(220,80%,80%);
  --a-base:  hsl(220,75%,52%);
  --a-dark:  hsl(220,75%,38%);

  --bg:        var(--n0);
  --surface:   #fff;
  --border:    var(--n2);
  --muted:     var(--n4);
  --body:      var(--n6);
  --heading:   var(--n8);
  --accent:    var(--a-base);
  --accent-hv: var(--a-dark);
  --tint:      var(--a-pale);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --tx-xs:.75rem; --tx-sm:.875rem; --tx-base:1rem;
  --tx-lg:1.125rem; --tx-xl:1.25rem; --tx-2xl:1.5rem;
  --tx-3xl:1.875rem; --tx-4xl:2.25rem;
  --tx-hero:clamp(2.25rem,5vw,3.5rem);

  --r-sm:6px; --r-md:12px; --r-pill:999px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--accent);text-decoration:none;transition:color .15s;}
a:hover{color:var(--accent-hv);}
ul,ol{list-style:none;}

body {
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--tx-base);
  font-weight:400;
  line-height:1.7;
  color:var(--body);
  background:var(--bg);
  background-image:
    radial-gradient(ellipse at 0% 0%,   hsl(200,80%,95%) 0%,transparent 52%),
    radial-gradient(ellipse at 100% 0%, hsl(340,75%,95%) 0%,transparent 52%),
    radial-gradient(ellipse at 0% 100%, hsl(50,85%,94%)  0%,transparent 52%),
    radial-gradient(ellipse at 100% 100%,hsl(145,55%,94%) 0%,transparent 52%);
  background-attachment:fixed;
}

.wrap   {max-width:1200px;margin:0 auto;padding:0 var(--s5);}
.narrow {max-width:820px; margin:0 auto;padding:0 var(--s5);}

.hdr {
  position:sticky;top:0;z-index:100;
  background:hsla(0,0%,100%,.93);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 6px hsla(0,0%,0%,.06);
}
.hdr__inner {
  display:flex;align-items:center;justify-content:space-between;
  height:66px;gap:var(--s5);
}
.hdr__logo {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-2xl);font-weight:700;
  color:var(--heading);letter-spacing:-.025em;white-space:nowrap;
}
.hdr__logo em{color:var(--accent);font-style:italic;}

.nav {display:flex;align-items:center;gap:var(--s3);}
.nav__dd {position:relative;}
.nav__btn {
  display:flex;align-items:center;gap:4px;
  padding:var(--s2) var(--s4);
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:none;cursor:pointer;
  font-size:var(--tx-sm);font-weight:500;color:var(--body);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.nav__btn:hover,.nav__btn:focus-visible {
  border-color:var(--accent);
  box-shadow:0 2px 8px hsla(220,75%,52%,.18);
  transform:translateY(-1px);outline:none;
}
.nav__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.nav__arrow{font-size:.6em;transition:transform .2s;}
.nav__dd:hover .nav__arrow,.nav__dd:focus-within .nav__arrow{transform:rotate(180deg);}

.nav__menu {
  position:absolute;top:calc(100% + var(--s2));left:0;
  min-width:220px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:0 8px 28px hsla(0,0%,0%,.10);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s,visibility .2s,transform .2s;z-index:200;
}
.nav__dd:hover .nav__menu,.nav__dd:focus-within .nav__menu {
  opacity:1;visibility:visible;transform:translateY(0);
}
.nav__menu a {
  display:block;padding:var(--s3) var(--s5);
  font-size:var(--tx-sm);color:var(--body);
  border-bottom:1px solid var(--border);
  transition:background .12s,color .12s,padding-left .12s;
}
.nav__menu a:last-child{border-bottom:none;}
.nav__menu a:hover{background:var(--tint);color:var(--accent);padding-left:calc(var(--s5)+4px);}

.btn {
  display:inline-flex;align-items:center;justify-content:center;
  padding:var(--s3) var(--s6);border-radius:var(--r-pill);
  font-weight:600;font-size:var(--tx-sm);min-height:44px;
  transition:background .15s,transform .15s,box-shadow .15s;
  cursor:pointer;border:none;
}
.btn--fill{background:var(--accent);color:#fff;}
.btn--fill:hover,.btn--fill:focus-visible{
  background:var(--accent-hv);color:#fff;
  transform:translateY(-2px);
  box-shadow:0 4px 16px hsla(220,75%,52%,.35);
}
.btn--fill:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn--ghost{background:#fff;color:var(--body);border:1px solid var(--border);}
.btn--ghost:hover,.btn--ghost:focus-visible{
  border-color:var(--accent);color:var(--accent);
  transform:translateY(-2px);box-shadow:0 4px 12px hsla(0,0%,0%,.08);
}
.btn--ghost:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn--lg{padding:var(--s4) var(--s8);font-size:var(--tx-base);}

.nav-toggle {
  display:none;background:none;border:none;
  cursor:pointer;padding:var(--s2);color:var(--body);
}
.nav-toggle span {
  display:block;width:22px;height:2px;
  background:currentColor;margin:4px 0;
  transition:transform .2s,opacity .2s;
}

.hero {
  position:relative;
  padding:var(--s9) 0 calc(var(--s9) + var(--s7));
  text-align:center;
  overflow:hidden;
  background-image:
    linear-gradient(180deg,
      hsla(220,80%,96%,.78) 0%,
      hsla(340,70%,96%,.65) 45%,
      hsla(50,80%,95%,.78) 100%),
    url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=1600&h=900&fit=crop&q=80');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--border);
}
.hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at center,hsla(0,0%,100%,.35) 0%,transparent 70%);
  pointer-events:none;
}
.hero > * {position:relative;z-index:2;}
.hero__tag {
  display:inline-block;
  background:#fff;color:var(--accent);
  padding:var(--s2) var(--s5);border-radius:var(--r-pill);
  font-size:var(--tx-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:var(--s5);
  box-shadow:0 2px 10px hsla(0,0%,0%,.08);
}
.hero__h1 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-hero);font-weight:700;
  letter-spacing:-.03em;line-height:1.1;
  color:var(--heading);margin-bottom:var(--s5);
  text-shadow:0 2px 20px hsla(0,0%,100%,.6);
}
.hero__h1 em{color:var(--accent);font-style:italic;}
.hero__lead {
  font-size:var(--tx-xl);color:var(--n6);
  max-width:640px;margin:0 auto var(--s7);
  font-weight:400;line-height:1.6;
  text-shadow:0 1px 10px hsla(0,0%,100%,.7);
}
.hero__btns{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;}

.sec-head{text-align:center;margin-bottom:var(--s8);}
.sec-head__h2 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-4xl);font-weight:700;
  letter-spacing:-.02em;color:var(--heading);
  margin-bottom:var(--s3);
}
.sec-head__h2 em{color:var(--accent);font-style:italic;}
.sec-head__sub{font-size:var(--tx-lg);color:var(--muted);}

.hp-article {
  background:hsla(0,0%,100%,.80);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s8) clamp(var(--s5),6%,var(--s9));
  margin-bottom:var(--s9);
}
.hp-article h2 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-3xl);font-weight:700;
  color:var(--heading);margin:var(--s7) 0 var(--s4);
  letter-spacing:-.02em;
}
.hp-article h2:first-child{margin-top:0;}
.hp-article h3 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-2xl);font-weight:600;
  color:var(--heading);margin:var(--s6) 0 var(--s3);
}
.hp-article p{font-size:var(--tx-lg);line-height:1.8;margin-bottom:var(--s5);}
.hp-article ul,.hp-article ol{margin:var(--s4) 0 var(--s5) var(--s6);list-style:disc;}
.hp-article ol{list-style:decimal;}
.hp-article li{margin-bottom:var(--s3);font-size:var(--tx-lg);line-height:1.7;}
.hp-article a{color:var(--accent);border-bottom:1px solid var(--a-light);}
.hp-article a:hover{color:var(--accent-hv);border-bottom-color:var(--accent-hv);}
.hp-article strong{font-weight:600;color:var(--heading);}

.cats{padding:var(--s9) 0;}
.cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--s6);
}
.cat-card {
  display:block;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;color:var(--body);text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px hsla(0,0%,0%,.11);
  border-color:var(--accent);
}
.cat-card__img{width:100%;height:200px;object-fit:cover;}
.cat-card__body{padding:var(--s5);}
.cat-card__name {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-xl);font-weight:600;
  color:var(--heading);margin-bottom:var(--s2);
}
.cat-card__desc{font-size:var(--tx-sm);color:var(--muted);margin-bottom:var(--s4);}
.cat-card__cta {
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--tx-sm);font-weight:600;color:var(--accent);
}
.cat-card__cta::after{content:'→';transition:margin-left .15s;}
.cat-card:hover .cat-card__cta::after{margin-left:var(--s2);}

.arts-sec {
  padding:var(--s9) 0;
  background:hsla(0,0%,100%,.55);
}
.arts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:var(--s6);
}
.art-card {
  display:block;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s6);color:var(--body);text-decoration:none;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.art-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px hsla(0,0%,0%,.10);
  border-color:var(--accent);
}
.art-card__icon {
  width:48px;height:48px;background:var(--tint);
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:var(--s5);
}
.art-card__title {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-2xl);font-weight:600;
  color:var(--heading);margin-bottom:var(--s3);line-height:1.3;
}
.art-card__blurb{font-size:var(--tx-sm);color:var(--muted);margin-bottom:var(--s4);line-height:1.6;}
.art-card__read {
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--tx-sm);font-weight:600;color:var(--accent);
}
.art-card__read::after{content:'→';transition:margin-left .15s;}
.art-card:hover .art-card__read::after{margin-left:var(--s2);}

.ftr {
  background:var(--n8);color:hsla(0,0%,100%,.72);
  padding:var(--s9) 0 var(--s6);margin-top:var(--s9);
}
.ftr__grid {
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s7);margin-bottom:var(--s7);
}
.ftr__h4 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-lg);font-weight:600;
  color:#fff;margin-bottom:var(--s4);
}
.ftr__links{display:flex;flex-direction:column;gap:var(--s2);}
.ftr__links a{font-size:var(--tx-sm);color:hsla(0,0%,100%,.62);}
.ftr__links a:hover{color:var(--a-light);}
.ftr__bar {
  border-top:1px solid hsla(0,0%,100%,.10);
  padding-top:var(--s5);text-align:center;
  font-size:var(--tx-sm);color:hsla(0,0%,100%,.38);
}
.ftr__bar a{color:var(--a-light);}

.art-pg{padding:var(--s9) 0;}
.art-pg__hdr{text-align:center;margin-bottom:var(--s8);}
.art-pg__tag {
  display:inline-block;background:var(--tint);color:var(--accent);
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  font-size:var(--tx-xs);font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s4);
}
.art-pg__h1 {
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(1.75rem,4vw,3rem);font-weight:700;
  letter-spacing:-.025em;color:var(--heading);
  line-height:1.15;max-width:820px;margin:0 auto var(--s4);
}
.art-pg__meta{color:var(--muted);font-size:var(--tx-sm);}

.art-body {
  background:hsla(0,0%,100%,.82);
  border:1px solid var(--border);border-radius:var(--r-md);
  padding:var(--s8) clamp(var(--s5),6%,var(--s9));
}
.art-body h2 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-3xl);font-weight:700;
  color:var(--heading);margin:var(--s8) 0 var(--s4);
  letter-spacing:-.02em;line-height:1.2;
}
.art-body h3 {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-2xl);font-weight:600;
  color:var(--heading);margin:var(--s6) 0 var(--s3);
}
.art-body p{font-size:var(--tx-lg);line-height:1.8;margin-bottom:var(--s5);}
.art-body ul,.art-body ol{margin:var(--s4) 0 var(--s5) var(--s6);list-style:disc;}
.art-body ol{list-style:decimal;}
.art-body li{margin-bottom:var(--s3);font-size:var(--tx-lg);line-height:1.7;}
.art-body a{color:var(--accent);border-bottom:1px solid var(--a-light);transition:color .15s,border-color .15s;}
.art-body a:hover{color:var(--accent-hv);border-bottom-color:var(--accent-hv);}
.art-body strong{font-weight:600;color:var(--heading);}

.rel-box {
  background:var(--tint);border-left:4px solid var(--accent);
  border-radius:var(--r-sm);padding:var(--s5) var(--s6);
  margin:var(--s7) 0;
}
.rel-box__ttl {
  font-family:'Fraunces',Georgia,serif;
  font-size:var(--tx-lg);font-weight:700;
  color:var(--heading);margin-bottom:var(--s3);
}
.rel-box__links{display:flex;flex-direction:column;gap:var(--s2);}
.rel-box__links a{font-size:var(--tx-sm);font-weight:500;}

.btt {
  position:fixed;bottom:var(--s6);right:var(--s6);
  width:44px;height:44px;border-radius:50%;
  background:var(--accent);color:#fff;border:none;cursor:pointer;
  font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px hsla(220,75%,52%,.40);
  opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s,transform .2s;z-index:300;
}
.btt.on{opacity:1;visibility:visible;}
.btt:hover{transform:translateY(-3px);}
.btt:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media(max-width:768px){
  .hdr__inner{flex-wrap:wrap;height:auto;padding:var(--s3) 0;}
  .nav{display:none;flex-direction:column;width:100%;padding:var(--s3) 0;}
  .nav.open{display:flex;}
  .nav-toggle{display:block;}
  .nav__menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-top:1px solid var(--border);
    border-radius:0;
  }
  .hero__h1{font-size:clamp(1.9rem,7vw,2.8rem);}
  .cat-grid,.arts-grid{grid-template-columns:1fr;}
  .art-body,.hp-article{padding:var(--s5);}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;}
}