/*
Theme Name: The Gospel Post
Theme URI: https://thegospelpost.org
Author: The Gospel Post
Author URI: https://thegospelpost.org
Description: A clean, reader-first WordPress theme for Christian Studies and Theology. Built with semantic HTML, CSS custom properties, and vanilla JavaScript — no heavy dependencies.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: the-gospel-post
Tags: theology, christian, blog, clean, responsive, custom-post-types
*/

/* ==========================================================================
   TABLE OF CONTENTS
   1.  CSS Custom Properties (Design Tokens)
   2.  CSS Reset & Base Styles
   3.  Typography
   4.  Layout & Grid
   5.  Header & Navigation
   6.  Mobile Hamburger Menu
   7.  Search Bar (Header)
   8.  Hero / Page Title Areas
   9.  Post Cards (Index, Archive, Search)
   10. Single Post / Article View
   11. Scripture Quote Block
   12. Social Share Buttons
   13. Text-to-Speech (TTS) Player
   14. Related Articles
   15. Prev/Next Navigation (Commentary)
   16. Sidebar
   17. Popular Articles Widget
   18. Footer
   19. Page Template (Static Pages)
   20. Video CPT Template
   21. Bible Study CPT Template
   22. Commentary CPT Template
   23. 404 Page
   24. Utility Classes
   25. Responsive Breakpoints
   ========================================================================== */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   All colors, fonts, spacing, and sizing use variables so the theme
   can be completely re-skinned by editing only this block.
   ========================================================================== */

:root {
  /* --- Color Palette --- */
  --color-bg:           #FAF7F2;   /* Warm parchment — main background */
  --color-text:         #1C1C1E;   /* Near-black — primary body text */
  --color-accent:       #8B6914;   /* Antique gold — links, borders, highlights */
  --color-accent-dark:  #6B4F0F;   /* Darker gold — hover states */
  --color-accent-light: #C9A84C;   /* Lighter gold — subtle highlights */
  --color-meta:         #4A5568;   /* Slate gray — dates, tags, UI text */
  --color-sidebar-bg:   #F0EBE1;   /* Warm off-white — sidebar and footer */
  --color-border:       #DDD5C5;   /* Soft tan — dividers and borders */
  --color-white:        #FFFFFF;
  --color-card-bg:      #FFFFFF;   /* Post card background */
  --color-overlay:      rgba(28, 28, 30, 0.55); /* Modal/overlay tint */

  /* --- Typography --- */
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Font Sizes (fluid scale using clamp) --- */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.875rem;   /* 14px */
  --fs-base:  1rem;       /* 16px */
  --fs-md:    1.125rem;   /* 18px — article body */
  --fs-lg:    1.25rem;    /* 20px */
  --fs-xl:    1.5rem;     /* 24px */
  --fs-2xl:   1.875rem;   /* 30px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   clamp(1.875rem, 4vw, 3rem); /* Responsive hero title */

  /* --- Line Heights --- */
  --lh-tight:  1.25;
  --lh-snug:   1.4;
  --lh-normal: 1.6;
  --lh-loose:  1.8;   /* Article body — maximizes readability */

  /* --- Spacing Scale --- */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */

  /* --- Layout --- */
  --content-width:   720px;   /* Single-column article max-width */
  --sidebar-width:   300px;   /* Desktop sidebar */
  --site-max-width:  1200px;  /* Outer container max-width */
  --header-height:   64px;    /* Sticky header height */

  /* --- Borders & Radii --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;
  --border-width: 1px;

  /* --- Shadows --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 30px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-index scale --- */
  --z-base:    1;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
}


/* ==========================================================================
   2. CSS RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;          /* Establishes the rem baseline */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Accessible focus ring — visible only on keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
  outline: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-dark);
  text-decoration: underline;
}

hr {
  border: none;
  border-top: var(--border-width) solid var(--color-border);
  margin: var(--space-8) 0;
}

