/* Section navigation for legacy hub pages. On mobile these pages drop the banner image, so this block takes over the space the image used to hold: where you are, what is next, and the full index one tap away. Markup comes from inc/legacy/quick-menu.php, which also carries the escape hatch for the Kadence accordion those pages wrap it in. */

.cw-context-menu {
  overflow: hidden;
  font-family: var(--cw-context-font, inherit);
  color: var(--cw-context-on-dark, #ffffff);
  background: var(--cw-context-ink, currentColor);
  border-radius: var(--cw-context-radius, 14px);
}

.cw-context-menu-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 0;
}

.cw-context-menu-position {
  color: var(--cw-context-marker, currentColor);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.cw-context-menu-section {
  color: var(--cw-context-on-dark-soft, rgb(255 255 255 / 72%));
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cw-context-menu--set .cw-context-menu-section {
  color: var(--cw-context-on-dark, #ffffff);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

.cw-context-menu-next {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 16px 12px;
  color: var(--cw-context-on-dark, #ffffff);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}

.cw-context-menu-next-label {
  color: var(--cw-context-on-dark-soft, rgb(255 255 255 / 72%));
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cw-context-menu-next::after {
  margin-left: auto;
  color: var(--cw-context-marker, currentColor);
  content: "→";
}

.cw-context-menu-next:hover .cw-context-menu-next-title,
.cw-context-menu-next:focus-visible .cw-context-menu-next-title {
  text-decoration: underline;
}

.cw-context-menu-ticks {
  display: flex;
  gap: 3px;
  margin: 0;
  padding: 0 16px 12px;
  list-style: none;
}

.cw-context-menu-tick {
  flex: 1;
  height: 3px;
  background: var(--cw-context-tick, rgb(255 255 255 / 18%)));
  border-radius: 2px;
}

.cw-context-menu-tick.is-read {
  background: var(--cw-context-marker, currentColor);
}

.cw-context-menu-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cw-context-line, rgb(255 255 255 / 14%)));
  color: var(--cw-context-on-dark-soft, rgb(255 255 255 / 72%));
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}

.cw-context-menu--set .cw-context-menu-bar {
  padding-top: 14px;
  border-top: 0;
}

.cw-context-menu-bar::-webkit-details-marker {
  display: none;
}

.cw-context-menu-summary {
  margin-left: auto;
}

.cw-context-menu--set .cw-context-menu-summary {
  color: var(--cw-context-on-dark-soft, rgb(255 255 255 / 72%));
}

.cw-context-menu-chevron {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: translateY(-2px) rotate(45deg);
}

.cw-context-menu-disclosure[open] .cw-context-menu-chevron {
  transform: translateY(2px) rotate(225deg);
}

/* ---------------------------------------------------------------------------
   Panel — one continuous object with the bar, rather than a white box pasted
   on top of it. Rows sit on near-invisible hairlines; the lime edge is the
   touch response; the "also in" group is a darker footer strip.
   --------------------------------------------------------------------------- */

.cw-context-menu-panel {
  padding: 0;
  background: var(--cw-context-surface, #1c1c1c);
}

.cw-context-menu .cw-context-menu-list,
.cw-context-menu .cw-context-menu-actions,
.cw-context-menu .cw-context-menu-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two classes so the colour survives the theme's link styling. */
.cw-context-menu .cw-context-menu-link {
  display: flex;
  position: relative;
  align-items: baseline;
  gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--cw-context-line-soft, rgb(255 255 255 / 7%)));
  color: var(--cw-context-link, rgb(255 255 255 / 86%));
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}

.cw-context-menu-list > .cw-context-menu-item:first-child > .cw-context-menu-link {
  border-top: 0;
}

.cw-context-menu .cw-context-menu-link::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  background: var(--cw-context-marker, currentColor);
  border-radius: 1px;
  opacity: 0;
  content: "";
}

.cw-context-menu .cw-context-menu-link:hover,
.cw-context-menu .cw-context-menu-link:focus-visible {
  color: var(--cw-context-on-dark, #ffffff);
  background: var(--cw-context-focus, rgb(255 255 255 / 4%)));
}

.cw-context-menu .cw-context-menu-link:hover::before,
.cw-context-menu .cw-context-menu-link:focus-visible::before {
  opacity: 1;
}

.cw-context-menu-index {
  min-width: 15px;
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* The house highlighter still marks the page you are on, so position is never
   carried by colour alone. */
.cw-context-menu-item.is-current > .cw-context-menu-link .cw-context-menu-label {
  padding-inline: 4px;
  color: var(--cw-context-ink, currentColor);
  font-weight: 600;
  background: var(--cw-context-current-fill, color-mix(in srgb, currentColor 13%, transparent));
  border-radius: 2px;
}

.cw-context-menu-item.is-current > .cw-context-menu-link::before,
.cw-context-menu-item.is-ancestor > .cw-context-menu-link::before {
  opacity: 1;
}

.cw-context-menu-item.is-ancestor > .cw-context-menu-link {
  color: var(--cw-context-on-dark, #ffffff);
}

.cw-context-menu-deeper {
  margin-left: auto;
  padding: 1px 8px;
  color: var(--cw-context-count, rgb(255 255 255 / 72%));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  background: var(--cw-context-wash, rgb(255 255 255 / 10%)));
  border-radius: 999px;
}

.cw-context-menu-sublist {
  padding-left: 26px;
  background: var(--cw-context-sunken-soft, rgb(0 0 0 / 12%)));
}

.cw-context-menu .cw-context-menu-sublist .cw-context-menu-link {
  padding: 7px 16px 7px 0;
  color: var(--cw-context-count, rgb(255 255 255 / 72%));
  font-size: 12.5px;
}

/* Footer group: the destinations, held apart from the reading. */
.cw-context-menu .cw-context-menu-eyebrow {
  margin: 0;
  padding: 12px 16px 5px;
  background: var(--cw-context-sunken, rgb(0 0 0 / 22%)));
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cw-context-menu .cw-context-menu-actions {
  padding-bottom: 4px;
  background: var(--cw-context-sunken, rgb(0 0 0 / 22%)));
}

