/**
 * /pricing/ (page 298846) — design corrections, 2026-07-29.
 *
 * Sameer's two calls after the tri-review of Waqas's 28-Jul audit:
 *   1. The Enterprise card must not be black. Only ONE card should carry a
 *      visual highlight — the "Most popular" one (Professional in the bundled
 *      pane, Growth in the per-profile pane), already cream with a 2px border.
 *      A second, higher-contrast black card competes with it, and it sits on
 *      the plan that has no price.
 *   2. The page header must be centred.
 *
 * ---------------------------------------------------------------------------
 * READ THIS BEFORE EDITING — why the rules look the way they do.
 *
 * (a) WHY THIS FILE AND NOT pricing-style.css
 *     /pricing/ is `page-template-default` (verified in the live body class),
 *     so it matches NONE of the four templates that enqueue pricing-style.css.
 *     Anything added there would never load. This file is enqueued by page ID
 *     in functions.php, beside the phase-0 analytics script.
 *
 * (b) WHY EVERY RULE IS `body`-PREFIXED AND `!important`
 *     Both things being overridden live in the "V2 REDESIGN SKIN v3" <style>,
 *     which is a Bricks CODE ELEMENT IN THE BODY (data-script-id="scskin"),
 *     not in <head>. A stylesheet enqueued in <head> therefore loses on source
 *     order at equal specificity, and the skin's rules are already !important.
 *     The `body` prefix adds one element to the specificity so these win
 *     regardless of order. Dropping either the prefix or the !important makes
 *     every rule below a no-op — this was measured, not assumed.
 *
 * (c) WHAT IS BEING REVERSED
 *     The ink-card treatment is deliberate and was tri-reviewed; the skin even
 *     carries a "RE-ASSERT ink-card inversion" rule because later colour rules
 *     would otherwise repaint Enterprise text ink-on-ink. Each rule below
 *     mirrors one specific skin rule. If a rule is added to the skin's ink
 *     block, a matching rule is needed here or the card goes half-dark.
 *
 *     The header alignment likewise reverses an intentional v3.5 choice
 *     ("left-aligned headline + single control band … kills the dead gap").
 *     Centring the headline may reintroduce the gap beside the pane toggle,
 *     which stays left-aligned. Flagged to Sameer 2026-07-29.
 *
 * (d) THE FOUR ENTERPRISE CARDS
 *     There is one card per BILLING STATE, not one per pane:
 *       #brxe-belzpo  bundled / monthly        #brxe-efrmtj  bundled / yearly
 *       #brxe-xmmzrh  per-profile / monthly    #brxe-rgyyki  per-profile / yearly
 *     Only two are ever visible at once. Missing the monthly pair leaves the
 *     card black on half the page's states.
 * ---------------------------------------------------------------------------
 */

/* 1. Background. The skin's base card rule already paints all 15 cards
      #ffffff; this only neutralises the ink override for the four. */
body #brxe-belzpo,
body #brxe-xmmzrh,
body #brxe-rgyyki,
body #brxe-efrmtj {
  background: #ffffff !important;
}

/* 2. Body copy, list items and their wrappers. Mirrors the skin's colour rule
      AND its later "RE-ASSERT" duplicate — one rule here beats both.
      #424242 is the colour the sibling Standard card uses, measured. */
body #brxe-belzpo :is(h1, h2, h3, h4, div, span, p, li):not(.bricks-button):not([class*="icon-wrapper"]),
body #brxe-xmmzrh :is(h1, h2, h3, h4, div, span, p, li):not(.bricks-button):not([class*="icon-wrapper"]),
body #brxe-rgyyki :is(h1, h2, h3, h4, div, span, p, li):not(.bricks-button):not([class*="icon-wrapper"]),
body #brxe-efrmtj :is(h1, h2, h3, h4, div, span, p, li):not(.bricks-button):not([class*="icon-wrapper"]) {
  color: #424242 !important;
}

/* 3. Headings. Kept as the near-black the other cards' h3 use (#16130f).
      The two :not()s are NOT decorative: rule 2 above scores (1,2,2) and also
      matches h1-h3, so a plain `body :is(#ids) :is(h1,h2,h3,.brxe-heading)`
      — (1,1,1) — loses to it and the heading comes out #424242. Measured.
      With the :not() pair this is (1,3,1) and wins. */
