/* Noble Family Theme — global stylesheet. Component classes transcribed from
   design-reference/styles.css; color/font tokens alias to theme.json presets so the
   block editor's pickers and this stylesheet never drift apart. */

:root {
	--ink: var(--wp--preset--color--on-surface);
	--ink-soft: var(--wp--preset--color--on-surface-soft);
	--ink-mute: var(--wp--preset--color--on-surface-mute);
	--cream: var(--wp--preset--color--surface);
	--cream-2: var(--wp--preset--color--surface-alt);
	--sand: var(--wp--preset--color--surface-deep);
	--paper: var(--wp--preset--color--surface-card);
	--clay: var(--wp--preset--color--primary);
	--clay-deep: var(--wp--preset--color--primary-deep);
	--clay-soft: var(--wp--preset--color--primary-soft);
	--olive: var(--wp--preset--color--secondary);
	--olive-deep: var(--wp--preset--color--secondary-deep);
	--olive-soft: var(--wp--preset--color--secondary-soft);
	--amber: var(--wp--preset--color--tertiary);
	--amber-soft: var(--wp--preset--color--tertiary-soft);
	--font-display: var(--wp--preset--font-family--display);
	--font-body: var(--wp--preset--font-family--body);
	--font-serif: var(--wp--preset--font-family--serif);

	/* Tokens with no theme.json preset equivalent. */
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 26px;
	--r-xl: 40px;
	--r-pill: 999px;
	--shadow-sm: 0 2px 8px rgba(35,41,28,0.06);
	--shadow-md: 0 14px 40px -12px rgba(35,41,28,0.18), 0 4px 12px rgba(35,41,28,0.05);
	--shadow-lg: 0 40px 80px -24px rgba(35,41,28,0.28), 0 8px 24px rgba(35,41,28,0.08);
	--shadow-clay: 0 16px 34px -10px rgba(199,91,57,0.45);
	--shadow-olive: 0 16px 34px -10px rgba(88,107,51,0.40);
	--maxw: 1200px;
	--gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

/* WP core's global styles add margin-block-start (24px) to every non-first child of a
   flow-layout container (`:root :where(.is-layout-flow) > *`), meant to space out stacked
   blocks with no gap of their own. Every component in this theme that stacks vertically already
   sets its own explicit margin (see each component's rules below), and every component that
   uses CSS grid/flex already sets `gap` — so this default only ever adds unwanted extra space,
   most visibly double-spacing/misaligning grid and flex items on desktop (mission/how/story-
   facts/sponsor grids). Zero it globally rather than per-component. `:where()` in core's rule
   carries zero specificity, so a plain descendant selector here overrides it regardless of load
   order — no `!important` needed. */
:root :where(.is-layout-flow) > * { margin-block-start: 0; }

/* ---- Reusable structure ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { position: relative; padding: 104px 0; }
.section--tight { padding: 72px 0; }
.section--alt { background: var(--cream-2); }

/* ---- Decorative paper grain dots (design-reference/styles.css) ---- */
.dot-grid { position: absolute; pointer-events: none; background-image: radial-gradient(currentColor 1.4px, transparent 1.4px); background-size: 16px 16px; opacity: 0.18; }

/* ---- Type helpers ---- */
.eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--font-body); font-weight: 700;
	font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--clay);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--clay); border-radius: 2px; }
.eyebrow--olive { color: var(--olive); }
.eyebrow--olive::before { background: var(--olive); }
.eyebrow--center { justify-content: center; }

