/* =============================================
   Default Theme (v1)
   ============================================= */

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

:root {
  --red:         #e8192c;
  --red-dark:    #bf0f1f;
  --black:       #111111;
  --charcoal:    #1a1a1a;
  --ink:         #2d2d2d;
  --mid:         #555555;
  --muted:       #888888;
  --subtle:      #bbbbbb;
  --border:      #e8e8e8;
  --border-mid:  #d4d4d4;
  --bg:          #f4f3f0;
  --bg-card:     #ffffff;
  --white:       #ffffff;
  --max-w:       1280px;
  --font-head:   'Barlow Condensed', sans-serif;
  --font-ui:     'Space Grotesk', sans-serif;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:   0 8px 28px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --transition:  .2s cubic-bezier(.4,0,.2,1);
  --transition-bounce: .25s cubic-bezier(.34,1.56,.64,1);
}

html { scroll-behavior: smooth; }

/* ---------- Reading Progress Bar ---------- */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background: var(--red);
  z-index: 9999;
  transition: width .08s linear;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(232,25,44,.6), 0 0 4px rgba(232,25,44,.4);
  pointer-events: none;
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

/* Prevent hover color bleeding on structural/wrapper anchors */
.post-row-image,
.post-row-image:hover,
.related-card a,
.related-card a:hover { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- Top Bar ---------- */
.top-bar {
  background: var(--black);
  padding: 8px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #EEE;
  letter-spacing: .05em;
}
.top-bar .top-bar-right {
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  font-size: 10.5px;
}
/* Top bar social icons — render_social_icons('topbar'), left of the tagline */
.top-bar .top-bar-right { display: flex; align-items: center; gap: 14px; }
.top-bar-social { display: inline-flex; align-items: center; gap: 6px; }
.top-bar-social-link { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #EEE; transition: color var(--transition), background var(--transition), transform var(--transition); }
.top-bar-social-link:hover { color: var(--white); background: rgba(255,255,255,.12); transform: translateY(-1px); }
.top-bar-social-link svg { width: 14px; height: 14px; display: block; }
.top-bar a { transition: color var(--transition); }
.top-bar a:hover { color: var(--white); }
.top-bar .top-bar-right a:hover { color: #ff4d5e; }

/* ---------- Site Header ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  position: relative;
  top: 0;
  z-index: 100;
}
body.has-sticky-header .site-header {
  position: sticky;
  top: 0;
}

.site-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  position: relative;
}

/* Logo — image version */
.site-logo { display: flex; align-items: center; height: 48px; }
.site-logo img {
  height: 48px;
  width: auto;
  display: block;
}
/* Fallback text logo if no image */
.site-logo .logo-text {
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}
.site-logo .logo-text span { color: var(--red); }

/* ---------- Primary Nav ---------- */
.primary-nav { display: flex; align-items: center; gap: 2px; }

.primary-nav a,
.primary-nav button.nav-parent {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--black);
  padding: 8px 13px;
  border-radius: 4px;
  position: relative;
  transition: color var(--transition), background var(--transition);
}
.primary-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 13px; right: 13px;
  height: 2px;
  background: var(--red);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.primary-nav a:hover,
.primary-nav button.nav-parent:hover { color: var(--black); }
.primary-nav a:hover::after { transform: scaleX(1); }
.primary-nav a.active {
  background: var(--red);
  color: var(--white);
}
.primary-nav a.active::after { display: none; }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s;
}

/* ---------- Search Toggle Button ---------- */
.search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin-left: 6px;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
  flex-shrink: 0;
}
.search-toggle:hover,
.search-toggle.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ---------- Search Dropdown ---------- */
.search-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  width: 360px;
  z-index: 98;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.search-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-dropdown-form {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
}

.search-dropdown-input {
  flex: 1;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--black);
  background: var(--bg);
  outline: none;
  transition: border-color var(--transition);
  -webkit-appearance: none;
}
.search-dropdown-input:focus { border-color: var(--red); background: var(--white); }
.search-dropdown-input::placeholder { color: var(--subtle); }

.search-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  padding: 0 20px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
  flex-shrink: 0;
}
.search-dropdown-btn:hover { background: var(--red-dark); }

@media (max-width: 768px) {
  .search-dropdown {
    left: 0; right: 0; width: auto;
    border-left: none; border-right: none; border-radius: 0;
  }
  .search-dropdown-form { padding: 12px 16px; }
  .search-dropdown-btn { padding: 0 14px; }
}

/* ---------- Search Results Page ---------- */
.search-page-form { display: flex; gap: 10px; padding: 24px 0 8px; }
.search-page-input {
  flex: 1; height: 48px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-ui); font-size: 15px; color: var(--black);
  background: var(--white); outline: none; transition: border-color var(--transition);
  -webkit-appearance: none;
}
.search-page-input:focus { border-color: var(--red); }
.search-page-input::placeholder { color: var(--subtle); }
.search-page-btn {
  height: 48px; padding: 0 28px; background: var(--red); color: var(--white);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; border: none;
  border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: background var(--transition); flex-shrink: 0;
}
.search-page-btn:hover { background: var(--red-dark); }

/* ---------- Wrapper ---------- */
.wrapper { max-width: var(--max-w); margin: 0 auto; padding: 0; }

