/* ===========================================================================
   BabyGearWise — brand buttons
   One green everywhere. Normal #8FB39F rgb(143,179,159) with DARK ink, hover
   the menu button's green rgb(143,179,159) with dark ink.

   Why dark ink on the normal state: #8FB39F against white text is only 2.3:1,
   below the 4.5:1 minimum. Dark ink gives 6:1. Both states therefore pass.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The "Tools" dropdown click-target is a bare <button> that must stay
   INVISIBLE. The broad button rule below was painting it green, which showed up
   as an empty green rectangle in the nav next to "Free Checklist".
   --------------------------------------------------------------------------- */
.dropdown-nav-special-toggle,
.dropdown-nav-toggle,
.header-navigation .dropdown-nav-special-toggle{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
}

/* ---------------------------------------------------------------------------
   Remove the empty mobile menu toggle from the desktop header.
   Kadence normally hides this above the mobile breakpoint; it was rendering as
   a bare green rectangle next to "Free Checklist" with no icon in it.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  .mobile-toggle-open-container,
  .site-header-item-navgation-popup-toggle,
  #mobile-toggle,
  .menu-toggle-open {
    display: none !important;
  }
}

:root{
  --bgw-btn:       rgb(143, 179, 159);
  --bgw-btn-hover: rgba(143,179,159,.85);
  --bgw-btn-ink:   #2B2A28;
  --bgw-nav-bg:    rgb(43, 42, 40);   /* the requested nav + footer background */
}

/* ---------------------------------------------------------------------------
   Nav bar + footer background — rgb(43,42,40), as requested.
   Background only. The nav's own text has to invert or it becomes invisible on
   the dark bar; that is the single companion change, nothing else is touched.
   --------------------------------------------------------------------------- */
.site-header,
.site-header-inner-wrap,
.site-header .site-header-main-section-left,
.site-header .site-header-main-section-right,
.site-header .site-header-row-container-inner,
.site-header .site-container{
  background: var(--bgw-nav-bg) !important;
}

/* the menu's own container was painting a light grey panel over the dark bar,
   which is why the links looked washed out. It is part of the nav background. */
.site-header .primary-menu-container,
.site-header .header-menu-container,
.site-header .main-navigation,
.site-header .header-navigation,
.site-header nav,
.site-header .menu,
.site-header .primary-menu-container ul,
.site-header .site-header-item-main-navigation{
  background: transparent !important;
}

/* the dropdown panel itself was transparent — its links are cream, so they
   landed on the white page behind it and disappeared. Give it the nav dark. */
.site-header .sub-menu,
.site-header ul.sub-menu,
.site-header .primary-menu-container .sub-menu,
.site-header .dropdown-menu{
  background: var(--bgw-nav-bg) !important;
}

/* keep the items transparent so the panel shows through, and readable */
.site-header .sub-menu li,
.site-header .sub-menu a,
.site-header .sub-menu li > a{
  background-color: transparent !important;
  color: #F7F2EA !important;
}

/* hover feedback on the dropdown rows */
.site-header .sub-menu a:hover,
.site-header .sub-menu a:focus,
.site-header .sub-menu li > a:hover{
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: rgb(143, 179, 159) !important;
}

/* the mobile drawer's toggle for a parent item should read on the dark bar too */
.site-header .menu-toggle-open,
.site-header .drawer-toggle{
  color: #F7F2EA !important;
}

/* ---------- the real footer is .bgw-footer (rendered by the FooterMenu snippet) ---------- */
.bgw-footer{
  background: var(--bgw-nav-bg) !important;
}

/* nav text: dark-on-dark is unreadable, so the links and logo title go light */
.site-header nav a,
.site-header .main-navigation a,
.site-header .header-navigation a,
.site-header .site-title a,
.site-header .site-title{
  color: #F7F2EA !important;
}
.site-header nav a:hover{
  color: rgb(143,179,159) !important;
}

/* The button rule lower in this file was painting EVERY nav <a> white, which
   put cream text on a white box — the links looked washed out. The links (and
   the logo link) must be transparent so the dark bar shows through. */
