/* Skip to main content link — WCAG 2.4.1 (Bypass Blocks) */

.skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  padding: 0.75rem 1.25rem;
  margin: 0;
  background-color: #000 !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none !important;
  border: 2px solid #fff;
  border-radius: 0 0 0.25rem 0;
}

.skip-link:not(:focus):not(:focus-visible):not(.is-focused) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link:hover {
  color: #fff !important;
  text-decoration: none !important;
}

.skip-link:focus,
.skip-link:focus-visible,
.skip-link.is-focused {
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1.25rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 3px #005fcc !important;
  outline: none !important;
}

#main-content,
#pageContent {
  scroll-margin-top: 150px;
}

#main-content:focus,
#pageContent:focus,
#main-content-start:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Keyboard-only focus ring. Mouse clicks use :focus without :focus-visible, so default appearance is unchanged. */
a:focus-visible:not(.skip-link),
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #005fcc !important;
  outline-offset: 2px !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: fixed !important;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  margin: 0 !important;
  padding: 0.75rem 1.25rem;
  overflow: visible !important;
  white-space: normal !important;
  background-color: #000 !important;
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  border: 2px solid #fff;
  border-radius: 0 0 0.25rem 0;
}

#header .header-body .header-nav-top .nav > li > a:not(.text-light):not(.text-color-light),
#header .header-body .header-nav-top .nav > li > span:not(.text-light):not(.text-color-light) {
  color: #595959;
}

body {
  color: #595959;
}

.points > li {
  color: #595959;
}

/* Editor orange (#ff9900) on white is 2.14:1. #A34B00 is ~5.7:1 and stays orange. */
.body [style*="color:#ff9900"],
.body [style*="color: #ff9900"],
.body [style*="color:#FF9900"],
.body [style*="color: #FF9900"],
.body [style*="color:#f90"],
.body [style*="color: #f90"],
.body [style*="color:#F90"],
.body [style*="color: rgb(255, 153, 0)"],
.body [style*="color:rgb(255, 153, 0)"],
.body [style*="color: rgb(255,153,0)"],
.body [style*="color:rgb(255,153,0)"],
.body [style*="color: rgba(255, 153, 0"],
.body [style*="color:rgba(255, 153, 0"],
.body [style*="color: rgba(255,153,0"],
.body [style*="color:rgba(255,153,0"] {
  color: #A34B00 !important;
}

.nav-list label.checkbox-inline,
.nav-list .nav-item > label {
  color: #666;
}

#header .text-color-default,
#header .text-default,
.main .text-color-default,
.main .text-default {
  color: #595959 !important;
}

/* Header contact labels are #999 in the theme (about 2.8:1 on white). #595959 is 7:1. */
#header .header-column .header-extra-info li .header-extra-info-text label {
  color: #595959;
}

/* White on the theme badge greens/blues is about 3:1. These backgrounds clear 4.5:1.
   The product-card rules in responsive-cards.css repeat the old colors, including with !important. */
.badge-success,
.badge-ecommerce.badge-success,
.product-thumb-info-badges-wrapper .badge-success {
  background-color: #146c43 !important;
  color: #fff !important;
}

.badge-info,
.badge-ecommerce.badge-info,
.product-thumb-info-badges-wrapper .badge-info {
  background-color: #0f6674 !important;
  color: #fff !important;
}

/* Product names are h3. These filter titles used to be h5, which skipped h4. Keep the h5 size. */
h4.filter-heading {
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: -0.05em;
}

/* Plant detail: SKU titles follow the plant name (h1). .sku-name in the card stylesheet keeps the size. */

/* These sections follow the SKU titles. Keep the former h5 / h6 size. */
h3.detail-h5,
h4.detail-h6 {
  font-size: 1em;
  line-height: 18px;
  margin: 0 0 14px;
  letter-spacing: -0.05em;
}

h3.detail-h5 {
  font-weight: 600;
  text-transform: uppercase;
}

h4.detail-h6 {
  font-weight: 400;
  text-transform: none;
  color: #333;
}

/* Footers sit on the site's dark brand colors. Theme link and copyright
   colors are #777 and #555, which fail contrast. Keep footer text white.
   Light badges keep dark text so white-on-white does not fail. */
#footer,
#footer p,
#footer li,
#footer span,
#footer i,
#footer .footer-copyright p,
#footer a:not(.btn),
#footer a:not(.btn):hover,
#footer a:not(.btn):focus,
#footer a:not(.btn):active,
#footer a:not(.btn):not(.no-footer-css),
#footer a:not(.btn):not(.no-footer-css):hover,
#footer a:not(.btn):not(.no-footer-css):focus,
#footer a:not(.btn):not(.no-footer-css):active,
#footer a:not(.btn):not(.no-footer-css).text-color-light,
#footer a:not(.btn):not(.no-footer-css).text-color-light:hover,
#footer a:not(.btn):not(.no-footer-css).text-color-light:focus,
#footer a:not(.btn):not(.no-footer-css).text-color-light:active {
  color: #ffffff !important;
}

#footer .opacity-7 {
  opacity: 1 !important;
}

#footer a.badge.badge-light,
#footer a.badge.badge-light:hover,
#footer a.badge.badge-light:focus,
#footer a.badge.badge-light:active {
  color: #1a1a1a !important;
}

/* Footer column labels are not part of the page outline. Keep the former h5 look. */
#footer p.footer-label {
  color: #fff;
  font-weight: 600;
  letter-spacing: -0.05em;
  line-height: 18px;
  text-transform: uppercase;
  margin-top: 0;
}

/* Home page plant names follow a section title. Keep the former h5 size. */
h3.card-h5 {
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 14px;
}

/* Where to Buy form titles follow the page title. Keep the former h5 size. */
h2.form-heading {
  font-size: 1em;
  font-weight: 600;
  line-height: 18px;
  margin: 0 0 14px;
  text-transform: uppercase;
}

/* Contact page section titles follow the location name. Keep the former h4 size. */
h2.contact-h4 {
  font-size: 1.4em;
  font-weight: 600;
  line-height: 27px;
  margin: 0 0 14px;
  text-transform: none;
}

/* Intro and location copy can include links in the same color as the paragraph. */
.contact-page p a {
  text-decoration: underline;
}

/* Bloom, foliage, and the other spec links sit in the same color as the surrounding text. */
.plant-spec-list a {
  text-decoration: underline;
}

/* White on the theme danger red is just under 4.5:1 at badge size. */
.badge-danger,
.badge-ecommerce.badge-danger,
.product-thumb-info-badges-wrapper .badge-danger {
  background-color: #a32030 !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .appear-animation,
  [data-appear-animation],
  [data-plugin-animated-letters],
  .owl-carousel,
  .owl-carousel-light,
  .rev_slider,
  .background-image-wrapper {
    animation: none !important;
    transition: none !important;
  }
}