/* =========================================================
 * AI Homepage Builder — Frontend Styles (Refactored)
 * - Removes duplicate rules
 * - Fixes Latest Posts card alignment (CSS grid + clamps)
 * - Polishes Latest Posts CTA to look like a button
 * - Keeps Astra/Elementor-safe overrides (scoped to .ahb-* sections)
 * ======================================================= */

/* =========================
   HERO / GLOBAL SECTIONS
   ========================= */

.ahb-hero-section { text-align: center; }

/* Lead magnet background */
.ahb-lead-magnet-section {
  background: linear-gradient(135deg, #f5f9ff, #eef7ff);
}

/* Round hero image corners */
.ahb-hero-section .wp-block-image img { border-radius: 12px; }

/* Remove big top gap on hero blocks */
.wp-block-group.ahb-hero-section { margin-top: 0 !important; }

/* Remove big top gap on hub + subhub hero blocks */
.wp-block-group.ahb-hero-split{
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hero heading + text */
.ahb-hero-section h1 {
  font-size: clamp(2.2rem, 3vw, 2.7rem);
  line-height: 1.2;
}
.ahb-hero-section p.has-medium-font-size {
  font-size: 1rem;
  max-width: 540px;
}

/* About tagline */
.ahb-about-tagline {
  font-size: 0.95rem;
  margin-top: 4px;
  margin-bottom: 14px;
}
.ahb-about-tagline a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   QUICKSTART BAR
   ========================= */

.ahb-quickstart-bar {
  margin-top: -10px;
  border-top: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
}
.ahb-quickstart-bar .ahb-quickstart-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.ahb-quickstart-bar .ahb-quickstart-pill .wp-block-button__link {
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 1.05rem;
  font-weight: 600;
}
.ahb-quickstart-bar .wp-block-buttons { flex-wrap: wrap; }

/* =========================
   STICKY MOBILE CTA BAR
   ========================= */

.ahb-sticky-mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 14px;
  background: #0f63d8;
  color: #fff;
  display: none;
  z-index: 999;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.18);
}
.ahb-sticky-mobile-cta.is-visible {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ahb-sticky-mobile-cta a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
}
.ahb-sticky-mobile-cta__close {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  margin-left: 12px;
  padding: 0;
  cursor: pointer;
}
@media (min-width: 783px) {
  .ahb-sticky-mobile-cta { display: none !important; }
}

/* =========================
   TRUST ROW
   ========================= */

.ahb-trust-row {
  border-top: 1px solid rgba(0,0,0,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  background: #ffffff;
}
.ahb-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  font-size: 0.85rem;
  margin: 0;
  padding-left: 0;
}
.ahb-trust-list li { list-style: none; }
.ahb-trust-list li::before {
  content: "✓ ";
  color: #15803d;
  font-weight: 600;
}
@media (max-width: 600px) {
  .ahb-trust-list { justify-content: flex-start; }
}

/* =========================
   BASE CARD LAYOUT (equal height)
   ========================= */

.ahb-featured-topics-section .ahb-silo-card,
.ahb-top-guides-section .ahb-guide-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make Gutenberg columns stretch each card to equal height */
.ahb-featured-topics-section .wp-block-columns,
.ahb-top-guides-section .wp-block-columns,
.ahb-top-picks-section .wp-block-columns {
  align-items: stretch;
}
/* Each column becomes a flex container so the card can fill it */
.ahb-featured-topics-section .wp-block-column,
.ahb-top-guides-section .wp-block-column,
.ahb-top-picks-section .wp-block-column {
  display: flex;
}

/* Core cards should behave like full-height flex columns */
.ahb-silo-card,
.ahb-guide-card,
.ahb-top-picks-section .ahb-top-pick-card,
.ahb-aff-card,
.ahb-latest-card,
.ahb-nextstep-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Push common CTA rows to bottom */
.ahb-guide-card .wp-block-buttons,
.ahb-top-picks-section .ahb-top-pick-link-wrap,
.ahb-aff-card__cta,
.ahb-latest-card__more,
.ahb-nextstep-card .wp-block-buttons {
  margin-top: auto;
}

/* =========================
   TOPIC CARDS (Featured topics)
   ========================= */

.ahb-silo-card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  text-align: left;
}
.ahb-silo-card .ahb-topic-icon img {
  max-width: 100%;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ahb-silo-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.ahb-silo-card p { font-size: 0.95rem; }

/* Make entire topic card clickable (if you output .ahb-topic-card-link) */
.ahb-silo-card a.ahb-topic-card-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.ahb-silo-card a.ahb-topic-card-link:hover { text-decoration: none; }

/* =========================
   TOP GUIDES (cards + thumbs + CTA)
   Supports:
   - old 3-column columns layout
   - Query Loop layout
   ========================= */

.ahb-guide-card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  gap: 12px;
}
.ahb-guide-card h3 { margin: 0; }
.ahb-guide-card p { margin: 0; }

/* Old "3 columns" mode */
.ahb-top-guides-section .wp-block-columns { align-items: stretch; }
.ahb-top-guides-section .wp-block-column { display:flex; }
.ahb-top-guides-section .wp-block-column > .wp-block-group.ahb-guide-card { flex: 1; }

/* Query Loop mode grid */
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query .wp-block-post-template.ahb-top-guides-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:24px;
  list-style:none;
  padding:0;
  margin:24px 0 0;
}
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{
  display:flex;
  flex:1 1 calc(33.333% - 24px);
}
.ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post > .ahb-guide-card{ flex:1; }
@media (max-width: 900px){
  .ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{ flex:1 1 calc(50% - 24px); }
}
@media (max-width: 600px){
  .ahb-top-guides-section .wp-block-query.ahb-top-guides-query li.wp-block-post{ flex:1 1 100%; }
}