.cw-context-menu .cw-context-menu-action {
  display: flex;
  align-items: center;
  padding: 8px 16px 12px;
  color: var(--cw-context-marker, currentColor);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}

.cw-context-menu-action::after {
  margin-left: auto;
  content: "→";
}

.cw-context-menu .cw-context-menu-action:hover {
  text-decoration: underline;
}

.cw-context-menu-action-item.is-current .cw-context-menu-action {
  color: var(--cw-context-ink, currentColor);
  font-weight: 600;
  background: var(--cw-context-current-fill, color-mix(in srgb, currentColor 13%, transparent));
}

.cw-context-menu-link:focus-visible,
.cw-context-menu-action:focus-visible,
.cw-context-menu-bar:focus-visible {
  outline: 2px solid var(--cw-context-marker, currentColor);
  outline-offset: -2px;
}

/* eCommerce section placement: the hub uses an inset hero card; child pages
   use one compact strip below the mobile header. Older context-menu panes and
   hardcoded article cards stay out of the mobile reading flow. */
.asc-ecom-quick-menu-mobile,
.asc-ecom-section-menu,
.asc-ecom-playbook-mobile {
  display: none;
}

body:has(.asc-ecom-section-menu)
  nav.cw-context-menu:not(.asc-ecom-section-menu nav.cw-context-menu) {
  display: none;
}

