/**
 * MDM — scoped style layer.
 *
 * Namespaced under `.mdm`, a body class naworg_mdm_body_class() adds under
 * /mdm/. Enqueued after theme.css, so these rules win the legacy cascade.
 *
 * Rule of thumb: if a GenerateBlocks panel can express it, it belongs on the
 * block, not here. What is left is what a panel cannot reach — generated
 * content, :nth-child, state classes PHP decides, and specificity fights with
 * plugin stylesheets.
 */

/* base.css:51,75 caps every direct child of .content at 760px and centres it,
   overriding GeneratePress's Full Width setting. */
  .mdm .content > *:not(.alignfull){margin-top:0!important;}

/* A heading that is a link takes the heading's colour. theme.css:84 paints
   every anchor orange at element specificity, and a heading colour lands on
   the <h3>, never on the <a> inside it.

   :where() zeroes everything but the .mdm scope, so this weighs one class: it
   beats a bare `a` and loses to anything GenerateBlocks compiles for a block.
   A Link colour set in the panel wins, as the panel implies it should. */
  .mdm :where(h1, h2, h3, h4, h5, h6) :where(a)       { color: inherit; }
  .mdm :where(h1, h2, h3, h4, h5, h6) :where(a):hover { color: inherit; }

/* MDM links are blue, not naw.org's orange (theme.css:84).

   :where() zeroes the scope, so this weighs one element — exactly what
   `a { color: var(--orange) }` weighs — and wins on source order alone. Any
   selector carrying a class still beats it. Hover is left to theme.css, which
   takes a link to var(--midnight): blue resting, navy on hover, per the comps. */
  :where(.mdm) a { color: var(--blue); }

/* The "See More X" arrow. Everything else about the link is in the
   .mdm-link--more global style, editable in the admin; only `content` is here,
   because no block control sets it.

   Do not restate the rest here — `.mdm .mdm-link--more` is two classes against
   the global style's one, so it would win silently and editing the style in the
   admin would appear to do nothing.

   Decorative, so an empty accessible name. The bare content:"" first is the
   fallback pattern the premium padlock block in theme.css uses: a browser that cannot parse the
   alt-text syntax drops the whole declaration, and ::after needs content to
   generate at all. */
  .mdm .mdm-link--more::after {
    content: "\2192";
    content: "\2192" / "";
    font-size: 1.25em;
    line-height: 1;
  }

/* Carousel on a phone, static row above it. site.js attaches Swiper only below
   768px and destroys it above, so these describe the two states that leaves.
   Slide widths have to not exist below the breakpoint, where Swiper writes its
   own inline ones, which is why they are not in the block panel. */
  @media (min-width: 768px) {
    /* Uninitialised, a three-up needs only the Looper's gap and slides that
       share what is left. flex-basis:0 so the gap can change freely. */
    .mdm .mdm-carousel .swiper-slide {
      flex: 1 1 0;
      min-width: 0;
    }

    /* Three dots under a row showing all three items say nothing. */
    .mdm .mdm-carousel .swiper-pagination { display: none; }
  }

/* The dots stay absolutely positioned against .swiper. Making them static
   broke them: .swiper carries overflow:hidden, so an in-flow pagination is
   clipped rather than growing the box. Clearance is phone padding on the query
   block instead, set in the panel. */

/* Swiper's default bullet is black at 20% opacity, which goes muddy over the
   tinted bands. */
  .mdm .mdm-carousel .swiper-pagination-bullet {
    background: var(--mdm-grey);
    opacity: 1;
  }

  .mdm .mdm-carousel .swiper-pagination-bullet-active {
    background: var(--blue);
  }

/* ---------------------------------------------------------------------------
   Hero band

   The band is the `mdm-hero` GP element, not the theme's .banner — no .banner
   is printed under /mdm/ at all. See includes/class.mdm-hero.php.

   The Customizer -> Additional CSS copy of `.mdm .banner { display: none }` was
   deleted on pr-212 rather than left as a leftover: while it existed it would
   have masked a failure of the template guard. Customizer CSS travels with no
   branch, so repeat that deletion wherever this promotes.
   --------------------------------------------------------------------------- */

/* A hero with no image behind it. .mdm-hero-flat comes from
   naworg_mdm_hero_body_class() when {{mdm_hero_image}} returns nothing. The
   element paints flat navy on its own; what it cannot do is change shape, and
   its 15vw of top padding is room for a photograph. */
  .mdm.mdm-hero-flat .mdm-hero {
    padding-top: 4rem;
    padding-bottom: 2.5rem;
  }

/* No parallax over a flat colour — the movement can only cost a transform per
   scroll frame. Everything else about the layer is in the element's panel. */
  .mdm.mdm-hero-flat .mdm-hero__bg {
    top: 0;
    bottom: 0;
    transform: none !important;
  }

/* ---------------------------------------------------------------------------
   Taxonomy archives — premium marking and the featured slot
   --------------------------------------------------------------------------- */

/* .is-premium is added to .wpgb-card by naworg_grid_card_premium_class()
   (class.grids.php) off the story_type=premium term. */
  .mdm .wpgb-card.is-premium .wpgb-card-wrapper { background-color: var(--lighter-yellow); }

/* Premium lock badge. CSS rather than a card block because Grid Builder cards
   live only in the database and never reach git; this file travels.

   .wpgb-card-inner is already relative and padded 24px/32px, so the badge lands
   in the padding box level with the eyebrow.

   Only the position is here. The badge itself -- icon, size, accessible name and
   the open-padlock variant -- is the shared "Premium padlock" block in
   theme.css, which every listing and the search results draw from. */
  .mdm .wpgb-card.is-premium .wpgb-card-inner::after {
    position: absolute;
    top: 24px;
    right: 32px;
  }

/* Card phone overrides use 576px, not the theme's 767px, because they switch
   with the card's own settings — Grid Builder's device toggle writes
   max-width:576px. Each override sits directly after the rule it overrides:
   equal specificity means source order decides, and a media query does not
   change that. */
  @media (max-width: 576px) {
    /* The card runs full-bleed with 16px of its own side padding. */
    .mdm .wpgb-card.is-premium .wpgb-card-inner::after {
      top: 20px;
      right: 16px;
    }
  }

