/* ==========================================================================
   GENESIS base / isolation layer
   --------------------------------------------------------------------------
   Every redesigned screen puts `gns-scope` on its root element. This file makes
   the inside of that element a predictable surface, so each new screen does not
   have to rediscover the same fights with the parent theme's legacy CSS.

   Two jobs, and they use DIFFERENT specificity on purpose:

     1. BASELINE  - written as `:where(.gns-scope) :where(el)`, which has ZERO
                    specificity. Any component rule beats it without effort.
                    This matters: an earlier version used `.gns-scope button`
                    (0,1,1), which silently outranked `.gns-btn` (0,1,0) and
                    stripped the gradient off every CTA.

     2. NEUTRALISERS - full specificity plus !important, because they exist to
                    cancel an !important in the parent theme. Only !important
                    beats !important, and specificity is then the tiebreaker, so
                    these CANNOT use :where().

   Everything is scoped under .gns-scope. Nothing here can affect a screen that
   has not been redesigned yet.

   Audited from the browser's parsed stylesheets against the live site. The only
   bare-element !important rules that apply on screen are `input`, `ins` and
   `footer` (mobile only); `pre` and `body` also carry them but @print only.
   ========================================================================== */

/* ========================================================================
   0. PAGE GROUND - dark on redesigned screens only
   ---------------------------------------------------------------------
   The screens paint their own background, but the theme's wrappers do not.
   `.site` has `padding-bottom: 50px` over a white body, which rendered as a
   white band between the dark content and the dark footer. Colouring the
   ground once fixes that and every other wrapper gap.

   Applied via the `gns-dark-page` body class (see genesys_redesign_body_class),
   so pages still on the old light design are untouched.
   ===================================================================== */

body.gns-dark-page,
body.gns-dark-page .site,
body.gns-dark-page #page,
body.gns-dark-page .site-content {
  background-color: var(--gns-bg);
}

/* ========================================================================
   1. BASELINE - zero specificity, components always win
   ===================================================================== */

:where(.gns-scope),
:where(.gns-scope) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* The parent sets headings to "Good Times" globally via theme.json
   (styles.elements.heading -> :root :where(h1..h6)). It is an all-caps display
   face; GENESIS uses DM Sans with tight tracking. */
:where(.gns-scope),
:where(.gns-scope) :where(h1, h2, h3, h4, h5, h6, p, span, li, label,
                          input, select, textarea, button, a) {
  font-family: var(--gns-font);
  text-transform: none;
}

/* ...except the rule above uses :where() and therefore scores (0,0,0), which
   LOSES to the parent's theme.json output `:root :where(h1..h6)` at (0,1,0) -
   so headings kept rendering in Good Times. Re-stated at (0,1,1) so DM Sans
   actually wins. Same specificity trap the neutraliser section below documents. */
.gns-scope h1, .gns-scope h2, .gns-scope h3,
.gns-scope h4, .gns-scope h5, .gns-scope h6 {
  font-family: var(--gns-font);
  text-transform: none;
}

:where(.gns-scope) :where(h1, h2, h3, h4, h5, h6) {
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--gns-text);
  text-wrap: balance;
  margin: 0;
}

:where(.gns-scope) :where(p) {
  margin: 0;
  line-height: 1.6;
  color: var(--gns-body);
}

:where(.gns-scope) :where(a) { color: var(--gns-cyan-ink); text-decoration: none; }
:where(.gns-scope) :where(a:hover) { text-decoration: underline; }

:where(.gns-scope) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.gns-scope) :where(img, svg, video) { max-width: 100%; }
:where(.gns-scope) :where(hr) { border: 0; border-top: 1px solid var(--gns-border); margin: 0; }

/* Strip the UA/parent button chrome. Components style their own. */
:where(.gns-scope) :where(button) {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Form control baseline - sizing and affordances only. Colours are set by the
   neutraliser below, because the parent forces them with !important. */
:where(.gns-scope) :where(input, select, textarea) {
  font-size: 14px;
  border: 1px solid var(--gns-border-strong);
  border-radius: var(--gns-r-input);
  transition: border-color .15s ease, box-shadow .15s ease;
}
:where(.gns-scope) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  height: 46px;
  padding: 0 14px;
}
:where(.gns-scope) :where(textarea) { height: auto; padding: 12px 14px; line-height: 1.55; }

:where(.gns-scope) :where(input, select, textarea)::placeholder {
  color: var(--gns-muted);
  opacity: 1;
}

:where(.gns-scope) :where(input, select, textarea):focus {
  outline: none;
  border-color: var(--gns-focus);
  box-shadow: 0 0 0 3px var(--gns-cyan-tint);
}

/* Native date/time controls paint their own text and glyphs, which default to
   dark-on-dark here. */
:where(.gns-scope) :where(input[type="date"], input[type="time"], input[type="datetime-local"]) {
  color-scheme: dark;
}
.gns-scope input[type="date"]::-webkit-calendar-picker-indicator,
.gns-scope input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.55);
  cursor: pointer;
}
.gns-scope input[type="date"]::-webkit-calendar-picker-indicator:hover,
.gns-scope input[type="time"]::-webkit-calendar-picker-indicator:hover {
  filter: invert(1) opacity(.9);
}

/* Opt-in mono, so a screen can just add the class. */
:where(.gns-scope) .gns-mono {
  font-family: var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

:where(.gns-scope) .gns-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================================================
   2. NEUTRALISERS - must keep specificity + !important
   ---------------------------------------------------------------------
   ⚠️ Every !important below cancels an !important in the parent theme, and
   cites the rule it cancels. Do not add more without the same justification:
   specificity alone already beats any non-important legacy rule.
   ===================================================================== */

/*
 * Cancels: style.css
 *   input { background-color: var(--wp--preset--color--darkwhite) !important;
 *           color:            var(--wp--preset--color--black)     !important; }
 *
 * A bare `input` selector with !important on both properties - the single most
 * disruptive legacy rule for this redesign. `.gns-scope input` (0,1,1) beats
 * `input` (0,0,1) once both are !important. Cannot use :where() here: that
 * would drop to 0,0,0 and LOSE to the parent.
 */
.gns-scope input,
.gns-scope select,
.gns-scope textarea {
  background-color: var(--gns-elevated) !important;
  color: var(--gns-text) !important;
}

/* Cancels: style.css `ins { text-decoration: ... !important }`.
   WooCommerce wraps sale prices in <ins>, which then arrives underlined. */
.gns-scope ins {
  text-decoration: none !important;
  background: transparent;
}

/* Chrome repaints autofilled fields white and ignores background-color. */
.gns-scope input:-webkit-autofill,
.gns-scope input:-webkit-autofill:hover,
.gns-scope input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gns-text);
  box-shadow: 0 0 0 1000px var(--gns-elevated) inset;
  caret-color: var(--gns-text);
}

/* ========================================================================
   3. Focus + motion
   ===================================================================== */

:where(.gns-scope) :focus-visible {
  outline: 2px solid var(--gns-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .gns-scope *,
  .gns-scope *::before,
  .gns-scope *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}