/* Thumbnails — enforce a consistent 220px for attention */
.ahb-guide-card__thumb,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image{
  width: 100%;
  height: 220px;
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 12px 0 !important;
  display: block !important;
  background: #f1f5f9;
}
.ahb-guide-card__thumb > a,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image > a{
  display:block;
  width:100%;
  height:100%;
}
.ahb-guide-card__image,
.ahb-top-guides-section .ahb-guide-card figure.wp-block-post-featured-image img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}
.ahb-guide-card__thumb--placeholder{
  width:100%;
  height:220px;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.02));
}

/* Make read-more look like a button (theme-safe) */
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more,
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more__link,
.ahb-top-guides-section .ahb-guide-card a.wp-block-read-more,
.ahb-top-guides-section .ahb-guide-card .wp-block-post-excerpt__more-link,
.ahb-guide-card .ahb-guide-card__more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: var(--wp--preset--color--primary, #0b5fff);
  color: #fff !important;
  text-decoration: none !important;
}
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more:hover,
.ahb-top-guides-section .ahb-guide-card .wp-block-read-more__link:hover,
.ahb-top-guides-section .ahb-guide-card a.wp-block-read-more:hover,
.ahb-top-guides-section .ahb-guide-card .wp-block-post-excerpt__more-link:hover,
.ahb-guide-card .ahb-guide-card__more a:hover {
  filter: brightness(0.95);
}

/* =========================
   TOP PICKS (homepage strip)
   ========================= */

.ahb-top-picks-section .ahb-top-pick-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 16px;
}
.ahb-top-picks-section .ahb-top-pick-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 10px;
}
.ahb-top-picks-section .ahb-top-pick-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.ahb-top-picks-section .ahb-top-pick-link {
  font-size: 0.9rem;
  font-weight: 600;
}

/* =========================
   LATEST ARTICLES (Latest Posts cards)
   Fixes alignment: CSS grid + clamps + button CTA
   ========================= */

.ahb-latest-posts-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
@media (max-width: 1024px){
  .ahb-latest-posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  .ahb-latest-posts-grid{ grid-template-columns: 1fr; }
}

.ahb-latest-card{
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  padding: 16px;

  /* neutralize old flex sizing if any legacy CSS exists */
  flex: initial !important;
  max-width: none !important;
  width: auto !important;
  box-sizing: border-box;
}

.ahb-latest-card__thumb{
  height: 220px;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
}
.ahb-latest-card__thumb > a{
  display:block;
  width:100%;
  height:100%;
}
.ahb-latest-card__image{
  display:block;
  width:100% !important;
  height:100% !important;
  object-fit: cover;
  object-position: center;
}

.ahb-latest-card__title{
  font-size: 1rem;
  margin: 0 0 6px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
.ahb-latest-card__excerpt{
  font-size: 0.9rem;
  margin-bottom: 10px;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.1em;
}

/* CTA polish: render the "View details" link as a button.
   Supports both:
   - <a class="ahb-latest-card__more">
   - <p class="ahb-latest-card__more"><a ...></a></p>
*/
a.ahb-latest-card__more,
.ahb-latest-card__more a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;

  border: 1px solid rgba(0,0,0,.08);
  background: var(--wp--preset--color--primary, #0b5fff);
  color: #fff !important;

  text-decoration: none !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}
a.ahb-latest-card__more:hover,
.ahb-latest-card__more a:hover{
  filter: brightness(0.95);
  text-decoration: none !important;
}
a.ahb-latest-card__more:focus,
.ahb-latest-card__more a:focus{
  outline: 2px solid rgba(11,95,255,0.35);
  outline-offset: 2px;
}

/* Astra underline/shadow kill-switch inside AHB card sections */
body .ahb-latest-posts-section .ahb-latest-posts-grid a,
body .ahb-top-guides-section a,
body .ahb-top-picks-section a{
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: none !important;
}
body .ahb-latest-posts-section .ahb-latest-posts-grid a:hover,
body .ahb-top-guides-section a:hover,
body .ahb-top-picks-section a:hover{
  opacity: 0.92;
}

/* =========================
   NEXT STEP THUMBNAILS
   ========================= */

.ahb-card-thumb {
  width: 100%;
  height: 220px;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 12px 0;
  background: rgba(0,0,0,0.03);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ahb-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}
.ahb-card-thumb--fallback {
  height: 220px;
  color: rgba(17,24,39,0.55);
}
.ahb-card-thumb--fallback .ahb-fallback-icon {
  width: 62px;
  height: 62px;
}
.ahb-nextstep-card h3 { margin-top: 0; }

/* =========================
   STARTER GUIDES GRID (reuses latest grid spacing)
   ========================= */

.ahb-starter-guides-grid { margin-top: 16px; row-gap: 32px; }

.ahb-starter-badge {
  display: inline-block;
  margin: 8px 0 6px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}

/* =========================
   AFFILIATE PRODUCTS STRIP (Top 3)
   ========================= */

.ahb-aff-products-section {
  padding: 40px 0;
  background: #f8fafc;
}
.ahb-aff-products-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.ahb-aff-products-heading {
  text-align: center;
  font-size: 2rem;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
}
.ahb-aff-products-heading::after {
  content: '';
  display: block;
  width: 80px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: #ff9900;
}

.ahb-aff-products-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
}

/* Card */
.ahb-aff-card {
  flex: 0 0 calc(33.333% - 16px);
  max-width: calc(33.333% - 16px);
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.06);
  padding: 16px 18px;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .ahb-aff-card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 700px) {
  .ahb-aff-card { flex: 0 0 100%; max-width: 100%; }
}