/* Phone: a 100px thumbnail, per the Figma mobile frame. Media Width is a single
   33.3% in the card's General panel with no device toggle behind it, which is
   114px on a 375px phone.

   Four classes — Grid Builder's own rule carries three and loads after this
   file. The paired content width moves with it, or Grid Builder strands 14px at
   the right edge instead of giving it to the text. Card 7 is shared by grid 7
   and grid 11. */
  @media (max-width: 576px) {
    .mdm .wp-grid-builder .wpgb-card-7 .wpgb-card-media {
      width: 100px;
    }

    .mdm .wp-grid-builder .wpgb-card-7 .wpgb-card-media + .wpgb-card-content {
      width: calc( 100% - 100px );
    }
  }

/* The same premium treatment on a GenerateBlocks query loop — homepage sections
   are loops rather than grids. .is-premium arrives from
   naworg_loop_item_premium_class() off the same predicate the card filter uses.
   position:relative is here because the padlock below needs it. */
  .mdm .gb-loop-item.is-premium {
    position: relative;
    background-color: var(--lighter-yellow);
  }

/* Phone: the row stacks. Here rather than the block's device toggle because
   this row switches at the theme's 767px, and the toggle writes its own
   breakpoint into the saved markup. */
  @media (max-width: 767px) {
    .mdm .gb-looper .gb-loop-item {
      flex-direction: column;
      row-gap: 16px;
    }

    .mdm .gb-looper .gb-loop-item > [class*="gb-element-"]:first-child {
      flex-basis: auto;
      width: 100%;
    }
  }

/* Padlock on a loop item. Offsets track the item's own padding (24px/16px in
   the block) so the badge lands level with the eyebrow. */
  .mdm .gb-loop-item.is-premium::after {
    position: absolute;
    top: 24px;
    right: 16px;
  }

/* Content Library card: thumbnail at the comps' 256x171.

   align-self stops the media column stretching to the content's height. The
   ratio comes from the <svg data-ratio> spacer Grid Builder puts inside the
   media — it writes that padding-top percentage inline from the source image,
   so !important is the only way to reach it. 171/256 = 66.797%. */
  .mdm .article-list-card > .wpgb-card-media {
    align-self: flex-start;
  }
  .mdm .article-list-card > .wpgb-card-media > svg[data-ratio] {
    padding-top: 66.797% !important;
  }

/* Phone: square, per the comps. */
  @media (max-width: 576px) {
    .mdm .article-list-card > .wpgb-card-media > svg[data-ratio] {
      padding-top: 100% !important;
    }
  }

/* Phone: title clipped to two lines. .wpgb-card-content is in the selector to
   outweigh the plugin's `display: block` on [class*="wpgb-block-"]. */
  @media (max-width: 576px) {
    .mdm .article-list-card .wpgb-card-content .article-list-card__title {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

/* Clearance for the padlock, which is positioned against .wpgb-card-inner and
   would otherwise have a long category running under it. The card has no idea
   the badge exists, which is why this sits beside the rule that draws it.

   Hooked on the authored class, not .wpgb-card-7 .wpgb-block-7: card ids and
   block numbers both shift. Scoped to .is-premium because only that card grows
   a badge, and the extra class also beats the plugin's
   `.wp-grid-builder .wpgb-card div { padding: 0 }`. */
  .mdm .is-premium .article-list-card__top-bar {
    padding-right: 2rem;
  }

/* Next to the rule it overrides: both are three classes, so declaration order
   decides and a media query does not change that. */
  @media (max-width: 576px) {
    .mdm .is-premium .article-list-card__top-bar {
      padding-right: 1.5rem;
    }
  }

/* Grid Builder renders a block's wrapper even when its content comes back
   empty, and the row's gap then spaces against nothing. Not rare: podcasts and
   four fifths of white papers have no category_mdm term, and 259 of 12,390
   articles have none either.

   [class*="wpgb-block-"] is specificity, not selection — the plugin's own rule
   of that shape is three classes. */
  .mdm .article-list-card__top-bar > [class*="wpgb-block-"]:empty {
    display: none;
  }

/* The content-type pill belongs to the Content Library alone: it prints
   {{post_type}}, which only says anything on a listing that mixes types.
   Hidden here rather than removed from the card because the card cannot tell
   one grid from another — its conditions read the post, and the post is the
   same in both listings.

   These two rules tie at four classes, so the second wins on source order.
   Keep them adjacent and in this order. */
  .mdm .article-list-card .article-list-card__top-bar .article-list-card__type {
    display: none;
  }

/* Type, padding and colour are in the card's own panels. Only the pill shape is
   here. white-space needs the fourth class: the plugin sets pre-line on
   [class*="wpgb-block-"] at three, and a long label would wrap inside the pill. */
  .mdm .mdm-content-library .article-list-card__top-bar .article-list-card__type {
    display: block;
    flex: 0 0 auto;
    border-radius: 999px;
    background-color: var(--light-blue);
    font-weight: 600;
    white-space: nowrap;
  }

/* Phone: back to hidden, where the play glyph below stands in for it. The
   card's own Display control says none here too, but it emits at three classes
   and the rule above is four. */
  @media (max-width: 576px) {
    .mdm .mdm-content-library .article-list-card__top-bar .article-list-card__type {
      display: none;
    }
  }

/* Phone: the play glyph that stands in for the pill. Generated content is the
   whole thing — it becomes the row's last flex item. .is-podcast comes from
   naworg_grid_card_post_type_class(), because the card markup carries no post
   type of its own.

   play_btn.svg is only the triangle; the chip is this rule's background. Offset
   55% because a triangle's visual centre sits left of its bounding box. */
  @media (max-width: 576px) {
    .mdm .is-podcast .article-list-card__top-bar::after {
      content: "";
      content: "" / "Podcast";
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--light-blue) url("../images/play_btn.svg") no-repeat 55% center;
      background-size: 11px 13px;
    }
  }

/* Featured slot. Markup is naworg_mdm_archive_featured()
   (class.mdm-archives.php): a band wrapping a label and the mdm-featured-card
   element. The band carries the tint; the card inside paints none, because two
   stacked tints made the edges look doubled. */
  .mdm .mdm-featured { padding: 3rem 0; background-color: var(--haze); }
  .mdm .mdm-featured.is-premium { background-color: var(--lighter-yellow); }

/* The label is PHP markup outside the element, so it has to be told the card's
   own measure: 20px in on a desktop, 16px on a phone. */
  .mdm .mdm-featured__label {
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 0 1.5rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--midnight);
  }

  @media (max-width: 767px) {
    .mdm .mdm-featured__label { padding-left: 16px; padding-right: 16px; }
  }

