/*
Theme Name: Hipobuy Spreadsheet
Theme URI: https://sheetfinds.com
Author: Hipobuy Team
Author URI: https://sheetfinds.com
Description: SEO-optimized WordPress theme for Hipobuy Spreadsheet product guides. Features sticky navigation with 11-category dropdown, 12 original SEO articles, homepage buying guide, schema markup, responsive multicolour layout, and direct SheetFinds product links.
Version: 3.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: hipobuy
Tags: blog, custom-menu, featured-images, responsive-layout, translation-ready
*/

/* ── Design tokens ───────────────────────────────────── */
:root {
  /* Neutral scale */
  --n0: hsl(32,18%,98%);
  --n1: hsl(30,14%,95%);
  --n2: hsl(28,10%,90%);
  --n3: hsl(26, 8%,80%);
  --n4: hsl(24, 6%,65%);
  --n5: hsl(22, 5%,48%);
  --n6: hsl(20, 5%,32%);
  --n7: hsl(18, 6%,18%);
  --n8: hsl(16, 7%,11%);

  /* Accent — warm terracotta */
  --a-pale:  hsl(20,70%,93%);
  --a-light: hsl(20,65%,82%);
  --a-base:  hsl(20,62%,48%);
  --a-dark:  hsl(20,62%,36%);

  /* Semantic */
  --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);

  /* Space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Type */
  --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);

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

/* ── Reset ───────────────────────────────────────────── */
*,*::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(340,75%,96%) 0%,transparent 52%),
    radial-gradient(ellipse at 100% 0%,  hsl(210,65%,95%) 0%,transparent 52%),
    radial-gradient(ellipse at 0% 100%,  hsl(145,55%,95%) 0%,transparent 52%),
    radial-gradient(ellipse at 100% 100%,hsl(50,75%,95%)  0%,transparent 52%);
  background-attachment:fixed;
}

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

/* ── Header ──────────────────────────────────────────── */
.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 */
.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(20,62%,48%,.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:210px;
  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);}

/* Buttons */
.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(20,62%,48%,.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);}

/* Mobile toggle */
.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 ────────────────────────────────────────────── */
.hero {padding:var(--s9) 0;text-align:center;}
.hero__tag {
  display:inline-block;
  background:var(--tint);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);
}
.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);
}
.hero__h1 em{color:var(--accent);font-style:italic;}
.hero__lead {
  font-size:var(--tx-xl);color:var(--muted);
  max-width:640px;margin:0 auto var(--s7);
  font-weight:300;line-height:1.6;
}
.hero__btns{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;}

/* ── Banner image ────────────────────────────────────── */
.banner {
  max-width:1000px;margin:var(--s8) auto;
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 16px 48px hsla(0,0%,0%,.14);
}
.banner img{width:100%;height:420px;object-fit:cover;}

/* ── Section heading ─────────────────────────────────── */
.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);}

/* ── Homepage article ────────────────────────────────── */
.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);}

/* ── Category grid ───────────────────────────────────── */
.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);}

/* ── Articles grid ───────────────────────────────────── */
.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);}

/* ── Footer ──────────────────────────────────────────── */
.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);}

/* ── Article page ────────────────────────────────────── */
.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);}

/* Related box */
.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;}

/* Back to top */
.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(20,62%,48%,.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;}

/* ── Responsive ──────────────────────────────────────── */
@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;}
}