/* ===========================================================
   ItsMagz — Main Stylesheet
   Version: 1.0.0
   Author:  ItsMagz
   ===========================================================

   Table of Contents
   1.  Design Tokens (CSS Variables)
   2.  Base Reset & Body
   3.  Typography
   4.  Utilities
   5.  Announcement Bar
   6.  Header & Navigation
   7.  Hero Section
   8.  Section Shells
   9.  Product Cards
   10. Category Grid
   11. Portfolio Filter Grid
   12. Blog Cards
   13. Newsletter
   14. Testimonials
   15. Trust Badges
   16. Footer
   17. Single Blog Post
   18. Single Product Page
   19. Archive / Taxonomy Pages
   20. Sidebar & Widgets
   21. 404 Page
   22. WordPress Core Compatibility
   23. Responsive — Tablet (≤ 980 px)
   24. Responsive — Mobile  (≤ 720 px)
   =========================================================== */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  /* Brand palette */
  --espresso:       #2A211B;
  --espresso-soft:  #3E322A;
  --gold:           #C0973F;
  --gold-light:     #D8B568;
  --gold-dark:      #9C7A30;  /* decorative / large-text only  */
  --gold-text:      #6D5522;  /* WCAG AA-safe for small labels  */
  --cream:          #EAE0CB;
  --cream-soft:     #F7F2E8;
  --white:          #FFFFFF;
  --body-text:      #5B5048;
  --border:         #DCD2BE;
  --success:        #4F7942;
  --error:          #B3422F;

  /* Typography */
  --font-display:  'Fraunces', Georgia, serif;
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --container:     1200px;
  --radius:        14px;
  --radius-sm:     8px;

  /* Shadows */
  --shadow-sm:  0 2px 10px  rgba(42,33,27,.06);
  --shadow-md:  0 10px 30px rgba(42,33,27,.10);
  --shadow-lg:  0 24px 60px rgba(42,33,27,.16);

  /* Transitions */
  --transition: .18s ease;
}

/* ── 2. Base Reset & Body ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; background: var(--white); }
#page { min-height: 100vh; }

body {
  font-family: var(--font-body);
  color: var(--body-text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── 3. Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--espresso);
  line-height: 1.15;
  font-weight: 600;
}
h1 { font-size: clamp(30px, 4.5vw, 52px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: 18px; }
p  { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* Entry content (blog / page body) */
.entry-content h2 { margin: 2rem 0 .75rem; }
.entry-content h3 { margin: 1.75rem 0 .6rem; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.2rem; }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li  { margin-bottom: .4rem; }
.entry-content a   { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--espresso); }
.entry-content blockquote {
  border-left: 4px solid var(--gold);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  background: var(--cream-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-style: italic;
  color: var(--espresso-soft);
}
.entry-content img { border-radius: var(--radius-sm); }
.entry-content code {
  background: var(--cream-soft);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: .88em;
}
.entry-content pre {
  background: var(--espresso);
  color: var(--cream-soft);
  padding: 1.2rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: 1.2rem;
}

/* ── 4. Utilities ──────────────────────────────────────────── */
.container  { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-text);
  display: inline-block;
  margin-bottom: 10px;
}
.section      { padding: 84px 0; }
.section-head { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head p  { font-size: 16px; }
.section-cta    { text-align: center; margin-top: 44px; }
.bg-cream   { background: var(--cream-soft); }
.bg-espresso { background: var(--espresso); }
.bg-espresso h2, .bg-espresso h3, .bg-espresso b { color: var(--cream-soft); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 14.5px;
  padding: 13px 26px; border-radius: 999px;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  white-space: nowrap;
}
.btn-primary  { background: var(--espresso); color: var(--cream-soft); }
.btn-primary:hover { background: var(--gold-text); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-gold     { background: var(--gold); color: var(--espresso); }
.btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline  { background: transparent; border: 1.5px solid var(--espresso); color: var(--espresso); }
.btn-outline:hover { background: var(--espresso); color: var(--cream-soft); }
.btn-buy      { font-size: 16px; padding: 15px 34px; width: 100%; justify-content: center; margin-bottom: 10px; }
.btn-sm       { padding: 9px 18px; font-size: 13px; }

/* No-content notice */
.no-content-notice {
  text-align: center; color: var(--body-text); opacity: .7;
  padding: 40px; background: var(--cream-soft); border-radius: var(--radius);
}

/* Pagination */
.pagination .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  color: var(--espresso-soft); font-weight: 600; transition: all var(--transition);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--espresso); color: var(--cream-soft); border-color: var(--espresso); }

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--body-text); margin-bottom: 28px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.breadcrumb a { color: var(--gold-text); }
.breadcrumb a:hover { color: var(--espresso); }

