/*
Theme Name:   GeneratePress Child — OurGardenWorks
Theme URI:    https://ourgardenworks.com
Description:  Child theme for GeneratePress — OurGardenWorks.com. Scoped strictly to single post hero header and pillar post components. Does NOT touch homepage, navigation, global loops, widgets, or third-party plugins.
Author:       Jeanne Keith F.
Author URI:   https://ourgardenworks.com/about-us/
Template:     generatepress
Version:      5.0.0
Text Domain:  generatepress-child
*/

/*
 ═══════════════════════════════════════════════════════════
  SCOPE OF THIS FILE — READ BEFORE EDITING
  ─────────────────────────────────────────────────────────
  ✅ INCLUDED (scoped, safe):
     - CSS custom properties (design tokens only)
     - Single post hero header (.ogw-post-hero)
     - Single post body typography (.single .entry-content)
     - Pillar post components (.ogw-* classes — only activated
       when you manually add these classes in GenerateBlocks)
     - Content link underlines (.entry-content p a)
     - Author bio box (.author-box) — single post only

  ❌ NOT INCLUDED (removed — was causing plugin conflicts):
     - Navigation / .site-header / .main-navigation
     - Homepage GenerateBlocks containers
     - Article cards / .entry-title / .entry-summary
     - Read More button (.more-link)
     - Category grid / widgets / sidebar
     - Pagination
     - Footer
     - body / .site-content global overrides
     - .content-area / .inside-article global overrides
     - Everything that touches the homepage or plugin output
 ═══════════════════════════════════════════════════════════
*/


/* ════════════════════════════════════════════════════════════
   SECTION 0 — CSS CUSTOM PROPERTIES
   Safe — these are just variables, they affect nothing
   until a selector actually uses them.
════════════════════════════════════════════════════════════ */
:root {
  --ogw-green:         #3d7a3a;
  --ogw-green-dark:    #2a5628;
  --ogw-green-light:   #e8f4e6;
  --ogw-green-badge:   #d0eacb;
  --ogw-green-border:  #b5d4b0;
  --ogw-bg:            #ffffff;
  --ogw-bg-soft:       #f5f5f0;
  --ogw-border:        #e8e8e2;
  --ogw-text-h:        #111111;
  --ogw-text-body:     #2b2b2b;
  --ogw-text-meta:     #666660;
  --ogw-text-muted:    #999990;
  --ogw-amber:         #d97706;
  --ogw-amber-bg:      #fffbeb;
  --ogw-amber-dark:    #92400e;
  --ogw-red:           #b91c1c;
  --ogw-red-bg:        #fff5f5;
  --ogw-radius-sm:     6px;
  --ogw-radius-md:     10px;
  --ogw-radius-lg:     16px;
  --ogw-radius-xl:     999px;
  --ogw-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --ogw-shadow-md:     0 4px 16px rgba(0,0,0,0.08);
  --ogw-font-serif:    'Lora', Georgia, 'Times New Roman', serif;
  --ogw-font-head:     'Merriweather', Georgia, serif;
  --ogw-font-ui:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}


/* ════════════════════════════════════════════════════════════
   SECTION 1 — SINGLE POST HERO HEADER
   Backlinko-style: green background runs full-width behind
   title + author + featured image as one unified block.
   Scoped: only fires when .ogw-post-hero is in the DOM.
   Injected via GeneratePress Elements Hook on posts only.
════════════════════════════════════════════════════════════ */

/* ── OUTER WRAPPER — full-width green band ── */
.ogw-post-hero {
  background: var(--ogw-green-light); /* light green tint */
  padding: 2.5rem 0 0;               /* no bottom padding — image sits flush */
  margin-bottom: 0;
  border-bottom: none;
}

/* ── INNER — constrained width, centres content ── */
.ogw-post-hero__inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── META ROW — category badge + read time ── */
.ogw-post-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}

/* Category badge — semi-transparent white pill on green */
.ogw-post-hero__badge {
  display: inline-block;
  background: var(--ogw-green-badge);
  color: var(--ogw-green-dark);
  padding: 0.28rem 0.9rem;
  border-radius: var(--ogw-radius-xl);
  font-family: var(--ogw-font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.15s ease;
  border: 1px solid transparent;
}

.ogw-post-hero__badge:hover {
  background-color: var(--ogw-green-border);
  color: var(--ogw-green-dark);
}

/* Read time — white muted text */
.ogw-post-hero__readtime {
  font-family: var(--ogw-font-ui);
  font-size: 0.8rem;
  color: var(--ogw-text-meta);
  font-weight: 500;
}

/* ── POST TITLE — large white headline ── */
.ogw-post-hero h1,
.ogw-post-hero__title {
  font-family: var(--ogw-font-head);
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  font-weight: 900;
  color: var(--ogw-text-h);          /* dark on light bg */
  line-height: 1.15;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
}

/* ── EXCERPT / SUBTITLE ── */
.ogw-post-hero__sub {
  font-family: var(--ogw-font-serif);
  font-size: 1.05rem;
  color: var(--ogw-text-body);       /* dark on light bg */
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 640px;
  font-style: normal;
}

/* ── AUTHOR ROW — avatar + name + role ── */
.ogw-post-hero__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--ogw-green-border);
  flex-wrap: wrap;
}

/* Author name + role block */
.ogw-post-hero__author-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* Affiliate disclosure — inline, right of author, small */
/* Disclosure moved below featured image — hidden from hero row */
.ogw-post-hero__disclosure {
  display: none !important;
}

.ogw-post-hero__avatar {
  flex-shrink: 0;
}

.ogw-post-hero__avatar img {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid var(--ogw-green-border) !important;
}

/* Fallback initials — white ring on green */
.ogw-post-hero__avatar-fallback {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ogw-green);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ogw-font-ui);
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 2px solid var(--ogw-green-border);
}

.ogw-post-hero__author-name {
  font-family: var(--ogw-font-ui);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ogw-text-h);
  line-height: 1.3;
}

/* ── Written by / Reviewed by lines ── */
.ogw-post-hero__byline,
.ogw-post-hero__reviewer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--ogw-font-ui);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ogw-post-hero__byline { margin-bottom: 0.15rem; }

