/* Naturali site polish: footer, header, 404. */

/* ---------- Footer ---------- */
.nat-footer { display: block; }

/* Fold the copyright into the navy block instead of a detached white strip. */
.nat-footer__credit {
  background: #12123c;
  padding: 0 24px 28px;
}
.nat-footer__credit p {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: #8888b4;
  font-size: 12.5px;
  text-align: center;
}
/* Kadence's own footer and the old injected credit are now redundant. */
.nat-footer + #colophon,
.naturali-credit { display: none !important; }

/* Social links were "IG" / "LTR" chips; they now carry real words. */
.nat-footer .nat-social {
  width: auto !important;
  min-width: 44px;
  height: auto !important;
  min-height: 44px;
  padding: 0 14px !important;
  border-radius: 999px !important;
  font-size: 13px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.nat-footer a:focus-visible {
  outline: 3px solid #5bc8c5;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Sticky header ---------- */
.site-header,
#masthead {
  position: sticky;
  top: 0;
  z-index: 80;
}
.admin-bar .site-header,
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar #masthead { top: 46px; }
}

/* The logo was an 802px PNG rendered large, making the mobile header 113px tall. */
@media (max-width: 781px) {
  .site-header .custom-logo,
  #masthead .custom-logo { max-height: 46px; width: auto; }
  .site-header .site-branding img,
  #masthead .site-branding img { max-height: 46px; width: auto; }
}