/* ── 5. Announcement Bar ───────────────────────────────────── */
.announcement-bar {
  background: var(--espresso);
  color: var(--cream-soft);
  font-size: 13.5px;
  text-align: center;
  padding: 10px 50px;
  position: relative;
  z-index: 100;
}
.announcement-bar__inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.announcement-bar__message strong { color: var(--gold-light); }
.announcement-bar__cta {
  background: var(--gold); color: var(--espresso);
  padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
}
.announcement-bar__close {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--cream-soft); font-size: 18px; opacity: .7; padding: 4px 8px; border-radius: 4px;
}
.announcement-bar__close:hover { opacity: 1; background: rgba(255,255,255,.1); }

/* ── 6. Header & Navigation ────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
  gap: 20px;
}

/* Logo */
.logo-text, .custom-logo-link {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 25px; color: var(--espresso);
  flex-shrink: 0;
}
.logo-text em { color: var(--gold); font-style: italic; font-weight: 600; }
.logo-icon { width: 36px; height: 36px; flex-shrink: 0; }
.custom-logo-link img { height: 48px; width: auto; }

/* Primary nav */
.primary-nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.nav-menu { display: flex; gap: 4px; align-items: center; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  font-size: 14.5px; font-weight: 600; color: var(--espresso-soft);
  padding: 8px 12px; display: inline-block; border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current-menu-ancestor > a { color: var(--espresso); background: var(--cream-soft); }

/* Dropdowns */
.nav-menu .sub-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-md);
  min-width: 220px; padding: 8px; z-index: 200;
}
.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu { display: block; }
.nav-menu .sub-menu a {
  display: block; padding: 9px 12px; border-radius: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--espresso-soft);
}
.nav-menu .sub-menu a:hover { background: var(--cream-soft); color: var(--espresso); }

/* Header CTA */
.nav-ctas { flex-shrink: 0; }

/* Mobile toggle */
.menu-toggle { display: none; padding: 8px; border-radius: var(--radius-sm); }
.menu-toggle__bar {
  display: block; width: 22px; height: 2px;
  background: var(--espresso); border-radius: 2px; margin: 4px 0;
  transition: transform var(--transition), opacity var(--transition);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* ── 7. Hero Section ───────────────────────────────────────── */
.section-hero {
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--white) 78%);
  padding: 78px 0 64px;
}
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero-content h1 { margin-bottom: 18px; }
.hero-lead { font-size: 17.5px; max-width: 500px; margin-bottom: 30px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-stats { display: flex; gap: 36px; flex-wrap: wrap; }
.hero-stats .stat b { display: block; font-family: var(--font-display); font-size: 26px; color: var(--espresso); }
.hero-stats .stat span { font-size: 13px; }

/* ── Hero visual / slider ──────────────────────────────────── */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: flex-start; }

/* Slider container */
.hero-slider { width: 300px; position: relative; }

/* Slides — cross-fade: first slide stays in flow (defines height),
   others are absolutely stacked on top with opacity transition. */