.display { font-family: var(--font-display); font-size: clamp(40px, 5vw, 52px); font-weight: 800; line-height: 1.0; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.h-sec { font-family: var(--font-display); font-size: clamp(34px, 4.4vw, 45px); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.h-card { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.lead { font-size: 19px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ---- Buttons (used via wp:html for every Donate/Volunteer trigger + plain links) ---- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; padding: 0 30px; border: none; cursor: pointer;
	font-family: var(--font-body); font-weight: 700; font-size: 16px;
	border-radius: var(--r-pill); transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--clay { background: var(--clay); color: #fff; box-shadow: var(--shadow-clay); }
.btn--clay:hover { background: var(--clay-deep); transform: translateY(-2px); box-shadow: 0 22px 40px -10px rgba(199,91,57,0.55); }
.btn--olive { background: var(--olive); color: #fff; box-shadow: var(--shadow-olive); }
.btn--olive:hover { background: var(--olive-deep); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(35,41,28,0.25); }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--cream); }
.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: #11150d; transform: translateY(-2px); }
.btn--sm { height: 46px; padding: 0 22px; font-size: 17px; }
.btn--lg { height: 62px; padding: 0 38px; font-size: 19px; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--clay); cursor: pointer; transition: gap .18s ease, color .18s ease; }
.link-arrow:hover { gap: 13px; color: var(--clay-deep); }

/* ---- Cards ---- */
.card { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow-md); border: 1px solid rgba(35,41,28,0.05); padding: 34px 30px; }

/* ---- Unfilled photo placeholder — see plan's Global Constraints ---- */
.nf-image-slot {
	background: var(--cream-2); color: var(--ink-mute);
	display: flex; align-items: center; justify-content: center;
	text-align: center; font-size: 14px; min-height: 240px;
	border-radius: var(--r-lg); border: 1.5px dashed rgba(35,41,28,0.18);
}
.nf-image-slot p { margin: 0; padding: 16px; }

/* ---- Site header ---- */
.noble-site-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: transparent; transition: background .3s ease, box-shadow .3s ease;
}
.noble-site-header.is-scrolled {
	background: rgba(251,244,230,0.92);
	backdrop-filter: saturate(1.4) blur(10px);
	box-shadow: 0 1px 0 rgba(35,41,28,0.08);
}
/* backdrop-filter creates a new containing block for position:fixed descendants — while
   the mobile nav overlay (also position:fixed) is open, that traps it inside the header's
   own box instead of the viewport. Drop it for the duration so the overlay covers the screen. */
html.has-modal-open .noble-site-header.is-scrolled { backdrop-filter: none; }
.noble-site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 84px; transition: height .3s ease; }
.noble-site-header.is-scrolled .noble-site-header__inner { height: 70px; }
.noble-logo { display: flex; align-items: center; gap: 11px; }
.noble-logo img { width: 42px; height: 42px; object-fit: contain; }
.noble-logo__text { display: flex; flex-direction: column; line-height: 1; }
.noble-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); }
.noble-logo__place { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: 0.32em; color: var(--clay); margin-top: 3px; }
.noble-nav-cta { display: flex; gap: 10px; margin-left: 24px; }
.noble-site-header .wp-block-navigation-item .wp-block-navigation-item__content { font-weight: 600; font-size: 18px; color: var(--ink-soft); }
.noble-site-header .wp-block-navigation-item .wp-block-navigation-item__content:hover { color: var(--clay); }
.noble-site-header .current-menu-item .wp-block-navigation-item__content { color: var(--clay); }

/* ---- Mobile nav overlay ---- */
/* The header nav uses layout:{justifyContent:"right"} for its desktop row, but core
   carries that same flex-end alignment into the mobile overlay's vertical stack, pinning
   the menu into the top-right corner instead of filling the screen — override it here. */
.noble-site-header .wp-block-navigation__responsive-container-open,
.noble-site-header .wp-block-navigation__responsive-container-close { color: var(--ink); }
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--cream) !important; }
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex; flex-direction: column; flex: 1; width: 100%;
}
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: center !important; justify-content: center !important; gap: 32px;
}
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
	font-family: var(--font-display); font-weight: 700; font-size: 28px; color: var(--ink); padding: 0;
}
.noble-site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--clay); }

/* ---- Site footer ---- */
.noble-site-footer { background: var(--ink); color: var(--cream); padding: 72px 0 36px; position: relative; overflow: hidden; }
.noble-site-footer a { color: rgba(251,244,230,0.66); transition: color .15s ease; }
.noble-site-footer a:hover { color: var(--amber); }
.noble-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 60px; padding-bottom: 48px; border-bottom: 1px solid rgba(251,244,230,0.14); }
.noble-footer-col-head { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--cream); margin-bottom: 18px; }
.noble-footer-brand p { font-size: 15px; line-height: 1.65; color: rgba(251,244,230,0.66); margin-top: 22px; }
.noble-footer-social { display: flex; gap: 12px; margin-top: 22px; }
.noble-footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(251,244,230,0.1); display: flex; align-items: center; justify-content: center; }
.noble-footer-social a:hover { background: var(--clay); }
.noble-footer-find { display: flex; gap: 11px; margin-bottom: 16px; }
.noble-footer-find span { font-size: 14.5px; line-height: 1.55; color: rgba(251,244,230,0.66); }
.noble-footer-base { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; flex-wrap: wrap; font-size: 13.5px; color: rgba(251,244,230,0.5); }
.noble-footer-base-links { display: flex; gap: 22px; }
.noble-footer-brand p.wp-block-site-tagline, .noble-footer-brand p.wp-block-site-title { margin-top: 3px; }
.noble-footer-brand p.wp-block-site-title, .noble-footer-brand p.wp-block-site-title a {
    color: var(--cream) !important;
    font-size: 20px;
    line-height: 1.1;
}
.noble-footer-brand p.wp-block-site-tagline {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 0.32em;
    color: var(--clay);
}

