/*
Theme Name: Home Side Jobs
Theme URI: https://homesidejobs.com
Author: Home Side Jobs
Description: A warm, editorial bookshop theme for selling how-to guides through Amazon and a direct Stripe checkout, side by side. Includes a Book custom post type with per-format buy links, Shelf categories, testimonials, and an FAQ section, with the Shop, Shelf, About and FAQ content each on their own page — modeled on the classic independent-bookshop layout.
Version: 1.5.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: home-side-jobs
*/

:root{
  --bg:#FAF7F1;
  --panel:#FFFFFF;
  --panel-2:#F1EBE0;
  --ink:#2A2520;
  --ink-soft:#6B6255;
  --muted:#8B8171;
  --rule:#E4DDCE;
  --accent:#3F5744;
  --accent-ink:#F4F7F1;
  --amazon:#A9762C;
  --amazon-bg:#F6ECD9;
  --focus:#2A2520;
  --shadow:0 1px 2px rgba(42,37,32,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#201B16;
    --panel:#2A241D;
    --panel-2:#332C23;
    --ink:#F1ECE1;
    --ink-soft:#C6BCAB;
    --muted:#948A78;
    --rule:#453B2E;
    --accent:#7CA383;
    --accent-ink:#132018;
    --amazon:#D9A94B;
    --amazon-bg:#3A2F1B;
    --focus:#F1ECE1;
    --shadow:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#201B16;
  --panel:#2A241D;
  --panel-2:#332C23;
  --ink:#F1ECE1;
  --ink-soft:#C6BCAB;
  --muted:#948A78;
  --rule:#453B2E;
  --accent:#7CA383;
  --accent-ink:#132018;
  --amazon:#D9A94B;
  --amazon-bg:#3A2F1B;
  --focus:#F1ECE1;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Public Sans", -apple-system, "Segoe UI", sans-serif;
  padding-inline:20px; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;}
h1,h2,h3{text-wrap:balance; margin:0; font-family:"Newsreader", Georgia, serif; font-weight:500;}
.wrap{max-width:1020px; margin-inline:auto;}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
.eyebrow{
  font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

/* header */
header.site{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--rule);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:16px;}
.brand{display:inline-flex; align-items:center;}
.brand-logo-link{display:inline-flex; align-items:center; text-decoration:none;}
.brand-logo-img,
.brand .custom-logo{display:block; height:76px; width:auto; max-width:none;}
@media (max-width:640px){ .brand-logo-img, .brand .custom-logo{height:58px;} }
@media (max-width:400px){ .brand-logo-img, .brand .custom-logo{height:48px;} }
.foot-logo .brand-logo-img,
.foot-logo .custom-logo{height:56px;}
.navlinks{display:flex; gap:22px; align-items:center; font-size:.86rem;}
.navlinks a{text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent;}
.navlinks a:hover{color:var(--accent); border-color:var(--accent);}
@media (max-width:640px){ .navlinks .hide-sm{display:none;} }

/* hero */
.hero{padding-block:56px 40px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;}
@media (max-width:760px){ .hero{grid-template-columns:1fr; padding-block:36px 28px;} }
.hero h1{font-size:clamp(1.9rem,4.4vw,2.7rem); line-height:1.18;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero p.lede{margin-top:18px; color:var(--ink-soft); font-size:1.05rem; line-height:1.6; max-width:46ch;}
.hero-ctas{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:11px 18px; border-radius:3px; font-size:.88rem; font-weight:600;
  border:1px solid var(--ink); cursor:pointer;
}
.btn.solid{background:var(--ink); color:var(--bg);}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule);}
.btn.ghost:hover{border-color:var(--ink);}

.shelf-art{
  border:1px solid var(--rule); border-radius:6px; overflow:hidden;
  background:var(--panel-2); aspect-ratio:3/2;
}
.shelf-art img{ display:block; width:100%; height:100%; object-fit:cover; }

/* section shells */
section.block{padding-block:52px; border-top:1px solid var(--rule);}
section.block.no-top{border-top:none; padding-top:0;}
.head{margin-bottom:28px;}
.head h2{font-size:1.65rem;}
.head p{margin-top:8px; color:var(--muted); font-size:.94rem;}

