/*
 * NTEU member-area component library — the meeting-app design language as reusable classes.
 * Enqueued site-wide by nteu-member-gate; every class is opt-in, so nothing on the public
 * site changes unless a class is applied. In Divi: Row/Module settings → Advanced →
 * CSS ID & Classes → CSS Class.
 *
 *   nteu-h1            page/section heading (Gilroy Bold, purple)
 *   nteu-label         small all-caps purple label ("NEXT MEETING")
 *   nteu-muted         small grey supporting text
 *   nteu-card          lilac info card (the "next meeting" panel)
 *   nteu-card--live    green live-meeting variant
 *   nteu-card--plain   white variant with light border
 *   nteu-links         stacked tap-target link rows; style the <a> children
 *   nteu-btn           primary button (white, purple text, fills purple on press)
 *   nteu-btn--solid    solid purple variant
 *   nteu-btn--quiet    low-key outlined pill (the "Log out" style)
 *   nteu-notice        message panel; add --success or --error
 */

/* ---- tokens (scoped custom properties; falls back sanely if unset) ---- */
:root {
	--nteu-app-purple: #3d217d;
	--nteu-app-ink: #26242c;
	--nteu-app-muted: #6b6875;
	--nteu-app-canvas: #fafafa;
	--nteu-app-lilac: #f4f0fb;
	--nteu-app-lilac-line: #e3d9f3;
	--nteu-app-line: #e6e2ef;
	--nteu-app-line-strong: #c9c4d6;
	--nteu-app-live: #1a7f37;
	--nteu-app-live-bg: #e8f7ee;
}

/* ---- type ---- */
.nteu-h1 {
	font-family: "Gilroy Bold", system-ui, -apple-system, sans-serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	color: var(--nteu-app-purple);
	margin: 0 0 6px;
}

.nteu-label {
	display: block;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--nteu-app-purple);
	margin: 0 0 4px;
}

.nteu-muted {
	font-size: 14px;
	line-height: 1.5;
	color: var(--nteu-app-muted);
}

/* ---- cards ---- */
.nteu-card {
	background: var(--nteu-app-lilac);
	border: 1px solid var(--nteu-app-lilac-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0 0 16px;
	color: var(--nteu-app-ink);
	font-size: 15px;
	line-height: 1.5;
}

.nteu-card--live {
	background: var(--nteu-app-live-bg);
	border: 2px solid var(--nteu-app-live);
}

.nteu-card--live strong {
	display: block;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-size: 18px;
	color: var(--nteu-app-live);
	margin-bottom: 4px;
}

.nteu-card--plain {
	background: #fff;
	border: 1px solid var(--nteu-app-line);
}

/* ---- link rows (the member-home menu look) ---- */
.nteu-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 22px;
}

.nteu-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--nteu-app-line);
	border-radius: 12px;
	min-height: 54px;
	padding: 8px 18px;
	color: var(--nteu-app-purple);
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
}

.nteu-links a::after { content: "\2192"; }

.nteu-links a:hover,
.nteu-links a:active {
	background: var(--nteu-app-purple);
	color: #fff;
}

/* ---- buttons ---- */
.nteu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	background: #fff;
	border: 1px solid var(--nteu-app-line);
	border-radius: 10px;
	padding: 10px 20px;
	color: var(--nteu-app-purple);
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	cursor: pointer;
}

.nteu-btn:hover,
.nteu-btn:active {
	background: var(--nteu-app-purple);
	border-color: var(--nteu-app-purple);
	color: #fff;
}

.nteu-btn--solid {
	background: var(--nteu-app-purple);
	border-color: var(--nteu-app-purple);
	color: #fff;
}

.nteu-btn--solid:hover,
.nteu-btn--solid:active {
	background: #2d1660;
	border-color: #2d1660;
}

.nteu-btn--quiet {
	min-height: 0;
	background: transparent;
	border: 1px solid var(--nteu-app-line-strong);
	border-radius: 8px;
	color: var(--nteu-app-muted);
	font-family: "Gilroy Regular", system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	padding: 10px 18px;
}

.nteu-btn--quiet:hover {
	background: transparent;
	border-color: var(--nteu-app-purple);
	color: var(--nteu-app-purple);
}

/* ---- notices ---- */
.nteu-notice {
	background: #fff;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.5;
	margin: 0 0 16px;
}

.nteu-notice--success {
	background: var(--nteu-app-live-bg);
	border: 1px solid #b7e0c4;
	color: #205b31;
}

.nteu-notice--error {
	background: #fdeaea;
	border: 1px solid #f3c2c2;
	color: #8f2020;
}

/* =========================================================
   Automatic in-app styling — no classes needed.
   body.nteu-app-view is stamped by the Gate for NTEUApp
   requests only, so everything below is app-exclusive: on the
   web, member pages render in the website's own styling (the
   theme chrome is present there, and body-wide rules would
   leak into the nav and footer). Author pages with plain
   headings, text, links, buttons and blockquotes — in the app
   they arrive app-styled. The opt-in classes above remain for
   the special components (cards, link rows) usable anywhere.
   ========================================================= */