.ogw-post-hero__byline-label {
  color: var(--ogw-text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.ogw-post-hero__author-link {
  font-weight: 700;
  color: var(--ogw-text-h) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.15s !important;
}

.ogw-post-hero__author-link:hover { color: var(--ogw-green) !important; }

.ogw-post-hero__reviewer-link {
  font-weight: 600;
  color: var(--ogw-green) !important;
  text-decoration: none !important;
  border-bottom: none !important;
  transition: color 0.15s !important;
}

.ogw-post-hero__reviewer-link:hover {
  color: var(--ogw-green-dark) !important;
  text-decoration: underline !important;
}

/* Reviewer Gravatar — 28px, inline with name */
.ogw-post-hero__reviewer-avatar-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.ogw-post-hero__reviewer-avatar,
.ogw-post-hero__reviewer-avatar-link img {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
  vertical-align: middle !important;
  border: 1.5px solid var(--ogw-green-border) !important;
  margin-right: 0.1rem !important;
  transition: border-color 0.15s !important;
}

.ogw-post-hero__reviewer-avatar-link:hover img {
  border-color: var(--ogw-green) !important;
}

.ogw-post-hero__author-role {
  font-family: var(--ogw-font-ui);
  font-size: 0.73rem;
  color: var(--ogw-text-meta);
  margin-top: 0.1rem;
  line-height: 1.4;
}

/* Author name — links to author archive page */
.ogw-post-hero__author-link {
  color: var(--ogw-text-h) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  border-bottom: none !important;
  transition: color 0.15s ease !important;
}

.ogw-post-hero__author-link:hover {
  color: var(--ogw-green) !important;
}

/* Avatar — wrapped in <a> so it's clickable */
.ogw-post-hero__avatar-link {
  flex-shrink: 0;
  display: block;
  text-decoration: none;
}

.ogw-post-hero__avatar-link img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 2px solid var(--ogw-green-border) !important;
  transition: border-color 0.15s ease !important;
}

.ogw-post-hero__avatar-link:hover img {
  border-color: var(--ogw-green) !important;
}

/* OurGardenWorks.com site link in role line */
.ogw-post-hero__site-link {
  color: var(--ogw-green) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  border-bottom: none !important;
  transition: color 0.15s ease !important;
}

.ogw-post-hero__site-link:hover {
  color: var(--ogw-green-dark) !important;
  text-decoration: underline !important;
}

/* ── FEATURED IMAGE — FLOATING OVERLAY BETWEEN HERO AND CONTENT ──
   The image sits OUTSIDE the hero (rendered after the hook closes)
   but OVERLAPS it using a negative margin-top.
   The content body gets matching padding-top to clear the image.

   Layout stack:
   ┌─────────────────────────────────┐
   │  .ogw-post-hero (green tint)    │  ← hero ends here
   │               ╔═══════════╗     │
   │               ║           ║     │  ← image overlaps hero bottom
   └───────────────║   IMAGE   ║─────┘
                   ║           ║
   ┌───────────────║           ║─────┐
   │ .entry-content╚═══════════╝     │  ← content clears image with padding-top
   │ Article body text begins...     │
   └─────────────────────────────────┘

   SETUP:
   - GP Customizer → Featured Images → Posts → Location: "Below Title"
   - Uncheck "Display padding around images"
   - Alignment: None
   - The hook outputs the hero. GP outputs the image right after.
── */

/* ── IMAGE WRAPPER — floats up over hero bottom edge ──
   Negative margin-top pulls image up to overlap hero by 40px.
   Z-index 10 floats it above hero background AND any affiliate notice
   that may be between them in the DOM. */
.single .post-image,
.single .featured-image,
.single .featured-image.above-entry-content,
.single .post-image.grid-image-container,
.single figure.wp-block-post-featured-image,
.single .entry-image,
.single .entry-image-before-header {
  max-width: 780px !important;
  margin: -40px auto 0 !important;
  padding: 0 1.5rem !important;
  position: relative !important;
  z-index: 10 !important;
  text-align: unset !important;
  line-height: 0 !important;
  display: block !important;
}

/* ── THE IMAGE ITSELF ── */
.single .post-image img,
.single .featured-image img,
.single .wp-post-image,
.single figure.wp-block-post-featured-image img,
.single .entry-image img,
.single .entry-image-before-header img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  border-radius: var(--ogw-radius-lg) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
  background: var(--ogw-bg-soft) !important;
}

/* ── CONTENT BODY — padding clears the 40px image overlap ──
   40px overlap + 1.5rem breathing room = comfortable clearance */
.single .entry-content {
  padding-top: calc(40px + 1.5rem) !important;
  margin-top: 0 !important;
}

/* ── Hide any duplicate image inside entry-content ── */
.single .entry-content > .wp-post-image:first-child,
.single .entry-content > figure:first-child > img[class*="wp-image"],
.single .entry-content .post-image {
  display: none !important;
}

/* ── GP entry-title removed via PHP (functions.php ─── 10) ──
   generate_post_title and generate_show_entry_header filters prevent
   the duplicate H1 and entry-meta from being rendered at all on single posts.
   No CSS hiding needed — the elements are never output to the browser. */


/* ════════════════════════════════════════════════════════════
   SECTION 2 — SINGLE POST BODY TYPOGRAPHY
   Scoped to .single — never fires on homepage, archives,
   widgets, or any plugin output outside single posts.
════════════════════════════════════════════════════════════ */

.single .entry-content {
  font-family: var(--ogw-font-ui);
  font-size: 1.2rem;                 /* 19.2px — bumped from 18px */
  line-height: 1.75;
  color: #1a1a1a;
}

.single .entry-content p {
  font-family: var(--ogw-font-ui);
  margin-bottom: 1.6rem;
  color: #1a1a1a;
  line-height: 1.75;
  font-size: 1.2rem;
}

.single .entry-content h2 {
  font-family: var(--ogw-font-ui);
  font-size: clamp(1.55rem, 3vw, 2.05rem);    /* up from 1.35-1.75 */
  font-weight: 800;
  color: #111111;
  line-height: 1.25;
  margin: 3rem 0 0.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--ogw-border);
  letter-spacing: -0.02em;
}

.single .entry-content h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.single .entry-content h3 {
  font-family: var(--ogw-font-ui);
  font-size: 1.45rem;                /* up from 1.25 */
  font-weight: 700;
  color: #111111;
  margin: 2.25rem 0 0.65rem;
  line-height: 1.3;
}

.single .entry-content h4 {
  font-family: var(--ogw-font-ui);
  font-size: 1.2rem;                 /* up from 1rem */
  font-weight: 700;
  color: #111111;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 1.75rem 0 0.5rem;
}

.single .entry-content strong {
  color: #111111;
  font-weight: 700;
}

.single .entry-content em { font-style: italic; }

.single .entry-content a {
  color: var(--ogw-green);
  transition: color 0.15s ease;
}

.single .entry-content a:hover { color: var(--ogw-green-dark); }

.single .entry-content img {
  border-radius: var(--ogw-radius-md);
  max-width: 100%;
  height: auto;
}

