/*
Theme Name: Andrew Baker 2026
Theme URI: https://andrewbaker.ninja
Author: Andrew Baker
Description: Custom theme for andrewbaker.ninja. CIO, AWS Architect & Banking Technologist.
Version: 1.0.84
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andrew-baker-2026
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

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

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }

/* ── NAV ── */
nav.site-nav {
  background: #111;
}
.site-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 100;
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}
.nav-left { display: flex; align-items: center; gap: 1rem; }
.nav-logo { color: #fff; font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; display: flex; align-items: center; gap: 10px; }
.nav-logo span { color: #e8ff00; }
.nav-logo-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.nav-sponsor {
  display: inline-flex;
  align-items: center;
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 3px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #aaa;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.nav-sponsor span { color: #e8ff00; }
.nav-sponsor:hover { border-color: #e8ff00; color: #fff; }
@media (max-width: 700px) { .nav-sponsor { display: none; } }

/* Primary nav menu */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #1e1e1e;
  position: relative;
  flex-wrap: wrap;
}
.nav-menu > li {
  position: relative;
}
.nav-menu > li > a {
  display: block;
  color: #aaa;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0 0.9rem;
  height: 44px;
  line-height: 44px;
  white-space: nowrap;
  transition: color 0.15s;
}
.nav-menu > li > a:hover,
.nav-menu > li:hover > a { color: #fff; }

/* Dropdown */
.nav-menu .sub-menu,
.nav-menu .sub-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu .sub-menu {
  display: none;
  position: absolute;
  top: 44px;
  left: 0;
  min-width: 220px;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-top: 2px solid #e8ff00;
  border-radius: 0 0 6px 6px;
  list-style: none;
  padding: 0.4rem 0;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-menu li:hover > .sub-menu { display: block; }
/* Flip last 3 items' dropdowns to align right so they don't overflow */
.nav-menu > li:nth-last-child(-n+3) > .sub-menu {
  left: auto;
  right: 0;
}
.nav-menu .sub-menu li a {
  display: block;
  color: #bbb;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  white-space: nowrap;
  transition: color 0.1s, background 0.1s;
}
.nav-menu .sub-menu li a:hover { color: #fff; background: #222; }

/* WP Additional CSS (Customizer, DB-stored) pins .cs-plugin-docs-link to
   position:absolute;right:0 with no top. That overlaps "Social" because the
   flex row only uses ~700px of the 1152px-wide nav-menu (centered), leaving
   more empty space on the right than the 293px-wide docs link needs, beat
   that rule's specificity to let it flow normally in the menu row instead. */
#menu-primary .cs-plugin-docs-link {
  position: relative !important;
  right: auto !important;
}

/* Hamburger button, hidden on desktop */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: #fff;
}

@media (max-width: 700px) {
  .nav-hamburger { display: flex; }
  .nav-top { justify-content: space-between; }
  .nav-menu {
    display: none !important;
    position: absolute;
    top: 56px;
    left: -1.5rem;
    right: -1.5rem;
    background: #111;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.5rem;
    z-index: 99;
    border-top: 1px solid #222;
    gap: 0;
  }
  .nav-menu--open { display: flex !important; }
  .nav-menu > li {
    position: relative;
  }
  .nav-menu > li > a {
    padding: 0.5rem 0.9rem;
    height: auto;
    line-height: 1.5;
    font-size: 0.9rem;
    white-space: nowrap;
  }
  .nav-menu .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid #2a2a2a;
    background: transparent;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  .nav-menu .sub-menu li a {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: #777;
  }
  .cs-plugin-docs-link { display: none !important; }
}

/* ── HERO ── */
.hero {
  background: #111;
  padding: 4rem 0 3.5rem;
}
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
}
.hero-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e8ff00;
  margin: 0 auto 1.25rem;
  display: block;
}
.hero-tag {
  display: inline-block;
  background: #e8ff00;
  color: #111;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 2px;
  margin-bottom: 1.75rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 9vw, 5rem);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 1.5rem;
}
.hero h1 span { color: #e8ff00; }
.hero-sub {
  font-size: 1rem;
  color: #cccccc;
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 2rem;
}
.hero-sub strong { color: #ffffff; font-weight: 600; }
.hero-crayon {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  font-style: italic;
  color: #111;
  background: #e8ff00;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  transform: rotate(-2deg);
  margin: -0.75rem auto 3rem;
}
.hero-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
.btn-yellow {
  background: #e8ff00;
  color: #111;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}
.btn-yellow:hover { background: #d4eb00; }
.btn-outline {
  border: 1.5px solid #444;
  color: #fff;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}
.btn-outline:hover { border-color: #888; }
.btn-blue {
  background: #00b4ff;
  color: #000;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}
.btn-blue:hover { background: #00a0e6; }
.btn-pink {
  background: #ff3ec9;
  color: #000;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}
.btn-pink:hover { background: #e630b5; }
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #2a2a2a;
  flex-wrap: wrap;
  justify-content: center;
}
.stat-num { font-size: 1.75rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.stat-num span { color: #e8ff00; }
.stat-desc { font-size: 0.75rem; color: #bbb; margin-top: 0.2rem; font-weight: 500; }

/* ── PILLARS ── */
.pillars { background: #f5f5f5; padding: 4rem 1.5rem; border-top: 4px solid #e8ff00; }
.section-tag {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #888;
  margin-bottom: 0.75rem;
}
.section-title {
  font-size: clamp(1.6rem, 5vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #111;
  margin-bottom: 0.75rem;
  line-height: 1.1;
}
.section-intro { color: #666; font-size: 0.92rem; line-height: 1.7; margin-bottom: 2.5rem; max-width: 500px; }

.pillar-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .pillar-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  padding: 1.5rem;
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.13);
  border-color: #e8ff00;
}
.pillar-num { font-size: 2.4rem; font-weight: 800; color: #e8ff00; background: #111; display: inline-block; padding: 0.15rem 0.6rem; border-radius: 4px; margin-bottom: 0.75rem; letter-spacing: 0.04em; line-height: 1.2; }
.pillar h3 { font-size: 0.95rem; font-weight: 800; color: #111; margin-bottom: 0.5rem; line-height: 1.3; }
.pillar p { font-size: 0.82rem; color: #666; line-height: 1.65; }

/* ── ABOUT ── */
.about { background: #fff; padding: 4rem 1.5rem; }
.about-box {
  background: #111;
  border-radius: 10px;
  padding: 2.5rem 2rem;
  margin-top: 2rem;
}
.about-box p { color: #ddd; font-size: 0.92rem; line-height: 1.8; margin-bottom: 1rem; }
.about-box p strong { color: #fff; font-weight: 700; }
.creds { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cred {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.83rem; color: #ddd; font-weight: 500;
}
.cred-dot { width: 7px; height: 7px; background: #e8ff00; border-radius: 50%; flex-shrink: 0; }

/* ── POSTS LAYOUT ── */
.posts-section { background: #f5f5f5; padding: 4rem 1.5rem; }
.posts-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 2.5rem;
  align-items: start;
}
@media (max-width: 860px) {
  .posts-layout { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── RECENT POSTS ── */
.posts-col-title {
  font-size: 1rem;
  font-weight: 900;
  color: #111;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #111;
}
.post-list { display: flex; flex-direction: column; }
.post-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #e4e4e4;
  transition: background 0.1s;
}
.post-row:first-child { padding-top: 0; }
.post-row-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.post-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.post-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  /* Without flex-grow this shrink-wraps to its content's width (the title
     text) instead of filling the row next to the fixed-width thumbnail, so
     the ab-listen player inside it (width:100% of THIS box) ends up a
     different width per row depending on title length. .blog-feed-body and
     .promo-post-body already have this; this one was missed. */
  flex: 1;
}
.post-row-body a {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}
.post-row-body a:hover { color: #0088ff; }
.post-row-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: #cc0000;
  font-weight: 700;
}
.post-views {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #cc0000;
  font-size: 0.75rem;
  font-weight: 700;
}
.views-icon {
  font-size: 1.35em;
  line-height: 1;
  margin-right: 0.3em;
}
/* Compact narration player on summary pages (homepage rows, latest feed, best-posts cards).
   All three contexts are light backgrounds, so dark label text. */
.ab-listen {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  min-width: 0;
  /* Match the on-post player (plugin .cs-seo-audio-player): light card with a
     blue left-accent border and a raised shadow, so the two read as one
     component. Compact here for summary rows.
     Kept in sync by hand: the plugin repo can't reach into this theme, so
     when cloudscale-seo-ai-optimizer's player styling changes (border colour,
     shadow), update this block to match. */
  background: #eef2f8;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #1d4ed8;
  border-radius: 10px;
  /* Deliberately shallow: a 40px-blur shadow at 40% opacity under a 48px-tall
     card reads as a smudge rather than depth, and a feed shows a whole column
     of them at once. Matches the plugin player's reduced shadow. */
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.08);
  padding: 7px 11px;
  /* Fixed width so every row's player is identical (full width on narrow
     screens). Without this the card stretched to fill each row, so widths
     varied. */
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
}
/* Label above play count, as one non-shrinking column beside the transport. */
.ab-listen-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex-shrink: 0;
  min-width: 0;
}
.ab-listen-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #374151;
  white-space: nowrap;
  flex-shrink: 0;
}
/* The counter markup and its base styling come from the analytics plugin
   (cspv_audio_plays_html); this only sizes it for the compact card. */
.ab-listen .cspv-plays-count {
  font-size: 0.62rem;
  color: #64748b;
}
/* The counter's own play glyph, from the same family as the transport button, so
   the two triangles on this card are obviously the same idea rather than two greys.
   Not the button's own fill: #d4efa3 is a background tint and would be close to
   invisible as 0.62rem text on a light card. */
.ab-listen .cspv-plays-icon {
  color: #4d7c0f;
  margin-right: 3px;
}
/* The headphone mark beside the label: an SVG, not the emoji that was here, because
   an emoji is drawn by whichever emoji font the reader's device ships and arrived as
   an unrecognisable grey lozenge on a fair number of desktop builds. */
.ab-listen-icon {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 3px;
}
.ab-listen audio {
  display: block;
  height: 34px;
  /* Fill the remaining card width next to the label, so the control is the
     same size in every row. */
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* The custom transport that assets/compact-player.js swaps in for the native
   <audio controls>. Until that script runs the native control above is what shows,
   which is the point: the card is usable with no JS, just plainer.

   Kept visually in step with the on-post player from cloudscale-seo-ai-optimizer
   (.cs-seo-audio-ui) -- same green, same round play button, same slim bar -- so a
   reader moving from a summary card to the article meets one component, not two.
   Scaled down here: 40px against the plugin's 56px, because this card is 48px tall. */
.ab-listen-ui {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}
/*
 * Pastel green (#d4efa3), not the neon it was.
 *
 * #00e676 on a #00c853 ring with a saturated glow read as an alert rather than a
 * control: it was the loudest thing on the page, on a card that sits inline in the
 * middle of an article. The glyph goes DARK on the light fill, which is what makes
 * a tint legible at all. The ring still says "press me", it just no longer shouts
 * over the paragraph it interrupts.
 *
 * The hue matters as much as the lightness. An emerald pastel was tried first and
 * still read as cold and clinical; this is the warmer, yellow-leaning green, which
 * is what "pastel green" means to the eye rather than "a lighter version of the
 * signal colour".
 */
.ab-listen-play {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 2px solid #c2e58c;
  background: #d4efa3;
  color: #3f6212;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(212, 239, 163, 0.5), 0 2px 6px rgba(132, 204, 22, 0.22);
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.ab-listen-play:hover {
  background: #c2e58c;
  border-color: #a3d55f;
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(194, 229, 140, 0.55), 0 4px 10px rgba(132, 204, 22, 0.3);
}
.ab-listen-play:active { transform: translateY(0); }
.ab-listen-play:focus-visible,
.ab-listen-bar:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
.ab-listen-play svg { display: block; pointer-events: none; }
.ab-listen-time {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ab-listen-bar {
  position: relative;
  flex: 1 1 60px;
  min-width: 40px;
  height: 8px;
  border-radius: 999px;
  background: #cbd5e1;
  cursor: pointer;
  touch-action: none;
}
.ab-listen-pos {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  border-radius: 999px;
  /* Darker than the button fill rather than the same pastel: this sits on a
     #cbd5e1 track and has to stay readable as a POSITION at 8px tall, which is a
     3:1 job, not a taste one. #d4efa3 manages 1.1:1 against that track and the
     neon it replaced only ever managed 1.5:1, so the fill was never actually
     distinguishable from the groove it runs in. #4d7c0f is 3.4:1. */
  background: #4d7c0f;
  pointer-events: none;
}
.ab-listen-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 999px;
  background: #4d7c0f;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
  pointer-events: none;
}
/* The lift is decoration; the colour is the signal. */
@media (prefers-reduced-motion: reduce) {
  .ab-listen-play { transition: none; }
  .ab-listen-play:hover { transform: none; }
}

/* Standalone page-level view count (its own <p>, not inline in a feed-item meta row). */
.page-views-standalone {
  margin: 0.5rem 0 1rem;
  font-size: 0.85rem;
}

/* Shared sort/segmented-control toggle -- Best Posts and pillar topic pages.
   Was previously defined only inline in page-best-posts.php, so any other
   page using the same .top-tab markup (e.g. page-pillar.php) rendered as
   bare unstyled links with no visible indication of which option was active. */
.sort-toggle {
  display: inline-flex;
  background: #e8e8e8;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.top-tab {
  background: transparent;
  color: #333;
  border: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.top-tab:hover { background: rgba(0, 0, 0, 0.08); }
.top-tab--active {
  background: #111;
  color: #e8ff00;
}
.top-tab--active:hover { background: #222; }

/* ── PAGINATION ── */
.ab-pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  flex-wrap: wrap !important;
  margin-top: 1.5rem !important;
  background: transparent !important;
  height: auto !important;
  position: static !important;
  padding: 0 !important;
}
.ab-pagination-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: #111;
  font-family: 'Inter', sans-serif;
  margin-right: 0.4rem;
}
.ab-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.6rem;
  border-radius: 6px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #888;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: color 0.15s;
  font-family: 'Inter', sans-serif;
}
.ab-pagination .page-numbers:hover { color: #111; }
.ab-pagination .page-numbers.current {
  background: #111 !important;
  color: #e8ff00 !important;
  font-weight: 800;
}
.ab-pagination .page-numbers.dots {
  color: #bbb !important;
  pointer-events: none;
}
.ab-pagination .page-numbers.prev,
.ab-pagination .page-numbers.next {
  color: #555;
  font-size: 1.2rem;
}

/* ── TOP POSTS, 2-column card grid ── */
.top-posts-col { position: relative; }
.top-post-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.75rem;
}
@media (max-width: 420px) {
  .top-post-list { grid-template-columns: 1fr !important; }
}
/* Each card */
.top-post-row {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,102,255,0.12), 0 1px 3px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.top-post-row:hover {
  border-color: #ffe600;
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,102,255,0.55), 0 2px 8px rgba(0,102,255,0.3);
}
/* The inner wrapper is just a column flex */
.top-post-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Thumbnail: contained, white background */
.top-post-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  background: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.top-post-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}
.top-post-row:hover .top-post-thumb img {
  transform: scale(1.04);
}
/* No-thumbnail: dark placeholder keeps consistent height */
.top-post-no-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  flex-shrink: 0;
}
/* Text area below image */
.top-post-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.65rem 0.7rem 0.7rem;
  flex: 1;
  background: #f0f4ff;
}
.top-post-num {
  font-size: 0.6rem;
  font-weight: 800;
  color: #e8ff00;
  background: #111;
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  align-self: flex-start;
}
.top-post-text > a {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}
.top-post-text > a:hover { color: #111; text-decoration: underline; }
.top-post-excerpt { font-size: 0.75rem; color: #666; line-height: 1.55; margin-top: 0.35rem; }
.top-post-row-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: #cc0000;
  font-weight: 700;
  margin-top: auto;
  padding-top: 0.3rem;
  flex-wrap: wrap;
}

/* ── HOMEPAGE TOP POSTS PROMO ──
   Styled to match the Most Recent Posts column it sits beside: light rows on
   the #f5f5f5 posts-section background, dark text. */
.posts-col-title.trending-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.top-posts-promo {
  display: flex;
  flex-direction: column;
}
.promo-post-list {
  display: flex;
  flex-direction: column;
}
.promo-post-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid #e4e4e4;
}
.promo-post-row:first-child { padding-top: 0; }
.promo-post-rank {
  flex-shrink: 0;
  font-size: 0.7rem;
  font-weight: 900;
  color: #e8ff00;
  background: #111;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
  line-height: 1.4;
}
.promo-post-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  display: block;
}
.promo-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.promo-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  flex: 1;
}
.promo-post-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111;
  line-height: 1.4;
}
.promo-post-title:hover { color: #0088ff; }
.top-posts-promo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: center;
  margin-top: 1.5rem;
  background: #ff3ec9;
  color: #000;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
}
.top-posts-promo-link:hover { background: #e630b5; }
.top-posts-promo-link-arrow {
  display: inline-flex;
  transition: transform 0.15s ease;
}
.top-posts-promo-link:hover .top-posts-promo-link-arrow {
  transform: translateX(4px);
}

/* ── CONTENT PAGES (page.php / single.php / archive.php) ── */
.content-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}
.content-title {
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #ffffff;
  background: #111;
  display: block;
  padding: 0.3rem 0.75rem 0.3rem 1rem;
  border-left: 4px solid #e8ff00;
  border-radius: 0 4px 4px 0;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}
.content-byline {
  font-size: 0.95rem;
  color: #666;
  margin: 0 0 1.5rem;
}
.content-byline a {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
}
.single-thumbnail {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 2rem;
  background: #f0f0f0;
}
.single-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 600px) {
  .single-thumbnail img {
    height: auto;
    object-fit: unset;
  }
}
.content-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1.15rem;
  color: #888;
  margin-bottom: 1rem;
}
.content-cat {
  background: #111;
  color: #e8ff00;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: 3px;
  text-decoration: none;
}
.content-cat:hover { background: #333; }
.content-body {
  font-size: 1rem;
  line-height: 1.8;
  color: #222;
}
.content-body h2, .content-body h3, .content-body h4 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2rem 0 0.75rem;
  color: #e8ff00;
  background: #111;
  display: block;
  padding: 0.15rem 0.5rem 0.15rem 0.8rem;
  border-left: 3px solid #e8ff00;
  border-radius: 0 3px 3px 0;
}
.content-body h2 { font-size: 1.35rem; }
.content-body h3 { font-size: 1.1rem; }
.content-body h4 { font-size: 0.95rem; }
.content-body p { margin-bottom: 1.25rem; }
.content-body ol, .content-body ul {
  margin: 0 0 1.25rem;
  padding-left: 2.5em;
}
.content-body li { margin-bottom: 0.4rem; }
.content-body ol { list-style-position: outside; }
.content-body a { color: #111; text-decoration: underline; }
.content-body h2 a,
.content-body h3 a,
.content-body h4 a { color: inherit; text-decoration: none; }
.content-body img { max-width: 100%; width: auto; height: auto; border-radius: 6px; }
.content-body figure { max-width: 100%; margin: 0 0 1.25rem; }
.content-body figure img { max-width: 100%; width: 100%; height: auto; }
.content-body .wp-block-image,
.content-body .wp-block-image figure { max-width: 100% !important; }
.content-body .wp-block-image img { max-width: 100% !important; width: auto; height: auto; }
.content-body pre, .content-body code {
  background: #f5f5f5;
  color: #222;
  border-radius: 4px;
  font-size: 0.88em;
}
.content-body pre { padding: 1rem; overflow-x: auto; margin-bottom: 1.25rem; }
.content-body code { padding: 0.1em 0.35em; }


/* ── AD UNIT ── */
.ad-unit {
  max-width: 728px;
  margin: 2rem auto;
  overflow: hidden;
}

/* ── HOUSE AD (1-in-5 rotation, Easy English Lessons branding) ── */
.house-ad {
  display: flex;
  align-items: center;
  background: linear-gradient( 135deg, #312e81 0%, #7c3aed 100% );
  border-radius: 8px;
  padding: 1.75rem 2rem;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  border: none;
}
/* Subtle decorative circle, matches EEL's site aesthetic */
.house-ad::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -8%;
  width: 280px;
  height: 280px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
  pointer-events: none;
}
.house-ad:hover { opacity: 0.92; }
.house-ad-label {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.house-ad-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}
.house-ad-brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  width: 50px;
  overflow: hidden;
}
.house-ad-eel-logo {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: block;
  object-fit: cover;
}
.house-ad-divider {
  width: 1px;
  height: 65px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}
.house-ad-text {
  flex: 1;
  min-width: 0;
}
.house-ad-headline {
  font-size: 1.45rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
}
/* EEL default: electric yellow accent */
.house-ad-headline span { color: #FDE047; }
.house-ad-sub {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  margin-top: 0.4rem;
}
.house-ad-cta {
  background: #FDE047;
  color: #1a1230;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
  letter-spacing: 0.02em;
}
.house-ad:hover .house-ad-cta { background: #FEF08A; }

/* Backup: fire red, lemon yellow accent */
.house-ad--backup { background: linear-gradient( 135deg, #7f1d1d 0%, #ef4444 100% ); }
.house-ad--backup .house-ad-headline span { color: #FEF08A; }
.house-ad--backup .house-ad-cta { background: #FEF08A; color: #7f1d1d; }
.house-ad--backup:hover .house-ad-cta { background: #fef9c3; }

/* Devtools: near-black to electric blue, electric cyan accent */
.house-ad--devtools { background: linear-gradient( 135deg, #0c0a1a 0%, #1d4ed8 100% ); }
.house-ad--devtools .house-ad-headline span { color: #67E8F9; }
.house-ad--devtools .house-ad-cta { background: #67E8F9; color: #0c0a1a; }
.house-ad--devtools:hover .house-ad-cta { background: #a5f3fc; }

/* SEO: deep space to AI purple, hot pink accent */
.house-ad--seo { background: linear-gradient( 135deg, #0f0f23 0%, #7c3aed 100% ); }
.house-ad--seo .house-ad-headline span { color: #F472B6; }
.house-ad--seo .house-ad-cta { background: #F472B6; color: #0f0f23; }
.house-ad--seo:hover .house-ad-cta { background: #f9a8d4; }
@media ( max-width: 600px ) {
  .house-ad-brand   { display: none; }
  .house-ad-divider { display: none; }
  .house-ad         { padding: 1.5rem 1.25rem; min-height: 120px; }
  .house-ad-headline { font-size: 1.15rem; }
  .house-ad-cta     { padding: 0.65rem 1rem; font-size: 0.85rem; }
}


/* ── BLOG FEED (home.php) ── */
.blog-feed {
  display: flex;
  flex-direction: column;
}

.blog-feed-item {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 2px solid #111;
}
.blog-feed-item:first-child { padding-top: 0; }
.blog-feed-item:last-child { border-bottom: none; }

.blog-feed-thumb {
  flex-shrink: 0;
  width: 180px;
  border-radius: 6px;
  background: #f0f0f0;
  align-self: flex-start;
  line-height: 0;
}
.blog-feed-thumb img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  transition: opacity 0.15s;
}
.blog-feed-thumb:hover img { opacity: 0.85; }

.blog-feed-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.blog-feed-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: #cc0000;
  font-weight: 700;
}

.blog-feed-title {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #111;
  margin: 0;
}
.blog-feed-title a { color: inherit; }
.blog-feed-title a:hover { color: #0088ff; }

.blog-feed-num {
  font-size: 0.65rem;
  font-weight: 800;
  color: #e8ff00;
  background: #111;
  display: inline-block;
  padding: 0.18rem 0.5rem;
  border-radius: 2px;
  letter-spacing: 0.06em;
  margin-right: 0.4rem;
  vertical-align: middle;
  transform: translateY(-2px);
}

.blog-feed-intro {
  color: #555;
  font-size: 1rem;
  max-width: 640px;
  margin: 0.25rem 0 1.25rem;
}

.posts-search {
  margin: 0.5rem 0 1.5rem;
}

.blog-feed-excerpt {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.65;
  margin: 0;
}

.blog-feed-read-more {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #111;
  border-bottom: 1.5px solid #111;
  padding-bottom: 1px;
  align-self: flex-start;
  transition: color 0.15s, border-color 0.15s;
}
.blog-feed-read-more:hover { color: #0088ff; border-color: #0088ff; }

@media (max-width: 540px) {
  .blog-feed-item { flex-direction: column; gap: 1rem; }
  .blog-feed-thumb { width: 100%; }
  .blog-feed-thumb img { width: auto; max-width: 100%; max-height: 200px; margin: 0 auto; }
}

/* ── CTA ── */
.cta { background: #e8ff00; padding: 4rem 1.5rem; text-align: center; }
.cta h2 { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; color: #111; letter-spacing: -0.03em; margin-bottom: 0.75rem; }
.cta p { color: #444; font-size: 0.95rem; margin-bottom: 2rem; line-height: 1.6; }
.btn-black { background: #111; color: #e8ff00; font-weight: 800; font-size: 0.9rem; padding: 0.85rem 2rem; border-radius: 4px; display: inline-block; }
.btn-black:hover { background: #333; }

/* ── SEARCH RESULTS ── */
.content-title span { color: #e8ff00; }
.search-results { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }
.search-result-row { display: flex; gap: 1.25rem; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 2px solid #ccc; }
.search-result-thumb { flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; border-radius: 4px; display: block; }
.search-result-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-result-text { flex: 1; min-width: 0; }
.search-result-title { font-weight: 700; font-size: 1.05rem; color: #111; display: block; margin-bottom: 0.5rem; line-height: 1.35; }
.search-result-title:hover { color: #0080ff; }
.search-result-excerpt { font-size: 0.88rem; color: #555; line-height: 1.6; }
.search-result-excerpt p { margin: 0; }
.search-no-results { color: #888; margin-top: 2rem; }
@media (max-width: 540px) {
  .search-result-row { flex-direction: column; gap: 0.75rem; padding-bottom: 1.25rem; border-bottom: 2px solid #ccc; }
  .search-result-thumb { width: 100%; height: auto; }
  .search-result-thumb img { width: 100%; height: 160px; object-fit: cover; border-radius: 4px; }
  .search-result-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
}

/* ── FOOTER ── */
footer { background: #ffe600; padding: 2.5rem 1.5rem 5rem; text-align: center; }
.footer-links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.footer-links a { color: #111; font-size: 0.95rem; font-weight: 500; }
.footer-links a:hover { color: #444; }
footer p { color: #111; font-size: 1.8rem; }

/* ── CLOUDSCALE AI SEO PLUGIN ── */
.cs-rc-style-3 {
  background: #111 !important;
  border: 1.5px solid #2a2a2a !important;
  border-top: 3px solid #e8ff00 !important;
  border-radius: 6px !important;
  padding: 1.25rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  box-shadow: none !important;
}
.cs-rc-title {
  color: #e8ff00 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: transparent !important;
  padding: 0 0 1rem !important;
  border: none !important;
}
.cs-rc-list {
  margin: 0 !important;
  padding: 0 0 0 1.25rem !important;
}
.cs-rc-list li {
  color: #fff !important;
  border-color: #2a2a2a !important;
  padding: 0.75rem 0 !important;
  background: transparent !important;
}
.cs-rc-item-title {
  color: #e8ff00 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.35rem !important;
  background: transparent !important;
}
.cs-rc-item-content {
  color: #ffffff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  background: transparent !important;
}
.cs-rc-link {
  color: #111111 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.15s !important;
}
.cs-rc-link:hover {
  color: #0088ff !important;
}
.cs-rc-block li span {
  color: #111111 !important;
}