/* The shared loop-item treatment is built for the horizontal listing row. Here
   the band already carries the tint, and the padlock would land on the top
   corner of a half-width photograph. Both off; the badge is re-hung on the text
   column below. The related row does the same thing further down. */
  .mdm .mdm-featured__card.is-premium { background-color: transparent; }
  .mdm .mdm-featured__card.is-premium::after { content: none; }

  @media (max-width: 767px) {
    .mdm .gb-looper .mdm-featured__card { row-gap: 0; }
  }

/* Positioned against the text column rather than the card, so that when the
   card stacks on a phone the badge stays beside the eyebrow instead of landing
   on the photograph. The body block sets position:relative. */
  .mdm .mdm-featured__card.is-premium .mdm-featured__body::after {
    position: absolute;
    top: 0;
    right: 0;
  }

/* right:0 resolves against the padding box. On a phone the card runs full-bleed
   and the badge would touch the screen edge. */
  @media (max-width: 767px) {
    .mdm .mdm-featured__card.is-premium .mdm-featured__body::after { right: 16px; }
  }


/* The card is held to the height of its image, and the excerpt is the one thing
   that can run long. Left alone on a phone, where the card is stacked. */
  .mdm .mdm-featured__excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }

  @media (max-width: 767px) {
    .mdm .mdm-featured__excerpt { -webkit-line-clamp: none; }
  }

/* Space under whatever the article ends with. Scoped to the article rather than
   `.mdm .content`, which every MDM page shares. */
  .mdm.single-post_mdm .content { padding-bottom: 4.5rem; }

  .mdm.single-podcasts .content { padding-bottom: 4.5rem; }

/* Not on a locked article, where the last thing in .content is the full-bleed
   paywall panel and the padding put a white band between two navies. */
  .mdm.mdm-article-premium:not(.mdm-premium-unlocked) .content { padding-bottom: 0; }

/* base.css:72 gives #container a 5px shadow, which draws a grey seam down both
   sides of every full-bleed band on these pages. */
  .mdm #container { box-shadow: none; }

/* ---------------------------------------------------------------------------
   Article header band — the `mdm-article-header` Element
   --------------------------------------------------------------------------- */

/* Conditional on premium, which no block control can ask.
   naworg_mdm_article_body_class() answers it on <body>. Everything
   unconditional is in the block. */
  .mdm.mdm-article-premium .mdm-article__band { background-color: var(--lighter-yellow); }

  .mdm .mdm-article__band h1 { margin-top: 0; }

  .mdm .mdm-article__eyebrow {
    margin: 0 0 1rem;
    padding-right: 2rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--midnight);
  }

/* Padlock anchored to the content box rather than the eyebrow: 561 articles
   resolve to no eyebrow term, and the shortcode then prints nothing at all, so
   the title moves up and the badge follows without a rule saying so.

   The eyebrow keeps its right pad either way — topic names reach the right edge
   of the measure at phone width, and paying 2rem on every article is cheaper
   than a second conditional rule. */
  .mdm .mdm-article__band-inner { position: relative; }

  .mdm.mdm-article-premium .mdm-article__band-inner::after {
    position: absolute;
    top: 0;
    right: 20px;
  }

/* The deck on the podcast header. [naw_excerpt] returns a bare paragraph;
   wrapping it in a container to hold the spacing would leave that container,
   and its margin, on the 113 episodes with no excerpt. */
  .mdm .content > .mdm-deck {
    /* Shouts because mdm.css:15 zeroes the top margin of every direct child of
       .content with !important. Ties at three selectors, wins on source order. */
    margin-top: 1rem !important;
    margin-bottom: 1.5rem;
    /* The deck carried no type rules at all and was inheriting the global
       `* { line-height: 150% }` at base.css:11. Measured off podcastDetail_01.png:
       the deck's capital M is 12px tall, which is 17px Averta (cap ratio .71 --
       the size it already renders at), and its lines sit 29.7px apart, so the
       comp's leading is 1.75 rather than 1.5. Unitless, so the ratio survives a
       size change; see the hero h1 for why a pixel value does not.

       margin-bottom pairs with the 1rem the date row already carries, which puts
       the deck's last baseline 62px above the date's against the comp's 64. The
       residual is the comp drawing that row at 17px where the build uses 14 --
       the meta row's business, not the deck's. */
    line-height: 1.75;
  }

/* The date/share row. Both the article and podcast headers use it and mdm.js
   keys the sticky rail off it, so the class is not named for either. */
  .mdm .mdm-meta {
    font-size: .875rem;
    color: var(--grey);
  }

/* 25% of articles have no featured image, and GenerateBlocks renders its Image
   block whatever the tag returns — `<img src="">`, drawn as a broken image.
   :has() rather than a PHP branch, because the markup is an Element the client
   edits. */
  .mdm .mdm-article__hero:has(img[src=""]) { display: none; }

/* An inline image sits on the text baseline, leaving white under it. */
  .mdm .mdm-article__hero img { display: block; }

  .mdm .mdm-article__caption {
    margin: .75rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--grey);
  }

/* ---------------------------------------------------------------------------
   Sticky share rail

   The same [naw_share] row as the inline one, fixed to the viewport edge and
   revealed by mdm.js once the inline row scrolls out of sight — the two are
   never on screen together. Hidden by default so a visitor with no JavaScript
   gets the inline row rather than a rail pinned over the page.

   visibility as well as opacity, so the hidden rail cannot take a click.
   --------------------------------------------------------------------------- */
  .mdm .mdm-share-rail {
    position: fixed;
    top: 50%;
    left: 0;
    z-index: 5;
    transform: translateY(-50%);
    padding: .75rem .5rem;
    background-color: #fff;
    border: 1px solid var(--mdm-grey);
    border-left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
  }

  .mdm .mdm-share-rail.is-visible {
    opacity: 1;
    visibility: visible;
  }

/* Both share rows: 24px icons and a gap that is actually the gap. [naw_share]
   is shared with naw.org, where theme.css:792 spaces it with 8px of padding per
   anchor and a -8px pull on the wrapper, so the measured distance between icons
   is the sum of two paddings. Dropped for a real gap, which is the number in
   the comps. */
  .mdm .mdm-meta .share__inner,
  .mdm .mdm-distributor-hero__share .share__inner,
  .mdm .mdm-report-share .share__inner,
  .mdm .mdm-share-rail__links {
    display: flex;
    margin-left: 0;
  }

  .mdm .mdm-meta .share__inner,
  .mdm .mdm-distributor-hero__share .share__inner,
  .mdm .mdm-report-share .share__inner { column-gap: 20px; }

  .mdm .mdm-share-rail__links {
    flex-direction: column;
    row-gap: 28px;
  }

