/**
 * Prototype-fidelity overrides for the homepage (and a few site-wide
 * surfaces). Every rule in this file is a targeted fix against an open
 * E02 issue (ISSUE-0139..0145) where `skin.css` / `proto-default.css`
 * intentionally drifted from the approved C10 lagoon prototype.
 *
 * Loaded last in the `pirt_theme/skin` library (weight 200) so it wins
 * the cascade over skin.css (weight 0) and proto-default.css (weight 100).
 *
 * Editing rule:
 * - Only add rules that match a value in the prototype CSS at
 *   `.agent/docs/C-Design/C10-prototypes/prototype/assets/css/site.css`.
 * - Cite the issue ID + prototype reference in the inline comment.
 * - Do NOT introduce new design tokens here. Re-use existing
 *   `--sp-*` variables from `lagoon/common.css`.
 */

/* ====================================================================
 * ISSUE-0139 — Global container, buttons, announce-bar.
 * ==================================================================== */

/* `--container-max` — prototype uses 1280px (lagoon/common.css already
 * declares 1240px; bump to match prototype site.css line 32). Keep on
 * `body.skin` selector so the rule scopes to themed pages only. */
body.skin {
  --container-max: 1240px;
}

/* `.btn` — restore the prototype's pill radius + lighter `1px` border.
 * skin.css line 135 forces `border-radius: 6px` (square SPREP look);
 * the prototype uses `var(--sp-radius-pill)` = 50px and `1.5px solid`
 * (lagoon/common.css line 131-138). */
body.skin .btn {
  border-radius: var(--sp-radius-pill, 50px) !important;
  border-width: 1.5px !important;
}

/* `.btn-peach` — prototype uses solid peach background, NOT the live
 * green-gradient. lagoon/common.css line 141 + proto-default.css line 33
 * already pull this back partially; force it through here so `body.skin`
 * scope wins on the homepage hero CTA. (ISSUE-0140 hero CTA fix.) */
