/*
Theme Name: Spooky Solutions
Theme URI: https://spookysolutions.com
Author: Nick Scuola
Description: A block theme for spookysolutions.com. Built to turn readers into email subscribers and LinkedIn followers, with the Everpure Cloud series up front.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spooky-solutions
*/

:root{
  --spk-paper:#F5F3F8;
  --spk-card:#FFFFFF;
  --spk-ink:#18131F;
  --spk-muted:#5B5466;
  --spk-line:#DDD7E6;
  --spk-accent:#542E9F;
  --spk-accent-ink:#FFFFFF;
  --spk-wash:#ECE6F7;
  --spk-error:#B42318;
  --spk-brand-dark:#522285;
  --spk-brand-light:#8C5FBF;
  --spk-glow:#3EEAF5;
}
@media (prefers-color-scheme:dark){
  :root{
    --spk-paper:#120E19;--spk-card:#1B1626;--spk-ink:#F1EDF7;--spk-muted:#A79FB5;
    --spk-line:#2E2740;--spk-accent:#B79BE0;--spk-accent-ink:#120E19;--spk-brand-dark:#F1EDF7;--spk-brand-light:#B79BE0;--spk-wash:#231B35;--spk-error:#FDA29B;
  }
}
html{scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--spk-accent);outline-offset:3px;border-radius:4px}
.wp-site-blocks>*+*{margin-block-start:0}
.wp-site-blocks{padding:0}

/* Shared bits */
.eyebrow{font-family:var(--wp--preset--font-family--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--spk-muted);margin:0}
.lede{font-size:19px;color:var(--spk-muted);max-width:52ch}
.section{border-top:1px solid var(--spk-line);padding-top:72px;padding-bottom:72px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;margin-top:10px}
.section-head .blurb{color:var(--spk-muted);max-width:44ch;margin:0}
.wp-block-button__link{font-weight:700;font-size:15px;line-height:1.2}
.wp-block-button__link:hover{filter:brightness(1.1)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--spk-ink);border:2px solid var(--spk-line)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--spk-ink);filter:none}

/* Header */
.site-header{border-bottom:1px solid var(--spk-line);background:var(--spk-paper);position:sticky;top:0;z-index:20}
.site-header .header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--spk-ink)}
.brand-icon{width:40px;height:40px;flex:none;background:url(assets/icon-96.png) center/contain no-repeat}
.brand-word{font-family:var(--wp--preset--font-family--display);font-size:24px;letter-spacing:-0.03em;line-height:1}
.brand-spooky{font-weight:800;color:var(--spk-brand-dark)}
.brand-solutions{font-weight:500;color:var(--spk-brand-light)}
.site-header .wp-block-site-title{margin:0;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:22px;letter-spacing:-0.03em}
.site-header .wp-block-site-title a{text-decoration:none;color:var(--spk-ink)}
.site-header .wp-block-navigation{font-weight:600;font-size:15px}
.site-header .wp-block-navigation a{color:var(--spk-muted);text-decoration:none}
.site-header .wp-block-navigation a:hover{color:var(--spk-ink)}
.site-header .header-cta{margin:0}
.site-header .header-cta .wp-block-button__link{padding:11px 20px}
.header-right{display:flex;align-items:center;gap:26px}