/* Thumb: fixed height, centered image (no stretching) */
.ahb-aff-card__thumb {
  height: 240px;
  margin-bottom: 12px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ahb-aff-card__thumb a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.ahb-aff-card__thumb img.ahb-aff-card__image {
  display: block;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* Badge */
.ahb-aff-card__badge {
  display: inline-block;
  margin: 6px 0 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef2ff;
  color: #3730a3;
}

/* Predictable content heights */
.ahb-aff-card__title {
  font-size: 1.1rem;
  margin: 8px 0 6px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;
}
.ahb-aff-card__spec {
  margin: 4px 0 8px;
  font-size: 0.95rem;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 2.4em;
}
.ahb-aff-card__desc {
  font-size: 0.9rem;
  margin: 0 0 12px;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  min-height: 4.1em;
}

/* CTA pinned to bottom */
.ahb-aff-card__cta {
  margin-top: auto;
  padding-top: 10px;
}
.ahb-aff-card__button {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ff9900;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.ahb-aff-card__button:hover { filter: brightness(0.96); }

/* Micro-trust note */
.ahb-aff-products-note {
  text-align: center;
  font-size: 0.85rem;
  color: #6b7280;
  margin-top: 14px;
}

/* =========================================================
 * Phase 3 — freshness signals, FAQ accordions, TL;DR,
 * comparison table, related-siblings cards.
 * ======================================================= */

.ahb-last-updated {
  margin: 6px 0 14px;
  font-size: 13px;
  color: #6b7280;
}
.ahb-last-updated time { font-variant-numeric: tabular-nums; }

.ahb-ftc-disclosure {
  margin: 8px 0 16px;
  padding: 8px 12px;
  border-left: 3px solid #facc15;
  background: #fffbeb;
  color: #713f12;
  font-size: 13px;
  border-radius: 4px;
}
.ahb-ftc-disclosure a { color: inherit; text-decoration: underline; }

.ahb-tldr {
  margin: 18px 0 24px;
  padding: 16px 18px;
  border-left: 4px solid #2271b1;
  background: #f0f6ff;
  border-radius: 6px;
}
.ahb-tldr h2 {
  margin: 0 0 6px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1d4ed8;
}
.ahb-tldr p { margin: 0; }

.ahb-faq-accordion .wp-block-details {
  margin: 6px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  background: #fff;
  transition: box-shadow .15s ease;
}
.ahb-faq-accordion .wp-block-details[open] {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.ahb-faq-accordion .wp-block-details summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  position: relative;
  padding-right: 24px;
}
.ahb-faq-accordion .wp-block-details summary::-webkit-details-marker { display: none; }
.ahb-faq-accordion .wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  color: #2271b1;
  transition: transform .15s ease;
}
.ahb-faq-accordion .wp-block-details[open] summary::after {
  content: '–';
}

/* Comparison table */
.ahb-comparison-table-wrap {
  margin: 24px 0;
  scroll-margin-top: 80px;
}
.ahb-comparison-table-wrap .ahb-comparison-table__intro {
  margin: 0 0 12px;
  font-size: 14px;
  color: #50575e;
}
.ahb-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.ahb-comparison-table caption {
  caption-side: bottom;
  margin-top: 10px;
  font-size: 11px;
  color: #6b7280;
  text-align: left;
}
.ahb-comparison-table th,
.ahb-comparison-table td {
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
}
.ahb-comparison-table thead th {
  background: #f6f7f7;
  font-weight: 600;
  color: #1d2327;
}
.ahb-comparison-table__product { min-width: 180px; }
.ahb-comparison-table__thumb img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
  background: #fff;
  border-radius: 6px;
  margin-bottom: 6px;
}
.ahb-comparison-table__name a {
  font-weight: 600;
  text-decoration: none;
}
.ahb-comparison-table__cta .button {
  display: inline-block;
  padding: 8px 12px;
  background: #2271b1;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ahb-comparison-table thead { display: none; }
  .ahb-comparison-table tbody tr {
    display: block;
    margin: 0 0 14px;
    padding: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 8px;
  }
  .ahb-comparison-table td {
    display: block;
    border: 0;
    padding: 4px 0;
  }
  .ahb-comparison-table td::before {
    content: attr(data-label) " ";
    font-weight: 600;
    color: #6b7280;
  }
}

/* Related-siblings cards */
.ahb-related-siblings {
  margin: 32px 0;
}
.ahb-related-siblings__heading {
  margin: 0 0 12px;
}
.ahb-related-siblings__card {
  padding: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  background: #fff;
  height: 100%;
}
.ahb-related-siblings__title a { text-decoration: none; }
.ahb-related-siblings__excerpt {
  margin: 6px 0 0;
  font-size: 13px;
  color: #50575e;
}

/* =========================================================
 * Phase 4 — byline, author box, methodology panel.
 * Lead-magnet styles live inline within the wp:html block.
 * ======================================================= */

.ahb-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ahb-byline__avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f4f6;
  display: block;
}
.ahb-byline__body { min-width: 0; }
.ahb-byline__name {
  margin: 0;
  font-size: 14px;
  color: #1f2937;
}
.ahb-byline__updated {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6b7280;
}