/* Skip to main content link for accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  z-index: var(--z-modal);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  color: var(--color-white);
  text-decoration: none;
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

/* --- Headings: Inter for structure, hierarchy via size and weight --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* --- Body text inside article content: Lora serif for readability --- */
.entry-content {
  font-family: var(--font-serif);
  font-size: var(--fs-md);   /* 18px */
  line-height: var(--lh-loose); /* 1.8 — generous for long-form reading */
  color: var(--color-text);
}

.entry-content p {
  margin-bottom: var(--space-6);
}

.entry-content p:last-child {
  margin-bottom: 0;
}

/* Headings inside article body use serif for continuity */
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.entry-content h2 { font-size: var(--fs-2xl); }
.entry-content h3 { font-size: var(--fs-xl); }
.entry-content h4 { font-size: var(--fs-lg); }

/* Lists inside article content */
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-8);
  margin-bottom: var(--space-6);
}

.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }

.entry-content li {
  margin-bottom: var(--space-2);
  line-height: var(--lh-loose);
}

.entry-content li:last-child {
  margin-bottom: 0;
}

/* Links inside content */
.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.entry-content a:hover {
  color: var(--color-accent-dark);
}

/* Bold and italic */
.entry-content strong { font-weight: 700; }
.entry-content em     { font-style: italic; }

/* Inline code */
.entry-content code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9em;
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* Code blocks */
.entry-content pre {
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/* General blockquote (non-scripture) */
.entry-content blockquote {
  border-left: 4px solid var(--color-border);
  padding-left: var(--space-6);
  margin: var(--space-8) 0;
  color: var(--color-meta);
  font-style: italic;
}

/* Tables */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
  font-size: var(--fs-base);
}

.entry-content th,
.entry-content td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  text-align: left;
}

.entry-content th {
  background: var(--color-sidebar-bg);
  font-family: var(--font-sans);
  font-weight: 600;
}

/* WordPress Alignment Classes */
.alignleft  { float: left;  margin: 0 var(--space-6) var(--space-4) 0; }
.alignright { float: right; margin: 0 0 var(--space-4) var(--space-6); }
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-4);
}

/* WordPress Caption */
.wp-caption {
  max-width: 100%;
  margin-bottom: var(--space-6);
}

.wp-caption-text {
  font-size: var(--fs-sm);
  color: var(--color-meta);
  text-align: center;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
}

/* Post meta (author, date, category) */
.post-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-meta);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.post-meta a {
  color: var(--color-meta);
  text-decoration: none;
}

.post-meta a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.post-meta .meta-separator {
  color: var(--color-border);
  user-select: none;
}


/* ==========================================================================
   4. LAYOUT & GRID
   ========================================================================== */

/* Outer wrapper — centers everything and provides horizontal padding */
.site-container {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Main content area below the sticky header */
#page {
  padding-top: var(--header-height);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
  padding: var(--space-12) 0;
}

/* Two-column layout: article + sidebar */
.content-sidebar-wrap {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-12);
  align-items: start;
}

/* Single-column layout: articles, narrow-read pages */
.content-area-full {
  max-width: var(--content-width);
  margin: 0 auto;
  width: 100%;
}

/* Article wrapper inside the two-column grid */
.content-area {
  min-width: 0; /* Prevents grid blowout */
}


/* ==========================================================================
   5. HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background-color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  z-index: var(--z-sticky);
  /* Frosted glass effect — graceful degradation if unsupported */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(250, 247, 242, 0.92);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal);
}

/* Extra shadow when user has scrolled (added via JS) */
.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.header-inner {
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* --- Site Logo / Name --- */
.site-branding {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.site-branding:hover {
  text-decoration: none;
}

.site-logo img {
  height: 40px;
  width: auto;
}

.site-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}

.site-title span {
  color: var(--color-accent);
}

/* --- Primary Navigation --- */
.primary-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.primary-nav ul li {
  position: relative;
}

.primary-nav ul li a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}

.primary-nav ul li a:hover,
.primary-nav ul li.current-menu-item > a,
.primary-nav ul li.current-menu-ancestor > a {
  color: var(--color-accent);
  background-color: rgba(139, 105, 20, 0.08);
  text-decoration: none;
}

