/*
Theme Name: African Light Source
Theme URI: https://africanlightsource.org
Author: AfLS Observatory
Description: A bold, modern theme for The African Light Source — deep synchrotron blue with an African-gold accent, a gradient hero, sticky dropdown navigation, and editorial card layouts for the science case, roadmap and news.
Version: 3.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: afls
*/

/* ============================================================ TOKENS ===== */
:root {
  --blue:    #0a2a52;   /* deep synchrotron blue */
  --blue-2:  #103e7e;
  --blue-3:  #1769b8;
  --cyan:    #1bb6d8;   /* beamline cyan */
  --cyan-2:  #5fe0f0;
  --gold:    #f4a81d;   /* African gold */
  --gold-2:  #ffc24d;
  --ink:     #16202c;
  --muted:   #5b6b7b;
  --line:    #e4ebf3;
  --soft:    #f3f7fc;
  --soft-2:  #e9f1fa;
  --white:   #ffffff;
  --maxw:    1200px;
  --readw:   860px;    /* long-form reading column (article body + its page hero) */
  --wrappad: 24px;     /* horizontal gutter shared by .afls-wrap & full-bleed bands */
  --radius:  16px;
  --shadow:  0 18px 40px -24px rgba(10,42,82,.45), 0 4px 12px -8px rgba(10,42,82,.25);
  --shadow-lg: 0 30px 60px -28px rgba(10,42,82,.55);
  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: 'Sora', var(--font);
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');

/* ============================================================ BASE ======= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--white);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-3); text-decoration: none; transition: color .15s; }
a:hover { color: var(--cyan); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--blue); line-height: 1.2; font-weight: 700; }
.afls-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ============================================================ TOPBAR ===== */
.afls-topbar {
  background: var(--blue); color: rgba(255,255,255,.82); font-size: 13.5px;
  letter-spacing: .2px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.afls-topbar .afls-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 38px; }
.afls-topbar a { color: rgba(255,255,255,.82); }
.afls-topbar a:hover { color: var(--gold-2); }
.afls-social { display: flex; gap: 18px; }
@media (max-width: 720px){ .afls-topbar .afls-wrap > span:first-child { display:none; } }

/* ============================================================ HEADER ===== */
.afls-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 20px -16px rgba(10,42,82,.6);
}
.afls-header .afls-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; padding-top: 12px; padding-bottom: 8px; }
.afls-brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.afls-brand img { height: 42px; width: auto; flex: 0 0 auto; }
.afls-title { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--blue); line-height: 1.05; letter-spacing: -.2px; }
.afls-tag { display: block; font-size: 12px; color: var(--muted); font-weight: 500; }

/* nav — full-width centered bar on its own row below the brand (11 top-level
   items don't fit beside the logo, so this keeps it aligned + intentional) */
.afls-nav { flex: 1 1 100%; margin-top: 2px; }
.afls-nav > ul, .afls-nav ul { list-style: none; margin: 0; padding: 0; }
.afls-nav > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 2px; }
.afls-nav li { position: relative; }
.afls-nav a {
  display: block; padding: 10px 12px; color: var(--ink); font-weight: 600; font-size: 13.5px;
  border-radius: 9px; white-space: nowrap;
}
.afls-nav > ul > li > a { position: relative; }
.afls-nav > ul > li > a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--gold); border-radius: 2px; transform: scaleX(0); transition: transform .18s;
}
.afls-nav > ul > li:hover > a { color: var(--blue); }
.afls-nav > ul > li:hover > a::after { transform: scaleX(1); }
.afls-nav .current-menu-item > a, .afls-nav .current_page_item > a { color: var(--blue); }

/* social icon links in the dark top strip */
.afls-social a { display: inline-flex; align-items: center; line-height: 0; }
.afls-social svg { display: block; transition: transform .15s; }
.afls-social a:hover svg { transform: translateY(-1px); }

/* ---- brand-row actions: Contact Us (link) + Join Us (button) -----------------
   These sit on the brand row, to the right and IN LINE WITH THE LOGO. They are
   rendered as explicit elements in header.php, and the matching nav menu items
   are hidden on desktop (below) to avoid duplication. */
.afls-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; margin-left: auto; }

/* "Contact Us" — a clean, visually-appealing text link (NOT a button) */
.afls-actions .afls-action-link {
  font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--blue);
  letter-spacing: -.1px; white-space: nowrap; position: relative; padding-bottom: 2px;
}
.afls-actions .afls-action-link::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 2px; transition: right .22s ease;
}
.afls-actions .afls-action-link:hover { color: var(--blue-3); }
.afls-actions .afls-action-link:hover::after { right: 0; }

/* "Join Us" — gold CTA button (also styles the nav item on mobile, by href) */
.afls-join-btn,
.afls-nav > ul > li > a[href*="/membership-join/"] {
  display: inline-flex; align-items: center; background: linear-gradient(120deg, var(--gold), var(--gold-2));
  color: #2a1c00 !important; font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 9px 22px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 10px 22px -12px rgba(244,168,29,.7); transition: transform .15s, box-shadow .15s;
}
.afls-join-btn:hover,
.afls-nav > ul > li > a[href*="/membership-join/"]:hover {
  color: #2a1c00 !important; transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(244,168,29,.85);
}
.afls-nav > ul > li > a[href*="/membership-join/"]::after { display: none; }

/* Desktop: Join Us + Member login live in the brand-row actions, so hide their
   duplicate nav-menu items. Contact Us stays in the nav as the last item.
   Mobile: hide the brand-row actions (Join Us / Member login / Contact Us all
   appear in the off-canvas menu instead, so nothing is duplicated). */
@media (min-width: 921px) {
  .afls-nav > ul > li:has(> a[href*="/membership-join/"]),
  .afls-nav > ul > li:has(> a[href*="/membership-login/"]) { display: none; }
}
@media (max-width: 920px) {
  .afls-actions { display: none; }
}
/* Contact Us is the last top-level nav item — to the right of Researcher Data.
   Done with flex `order` so it's deterministic regardless of menu_order/caching. */
.afls-nav > ul > li:has(> a[href*="/contact-us/"]) { order: 1; }

/* Logged-in member: chip (name → member area) + Log out, in the brand-row actions. */
.afls-memberchip { display: inline-flex; align-items: center; gap: 9px; font-family: var(--display);
  font-weight: 700; font-size: 15px; color: var(--blue); white-space: nowrap; }
.afls-memberchip:hover { color: var(--blue-3); }
.afls-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--blue-3)); color: #fff; font-weight: 800;
  font-size: 15px; box-shadow: 0 6px 14px -6px rgba(27,182,216,.7); }
/* The appended "My account"/"Log out" menu items are for the mobile menu only;
   on desktop the member chip in the brand row stands in for them. */
@media (min-width: 921px) { .afls-nav .afls-acct-item { display: none; } }
/* Make the logout item read as a sign-out action in the mobile menu. */
.afls-acct-logout > a { color: var(--muted); }

/* dropdowns */
.afls-nav ul ul {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: .18s; z-index: 60;
}
.afls-nav li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.afls-nav ul ul a { padding: 9px 12px; font-size: 13.5px; font-weight: 500; border-radius: 8px; }
.afls-nav ul ul a:hover { background: var(--soft-2); color: var(--blue); }
.afls-nav ul ul ul { top: -8px; left: 100%; }

.afls-menu-toggle { display: none; background: none; border: 0; font-size: 26px; color: var(--blue); cursor: pointer; }

/* ============================================================ HERO ======= */
.afls-hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(244,168,29,.28) 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 110%, rgba(27,182,216,.30) 0%, transparent 55%),
    linear-gradient(135deg, #07203f 0%, #0d3a72 55%, #1769b8 120%);
}
.afls-hero::after {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%); mask-image: linear-gradient(180deg, #000, transparent 80%);
}
/* Hero shares the same content column as every section below it (was 980px,
   which left the headline + stats indented out of line with the page). */
.afls-hero .afls-wrap { position: relative; z-index: 1; padding: 86px 24px 92px; max-width: var(--maxw); }
.afls-hero .eyebrow {
  display: inline-block; font-family: var(--display); font-weight: 700; letter-spacing: 2.5px;
  text-transform: uppercase; font-size: 12.5px; color: var(--gold-2);
  background: rgba(244,168,29,.12); border: 1px solid rgba(244,168,29,.35);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
.afls-hero h1 { color: #fff; font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.5px; margin: 0 0 18px; max-width: 14ch; }
.afls-hero h1 .accent { background: linear-gradient(100deg, var(--gold-2), var(--cyan-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.afls-hero p { font-size: clamp(17px, 2vw, 21px); color: rgba(255,255,255,.88); max-width: 760px; margin: 0 0 30px; }
.afls-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.afls-btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--display);
  font-weight: 700; font-size: 15.5px; padding: 13px 26px; border-radius: 999px;
  background: linear-gradient(120deg, var(--gold), var(--gold-2)); color: #2a1c00 !important;
  box-shadow: 0 14px 30px -12px rgba(244,168,29,.6); transition: transform .15s, box-shadow .15s;
}
.afls-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(244,168,29,.7); color: #2a1c00 !important; }
.afls-btn-ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255,255,255,.5); box-shadow: none; }
.afls-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; color:#fff !important; }

/* hero stat strip */
.afls-hero-stats { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.14); }
.afls-hero-stats .afls-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 24px; }
.afls-hero-stats .stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; color: #fff; }
.afls-hero-stats .stat span { color: rgba(255,255,255,.7); font-size: 13.5px; }
@media (max-width: 760px){ .afls-hero-stats .afls-wrap { grid-template-columns: repeat(2,1fr); } }

/* ============================================================ SECTIONS === */
.afls-section { padding: 72px 0; }
.afls-section.alt { background: var(--soft); border-block: 1px solid var(--line); }
.afls-section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.afls-section-head .kicker { font-family: var(--display); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12.5px; color: var(--cyan); }
.afls-section-head h2 { font-size: clamp(26px, 3.4vw, 38px); margin: 10px 0 12px; }
.afls-section-head p { color: var(--muted); font-size: 18px; margin: 0; }

/* feature cards */
.afls-grid { display: grid; gap: 22px; }
.afls-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.afls-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.afls-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px){ .afls-grid.cols-3, .afls-grid.cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .afls-grid { grid-template-columns: 1fr !important; } }

.afls-feature {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative; overflow: hidden; display: block; color: inherit;
}
.afls-feature::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background: linear-gradient(90deg, var(--cyan), var(--gold)); transform: scaleX(0); transform-origin:left; transition: transform .25s; }
.afls-feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.afls-feature:hover::before { transform: scaleX(1); }
.afls-feature .ico { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; margin-bottom: 16px; background: linear-gradient(135deg, var(--soft-2), #fff); border: 1px solid var(--line); }
.afls-feature h3 { font-size: 20px; margin: 0 0 8px; }
.afls-feature p { color: var(--muted); margin: 0 0 14px; font-size: 15.5px; }
.afls-feature .more { font-weight: 700; font-family: var(--display); font-size: 14.5px; color: var(--blue-3); }
.afls-feature .more::after { content: ' →'; transition: margin .15s; }
.afls-feature:hover .more::after { margin-left: 4px; }

/* news cards */
.afls-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px){ .afls-posts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px){ .afls-posts { grid-template-columns: 1fr; } }
.afls-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; }
.afls-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.afls-thumb { aspect-ratio: 16/9; background: var(--soft-2); overflow: hidden; }
.afls-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.afls-card:hover .afls-thumb img { transform: scale(1.06); }
.afls-card-body { padding: 20px 22px 24px; }
.afls-card-body h3 { font-size: 18px; margin: 0 0 8px; }
.afls-card-body h3 a { color: var(--blue); }
.afls-card-body h3 a:hover { color: var(--cyan); }
.afls-meta { font-size: 13px; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.afls-card-body p, .afls-card-body { color: var(--muted); font-size: 15px; }

/* CTA band */
.afls-band { background: linear-gradient(120deg, var(--blue) 0%, var(--blue-2) 60%, var(--blue-3) 120%); color: #fff; border-radius: 22px; padding: 48px; text-align: center; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.afls-band h2 { color: #fff; font-size: clamp(24px,3vw,34px); margin: 0 0 12px; }
.afls-band p { color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 26px; font-size: 18px; }

/* ============================================================ CONTENT ==== */
.afls-main { padding: 48px 0 72px; }
.afls-page-hero { background: linear-gradient(135deg, #07203f, #0d3a72); color:#fff; border-bottom: 1px solid var(--line); padding: 56px 0 44px; }
.afls-page-hero h1 { color:#fff; font-size: clamp(28px, 4vw, 44px); margin: 0; }
.afls-page-hero .crumbs { color: rgba(255,255,255,.65); font-size: 14px; margin-bottom: 12px; }
.afls-page-hero .crumbs a { color: var(--gold-2); }
/* The page hero's inner column matches the article body exactly, so the
   breadcrumb + title sit on the same left/right edges as the content below. */
.afls-page-hero .afls-wrap { max-width: var(--readw); }
.afls-content { max-width: var(--readw); margin: 0 auto; }
.afls-content img { border-radius: 12px; margin: 18px 0; box-shadow: var(--shadow); }
.afls-content h2 { font-size: 28px; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--soft-2); }
.afls-content h3 { font-size: 22px; margin: 28px 0 10px; }
.afls-content p { margin: 0 0 18px; }
.afls-content a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--soft-2); text-underline-offset: 3px; }
.afls-content ul, .afls-content ol { margin: 0 0 18px; padding-left: 22px; }
.afls-content li { margin: 6px 0; }
.afls-content blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--gold); background: var(--soft); border-radius: 0 12px 12px 0; color: var(--ink); }
.afls-content table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; display: block; overflow-x: auto; }
.afls-content th, .afls-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.afls-content th { background: var(--soft-2); }

/* ============================================================ FOOTER ===== */
.afls-footer { background: var(--blue); color: rgba(255,255,255,.78); margin-top: 0; }
.afls-footer .afls-wrap { padding: 58px 24px 28px; }
.afls-footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .afls-footer-cols { grid-template-columns: 1fr; gap: 28px; } }
.afls-footer h4 { color: #fff; font-size: 16px; margin: 0 0 16px; }
.afls-footer p { color: rgba(255,255,255,.7); font-size: 15px; }
.afls-footer ul { list-style: none; margin: 0; padding: 0; }
.afls-footer li { margin: 8px 0; }
.afls-footer a { color: rgba(255,255,255,.78); }
.afls-footer a:hover { color: var(--gold-2); }
.afls-footer .brandline { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.afls-footer .brandline img { max-height: 44px; }
.afls-footer .brandline strong { font-family: var(--display); color: #fff; font-size: 18px; }
.afls-colophon { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: rgba(255,255,255,.55); }

/* ============================================================ RESPONSIVE = */
@media (max-width: 900px) {
  .afls-menu-toggle { display: block; }
  .afls-nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; }
  /* The off-canvas menu is taller than a phone screen (12 top-level items +
     always-expanded sub-menus), so cap it to the viewport and let it scroll
     internally — otherwise the lower items sit below the screen edge and are
     unreachable. nav.js sets an exact pixel max-height; this dvh value is the
     graceful fallback when JS is unavailable (84px ≈ the sticky header height). */
  .afls-nav.open {
    display: block;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .afls-nav.open::-webkit-scrollbar { width: 10px; }
  .afls-nav.open::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 3px solid #fff; }
  /* ---- Off-canvas menu styling: full-width rows, clear separators, comfy
     spacing. Every row spans the menu; hairline separators sit between rows so
     the list reads as a clean, tappable stack. -------------------------------- */
  .afls-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 10px 12px; }

  /* hairline separators between top-level groups */
  .afls-nav > ul > li { border-top: 1px solid var(--line); }
  .afls-nav > ul > li:first-child { border-top: 0; }

  /* top-level links: full-width, generous tap target, clear type */
  .afls-nav > ul > li > a {
    display: block; width: 100%; padding: 15px 14px;
    font-size: 15.5px; font-weight: 700; color: var(--blue);
    white-space: normal; line-height: 1.3; border-radius: 10px;
  }
  .afls-nav > ul > li > a::after { display: none; }
  .afls-nav > ul > li > a:hover,
  .afls-nav > ul > li > a:focus-visible { background: var(--soft); color: var(--blue-3); }
  .afls-nav .current-menu-item > a,
  .afls-nav .current_page_item > a { background: var(--soft-2); }

  /* sub-menus: an indented panel with a left accent rail + its own row
     separators, so children read as clearly subordinate to their section */
  .afls-nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0;
    margin: 0 0 8px 14px; padding: 2px 0;
    border-left: 2px solid var(--soft-2);
  }
  .afls-nav ul ul li + li { border-top: 1px solid var(--line); }
  .afls-nav ul ul a {
    display: block; width: 100%; padding: 12px 14px;
    font-size: 14px; font-weight: 500; color: var(--ink);
    white-space: normal; line-height: 1.3; border-radius: 8px;
  }
  .afls-nav ul ul a:hover,
  .afls-nav ul ul a:focus-visible { background: var(--soft); color: var(--blue); }

  /* CTA rows span the full menu width and read as buttons, not list links.
     "Join Us" is pulled to the very top of the menu as the primary action
     (flex `order`; safe because the item is display:none on desktop), and is
     divided from the link list below it by a separator. */
  .afls-nav > ul > li:has(> a[href*="/membership-join/"]) {
    order: -2; border-top: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px;
  }
  .afls-nav > ul > li:has(> a[href*="/membership-login/"]) { order: -1; border-top: 0; }
  .afls-nav > ul > li > a[href*="/membership-join/"] {
    display: block; width: auto; text-align: center;
    margin: 6px 6px 10px; padding: 14px 18px; font-size: 15.5px; border-radius: 999px;
  }
  .afls-nav > ul > li > a[href*="/membership-login/"] {
    display: block; width: auto; text-align: center; font-weight: 700;
    margin: 4px 6px; padding: 13px 18px; color: var(--blue);
    border: 1.5px solid var(--line); border-radius: 999px;
  }
  .afls-nav > ul > li > a[href*="/membership-login/"]:hover {
    background: var(--soft); border-color: var(--blue-3);
  }

  .afls-header .afls-wrap { position: relative; }
}

/* ============================================================ HEADER FIX = */
/* The primary menu has 11 top-level items, so the brand + full nav cannot
   share one row inside the 1200px container. On desktop, give the brand its
   true width and drop the primary nav onto its own full-width row beneath it,
   so the title never collides with the menu and everything reads cleanly. */
.afls-brand { flex: 0 0 auto; gap: 14px; }
.afls-brand img { max-height: 50px; }
.afls-title { font-size: 19px; white-space: nowrap; }
.afls-tag { white-space: nowrap; }

@media (min-width: 901px) {
  .afls-header .afls-wrap { flex-wrap: wrap; align-items: center; min-height: 0; padding-top: 14px; padding-bottom: 0; }
  .afls-brand { padding-bottom: 12px; }
  .afls-nav { flex: 1 0 100%; border-top: 1px solid var(--line); }
  .afls-nav > ul { flex-wrap: wrap; justify-content: center; gap: 2px; padding: 7px 0; }
  .afls-nav a { padding: 10px 13px; font-size: 14.5px; }
  .afls-nav > ul > li > a::after { left: 13px; right: 13px; }
}
@media (max-width: 1180px) and (min-width: 901px) { .afls-nav a { padding: 9px 8px; font-size: 12.5px; } }

/* Mobile / tablet: let the brand shrink and the title wrap so it never runs
   under the menu toggle, and keep the toggle pinned clear on the right. */
@media (max-width: 900px) {
  .afls-header .afls-wrap { gap: 12px; }
  .afls-brand { flex: 0 1 auto; min-width: 0; gap: 10px; }
  .afls-brand img { max-height: 40px; }
  .afls-title { font-size: 16px; white-space: normal; line-height: 1.1; }
  .afls-menu-toggle { flex: 0 0 auto; }
}

/* ============================================================ FORMS ====== */
/* The imported pages use WPForms / SWPM / native form markup. Style it so the
   forms read as clean, intentional layouts instead of bulleted lists. */
.afls-content form { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: 28px 28px 8px; margin: 22px 0; box-shadow: var(--shadow); }
.afls-content form ul, .afls-content .swpm-section, .afls-content .wpforms-field-container { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.afls-content form li, .afls-content .swpm-item, .afls-content .wpforms-field { list-style: none; margin: 0 0 18px; padding: 0; }
.afls-content label, .afls-content .swpm-desc, .afls-content .wpforms-field-label { display: block; font-weight: 600; font-family: var(--display); color: var(--blue); font-size: 14.5px; margin-bottom: 6px; }
.afls-content input[type=text], .afls-content input[type=email], .afls-content input[type=url], .afls-content input[type=tel], .afls-content input[type=number], .afls-content input[type=password], .afls-content input[type=search], .afls-content input[type=date], .afls-content select, .afls-content textarea {
  width: 100%; max-width: 520px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.afls-content input:focus, .afls-content select:focus, .afls-content textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(27,182,216,.15); }
.afls-content textarea { min-height: 130px; max-width: 100%; }
.afls-content input[type=submit], .afls-content button[type=submit], .afls-content .swpm-registration-submit, .afls-content .wpforms-submit {
  display: inline-block; font-family: var(--display); font-weight: 700; font-size: 15.5px; cursor: pointer;
  padding: 12px 28px; border: 0; border-radius: 999px; color: #2a1c00;
  background: linear-gradient(120deg, var(--gold), var(--gold-2)); box-shadow: 0 12px 26px -12px rgba(244,168,29,.6);
}
.afls-content input[type=checkbox], .afls-content input[type=radio] { width: auto; margin-right: 8px; }
.afls-content .wpforms-field-description, .afls-content .swpm-text-description { color: var(--muted); font-size: 13px; margin-top: 5px; }

/* ============================================================ EMBED CTA == */
/* Replaces broken third-party embeds (surveys, calendars, doc libraries). */
.afls-embed-cta { background: linear-gradient(120deg, var(--soft-2), #fff); border: 1px solid var(--line); border-left: 4px solid var(--cyan); border-radius: 14px; padding: 26px 28px; margin: 24px 0; box-shadow: var(--shadow); }
.afls-embed-cta h3 { margin: 0 0 8px; font-size: 20px; }
.afls-embed-cta p { color: var(--muted); margin: 0 0 16px; }

/* ============================================================ PEOPLE ===== */
.afls-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 860px){ .afls-people { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .afls-people { grid-template-columns: 1fr; } }
.afls-person { text-align: center; }
.afls-person img { width: 132px; height: 132px; object-fit: cover; border-radius: 50%; margin: 0 auto 14px; border: 3px solid #fff; box-shadow: 0 10px 24px -10px rgba(10,42,82,.5), 0 0 0 1px var(--line); background: var(--soft-2); }
.afls-person .name { font-family: var(--display); font-weight: 700; color: var(--blue); font-size: 16px; }
.afls-person .role { color: var(--muted); font-size: 13.5px; }

/* quote / testimonial */
.afls-quote { max-width: 860px; margin: 0 auto; text-align: center; }
.afls-quote blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.4; color: #fff; margin: 0 0 22px; }
.afls-quote blockquote::before { content: '\201C'; display: block; font-size: 70px; line-height: .6; color: var(--gold-2); margin-bottom: 10px; }
.afls-quote .by { display: inline-flex; align-items: center; gap: 14px; }
.afls-quote .by img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.5); }
.afls-quote .by b { color: #fff; display: block; font-family: var(--display); }
.afls-quote .by span { color: rgba(255,255,255,.75); font-size: 14px; }
.afls-quote-band { background: linear-gradient(135deg, #07203f, #0d3a72 60%, #1769b8 130%); }

/* ============================================================ CARDS+ ===== */
/* Branded placeholder for cards with no featured image (no more grey boxes). */
.afls-thumb-ph { display: grid; place-items: center; position: relative; overflow: hidden; }
.afls-thumb-ph::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px); background-size: 18px 18px; }
.afls-thumb-ph span { font-family: var(--display); font-weight: 800; font-size: 64px; color: rgba(255,255,255,.92); position: relative; z-index: 1; }
.afls-thumb-ph.ph-0 { background: linear-gradient(135deg, #0a2a52, #1769b8); }
.afls-thumb-ph.ph-1 { background: linear-gradient(135deg, #103e7e, #1bb6d8); }
.afls-thumb-ph.ph-2 { background: linear-gradient(135deg, #0a2a52, #14b8a6); }
.afls-thumb-ph.ph-3 { background: linear-gradient(135deg, #123a6b, #f4a81d); }
.afls-readmore { display: inline-block; margin-top: 12px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--blue-3); }
.afls-readmore::after { content: ' →'; transition: margin .15s; }
.afls-card:hover .afls-readmore::after { margin-left: 4px; }

/* pagination */
.afls-pagination { margin-top: 44px; }
.afls-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.afls-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--blue); font-family: var(--display); font-weight: 600; text-decoration: none; }
.afls-pagination .page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.afls-pagination .page-numbers:hover { border-color: var(--cyan); color: var(--cyan); }

/* ============================================================ POST HERO === */
.afls-page-hero.has-img { position: relative; overflow: hidden; padding: 0; min-height: 360px; display: flex; align-items: flex-end; }
.afls-page-hero.has-img .afls-hero-img { position: absolute; inset: 0; z-index: 0; }
.afls-page-hero.has-img .afls-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.afls-page-hero.has-img::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(7,32,63,.94) 0%, rgba(7,32,63,.55) 55%, rgba(7,32,63,.25) 100%); }
.afls-page-hero.has-img .afls-wrap { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 38px; }

/* ============================================================ CONTENT++ == */
/* Lead paragraph: make the opening of every article stand out. */
.afls-content > p:first-of-type { font-size: 19px; line-height: 1.6; color: #2a3a4d; }
/* Images & figures */
.afls-content img { border-radius: 12px; box-shadow: var(--shadow); }
.afls-content figure { margin: 26px 0; text-align: center; }
.afls-content figure img, .afls-content .wp-block-image img { display: inline-block; }
.afls-content figcaption, .afls-content .wp-caption-text { color: var(--muted); font-size: 13.5px; margin-top: 8px; font-style: italic; }
.afls-content .wp-caption { max-width: 100% !important; height: auto; background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 26px auto; }
.afls-content .alignleft { float: left; margin: 6px 26px 16px 0; max-width: 46%; }
.afls-content .alignright { float: right; margin: 6px 0 16px 26px; max-width: 46%; }
.afls-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.afls-content p > img:only-child { display: block; margin: 24px auto; }
@media (max-width: 600px){ .afls-content .alignleft, .afls-content .alignright { float: none; max-width: 100%; margin: 18px auto; } }
/* WordPress galleries -> responsive grid of rounded tiles */
.afls-content .wp-block-gallery, .afls-content .gallery { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 26px 0; }
.afls-content .gallery-item, .afls-content .wp-block-image { margin: 0 !important; width: auto !important; }
.afls-content .gallery img, .afls-content .wp-block-gallery img { width: 100%; height: 160px; object-fit: cover; margin: 0 !important; }
.afls-content .gallery br { display: none; }
/* Make embedded buttons/PDF links look like buttons */
.afls-content .wp-block-button__link, .afls-content a.button { display: inline-block; background: linear-gradient(120deg, var(--gold), var(--gold-2)); color: #2a1c00 !important; padding: 11px 22px; border-radius: 999px; font-family: var(--display); font-weight: 700; text-decoration: none; box-shadow: 0 12px 26px -12px rgba(244,168,29,.55); }
.afls-backlink { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); }
.afls-backlink a { font-family: var(--display); font-weight: 700; text-decoration: none; }
/* leftover bare "CONTENTS" labels from the source export */
.afls-content > p:only-child { margin-bottom: 0; }

/* ============================================================ HERO PHOTO = */
/* A real synchrotron storage-ring hall (Diamond Light Source, CC0) sits beneath
   the brand gradient, so the hero reads as "inside a light source" while the
   heavy blue overlay keeps the white headline fully legible. */
.afls-hero {
  background:
    radial-gradient(1100px 520px at 88% -10%, rgba(244,168,29,.20) 0%, transparent 55%),
    radial-gradient(900px 600px at 0% 120%, rgba(27,182,216,.18) 0%, transparent 55%),
    linear-gradient(120deg, rgba(7,32,63,.94) 0%, rgba(11,46,92,.88) 45%, rgba(13,58,114,.72) 100%),
    url(assets/img/synchrotron-hall-2000.webp) center 40% / cover no-repeat,
    #07203f;
}
@media (max-width: 760px){
  .afls-hero {
    background:
      radial-gradient(700px 420px at 88% -10%, rgba(244,168,29,.20) 0%, transparent 55%),
      linear-gradient(120deg, rgba(7,32,63,.95) 0%, rgba(11,46,92,.90) 60%, rgba(13,58,114,.80) 100%),
      url(assets/img/synchrotron-hall-1100.webp) center / cover no-repeat,
      #07203f;
  }
}

/* ============================================================ EXPLAINER == */
.afls-explain .afls-wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 50px; align-items: center; }
@media (max-width: 920px){ .afls-explain .afls-wrap { grid-template-columns: 1fr; gap: 34px; } }
.afls-explain .kicker { font-family: var(--display); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12.5px; color: var(--cyan); }
.afls-explain h2 { font-size: clamp(26px,3.4vw,38px); margin: 10px 0 14px; }
.afls-explain p { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.afls-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.afls-steps li { position: relative; padding-left: 44px; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.afls-steps b { font-family: var(--display); color: var(--blue); }
.afls-steps .n { position: absolute; left: 0; top: -1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue-3)); box-shadow: 0 6px 16px -6px rgba(27,182,216,.7); }
.afls-diagram { background: linear-gradient(160deg,#fff, var(--soft)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 24px 24px 16px; }
.afls-diagram svg { width: 100%; height: auto; display: block; }
.afls-diagram .cap { color: var(--muted); font-size: 12.5px; margin: 14px 4px 0; text-align: center; }

/* ============================================================ SHOWCASE === */
/* The wrap doubles as the card here, so the base .afls-wrap `0 24px` side padding
   would show as a white strip beside the flush-bleed image. Zero it and move the
   screen-edge gutter onto the section so narrow viewports still keep a margin. */
.afls-section.afls-showcase { padding-left: 24px; padding-right: 24px; }
.afls-showcase .afls-wrap { display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
@media (max-width: 820px){ .afls-showcase .afls-wrap { grid-template-columns: 1fr; } }
.afls-showcase .pic { position: relative; min-height: 340px; }
.afls-showcase .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.afls-showcase .pic .credit { position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: rgba(255,255,255,.75); background: rgba(7,32,63,.45); padding: 2px 7px; border-radius: 6px; backdrop-filter: blur(4px); }
.afls-showcase .txt { padding: 46px 48px; align-self: center; }
@media (max-width: 820px){ .afls-showcase .txt { padding: 36px 28px; } }
.afls-showcase .txt .kicker { font-family: var(--display); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 12.5px; color: var(--gold); }
.afls-showcase .txt h2 { font-size: clamp(24px,3vw,33px); margin: 8px 0 14px; }
.afls-showcase .txt p { color: var(--muted); font-size: 16.5px; margin: 0 0 20px; }
/* Reversed showcase: portrait on the right, text on the left (mirror of the default). */
.afls-showcase.reverse .afls-wrap { grid-template-columns: .95fr 1.05fr; }
.afls-showcase.reverse .pic { order: 2; }
@media (max-width: 820px){ .afls-showcase.reverse .afls-wrap { grid-template-columns: 1fr; } .afls-showcase.reverse .pic { order: 0; } }

/* full-width ring banner figure */
.afls-ringband { position: relative; overflow: hidden; }
.afls-ringband img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; display: block; }
.afls-ringband .cap { position: absolute; right: 12px; bottom: 10px; font-size: 11px; color: rgba(255,255,255,.8); background: rgba(7,32,63,.5); padding: 3px 9px; border-radius: 7px; backdrop-filter: blur(4px); }

/* ============================================================ CREDITS ==== */
.afls-credits { margin-top: 16px; }
.afls-credits summary { cursor: pointer; color: rgba(255,255,255,.5); font-size: 12.5px; list-style: none; }
.afls-credits summary::-webkit-details-marker { display: none; }
.afls-credits summary::before { content: '⊕ '; color: var(--gold-2); }
.afls-credits[open] summary::before { content: '⊖ '; }
.afls-credits ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: rgba(255,255,255,.45); columns: 2; column-gap: 28px; }
@media (max-width: 600px){ .afls-credits ul { columns: 1; } }
.afls-credits li { margin: 4px 0; break-inside: avoid; }
.afls-credits a { color: rgba(255,255,255,.62); text-decoration: underline; text-underline-offset: 2px; }
.afls-credits a:hover { color: var(--gold-2); }

/* ============================================================ ARTICLE KIT =
   Reusable structural components for restructuring imported pages/posts into
   coherent, professional layouts (used in place of raw scraped markup). */
.afls-content .lead, .afls-lead {
  font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.5;
  color: var(--blue-2); margin: 0 0 26px;
}
.afls-content .eyebrow, .afls-kicker {
  display: block; font-family: var(--display); font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; font-size: 12.5px; color: var(--cyan); margin: 0 0 6px;
}
.afls-content figure.afls-fig { margin: 30px 0; text-align: center; }
.afls-content figure.afls-fig img { display: inline-block; max-height: 560px; width: auto; }
.afls-content figure.afls-fig figcaption { color: var(--muted); font-size: 13.5px; margin-top: 10px; font-style: italic; }
.afls-content figure.afls-fig.full img { width: 100%; }
.afls-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin: 34px 0; }
.afls-split.media-right .afls-split-media { order: 2; }
.afls-split .afls-split-media img { width: 100%; border-radius: 14px; box-shadow: var(--shadow); margin: 0; }
.afls-split .afls-split-body > :first-child { margin-top: 0; }
.afls-split .afls-split-body > :last-child { margin-bottom: 0; }
@media (max-width: 760px){ .afls-split { grid-template-columns: 1fr; gap: 20px; } .afls-split.media-right .afls-split-media { order: 0; } }
.afls-callout { background: var(--soft); border: 1px solid var(--line); border-left: 4px solid var(--cyan);
  border-radius: 0 14px 14px 0; padding: 22px 26px; margin: 26px 0; box-shadow: var(--shadow); }
.afls-callout.gold { border-left-color: var(--gold); }
.afls-callout h3, .afls-callout h4 { margin: 0 0 10px; font-size: 18px; }
.afls-callout > :last-child { margin-bottom: 0; }
.afls-callout .afls-kicker { margin-bottom: 4px; }
.afls-facts { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 22px 0; }
.afls-facts dt { font-family: var(--display); font-weight: 700; color: var(--blue); font-size: 14.5px; }
.afls-facts dd { margin: 0; color: var(--ink); }
@media (max-width: 560px){ .afls-facts { grid-template-columns: 1fr; gap: 2px 0; } .afls-facts dd { margin-bottom: 12px; } }
.afls-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; margin: 28px 0; }
.afls-statrow .stat { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 20px; text-align: center; }
.afls-statrow .stat b { display: block; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--blue); line-height: 1.1; }
.afls-statrow .stat span { color: var(--muted); font-size: 13.5px; }
.afls-profile { display: grid; grid-template-columns: 150px 1fr; gap: 24px; align-items: start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin: 22px 0; box-shadow: var(--shadow); }
.afls-profile img { width: 150px; height: 150px; object-fit: cover; border-radius: 14px; margin: 0; box-shadow: none; background: var(--soft-2); }
.afls-profile .afls-profile-body > :first-child { margin-top: 0; }
.afls-profile .afls-profile-body > :last-child { margin-bottom: 0; }
.afls-profile .pname { font-family: var(--display); font-weight: 700; color: var(--blue); font-size: 19px; margin: 0 0 2px; }
.afls-profile .prole { color: var(--cyan); font-weight: 600; font-size: 14.5px; margin: 0 0 12px; }
@media (max-width: 560px){ .afls-profile { grid-template-columns: 1fr; gap: 14px; } .afls-profile img { width: 120px; height: 120px; } }
.afls-figrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; align-items: center; margin: 28px 0; }
.afls-figrow figure { margin: 0; text-align: center; }
.afls-figrow img { margin: 0 auto; max-height: 90px; width: auto; box-shadow: none; border-radius: 8px; }
.afls-figrow.cards figure { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px; box-shadow: var(--shadow); display: grid; place-items: center; min-height: 120px; }
.afls-timeline { list-style: none; margin: 28px 0; padding: 0; position: relative; }
.afls-timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.afls-timeline li { position: relative; padding: 0 0 22px 38px; }
.afls-timeline li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--soft); }
.afls-timeline .when { font-family: var(--display); font-weight: 700; color: var(--blue-3); font-size: 14px; }
.afls-timeline .what { margin: 2px 0 0; }
.afls-divider { border: 0; height: 1px; background: var(--line); margin: 40px 0; }
.afls-content .afls-pullquote { border: 0; background: none; padding: 8px 0 8px 26px; border-left: 4px solid var(--gold);
  font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.4; color: var(--blue-2); margin: 30px 0; }

/* =================================================== SCIENCE OBSERVATORY ==
   Embedded Apache Superset charts/dashboards (see functions.php shortcodes
   [afls_observatory] / [afls_chart] / [afls_dashboard]). The iframes render on
   Superset's dark "Observatory Night" canvas, so we frame them as deliberate
   dark insets within the light editorial pages. */
.afls-observatory {
  /* full-bleed: break out of the content column to the full viewport width, with
     the inner content centred to a max ~1440px. Lets the chart grid breathe and
     fit 4 charts side by side on a laptop. */
  margin: 44px calc(50% - 50vw);
  /* horizontal padding centres the inner content on the SAME 1152px column the
     rest of the page uses (50vw - (maxw-2*gutter)/2), so charts line up with the
     sections above/below while the dark band itself still bleeds full-width. */
  padding: 52px max(24px, calc(50vw - 576px));
  border-radius: 0;
  background:
    radial-gradient(ellipse 120% 90% at 90% 0%, rgba(244,168,29,.10) 0%, transparent 55%),
    radial-gradient(ellipse 90% 100% at 0% 100%, rgba(27,182,216,.10) 0%, transparent 48%),
    linear-gradient(160deg, #081634 0%, #05122b 100%);
  border-top: 1px solid rgba(95,224,240,.18);
  border-bottom: 1px solid rgba(95,224,240,.18);
  box-shadow: inset 0 0 60px -20px rgba(95,224,240,.12);
  color: #eaf1ff;
}
.afls-observatory__head { max-width: 760px; margin: 0 0 22px; }
.afls-observatory__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gold-2);
}
.afls-observatory__eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px 1px rgba(244,168,29,.8);
}
.afls-observatory__h {
  color: #fff; font-size: 28px; margin: 8px 0 6px; line-height: 1.18;
  background: linear-gradient(120deg, #ffffff 0%, #9ff0e6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.afls-observatory__intro { color: rgba(234,241,255,.72); font-size: 16px; margin: 0; }

.afls-observatory__grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.afls-observatory.cols-2 .afls-observatory__grid { grid-template-columns: repeat(2, 1fr); }
.afls-observatory.cols-3 .afls-observatory__grid { grid-template-columns: repeat(3, 1fr); }
.afls-observatory.cols-4 .afls-observatory__grid { grid-template-columns: repeat(4, 1fr); }
/* laptop & up = the column count above; tablet halves it; phone is single. */
@media (max-width: 1180px){
  .afls-observatory.cols-4 .afls-observatory__grid,
  .afls-observatory.cols-3 .afls-observatory__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){ .afls-observatory.cols-2 .afls-observatory__grid { grid-template-columns: 1fr; } }
@media (max-width: 680px){ .afls-observatory .afls-observatory__grid { grid-template-columns: 1fr !important; } }
/* A dashboard embed always spans the full width of the grid. */
.afls-observatory__item.is-dashboard { grid-column: 1 / -1; }

.afls-observatory__item {
  margin: 0; display: flex; flex-direction: column;
  background: rgba(8,18,44,.55);
  border: 1px solid rgba(95,224,240,.16);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.8);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.afls-observatory__item:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -20px rgba(0,0,0,.85), 0 0 24px -8px rgba(27,182,216,.35); }
.afls-observatory__frame { position: relative; width: 100%; height: var(--afls-embed-h, 460px); background: #05122b; overflow: hidden; }
/* The embed is a cross-origin Superset page, so we can't style its document to
   hide its scrollbars. Instead, over-size the iframe by ~one scrollbar width and
   let the frame clip it, so the inner scrollbars fall outside the visible area. */
/* The leading .afls-content lifts specificity above the responsive-media safety
   net's `.afls-content iframe { height:auto; width:100% }` (equal-specificity tie
   defined later in this file) so the embed keeps its full --afls-embed-h box
   instead of collapsing to the 150px iframe default and clipping the chart. */
.afls-observatory__frame iframe,
.afls-content .afls-observatory__frame iframe { position: absolute; top: 0; left: 0; width: calc(100% + 18px); height: calc(100% + 18px); border: 0; display: block; }

.afls-observatory__cap { flex: 1 1 auto; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; border-top: 1px solid rgba(95,224,240,.12); }
.afls-observatory__kicker { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(95,224,240,.75); font-weight: 600; }
.afls-observatory__title { font-family: var(--display); color: #fff; font-size: 16.5px; line-height: 1.3; }
.afls-observatory__desc { color: rgba(234,241,255,.66); font-size: 13.5px; line-height: 1.5; }
/* margin-top:auto pins the link to the bottom so it lines up across every tile in a row */
.afls-observatory__link { align-self: flex-start; margin-top: auto; padding-top: 8px; color: var(--gold-2); font-weight: 600; font-size: 13.5px; }
.afls-observatory__link:hover { color: #fff; }

.afls-observatory__foot { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.afls-observatory__cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-2) 100%);
  color: #1a1206 !important; font-family: var(--display); font-weight: 700; font-size: 15px;
  padding: 12px 22px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(244,168,29,.6);
}
.afls-observatory__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.afls-observatory__note { color: rgba(234,241,255,.5); font-size: 12.5px; }
@media (max-width: 560px){ .afls-observatory { padding: 28px max(16px, calc(50vw - 576px)); } .afls-observatory__h { font-size: 23px; } }

/* ===================================================== RESEARCHER DATA (BLUE) ==
   The "Researcher Data" hub and its chart-exposé children get a distinct BLUE
   background + light typography so the data section reads as a separate space
   from the white main site. Applied via the `afls-data` body class (functions.php). */
body.afls-data {
  background:
    radial-gradient(1200px 600px at 85% -5%, rgba(27,182,216,.16) 0%, transparent 55%),
    radial-gradient(1000px 700px at -5% 100%, rgba(244,168,29,.10) 0%, transparent 50%),
    linear-gradient(180deg, #07203f 0%, #0a2a52 45%, #081a38 100%);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}
body.afls-data .afls-page-hero {
  background: transparent; border-bottom: 1px solid rgba(95,224,240,.18);
}
body.afls-data .afls-page-hero h1 { color: #fff; }
body.afls-data .afls-page-hero .crumbs,
body.afls-data .afls-page-hero .crumbs a { color: rgba(234,241,255,.72); }
body.afls-data .afls-page-hero .crumbs a:hover { color: var(--gold-2); }
body.afls-data .afls-main { background: transparent; }
body.afls-data .afls-content { color: rgba(234,241,255,.82); }
/* Widen the data-page column to the full 1152px grid and align it with the
   full-bleed observatory bands (which also start at the 144px content edge), so
   headings, prose, cards and chart grids all share one left margin. Running
   prose is held to a readable measure inside the wider column. */
body.afls-data .afls-content,
body.afls-data .afls-page-hero .afls-wrap { max-width: var(--maxw); }
body.afls-data .afls-content > p { max-width: 880px; }
body.afls-data .afls-content h1,
body.afls-data .afls-content h2,
body.afls-data .afls-content h3,
body.afls-data .afls-content h4 { color: #fff; }
body.afls-data .afls-content strong { color: #fff; }
body.afls-data .afls-content a { color: var(--gold-2); }
body.afls-data .afls-content a:hover { color: #fff; }
body.afls-data .afls-content blockquote {
  border-left: 3px solid var(--cyan); background: rgba(95,224,240,.07);
  color: #eaf1ff; border-radius: 0 10px 10px 0; padding: 12px 18px;
}
body.afls-data .afls-content hr { border-color: rgba(95,224,240,.18); }
/* a lead intro paragraph on data pages */
body.afls-data .afls-content .afls-lead { font-size: 19px; color: #eaf1ff; line-height: 1.6; }
/* on blue pages the observatory band uses transparent borders so it blends as one
   continuous data surface rather than a boxed inset */
body.afls-data .afls-observatory {
  background:
    radial-gradient(ellipse 120% 90% at 90% 0%, rgba(244,168,29,.10) 0%, transparent 55%),
    radial-gradient(ellipse 90% 100% at 0% 100%, rgba(27,182,216,.12) 0%, transparent 48%),
    linear-gradient(160deg, rgba(8,22,52,.55) 0%, rgba(5,18,43,.65) 100%);
  border-top: 1px solid rgba(95,224,240,.16); border-bottom: 1px solid rgba(95,224,240,.16);
}
/* exposé cards — links to each chart story */
body.afls-data .afls-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 30px 0 8px; }
@media (max-width: 1080px){ body.afls-data .afls-data-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ body.afls-data .afls-data-grid { grid-template-columns: 1fr; } }
body.afls-data .afls-data-card {
  display: flex; flex-direction: column; gap: 7px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(95,224,240,.16);
  border-radius: 14px; padding: 22px 22px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
body.afls-data .afls-data-card:hover {
  transform: translateY(-3px); background: rgba(95,224,240,.08);
  border-color: rgba(95,224,240,.38); box-shadow: 0 18px 40px -22px rgba(0,0,0,.8), 0 0 22px -10px rgba(27,182,216,.4);
}
body.afls-data .afls-data-card h3 { margin: 0; font-size: 17.5px; color: var(--gold-2); }
body.afls-data .afls-data-card:hover h3 { color: #fff; }
body.afls-data .afls-data-card p { margin: 0; color: rgba(234,241,255,.78); font-size: 14.5px; line-height: 1.55; }

/* ============================================================ ORG CHART ===
   Visual organizational chart (replaces the old PDF). On-brand tiered tree. */
.afls-org { margin: 32px 0 10px; }
.afls-org-top {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  border-radius: 18px; padding: 30px 24px;
  background: radial-gradient(820px 320px at 82% -25%, rgba(244,168,29,.30), transparent 60%),
              linear-gradient(135deg, #07203f 0%, #0d3a72 60%, #1769b8 130%);
  box-shadow: var(--shadow-lg);
}
.afls-org-top::after { content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 92%); mask-image: linear-gradient(180deg,#000,transparent 92%); }
.afls-org-top h2 { color:#fff; margin:0; border:0; padding:0; position:relative; z-index:1; font-size: clamp(22px,3.2vw,33px); }
.afls-org-top p { color: rgba(255,255,255,.82); margin:7px 0 0; position:relative; z-index:1; font-size:15px; }
.afls-org-spine { width:2px; height:26px; margin:0 auto; background: linear-gradient(var(--cyan), rgba(27,182,216,.15)); }
.afls-org-tier { margin:0; }
.afls-org-tier-label { text-align:center; font-family:var(--display); font-weight:700; letter-spacing:2px;
  text-transform:uppercase; font-size:12px; color:var(--cyan); margin:6px 0 16px; }
.afls-org-lead { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:780px; margin:0 auto; }
@media (max-width:620px){ .afls-org-lead { grid-template-columns:1fr; } }
.afls-org-card { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 20px 18px;
  position:relative; overflow:hidden; box-shadow:var(--shadow); display:block; color:inherit;
  transition: transform .18s, box-shadow .18s, border-color .18s; }
.afls-org-card::before { content:''; position:absolute; inset:0 0 auto 0; height:4px;
  background: linear-gradient(90deg, var(--cyan), var(--gold)); transform:scaleX(0); transform-origin:left; transition: transform .25s; }
a.afls-org-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
a.afls-org-card:hover::before { transform: scaleX(1); }
.afls-org-card .ico { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:23px;
  margin-bottom:12px; background: linear-gradient(135deg, var(--soft-2), #fff); border:1px solid var(--line); }
.afls-org-card .t { font-family:var(--display); font-weight:700; color:var(--blue); font-size:16px; line-height:1.25; margin:0 0 5px; }
.afls-org-card .d { color:var(--muted); font-size:13.5px; margin:0; line-height:1.5; }
.afls-org-card .go { display:inline-block; margin-top:11px; font-family:var(--display); font-weight:700; font-size:13px; color:var(--blue-3); }
.afls-org-card .go::after { content:' →'; transition: margin .15s; }
a.afls-org-card:hover .go::after { margin-left:4px; }
.afls-org-card.is-exec { border-color: var(--gold); box-shadow: 0 20px 44px -22px rgba(244,168,29,.55); }
.afls-org-card.is-exec .ico { background: linear-gradient(135deg, var(--gold), var(--gold-2)); border-color: transparent; }
.afls-org-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
@media (max-width:860px){ .afls-org-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width:560px){ .afls-org-grid { grid-template-columns: 1fr; } }
.afls-org-sub { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }
.afls-org-pill { font-family:var(--display); font-weight:600; font-size:12.5px; color:var(--blue-2);
  background: var(--soft-2); border:1px solid var(--line); border-radius:999px; padding:5px 11px; }
.afls-org-tf { background: linear-gradient(120deg, #fff, var(--soft)); border:1px solid var(--line);
  border-radius:18px; padding:24px; position:relative; overflow:hidden; }
.afls-org-tf::before { content:''; position:absolute; inset:0 0 auto 0; height:5px; background: linear-gradient(90deg, var(--gold), var(--cyan)); }
.afls-org-legend { display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; margin:22px 0 0; color:var(--muted); font-size:13px; }
.afls-org-legend span { display:inline-flex; align-items:center; gap:7px; }
.afls-org-legend i { width:13px; height:13px; border-radius:4px; display:inline-block; }

/* ============================================================ COMMITTEE == */
/* Profile grid rendered by the [afls_committee] shortcode. When placed inside
   the 860px article column it breaks out a little wider so 3–4 cards breathe. */
.afls-content .afls-committee { width: min(1080px, 94vw); margin-left: 50%; transform: translateX(-50%); }
.afls-committee { display: grid; gap: 34px 24px; margin: 30px 0 8px; }
.afls-committee.cols-4 { grid-template-columns: repeat(4, 1fr); }
.afls-committee.cols-3 { grid-template-columns: repeat(3, 1fr); }
.afls-committee.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .afls-committee.cols-4, .afls-committee.cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .afls-committee { grid-template-columns: 1fr !important; } }

.afls-member { text-align: center; }
.afls-member-photo { width: 152px; height: 152px; margin: 0 auto 16px; }
/* The leading .afls-content lifts specificity above the responsive-media safety
   net's `.afls-content img { height: auto }` (equal-specificity tie, defined
   later) so these avatars keep their square 152×152 box and render as circles. */
.afls-member-photo img, .afls-content .afls-member-photo img { width: 152px; height: 152px; object-fit: cover; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 14px 30px -12px rgba(10,42,82,.55), 0 0 0 1px var(--line); background: var(--soft-2); margin: 0; }
.afls-member-ph { display: grid; place-items: center; width: 152px; height: 152px; border-radius: 50%;
  font-family: var(--display); font-weight: 800; font-size: 56px; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan)); box-shadow: 0 14px 30px -12px rgba(10,42,82,.55); }
.afls-member-name { font-size: 17.5px; margin: 0 0 3px; color: var(--blue); line-height: 1.25; }
.afls-member-role { font-family: var(--display); font-weight: 700; font-size: 12.5px; letter-spacing: .4px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.afls-member-aff { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.afls-member-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.afls-soc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  color: var(--blue-3); background: var(--soft); border: 1px solid var(--line); transition: transform .15s, background .15s, color .15s, border-color .15s; }
.afls-soc svg { width: 17px; height: 17px; }
.afls-soc:hover { color: #fff; background: var(--blue-3); border-color: var(--blue-3); transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(23,105,184,.7); }
.afls-soc-twitter:hover  { background: #111;     border-color: #111; }
.afls-soc-linkedin:hover { background: #0a66c2;  border-color: #0a66c2; }
.afls-soc-orcid:hover    { background: #a6ce39;  border-color: #a6ce39; color: #1a3409; }
.afls-soc-scholar:hover  { background: #4285f4;  border-color: #4285f4; }
.afls-soc-email:hover    { background: var(--gold); border-color: var(--gold); color: #2a1c00; }
.afls-committee-empty { text-align: center; color: var(--muted); }

/* ============================================================ JOIN / MEMBERSHIP =
   Full-width membership landing (page-membership-join.php). */
.afls-join-split { display:grid; grid-template-columns: 1.05fr .95fr; gap:38px; align-items:center; }
@media (max-width:820px){ .afls-join-split { grid-template-columns:1fr; gap:28px; } }
.afls-plan { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; }
.afls-plan-head { background: linear-gradient(135deg,#07203f,#0d3a72 60%,#1769b8 130%); color:#fff; padding:26px 28px 24px; position:relative; overflow:hidden; }
.afls-plan-head::after { content:''; position:absolute; inset:0; opacity:.5; pointer-events:none; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:20px 20px; -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.afls-plan-head .badge { position:relative; z-index:1; display:inline-block; font-family:var(--display); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:11.5px; color:var(--gold-2); background:rgba(244,168,29,.15); border:1px solid rgba(244,168,29,.4); padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.afls-plan-head h3 { position:relative; z-index:1; color:#fff; margin:0; font-size:23px; }
.afls-plan-head .price { position:relative; z-index:1; font-family:var(--display); font-weight:800; font-size:42px; margin:8px 0 0; line-height:1; }
.afls-plan-head .price small { font-size:15px; font-weight:600; color:rgba(255,255,255,.72); }
.afls-plan-body { padding:22px 28px 28px; }
.afls-plan-check { list-style:none; margin:0 0 22px; padding:0; }
.afls-plan-check li { position:relative; padding:9px 0 9px 32px; border-bottom:1px solid var(--soft-2); color:var(--ink); font-size:15px; }
.afls-plan-check li:last-child { border-bottom:0; }
.afls-plan-check li::before { content:'\2713'; position:absolute; left:0; top:9px; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--blue-3)); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; }
.afls-join-who h3 { font-size:22px; margin:0 0 10px; }
.afls-join-who p { color:var(--muted); }
.afls-join-who ul { margin:14px 0 0; padding-left:0; list-style:none; }
.afls-join-who li { position:relative; padding:6px 0 6px 28px; color:var(--ink); }
.afls-join-who li::before { content:'\2192'; position:absolute; left:0; top:6px; color:var(--cyan); font-weight:700; }
/* Embedded SWPM registration form: center it in a card */
.afls-join-form { max-width:640px; margin:0 auto; }
.afls-join-form form { box-shadow:var(--shadow-lg); }
.afls-join-login { text-align:center; margin-top:20px; color:var(--muted); }
/* FAQ accordion */
.afls-faq details { background:#fff; border:1px solid var(--line); border-radius:12px; margin:0 0 12px; box-shadow:var(--shadow); overflow:hidden; }
.afls-faq summary { cursor:pointer; list-style:none; padding:18px 22px; font-family:var(--display); font-weight:700; color:var(--blue); font-size:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.afls-faq summary::-webkit-details-marker { display:none; }
.afls-faq summary::after { content:'+'; color:var(--cyan); font-size:26px; font-weight:400; line-height:1; transition:transform .2s; }
.afls-faq details[open] summary::after { transform:rotate(45deg); }
.afls-faq .a { padding:0 22px 20px; color:var(--muted); }
.afls-faq .a p { margin:0 0 10px; } .afls-faq .a > :last-child { margin-bottom:0; }

/* ============================================================ NEWSLETTER ===
   Full-width newsletter landing (page-newsletter.php): subscribe + archive. */
.afls-nl-split { display:grid; grid-template-columns:.82fr 1.18fr; gap:42px; align-items:center; }
@media (max-width:840px){ .afls-nl-split { grid-template-columns:1fr; gap:30px; } }
.afls-nl-preview img { width:100%; max-width:360px; margin:0 auto; border-radius:12px; box-shadow:var(--shadow-lg); border:1px solid var(--line); display:block; }
.afls-nl-preview .tag { display:block; text-align:center; margin-top:14px; color:var(--muted); font-size:13px; font-style:italic; }
.afls-nl-form { background:#fff; border:1px solid var(--line); border-radius:18px; padding:28px 30px 26px; box-shadow:var(--shadow-lg); }
.afls-nl-form h3 { margin:0 0 6px; font-size:23px; }
.afls-nl-form .sub { color:var(--muted); margin:0 0 18px; font-size:15.5px; }
.afls-nl-fields { display:flex; flex-direction:column; gap:14px; }
.afls-nl-fields input[type=text], .afls-nl-fields input[type=email] { width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:15.5px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.afls-nl-fields input[type=text]:focus, .afls-nl-fields input[type=email]:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(27,182,216,.15); }
.afls-nl-consent { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.45; }
.afls-nl-consent input { margin-top:3px; width:auto; flex:0 0 auto; }
.afls-nl-fields input[type=submit] { margin-top:4px; width:100%; cursor:pointer; font-family:var(--display); font-weight:700; font-size:16px; padding:14px; border:0; border-radius:999px; color:#2a1c00; background:linear-gradient(120deg,var(--gold),var(--gold-2)); box-shadow:0 14px 30px -12px rgba(244,168,29,.6); transition:transform .15s; }
.afls-nl-fields input[type=submit]:hover { transform:translateY(-2px); }
.afls-nl-form .wpcf7-spinner { margin:0 auto; display:block; }
.afls-nl-form .wpcf7-response-output { margin:14px 0 0 !important; border-radius:10px; padding:12px 14px !important; font-size:14px; }
.afls-nl-after { margin:16px 0 0; font-size:13.5px; color:var(--muted); text-align:center; }
.afls-nl-note { margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; }
.afls-nl-note b { color:var(--cyan); }
/* Archive issue cards */
.afls-nl-archive { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:980px){ .afls-nl-archive { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .afls-nl-archive { grid-template-columns:1fr; } }
.afls-nl-issue { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; }
.afls-nl-issue:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.afls-nl-issue .cover { aspect-ratio:1/1.28; overflow:hidden; border-bottom:1px solid var(--line); background:var(--soft-2); }
.afls-nl-issue .cover img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.afls-nl-issue .cover-ph { width:100%; height:100%; display:grid; place-items:center; position:relative; color:#fff; text-align:center; }
.afls-nl-issue .cover-ph::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px); background-size:16px 16px; -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); }
.afls-nl-issue .cover-ph .ph-in { position:relative; z-index:1; font-family:var(--display); font-weight:800; line-height:1.1; }
.afls-nl-issue .cover-ph .v { font-size:13px; letter-spacing:1.5px; text-transform:uppercase; opacity:.86; }
.afls-nl-issue .cover-ph .i { font-size:42px; margin-top:8px; }
.afls-nl-issue .cover-ph.a { background:linear-gradient(135deg,#0a2a52,#1769b8); }
.afls-nl-issue .cover-ph.b { background:linear-gradient(135deg,#103e7e,#1bb6d8); }
.afls-nl-issue .cover-ph.c { background:linear-gradient(135deg,#0a2a52,#14b8a6); }
.afls-nl-issue .ibody { padding:16px 18px 18px; }
.afls-nl-issue .date { color:var(--gold); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.afls-nl-issue h3 { font-size:16px; margin:0 0 7px; }
.afls-nl-issue p { color:var(--muted); font-size:13.5px; margin:0; line-height:1.5; }

/* ===================================================== JOIN PAGE EXTRAS == */
/* SVG icons inside the feature "chip" (benefit cards on the Join page). */
.afls-feature .ico svg { width: 26px; height: 26px; color: var(--blue-3); }
/* Numbered step chips for the "How joining works" flow. */
.afls-howjoin .ico-num { background: linear-gradient(135deg, var(--cyan), var(--blue-3)); border: 0;
  color: #fff; font-family: var(--display); font-weight: 800; font-size: 22px; }
/* Reassurance note under the registration form. */
.afls-join-note { margin: 18px auto 0; max-width: 560px; text-align: center;
  color: var(--muted); font-size: 13.5px; line-height: 1.55; }

/* ===================================================== MEMBER LOGIN ======= */
/* Clean, centred login card around SWPM's [swpm_login_form] (page-membership-login.php). */
.afls-login { max-width: 480px; margin: 0 auto; }
.afls-login-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px; box-shadow: var(--shadow); }
.afls-login-card .swpm-login-form-inner > div { margin: 0 0 16px; }
.afls-login-card .swpm-label { display: block; font-family: var(--display); font-weight: 600;
  color: var(--blue); font-size: 14.5px; margin-bottom: 6px; }
.afls-login-card .swpm-text-field { width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .15s, box-shadow .15s; }
.afls-login-card .swpm-text-field:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(27,182,216,.15); }
/* Remember-me row: checkbox inline with its label (the bug being fixed). */
.afls-login-card .swpm-remember-me { display: flex; align-items: center; gap: 8px; margin: 2px 0 18px; }
.afls-login-card .swpm-remember-checkbox { display: inline-flex; margin: 0; }
.afls-login-card .swpm-remember-me input { width: auto; margin: 0; }
.afls-login-card .swpm-rememberme-label { display: inline; margin: 0; font-family: var(--font);
  font-weight: 500; color: var(--ink); font-size: 14px; cursor: pointer; }
/* Gold pill submit, full width. */
.afls-login-card .swpm-login-submit { margin: 4px 0 0; }
.afls-login-card .swpm-login-form-submit { display: block; width: 100%; cursor: pointer;
  font-family: var(--display); font-weight: 700; font-size: 15.5px; padding: 13px 30px; border: 0;
  border-radius: 999px; color: #2a1c00; background: linear-gradient(120deg, var(--gold), var(--gold-2));
  box-shadow: 0 12px 26px -12px rgba(244,168,29,.6); transition: transform .15s, box-shadow .15s; }
.afls-login-card .swpm-login-form-submit:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(244,168,29,.75); }
.afls-login-card .swpm-forgot-pass-link { margin-top: 16px; font-size: 14.5px; text-align: center; }
.afls-login-card .swpm-forgot-pass-link a { font-family: var(--display); font-weight: 600; }
.afls-login-card .swpm-join-us-link { display: none; } /* duplicated by .afls-login-alt below the card */
.afls-login-card .swpm-login-action-msg { margin-top: 12px; text-align: center; }
.afls-login-card .swpm-login-widget-action-msg { color: #b3261e; font-size: 14px; }
.afls-login-alt { text-align: center; color: var(--muted); font-size: 14.5px; margin: 18px 0 0; }
.afls-login-done { text-align: center; }
.afls-login-done .lead { margin: 0 0 18px; }

/* ============================================================ PROFILE FIX =
   Image-less profile cards must not reserve the 150px photo column (otherwise
   the body is squished into a sliver). Also: a responsive directory grid for
   grouped no-photo cards (facility/lab listings, etc.). */
.afls-profile:not(:has(> img)) { grid-template-columns: 1fr; }
.afls-profiles-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:20px; margin:26px 0; }
.afls-profiles-grid .afls-profile { grid-template-columns:1fr; margin:0; padding:22px 22px 20px; position:relative; overflow:hidden; transition:transform .18s, box-shadow .18s, border-color .18s; }
.afls-profiles-grid .afls-profile::before { content:''; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--cyan),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.afls-profiles-grid .afls-profile:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; }
.afls-profiles-grid .afls-profile:hover::before { transform:scaleX(1); }
.afls-profiles-grid .afls-profile .pname { font-size:17px; }
.afls-profiles-grid .afls-profile .prole { margin-bottom:10px; }
.afls-profiles-grid .afls-profile .afls-profile-body > p:last-child { margin-bottom:0; }

/* ============================================================ MEMBER AREA =
   Member dashboard / profile (page-membership-profile.php). */
.afls-mp-hero { background:linear-gradient(135deg,#07203f,#0d3a72 60%,#1769b8 130%); color:#fff; padding:38px 0 34px; position:relative; overflow:hidden; }
.afls-mp-hero::after { content:''; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px); background-size:24px 24px; -webkit-mask-image:linear-gradient(180deg,#000,transparent 90%); mask-image:linear-gradient(180deg,#000,transparent 90%); }
.afls-mp-hero .afls-wrap { position:relative; z-index:1; }
.afls-mp-hero .eyebrow { display:inline-block; font-family:var(--display); font-weight:700; letter-spacing:2px; text-transform:uppercase; font-size:12px; color:var(--gold-2); }
.afls-mp-hero h1 { color:#fff; margin:6px 0 0; font-size:clamp(25px,3.2vw,36px); }
.afls-mp-hero p { color:rgba(255,255,255,.82); margin:6px 0 0; }
.afls-mp-main-wrap { padding:36px 0 64px; }
.afls-mp-announce { background:linear-gradient(120deg,var(--soft-2),#fff); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:12px; padding:14px 18px; margin:0 0 26px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow); }
.afls-mp-announce .ic { font-size:20px; flex:0 0 auto; }
.afls-mp-announce p { margin:0; font-size:14.5px; color:var(--ink); }
.afls-mp-layout { display:grid; grid-template-columns:280px 1fr; gap:30px; align-items:start; }
@media (max-width:880px){ .afls-mp-layout { grid-template-columns:1fr; } }
.afls-mp-side { position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
@media (max-width:880px){ .afls-mp-side { position:static; } }
.afls-mp-usercard { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:24px; text-align:center; }
.afls-mp-avatar { width:84px; height:84px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:30px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-3)); box-shadow:0 10px 24px -10px rgba(10,42,82,.5); overflow:hidden; }
.afls-mp-avatar img { width:100%; height:100%; object-fit:cover; }
.afls-mp-usercard .nm { font-family:var(--display); font-weight:700; color:var(--blue); font-size:18px; }
.afls-mp-usercard .un { color:var(--muted); font-size:13px; margin-top:2px; }
.afls-mp-badges { margin-top:13px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.afls-mp-badge { display:inline-block; font-family:var(--display); font-weight:700; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; padding:5px 11px; border-radius:999px; }
.afls-mp-badge.lvl { color:#2a1c00; background:linear-gradient(120deg,var(--gold),var(--gold-2)); }
.afls-mp-badge.st-active { color:#0a6b2f; background:#e3f6ea; border:1px solid #b8e6c8; }
.afls-mp-badge.st-pending { color:#8a5a00; background:#fdf1d8; border:1px solid #f3d9a0; }
.afls-mp-nav { background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:8px; }
.afls-mp-nav a { display:flex; align-items:center; gap:11px; padding:11px 14px; border-radius:10px; color:var(--ink); font-family:var(--display); font-weight:600; font-size:14.5px; cursor:pointer; }
.afls-mp-nav a svg { width:18px; height:18px; flex:0 0 auto; color:var(--blue-3); }
.afls-mp-nav a:hover { background:var(--soft-2); color:var(--blue); }
.afls-mp-nav a.active { background:linear-gradient(120deg,var(--blue),var(--blue-3)); color:#fff; }
.afls-mp-nav a.active svg { color:#fff; }
.afls-mp-logout { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--blue); font-family:var(--display); font-weight:700; font-size:14.5px; box-shadow:var(--shadow); }
.afls-mp-logout:hover { border-color:#e7b9b4; color:#b4392f; background:#fff6f5; }
.afls-mp-main { min-width:0; }
.afls-mp-panel { display:none; animation:afls-fade .25s ease; }
.afls-mp-panel.active { display:block; }
@keyframes afls-fade { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }
.afls-mp-panel > h2 { font-size:24px; margin:0 0 4px; border:0; padding:0; }
.afls-mp-panel > .pintro { color:var(--muted); margin:0 0 22px; }
.afls-mp-block { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); padding:26px 28px; margin:0 0 22px; }
.afls-mp-block > h3 { margin:0 0 16px; font-size:18px; }
.afls-mp-block > :last-child { margin-bottom:0; }
.afls-mp-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:0 0 22px; }
.afls-mp-stat { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); }
.afls-mp-stat .k { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.afls-mp-stat .v { font-family:var(--display); font-weight:700; color:var(--blue); font-size:18px; margin-top:5px; word-break:break-word; }
.afls-mp-check { list-style:none; margin:0; padding:0; }
.afls-mp-check li { display:flex; align-items:flex-start; gap:13px; padding:13px 0; border-bottom:1px solid var(--soft-2); }
.afls-mp-check li:last-child { border-bottom:0; }
.afls-mp-check .tick { width:24px; height:24px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-size:13px; font-weight:700; margin-top:1px; }
.afls-mp-check .done .tick { background:var(--cyan); color:#fff; }
.afls-mp-check .todo .tick { background:#fff; color:var(--muted); border:1px solid var(--line); }
.afls-mp-check .ct { font-family:var(--display); font-weight:700; color:var(--ink); font-size:15px; }
.afls-mp-check .cd { color:var(--muted); font-size:13.5px; margin-top:1px; }
.afls-mp-check .cd a { font-weight:700; }
.afls-mp-quick { display:grid; grid-template-columns:repeat(auto-fill,minmax(176px,1fr)); gap:16px; }
.afls-mp-quick a { display:block; background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow); color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s; }
.afls-mp-quick a:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:transparent; }
.afls-mp-quick .qi { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; margin-bottom:11px; background:linear-gradient(135deg,var(--soft-2),#fff); border:1px solid var(--line); color:var(--blue-3); }
.afls-mp-quick .qi svg { width:20px; height:20px; }
.afls-mp-quick .qt { font-family:var(--display); font-weight:700; color:var(--blue); font-size:15px; }
.afls-mp-quick .qd { color:var(--muted); font-size:12.5px; margin-top:3px; }
.afls-mp-detail { display:grid; grid-template-columns:170px 1fr; gap:12px 18px; margin:0; }
@media(max-width:520px){ .afls-mp-detail{ grid-template-columns:1fr; gap:3px; } }
.afls-mp-detail dt { font-family:var(--display); font-weight:700; color:var(--blue); font-size:14px; }
.afls-mp-detail dd { margin:0; color:var(--ink); }
@media(max-width:520px){ .afls-mp-detail dd{ margin-bottom:12px; } }
.afls-mp-newsrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.afls-mp-newsrow a { color:inherit; display:block; }
.afls-mp-newsrow .nt { aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:var(--soft-2); margin-bottom:9px; }
.afls-mp-newsrow .nt img { width:100%; height:100%; object-fit:cover; }
.afls-mp-newsrow .nd { color:var(--gold); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; }
.afls-mp-newsrow h4 { font-size:15px; margin:3px 0 0; color:var(--blue); line-height:1.3; }
/* Login gate */
.afls-mp-gate { max-width:470px; margin:40px auto; }
.afls-mp-gatecard { background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg); padding:32px 34px; }
.afls-mp-gatecard h2 { margin:0 0 6px; font-size:24px; border:0; padding:0; }
.afls-mp-gatecard .sub { color:var(--muted); margin:0 0 22px; }
.afls-mp-gatefoot { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); text-align:center; color:var(--muted); font-size:14px; }
.afls-mp-gatefoot a { font-weight:700; }

/* Local & Regional Resources map ([afls_resources_map]) */
.afls-content .afls-resmap { width: min(1080px, 94vw); margin-left: 50%; transform: translateX(-50%); }
.afls-resmap { margin: 30px 0 8px; }
.afls-resmap-canvas { height: 560px; width: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: #eef3f8; z-index: 0; }
.afls-resmap-canvas .leaflet-popup-content { font-size: 14px; line-height: 1.45; }
.afls-resmap-list { margin-top: 30px; }
.afls-resmap-heading { font-size: 20px; color: var(--blue); margin: 0 0 16px; }
.afls-resmap-group { margin: 0 0 18px; }
.afls-resmap-group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--gold); margin: 0 0 6px; }
.afls-resmap-group ul { margin: 0; padding-left: 20px; }
.afls-resmap-group li { margin: 3px 0; color: var(--ink, #16202c); }
@media (max-width: 600px){ .afls-resmap-canvas { height: 420px; } }

/* ====================================================== RESPONSIVE MEDIA SAFETY NET ===
   Belt-and-braces overflow guards so editor-pasted / imported content can never force
   horizontal scroll on phones or tablets — the most common mobile-usability defect. The base
   `img { max-width: 100% }` already covers theme markup; these extend the same guarantee to
   every other embeddable element and to long unbroken strings, regardless of any width/height
   attributes WordPress writes into imported markup. Fixed-size media (round avatars, object-fit
   covers) keep their explicit dimensions via the more specific rules earlier in this file. */
img, svg, video, audio, canvas, iframe, embed, object, picture, model-viewer {
  max-width: 100%;
}
/* Keep aspect ratio when an imported image/embed is width-capped (scoped to flow content so it
   can't override the explicit height on avatars / cover-fit thumbnails). */
.afls-content img, .afls-content iframe, .afls-content video,
.afls-content embed, .afls-content object {
  height: auto;
}
/* Long unbroken strings (URLs, code, tokens) must wrap rather than push the layout wide. */
.afls-content pre { white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; }
.afls-content a, .afls-content code, .afls-content td, .afls-content th { overflow-wrap: anywhere; }
/* Embedded dashboards / maps / video go full container width on small screens. */
.afls-content iframe { width: 100%; }