/*
Theme Name: Wigmorean Theme (Abbreviates as Wig Theme)
Description: Premium scholarly theme for the Wigmorean Platform — education, community management, commerce, and institutional websites. Features dark mode, dropdown navigation, multiple blog layouts, breadcrumbs, SEO schema, performance optimisations, WordPress Customizer integration, LearnDash, LifterLMS, Tutor LMS, MemberPress, PMPro, WP Job Manager, events and community sidebars.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 8.1
Author: Kọ́lá Abímbọ́lá
Author URI: https://wigmorean.com
Theme URI: https://wigmorean.com
Text Domain: wigmorean-theme
Tags: custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, one-column, two-columns, threaded-comments, translation-ready, wide-blocks, e-commerce, education
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  /* Color — overridden by Customizer */
  --ink:         #0f1117;
  --ink-soft:    #3a3d47;
  --ink-muted:   #6b6f7a;
  --rule:        #e2e4e9;
  --surface:     #f8f8f6;
  --canvas:      #ffffff;
  --gold:        #b8962e;
  --gold-light:  #d4b057;
  --gold-dim:    #f0e8d0;
  --crimson:     #8B1A1A;

  /* Typography */
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* Space */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-6: 1.5rem;    --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;     --sp-16: 4rem;
  --sp-20: 5rem;    --sp-24: 6rem;

  /* Layout */
  --container:  1180px;
  --content:    740px;
  --narrow:     600px;
  --radius:     3px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-full: 9999px;

  /* Motion */
  --ease:       cubic-bezier(0.25, 0, 0.15, 1);
  --duration:   220ms;
  --duration-lg: 350ms;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */
body.dark {
  --ink:        #e8e8ec;
  --ink-soft:   #b0b3bb;
  --ink-muted:  #8a8d96;
  --rule:       #2a2d35;
  --surface:    #1a1c24;
  --canvas:     #111318;
  --gold-dim:   #2a2518;
}
body.dark img:not([src*=".svg"]) { filter: brightness(0.92); }
body.dark .site-header { border-bottom-color: var(--rule); box-shadow: 0 1px 0 var(--rule); }

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-lg) var(--ease), color var(--duration-lg) var(--ease);
}
body.menu-open,
body.search-open { overflow: hidden; }

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

a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color var(--duration) var(--ease); }
a:hover { color: var(--gold-light); }

::selection { background: var(--gold-dim); color: var(--ink); }

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.skip-link {
  position: absolute; top: -100%; left: var(--sp-4);
  background: var(--ink); color: var(--canvas);
  padding: var(--sp-2) var(--sp-4); font-size: var(--text-sm);
  font-family: var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase;
  text-decoration: none; border-radius: 0 0 var(--radius) var(--radius);
  z-index: 9999; transition: top var(--duration) var(--ease);
}
.skip-link:focus { top: 0; }

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

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container       { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.content-container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--sp-6); }
.narrow-reading  { max-width: var(--narrow); }

/* Sidebar layout */
.layout-with-sidebar {
  display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-12); align-items: start;
}
.layout-with-sidebar.sidebar-left { grid-template-columns: 300px 1fr; }
@media (max-width: 900px) {
  .layout-with-sidebar, .layout-with-sidebar.sidebar-left { grid-template-columns: 1fr; }
  .sidebar { border-top: 1px solid var(--rule); padding-top: var(--sp-8); }
}

/* Single post content wrap */
.single-content-wrap { display: block; }
.single-content-wrap.has-sidebar {
  display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-12); align-items: start;
}
.single-content-wrap.has-sidebar.sidebar-left { grid-template-columns: 300px 1fr; }
@media (max-width: 900px) {
  .single-content-wrap.has-sidebar,
  .single-content-wrap.has-sidebar.sidebar-left { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--canvas); border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-lg) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration-lg) var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.site-header.header-hidden { transform: translateY(-100%); }

/* Transparent header on front page */
.header-transparent .site-header {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
.header-transparent .site-header.is-scrolled {
  background: var(--canvas); border-bottom-color: var(--rule); box-shadow: var(--shadow-md);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); padding-block: var(--sp-2);
}