/* The anchors are flex containers so their boxes hug the icon. As blocks they
   inherit a line box taller than the glyph, and a 28px gap measured 32. */
  .mdm .mdm-meta .share__inner a,
  .mdm .mdm-distributor-hero__share .share__inner a,
  .mdm .mdm-report-share .share__inner a,
  .mdm .mdm-share-rail__links a {
    display: flex;
    padding: 0;
  }

  .mdm .mdm-meta .share__inner .icon,
  .mdm .mdm-distributor-hero__share .share__inner .icon,
  .mdm .mdm-report-share .share__inner .icon,
  .mdm .mdm-share-rail__links .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 24px;
    line-height: 1;
  }

/* Inherits from the band, which the element paints navy. The article rows sit
   on white and take the theme's own link colour. */
  .mdm .mdm-distributor-hero__share .share__inner a,
  .mdm .mdm-distributor-hero__share .share__inner a:hover {
    color: #ffffff;
  }

/* Phones get the inline row only — no viewport edge to spare. */
  @media (max-width: 767px) {
    .mdm .mdm-share-rail { display: none; }
  }

/* ---------------------------------------------------------------------------
   In-article table of contents

   naworg_mdm_article_prepend_toc() prepends it when an article has three or
   more headings at its shallowest level. Plain jump links, no sticky
   behaviour; html already carries scroll-behavior:smooth.
   --------------------------------------------------------------------------- */
  .mdm .content > .mdm-toc {
    /* Same box as the featured image and the copy: .content > * is a 760px box
       with 20px of lateral padding. calc() reproduces that relationship rather
       than restating 720px, so the tint tracks the copy at every width.
       margin-top shouts for the reason given at mdm.css:15. */
    width: calc( 100% - 40px );
    max-width: 720px;
    margin: 2rem auto 2.5rem !important;
    padding: 2rem;
    background-color: var(--haze);
  }
  .mdm .mdm-toc__label {
    margin: 0 0 1rem;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--grey);
  }
  .mdm .mdm-toc__list { margin: 0; padding: 0; list-style: none; }
  .mdm .mdm-toc__item { margin: 0; }
  .mdm .mdm-toc__item + .mdm-toc__item { border-top: 1px solid var(--mdm-grey); }
  .mdm .mdm-toc__link { display: block; padding: .75rem 0; color: var(--blue); text-decoration: none; }
  .mdm .mdm-toc__link:hover,
  .mdm .mdm-toc__link:focus { color: var(--midnight); text-decoration: underline; }

/* Phone: more air above, less inside. The lateral value is in pixels because
   the root font size drops to 14px here and a rem-based 16 would come up short. */
  @media (max-width: 767px) {
    .mdm .content > .mdm-toc {
      margin-top: 4rem !important;
      padding: 1.5rem 16px;
    }
  }

/* ---------------------------------------------------------------------------
   Related articles — the `mdm-article-related` Element

   Everything about the cards is block settings apart from the premium
   treatment. The one-column phone layout is in the Looper's own device toggle.
   --------------------------------------------------------------------------- */

/* These cards lead with a thumbnail, so the shared loop-item padlock would land
   on the image, and the comps show them white rather than tinted. Both off, and
   the badge is re-hung on the card body level with the eyebrow. */
  .mdm .mdm-related .gb-loop-item.is-premium { background-color: transparent; }
  .mdm .mdm-related .gb-loop-item.is-premium::after { content: none; }

  .mdm .mdm-related .gb-loop-item.is-premium .mdm-related__body { position: relative; }

  .mdm .mdm-related .gb-loop-item.is-premium .mdm-related__body::after {
    position: absolute;
    top: 0;
    right: 0;
  }

/* ---------------------------------------------------------------------------
   Tag pills

   [naw_terms] (class.shortcodes.php) exists because no block gives one
   styleable element per term. The list resets its own padding and bullets:
   base.css:52 only reaches a direct child of .content, and inside an Element
   the list is nested deeper.
   --------------------------------------------------------------------------- */
  .mdm .mdm-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mdm .mdm-tags__item { margin: 0; }
  .mdm .mdm-tags__pill {
    display: inline-block;
    padding: .4rem 1rem;
    border: 1px solid var(--orange);
    border-radius: 999px;
    color: var(--midnight);
    font-size: .875rem;
    line-height: 1.4;
    text-decoration: none;
  }
  .mdm a.mdm-tags__pill:hover,
  .mdm a.mdm-tags__pill:focus { background-color: var(--light-yellow); }

/* The "Tags:" label shares a flex row with the pill list, so its paragraph
   margins come off and the row's gap does the spacing. */
  .mdm .mdm-article__tags-label {
    margin: 0;
    font-weight: 700;
    color: var(--midnight);
  }

/* ---------------------------------------------------------------------------
   Locked-article teaser — naworg_mdm_article_teaser()

   No fade: the paywall panel below casts a shadow upwards instead, which is a
   box-shadow in that panel's own block settings. Lists need their own indent,
   since base.css only pads a list that is a direct child of .content.
   --------------------------------------------------------------------------- */
  .mdm .mdm-teaser { position: relative; }
  .mdm .mdm-teaser > *:first-child { margin-top: 0; }
  .mdm .mdm-teaser ul,
  .mdm .mdm-teaser ol { padding-left: 1.5rem; list-style-position: outside; }

/* ---------------------------------------------------------------------------
   Podcast sponsor and guests panel

   Markup is the "MDM Podcast Sponsor and Guests" unsynced pattern. Everything
   visual is in the blocks' own styles. Here is only what they cannot say:
   which parts to drop when a slot was never filled, and a layout that answers
   how many survived.

   Every hook is a className the pattern carries, never a gb-element-* class —
   GenerateBlocks reassigns uniqueIds when a pattern is inserted twice into the
   same post.

   Every test is [src]:not([src=""]) rather than [src]: the sponsor logo is a
   dynamic tag, so an episode with no sponsor carries src="" rather than no
   attribute, and [src] alone matches that. Get it wrong and nothing hides.
   --------------------------------------------------------------------------- */

/* A guest slot with no photo. */
  .mdm .mdm-panel__guest:not(:has(.mdm-panel__guest-photo[src]:not([src=""]))) { display: none; }

/* No photo in any slot: the heading has nothing left to introduce. */
  .mdm .mdm-panel__guests:not(:has(.mdm-panel__guest-photo[src]:not([src=""]))) { display: none; }

/* No sponsor logo. The label alone says nothing. */
  .mdm .mdm-panel__sponsor:not(:has(.mdm-panel__sponsor-logo[src]:not([src=""]))) { display: none; }

