/* 
 * -----------------------------------------------------------------------------
 * BASE TYPOGRAPHY, BODY & RESET
 * ----------------------------------------------------------------------------- 
 */
body, .site, #page {
  background-color: var(--jro-bg);
  color: var(--jro-text-primary);
  font-family: var(--jro-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6,
.site h1, .site h2, .site h3, .site h4, .site h5, .site h6,
#page h1, #page h2, #page h3, #page h4, #page h5, #page h6 {
  color: var(--jro-text-primary);
  margin-top: 0;
  margin-bottom: var(--jro-spacing-md);
  font-weight: 600;
  line-height: 1.2;
  font-family: var(--jro-font-family);
}

a, .site a, #page a {
  color: var(--jro-text-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

#page a:not(:where(
    .button,
    .wp-element-button,
    .wp-block-button__link,
    .wc-block-components-button,
    .add_to_cart_button,
    .jro-btn,
    .jro-btn-add-to-cart,
    .jro-cart-continue,
    .buy-now-btn,
    .reset_variations,
    [role="button"],
    .wc-block-checkout__login-prompt
)):hover {
  color: var(--jro-maroon-hover);
}

p, .site p, #page p {
  color: var(--jro-text-secondary);
  margin-top: 0;
  margin-bottom: var(--jro-spacing-md);
  font-family: var(--jro-font-family);
}

/* Focus states */
*:focus-visible {
  outline: 2px solid var(--jro-maroon);
  outline-offset: 2px;
}

/* Keep the accessibility skip link out of the visual layout until it receives
 * keyboard focus. The theme header includes this link on every page, so its
 * default state must not take up space or appear over the header. */
.screen-reader-text:not(:focus):not(:active) {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.skip-link.screen-reader-text:focus {
  background: var(--jro-surface, #1f2228) !important;
  border: 2px solid var(--jro-maroon) !important;
  border-radius: var(--jro-radius-sm, 6px) !important;
  clip: auto !important;
  clip-path: none !important;
  color: var(--jro-text-primary, #fff) !important;
  height: auto !important;
  left: 0.75rem !important;
  margin: 0 !important;
  overflow: visible !important;
  padding: 0.5rem 0.75rem !important;
  position: absolute !important;
  top: 0.75rem !important;
  width: auto !important;
  white-space: normal !important;
  z-index: 100000 !important;
}