/* ============================================================
   BECOME - NG shell on the WordPress blog (phase 1)

   Loaded AFTER /become-ng-hp/become-site.css, which this theme pulls in
   so the shared nav partial renders exactly as it does on the rest of
   the site. See `become_ng_shell_styles()` in functions.php.

   WHAT THIS FILE IS FOR
   become-site.css is a whole-page design system, not a component
   stylesheet, and it loads after the theme - so its base rules
   (`*{margin:0;padding:0}`, `a`, `ul,ol`, `h1-h4`, `img`, `button`)
   outrank the theme's. This file repairs ONLY the places where that
   measurably changes the WordPress half of the page, each one verified
   by diffing computed styles against production.

   HOW TO ADD TO IT - read this before writing a rule here.
   Do NOT use `revert`. It rolls back to the USER-AGENT stylesheet, not
   to what the theme wanted, which is a third wrong answer. The first
   version of this file reverted p / ul / h1-h6 margins and list-styles
   and broke about twenty elements that were already fine: the theme's
   own `p {margin:0 0 27px}` and `ul {list-style:none}` are element
   selectors, which already beat become-site.css's `*{margin:0}` on
   specificity, so they needed no help at all.

   Most base-rule conflicts resolve themselves that way. Add a rule here
   only after confirming a real difference against production, and fix
   it by naming the production value, never by reverting.

   PHASE 1 IS THE SHELL ONLY. The post grid and the article layout are
   still the parent theme's. Do not start restyling them here - that is
   phase 2, and it belongs in child index.php / single.php.
   ============================================================ */

/* ---------- content repairs (each measured against production) ---------- */

/* THE one base rule that actually breaks the blog: become-site.css's
   `a { color: inherit; text-decoration: none }`. The theme's own
   `a { color: #8574E9 }` (style.css:681) is the same specificity and loads
   earlier, so every link inside the article area lost its colour and
   inherited the body grey. Caught by diffing `.read-more` against
   production: #626678 here vs #8574E9 there.

   `:where(#content)` scopes it without adding specificity - the rule weighs
   exactly as much as the theme's own `a`, so it beats become-site.css by
   load order and still loses to any class-based link colour, which is what
   the theme relies on. A plain `#content a` would be (1,0,1) and would
   trample those class rules instead.

   `a:hover` is (0,1,1) and already outranks become-site.css, so the theme's
   hover underline survives untouched and needs nothing here. */
:where(#content) a {
  color: #8574E9
}

/* ---------- the shell itself ---------- */

body.become-ng-shell {
  background: var(--white)
}

/* become-site.css gives .nav z-index:100; this lifts it clear of the blog's
   own sticky widgets, several of which sit in the 10-99 range. */
body.become-ng-shell .nav {
  z-index: 999
}

/* The theme hides its skip-link off-canvas using properties the NG `*`
   reset zeroes, so it would otherwise render as visible text. */
body.become-ng-shell .skip-link.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap
}

body.become-ng-shell .skip-link.screen-reader-text:focus {
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  z-index: 1000;
  padding: 14px 22px;
  background: var(--white);
  color: var(--purple);
  font-weight: 700
}

/* A little air between the nav and whatever the theme renders first. */
body.become-ng-shell #content {
  padding-top: 28px
}

@media (max-width: 720px) {
  body.become-ng-shell #content {
    padding-top: 18px
  }
}

/* ---------- Bootstrap class collisions ---------- */
/* The blog loads Bootstrap 5.3.3, which owns two class names the NG design
   system also uses: `.nav` and `.btn`. become-site.css loads after Bootstrap
   so it wins every property it declares - but Bootstrap's OTHER properties
   leak through, because a later rule only overrides what it actually names.
   Audited the full Bootstrap class list against become-site.css on
   2026-10-29: `.nav` and `.btn` are the only two shared selectors. */

/* This shipped broken: Bootstrap's `.nav { display:flex }` turned the NG
   nav's inner `.wrap` into a shrink-to-fit flex item, so the header rendered
   536px wide and centred instead of 1280px, with the logo touching
   "Sign in". become-site.css never declares `display` on `.nav` - it relies
   on the default `block` - which is why nothing stopped it. */
body.become-ng-shell .nav {
  display: block;
  flex-wrap: nowrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none
}

/* NG's `.btn` declares no line-height, so on an NG page it inherits body's
   1.6; here Bootstrap's `.btn` supplies 1.5 and the button renders 1px
   shorter. `inherit` reproduces the NG behaviour rather than hard-coding it.
   Do NOT also reset border or box-shadow - those are .btn-purple's own, and
   resetting them flattens the button. Tried once; it cost the button its
   1px border and its shadow. */
body.become-ng-shell .btn {
  line-height: inherit
}

/* ---------- the theme's button skin vs the NG shell ---------- */
/* The parent theme skins EVERY `<button>` (style.css ~591): border,
   background, border-radius, colour, line-height, padding and
   `font-weight: 600 !important`. become-site.css's own `button` rule is the
   same specificity and loads later, so it wins back border and background -
   but what it does not name leaks through, and `*{padding:0}` cannot stop
   it, because `button` (0,0,1) outranks `*` (0,0,0).

   Measured symptom: `#hamburger` is `width:44px` in become-site.css but
   rendered 64px, because `.7rem 2rem` is 32px a side on a border-box
   element and the content box cannot go below zero.

   Scoped with :where() so it weighs exactly as much as the theme rule it is
   cancelling - `button`, (0,0,1) - and wins on load order alone. Written as
   `body.become-ng-shell #mobileMenu button` first, which is (1,2,2) and
   trampled the very NG component rules it was meant to protect:
   `.macc-trigger` (0,1,0) lost its `padding: 16px 0` and its colour, so the
   mobile menu rows collapsed to zero height. Keep the :where(). */
:where(.nav, #mobileMenu, #termsModal) button {
  padding: 0;
  border-radius: 0;
  line-height: normal;
  color: inherit
}

/* font-weight is the one the theme marks !important, so matching it is the
   only way back. Only the accordion triggers carry visible text; the
   hamburger and the modal close are glyphs. */
body.become-ng-shell .macc-trigger {
  font-weight: 800 !important
}