/* Header tap targets were 42x22 and 37x31; both under the 44px minimum. */
.header-navigation .header-cart-button,
.site-header .header-cart-button,
.site-header .menu-toggle,
.mobile-toggle-open-container .menu-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- 404 ---------- */
.nat-404 {
  max-width: 620px;
  margin: 0 auto 60px;
  padding: 28px 24px;
  background: #e8f5f5;
  border-radius: 18px;
  text-align: center;
}
.nat-404 h2 {
  font-size: 20px;
  margin: 0 0 14px;
  color: #1a1a4e;
}
.nat-404__list { list-style: none; margin: 0 0 18px; padding: 0; }
.nat-404__list li { margin: 0 0 8px; }
.nat-404__list a {
  color: #1f7a6c;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nat-404__cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 28px;
  background: var(--global-palette1, #3a3a93);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header, #masthead { position: static; }
}

/* ---------- Email signup ---------- */
.nat-signup {
  background: #e8f5f5;
  padding: 42px 24px;
  text-align: center;
}
.nat-signup__title {
  font-family: 'Fraunces', Georgia, serif;
  color: #1a1a4e;
  font-size: clamp(21px, 3vw, 27px);
  margin: 0 0 8px;
}
.nat-signup__blurb {
  color: #4d6b66;
  font-size: 15px;
  margin: 0 auto 20px;
  max-width: 46ch;
}
.nat-signup__form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin: 0 auto;
}
.nat-signup__input {
  flex: 1 1 260px;
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid #cfe3e0;
  border-radius: 999px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  background: #fff;
  color: #23233f;
}
.nat-signup__input::placeholder { color: #8fa8a4; }
.nat-signup__input:focus-visible {
  outline: 3px solid #2e9e8e;
  outline-offset: 2px;
  border-color: #2e9e8e;
}
.nat-signup__btn {
  min-height: 50px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--global-palette1, #3a3a93);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}
.nat-signup__btn:hover { transform: translateY(-2px); }
.nat-signup__btn:active { transform: none; }
.nat-signup__btn:focus-visible { outline: 3px solid #1a1a4e; outline-offset: 3px; }

.nat-signup__msg { font-size: 14.5px; margin: 0 0 14px; font-weight: 600; }
.nat-signup__msg--ok  { color: #1f5f57; }
.nat-signup__msg--err { color: #b82105; }

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.nat-signup__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .nat-signup__btn { transition: none; }
  .nat-signup__btn:hover { transform: none; }
}

/* ---------- Contrast and target fixes from the 28 Aug audit ---------- */

/* Product meta ("Category: Laundry", SKU wrapper) used palette6 #9a9ab0,
   which measures 2.75:1 on white. palette6 stays as-is for borders; only the
   text is moved to the muted ink, which passes. */
.woocommerce .product_meta,
.woocommerce .product_meta a,
.woocommerce .posted_in,
.woocommerce .posted_in a,
.woocommerce .sku_wrapper,
.woocommerce .tagged_as { color: var(--global-palette5, #6b6b85) !important; }
.woocommerce .product_meta a:hover { color: var(--global-palette3, #1a1a4e) !important; }

/* The reorder offer badge was white on brand teal: 3.28:1 at 13.5px. */
.nre-offer__tag { background: #1f7a6c; }

/* Kadence's mobile toggle renders 37x31, under the 44px minimum. The earlier
   rule missed it because the real class is menu-toggle-open drawer-toggle. */
.menu-toggle-open,
.drawer-toggle,
button.menu-toggle-open.drawer-toggle {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Post date meta measured 4.23:1; nudge to the muted ink. */
.woocommerce .comment-meta time,
.entry-meta .posted-on { color: var(--global-palette5, #6b6b85); }

/* Footer muted text was #8888b4 on the navy: 4.05:1 composited, just under AA
   at 12px. Lifted to #a8a8c8, which measures ~6:1 on the same background.
   (The "4.9" badge and "Read reviews" link already pass; an earlier audit
   flagged them only because it did not composite the semi-transparent panel.) */
.nat-footer p,
.nat-footer a:not(.nat-social),
.nat-footer__credit p { color: #a8a8c8 !important; }
.nat-footer a:not(.nat-social):hover { color: #ffffff !important; }
.nat-footer h4 { color: #7fd6c8 !important; }

/* Native WooCommerce review area: dates and helper text sat on tinted panels
   and measured below AA. */
.woocommerce #reviews .comment-meta,
.woocommerce #reviews .woocommerce-review__published-date,
.woocommerce #reviews .comment-form-comment label,
.woocommerce #review_form .comment-notes { color: var(--global-palette5, #6b6b85) !important; }
.woocommerce #reviews .commentlist .comment-text p { color: var(--global-palette4, #23233f); }

/* Judge.me shop replies render with its own stylesheet, which does not load on
   a domain its API rejects. Give the reply block readable defaults so it is
   legible whether or not Judge.me's CSS arrives. */
.jdgm-rev__reply-content,
.jdgm-rev__reply-content p,
.jdgm-rev__replier,
.jdgm-rev__body,
.jdgm-rev__body p { color: var(--global-palette4, #23233f) !important; }
.jdgm-rev__timestamp,
.jdgm-rev__author,
.jdgm-rev__location { color: var(--global-palette5, #6b6b85) !important; }

/* ---------- Tap targets (WCAG 2.5.5) ----------
   Inline links inside a paragraph are exempt; these are all standalone controls
   that were sitting just under 44px. */
@media (max-width: 800px) {
  .wp-block-button__link,
  .wp-element-button { min-height: 44px !important; display: inline-flex !important; align-items: center; }

  /* Shop loop add-to-cart was 121x30. */
  .woocommerce ul.products li.product .button,
  .woocommerce ul.products li.product .add_to_cart_button { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }

  /* Gallery zoom trigger was 36x36. */
  .woocommerce-product-gallery__trigger { width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center; }

  /* Judge.me "write a review" was 342x40. */
  .jdgm-write-rev-link { min-height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; }

  /* Footer social chips: the JS adds .nat-social, but size them even if it has
     not run yet so the target is never under 44px. */
  .nat-footer a[href*="instagram"],
  .nat-footer a[href*="linktr"],
  .nat-footer a[target="_blank"] { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Homepage product card "Shop now" was 22px tall. */
.nh-card .nh-shop { min-height: 44px; align-items: center; }

.nat-cart-title {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--global-palette3, #1a1a4e);
  font-size: clamp(26px, 4vw, 34px);
  margin: 0 0 22px;
}

/* Footer nav links were block-level at 23px tall, under the 44px minimum.
   They are standalone navigation, not inline links in prose, so 2.5.5 applies. */
@media (max-width: 800px) {
  .nat-footer nav a,
  .nat-footer nav a[style] {
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
    margin-bottom: 0 !important;
  }
  .nat-footer .nat-footer__badge a,
  .nat-footer a[href*="/reviews/"] { min-height: 44px !important; display: inline-flex !important; align-items: center; }
}

/* Footer logo link was 67x38. */
@media (max-width: 800px) {
  .nat-footer a:has(img) { min-height: 44px; display: inline-flex; align-items: center; }
  /* Fallback for browsers without :has() */
  .nat-footer > div > div > div > a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Judge.me review pagination rendered 32x25. */
  .jdgm-paginate__page { min-width: 44px !important; min-height: 44px !important;
    display: inline-flex !important; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------- breadcrumbs
   Kadence renders breadcrumb links at the ambient 14px line height, giving a
   17px-tall tap target on phones. That fails WCAG 2.5.8 (24x24 minimum). Pad
   them vertically without changing the visual line, and pull the row's own
   margin in by the same amount so nothing shifts. */
@media (max-width: 767px) {
	.kadence-breadcrumbs a,
	.kadence-breadcrumbs .kadence-bc-home {
		display: inline-block;
		padding-block: 7px;
	}
	.kadence-breadcrumbs {
		margin-block: -7px 4px;
	}
}

/* The category/tag links in the product meta row sit at 15px tall on phones,
   under the same 24x24 minimum as the breadcrumbs. */
@media (max-width: 767px) {
	.product_meta a {
		display: inline-block;
		padding-block: 5px;
	}
	.product_meta .posted_in,
	.product_meta .tagged_as {
		line-height: 1.4;
	}
}