/* Hero */
.hero{padding-top:72px;padding-bottom:64px}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.1rem);font-weight:800;margin:18px 0 22px}
.hero h1 .accent{color:var(--spk-accent)}
.hero-follow{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--spk-muted);font-size:15px}
.hero-follow p{margin:0}
.latest-card{background:var(--spk-card);border:1px solid var(--spk-line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:16px}
.card-art{height:190px;border-radius:12px;background:#16121F url(assets/hero-art.jpg) center/cover no-repeat}
.latest-card .tag{align-self:flex-start;background:var(--spk-wash);color:var(--spk-accent);font-family:var(--wp--preset--font-family--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin:0}
.latest-card h2{font-size:28px;font-weight:700;margin:0}
.latest-card p{color:var(--spk-muted);font-size:16px;margin:0}
.progress-bars{display:flex;gap:6px;margin:0}
.progress-bars span{flex:1;height:6px;border-radius:3px;background:var(--spk-glow)}

/* Subscribe form (Jetpack Subscribe block) */
.signup{max-width:520px}
.signup .wp-block-jetpack-subscriptions__container,
.signup form{margin:0}
.signup input[type=email]{font:inherit;font-size:16px;padding:13px 18px;border-radius:999px;border:2px solid var(--spk-line);background:var(--spk-card);color:var(--spk-ink);min-width:0;width:100%}
.signup input[type=email]:focus-visible{border-color:var(--spk-accent);outline-offset:2px}
.signup .wp-block-button__link,
.signup button[type=submit]{background:var(--spk-accent);color:var(--spk-accent-ink);border:2px solid var(--spk-accent);border-radius:999px;font-weight:700;font-size:15px;padding:13px 22px;cursor:pointer}
.signup .note{margin-top:12px;font-size:14px;color:var(--spk-muted)}

/* Series cards */
.series .wp-block-post-template{counter-reset:part;gap:20px;list-style:none;padding:0;margin:0}
.series .wp-block-post-template>li{counter-increment:part;background:var(--spk-card);border:1px solid var(--spk-line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s,transform .15s;margin:0}
.series .wp-block-post-template>li:hover{border-color:var(--spk-accent);transform:translateY(-2px)}
.series .wp-block-post-template>li::before{content:counter(part);font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:46px;line-height:1;color:var(--spk-accent);letter-spacing:-0.04em}
.series .wp-block-post-date{font-family:var(--wp--preset--font-family--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--spk-muted);margin:0;order:-1}
.series .wp-block-post-title{font-size:21px;font-weight:700;line-height:1.2;margin:0}
.series .wp-block-post-title a{text-decoration:none;color:var(--spk-ink)}
.series .wp-block-post-title a:hover{color:var(--spk-accent)}
.series .wp-block-post-excerpt{color:var(--spk-muted);font-size:15.5px;margin:0}
.series .wp-block-post-excerpt__more-link{display:block;margin-top:10px;font-weight:700;font-size:15px;color:var(--spk-accent);text-decoration:none}

/* Topics (Categories block) */
.topics .wp-block-categories{list-style:none;display:flex;flex-wrap:wrap;gap:12px;padding:0;margin:0}
.topics .wp-block-categories li{margin:0}
.topics .wp-block-categories li.cat-item-1{display:none}
.topics .wp-block-categories a{display:inline-block;padding:12px 8px 12px 20px;border-radius:999px 0 0 999px;background:var(--spk-card);border:1px solid var(--spk-line);border-right:0;font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:19px;text-decoration:none;color:var(--spk-ink);letter-spacing:-0.01em}
.topics .wp-block-categories li{display:inline-flex;align-items:baseline;background:var(--spk-card);border:1px solid var(--spk-line);border-radius:999px;padding-right:18px;font-family:var(--wp--preset--font-family--mono);font-size:12px;color:var(--spk-muted)}
.topics .wp-block-categories li a{background:transparent;border:0;border-radius:0}
.topics .wp-block-categories li:hover{border-color:var(--spk-accent)}
.topics .wp-block-categories li:hover a{color:var(--spk-accent)}

/* Archive */
.archive-grid .wp-block-post-template{gap:0 40px;list-style:none;padding:0;margin:0}
.archive-grid .wp-block-post-template>li{padding:22px 0;border-top:1px solid var(--spk-line);display:flex;flex-direction:column;gap:8px;margin:0}
.archive-grid .wp-block-post-date{font-family:var(--wp--preset--font-family--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--spk-muted);margin:0}
.archive-grid .wp-block-post-title{font-size:22px;font-weight:700;line-height:1.2;margin:0}
.archive-grid .wp-block-post-title a{text-decoration:none;color:var(--spk-ink)}
.archive-grid .wp-block-post-title a:hover{color:var(--spk-accent)}
.archive-grid .wp-block-post-excerpt{color:var(--spk-muted);font-size:15.5px;margin:0}

/* About */
.headshot{width:240px;height:240px;border-radius:24px;border:1px solid var(--spk-line);background:var(--spk-wash) url(assets/headshot.jpg) center top/cover no-repeat}
.monogram{width:240px;height:240px;border-radius:24px;background:var(--spk-wash);border:1px solid var(--spk-line);display:flex;align-items:center;justify-content:center;font-family:var(--wp--preset--font-family--display);font-weight:800;font-size:96px;color:var(--spk-accent);letter-spacing:-0.05em;margin:0}
.about h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;margin:10px 0 18px}
.about p{color:var(--spk-muted);max-width:60ch}
.about p strong{color:var(--spk-ink)}
.creds{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.creds p{font-family:var(--wp--preset--font-family--mono);font-size:12.5px;letter-spacing:.03em;padding:6px 12px;border:1px solid var(--spk-line);border-radius:8px;color:var(--spk-muted);background:var(--spk-card);margin:0}

/* CTA band */
.cta{background:#542E9F url(assets/cta-art.jpg) right center/auto 100% no-repeat;color:var(--spk-accent-ink);padding-top:72px;padding-bottom:72px}
.cta,.cta h2,.cta p{color:#fff}
.cta h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:800;color:#fff}
.cta p{color:#fff}
.cta .signup{max-width:none}
.cta .signup input[type=email]{border-color:transparent;background:#fff;color:#18131F}
.cta .signup button[type=submit],
.cta .signup .wp-block-button__link{background:#18131F;border-color:#18131F;color:#fff}
@media (prefers-color-scheme:dark){
  .cta .signup button[type=submit],.cta .signup .wp-block-button__link{background:#F1EDF7;border-color:#F1EDF7;color:#120E19}
}

/* Footer */
.site-footer{border-top:1px solid var(--spk-line);padding-top:36px;padding-bottom:48px;font-size:14px;color:var(--spk-muted)}
.site-footer .footer-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-footer p{margin:0}
.site-footer a{text-decoration:none;font-weight:600;color:var(--spk-muted)}
.site-footer a:hover{color:var(--spk-accent)}
.footer-links{display:flex;gap:22px}

/* Blog feed and single posts */
.feed .wp-block-post-template{list-style:none;padding:0;margin:0}
.feed .wp-block-post-template>li{padding:28px 0;border-top:1px solid var(--spk-line)}
.feed .wp-block-post-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;margin:6px 0 10px}
.feed .wp-block-post-title a{text-decoration:none;color:var(--spk-ink)}
.feed .wp-block-post-title a:hover{color:var(--spk-accent)}
.post-meta{font-family:var(--wp--preset--font-family--mono);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--spk-muted);display:flex;gap:10px;flex-wrap:wrap}
.post-meta a{color:var(--spk-muted);text-decoration:none}
.single-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem);font-weight:800;margin:14px 0 16px}
.entry-content{font-size:18px;line-height:1.7}
.entry-content h2,.entry-content h3{margin-top:2em;font-weight:700}
.entry-content a{color:var(--spk-accent)}
.post-nav{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--spk-line);padding-top:24px;font-weight:600}
.post-nav a{text-decoration:none;color:var(--spk-ink)}
.post-nav a:hover{color:var(--spk-accent)}
.wp-block-query-pagination{gap:18px;font-weight:600;margin-top:32px}
.wp-block-query-pagination a{text-decoration:none;color:var(--spk-accent)}

@media (max-width:781px){
  .series .wp-block-post-template.is-layout-grid,
  .archive-grid .wp-block-post-template.is-layout-grid{grid-template-columns:1fr}
  .monogram{width:140px;height:140px;font-size:56px;border-radius:18px}
  .headshot{width:140px;height:140px;border-radius:18px}
  .hero{padding-top:44px;padding-bottom:48px}
  .section,.cta{padding-top:52px;padding-bottom:52px}
  .header-right{gap:14px}
}
@media (max-width:600px){
  .site-header .wp-block-navigation{display:none}
  .brand-word{font-size:20px}
  .cta{background-image:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .series .wp-block-post-template>li{transition:none}
  .series .wp-block-post-template>li:hover{transform:none}
}