body :is(#brxe-belzpo, #brxe-xmmzrh, #brxe-rgyyki, #brxe-efrmtj) :is(h1, h2, h3, .brxe-heading):not(.bricks-button):not([class*="icon-wrapper"]) {
  color: #16130f !important;
}

/* 4. The "Custom" price slot sits inside rule 2's net, so it would come out at
      #424242. The other cards render their price at #333 — match them.
      Each id is qualified by its own card so the selector scores (2,0,1) and
      clears rule 2's (1,2,2); `body #brxe-xzbiuf` alone is (1,0,1) and loses,
      which renders the price at #424242. Measured, not assumed. */
body #brxe-belzpo #brxe-xzbiuf,  /* bundled / monthly     */
body #brxe-efrmtj #brxe-wmecnx,  /* bundled / yearly      */
body #brxe-xmmzrh #brxe-ktrumf,  /* per-profile / monthly */
body #brxe-rgyyki #brxe-bepqoq { /* per-profile / yearly  */
  color: #333333 !important;
}

/* 5. List check icons. The skin fills them cream for the dark background;
      #7c8697 is what the same icons use on every other card. */
body #brxe-belzpo li svg,
body #brxe-xmmzrh li svg,
body #brxe-rgyyki li svg,
body #brxe-efrmtj li svg {
  fill: #7c8697 !important;
}

/* 6. Divider above "What's included" — cream hairline to the ink one the
      other cards use. Same structural selector as the skin. */
body :is(#brxe-belzpo, #brxe-xmmzrh, #brxe-rgyyki, #brxe-efrmtj) > .brxe-block:first-child > div:last-child {
  border-top: 1px solid rgba(22, 19, 15, 0.12) !important;
}

/* 7. Inline links (not the CTA). Cream-on-white would be invisible. */
body :is(#brxe-belzpo, #brxe-xmmzrh, #brxe-rgyyki, #brxe-efrmtj) a:not(.bricks-button) {
  color: #16130f !important;
  text-decoration-color: #16130f !important;
}

body :is(#brxe-belzpo, #brxe-xmmzrh, #brxe-rgyyki, #brxe-efrmtj) a:not(.bricks-button):hover {
  color: #c24e00 !important;
}

/* 8. Focus ring. The skin uses a cream outline so it stays visible on ink;
      on white that ring is invisible, which would be a real a11y regression
      (WCAG 2.4.11) introduced by this change rather than fixed by it. */
body :is(#brxe-belzpo, #brxe-xmmzrh, #brxe-rgyyki, #brxe-efrmtj) :is(a, button):focus-visible {
  outline: 3px solid #16130f !important;
  outline-offset: 2px;
}

/* NOT overridden, deliberately:
   `#brxe-… a.bricks-button { color:#ffffff !important }` — the CTA stays white
   text on the orange fill, exactly as it renders on every other card. */

/* 9. Centre the header block (H1 + the "Need a custom offer?" line, both
      children of #brxe-pnkgrp). Overrides the v3.5 rule
      `#brxe-pnkgrp, #brxe-zixfpw { text-align: left !important }`.

      `align-items` is the load-bearing property, NOT `text-align`.
      #brxe-pnkgrp is display:flex in a column, so its children are flex items
      sized to their content — the H1 measured 733px wide inside a 1260px
      container with 527px of margin-right. text-align:center alone centres
      text INSIDE that 733px box, which is visually indistinguishable from the
      old layout: computed style says "center" while the page looks unchanged.
      Verified by geometry (H1 x: 90 -> centred), not by computed style.

      #brxe-wanyya is named explicitly because the sub-line carries its own
      text-align:left and is not covered by the #brxe-pnkgrp rule. */
body #brxe-pnkgrp {
  align-items: center !important;
  text-align: center !important;
}

/*    The auto margins are the second load-bearing part. The page sets
      `#brxe-zixfpw { margin-right: auto !important }` (and the equivalent on
      the sub-line), measured at exactly the leftover width — 1260-733=527 on
      the H1, 1260-490=770 on the sub-line. An auto margin absorbs ALL free
      space, which pins the item left and defeats align-items entirely, so it
      must be balanced with margin-left:auto. #brxe-wanyya additionally sets
      align-self:flex-start, so it needs align-self:center too. */
body #brxe-zixfpw,
body #brxe-wanyya {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
}
