/* =========================================================================
   SAFE Donate — design tokens
   Values map 1:1 to the variables published in the Safe-Foundation Figma file.
   ========================================================================= */

:root {
	/* Brand */
	--safe-green:        #14b8a6; /* Safe-green */
	--safe-green-dark:   #0d9488; /* hero inline link */
	--safe-pink:         #faa7a5; /* Safe-Pink */
	--safe-yellow:       #ffdc54; /* Safe- Accent Color1 */
	--safe-yellow-soft:  #ffeda9; /* Safe-Accent color 2 */

	/* Ink */
	--safe-ink:          #111827;
	--safe-body:         #374151;
	--safe-muted:        #4b5563;
	--safe-ink-soft:     #1f2937;
	--safe-placeholder:  #999999;

	/* Surface */
	--safe-surface:      #f9fafb;
	--safe-border:       #e5e7eb;
	--safe-white:        #ffffff;

	/* Type — Safe- H1 / H2 / H3 / Safe-text / Safe-Menu title */
	--safe-font:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--safe-h1-size:      48px;
	--safe-h1-lh:        48px;
	--safe-h2-size:      30px;
	--safe-h2-lh:        36px;
	--safe-h3-size:      24px;
	--safe-h3-lh:        32px;
	--safe-body-size:    16px;
	--safe-body-lh:      24px;
	--safe-menu-size:    14px;
	--safe-menu-lh:      20px;

	/* Geometry */
	--safe-radius:       8px;
	--safe-radius-pill:  9999px;
	--safe-container:    1136px; /* 1200 canvas − 32px gutters */
}

/* =========================================================================
   Base
   ========================================================================= */

/* The header CTA jumps to #donate, so ease the jump — but honour a reduced
   motion preference, which matters for an older audience. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Keep the section clear of the top edge when it is jumped to. */
#donate { scroll-margin-top: 24px; }

body {
	margin: 0;
	font-family: var(--safe-font);
	font-size: var(--safe-body-size);
	line-height: var(--safe-body-lh);
	color: var(--safe-ink);
	background: var(--safe-white);
	-webkit-font-smoothing: antialiased;

	/* The decorative wedges start left of the viewport. `clip` rather than
	   `hidden` so this never becomes a scroll container — hidden would break
	   position: sticky and the smooth scroll to #donate. */
	overflow-x: clip;
}

/* Bounds the wedges at the end of the page, the way the Figma frame does.
   `clip` again, so it never turns into a scroll container.

   Two selectors because Header Footer Elementor bypasses this theme's
   header.php and injects its own `#page` wrapper; `.safe-page` is the one
   header.php emits when HFE is inactive. */
#page.site,
.safe-page { overflow: clip; }

h1, h2, h3, h4 {
	margin: 0;
	color: var(--safe-ink);
}

img { max-width: 100%; height: auto; }

/* Visible to screen readers only. Used for the "opens in a new tab" note that
   theme.js appends to outbound links. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   Typography helpers

   Each selector is written twice: once for plain markup, once for the element
   Elementor actually renders inside the widget wrapper the class lands on.
   Elementor's own per-element CSS outranks both, so editors can still override
   any of this from the panel.
   ========================================================================= */

.safe-h1, .safe-h1 .elementor-heading-title {
	font-size: var(--safe-h1-size);
	line-height: var(--safe-h1-lh);
	font-weight: 500;
}

.safe-h2, .safe-h2 .elementor-heading-title {
	font-size: var(--safe-h2-size);
	line-height: var(--safe-h2-lh);
	font-weight: 700;
}

.safe-h3, .safe-h3 .elementor-heading-title {
	font-size: var(--safe-h3-size);
	line-height: var(--safe-h3-lh);
	font-weight: 700;
}

.safe-h1--green, .safe-h1--green .elementor-heading-title { color: var(--safe-green); }

.safe-body, .safe-body p {
	font-size: var(--safe-body-size);
	line-height: var(--safe-body-lh);
	font-weight: 400;
	color: var(--safe-ink);
}

.safe-body--muted, .safe-body--muted p { color: var(--safe-ink-soft); }