.hero-slide { opacity: 0; transition: opacity .65s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide:not(:first-child) { position: absolute; top: 0; left: 0; width: 100%; }

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* Card shell */
.hero-book-card {
  background: var(--espresso); border-radius: 18px; overflow: hidden;
  color: var(--cream-soft); box-shadow: var(--shadow-lg);
  transform: rotate(-2deg); position: relative;
}
.hero-book-card__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 12px;
}
.hero-book-card .tag {
  display: inline-block; background: var(--gold); color: var(--espresso);
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

/* Rating row inside card header */
.hero-rating { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.hero-rating__stars { color: var(--gold-light); font-size: 12px; letter-spacing: 1px; }
.hero-rating__text { font-size: 11px; font-weight: 600; color: var(--cream-soft); }
.hero-rating__text small { opacity: .7; font-size: 10px; }

/* Cover image — fills card width with fixed height */
.hero-book-img-wrap { display: block; }
.hero-book-cover {
  width: 100%; height: 210px; object-fit: cover; object-position: top center;
  display: block; border-radius: 0;
}

/* Card body */
.hero-book-body { padding: 16px 18px 20px; }
.hero-book-title { font-size: 17px; line-height: 1.3; margin-bottom: 12px; }
.hero-book-title a { color: var(--cream-soft); }
.hero-book-title a:hover { color: var(--gold-light); }
.hero-book-meta {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 11px; margin-bottom: 14px;
}
.hero-book-price { font-family: var(--font-display); font-size: 20px; color: var(--gold-light); }
.hero-book-cta { align-self: flex-start; }

/* Placeholder card (no featured products yet) */
.hero-book-card--placeholder {
  padding: 32px 24px; opacity: .65; text-align: center; transform: none;
}

/* Dot navigation */
.hero-slider-dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.hero-dot {
  width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: var(--border); transition: background var(--transition), transform var(--transition);
}
.hero-dot:hover { background: var(--gold-light); }
.hero-dot.is-active { background: var(--gold); transform: scale(1.25); }
.hero-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ── 8. Section Shells ─────────────────────────────────────── */
.section-categories,
.section-blog { background: var(--cream-soft); }
.section-trust { background: var(--espresso); padding: 50px 0; }

/* ── 9. Product Cards ──────────────────────────────────────── */
.card-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.product-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.product-thumb {
  position: relative; overflow: hidden;
  height: 170px; background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 100%);
  display: flex; align-items: center; justify-content: center;
}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-thumb__placeholder {
  padding: 16px; font-family: var(--font-display); font-size: 14px;
  color: var(--espresso); text-align: center; font-weight: 600;
}
.ph-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(42,33,27,.82); color: var(--cream-soft);
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}
.product-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-body .cat { font-size: 11.5px; font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: .05em; }
.product-title  { font-size: 16.5px; }
.product-title a { color: var(--espresso); }
.product-title a:hover { color: var(--gold-dark); }
.product-excerpt { font-size: 13.5px; flex: 1; }
.product-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.price { font-family: var(--font-display); font-weight: 700; color: var(--espresso); font-size: 16px; }
.platform-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.platform-badge--etsy       { background: #F1641E20; color: #F1641E; }
.platform-badge--gumroad    { background: #FF909020; color: #c0392b; }
.platform-badge--amazon-kdp { background: #FF990020; color: #b7590b; }
.platform-badge--multiple   { background: var(--cream); color: var(--espresso-soft); }

/* ── 10. Category Grid ─────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cat-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px 24px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: block; color: inherit;
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-light); }
.cat-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--cream-soft); display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; color: var(--gold-dark);
}
.cat-icon svg { width: 26px; height: 26px; }
.cat-card h3 { font-size: 18px; margin-bottom: 8px; }
.cat-card p  { font-size: 13.5px; margin-bottom: 14px; color: var(--body-text); }
.view-link {
  font-size: 13.5px; font-weight: 700; color: var(--gold-text);
  display: inline-flex; align-items: center; gap: 4px;
}
.cat-card:hover .view-link { color: var(--espresso); }

/* ── 11. Portfolio Filter Grid ─────────────────────────────── */
.filter-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.filter-btn {
  font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--border); color: var(--espresso-soft); background: var(--white);
  transition: all var(--transition);
}
.filter-btn.active, .filter-btn:hover {
  background: var(--espresso); color: var(--cream-soft); border-color: var(--espresso);
}
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* JS hides/shows .product-card-wrap via display:none */
.product-card-wrap { display: flex; flex-direction: column; }
.product-card-wrap[hidden] { display: none; }

/* ── 12. Blog Cards ────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.blog-thumb { height: 180px; display: block; overflow: hidden; background: var(--cream); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.04); }
.blog-thumb__placeholder { height: 100%; background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 60%); }
.blog-body { padding: 20px; }
.blog-body .cat { font-size: 11.5px; font-weight: 700; color: var(--gold-text); text-transform: uppercase; letter-spacing: .05em; }
.blog-title { font-size: 16.5px; margin: 8px 0 8px; }
.blog-title a { color: var(--espresso); }
.blog-title a:hover { color: var(--gold-dark); }
.blog-excerpt { font-size: 13.5px; margin-bottom: 10px; }
.blog-meta, .post-meta { font-size: 12.5px; color: var(--body-text); opacity: .8; }

/* ── 13. Newsletter ────────────────────────────────────────── */
.newsletter-box {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  background: var(--espresso); border-radius: 22px; padding: 54px 56px;
}
.newsletter-box h2 { color: var(--cream-soft); font-size: 30px; margin-bottom: 14px; }
.newsletter-box p  { color: var(--cream-soft); opacity: .85; }
.nl-benefits { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.nl-benefits span {
  font-size: 12.5px; font-weight: 600; color: var(--cream-soft);
  background: rgba(255,255,255,.10); padding: 6px 12px; border-radius: 999px;
}
.nl-placeholder { color: var(--cream-soft); opacity: .6; font-size: 13px; padding: 20px 0; }

/* ── 14. Testimonials ──────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testi-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.testi-card .quote { font-size: 14.5px; font-style: italic; color: var(--espresso-soft); margin-bottom: 18px; }
.testi-person { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--gold-text);
  flex-shrink: 0;
}
.testi-person b   { display: block; font-size: 13.5px; color: var(--espresso); }
.testi-person span { font-size: 12px; }

/* ── 15. Trust Badges ──────────────────────────────────────── */
.trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.trust-item svg { width: 32px; height: 32px; color: var(--gold-dark); margin: 0 auto 10px; }
.trust-item b   { display: block; font-size: 14px; color: var(--cream-soft); margin-bottom: 4px; }
.trust-item span { font-size: 12.5px; color: var(--cream-soft); opacity: .75; }

/* ── 16. Footer ────────────────────────────────────────────── */
.site-footer { background: #0D0D0D; color: var(--cream); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; margin-bottom: 46px; }
.footer-logo-text { font-family: var(--font-display); font-size: 23px; font-weight: 700; color: var(--cream-soft); display: block; margin-bottom: 12px; }
.footer-logo-text em { color: var(--gold-light); font-style: italic; }
/* Main site logo in footer — inverted to white */
.footer-logo-img img { max-height: 44px; width: auto; filter: brightness(0) invert(1); margin-bottom: 12px; }
/* Dedicated footer logo — uploaded via Customizer, shown as-is (user provides light version) */
.footer-logo-dedicated img { max-height: 60px; width: auto; margin-bottom: 12px; }
.footer-tagline { font-size: 13.5px; opacity: .75; max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  color: var(--cream-soft);
}
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: var(--espresso); }
.footer-social svg { width: 16px; height: 16px; }
/* Footer column headings — static fallback and WordPress widget titles unified */
.footer-widget-title,
.site-footer .widget-title,
.site-footer .widgettitle,
.site-footer .widget h2,
.site-footer .widget h3 {
  font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--cream-soft); margin-bottom: 16px; line-height: 1.2;
}
.footer-col ul li, .footer-widget ul li { margin-bottom: 10px; font-size: 13.5px; opacity: .82; }
.footer-col ul li a:hover, .footer-widget ul li a:hover { color: var(--gold-light); opacity: 1; }
/* Override default WordPress widget paragraph / list styles inside footer */
.site-footer .widget ul { list-style: none; padding-left: 0; }
.site-footer .widget ul li { margin-bottom: 10px; font-size: 13.5px; opacity: .82; }
.site-footer .widget a { color: var(--cream-soft); }
.site-footer .widget a:hover { color: var(--gold-light); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; opacity: .65;
}
.footer-legal-list { display: flex; gap: 18px; flex-wrap: wrap; }

/* ── 17. Single Blog Post ──────────────────────────────────── */
.has-sidebar-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.post-header .eyebrow { margin-bottom: 12px; }
.post-title { margin-bottom: 14px; }
.post-meta-row { display: flex; gap: 18px; align-items: center; font-size: 13px; opacity: .75; margin-bottom: 24px; flex-wrap: wrap; }
.post-featured-image { border-radius: var(--radius); overflow: hidden; margin-bottom: 36px; }
.post-featured-image img { width: 100%; }
.post-footer { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 36px; }
.post-tags a { display: inline-block; background: var(--cream-soft); color: var(--espresso-soft); font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; margin: 0 4px 6px 0; }
.post-tags a:hover { background: var(--espresso); color: var(--cream-soft); }

/* ── 18. Single Product Page ───────────────────────────────── */
/* Gradient fades from cream at top to white — fills the viewport width so the
   page doesn't look "boxed" compared to the full-bleed homepage sections. */
.product-single {
  padding: 52px 0 88px;
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--white) 300px);
  min-height: calc(100vh - 120px); /* fill viewport so no grey shows below content */
}
.product-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; margin-bottom: 64px; }
.product-cover { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.product-cover-placeholder {
  width: 100%; aspect-ratio: 3/4;
  background: linear-gradient(135deg, var(--cream) 0%, var(--gold-light) 100%);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 18px; color: var(--espresso); padding: 24px; text-align: center;
}
.product-trust-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.product-trust-badges span { font-size: 12.5px; font-weight: 600; color: var(--body-text); opacity: .8; }
.product-detail-info h1 { margin: 10px 0 16px; }
.product-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.stars { color: var(--gold); font-size: 18px; }
.rating-value { font-weight: 700; font-size: 15px; color: var(--espresso); }
.review-count { font-size: 13px; opacity: .75; }
.product-price-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.product-price { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--espresso); }
.affiliate-note { font-size: 12.5px; opacity: .65; margin-bottom: 20px; }
.product-specs { list-style: none; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 24px; }
.product-specs li { font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.product-specs li:last-child { border-bottom: none; }
.related-products { border-top: 1px solid var(--border); padding-top: 48px; }
.related-products h2 { margin-bottom: 32px; }

/* ── 19. Archive / Taxonomy ────────────────────────────────── */
.archive-header h1 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 8px; }

