/* ==================================================================
   REPORT MICROSITE
   A preserved annual-report chapter inside the V4 page shell. The
   edition stylesheet (report-microsite/<edition>.css) carries the
   report's own design, scoped to its canvas. This file isolates the
   canvas from the page: it starts from browser defaults, keeps its own
   light palette in both site themes and cannot paint over the header.

   Every canvas selector is wrapped in :is(.class, #id). The id inside
   :is() never matches anything; it only lifts the rule's specificity
   above the page's element and class styles without !important. The
   edition stylesheets use the same wrapper, so the report's own rules
   keep their original order and weight relative to each other.
   ================================================================== */

.report-microsite {
  position: relative;
}

/* EMPTY STATE */
.report-microsite__empty {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-right: 1rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
}

.report-microsite__empty h1 {
  margin: 0;
  color: var(--color-text-default);
  font-size: 32px;
}

/* Tablet Landscape Up - Min 900px */
@media (min-width: 900px) {
  .report-microsite__empty h1 {
    font-size: 48px;
  }
}

/* CANVAS */
:is(.report-microsite__canvas, #report-microsite-canvas) {
  all: initial;
  display: block;
  position: relative;
  isolation: isolate; /* the report's own z-index values stay below the page header */
  overflow-x: clip; /* some source pages are wider than the window; the page itself never scrolls sideways */
  color-scheme: light;
}

/* The report's body stand-in paints its background below everything in the
   report, as a page body does: content the report places behind its own
   layers (z-index: -1) stays above that background. */
:is(.report-microsite__canvas, #report-microsite-canvas) > .report-microsite__body {
  position: relative;
  z-index: 0;
}

/* YouTube placeholders keep the report's existing responsive frame geometry. */
:is(.report-microsite__canvas, #report-microsite-canvas) .report-microsite__video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

:is(.report-microsite__canvas, #report-microsite-canvas) .embed-responsive .report-microsite__video {
  position: absolute;
  inset: 0;
  height: 100%;
}

:is(.report-microsite__canvas, #report-microsite-canvas) .youtube-player__play {
  display: flex;
  color: var(--color-text-on-action);
  font-family: var(--font-family-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

:is(.report-microsite__canvas, #report-microsite-canvas) .youtube-player__icon {
  width: 3rem;
  height: 3rem;
  fill: currentColor;
}

:is(.report-microsite__canvas, #report-microsite-canvas) .youtube-player__icon path {
  fill: currentColor;
}

/* PAGE ELEMENT STYLES THE REPORT NEVER HAD
   Only the properties the page sets on bare elements are returned to the
   browser defaults; presentational attributes such as width, height and
   SVG fill keep working. */
:is(.report-microsite__canvas, #report-microsite-canvas) img,
:is(.report-microsite__canvas, #report-microsite-canvas) svg {
  display: revert;
  max-width: revert;
}

:is(.report-microsite__canvas, #report-microsite-canvas) h1,
:is(.report-microsite__canvas, #report-microsite-canvas) h2,
:is(.report-microsite__canvas, #report-microsite-canvas) h3,
:is(.report-microsite__canvas, #report-microsite-canvas) h4,
:is(.report-microsite__canvas, #report-microsite-canvas) h5,
:is(.report-microsite__canvas, #report-microsite-canvas) h6 {
  font-family: revert;
  letter-spacing: revert;
  line-height: revert;
}

:is(.report-microsite__canvas, #report-microsite-canvas) button,
:is(.report-microsite__canvas, #report-microsite-canvas) input,
:is(.report-microsite__canvas, #report-microsite-canvas) select,
:is(.report-microsite__canvas, #report-microsite-canvas) textarea {
  font: revert;
}

/* KEYBOARD FOCUS
   The report stylesheets remove the focus outline from their content,
   buttons and links. Keyboard focus keeps the site's focus ring; mouse and
   touch use look exactly as before. !important only overrides the legacy
   report rules (third-party CSS). */
:is(.report-microsite__canvas, #report-microsite-canvas) :focus-visible {
  outline: 3px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

:is(.report-microsite__canvas, #report-microsite-canvas) ::selection {
  background-color: revert;
  color: revert;
}

/* Anchored sections land below the sticky page header and its section bar. */
:is(.report-microsite__canvas, #report-microsite-canvas) [id] {
  scroll-margin-top: 10.5rem;
}