/* archive / page header (Shop, Shelf, FAQ, About) */
.page-head{padding-block:44px 8px;}
.page-head h1{font-size:clamp(1.7rem,4vw,2.3rem); margin-top:8px;}
.page-head p{margin-top:10px; color:var(--ink-soft); font-size:1rem; max-width:60ch; line-height:1.6;}
.shelf-group-link{text-decoration:none; color:inherit;}
.shelf-group-link:hover{color:var(--accent);}
.back-link{padding-bottom:52px;}
.back-link a{font-size:.88rem; text-decoration:none; color:var(--ink-soft); border-bottom:1px solid var(--rule);}
.back-link a:hover{color:var(--accent); border-color:var(--accent);}

/* shelves */
.shelves{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .shelves{grid-template-columns:1fr;} }
.shelf-card{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  padding:20px; box-shadow:var(--shadow);
}
.shelf-card:hover{border-color:var(--accent);}
.shelf-card .count{font-size:.72rem;}
.shelf-card h3{font-size:1.15rem; margin:6px 0 8px;}
.shelf-card p{margin:0; font-size:.86rem; color:var(--ink-soft); line-height:1.5;}

/* catalog */
.shelf-group{margin-top:44px;}
.shelf-group:first-child{margin-top:0;}
.shelf-group h3{font-size:1.3rem; margin-bottom:4px;}
.shelf-group .shelf-sub{color:var(--muted); font-size:.86rem; margin-bottom:18px;}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;}
@media (max-width:700px){ .grid{grid-template-columns:1fr;} }

.book{
  background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);
}
.book-top{display:flex; gap:14px;}
.cover{
  flex:0 0 64px; width:64px; height:88px; border-radius:3px; border:1px solid var(--rule);
  background:var(--panel-2); display:flex; align-items:center; justify-content:center;
}
.cover svg{width:32px; height:32px;}
.book-title{font-size:1.08rem; margin:0 0 5px;}
.book-desc{margin:0; font-size:.85rem; color:var(--ink-soft); line-height:1.5;}
.specs{
  font-family:"IBM Plex Mono", monospace; font-size:.7rem; color:var(--muted);
  display:flex; gap:12px; flex-wrap:wrap;
}

.formats{display:flex; gap:10px; flex-wrap:wrap;}
.fmt-btn{
  flex:1 1 130px; border-radius:4px; padding:10px 12px; text-decoration:none;
  display:flex; flex-direction:column; gap:2px; border:1px solid var(--rule);
  background:var(--panel-2); cursor:pointer;
}
.fmt-btn .fmt-label{font-family:"IBM Plex Mono", monospace; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.fmt-btn .fmt-price{font-family:"IBM Plex Mono", monospace; font-size:1.02rem; font-weight:600;}
.fmt-btn .fmt-tag{font-size:.72rem; color:var(--ink-soft);}
.fmt-btn.direct{border-color:color-mix(in srgb, var(--accent) 45%, var(--rule));}
.fmt-btn.direct .fmt-price{color:var(--accent);}
.fmt-btn.amazon{background:var(--amazon-bg); border-color:color-mix(in srgb, var(--amazon) 40%, var(--rule));}
.fmt-btn.amazon .fmt-price{color:var(--amazon);}
.fmt-btn:hover{filter:brightness(.97);}
.fmt-btn.disabled{opacity:.55; cursor:not-allowed;}
.fmt-btn.disabled:hover{filter:none;}
.fmt-btn .fmt-edit{font-size:.7rem; text-decoration:underline;}

/* page content (About, How to Buy, and any other plain Page) */
.page-content{max-width:64ch;}
.page-content blockquote{
  margin:0 0 22px; font-family:"Newsreader", serif; font-style:italic; font-size:1.35rem;
  line-height:1.4; color:var(--ink); border-left:3px solid var(--accent); padding-left:18px;
}
.page-content p{font-size:.94rem; color:var(--ink-soft); line-height:1.65; margin:0 0 14px;}
.page-content h2{
  font-size:1.25rem; margin:0 0 12px; font-family:"Newsreader", Georgia, serif; font-weight:500;
  scroll-margin-top:130px;
}
.page-content h2:not(:first-child){margin-top:34px;}

/* jump links under a page-head, e.g. "Payment methods · Delivery" */
.jump-links{margin-top:14px; font-size:.86rem;}
.jump-links a{color:var(--accent); text-decoration:none; border-bottom:1px solid transparent;}
.jump-links a:hover{border-color:var(--accent);}
.jump-links span{color:var(--muted); margin:0 8px;}

/* testimonials */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .quotes{grid-template-columns:1fr;} }
.quote{background:var(--panel); border:1px solid var(--rule); border-radius:6px; padding:20px;}
.quote p{margin:0; font-size:.92rem; line-height:1.55; color:var(--ink);}
.quote cite{display:block; margin-top:12px; font-style:normal; font-size:.78rem; color:var(--muted);}