/* Brand accent — 3px terracotta hairline above the header */
.brand-accent {
  height: 3px;
  background: var(--crimson);
  width: 100%;
}

/* Page title rendered inline (replaces .page-hero block) */
.entry-page-header {
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.entry-page-header .entry-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

/* Centered header layout */
.header--centered .header-inner { flex-direction: column; gap: var(--sp-2); }
.header--centered .header-centered-top { padding-block: var(--sp-3) 0; }
.header--centered .header-centered-nav { display: flex; align-items: center; gap: var(--sp-6); padding-bottom: var(--sp-2); }

/* ── Logo / Site Title ──────────────────────── */
.site-branding { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.site-title { font-family: var(--font-serif); font-size: var(--text-xl); font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; }
.site-title a { color: var(--ink); text-decoration: none; transition: color var(--duration) var(--ease); }
.site-title a:hover { color: var(--gold); }
.site-tagline { font-size: var(--text-xs); color: var(--ink-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.custom-logo { height: 36px; width: auto; }

/* ── Nav ────────────────────────────────────── */
.site-nav { display: flex; align-items: center; }
.site-menu { list-style: none; display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.site-menu a {
  display: inline-flex; align-items: center; gap: 4px;
  padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; border-radius: var(--radius);
  transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.site-menu a:hover,
.site-menu .current-menu-item > a,
.site-menu .current-page-ancestor > a { color: var(--gold); background: var(--gold-dim); }

.dropdown-chevron { transition: transform var(--duration) var(--ease); flex-shrink: 0; }
.dropdown-open > a .dropdown-chevron { transform: rotate(180deg); }

/* ── Dropdown menus ─────────────────────────── */
.sub-menu.dropdown-panel {
  position: absolute; top: 100%; left: 0;
  min-width: 220px; background: var(--canvas);
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-2);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease), visibility var(--duration);
  z-index: 200;
}
.dropdown-open > .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu .sub-menu { left: 100%; top: -4px; }

.menu-item-has-children { position: relative; }
.sub-menu a {
  display: block; padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm);
  text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-soft);
  border-radius: var(--radius); white-space: nowrap;
}
.sub-menu a:hover { background: var(--gold-dim); color: var(--gold); }

/* Mega menu */
.menu-item-mega > .dropdown-panel {
  left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 600px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); padding: var(--sp-6);
  opacity: 0; visibility: hidden;
}
.menu-item-mega.dropdown-open > .dropdown-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}

/* ── Header actions (search, dark mode) ─────── */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  cursor: pointer; transition: all var(--duration) var(--ease);
}
.header-icon:hover { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-dim); }

/* Dark mode toggle icons */
.dark .icon-sun { display: inline; }
.dark .icon-moon { display: none; }
body:not(.dark) .icon-sun { display: none; }
body:not(.dark) .icon-moon { display: inline; }

/* Login / Logout pill */
.menu-item-login a, .menu-item-logout a {
  background: var(--ink); color: var(--canvas) !important;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full); margin-left: var(--sp-2);
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.menu-item-login a:hover, .menu-item-logout a:hover { background: var(--gold); transform: translateY(-1px); }

/* Header CTA button */
.header-cta-btn {
  background: var(--gold) !important; color: #fff !important;
  padding: var(--sp-2) var(--sp-4) !important; border-radius: var(--radius-full) !important;
  font-weight: 700 !important; text-transform: uppercase !important;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease) !important;
}
.header-cta-btn:hover { background: var(--gold-light) !important; transform: translateY(-1px); }

/* ── Hamburger ──────────────────────────────── */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 8px; cursor: pointer; z-index: 102;
}
.hamburger { display: flex; flex-direction: column; gap: 4px; width: 20px; }
.hamburger span { display: block; height: 2px; background: var(--ink); border-radius: 1px; transition: all var(--duration) var(--ease); }

