/*
Theme Name:  EB Theme
Theme URI:   https://earnshawbooks.com
Author:      Earnshaw Books
Description: Custom WordPress theme for Earnshaw Books — publisher catalogue with WooCommerce, priority-weighted hero and cover pools with automatic daily/weekly rotation. v15 (2026-08-04): individual book/product pages cleaned up — removed WooCommerce's default "Pages / Archives / Categories / Search" sidebar clutter (site never used a sidebar anywhere else), hid the WP Armour honeypot plugin's admin-only test notice from the Add to Cart area, narrowed the product image + description to a 740px column (matching About Us) with a smaller fixed-width cover image, and replaced the default 4-item "Related Products" (random per page) with the same 6-book "More From Earnshaw Books" grid used on the homepage. v14 (2026-08-02): homepage "Read our latest Substack" section now live-fetches the real earnshawbooks.substack.com RSS feed (title, link, real cover image via the feed's enclosure tag) instead of a local WordPress post category that was showing a stale unrelated 2023 post. v13 (2026-08-01): Catalogues page covers reduced to fixed width + left-crowded instead of stretching full row; Spring 2025 catalogue slot removed (never existed) instead of showing a placeholder. v9 (2026-07-28): basic pages (About Us, Contact, Submissions, etc. — anything using the generic fallback template) now wrap their title and body text in a .page-content column capped at 740px and centered, for comfortable paragraph line lengths. Site structural width (header/nav/footer, still 1280px via .site-wrap) is unchanged. v8 (2026-07-27): admin usability overhaul for managing a growing hero/cover pool long-term. Hero Image Pool rows on Appearance -> EB Homepage now collapse to a compact summary (thumbnail, title, priority, pin dates) that expands on click — new heroes still open pre-expanded. Added a Featured Covers management table on the same page (thumbnail, title, priority, remove checkbox per tagged product) plus a WooCommerce product-search box to add books to the eb-homepage-cover pool without leaving the page or hunting through Products. No storefront/front-end changes — wp-admin only.
Version:     16.0
License:     Proprietary
Text Domain: eb-theme
*/

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
  background: #ffffff;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: 'Baskervville', 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.2;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 40px 14px;
}
.sec-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1a1a1a;
  white-space: nowrap;
}
.sec-head .line {
  flex: 1;
  height: 1px;
  background: #ddd;
}
.sec-head .more {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A1A;
  white-space: nowrap;
}
.sec-head .more:hover { text-decoration: underline; }

/* ============================================================
   SITE WRAPPER
   ============================================================ */
.site-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

/* Narrow text column for basic pages (About Us, Contact, Submissions, etc.
   — anything rendered via the generic index.php fallback). Keeps paragraph
   line lengths readable without touching the site-wide .site-wrap used by
   the header/nav/footer. */
.page-content {
  max-width: 740px;
  margin: 0 auto;
}
.page-content h1 {
  margin-bottom: 24px;
}
.page-content p {
  margin-bottom: 20px;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.site-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-logo img {
  height: 92px;
  width: auto;
}
.site-logo .logo-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Two-tone logo box: dark red "EARNSHAW" over a white/cream "BOOKS" line,
   matching Graham's design reference (2026-07-27). Serif face for the
   printed-book-imprint feel; swap for the real logo image via
   Appearance -> Customize -> Site Identity whenever one is ready. */
.logo-fallback .logo-box {
  border: 1px solid #8B1A1A;
  display: flex;
  flex-direction: column;
  min-width: 220px;
}
.logo-fallback .logo-box span {
  font-family: Georgia, 'Times New Roman', serif;
  display: block;
  padding: 10px 24px;
  letter-spacing: 0.12em;
  line-height: 1;
}
.logo-fallback .logo-box .logo-top {
  background: #8B1A1A;
  color: #fff;
  font-size: 1.6rem;
}
.logo-fallback .logo-box .logo-bottom {
  background: #fff;
  color: #3a3a3a;
  font-size: 1.3rem;
  border-top: 1px solid #8B1A1A;
}

.header-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #777;
  margin-top: 14px;
}

/* Primary nav */
.primary-nav {
  background: #8B1A1A;
}
.primary-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
}
.primary-nav-inner .nav-links {
  display: flex;
  align-items: center;
  flex: 1;
}
.primary-nav-inner .nav-links a {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  padding: 12px 18px;
  transition: color 0.15s;
}
.primary-nav-inner .nav-links a:hover { color: #fff; }

.nav-utils {
  display: flex;
  align-items: center;
  gap: 14px;
}
.nav-utils a {
  color: rgba(255,255,255,0.8);
  font-size: 1rem;
  transition: color 0.15s;
}
.nav-utils a:hover { color: #fff; }
.nav-utils .wc-cart-count {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.8);
}

/* Mobile hamburger */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0;
  margin-left: auto;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 4px 0;
  transition: all 0.25s;
}

