/* Sidebar card container – use existing block class */
.block-field-blocknodehero-pagefield-sidebar-panel .block__content {
  box-sizing: border-box;
  border: 1px dotted #d0d0d0;
  /* padding: 20px; */
  width: fit-content;
}

/* Typography base */
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body {
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* Title text */
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body strong {
  color: rgb(5, 128, 163);
  font-size: 20px;
  font-weight: 700;
  line-height: 27.2px;
  display: inline-block;
  margin-bottom: 4px;
}

/* Paragraph text */
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body p {
  color: rgb(51, 51, 51);
  font-size: 16px;
  font-weight: 300;
  line-height: 27.2px;
  margin: 0 0 24px;
  padding-left: 20px;
  max-width: 258px;
}

/* Body links (base) */
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body a {
  color: rgb(5, 128, 163);
  font-size: 16px;
  font-weight: 300;
  line-height: 27.2px;
  text-decoration: none;
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body a:hover {
  text-decoration: underline;
}

/* Image + figure */
.block-field-blocknodehero-pagefield-sidebar-panel figure {
  text-align: center;
  margin: 0 0 16px;
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-body img {
  display: inline-block;
  height: auto;
}

/* Dashed divider before Join the Movement */
.block-field-blocknodehero-pagefield-sidebar-panel .sidebar-divider {
  border: 0;
  border-top: 1px dashed #666;
  height: 1px;
  margin: 0 22px;
  width: 242px;
  overflow: hidden;
  box-sizing: border-box;
}

/* "Join the Movement" heading spacing */
.block-field-blocknodehero-pagefield-sidebar-panel .f-light strong.c-blue {
  margin-top: 20px;
  display: inline-block;
}

/* Nav wrapper spacing + line height */
.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container {
  margin-left: 20px;
  margin-right: 20px;
  line-height: 30px;
}

/* Remove bullets + reset spacing */
.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container .menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container .menu-item {
  margin-bottom: 0.35rem;
}

/* Links style to match WP for Join the Movement list */
.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container .menu-item a {
  display: inline;
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 30px;
  text-decoration: none;
}

.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container .menu-item a:hover,
.block-field-blocknodehero-pagefield-sidebar-panel .menu-join-the-movement-container .menu-item a:focus {
  text-decoration: underline;
}

/************************************************************
 * Sidebar panel – VIDEO THUMBNAIL SIZE + PSA-style play overlay
 *
 * Goal:
 * - Make thumbnail render at WP-ish width (450px) when possible
 * - WITHOUT relying on column width guesses
 * - Force wrapper chain to obey the width
 ************************************************************/

/* 1) Force the THUMB container to a fixed target width (WP was ~450px).
   It will still shrink on very narrow sidebars due to max-width: 100%. */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail {
  position: relative;
  cursor: pointer;
  overflow: hidden;

  display: block;
  width: 450px;       /* WP target */
  max-width: 100%;    /* don’t overflow on small screens */
  margin: 0 auto 16px; /* center it */
  padding: 0;
}

/* 2) Force Drupal wrapper chain to inherit that width (this is what was biting you) */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail .field__item,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail .media,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail .field--name-field-media-image,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail picture {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* 3) Image fills the 450px container */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none; /* important: defeat any theme max-width rules */
}

/* Hover overlay */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 2;
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail:hover::before {
  opacity: 1;
}

/* Dotted ring */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px dotted rgba(255,255,255,0.95);
  background: rgba(0,0,0,0.15);
  z-index: 3;
  pointer-events: none;
}

/* Play triangle (move it onto the thumbnail itself so it’s stable) */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-thumbnail .field__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-38%, -50%);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 22px solid #ffffff;
  z-index: 4;
  pointer-events: none;
}

/* Hide helper Video URL field (MP4 link) inside the sidebar panel block */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-video-url {
  display: none !important;
}