@media (max-width: 1024px) {
  .nav-toggle { display: flex; align-items: center; justify-content: center; }
  .site-nav:not(.site-nav--offcanvas) {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--canvas); border-bottom: 1px solid var(--rule);
    padding: var(--sp-4) var(--sp-6); display: none;
    box-shadow: var(--shadow-lg);
  }
  .site-nav:not(.site-nav--offcanvas).is-open { display: block; }
  .site-menu { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .site-menu a { font-size: var(--text-base); }
  .sub-menu.dropdown-panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--sp-4); min-width: auto; }
}

/* ── Off-canvas nav (minimal layout) ──────── */
.site-nav--offcanvas {
  position: fixed; top: 0; right: -320px; width: 320px; height: 100vh;
  background: var(--canvas); z-index: 1000; padding: var(--sp-6);
  overflow-y: auto; transition: right var(--duration-lg) var(--ease);
  box-shadow: var(--shadow-xl);
}
.site-nav--offcanvas.is-open { right: 0; }
.offcanvas-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.offcanvas-title { font-weight: 700; font-size: var(--text-lg); text-transform: uppercase; letter-spacing: 0.08em; }
.offcanvas-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--ink-muted); padding: var(--sp-2); }
.offcanvas-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 999; opacity: 0; visibility: hidden;
  transition: opacity var(--duration-lg) var(--ease), visibility var(--duration-lg);
}
.offcanvas-overlay.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   SEARCH OVERLAY
   ========================================================================== */
.search-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.88); z-index: 1000; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 20vh; opacity: 0; visibility: hidden;
  transition: opacity var(--duration-lg) var(--ease), visibility var(--duration-lg);
}
.search-overlay.is-open { opacity: 1; visibility: visible; }

.search-overlay-form { display: flex; align-items: center; gap: var(--sp-4); max-width: 640px; width: 100%; }
.search-overlay-input {
  flex: 1; background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.3);
  color: #fff; font-family: var(--font-serif); font-size: var(--text-3xl);
  padding: var(--sp-4) 0; outline: none;
  transition: border-color var(--duration) var(--ease);
}
.search-overlay-input::placeholder { color: rgba(255,255,255,0.4); }
.search-overlay-input:focus { border-color: var(--gold); }
.search-overlay-close {
  background: none; border: none; color: rgba(255,255,255,0.6);
  font-size: 32px; cursor: pointer; transition: color var(--duration);
}
.search-overlay-close:hover { color: #fff; }

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumb-bar { background: transparent; border-bottom: 1px solid var(--rule); padding-block: var(--sp-2); }
.bc-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font-size: var(--text-sm); }
.bc-item { display: inline; }
.bc-item a { color: var(--ink-muted); text-decoration: none; }
.bc-item a:hover { color: var(--gold); }
.bc-item [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }
.bc-sep { padding-inline: var(--sp-2); color: var(--rule); }

/* ==========================================================================
   MAIN CONTENT
   ========================================================================== */
#main-content { outline: none; }
.site-main { padding-block: var(--sp-12); min-height: 60vh; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
.entry-title, h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 600; line-height: 1.25; color: var(--ink); }
h1 { font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl)); }
h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-3xl)); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-sans); }

.entry-content h2, .entry-content h3, .entry-content h4 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.entry-content p, .entry-content ul, .entry-content ol, .entry-content blockquote, .entry-content table, .entry-content pre { margin-bottom: var(--sp-6); }
.entry-content ul, .entry-content ol { padding-left: var(--sp-6); }
.entry-content li { margin-bottom: var(--sp-2); }

.entry-content blockquote {
  border-left: 4px solid var(--gold); padding: var(--sp-6); margin-inline: 0;
  background: var(--surface); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-serif); font-size: var(--text-lg); font-style: italic; color: var(--ink-soft);
}
.entry-content blockquote cite { display: block; margin-top: var(--sp-3); font-size: var(--text-sm); font-style: normal; font-family: var(--font-sans); color: var(--ink-muted); }
.entry-content blockquote p:last-child { margin-bottom: 0; }

.entry-content pre {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-6); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6;
}
.entry-content code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface); padding: 2px 6px; border-radius: var(--radius); }
.entry-content pre code { background: none; padding: 0; }