/* ---------- Homepage Hero Banner ---------- */
.site-hero {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 700px;
  background-color: var(--charcoal);
  overflow: hidden;
  isolation: isolate;
}
.site-hero--color { background: linear-gradient(135deg, #1a1a1a 0%, #2d1a1e 100%); }
.site-hero--video { background: var(--charcoal); }
.site-hero-video {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}

.site-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  transition: background .25s;
}

.site-hero-inner {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  z-index: 2; padding-bottom: 36px;
}
.site-hero-text-box { max-width: var(--max-w); margin: 0 auto; width: 100%; padding: 0 32px; }

.site-hero-custom-text {
  font-family: var(--font-ui); font-size: 32px; font-weight: 700;
  color: var(--white); line-height: 1.35; word-break: break-word;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.site-hero-rule { width: 40px; height: 3px; background: var(--red); border-radius: 2px; margin: 10px 0 0; }

a.site-hero { display: block; text-decoration: none; color: inherit; }
a.site-hero.site-hero--linked:hover .site-hero-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.25) 55%, transparent 100%);
}
a.site-hero.site-hero--linked { cursor: pointer; }

/* ---------- Index Section Bar ---------- */
.index-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 18px 24px; overflow: hidden; }
.index-hero .wrapper { display: flex; align-items: center; gap: 16px; }
.index-hero-accent { width: 5px; height: 36px; background: var(--red); border-radius: 3px; flex-shrink: 0; display: block; }
.index-hero-text { flex: 1; }
.index-hero-title {
  font-family: var(--font-head); font-size: clamp(22px, 3vw, 30px); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--black); line-height: 1;
}
.index-hero-sub { font-size: 11px; color: var(--subtle); margin-top: 3px; font-weight: 500; }
.index-hero-line { flex: 1; height: 1px; background: var(--border); }
.index-hero-back {
  font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em;
  transition: color var(--transition); white-space: nowrap;
}
.index-hero-back:hover { color: var(--red); }

/* ---------- Post Listing ---------- */
.post-listing { padding: 20px 0 16px; display: flex; flex-direction: column; gap: 14px; }

.post-row {
  display: grid; grid-template-columns: 300px 1fr; background: var(--bg-card);
  border-radius: 10px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
  will-change: transform;
}
.post-row:hover {
  box-shadow: 0 16px 40px rgba(0,0,0,.13), 0 4px 10px rgba(0,0,0,.07);
  transform: translateY(-4px); border-color: var(--border-mid);
}

.post-row-image { display: block; position: relative; overflow: hidden; height: 185px; background: #ddd; flex-shrink: 0; }
/* Absolutely positioned so neither the image nor the placeholder can feed back
   into the row's intrinsic height. The card_grid variant sets height:auto on
   this cell, which leaves it without a definite height — a percentage height on
   the child then becomes a cyclic dependency that WebKit and Blink resolve
   differently, blanking the text column on iPad.
   Longhand offsets rather than `inset`, which needs Safari 14.1+: this exists
   to fix an old-WebKit bug, so it must not depend on a newer feature.
   width/height are required too — offsets alone do not stretch a replaced
   element, an <img> would fall back to its intrinsic size. */
.post-row-image img,
.post-row-image-placeholder { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.post-row-image img { object-fit: cover; transition: transform .45s cubic-bezier(.4,0,.2,1); display: block; }
.post-row:hover .post-row-image img { transform: scale(1.05); }

.post-row-cat-strip {
  position: absolute; bottom: 0; left: 0; right: 0; background: var(--red);
  padding: 6px 14px; display: flex; align-items: center; pointer-events: none;
}
.post-row-cat-strip span { font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }

.post-row-image-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #e0e0e0; color: var(--subtle); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}

.post-row-content { padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border-left: 4px solid var(--bg); }
.post-row-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--subtle); }
.post-row-meta strong { color: var(--mid); font-weight: 600; }
.post-row-meta .meta-sep { width: 1px; height: 10px; background: var(--border-mid); flex-shrink: 0; }

.post-row-title {
  font-family: var(--font-head); font-size: clamp(19px, 2.2vw, 24px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--black); line-height: 1.15;
}
.post-row-title a { transition: color var(--transition); }
.post-row-title a:hover, .post-row:hover .post-row-title a { color: var(--red); }

.post-row-excerpt {
  font-size: 14px; color: var(--muted); line-height: 1.65; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.post-row-readmore {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--white); background: var(--black);
  padding: 7px 14px; border-radius: 4px; align-self: flex-start; margin-top: 2px;
  transition: background var(--transition), transform var(--transition-bounce), gap var(--transition);
  will-change: transform;
}
.post-row-readmore:hover, .post-row:hover .post-row-readmore { background: var(--red); color: var(--white); transform: scale(1.04); gap: 10px; }

.no-posts { font-size: 14px; color: var(--muted); padding: 80px 0; text-align: center; }

/* ---------- Post Listing — Multi Column Grid Variants ---------- */
.post-listing--grid_2col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 20px 0 16px; }
.post-listing--grid_2col .post-row { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.post-listing--grid_2col .post-row-image { height: 275px; }
.post-listing--grid_2col .post-row-content { border-left: none; border-top: 4px solid var(--bg); justify-content: flex-start; padding: 18px 22px 22px; }
.post-listing--grid_2col .post-row-readmore { margin-top: auto; }
.post-listing--grid_2col .post-row-title { font-size: clamp(17px, 1.8vw, 21px); }
.post-listing--grid_2col .post-row-excerpt { -webkit-line-clamp: 3; }

.post-listing--grid_3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 20px 0 16px; }
.post-listing--grid_3col .post-row { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.post-listing--grid_3col .post-row-image { height: 200px; }
.post-listing--grid_3col .post-row-content { border-left: none; border-top: 4px solid var(--bg); justify-content: flex-start; padding: 16px 18px 20px; }
.post-listing--grid_3col .post-row-readmore { margin-top: auto; }
.post-listing--grid_3col .post-row-title { font-size: clamp(15px, 1.5vw, 18px); }
.post-listing--grid_3col .post-row-excerpt { -webkit-line-clamp: 3; }

.post-listing--card_grid .post-row { grid-template-columns: 2fr 3fr; }
.post-listing--card_grid .post-row-image { height: auto; min-height: 275px; }

/* ---------- Pagination ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 32px 0 52px; flex-wrap: wrap; }
.page-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--white); border: 1px solid var(--border); padding: 8px 14px;
  border-radius: 6px; min-width: 38px; text-align: center;
  transition: all var(--transition), transform var(--transition-bounce); will-change: transform;
}
.page-btn:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,25,44,.15); }
.page-btn.active { background: var(--red); color: var(--white); border-color: var(--red); box-shadow: 0 2px 8px rgba(232,25,44,.3); pointer-events: none; }
.page-dots { color: var(--subtle); padding: 0 4px; font-size: 14px; }

/* ---------- Mobile Load More ---------- */
.load-more-wrap { display: none; text-align: center; padding: 24px 0 48px; }
.load-more-btn {
  font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--white);
  background: var(--red); border: none; padding: 14px 48px; border-radius: 6px;
  cursor: pointer; transition: all var(--transition);
}
.load-more-btn:hover { opacity: .9; }
.load-more-btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 768px) { .pagination { display: none; } .load-more-wrap { display: block; } }