/* ---- Home: hero ---- */
.noble-hero { position: relative; overflow: hidden; padding-top: 132px; padding-bottom: 90px; }
.noble-hero-grid { position: relative; display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 52px; align-items: center; }
.noble-hero-underline { color: var(--clay); text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.noble-hero-cta-row { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.noble-hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.noble-hero-trust-dots { display: flex; }
.noble-hero-trust-dots span { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--cream); margin-left: -12px; display: block; }
.noble-hero-trust-dots span:first-child { margin-left: 0; }
.noble-hero-trust-text { font-size: 14.5px; color: var(--ink-mute); line-height: 1.4; margin: 0; }
.noble-hero-art { position: relative; height: 540px; }
.noble-hero-art-main { position: absolute; top: 0; right: 0; width: 82%; height: 360px; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(1.5deg); margin: 0; }
.noble-hero-art-main img { width: 100%; height: 100%; object-fit: cover; }
.noble-hero-art-second { position: absolute; bottom: 0; left: 0; width: 54%; height: 240px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 5px solid var(--cream); transform: rotate(-3deg); min-height: 0; }
.noble-hero-art-second img { width: 100%; height: 100%; object-fit: cover; }
.noble-hero-stat-chip { position: absolute; top: 250px; left: -10px; padding: 16px 20px; border-radius: 20px; display: flex; align-items: center; gap: 13px; z-index: 3; }
.noble-hero-stat-chip-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--olive-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.noble-hero-stat-chip-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink); margin: 0; }
.noble-hero-stat-chip-sub { font-size: 13px; color: var(--ink-mute); margin: 0; }

/* ---- Home: mission ---- */
.noble-mission-statement { max-width: 880px; margin: 0 auto; text-align: center; }
.noble-mission-statement .noble-mission-lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; margin: 0; }
.noble-mission-statement em { color: var(--clay); font-style: italic; }
.noble-mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
.noble-pillar-icon { width: 60px; height: 60px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.noble-pillar-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 10px 0 0; }

/* ---- Home/Story: story ---- */
.noble-story-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: center; }
.noble-story-art { position: relative; }
.noble-story-photo { height: 480px; border-radius: var(--r-xl); overflow: hidden; }
.noble-story-photo img { width: 100%; height: 100%; object-fit: cover; }
.noble-story-signature { position: absolute; bottom: -28px; right: -16px; padding: 20px 24px; border-radius: 20px; max-width: 230px; }
.noble-story-signature-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); margin: 0; }
.noble-story-signature-role { font-size: 13.5px; color: var(--clay); font-weight: 700; margin: 2px 0 0; }
.noble-story-signature-note { font-size: 13px; color: var(--ink-mute); margin: 8px 0 0; line-height: 1.5; }
.noble-story-facts { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 8px; }
.noble-story-fact { border-left: 3px solid var(--amber); padding-left: 14px; }
.noble-story-fact-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--ink); margin: 0; }
.noble-story-fact-label { font-size: 13.5px; color: var(--ink-mute); margin: 0; }

/* ---- Reusable centered section intro (eyebrow + heading + lead) ---- */
.noble-section-intro { text-align: center; max-width: 720px; margin: 0 auto 56px; }

/* ---- Single-purpose text-align helper (avoids inline text-align that the block
   comment's declared attributes don't account for, which fails editor validation) ---- */
.u-center-text { text-align: center; }
.noble-section-cta { margin-top: 40px; }

/* ---- Home: impact stats band ---- */
.noble-impact-band { background: var(--olive-deep); }
.noble-impact-band .eyebrow { color: var(--amber); }
.noble-impact-band .eyebrow::before { background: var(--amber); }
.noble-impact-band .h-sec { color: var(--cream); }
.noble-impact-band .lead { color: rgba(251, 244, 230, 0.72); }
.noble-impact-band__note { text-align: center; margin-top: 44px; font-size: 13px; color: rgba(251, 244, 230, 0.5); font-style: italic; }