.ahb-author-box {
  margin: 28px 0;
  padding: 18px 22px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #f9fafb;
}
.ahb-author-box h2 {
  margin: 0 0 8px;
  font-size: 18px;
}
.ahb-author-box__avatar img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  float: left;
  margin: 0 16px 8px 0;
  background: #f3f4f6;
}
.ahb-author-box__intro { margin: 0 0 6px; }
.ahb-author-box__bio   { margin: 0 0 10px; color: #1f2937; font-size: 14px; }
.ahb-author-box__credentials {
  margin: 8px 0 6px 18px;
  padding: 0;
  color: #374151;
  font-size: 13px;
}
.ahb-author-box__website { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 640px) {
  .ahb-author-box__avatar img { float: none; display: block; margin: 0 0 10px; }
}

.ahb-methodology {
  margin: 24px 0;
  padding: 18px 22px;
  border-left: 4px solid #16a34a;
  background: #f0fdf4;
  border-radius: 6px;
  scroll-margin-top: 80px;
}
.ahb-methodology h2 { margin: 0 0 8px; font-size: 20px; }
.ahb-methodology__criteria {
  margin: 8px 0 0 18px;
  font-size: 14px;
  color: #1f2937;
}
.ahb-methodology__effort {
  margin: 10px 0 0;
  font-size: 13px;
  color: #4b5563;
}

/* =====================================================================
   PHASE 5 VISUAL POLISH PASS
   --------------------------------------------------------------------
   Design tokens, hover treatments, section backgrounds, heading accents,
   authority-block icons, accordion polish, comparison-table polish,
   lead-magnet polish, typography rhythm.
   All rules live at the END of the file so the cascade lets them
   override earlier hardcoded values. New components should target the
   tokens below rather than hardcoding their own.
   ===================================================================== */

:root {
  /* Corner radii */
  --ahb-radius-card:   14px;
  --ahb-radius-pill:   999px;
  --ahb-radius-thumb:  12px;
  --ahb-radius-button: 8px;

  /* Shadows */
  --ahb-shadow-card:        0 6px 18px rgba(0, 0, 0, 0.06);
  --ahb-shadow-card-hover:  0 10px 28px rgba(0, 0, 0, 0.10);
  --ahb-shadow-inset:       0 1px 0 rgba(255, 255, 255, 0.4) inset;

  /* Section background palette */
  --ahb-bg-base:   #ffffff;
  --ahb-bg-soft:   #f7f9fc;
  --ahb-bg-accent: #f0f4fa;

  /* Accent palette — semantic. The orange is reserved for "this is
     commercial / convert here" (Top Picks, comparison table, primary
     CTAs). The secondary blue is for navigation / informational UI
     (TOC active state, FAQ accordion toggle, author byline link).
     Green and amber are reserved for trust and warning signaling. */
  --ahb-accent-color:      #ff9900;  /* commercial / primary */
  --ahb-accent-color-rgb:  255, 153, 0;
  --ahb-accent-secondary:  #0b5fff;  /* navigation / info */
  --ahb-accent-success:    #15803d;  /* trust ✓ etc. */
  --ahb-accent-warning:    #b45309;  /* mistakes / warnings */
}

/* =====================================================
   Card radii + hover treatment
   ===================================================== */
.ahb-nextstep-card,
.ahb-guide-card,
.ahb-silo-card,
.ahb-aff-card,
.ahb-latest-card,
.ahb-top-pick-card {
  border-radius: var(--ahb-radius-card);
  box-shadow: var(--ahb-shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ahb-nextstep-card:hover,
.ahb-guide-card:hover,
.ahb-silo-card:hover,
.ahb-latest-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ahb-shadow-card-hover);
}
/* Affiliate cards: keep CTAs stable (no lift) so the click target
   doesn't shift under the cursor; just deepen the shadow. */
.ahb-aff-card:hover {
  box-shadow: var(--ahb-shadow-card-hover);
}

.ahb-card-thumb,
.ahb-card-thumb--fallback {
  border-radius: var(--ahb-radius-thumb);
}

/* =====================================================
   Section background tints — targeted via existing
   block-level classes rather than wrapper additions.
   ===================================================== */
.ahb-aff-products-section,
.ahb-aff-products-section--quick {
  background: var(--ahb-bg-accent);
  padding: 56px 16px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-methodology {
  background: var(--ahb-bg-soft);
  padding: 32px 24px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-authority-blocks {
  background: var(--ahb-bg-base);
  padding: 48px 16px;
}
.ahb-faq-accordion,
.wp-block-group.ahb-faq-accordion {
  background: var(--ahb-bg-soft);
  padding: 40px 16px;
  border-radius: var(--ahb-radius-card);
  margin: 32px 0;
}
.ahb-lead-magnet-section {
  background: var(--ahb-bg-accent);
}

@media (max-width: 700px) {
  .ahb-aff-products-section,
  .ahb-aff-products-section--quick,
  .ahb-authority-blocks,
  .ahb-faq-accordion {
    padding: 40px 12px;
  }
}

/* =====================================================
   Section heading accents
   ----------------------------------------------------
   Round 2 fix: replaced the previous over-specific
   selector chain. Now matches ANY h2 inside an
   .ahb-section wrapper, plus the existing block-class
   patterns from Round 1 as a safety net for sections that
   never wear the .ahb-section class. The :not()
   exclusions skip headings that already have their own
   icon-circle treatment (authority headings) or are part
   of a structurally-specific layout (Top Picks heading).
   ===================================================== */
.ahb-section h2:not(.ahb-authority-heading),
.ahb-aff-products-section > .ahb-aff-products-inner > .ahb-aff-products-heading,
.ahb-methodology > h2,
.ahb-faq-accordion > h2,
.ahb-faq-accordion > .wp-block-group__inner-container > h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  text-align: center;
  margin: 0 0 32px;
  position: relative;
  padding-bottom: 16px;
}
.ahb-section h2:not(.ahb-authority-heading)::after,
.ahb-aff-products-section > .ahb-aff-products-inner > .ahb-aff-products-heading::after,
.ahb-methodology > h2::after,
.ahb-faq-accordion > h2::after,
.ahb-faq-accordion > .wp-block-group__inner-container > h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  border-radius: var(--ahb-radius-pill);
  background: var(--ahb-accent-color);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* =====================================================
   Authority block icon-circle headings
   ----------------------------------------------------
   PHP renders <h2 class="ahb-authority-heading
   ahb-authority-heading--<kind>">. Each variant gets its
   own inline-SVG icon so the system is asset-free and
   survives plugin uninstall (CSS stays in uploads/).
   ===================================================== */
.ahb-authority-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  font-size: clamp(1.5rem, 2.3vw, 1.9rem);
  margin: 40px 0 20px;
  text-align: center;
}
.ahb-authority-heading::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: var(--ahb-radius-pill);
  background-color: var(--ahb-accent-color);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  flex-shrink: 0;
}
.ahb-authority-heading--key-terms::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M4 4h16v4H4zm0 6h16v4H4zm0 6h10v4H4z'/></svg>");
}
.ahb-authority-heading--checklist::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}
.ahb-authority-heading--mistakes::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M12 2L1 21h22L12 2zm0 4l9 15H3L12 6zm-1 5v5h2v-5h-2zm0 6v2h2v-2h-2z'/></svg>");
}
.ahb-authority-heading--protips::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 21h6v-1H9v1zm3-19a7 7 0 00-4 12.7V18h8v-3.3A7 7 0 0012 2z'/></svg>");
}
.ahb-authority-heading--methodology::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 11H7v6h2v-6zm4-2h-2v8h2V9zm4-4h-2v12h2V5zM5 19h14v2H5v-2z'/></svg>");
}