/* Neither half filled: the wrapper goes too, taking its 3rem of padding rather
   than leaving a gap. This is what lets an unpopulated episode carry the block
   harmlessly. */
  .mdm .mdm-panel-wrap:not(:has(img[src]:not([src=""]))) { display: none; }

/* With no sponsor row there is nothing for the heading's rule to separate. */
  .mdm .mdm-panel:not(:has(.mdm-panel__sponsor-logo[src]:not([src=""]))) .mdm-panel__guests-title {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

/* Below 768px the slots stack, and the axis has to stay horizontal to do it.
   The slots carry flex-basis:0 with flex-grow:1; flipped to column those same
   values apply to height, and a 120px slot held 347px of content. So the row
   stays a row and each slot takes a full line by wrapping. */
  @media (max-width: 767px) {
    .mdm .mdm-panel__guests-grid { flex-direction: row; }
    .mdm .mdm-panel__guest { flex-basis: 100%; }
  }

/* A lone guest turns side-on. The slot asks its own width rather than counting
   siblings, so one guest in the third slot behaves like one in the first. A
   single slot gets the full 640px column and three get 200px each; 420 sits
   between those. */
  .mdm .mdm-panel__guest { container-type: inline-size; }

  @container (min-width: 420px) {
    .mdm .mdm-panel__guest-inner {
      display: grid;
      grid-template-columns: 200px 1fr;
      column-gap: 2rem;
      align-items: center;
    }

    .mdm .mdm-panel__guest-photo { margin-bottom: 0; }
  }

/* ---------------------------------------------------------------------------
   Podcast detail — the native audio player

   The Libsyn embed already lines up; only [audio] needs this. MediaElement's
   stylesheet sets max-width:100% and its script then writes an inline
   `width: <viewport>px`, which is what the !important answers — an inline
   style, not another stylesheet. Shortcode output, so it never exists in the
   editor and cannot be a block style.

   The player paints its own dark bar, so it wants the 720px column rather than
   the 760px box around it. Same calc() idiom as the table of contents.
   --------------------------------------------------------------------------- */
  .mdm .content .wp-audio-shortcode { width: 100% !important; }
  .mdm .content > .wp-audio-shortcode {
    width: calc( 100% - 40px ) !important;
    max-width: 720px;
    margin-top: 1.25rem !important;
    padding-left: 0;
    padding-right: 0;
  }

/* Air between the player and the body copy. Matching `p` on purpose: an episode
   with an empty body has the sponsor panel or host card there instead, and
   those bring their own padding. Both players are covered. */
  .mdm .content > .wp-audio-shortcode + p,
  .mdm .content > .podcast__player + p {
    margin-top: 4.5rem !important;
  }

/* ---------------------------------------------------------------------------
   Content Library facets
   --------------------------------------------------------------------------- */
  .mdm .content-library__facets input,
  .mdm .content-library__facets .wpgb-select {
    background-color: white;
  }

  .mdm .content-library__facets .wpgb-reset {
    background-color: transparent;
    border-radius: 0;
    color: var(--blue);
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 0;
    padding: 0;
  }

  .mdm .wpgb-facet > fieldset:last-child {
    margin-bottom: 0;
  }

/* ---------------------------------------------------------------------------
   The whitepaper sidebar's Gravity Form

   Nearly all of this form's appearance comes from the settings
   [naw_whitepaper_form] passes (naworg_whitepaper_form_style_settings()).
   Order of resort: the form editor, then that array, then here.

   --gf-form-gap-y is moved rather than row-gap overridden, so the framework
   keeps computing the spacing. It ships at (0,1,0), so two classes beat it
   without !important.
   --------------------------------------------------------------------------- */
  .mdm-sidebar .gform_wrapper {
    --gf-form-gap-y: 1rem;
  }

/* ---------------------------------------------------------------------------
   Top Distributors

   Hand-rolled PHP markup (top_distributors-single.php and the
   distributor_category archive), so none of it has a block to live on. Moved
   here from theme.css on 2026-09-21; authored by Alex McCracken, 2026-07.
   --------------------------------------------------------------------------- */

/* Spacing for the sector listing, which is PHP output from
   templates/taxonomies/distributor_category.php and so has no block. The
   table inside it is the `mdm-sector-table` element and styles itself. */
.mdm .distributor-sector-list {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

/* One container for every band on the company profile.

   `.gbp-section__inner` is the GenerateBlocks global class the MDM blocks and
   the hero element already use, and it owns the width —
   `var(--gb-container-width)`, 1200px, one number editable in the admin. This
   owns only the gutter, so the two never restate each other: a global style is
   one class, and `.mdm .distributor-inset` is two, which would win silently and
   make editing the global appear to do nothing.

   Before 2026-09-22 this page carried three widths. The bands were
   `.wrapper--wide` (1440), while the info bar and both tables sat inside
   `.content`, whose direct children base.css caps at **760** — a prose box
   around data that is not prose. `.distributor-detail` replaced it. */
.mdm .distributor-inset {
  padding-left: 16px;
  padding-right: 16px;
}

/* Section rhythm: 120px above every section heading, per the comps.

   It is one custom property because it is one decision. Where a tinted band
   begins between two sections the 120 is split across the boundary — margin
   outside the band, padding inside it — so the tint does not start flush
   against the table above it, and the heading still lands 120px down.

   These margins only work now that the sections are out of `.content`: the
   rule at the top of this file zeroes `margin-top` on every direct child of
   `.content` under `.mdm`, which is why the gap between a table and the next
   heading used to measure exactly 0. */
.mdm {
  --distributor-section-gap: 7.5rem;
}

/* Phones take about half. Note the root font size drops to 14px at this width,
   so the rem here is not the rem above — 3.5rem is 49px, not 56. */
@media screen and (max-width: 767px) {
  .mdm {
    --distributor-section-gap: 3.5rem;
  }
}

.mdm .distributor-rankings {
  padding-top: var(--distributor-section-gap);
  padding-bottom: 0;
}

.mdm .distributor-detail__inner > h3 {
  margin-top: var(--distributor-section-gap);
  margin-bottom: 1.5rem;
}

.mdm .distributor-detail {
  padding-bottom: 0;
}

/* Tinted, so its share of the gap is a margin and the rest is padding — a
   third outside the tint, two thirds inside, derived from the token rather
   than restated, or the two halves scale by different amounts. */
.mdm .distributor-competitors {
  background-color: #F6F6F6;
  margin-top: calc(var(--distributor-section-gap) / 3);
  padding-top: calc(var(--distributor-section-gap) / 3 * 2);
  padding-bottom: calc(var(--distributor-section-gap) / 3 * 2);
}

/* Untinted, so it takes the whole gap as padding. */
.mdm .distributor-mdm-coverage {
  padding-top: var(--distributor-section-gap);
  padding-bottom: calc(var(--distributor-section-gap) / 3 * 2);
}

/* Unless Sector Peers is directly above it, in which case that band's own
   bottom padding is already the inside half of the gap and this only owes the
   rest — otherwise the two stack and the heading lands 200px down. Sector
   Peers is absent on 126 of 227 profiles, so both cases are ordinary. */
.mdm .distributor-competitors + .distributor-mdm-coverage {
  padding-top: calc(var(--distributor-section-gap) / 3);
}

.mdm .distributor-mdm-coverage h3 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Shared by the rank-history and financial tables. Each table's own class sets
   only its column widths. */
.mdm .naw-data-table__header,
.mdm .naw-data-table__row {
  display: flex;
}
.mdm .naw-data-table__header > div,
.mdm .naw-data-table__row > div {
  box-sizing: border-box;
  padding: 0.75em 1em;
}
.mdm .naw-data-table__header {
  background-color: #1D2C44;
  color: #ffffff;
  font-weight: 700;
}
.mdm .naw-data-table__row {
  border-bottom: 1px solid #E1E4E8;
}
.mdm .naw-data-table__row:nth-of-type(even) {
  background-color: #F6F6F6;
}

.mdm .distributor-history-table__header > div,
.mdm .distributor-history-table__row > div {
  width: 14%;
}
.mdm .distributor-history-table__header > div:first-child,
.mdm .distributor-history-table__row > div:first-child {
  width: 30%;
  font-weight: 700;
}
.mdm .distributor-history-table__row a {
  color: inherit;
}
.mdm .distributor-history-table__row a:hover {
  color: inherit;
}

.mdm .distributor-financial-table__header > div,
.mdm .distributor-financial-table__row > div {
  width: 33.333%;
}
.mdm .distributor-financial-table__header > div:first-child,
.mdm .distributor-financial-table__row > div:first-child {
  font-weight: 700;
}

.mdm .distributor-info-bar {
  display: flex;
  background-color: #1D2C44;
  margin-top: 2em;
}
.mdm .distributor-info-bar__item {
  flex: 1;
  box-sizing: border-box;
  padding: 1.25em 1.5em;
}
.mdm .distributor-info-bar__value {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.1em;
  margin-bottom: 0.25em;
}
.mdm .distributor-info-bar__label {
  display: block;
  color: #ffffff;
  opacity: 0.75;
  font-size: 0.9em;
}

/* The distributor profile band is the `mdm-distributor-hero` element, so its
   colour, spacing and layout live on the blocks. What is left here is the one
   part that has no block: [naw_share] is shortcode output, and is styled with
   the article header's share row above. The `.distributor-banner` rules this
   replaces were removed on 2026-09-22 with the markup that carried them. */



/* Deliberately not Swiper's own .swiper class: site.js runs a generic
   `new Swiper('.swiper')` on every page that would re-initialise this element
   and stomp its breakpoints. Replicates .swiper{}'s baseline rule. */
.mdm .distributorRankingsSwiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.mdm .distributor-rankings__heading {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  margin-bottom: 1.5em;
}
.mdm .distributor-rankings__heading h3 {
  margin: 0;
  color: #1D2C44;
}
.mdm .distributor-rankings__subtitle {
  color: #767676;
}
.mdm .distributor-ranking-card {
  box-sizing: border-box;
  background-color: #F6F6F6;
  padding: 1.5em;
  height: auto;
}
.mdm .distributor-ranking-card__label {
  display: block;
  color: #1D2C44;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: 1.5em;
}
.mdm .distributor-ranking-card__label a,
.mdm .distributor-ranking-card__label a:hover {
  color: inherit;
}
.mdm .distributor-ranking-card__rank {
  display: block;
  color: #1B4F90;
  font-weight: 900;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}
.mdm .distributor-ranking-card__change {
  display: block;
  color: #767676;
}
.mdm .distributor-rankings__nav {
  display: flex;
  justify-content: flex-end;
  gap: 0.75em;
  margin-top: 1.5em;
}
.mdm .distributor-rankings .swiper-button-prev,
.mdm .distributor-rankings .swiper-button-next {
  position: static;
  margin: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1D2C44;
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 16px;
}

/* watchOverflow disables rather than removes the buttons when every slide
   already fits; hide them outright instead of Swiper's dimmed look. */
.mdm .distributor-rankings .swiper-button-disabled {
  display: none !important;
}

.mdm .distributor-competitors__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.5em;
}
.mdm .distributor-competitors__heading h3 {
  margin: 0;
  color: #1D2C44;
}
.mdm .distributor-competitors__view-all,
.mdm .distributor-competitors__view-all:hover {
  color: #1B4F90;
  font-weight: 700;
  white-space: nowrap;
}
.mdm .distributor-competitors__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
}
@media screen and (max-width: 767px) {
  .mdm .distributor-competitors__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 479px) {
  .mdm .distributor-competitors__cards {
    grid-template-columns: 1fr;
  }
}
.mdm .distributor-competitor-card {
  box-sizing: border-box;
  background-color: #ffffff;
  border: 1px solid #E1E4E8;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.mdm .distributor-competitor-card--current {
  background-color: #FDF0DC;
  border-color: #FAA41A;
}
.mdm .distributor-competitor-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mdm .distributor-competitor-card__rank {
  color: #1B4F90;
  font-weight: 900;
  font-size: 1.75em;
}
.mdm .distributor-competitor-card__badge {
  background-color: #FAA41A;
  color: #1D2C44;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.03em;
  padding: 0.3em 0.9em;
  border-radius: 999px;
}
.mdm .distributor-competitor-card__name,
.mdm .distributor-competitor-card__name:hover {
  color: #1D2C44;
  font-weight: 700;
}
.mdm .distributor-competitor-card__revenue,
.mdm .distributor-competitor-card__change {
  color: #555555;
}