.single .entry-content figcaption,
.single .wp-caption-text {
  font-family: var(--ogw-font-ui);
  font-size: 0.78rem;
  color: var(--ogw-text-muted);
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

.single .entry-content hr {
  border: none;
  border-top: 1px solid var(--ogw-border);
  margin: 2.5rem 0;
}




/* ════════════════════════════════════════════════════════════
   PLUGIN PROTECTION — WP PROS & CONS (Mighty Pros & Cons)
   Plugin folder: /wp-content/plugins/mighty-pros-cons/
   
   ACTUAL LIVE OUTPUT (from fetching ourgardenworks.com/best-neem-oil/):
   The plugin renders as a Gutenberg block with wrapper:
   .wp-block-mighty-blocks-pros-cons
     img (thumbs icon)
     h4 "Pros" / "Cons"
     ul > li (plain, no class)
   
   The .wp-pros-cons / .wp-pros-cons-list classes from the plugin 
   source are NOT present in the live rendered HTML.
   The live output uses plain <ul><li> inside the GB block wrapper.
   
   FIX: Target .wp-block-mighty-blocks-pros-cons ul li
   to reset our green dot and restore plain list styling.
════════════════════════════════════════════════════════════ */

/* ── LIVE OUTPUT FIX: plain ul inside Gutenberg block wrapper ── */
.wp-block-mighty-blocks-pros-cons ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
  counter-reset: none !important;
  display: block !important;
}

.wp-block-mighty-blocks-pros-cons ul li {
  display: list-item !important;
  position: static !important;
  padding-left: 0 !important;
  margin-bottom: 0.4rem !important;
  gap: 0 !important;
  align-items: normal !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: #2b2b2b !important;
  list-style-type: disc !important;
}

/* Kill our green dot on these li elements */
.wp-block-mighty-blocks-pros-cons ul li::before,
.wp-block-mighty-blocks-pros-cons ul li:before {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  position: static !important;
  border-radius: 0 !important;
  transform: none !important;
}

/* Font match for headings inside the block */
.wp-block-mighty-blocks-pros-cons h4 {
  font-family: var(--ogw-font-ui) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
  text-align: center !important;
  margin-bottom: 0.5rem !important;
  text-transform: none !important;
}

/* Center the thumbs icon */
.wp-block-mighty-blocks-pros-cons img[src*="thumbs"] {
  display: block !important;
  margin: 0 auto !important;
}



/* ── STEP 1: Fix our green dot overriding the plugin's SVG icons ──
   The plugin li:before uses: content:'' + padding-right:25px + background-image SVG
   We only need to kill our green background-color and circle border-radius.
   We must NOT override background-image or the icon disappears. */
.wp-pros-cons ul.wp-pros-cons-list li::before,
.wp-pros-cons ul.wp-pros-cons-list li:before {
  background-color: transparent !important;  /* kill our green dot fill */
  border-radius: 0 !important;               /* not a circle */
  width: auto !important;                    /* not 7px */
  height: auto !important;                   /* not 7px */
  min-width: 0 !important;
  margin-top: 0 !important;                  /* not 0.38rem */
  position: static !important;
  display: inline-block !important;
  flex-shrink: unset !important;
  /* Restore plugin's own values */
  content: '' !important;
  padding-right: 25px !important;
  background-size: 20px 20px !important;
  background-position: 1px center !important;
  background-repeat: no-repeat !important;
}

/* ── STEP 1b: Force absolute icon URLs ──
   Plugin's own CSS uses relative paths "../assets/icons/check-solid.svg"
   which only resolve correctly when loaded from dist/ folder.
   We force absolute paths here to guarantee icons render. */
.wp-pros-cons .pros-content ul.wp-pros-cons-list li::before,
.wp-pros-cons .pros-content ul.wp-pros-cons-list li:before {
  background-image: url('/wp-content/plugins/mighty-pros-cons/assets/icons/check-solid.svg') !important;
}

.wp-pros-cons .cons-content ul.wp-pros-cons-list li::before,
.wp-pros-cons .cons-content ul.wp-pros-cons-list li:before {
  background-image: url('/wp-content/plugins/mighty-pros-cons/assets/icons/times-solid.svg') !important;
}

/* ── STEP 2: Restore plugin ul ── */
.wp-pros-cons ul.wp-pros-cons-list {
  list-style: none !important;
  padding: 0 20px !important;
  margin: 0 !important;
  display: block !important;
  counter-reset: none !important;
}

/* ── STEP 3: Restore plugin li ── */
.wp-pros-cons ul.wp-pros-cons-list li {
  display: block !important;
  position: relative !important;
  margin: 10px 0 !important;
  width: 100% !important;
  word-break: break-word !important;
  gap: 0 !important;
  align-items: normal !important;
  flex: none !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: #2b2b2b !important;
}

/* ── STEP 4: Restore wppc-view1 circle overlap layout ──
   Plugin uses calc(100px/2) = 50px margin adjustments */
.wp-pros-cons.wppc-view1 .wppc-boxs {
  margin-top: calc(100px / 2) !important;
}

.wp-pros-cons.wppc-view1 .wppc-boxs .wppc-header {
  margin-bottom: 20px !important;
  margin-top: calc(-100px / 2) !important;
  text-align: center !important;
}

.wp-pros-cons.wppc-view1 .wppc-boxs .wppc-header .wppc-content-title {
  margin-top: 10px !important;
}