/************************************************************
 * SIDEBAR FEATURED VIDEO — CTA LINK STYLE (BOLD + ARROW)
 ************************************************************/

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a {
  box-sizing: border-box;
  color: rgb(5, 128, 163);
  cursor: pointer;
  display: inline;
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 0;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  hyphens: none;
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a::after {
  content: var(--wcyd-arrow-after); /* now " \2794" from tokens */
  font-size: 16px;
  display: inline-block;
  margin-left: var(--wcyd-arrow-gap);
  transition: margin-left var(--wcyd-transition-fast);
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a:hover,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a:focus {
  text-decoration: underline;
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a:hover::after,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-cta-link a:focus::after {
  margin-left: 10px;
}

/************************************************************
 * SIDEBAR RESOURCE — LINK STYLE (BOLD + ARROW)
 ************************************************************/

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary a,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary a {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-weight: 700;                /* bold like WP */
  text-decoration: none;
  display: inline;
}

/* Arrow */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary a::after,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary a::after {
  content: var(--wcyd-arrow-after);
  font-size: 16px;
  display: inline-block;
  margin-left: var(--wcyd-arrow-gap);
  transition: margin-left var(--wcyd-transition-fast);
}

/* Hover behavior */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary a:hover,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary a:hover {
  text-decoration: underline;
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary a:hover::after,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary a:hover::after {
  margin-left: 10px;
}

/************************************************************
 * SIDEBAR RESOURCE — FORCE STYLE THE HEADING (Resource Guide)
 * This is intentionally high-specificity + !important
 * to confirm the CSS is being applied.
 ************************************************************/

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-sidebar-panel
.field--name-field-field-heading
.field__item {
  color: rgb(5, 128, 163) !important;
  font-family: "Open Sans", Helmet, Freesans, sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  /* margin: 8px 0 6px !important; */
  display: block !important;
}

/************************************************************
 * SIDEBAR RESOURCE — HEADING (Resource Guide)
 ************************************************************/
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-panel
  .field--name-field-field-heading
  .field__item {
  color: rgb(5, 128, 163) !important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
  font-size: 20px !important;       /* WP was ~16px */
  font-style: normal !important;
  font-weight: 700 !important;
  /* display: inline !important; */       /* WP had inline heading */
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  line-height: 27.2px !important;
  margin-bottom: 10px;
}

/************************************************************
 * SIDEBAR RESOURCE — REMOVE DEFAULT FIELD BOTTOM SPACING
 ************************************************************/
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-field-heading {
  margin-block-end: 0 !important;
}

/************************************************************
 * SIDEBAR RESOURCE — DESCRIPTION PARAGRAPH (WP-like)
 ************************************************************/
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-field-description
  .field__item
  p {
  box-sizing: border-box;
  display: block;
  color: rgb(51, 51, 51) !important;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 27.2px;

  /* no hyphenation */
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;

  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/************************************************************
 * SIDEBAR PANEL — CONTEST CARD (sidebar-contest-card)
 * Targets the entity-ref block fields:
 * - field-sidebar-contest-image (media)
 * - heading
 * - contest-description
 * - contest-cta-link
 ************************************************************/

/* Card container */
.block-field-blocknodehero-pagefield-sidebar-panel .block__content {
  box-sizing: border-box;
  border: 1px dotted #d0d0d0;
  /* padding: 20px; */
  /* If you truly want it to shrink-wrap, keep fit-content; otherwise use 100% */
  width: 100%;
  max-width: 320px; /* adjust to match your sidebar column */
}

/* Optional: remove Olivero field bottom spacing inside this card */
.block-field-blocknodehero-pagefield-sidebar-panel .field {
  margin-block-end: 0.75rem;
}
.block-field-blocknodehero-pagefield-sidebar-panel .field:last-child {
  margin-block-end: 0;
}

/* --- Image (media) --- */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-contest-image {
  margin: 0 0 16px;
}

.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-contest-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* In case the theme constrains image width unexpectedly */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-contest-image .field__item,
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-contest-image .media,
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-sidebar-contest-image picture {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
}

/* --- Heading --- */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-heading
  .field__item {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 20px;     /* WP-ish card title */
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}

/* --- Description --- */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-description
  .field__item,
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-description
  .field__item p {
  color: rgb(51, 51, 51);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 27.2px;
  margin: 0;
  hyphens: none;
}

/* give the paragraph a bit of separation from heading */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-description {
  margin-bottom: 12px;
}

/* --- CTA link (bold + arrow like your other sidebars) --- */
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline;
  hyphens: none;
  /* line-height: 1rem; */
  line-height: 12px !important;
}

.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a::after {
  content: var(--wcyd-arrow-after);
  display: inline-block;
  margin-left: var(--wcyd-arrow-gap);
  transition: margin-left var(--wcyd-transition-fast);
}

.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a:hover,
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a:focus {
  text-decoration: underline;
}

.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a:hover::after,
.block-field-blocknodehero-pagefield-sidebar-panel
  .field--name-field-contest-cta-link
  a:focus::after {
  margin-left: 10px;
}

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-contest-cta-link
.field__item
a {
  display: inline-block;      /* critical */
  line-height: 1.5rem !important;
}

/* Sidebar Resource — force link line-height to obey (primary + secondary) */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary
.field__item
a,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary
.field__item
a {
  display: inline-block;      /* critical */
  line-height: 1.5rem !important;   /* pick your target */
}

/************************************************************
 * NODE 303 — SIDEBAR PANEL WIDTH + TOP ALIGN (WP-like)
 * Targets: /node/303 only
 ************************************************************/

/* 1) Make the SIDEBAR column behave like a top-aligned container */
article[data-history-node-id="303"]
  .layout--twocol-section
  .layout__region--first {
  /* If the region is flex/grid, this helps keep children at the top */
  align-content: start;
  align-items: start;
}

/* 2) Force the sidebar PANEL block to top-align and not “float low-left” */
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel {
  align-self: start;          /* important if parent is flex */
  justify-self: start;        /* important if parent is grid */
  margin-top: 0;
}

/* 3) Set the CARD width to WP-ish ~472px and keep it responsive */
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel .block__content {
  background: #fff;
  border: 1px dotted #999;    /* WP-ish (you currently use #d0d0d0) */
  box-sizing: border-box;

  width: 472px;               /* match WP */
  max-width: 100%;            /* don’t overflow on narrow layouts */
  margin: 0 24px 0 0;         /* WP had margin-right: 24px */
  padding: 20px;
}

/* 4) Remove any centering behavior that would make it sit “lower/left” */
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel .block__content,
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-video-thumbnail {
  /* your global rules include centering in places; kill it for node 303 */
  margin-left: 0 !important;
  margin-right: 24px !important;
}

/* 5) If your inner promo wrapper has unexpected margins, normalize it */
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel .wcyd-sidebar-promo {
  margin: 0;
}

/************************************************************
 * NODE 303 — FORCE LEFT REGION TOP ALIGN (override homepage.css)
 * Scope: only affects /node/303
 ************************************************************/

/* Only on node 303: neutralize the flex-column behavior that pushes content down */
article[data-history-node-id="303"]
  .layout__region.layout__region--first {
  flex-direction: row !important;   /* mirrors “turning off flex-direction: column” */
  align-items: flex-start;          /* ensure top alignment */
  justify-content: flex-start;      /* ensure start/top positioning */
  align-content: flex-start;
}

/* Ensure the sidebar block itself is not centering or self-aligning downward */
article[data-history-node-id="303"]
  .layout__region.layout__region--first
  .block-field-blocknodehero-pagefield-sidebar-panel {
  align-self: flex-start;
  margin-top: 0 !important;
}

/************************************************************
 * NODE 303 — REMOVE MAX-WIDTH ON SIDEBAR PROMO HEADLINE
 ************************************************************/

article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__headline {
  max-width: none !important;
  width: auto;
}

/* If the constraint is actually coming from a parent, kill it there too */
article[data-history-node-id="303"]
  .wcyd-sidebar-promo__body {
  max-width: none !important;
}

/* Absolute fallback — only if needed */
article[data-history-node-id="303"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  p.wcyd-sidebar-promo__headline {
  max-width: none !important;
}

/************************************************************
 * NODE 303 — SIDEBAR PROMO CTA (REMOVE MAX-WIDTH + ADD ARROW)
 ************************************************************/

/* Remove max-width constraints from CTA paragraph */
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta {
  max-width: none !important;
  width: auto;
  margin-bottom: 0;
}

/* Remove max-width constraints from CTA link */
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a {
  max-width: none !important;
  width: auto;
  display: inline-block;        /* needed for arrow spacing animation */
}

/* CTA link styling (WP-like) */
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a {
  color: rgb(5, 128, 163);
  font-family: "Open Sans", Helmet, Freesans, sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.5rem;
  -webkit-font-smoothing: antialiased;
}

/* Arrow after CTA link */
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a::after {
  content: var(--wcyd-arrow-after) !important;
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
          mask: none;
  transform: none;
}

/* Hover / focus behavior */
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a:hover,
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a:focus {
  text-decoration: underline;
}

article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a:hover::after,
article[data-history-node-id="303"]
  p.wcyd-sidebar-promo__cta a:focus::after {
  transform: translateX(var(--wcyd-arrow-shift));
}

/************************************************************
 * NODE 239 — Sidebar "Other News Sources / Media Contact"
 * - No bullets / no indent
 * - Arrow AFTER link
 * - Arrow baseline/bottom aligned (not top aligned)
 * - NO animation / NO transitions
 ************************************************************/

/* Scope tightly to node 239 sidebar panel */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Remove any default li marker/spacing */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links li {
  list-style: none;
  margin: 0 0 10px 0;   /* adjust spacing as desired */
  padding: 0;
}

/* Make the anchor baseline-aligned, not top-aligned */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links a {
  display: inline;          /* baseline behavior */
  text-decoration: none;    /* optional: keep if you want */
  font-size: 16px;
  font-weight: 700;
}

/* Arrow AFTER link text, baseline-aligned */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links a::after {
  content: var(--wcyd-arrow-after);  /* uses your token: " âž”" */
  display: inline;
  font-weight: var(--wcyd-font-weight-semibold); /* slightly bolder arrow */
  line-height: inherit;

  /* Optical baseline fix: push arrow down a touch */
  vertical-align: baseline;
  position: relative;
  top: 0.12em; /* tweak 0.08–0.16em if needed */
}

/* IMPORTANT: if your site already has an arrow via .icon-arrow::after,
   disable it in this node so you don't get double arrows. */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links a.icon-arrow::after {
  content: var(--wcyd-arrow-after);
}

/* Hide ONLY the duplicate WYSIWYG “Other News Sources” heading */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__section:first-of-type
  .wcyd-sidebar-block__heading {
  display: none !important;
}

/************************************************************
 * NODE 239 — Sidebar headings (Other News Sources + Media Contact)
 * Target: .wcyd-sidebar-block__heading
 ************************************************************/

article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__heading {
  box-sizing: border-box;
  display: block;

  /* Match the “Other News Sources” heading style you described */
  color: var(--wcyd-link); /* rgb(5, 128, 163) */
  font-family: var(--wcyd-font-sans);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--wcyd-font-weight-bold); /* 700 */
  line-height: 27.2px;
  margin: 0 0 10px 0;
  hyphens: auto;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  margin-top: 3rem;
}

article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__text {
  margin-block-start: 0;
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link,
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link .field__item,
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-video-url,
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-video-url .field__item,
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-description,
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-description .field__item {
  line-height: 1.1;
}

/* Sidebar panel "Learn More" arrow link (PSA Download Center card) */
.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link a.icon-arrow,
.block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--wcyd-arrow-gap);
  color: var(--wcyd-link);
  font-weight: var(--wcyd-font-weight-bold);
  text-decoration: none;
  transition: color var(--wcyd-transition-fast);
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link a.icon-arrow::after,
.block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow::after {
  content: "";
  display: inline-block;

  width: var(--wcyd-icon-after-size);
  height: var(--wcyd-icon-after-size);

  background-color: currentColor;
  -webkit-mask: var(--wcyd-icon-arrow-mask) no-repeat center / contain;
          mask: var(--wcyd-icon-arrow-mask) no-repeat center / contain;

  transform: translateX(0);
  transition: transform var(--wcyd-transition-fast);
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link a.icon-arrow:hover,
.block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow:hover {
  color: var(--wcyd-link-hover);
}

.block-field-blocknodehero-pagefield-sidebar-panel .field--name-field-cta-link a.icon-arrow:hover::after,
.block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow:hover::after {
  transform: translateX(var(--wcyd-arrow-shift));
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow,
  .block-field-blocknodehero-pagefield-sidebar-panel a.icon-arrow::after {
    transition: none !important;
  }
}

/* Sidebar panel title: PSA Download Center */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-body strong,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-body .c-blue {
  color: var(--wcyd-brand-blue) !important;
}

/* Arrow */
.block-field-blocknodehero-pagefield-sidebar-panel
.menu-join-the-movement-container
.menu-item > a::after {
  content: var(--wcyd-arrow-after);
  display: inline-block;
  margin-left: var(--wcyd-arrow-gap);
  transition: margin-left var(--wcyd-transition-fast);
}

/* Apply left/right padding to the content fields below the image */
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-heading,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-description,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-primary,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-field-link-secondary {
  padding-inline: 15px;
}

/************************************************************
 * SIDEBAR CONTEST CARD — INNER CONTENT PADDING (TEXT ONLY)
 * - Image remains full-width
 * - Text content is padded uniformly
 ************************************************************/

.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-heading,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-contest-description,
.block-field-blocknodehero-pagefield-sidebar-panel
.field--name-field-contest-cta-link {
  padding-inline: 15px;
}

/************************************************************
 * NODE 239 — FORCE GLYPH ARROW (override global .icon-arrow mask)
 ************************************************************/

/* Ensure node 239 links behave like normal inline text (not inline-flex) */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links a.icon-arrow {
  display: inline !important;
  align-items: initial !important;
  gap: 0 !important;
}

/* Replace the masked icon with the glyph token arrow */
article[data-history-node-id="239"]
  .block-field-blocknodehero-pagefield-sidebar-panel
  .wcyd-sidebar-block__links a.icon-arrow::after {
  /* kill the mask icon */
  -webkit-mask: none !important;
          mask: none !important;
  background: none !important;

  /* use the glyph */
  content: var(--wcyd-arrow-after) !important;

  /* reset “icon box” sizing so it renders like text */
  width: auto !important;
  height: auto !important;

  display: inline !important;
  font-size: 16px;
  font-weight: var(--wcyd-font-weight-bold);

  margin-left: var(--wcyd-arrow-gap);
  transform: none !important;
  transition: none !important;

  /* baseline tweak (optional) */
  position: relative;
  top: 0.12em;
}