/* ---- Home: donate CTA strip ---- */
.noble-donate-strip {
	position: relative;
	overflow: hidden;
	background: var(--clay);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-lg);
	padding: 64px 56px;
	text-align: center;
}
.noble-donate-strip .h-sec { position: relative; z-index: 1; color: var(--cream); margin-bottom: 28px; }
.noble-donate-strip .btn { position: relative; z-index: 1; }
.noble-donate-strip__glow {
	position: absolute;
	z-index: 0;
	top: -120px;
	right: -80px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
}
.noble-donate-strip__dots { bottom: 24px; left: 24px; width: 130px; height: 130px; color: #fff; opacity: 0.2; z-index: 0; }

@media (max-width: 720px) {
	.noble-donate-strip { padding: 40px 26px; }
}

/* ---- Home: how it works ---- */
.noble-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; }
.noble-how-card { position: relative; }
.noble-how-card-num { position: absolute; top: 26px; right: 28px; font-family: var(--font-display); font-weight: 800; font-size: 40px; color: rgba(35,41,28,0.07); }
.noble-how-card-icon { width: 58px; height: 58px; border-radius: 17px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.noble-how-card p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 10px 0 0; }
.noble-schedule-card { display: grid; grid-template-columns: 1.1fr 0.9fr; background: var(--ink); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.noble-schedule-card-copy { padding: 46px 48px; }
.noble-schedule-card-copy .eyebrow { color: var(--amber); }
.noble-schedule-card-copy .eyebrow::before { background: var(--amber); }
.noble-schedule-card-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(28px, 3.2vw, 40px); color: var(--cream); line-height: 1.05; margin: 0 0 24px; }
.noble-schedule-list { display: flex; flex-direction: column; gap: 16px; }
.noble-schedule-item { display: flex; gap: 14px; align-items: flex-start; }
.noble-schedule-item-title { font-weight: 700; font-size: 16.5px; color: var(--cream); margin: 0; }
.noble-schedule-item-sub { font-size: 14px; color: rgba(251,244,230,0.6); margin: 0; }
.noble-schedule-card-photo { position: relative; min-height: 300px; }
.noble-schedule-card-photo .wp-block-image { position: absolute; inset: 0; margin: 0; }
.noble-schedule-card-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Sub-hero (inner pages) ---- */
.noble-sub-hero { position: relative; overflow: hidden; padding-top: 156px; padding-bottom: 64px; }
.noble-sub-hero-inner { position: relative; text-align: center; max-width: 780px; margin: 0 auto; }

/* ---- Partners ---- */
.noble-partners-teaser { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.noble-partners-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-bottom: 64px; }
.noble-partners-quote-stars { display: flex; gap: 6px; margin-bottom: 16px; }
.noble-partners-quote-text { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5; color: var(--ink); margin: 0 0 22px; }
.noble-partners-quote-org { display: flex; align-items: center; gap: 14px; }
.noble-partners-quote-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--olive-soft); display: flex; align-items: center; justify-content: center; flex: none; }
.noble-partners-quote-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0; }
.noble-partners-quote-loc { font-size: 13.5px; color: var(--ink-mute); margin: 0; }
.noble-partners-marquee-note { text-align: center; margin-top: 26px; font-size: 12.5px; color: var(--ink-mute); font-style: italic; }
.noble-testimonial-carousel-note { text-align: center; margin-top: 30px; font-size: 12.5px; color: var(--ink-mute); font-style: italic; }

/* ---- Sponsors ---- */
.noble-sponsor-tiers { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 48px; }
.noble-sponsor-tier { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--paper); border-radius: var(--r-pill); box-shadow: var(--shadow-sm); }
.noble-sponsor-tier-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: block; }
.noble-sponsor-tier-name { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.noble-sponsor-tier-note { font-size: 13px; color: var(--ink-mute); }
.noble-sponsor-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-bottom: 48px; }
.noble-sponsor-grid .card { aspect-ratio: 1.4 / 1; padding: 14px; display: flex; align-items: center; justify-content: center; }
.noble-sponsor-grid .card .wp-block-image { width: 100%; height: 100%; margin: 0; }
.noble-sponsor-grid .card img { width: 100%; height: 100%; object-fit: contain; }
.noble-sponsor-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: var(--ink); border-radius: var(--r-lg); padding: 30px 36px; }
.noble-sponsor-cta-left { display: flex; align-items: center; gap: 16px; }
.noble-sponsor-cta-icon { width: 52px; height: 52px; border-radius: 15px; background: rgba(251,244,230,0.12); display: flex; align-items: center; justify-content: center; flex: none; }
.noble-sponsor-cta-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--cream); margin: 0; }
.noble-sponsor-cta-sub { font-size: 14.5px; color: rgba(251,244,230,0.7); margin: 3px 0 0; }