/* ============================================================
   HERO — two static images side by side
   ============================================================ */
.heroes {
  padding: 0 40px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 0;
}

.hero-slot {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
  /* Height set by aspect-ratio — designer targets 620×340px images */
  aspect-ratio: 620 / 340;
}

.hero-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slot .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}

.hero-slot .hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 20px;
  color: #fff;
}
.hero-caption .hc-title {
  font-family: 'Baskervville', serif;
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 4px;
}
.hero-caption .hc-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.hero-caption .hc-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  opacity: 0.8;
  margin-top: 6px;
}

.hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
}
.hero-placeholder p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 20px;
}

/* ============================================================
   FEATURED COVERS — 6 book covers
   ============================================================ */
.covers-section {
  padding: 20px 40px 8px;
}

.covers-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.cover-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cover-item a { display: block; }

.cover-img-wrap {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: #f0ede8;
  position: relative;
}
.cover-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.cover-item:hover .cover-img-wrap img { transform: scale(1.03); }

.cover-info { text-align: center; }
.cover-info .cover-title {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 2px;
}
.cover-info .cover-author {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  color: #888;
  margin-bottom: 3px;
}
.cover-info .cover-price {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  color: #1a1a1a;
}
.cover-info .cover-price .ebook { color: #888; margin-right: 6px; }
.cover-info .cover-price .paperback { color: #888; }

/* ============================================================
   SUBSTACK / BLOG
   ============================================================ */
.blog-section { padding: 8px 0 0; }

.blog-card {
  margin: 0 40px 32px;
  display: grid;
  grid-template-columns: 260px 1fr;
  border: 1px solid #e8e4df;
  overflow: hidden;
}

.blog-img {
  position: relative;
  background: #1a2a3a;
  overflow: hidden;
}
.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-img .blog-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  padding: 20px;
}
.blog-img .blog-img-placeholder p {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
}

.blog-body { padding: 24px 28px; }
.blog-body .blog-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B1A1A;
  margin-bottom: 8px;
}
.blog-body h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  color: #1a1a1a;
}
.blog-body p {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.65;
  margin-bottom: 14px;
}
.blog-body .blog-meta {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  color: #aaa;
  margin-bottom: 14px;
}
.blog-body .read-more {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B1A1A;
}
.blog-body .read-more:hover { text-decoration: underline; }

/* ============================================================
   COLLECTIONS BROWSER
   ============================================================ */
.collections-section { padding: 0 40px 32px; }

.collections-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
}

.collection-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.collection-item:hover .col-icon-wrap { border-color: #8B1A1A; }

.col-icon-wrap {
  width: 58px;
  height: 58px;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s;
  background: #faf9f7;
}
.col-icon-wrap img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.col-icon-wrap svg {
  width: 28px;
  height: 28px;
}

.collection-item span {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 500;
  color: #444;
  text-align: center;
  line-height: 1.3;
}

/* ============================================================
   NEWSLETTER BAND
   ============================================================ */
.newsletter-band {
  background: #8B1A1A;
  padding: 18px 40px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.newsletter-band .nl-text { flex: 1; }
.newsletter-band .nl-text p {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
}
.newsletter-band .nl-form {
  display: flex;
  gap: 0;
}
.newsletter-band .nl-form-wrap {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.9);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #111;
  color: #aaa;
  padding: 36px 40px 24px;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 28px;
}

.footer-brand .footer-logo-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #fff;
  margin-bottom: 8px;
}
.footer-brand .footer-logo-image {
  height: 56px;
  width: auto;
  margin-bottom: 10px;
}
.footer-brand p {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  line-height: 1.6;
  color: #666;
}