/* ── STEP 5: Circle icon container ── */
.wp-pros-cons .wppc-box-symbol {
  width: 100px !important;
  height: 100px !important;
  position: relative !important;
  border-radius: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.wp-pros-cons .pros-content .wppc-box-symbol {
  color: #fff !important;
  background: #27C110 !important;
}

.wp-pros-cons .cons-content .wppc-box-symbol {
  color: #fff !important;
  background: #f00 !important;
}

.wp-pros-cons .wppc-box-symbol img {
  width: 30px !important;
  display: inline-block !important;
  height: 100% !important;
  vertical-align: middle !important;
}

/* ── STEP 6: Font match ── */
.wp-pros-cons .wppc-content-title {
  font-family: var(--ogw-font-ui) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

/* ── Generic catch-all: other classed lists NOT the plugin ── */
.single .entry-content ul[class]:not(.wp-block-list):not(.wp-pros-cons-list),
.single .entry-content ol[class]:not(.wp-block-list) {
  padding-left: 1.25rem !important;
  counter-reset: none !important;
}

.single .entry-content ul[class]:not(.wp-block-list):not(.wp-pros-cons-list) li,
.single .entry-content ol[class]:not(.wp-block-list) li {
  display: list-item !important;
  position: static !important;
  gap: unset !important;
  align-items: unset !important;
}

.single .entry-content ul[class]:not(.wp-block-list):not(.wp-pros-cons-list) li::before,
.single .entry-content ol[class]:not(.wp-block-list) li::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* ════════════════════════════════════════════════════════════
   SECTION 3 — NUMBERED LISTS (circle numbers)
   Scoped to .single .entry-content only.
════════════════════════════════════════════════════════════ */

.single .entry-content ol:not([class]),
.single .entry-content ol.wp-block-list {
  list-style: none !important;
  padding-left: 2.75rem !important;
  margin-bottom: 1.75rem !important;
  counter-reset: ogw-ol !important;
}

.single .entry-content ol:not([class]) li,
.single .entry-content ol.wp-block-list li {
  counter-increment: ogw-ol !important;
  display: block !important;
  position: relative !important;
  margin-bottom: 0.5rem !important;  /* tighter between numbered items */
  font-family: var(--ogw-font-ui) !important;
  font-size: 1rem !important;
  line-height: 1.55 !important;
  color: #1a1a1a !important;
  padding-left: 0 !important;
}

/* Circle number — only on plain WP lists, never on plugin lists */
.single .entry-content ol:not([class]) li::before,
.single .entry-content ol.wp-block-list li::before {
  content: counter(ogw-ol) !important;
  position: absolute !important;
  left: -2.75rem !important;
  top: 0.05rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--ogw-green) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex-shrink: unset !important;
}

/* Nested ordered list */
.single .entry-content ol:not([class]) ol:not([class]),
.single .entry-content ol.wp-block-list ol {
  counter-reset: ogw-ol-nested !important;
  margin-top: 0.65rem !important;
  padding-left: 2.5rem !important;
}

.single .entry-content ol:not([class]) ol li,
.single .entry-content ol.wp-block-list ol li {
  counter-increment: ogw-ol-nested !important;
}

.single .entry-content ol:not([class]) ol li::before,
.single .entry-content ol.wp-block-list ol li::before {
  content: counter(ogw-ol-nested) !important;
  background: var(--ogw-green-badge) !important;
  color: var(--ogw-green-dark) !important;
  width: 22px !important;
  height: 22px !important;
  left: -2.5rem !important;
  font-size: 0.72rem !important;
}


/* ════════════════════════════════════════════════════════════
   SECTION 4 — BULLET LISTS (green dot)
   Scoped to .single .entry-content only.
════════════════════════════════════════════════════════════ */

.single .entry-content ul:not([class]):not(.mpc-list):not(.mpc-pros-list):not(.mpc-cons-list),
.single .entry-content ul.wp-block-list {
  list-style: none !important;
  padding-left: 0.5rem !important;
  margin-bottom: 1.5rem !important;
}

.single .entry-content ul:not([class]):not(.mpc-list):not(.mpc-pros-list):not(.mpc-cons-list) li,
.single .entry-content ul.wp-block-list li {
  display: list-item !important;
  list-style-type: none !important;
  position: relative !important;
  padding-left: 1.25rem !important;   /* tighter gap dot-to-text */
  margin-bottom: 0.25rem !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 1.1rem !important;     /* match body context */
  line-height: 1.7 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
}

/* Green dot — left edge of li, centered to first line */
.single .entry-content ul:not([class]):not(.mpc-list):not(.mpc-pros-list):not(.mpc-cons-list) li::before,
.single .entry-content ul.wp-block-list li::before {
  content: '' !important;
  position: absolute !important;
  left: 0.15rem !important;          /* close to left edge */
  top: 0.75em !important;            /* aligns with first line cap-height */
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--ogw-green) !important;
  display: block !important;
  transform: translateY(-50%) !important;
}


/* ════════════════════════════════════════════════════════════
   SECTION 5 — BLOCKQUOTE
   Scoped to .single .entry-content only.
════════════════════════════════════════════════════════════ */

.single .entry-content blockquote {
  border-left: 4px solid var(--ogw-green);
  background: var(--ogw-green-light);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--ogw-radius-md) var(--ogw-radius-md) 0;
}

.single .entry-content blockquote p {
  font-family: var(--ogw-font-ui) !important;
  font-size: 1.05rem !important;
  font-style: italic !important;
  color: #1e3d1c !important;
  margin-bottom: 0 !important;
  line-height: 1.7 !important;
}


/* ════════════════════════════════════════════════════════════
   SECTION 6 — CONTENT LINK UNDERLINES
   Scoped to .entry-content — fires on single posts only
   when content is inside the standard GP entry-content wrapper.
   Does NOT affect nav links, widgets, or homepage GB blocks.
════════════════════════════════════════════════════════════ */

.single .entry-content p a,
.single .entry-content li a {
  border-bottom: 1px dashed rgba(61,122,58,0.5);
  text-decoration: none;
  color: var(--ogw-green);
  transition: border-color 0.15s ease, color 0.15s ease;
  /* Force inline behaviour — never become a flex item or stretch */
  display: inline !important;
  flex: none !important;
  flex-grow: 0 !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  width: auto !important;
}

.single .entry-content p a:hover,
.single .entry-content li a:hover {
  border-bottom: 1px solid var(--ogw-green);
  color: var(--ogw-green-dark);
}




/* ════════════════════════════════════════════════════════════
   BREADCRUMB
   Supports GP native, Rank Math, Yoast, and manual fallback.
   Output via hook ABOVE the hero banner.
════════════════════════════════════════════════════════════ */

/* Wrapper injected by hook */
.ogw-breadcrumb-wrap {
  background: var(--ogw-bg);
  border-bottom: 1px solid var(--ogw-border);
}

.ogw-breadcrumb-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  font-family: var(--ogw-font-ui);
  font-size: 0.8rem;
  color: var(--ogw-text-muted);
}

/* Manual fallback */
.ogw-breadcrumb-manual a {
  color: var(--ogw-green);
  text-decoration: none;
}

.ogw-breadcrumb-manual a:hover {
  color: var(--ogw-green-dark);
  text-decoration: underline;
}

.ogw-breadcrumb-manual .sep {
  margin: 0 0.3rem;
  color: var(--ogw-text-muted);
}

.single .breadcrumb-trail,
.single .rank-math-breadcrumb,
.single .yoast-breadcrumb,
.single .breadcrumbs {
  font-family: var(--ogw-font-ui);
  font-size: 0.82rem;
  color: var(--ogw-text-muted);
  padding: 0.75rem 0 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
}

.single .breadcrumb-trail a,
.single .rank-math-breadcrumb a,
.single .yoast-breadcrumb a,
.single .breadcrumbs a {
  color: var(--ogw-green);
  text-decoration: none;
  transition: color 0.15s ease;
  border-bottom: none;
}

.single .breadcrumb-trail a:hover,
.single .rank-math-breadcrumb a:hover,
.single .yoast-breadcrumb a:hover,
.single .breadcrumbs a:hover {
  color: var(--ogw-green-dark);
  text-decoration: underline;
}

/* Separator between crumbs */
.single .breadcrumb-trail .sep,
.single .rank-math-breadcrumb .separator,
.single .breadcrumbs .sep {
  color: var(--ogw-text-muted);
  margin: 0 0.35rem;
}

/* Current page — not a link */
.single .breadcrumb-trail .trail-end,
.single .rank-math-breadcrumb .last,
.single .breadcrumbs span:last-child {
  color: var(--ogw-text-meta);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   SECTION 7 — AUTHOR BIO BOX
   Scoped — .author-box only exists on single post pages
   as output by GP's author bio feature. Not on homepage.
════════════════════════════════════════════════════════════ */

.single .author-box,
.author-box {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  padding: 1.5rem !important;
  margin-top: 2.5rem !important;
  background: var(--ogw-bg-soft) !important;
  border: 1px solid var(--ogw-border) !important;
  border-radius: var(--ogw-radius-md) !important;
  box-shadow: var(--ogw-shadow-sm) !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 1rem !important;
}

.author-box .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0;
  flex-shrink: 0;
}