/* ── 20. Sidebar & Widgets ─────────────────────────────────── */
.blog-sidebar { position: sticky; top: 80px; }
.widget { margin-bottom: 32px; }
.widget-title { font-family: var(--font-body); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--espresso); margin-bottom: 16px; }
.widget ul { list-style: disc; padding-left: 1.2rem; }
.widget ul li { margin-bottom: 8px; font-size: 14px; }
.widget ul li a:hover { color: var(--gold-dark); }

/* ── 21. 404 ───────────────────────────────────────────────── */
.error-404 .eyebrow { font-size: 64px; letter-spacing: 0; opacity: .2; display: block; margin-bottom: 0; }

/* ── 22. WordPress Core Compatibility ──────────────────────── */
/* Admin bar offset */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width:782px) { .admin-bar .site-header { top: 46px; } }

/* Alignment classes */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { margin: 0 auto 1rem; display: block; }
.alignwide  { max-width: calc(var(--container) + 80px); margin-left: auto; margin-right: auto; }
.alignfull  { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

/* WP captions */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; opacity: .75; text-align: center; margin-top: 6px; }

/* Screen reader only */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute;
}
.screen-reader-text:focus {
  background: var(--white); clip: auto; clip-path: none;
  width: auto; height: auto; padding: 14px 22px; z-index: 9999;
  top: 10px; left: 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}