.site-header nav a,
.site-header .main-navigation a,
.site-header .header-navigation a,
.site-header .primary-menu-container a,
.site-header .primary-menu-container ul.menu > li > a,
.site-header .custom-logo-link,
.site-header .site-branding a{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
/* keep the logo image itself unchanged — only its link background was wrong */
.site-header .custom-logo-link img,
.site-header .custom-logo{
  background: transparent !important;
  box-shadow: none !important;
}
/* the one real button in the bar keeps its green fill */
.site-header .header-button,
.site-header a.header-button,
.site-header .header-button-container a{
  background: var(--bgw-btn) !important;
  color: var(--bgw-btn-ink) !important;
}
.site-header .header-button:hover,
.site-header a.header-button:hover{
  background: var(--bgw-btn-hover) !important;
  color: #fff !important;
}


/* ---------------------------------------------------------------------------
   /all-reviews/ — the WordPress blog index. It renders with the Kadence theme
   loop (article.entry.loop-entry), which is a different design from the pSEO
   cards. Bring it into the same system: white card, hairline border, brand-green
   category pill, serif titles, brand-green "read more".
   --------------------------------------------------------------------------- */
body.blog .entry.loop-entry,
body.archive .entry.loop-entry{
  background: #fff !important;
  border: 1px solid #E7E3DD !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  /* stretch to fill the grid row so every card in a row lines up */
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
body.blog .entry.loop-entry .entry-content-wrap,
body.archive .entry.loop-entry .entry-content-wrap{
  padding: 22px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
body.blog .kadence-posts-list .entry-footer,
body.archive .kadence-posts-list .entry-footer{ margin-top: auto !important }

/* the page title sits inside the grid <ul>; without this it occupies the first
   card cell and pushes the whole grid one column out of alignment */
body.blog .kadence-posts-list > .bgw-blog-title,
body.archive .kadence-posts-list > .bgw-blog-title{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 0 4px !important;
}
body.blog .entry.loop-entry .entry-taxonomies,
body.archive .entry.loop-entry .entry-taxonomies{ margin-bottom: 10px !important }

body.blog .entry.loop-entry .entry-taxonomies a,
body.archive .entry.loop-entry .entry-taxonomies a{
  background: var(--bgw-btn) !important;
  color: var(--bgw-btn-ink) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
}
body.blog article.entry h2.entry-title,
body.archive article.entry h2.entry-title,
body.blog article.entry h2.entry-title a,
body.archive article.entry h2.entry-title a,
body.blog .entry.loop-entry .entry-title,
body.archive .entry.loop-entry .entry-title,
body.blog .entry.loop-entry .entry-title a,
body.archive .entry.loop-entry .entry-title a{
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  color: #2B2A28 !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
}
body.blog .entry.loop-entry .entry-summary,
body.archive .entry.loop-entry .entry-summary{
  color: #5A5751 !important;
  font-size: .94rem !important;
  line-height: 1.6 !important;
}
body.blog .entry.loop-entry .entry-meta,
body.archive .entry.loop-entry .entry-meta{
  color: #8A8580 !important;
  font-size: .84rem !important;
}
body.blog .entry.loop-entry .entry-actions a,
body.archive .entry.loop-entry .entry-actions a,
body.blog .entry.loop-entry .more-link,
body.archive .entry.loop-entry .more-link{
  color: var(--bgw-btn-hover) !important;
  font-family: 'DM Sans', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}
body.blog .entry.loop-entry .post-thumbnail,
body.archive .entry.loop-entry .post-thumbnail{ margin: 0 !important }
body.blog .entry.loop-entry .post-thumbnail-inner img,
body.archive .entry.loop-entry .post-thumbnail-inner img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------------------------
   Product-card badges (BEST OVERALL / BEST VALUE …). They used
   background: var(--sage) = rgb(143,179,159) with dark text. Same green as the buttons,
   dark ink on top.
   --------------------------------------------------------------------------- */
.bgw-pseo .badge,
.bgw-pseo .badge.top{
  background: var(--bgw-btn) !important;
  color:      var(--bgw-btn-ink) !important;
}

/* ---------------------------------------------------------------------------
   The homepage masthead category pill ("STROLLERS" etc). It used
   background: var(--sage) = rgb(143,179,159) with dark text. Same green as the buttons
   now, with dark ink for contrast.
   --------------------------------------------------------------------------- */
.bgwh-pill-sage{
  background: var(--bgw-btn) !important;
  color:      var(--bgw-btn-ink) !important;
}

/* ---- normal state ------------------------------------------------------- */
/* #masthead a.header-button must be matched at ID specificity — the theme's
   own rule is "#masthead a.header-button { background:#618972 !important }"
   and beats a bare class selector even with !important. */
body #masthead a.header-button,
body #masthead .button.header-button,
body #main-header .header-button,
body .site-header .button.header-button,
.button,
.header-button,
.site-header .button.header-button,
#masthead a.header-button,
#masthead .button.header-button,
.button-style-filled,
.bgw-pseo .btn,
.bgw-pseo .btn-primary,
.bgw-pseo .btn-ghost,
.bgwh-amz,
.bgwh-pick-actions a.bgwh-amz,
.wp-block-button__link,
.kb-button,
.cta-btn,
.cta-buttons a,
a.buy-now-btn,
.product-review a.buy-now-btn,
form.newsletter button,
form button[type="submit"],
input[type="submit"],
input[type="button"],
#mobile-toggle,
.menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open,
button:not(.menu-toggle):not(.search-submit):not(.dismiss):not(.modal-close):not(.dropdown-nav-special-toggle):not(.dropdown-nav-toggle){
  background-color: var(--bgw-btn) !important;
  border-color:     var(--bgw-btn) !important;
  color:            var(--bgw-btn-ink) !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* ---- hover / keyboard focus — the menu button's green ------------------- */
body #masthead a.header-button:hover,
body #masthead .button.header-button:hover,
body #main-header .header-button:hover,
body .site-header .button.header-button:hover,
.button:hover, .button:focus-visible,
.header-button:hover, .header-button:focus-visible,
.site-header .button.header-button:hover,
#masthead a.header-button:hover,
#masthead .button.header-button:hover,
.button-style-filled:hover,
.bgw-pseo .btn:hover, .bgw-pseo .btn:focus-visible,
.bgw-pseo .btn-primary:hover, .bgw-pseo .btn-ghost:hover,
.bgwh-amz:hover,
.wp-block-button__link:hover,
.kb-button:hover,
.cta-btn:hover, .cta-buttons a:hover,
a.buy-now-btn:hover,
form.newsletter button:hover,
form button[type="submit"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
#mobile-toggle:hover,
.menu-toggle-open:hover,
button:not(.menu-toggle):not(.search-submit):not(.dropdown-nav-special-toggle):not(.dropdown-nav-toggle):hover{
  background-color: var(--bgw-btn-hover) !important;
  border-color:     var(--bgw-btn-hover) !important;
  color:            #fff !important;
}