.author-box .avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  max-width: unset;
}

.author-title,
h4.author-title {
  font-family: var(--ogw-font-ui);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ogw-text-h);
  margin-bottom: 0.15rem;
}

.single .author-description,
.author-description {
  font-family: var(--ogw-font-ui) !important;
  font-size: 1rem !important;
  color: #1a1a1a !important;
  line-height: 1.75 !important;
  margin-bottom: 0.5rem !important;
}

.author-links a {
  font-size: 1.3rem;
  line-height: 1;
  float: none;
  display: inline-block;
  color: var(--ogw-green);
  margin-left: 0.5rem;
  transition: color 0.15s ease;
}

.author-links a:hover { color: var(--ogw-green-dark); }

@media (max-width: 640px) {
  .author-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
  }
  .author-box .avatar,
  .author-box .avatar img {
    width: 72px;
    height: 72px;
    margin-bottom: 0.25rem;
    margin-top: 0;
  }
}


/* ════════════════════════════════════════════════════════════
   SECTION 8 — PILLAR POST COMPONENTS
   All classes prefixed .ogw- and only activated when you
   manually add these class names inside GenerateBlocks.
   They are completely inert until used — no global impact.

   HOW TO USE:
   Add class "ogw-pillar" to the outer GB Container block
   on a pillar post page. Then add individual component
   classes to each inner block as needed.
════════════════════════════════════════════════════════════ */

/* 8a — PILLAR HERO */
.ogw-hero {
  background: var(--ogw-green-light);
  border-bottom: 1px solid var(--ogw-green-border);
  padding: 2.75rem 2rem 2.25rem;
  margin-bottom: 2.5rem;
}

.ogw-hero h1 {
  font-family: var(--ogw-font-head);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--ogw-text-h);
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.ogw-hero__badge {
  display: inline-block;
  background: var(--ogw-green-badge);
  color: var(--ogw-green-dark);
  padding: 0.28rem 0.9rem;
  border-radius: var(--ogw-radius-xl);
  font-family: var(--ogw-font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 0.85rem;
}

.ogw-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.ogw-hero__readtime {
  font-family: var(--ogw-font-ui);
  font-size: 0.82rem;
  color: var(--ogw-text-meta);
  font-weight: 500;
}

.ogw-hero__sub {
  font-family: var(--ogw-font-serif);
  font-size: 1.12rem;
  color: var(--ogw-text-body);
  line-height: 1.75;
  margin-bottom: 1.75rem;
  max-width: 640px;
}

.ogw-hero__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ogw-green-border);
}

.ogw-hero__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ogw-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ogw-font-ui);
  font-weight: 800;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.ogw-hero__author-name {
  font-family: var(--ogw-font-ui);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ogw-text-h);
  line-height: 1.3;
}

.ogw-hero__author-role {
  font-family: var(--ogw-font-ui);
  font-size: 0.75rem;
  color: var(--ogw-text-meta);
  margin-top: 0.1rem;
}

/* 8b — TABLE OF CONTENTS
   Usage: <div class="ogw-toc"><div class="ogw-toc__title">In This Guide</div><ul>...</ul></div>
*/
.ogw-toc {
  background: var(--ogw-bg);
  border: 1px solid var(--ogw-border);
  border-left: 3px solid var(--ogw-green);
  border-radius: var(--ogw-radius-sm);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
}

.ogw-toc__title {
  font-family: var(--ogw-font-ui);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ogw-text-h);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.9rem;
}

.ogw-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ogw-toc li {
  margin-bottom: 0.5rem;
  border: none;
}

.ogw-toc a {
  font-family: var(--ogw-font-ui);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ogw-green);
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  line-height: 1.45;
  border-bottom: none;
  transition: color 0.15s ease;
}

.ogw-toc a::before {
  content: '›';
  font-weight: 800;
  flex-shrink: 0;
}

.ogw-toc a:hover {
  color: var(--ogw-green-dark);
  text-decoration: underline;
}

/* 8c — CALLOUT BOXES
   Usage:
   <div class="ogw-callout ogw-callout--jeanne">
     <span class="ogw-callout__label">🌿 Jeanne's Note</span>
     <p>Text here.</p>
   </div>
   Variants: ogw-callout--jeanne / ogw-callout--tip / ogw-callout--warning
*/
.ogw-callout {
  border-radius: var(--ogw-radius-sm);
  padding: 1.15rem 1.5rem;
  margin: 2rem 0;
}

.ogw-callout p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 0;
  font-family: var(--ogw-font-serif);
}

.ogw-callout__label {
  display: block;
  font-family: var(--ogw-font-ui);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.ogw-callout--jeanne {
  background: var(--ogw-green-light);
  border-left: 4px solid var(--ogw-green);
}
.ogw-callout--jeanne .ogw-callout__label { color: var(--ogw-green-dark); }
.ogw-callout--jeanne p { color: #1e3d1c; font-style: italic; }

.ogw-callout--tip {
  background: var(--ogw-amber-bg);
  border-left: 4px solid var(--ogw-amber);
}
.ogw-callout--tip .ogw-callout__label { color: var(--ogw-amber-dark); }
.ogw-callout--tip p { color: #451a03; }

.ogw-callout--warning {
  background: var(--ogw-red-bg);
  border-left: 4px solid var(--ogw-red);
}
.ogw-callout--warning .ogw-callout__label { color: var(--ogw-red); }
.ogw-callout--warning p { color: #450a0a; }

/* 8d — INTERNAL LINK CARDS
   Usage:
   <a href="URL" class="ogw-link-card">
     <span class="ogw-link-card__icon">🎃</span>
     <div class="ogw-link-card__body">
       <span class="ogw-link-card__tag">Category</span>
       <span class="ogw-link-card__title">Title</span>
     </div>
     <span class="ogw-link-card__arrow">→</span>
   </a>
*/
.ogw-link-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--ogw-bg-soft);
  border: 1px solid var(--ogw-border);
  border-left: 3px solid var(--ogw-green);
  border-radius: var(--ogw-radius-sm);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--ogw-shadow-sm);
  color: inherit;
}

.ogw-link-card:hover {
  background-color: var(--ogw-green-light);
  border-color: var(--ogw-green-border);
  border-left-color: var(--ogw-green-dark);
}

.ogw-link-card__icon {
  font-size: 1.8rem;
  flex-shrink: 0;
  line-height: 1;
}

.ogw-link-card__body {
  flex: 1;
  min-width: 0;
}

.ogw-link-card__tag {
  display: block;
  font-family: var(--ogw-font-ui);
  font-size: 0.67rem;
  font-weight: 800;
  color: var(--ogw-green);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.2rem;
}

.ogw-link-card__title {
  font-family: var(--ogw-font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ogw-text-h);
  line-height: 1.35;
  text-decoration: none;
}

.ogw-link-card__arrow {
  margin-left: auto;
  font-size: 1rem;
  color: var(--ogw-green);
  flex-shrink: 0;
}

/* 8e — STEP LIST
   Usage:
   <div class="ogw-steps">
     <div class="ogw-step">
       <div class="ogw-step__num">1</div>
       <div class="ogw-step__body"><h4>Title</h4><p>Text.</p></div>
     </div>
   </div>
*/
.ogw-steps { margin: 1.75rem 0; }

.ogw-step {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  align-items: flex-start;
}

.ogw-step__num {
  font-family: var(--ogw-font-head);
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--ogw-green-border);
  line-height: 1;
  flex-shrink: 0;
  min-width: 2.25rem;
  margin-top: -0.2rem;
}

