/* =========================================================
   SUB-ACCORDION HEADER HIGHLIGHT
   ---------------------------------------------------------
   On hover / focus / open, a solid bar sits behind the text of a
   three-digit sub-accordion header and the text reverses out of it.

   ON / OFF is --acc-sub-highlight in variables.css:

       --acc-sub-highlight: 1;   ON
       --acc-sub-highlight: 0;   OFF

   The switch is a number rather than a keyword because CSS cannot
   branch on a value. Both the bar colour and the padding are scaled
   by it, so 0 collapses the bar to fully transparent AND removes the
   padding — the header returns to exactly its previous geometry with
   no layout shift and nothing left to clean up.

   The bar goes on .accordion-label, not on the button, so it hugs
   the text instead of spanning the full row and running under the
   +/x icon at the end.

   Loaded LAST in index.php.
   ========================================================= */

/* --- how the bar reads on each ground ---
   Light sections (Strategy, Benefits): black bar, white text.
   Dark sections (Tactics): the inverse, so the bar stays visible and
   the text is black-on-white rather than invisible white-on-white. */

.area-light,
.popup,
.offcanvas.offcanvas--light {
  --acc-sub-highlight-bg: #000;
  --acc-sub-highlight-fg: #fff;
}

.area-dark,
.on-black,
.offcanvas {
  --acc-sub-highlight-bg: #fff;
  --acc-sub-highlight-fg: #000;
}

/* --- the bar --------------------------------------------- */

.accordion-secondary .accordion-secondary-header > .accordion-secondary-button .accordion-label {
  /* Scaled by the switch so OFF leaves no residual spacing. The
     negative left margin cancels the padding, keeping the first glyph
     on the same x position whether the bar is showing or not. */
  padding: calc(var(--acc-sub-highlight, 1) * var(--acc-sub-highlight-pad-y, 0.10em))
           calc(var(--acc-sub-highlight, 1) * var(--acc-sub-highlight-pad-x, 0.34em));
  margin-left: calc(-1 * var(--acc-sub-highlight, 1) * var(--acc-sub-highlight-pad-x, 0.34em));

  /* Each line of a wrapped header gets its own bar. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  transition:
    background-color 140ms ease,
    color 140ms ease;
}

.accordion-secondary
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label {
  background-color: color-mix(
    in srgb,
    var(--acc-sub-highlight-bg, #000) calc(var(--acc-sub-highlight, 1) * 100%),
    transparent
  );

  /* At switch 0 this resolves to currentColor — i.e. whatever the
     existing hover/open rules in accordion.css already set. */
  color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-sub-highlight, 1) * 100%),
    currentColor
  ) !important;
}

/* Six rules in accordion.css set the label colour with !important at a
   higher specificity — five ID-scoped ones inside the Events panel, and
   one open-parent rule that reaches every label via a descendant `*`.
   Without these matching overrides the bar would draw but the text would
   keep its old colour: white-on-white inside Events, and unreversed on
   the main page. The :is(#…) prefix buys the ID; source order does the
   rest, since this file loads last. */
:is(#s252-events, #accordionStrategies, #accordionTactics, #accordionBenefits)
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label,
:is(#s252-events, #accordionStrategies, #accordionTactics, #accordionBenefits)
  .accordion-body
  .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label,
.accordion-item:has(> .accordion-header > .accordion-button[aria-expanded="true"])
  > .accordion-collapse
  > .accordion-body
  .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label {
  background-color: color-mix(
    in srgb,
    var(--acc-sub-highlight-bg, #000) calc(var(--acc-sub-highlight, 1) * 100%),
    transparent
  );
  color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-sub-highlight, 1) * 100%),
    currentColor
  ) !important;
}

/* =========================================================
   BRIDGING THE BAND ACROSS THE +/x ICON
   ---------------------------------------------------------
   The button is  display:flex; justify-content:flex-start  with a
   gap between .accordion-label and .accordion-icon, and it is
   width:100% — so painting the button itself would run the band the
   whole row. Instead the label's own background is stretched to
   cover the gap and the icon, and the icon is then pulled back on
   top of it:

       gap          -> 0
       label pad-R  -> gap + icon
       label mar-R  -> -icon

   Net effect on geometry: none. The icon still starts at
   label-width + gap, exactly where it did before. Every value is
   multiplied by the switch, so at 0 the gap returns and the padding
   disappears.
   ========================================================= */

.accordion-secondary
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed)) {
  gap: calc((1 - var(--acc-sub-highlight, 1)) * var(--acc-secondary-icon-gap, 0.5rem));
}

.accordion-secondary
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label {
  padding-right: calc(
    var(--acc-sub-highlight, 1) *
    (var(--acc-secondary-icon-gap, 0.5rem) + var(--close-circle-size, 1.5rem))
  );
  margin-right: calc(-1 * var(--acc-sub-highlight, 1) * var(--close-circle-size, 1.5rem));
}

/* The icon sits on the band, so it reverses with the text. Its ring
   and both +/x strokes are drawn with currentColor, so one colour
   declaration carries all three. */
:is(#s252-events, #accordionStrategies, #accordionTactics, #accordionBenefits)
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-icon,
.accordion-secondary
  .accordion-secondary-header
  > .accordion-secondary-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-icon {
  color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-sub-highlight, 1) * 100%),
    currentColor
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-sub-highlight, 1) * 100%),
    currentColor
  ) !important;
}