.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); text-align: left; font-size: var(--text-sm); }
.entry-content th { font-weight: 700; background: var(--surface); }
.entry-content tr:hover td { background: var(--surface); }

/* Gutenberg wide/full alignment */
.entry-content .alignwide  { width: calc(100% + var(--sp-12)); max-width: none; margin-inline: calc(-1 * var(--sp-6)); }
.entry-content .alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content .has-text-align-center { text-align: center; }

.entry-meta { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: var(--sp-3); }
.entry-meta a { color: var(--ink-muted); font-weight: 400; }
.entry-meta a:hover { color: var(--gold); }
.entry-meta .separator { color: var(--rule); padding-inline: 2px; }

.entry-title { margin-bottom: var(--sp-3); }
.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: var(--gold); }

.entry-excerpt { color: var(--ink-soft); margin-bottom: var(--sp-4); }

.read-more {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); text-decoration: none; transition: gap var(--duration) var(--ease);
}
.read-more::after { content: '→'; transition: transform var(--duration) var(--ease); }
.read-more:hover { color: var(--gold-light); }
.read-more:hover::after { transform: translateX(4px); }

.read-time { white-space: nowrap; }

/* ==========================================================================
   BLOG LAYOUTS
   ========================================================================== */

/* Grid */
.posts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-8);
}
.blog-cols-3 .posts-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .posts-grid, .blog-cols-3 .posts-grid { grid-template-columns: 1fr; }
}

/* Post card */
.post-card {
  background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius-xl);
  overflow: hidden; transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card .post-thumbnail { display: block; overflow: hidden; aspect-ratio: 16/9; }
.post-card .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.post-card:hover .post-thumbnail img { transform: scale(1.04); }
.post-card-body { padding: var(--sp-6); }
.post-card-body .entry-title { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.post-card-footer { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule); }
.post-card-cat { margin-bottom: var(--sp-2); }

.cat-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold);
  background: var(--gold-dim); padding: 2px 8px; border-radius: var(--radius-full);
  text-decoration: none; transition: background var(--duration), color var(--duration);
}
.cat-badge:hover { background: var(--gold); color: #fff; }

/* List layout */
.posts-list { display: flex; flex-direction: column; gap: var(--sp-8); }
.post-list-item {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-6); align-items: start;
  padding-bottom: var(--sp-8); border-bottom: 1px solid var(--rule);
}
.post-list-item:last-child { border-bottom: none; }
.post-list-thumb { border-radius: var(--radius-lg); overflow: hidden; }
.post-list-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.post-list-body .entry-title { font-size: var(--text-xl); }
@media (max-width: 600px) {
  .post-list-item { grid-template-columns: 1fr; }
  .post-list-thumb { max-width: 200px; }
}

/* Minimal layout */
.posts-minimal { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Archive header */
.archive-header { margin-bottom: var(--sp-6); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--rule); }
.archive-eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: var(--sp-2); }
.archive-title { margin-bottom: var(--sp-2); font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; }
.archive-desc { color: var(--ink-soft); font-size: var(--text-base); }

/* ==========================================================================
   SINGLE POST
   ========================================================================== */