/* ── 23. Responsive — Tablet (≤ 980 px) ───────────────────── */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: 40px; justify-content: center; }
  .hero-slider { width: 100%; max-width: 380px; }
  .hero-book-card { transform: none; } /* No tilt on tablet — card is wider */
  .hero-book-cover { height: 240px; }
  .card-row { grid-template-columns: repeat(2, 1fr); }
  .cat-grid  { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .has-sidebar-layout { grid-template-columns: 1fr; }
  .product-detail-grid { grid-template-columns: 1fr; }
  .newsletter-box { grid-template-columns: 1fr; padding: 40px 30px; }
  .section { padding: 60px 0; }
}

/* ── 24. Responsive — Mobile (≤ 720 px) ───────────────────── */
@media (max-width: 720px) {
  /* Mobile nav */
  .primary-nav {
    position: fixed; top: 0; right: -100%; height: 100vh;
    width: 80%; max-width: 320px; background: var(--white);
    flex-direction: column; align-items: flex-start;
    padding: 90px 24px 24px; box-shadow: var(--shadow-lg);
    transition: right .25s ease; z-index: 60;
    justify-content: flex-start;
  }
  .primary-nav.is-open { right: 0; }
  .nav-menu { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-menu > li > a { width: 100%; padding: 12px 8px; border-radius: 0; border-bottom: 1px solid var(--border); }
  .nav-menu .sub-menu { position: static; box-shadow: none; border: none; border-left: 3px solid var(--gold); border-radius: 0; padding: 0 0 0 16px; margin-top: 0; display: none; }
  .nav-menu > li.is-open > .sub-menu { display: block; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .nav-ctas { display: none; }

  /* Grid collapse */
  .card-row, .portfolio-grid, .cat-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .trust-row  { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .newsletter-box { padding: 30px 22px; }

  .section { padding: 48px 0; }
  .container { padding: 0 18px; }

  /* Announcement bar text wrapping */
  .announcement-bar { padding: 10px 40px; font-size: 12.5px; }

  /* Hero */
  .hero-visual { display: none; } /* slider hidden on mobile to keep hero text prominent */
  .hero-ctas .btn { width: 100%; }
}