/*
 * The Rare Mind — component class library.
 *
 * Apply these via the block editor's "Advanced" panel ->
 * "Additional CSS class(es)" field on Group / Buttons / Button /
 * Paragraph / Heading blocks, to reproduce the original site's look.
 * See the pattern files in /patterns/ for worked examples.
 */

/* ---------- Global base (matches Astro's global.css @layer base) ---------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

[id] {
	scroll-margin-top: 5.5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Card titles (h3) are semibold in the original design — theme.json's
   global heading style is bold (700) for h1/h2/h4, but title-card
   context is specifically font-semibold. WordPress's own generated
   heading-color/weight rule uses a zero-specificity :where() selector,
   so this plain h3 rule overrides it with no !important needed. */
/* Heading weight/family locked down explicitly with !important —
   proven necessary: the header's site-title was found rendering at
   the wrong size because Elementor's global Kit CSS was silently
   overriding it despite theme.json's own heading styles. The same
   conflict could easily be hitting h1/h2 section titles too (that's
   what "titles should be more bold" reports usually are), so this
   asserts it everywhere rather than trusting inheritance to survive
   Elementor's global styles. */
h1, h2, h3, h4, h5, h6 {
	font-family: "Manrope", system-ui, sans-serif !important;
}

h1, h2, h4, h5, h6 {
	font-weight: 700 !important;
}

h3 {
	font-weight: 600 !important;
}

/* ---------- Layout helpers ---------- */

/* !important here on purpose: these sit inside outer sections using
   WordPress's "constrained" layout type, which generates its own
   max-width rule for direct children (defaulting to theme.json's
   48rem contentSize) — that rule was winning over these plain classes
   the same way the hero-glow bug happened, silently capping
   .container-page at 48rem instead of the intended 72rem and making
   every section look narrower/more boxed-in than designed. */
.container-narrow {
	max-width: 48rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.container-page {
	max-width: 72rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* WordPress's Grid layout (used for wrapping card grids of 3+ items,
   see events-list.php / projects-grid.php) doesn't auto-collapse to a
   single column on narrow screens the way the Columns block does —
   without this, a fixed 2-column grid stays 2 columns down to phone
   widths and every card gets squeezed unreadably narrow. */
@media (max-width: 640px) {
	.grid-2col {
		grid-template-columns: 1fr !important;
	}
}

/* CSS Grid only equalizes card height WITHIN a row, not across the whole
   grid — so on Events/Projects, cards in a shorter-content row (e.g.
   Pharma @ University) end up visibly shorter than cards in a
   longer-content row (e.g. Rare Disease Community Events), even though
   each pair matches its own row partner. A shared min-height makes every
   card in the 2-column desktop layout reach the same floor regardless of
   row, while still letting any card grow taller if its own content needs
   more room. Desktop-only (matches where the 2-column layout is actually
   active) so mobile's single-column stack isn't padded out unnecessarily. */
@media (min-width: 641px) {
	.grid-2col .card-accent-navy {
		min-height: 24rem;
	}
}

/* Projects cards don't need that same floor — their content naturally
   comes out to ~235px, so the shared 24rem (384px) min-height above was
   padding every card with roughly 150px of empty space. Scoped to
   .projects-cards-grid specifically (two classes = higher specificity
   than the shared rule above, so this wins regardless of source order)
   rather than changing the shared rule itself, since Events still needs
   it — its rows vary enough in content that without a shared floor,
   shorter-content rows would visibly mismatch taller ones. */
@media (min-width: 641px) {
	.grid-2col.projects-cards-grid .card-accent-navy {
		min-height: 0;
	}
}

/* Same idea, 3-column variant (Pause gallery): 3 columns desktop, 2 on
   tablet, 1 on phones — matches the original `sm:grid-cols-2
   lg:grid-cols-3`. */
@media (max-width: 1024px) {
	.grid-3col {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 640px) {
	.grid-3col {
		grid-template-columns: 1fr !important;
	}
}

/* Defensive: Columns should stretch all columns to equal height by
   default (normal flexbox behavior) — asserted explicitly in case
   something in Extendable/Elementor's global CSS resets it, the same
   way other defaults have turned out to be overridden elsewhere in
   this build. Excludes Columns blocks that explicitly set a
   vertical alignment (About page portrait, Events topics/speaker
   card) — those need their own alignment respected, not forced
   stretch. */
.wp-block-columns:not(.are-vertically-aligned-top):not(.are-vertically-aligned-center):not(.are-vertically-aligned-bottom) {
	align-items: stretch !important;
}

/* Alternating section background bands, matching the original
   homepage rhythm of a -> white -> c -> a ... */
.bg-section-a {
	background: linear-gradient(160deg, #eceef2 0%, #f5f6f8 45%, #eef0f4 100%);
}

.bg-section-b {
	background-color: #ffffff;
}

.bg-section-c {
	background: linear-gradient(180deg, #e4e7ed 0%, #f0f2f5 50%, #e9ecf1 100%);
}

.bg-mesh-light {
	background-color: #fafbfc;
	background-image:
		radial-gradient(at 0% 0%, rgba(229, 163, 25, 0.05) 0, transparent 50%),
		radial-gradient(at 100% 100%, rgba(21, 42, 94, 0.04) 0, transparent 45%);
}

/* ---------- Eyebrow / text styles ---------- */

.eyebrow {
	display: inline-block;
	font-family: "Nunito Sans", system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #b8830f;
}

.eyebrow.is-light {
	color: #f4c14a;
}

.body-lead {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	color: #152a5e;
}

.body-muted {
	color: #5a6680;
}

/* ---------- Hero (navy gradient) ---------- */

.page-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #152a5e 0%, #1e3a7a 55%, #152a5e 100%);
	color: #ffffff;
}

.page-hero h1,
.page-hero h2 {
	color: #ffffff;
}

.page-hero .has-text-color {
	color: #ffffff;
}

.page-hero .accent-line {
	color: #f4c14a;
}

/* Two blurred glow blobs — plain <div class="hero-glow-gold"> /
   <div class="hero-glow-navy"> elements as children of a .page-hero
   section (not WordPress blocks). IMPORTANT: WordPress's own
   auto-generated layout CSS (".is-layout-constrained > *") matches
   these too and sets position:relative at the same specificity as a
   bare class selector — whichever stylesheet loads last wins, so
   without !important this can silently turn them into normal flow
   content (each ~20-24rem tall), pushing the rest of the hero's
   content hundreds of pixels down the page. !important + a
   .page-hero-scoped selector makes this survive regardless of load
   order. */
.page-hero .hero-glow-gold,
.page-hero .hero-glow-navy {
	position: absolute !important;
	margin: 0 !important;
	border-radius: 9999px;
	filter: blur(60px);
	pointer-events: none;
	z-index: 0;
}

.page-hero .hero-glow-gold {
	top: -6rem;
	right: -6rem;
	width: 24rem;
	height: 24rem;
	background: rgba(229, 163, 25, 0.2);
}

.page-hero .hero-glow-navy {
	bottom: -6rem;
	left: -6rem;
	width: 20rem;
	height: 20rem;
	background: rgba(45, 78, 218, 0.25);
}

.page-hero > * {
	position: relative;
	z-index: 1;
}

/* Shifts the portrait down to align with the "André Correia" H1
   rather than the "More about me" eyebrow above it — computed from
   the eyebrow's own line-height (0.75rem font-size x 1.625 line-height
   = 1.21875rem) plus its explicit 0.75rem bottom margin (both set
   directly in about-intro.php, not relying on ambient defaults),
   rounded to 2rem. Nudge this value if it's off by a few pixels.
   padding-bottom/right make room for the decorative blob (positioned
   via .about-portrait::before below) to poke out from behind without
   being clipped — matches the Astro source's own pb-7 pr-7 (28px) on
   this same wrapping element. */
.about-portrait-col {
	margin-top: 2rem;
	padding-bottom: 2rem;
	padding-right: 2rem;
}

/* Portrait treatment (About page), rebuilt to match the actual Astro
   source (src/pages/about.astro) exactly, after feedback that the
   previous version read as heavier/darker than the reference design.
   Three layers, same as Astro's markup:
   1. This element: the 3px gold-to-navy gradient ring (padding fills
      with the gradient, radius rounded-2xl=1rem, shadow matching
      Astro's shadow-[0_12px_32px_rgba(21,42,94,0.14)] exactly).
   2. .about-portrait img's own 8px white border below: recreates
      Astro's separate white-matted inner div (rounded-[0.875rem]
      bg-white p-2) — a picture-frame "mat" between the gradient ring
      and the photo. This is the gap that was removed in an earlier
      round after being mistaken for a bug; it's actually the source
      design's own intentional layer, just needed correct sizing (8px,
      not the old 4px) rather than removal.
   3. The photo itself, object-position cropped like the source. */
.about-portrait {
	position: relative;
	z-index: 1;
	padding: 3px;
	border-radius: 1rem;
	background: linear-gradient(135deg, #e5a319 0%, #152a5e 100%);
	box-shadow: 0 12px 32px rgba(21, 42, 94, 0.14);
}

/* Decorative offset blob behind the portrait — a crisp, solid-edged
   duplicate of the photo's own footprint (240px, same size, not
   blurred or shrunk), offset down-right. This is Astro's actual
   treatment: two overlapping layered shapes, not a soft drop shadow —
   an earlier round reinterpreted this as a blurred shadow, which reads
   as muddier/heavier than the crisp original. Offset scaled up from the
   original 192px/2rem+1.75rem proportions to match the larger photo. */
.about-portrait::before {
	content: "";
	position: absolute !important;
	z-index: -1;
	top: 2.25rem;
	left: 2rem;
	width: 240px;
	height: 240px;
	border-radius: 1rem;
	background: linear-gradient(135deg, rgba(229, 163, 25, 0.5) 0%, rgba(21, 42, 94, 0.4) 100%);
}

.about-portrait img {
	display: block;
	width: 240px;
	height: 240px;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 0.75rem;
	border: 8px solid #ffffff;
}

/* ---------- Cards ---------- */

.surface {
	border-radius: 1.5rem;
	border: 1px solid rgba(21, 42, 94, 0.08);
	background-color: #ffffff;
	box-shadow: 0 8px 30px rgba(21, 42, 94, 0.06);
	padding: 1.5rem;
}

@media (min-width: 640px) {
	.surface {
		padding: 2rem;
	}
}

/* When a .surface card is the only thing in a Columns-block column
   (event/card pairs like "Reflection"/"Together", the stats grid,
   events preview), make it fill the column's full height instead of
   sitting at its own natural content height — otherwise a column with
   more text ends up visibly taller than its neighbor even though the
   invisible column wrappers were equal height all along. Matches the
   CSS Grid default (stretch) the Astro source relied on for the same
   layouts. */
.wp-block-column > .surface,
.wp-block-column > .stat-card {
	height: 100%;
	box-sizing: border-box;
}

.card-interactive {
	transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;
}

.card-interactive:hover {
	transform: translateY(-0.25rem);
	box-shadow: 0 16px 40px rgba(21, 42, 94, 0.12);
	border-color: rgba(229, 163, 25, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.card-interactive {
		transition: none;
	}
	.card-interactive:hover {
		transform: none;
	}
}

.card-accent-gold {
	border-left: 4px solid #e5a319;
}

.card-accent-navy {
	border-left: 4px solid rgba(21, 42, 94, 0.2);
}

/* Event-card internal rhythm (role/eyebrow -> title -> year pill(s) ->
   description -> tags -> "Learn more" link), matching EventCard.astro
   exactly. Done as adjacent-sibling CSS rules rather than per-instance
   margins because this exact structure repeats 11 times across
   events-list.php and section-events-preview.php — one rule here
   keeps every card consistent automatically, instead of relying on
   hand-editing (and potentially missing) each one individually. Uses
   :has() to key off content rather than position, since not every
   card has every optional element (year-pill-only vs recurring years,
   with/without an external link). */
.card-accent-navy .eyebrow + h3 {
	margin-top: 0.5rem;
}

.card-accent-navy h3 + p {
	margin-top: 1rem;
}

.card-accent-navy p:has(> .year-pill-active) + p.body-muted {
	margin-top: 1rem;
}

.card-accent-navy p.body-muted + p {
	margin-top: 1rem;
}

.card-accent-navy p:has(> .tag) + p:has(> .link-arrow) {
	margin-top: 1.25rem;
}

.narrative-card {
	border-radius: 2rem;
	border: 1px solid rgba(21, 42, 94, 0.08);
	box-shadow: 0 12px 40px rgba(21, 42, 94, 0.07);
	background-color: #ffffff;
	padding: 2rem;
	text-align: center;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 640px) {
	.narrative-card {
		padding: 2.5rem;
	}
}

/* ---------- Episode list cards (horizontal: cover + content) ---------- */

.episode-card {
	padding: 0 !important;
	overflow: hidden;
	align-items: stretch !important;
	flex-wrap: wrap;
}

.episode-card .episode-cover {
	margin: 0;
	flex-shrink: 0;
	background-color: #eee9df;
	overflow: hidden;
}

.episode-card .episode-cover img {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.3s ease-out;
}

.episode-card:hover .episode-cover img {
	transform: scale(1.03);
}

.episode-card > .wp-block-group {
	padding: 1.25rem 1.5rem;
	flex: 1;
	min-width: 240px;
}

/* ---------- Stat tiles ---------- */

.stat-card {
	border-radius: 1.5rem;
	border: 1px solid rgba(21, 42, 94, 0.06);
	background-color: #ffffff;
	box-shadow: 0 8px 30px rgba(21, 42, 94, 0.05);
	padding: 1.5rem;
	min-height: 8.5rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.stat-card .stat-value {
	font-family: "Manrope", system-ui, sans-serif;
	font-weight: 800;
	font-size: 2.25rem;
	color: #e5a319;
	line-height: 1;
}

.stat-card .stat-label {
	font-size: 0.875rem;
	color: #5a6680;
}

/* ---------- Topic list (gold dot bullets) ---------- */

.topic-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.topic-list-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	margin-bottom: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.375;
	color: #5a6680;
	font-weight: 600;
	break-inside: avoid;
}

.topic-bullet {
	flex-shrink: 0;
	margin-top: 0.45rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: #e5a319;
}

/* ---------- Podcast "now playing" card (hero + preview) ---------- */

.podcast-now-playing-light {
	flex-wrap: wrap;
	border: 2px solid #e5a319;
	border-radius: 1rem;
	background-color: #ffffff;
	box-shadow: 0 8px 30px rgba(21, 42, 94, 0.06);
	padding: 1rem;
	gap: 1rem;
}

@media (min-width: 640px) {
	.podcast-now-playing-light {
		padding: 1.25rem;
	}
}

.podcast-now-playing-light .wp-block-post-featured-image img {
	object-fit: cover;
	flex-shrink: 0;
}

/* No general styling here beyond this — .podcast-player-embed wraps a
   Post Content block rendering SSP's own player output, and shouldn't
   fight SSP's own CSS. max-width just keeps it from overflowing on
   narrow screens if SSP's player has a fixed internal width. */
.podcast-player-embed {
	max-width: 100%;
	overflow-x: auto;
}

/* Hides the episode description text SSP renders alongside its player.
   Confirmed against the live markup: SSP renders <div class="podcast_player">
   (the actual player) followed by <div class="podcast_meta"> and then the
   description as plain <p class="wp-block-paragraph"> siblings — all inside
   .entry-content, one level deeper than .podcast-player-embed itself, which
   is why the original ">p" selector directly on .podcast-player-embed never
   matched. Targeting .entry-content's own direct <p> children hides only
   the description text; the player div itself uses no <p> tags anywhere
   inside it, so this can't touch it. */
.podcast-player-embed .entry-content > p {
	display: none;
}

/* ---------- Podcast page (/episodes) ---------- */

/* Each past episode's own card — separates one full embedded player
   from the next when several are stacked on one page, so the page
   reads as a list of distinct episodes rather than one long blur. */
.podcast-episode-card {
	padding: 1.5rem;
}

/* Single episode page only: SSP's description paragraphs are the only
   <p> tags landing as direct children of .entry-content here (this page
   doesn't hide them, unlike the listing pages) — this adds the gap
   between the player and the first paragraph, and between each
   paragraph after that. */
.podcast-now-playing-light .entry-content > p {
	margin-top: 1rem;
}

/* Tag pills below the single-episode description — post_tag terms,
   unlimited (episodes will get curated down to fewer tags directly in
   SSP later, so no CSS cap here). Same pill treatment as .tag, applied
   directly to core/post-terms' own <a> links since that block has no
   way to add a class per-term. */
.podcast-single-tags a {
	display: inline-flex !important;
	vertical-align: middle !important;
	border-radius: 9999px !important;
	background-color: rgba(229, 163, 25, 0.15);
	padding: 0.25rem 0.75rem !important;
	font-size: 0.75rem !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: #b8830f !important;
	text-decoration: none !important;
	margin: 0.25rem 0.375rem 0.25rem 0;
}

@media (min-width: 640px) {
	.podcast-episode-card {
		padding: 2rem;
	}
}

/* Subscribe links under the latest episode — deliberately quiet (small,
   muted, plain-text with middot separators) rather than buttons, so it
   reads as a footnote-style byline instead of competing with the
   player or the "Browse past episodes" link above/below it. */
.podcast-subscribe-links {
	font-size: 0.8125rem;
	color: #5a6680;
}

.podcast-subscribe-links a {
	color: #152a5e;
	font-weight: 600;
	text-decoration: none;
}

.podcast-subscribe-links a:hover {
	color: #e5a319;
	text-decoration: underline;
}

/* Query Pagination block styling — matches the site's pill/button
   language (rounded, navy-on-hover) instead of WordPress's bare
   default page-number links. */
.wp-block-query-pagination {
	gap: 0.5rem !important;
}

.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.375rem;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.75rem;
	border-radius: 9999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: #152a5e;
	background-color: #ffffff;
	border: 1px solid rgba(21, 42, 94, 0.1);
	text-decoration: none !important;
	transition: background-color 0.2s, color 0.2s;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: #152a5e;
	color: #ffffff;
}

.wp-block-query-pagination .page-numbers.current {
	background-color: #e5a319;
	border-color: #e5a319;
	color: #152a5e;
}

.wp-block-query-pagination .page-numbers.dots {
	border: none;
	background: none;
	min-width: auto;
	padding: 0 0.25rem;
}

/* ---------- Mission list ---------- */

/* The parent list is a WordPress vertical flex group, which defaults to
   align-items:flex-start — meaning without an explicit width, each item
   shrinks to its own content width instead of filling the row, so the
   five rows end up misaligned/inconsistent widths. width:100% forces
   every row to fill the container regardless of the parent's alignment. */
.mission-item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	width: 100%;
	border-radius: 0.75rem;
	border: 1px solid rgba(21, 42, 94, 0.06);
	border-left: 4px solid #e5a319;
	background-color: #ffffff;
	box-shadow: 0 4px 20px rgba(21, 42, 94, 0.04);
	padding: 0.75rem 1rem;
}

.mission-number {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.75rem;
	background: linear-gradient(135deg, rgba(229, 163, 25, 0.25) 0%, rgba(229, 163, 25, 0.1) 100%);
	font-family: "Manrope", system-ui, sans-serif;
	font-size: 1.125rem;
	font-weight: 800;
	color: #b8830f;
	transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}

@media (min-width: 640px) {
	.mission-number {
		width: 3.5rem;
		height: 3.5rem;
		font-size: 1.25rem;
	}
}

.mission-item:hover .mission-number {
	transform: scale(1.1);
	background: rgba(229, 163, 25, 0.3);
}

/* ---------- Tags / badges / pills ---------- */

/* !important on the sizing-related properties here on purpose: these
   render as plain <span> tags inside a body-text <p>, and given the
   proven pattern elsewhere in this build of Elementor's global styles
   overriding un-guarded rules, badges rendering at the surrounding
   paragraph's full body size instead of their own compact size is a
   plausible explanation for "pills too big." */
.tag {
	display: inline-block !important;
	vertical-align: middle !important;
	border-radius: 9999px !important;
	background-color: rgba(229, 163, 25, 0.15);
	padding: 0.25rem 0.75rem !important;
	font-size: 0.75rem !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: #b8830f;
	margin: 0.125rem 0;
}

.year-pill,
.year-pill-active {
	display: inline-flex !important;
	vertical-align: middle !important;
	align-items: center;
	justify-content: center;
	height: 1.25rem !important;
	min-width: 2.125rem;
	border-radius: 0.5rem !important;
	padding: 0 0.4375rem !important;
	font-size: 0.625rem !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	margin: 0.125rem 0;
}

.year-pill {
	background-color: #e8eaef;
	color: rgba(21, 42, 94, 0.7);
}

.year-pill-active {
	background-color: #152a5e;
	color: #ffffff;
}

/* ---------- Links ---------- */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: #b8830f;
	text-decoration: none;
}

.link-arrow::after {
	content: "\2192";
	transition: transform 0.2s ease-out;
}

.link-arrow:hover::after {
	transform: translateX(0.125rem);
}

/* ---------- Buttons (variants beyond the theme.json default) ---------- */
/* .btn-primary is covered by the default Buttons block style from theme.json.
   Note: when you add a class via "Additional CSS class(es)" on a Button
   block, WordPress puts it on the outer <div class="wp-block-button">, not
   the inner <a class="wp-block-button__link"> that carries the visible
   background/border. Each rule below targets both, so it works whichever
   element ends up with the class. */

/* Primary/compact buttons (the theme.json default) have a subtle shadow
   that deepens slightly on hover; secondary/ghost buttons have none. */
.wp-block-button__link {
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out;
}

.wp-block-button__link:hover {
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.btn-secondary,
.btn-secondary .wp-block-button__link {
	border-radius: 9999px !important;
	background-color: #ffffff !important;
	color: #152a5e !important;
	border: 2px solid rgba(21, 42, 94, 0.1) !important;
	box-shadow: none !important;
}

.btn-secondary:hover,
.btn-secondary .wp-block-button__link:hover {
	border-color: #e5a319 !important;
	color: #b8830f !important;
}

.btn-ghost-light,
.btn-ghost-light .wp-block-button__link {
	border-radius: 9999px !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
	border: 2px solid rgba(255, 255, 255, 0.25) !important;
	box-shadow: none !important;
}

.btn-ghost-light:hover,
.btn-ghost-light .wp-block-button__link:hover {
	border-color: #e5a319 !important;
	background-color: rgba(255, 255, 255, 0.15) !important;
}

.btn-compact .wp-block-button__link {
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

/* ---------- Site logo (header + footer) ---------- */
/* The core/site-logo block's own "style.border.radius" attribute
   isn't actually supported (it silently gets dropped, ending up as
   border-radius:0), so rounding is done here instead, targeting
   whichever element the block puts the className on (it varies
   between the wrapping <a> and the <img> depending on context, so
   both are covered). overflow:hidden ensures the actual pixels get
   clipped to the round corners, not just a CSS radius outline. */
.site-brand-logo,
.site-brand-logo img {
	display: block;
	border-radius: 1rem !important;
	overflow: hidden;
}

/* ---------- Header ---------- */

/* Sticky positioning is set on BOTH the header template-part's own
   outer wrapper (the <header class="wp-block-template-part"> that
   WordPress generates around whatever this part's file contains,
   which I don't otherwise control the styling of) and the inner
   .site-header div itself. This is redundant on purpose: position:
   sticky silently stops working if ANY ancestor has a transform,
   filter, or non-visible overflow — if Extendable or Elementor's
   global CSS ever sets one of those on the generic template-part
   wrapper, styling the wrapper directly survives that; styling only
   the inner div would not. */
header.wp-block-template-part:has(.site-header) {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
}

.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 50;
	background-color: rgba(243, 244, 246, 0.9);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(21, 42, 94, 0.08);
}

/* Site title/tagline/nav explicitly locked down with !important — the
   live site's Elementor Kit ships its own global typography CSS that
   was found overriding these (e.g. a plain <p> was computing to
   14.8448px instead of the intended size), so relying on inheritance
   or plain specificity isn't reliable here. */

.site-header .wp-block-site-title,
.site-header .wp-block-site-title a {
	font-size: 0.875rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.025em !important;
	color: #152a5e !important;
}

@media (min-width: 640px) {
	.site-header .wp-block-site-title,
	.site-header .wp-block-site-title a {
		font-size: 1rem !important;
	}
}

.site-header .site-tagline {
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	color: #5a6680 !important;
	margin-top: 0.0625rem !important;
}

.site-header .wp-block-navigation-item a {
	border-radius: 9999px;
	padding: 0.5rem 1rem;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	color: #5a6680 !important;
}

.site-header .wp-block-navigation-item a:hover {
	background-color: #ffffff !important;
	color: #152a5e !important;
	text-decoration: none;
}

/* Covers every way WordPress can mark the active nav item: a proper
   Navigation-block menu uses "current-menu-item" on the <li>; the
   automatic Page List fallback (used until a custom menu is set up in
   Appearance > Editor > Navigation) uses the older "current_page_item"
   convention instead; and modern WP also adds aria-current="page"
   directly on the link regardless of which of the two is in play —
   that last one is the most reliable, so it's listed first.
   Everything here is scoped to .wp-block-navigation specifically (not
   just .site-header) — the site title/logo also link to "/" and sit
   in the same header, so an unscoped aria-current selector could catch
   those too and wrongly paint the site title with the active-nav
   background. */
.site-header .wp-block-navigation a[aria-current="page"],
.site-header .wp-block-navigation .current-menu-item a,
.site-header .wp-block-navigation .wp-block-navigation-item.current-menu-item > a,
.site-header .wp-block-navigation .current_page_item a,
.site-header .wp-block-navigation .current_page_item > a {
	background-color: #152a5e !important;
	color: #ffffff !important;
}

/* ---------- Footer ---------- */

.site-footer {
	background: linear-gradient(135deg, #152a5e 0%, #1e3a7a 55%, #152a5e 100%);
	color: #ffffff;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer a {
	color: #ffffff;
}

.site-footer a:hover {
	color: #e5a319;
}

/* On the navy footer, the eyebrow label needs the brighter gold, not
   the default gold-dark (which is tuned for light backgrounds and
   reads as too dark/low-contrast here) — matches Astro's explicit
   "eyebrow text-gold" override in Footer.astro. */
.site-footer .eyebrow {
	color: #e5a319;
}

.footer-link-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.footer-link-list a {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.footer-link-list a:hover {
	color: #e5a319;
}

.footer-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.8);
	transition: color 0.2s, background-color 0.2s;
}

.footer-social-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

.footer-social-icon:hover {
	color: #e5a319;
	background-color: rgba(229, 163, 25, 0.15);
}

.footer-privacy-link {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.8);
}

.footer-privacy-link:hover {
	color: #e5a319;
}

/* ---------- Pause gallery ---------- */

.pause-gallery-item {
	overflow: hidden;
	padding: 0 !important;
}

.pause-gallery-trigger {
	display: block;
	width: 100%;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.pause-gallery-image {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background-color: #eee9df;
}

.pause-caption {
	max-height: 7.5rem;
	overflow-y: auto;
	border-top: 1px solid rgba(21, 42, 94, 0.06);
	padding: 1rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: #5a6680;
}

.pause-lightbox {
	max-width: 48rem;
	width: 90vw;
	border: 0;
	border-radius: 1.5rem;
	background-color: rgba(21, 42, 94, 0.95);
	padding: 1.5rem;
	color: #ffffff;
}

.pause-lightbox::backdrop {
	background-color: rgba(21, 42, 94, 0.7);
}

.pause-lightbox-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	border-radius: 9999px;
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease-out;
}

.pause-lightbox-close:hover {
	background-color: rgba(255, 255, 255, 0.2);
}

.pause-lightbox-img {
	display: block;
	margin: 0 auto;
	max-height: 70vh;
	width: auto;
	max-width: 100%;
	border-radius: 1rem;
}

.pause-lightbox-caption {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.9);
}