/* Dropdown menus */
.primary-nav ul li ul {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  background: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  flex-direction: column;
  gap: 0;
  z-index: var(--z-dropdown);
  padding: var(--space-2) 0;
}

.primary-nav ul li:hover > ul,
.primary-nav ul li:focus-within > ul {
  display: flex;
}

.primary-nav ul li ul li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-radius: 0;
  font-size: var(--fs-sm);
}

.primary-nav ul li ul li a:hover {
  background: var(--color-sidebar-bg);
}

/* --- Header Right: Search Icon + Hamburger --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Search toggle button */
.search-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.search-toggle-btn:hover {
  color: var(--color-accent);
  background: rgba(139, 105, 20, 0.08);
}

.search-toggle-btn svg {
  width: 20px;
  height: 20px;
  pointer-events: none;
}


/* ==========================================================================
   6. MOBILE HAMBURGER MENU
   ========================================================================== */

/* Hamburger button — hidden on desktop */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  transform-origin: center;
}

/* Animate hamburger to X when menu is open */
.hamburger-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  z-index: calc(var(--z-sticky) - 1);
}

.mobile-menu-overlay.is-open {
  display: block;
}

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  z-index: var(--z-sticky);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  padding: var(--space-4) 0;
}

.mobile-nav.is-open {
  display: block;
}

.mobile-nav ul {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-6);
}

.mobile-nav ul li a {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--color-text);
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  text-decoration: none;
}

.mobile-nav ul li:last-child a {
  border-bottom: none;
}

.mobile-nav ul li a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Sub-menus in mobile nav */
.mobile-nav ul li ul {
  padding-left: var(--space-4);
}

.mobile-nav ul li ul li a {
  font-size: var(--fs-sm);
  color: var(--color-meta);
  padding: var(--space-2) 0;
}


/* ==========================================================================
   7. SEARCH BAR (HEADER INLINE EXPAND)
   ========================================================================== */

.header-search-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-6);
  display: none; /* Shown via JS */
  z-index: var(--z-dropdown);
}

.header-search-wrap.is-open {
  display: block;
}

.header-search-form {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  gap: var(--space-3);
}

.header-search-form input[type="search"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.header-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.12);
}

.header-search-form button[type="submit"] {
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
  white-space: nowrap;
}

.header-search-form button[type="submit"]:hover {
  background: var(--color-accent-dark);
}


/* ==========================================================================
   8. HERO / PAGE TITLE AREAS
   ========================================================================== */

/* Archive / taxonomy header */
.page-header {
  padding: var(--space-12) 0 var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-10);
}

.page-header .page-title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-3);
}

.page-header .taxonomy-description {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-meta);
  max-width: 60ch;
  line-height: var(--lh-loose);
}

/* Section labels (e.g., "THEOLOGY", "DEVOTIONAL") */
.section-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Decorative divider with text */
.divider-heading {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-6);
}

.divider-heading h2 {
  font-size: var(--fs-lg);
  white-space: nowrap;
}

.divider-heading::before,
.divider-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}


/* ==========================================================================
   9. POST CARDS (INDEX, ARCHIVE, SEARCH)
   ========================================================================== */

/* Grid of post cards */
.post-grid {
  display: grid;
  gap: var(--space-8);
}

/* Default: single column */
.post-grid.grid-2col {
  grid-template-columns: repeat(2, 1fr);
}

