/* ==========================================================================
   design-typography.css — readability + placement pass, 2026-08-18
   Loads LAST (depends on avatalabs-polish) so it wins the cascade.

   Every rule traces to a measured defect from /tmp/designqa/scan.py
   (WCAG 2.1 relative-luminance contrast + Apple HIG 44px tap targets).
   Every selector was resolved from the LIVE DOM via /tmp/designqa/resolve.py
   — an earlier draft invented 13 class names that matched nothing.
   Benchmark: goalphalabs.com measured at 390px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONTRAST FAILURES (WCAG AA = 4.5:1 normal, 3.0:1 large)

   Cyan #17C0E0 with white text measured 2.18:1 — and it is the "Add to cart"
   button. Brand navy #0E2444 already measures 15.5:1 on the PDP CTA, so we
   reuse an existing brand colour rather than inventing one.
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product a.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_simple,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.ajax_add_to_cart {
  background-color: #0E2444 !important;   /* was #17C0E0 → white 2.18:1 */
  color: #FFFFFF !important;              /* now 15.5:1 */
  border-color: #0E2444 !important;
}
.woocommerce ul.products li.product a.add_to_cart_button:hover,
.woocommerce a.button.ajax_add_to_cart:hover {
  background-color: #17C0E0 !important;   /* cyan demoted to hover accent */
  color: #0E2444 !important;              /* 9.1:1 — passes both directions */
  border-color: #17C0E0 !important;
}

/* Tested-for chips: white on #12A3BF measured 2.99:1 */
.nl-tested-badges span {
  background-color: #0B6E82 !important;   /* white on this = 5.6:1 */
  color: #FFFFFF !important;
  font-size: 12px !important;
}