.safe-note, .safe-note p {
	font-size: var(--safe-menu-size);
	line-height: var(--safe-body-lh);
	font-weight: 700;
	color: var(--safe-ink);
}

.safe-underline .elementor-heading-title::after,
.safe-underline::after {
	content: '';
	display: block;
	width: 59px;
	height: 4px;
	margin: 14px auto 0;
	background: var(--safe-green);
}

.safe-underline::after { display: none; }

/* =========================================================================
   Buttons — .safe-cta-* wraps an Elementor button widget
   ========================================================================= */

.safe-btn,
.safe-cta .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--safe-radius-pill);
	font: 700 var(--safe-body-size)/var(--safe-body-lh) var(--safe-font);
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

.safe-btn:hover,
.safe-cta .elementor-button:hover { filter: brightness(.94); }

.safe-btn:active,
.safe-cta .elementor-button:active { transform: translateY(1px); }

.safe-btn--teal,
.safe-cta--teal .elementor-button {
	background: var(--safe-green);
	color: var(--safe-white);
}

.safe-btn--white,
.safe-cta--white .elementor-button {
	background: var(--safe-white);
	color: var(--safe-ink);
}

.safe-btn--link,
.safe-cta--link .elementor-button {
	background: none;
	color: var(--safe-green-dark);
	padding: 12px 0;
	min-height: 0;
}

.safe-cta .elementor-button-icon svg { width: 20px; height: 20px; }

.safe-btn__icon { width: 20px; height: 20px; flex: 0 0 20px; }

/* =========================================================================
   Colour bands + the angled accent from the Figma canvas
   ========================================================================= */

.safe-band { position: relative; }
.safe-band--yellow { background: var(--safe-yellow); }
.safe-band--pink   { background: var(--safe-pink); }
.safe-band--white  { background: var(--safe-white); }

/*
   Polygon 1 and Polygon 2: triangles pointing right, anchored off the left edge.

   In Figma these are page-level decorations, not children of their section, and
   both deliberately bleed past the band they sit on — Polygon 1 by 145px into
   the white section below, Polygon 2 further still. So the band must NOT clip,
   and it needs a stacking context so the spill paints over the following band's
   background while staying under this band's own content.

   Geometry below is the measured Figma bounding box of each triangle relative
   to its band, not the rotated wrapper Figma exports.
*/
.safe-band--wedge {
	z-index: 1; /* paint above later siblings, so the spill is visible */
}

.safe-band--wedge::before {
	content: '';
	position: absolute;
	z-index: 0;
	pointer-events: none;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.safe-band--wedge > * { position: relative; z-index: 1; }

/* Polygon 1 — 249x472, #FFEDA9 */
.safe-band--yellow.safe-band--wedge::before {
	width: 249px;
	height: 472px;
	left: -12px;
	top: 313px;
	background: var(--safe-yellow-soft);
}

/* Polygon 2 — 350x666, #FFDC54 (the bright accent, not the soft one) */
.safe-band--pink.safe-band--wedge::before {
	width: 350px;
	height: 666px;
	left: -74px;
	top: 58px;
	background: var(--safe-yellow);
}

/* =========================================================================
   Images

   Each rule pins the geometry the Figma frame gives the asset. The source
   files are larger than their frames and several are a different aspect ratio,
   so without this they render at their natural size instead of the design's.
   ========================================================================= */

.safe-rounded img { border-radius: var(--safe-radius); }

/* 01-Header photo — Figma 535x524 */
.safe-hero-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 535 / 524;
	object-fit: cover;
	border-radius: var(--safe-radius);
}

/* 03-Thank you photo — Figma 535x664 */
.safe-gift-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 535 / 664;
	object-fit: cover;
	border-radius: var(--safe-radius);
}

/* 04-Trusted by — one image widget per partner.

   Logos differ wildly in aspect ratio (8.9 for McGill down to 0.91 for Grace
   Dart), so they are bounded on BOTH axes: capping height alone would make the
   wide wordmarks enormous, capping width alone would make the square ones tiny.
   A logo dropped in later needs no configuration to sit correctly. */