/* faq */
.faq{display:flex; flex-direction:column; gap:0;}
.faq-item{border-bottom:1px solid var(--rule); padding-block:16px;}
.faq-item h3{font-size:1rem; font-family:"Public Sans", sans-serif; font-weight:600; margin-bottom:6px;}
.faq-item p{margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.55; max-width:62ch;}

/* callout (e.g. the "Digital Products" blurb under Shelves) */
.callout-section{padding-block:0 44px;}
.callout{
  background:var(--panel-2); border:1px solid var(--rule); border-radius:6px;
  padding:22px clamp(18px,4vw,30px); display:flex; gap:18px; align-items:center;
}
.callout-icon{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--panel); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
}
.callout-icon svg{width:24px; height:24px;}
.callout h3{font-size:1.05rem; margin-bottom:4px;}
.callout p{margin:0; font-size:.88rem; color:var(--ink-soft); line-height:1.6; max-width:66ch;}
.callout p a{color:var(--accent); text-decoration:none; border-bottom:1px solid var(--accent); white-space:nowrap;}
.callout p a:hover{opacity:.75;}
@media (max-width:560px){ .callout{flex-direction:column; align-items:flex-start;} }

/* signup */
.signup{
  background:var(--panel-2); border:1px solid var(--rule); border-radius:6px;
  padding:30px clamp(18px,4vw,40px); display:flex; flex-wrap:wrap; gap:20px;
  align-items:center; justify-content:space-between;
}
.signup h3{font-size:1.25rem; max-width:24ch;}
.signup p{margin:6px 0 0; color:var(--muted); font-size:.86rem; max-width:36ch;}
form.sub{display:flex;}
form.sub input{
  font-family:"Public Sans", sans-serif; font-size:.88rem; border:1px solid var(--rule);
  background:var(--panel); color:var(--ink); padding:11px 14px; border-radius:3px 0 0 3px;
  width:220px; min-width:0;
}
form.sub button{
  border:1px solid var(--ink); background:var(--ink); color:var(--bg); font-weight:600;
  font-size:.82rem; padding:0 18px; border-radius:0 3px 3px 0; cursor:pointer;
}
.sub-note{width:100%; font-family:"IBM Plex Mono", monospace; font-size:.75rem; color:var(--accent); margin-top:10px; display:none;}
@media (max-width:520px){ form.sub{width:100%;} form.sub input{width:100%;} }

/* footer */
footer{padding-block:44px 40px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px;}
@media (max-width:700px){ .foot-grid{grid-template-columns:1fr 1fr;} }
.foot-grid h4{
  font-family:"IBM Plex Mono", monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:500;
}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px;}
.foot-grid a{font-size:.86rem; text-decoration:none; color:var(--ink-soft);}
.foot-grid a:hover{color:var(--accent);}
.foot-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  font-size:.78rem; color:var(--muted);
}
.foot-bottom .disclosure{max-width:52ch; line-height:1.5;}

/* admin-only inline notice on empty buy links */
.hsj-admin-hint{
  font-size:.72rem; color:var(--amazon); border:1px dashed var(--amazon); border-radius:3px;
  padding:6px 8px; margin-top:-4px;
}