/* MENA-SINO Phase 5 — WCAG 2.2 AA and delivery quality refinements.
 * Design philosophy: make the Living Network more perceivable and operable without altering its content source.
 */

:root { --mena-focus-outer: #0A1A22; --mena-focus-inner: #E85C4A; }
html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }
#content, main, .mena-phase3-template [id], .mena-network-home [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 96px); }

.mena-living-header a:focus-visible,
.mena-living-header button:focus-visible,
.mena-network-home a:focus-visible,
.mena-network-home button:focus-visible,
.mena-network-home summary:focus-visible,
.mena-phase3-template a:focus-visible,
.mena-phase3-template button:focus-visible,
.mena-phase3-template summary:focus-visible,
.mena-utility-bar a:focus-visible,
.mena-utility-bar button:focus-visible,
.mena-utility-bar input:focus-visible,
.mena-site-guide a:focus-visible {
  outline: 3px solid var(--mena-focus-inner) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--paper);
}
.mena-network-patient a:focus-visible,
.mena-inner-hero a:focus-visible,
.mena-membership-guide__grid article a:focus-visible,
.mena-network-membership-grid article.is-recommended a:focus-visible {
  outline-color: var(--sand) !important;
  box-shadow: 0 0 0 2px var(--ink);
}

.mena-network-home .mena-network-audience button,
.mena-network-home .mena-network-news__filters button,
.mena-network-home .mena-network-swiper-controls button,
.mena-living-header .mena-mega-top-list > li > a,
.mena-living-header .mena-mega-top-list > li > button,
.mena-phase3-template summary,
.mena-site-guide a {
  min-height: 32px;
}
.mena-site-guide a { display: inline-flex; align-items: center; padding-block: 5px; }
.mena-network-home .swiper-pagination-bullet { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; background: transparent; opacity: 1; }
.mena-network-home .swiper-pagination-bullet::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(10,26,34,.34); }
.mena-network-home .swiper-pagination-bullet-active::after { background: var(--pulse); }

.mena-network-home img,
.mena-phase3-template img { height: auto; }
.mena-network-home iframe[loading="lazy"] { content-visibility: auto; contain-intrinsic-size: 202px; }
.mena-network-home .mena-network-canvas-wrap { contain: layout paint; }
body .mena-site-guide::before {
  background-image: radial-gradient(circle at 82% 76%, rgba(46,153,134,.24) 0 1px, transparent 2px), radial-gradient(circle at 64% 42%, rgba(232,92,74,.28) 0 1px, transparent 2px), linear-gradient(135deg, transparent 0 44%, rgba(232,220,200,.11) 44.2% 44.5%, transparent 44.7%), linear-gradient(35deg, transparent 0 58%, rgba(46,153,134,.13) 58.2% 58.5%, transparent 58.7%) !important;
  background-size: 44px 44px, 64px 64px, 180px 180px, 220px 220px !important;
  mix-blend-mode: normal !important;
}
body .mena-network-eyebrow { color: var(--ink) !important; }
body .mena-join-link { color: var(--ink) !important; text-decoration-color: var(--teal) !important; }
body .mena-site-guide a { color: #FFFFFF !important; text-decoration-color: var(--sand) !important; }
body .mena-utility-bar .mena-join-link { background: var(--sand) !important; color: var(--ink) !important; }
body .mena-network-membership a[href^="mailto:"] { color: var(--ink) !important; text-decoration-color: var(--teal) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mena-network-home iframe[loading="lazy"] { content-visibility: visible; }
}

@media (max-width: 720px) {
  html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px); }
  #content, main, .mena-phase3-template [id], .mena-network-home [id] { scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px); }
  .mena-network-home .mena-network-swiper-controls button { width: 44px; height: 44px; }
}

html[dir="rtl"] .mena-network-home .mena-network-membership-grid article a:focus-visible,
html[dir="rtl"] .mena-phase3-template a:focus-visible { outline-offset: 4px; }