/* Individual post card */
.post-card {
  background: var(--color-card-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Featured image container with fixed aspect ratio */
.post-card-image {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-sidebar-bg);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.post-card:hover .post-card-image img {
  transform: scale(1.04);
}

/* CPT badge on image */
.post-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* Card body */
.post-card-body {
  padding: var(--space-6);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.post-card-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.post-card-title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  margin-bottom: var(--space-3);
}

.post-card-title a {
  color: var(--color-text);
  text-decoration: none;
}

.post-card-title a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.post-card-excerpt {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--color-meta);
  margin-bottom: var(--space-5);
  flex: 1;
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.read-more-link {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.read-more-link::after {
  content: '→';
  transition: transform var(--transition-fast);
}

.read-more-link:hover {
  color: var(--color-accent-dark);
  gap: var(--space-2);
  text-decoration: none;
}

.read-more-link:hover::after {
  transform: translateX(2px);
}

/* Tags on cards */
.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tag-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--color-sidebar-bg);
  color: var(--color-meta);
  border: var(--border-width) solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.tag-pill:hover {
  background: rgba(139, 105, 20, 0.1);
  color: var(--color-accent);
  border-color: var(--color-accent-light);
  text-decoration: none;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-10) 0 var(--space-4);
}

.pagination .page-numbers {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition-fast);
  background: var(--color-white);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  text-decoration: none;
}

.pagination .page-numbers.dots {
  border: none;
  background: none;
  cursor: default;
}


/* ==========================================================================
   10. SINGLE POST / ARTICLE VIEW
   ========================================================================== */

/* Wrapper that constrains the article to the reading width */
.single-post-wrap {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Article header above the body text */
.entry-header {
  margin-bottom: var(--space-8);
}

.entry-header .section-label {
  margin-bottom: var(--space-3);
  display: block;
}

.entry-title {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-5);
  color: var(--color-text);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-8);
}

.entry-meta-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
}

.author-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.author-name {
  font-weight: 600;
  color: var(--color-text);
}

.entry-date,
.entry-read-time {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-meta);
}

/* Featured image on single post — full width up to content-width */
.entry-featured-image {
  margin-bottom: var(--space-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.entry-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article body */
.entry-content {
  margin-bottom: var(--space-12);
}

/* Post footer: tags + share */
.entry-footer {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

.entry-tags {
  margin-bottom: var(--space-6);
}

.entry-tags-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-meta);
  margin-bottom: var(--space-3);
}


/* ==========================================================================
   11. SCRIPTURE QUOTE BLOCK
   The .scripture-quote class is applied to <blockquote> elements in the
   WordPress editor. Example markup (also in comments throughout templates):

   <blockquote class="scripture-quote">
     For God so loved the world, that he gave his only Son, that whoever
     believes in him should not perish but have eternal life.
     <span class="verse-reference">John 3:16, ESV</span>
   </blockquote>
   ========================================================================== */

.scripture-quote {
  position: relative;
  border-left: 4px solid var(--color-accent);
  background: linear-gradient(
    to right,
    rgba(139, 105, 20, 0.06) 0%,
    transparent 100%
  );
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-8);
  margin: var(--space-8) 0;
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: var(--lh-loose);
  color: var(--color-text);
}

/* Decorative open-quote icon */
.scripture-quote::before {
  content: '\201C'; /* Opening curly quote */
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: 2.5rem;
  color: var(--color-accent-light);
  font-family: var(--font-serif);
  line-height: 1;
  opacity: 0.6;
}

/* The verse citation span — e.g., "John 3:16, ESV" */
.scripture-quote .verse-reference {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.02em;
}

.scripture-quote .verse-reference::before {
  content: '— ';
}


/* ==========================================================================
   12. SOCIAL SHARE BUTTONS
   Constructed dynamically by share-buttons.js using the current page URL.
   ========================================================================== */

.social-share {
  margin: var(--space-8) 0;
}

.social-share-label {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-meta);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.social-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 2px solid transparent;
}

.share-btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.share-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Facebook */
.share-btn--facebook {
  background: #1877F2;
  color: var(--color-white);
}

.share-btn--facebook:hover {
  background: #1565D8;
  color: var(--color-white);
}

/* X / Twitter */
.share-btn--twitter {
  background: #000000;
  color: var(--color-white);
}

.share-btn--twitter:hover {
  background: #1a1a1a;
  color: var(--color-white);
}

/* WhatsApp */
.share-btn--whatsapp {
  background: #25D366;
  color: var(--color-white);
}

.share-btn--whatsapp:hover {
  background: #1DAE54;
  color: var(--color-white);
}

