/* Appeal update feed — [paau_appeal_updates] shortcode output.
   Same visual language as the rest of this plugin: white cards, orange
   accents, rounded corners — except no card border or shadow (Fouad adds
   those himself on top of this). Loaded only on singular Appeal pages —
   see class-appeal-updates-display.php's enqueue_assets().

   Correction: the title (<h4 class="paau-appeal-update-title">) used to be
   left fully inheriting the active theme's own H4 styling, with no
   typography of this plugin's own applied to it. That was a mistake, not
   a settled decision — it missed a standing instruction, given earlier in
   this build, to wire this plugin's styling to Elementor's Global
   Colors/Fonts across the whole plugin. Corrected: the title's color and
   font-family now pull from Elementor's tokens too, same as every other
   heading in this plugin — see the rule itself, further down, for what
   is and isn't overridden.

   The badge's accent orange reads from Elementor's Global Colors
   (--e-global-color-primary) with the brand hex as fallback — see the
   README's "Elementor global color tokens" section.

   Same treatment now extended to typography — the badge, pinned flag,
   timestamp, and excerpt read font-family from Elementor's Global Fonts
   (--e-global-typography-text-font-family) instead of just silently
   inheriting whatever the surrounding page happens to set. Confirmed
   variable naming pattern (--e-global-typography-{id}-{property}, with
   "text"/"primary"/"secondary"/"accent" as Elementor's four default
   global font IDs) against real rendered Elementor output before writing
   this, same as the color tokens were. Fallback is `inherit`, not a
   hardcoded font name — unlike the color tokens, there's no single
   confirmed body-font name to fall back to (the org context notes
   Calibri Bold for display headings specifically, nothing about body
   copy), so `inherit` preserves exactly today's behavior on any page
   where this variable isn't defined, rather than guessing a font.
   .paau-appeal-update-title pulls color from Elementor's tokens too, same
   as everything else in this file — but not font-family. It's the one
   real heading tag in this file (an <h4>), and real heading tags in this
   plugin deliberately do NOT get a font-family override any more —
   corrected 0.40.35, see that round's own comment on the rule itself,
   further down, for the confirmed reasoning (PAAU's actual heading font
   is set via Site Settings → Typography, not Elementor's Global Fonts
   kit, and forcing this variable with !important was silently blocking
   it from ever reaching real heading tags). */

.paau-appeal-updates {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.paau-appeal-update {
	display: flex !important;
	gap: 16px !important;
	background: #ffffff !important;
	border-radius: 14px !important;
	padding: 18px !important;
}

.paau-appeal-update.is-pinned {
	background: #FFFBF5 !important;
}

.paau-appeal-update-image {
	flex-shrink: 0 !important;
	width: 96px !important;
	height: 96px !important;
	border-radius: 5px !important;
	overflow: hidden !important;
}

.paau-appeal-update-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.paau-appeal-update-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.paau-appeal-update-meta {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	margin-bottom: 8px !important;
}

.paau-appeal-update-badge {
	display: inline-block !important;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 999px !important;
	padding: 3px 10px !important;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase !important;
}

/* Emergency alerts get a distinct, higher-urgency treatment — the one
   update type where blending in with routine reports would be a problem. */
.paau-appeal-update-type-emergency_alert .paau-appeal-update-badge {
	background: #FDEAEA !important;
	color: #C0392B !important;
}

.paau-appeal-update-pinned-flag {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-appeal-update-meta time {
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
	font-size: 12px !important;
	color: #9a9a9a !important;
	margin-left: auto !important;
}

/* .paau-appeal-update-title (an <h4>) — corrected: this was previously left
   fully inheriting the theme's own H4 styling, on the reasoning that the
   theme's heading looked right here (confirmed from a screenshot at
   0.30.3). That missed a standing, plugin-wide instruction from earlier in
   this build to wire headings to Elementor's Global Colors/Fonts the same
   way every other heading in this plugin already is (see .paau-thankyou-
   heading in thankyou.css, or the checkout headings in checkout.css, both
   of which pull color from --e-global-color-text) — this title was simply
   missed when that instruction was originally actioned. Font-size, weight,
   and spacing are still left to the theme/browser default rather than set
   here — only color is pulled from Elementor's tokens, matching what
   every other unstyled text element in this file now does (see the
   header comment at the top of this file). font-family was ALSO pulled
   from Elementor's tokens originally, but that part of this same
   instruction turned out to be wrong for real heading tags specifically
   — corrected 0.40.35, see that round's own comment on .paau-appeal-
   fundraiser-title (appeal-fundraisers.css) for the confirmed reasoning:
   PAAU's actual heading font isn't carried by Elementor's Global Fonts
   kit at all, it's set via Site Settings → Typography, which this
   !important override was silently blocking from ever reaching this
   tag. Color is unaffected — Global Colors DOES work via this custom
   property, this was specifically a fonts-on-headings issue. The inner
   <a> gets its own explicit rules too, not just the parent <h4> — the
   theme applies its own link color independent of the heading's color,
   so setting color only on .paau-appeal-update-title wouldn't reliably
   reach the visible text. */
.paau-appeal-update-title {
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-appeal-update-title a {
	color: inherit !important;
	font-family: inherit !important;
	text-decoration: none !important;
}

.paau-appeal-update-title a:hover {
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-appeal-update-excerpt {
	margin: 0 !important;
	font-family: var(--e-global-typography-text-font-family, inherit) !important;
	font-size: 14px !important;
	color: #4a4a4a !important;
	line-height: 1.5 !important;
}

@media (max-width: 480px) {
	.paau-appeal-update {
		flex-direction: column !important;
	}

	.paau-appeal-update-image {
		width: 100% !important;
		height: 160px !important;
	}

	.paau-appeal-update-meta time {
		margin-left: 0 !important;
		width: 100% !important;
	}
}