.ogw-step__body h4 {
  font-family: var(--ogw-font-ui);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ogw-text-h);
  margin: 0 0 0.4rem;
  text-transform: none;
  letter-spacing: 0;
}

.ogw-step__body p {
  font-family: var(--ogw-font-serif);
  font-size: 1rem;
  color: var(--ogw-text-body);
  line-height: 1.8;
  margin-bottom: 0;
}

/* 8f — DATA TABLES
   Usage: <table class="ogw-table">...</table>
*/
.ogw-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.93rem;
  border-radius: var(--ogw-radius-sm);
  overflow: hidden;
  border: 1px solid var(--ogw-border);
  box-shadow: var(--ogw-shadow-sm);
}

.ogw-table thead { background: var(--ogw-green); }

.ogw-table th {
  padding: 0.85rem 1.1rem;
  text-align: left;
  color: #ffffff;
  font-family: var(--ogw-font-ui);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.ogw-table td {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--ogw-border);
  color: var(--ogw-text-body);
  font-family: var(--ogw-font-serif);
  line-height: 1.55;
}

.ogw-table tr:nth-child(even) td { background: var(--ogw-bg-soft); }
.ogw-table tr:last-child td { border-bottom: none; }
.ogw-table .ogw-easy   { color: #166534; font-weight: 700; }
.ogw-table .ogw-medium { color: #92400e; font-weight: 700; }
.ogw-table .ogw-hard   { color: #991b1b; font-weight: 700; }

/* 8g — SECTION DIVIDER
   Usage: <div class="ogw-divider"><span>🌱</span></div>
*/
.ogw-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 2.75rem 0 0.25rem;
}

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

/* 8h — KEY POINTS / SUMMARY BOX
   Usage:
   <div class="ogw-summary">
     <div class="ogw-summary__title">✅ Key Points</div>
     <ul><li><strong>Point</strong> — detail</li></ul>
   </div>
*/
.ogw-summary {
  background: var(--ogw-green-light);
  border: 1px solid var(--ogw-green-border);
  border-radius: var(--ogw-radius-sm);
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
}

.ogw-summary__title {
  font-family: var(--ogw-font-ui);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--ogw-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.ogw-summary ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.ogw-summary li {
  display: flex;
  gap: 0.6rem;
  font-family: var(--ogw-font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: #1c3b1a;
  margin-bottom: 0.55rem;
}

.ogw-summary li::before {
  content: '✓';
  color: var(--ogw-green);
  font-weight: 800;
  flex-shrink: 0;
  font-family: var(--ogw-font-ui);
}

.ogw-summary li strong { color: #0f2410; font-weight: 700; }

/* 8i — HUB CARD GRID
   Usage:
   <div class="ogw-hub">
     <div class="ogw-hub__title">📚 Continue Reading</div>
     <div class="ogw-hub__sub">Subtitle.</div>
     <div class="ogw-hub__grid">
       <a href="URL" class="ogw-hub__card">
         <span class="ogw-hub__icon">🎃</span>
         <span class="ogw-hub__tag">Category</span>
         <span class="ogw-hub__card-title">Title</span>
       </a>
     </div>
   </div>
*/
.ogw-hub {
  background: var(--ogw-bg-soft);
  border: 1px solid var(--ogw-border);
  border-radius: var(--ogw-radius-md);
  padding: 1.75rem;
  margin: 2.5rem 0;
}

.ogw-hub__title {
  font-family: var(--ogw-font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ogw-text-h);
  margin-bottom: 0.3rem;
}

.ogw-hub__sub {
  font-family: var(--ogw-font-ui);
  font-size: 0.85rem;
  color: var(--ogw-text-meta);
  margin-bottom: 1.25rem;
}

.ogw-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ogw-hub__card {
  background: var(--ogw-bg);
  border: 1px solid var(--ogw-border);
  border-radius: var(--ogw-radius-sm);
  padding: 1rem;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s ease;
  color: inherit;
}

.ogw-hub__card:hover { border-color: var(--ogw-green); }

.ogw-hub__icon {
  font-size: 1.4rem;
  margin-bottom: 0.45rem;
  display: block;
}

.ogw-hub__tag {
  display: block;
  font-family: var(--ogw-font-ui);
  font-size: 0.63rem;
  font-weight: 800;
  color: var(--ogw-green);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.22rem;
}

.ogw-hub__card-title {
  font-family: var(--ogw-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ogw-text-h);
  line-height: 1.4;
}

/* 8j — NEWSLETTER BOX */
.ogw-newsletter {
  background: var(--ogw-green);
  border-radius: var(--ogw-radius-md);
  padding: 2.25rem 2rem;
  margin: 2.5rem 0;
  text-align: center;
}

.ogw-newsletter h3 {
  font-family: var(--ogw-font-head);
  font-size: 1.4rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.ogw-newsletter p {
  font-family: var(--ogw-font-serif);
  font-size: 0.93rem;
  color: rgba(255,255,255,0.92);
  margin-bottom: 1.5rem;
  line-height: 1.65;
}

.ogw-newsletter__form {
  display: flex;
  gap: 0.6rem;
  max-width: 430px;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}

.ogw-newsletter__input {
  flex: 1;
  min-width: 195px;
  padding: 0.75rem 1rem;
  border-radius: var(--ogw-radius-sm);
  border: 2px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 0.92rem;
  font-family: var(--ogw-font-ui);
  outline: none;
  transition: border-color 0.15s ease;
}

.ogw-newsletter__input::placeholder { color: rgba(255,255,255,0.6); }
.ogw-newsletter__input:focus { border-color: rgba(255,255,255,0.8); }

.ogw-newsletter__btn {
  padding: 0.75rem 1.4rem;
  background: #fff;
  color: var(--ogw-green-dark);
  border: none;
  border-radius: var(--ogw-radius-sm);
  font-size: 0.92rem;
  font-weight: 800;
  font-family: var(--ogw-font-ui);
  cursor: pointer;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.ogw-newsletter__btn:hover { background-color: var(--ogw-green-light); }

.ogw-newsletter__fine {
  display: block;
  font-family: var(--ogw-font-ui);
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.75rem;
}

/* 8k — SIDEBAR CTA */
.ogw-sidebar-cta {
  background: var(--ogw-green);
  border-radius: var(--ogw-radius-md);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.ogw-sidebar-cta h3,
.ogw-sidebar-cta__title {
  font-family: var(--ogw-font-head);
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.ogw-sidebar-cta p,
.ogw-sidebar-cta__text {
  font-family: var(--ogw-font-ui);
  font-size: 0.82rem;
  color: rgba(255,255,255,0.88);
  margin-bottom: 1.1rem;
  line-height: 1.55;
}

.ogw-sidebar-cta a,
.ogw-sidebar-cta__btn {
  display: block;
  background: #fff;
  color: var(--ogw-green-dark);
  padding: 0.65rem 1rem;
  border-radius: var(--ogw-radius-sm);
  font-family: var(--ogw-font-ui);
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.ogw-sidebar-cta a:hover,
.ogw-sidebar-cta__btn:hover {
  background-color: var(--ogw-green-light);
}

/* 8l — CROSS-PILLAR LINK GRID */
.ogw-cross-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.25rem 0 2.5rem;
}

.ogw-cross-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--ogw-bg);
  border: 1px solid var(--ogw-border);
  border-radius: var(--ogw-radius-sm);
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  color: inherit;
}

.ogw-cross-card:hover {
  border-color: var(--ogw-green);
  background-color: var(--ogw-green-light);
}

.ogw-cross-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.ogw-cross-tag {
  display: block;
  font-family: var(--ogw-font-ui);
  font-size: 0.63rem;
  font-weight: 800;
  color: var(--ogw-green);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.22rem;
}

.ogw-cross-title {
  font-family: var(--ogw-font-ui);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ogw-text-h);
  line-height: 1.4;
}

/* 8m — AUTHOR BIO (pillar variant) */
.ogw-author-bio {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--ogw-bg-soft);
  border: 1px solid var(--ogw-border);
  border-radius: var(--ogw-radius-md);
  padding: 1.5rem;
  margin: 2.5rem 0;
}

.ogw-author-bio__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ogw-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ogw-font-ui);
  font-size: 1.15rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ogw-author-bio__name {
  font-family: var(--ogw-font-ui);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ogw-text-h);
  margin-bottom: 0.15rem;
}

.ogw-author-bio__role {
  font-family: var(--ogw-font-ui);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ogw-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}

.ogw-author-bio__text {
  font-family: var(--ogw-font-serif);
  font-size: 0.93rem;
  color: var(--ogw-text-body);
  line-height: 1.7;
  margin: 0;
}

/* 8n — READING PROGRESS BAR (GPU-safe, fixed position) */
.ogw-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(61,122,58,0.15);
  z-index: 9999;
  pointer-events: none;
}

.ogw-progress__fill {
  height: 100%;
  background: var(--ogw-green);
  width: 0%;
  transition: width 0.1s linear;
}




/* ════════════════════════════════════════════════════════════
   AFFILIATE DISCLOSURE
   .ogw-post-hero__disclosure = inline next to author (in hook)
   .ogw-affiliate-notice = standalone below image (legacy)
════════════════════════════════════════════════════════════ */

/* Affiliate disclosure — displayed below featured image */
.ogw-affiliate-notice {
  font-family: var(--ogw-font-ui) !important;
  font-size: 0.78rem !important;
  color: var(--ogw-text-muted) !important;
  font-style: italic !important;
  text-align: center !important;
  padding: 0.5rem 1.5rem !important;
  margin: 0 auto !important;
  max-width: 780px !important;
  display: block !important;
  border-top: 1px solid var(--ogw-border) !important;
  background: var(--ogw-bg-soft) !important;
  line-height: 1.5 !important;
}

/* ════════════════════════════════════════════════════════════
   SECTION 9 — RESPONSIVE (scoped to .ogw- classes only)
   No global responsive rules — GP handles those natively.
════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  .ogw-hub__grid { grid-template-columns: 1fr 1fr; }
  .ogw-cross-grid { grid-template-columns: 1fr; }
  .ogw-newsletter__form { flex-direction: column; }
  .ogw-newsletter__input { min-width: unset; width: 100%; }
  .ogw-post-hero { padding: 1.75rem 0 0; }
  .ogw-post-hero h1,
  .ogw-post-hero__title { font-size: 1.55rem; }
  .ogw-post-hero__sub { font-size: 0.97rem; }
  .ogw-post-hero__inner { padding: 0 1rem; }
  .ogw-post-hero__disclosure {
    margin-left: 0;
    text-align: left;
    max-width: 100%;
    padding-top: 0.4rem;
  }
  /* Mobile: smaller overlap, ratio preserved */
  .single .post-image,
  .single .featured-image,
  .single .featured-image.above-entry-content,
  .single figure.wp-block-post-featured-image,
  .single .entry-image,
  .single .entry-image-before-header {
    margin: -24px auto 0 !important;
    padding: 0 1rem !important;
  }
  .single .post-image img,
  .single .featured-image img,
  .single .wp-post-image,
  .single figure.wp-block-post-featured-image img,
  .single .entry-image img,
  .single .entry-image-before-header img {
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
  }
  /* Single consolidated padding-top — clears -24px image overlap */
  .single .entry-content {
    padding-top: calc(24px + 1rem) !important;
  }
  .ogw-author-bio { flex-direction: column; align-items: center; text-align: center; }
  /* Mobile list adjustments */
  .single .entry-content ol:not([class]) li,
  .single .entry-content ol.wp-block-list li,
  .single .entry-content ul:not([class]):not(.mpc-list):not(.mpc-pros-list):not(.mpc-cons-list) li,
  .single .entry-content ul.wp-block-list li {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    padding-left: 1.4rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* Mobile dot — slightly larger touch target, closer to text */
  .single .entry-content ul:not([class]):not(.mpc-list):not(.mpc-pros-list):not(.mpc-cons-list) li::before,
  .single .entry-content ul.wp-block-list li::before {
    left: 0.25rem !important;
    top: 0.7em !important;
    width: 6px !important;
    height: 6px !important;
  }
  .single .entry-content h2 { font-size: 1.3rem; }
}


/* ════════════════════════════════════════════════════════════
   SECTION 10 — PAGINATION
   Replaces both old .paging-navigation and .page-numbers
   blocks from your Additional CSS.
   Scoped: targets only GP pagination wrappers, does not
   touch plugin-specific pagination classes.
════════════════════════════════════════════════════════════ */

/* Wrapper — flex centre */
.pagination,
.paging-navigation,
.navigation.pagination,
.post-navigation {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  justify-content: center !important;
  margin: 2.5rem 0 !important;
  flex-wrap: wrap !important;
  /* Reset old Additional CSS values that caused issues */
  text-align: unset !important;
  width: unset !important;
  display: flex !important;
}

/* Every page number — circle shape */
.page-numbers,
.paging-navigation .page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  font-family: var(--ogw-font-ui) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: 1.5px solid var(--ogw-border) !important;
  color: var(--ogw-text-body) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: static !important;
}

/* Hover state */
.page-numbers:hover,
.paging-navigation .page-numbers:hover {
  background-color: var(--ogw-green-light) !important;
  border-color: var(--ogw-green-border) !important;
  color: var(--ogw-green-dark) !important;
}

/* Active / current page */
.page-numbers.current,
.paging-navigation .page-numbers.current {
  background: var(--ogw-green) !important;
  border-color: var(--ogw-green) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Prev / Next — pill shape instead of circle */
.page-numbers.prev,
.page-numbers.next,
.paging-navigation .prev,
.paging-navigation .next {
  border-radius: var(--ogw-radius-xl) !important;
  padding: 0 1.1rem !important;
  width: auto !important;
  min-width: auto !important;
  font-weight: 700 !important;
}

/* Dots separator — no border, just text */
.page-numbers.dots {
  border: none !important;
  background: transparent !important;
  color: var(--ogw-text-muted) !important;
  width: auto !important;
  min-width: unset !important;
}

/* wpsp load-more button — centred block */
.wpsp-load-more {
  display: block;
  text-align: center;
  margin-top: 2rem;
}


/* ── EXTRA SAFETY NET FOR PROS/CONS PLUGIN ──
   Catches plugin output even when wrapper classes are stripped by minifiers
   or HTML optimizers. Uses sibling selector + :has() (modern browsers). */

/* Approach 1: target the GB block wrapper attribute */
.single .entry-content [class*="mighty"] ul,
.single .entry-content [class*="pros-cons"] ul,
.single .entry-content [class*="prosandcons"] ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
}

.single .entry-content [class*="mighty"] ul li,
.single .entry-content [class*="pros-cons"] ul li,
.single .entry-content [class*="prosandcons"] ul li {
  display: list-item !important;
  list-style-type: disc !important;
  padding-left: 0 !important;
  position: static !important;
}

.single .entry-content [class*="mighty"] ul li::before,
.single .entry-content [class*="pros-cons"] ul li::before,
.single .entry-content [class*="prosandcons"] ul li::before {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
}

/* Approach 2: any ul preceded by an img containing "thumbs" 
   (modern browser :has() support — Safari 15.4+, Chrome 105+) */
.single .entry-content :has(> img[src*="thumbs"]) + ul,
.single .entry-content :has(> img[src*="thumbs"]) ~ ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
}

