/* ==========================================================================
   WordPress and WooCommerce integration rules.
   The approved design system is assets/css/site.css and is loaded first.
   Everything below only adapts markup that the static site had no equivalent
   for (WordPress core classes, WooCommerce wrappers, pagination, admin bar).
   ========================================================================== */

/* Core accessibility helper, required by the theme review guidelines. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip-path: none;
  color: var(--color-navy-900, #0b2540);
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: var(--space-4, 1rem);
  line-height: normal;
  padding: 0.75rem 1rem;
  text-decoration: none;
  top: var(--space-4, 1rem);
  width: auto;
  z-index: 100000;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  position: fixed;
  top: var(--space-4, 1rem);
  left: var(--space-4, 1rem);
  z-index: 100000;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.3);
  color: var(--color-navy-900, #0b2540);
}

/* --------------------------------------------------------------------------
   Editable block content inside marketing templates.
   Extracted page markup is stored verbatim, so these rules keep core block
   output from inheriting editor-only spacing.
   -------------------------------------------------------------------------- */
.page-content > .wp-block-html > :first-child,
.page-content > :first-child {
  margin-top: 0;
}

.page-content img {
  max-width: 100%;
  height: auto;
}

.page-content .wp-block-heading,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4 {
  scroll-margin-top: 120px;
}

.wp-block-group.alignwide,
.alignwide {
  max-width: var(--container-width, 1200px);
  margin-left: auto;
  margin-right: auto;
}

.wp-block-group.alignfull,
.alignfull {
  max-width: none;
  width: 100%;
}

/* --------------------------------------------------------------------------
   WooCommerce wrappers. The static catalog markup is reused, so only the
   wrappers WooCommerce itself emits need mapping onto the design system.
   -------------------------------------------------------------------------- */
.woocommerce-page .woocommerce-products-header,
.woocommerce-page .products,
.woocommerce-page .puraqva-shop,
.woocommerce .puraqva-shop {
  width: 100%;
}

.puraqva-shop {
  width: 100%;
}

.woocommerce-result-count,
.woocommerce-ordering {
  display: none;
}

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  gap: var(--space-2, 0.5rem);
  justify-content: center;
  list-style: none;
  margin: var(--space-12, 3rem) 0 0;
  padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border-radius: 8px;
  border: 1px solid var(--color-slate-200, #e2e8f0);
  color: var(--color-navy-900, #0b2540);
  text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background: var(--color-teal-600, #0d9488);
  border-color: var(--color-teal-600, #0d9488);
  color: #fff;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--color-teal-600, #0d9488);
  background: var(--color-slate-50, #f8fafc);
  color: var(--color-navy-900, #0b2540);
  list-style: none;
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  margin: 0 auto var(--space-6, 1.5rem);
  max-width: var(--container-width, 1200px);
}

/* Variation selector rendered as buttons, matching the approved design. */
.puraqva-variations {
  margin-bottom: var(--space-12, 3rem);
}

.puraqva-variation-group + .puraqva-variation-group {
  margin-top: var(--space-5, 1.25rem);
}

.puraqva-variation-sku {
  font-size: 0.8125rem;
  color: var(--color-slate-500, #64748b);
}

.puraqva-variation-message {
  color: var(--color-amber-700, #b45309);
  font-size: 0.875rem;
  margin-top: var(--space-2, 0.5rem);
}

/* Legal and long-form pages ported from the static site. */
.legal-content {
  max-width: 860px;
}

.legal-content h2 {
  margin-top: var(--space-12, 3rem);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content h3 {
  margin-top: var(--space-8, 2rem);
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

.legal-content li {
  margin-bottom: var(--space-2, 0.5rem);
}

/* Blog listing built from real posts rather than the static placeholder. */
.post-list {
  display: grid;
  gap: var(--space-6, 1.5rem);
  max-width: 860px;
}

.post-card {
  border: 1px solid var(--color-slate-200, #e2e8f0);
  border-radius: 12px;
  padding: var(--space-6, 1.5rem);
}

.post-card__meta {
  font-size: 0.8125rem;
  color: var(--color-slate-500, #64748b);
  margin-bottom: var(--space-2, 0.5rem);
}

.post-card__excerpt {
  color: var(--color-slate-600, #475569);
}

.single-post .entry-content p a:not(.btn),
.single-post .entry-content li a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.single-post .entry-content td a:not(.btn),
.single-post .entry-content th a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }