/*
Theme Name: PRISME 2026
Theme URI: https://prismeforum.org
Author: PRISME Forum
Author URI: https://prismeforum.org
Description: Hand-coded custom theme for PRISME Forum — replaces Divi. Built on top of WordPress + Ultimate Membership Pro; UMP, ACF and Code Snippets integrations are untouched by this theme.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: prisme-2026
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --color-navy: #0a1420;
  --color-navy-2: #0f1e2e;
  --color-teal: #008caf;
  --color-cyan: #6ddffc;
  --color-cyan-dark-text: #0a1420;
  --color-white: #ffffff;
  --color-ink: #0a1420;
  --color-muted: #9fb3c2;
  --color-muted-2: #c8d6df;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-light: rgba(10, 20, 32, 0.12);
  --font-display: "Barlow Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --container: 1180px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-white);
  color: var(--color-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.entry-content a { color: var(--color-teal); text-decoration: underline; text-underline-offset: 2px; }
.entry-content a:hover { color: var(--color-navy); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.5em; line-height: 1.05; text-transform: none; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Placeholder-content marker used throughout while real copy is pending */
.placeholder-flag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  background: rgba(0, 140, 175, 0.1);
  border: 1px solid rgba(0, 140, 175, 0.35);
  border-radius: 3px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  background: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 24px;
  max-width: var(--container);
  margin: 0 auto;
}
.site-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--color-white);
  text-transform: uppercase;
  white-space: nowrap;
}
.site-logo span { color: var(--color-cyan); font-weight: 400; }
.primary-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  flex: 1;
  justify-content: center;
}
.primary-nav a {
  color: var(--color-muted-2);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.15s ease;
}
.primary-nav a:hover { color: var(--color-white); }
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(1.06); }
.btn--cyan { background: var(--color-cyan); color: var(--color-cyan-dark-text); }
.btn--outline { background: transparent; color: var(--color-white); border-color: var(--color-border); }
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Generic "link with arrow" used on light section backgrounds (homepage
   roster, Insights member-access link, Meetings page CTAs). Separate
   from .hero__cta a.link-arrow, which overrides color for the dark hero
   context specifically -- that rule's higher specificity still wins
   there, so this base rule is safe to add without affecting the hero. */
.link-arrow { color: var(--color-teal); font-weight: 600; font-size: 15px; display: inline-block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 72px 0 0;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
  padding-bottom: 64px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-cyan);
  margin-bottom: 20px;
}
.eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--color-cyan); }
.hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  color: var(--color-white);
}
.hero h1 .accent { color: var(--color-cyan); }
.hero__aside p:first-child { font-size: 18px; font-weight: 700; color: var(--color-white); }
.hero__aside p { color: var(--color-muted); }
.hero__aside { padding-top: 8px; }
.hero__cta { margin-top: 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero__cta a.link-arrow { color: var(--color-cyan); font-weight: 600; font-size: 15px; }

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--color-border);
}
.stats-bar__item {
  padding: 28px 24px;
  border-right: 1px solid var(--color-border);
}
.stats-bar__item:last-child { border-right: none; }
.stats-bar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  color: var(--color-cyan);
  line-height: 1;
}
.stats-bar__label {
  font-size: 13px;
  color: var(--color-muted);
  margin-top: 8px;
}

/* ==========================================================================
   Generic section scaffolding
   ========================================================================== */

.section { padding: 88px 0; }
.section--tight-b { padding-bottom: 32px; }
.section--tight-t { padding-top: 32px; border-top: 1px solid var(--color-border-light); }
.section--tint { background: #f4f7f9; }
.section__head { max-width: 640px; margin-bottom: 48px; }
.section__kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 12px;
}
.section__title { font-size: clamp(26px, 3vw, 38px); color: var(--color-ink); }
.section__desc { color: #4c5c66; font-size: 16px; }

/* Generic rich-text container for ACF WYSIWYG output (Meeting Detail
   templates -- Technical/Business Meeting write-ups, closing section).
   Matches .section__desc's color/size; base p{margin:0 0 1em} already
   handles paragraph spacing, so this only adds what WYSIWYG output can
   contain beyond plain paragraphs: links and lists. */
.section__body { color: #4c5c66; font-size: 16px; margin-top: 16px; }
.section__body a { color: var(--color-teal); font-weight: 600; }
.section__body ul,
.section__body ol { margin: 0 0 1em 1.3em; padding: 0; }
.section__body ul { list-style: disc; }
.section__body ol { list-style: decimal; }
.section__body li { margin-bottom: 0.4em; }

/* Meeting Detail (Member) template -- URL-addressable tab nav and the
   Program/Presentations/Outputs document lists (Phase 2, 2026-08-28). */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--color-border-light);
  margin: 32px auto 0;
  padding-bottom: 0;
}
.tab-link {
  display: inline-block;
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab-link:hover { color: var(--color-teal); }
.tab-link.is-active { color: var(--color-teal); border-bottom-color: var(--color-teal); }

/* Document embeds -- full inline PDF viewers on the Member template's
   Program/Presentations/Outputs tabs (Nico's decision 2026-08-29,
   replacing the earlier plain .doc-list title list; see
   template-meeting-member.php's prisme_render_doc_embeds()). */
.doc-embed-list { margin: 24px 0 0; }
.doc-embed {
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius);
  padding: 20px 20px 24px;
  margin-bottom: 24px;
}
.doc-embed__title {
  margin: 0 0 14px;
  font-size: 17px;
}
.doc-embed__title a {
  color: var(--color-ink);
  text-decoration: none;
}
.doc-embed__title a:hover { color: var(--color-teal); text-decoration: underline; }
.doc-embed__viewer { max-width: 100%; overflow-x: auto; }
.doc-embed__viewer iframe, .doc-embed__viewer canvas { max-width: 100%; }
.doc-embed__fallback { margin: 0; }
/* Vimeo recordings (2020-2021 virtual meetings) -- responsive 16:9 embed,
   added 2026-08-31. */
.doc-embed__video { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; }
.doc-embed__video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* Directly-hosted .mp4 file, added 2026-08-31. */
.doc-embed__video-file { width: 100%; max-width: 100%; display: block; }

/* Legacy Office files (.ppt/.pptx/.doc/.docx/.xlsx) -- rendered inline via
 * Microsoft's Office Online viewer instead of a plain download link, since
 * PDF Embedder can't show these and re-converting ~50 pre-2015 files to PDF
 * isn't worth the manual effort. Fetches the file straight from its own
 * staging URL, no re-hosting needed. Added 2026-09-02. */
.doc-embed__office { width: 100%; height: 620px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.doc-embed__office iframe { width: 100%; height: 100%; border: 0; }

/* Gallery tab: two buttons (Technical + Business Meeting albums) when a
 * meeting has separate galleries for each -- added 2026-08-29. Falls
 * back to a single centered button when there's only one link, via the
 * existing .section__desc rule (this class only changes layout when
 * there are two <a> children to lay out side by side). */
.gallery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Meet -> Compare -> Capture -> Continue cycle */
.cycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cycle__card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.cycle__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-teal);
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.cycle__title { font-size: 20px; margin-bottom: 8px; }
.cycle__body { font-size: 14.5px; color: #4c5c66; margin: 0; }
.cycle__body + .cycle__body { margin-top: 12px; }

/* Currently at PRISME */
.signals {
  background: var(--color-navy-2);
  color: var(--color-white);
  border-radius: 10px;
  padding: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}
.signals__item { border-left: 2px solid var(--color-teal); padding-left: 18px; }
.signals__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-cyan); margin-bottom: 8px; }
.signals__value { font-size: 16px; font-weight: 600; color: var(--color-white); }
.signals__meta { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
.signals__link { display: block; color: inherit; text-decoration: none; transition: opacity 0.15s ease; }
.signals__link:hover { opacity: 0.8; }

/* Card grids: Insights / Field Notes */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-teal); margin-bottom: 12px; }
.card__title { font-size: 19px; margin-bottom: 10px; }
.card__body { color: #4c5c66; font-size: 14.5px; flex: 1; }
.card__cta { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--color-teal); }

/* Field Note teaser (Insights page): a single real, public-facing Field
   Notes excerpt -- full write-up stays behind the Member Portal login. */
.field-note {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius);
  padding: 40px;
  max-width: 800px;
}
.field-note__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
}
.field-note__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 16px; }
.field-note__questions-label { font-weight: 700; color: var(--color-ink); margin-top: 8px; margin-bottom: 12px; }
.field-note__questions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 28px;
}
.field-note__questions li {
  position: relative;
  padding-left: 22px;
  color: #4c5c66;
  font-size: 15px;
}
.field-note__questions li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-teal);
  font-weight: 700;
}
.field-note__gate {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-border-light);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-teal);
}

/* Ask PRISME panel */
.ask-panel {
  background: var(--color-teal);
  color: var(--color-white);
  border-radius: 10px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.ask-panel h2 { color: var(--color-white); }
.ask-panel p { color: rgba(255,255,255,0.9); }
.ask-panel__examples { display: flex; flex-direction: column; gap: 12px; }
.ask-panel__example {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 14.5px;
}

/* Company roster */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--color-border-light);
  border: 1px solid var(--color-border-light);
}
.roster__item {
  background: var(--color-white);
  padding: 20px 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #38505c;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Leadership / people grid (About page) */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 24px;
}
.people-grid--officers {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.person {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  padding: 20px;
}
.person--officer { border-top: 3px solid var(--color-teal); }
.person__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 8px;
}
.person__name { font-size: 16px; font-weight: 700; color: var(--color-ink); }
.person__org { font-size: 14px; color: #5b6b74; margin-top: 2px; }

/* Flexible benefit/value-prop grid: any item count, wraps cleanly
   (reuses .cycle__card / .cycle__title / .cycle__body for the card
   visuals -- this class only controls the column layout). */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

/* Five-equal-column variant for .cycle / .benefits-grid parents.
   Uses flexbox (not grid) so an incomplete last row self-centers
   instead of leaving empty grid tracks. Declared after both .cycle
   and .benefits-grid so it wins the equal-specificity, source-order
   tie against their base grid-template-columns rules. */
.cycle--5col {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.cycle--5col > * {
  flex: 0 1 calc(20% - 16px);
}
@media (max-width: 900px) {
  .cycle--5col > * {
    flex: 0 1 calc(33.333% - 14px);
  }
}
@media (max-width: 700px) {
  .cycle--5col > * {
    flex: 0 1 100%;
  }
}

/* Sub-section heading inside a .section (Meetings page: "Every member
   brings something to the table", "Themes through time", etc.) --
   plain h3, just spaced consistently from surrounding paragraphs. */
.meeting-subhead {
  font-size: 21px;
  color: var(--color-ink);
  margin-top: 2.2em;
  margin-bottom: 0.5em;
}

/* Technical Meeting theme archive table (Meetings page) */
.theme-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
  background: var(--color-white);
}
.theme-table { width: 100%; border-collapse: collapse; }
.theme-table th, .theme-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  font-weight: 400;
}
.theme-table tbody tr:last-child th, .theme-table tbody tr:last-child td { border-bottom: none; }
.theme-table thead th {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a99a1;
  background: var(--color-tint, #f4f7f8);
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}
/* Year/Season/Hosted-by/City are fixed and narrow so Theme -- the
   column that matters most -- gets whatever width remains. */
.theme-table__year {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-teal);
  width: 64px;
  white-space: nowrap;
}
.theme-table__season { font-weight: 600; color: #38505c; width: 84px; white-space: nowrap; }
.theme-table__host { width: 170px; }
.theme-table__city { width: 200px; color: #38505c; }

/* Below ~900px, turn the PRISM archive table (the gated page, not the
   public /meetings/ page - that one keeps its normal table via the
   :not(#archive) scoping below) into stacked cards instead of a wide
   row you scroll sideways through. Added 2026-09-07 after two different
   frozen-column attempts (native position:sticky, then a scroll-synced
   transform) both caused real Chrome rendering bugs at Nico's actual
   browser width that couldn't be reproduced/fixed reliably - see
   rebuild-plan.md. Nico independently suggested this same "list it
   vertically, let the table run taller" direction. Column labels are
   generated via ::before rather than data-label attributes so no page
   content needs to change; Year/Season are combined into a single
   title line ("2010 • Fall") instead of getting their own labels. */
@media (max-width: 900px) {
	.theme-table-wrap:not(#archive) {
		overflow-x: visible;
		border: none;
		border-radius: 0;
		background: transparent;
	}
	.theme-table-wrap:not(#archive) .theme-table,
	.theme-table-wrap:not(#archive) .theme-table thead,
	.theme-table-wrap:not(#archive) .theme-table tbody,
	.theme-table-wrap:not(#archive) .theme-table tr,
	.theme-table-wrap:not(#archive) .theme-table th,
	.theme-table-wrap:not(#archive) .theme-table td {
		display: block;
		width: auto;
	}
	.theme-table-wrap:not(#archive) .theme-table thead { display: none; }
	.theme-table-wrap:not(#archive) .theme-table tbody tr {
		border: 1px solid var(--color-border-light);
		border-radius: var(--radius);
		padding: 16px 18px;
		margin-bottom: 14px;
		background: var(--color-white);
	}
	.theme-table-wrap:not(#archive) .theme-table tbody tr:last-child { margin-bottom: 0; }
	.theme-table-wrap:not(#archive) .theme-table td {
		padding: 3px 0;
		border-bottom: none;
		font-size: 15px;
	}
	.theme-table-wrap:not(#archive) .theme-table td:empty { display: none; }
	.theme-table-wrap:not(#archive) .theme-table td::before {
		display: block;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: rgb(138, 153, 161);
		margin-bottom: 2px;
	}
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__year,
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__season {
		display: inline;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 17px;
		color: var(--color-teal);
	}
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__season {
		color: var(--color-ink, #0a1420);
	}
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__season::before {
		content: "\2022";
		display: inline;
		font-size: 15px;
		text-transform: none;
		letter-spacing: normal;
		color: var(--color-border-light, #ccc);
		margin: 0 8px;
	}
	.theme-table-wrap:not(#archive) .theme-table td:not(.theme-table__year):not(.theme-table__season):not(.theme-table__host):not(.theme-table__city):not(.theme-table__docs) {
		margin-top: 6px;
		font-style: italic;
		color: #38505c;
	}
	.theme-table-wrap:not(#archive) .theme-table td:not(.theme-table__year):not(.theme-table__season):not(.theme-table__host):not(.theme-table__city):not(.theme-table__docs)::before {
		content: "Theme";
	}
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__host { margin-top: 10px; }
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__host::before { content: "Hosted By"; }
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__city::before { content: "City / Location"; }
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__docs { margin-top: 10px; }
	.theme-table-wrap:not(#archive) .theme-table td.theme-table__docs::before { content: "Documents"; }
}

/* Meetings-page archive table -- each row links to that season's
   Member page (added 2026-09-01, Nico's request for an easier way to
   browse/check each season's detail page and come back). Whole-row
   click is handled by a small inline script on the page; the arrow
   cell holds the real <a> so keyboard/screen-reader/right-click
   behavior all work without the script's help. */
.theme-table__row { cursor: pointer; }
.theme-table__row:hover { background: var(--color-tint, #f4f7f8); }
.theme-table__link-cell { width: 40px; text-align: right; }
.theme-table__link-cell a { color: var(--color-teal); font-weight: 700; text-decoration: none; }
.theme-table__link-cell a:hover,
.theme-table__link-cell a:focus { text-decoration: underline; }

/* PRISM Meetings archive table (1998-2011, added 2026-09-01) -- these
   pre-2011 meetings have no Member page to link to, so instead of the
   single arrow link used above, the Documents column lists whichever
   original agenda/minutes/presentation files survive as small inline
   links. Rows with nothing on file show a plain dash. */
.theme-table__docs { width: 260px; }
.theme-table__docs-list { display: flex; flex-direction: column; align-items: flex-start; flex-wrap: wrap; gap: 4px 12px; }
.theme-table__docs-list a { color: var(--color-teal); font-weight: 600; text-decoration: none; font-size: 14px; white-space: normal; overflow-wrap: break-word; }
.theme-table__docs-list a:hover,
.theme-table__docs-list a:focus { text-decoration: underline; }
.theme-table__docs-empty { color: #b7c2c7; }

/* PRISM Meetings archive toggle (added 2026-09-01, Nico's request) --
   only 14 of the 24 pre-2011 meetings have surviving documents, so the
   table is collapsed behind a native <details>/<summary> by default
   rather than opening straight onto a wall of dashes. The heading and
   intro paragraph above it stay visible either way. */
.theme-table-toggle { margin-top: 8px; }
.theme-table-toggle > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-teal);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 6px 0;
}
.theme-table-toggle > summary::-webkit-details-marker { display: none; }
.theme-table-toggle > summary::before {
  content: '\25B8';
  display: inline-block;
  font-size: 13px;
  transition: transform 0.15s ease;
}
.theme-table-toggle[open] > summary::before { transform: rotate(90deg); }
.theme-table-toggle > summary:hover,
.theme-table-toggle > summary:focus { text-decoration: underline; }
.theme-table-toggle .theme-table-wrap { margin-top: 16px; }

/* Meeting snapshot cards (Meetings page: upcoming / recent) */
.meeting-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.meeting-card {
  background: var(--color-white);
  border: 1px solid var(--color-border-light);
  border-top: 3px solid var(--color-teal);
  border-radius: var(--radius);
  padding: 28px;
}
.meeting-card__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: 10px;
}
.meeting-card__when { font-size: 20px; font-weight: 700; color: var(--color-ink); margin-bottom: 4px; font-family: var(--font-display); }
.meeting-card__meta { font-size: 14px; color: #5b6b74; margin-bottom: 14px; }
.meeting-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-teal);
  background: rgba(0, 140, 175, 0.08);
  border: 1px solid rgba(0, 140, 175, 0.3);
  border-radius: 3px;
  padding: 3px 8px;
  margin-bottom: 12px;
}
.meeting-card__theme { font-size: 17px; font-weight: 700; color: var(--color-ink); margin-bottom: 12px; }
.meeting-card__body { color: #4c5c66; font-size: 14.5px; margin-bottom: 16px; }

/* Membership CTA band */
.cta-band {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 72px 0;
  text-align: center;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: var(--color-muted); max-width: 560px; margin-left: auto; margin-right: auto; }
.cta-band__actions { display: flex; justify-content: center; gap: 16px; margin-top: 24px; }

/* Embedded Contact Form 7 "Membership Inquiry" form inside the dark
   .cta-band (Membership page). CF7 renders its own markup (div.wpcf7 >
   form.wpcf7-form > p > label + field), so these rules style CF7's
   default output rather than custom markup. */
.cta-band__form {
  max-width: 640px;
  margin: 32px auto 0;
  text-align: left;
}
.cta-band__form .wpcf7-form p { margin-bottom: 18px; }
.cta-band__form .wpcf7-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-muted-2);
  margin-bottom: 7px;
}
.cta-band__form .wpcf7-form input[type="text"],
.cta-band__form .wpcf7-form input[type="email"],
.cta-band__form .wpcf7-form textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 15px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.cta-band__form .wpcf7-form textarea { min-height: 110px; resize: vertical; }
.cta-band__form .wpcf7-form input::placeholder,
.cta-band__form .wpcf7-form textarea::placeholder { color: var(--color-muted); }
.cta-band__form .wpcf7-form input:focus,
.cta-band__form .wpcf7-form textarea:focus {
  outline: none;
  border-color: var(--color-cyan);
  background: rgba(255, 255, 255, 0.1);
}
.cta-band__form .wpcf7-form input[type="submit"] {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 11px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--color-cyan);
  color: var(--color-cyan-dark-text);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.cta-band__form .wpcf7-form input[type="submit"]:hover { filter: brightness(1.06); }
.cta-band__form .wpcf7-form input[type="submit"]:disabled { cursor: wait; opacity: 0.7; }
.cta-band__form .wpcf7-form .wpcf7-not-valid-tip {
  display: block;
  color: #ff9d9d;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
}
.cta-band__form .wpcf7-form .wpcf7-response-output {
  margin-top: 20px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  color: var(--color-white);
  font-size: 14px;
}
.cta-band__form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--color-cyan); }
.cta-band__form .wpcf7-form.invalid .wpcf7-response-output,
.cta-band__form .wpcf7-form.failed .wpcf7-response-output,
.cta-band__form .wpcf7-form.aborted .wpcf7-response-output { border-color: #ff9d9d; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--color-navy);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  padding: 48px 0 28px;
  font-size: 14px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
}
.site-footer h4 { color: var(--color-white); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer li { margin-bottom: 8px; }
.site-footer a:hover { color: var(--color-white); }
.site-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Basic content page (page.php fallback)
   ========================================================================== */

.page-hero {
  background: var(--color-navy);
  color: var(--color-white);
  padding: 56px 0;
}
.page-hero h1 { color: var(--color-white); }
.page-hero__subtitle { color: var(--color-muted-2); font-size: 18px; font-weight: 600; margin-top: 10px; max-width: 760px; }
/* Wayfinding link back up from a "leaf" page (e.g. a meeting detail page
   like /meetings/2026-spring/) to its parent section. */
.back-link {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-muted-2);
}
.back-link:hover { color: var(--color-white); }
.entry-content { padding: 56px 0; max-width: 760px; margin: 0 auto; }
.entry-content h2 { margin-top: 1.4em; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .stats-bar__item:nth-child(2) { border-right: none; }
  .cycle { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }
  .ask-panel { grid-template-columns: 1fr; padding: 32px; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .primary-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header.nav-is-open .primary-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-navy);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 24px 20px;
    z-index: 100;
  }
  .site-header.nav-is-open .primary-nav li { width: 100%; }
  .site-header.nav-is-open .primary-nav a { display: block; padding: 12px 0; }
  .cycle { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; }
}


.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-teal);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0,0,0,0.22);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s, background-color .2s ease;
	z-index: 999;
}
.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.back-to-top:hover {
	background: var(--color-navy);
}
.back-to-top svg {
	width: 18px;
	height: 18px;
}


/* --- Document Library: table width & density fix (added 2026-09-03) ---
   The .entry-content rule above caps prose pages to a 760px reading width,
   which was also squeezing the Document Library data table and forcing
   DataTables Responsive to collapse columns (Organization, then Who) even
   on wide desktop screens. Widen any entry-content that contains a document
   table back to the full site container width, and tighten the table's
   font size so more columns fit before anything needs to collapse. */
.entry-content:has(.posts-table-wrapper) {
	max-width: var(--container);
}
.entry-content:has(.theme-table-wrap) {
	max-width: var(--container);
}
.posts-data-table th,
.posts-data-table td {
	font-size: 15px;
}


/* --- Member Portal (UMP account page) restyle (added 2026-09-03) ---
   The account page previously used Ultimate Membership Pro's stock skin:
   a flat filled sky-blue tab bar, a leftover default avatar image with no
   connection to the PRISME mark, and raw unstyled paragraph dumps for
   admin-authored updates. This reskins the existing UMP markup to match
   the site's own .tabs/.tab-link and .card components rather than
   introducing new ones. See prisme_account_page_active_tab() in
   functions.php for the small companion script that flags the current
   tab (UMP doesn't expose that in its server-rendered HTML). */

/* Kill the leftover default avatar image next to the greeting. */
.ihc-member-photo,
.ihc-account-page-top-mess img {
	display: none !important;
}

/* Greeting ("Hi, Name!") -- kept (it reads as a warmer welcome), just
   given real typography instead of plain default text. */
.ihc-account-page-top-mess {
	margin: 0 0 20px;
}
.ihc-user-page-top-ap-wrapper .iump-user-page-mess-special,
.ihc-user-page-top-ap-wrapper .iump-user-page-name {
	font-family: var(--font-display) !important;
	font-size: 22px !important;
	color: var(--color-ink) !important;
	font-weight: 600 !important;
}

/* Tab bar: swap the flat filled UMP menu for the site's underlined-tab
   look (same visual language as .tabs/.tab-link elsewhere). */
.ihc-ap-menu {
	display: flex !important;
	flex-wrap: wrap;
	gap: 4px;
	background: none !important;
	border-bottom: 1px solid var(--color-border-light) !important;
	margin: 0 0 32px !important;
	padding: 0 !important;
}
.ihc-middle-side {
	margin-left: 0 !important;
}
.ihc-ap-menu-item {
	background: none !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}
.ihc-ap-menu-item a {
	display: inline-block;
	padding: 12px 18px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--color-ink) !important;
	background: none !important;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.ihc-ap-menu-item a:hover,
.ihc-ap-menu-item a:focus {
	color: var(--color-teal) !important;
	background: none !important;
}
.ihc-ap-menu-item a.is-active {
	color: var(--color-teal) !important;
	border-bottom-color: var(--color-teal);
}

/* Tab content: give admin-authored updates (Welcome Message / per-tab
   message fields) the site's card-content treatment instead of a raw
   paragraph dump, and tidy default heading/hr/list spacing. */
.ihc-ap-wrap {
	font-family: var(--font-body);
	color: var(--color-ink);
}
.ihc-ap-wrap h2,
.ihc-ap-wrap h3 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
	margin: 32px 0 12px;
}
.ihc-ap-wrap > h3:first-child {
	/* auto-generated Tab Title heading from UMP, not admin content */
	font-size: 34px !important;
	margin-top: 0;
}
.ihc-ap-wrap h2 {
	font-size: 21px;
}
.ihc-ap-wrap h2:first-child {
	margin-top: 0;
}
.ihc-ap-wrap h3:not(:first-child) {
	/* subheadings typed into tab content itself. UMP own templates.min.css sets
	   .ihc-ap-wrap h3 font-size to 2rem with !important, so this needs it too. */
	font-size: 19px !important;
}
.ihc-ap-wrap h4 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-teal);
	margin: 0 0 14px;
}
.ihc-ap-wrap p {
	color: #4c5c66;
	line-height: 1.6;
	margin: 0 0 14px;
}
.ihc-ap-wrap ul,
.ihc-ap-wrap ol {
	color: #4c5c66;
	line-height: 1.6;
	padding-left: 20px;
	margin: 0 0 14px;
}
.ihc-ap-wrap hr {
	border: none;
	border-top: 1px solid var(--color-border-light);
	margin: 28px 0;
}
.ihc-ap-wrap a {
	color: var(--color-teal);
}

/* Reusable content patterns for admin-authored Member Portal tab content */
.portal-columns {
	column-count: 2;
	column-gap: 40px;
	line-height: 1.5;
}
.portal-columns--list li {
	break-inside: avoid;
	margin-bottom: 4px;
}
.portal-update__row {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0 0 12px;
}
.portal-update__col {
	flex: 1 1 260px;
	min-width: 0;
}
.portal-update__col h4 {
	margin-top: 0;
}
.portal-update__col > *:first-child {
	margin-top: 0;
}
.portal-update__divider {
	width: 50%;
	border: 0;
	border-top: 3px solid var(--color-teal);
	margin: 30px auto;
}
.portal-tab-divider {
	border: 0;
	border-top: 1px solid rgba(0, 140, 175, 0.3);
	margin: 0 0 28px;
}
/* Member Portal: greeting row (Nico's request 2026-09-16) -- make the
   greeting wrapper a full-width flex row so a "View Member Directory"
   link can sit inline, right-aligned, beside "Welcome back, {name}."
   Also tightens the gap to the tab navigation below it. */
.ihc-account-page-top-mess {
	display: block !important;
	width: 100% !important;
	margin-bottom: 8px !important;
}
.ihc-account-page-top-mess p {
	display: block !important;
	width: 100% !important;
}
.ihc-account-page-top-mess p > span[style*="display:flex"] {
	width: 100% !important;
}
.ihc-account-page-top-mess p {
	margin: 0 !important;
}
.ihc-account-page-top-extra-mess {
	margin-bottom: 0 !important;
}
@media (max-width: 640px) {
	.portal-columns {
		column-count: 1;
	}
}

/* Member Portal: page-level layout fixes (added 2026-09-03, part 2 --
   feedback after the initial restyle went live). */

/* UMP's account page reuses the generic .entry-content wrapper (760px,
   meant for single-column blog-style reading), which made the portal's
   two-column tab content feel cramped. Widen it here, scoped to just
   this page. */
.entry-content:has(.ihc-account-page-wrapp) {
	max-width: 920px;
}

/* UMP's own "theme 3" top-of-page block reserves space for a background
   photo behind the avatar/name (padding-top: 320px, cut down to 75px by
   its own "no background" variant) -- combined with our theme's normal
   56px .entry-content padding, that stacked up to roughly 140px of dead
   space above "Hi, ...!" on a page that has no such photo. Cut UMP's
   share down to something sane; the theme's own 56px above the page is
   left alone since that's the same breathing room every other page
   gets below the dark title band. */
.ihc-account-page-wrapp .ihc-user-page-top-ap-wrapper.ihc-no-background {
	padding-top: 16px !important;
}

/* The greeting text block still carried UMP's padding-left: 20px, meant
   to clear the avatar photo that .ihc-member-photo removal (above) now
   hides. With no photo there, it just read as an unexplained indent --
   neither left-aligned nor centered. Drop it. */
.ihc-user-page-top-ap-wrapper .ihc-account-page-top-mess {
	padding-left: 0 !important;
}


/* --- Site-wide revision, Executive Director Martin's copy/positioning
   instructions (added 2026-09-03) --- */

/* Homepage hero: short horizontal trust line under the CTA buttons,
   visible but visually secondary to the headline (per instructions --
   not a legal disclaimer treatment). */
.hero__trust {
	margin-top: 18px;
	font-size: 13px;
	color: var(--color-muted);
	letter-spacing: 0.01em;
}

/* Homepage cycle section: closing note below the five Meet/Compare/
   Capture/Act/Continue cards ("From shared questions to practical
   movement"). */
.cycle__note {
	max-width: 640px;
	margin: 40px auto 0;
	text-align: center;
}
.cycle__note h3 {
	font-family: var(--font-display);
	font-size: 20px;
	margin-bottom: 8px;
}
.cycle__note p {
	color: #4c5c66;
	font-size: 15px;
}

/* Homepage "Latest intelligence" grid: the new non-clickable private-
   archive card is deliberately different in kind from the three real
   links above it (per instructions -- no button, no direct library
   link), so it spans the full row with a tinted background rather than
   sitting in the 3-column grid like an equivalent clickable card. */
.card--static {
	grid-column: 1 / -1;
	background: #f4f7f9;
	border-style: dashed;
}
.card__meta {
	margin-top: 16px;
	font-size: 13px;
	color: #4c5c66;
}
.card__meta a {
	color: var(--color-teal);
	text-decoration: underline;
}

/* About page: "How trust is protected" -- 3-column variant of .cycle
   (the "unusual" traits grid dropped from 4 cards to 3 when the
   pre-competitive paragraph moved into its own section below), plus
   the bullet checklist under it. */
.cycle--3col {
	grid-template-columns: repeat(3, 1fr);
}
/* Responsive overrides for .cycle--3col: the base .cycle class already
   collapses to 2/1 columns at these breakpoints (see the 900px/700px
   media queries above), but .cycle--3col's unconditional rule above has
   equal specificity and comes later in the file, so it was silently
   winning and keeping this grid at 3 fixed columns on mobile -- forcing
   horizontal overflow/scroll instead of the intended vertical stack. */
@media (max-width: 900px) {
	.cycle--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
	.cycle--3col { grid-template-columns: 1fr; }
}
.trust-list {
	max-width: 640px;
	display: grid;
	gap: 10px;
}

/* About page "How trust is protected": two-column layout on desktop
   (paragraphs left, principles right) instead of the list sitting
   under a mostly-empty right half -- also shortens the dark band
   overall (Nico, 2026-09-06). */
.trust-band__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 28px;
}
.trust-band__grid .trust-list { max-width: none; margin-top: 0; }
@media (max-width: 780px) {
	.trust-band__grid { grid-template-columns: 1fr; gap: 24px; }
}
.trust-list li {
	padding-left: 22px;
	position: relative;
	color: #4c5c66;
	font-size: 15px;
}
.trust-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-teal);
}

/* About page: "How trust is protected" as a strong full-width band
   rather than the light .section--tint box other in-page sections use --
   this is the trust/governance message and Nico wanted it to carry more
   visual weight (2026-09-06). Reuses the dark .page-hero/.cta-band
   navy treatment; .trust-list's dot/text colors get a dark-bg variant
   here since the base rule above is tuned for the light background. */
.trust-band { background: var(--color-navy); }
.trust-band .section__title { color: var(--color-white); }
.trust-band .section__desc { color: var(--color-muted-2); }
.trust-band .trust-list li { color: var(--color-muted-2); }
.trust-band .trust-list li::before { background: var(--color-cyan); }

/* Ask PRISME page: CTA box under the "How it works" steps, text differs
   by login state (see page.php, is_page('ask-prisme') branch). */
.ask-prisme-cta {
	margin-top: 40px;
	padding: 24px;
	background: #f4f7f9;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 16px;
}
.ask-prisme-cta a {
	color: var(--color-teal);
	text-decoration: underline;
}


/* Member Directory page: widen the content area to fit the UMP
   member/ops-team photo grids and the yearly TablePress archive
   comfortably (added 2026-09-03, Nico's request -- the generic 760px
   reading-width rule was squashing the 4-column showcase grids). */
.entry-content:has(.member-directory-page) { max-width: 1100px; }


/* Member Directory page: UMP's own member-grid CSS never set a wrap
   rule on the long profile-URL text (LinkedIn links, etc.) -- a URL
   segment with no hyphen has no natural break point under normal
   word-break rules, so it renders as one unbroken run and overflows
   past its own card into the next column instead of wrapping. Force
   wrapping so it always stays inside its card. (added 2026-09-03,
   Nico's report of run-together links on the Members grid) */
.member-directory-page .member-extra-fields,
.member-directory-page .ihc-user-list-result,
.member-directory-page .ihc-user-list-result a {
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}
.member-directory-page .member-email a {
	overflow-wrap: break-word;
	word-break: break-word;
	max-width: 100%;
}

/* Member Directory page: "refer a member" callout panel, placed between
   the "invitation only" line and the yearly Directory Archive toggles
   (added 2026-09-03, Nico's request). Restrained/trusted-member tone,
   not a recruitment ad -- pale panel, no bright CTA button. */
.member-refer-callout {
	background: #eef4f8;
	border: 1px solid #d7e3ea;
	border-radius: var(--radius);
	padding: 24px 28px;
	margin: 28px 0;
}
.member-refer-callout h3 {
	margin: 0 0 10px;
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--color-navy);
}
.member-refer-callout p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.5;
}
.member-refer-callout p:last-child {
	margin-bottom: 0;
}
.member-refer-callout a {
	color: var(--color-teal);
	font-weight: 600;
	text-decoration: underline;
}


/* Member Directory page: the static "Operations Team" cards (hand-built
   because the live UMP shortcode was pulling in extra regular members --
   see the HTML comment-free note in the page content) render each
   .team-member ~18px wider than the dynamic Members grid above them,
   which was enough to knock the row from 4-across to 3-across. Force the
   same width so both sections line up. (added 2026-09-03) */
.ops-team-static li {
	width: 262px !important;
	padding: 5px 4px !important;
	box-sizing: border-box !important;
}
.ops-team-static .team-member {
	width: 254px;
}


/* Match Member Portal body text to the rest of the site — UMP's
   default .ihc-ap-wrap styling renders portal tab content at 14px,
   smaller than the site's 16px paragraph text elsewhere. Color was
   already consistent (same site-wide gray), only size needed
   correcting. (added 2026-09-11) */
.ihc-ap-theme-1 .ihc-ap-wrap,
.ihc-ap-theme-2 .ihc-ap-wrap,
.ihc-ap-theme-4 .ihc-ap-wrap {
	font-size: 16px !important;
}


/* Member Portal: shared card/button system for admin-authored tab content (added 2026-09-15) */
.portal-card {
	background: #f7fafb;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	padding: 26px 28px;
	margin: 0 0 28px;
}
.portal-card:last-child { margin-bottom: 0; }
.portal-card--accent {
	background: rgba(0, 140, 175, 0.06);
	border: 1px solid var(--color-border-light);
	border-left: 4px solid var(--color-teal);
}
.portal-card--featured {
	background: rgba(0, 140, 175, 0.12);
	border: 1px solid var(--color-border-light);
	border-left: 4px solid var(--color-teal);
}
.portal-card h2, .portal-card h3 { margin-top: 0; }
.portal-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 28px;
}
.portal-card-grid .portal-card {
	flex: 1 1 300px;
	min-width: 0;
	margin-bottom: 0;
}
.portal-btn {
	display: inline-block;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 15px;
	padding: 11px 22px;
	border-radius: var(--radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform 0.12s ease, filter 0.12s ease;
	margin: 4px 10px 4px 0;
}
.portal-btn:hover, .portal-btn:focus, .portal-btn:active { filter: brightness(0.96); text-decoration: none !important; }
.portal-btn.portal-btn--primary { background: var(--color-teal); color: #ffffff; }
.portal-btn--outline { background: transparent; color: var(--color-teal); border-color: var(--color-teal); }
.portal-btn-row { margin: 8px 0 0; }
.portal-doc-card {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #ffffff;
	border: 1px solid var(--color-border-light);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin: 0 0 16px;
}
.portal-doc-card__icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--radius);
	background-color: rgba(0, 140, 175, 0.1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23008caf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}
.portal-doc-card__body { flex: 1 1 auto; min-width: 0; }
.portal-doc-card__body strong { display: block; }
.portal-notice {
	font-size: 13px;
	color: var(--color-ink);
	opacity: 0.7;
	margin-top: 10px;
}
.portal-intro {
	font-size: 16px;
	max-width: 760px;
	margin: 0 0 28px;
}
@media (max-width: 640px) {
	.portal-card-grid { flex-direction: column; }
	.portal-doc-card { flex-direction: column; align-items: flex-start; }
}


/* Member Portal: visually separate Profile/Log Out (account utilities) from content tabs (added 2026-09-15) */
.ihc-ap-menu-item:nth-last-child(-n+2) {
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid var(--color-border-light);
}
@media (max-width: 640px) {
	.ihc-ap-menu-item:nth-last-child(-n+2) {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
}


/* ==========================================================================
   Document preview lightbox (Document Library Pro) -- clearer exit controls
   ========================================================================== */
.dlp-preview-modal-close {
	width: 44px;
	height: 44px;
	top: 16px;
	right: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0,0,0,.35);
	display: flex;
	align-items: center;
	justify-content: center;
}
.dlp-preview-modal .dlp-preview-modal-close .dlp-icon {
	color: #1a1a1a !important;
}
.dlp-preview-back {
	position: absolute;
	top: 18px;
	left: 20px;
	z-index: 3;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	background: rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 4px;
	padding: 8px 14px;
	cursor: pointer;
}
.dlp-preview-back:hover,
.dlp-preview-back:focus {
	background: #008caf;
	border-color: #008caf;
	color: #fff;
}