/* Email */
.share-btn--email {
  background: var(--color-sidebar-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

.share-btn--email:hover {
  background: var(--color-border);
  color: var(--color-text);
}


/* ==========================================================================
   13. TEXT-TO-SPEECH (TTS) PLAYER
   The TTS player reads .entry-content using the Web Speech API.
   State is managed by tts.js (play / pause / stop).
   ========================================================================== */

.tts-player {
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.tts-player-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.tts-player-icon svg {
  width: 20px;
  height: 20px;
}

.tts-player-text {
  flex: 1;
}

.tts-player-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
  margin-bottom: var(--space-1);
}

.tts-player-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 500;
}

.tts-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* TTS control buttons */
.tts-btn {
  background: none;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.tts-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tts-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(139, 105, 20, 0.06);
}

/* Active play button state */
.tts-btn--play.is-playing {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

.tts-btn--play.is-playing:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

/* Stop button */
.tts-btn--stop {
  padding: var(--space-2);
}

/* Status indicator */
.tts-status {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
  min-width: 80px;
}

/* Animated dots when speaking */
.tts-status.is-speaking::after {
  content: '';
  display: inline-block;
  animation: tts-dots 1.2s steps(3, end) infinite;
}

@keyframes tts-dots {
  0%   { content: ''; }
  33%  { content: '.'; }
  66%  { content: '..'; }
  100% { content: '...'; }
}


/* ==========================================================================
   14. RELATED ARTICLES
   ========================================================================== */

.related-articles {
  margin-top: var(--space-12);
  padding-top: var(--space-10);
  border-top: 2px solid var(--color-border);
}

.related-articles-title {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-6);
}

.related-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Compact post card for related articles */
.related-post-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-decoration: none;
}

.related-post-card:hover {
  text-decoration: none;
}

.related-post-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-sidebar-bg);
}

.related-post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.related-post-card:hover .related-post-image img {
  transform: scale(1.05);
}

.related-post-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
}

.related-post-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.related-post-card:hover .related-post-title {
  color: var(--color-accent);
}


/* ==========================================================================
   15. PREV/NEXT NAVIGATION (COMMENTARY)
   ========================================================================== */

.commentary-navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-10) 0;
  padding: var(--space-8) 0;
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
}

.nav-link--prev,
.nav-link--next {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: all var(--transition-normal);
}

.nav-link--prev:hover,
.nav-link--next:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  background: rgba(139, 105, 20, 0.04);
}

.nav-link--next {
  text-align: right;
}

.nav-direction {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.nav-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: var(--lh-snug);
}

.nav-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
}

/* If only one nav item, span full width */
.commentary-navigation .nav-link--prev:only-child,
.commentary-navigation .nav-link--next:only-child {
  grid-column: 1 / -1;
}


/* ==========================================================================
   16. SIDEBAR
   ========================================================================== */

.sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
  max-height: calc(100vh - var(--header-height) - var(--space-12));
  overflow-y: auto;
  /* Custom scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar {
  width: 4px;
}

.sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

/* Sidebar widget */
.widget {
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}

.widget:last-child {
  margin-bottom: 0;
}

.widget-title {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-accent);
}

/* Sidebar search */
.sidebar-search-form {
  display: flex;
  gap: var(--space-2);
}

.sidebar-search-form input[type="search"] {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: border-color var(--transition-fast);
}

.sidebar-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.12);
}

.sidebar-search-form button {
  padding: var(--space-2) var(--space-3);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-search-form button:hover {
  background: var(--color-accent-dark);
}

.sidebar-search-form button svg {
  width: 16px;
  height: 16px;
}


/* ==========================================================================
   17. POPULAR ARTICLES WIDGET
   ========================================================================== */

.popular-posts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.popular-post-item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  text-decoration: none;
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
}

.popular-post-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.popular-post-item:hover {
  text-decoration: none;
}

.popular-post-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.popular-post-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-border);
}

.popular-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.popular-post-item:hover .popular-post-thumb img {
  transform: scale(1.08);
}