.safe-partner img {
	display: block;
	width: auto;
	max-width: 200px;
	max-height: 44px;
	height: auto;
	object-fit: contain;
}

/* Kept for the old single-strip image, if it is ever put back. */
.safe-partners img {
	display: block;
	width: 100%;
	max-width: 881px;
	height: auto;
}

@media (max-width: 640px) {
	.safe-partner img { max-width: 140px; max-height: 34px; }
}

.safe-text-center,
.safe-text-center p { text-align: center; }

/* =========================================================================
   Legal pages (Privacy Policy and Disclaimer)

   Same tokens as the donation page, but a narrower measure and more air
   between sections — long prose needs both.
   ========================================================================= */

.safe-legal__meta,
.safe-legal__meta p { color: var(--safe-muted); font-weight: 400; }

.safe-legal .safe-legal__heading { margin-top: 20px; }

/* The whole document is one text widget, so the container's flex gap does not
   separate anything — the rhythm has to come from the elements themselves. */
.safe-legal .safe-body p { margin: 0 0 16px; }

.safe-legal .safe-body h2 {
	margin: 40px 0 8px;
	font-size: var(--safe-h2-size);
	line-height: var(--safe-h2-lh);
	font-weight: 700;
}

.safe-legal .safe-body h3 {
	margin: 28px 0 8px;
	font-size: 18px;
	line-height: 26px;
	font-weight: 700;
}

.safe-legal .safe-body > :first-child { margin-top: 0; }

.safe-legal .safe-body ul { margin: 0 0 16px; }

.safe-legal__meta,
.safe-legal .safe-body p.safe-legal__meta { margin-bottom: 2px; }

.safe-legal .safe-body p.safe-legal__meta + :not(.safe-legal__meta) { margin-top: 24px; }

