/* ================================================================
   Me2You - v1.1 supplemental styles
   Small, targeted layer loaded after site.css. Holds per-page tweaks
   and accessibility corrections that the v1.1 pages previously inlined.
   This is NOT a refactor of site.css - it only lands the deltas.
   ================================================================ */

/* ----------------------------------------------------------------
   0. SELF-HOSTED FONTS (removes the render-blocking Google Fonts
   third-party request). Quicksand and Nunito ship as latin variable
   fonts, so a single woff2 each serves the full weight range we use
   (Quicksand 400-700, Nunito 400-800). JetBrains Mono latin covers
   400 and 600. font-display:swap keeps text visible during load.
   ---------------------------------------------------------------- */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/quicksand-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('/assets/fonts/nunito-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
}

/* ----------------------------------------------------------------
   1. DARK-MODE CONTRAST CORRECTIONS (WCAG AA)
   In dark mode the body background is --ink-50 (#1a1a1a). The body-copy
   link shade --brand-orange-800 (#9A5309) is tuned for light cream and
   only reaches 2.99:1 on the dark canvas. Lift links and header text to
   the full brand orange (#F89A1F => ~7:1 on #1a1a1a) so every page clears
   the 4.5:1 normal-text threshold.
   ---------------------------------------------------------------- */
[data-theme="dark"] a:not(.pdp-share-btn):not(.community-hero__guidelines):not(.btn):not(.btn-brand):not([class*="__btn"]) {
  color: var(--brand-orange);
}
/* The dark-mode link lift above must not reach anchors that sit on their
   own coloured fills or on a fixed-cream panel, where the full brand
   orange drops below 4.5:1. Anchors styled as filled buttons keep the
   text colour their own rule sets (white on the orange fill), so they are
   excluded here: Bootstrap .btn / .btn-brand CTAs and the *__btn pattern
   used app-wide (cart-empty__btn, m2y-socialbar__btn, saved-row__btn).
   Without the exclusion the lift recoloured those button labels orange,
   giving orange-on-orange text that was invisible until hover. Share
   buttons keep their white text on the brand-colour chips, and the
   community guidelines link keeps the AA-safe orange-800 (#9A5309, about
   4.7:1) on the permanently cream hero in both themes. */
[data-theme="dark"] .pdp-share-btn--whatsapp,
[data-theme="dark"] .pdp-share-btn--facebook,
[data-theme="dark"] .pdp-share-btn--twitter,
[data-theme="dark"] .pdp-share-btn--email {
  color: #fff;
}
[data-theme="dark"] .pdp-share-btn--copy {
  color: var(--ink-700);
}
[data-theme="dark"] .community-hero__guidelines {
  color: var(--brand-orange-800);
}
[data-theme="dark"] .m2y-header__link,
[data-theme="dark"] .m2y-header__link-label,
[data-theme="dark"] .m2y-header__wordmark,
[data-theme="dark"] .m2y-header__sell,
[data-theme="dark"] .m2y-header__link--auth {
  color: var(--brand-orange);
}

/* ----------------------------------------------------------------
   2. PAYMENT BADGE SVGS
   The footer payment badges are decorative chips that wrap an SVG. They
   carry an accessible name via role="img" + aria-label (set in the
   markup). Nothing visual to add here - kept as an anchor comment so the
   relationship is documented in one place.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   3. LISTING CARD LQIP PLACEHOLDER
   The blurred low-quality image placeholder sits behind every card photo
   so the layout never shifts and the first paint feels instant. The
   actual data URI is inlined per-card via inline style; this just sets
   the shared sizing + blur-up behaviour.
   ---------------------------------------------------------------- */
.m2y-lqip {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}