/* Section tabs are plain in-page anchors; the active tab is a fixed visual and
   does not track scroll. Smooth scrolling is what makes clicking one glide. */
html:has( body.mdm ) {
  scroll-behavior: smooth;
}
.mdm .distributor-tabs {
  padding-top: 2em;
  border-bottom: 1px solid #E1E4E8;
}
.mdm .distributor-tabs__inner {
  display: flex;
  align-items: stretch;
}
.mdm .distributor-tabs__tab {
  display: flex;
  align-items: center;
  padding: 1.25em 1.75em;
  color: #1D2C44;
  font-weight: 700;
}
.mdm .distributor-tabs__tab:hover {
  color: #1D2C44;
}
.mdm .distributor-tabs__tab--active,
.mdm .distributor-tabs__tab--active:hover {
  background-color: #1D2C44;
  color: #ffffff;
}

/* Nothing emits this class today -- the template writes only the base class and
   --active (top_distributors-single.php:134). Kept for the state the design
   calls for, so a tab for a section with no data can be rendered inert without
   a stylesheet change. */
.mdm .distributor-tabs__tab--disabled {
  color: #767676;
  font-weight: 400;
  cursor: default;
}

/* The same sections as a disclosure, below 768. Both controls are in the
   markup on every profile and point at the same anchors; this is the only
   thing that decides which one a reader gets. The row is not merely cramped
   at that width -- it is 527px of tabs inside #main, which is
   `overflow: hidden` (base.css:73), so the last two are unreachable. */