.safe-legal .safe-body a {
	color: var(--safe-green-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.safe-legal .safe-body ul,
.safe-legal .safe-body ol { padding-left: 22px; }

.safe-legal .safe-body li { margin-bottom: 8px; }

/* =========================================================================
   Impact card (02-Your Donations)
   ========================================================================= */

.safe-impact-card {
	display: flex;
	flex-direction: column;
	min-height: 352px;
	padding: 22px 33px 24px;
	background: var(--safe-white);
	border-radius: var(--safe-radius);
	box-sizing: border-box;
}

.safe-impact-card__icon {
	display: block;
	width: auto;
	max-width: 100%;
	margin-bottom: 20px;
	object-fit: contain;
}

.safe-impact-card__title {
	margin: 0 0 12px;
	font-size: 26px;
	line-height: 27px;
	font-weight: 700;
	color: var(--safe-ink);
}

.safe-impact-card__text {
	margin: 0;
	font-size: var(--safe-body-size);
	line-height: var(--safe-body-lh);
	font-weight: 400;
	color: var(--safe-body);
}

/* =========================================================================
   Masthead + footer (00-MENU) — rendered by Header Footer Elementor
   ========================================================================= */

/* TranslatePress's switcher, sized to sit inline with the header buttons.

   Out of the box it renders two stacked 10px-padded wrappers and comes out
   62px tall — taller than the 36px pills beside it. These rules strip that
   padding back and let it size to its own text. */
.safe-langswitch,
.safe-langswitch .elementor-shortcode,
.safe-langswitch .trp-shortcode-switcher__wrapper {
	display: flex;
	align-items: center;
	line-height: 1;
}

.safe-langswitch .trp-language-switcher {
	padding-top: 0;
	padding-bottom: 0;
	font-family: var(--safe-font);
	font-size: 13px;
	font-weight: 600;
}

.safe-langswitch a,
.safe-langswitch .trp-ls-shortcode-current-language a {
	color: var(--safe-body);
	text-decoration: none;
}

.safe-langswitch a:hover { color: var(--safe-green); }

.safe-langswitch img.trp-flag-image { vertical-align: middle; }

.safe-masthead {
	background: var(--safe-white);
	border-bottom: 1px solid var(--safe-border);
}

/* Figma draws the lockup at 124x51, which reads as small once the nav beside
   it is gone. Scaled up on its own 2.41 ratio; height follows so the mark is
   never squashed. */
.safe-logo img {
	display: block;
	width: 168px;
	height: 70px;
	object-fit: contain;
}

@media (max-width: 640px) {
	.safe-logo img { width: 132px; height: 55px; }
}

/* The two pills sit at 36px in the bar rather than the 48px used in-page. */
.safe-cta--sm .elementor-button {
	min-height: 36px;
	padding: 8px 18px;
	font-size: var(--safe-menu-size);
	line-height: var(--safe-menu-lh);
}

.safe-cta--yellow .elementor-button {
	background: var(--safe-yellow);
	color: var(--safe-ink);
}

/* The bar is logo | actions, pushed apart. The .e-con qualifier is needed to
   outrank Elementor's own `.e-con { width: var(--width) }`, which defaults
   every container to 100% and would otherwise let the actions column swallow
   the whole row. */
.safe-masthead__actions.e-con {
	width: auto;
	flex: 0 0 auto;
}

.safe-masthead .safe-logo { flex: 0 0 auto; }

/* Below the desktop bar, `flex: 0 0 auto` above stops the actions shrinking, so
   the row keeps its full width and pushes the language switcher past the right
   edge of the screen. Let it take the full line and wrap instead. */
@media (max-width: 880px) {
	.safe-masthead__actions.e-con {
		width: 100%;
		flex: 1 1 100%;
		min-width: 0;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

/* Transparent, not white: in Figma the wedge spills behind the footer row and
   stays visible, with the links sitting on top of it. z-index keeps the text
   above the wedge rather than under it. */
.safe-footer {
	position: relative;
	z-index: 2;
	background: transparent;
}

.safe-footer__links p,
.safe-footer__legal p {
	margin: 0;
	font-size: var(--safe-menu-size);
	line-height: var(--safe-menu-lh);
}

.safe-footer__links a {
	color: var(--safe-ink);
	text-decoration: none;
	font-weight: 700;
}

.safe-footer__links a:hover { color: var(--safe-green); }

/* Outbound link: the arrow is part of the link text, so keep them together and
   nudge it on hover the way the in-page CTAs behave. */
.safe-external span {
	display: inline-block;
	transition: transform .15s ease;
}

.safe-external:hover span { transform: translateX(3px); }

.safe-footer__legal p { color: var(--safe-body); }

.safe-text-right,
.safe-text-right p { text-align: right; }

@media (max-width: 880px) {
	.safe-text-right,
	.safe-text-right p { text-align: left; }
}

/* =========================================================================
   Fallback header (only when no Elementor header template exists)
   ========================================================================= */

.safe-fallback-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 81px;
	padding: 0 33px;
	border-bottom: 1px solid var(--safe-border);
	background: var(--safe-white);
}

.safe-fallback-header__logo {
	font-weight: 700;
	color: var(--safe-ink);
	text-decoration: none;
}

.safe-fallback-header nav ul {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.safe-fallback-header nav a {
	font-size: var(--safe-menu-size);
	line-height: var(--safe-menu-lh);
	font-weight: 700;
	color: var(--safe-body);
	text-decoration: none;
}

.safe-fallback { max-width: var(--safe-container); margin: 0 auto; padding: 48px 32px; }

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

@media (max-width: 1024px) {
	:root {
		--safe-h1-size: 38px;
		--safe-h1-lh:   42px;
		--safe-h2-size: 26px;
		--safe-h2-lh:   32px;
	}

	.safe-band--wedge::before { display: none; }
}

@media (max-width: 640px) {
	:root {
		--safe-h1-size: 32px;
		--safe-h1-lh:   38px;
	}

	.safe-impact-card { min-height: 0; padding: 22px 24px 24px; }
	.safe-btn { width: 100%; }
}

/* The image widget adds a few pixels of line-box below the logo; the mark is
   display:block so that space is never wanted. */
.safe-logo .elementor-widget-container { line-height: 0; font-size: 0; }