.footer-col h4 {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 12px;
}
.footer-col a {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: #666;
  margin-bottom: 6px;
  transition: color 0.15s;
}
.footer-col a:hover { color: #aaa; }

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  border-top: 1px solid #222;
  padding-top: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-bottom p {
  font-family: 'Inter', sans-serif;
  font-size: 0.6rem;
  color: #444;
}

/* ============================================================
   WOOCOMMERCE OVERRIDES
   ============================================================ */
.woocommerce-message,
.woocommerce-info {
  border-top-color: #8B1A1A;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: #8B1A1A;
}
.woocommerce a.button,
.woocommerce button.button {
  background: #8B1A1A;
  color: #fff;
  border-radius: 0;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background: #6e1414;
  color: #fff;
}

/* Single product page — narrower layout + smaller cover image (v15,
   2026-08-04). WooCommerce's default single-product template floats
   .images (48%) and .summary (48%) full-width with no theme override,
   which is why the book cover was rendering huge and the description
   column ran the full site width. This caps the whole product block to
   the same 740px column used on About Us / other basic pages, shrinks
   the cover to a fixed 220px, and lets the summary text take the rest. */
.woocommerce div.product {
  max-width: 740px;
  margin: 0 auto;
}
.woocommerce div.product div.images {
  width: 220px;
  float: left;
  margin: 0 32px 24px 0;
}
.woocommerce div.product div.summary {
  width: calc(740px - 220px - 32px);
  float: right;
  margin: 0 0 24px;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .eb-related-covers-head,
.woocommerce div.product .eb-related-covers {
  clear: both;
}

/* "More From Earnshaw Books" — replaces WooCommerce's default Related
   Products block on single product pages with the same 6-item covers
   grid used on the homepage (v15, 2026-08-04). Reuses .sec-head /
   .covers-section / .covers-grid as-is, just needs top spacing since
   it now sits directly under the (also narrowed) product summary. */
.eb-related-covers-head {
  margin-top: 16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .heroes { padding: 0 24px; gap: 12px; }
  .sec-head, .covers-section, .collections-section { padding-left: 24px; padding-right: 24px; }
  .blog-card { margin-left: 24px; margin-right: 24px; }
  .newsletter-band { padding: 16px 24px; }
  .site-footer { padding: 28px 24px 20px; }
  .footer-inner { grid-template-columns: 160px 1fr 1fr 1fr; gap: 24px; }
  .collections-grid { grid-template-columns: repeat(4, 1fr); }
  .covers-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .header-inner { padding: 14px 20px 0; }
  .primary-nav-inner { padding: 0 20px; }
  .nav-links { display: none; flex-direction: column; }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }
  .heroes { grid-template-columns: 1fr; padding: 0 20px; }
  .covers-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-card { grid-template-columns: 1fr; margin: 0 20px 24px; }
  .blog-img { min-height: 160px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 20px; }
  .collections-grid { grid-template-columns: repeat(4, 1fr); }
  .sec-head, .covers-section, .collections-section { padding-left: 20px; padding-right: 20px; }
  .newsletter-band { flex-direction: column; gap: 12px; padding: 16px 20px; }
  .site-footer { padding: 24px 20px 16px; }
}

@media (max-width: 480px) {
  .covers-grid { grid-template-columns: repeat(2, 1fr); }
  .collections-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
}

/* ============================================================
   CATALOGUES PAGE  (page-catalogues.php, v11, 2026-08-01)
   ============================================================ */
.catalogues-page {
  padding-bottom: 40px;
}

.catalogue-grid {
  display: grid;
  grid-template-columns: repeat(4, 215px); /* v13: fixed width ~75% of prior stretched size, left-crowded instead of filling the row */
  justify-content: start;
  gap: 20px;
  padding: 0 40px 20px;
}

.catalogue-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalogue-cover-wrap {
  display: block;
  aspect-ratio: 210 / 297; /* A4 portrait */
  overflow: hidden;
  background: #f0ede8;
  border: 1px solid #ddd;
  position: relative;
}
.catalogue-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.catalogue-item a.catalogue-cover-wrap:hover img { transform: scale(1.03); }

.catalogue-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2a2a2a;
}
.catalogue-placeholder p {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 16px;
}

.catalogue-caption {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #1a1a1a;
  text-align: center;
}

@media (max-width: 768px) {
  .catalogue-grid { grid-template-columns: repeat(2, 165px); justify-content: start; padding: 0 20px 20px; }
}

/* ============================================================
   WP ARMOUR — HIDE ADMIN-ONLY HONEYPOT TEST NOTICE  (v15, 2026-08-04)
   ------------------------------------------------------------
   The WP Armour plugin prints a "WP Armour (Only visible to site
   administrators...)" box with an "Act as Spam Bot" test button
   directly inside the Add to Cart area on every product page, but
   only when a logged-in administrator is viewing the page — real
   customers never see it. It has no on/off setting in the plugin
   itself, so it's suppressed here with CSS instead. This only hides
   the visible test message; the actual honeypot spam field it's
   describing keeps working exactly as before.
   ============================================================ */
.wpa-test-msg { display: none !important; }