/* THE GENESYS redesign - cross-cutting polish.
   ==========================================================================

   Everything here applies to the WHOLE front end, not to one screen. It exists
   because the two guarantees below cannot live in gns-base.css:

   gns-base is written `:where(.gns-scope) ...`, and `gns-scope` is only on the
   FORKED templates - auth, shop archive, reserved overview, orders, creator
   store. Every restyled screen (home, product, cart, checkout, blog, pricing,
   editorial, the twelve reserved sub-pages) carries a body class and no such
   wrapper, and the site header and footer are outside every screen root by
   definition. So a rule in gns-base reaches roughly a quarter of the site.

   Loaded globally next to components.css. Keep it small: a rule belongs here
   only if it is genuinely site-wide.
   ====================================================================== */

/* ========================================================================
   1. Focus visibility
   ===================================================================== */

/*
 * The parent kills the focus outline in eight places (style.css lines 118,
 * 619, 810, 2019, 2271, 4480, 8064), one of them with !important, so a
 * keyboard user tabbing the header, footer, cart or any restyled screen had
 * no indicator at all. Hence !important here - it is the only way a global
 * guarantee survives a legacy stylesheet that opts out of it in eight places.
 *
 * `:focus-visible`, not `:focus`: the ring appears for keyboard and
 * programmatic focus and never on a mouse click, which is why it can be this
 * assertive without showing up as visual noise.
 *
 * Colour is --gns-focus, NOT --gns-cyan. A focus ring is a non-text element,
 * so WCAG 2.2 (1.4.11) asks 3:1 against its surroundings, and brand cyan
 * measures 1.96 against the light ground. --gns-focus resolves to the brand
 * colour on dark and to the darker ink on light. See tokens.css.
 */
:focus-visible {
  outline: 2px solid var(--gns-focus) !important;
  outline-offset: 2px;
  border-radius: 3px;
}

/*
 * Same declaration, raised to (0,3,1) to match `.nav .nav-link.product-tab:focus
 * { outline: 0 !important }` in the parent. Equal specificity and equal
 * weight, so the later stylesheet - this one - wins.
 */
.nav .nav-link.product-tab:focus-visible {
  outline: 2px solid var(--gns-focus) !important;
  outline-offset: 2px;
}

/*
 * Inputs paint their own focus state - a cyan border plus a soft ring - and
 * an outline on top of that reads as a double border. They opt out of the
 * outline and keep their own treatment, which is itself a visible indicator.
 */
:where(input, select, textarea):focus-visible {
  outline-offset: 0;
}

/* ========================================================================
   2. Motion
   ===================================================================== */

/*
 * gns-base carries this for `.gns-scope` only, so the header, footer and every
 * restyled screen still animated at full tilt for someone who asked the OS not
 * to. Transforms and opacity are left alone - it is duration that causes
 * trouble, not the property.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========================================================================
   3. Icon ink
   ===================================================================== */

/*
 * ⚠️ THE PARENT PAINTS EVERY SVG PATH BLACK:
 *
 *     genesys/style.css   svg path { color: var(--wp--preset--color--black) }
 *
 * `color` is not how an icon is drawn, which is why it looks harmless - but it
 * is what `currentColor` resolves against, and `currentColor` is how nearly
 * every inline icon here is drawn. The keyword computes to itself and is
 * resolved per element at used-value time, so a `<path>` inheriting
 * `stroke: currentColor` from its `<svg>` re-resolves it against the PATH's
 * colour, which this rule has forced to black. The svg's own colour - the one
 * the component sets - never reaches the mark.
 *
 * Measured black-on-dark at ~1.08:1, i.e. invisible: the header's light/dark
 * switch on every page, the cart drawer's close button, and the printer glyph
 * on a kit's "View supported printers".
 *
 * `inherit` rather than a token: an icon should take the colour of whatever it
 * sits in, which is what it would have done had the rule above never existed.
 * Same specificity (0,0,2) and this sheet loads later, so no !important.
 */
svg path {
  color: inherit;
}

/* ========================================================================
   4. Consent launcher
   ===================================================================== */

/*
 * iubenda's floating "consent preferences" tab, anchored centre-right on every
 * page. It ships as a white plate with a 1px black shadow ring, which on the
 * dark ground is a bright 38px slab hovering over the design.
 *
 * ⚠️ COLOUR ONLY. Size, position, z-index, the icon and the hit area are the
 * widget's own and are not touched - this control has to stay exactly as
 * findable and clickable as iubenda made it. If a future release renames the
 * class, the rule simply stops applying and the plate returns to white.
 *
 * The !importants answer iubenda's own: it injects its stylesheet into the
 * document at runtime, after every theme sheet, and sets both of these with
 * !important there. The `:not()` is there for specificity alone - their rule is
 *
 *     .iubenda-tp-btn:not(.iubenda-floatable-tb-btn):not([data-tp-nostyle], .iubenda-floatable-default-btn)
 *
 * at (0,3,0), and two !importants only decide anything once the selector
 * matches it. This lands at (0,4,1).
 */
body .iubenda-tp-btn.iubenda-cs-preferences-link:not(.iubenda-floatable-tb-btn) {
  background-color: var(--gns-elevated) !important;
  box-shadow: 0 0 0 1px var(--gns-border-strong) !important;
}