body.nteu-app-view {
	background: var(--nteu-app-canvas);
	color: var(--nteu-app-ink);
	font-family: "Gilroy Regular", system-ui, -apple-system, sans-serif;
	font-size: calc(16px * var(--nteu-fs, 1));
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* headings — Gilroy Bold, purple, app scale */
body.nteu-app-view h1,
body.nteu-app-view h2,
body.nteu-app-view h3,
body.nteu-app-view h4 {
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	color: var(--nteu-app-purple);
	line-height: 1.25;
	margin: 0 0 10px;
}
body.nteu-app-view h1 { font-size: calc(26px * var(--nteu-fs, 1)); }
body.nteu-app-view h2 { font-size: calc(21px * var(--nteu-fs, 1)); margin-top: 26px; }
body.nteu-app-view h3 { font-size: calc(17px * var(--nteu-fs, 1)); margin-top: 20px; }
body.nteu-app-view h4 { font-size: calc(15px * var(--nteu-fs, 1)); margin-top: 16px; }

/* text and links */
body.nteu-app-view p { font-size: calc(16px * var(--nteu-fs, 1)); line-height: 1.55; }
body.nteu-app-view p,
body.nteu-app-view ul,
body.nteu-app-view ol { margin: 0 0 14px; }
body.nteu-app-view li { margin-bottom: 6px; }
body.nteu-app-view a { color: var(--nteu-app-purple); }
body.nteu-app-view hr {
	border: 0;
	border-top: 1px solid var(--nteu-app-line);
	margin: 22px 0;
}

/* blockquote doubles as the lilac card — quote something, get a panel */
body.nteu-app-view blockquote {
	background: var(--nteu-app-lilac);
	border: 1px solid var(--nteu-app-lilac-line);
	border-left: 1px solid var(--nteu-app-lilac-line);
	border-radius: 12px;
	padding: 16px 18px;
	margin: 0 0 16px;
	font-size: 15px;
	font-style: normal;
}
body.nteu-app-view blockquote p:last-child { margin-bottom: 0; }

/* media */
body.nteu-app-view .et_pb_section img,
body.nteu-app-view .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
/* …but never the feed-card thumbnails: they manage their own fill and the card
   clips their corners (the blanket height:auto/radius above breaks the flush
   full-height treatment on list pages) */
body.nteu-app-view .et_pb_section .nteu-member-feed img,
body.nteu-app-view .entry-content .nteu-member-feed img {
	height: 100%;
	border-radius: 0;
}

/* Divi buttons take the app button look */
body.nteu-app-view .et_pb_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	background: #fff !important;
	border: 1px solid var(--nteu-app-line) !important;
	border-radius: 10px !important;
	padding: 10px 20px !important;
	color: var(--nteu-app-purple) !important;
	font-family: "Gilroy Bold", system-ui, sans-serif !important;
	font-weight: 700;
	font-size: 16px !important;
	text-decoration: none;
}
body.nteu-app-view .et_pb_button:hover,
body.nteu-app-view .et_pb_button:active {
	background: var(--nteu-app-purple) !important;
	border-color: var(--nteu-app-purple) !important;
	color: #fff !important;
}
body.nteu-app-view .et_pb_button:after { display: none; }

/* Section spacing belongs to Divi (Section settings → Design → Spacing) — the app layer
   must not stomp it. Only the background is flattened here. */
body.nteu-app-view .et_pb_section { background-color: transparent; }
/* One canvas for every in-app page: page-level Divi backgrounds (Page Settings →
   Background, theme-builder wrappers) otherwise leak through the transparent sections
   and make individual pages randomly darker/lighter than the rest of the app.
   Deliberate bands still work — .nteu-hero-purple / .nteu-purple / .nteu-band-* set
   backgrounds on sections and modules, not on these wrappers. */
body.nteu-app-view #page-container,
body.nteu-app-view #main-content,
body.nteu-app-view #et-main-area,
body.nteu-app-view .et-l--body { background-color: transparent !important; }
/* Alt themes flatten authored band backgrounds outright: Divi's per-section CSS
   out-ranks the plain flattening rule above, so white bands otherwise stay white
   under dark/high-contrast text and the page turns unreadable patchwork. The
   brand-purple surfaces are excluded — they stay purple in every theme. */
body.nteu-app-view.nteu-theme-dark .et_pb_section:not(.nteu-hero-purple):not(.nteu-purple),
body.nteu-app-view.nteu-theme-light .et_pb_section:not(.nteu-hero-purple):not(.nteu-purple) {
	background-color: transparent !important;
}
body.nteu-app-view .et_pb_row { padding: 0; width: 92%; max-width: 560px; }

/* ---- in-app refinements for the opt-in classes ---- */
body.nteu-app-view .nteu-h1 { font-size: 24px; }

/* =========================================================
   In-app themes — light (high-contrast) and dark, matching
   the meeting room's palettes. The body class is set by the
   Gate's app menu from the shared nteu_theme preference, so
   one choice follows the member across meeting room and app.
   Everything keys off the custom-property tokens; the few
   hardcoded white surfaces get explicit dark flips below.
   ========================================================= */