/* =====================================================
   Quick Checklist — custom checkboxes
   ----------------------------------------------------
   Targets ul.ahb-quick-checklist emitted by
   render_authority_blocks's list_block helper.
   ===================================================== */
.ahb-quick-checklist {
  list-style: none;
  padding-left: 0;
  max-width: 720px;
  margin: 0 auto;
}
.ahb-quick-checklist li {
  position: relative;
  padding: 14px 12px 14px 48px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 1rem;
  line-height: 1.55;
}
.ahb-quick-checklist li:last-child {
  border-bottom: none;
}
.ahb-quick-checklist li::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 2px solid var(--ahb-accent-color);
  border-radius: 6px;
  background: #ffffff;
  box-sizing: border-box;
}
.ahb-quick-checklist li::after {
  content: '';
  position: absolute;
  left: 18px;
  top: calc(50% - 4px);
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--ahb-accent-color);
  border-bottom: 2px solid var(--ahb-accent-color);
  transform: rotate(-45deg);
}

/* Common Mistakes & Pro Tips — keep bullets but soften list spacing
   and align with the checklist's max-width for visual rhythm. */
.ahb-common-mistakes,
.ahb-pro-tips {
  max-width: 720px;
  margin: 0 auto 24px;
  padding-left: 1.25em;
}
.ahb-common-mistakes li,
.ahb-pro-tips li {
  padding: 6px 0;
  line-height: 1.55;
}

/* =====================================================
   TL;DR callout (subhub Phase 3)
   ===================================================== */
.ahb-tldr {
  background: linear-gradient(135deg, #fff8e6 0%, #fff3d0 100%);
  border-left: 4px solid var(--ahb-accent-color);
  border-radius: var(--ahb-radius-card);
  padding: 22px 26px;
  margin: 0 0 32px;
  box-shadow: var(--ahb-shadow-card);
  position: relative;
}
.ahb-tldr::before {
  content: 'TL;DR';
  display: inline-block;
  background: var(--ahb-accent-color);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: var(--ahb-radius-pill);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.ahb-tldr p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* =====================================================
   FAQ accordion polish (wp:details inside .ahb-faq-accordion)
   ----------------------------------------------------
   Static + hub FAQs use plain h3+p; only the subhub
   accordion path goes through this selector chain.
   ===================================================== */
.ahb-faq-accordion details.wp-block-details {
  background: var(--ahb-bg-base);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--ahb-radius-card);
  margin: 0 0 12px;
  padding: 0;
  box-shadow: var(--ahb-shadow-card);
  transition: box-shadow 0.15s ease;
}
.ahb-faq-accordion details.wp-block-details[open] {
  box-shadow: var(--ahb-shadow-card-hover);
}
.ahb-faq-accordion details.wp-block-details summary {
  padding: 16px 52px 16px 20px;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
  position: relative;
}
.ahb-faq-accordion details.wp-block-details summary::-webkit-details-marker {
  display: none;
}
.ahb-faq-accordion details.wp-block-details summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--ahb-accent-secondary);
  transition: transform 0.2s ease;
}
.ahb-faq-accordion details.wp-block-details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.ahb-faq-accordion details.wp-block-details > *:not(summary) {
  padding: 0 20px 16px;
}

/* =====================================================
   Comparison table polish (hub-only, commercial)
   ----------------------------------------------------
   The renderer doesn't emit data-label on each <td> yet;
   the mobile fallback below uses scope=row patterns that
   keep the table readable without per-cell labels.
   ===================================================== */
