/* Build 338 - authoritative public scroll control.
   This stylesheet must load LAST. It normalises every real page-level scroll
   button to the same dark Home-style control and removes all legacy halo /
   pseudo-element treatments. It also restores Wedding Advice's "Browse advice"
   CTA as a normal hero pill so it cannot sit underneath the real scroll button. */

html:root body[class][class] button.section-scroll-next.section-scroll-next,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
html:root body[class][class] button.article-page-scroll.article-page-scroll {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  z-index: 9998 !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  max-width: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(244,210,124,.72) !important;
  border-radius: 50% !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(8,8,8,.94) !important;
  background-color: rgba(8,8,8,.94) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  opacity: .92 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next::before,
html:root body[class][class] button.section-scroll-next.section-scroll-next::after,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll::before,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll::after,
html:root body[class][class] button.article-page-scroll.article-page-scroll::before,
html:root body[class][class] button.article-page-scroll.article-page-scroll::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next[hidden],
html:root body[class][class] button.advice-page-scroll.advice-page-scroll[hidden],
html:root body[class][class] button.article-page-scroll.article-page-scroll[hidden] {
  display: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll svg {
  width: 23px !important;
  height: 23px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.65)) !important;
  transition: transform .18s ease !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next svg path,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg path,
html:root body[class][class] button.article-page-scroll.article-page-scroll svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next:hover,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus-visible,
html:root body[class][class] button.section-scroll-next.section-scroll-next:active,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:hover,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus-visible,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:active,
html:root body[class][class] button.article-page-scroll.article-page-scroll:hover,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus-visible,
html:root body[class][class] button.article-page-scroll.article-page-scroll:active {
  opacity: 1 !important;
  border-color: var(--gold-light, #f4d27c) !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: rgba(8,8,8,.985) !important;
  background-color: rgba(8,8,8,.985) !important;
  color: var(--gold-light, #f4d27c) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
  filter: none !important;
}

html:root body[class][class] button.section-scroll-next.section-scroll-next:hover svg,
html:root body[class][class] button.section-scroll-next.section-scroll-next:focus-visible svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:hover svg,
html:root body[class][class] button.advice-page-scroll.advice-page-scroll:focus-visible svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll:hover svg,
html:root body[class][class] button.article-page-scroll.article-page-scroll:focus-visible svg {
  transform: translateY(2px) !important;
}

/* Wedding Advice had TWO controls occupying the same bottom-centre position:
   the real .advice-page-scroll button plus a legacy rule that converted the
   "Browse advice" hero CTA into a second circular arrow. That second element
   was the apparent thick gold halo. Restore it to the standard hero pill. */
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
  box-sizing: border-box !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 50px !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 27px !important;
  transform: none !important;
  border: 1px solid #d3a437 !important;
  border-radius: 999px !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: linear-gradient(135deg,#a86f18 0%,#efc45f 100%) !important;
  color: #080704 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: Lato, Arial, sans-serif !important;
  font-size: clamp(.78rem,.78vw,.88rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: .105em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-indent: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: none !important;
  filter: none !important;
}

html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"]::before,
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"]::after {
  content: none !important;
  display: none !important;
}

html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn.btn-primary[href="#articles"]:hover,
html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn.btn-primary[href="#articles"]:focus-visible {
  background: linear-gradient(135deg,#bb7f1c 0%,#f4cf75 100%) !important;
  border-color: #d3a437 !important;
  color: #080704 !important;
  outline: 0 !important;
  box-shadow: 0 12px 28px rgba(164,112,26,.18) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 640px) {
  html:root body[class][class] button.section-scroll-next.section-scroll-next,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
  html:root body[class][class] button.article-page-scroll.article-page-scroll {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
  }
  html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
  html:root body[class][class] button.article-page-scroll.article-page-scroll svg {
    width: 20px !important;
    height: 20px !important;
  }
  html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
    min-height: 48px !important;
    padding: 11px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:root body[class][class] button.section-scroll-next.section-scroll-next,
  html:root body[class][class] button.section-scroll-next.section-scroll-next svg,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll,
  html:root body[class][class] button.advice-page-scroll.advice-page-scroll svg,
  html:root body[class][class] button.article-page-scroll.article-page-scroll,
  html:root body[class][class] button.article-page-scroll.article-page-scroll svg,
  html:root body.resource-page.resource-page-advice main#main-content > .resource-hero.jt-standard-hero .hero-actions > a.btn[href="#articles"] {
    transition: none !important;
  }
}

/* Build 342 - the page-level scroller is persistent on every public route.
   Existing page scripts may still set hidden/visibility at their final target;
   the universal controller owns that final state and flips the same arrow UP. */
html:root body[class][class] button.section-scroll-next.jt-scroll-universal[hidden],
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal[hidden],
html:root body[class][class] button.article-page-scroll.jt-scroll-universal[hidden] {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-returning svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-at-end svg,
html:root body[class][class] button.section-scroll-next.jt-scroll-universal.is-returning:hover svg,
html:root body[class][class] button.advice-page-scroll.jt-scroll-universal.is-returning:hover svg,
html:root body[class][class] button.article-page-scroll.jt-scroll-universal.is-returning:hover svg {
  transform: rotate(180deg) !important;
}


/* Build 342 - site-wide text-action pill audit.
   Genuine text actions are capsules everywhere. Media tiles/cards stay cards,
   and icon-only navigation controls retain their existing circular treatment. */
html body .btn,
html body a.btn,
html body button.btn,
html body form button[type="submit"],
html body form input[type="submit"],
html body form input[type="button"],
html body form input[type="reset"],
html body .resource-filter-link,
html body .advice-pagination__page,
html body .advice-pagination__control,
html body .article-sequence-link,
html body .setup-product-link,
html body .setup-product-details,
html body .supplier-modal-link,
html body .performance-map-control-button,
html body .calendar-view-button,
html body .calendar-nav-button,
html body .calendar-today-button,
html body .cookie-choice-button,
html body .nav-toggle,
html body .performance-map-map-controls button,
html body .supplier-social-link {
  border-radius: 999px !important;
}

/* Wedding Advice's legacy desktop sidebar deliberately flattened its category
   actions after the general button system loaded; make the pill rule explicit. */
html:root body.resource-page.resource-page-advice main#main-content > #articles .advice-toolbar a.btn {
  border-radius: 999px !important;
}

/* Previous / next article controls are navigation actions, not content cards. */
html body.resource-page.resource-page-advice .article-sequence-link {
  min-height: 80px !important;
  justify-content: center !important;
  padding: 14px 24px !important;
}
@media (max-width:620px) {
  html body.resource-page.resource-page-advice .article-sequence-link {
    min-height: 72px !important;
    padding: 12px 20px !important;
  }
}