body.nteu-app-view.nteu-theme-light {
	--nteu-app-purple: #1d1b22;
	--nteu-app-ink: #16151a;
	--nteu-app-muted: #5c5b63;
	--nteu-app-canvas: #e8e8ea;
	--nteu-app-lilac: #f6f6f7;
	--nteu-app-lilac-line: #cbcbd1;
	--nteu-app-line: #d2d2d8;
	--nteu-app-line-strong: #b9b9c0;
	background: #e8e8ea;
}

body.nteu-app-view.nteu-theme-dark {
	--nteu-app-purple: #c9bbf0;
	--nteu-app-ink: #ededf2;
	--nteu-app-muted: #928f9c;
	--nteu-app-canvas: #161519;
	--nteu-app-lilac: #242228;
	--nteu-app-lilac-line: #37353f;
	--nteu-app-line: #34323c;
	--nteu-app-line-strong: #403e49;
	--nteu-app-live: #5cbf7d;
	--nteu-app-live-bg: #1c2a20;
	background: #161519;
	color: #ededf2;
}

/* dark flips for the white surfaces */
body.nteu-app-view.nteu-theme-dark .nteu-links a,
body.nteu-app-view.nteu-theme-dark .nteu-btn,
body.nteu-app-view.nteu-theme-dark .nteu-card--plain,
body.nteu-app-view.nteu-theme-dark .nteu-notice,
body.nteu-app-view.nteu-theme-dark blockquote {
	background: #242228;
	border-color: #403e49;
}
body.nteu-app-view.nteu-theme-dark .et_pb_button {
	background: #242228 !important;
	border-color: #403e49 !important;
}
body.nteu-app-view.nteu-theme-dark .et_pb_button:hover,
body.nteu-app-view.nteu-theme-dark .et_pb_button:active {
	background: #5a47a0 !important;
	border-color: #5a47a0 !important;
}

/* Code-guaranteed live-meeting strip (rendered by nteu-meetings under the in-app topbar).
   A quiet light-blue pill — no border — with the pulsing live dot and trailing arrow.
   Ink rides the purple token (flips for the in-app themes); the dot stays live-green. */