.single .entry-content :has(> img[src*="thumbs"]) + ul li,
.single .entry-content :has(> img[src*="thumbs"]) ~ ul li {
  display: list-item !important;
  list-style-type: disc !important;
  padding-left: 0 !important;
  position: static !important;
}

.single .entry-content :has(> img[src*="thumbs"]) + ul li::before,
.single .entry-content :has(> img[src*="thumbs"]) ~ ul li::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Approach 3: H4 followed by UL inside entry-content
   (only if the H4 is short — likely "Pros" or "Cons" heading) */
.single .entry-content h4 + ul {
  list-style: disc !important;
  padding-left: 1.5rem !important;
}

.single .entry-content h4 + ul li {
  display: list-item !important;
  list-style-type: disc !important;
  padding-left: 0 !important;
  position: static !important;
}

.single .entry-content h4 + ul li::before {
  display: none !important;
  content: none !important;
  background: none !important;
}


/* ── GB CONTAINER LIST FIX ON MOBILE ──
   Lists inside .gb-container should still get our green dot,
   not GB's flexbox layout that breaks on narrow screens.
   This catches both mobile and desktop GB container contexts. */
@media (max-width: 700px) {
  .single .entry-content .gb-container ul:not([class]):not(.wp-pros-cons-list) li,
  .single .entry-content .gb-container ul.wp-block-list li {
    padding-left: 1.4rem !important;
    margin-bottom: 0.4rem !important;
    text-align: left !important;
  }
}