/* ---------- In-Post Pagination ---------- */
.post-page-pagination { margin: 32px 0; padding: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; }
.post-page-count { font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.post-page-links { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; align-items: center; }
.post-page-links a {
  display: inline-block; padding: 10px 16px; border-radius: 6px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--ink);
  font-size: 14px; font-weight: 500; transition: all var(--transition), transform var(--transition-bounce);
}
.post-page-links a:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,25,44,.15); }
.post-page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border-radius: 6px; font-size: 14px; font-weight: 600; }
.post-page-num.active { background: var(--red); color: var(--white); border-color: var(--red); box-shadow: 0 2px 8px rgba(232,25,44,.3); padding: 0 10px; }

/* ---------- Article Hero Image ---------- */
.hero-wrap { background: var(--charcoal); position: relative; overflow: hidden; margin: 0; }
.hero-wrap img { width: 100%; max-height: 600px; object-fit: cover; opacity: .92; }
.hero-caption { position: absolute; bottom: 12px; right: 16px; font-size: 11px; color: rgba(255,255,255,.45); font-style: italic; letter-spacing: .04em; }

/* ---------- Article Page Layout ---------- */
.page-layout { padding: 40px 0 64px; }

/* ---------- Article Content Typography ---------- */
.article-title {
  font-family: var(--font-head); font-size: clamp(28px, 4vw, 46px); font-weight: 800;
  line-height: 1.08; color: var(--black); margin-bottom: 16px; letter-spacing: .01em; text-transform: uppercase;
}