/* =========================================================
   PRIMARY ACCORDION HEADERS  (2.1, 2.2, 3.1 ...)
   ---------------------------------------------------------
   Same treatment, its own switch. --acc-primary-highlight follows
   --acc-sub-highlight unless it is given a value of its own.
   ========================================================= */

.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-header
  > .accordion-button:is(:hover, :focus-visible, :active, :not(.collapsed)) {
  gap: calc((1 - var(--acc-primary-highlight, 1)) * var(--acc-primary-icon-gap, 0.75em));
}

.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-header
  > .accordion-button
  .accordion-label {
  padding: calc(var(--acc-primary-highlight, 1) * var(--acc-sub-highlight-pad-y, 0.10em))
           calc(var(--acc-primary-highlight, 1) * var(--acc-sub-highlight-pad-x, 0.34em));
  margin-left: calc(-1 * var(--acc-primary-highlight, 1) * var(--acc-sub-highlight-pad-x, 0.34em));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 140ms ease, color 140ms ease;
}

:is(#accordionStrategies, #accordionTactics, #accordionBenefits, #accordionLaunchStory, #s252-events)
  > .accordion-item
  > .accordion-header
  > .accordion-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label,
.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-header
  > .accordion-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-label {
  background-color: color-mix(
    in srgb,
    var(--acc-sub-highlight-bg, #000) calc(var(--acc-primary-highlight, 1) * 100%),
    transparent
  );
  color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-primary-highlight, 1) * 100%),
    currentColor
  ) !important;
  padding-right: calc(
    var(--acc-primary-highlight, 1) *
    (var(--acc-primary-icon-gap, 0.75em) + var(--close-circle-size, 1.5rem))
  );
  margin-right: calc(-1 * var(--acc-primary-highlight, 1) * var(--close-circle-size, 1.5rem));
}

:is(#accordionStrategies, #accordionTactics, #accordionBenefits, #accordionLaunchStory, #s252-events)
  > .accordion-item
  > .accordion-header
  > .accordion-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-icon,
.accordion:not(.accordion-secondary)
  > .accordion-item
  > .accordion-header
  > .accordion-button:is(:hover, :focus-visible, :active, :not(.collapsed))
  .accordion-icon {
  color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-primary-highlight, 1) * 100%),
    currentColor
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--acc-sub-highlight-fg, #fff) calc(var(--acc-primary-highlight, 1) * 100%),
    currentColor
  ) !important;
}

/* --- reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .accordion-secondary .accordion-secondary-header > .accordion-secondary-button .accordion-label {
    transition: none;
  }
}


/* =========================================================
   RECEDING SIBLINGS
   ---------------------------------------------------------
   While one sub-accordion item is open, the other items in the same
   group step back so the open one reads as the focus.

   Two IDs in the selector are deliberate. The strongest existing
   rest-state rule is

       #benefits-bg #accordionBenefits .accordion-secondary… -> (2,7)

   so one ID could not win no matter how many classes followed. The
   section id and the accordion id are always an ancestor pair
   (#strategy-bg > #accordionStrategies, and so on), which buys the
   second ID without inventing a new hook.

   :not(:hover):not(:focus-visible):not(:active) keeps a pointed-at
   sibling live, so the group stays navigable while dimmed.
   ========================================================= */

.area-light {
  --acc-sub-dim: var(--acc-sub-dim-on-light, #cccccc);
}

.area-dark,
.on-black,
.offcanvas {
  --acc-sub-dim: var(--acc-sub-dim-on-dark);
}

:is(#strategy-bg, #tactics-bg, #benefits-bg, #launch-bg, #s252-events)
  :is(#accordionStrategies, #accordionTactics, #accordionBenefits, #accordionLaunchStory, #s252-events)
  .accordion-secondary:not(.accordion-tertiary):has(> .accordion-secondary-item > .accordion-collapse.show)
  > .accordion-secondary-item
  > .accordion-secondary-header
  > .accordion-button.accordion-secondary-button.collapsed:not(:hover):not(:focus-visible):not(:active),
:is(#strategy-bg, #tactics-bg, #benefits-bg, #launch-bg, #s252-events)
  :is(#accordionStrategies, #accordionTactics, #accordionBenefits, #accordionLaunchStory, #s252-events)
  .accordion-secondary:not(.accordion-tertiary):has(> .accordion-secondary-item > .accordion-collapse.show)
  > .accordion-secondary-item
  > .accordion-secondary-header
  > .accordion-button.accordion-secondary-button.collapsed:not(:hover):not(:focus-visible):not(:active)
  .accordion-label {
  color: var(--acc-sub-dim, #cccccc) !important;
  transition: color 160ms ease;
}

/* The +/x ring on a receding sibling recedes with its title. */
:is(#strategy-bg, #tactics-bg, #benefits-bg, #launch-bg, #s252-events)
  :is(#accordionStrategies, #accordionTactics, #accordionBenefits, #accordionLaunchStory, #s252-events)
  .accordion-secondary:not(.accordion-tertiary):has(> .accordion-secondary-item > .accordion-collapse.show)
  > .accordion-secondary-item
  > .accordion-secondary-header
  > .accordion-button.accordion-secondary-button.collapsed:not(:hover):not(:focus-visible):not(:active)
  .accordion-icon {
  color: var(--acc-sub-dim, #cccccc) !important;
  border-color: var(--acc-sub-dim, #cccccc) !important;
}