/* ════════════════════════════════════════════════════════════
   AUTHOR BIO CARD — renders below article content
   Hook: generate_after_entry_content
════════════════════════════════════════════════════════════ */

.ogw-author-bio {
  background: var(--ogw-bg-soft);
  border: 1px solid var(--ogw-border);
  border-top: 3px solid var(--ogw-green);
  border-radius: 10px;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0 1rem;
}

.ogw-author-bio__inner {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

/* Avatar */
.ogw-author-bio__avatar {
  flex-shrink: 0;
}

.ogw-author-bio__avatar-img,
.ogw-author-bio .avatar {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  border: 3px solid var(--ogw-green-border) !important;
}

.ogw-author-bio__avatar a:hover .ogw-author-bio__avatar-img,
.ogw-author-bio__avatar a:hover .avatar {
  border-color: var(--ogw-green) !important;
}

/* Content area */
.ogw-author-bio__content {
  flex: 1;
  min-width: 0;
}

/* Header row: name/role + links */
.ogw-author-bio__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.ogw-author-bio__label {
  font-family: var(--ogw-font-ui);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ogw-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
}

.ogw-author-bio__name {
  font-family: var(--ogw-font-ui);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ogw-text-h);
  text-decoration: none;
  display: block;
  line-height: 1.3;
}

.ogw-author-bio__name:hover {
  color: var(--ogw-green);
}

.ogw-author-bio__role {
  font-family: var(--ogw-font-ui);
  font-size: 0.8rem;
  color: var(--ogw-text-muted);
  margin-top: 0.15rem;
}

.ogw-author-bio__site {
  color: var(--ogw-green);
  text-decoration: none;
  font-weight: 600;
}

.ogw-author-bio__site:hover {
  text-decoration: underline;
}

/* Social + more articles links */
.ogw-author-bio__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.ogw-author-bio__social {
  color: var(--ogw-text-muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.ogw-author-bio__social:hover {
  color: var(--ogw-green);
}

.ogw-author-bio__more {
  font-family: var(--ogw-font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ogw-green);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid var(--ogw-green-border);
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  transition: all 0.15s;
}

.ogw-author-bio__more:hover {
  background: var(--ogw-green);
  color: #fff;
  border-color: var(--ogw-green);
}

/* Bio text */
.ogw-author-bio__text {
  font-family: var(--ogw-font-ui) !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  color: var(--ogw-text-body) !important;
  margin: 0 !important;
}

.ogw-author-bio__text p {
  font-family: var(--ogw-font-ui) !important;
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  color: var(--ogw-text-body) !important;
  margin-bottom: 0.65rem !important;
}

.ogw-author-bio__text p:last-child {
  margin-bottom: 0 !important;
}

/* Mobile */
@media (max-width: 600px) {
  .ogw-author-bio__inner {
    flex-direction: column;
    gap: 1rem;
  }

  .ogw-author-bio__avatar-img,
  .ogw-author-bio .avatar {
    width: 60px !important;
    height: 60px !important;
  }

  .ogw-author-bio__header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .ogw-author-bio {
    padding: 1.25rem;
  }
}