.byline {
  font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 10px 0; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.byline-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.byline a { color: var(--red); font-weight: 600; transition: color var(--transition); }
.byline a:hover { color: var(--red-dark); }
.byline .meta-sep { width: 1px; height: 10px; background: var(--border-mid); flex-shrink: 0; }

/* ---------- Share Buttons ---------- */
.share-buttons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.share-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--subtle); margin-right: 2px; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 6px; border: 1px solid var(--border); background: var(--white); color: var(--mid);
  cursor: pointer; text-decoration: none; overflow: hidden;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition-bounce), box-shadow var(--transition);
  flex-shrink: 0; will-change: transform;
}
.share-btn:hover { transform: translateY(-2px); }
.share-facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-twitter:hover   { background: #000;    border-color: #000;    color: #fff; }
.share-linkedin:hover  { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.share-copy:hover      { background: var(--red); border-color: var(--red); color: #fff; }
.share-copy.copied { background: #16a34a; border-color: #16a34a; color: #fff; }

@media (max-width: 540px) { .byline { flex-direction: column; align-items: flex-start; gap: 10px; } .share-buttons { align-self: flex-start; } }

.top-answer { font-size: 17px; line-height: 1.8; color: var(--ink); background: #fef2f2; border-left: 4px solid var(--red); border-radius: 0 6px 6px 0; padding: 16px 20px; margin: 0 0 28px; }
.article-body p { font-family: Georgia, 'Times New Roman', serif; margin-bottom: 1.5em; font-size: 17px; color: var(--ink); line-height: 1.85; }
.article-body h2 { font-family: var(--font-head); font-size: 28px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; margin: 1.8em 0 .7em; color: var(--black); }
.article-body h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; text-transform: uppercase; margin: 1.5em 0 .5em; color: var(--black); }
.article-body strong { color: var(--black); font-weight: 700; }
.article-body a { color: var(--red); text-decoration: underline; text-decoration-color: rgba(232,25,44,.3); text-underline-offset: 3px; transition: text-decoration-color var(--transition); }
.article-body a:hover { text-decoration-color: var(--red); }
.article-body ul, .article-body ol { font-family: Georgia, 'Times New Roman', serif; margin: 0 0 1.5em 1.6em; font-size: 17px; color: var(--ink); }
.article-body li { margin-bottom: .5em; }
.article-body blockquote { border-left: 4px solid var(--red); margin: 1.8em 0; padding: 16px 24px; background: #fef1f2; font-style: italic; color: var(--mid); border-radius: 0 6px 6px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; }

/* ---------- Navigation Elements ---------- */
.post-nav { margin-top: 36px; background: var(--charcoal); padding: 18px 24px; border-radius: 8px; display: flex; gap: 14px; align-items: flex-start; }
.post-nav .arrow { color: var(--red); font-size: 20px; line-height: 1.2; flex-shrink: 0; margin-top: 2px; display: inline-block; transition: transform var(--transition); }
.post-nav .label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #444; margin-bottom: 5px; }
.post-nav strong { display: block; font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.2; text-transform: uppercase; letter-spacing: .01em; }
.post-nav a { color: #888; transition: color var(--transition); }
.post-nav a:hover { color: var(--white); }
.post-nav:hover .arrow { transform: translateX(-4px); }

/* ---------- Author Bio Card ---------- */
.author-card { margin: 40px 0 0; padding: 24px 28px; background: var(--bg-alt, #f8f8f8); border-left: 4px solid var(--red); border-radius: 0 8px 8px 0; }
.author-card-name { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.author-card-bio { font-size: 14px; line-height: 1.65; color: var(--ink-light, #555); margin: 0 0 14px; }
.author-card-social { display: flex; flex-wrap: wrap; gap: 10px; }
.author-social-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 20px; text-decoration: none; transition: opacity .15s; }
.author-social-link:hover { opacity: .75; }
.author-social-li  { background: #0a66c2; color: #fff; }
.author-social-x   { background: #000;    color: #fff; }
.author-social-ig  { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }

/* ---------- Post FAQs ---------- */
.post-faqs { margin: 48px 0 0; border-top: 2px solid var(--border); padding-top: 32px; }
.post-faqs-heading { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--black); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.post-faqs-heading::before { content: ''; display: block; width: 5px; height: 22px; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.post-faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
.post-faq-item:last-child { border-bottom: none; }
.post-faq-question { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--black); margin: 0 0 8px; line-height: 1.4; }
.post-faq-answer { font-size: 16px; line-height: 1.75; color: var(--ink); margin: 0; }

/* ---------- Related Posts ---------- */
.related-posts { margin-top: 52px; }
.section-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--black); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.section-title::before { content: ''; display: block; width: 5px; height: 24px; background: var(--red); border-radius: 3px; flex-shrink: 0; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card { background: var(--bg-card); border-radius: 8px; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); will-change: transform; }
.related-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0,0,0,.14), 0 6px 14px rgba(0,0,0,.07); border-color: var(--border-mid); }
.related-card-img-wrap { position: relative; overflow: hidden; height: 200px; background: #ddd; }
.related-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.4,0,.2,1); }
.related-card:hover .related-card-img-wrap img { transform: scale(1.05); }
.related-card-cat { position: absolute; bottom: 0; left: 0; right: 0; background: var(--red); padding: 5px 12px; }
.related-card-cat span { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.related-card-body { padding: 14px 16px; }
.related-card h4 { font-family: var(--font-head); font-size: 17px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; color: var(--black); text-transform: uppercase; letter-spacing: .01em; transition: color var(--transition); }
.related-card:hover h4 { color: var(--red); }
.related-card .date { font-size: 11px; color: var(--subtle); font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer { background: var(--charcoal); padding: 52px 24px 28px; margin-top: 16px; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-logo { margin-bottom: 14px; }
.footer-logo img { height: 38px; width: auto; display: block; opacity: 1; filter: none; }
.footer-logo .logo-text { font-family: var(--font-head); font-size: 26px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; color: var(--white); line-height: 1; }
.footer-logo .logo-text span { color: var(--red); }
.footer-about p { font-size: 12.5px; line-height: 1.75; color: #EEE; }
.footer-col h4 { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #EEE; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.footer-col ul li a { font-size: 13px; color: #EEE; transition: color var(--transition), padding-left var(--transition); display: inline-block; }
.footer-col ul li a:hover { color: var(--white); padding-left: 4px; }
.footer-social { display: flex; gap: 8px; flex-wrap: wrap; }
.social-chip { padding: 6px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; font-size: 11px; font-weight: 500; color: #EEE; transition: all var(--transition), transform var(--transition-bounce); cursor: pointer; will-change: transform; }
.social-chip:hover { border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(232,25,44,.2); }
/* Footer social chips carry an icon — render_social_icons('footer') */
.social-chip { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.social-chip svg { width: 13px; height: 13px; flex: 0 0 auto; }
.footer-network { max-width: var(--max-w); margin: 0 auto; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.footer-network-label { color: rgba(255,255,255,.5); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 11px; }
.footer-network a { color: #eee; text-decoration: none; font-weight: 600; transition: color .2s; }
.footer-network a:hover { color: var(--red); }
.footer-bottom { max-width: var(--max-w); margin: 22px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #EEE; flex-wrap: wrap; gap: 8px; }
.footer-bottom a { color: #EEE; transition: color var(--transition); }
.footer-bottom a:hover { color: var(--red); }
.footer-credit a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.footer-credit a:hover { text-decoration-color: currentColor; }

/* ---------- Global Responsive Layout System ---------- */
@media (max-width: 900px) {
  .post-row { grid-template-columns: 260px 1fr; }
  .post-listing--grid_3col { grid-template-columns: repeat(2, 1fr); }
  .post-listing--grid_3col .post-row { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-hero { height: 480px; }
  .site-header-inner { padding: 0 18px; height: 60px; }
  .primary-nav {
    display: none; flex-direction: column; position: fixed; top: 60px; left: 0; right: 0;
    background: var(--white); border-top: 1px solid var(--border); padding: 12px 18px 16px;
    box-shadow: var(--shadow-md); z-index: 99;
  }
  .primary-nav.open { display: flex; }
  /* Changing this breakpoint? The .header-action swap at the end of this
     file must move with it, or the header button shows twice (or not at
     all) in the gap. tests/header-action-button-smoke.php enforces the
     pairing. */
  .hamburger { display: flex; }
  .top-bar { padding: 8px 18px; }
  .wrapper { padding: 0 16px; }
  .post-row { grid-template-columns: 1fr; }
  .post-listing--card_grid .post-row { grid-template-columns: 1fr; }
  .post-listing--card_grid .post-row-image { height: 200px; min-height: unset; }
  .post-row-image { height: 200px; }
  .post-row-content { padding: 18px 20px; }
  .post-listing--grid_2col { grid-template-columns: 1fr; }
  .post-listing--grid_3col { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer-social { gap: 6px; }
}

/* ---------- Front-End Audit Adjustments ---------- */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
body.single-post-page .page-layout { max-width: 920px; }
.header-actions { display: flex; align-items: center; gap: 10px; }

.search-toggle { width: auto; padding: 0 12px; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.search-toggle-icon { font-size: 14px; line-height: 1; }
.search-toggle-text { display: inline-block; }

.site-hero img.site-hero-video { object-fit: cover; }
.post-row { align-items: stretch; }
.post-row-content { min-height: 185px; }
.post-row-excerpt { min-height: 3.4em; }
.byline-meta span, .byline-meta strong { white-space: nowrap; }

.article-body > :first-child { margin-top: 0; }
.article-body img { width: 100%; border-radius: 10px; margin: 26px 0; }
.article-body figure { margin: 26px 0; }
.article-body figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; text-align: center; }
/* Embedded video players (YouTube/Vimeo iframes) — responsive 16:9 */
.article-body iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; margin: 26px 0; }
.article-body hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }

.post-nav-next { justify-content: flex-end; }
.post-nav-next .arrow { order: 2; margin-left: auto; }
.post-nav-next:hover .arrow { transform: translateX(4px); }
.author-card-social { margin-top: 10px; }
.footer-col ul li a, .footer-bottom, .footer-about p, .footer-col h4 { color: #eee; }

.no-posts { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); }
.error-card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: 14px; padding: 36px; }
.error-eyebrow { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 10px; }
.error-copy { font-size: 15px; color: var(--muted); max-width: 640px; }
.error-actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 900px) {
  .header-actions { gap: 8px; }
  .search-toggle-text { display: none; }
  .search-toggle { width: 38px; padding: 0; }
}

@media (max-width: 640px) {
  .site-header-inner { gap: 12px; }
  .header-actions { margin-left: auto; }
  .search-toggle { width: 34px; height: 34px; }
  .article-title { font-size: 32px; }
  .post-nav, .post-nav-next { padding: 16px 18px; }
  .error-card { padding: 24px 20px; }
}

/* ==========================================================================
   Pass 7.2 · Sidebar Architecture & Global Layout Systems
   ========================================================================== */

/* Master Structural Grid System */
.homepage-sidebar-wrap,
.single-post-with-sidebar {
  display: grid;
  grid-template-columns: 1fr 320px; /* Locks sidebar column width strictly to 320px */
  gap: 24px; /* Balanced interior channel gap spacing */
  align-items: start;
  max-width: var(--max-w);
  margin: 24px auto;
  padding: 0 24px; /* Desktop outer layout padding limits */
  box-sizing: border-box;
}

/* Strips inner column alignment pad bounds to resolve top edge variance */
.homepage-main-content,
.single-post-main {
  min-width: 0;
  padding: 0 !important;
}

/* Negates internal class margin gaps to make elements flush */
.homepage-main-content .post-listing {
  padding-top: 0 !important;
}

/* Handles sidebar explicit geometries */
.homepage-sidebar,
.single-post-sidebar {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-sizing: border-box;
}

body.single-post-page .page-layout-sidebar { max-width: var(--max-w); }

/* ---------- Sidebar Element Decoration ---------- */
.sidebar-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-sm); padding: 20px; overflow: hidden; }
.sidebar-ad-card { text-align: center; display: flex; flex-direction: column; align-items: center; }

@media (min-width: 1024px) {
  .homepage-sidebar-wrap .homepage-sidebar,
  .page-layout-sidebar .single-post-sidebar {
    position: sticky; top: 88px;
  }
  .page-layout-sidebar .single-post-sidebar .sidebar-ad-sticky,
  .page-layout-sidebar .single-post-sidebar .ad-slot-sticky,
  .homepage-sidebar .sidebar-ad-sticky {
    position: static;
  }
  .sidebar-ad-sticky { position: sticky; top: 88px; }
  .sidebar-ad-sticky .ad-slot-sticky { position: static; }
}

.sidebar-card-title {
  font-family: var(--font-head); font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--black);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--red);
}

.sidebar-latest-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sidebar-latest-item { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.sidebar-latest-item:last-child { padding-bottom: 0; border-bottom: none; }
.sidebar-latest-item a { font-size: 14px; font-weight: 600; color: var(--black); line-height: 1.4; transition: color var(--transition); }
.sidebar-latest-item a:hover { color: var(--red); }
.sidebar-latest-date { font-size: 11px; color: var(--subtle); }

/* ---------- Structural Media Interchanges ---------- */
@media (max-width: 1024px) {
  .homepage-sidebar-wrap,
  .single-post-with-sidebar {
    grid-template-columns: 1fr;
    padding: 0 24px; /* Safe padding for tablet breakpoints */
     margin: 16px auto;
    gap: 32px;
  }
  .homepage-sidebar,
  .single-post-sidebar {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 960px) { .sidebar-ad-sticky { position: static; } }
@media (max-width: 640px) {
  .homepage-sidebar-wrap, 
  .single-post-with-sidebar { 
    padding: 0 16px; /* Safe gutters protecting mobile screen edges */
   margin: 16px auto;
  }
}

/* ---------- Homepage Ads & Module Centering Blocks ---------- */
.homepage-ads-block { width: 100%; }
.ads-block-hide-mobile { display: none; }
@media (min-width: 600px) { .ads-block-hide-mobile { display: block; } }
.ads-block-card { overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; }
.ads-block-title { margin-bottom: 1rem; }
.ads-block-card.ads-rotating-out { opacity: 0; transition: opacity 0.25s ease; }
.ads-block-card.ads-rotating-in { opacity: 1; transition: opacity 0.25s ease; }

.ad-slot-wrap { width: 100%; }
@media (min-width: 1024px) { .ad-slot-sticky { position: sticky; top: 88px; } }
@media (max-width: 960px) { .ad-slot-sticky { position: static; } }
@media (max-width: 900px)  { .ad-slot-wrap.ad-target-desktop { display: none !important; } }
@media (min-width: 901px)  { .ad-slot-wrap.ad-target-mobile  { display: none !important; } }

/* ---------- Block Registry Shared Layout ---------- */
.block-shell { width: 100%; margin: 2rem auto; box-sizing: border-box; }
.block-shell .section-heading { text-align: center; margin: 0 auto 1.25rem; }
.block-shell .block-inner { margin-left: auto; margin-right: auto; }
.block-shell .newsletter-block, .block-shell .homepage-ads-block, .block-shell .category-strip-items { margin-left: auto; margin-right: auto; }

/* ---------- Custom Layout Builder Blocks ---------- */
.custom-block-section { width: 100%; box-sizing: border-box; padding: 3rem 0; }
.custom-block-section .custom-block-inner { margin-left: auto; margin-right: auto; }
.custom-block-section .custom-block-grid { display: grid; gap: 2rem; align-items: start; }
.custom-block-section .custom-block-grid--1 { grid-template-columns: minmax(0, 1fr); }
.custom-block-section .custom-block-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.custom-block-section .custom-block-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.custom-block-section .custom-block-col { min-width: 0; word-wrap: break-word; }
.custom-block-section .custom-block-col > *:first-child { margin-top: 0; }
.custom-block-section .custom-block-col > *:last-child { margin-bottom: 0; }

@media (max-width: 900px) { .custom-block-section .custom-block-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .custom-block-section { padding: 2rem 0; }
  .custom-block-section .custom-block-grid--2, .custom-block-section .custom-block-grid--3 { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

/* ---------- Taxonomy Profiles ---------- */
.archive-header { display: flex; align-items: flex-start; gap: 1.5rem; padding: 2rem 0 1.5rem; }
.archive-header-image { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.archive-header-title { margin: 0 0 .5rem; font-size: 2rem; font-weight: 700; }
.archive-header-description { margin: 0; color: var(--color-muted, #555); font-size: 1rem; line-height: 1.6; }
.post-people { margin: 1.25rem 0 0; font-size: .9rem; color: var(--color-muted, #555); }
.post-people-label { font-weight: 600; margin-right: .25rem; }
.post-people a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.post-people a:hover { color: var(--color-accent, #333); }
.post-people-sep { margin-right: .25rem; }
@media (max-width: 600px) { .archive-header { flex-direction: column; } .archive-header-image { width: 80px; height: 80px; } }

/* ---------- Editor Presentation Helpers ---------- */
.article-body img.img-left   { float: left;  width: auto; max-width: 50%; margin: 0 1.25em 1em 0; border-radius: 6px; }
.article-body img.img-right  { float: right; width: auto; max-width: 50%; margin: 0 0 1em 1.25em; border-radius: 6px; }
.article-body img.img-center { float: none;  display: block; width: auto; max-width: 100%; margin: 0 auto 1em; }
.article-body img.img-full   { float: none;  display: block; width: 100%; height: auto; margin: 0 0 1em; }
.article-body::after { content: ''; display: table; clear: both; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.5em; }
.table-responsive table { margin: 0; }
.article-body .cms-table { border-collapse: collapse; width: 100%; }
.article-body .cms-table th, .article-body .cms-table td { border: 1px solid var(--border, #ddd); padding: 8px 12px; vertical-align: top; text-align: left; }
.article-body .cms-table th { background: var(--bg-alt, #f8f9fa); font-weight: 600; }

/* ==========================================================================
   ── CMS Slider — Default Theme Sizing & Colors Override ──
   ========================================================================== */
.cms-slider {
    width: 100%;
    max-width: 100%;
    --swiper-navigation-color: var(--white);
    --swiper-pagination-color: var(--red);
    --slider-progress-fill: var(--red);
    --slider-feature-bg: var(--black);
}

.cms-slider.cms-slider--featured_posts .cms-slider__overlay {
    padding-left: max(2rem, calc((100% - 1400px) / 2 + 2rem));
    padding-right: max(2rem, calc((100% - 1400px) / 2 + 2rem));
    padding-bottom: 4rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 100%);
}

.cms-slider--featured_posts .cms-slider__title {
    font-family: var(--font-head);
    font-size: clamp(2rem, 4vw, 3.5rem); 
    line-height: 1.1; 
    font-weight: 800; 
    text-transform: uppercase;
    letter-spacing: -0.02em; 
    color: var(--white);
}

.cms-slider--featured_posts .cms-slider__excerpt {
    font-family: var(--font-ui);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85); 
    margin-bottom: 1.5rem;
    max-width: 680px; 
}

.cms-slider--featured_posts .cms-slider__read-more {
    display: inline-block;
    padding: 10px 22px;
    background: var(--red);
    color: var(--white);
    border-radius: 4px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), transform var(--transition-bounce), box-shadow var(--transition);
    will-change: transform;
}

.cms-slider--featured_posts .cms-slider__read-more:hover {
    background: var(--red-dark);
    transform: scale(1.04);
    box-shadow: 0 6px 20px rgba(232, 25, 44, 0.25);
}

.cms-slider--featured_posts .cms-slider__media { 
    width: 100%; 
    aspect-ratio: 21 / 9; 
    height: 660px; 
}

@media (max-width: 1024px) {
    .cms-slider--featured_posts .cms-slider__media { height: 540px; }
}

@media (max-width: 640px) { 
    .cms-slider--featured_posts .cms-slider__media { aspect-ratio: auto; height: 440px; }
    .cms-slider.cms-slider--featured_posts .cms-slider__overlay {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 2.75rem;
    }
}


/* ==========================================================================
   Post list layouts — tablet / iPad responsive pass
   --------------------------------------------------------------------------
   Breakpoints requested: 1024px (tablet/iPad) and 768px (mobile).

   Selector note: this theme's markup does not use .post-layout-* / .post-card /
   .post-thumbnail. The listing emits .post-listing (+ a --grid_2col /
   --grid_3col / --card_grid modifier) wrapping .post-row, which is a CSS grid
   of .post-row-image + .post-row-content. The rules below are the requested
   behaviour expressed against those real selectors, with flex-basis
   percentages translated to grid tracks.

   Appended at the end of the stylesheet so it composes with, and takes
   precedence over, the theme's existing 900px / 640px rules.
   ========================================================================== */

/* A grid item's automatic minimum size is its min-content width, so a long
   word or URL in the copy can force the text track wider than its share.
   min-width:0 lets the track shrink as intended. */
.post-row-content { min-width: 0; }

/* --- Tablet / iPad (<= 1024px) --- */
@media screen and (max-width: 1024px) {
  /* 3-up grids drop to 2-up so cards keep a legible width */
  .post-listing--grid_3col { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .post-listing--grid_2col { gap: 1.25rem; }

  /* Split (card_grid): thumbnail 40% -> 35%, giving the copy more room */
  .post-listing--card_grid .post-row { grid-template-columns: 35% minmax(0, 1fr); }

  /* List: cap the thumbnail at 200px so title and excerpt get the remainder */
  .post-row { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }

  /* Ranked rows carry a third child (.post-rank) and must keep a third track.
     The bare .post-row rule above would otherwise win on source order and push
     the content onto an implicit second row. */
  .post-row--ranked { grid-template-columns: minmax(4.5rem, auto) minmax(0, 200px) minmax(0, 1fr); }
}

/* --- Mobile (<= 768px) --- */
@media screen and (max-width: 768px) {
  /* All grids collapse to a single column */
  .post-listing--grid_2col,
  .post-listing--grid_3col { grid-template-columns: minmax(0, 1fr); gap: 1rem; }

  /* Split and list stack vertically with a full-width thumbnail */
  .post-row,
  .post-listing--card_grid .post-row { grid-template-columns: minmax(0, 1fr); }
  .post-row-image,
  .post-listing--card_grid .post-row-image { width: 100%; max-width: 100%; }

  /* Ranked rows keep the rank beside the image, with the copy spanning below,
     rather than stranding a large numeral on a line of its own. */
  .post-row--ranked { grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr); }
  .post-row--ranked .post-row-image { width: auto; max-width: none; }
  .post-row--ranked .post-row-content { grid-column: 1 / -1; }
}

/* ---------- Header call-to-action button ---------- */
/* Rendered twice by render_header_action() (cms-core/helpers-header-action.php):
   the --bar copy sits beside the search toggle, the --menu copy inside
   .primary-nav. Exactly one is ever shown. The swap happens at THIS theme's own
   nav-collapse breakpoint (640px) so the button drops into the mobile
   dropdown at the same moment the nav does — leaving the mobile header bar
   exactly as it was. */
.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--red);
  border-radius: 6px;
  /* Rests as an outline and fills in on hover, the same direction as its
     neighbour .search-toggle. It used to run the other way — solid at rest,
     draining to transparent on hover — so hovering across the pair made one
     button empty while the other filled.

     The resting label is picked per theme from the header it sits on: white on
     the dark headers, var(--red) on this one. A red label was measured at only
     3.45-3.92:1 against the dark headers, under the 4.5:1 AA needs at 12px, and
     resting states are persistent — so the fill moves on hover, not the label. */
  background: transparent;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.header-action:hover,
.header-action:focus-visible {
  background: var(--red);
  color: var(--white);
}
/* Above the breakpoint only the bar copy exists visually.
   Scoped to .primary-nav deliberately: the menu copy is an <a> inside the nav,
   and the theme's own `.primary-nav a` rule has specificity 0,1,1 — which beats
   a lone `.header-action--menu` class at 0,1,0. In hits that rule sets
   `display: inline-block` and forced BOTH copies on screen at once on desktop;
   in every theme it also overrides the button's colour, padding and radius.
   `.primary-nav .header-action--menu` is 0,2,0 and wins on class count. */
.primary-nav .header-action--menu { display: none; }

@media (max-width: 640px) {
  .header-action--bar { display: none; }
  .primary-nav .header-action--menu {
    display: flex;
    width: 100%;
    height: 40px;
    margin-top: 10px;
    /* Re-assert the button look; `.primary-nav a` outranks `.header-action`. */
    justify-content: center;
    padding: 0 14px;
    border-radius: 6px;
    /* Outline at rest, filling on hover — same direction as the desktop copy. */
    background: transparent;
    /* !important only here: lumen's mobile block sets
       `.primary-nav a { color: var(--mid) !important; }`, and !important beats
       specificity outright — without matching it the label renders as muted
       grey on the button's own background. Harmless in the other four, which
       use no !important on nav links. */
    color: var(--red) !important;
    font-size: 12px;
    font-weight: 700;
  }
  /* 0,2,1 — ties `.primary-nav a:hover`, and wins on source order. */
  .primary-nav .header-action--menu:hover {
    background: var(--red);
    /* !important MUST match the resting rule above: !important outranks
       specificity, so an !important resting colour against a plain hover colour
       pins the label and the hover never lands. That was the live bug — the
       background changed on hover and the text did not. */
    color: var(--white) !important;
  }
}

/* ---------- Primary nav submenus ---------- */
/* An item with children is wrapped in .nav-item; one without renders as a bare
   <a>, exactly as before, so nothing about the existing nav layout moves.
   Selectors are scoped through .primary-nav so they outrank this theme's own
   `.primary-nav a` rule (0,1,1) — the same specificity trap that put the header
   button on screen twice. */
.primary-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.primary-nav .nav-item .nav-parent { display: inline-flex; align-items: center; gap: 6px; }

/* Parent rendered as a <button> (no destination, e.g. url '#'). Only the
   form-control chrome is reset here — font and colour deliberately are NOT set,
   because this theme's own `.primary-nav a, .primary-nav button.nav-parent`
   rule above supplies them. Declaring `color: inherit` here would outrank it
   (0,3,1 against 0,2,1) and leave the parent grey among white siblings. */
.primary-nav .nav-item button.nav-parent {
  background: none; border: 0; cursor: pointer;
}
.primary-nav .nav-toggle {
  background: none; border: 0; padding: 0 4px;
  color: inherit; cursor: pointer; line-height: 0;
}
/* The caret-only button is mobile-only. A parent that IS the toggle (no
   destination, so it is a <button> rather than a link) must stay visible on
   desktop — hiding every .nav-toggle would erase the parent's label. */
.primary-nav .nav-toggle:not(.nav-parent) { display: none; }
.primary-nav .nav-caret { transition: transform .2s ease; }

.primary-nav .nav-submenu { display: none; }
.primary-nav .nav-submenu a {
  display: block; padding: 8px 12px; border-radius: 6px;
  text-transform: none; letter-spacing: 0;
}

/* The floating card is a desktop shape, and so is its colour. Scoping it to
   min-width keeps `color: var(--ink)` off the collapsed panel, which sits on
   the header's own dark background — inside the breakpoint the links simply
   inherit this theme's `.primary-nav a` colour and stay readable without this
   file having to know what that colour is. */
@media (min-width: 641px) {
  .primary-nav .nav-submenu {
    position: absolute; top: 100%; left: 0; z-index: 120;
    min-width: 210px; padding: 8px;
    background: var(--bg-card, var(--white)); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-md);
  }
  .primary-nav .nav-submenu a { white-space: nowrap; color: var(--ink); }
  .primary-nav .nav-submenu a:hover { background: var(--border); color: var(--ink); }
}

/* Desktop opens on hover, and on keyboard focus so it is reachable without a
   mouse. `hover: hover` keeps a touch device from latching it open. */
@media (hover: hover) {
  .primary-nav .nav-item--has-children:hover > .nav-submenu { display: block; }
}
.primary-nav .nav-item--has-children:focus-within > .nav-submenu { display: block; }

@media (max-width: 640px) {
  /* In the mobile panel the nav is a column, so a parent takes a full row and
     its children stack underneath. Hover is meaningless here: the caret button
     drives it, and .open is what shows the panel. */
  /* Block, not flex: the parent and its caret then flow inline exactly like a
     sibling <a>, inheriting whatever text-align the theme gives its collapsed
     nav instead of this file imposing one. The submenu is a block underneath. */
  /* No width here on purpose. The collapsed nav is a flex column and each
     theme positions its items with align-items, so a shrink-to-fit wrapper
     lands exactly where a sibling <a> does; forcing width:100% stretched the
     row and dropped its text to the left of centred siblings. */
  .primary-nav .nav-item,
  .primary-nav .nav-item--has-children { display: block; }
  .primary-nav .nav-item .nav-parent { display: inline-flex; }
  .primary-nav .nav-toggle:not(.nav-parent) { display: inline-flex; align-items: center; padding: 10px 12px; }
  .primary-nav .nav-item--has-children:hover > .nav-submenu,
  .primary-nav .nav-item--has-children:focus-within > .nav-submenu { display: none; }
  .primary-nav .nav-item--has-children.open > .nav-submenu { display: block; }
  .primary-nav .nav-item--has-children.open .nav-caret { transform: rotate(180deg); }
  .primary-nav .nav-submenu {
    position: static; width: auto; min-width: 0; order: 3;
    margin: 4px 0 6px; box-shadow: none; background: transparent; border: 0;
    border-left: 2px solid var(--border); border-radius: 0; padding: 2px 0 2px 12px;
  }
  .primary-nav .nav-submenu a { white-space: normal; }
}

/* ---------- Primary nav submenus · touch above the collapse width ---------- */
/* An iPad is 768-1366px wide, so it sits ABOVE this theme's collapse
   breakpoint and gets the desktop treatment: caret display:none, submenu on
   :hover. A touch device has neither. Tapping a linked parent just followed
   the link, and its children were unreachable at any width. (A '#' parent
   happened to keep working — it renders as a <button>, so :focus-within fired
   on tap. Only linked parents were affected, which is why it looked partial.)

   Hand touch devices the caret and the same .open mechanism the collapsed
   layout already uses. The parent link keeps its own tap, so the destination
   stays reachable in one tap and the caret is what opens the panel.

   Gated on .nav-touch from main.js rather than (hover: none)/(pointer: coarse):
   iPadOS Safari in desktop mode can report itself as hover-capable, and the
   media query would then silently never match on the exact device this is for.
   Without the class nothing here applies, so a JS failure leaves the existing
   desktop behaviour untouched. */
@media (min-width: 641px) {
  .nav-touch .primary-nav .nav-toggle:not(.nav-parent) {
    display: inline-flex;
    align-items: center;
  }
  /* :focus-within must not fight .open up here: tapping the caret leaves it
     focused, so focus-within would re-open the panel the same tap just closed.

     :hover is deliberately NOT neutralised. Its rule already sits inside
     @media (hover: hover), so on a pure touch device it is inert anyway — and
     maxTouchPoints is true for hybrids too (touchscreen laptops, iPad with a
     trackpad), where hover-to-open is real and worth keeping alongside the
     caret. Cancelling it here would take that away for no gain. */
  .nav-touch .primary-nav .nav-item--has-children:focus-within > .nav-submenu {
    display: none;
  }
  .nav-touch .primary-nav .nav-item--has-children.open > .nav-submenu {
    display: block;
  }
  .nav-touch .primary-nav .nav-item--has-children.open .nav-caret {
    transform: rotate(180deg);
  }
}