.mdm .distributor-nav {
  display: none;
  position: relative;
}

@media screen and (max-width: 767px) {
  .mdm .distributor-tabs {
    border-bottom: 0;
  }
  .mdm .distributor-tabs__inner {
    display: none;
  }
  .mdm .distributor-nav {
    display: block;
  }
}

.mdm .distributor-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  box-sizing: border-box;
  padding: 1em 1.25em;
  background-color: #ffffff;
  border: 1px solid #E1E4E8;
  border-radius: 0;
  color: #1D2C44;
  font-weight: 700;
  font-size: 1.05em;
  text-align: left;
  cursor: pointer;
}

.mdm .distributor-nav__chevron {
  transition: transform 0.15s ease;
}

.mdm .distributor-nav__toggle[aria-expanded="true"] .distributor-nav__chevron {
  transform: rotate(180deg);
}

/* Floating rather than in-flow: the panel is taller than the band it opens
   from, and pushing the page down moves the very sections it is there to
   reach. */
.mdm .distributor-nav__list {
  position: absolute;
  left: 16px;
  right: 16px;
  z-index: 10;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #E1E4E8;
  border-top: 0;
  box-shadow: 0 8px 24px rgba(29, 44, 68, 0.12);
}

.mdm .distributor-nav__list li {
  margin: 0;
}

.mdm .distributor-nav__item,
.mdm .distributor-nav__item:hover {
  display: block;
  padding: 1em 1.25em;
  color: #1D2C44;
  font-weight: 700;
  border-bottom: 1px solid #E1E4E8;
}

.mdm .distributor-nav__list li:last-child .distributor-nav__item {
  border-bottom: 0;
}

.mdm .distributor-nav__item--active,
.mdm .distributor-nav__item--active:hover {
  background-color: #1B4F90;
  color: #ffffff;
}

/* The sector directory, Prior Year Rankings and Editor's Analysis are styled
   entirely on their blocks. This is the one property with no panel control:
   the rows lay out with column-count, and a flex row is breakable by default. */
  .mdm .mdm-sector-list__row {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }

/* ---------------------------------------------------------------------------
   Top Distributors gate — the fade above the panel

   The gate withholds server-side: a locked page never renders the sections
   below the cut, so there is nothing here clipping hidden content. What is
   left is the last section that *did* render, ending abruptly against the
   panel, and the comps soften that edge.

   A gradient overlay rather than a mask on the element itself. A mask would
   make the final rows genuinely unreadable, and those rows are real content
   the visitor is allowed to see -- this only has to suggest that more follows.
   pointer-events stays off it so a link under the gradient is still a link.

   Fades to --white because every band this sits under is on the page
   background; a section with its own tint needs its own rule rather than this
   one.
   --------------------------------------------------------------------------- */
  .mdm .mdm-gate-fade { position: relative; }
  .mdm .mdm-gate-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 160px;
    pointer-events: none;
    background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), var( --white ) );
  }

/* The panel carries its own navy, orange rule and upward shadow in the
   element's block settings. The only thing the block editor cannot reach is
   Gravity Forms' own stylesheet, which ships its row gap at (0,1,0) from the
   plugin -- two classes beat it without !important, the same trick the
   whitepaper sidebar uses. */
  .mdm .mdm-gate-panel .gform_wrapper { --gf-form-gap-y: 1rem; }

/* Case studies: the listing card's date reads "Release Date: Jun 10, 2026".
   The card cannot express it — WP Grid Builder's date block takes a PHP date
   format and no prefix, and only its Custom Field block has meta_prefix. The
   alternative was escaping the words into the format string itself
   (\R\e\l\e\a\s\e ...), which renders real text but hides the label in a
   setting nobody would look in, and puts backslashes through every future
   scripted write of that card.

   So it is generated content, which is the split the rest of this file already
   uses: the card owns type, colour and spacing (14px/24px #838383, set on the
   block), mdm.css owns the pseudo-element. Screen readers announce ::before
   content, and with CSS gone the date still reads as a date. */
  .mdm .case-study-card__date::before,
  .mdm .mdm-report-date::before { content: "Release Date: "; }

/* ---------------------------------------------------------------------------
   Podcast host card

   Markup is the `mdm-podcast-host` element, a Query block whose post__in
   carries NAWORG_MDM_PODCAST_HOST_QUERY_SENTINEL. Everything visual lives in
   the blocks' own styles, matching the sponsor-and-guests panel directly above
   it. Here is only what a block cannot say.

   Its classes are mdm-host*, deliberately not the mdm-panel* set the guests
   panel uses, even though the two look alike. Borrowing .mdm-panel-wrap would
   have inherited its `:not(:has(img[src]...))` hide rule, and with no avatar on
   any team_member that rule is true on every episode -- the card would have
   vanished the moment it worked.

   Nothing hides the component itself: the Looper is empty on an episode with
   no host, and the "Podcast Host" headline sits inside it, so the whole thing
   disappears together. That is why there is no rule for the empty case.
   --------------------------------------------------------------------------- */

/* No avatar needs no rule here, and that is worth writing down because it looks
   like an omission. GenerateBlocks drops a media block whose dynamic source
   resolves to nothing rather than emitting <img src="">, so there is no element
   left to hide, and with one flex child there is no column-gap to collapse
   either.

   Corrected 2026-09-30: this said "0 of 38 team_member posts carry a featured
   image, so the empty case is the normal one". It is now 34 of 38. The photos
   were always there, inside each body's core/media-text block as a mediaId
   pointing at a local attachment, and were promoted to featured images -- see
   docs/mdm-frontend/tier-3-db-changes.md. The four without one anywhere are
   Basil Zaff, Lindsay M. Clark, Chris Rauch and George Keeley, so the empty
   case is now the exception rather than the rule. The rule above still stands;
   only the reason for writing it down has changed.

   This is the opposite of the sponsor-and-guests panel above, whose photos are
   real <img> tags with hardcoded sources -- those need the
   [src]:not([src=""]) tests. Do not copy that pattern down here; it would
   never match. */