/* ---- Site logo lockup (core/site-logo + core/site-title + core/site-tagline) ---- */
.noble-logo { gap: 11px; }
.noble-logo .wp-block-site-logo,
.noble-logo .wp-block-site-logo img { width: 42px; height: 42px; object-fit: contain; }
.noble-logo__text { gap: 0; line-height: 1; }
.noble-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.noble-logo__name--on-dark { color: var(--cream); }
.noble-logo__place { font-family: var(--font-body); font-weight: 700; font-size: 15.5px; letter-spacing: 0.32em; color: var(--clay); margin: 3px 0 0; text-transform: uppercase; }

/* ---- Native buttons block styled as a pill CTA (className "btn ...") ---- */
.wp-block-button.btn { height: auto; padding: 0; border-radius: var(--r-pill); }
.wp-block-button.btn .wp-block-button__link { border-radius: var(--r-pill); }
.wp-block-button.btn,
.wp-block-button.btn .wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; padding: 0 30px; border: none;
	font-family: var(--font-body); font-weight: 700; font-size: 16px;
	transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	white-space: nowrap;
}
.wp-block-button.btn--clay .wp-block-button__link { background: var(--clay); color: #fff; box-shadow: var(--shadow-clay); }
.wp-block-button.btn--clay .wp-block-button__link:hover { background: var(--clay-deep); }

/* ---- Footer social links (core/social-links) ---- */
.noble-footer-social { gap: 12px; }
.noble-footer-social .wp-social-link { width: 42px; height: 42px; }
.noble-footer-social .wp-social-link a { width: 100%; height: 100%; background: rgba(251,244,230,0.1); border-radius: 50%; }
.noble-footer-social .wp-social-link a:hover { background: var(--clay); }

/* ---- Footer nav columns (core/navigation) ---- */
.noble-footer-col .wp-block-navigation,
.noble-footer-col .wp-block-navigation__container { display: flex !important; flex-direction: column; gap: 12px; }
.noble-footer-col .wp-block-navigation-item { display: block; }
.noble-footer-col .wp-block-navigation-item .wp-block-navigation-item__content { display: block; font-size: 14.5px; color: rgba(251,244,230,0.66); padding: 0; }
.noble-footer-col .wp-block-navigation-item .wp-block-navigation-item__content:hover { color: var(--amber); }
.noble-footer-col .current-menu-item .wp-block-navigation-item__content { color: var(--amber); }

/* ----Fix custom to prevent wordpress default style rules  ---- */
.wp-block-group.noble-mission-grid .is-layout-flow,
.noble-how-grid .noble-how-card.is-layout-flow,
.noble-story-facts .noble-story-fact.is-layout-flow,
.noble-sponsor-grid .is-layout-flow.card  {
    margin-block-start: 0;
}
.noble-schedule-card .noble-schedule-card-photo.is-layout-flow {
    margin-block-start: 0;
}

/* ---- Blog: post cards (shared by the archive grid and the related-posts block) ---- */
a.noble-post-card,
.noble-post-card {
	display: block;
	background: var(--paper);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(35,41,28,0.05);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
}
.noble-post-card__image { display: block; margin: 0; aspect-ratio: 16 / 10; }
.noble-post-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.noble-post-card__image--placeholder { display: flex; align-items: center; justify-content: center; background: var(--cream-2); }
.noble-post-card__image--placeholder a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.noble-post-card__body { display: block; padding: 24px 26px; }
.noble-post-card__cat {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
	background: var(--cream-2);
	border-radius: var(--r-pill);
	padding: 5px 14px;
	margin-bottom: 12px;
}
.noble-post-card .h-card,
.noble-post-card__title { display: block; margin: 0 0 10px; }
.noble-post-card__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.noble-post-card__date { display: block; font-size: 13px; color: var(--ink-mute); margin: 0; }

.noble-blog-grid,
.noble-related-posts__grid,
.noble-weekly-activity-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.noble-related-posts__grid { margin-block-start: 40px; }
.noble-blog-grid > li { margin: 0; }
section.noble-blog-body .wp-block-query.noble-blog-query { margin-block-start: 24px; }

.noble-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 56px;
	flex-wrap: wrap;
}
.noble-pagination a,
.noble-pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border-radius: var(--r-pill);
	font-weight: 700;
	font-size: 14.5px;
	color: var(--ink);
	border: 1.5px solid rgba(35,41,28,0.14);
	text-decoration: none;
	transition: transform .15s ease, background .2s ease, color .2s ease;
}
.noble-pagination .page-numbers.current {
	background: var(--ink);
	color: var(--cream);
	border-color: var(--ink);
}
.noble-pagination a:hover { transform: translateY(-1px); }