.popular-post-info {
  flex: 1;
  min-width: 0;
}

.popular-post-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-1);
  /* Limit to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--transition-fast);
}

.popular-post-item:hover .popular-post-title {
  color: var(--color-accent);
}

.popular-post-views {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.popular-post-views svg {
  width: 12px;
  height: 12px;
}


/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--color-sidebar-bg);
  border-top: var(--border-width) solid var(--color-border);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-10);
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.footer-logo img {
  height: 36px;
  width: auto;
}

.footer-site-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}

.footer-site-title span {
  color: var(--color-accent);
}

.footer-tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: var(--color-meta);
  line-height: var(--lh-loose);
  font-style: italic;
}

.footer-social-links {
  display: flex;
  gap: var(--space-3);
}

.footer-social-links a {
  width: 36px;
  height: 36px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-meta);
  transition: all var(--transition-fast);
  text-decoration: none;
}

.footer-social-links a:hover {
  background: var(--color-accent);
  color: var(--color-white);
  text-decoration: none;
}

.footer-social-links svg {
  width: 16px;
  height: 16px;
}

/* Footer widget columns */
.footer-column-title {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-links a {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-meta);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

/* Widget area in footer */
#footer-popular-articles .popular-post-item {
  background: none;
}

/* Footer bottom bar */
.footer-bottom {
  border-top: var(--border-width) solid var(--color-border);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer-copyright {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
}

.footer-bottom-links {
  display: flex;
  gap: var(--space-4);
}

.footer-bottom-links a {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: var(--color-accent);
}


/* ==========================================================================
   19. PAGE TEMPLATE (STATIC PAGES)
   ========================================================================== */

.page-content {
  max-width: var(--content-width);
  margin: 0 auto;
}

.page-hero {
  padding: var(--space-10) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  margin-bottom: var(--space-10);
}

.page-hero-title {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  margin-bottom: var(--space-4);
}

.page-hero-subtitle {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-meta);
  line-height: var(--lh-loose);
}


/* ==========================================================================
   20. VIDEO CPT TEMPLATE
   ========================================================================== */

/* Responsive video embed container (16:9 ratio) */
.video-embed-wrap {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #000;
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-lg);
}

.video-embed-wrap iframe,
.video-embed-wrap video,
.video-embed-wrap embed,
.video-embed-wrap object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-source-credit {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--color-meta);
  text-align: right;
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
}


/* ==========================================================================
   21. BIBLE STUDY CPT TEMPLATE
   Structured sections: Passage → Commentary → Application
   ========================================================================== */

/* Each structured section of a Bible Study post */
.bible-study-section {
  margin-bottom: var(--space-10);
}

/* Section header with a decorative left-border in accent gold */
.bible-study-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, rgba(139, 105, 20, 0.08) 0%, transparent 100%);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: var(--space-6);
}

.bible-study-section-number {
  width: 32px;
  height: 32px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  flex-shrink: 0;
}

.bible-study-section-title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}

/* Passage reference display */
.passage-reference {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(139, 105, 20, 0.08);
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

/* Application key points list */
.application-points {
  list-style: none;
  padding: 0;
  margin: var(--space-6) 0;
}

.application-points li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: var(--border-width) solid var(--color-border);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
}

.application-points li:last-child {
  border-bottom: none;
}

.application-points li::before {
  content: '✓';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: 2px;
}


/* ==========================================================================
   22. COMMENTARY CPT TEMPLATE
   ========================================================================== */

/* Meta box showing book/chapter/verse */
.commentary-reference-box {
  background: var(--color-sidebar-bg);
  border: var(--border-width) solid var(--color-border);
  border-top: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.commentary-ref-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.commentary-ref-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-meta);
}

.commentary-ref-value {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}


/* ==========================================================================
   23. 404 PAGE
   ========================================================================== */

.error-404-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-20) 0;
  text-align: center;
}

.error-404-icon {
  font-size: 4rem;
  margin-bottom: var(--space-6);
  display: block;
  animation: gentle-sway 3s ease-in-out infinite;
}