/* Phone: the row stacks. Here rather than on the block's own device toggle
   because the toggle writes GenerateBlocks' 767px into the saved markup, and a
   scripted change to this element would have to reproduce it by hand. The
   block sets display:flex and never sets a direction, so this adds rather than
   overrides — and .mdm .mdm-host is two classes against the block's one, so it
   wins on weight and does not depend on source order. */
  @media (max-width: 767px) {
    .mdm .mdm-host,
    .mdm .mdm-author { flex-direction: column; row-gap: 1.5rem; }
  }

/* ---------------------------------------------------------------------------
   The hero band overlay

   These bands are a photograph with a colour wash over it. GenerateBlocks
   compiled that as two backgrounds of one box -- a translucent
   background-color blended into the background-image with
   background-blend-mode -- which is correct while there is an image and wrong
   the moment there is not. With one layer there is nothing to blend, and the
   wash paints straight onto the page: rgba(30,45,69,.85) over white, a washed
   out navy rather than the navy.

   Moving the wash onto a pseudo-element separates the two. The band itself
   carries a solid colour and the photograph; ::after carries the wash and can
   be switched off on its own, which is what .mdm-hero-band-flat does when the
   cascade in class.mdm-hero.php resolved no image at all.

   Three details this needs to be right:

   - mix-blend-mode, not background-blend-mode. The latter blends two
     backgrounds of the same box, and the wash is no longer one of them.
   - isolation: isolate. Without it mix-blend-mode reaches past the band and
     blends with whatever is painted behind it.
   - the z-index pair. An inset:0 pseudo-element paints above in-flow content,
     and these bands hold the h1 and, on a whitepaper, the cover art. The
     children are position:static in the block markup, so they need lifting.

   --mdm-hero-overlay is the hook for a band that is not navy. The Premium page
   wants orange and the Free Daily Update page a white wash; both set it in
   their own block and inherit everything else here. --mdm-hero-blend exists
   for a band that one day wants something other than flat compositing, and
   nothing uses it today.

   --mdm-hero-base is the colour the band falls back to with no photograph at
   all, and it has to be a property rather than a constant because these bands
   do not share a text colour. Navy is right for the two that print white on
   it. The Free Daily Update band prints navy text, so the same fallback made
   its heading navy-on-navy and it disappeared completely -- caught on pr-235
   by clearing the default and reloading, which is a test worth repeating after
   any change here.

   There is no blend mode, and that is the design rather than a simplification.
   The comps specify each band as a flat colour layer over the photograph --

       background: linear-gradient(0deg, rgba(29,44,68,.85) 0%,
                                         rgba(29,44,68,.85) 100%),
                   url(…) 50% / cover no-repeat;

   -- which is an 85% wash composited normally, nothing more. The `darken` and
   `overlay` modes that were in the block markup appear nowhere in the comps;
   reproducing them faithfully is what made the Subscribe band look washed out
   on pr-235, because the question was never which blend mode to use.

   Nothing carries .mdm-hero-band yet -- the class goes on the six bands in the
   admin, and until it does this rule set matches nothing. */

  .mdm .mdm-hero-band {
    position: relative;
    isolation: isolate;
    background-color: var(--mdm-hero-base, var(--midnight));
    background-blend-mode: normal;
  }

  .mdm .mdm-hero-band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--mdm-hero-overlay, rgba(29, 44, 68, 0.85));
    mix-blend-mode: var(--mdm-hero-blend, normal);
  }

  .mdm .mdm-hero-band > * {
    position: relative;
    z-index: 1;
  }

/* No image anywhere in the cascade: the band is its own solid colour and the
   wash would only mute it. The class is on <body> rather than the band because
   CSS cannot ask whether a custom property resolved to nothing, and the
   obvious alternative -- a dynamic tag returning 0 or 1 -- is a trap: '0' is
   falsy in PHP and GenerateBlocks deletes a block whose tag came back falsy. */

  .mdm.mdm-hero-band-flat .mdm-hero-band::after {
    display: none;
  }

/* A whitepaper with no PDF cover. On desktop the empty cover slot stays in the
   hero grid so the title keeps its column and does not run full width. Once the
   grid is a single column that empty slot would only add a row gap under the
   title, so it drops out. GenerateBlocks removes the cover <img> when
   cover_image is empty and leaves the plain wrapper behind. */

@media (max-width: 1024px) {
  .gb-element-d621a76e > div:empty {
    display: none;
  }
}

/* NAW logo in the MDM header turns white on hover (#332).

   The link's wrapper fills with --blue on hover (set on the header element's
   block), but the logo stays the dark version, navy on blue. Swapping the
   image source for the light version matches the mockup -- white and yellow
   on the blue band. Covers the desktop and the mobile-menu copy of the link. */
  .mdm header :is(:hover, :focus-within) > a > img[src$="/logo-naw-dark.svg"],
  .mdm header a:is(:hover, :focus) > img[src$="/logo-naw-dark.svg"] {
    content: url("../images/logo-naw-light.svg");
  }

/* Category tags at normal weight, site-wide (#334).

   .mdm-category-tag is added in class.mdm-loops.php to every Text block that
   prints {{mdm_primary_term}}; two classes outrank each block's own compiled
   .gb-text-* weight. The Grid Builder article cards render the same eyebrow
   as their second block and are matched by its position in the top bar. */
  .mdm .mdm-category-tag,
  .mdm .wp-grid-builder .article-list-card__top-bar .wpgb-block-2 {
    font-weight: 400;
  }

/* Top Distributors gate form button (#338): full-width gold bar.

   The wrapper comes from [naw_td_gate_form] (class.mdm-td-gate.php), so this
   reaches the form on the landing page and the gate panel without naming a
   form id. Colours match .mdm-btn--primary. */
  .mdm .mdm-td-gate-form .gform_footer .gform_button {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    background-color: var(--orange);
    color: var(--midnight);
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
  }

  .mdm .mdm-td-gate-form .gform_footer .gform_button:is(:hover, :focus) {
    background-color: var(--midnight);
    color: var(--white);
  }