.single-hero { background: var(--surface); border-bottom: 1px solid var(--rule); padding: var(--sp-12) 0 var(--sp-8); }
.single-hero-inner { max-width: var(--content); }
.single-cats { margin-bottom: var(--sp-4); display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.single-hero .entry-title { margin-bottom: var(--sp-6); }
.single-hero .entry-meta { display: flex; align-items: center; gap: var(--sp-3); }
.meta-author { display: flex; align-items: center; gap: var(--sp-3); }
.meta-avatar { border-radius: var(--radius-full); }
.meta-name a { color: var(--ink); font-weight: 600; text-decoration: none; }
.meta-name a:hover { color: var(--gold); }
.meta-details { display: block; font-size: var(--text-sm); color: var(--ink-muted); }

.single-featured { margin-bottom: var(--sp-8); }
.single-featured img { border-radius: var(--radius-xl); width: 100%; }

.entry-footer { margin-top: var(--sp-8); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
.tag-list a {
  display: inline-block; font-size: var(--text-sm); color: var(--ink-muted);
  background: var(--surface); padding: 2px 10px; border-radius: var(--radius-full);
  text-decoration: none; margin: 2px; transition: background var(--duration), color var(--duration);
}
.tag-list a:hover { background: var(--gold-dim); color: var(--gold); }

/* Post navigation */
.post-navigation { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--rule); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.post-navigation a { text-decoration: none; color: var(--ink); }
.post-navigation .nav-label { display: block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-1); }
.post-navigation .nav-title { font-family: var(--font-serif); font-size: var(--text-lg); line-height: 1.35; transition: color var(--duration); }
.post-navigation a:hover .nav-title { color: var(--gold); }
@media (max-width: 600px) { .post-navigation .nav-links { grid-template-columns: 1fr; } }

/* ==========================================================================
   AUTHOR BOX
   ========================================================================== */
.author-box {
  display: flex; gap: var(--sp-6); padding: var(--sp-8); margin-top: var(--sp-12);
  background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--rule);
}
.author-avatar-img { border-radius: var(--radius-full); width: 80px; height: 80px; }
.author-name { font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.author-name a { color: var(--ink); text-decoration: none; }
.author-name a:hover { color: var(--gold); }
.author-bio { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; margin-bottom: var(--sp-3); }
.author-link { font-size: var(--text-sm); font-weight: 600; color: var(--gold); text-decoration: none; }
@media (max-width: 600px) { .author-box { flex-direction: column; align-items: center; text-align: center; } }

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */
.related-posts { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--rule); }
.related-title { font-size: var(--text-2xl); margin-bottom: var(--sp-6); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.related-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); transition: box-shadow var(--duration), transform var(--duration); }
.related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.related-body { padding: var(--sp-4); }
.related-body h4 { font-size: var(--text-base); margin-top: var(--sp-2); }
.related-body h4 a { color: var(--ink); text-decoration: none; }
.related-body h4 a:hover { color: var(--gold); }
@media (max-width: 768px) { .related-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   SHARE BUTTONS
   ========================================================================== */
.share-buttons {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-8);
  padding-top: var(--sp-6); border-top: 1px solid var(--rule);
}
.share-label { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid var(--rule); background: var(--canvas); color: var(--ink-muted);
  text-decoration: none; cursor: pointer; transition: all var(--duration) var(--ease);
}
.share-btn:hover { background: var(--gold-dim); color: var(--gold); border-color: var(--gold-dim); }
.share-copy.copied { background: var(--gold); color: #fff; border-color: var(--gold); }

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */
.toc-container {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: var(--sp-6); margin-bottom: var(--sp-8);
}
.toc-heading { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-4); }
.toc-list { list-style: none; }
.toc-item { margin-bottom: var(--sp-1); }
.toc-item a { color: var(--ink-soft); text-decoration: none; font-size: var(--text-sm); padding: var(--sp-1) var(--sp-3); display: block; border-left: 2px solid transparent; transition: all var(--duration); }
.toc-item a:hover, .toc-item a.is-active { color: var(--gold); border-left-color: var(--gold); background: var(--gold-dim); }
.toc-h3 a { padding-left: var(--sp-6); }

/* ==========================================================================
   PAGE HERO  (Deprecated — kept for back-compat with custom templates)
   The default page.php no longer wraps page titles in this block. The class
   is retained so any third-party shortcode or block referencing it still
   renders, but without the giant banner treatment.
   ========================================================================== */
.page-hero { background: transparent; border-bottom: 0; padding-block: 0 var(--sp-4); }
.page-hero h1 { margin-bottom: var(--sp-2); font-family: var(--font-serif); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; }
.page-hero .eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--crimson); margin-bottom: var(--sp-2); }
.page-hero .lead { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--ink-soft); max-width: 55ch; }

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.error-404-page { text-align: center; padding: var(--sp-20) 0; }
.error-404-code { font-family: var(--font-serif); font-size: 8rem; font-weight: 700; color: var(--gold-dim); line-height: 1; display: block; margin-bottom: var(--sp-4); }
.error-404-desc { color: var(--ink-soft); font-size: var(--text-lg); max-width: 40ch; margin-inline: auto; margin-top: var(--sp-4); }
.error-404-actions { margin-top: var(--sp-8); }
.error-404-search { margin-top: var(--sp-8); max-width: 400px; margin-inline: auto; }