.nteu-live-strip {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 16px 0;
	padding: 13px 20px;
	background: #fff;
	border: 0;
	border-radius: 999px;
	color: var(--nteu-app-purple, #3d217d);
	font-family: "Gilroy Regular", system-ui, sans-serif;
	/* !important: Divi per-module text sizing otherwise inflates the pill and truncates it */
	font-size: calc(16px * var(--nteu-fs, 1)) !important;
	line-height: 1.3;
	text-decoration: none;
}
/* next-meeting state: same pill, but informational — no dot, no trailing "join" arrow.
   Two compact lines: meeting title, then day/time underneath. */
.nteu-live-strip--next::after { content: none !important; }
.nteu-live-strip .ls-txt {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
	text-align: center;
}
.nteu-live-strip .ls-txt strong,
.nteu-live-strip .ls-txt .ls-when {
	flex: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nteu-live-strip .ls-when {
	font-family: "Gilroy Regular", system-ui, sans-serif;
	font-size: calc(14px * var(--nteu-fs, 1)) !important;
	color: #6b6875;
}
body.nteu-app-view.nteu-theme-dark .nteu-live-strip .ls-when { color: #928f9c; }
body.nteu-app-view.nteu-theme-dark .nteu-live-strip { background: #242228; }
.nteu-live-strip strong {
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Tablet/desktop: the pill hugs its text (with breathing room) and centres itself,
   instead of stretching the full content width. Phones keep the edge-to-edge pill. */
@media (min-width: 768px) {
	.nteu-live-strip {
		width: fit-content;
		max-width: 100%;
		min-width: 320px;
		margin-left: auto;
		margin-right: auto;
		padding: 13px 44px;
	}
}
.nteu-live-strip .ls-dot {
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4ade80; /* same green as the tab-bar live dot */
	animation: nteu-live-pulse 1.6s ease-in-out infinite;
}
.nteu-live-strip::after {
	content: "\2192";
	margin-left: auto;
	font-family: "Gilroy Bold", system-ui, sans-serif;
}
@keyframes nteu-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .3; }
}

/* =========================================================
   In-app polish for the member shortcode components.
   ========================================================= */

/* The code-guaranteed strip IS the live-meeting door in the app —
   the page's big banner would say the same thing twice. Web keeps it. */
body.nteu-app-view .mh-live { display: none !important; }

/* Enforce app typography over Divi module sizing (Divi's per-module rules
   otherwise out-rank the app layer and inflate text unpredictably). */
body.nteu-app-view .et_pb_section p,
body.nteu-app-view .et_pb_section li,
body.nteu-app-view .entry-content p {
	font-size: calc(16px * var(--nteu-fs, 1)) !important;
	line-height: 1.3 !important;
}
body.nteu-app-view .et_pb_section h1 { font-size: calc(26px * var(--nteu-fs, 1)) !important; line-height: 1.15 !important; }
body.nteu-app-view .et_pb_section h2 { font-size: calc(21px * var(--nteu-fs, 1)) !important; line-height: 1.2 !important; }
/* The post template's title module sets its own 40px!important at higher specificity
   than the generic h1 rule — match it and bring the title to app scale, tight leading */
body.nteu-app-view .et_pb_post_title .et_pb_title_container h1.entry-title {
	font-size: calc(28px * var(--nteu-fs, 1)) !important;
	line-height: 1.15 !important;
}
body.nteu-app-view .et_pb_post_title .et_pb_title_meta_container { line-height: 1.35 !important; padding-top: 0 !important; margin-top: 0 !important; }
/* Close the canyon between the title and the author/meta row: kill the title's
   trailing padding and the template rows' default Divi padding stack (the title
   sits in row_0, the meta/avatar in row_1 — each carries ~27px by default). */
body.nteu-app-view .et_pb_post_title h1.entry-title { margin-bottom: 16px !important; padding-bottom: 0 !important; }
body.nteu-app-view .et_pb_post_title .et_pb_title_container { padding-bottom: 0 !important; margin-bottom: 0 !important; }
body.nteu-app-view.single-post .et_pb_row_0_tb_body { padding-bottom: 0 !important; }
body.nteu-app-view.single-post .et_pb_row_1_tb_body { padding-top: 0 !important; }
/* Author/meta blurb: centre the avatar against its two text lines (Divi top-aligns
   the image cell) and give the block matching 16px air above (title margin) and
   below — balanced, deliberate */
body.nteu-app-view.single-post .et_pb_row_1_tb_body .et_pb_blurb { margin: 0 0 16px !important; }
body.nteu-app-view.single-post .et_pb_blurb_position_left .et_pb_blurb_content { display: flex !important; align-items: center !important; }
body.nteu-app-view.single-post .et_pb_blurb_position_left .et_pb_main_blurb_image { margin: 0 12px 0 0 !important; width: auto !important; line-height: 0; }
body.nteu-app-view.single-post .et_pb_blurb_position_left .et_pb_blurb_container { padding: 0 !important; vertical-align: middle !important; }

/* Divi emits specificity-boost selectors like ".single-post:hover … .et_pb_row_N_tb_body
   {width:70%!important}" WITHOUT media scoping — on phones the row is 100% until a touch
   sets sticky hover, then it narrows and the title block jumps right. Pin full width on
   small screens; the html prefix outguns Divi's selector at equal !important. */
@media (max-width: 980px) {
	html .et_pb_pagebuilder_layout.single-post #main-content .et_pb_row.et_pb_row_0_tb_body,
	html .et_pb_pagebuilder_layout.single-post:hover #main-content .et_pb_row.et_pb_row_0_tb_body,
	html .et_pb_pagebuilder_layout.single-post #main-content .et_pb_row.et_pb_row_1_tb_body,
	html .et_pb_pagebuilder_layout.single-post:hover #main-content .et_pb_row.et_pb_row_1_tb_body {
		width: 100% !important;
	}
}
body.nteu-app-view .et_pb_section h3 { font-size: calc(17px * var(--nteu-fs, 1)) !important; line-height: 1.25 !important; }
body.nteu-app-view .et_pb_section h4 { font-size: calc(15px * var(--nteu-fs, 1)) !important; line-height: 1.25 !important; }

/* Member components: one consistent scale in-app (labels 11, values 15, all
   riding the A−/A+ setting like everything else). */
body.nteu-app-view .mh-next small,
body.nteu-app-view .nteu-member-profile .mp-row small,
body.nteu-app-view .nteu-member-feed .mf-item small {
	font-size: calc(11px * var(--nteu-fs, 1)) !important;
}
body.nteu-app-view .mh-next p,
body.nteu-app-view .nteu-member-profile .mp-row span,
body.nteu-app-view .nteu-member-feed .mf-item span {
	font-size: calc(15px * var(--nteu-fs, 1)) !important;
	line-height: 1.5 !important;
}
/* …but the source pill and date are meta, not content — keep them small in-app
   (the generic .mf-item span rule above otherwise inflates them to 15px) */
body.nteu-app-view .nteu-member-feed .mf-item small .mf-src {
	font-size: calc(11px * var(--nteu-fs, 1)) !important;
	line-height: 1.4 !important;
}
body.nteu-app-view .nteu-member-feed .mf-item small .mf-when {
	font-size: calc(12px * var(--nteu-fs, 1)) !important;
	line-height: 1.4 !important;
}
body.nteu-app-view .nteu-member-feed .mf-item strong { font-size: calc(16px * var(--nteu-fs, 1)) !important; line-height: 1.3 !important; }
/* the excerpt matches web exactly — 14px, tight 1.3 leading (the generic span
   rule above is for meta rows, not the excerpt) */
body.nteu-app-view .nteu-member-feed .mf-item .mf-x {
	font-size: calc(14px * var(--nteu-fs, 1)) !important;
	line-height: 1.3 !important;
}
body.nteu-app-view .nteu-member-profile { gap: 10px 14px; }

/* Dark theme flips for the shortcode components (their own styles hardcode light surfaces) */
body.nteu-app-view.nteu-theme-dark .mh-next,
body.nteu-app-view.nteu-theme-dark .nteu-member-profile {
	background: #242228 !important;
	border-color: #37353f !important;
}
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-item {
	background: #242228 !important;
	border-color: #403e49 !important;
	color: #ededf2 !important;
}
body.nteu-app-view.nteu-theme-dark .mh-next small,
body.nteu-app-view.nteu-theme-dark .nteu-member-profile .mp-row small,
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-item small { color: #c9bbf0 !important; }
body.nteu-app-view.nteu-theme-dark .mh-next p,
body.nteu-app-view.nteu-theme-dark .nteu-member-profile .mp-row span,
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-item span { color: #ededf2 !important; }

/* =========================================================
   Purple home components — brand panel, tile grid, QR card.
   All opt-in classes; use anywhere (web and app render alike).
   In Divi: Section/Row/Module → Advanced → CSS Class.
   ========================================================= */

/* Brand-purple panel. Put the class on a Divi Section for a full-bleed band,
   or on a Row/Module for an inset card. Text inside flips to white — including
   in-app, where these rules out-rank the app layer's purple headings. */
.nteu-purple {
	background: var(--nteu-app-purple, #3d217d);
	color: #fff;
	padding: 22px 18px;
}
div.nteu-purple:not(.et_pb_section) { border-radius: 16px; margin: 0 0 16px; }
.nteu-purple h1, .nteu-purple h2, .nteu-purple h3, .nteu-purple h4,
body.nteu-app-view .et_pb_section .nteu-purple h1, body.nteu-app-view .et_pb_section .nteu-purple h2,
body.nteu-app-view .et_pb_section .nteu-purple h3, body.nteu-app-view .et_pb_section .nteu-purple h4,
body.nteu-app-view .et_pb_section.nteu-purple h1, body.nteu-app-view .et_pb_section.nteu-purple h2,
body.nteu-app-view .et_pb_section.nteu-purple h3, body.nteu-app-view .et_pb_section.nteu-purple h4 {
	color: #fff !important;
}
.nteu-purple p, .nteu-purple li { color: rgba(255, 255, 255, .88); }
.nteu-purple a { color: #fff; }
/* the purple panel is the brand statement — it stays purple in light AND dark themes */

/* Tile grid — 2-up tap targets for the key areas. Each tile is a plain <a>. */
.nteu-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 0 0 16px;
}
.nteu-tiles a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 96px;
	background: #fff;
	border: 1px solid var(--nteu-app-line);
	border-radius: 14px;
	color: var(--nteu-app-purple, #3d217d) !important;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(17px * var(--nteu-fs, 1));
	text-decoration: none;
	text-align: center;
	transition: box-shadow .15s ease;
}
.nteu-tiles a:active { transform: scale(.97); }
.nteu-tiles a:hover { box-shadow: 0 4px 14px rgba(61, 33, 125, .12); }
/* inside the purple panel, tiles read as white cards — force the light look there */
.nteu-purple .nteu-tiles a { background: #fff; border-color: rgba(255, 255, 255, .3); color: #3d217d !important; }
/* dark theme (outside the purple panel): tiles take the dark surface */
body.nteu-app-view.nteu-theme-dark .nteu-tiles a { background: #242228; border-color: #403e49; }

/* QR card — [nteu_qr url="..." label="..."] renders into this. White card so the
   code always scans, even on the purple panel or in dark theme. */
.nteu-qr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--nteu-app-line);
	border-radius: 14px;
	padding: 16px;
	margin: 0 0 16px;
}
.nteu-qr-code svg { display: block; width: 170px; height: 170px; }
.nteu-qr-label {
	font-size: calc(13px * var(--nteu-fs, 1));
	color: #6b6875;
	text-align: center;
	max-width: 220px;
}
.nteu-purple .nteu-qr { border-color: rgba(255, 255, 255, .3); }

/* =========================================================
   Member home layout helpers (opt-in classes used by the
   Divi layout: purple hero + tile grid).
   ========================================================= */

/* Purple hero section — white type on the brand purple */
.nteu-hero-purple h1, .nteu-hero-purple h2, .nteu-hero-purple h3 { color: #fff !important; }
.nteu-hero-purple p, .nteu-hero-purple .nteu-muted { color: #d9d2ec !important; }
/* the app layer flattens section backgrounds — the hero keeps its purple */
body.nteu-app-view .et_pb_section.nteu-hero-purple { background-color: #3d217d !important; }

/* [member_greeting] — member number hugs the heading (Medibank-style identity block):
   heading, then tap-to-copy member number, then branch on its own line underneath. */
.nteu-greeting h1 { margin: 0 0 6px !important; padding-bottom: 0 !important; }
.nteu-member-no {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: calc(16px * var(--nteu-fs, 1));
	line-height: 1.4;
	color: var(--nteu-app-muted);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.nteu-member-no svg { width: 16px; height: 16px; opacity: .75; }
.nteu-member-no .mn-done {
	display: none;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(12px * var(--nteu-fs, 1));
}
.nteu-member-no.copied .mn-done { display: inline; }
.nteu-greeting .mn-branch { display: block; margin: 2px 0 0 !important; }
/* [member_profile] identity header — the greeting block reused above the detail rows */
.nteu-profile-head { margin: 0 0 18px; }

/* Desktop helpers for the member-home bands — ALL opt-in Divi classes (Section/Row →
   Advanced → CSS Class); nothing applies unless you add the class. Phones unaffected.
   nteu-center-desktop  centre this band's content on big screens only
   nteu-clamp-h1        cap outsized h1s in this band to 30-44px on big screens
   nteu-narrow          cap this section's rows to one shared 1080px column
   nteu-band-white      standardise this band's background to white
   nteu-band-canvas     standardise this band's background to the #fafafa canvas */
@media (min-width: 981px) {
	.nteu-center-desktop { text-align: center; }
	.nteu-clamp-h1 h1 { font-size: clamp(30px, 3.2vw, 44px) !important; }
	.et_pb_section.nteu-narrow .et_pb_row, div.nteu-narrow { max-width: 1080px; margin-left: auto; margin-right: auto; }
}
.et_pb_section.nteu-band-white, div.nteu-band-white { background-color: #fff !important; }
.et_pb_section.nteu-band-canvas, div.nteu-band-canvas { background-color: #fafafa !important; }
/* on the purple surfaces the copy control reads in the hero's lavender */
.nteu-hero-purple .nteu-member-no, .nteu-purple .nteu-member-no { color: #d9d2ec; }
.nteu-hero-purple .nteu-member-no .mn-done, .nteu-purple .nteu-member-no .mn-done { color: #fff; }

/* Tile grid — key-area tiles (Meetings / News / Contacts / Tools / Card) */
.nteu-tiles {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 16px 0;
}
.nteu-tiles a {
	display: block;
	background: #fff;
	border: 1px solid #e6e2ef;
	border-radius: 14px;
	padding: 16px;
	text-decoration: none;
	color: #26242c;
	transition: box-shadow .15s ease;
}
.nteu-tiles a strong {
	display: block;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(16px * var(--nteu-fs, 1));
	color: #3d217d;
	margin-bottom: 2px;
}
.nteu-tiles a span {
	font-size: calc(12px * var(--nteu-fs, 1));
	line-height: 1.4;
	color: #6b6875;
}
.nteu-tiles a:hover { box-shadow: 0 4px 14px rgba(61, 33, 125, .12); }
.nteu-tiles a:active { background: #f4f0fb; }
@media (min-width: 981px) { .nteu-tiles { grid-template-columns: repeat(4, 1fr); } }

/* dark theme */
body.nteu-app-view.nteu-theme-dark .nteu-tiles a { background: #242228; border-color: #403e49; color: #ededf2; }
body.nteu-app-view.nteu-theme-dark .nteu-tiles a strong { color: #c9bbf0; }
body.nteu-app-view.nteu-theme-dark .nteu-tiles a span { color: #928f9c; }

/* =========================================================
   Quick-link Blurb row (Divi Blurbs) — mobile behaviours.
   Apply ONE of these classes to the Blurb row (Row settings →
   Advanced → CSS Class):
   nteu-blurb-strip : horizontal scroll-snap strip (app feel)
   nteu-blurb-2col  : stack 2+2+1 on phones
   ========================================================= */
@media (max-width: 980px) {
	.nteu-blurb-strip {
		display: flex !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		gap: 12px;
		padding-bottom: 8px;
	}
	.nteu-blurb-strip::-webkit-scrollbar { display: none; }
	.nteu-blurb-strip .et_pb_column {
		flex: 0 0 31%;
		min-width: 110px;
		margin-bottom: 0 !important;
		scroll-snap-align: start;
	}
	.nteu-blurb-2col { display: flex !important; flex-wrap: wrap; gap: 12px; }
	.nteu-blurb-2col .et_pb_column { width: calc(50% - 6px) !important; margin-bottom: 0 !important; }
	.nteu-blurb-2col .et_pb_column:last-child { width: 100% !important; }
}

/* [member_tiles] — key-area tiles.
   PHONES (<768px): icon alone inside a square card, label underneath (home-screen pattern).
   TABLET/DESKTOP: icon + label together inside a square tile, group centred.
   Squares via padding-top spacers (resolved against width — works in every engine).
   No vertical margin of its own: spacing above/below the grid is set in Divi on the
   module that holds the shortcode (Design → Spacing), not here. */
.nteu-tiles--icons { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0; }
.nteu-tiles--icons a {
	position: relative;
	flex: 0 0 calc((100% - 32px) / 5);
	min-width: 0;
	text-align: center;
}
.nteu-tiles--icons a strong { line-height: 1.25; white-space: normal; overflow-wrap: break-word; margin-bottom: 0; }
/* tiles flagged "| mobile" in the config (e.g. the Wallet card) are phone/tablet only */
@media (min-width: 981px) { .nteu-tiles--icons a.tile-mobile { display: none; } }

@media (max-width: 767px) {
	/* the anchor is a plain column; the CARD is the icon box */
	.nteu-tiles--icons a { display: block; background: transparent; border: 0; padding: 0; }
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons a { background: transparent; border: 0; }
	.nteu-tiles--icons .tile-icon {
		display: grid;
		grid-template-columns: 100%;
		background: #fff;
		border: 1px solid #e6e2ef;
		border-radius: 14px;
		color: #3d217d;
		line-height: 0;
		transition: box-shadow .15s ease;
	}
	.nteu-tiles--icons .tile-icon::before { content: ''; grid-area: 1 / 1; padding-top: 100%; }
	.nteu-tiles--icons .tile-icon svg { grid-area: 1 / 1; width: 22px; height: 22px; place-self: center; }
	.nteu-tiles--icons a strong { display: block; margin-top: 6px; font-size: calc(10px * var(--nteu-fs, 1)); }
	/* Tap/hover feedback lives on the icon card ONLY — the anchor (and its label)
	   gets no tint and no shadow at this size */
	.nteu-tiles--icons a:hover, .nteu-tiles--icons a:active { background: transparent; box-shadow: none; }
	.nteu-tiles--icons a:hover .tile-icon, .nteu-tiles--icons a:active .tile-icon { background: #f4f0fb; box-shadow: 0 4px 14px rgba(61, 33, 125, .12); }
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons .tile-icon { background: #242228; border-color: #403e49; color: #c9bbf0; }
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons a:hover .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons a:active .tile-icon { background: #2f2d36; }
}

@media (min-width: 768px) {
	/* the whole tile is the square card, icon + label centred inside */
	.nteu-tiles--icons { justify-content: center; gap: 12px; }
	.nteu-tiles--icons a { flex: 0 0 clamp(96px, 9vw, 118px); display: grid; grid-template-columns: 100%; padding: 10px; }
	.nteu-tiles--icons a::before { content: ''; grid-area: 1 / 1; padding-top: 100%; }
	.nteu-tiles--icons a .tile-in {
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 6px;
		min-width: 0;
	}
	.nteu-tiles--icons .tile-icon { display: block; margin: 0; color: #3d217d; line-height: 0; }
	.nteu-tiles--icons .tile-icon svg { width: 26px; height: 26px; }
	.nteu-tiles--icons a strong { font-size: calc(14px * var(--nteu-fs, 1)); }
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons .tile-icon { color: #c9bbf0; }
}

/* ---- [member_tiles] on the purple hero: frosted variant ----
   Applies automatically inside .nteu-purple / .nteu-hero-purple, or anywhere via
   [member_tiles style="purple"] (.nteu-tiles--onpurple). style="white"
   (.nteu-tiles--onwhite) opts back into the white-card look inside a purple
   surface. The purple surfaces stay brand-purple in every theme, so the frosted
   values are fixed — the dark-theme duplicates below only out-rank the dark
   card flips. */
@media (max-width: 767px) {
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	.nteu-tiles--icons.nteu-tiles--onpurple .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple .tile-icon {
		background: rgba(255, 255, 255, .14);
		border-color: rgba(255, 255, 255, .3);
		color: #fff;
	}
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover .tile-icon,
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active .tile-icon,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover .tile-icon,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active .tile-icon,
	.nteu-tiles--icons.nteu-tiles--onpurple a:hover .tile-icon,
	.nteu-tiles--icons.nteu-tiles--onpurple a:active .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple a:hover .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple a:active .tile-icon {
		background: rgba(255, 255, 255, .26);
		box-shadow: none;
	}
}
@media (min-width: 768px) {
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a,
	.nteu-tiles--icons.nteu-tiles--onpurple a,
	body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a,
	body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple a {
		background: rgba(255, 255, 255, .14);
		border-color: rgba(255, 255, 255, .3);
		color: #fff !important;
	}
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover,
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:hover,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a:active,
	.nteu-tiles--icons.nteu-tiles--onpurple a:hover,
	.nteu-tiles--icons.nteu-tiles--onpurple a:active {
		background: rgba(255, 255, 255, .26);
		box-shadow: none;
	}
	.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	.nteu-tiles--icons.nteu-tiles--onpurple .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) .tile-icon,
	body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple .tile-icon {
		color: #fff;
	}
}
/* frosted labels (phones show the label outside the card; desktop pins the
   heading colour set by the base .nteu-tiles a strong rule) */
.nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a strong,
.nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a strong,
.nteu-tiles--icons.nteu-tiles--onpurple a strong,
body.nteu-app-view.nteu-theme-dark .nteu-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a strong,
body.nteu-app-view.nteu-theme-dark .nteu-hero-purple .nteu-tiles--icons:not(.nteu-tiles--onwhite) a strong,
body.nteu-app-view.nteu-theme-dark .nteu-tiles--icons.nteu-tiles--onpurple a strong {
	color: #fff;
}



/* Dismissible announcement cards — light NTEU-blue card, purple icon + View pill.
   Every element pinned to the same left edge; buttons sit together, not at opposite ends. */
.nteu-member-feed.nteu-feed-dismiss .mf-ann,
.nteu-member-feed.nteu-feed-ann .mf-ann {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	background: #e7f0f6;
	border-color: #cfe0eb;
}
.nteu-feed-carousel .mf-ann { width: 300px; }
.mf-ann .mf-annicon { color: #3d217d; line-height: 0; margin: 0 0 0 -5px; padding: 0; }
.mf-ann .mf-annicon svg { width: 44px; height: 44px; display: block; }
/* one shared left edge — kill any inherited indents outright */
.mf-ann .mf-body,
.mf-ann .mf-body small,
.mf-ann .mf-body strong,
.mf-ann .mf-x {
	margin-left: 0 !important;
	padding-left: 0 !important;
	text-indent: 0 !important;
	display: block;
}
.mf-ann .mf-body { margin: 0; padding: 0; }
.mf-ann .mf-actions {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 28px;
	margin: 4px 0 0;
	padding: 0;
}
.mf-ann .mf-dismiss {
	background: none;
	border: 0;
	margin: 0 0 0 12px;
	padding: 8px 0;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(15px * var(--nteu-fs, 1));
	color: #26242c;
	cursor: pointer;
	text-align: left;
}
.mf-ann .mf-view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 6px 28px;
	border: 1px solid #3d217d;
	border-radius: 999px;
	font-family: "Gilroy Bold", system-ui, sans-serif;
	font-weight: 700;
	font-size: calc(15px * var(--nteu-fs, 1));
	background: transparent;
	color: #3d217d !important;
	text-decoration: none;
}
.mf-ann .mf-view:hover { background: #3d217d; color: #ffffff !important; }
/* the light-blue card stays light in dark theme (its text is dark) */
body.nteu-app-view.nteu-theme-dark .nteu-member-feed.nteu-feed-dismiss .mf-ann,
body.nteu-app-view.nteu-theme-dark .nteu-member-feed.nteu-feed-ann .mf-ann {
	background: #e7f0f6 !important;
	border-color: #cfe0eb !important;
	color: #26242c !important;
}
/* …and its ink must out-rank the generic dark .mf-item span/small flips (higher
   specificity here), or the tick and text wash out to pale lavender on the light card */
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann .mf-annicon { color: #3d217d !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann .mf-body strong { color: #26242c !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann .mf-x { color: #4f4d57 !important; }
body.nteu-app-view.nteu-theme-dark .mf-ann .mf-body strong { color: #26242c !important; }
body.nteu-app-view.nteu-theme-dark .mf-ann .mf-x { color: #4f4d57 !important; }
body.nteu-app-view.nteu-theme-dark .mf-ann .mf-dismiss { color: #26242c !important; }
/* source pill (publishing site): dark surface flip on dark news cards; the announcement
   cards stay light in dark theme, so their pill (and grey date) keep the light look.
   !important — the dark .mf-item span colour rule above otherwise wins on the pill. */
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-item .mf-src { background: #342f44; color: #c9bbf0 !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-item small .mf-when { color: #928f9c !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann small { color: #4f4d57 !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann .mf-src { background: #f4f0fb; color: #3d217d !important; }
body.nteu-app-view.nteu-theme-dark .nteu-member-feed .mf-ann small .mf-when { color: #4f4d57 !important; }
/* feed section header (title + "See all →" arrow) dark flips */
body.nteu-app-view.nteu-theme-dark .mf-head .mf-head-title,
body.nteu-app-view.nteu-theme-dark .mf-head .mf-head-all { color: #c9bbf0; }
body.nteu-app-view.nteu-theme-dark .mf-head .mf-head-arrow { background: #1e1d22; border-color: #34323c; color: #bdbbc6; }
/* excerpt leading — out-ranks the plugin's inline 1.5 */
.nteu-member-feed .mf-item .mf-x { line-height: 1.3; }


/* Feed source/date line: sentence case, normal tracking (out-ranks the plugin's
   inline uppercase rule) — applies to news and announcement cards alike */
.nteu-member-feed .mf-item .mf-body small,
.nteu-member-feed .mf-item small {
	text-transform: none;
	letter-spacing: 0;
}

/* [nteu_qr] — tight white chip hugging the QR code, centred; not a full-width slab */
div.nteu-qr {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	background: #fff !important;
	border: 1px solid #e6e2ef;
	border-radius: 14px;
	padding: 12px 12px 8px !important;
	text-align: center;
}
div.nteu-qr .nteu-qr-code { display: block; line-height: 0; }
div.nteu-qr .nteu-qr-code svg { display: block; width: 200px; height: 200px; max-width: 100%; }
div.nteu-qr .nteu-qr-label {
	display: block;
	margin-top: 6px;
	font-size: calc(13px * var(--nteu-fs, 1));
	color: #6b6875;
}
/* stays a light chip in dark theme — QR codes need the white background to scan */
body.nteu-app-view.nteu-theme-dark div.nteu-qr { background: #fff !important; border-color: #e6e2ef !important; }