/* Volume-pricing label: #148990 on #F0F9F9 measured 3.92:1 */
.nl-qty-breaks > div { color: #0C5C61 !important; }

/* Inline links measured 2.62 / 3.96 / 3.94:1 */
.nl-keypoints p a { color: #0B5F73 !important; }        /* was 2.62:1 */
.nl-coa-section a { color: #0A5E75 !important; }        /* was 3.96:1 */
.nl-wholesale-nudge a { color: #0C5C61 !important; }    /* was 3.94:1 */

/* RUO strong: #DBE7F5 on a light panel is near-invisible */
.nl-keypoints strong,
.nl-ruo strong { color: #FFFFFF !important; }

/* Card "Learn More": #51617A measured ~4.3:1, just under AA */
.nl-learn-more-btn { color: #3D4C63 !important; }

/* Newsletter Subscribe — same cyan-on-white failure as add-to-cart */
.nl-subscribe button,
form.nl-newsletter button,
.nl-newsletter-form button[type="submit"] {
  background-color: #0E2444 !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   2. TYPE SCALE / HIERARCHY

   PDP h1 measured 20px/400 while the related-product card titles below it
   were 17px — the page's most important text read as less important than
   its own footer grid. Alpha's PDP h1 is 30px/800, shop h1 35px/850.
   -------------------------------------------------------------------------- */
.woocommerce div.product .product_title,
h1.product_title,
h1.entry-title {
  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.01em;
  color: #12100E !important;
}
.woocommerce-products-header h1.page-title,
.woocommerce h1.page-title {
  font-size: 30px !important;             /* was 21px/400 */
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
@media (min-width: 992px) {
  .woocommerce div.product .product_title,
  h1.product_title { font-size: 34px !important; }
  .woocommerce h1.page-title { font-size: 38px !important; }
}

/* Price = second-loudest element on a PDP */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #12100E !important;
}

/* --------------------------------------------------------------------------
   3. MINIMUM LEGIBLE SIZE
   23 text nodes measured under 14px, incl. the flash bar at 10px.
   Floor at 13px. (Alpha has 62 sub-14px nodes — we are deliberately better.)
   -------------------------------------------------------------------------- */
#nv-flash span.nvf-msg,
#nv-flash { font-size: 13px !important; line-height: 1.35 !important; }

nav.woocommerce-breadcrumb,
nav.woocommerce-breadcrumb a { font-size: 13px !important; }

.nl-qty-breaks > div,
.nl-coa-section a,
.nl-wholesale-nudge a,
.nl-learn-more-btn { font-size: 13px !important; }

/* Trust-strip headings measured 12px */
.nl-trust strong,
.nl-benefits strong { font-size: 13.5px !important; line-height: 1.4 !important; }

/* Descenders were clipping: 30px text on a 24px line box */
.woocommerce div.product .summary p,
.woocommerce-product-details__short-description p { line-height: 1.55 !important; }

/* --------------------------------------------------------------------------
   4. TAP TARGETS — 31 interactive elements under 44px (Apple HIG minimum);
   primary nav links measured 52x25. Padding, not height, keeps text centred.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .menu_hd nav a,
  .menu_hd ul li a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
  }
  .menu_hd .close,
  .menu_hd button { min-width: 44px !important; min-height: 44px !important; }
}

/* --------------------------------------------------------------------------
   5. PRIMARY CTA — measured 41px wide on a 390px viewport and NOT full width.
   Alpha's is 48px tall. Full-bleed the buy button on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .woocommerce div.product form.cart button.single_add_to_cart_button {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
  }
  .woocommerce div.product form.cart div.quantity {
    float: none !important;
    margin: 0 0 12px 0 !important;
  }
  .woocommerce div.product form.cart div.quantity input.qty {
    height: 48px !important;
    font-size: 16px !important;   /* <16px triggers iOS auto-zoom on focus */
  }
}

/* --------------------------------------------------------------------------
   6. GRID CONSISTENCY — shop cards measured ragged by 34px (380 vs 414)
   because titles wrap to 1 vs 2 lines. Reserve two lines so price and button
   share a baseline across each row.
   Scoped to ul.products and guarded against the owl-carousel init on
   related products (theme script.js hijacks .related ul.products ≤991px).
   -------------------------------------------------------------------------- */
.woocommerce ul.products:not(.owl-loaded) li.product {
  display: flex !important;
  flex-direction: column !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  line-height: 1.35 !important;
  min-height: calc(14px * 1.35 * 2) !important;   /* exactly two lines */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.woocommerce ul.products:not(.owl-loaded) li.product .price {
  margin-top: auto !important;
}

/* --------------------------------------------------------------------------
   7. HEADER CHROME — 430px of banners/notices before content on an 844px
   screen pushed Add to Cart to 1943px (Alpha: 1331px). Tighten the stack.
   Nothing is hidden — the RUO notice and flash bar both stay visible.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #nv-flash { padding-top: 6px !important; padding-bottom: 6px !important; }
  nav.woocommerce-breadcrumb {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .woocommerce div.product div.images { margin-bottom: 12px !important; }
}

/* --------------------------------------------------------------------------
   8. SECOND PASS — defects that survived round 1, with the reason each
   original selector lost (measured via /tmp/designqa/resolve2.py).
   -------------------------------------------------------------------------- */

/* The PDP buy button is button.single_add_to_cart_button.button.alt — Woo's
   `.alt` modifier carries the cyan and outranked the round-1 selector.
   Round 1 DID fix width/height (309x52); only the colour lost. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background-color: #0E2444 !important;   /* was #17C0E0 → white 2.18:1 */
  color: #FFFFFF !important;              /* now 15.5:1 */
  border-color: #0E2444 !important;
}
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: #17C0E0 !important;
  color: #0E2444 !important;              /* 9.1:1 */
  border-color: #17C0E0 !important;
}

/* Product tabs: the ACTIVE tab li has bg #0E2444 (navy) but the anchor kept
   dark slate #3A4A5E → 1.71:1, effectively invisible. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li#tab-title-description.active a {
  color: #FFFFFF !important;              /* on #0E2444 = 15.5:1 */
  font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: #1F2A3A !important;              /* inactive tabs on light bg */
}

/* Newsletter Subscribe — the button is a bare <button type="submit"> with NO
   class, inside form.avata-nl-form (resolved from live markup; two earlier
   selector guesses matched nothing). */
.avata-nl-form button[type="submit"],
.avata-footer-nl button[type="submit"],
#avata-nl-footer button[type="submit"] {
  background-color: #0E2444 !important;
  color: #FFFFFF !important;
  border-color: #0E2444 !important;
}

/* --------------------------------------------------------------------------
   9. HOMEPAGE — 36 contrast failures, none reachable by the PDP-scoped rules
   above. Selectors resolved live via /tmp/designqa/homefix.py.
   Worst offenders measured 1.07:1 (effectively invisible text).
   -------------------------------------------------------------------------- */

/* Cyan CTA/link text on light backgrounds: 2.02–2.49:1 */
.nvr-hd a,
.nvh-banner__subtitle span,
.nvm-txt strong {
  color: #0B5F73 !important;              /* ≥6:1 on the light panels */
}

/* "Select Options" card CTA — white on #17C0E0 = 2.18:1 */
a.nvr-cart {
  background-color: #0E2444 !important;
  color: #FFFFFF !important;              /* 15.5:1 */
  border-color: #0E2444 !important;
}
a.nvr-cart:hover {
  background-color: #17C0E0 !important;
  color: #0E2444 !important;              /* 9.1:1 */
}

/* "NEW" ribbon — 2.68:1 */
span.nvr-new {
  background-color: #0E2444 !important;
  color: #FFFFFF !important;
}

/* Kicker over the amber/cream band — 2.3:1 */
span.nva-kick { color: #8A4B00 !important; }   /* ≈5.1:1 on #FDF6EE */
.nva-in p { color: #2A2318 !important; }       /* was 1.21:1 */

/* Dark band nvb3: light-on-light at 1.07–1.61:1. This section sits on a dark
   navy panel, so the text must be light — it was inheriting a dark colour. */
.nvb3-content h2,
.nvb3-content p,
.nvb3-rate p,
.nvb3-content b {
  color: #FFFFFF !important;
}
.nvb3-content p,
.nvb3-rate p { color: #E8EEF7 !important; }    /* ≈13:1 on navy */

/* --------------------------------------------------------------------------
   10. CATCH-ALL for generic WooCommerce buttons.
   "Return to shop" (a.button.wc-backward) is rendered by the cart block at
   runtime — it is NOT in the static HTML, so it was invisible to markup greps
   and only surfaced under live DOM inspection. Scoping broadly here means any
   future stock Woo button inherits the accessible palette instead of the
   2.18:1 cyan default.
   -------------------------------------------------------------------------- */
.woocommerce a.button.wc-backward,
.woocommerce p.return-to-shop a.button,
.woocommerce .cart-empty ~ p a.button,
.woocommerce-page a.button.wc-backward {
  background-color: #0E2444 !important;
  color: #FFFFFF !important;
  border-color: #0E2444 !important;
}
.woocommerce a.button.wc-backward:hover,
.woocommerce p.return-to-shop a.button:hover {
  background-color: #17C0E0 !important;
  color: #0E2444 !important;
}

/* ============================================================
   AAA-CONTRAST-FIX-20260818 — .nva-band (dark navy band)
   The earlier typography pass assumed this band was cream and
   forced DARK text (#2A2318 / #8A4B00 / #0E2444) onto it. The
   band is NAVY — all text must be light. Highest specificity,
   loaded last, wins over everything above.
   ============================================================ */

section.nva-band .nva-in h2,
section.nva-band h2 {
  color: #FFFFFF !important;               /* 14.9:1 on #0b2545 */
}
section.nva-band .nva-in p,
section.nva-band p {
  color: #CFE6F2 !important;               /* 11.9:1 */
}
section.nva-band span.nva-kick,
section.nva-band .nva-kick {
  color: #35D2F2 !important;               /* bright cyan kicker, 8.4:1 */
}
section.nva-band a.nva-cta,
section.nva-band .nva-cta {
  background: #17C0E0 !important;
  color: #04283B !important;               /* 8.9:1 on cyan */
  font-weight: 800 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
  transition: background .18s ease, transform .18s ease !important;
}
section.nva-band a.nva-cta:hover {
  background: #FFFFFF !important;
  color: #0E2444 !important;
  transform: translateY(-1px) !important;
}

/* ─── /AAA-CONTRAST-FIX-20260818 ─────────────────────────── */