/* ==========================================================================
   SIDEBAR
   ========================================================================== */
.sidebar .widget { margin-bottom: var(--sp-8); padding-bottom: var(--sp-8); border-bottom: 1px solid var(--rule); }
.sidebar .widget:last-child { border-bottom: none; }
.sidebar .widget-title {
  font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 2px solid var(--gold); display: inline-block;
}
.sidebar ul { list-style: none; }
.sidebar ul li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule); font-size: var(--text-sm); }
.sidebar ul li:last-child { border-bottom: none; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination { display: flex; justify-content: center; gap: var(--sp-2); padding-top: var(--sp-12); }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: var(--sp-3);
  border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); text-decoration: none;
  transition: border-color var(--duration), color var(--duration), background var(--duration);
}
.pagination .page-numbers:hover { border-color: var(--gold); color: var(--gold); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--canvas); }

/* ==========================================================================
   FORMS & BUTTONS
   ========================================================================== */
input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], textarea, select {
  width: 100%; background: var(--canvas); border: 1px solid var(--rule); border-radius: var(--radius);
  color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base);
  padding: var(--sp-3) var(--sp-4);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(184,150,46,0.15); }
label { display: block; font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; margin-bottom: var(--sp-2); }
.form-row { margin-bottom: var(--sp-4); }

button, input[type="submit"], .button, .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--ink); color: var(--canvas); border: none; border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-6); font-family: var(--font-sans); font-size: var(--text-sm);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; text-decoration: none;
  transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
button:hover, input[type="submit"]:hover, .button:hover { background: var(--gold); transform: translateY(-1px); }
.button-outline { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.button-outline:hover { background: var(--ink); color: var(--canvas); }
.button-gold { background: var(--gold); }
.button-gold:hover { background: var(--gold-light); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.6); margin-top: var(--sp-24); }
body.dark .site-footer { background: #0a0c10; }

.footer-widgets-area { padding-block: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-widgets { display: grid; gap: var(--sp-8); }
.footer-cols-2 { grid-template-columns: repeat(2, 1fr); }
.footer-cols-3 { grid-template-columns: repeat(3, 1fr); }
.footer-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) { .footer-widgets { grid-template-columns: 1fr !important; } }

.footer-widgets .widget-title { color: #fff; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: var(--sp-4); }
.footer-widgets a { color: rgba(255,255,255,0.55); text-decoration: none; }
.footer-widgets a:hover { color: var(--gold-light); }
.footer-widgets ul { list-style: none; }
.footer-widgets ul li { padding: var(--sp-1) 0; font-size: var(--text-sm); }

.footer-bottom-area { padding-block: var(--sp-6); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.footer-copyright .copyright { font-size: var(--text-sm); color: rgba(255,255,255,0.4); }
.footer-copyright strong { color: rgba(255,255,255,0.7); font-weight: 600; font-family: var(--font-serif); font-size: var(--text-base); }
.footer-rule { width: 2rem; height: 2px; background: var(--gold); display: block; margin-bottom: var(--sp-2); }
.footer-no-widgets .footer-bottom-area { padding-block: var(--sp-8); }

/* Footer social */
.footer-social { display: flex; gap: var(--sp-3); }
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.5);
  transition: all var(--duration);
}
.social-link:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Footer nav */
.footer-nav .site-menu a { color: rgba(255,255,255,0.5); text-transform: none; font-weight: 400; }
.footer-nav .site-menu a:hover { color: var(--gold-light); background: transparent; }

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.back-to-top {
  position: fixed; bottom: var(--sp-8); right: var(--sp-8);
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--ink); color: var(--canvas); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: all var(--duration-lg) var(--ease);
  box-shadow: var(--shadow-md);
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); transform: translateY(-2px); }

/* ==========================================================================
   SEARCH FORM
   ========================================================================== */
.search-form { display: flex; gap: var(--sp-2); }
.search-form .search-field { flex: 1; }
.search-form .search-submit { flex-shrink: 0; }

/* ==========================================================================
   COMMENTS
   ========================================================================== */
.comments-area { margin-top: var(--sp-12); padding-top: var(--sp-8); border-top: 1px solid var(--rule); }
.comments-title { font-family: var(--font-serif); font-size: var(--text-2xl); margin-bottom: var(--sp-8); }
.comment-body { padding: var(--sp-6); background: var(--surface); border-radius: var(--radius-lg); margin-bottom: var(--sp-4); }

/* ==========================================================================
   UTILITY
   ========================================================================== */
.text-muted { color: var(--ink-muted); }
.text-serif { font-family: var(--font-serif); }
.text-gold  { color: var(--gold); }
.eyebrow { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.no-results { text-align: center; padding: var(--sp-16) 0; }
.no-results h2 { margin-bottom: var(--sp-4); }
.no-results p { color: var(--ink-soft); margin-bottom: var(--sp-6); }

/* Thumbnail */
.post-thumbnail { display: block; margin-bottom: var(--sp-6); border-radius: var(--radius-lg); overflow: hidden; }
.post-thumbnail img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 500ms var(--ease); }
.post-thumbnail:hover img { transform: scale(1.02); }

/* Single post header (fallback from old theme) */
.single-header { padding-bottom: var(--sp-8); margin-bottom: var(--sp-8); border-bottom: 1px solid var(--rule); }

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
  .site-header, .site-footer, .sidebar, .nav-toggle, .skip-link, .back-to-top,
  .breadcrumb-bar, .share-buttons, .related-posts, .search-overlay { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  a { color: #000; text-decoration: underline; }
  .container, .content-container { padding: 0; max-width: 100%; }
}

/* ==========================================================================
   FRONT PAGE — flush hero (removes the doubled top padding / wasted bands)
   Added 2026-05-31. Sub-pages keep .breadcrumb-bar as their thin top banner.
   ========================================================================== */
body.home .site-main { padding-top: 0; }
body.home .site-main > .container { padding-top: 0; }
body.home .entry-page-header { display: none; }

/* ==========================================================================
   MOBILE OVERFLOW SAFEGUARD — universal
   Added 2026-06-01. Platform-wide guarantee that no element ever pushes a
   Wigmorean page wider than the viewport, and that any wide element (tables,
   embeds, long strings) stays reachable on small screens rather than being
   clipped off the right edge (e.g. a cart "Total" column). Markup-agnostic:
   does not depend on which plugin rendered the content.
   ========================================================================== */

/* Page-level guard. overflow-x:clip (NOT hidden) so the sticky .site-header
   and scroll-behavior:smooth keep working. */
html, body { overflow-x: clip; }

/* Embedded / media never exceed their container. */
.site-main img,
.site-main video,
.site-main iframe,
.site-main embed,
.site-main object,
.site-main canvas { max-width: 100%; }
.site-main iframe { width: 100%; }

/* Long unbreakable strings (URLs, IDs, slugs) wrap instead of forcing width. */
.site-main { overflow-wrap: break-word; }

/* Any wide table becomes self-scrolling on narrow screens so no column is ever
   lost off-screen. Catches the Wigmorean Commerce cart, LMS gradebooks,
   pricing tables, content tables — whatever the source. */
@media (max-width: 768px) {
  .site-main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .site-main table::-webkit-scrollbar { height: 6px; }
  .site-main table::-webkit-scrollbar-thumb {
    background: var(--rule);
    border-radius: var(--radius-full);
  }
}

/* ── Entry-title logo swap (auth portal pages) ─────────────────────────
   When page.php replaces the visible H1 with the site logo, the title
   remains in the DOM for assistive tech via .screen-reader-text. The
   logo auto-sizes: capped height, natural width, never overflowing. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.entry-page-header--logo {
  text-align: center;
}

.wig-entry-logo {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 84px;
  max-width: min(320px, 70vw);
  object-fit: contain;
}