body.skin .btn-peach {
  background: linear-gradient(135deg, #5fd9a0, #34c47c) !important;
  color: var(--sp-secondary-d) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px rgba(95, 217, 160, .3) !important;
  font-weight: 700 !important;
}
body.skin .btn-peach:hover {
  background: linear-gradient(135deg, #34c47c, #2da068) !important;
  color: var(--sp-secondary-d) !important;
}

/* Announce search link is rendered as `.auth` in Drupal; keep it at the
 * prototype icon-button size so the top strip stays 42px tall. */
body.skin .announce .nav-search-link {
  width: 28px !important;
  height: 28px !important;
  padding: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* `.btn-outline` on the public site — prototype has light `1px` border
 * `var(--sp-line)`, transparent background, navy text. skin.css line 141
 * forces `1.5px solid var(--sp-secondary)` which makes outline buttons
 * read as filled boxes. */
body.skin .btn-outline {
  background: transparent !important;
  color: var(--sp-secondary-d) !important;
  border-color: var(--sp-line) !important;
}
body.skin .btn-outline:hover {
  background: rgba(0, 34, 66, .04) !important;
  border-color: var(--sp-primary) !important;
  color: var(--sp-primary) !important;
}

/* ====================================================================
 * ISSUE-0140 — Hero layout, badge, CTAs.
 * ==================================================================== */

/* `.hero` — restore the prototype's two-column grid. skin.css line 152
 * forces `display: block` so the hero countdown card is absolutely
 * positioned; lagoon prototype uses CSS grid 2-col with the countdown
 * in the right column (matches `index.html` markup `.hero-grid`). */
body.skin .hero {
  display: block !important;
  align-items: center;
  text-align: left !important;
}
body.skin .hero .container {
  position: relative;
  z-index: 1;
}
body.skin .hero .hero-grid {
  display: grid !important;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  body.skin .hero .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* `.hero-grid--single` (used by the active conference hero block when the
 * countdown card is rendered as a sibling block) collapses to a single
 * full-width column so the hero text + actions still reach the prototype's
 * 920px max width. */
body.skin .hero .hero-grid--single {
  grid-template-columns: minmax(0, 920px) !important;
}

/* `.hero-card` (countdown) — prototype frames the card in white with
 * `12px` radius; restore here so the .skin gradient hero still gets
 * the prototype card surface in the right column. */
body.skin .hero .hero-card,
body.skin .hero-card--block-content {
  position: static !important;
  background: #fff !important;
  color: var(--sp-secondary-d) !important;
  border-radius: var(--sp-radius-md, 12px) !important;
  border: 1px solid var(--sp-line);
  box-shadow: 0 12px 40px rgba(0, 34, 66, .12);
  padding: 24px;
  width: auto !important;
  max-width: none !important;
}

/* `.badge` — prototype uses a white pill with navy text, NOT a
 * translucent overlay. skin.css line 176 forces `rgba(255,255,255,.15)`
 * + white text, drifting from the prototype look. */
body.skin .hero .badge {
  background: #fff !important;
  color: var(--sp-secondary-d) !important;
  border: 1px solid var(--sp-line) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* `.hero h1` — prototype uses 56px (matches site.css). skin.css line 188
 * already declares 56px BUT proto-default.css later bumps to 72px on
 * the homepage. Force 56px here so the prototype hierarchy holds. */
body.skin .hero h1,
body.skin .hero .hero-title {
  font-size: 56px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.5px !important;
  margin: 0 0 18px !important;
}

/* Homepage block-composed hero: match the prototype grid even though
 * Drupal renders the countdown as a sibling block in `.region-hero`. */
body.skin .hero--block-content {
  padding: 80px 0 140px !important;
}
body.skin .hero--block-content .hero-grid--single {
  display: grid !important;
  grid-template-columns: minmax(0, 667px) 477px !important;
  gap: 48px !important;
  align-items: start !important;
  padding: 0 !important;
}
body.skin .hero--block-content .hero-grid--single > div {
  max-width: none !important;
}
body.skin .hero--block-content .hero-sub {
  color: #fed7aa !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1.6px !important;
  line-height: 1.6 !important;
  margin: 0 0 14px !important;
  text-transform: uppercase !important;
}
body.skin .hero--block-content .hero-meta {
  display: block !important;
  max-width: 560px !important;
  color: rgba(255, 255, 255, .96) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  margin: 0 0 22px !important;
}
body.skin .hero--block-content .hero-trust {
  margin-top: 28px !important;
}
body.skin .hero--block-content .hero-actions .btn {
  padding: 11px 22px !important;
}
body.skin .hero--block-content .badge {
  border-color: rgba(0, 145, 194, .16) !important;
  box-shadow: 0 1px 4px rgba(10, 37, 64, .05) !important;
  color: #062940 !important;
  font-weight: 600 !important;
}
body.skin .hero--block-content .badge .dot {
  background: #fed7aa !important;
  box-shadow: none !important;
}

body.skin .hero-card.hero-card--block-content {
  position: absolute !important;
  top: 80px !important;
  right: max(24px, calc((100vw - var(--container-max)) / 2 + 24px)) !important;
  width: 477px !important;
  max-width: calc(100vw - 48px) !important;
  padding: 28px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid rgba(0, 145, 194, .18) !important;
  border-radius: 12px !important;
  box-shadow: 0 28px 70px rgba(10, 37, 64, .22), inset 0 1px 0 rgba(255, 255, 255, .7) !important;
  color: #062940 !important;
  z-index: 5 !important;
}
body.skin .hero-card.hero-card--block-content .ribbon {
  top: -10px !important;
  right: 18px !important;
}
body.skin .hero-card.hero-card--block-content .cd-eyebrow {
  color: #0091c2 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.6px !important;
  line-height: 1.18 !important;
  margin: 0 0 6px !important;
  text-transform: uppercase !important;
}
body.skin .hero-card.hero-card--block-content h3 {
  color: #062940 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  margin: 0 0 14px !important;
  text-transform: none !important;
}
body.skin .hero-card.hero-card--block-content .where {
  color: #46698a !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin: 0 0 16px !important;
}
body.skin .hero-card.hero-card--block-content .where .icon {
  color: #0091c2 !important;
  flex: 0 0 auto;
  font-size: 16px;
}
body.skin .hero-card.hero-card--block-content .countdown {
  grid-template-columns: repeat(4, 1fr) !important;
}
body.skin .hero-card.hero-card--block-content .btn-primary,
body.skin .hero-card.hero-card--block-content .btn-peach {
  background: linear-gradient(135deg, #5fd9a0, #34c47c) !important;
  color: var(--sp-secondary-d) !important;
  border: 1px solid transparent !important;
  box-shadow: 0 8px 22px rgba(95, 217, 160, .3) !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
}
body.skin .hero-card.hero-card--block-content .btn-primary:hover,
body.skin .hero-card.hero-card--block-content .btn-peach:hover {
  background: linear-gradient(135deg, #34c47c, #2da068) !important;
}

/* ISSUE-0385 — Drupal adds `.contextual-region` to block wrappers for
 * authenticated editors. If the absolute positioning lives on the inner
 * `<aside>`, that contextual wrapper becomes the offset parent and the
 * countdown drops below the stats row. Anchor the block wrapper itself to
 * `.region-hero`, then keep the card static inside the wrapper. */
body.skin .region-hero #block-pirt-theme-active-conference-countdown {
  position: absolute !important;
  top: 80px !important;
  right: max(24px, calc((100vw - var(--container-max)) / 2 + 24px)) !important;
  width: 477px !important;
  max-width: calc(100vw - 48px) !important;
  z-index: 6 !important;
  margin: 0 !important;
}
body.skin .region-hero #block-pirt-theme-active-conference-countdown .hero-card.hero-card--block-content {
  position: static !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  body.skin .region-hero #block-pirt-theme-active-conference-countdown {
    position: static !important;
    width: min(92%, 480px) !important;
    max-width: none !important;
    margin: -36px auto 24px !important;
    right: auto !important;
    top: auto !important;
  }
}

/* ====================================================================
 * ISSUE-0141 — Stats band: icons, typography, card treatment.
 * ==================================================================== */

/* `.stat-icon` — currently computed to `0x0` on live (issue text). The
 * lagoon prototype shows a 44x44 line-icon tile at the top of each stat
 * card. Restore the box so embedded `<img>` icons render. */
body.skin .stats .stat-icon {
  display: inline-flex !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 0 10px !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border-radius: 0 !important;
  color: #0091c2 !important;
  font-size: 22px !important;
}
body.skin .stats .stat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
body.skin .stats .stat-icon .icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* `.stat-num` — prototype uses 46px (heavy). skin.css forces 32px /
 * weight 900 — bump to prototype values. */
body.skin .stats .stat-num {
  font-size: 46px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: var(--sp-secondary-d) !important;
}

/* `.stat-lbl` — prototype uses sentence-case muted labels. skin.css
 * tracks them uppercase via letter-spacing — pull back. */
body.skin .stats .stat-lbl {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  color: var(--sp-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* `.stat` cards — prototype uses subtle `12px` radius cards on a white
 * surface. skin.css enforces `6px` radius + heavier border. */
body.skin .stats .stat,
body.skin .stats .stat-card {
  border-radius: 12px !important;
  border-color: rgba(0, 145, 194, .16) !important;
  box-shadow: 0 6px 24px rgba(10, 37, 64, .1) !important;
  padding: 24px !important;
  position: relative;
  overflow: hidden;
}
body.skin .stats .stat::before {
  content: '' !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0091c2, #1f6cb0) !important;
}
body.skin .stats {
  margin-top: -90px !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 5 !important;
}
body.skin .stats .stats-grid {
  gap: 16px !important;
}
body.skin .stats .stats-grid > *:nth-child(2) .stat-icon { color: #1f6cb0 !important; }
body.skin .stats .stats-grid > *:nth-child(3) .stat-icon { color: #a96a08 !important; }
body.skin .stats .stats-grid > *:nth-child(4) .stat-icon { color: #ec5d8c !important; }
body.skin .stats .stats-grid > div > div:nth-child(2) .stat::before { background: linear-gradient(90deg, #5fd9a0, #0091c2) !important; }
body.skin .stats .stats-grid > div > div:nth-child(3) .stat::before { background: linear-gradient(90deg, #f6ad55, #fed7aa) !important; }
body.skin .stats .stats-grid > div > div:nth-child(4) .stat::before { background: linear-gradient(90deg, #7c6ee8, #1f6cb0) !important; }
body.skin .stats .stats-grid > div > div:nth-child(2) .stat-icon { color: #1f6cb0 !important; }
body.skin .stats .stats-grid > div > div:nth-child(3) .stat-icon { color: #a96a08 !important; }
body.skin .stats .stats-grid > div > div:nth-child(4) .stat-icon { color: #ec5d8c !important; }
body.skin .stats .stats-grid .stat .stat-num {
  font-size: 46px !important;
  font-weight: 800 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
}
body.skin .stats .stats-grid .stat .stat-lbl {
  color: #46698a !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* The front page's intro is rendered through Drupal's main-content wrapper;
 * remove the wrapper padding so its first section lines up with the prototype
 * immediately after the overlapping stats row. */
body.skin main.section:has(.node--homepage) {
  padding: 0 !important;
}
body.skin .highlighted:has([data-drupal-messages-fallback].hidden:only-child) {
  display: none !important;
  padding: 0 !important;
}
body.skin .node--homepage .about-section {
  padding: 72px 0 !important;
  margin: 0 !important;
}
body.skin .node--homepage .about-line {
  color: var(--sp-text) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* ====================================================================
 * ISSUE-0142 — Framework band + pillar cards.
 * ==================================================================== */

/* `.section.alt` — prototype renders the framework section as a
 * full-viewport pale band. The live `.section.alt` is constrained to
 * the content column. Force a full-width background by extending the
 * section beyond `.container` via negative margin-trick — keep `.container`
 * itself at the prototype max width inside. */
body.skin section.section.alt {
  background: linear-gradient(180deg, #f5fbfd, #e9f4f8) !important;
  border-top: 1px solid rgba(0, 145, 194, .1) !important;
  border-bottom: 1px solid rgba(0, 145, 194, .1) !important;
  padding: 72px 0 !important;
}

/* Homepage pre-footer blocks are placed in a Drupal region that used to be a
 * constrained `.container`. Let the section bands go full-bleed, while their
 * inner `.container` children keep the prototype 1240px alignment. */
body.skin .pre-footer.container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* `.framework` card — prototype card sits inside a `1192px` content
 * column, on top of the pale band. Provide white surface + 16px radius
 * (already in lagoon/index.css; reinforce so skin.css overrides lose). */
body.skin .framework {
  background: #fff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 145, 194, .16) !important;
  box-shadow: 0 4px 24px rgba(0, 34, 66, .06) !important;
  padding: 36px !important;
}

/* `.pillar` cards — prototype uses tinted background + no heavy border.
 * skin.css makes them white with shadow; pull back to prototype tint. */
body.skin .framework .pillar {
  background: #f4f8f8 !important;
  border: none !important;
  border-top: 4px solid var(--sp-primary) !important;
  box-shadow: none !important;
  border-radius: var(--sp-radius-md, 12px) !important;
}
body.skin .framework .pillar .progress > span {
  display: block !important;
  height: 100% !important;
  background: var(--sp-primary) !important;
}
body.skin .framework .pillar:nth-child(2) {
  background: #f0f5fa !important;
  border-top-color: var(--sp-secondary) !important;
}
body.skin .framework .pillar:nth-child(3) {
  background: #fdf5f0 !important;
  border-top-color: var(--sp-peach) !important;
}
body.skin .framework .pillar:nth-child(2) .num {
  color: var(--sp-secondary) !important;
}
body.skin .framework .pillar:nth-child(3) .num {
  color: var(--sp-peach-text) !important;
}
body.skin .framework .pillar:nth-child(2) .progress span {
  background: var(--sp-secondary) !important;
}
body.skin .framework .pillar:nth-child(3) .progress span {
  background: var(--sp-peach) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(2) .pillar {
  background: #f0f5fa !important;
  border-top-color: var(--sp-secondary) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(3) .pillar {
  background: #fdf5f0 !important;
  border-top-color: var(--sp-peach) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(2) .pillar .num {
  color: var(--sp-secondary) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(3) .pillar .num {
  color: var(--sp-peach-text) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(2) .pillar .progress > span {
  background: var(--sp-secondary) !important;
}
body.skin .framework .framework-pillars > div > div:nth-child(3) .pillar .progress > span {
  background: var(--sp-peach) !important;
}

/* ====================================================================
 * ISSUE-0143 — Working-group card system (CSS portion).
 *
 * The data issue (`MandateStimulates` text) and the member-count vs
 * `Est. YYYY` pill are template-level fixes (see follow-up tasks).
 * This file only restores the visual treatment.
 * ==================================================================== */

body.skin .wg-grid .wg {
  border-radius: var(--sp-radius-md, 12px) !important;
  border: 1px solid var(--sp-line) !important;
  box-shadow: 0 2px 8px rgba(0, 34, 66, .04) !important;
  padding: 24px !important;
  border-top: 4px solid var(--sp-primary);
}
body.skin .wg-grid .wg:nth-child(2) { border-top-color: var(--sp-secondary); }
body.skin .wg-grid .wg:nth-child(3) { border-top-color: var(--sp-peach); }
body.skin .wg-grid .wg:nth-child(4) { border-top-color: var(--sp-rose, #ce3836); }
body.skin .wg-grid .wg:nth-child(5) { border-top-color: var(--sp-primary); }
body.skin .wg-grid .wg:nth-child(6) { border-top-color: var(--sp-secondary); }

body.skin .wg-grid .wg-icon {
  width: 36px !important;
  height: 36px !important;
  background: rgba(1, 128, 129, .10) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* `.wg-mems` (member count pill, top-right). skin.css doesn't style
 * these correctly — restore prototype pill chrome. */
body.skin .wg-grid .wg-mems {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  background: var(--sp-surface, #f4f8f8) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
}

/* ====================================================================
 * ISSUE-0144 — News/events cards + sidebar.
 * ==================================================================== */

/* News card radius: prototype uses 12px. */
body.skin .news-grid .news-card {
  border-radius: var(--sp-radius-md, 12px) !important;
  border: 1px solid var(--sp-line) !important;
  box-shadow: none !important;
}
body.skin .news-grid .news-thumb {
  border-radius: var(--sp-radius-md, 12px) var(--sp-radius-md, 12px) 0 0 !important;
  overflow: hidden;
}
body.skin .news-grid .news-tag {
  background: #fff !important;
  color: var(--sp-secondary-d) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
}

/* Events sidebar: prototype uses approved blue top border + wider rail.
 * The `.news-events` 2fr/1fr grid already lives in styles.css; this just
 * fixes the card chrome. */
body.skin .events-side {
  background: #fff !important;
  border-radius: var(--sp-radius-md, 12px) !important;
  border: 1px solid var(--sp-line) !important;
  border-top: 4px solid var(--sp-peach) !important;
  padding: 24px !important;
}
body.skin .events-side h3 {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--sp-muted) !important;
  margin-bottom: 16px !important;
}
body.skin .events-side .event {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--sp-line) !important;
}
body.skin .events-side .event:last-of-type {
  border-bottom: none !important;
}
body.skin .events-side .event-date {
  flex-shrink: 0;
  width: 56px;
  border-radius: var(--sp-radius-sm, 6px) !important;
  background: var(--sp-surface) !important;
  text-align: center;
  padding: 8px 4px;
}
body.skin .events-side .event-date.next {
  background: var(--sp-primary) !important;
  color: #fff !important;
}
body.skin .events-side .event-date .m {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
}
body.skin .events-side .event-date .d {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ====================================================================
 * ISSUE-0145 — Members band chips + View-all CTA inline.
 * ==================================================================== */

body.skin .members-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 28px !important;
}
body.skin .members-bar .chip {
  height: 41px;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--sp-line) !important;
  background: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

/* Logo-bearing variant — 2026-05-17 per Website Contents.docx ("use the
   logos instead but maintain the tags of Inter-governmental and Non-
   government"). Chip widens to host the brand mark; dot tag stays as the
   tier indicator. Logo image is constrained to a sensible height with
   automatic width so portrait/landscape brands both look right. */
body.skin .members-bar .chip--has-logo {
  height: 56px;
  padding: 6px 14px !important;
  gap: 10px;
}
body.skin .members-bar .chip--has-logo img,
body.skin .members-bar .chip--has-logo picture > img {
  max-height: 36px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
body.skin .members-bar .chip--has-logo:hover img {
  filter: brightness(.96);
}
body.skin .visually-hidden,
body.skin .chip__sr-name {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
body.skin .members-bar .chip.more {
  background: var(--sp-primary) !important;
  color: #fff !important;
  border-color: var(--sp-primary) !important;
}

/* Move the cta + legend so the View-all chip sits inline with the chip
 * row (same flex container) and the legend appears below. */
body.skin .members-cta {
  display: contents;
}
body.skin .members-bar .members-cta a.chip.more {
  order: 1;
}
body.skin section#members .legend {
  display: flex !important;
  flex: 0 0 100%;
  justify-content: center !important;
  gap: 24px !important;
  margin-top: 16px !important;
  order: 2;
  font-size: 12px !important;
  color: var(--sp-muted) !important;
}
body.skin section#members .legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--sp-primary);
}
body.skin section#members .legend i.ngo {
  background: var(--sp-peach);
}
body.skin section#members .legend i.donor {
  background: var(--sp-amber, #f59e0b);
}

/* ====================================================================
 * Contextual links on homepage item cards.
 *
 * Drupal only renders the menu for links the current user can access; these
 * wrappers simply give each custom card template a safe contextual region
 * without changing the approved visual layout.
 * ==================================================================== */

body.skin .homepage-contextual-item {
  position: relative;
  min-width: 0;
}
body.skin .news-grid > .homepage-contextual-item,
body.skin .wg-grid > .homepage-contextual-item {
  display: block;
  height: 100%;
}
body.skin .events-side > .homepage-contextual-item {
  display: block;
}
body.skin .members-bar > .homepage-contextual-item {
  display: inline-flex;
}
body.skin .homepage-contextual-item > .news-card,
body.skin .homepage-contextual-item > .wg {
  height: 100%;
}
body.skin .homepage-contextual-item > .event,
body.skin .homepage-contextual-item > .chip,
body.skin .homepage-contextual-item > .partner-logo-tile {
  width: 100%;
}
body.skin .news-grid > .homepage-contextual-item:nth-child(even) .news-thumb {
  background: linear-gradient(135deg, var(--sp-primary), var(--sp-secondary)) !important;
}
body.skin .wg-grid > .homepage-contextual-item:nth-child(2) .wg { border-top-color: var(--sp-secondary) !important; }
body.skin .wg-grid > .homepage-contextual-item:nth-child(3) .wg { border-top-color: var(--sp-peach) !important; }
body.skin .wg-grid > .homepage-contextual-item:nth-child(4) .wg { border-top-color: var(--sp-rose, #ce3836) !important; }
body.skin .wg-grid > .homepage-contextual-item:nth-child(5) .wg { border-top-color: var(--sp-primary) !important; }
body.skin .wg-grid > .homepage-contextual-item:nth-child(6) .wg { border-top-color: var(--sp-secondary) !important; }

/* E02 ISSUE-0398/0399 — member detail polish. */
body.skin .member-detail .page-hero.member-hero .eyebrow {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
}
body.skin .member-detail .related-section .mem .mem-type {
  align-self: center !important;
}

/* E02 ISSUE-0400 — contact channel icons need breathing room inside each card. */
body.skin .contact-info-list li {
  gap: 18px !important;
  padding: 16px 18px !important;
  background: #fff !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 12px !important;
}
body.skin .contact-info-list .icn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

/* E02 ISSUE-0401/0402 — document detail hero tag + sidebar icon strokes. */
body.skin .document-detail .page-hero.document-hero .eyebrow {
  display: inline-block !important;
  width: auto !important;
  max-width: 100%;
}
body.skin .document-detail .event-card-side .icn {
  color: var(--sp-primary) !important;
  background: rgba(1, 128, 129, .08) !important;
  border-color: rgba(1, 128, 129, .18) !important;
}
body.skin .document-detail .event-card-side .icn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* E02 ISSUE-0403 — annual reports closing CTA should read as one balanced block. */
body.skin .annual-reports-section .next-step {
  grid-template-columns: minmax(210px, .72fr) minmax(0, 1.35fr) auto !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 30px 32px !important;
}
body.skin .annual-reports-section .next-step h3,
body.skin .annual-reports-section .next-step p,
body.skin .annual-reports-section .next-step .btn {
  margin: 0 !important;
}
body.skin .annual-reports-section .next-step h3 {
  grid-column: 1;
  grid-row: 1;
}
body.skin .annual-reports-section .next-step p {
  grid-column: 2;
  grid-row: 1;
  max-width: 680px;
}
body.skin .annual-reports-section .next-step .btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}
@media (max-width: 820px) {
  body.skin .annual-reports-section .next-step {
    grid-template-columns: 1fr !important;
  }
body.skin .annual-reports-section .next-step h3,
body.skin .annual-reports-section .next-step p,
body.skin .annual-reports-section .next-step .btn {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  }
}

/* E02 ISSUE-0405/0406 — event teaser cards and naked core pager polish. */
body.skin .event-item {
  display: grid !important;
  grid-template-columns: 96px 52px minmax(0, 1fr);
  gap: 14px !important;
  align-items: start;
  padding: 16px !important;
  border-radius: 8px !important;
  height: 100%;
}
body.skin .event-item .event-thumb {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 96px;
  height: 100%;
  min-height: 138px;
}
body.skin .event-item .event-date-box {
  grid-column: 2;
  grid-row: 1;
  box-shadow: 0 8px 18px rgba(1, 128, 129, .16);
}
body.skin .event-item .event-info {
  grid-column: 3;
  grid-row: 1 / span 3;
  min-width: 0;
  min-height: 138px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
body.skin .event-item .event-info h4 {
  margin: 0 0 8px !important;
  font-size: 14.5px;
  line-height: 1.3;
}
body.skin .event-item .event-info__meta {
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
}
body.skin .event-item .event-info__meta-item {
  line-height: 1.35;
}
body.skin .event-item .event-item__cta {
  margin-top: auto !important;
  padding-top: 10px;
}
body.skin .pirt-events-view nav:has(.js-pager__items) {
  margin: 34px 0 0;
}
body.skin .pirt-events-view .js-pager__items {
  display: flex !important;
  justify-content: center;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.skin .pirt-events-view .js-pager__items li,
body.skin .pirt-events-view .js-pager__items a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
body.skin .pirt-events-view .js-pager__items li {
  padding: 0 14px;
  color: var(--sp-secondary-d);
  background: #fff;
  border: 1px solid var(--sp-line);
}
body.skin .pirt-events-view .js-pager__items a {
  min-width: 42px;
  margin: 0 -14px;
  padding: 0 14px;
  color: var(--sp-primary);
}
body.skin .pirt-events-view .js-pager__items a:hover {
  color: #fff;
  background: var(--sp-primary);
  border-color: var(--sp-primary);
}

/* E02 ISSUE-0408 — funding apply/read-more field must not disappear on white. */
body.skin .funding-detail .funding-apply-widget {
  background: var(--sp-primary) !important;
  border: 1px solid var(--sp-primary) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  overflow: hidden;
}
body.skin .funding-detail .funding-apply-widget a {
  display: flex !important;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 13px 18px;
  color: #fff !important;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}
body.skin .funding-detail .funding-apply-widget a:hover {
  background: var(--sp-primary-d, #006a6b);
}
@media (max-width: 640px) {
  body.skin .event-item {
    grid-template-columns: 76px 52px minmax(0, 1fr);
  }
  body.skin .event-item .event-thumb {
    width: 76px;
  }
}