.ahb-comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  overflow: hidden;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-comparison-table thead th {
  background: var(--ahb-accent-color);
  color: #ffffff;
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.ahb-comparison-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.ahb-comparison-table tbody tr:last-child td {
  border-bottom: none;
}
.ahb-comparison-table tbody tr:nth-child(even) {
  background: var(--ahb-bg-soft);
}
.ahb-comparison-table tbody tr:hover {
  background: var(--ahb-bg-accent);
}
.ahb-comparison-table tbody td:first-child {
  font-weight: 600;
}
.ahb-comparison-table .ahb-comparison-image {
  width: 60px;
  height: 60px;
  border-radius: var(--ahb-radius-button);
  object-fit: cover;
}
.ahb-comparison-table .ahb-comparison-cta a {
  display: inline-block;
  padding: 8px 16px;
  background: var(--ahb-accent-color);
  color: #ffffff !important;
  border-radius: var(--ahb-radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: filter 0.15s ease;
}
.ahb-comparison-table .ahb-comparison-cta a:hover {
  filter: brightness(0.95);
}
@media (max-width: 700px) {
  .ahb-comparison-table thead { display: none; }
  .ahb-comparison-table tr {
    display: block;
    margin-bottom: 12px;
    border-radius: var(--ahb-radius-card);
    box-shadow: var(--ahb-shadow-card);
    background: #ffffff;
  }
  .ahb-comparison-table td {
    display: block;
    border: none !important;
    padding: 10px 14px;
  }
  .ahb-comparison-table td:first-child {
    border-top-left-radius: var(--ahb-radius-card);
    border-top-right-radius: var(--ahb-radius-card);
    background: var(--ahb-bg-soft);
  }
}

/* =====================================================
   Lead-magnet polish
   ----------------------------------------------------
   The renderer emits inline-styled markup with classes
   .ahb-lead-magnet (form wrapper), .ahb-lead-magnet__form,
   .ahb-lead-magnet__input, .ahb-lead-magnet__cta. The
   rules below override the inline styles via specificity.
   ===================================================== */
.ahb-lead-magnet {
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  padding: 32px 28px;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: var(--ahb-shadow-card);
  text-align: center;
}
.ahb-lead-magnet h3,
.ahb-lead-magnet__headline {
  font-size: 1.4rem;
  margin: 0 0 12px;
}
.ahb-lead-magnet__promise {
  color: rgba(0, 0, 0, 0.7);
  margin: 0 0 20px;
}
.ahb-lead-magnet__form {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
}
.ahb-lead-magnet__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--ahb-radius-pill);
  font-size: 1rem;
}
.ahb-lead-magnet__input:focus {
  outline: 2px solid var(--ahb-accent-color);
  outline-offset: 0;
  border-color: transparent;
}
.ahb-lead-magnet__cta {
  padding: 12px 24px;
  background: var(--ahb-accent-color);
  color: #ffffff;
  border: none;
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.ahb-lead-magnet__cta:hover {
  filter: brightness(0.95);
}
.ahb-lead-magnet__status {
  font-size: 0.82rem;
  color: rgba(0, 0, 0, 0.5);
  margin: 14px 0 0;
}
@media (max-width: 600px) {
  .ahb-lead-magnet__form { flex-direction: column; }
  .ahb-lead-magnet__cta { width: 100%; }
}

/* =====================================================
   Typography rhythm
   ----------------------------------------------------
   Tightens vertical spacing inside AHB-rendered groups
   so the page reads with consistent cadence regardless
   of which AI copy variation was rendered.
   ===================================================== */
.ahb-authority-blocks p,
.ahb-authority-blocks ul,
.ahb-authority-blocks ol,
.ahb-aff-products-section p,
.ahb-methodology p,
.ahb-faq-accordion p {
  margin-bottom: 16px;
}
.ahb-authority-blocks p:last-child,
.ahb-aff-products-section p:last-child,
.ahb-methodology p:last-child,
.ahb-faq-accordion p:last-child {
  margin-bottom: 0;
}

/* =====================================================================
   PHASE 5 VISUAL POLISH ROUND 2
   --------------------------------------------------------------------
   Builds on Round 1. Same token-driven approach: thumbnail aspect-ratio
   lock, Quick Start pill refinement, Pro Tips two-column, Key Terms
   semantic dl polish, author byline, meta strip. Trust row and sticky
   TOC are deferred to a separate pass (see PHASE_NOTES).
   ===================================================================== */

/* Enforce 16:10 on every card thumbnail across the system. The earlier
   fixed-height rules (220px) are overridden here so cards line up
   across rows regardless of featured-image dimensions. */
.ahb-card-thumb,
.ahb-card-thumb--fallback,
.ahb-nextstep-card .ahb-card-thumb,
.ahb-guide-card__thumb,
.ahb-latest-card__thumb {
  aspect-ratio: 16 / 10;
  height: auto !important;
  width: 100%;
  overflow: hidden;
  border-radius: var(--ahb-radius-thumb);
}
.ahb-card-thumb img,
.ahb-card-thumb__image,
.ahb-latest-card__image,
.ahb-guide-card__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* =====================================================
   Quick Start pills — subtle chips instead of solid CTAs
   ----------------------------------------------------
   Round 2: the Quick Start bar used to render as a row
   of solid blue buttons, competing visually with the
   hero's primary CTAs. Now they read as filter-style
   chips: white-on-border by default, tinted on hover.
   ===================================================== */
.ahb-quickstart-bar {
  background: var(--ahb-bg-soft);
  padding: 32px 16px;
  text-align: center;
}
.ahb-quickstart-label {
  font-size: 0.85rem !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 16px !important;
}
.ahb-quickstart-label::after { display: none; }

.ahb-quickstart-bar .wp-block-buttons {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.ahb-quickstart-bar .wp-block-button.ahb-quickstart-pill .wp-block-button__link,
.ahb-quickstart-bar .wp-block-button .wp-block-button__link {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--ahb-radius-pill);
  padding: 8px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  box-shadow: none;
}
.ahb-quickstart-bar .wp-block-button .wp-block-button__link:hover {
  background: var(--ahb-accent-color);
  border-color: var(--ahb-accent-color);
  color: #ffffff !important;
}

/* =====================================================
   Key Terms semantic <dl> polish
   ----------------------------------------------------
   PHP already emits <dl class="ahb-key-terms"> in
   render_authority_blocks. Round 2 makes it read as a
   proper glossary: stacked on mobile, two-column with
   accent border on desktop.
   ===================================================== */
.ahb-key-terms {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--ahb-radius-card);
  padding: 4px 0;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-key-terms dt {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 16px 24px 6px;
  color: var(--ahb-accent-color);
  margin: 0;
}
.ahb-key-terms dd {
  margin: 0;
  padding: 0 24px 16px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.55;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.ahb-key-terms dd:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .ahb-key-terms {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    padding: 0;
  }
  .ahb-key-terms dt {
    padding: 18px 18px 18px 24px;
    text-align: right;
    border-right: 2px solid var(--ahb-accent-color);
    background: rgba(0, 0, 0, 0.015);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .ahb-key-terms dd {
    padding: 18px 24px;
  }
  .ahb-key-terms dt:nth-last-child(2),
  .ahb-key-terms dd:last-child {
    border-bottom: none;
  }
}

/* =====================================================
   Pro Tips two-column + lightbulb prefix
   ----------------------------------------------------
   Round 2: when the Pro Tips list runs long it visually
   collapses into a wall of bullets. CSS multi-column
   keeps each tip self-contained while halving the
   scroll-distance on desktop. The lightbulb prefix
   replaces the default disc bullet so the list reads
   distinctly from other authority lists.
   ===================================================== */
.ahb-pro-tips {
  list-style: none;
  padding: 0;
  max-width: 880px;
  margin: 0 auto;
}
.ahb-pro-tips li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.55;
}
.ahb-pro-tips li::before {
  content: '💡';
  position: absolute;
  left: 0;
  top: 0;
}
@media (min-width: 768px) {
  .ahb-pro-tips {
    column-count: 2;
    column-gap: 32px;
  }
  .ahb-pro-tips li {
    break-inside: avoid;
    margin-bottom: 12px;
  }
}

/* =====================================================
   Author byline (Round 2 PHP addition)
   ===================================================== */
.ahb-author-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
}
.ahb-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--ahb-radius-pill);
  object-fit: cover;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-author-byline__name {
  font-weight: 600;
  font-size: 0.98rem;
  color: rgba(0, 0, 0, 0.85);
}
.ahb-author-byline__date {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  margin-top: 2px;
}