@keyframes gentle-sway {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}

.error-404-title {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  margin-bottom: var(--space-4);
  color: var(--color-text);
}

.error-404-subtitle {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-6);
}

.error-404-message {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--color-meta);
  margin-bottom: var(--space-8);
}

.error-404-verse {
  border-top: var(--border-width) solid var(--color-border);
  border-bottom: var(--border-width) solid var(--color-border);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
}

.error-404-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

/* Primary button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* 404 inline search */
.error-404-search {
  width: 100%;
  max-width: 400px;
}

.error-404-search-form {
  display: flex;
  gap: var(--space-2);
}

.error-404-search-form input[type="search"] {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  background: var(--color-white);
  color: var(--color-text);
}

.error-404-search-form input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(139, 105, 20, 0.12);
}

.error-404-search-form button {
  padding: var(--space-3) var(--space-5);
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.error-404-search-form button:hover {
  background: var(--color-accent-dark);
}


/* ==========================================================================
   24. UTILITY CLASSES
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-accent { color: var(--color-accent); }
.text-meta   { color: var(--color-meta); }

.mt-auto { margin-top: auto; }

.no-results {
  text-align: center;
  padding: var(--space-16) 0;
}

.no-results h2 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-4);
}

.no-results p {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  color: var(--color-meta);
  line-height: var(--lh-loose);
  margin-bottom: var(--space-6);
}

/* Loading placeholder skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-sidebar-bg) 50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Devotional date badge */
.devotional-date-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
  font-family: var(--font-sans);
}

.devotional-date-month {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.devotional-date-day {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
}

.devotional-date-year {
  font-size: var(--fs-xs);
  opacity: 0.8;
}

/* Clearfix for floated images */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}


/* ==========================================================================
   25. RESPONSIVE BREAKPOINTS
   Mobile-first: styles above are the default (mobile).
   We progressively enhance for larger screens.
   ========================================================================== */

/* --- Tablet: 640px and up --- */
@media (min-width: 640px) {
  .post-grid.grid-2col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Desktop: 768px and up --- */
@media (min-width: 768px) {
  .related-articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Large Desktop: 1024px and up --- */
@media (min-width: 1024px) {
  /* Show desktop navigation, hide hamburger */
  .primary-nav { display: flex; }
  .hamburger-btn { display: none; }

  .related-articles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Below 1024px: Mobile / Tablet --- */
@media (max-width: 1023px) {
  /* Hide desktop nav, show hamburger */
  .primary-nav { display: none; }
  .hamburger-btn {
    display: flex;
  }

  /* Stack layout to single column — sidebar goes below content */
  .content-sidebar-wrap {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  /* Footer grid: 2 columns on tablet */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* --- Below 768px: Mobile --- */
@media (max-width: 767px) {
  :root {
    --header-height: 56px;
  }

  .site-container {
    padding: 0 var(--space-4);
  }

  .entry-title {
    font-size: var(--fs-2xl);
  }

  .related-articles-grid {
    grid-template-columns: 1fr;
  }

  .commentary-navigation {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* TTS player stacks on mobile */
  .tts-player {
    flex-wrap: wrap;
  }

  .tts-controls {
    width: 100%;
    justify-content: flex-end;
  }

  .social-share-buttons {
    gap: var(--space-2);
  }

  .share-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-xs);
  }

  /* Commentary reference box stacks */
  .commentary-reference-box {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* --- Below 480px: Small Mobile --- */
@media (max-width: 479px) {
  .entry-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .post-card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* --- Print Styles --- */
@media print {
  .site-header,
  .sidebar,
  .social-share,
  .tts-player,
  .related-articles,
  .site-footer,
  .hamburger-btn,
  .mobile-nav {
    display: none !important;
  }

  #page {
    padding-top: 0;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .entry-content {
    font-size: 12pt;
    line-height: 1.6;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .scripture-quote {
    border-left: 3pt solid #8B6914;
    padding-left: 12pt;
  }
}