@media (max-width: 767px) {
  /* Page-owned Playbook card: the small lime-edged cover gives the download a
     tangible identity while the invisible native Button makes the whole card
     one accessible link. The original Kadence button remains for desktop. */
  .asc-ecom-playbook-mobile {
    display: block;
    position: relative;
    margin: 32px 0 16px;
    cursor: pointer;
  }

  .asc-ecom-playbook-mobile .wp-block-columns.asc-playbook-card {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 10px;
    background: rgb(255 255 255 / 9%);
    border-radius: 8px;
    transition: background-color 160ms ease;
  }

  .asc-ecom-playbook-mobile:hover .asc-playbook-card {
    background: rgb(255 255 255 / 13%);
  }

  .asc-ecom-playbook-mobile .asc-playbook-cover {
    display: flex;
    flex: 0 0 60px;
    flex-direction: column;
    justify-content: flex-end;
    width: 60px;
    height: 76px;
    padding: 8px 5px 8px 7px;
    background: #2a1a5e;
    border-left: 3px solid var(--cw-context-marker, currentColor);
    border-radius: 3px;
  }

  .asc-ecom-playbook-mobile .asc-playbook-copy {
    flex: 1 1 auto;
    min-width: 0;
  }

  .asc-ecom-playbook-mobile p {
    margin: 0;
  }

  .asc-ecom-playbook-mobile .asc-playbook-kicker {
    margin-bottom: 3px;
    color: var(--cw-context-marker, currentColor);
    font-size: 6px;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .asc-ecom-playbook-mobile .asc-playbook-name {
    color: #ffffff;
    font-size: 8px;
    font-weight: 600;
    line-height: 1.2;
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  .asc-ecom-playbook-mobile .asc-playbook-cta {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.2px;
  }

  .asc-ecom-playbook-mobile .asc-playbook-cta::after {
    content: " \2913";
  }

  .asc-ecom-playbook-mobile .asc-playbook-meta {
    margin-top: 4px;
    color: #c9bbff;
    font-size: 14px;
    line-height: 15.4px;
  }

  /* Figma 1224:67 - the AT A GLANCE badge is 14px text in a 4px/10px pill,
     about 23px tall. It was inheriting a 32px line-height from the column,
     inflating the pill to 40px and pushing the whole card down. */
  .kt-adv-heading16008_26d263-19 {
    line-height: 15px;
  }

  .asc-ecom-playbook-mobile .asc-playbook-card-link,
  .asc-ecom-playbook-mobile .asc-playbook-card-link .wp-block-button {
    position: static;
    margin: 0;
  }

  .asc-ecom-playbook-mobile .asc-playbook-card-link .wp-block-button__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    background: transparent;
    border-radius: 8px;
  }

  .asc-ecom-playbook-mobile .asc-playbook-card-link .wp-block-button__link:focus-visible {
    outline: 2px solid var(--cw-context-marker, currentColor);
    outline-offset: 2px;
  }

  /* Kadence forces inline-flex on its button link; this explicit page-owned
     fallback class is the only element that needs the stronger override. */
  .asc-ecom-playbook-desktop-button {
    display: none !important;
  }

  .asc-ecom-playbook-mobile + .asc-ecom-quick-menu-mobile {
    /* Keep the Playbook and menu visually separate on mobile. */
    margin-top: 16px !important;
  }

  .asc-ecom-quick-menu-mobile {
    display: block;
    margin: 32px 0 0;
  }

  .asc-ecom-quick-menu-mobile .cw-context-menu {
    margin: 0;
  }

  .asc-ecom-hero-image {
    display: none;
  }

  .single-content > .wp-block-group.asc-ecom-section-menu {
    display: block;
    position: relative;
    z-index: 2;
    /* Kadence reapplies its standard 2rem block margin after component CSS. */
    margin-bottom: 0 !important;
    background: #ffffff;
  }

  .single-content div:has(> .hub-nav-list) {
    display: none;
  }

  /* -----------------------------------------------------------------------
     ECOMMERCE HUB MOBILE TUNING
     Webvizio tasks 2-7: tighten the hero and summary card while keeping the
     Playbook, quick menu and logo row balanced. Remove this section to revert.
     ----------------------------------------------------------------------- */

  /* Kadence sets this from nav#kadence-breadcrumbs with !important. An ID beats
     any number of classes, so the class-only selector this replaces never
     applied and the breadcrumb stayed at 16px. Match the ID to win. */
  .page-id-16008 nav#kadence-breadcrumbs,
  .page-id-16008 nav#kadence-breadcrumbs .kadence-breadcrumb-container {
    margin: 10px 0 !important;
    /* Figma 1224:16 - 14px/18px. */
    font-size: 14px !important;
    line-height: 18px !important;
  }

  /* Figma 1224:42 / 1224:45 - the menu label is 16px and the page count 14px.
     Scoped to this page so the quick menu is unchanged elsewhere. */
  .page-id-16008 .cw-context-menu .cw-context-menu-section {
    font-size: 16px !important;
  }

  .page-id-16008 .cw-context-menu .cw-context-menu-summary {
    font-size: 14px !important;
  }

  .page-id-16008 .kb-row-layout-id16008_2a6ff4-78 h1.wp-block-kadence-advancedheading {
    margin: 28px 0 12px !important;
    font-size: 26px !important;
    line-height: 30px !important;
  }

  .page-id-16008 .kb-row-layout-id16008_2a6ff4-78 p.wp-block-kadence-advancedheading {
    margin-bottom: 24px !important;
    font-size: 16px !important;
    line-height: 23px !important;
  }

  .page-id-16008 .kb-row-layout-id16008_2a6ff4-78 .kb-buttons-wrap {
    margin-bottom: 24px !important;
  }

  /* Webvizio 3 - the menu sat 16px under the playbook card and 60px above the
     logos, so it read as a second row of the card rather than its own control.
     24px matches the gap above it, centring it between the two. */
  .page-id-16008 .kt-block-spacer-16008_9d558d-82 {
    height: 24px !important;
  }

  .page-id-16008 .kb-row-layout-id16008_5857d4-0d > .kt-row-column-wrap {
    gap: 12px !important;
    padding: 0 !important;
  }

  .page-id-16008 .kadence-column16008_a19d25-be ul.wp-block-list {
    margin: 0 !important;
    padding-left: 24px !important;
  }

  /* Figma 1224:71-74 - 16px/22px. The cramped feel was the font being 15px, not
     the leading being tight: 22px on 15px is 1.47, on 16px it is 1.38 but the
     glyphs are bigger, which is what the design actually specifies. The 26px
     experiment moved this away from the design; this returns it. */
  .page-id-16008 .kadence-column16008_a19d25-be li {
    margin-bottom: 12px;
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .page-id-16008 .kadence-column16008_a19d25-be li:last-child {
    margin-bottom: 0;
  }

  .page-id-16008 .hub-problem-text {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 4px 10px !important;
    font-size: 13px !important;
    line-height: 20px !important;
  }

  .page-id-16008 .hub-problem-text + h3.wp-block-kadence-advancedheading {
    margin: 0 0 10px !important;
    padding: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
   Light variant — for pages that carry their own hero and render this
   standalone above light content. Full-bleed band rather than an inset card,
   so it reads as part of the page chrome instead of something dropped on top.
   --------------------------------------------------------------------------- */

.cw-context-menu--light {
  color: var(--cw-context-ink, currentColor);
  background: var(--cw-context-light-surface, transparent);
  border-top: 1px solid var(--cw-context-light-border, color-mix(in srgb, currentColor 14%, transparent));
  border-bottom: 1px solid var(--cw-context-light-border, color-mix(in srgb, currentColor 14%, transparent));
  border-radius: 0;
}

.cw-context-menu--light .cw-context-menu-bar {
  padding: 14px 20px;
  border-top: 0;
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
}

.cw-context-menu--light .cw-context-menu-section {
  color: var(--cw-context-ink, currentColor);
}

.cw-context-menu--light .cw-context-menu-summary,
.cw-context-menu--light .cw-context-menu-chevron {
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
}

.cw-context-menu--light .cw-context-menu-panel {
  background: var(--cw-context-light-surface, transparent);
  border-top: 1px solid var(--cw-context-light-border, color-mix(in srgb, currentColor 14%, transparent));
}

.cw-context-menu--light .cw-context-menu-link {
  padding: 11px 20px;
  border-top: 1px solid var(--cw-context-light-line, color-mix(in srgb, currentColor 9%, transparent));
  color: var(--cw-context-ink, currentColor);
}

.cw-context-menu--light .cw-context-menu-link:hover,
.cw-context-menu--light .cw-context-menu-link:focus-visible {
  color: var(--cw-context-light-link, currentColor);
  background: var(--cw-context-light-sunken, color-mix(in srgb, currentColor 4%, transparent));
}

.cw-context-menu--light .cw-context-menu-index {
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
}

.cw-context-menu--light .cw-context-menu-item.is-ancestor > .cw-context-menu-link {
  color: var(--cw-context-light-link, currentColor);
}

.cw-context-menu--light .cw-context-menu-deeper {
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
  background: var(--cw-context-light-wash, color-mix(in srgb, currentColor 4%, transparent));
}

.cw-context-menu--light .cw-context-menu-sublist {
  padding-left: 30px;
  background: var(--cw-context-light-sunken, color-mix(in srgb, currentColor 4%, transparent));
}

.cw-context-menu--light .cw-context-menu-sublist .cw-context-menu-link {
  padding: 8px 20px 8px 0;
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
}

.cw-context-menu--light .cw-context-menu-eyebrow {
  padding: 12px 20px 4px;
  background: var(--cw-context-light-sunken, color-mix(in srgb, currentColor 4%, transparent));
  color: var(--cw-context-muted, color-mix(in srgb, currentColor 62%, transparent));
}

.cw-context-menu--light .cw-context-menu-actions {
  background: var(--cw-context-light-sunken, color-mix(in srgb, currentColor 4%, transparent));
}

.cw-context-menu--light .cw-context-menu-action {
  padding: 6px 20px 14px;
  color: var(--cw-context-light-link, currentColor);
}

.cw-context-menu--light .cw-context-menu-action-item.is-current .cw-context-menu-action {
  color: var(--cw-context-ink, currentColor);
  background: var(--cw-context-current-fill, color-mix(in srgb, currentColor 13%, transparent));
}

/* ---------------------------------------------------------------------------
   desktop-list-override: on desktop this is a sidebar, not a dropdown.

   The collapsible bar is a mobile affordance. From 768px up the section nav sits
   in a sidebar column, so the links are always visible and the toggle, the
   chevron and the page count all go away, leaving a plain titled list.

   Scoped to --light so the eCommerce dark menu, which is a mobile design, keeps
   its disclosure behaviour unchanged.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* A closed <details> hides its panel via display or content-visibility
     depending on the browser, so both are overridden. */
  .cw-context-menu--light .cw-context-menu-disclosure > .cw-context-menu-panel {
    display: block !important;
    content-visibility: visible !important;
  }

  .cw-context-menu--light .cw-context-menu-chevron,
  .cw-context-menu--light .cw-context-menu-summary {
    display: none;
  }

  /* The summary stays as the list heading but stops behaving like a control. */
  .cw-context-menu--light .cw-context-menu-bar {
    cursor: default;
    pointer-events: none;
  }
}

/* ==========================================================================
   Containing block for host-styled tree markup.

   The tree half renders the original plugin's markup, which a site may style
   itself — Demand Definition positions a chevron on .menu-title with
   `position: absolute; right: 9px`. Wrapping that markup in .cw-context__tree
   added elements between it and its old anchor, all of them static, so the
   chevron resolved against the sidebar instead of the menu and appeared at the
   far edge of the column.

   Restoring a containing block here fixes it for every host without anyone
   having to edit their own stylesheet. Found on demand-definition.com, and it
   would have happened on any site that positions anything inside that markup.
   ========================================================================== */
.cw-context .context-menu-container { position: relative; }


/* ==========================================================================
   MARKERS

   Two different things, deliberately separate:

     has-children   "there is more below"  — an affordance. Arrow, on by default.
     is-current     "you are here"         — state. Four treatments, all off
                                             except the rule, all composable.

   A site turns one on from the same mapping file it uses for colour. There is
   nothing to type a value into, so a site can pick from four and cannot invent
   a fifth — the same reason theme.json sets custom: false.

   Bold is deliberately absent. It changes the text width, so the current item
   widens, sometimes wraps, and the whole list shifts as the reader moves
   between pages. The menu jitters. Every treatment below leaves the metrics
   alone.
   ========================================================================== */

/* -- has-children: the arrow. On by default. ----------------------------- */
/* Both menus. The old plugin draws a chevron of its own, but only when IT
   owns the shortcode - and cw-context has taken that over, so its stylesheet
   no longer prints. Removing this rule removes the arrows entirely, which is
   how I found out. */
:where(.cw-context) .has-children > a::after,
:where(.cw-context) .page_item_has_children > a::after {
	content: "";
	display: var(--cw-context-deeper-arrow, inline-block);
	inline-size: 0.32em;
	block-size: 0.32em;
	margin-inline-start: 0.5em;
	vertical-align: 0.08em;
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	rotate: 45deg;
	opacity: 0.55;
}

/* -- is-current: four treatments, composable, ALL OFF BY DEFAULT ---------

   Off, not on. Every site already marks its current item somehow - Demand
   Definition draws a red bar, Ascendant a lime one - so a default-on
   treatment does not decorate, it collides. Shipped one on by default and it
   landed on the first letter of the label within the hour.
   ------------------------------------------------------------------------ */
:where(.cw-context) :is(.is-current, .current_page_item) > a {
	background: var(--cw-context-mark-fill, transparent);
	text-decoration-line: var(--cw-context-mark-underline, none);
	text-underline-offset: 0.25em;
}

/* The rule. The default, and what Mae chose on Ascendant. */
:where(.cw-context) :is(.is-current, .current_page_item) > a::before {
	content: "";
	display: var(--cw-context-mark-rule, none);
	position: absolute;
	/* Outside the text box, in the list item's own padding. Sat at 0 it
	   lands on the first letter of the label. */
	inset-inline-start: var(--cw-context-mark-rule-offset, -0.55em);
	inset-block: 0.35em;
	inline-size: 3px;
	border-radius: 2px;
	background: var(--cw-context-marker, currentColor);
}

/* The arrow, in the gutter. Positioned out of flow so it costs no width. */
:where(.cw-context) :is(.is-current, .current_page_item) > a::after {
	content: "\2192";
	display: var(--cw-context-mark-arrow, none);
	position: absolute;
	/* Shares the has-children token deliberately: an item can be current AND
	   have children, so both rules land on the same ::after. Agreeing on the
	   value means whichever wins the cascade, the arrow sits in the same
	   place. */
	inset-inline-end: var(--cw-context-deeper-inset, 0.55em);
	color: var(--cw-context-marker, currentColor);
}

/* The rule and the gutter arrow are positioned, so the link needs to be the
   thing they position against — and needs room for the rule. */
:where(.cw-context) :is(.is-current, .current_page_item) > a {
	position: relative;
}

/* ==========================================================================
   THE TREE, DRESSED

   The tree half renders the original plugin's markup, and that plugin styles
   it inline: 18px items, an 18px title with no margin, and a chevron in a box
   the height of the line rather than centred in it. Measured on Demand
   Definition: title 18px/35px margin 0, items 18px with 10px padding at 45px
   tall, chevron box 344 x 35 at top 0.

   The result reads as a list with a first row rather than a titled menu — the
   title is the same size as its own children, sits hard against them, and the
   chevron floats above the text it belongs to.

   Every value here is a token, so a site changes the dress without touching
   the component and without fighting the old stylesheet.
   ========================================================================== */

/* The title. Distinct from its children, with room beneath it. */
.cw-context .cw-context__tree .menu-title,
.cw-context .context-menu-container .menu-title {
	font-size: var(--cw-context-title-size, 1.08em);
	font-weight: var(--cw-context-title-weight, 700);
	letter-spacing: var(--cw-context-title-tracking, -0.01em);
	line-height: var(--cw-context-title-leading, 1.3);
	margin-block-end: var(--cw-context-title-gap, 0.85em);
	padding-block: 0;
}

/* The chevron. The original sets position:absolute and right:9px but never
   sets top, so it falls at its static position — the top of the line box —
   and floats above the word it belongs to. Give it a top and pull it back by
   half its own height. Specificity is deliberate: it has to clear the rule
   the old plugin prints inline. */
.cw-context .cw-context__tree .context-menu-container .menu-title::after,
.cw-context .context-menu-container .menu-title::after {
	inset-block-start: 50%;
	margin-block-start: -8px;
}

/* The items. Navigation is not body copy: a step down in size, and less
   vertical padding, so three of them read as a group rather than as three
   paragraphs. */
.cw-context .context-menu-container ul.contextmenu > li > a {
	font-size: var(--cw-context-item-size, 0.94em);
	line-height: var(--cw-context-item-leading, 1.35);
	padding-block: var(--cw-context-item-pad, 0.5em);
}

.cw-context .context-menu-container ul.contextmenu ul.children > li > a {
	font-size: var(--cw-context-item-size-nested, 0.9em);
}


/* ==========================================================================
   A RULE ABOUT currentColor

   currentColor is safe for a MARK and unsafe for a FILL.

   A 3px rule or a progress tick drawn in currentColor is the text colour,
   which is exactly right. The same value used as a BACKGROUND behind text of
   that colour is dark on dark - 1:1, invisible. That is what happened to the
   current item on Demand Definition: --cw-context-marker defaulted to
   currentColor, three rules used it as a label background, and the label went
   black on black.

   So the two jobs now have two tokens:

     --cw-context-marker        marks - rules, ticks, arrows. currentColor.
     --cw-context-current-fill  fills that carry text. A wash, never a colour.

   The default is currentColor at 13%, which stays a tint of whatever the host
   page uses and therefore cannot collide with its own text.
   ========================================================================== */

/* ==========================================================================
   THE has-children ARROW, DEFINED OUTRIGHT

   The old plugin's rule for this pseudo-element is still in play on some
   installs, and a partial override produces a hybrid: its 16px absolute box
   with this file's rotation, which draws a large angular wedge at the edge of
   the row. Every property is therefore restated here, at a specificity that
   clears the original, so the arrow is whatever this file says and never a
   mixture of two intentions.

   Right-aligned rather than trailing the text: the labels wrap, and an arrow
   that follows the last word ends up in a different place on every row.
   ========================================================================== */
.cw-context .context-menu-container li.page_item_has_children > a::after,
.cw-context .cw-context-menu-list .cw-context-menu-item.has-children > a::after {
	content: "";
	position: absolute;
	inset-inline-end: var(--cw-context-deeper-inset, 2px);
	inset-block-start: 50%;
	display: var(--cw-context-deeper-arrow, block);
	inline-size: var(--cw-context-deeper-size, 0.42em);
	block-size: var(--cw-context-deeper-size, 0.42em);
	margin: 0;
	margin-block-start: calc(var(--cw-context-deeper-size, 0.42em) / -2);
	border-block-start: 1.5px solid currentColor;
	border-inline-end: 1.5px solid currentColor;
	border-block-end: 0;
	border-inline-start: 0;
	background: none;
	rotate: 45deg;
	opacity: var(--cw-context-deeper-opacity, 0.5);
	vertical-align: baseline;
}

/* The row has to be the thing the arrow positions against, and has to leave
   room for it so a long label does not run underneath. */
.cw-context .context-menu-container li.page_item_has_children > a,
.cw-context .cw-context-menu-list .cw-context-menu-item.has-children > a {
	position: relative;
	padding-inline-end: var(--cw-context-deeper-gutter, 1.4em);
}

/* ==========================================================================
   THE TREE'S FRAME

   Three things, all about edges:

   The box. The list draws a rectangle around itself - a border on all four
   sides - which turns a navigation list into a card. A menu in a sidebar is
   already in a container; the second one competes with it. The horizontal
   separators stay, because they do work: they tell you where one item ends.
   The verticals go.

   The separators. They ran the full width of the column, so they were the
   widest lines on the page and read as rules rather than as separators. They
   now stop short of the right edge, which is also where the chevron lives.

   The chevron. Sat at 2px, so it touched the edge it was meant to sit inside.
   ========================================================================== */

.cw-context .context-menu-container ul.contextmenu,
.cw-context .context-menu-container {
	border-inline: 0;
	border-block-start: 0;
}

.cw-context .context-menu-container ul.contextmenu > li {
	border-inline: 0;
	margin-inline-end: var(--cw-context-rule-inset, 0.6em);
}

/* Nested lists keep their indent but lose the inherited frame. */
.cw-context .context-menu-container ul.children,
.cw-context .context-menu-container ul.children > li {
	border-inline: 0;
}

/* The chevron, sat inside the edge rather than on it. */
.cw-context .context-menu-container li.page_item_has_children > a::after,
.cw-context .cw-context-menu-list .cw-context-menu-item.has-children > a::after {
	inset-inline-end: var(--cw-context-deeper-inset, 0.55em);
}