/* The analytics consent banner, and the footer's legal row.
 *
 * Reasoning lives in inc/back/consent.php. What matters here:
 *
 * - Every colour is `var(--ww-*, fallback)`. With the design toggle OFF the
 *   fallbacks are the site as it stands; with it ON the same markup picks up
 *   the token palette. The pattern spec-panel.css established.
 * - There is no `prefers-reduced-motion` block in this file on purpose:
 *   style.css carries a site-wide one using `*` with `!important`, which
 *   already covers the transitions below. A second copy here would be one more
 *   place to forget.
 - Collisions with the two fixed bottom-right controls are handled inside the
 *   mobile media query below, in this file, keyed to classes that already
 *   exist. The first attempt was a custom property consent.js measured into
 *   and a cross-file override read it back; it did not apply, and two ordinary
 *   rules that can be shown to work beat one clever one that cannot.
 */

.ww-consent {
  position: fixed;
  z-index: var(--ww-z-float, 1000); /* above the fab column (999), under an open dialog */
  left: var(--ww-page-inset, 20px);
  right: var(--ww-page-inset, 20px);
  bottom: var(--ww-space-4, 16px);
  max-width: 34rem;
  padding: var(--ww-space-5, 20px);
  border-radius: var(--ww-radius, 16px);
  /* The bar's role, not --ww-ink: the banner is a dark card in BOTH themes,
     and --ww-ink is text, so the dark theme turns it light — it went #EDF2EF
     under #F2F5F3 text, 1.03:1, until 2026-09-24. --ww-c-bar stays dark at
     night (text 17.66:1; 2026 dark 16.82) and has the same #0C1E13 fallback,
     so the light theme does not move. */
  background: var(--ww-c-bar, #0C1E13);
  color: var(--ww-paper, #FFFFFF);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
  /* Opacity and transform only. A transition on `visibility` is what makes the
     hidden state actually unfocusable — see the reduced-motion note in
     CLAUDE.md about a delay surviving a zeroed duration. */
  opacity: 0;
  transform: translateY(8px);
}

.ww-consent[hidden] {
  display: none;
}

/* Opt-in, for the reason lang-suggest.css spells out at length: a CSS
 * transition does not advance in a background tab. Measured 2026-08-29 —
 * `visibilityState: "hidden"`, both transitions `running` at `currentTime: 0`,
 * and the banner un-hidden at opacity 0 with two focusable buttons inside it.
 *
 * This banner was already fixed once for the same class of bug: it used to
 * reveal itself from a pair of nested requestAnimationFrame calls, which do not
 * fire in a background tab either. Forcing layout fixed STARTING the
 * transition. It did not make it run, so the defect survived in a different
 * shape and this is what closes it. */
.ww-consent.can-animate {
  transition: opacity var(--ww-dur-base, 200ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), transform var(--ww-dur-base, 200ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-consent.is-open {
  opacity: 1;
  transform: translateY(0);
}

.ww-consent__text {
  margin: 0 0 var(--ww-space-4, 16px);
  font-family: var(--ww-font-sans, 'Montserrat', sans-serif);
  font-size: var(--ww-text-sm, 0.9375rem);
  line-height: 1.5;
  color: var(--ww-paper, #FFFFFF);
}

/* Prose link: underlined at rest, per the link policy in CLAUDE.md. On this
   ground the paper colour measures 17.34:1, so the underline is the only cue
   that needs adding. */
.ww-consent__link {
  color: var(--ww-paper, #FFFFFF);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ww-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ww-space-3, 12px);
}

.ww-consent__btn {
  /* The appearance reset every converted control on this site carries. */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  cursor: pointer;
  /* 44px is the comfortable target; 24px is the WCAG 2.5.8 floor and this
     clears it with room. */
  min-height: 44px;
  padding: 0 var(--ww-space-5, 20px);
  border-radius: var(--ww-radius, 16px);
  border: 1px solid transparent;
  font-family: var(--ww-font-sans, 'Montserrat', sans-serif);
  font-size: var(--ww-text-sm, 0.9375rem);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1)), color var(--ww-dur-fast, 150ms) var(--ww-ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

.ww-consent__btn--accept {
  background: var(--ww-c-accent-fill, var(--ww-oxide, #0F6037));
  color: var(--ww-paper, #FFFFFF);
}

.ww-consent__btn--accept:hover {
  background: var(--ww-c-accent-fill-dk, var(--ww-oxide-dk, #0C5331));
}

/* Outlined, not a faint grey: the border is the only thing identifying this
   control's bounds, so it needs 3:1 against the banner ground (WCAG 1.4.11).
   Paper on ink clears that many times over. A --ww-rule hairline would not —
   tokens.css says so in as many words. */
.ww-consent__btn--decline {
  background: transparent;
  color: var(--ww-paper, #FFFFFF);
  border-color: var(--ww-paper, #FFFFFF);
}

.ww-consent__btn--decline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* The site-wide focus ring is a brand ring plus a white halo, tuned for light
   grounds. On this one the brand ring would measure 2.27:1 — the same failure
   the footer's social icons had — so the ring here is paper with a dark offset
   behind it. */
.ww-consent :focus-visible {
  outline: 2px solid var(--ww-paper, #FFFFFF);
  outline-offset: 2px;
}

/* Below this width the banner is a full-bleed bar along the bottom edge, and
   that is the ONLY width at which it collides with anything. Above it the
   banner is a card capped at 34rem on the left (measured: 65px to 609px) while
   .back_to_top sits at x=1310 — they do not meet.
   
   An earlier version tried to lift the two bottom-right controls by a height
   consent.js measured into a custom property. It did not work: measured in a
   browser, `.back_to_top` stayed at bottom:100px with the banner 198px tall.
   Two same-file rules keyed to classes that already exist beat one clever
   cross-file override that cannot be shown to apply. */
@media (max-width: 767px) {
  .ww-consent {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    border-radius: 0;
  }

  /* `visibility`, not `opacity` or `display`. The button would otherwise be
     covered by the banner and still in the tab order — invisible and focusable,
     which is exactly the state CLAUDE.md records for #floating-product-card,
     where three tab stops landed on controls nobody could see. `visibility`
     removes it from sequential focus navigation as well as from view, and it
     comes straight back when the banner closes. */
  html.ww-consent-open .back_to_top {
    visibility: hidden;
  }

  /* The product page's enquiry bar is a call to action, so it is lifted clear
     rather than covered. It reads the height the bar itself declares, so the
     two cannot drift apart — the reason woo.css made it a constant. */
  .single-product .ww-consent {
    bottom: calc(var(--ww-product-bar-h, 120px) + var(--ww-space-2, 8px));
  }
}

/* ---------------------------------------------------------------------------
 * The footer's legal row.
 *
 * The privacy policy was real content from 2026-08-26 and linked from nowhere —
 * not in a menu, not in a template. A policy nobody can find is most of the way
 * to not having one, and the cookie-settings control has to live beside it
 * because withdrawing consent must be as easy as giving it (GDPR Art. 7(3)).
 *
 * These rules are in this file rather than in style.css because `web-style` is
 * enqueued second and loses every specificity tie to a component stylesheet —
 * the trap CLAUDE.md records for `.ww-supply__species a`.
 * ------------------------------------------------------------------------- */

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ww-space-2, 8px) var(--ww-space-4, 16px);
  margin-top: var(--ww-space-3, 12px);
}

/* Index links: a soft underline that firms up on hover and focus. The footer's
   contact block was reported for exactly this — the phone, the email and the
   address computed to the same colour and weight as the opening hours beside
   them, with nothing at all to say which were links (WCAG 1.4.1). */
.footer__legal__link {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  line-height: 120%;
  color: var(--ww-paper, #FFFFFF);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-underline-offset: 3px;
}

.footer__legal__link:hover,
.footer__legal__link:focus-visible {
  text-decoration-color: currentColor;
}

.footer__legal__link:focus-visible {
  outline: 2px solid var(--ww-paper, #FFFFFF);
  outline-offset: 3px;
}