/* =====================================================
   Meta strip (Round 2 PHP addition)
   ----------------------------------------------------
   Calendar + reading-time chips rendered above the
   first content section. Icons inherit the accent color.
   ===================================================== */
.ahb-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 24px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.ahb-meta-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ahb-meta-strip__item svg {
  color: var(--ahb-accent-color);
  flex-shrink: 0;
}

/* =====================================================================
   PHASE 5 ROUND 4 — Sticky TOC (hub + sub-hub only)
   --------------------------------------------------------------------
   Server-side this is an empty <ol>; assets/js/ahb-toc.js populates it
   from page H2s on DOMContentLoaded. Self-hides when JS isn't present
   OR when the page has fewer than 3 H2s (via the :has(:empty) rule
   below; the JS also sets display:none defensively).
   ===================================================================== */

.ahb-toc-wrap {
  margin: 0 0 32px;
}

/* Self-hide an unpopulated TOC. Modern browsers (Chrome 105+, Safari 15.4+,
   Firefox 121+ in 2024) support :has(); we use it as a progressive
   enhancement, the JS sets display:none as the actual fallback. */
.ahb-toc-wrap:has(.ahb-toc__list:empty) {
  display: none;
}

.ahb-toc {
  background: var(--ahb-bg-soft);
  border-radius: var(--ahb-radius-card);
  padding: 20px 24px;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-toc__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6);
  margin: 0 0 12px;
  user-select: none;
}
.ahb-toc__list {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 20px;
  margin: 0;
}
.ahb-toc__list li {
  display: list-item;
  margin: 6px 0;
  line-height: 1.4;
  font-size: 0.92rem;
}
.ahb-toc__list a {
  color: rgba(0, 0, 0, 0.7);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ahb-toc__list a:hover {
  color: var(--ahb-accent-secondary);
  border-bottom-color: var(--ahb-accent-secondary);
}
.ahb-toc__list a.is-active {
  color: var(--ahb-accent-secondary);
  font-weight: 600;
}

/* Desktop: sticky right-rail. The classic float:right + sticky pattern
   lets the surrounding Gutenberg block content wrap naturally to the
   left without any markup restructuring. top:100px keeps clear of WP
   admin bar + a typical theme sticky header — bump up if your theme's
   header is taller (see PHASE_NOTES). */
@media (min-width: 1100px) {
  .ahb-toc-wrap {
    float: right;
    width: 240px;
    margin: 0 0 32px 32px;
    position: sticky;
    top: 100px;
    z-index: 5;
  }
  .ahb-toc {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}
@media (min-width: 1400px) {
  .ahb-toc-wrap {
    width: 280px;
    margin-left: 48px;
  }
}

/* Mobile + tablet: collapsed disclosure. Closed by default; the JS
   toggles .is-open on the title's click / keyboard-Enter. */
@media (max-width: 1099px) {
  .ahb-toc {
    padding: 0;
  }
  .ahb-toc__title {
    cursor: pointer;
    padding: 14px 18px;
    margin: 0;
    position: relative;
    user-select: none;
  }
  .ahb-toc__title::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
    opacity: 0.6;
  }
  .ahb-toc:not(.is-open) .ahb-toc__list {
    display: none;
  }
  .ahb-toc.is-open .ahb-toc__title::after {
    transform: translateY(-25%) rotate(-135deg);
  }
  .ahb-toc__list {
    padding: 0 24px 16px 40px;
  }
  .ahb-toc__list li {
    margin: 8px 0;
    font-size: 0.95rem;
  }
}

/* Astra coordination: the theme tends to force link underlines and
   sometimes flattens decimal lists. Lock these so the TOC visual is
   the same on every Astra-derived theme variant. !important is
   intentional and narrowly scoped to .ahb-toc__list links/items. */
.ahb-toc__list a {
  text-decoration: none !important;
  box-shadow: none !important;
}
.ahb-toc__list a:hover,
.ahb-toc__list a.is-active {
  text-decoration: none !important;
}

/* Print: drop the TOC entirely so it doesn't waste ink. */
@media print {
  .ahb-toc-wrap {
    display: none !important;
  }
}

/* =====================================================================
   PHASE 5 ROUND 5 — Prose intro section variant
   --------------------------------------------------------------------
   Used by the hub "What you'll get here / How to start" intro and the
   sub-hub "Key highlights / How to choose" intro. Distinct from
   centered authority / Top-Picks sections: prose-heavy reading flows
   left-aligned, so the heading accent underline anchors at the left
   edge instead of being centered under the headline.
   ===================================================================== */
.ahb-section--prose {
  background: var(--ahb-bg-base);
}
.ahb-section--prose h2:not(.ahb-authority-heading) {
  text-align: left;
}
.ahb-section--prose h2:not(.ahb-authority-heading)::after {
  left: 0;
  transform: none;
}
.ahb-section--prose h3 {
  font-size: 1.1rem;
  margin-top: 24px;
  margin-bottom: 8px;
}
.ahb-section--prose ul {
  margin-bottom: 16px;
}

/* Start-Here Next Steps lives on the white base; the heading keeps the
   shared centered-accent treatment. No special rules needed beyond the
   token-default — just declaring the background for clarity. */
.ahb-section--nextsteps {
  background: var(--ahb-bg-base);
}

/* =====================================================================
   PHASE 5 ROUND 7 — Homepage conversion pass
   --------------------------------------------------------------------
   Hero gradient + secondary CTA styling, expanded About block,
   leadmagnet submit button color, fallback form button. The Phase 4
   Lead_Magnet block (with full provider stack) renders itself with its
   own inline styles; the rules here are for the simple-fallback form
   only.
   ===================================================================== */

/* Hero — subtle two-tone gradient + radial accent in upper-right.
   Overrides the existing inline `background-color` via specificity (more
   selectors) without needing !important. */
.ahb-hero-section {
  background: linear-gradient(135deg, var(--ahb-bg-soft) 0%, var(--ahb-bg-accent) 100%);
  position: relative;
  overflow: hidden;
}
.ahb-hero-section > .wp-block-group__inner-container {
  position: relative;
  z-index: 1;
}
.ahb-hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(var(--ahb-accent-color-rgb), 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Hero secondary CTA — outlined variant. Gutenberg's
   .is-style-outline does most of the work; we just align the radius +
   weight with the rest of the design tokens. */
.ahb-hero-cta-secondary .wp-block-button__link {
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  border-width: 2px;
}
.ahb-hero-cta-primary .wp-block-button__link {
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
}

/* Expanded About — avatar + mission + author bio + trust signals.
   Stacked column on mobile, two-column on tablet+. */
.ahb-section--about {
  background: var(--ahb-bg-base);
  padding: 56px 16px;
}
.ahb-about {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}
.ahb-about__media {
  flex: 0 0 120px;
}
.ahb-about-avatar {
  width: 120px;
  height: 120px;
  border-radius: var(--ahb-radius-pill);
  object-fit: cover;
  box-shadow: var(--ahb-shadow-card);
}
.ahb-about__body {
  flex: 1;
  min-width: 0;
}
.ahb-about__heading {
  font-size: 1.6rem;
  margin: 0 0 12px;
  text-align: left;
  position: relative;
  padding-bottom: 12px;
}
.ahb-about__heading::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  border-radius: var(--ahb-radius-pill);
  background: var(--ahb-accent-color);
  position: absolute;
  bottom: 0;
  left: 0;
}
.ahb-about__mission {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 16px;
}
.ahb-about__author {
  color: rgba(0, 0, 0, 0.75);
  margin: 0 0 16px;
}
.ahb-about__trust {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.ahb-about__trust li {
  position: relative;
  padding-left: 24px;
  font-size: 0.92rem;
  color: rgba(0, 0, 0, 0.7);
}
.ahb-about__trust li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--ahb-accent-success);
  font-weight: 700;
}
@media (max-width: 700px) {
  .ahb-about {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  .ahb-about__heading {
    text-align: center;
  }
  .ahb-about__heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .ahb-about__trust {
    text-align: left;
  }
}

/* Fallback simple-form submit button (when Phase 4 Lead_Magnet isn't
   wired up). Recolored from the previous blue WP-button default to the
   commercial-orange accent so the conversion action reads consistently. */
.ahb-leadmagnet-fallback-submit {
  background: var(--ahb-accent-color);
  color: #ffffff;
  border: none;
  border-radius: var(--ahb-radius-pill);
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
  padding: 10px 22px;
}
.ahb-leadmagnet-fallback-submit:hover {
  filter: brightness(0.95);
}