/* ---- Single post ---- */
/* `body.single main .noble-single-banner` (not a bare `.noble-single-banner` class selector) is
   deliberate: WP core's own global-styles-inline-css sets `:root :where(.is-layout-flow) >
   :first-child { margin-block-start: 0; }` — `:where()` zeroes only `.is-layout-flow`'s
   contribution, but `:root` AND `:first-child` are both plain pseudo-classes outside it, so the
   full rule's specificity is two class-level selectors (0,2,0), not one. A single extra class or
   type selector here isn't enough to beat that; it takes two (a class + a type selector, or more)
   to win. On this install core's stylesheet also loads after our enqueued theme.css, so any tie
   goes to core — the banner was rendering with zero top clearance instead of the intended ~156px
   (matching the hero/sub-hero convention elsewhere on the site) until this was scoped narrowly
   enough (body class + two ancestors) to out-specify it outright. */
body.single main .noble-single-banner { max-width: var(--maxw); margin: 156px auto 0; padding: 0 var(--gutter); }
.noble-single-banner__image { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); margin: 0; }
.noble-single-banner__image img { width: 100%; height: auto; display: block; }
.noble-single-banner__image.nf-image-slot { min-height: 480px; border-radius: var(--r-xl); }
.noble-single-header { max-width: var(--maxw); margin: 0 auto; padding: 56px var(--gutter) 0; }
.noble-single-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.noble-single-meta .wp-block-post-date { font-size: 14px; color: var(--ink-mute); }
/* .h-sec resets margin to 0 (shared component class, used all over the theme) — scope a
   bottom margin to the single-post title specifically, same pattern as
   .noble-donate-strip .h-sec below. Without this, a post whose weekly-activity meta fields
   are all empty (noble/weekly-activity-meta then renders nothing) or that has no byline
   spacing left the title sitting flush against whatever followed. */
.noble-single-header .h-sec { margin-bottom: 28px; }
.noble-single-byline { display: block; font-size: 14px; color: var(--ink-mute); margin: 18px 0 40px; }
.noble-single-byline::before { content: "By "; }
.noble-post-content { max-width: var(--maxw); margin: 0 auto; font-size: 18px; line-height: 1.75; color: var(--ink-soft); }
.noble-post-content p { margin: 0 0 24px; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
	.noble-hero-grid, .noble-story-grid, .noble-partners-spotlight, .noble-schedule-card { grid-template-columns: 1fr !important; }
	.noble-hero-art { height: 420px !important; margin-top: 12px; }
}
@media (max-width: 900px) {
	:root { --gutter: 24px; }
	.section { padding: 76px 0; }
	.noble-mission-grid, .noble-how-grid, .noble-blog-grid, .noble-related-posts__grid, .noble-weekly-activity-cards__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.noble-footer-grid { grid-template-columns: 1.4fr 1fr 1fr !important; row-gap: 36px; }
	.noble-sponsor-grid { grid-template-columns: repeat(3, 1fr) !important; }
	.noble-nav-cta { display: none; }
	body.single main .noble-single-banner { margin-top: 70px; }
}
@media (max-width: 640px) {
	body { font-size: 16px; }
	.section { padding: 58px 0; }
	.lead { font-size: 17px; }
	.noble-mission-grid, .noble-how-grid, .noble-blog-grid, .noble-related-posts__grid, .noble-weekly-activity-cards__grid { grid-template-columns: 1fr !important; }
	body.single main .noble-single-banner { margin-top: 50px; }
	.noble-footer-grid { grid-template-columns: 1fr 1fr !important; }
	.noble-hero-art { height: 380px !important; }
	.noble-sponsor-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 440px) {
	.noble-footer-grid { grid-template-columns: 1fr !important; }
}