/* Flight Deck — aircraftdonation.org
   Only what inline styles cannot express: resets, link and hover states,
   responsive corrections, print. Everything else is inline on the element. */

.fd-page {
	margin: 0;
	background: #ffffff;
	color: #243140;
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.fd-page h1,
.fd-page h2,
.fd-page h3,
.fd-page h4 {
	font-family: "IBM Plex Sans Condensed", sans-serif;
	font-weight: 700;
	margin: 0;
	text-wrap: pretty;
}

.fd-page p { margin: 0; text-wrap: pretty; }
.fd-page img { max-width: 100%; height: auto; }

.fd-page a { color: #166b6e; text-decoration: underline; text-underline-offset: 2px; }
.fd-page a:hover { color: #0f4e50; }

/* Header, nav, phone CTA */
.fd-nav a { text-decoration: none; }
.fd-nav a:hover { background: #f2f5f8; color: #243140; text-decoration: none; }
.fd-phone { text-decoration: none; }
.fd-phone:hover { border-color: #1f8f92; color: #1f8f92; text-decoration: none; }
.fd-logo,
.fd-logo:hover { text-decoration: none; }

/* Footer links sit on the tinted panel */
.fd-page footer a { text-decoration: none; color: #243140; }
.fd-page footer a:hover { color: #166b6e; text-decoration: underline; }

/* Cards and tiles.
   The designs carried per-element hover styles; these are re-expressed as
   rules that match on the inline border the cards already declare, so no
   markup change is needed and nothing depends on a hand-added class. */
.fd-page main a[style*="border:1px solid #d3dae2"],
.fd-page main a[style*="border: 1px solid #d3dae2"],
.fd-card {
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.fd-page main a[style*="border:1px solid #d3dae2"]:hover,
.fd-page main a[style*="border: 1px solid #d3dae2"]:hover,
.fd-card:hover {
	border-color: #1f8f92 !important;
	box-shadow: 0 2px 12px rgba(36, 49, 64, 0.10);
	text-decoration: none;
}

/* Tiles whose heading should pick up the accent on hover */
.fd-page main a[style*="border:1px solid #d3dae2"]:hover h3,
.fd-page main a[style*="border:1px solid #d3dae2"]:hover h4 {
	color: #166b6e;
}

/* Text links inside tiles must not gain an underline on the whole card */
.fd-page main a[style*="border:1px solid #d3dae2"] { text-decoration: none; }

/* Buttons */
.fd-btn { text-decoration: none; cursor: pointer; }
.fd-btn-primary:hover { background: #0f4e50; text-decoration: none; }
.fd-btn-secondary:hover { border-color: #1f8f92; color: #1f8f92; text-decoration: none; }

/* The trust bar has to survive narrow screens */
@media (max-width: 900px) {
	.fd-trust { flex-wrap: wrap !important; white-space: normal !important; justify-content: flex-start !important; }
	.fd-trust span[style*="d3dae2"] { display: none; }
}

@media (max-width: 720px) {
	.fd-page { font-size: 16px; }
	.fd-nav { font-size: 15px; }
}

/* Mobile header: logo + phone on one row, nav as a wrapping row beneath */
@media (max-width: 860px) {
	.fd-page header > div {
		flex-wrap: wrap !important;
		gap: 12px 14px !important;
		padding: 12px 16px !important;
	}
	.fd-logo { order: 1; }
	.fd-logo img { height: 40px !important; }
	.fd-phone {
		order: 2;
		margin-left: auto;
		padding: 8px 13px !important;
		font-size: 15px !important;
	}
	.fd-nav {
		order: 3;
		width: 100%;
		margin-left: 0 !important;
		justify-content: flex-start !important;
		gap: 2px 4px !important;
		font-size: 15px !important;
	}
	.fd-nav a { padding: 6px 8px !important; }
	.fd-trust { padding: 10px 16px !important; }
}

@media (max-width: 380px) {
	.fd-logo img { height: 34px !important; }
	.fd-phone { font-size: 14px !important; padding: 7px 10px !important; }
}

/**
 * Mobile gutters. Desktop stacks a 32px page gutter, a 44px panel inset and a
 * 30px form inset, which on a phone leaves the form about 180px wide. Pull all
 * three in so the fields get the screen.
 */
@media (max-width: 720px) {
	.fd-page [style*="max-width:1200px"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
	.fd-page [style$="padding:44px"],
	.fd-page [style$="padding:32px"] { padding: 22px 16px !important; }
	.fd-form { padding: 16px 12px !important; }
}

/* Mobile type scale. Desktop heading sizes wrap two and three lines on a
   phone; these are set by the inline size each heading carries. */
@media (max-width: 720px) {
	.fd-page [style*="font-size:52px"] { font-size: 30px !important; }
	.fd-page [style*="font-size:46px"],
	.fd-page [style*="font-size:44px"] { font-size: 28px !important; }
	.fd-page [style*="font-size:40px"] { font-size: 27px !important; }
	.fd-page [style*="font-size:34px"] { font-size: 24px !important; }
	.fd-page [style*="font-size:28px"] { font-size: 22px !important; }
	.fd-page h1, .fd-page h2, .fd-page h3 { line-height: 1.18 !important; }
	.fd-page [style*="font-size:19px"] { font-size: 17px !important; }
}

/**
 * Turnstile renders a fixed 300px widget. Inside the form card on a narrow
 * phone that is wider than the column, so it hangs off the right edge.
 * Clamp the wrapper and scale the widget down where the column is tighter.
 */
.fd-form .cf-turnstile,
.fd-form .ff-el-group:has(iframe[src*="challenges.cloudflare.com"]) {
	max-width: 100%;
	overflow-x: hidden;
}
.fd-form iframe[src*="challenges.cloudflare.com"] { max-width: 100%; }

@media (max-width: 420px) {
	.fd-form iframe[src*="challenges.cloudflare.com"] {
		transform: scale(.86);
		transform-origin: left center;
	}
}

/**
 * Cause cards on /charity/. The flip was authored as a design-component
 * pseudo-state attribute, which the browser ignores — hence nothing happening
 * on hover, tap or tab. This is the real rule.
 */
.fd-flip:hover,
.fd-flip:focus,
.fd-flip:focus-within { transform: rotateY(180deg); }
.fd-flip:focus,
.fd-flip:focus-visible { box-shadow: 0 0 0 3px rgba(31, 143, 146, .5); }

@media (prefers-reduced-motion: reduce) {
	.fd-flip { transition: none !important; }
}

/* No page should scroll sideways on a phone */
.fd-page { overflow-x: hidden; }
.fd-page img { max-width: 100%; }

/* Nothing in the chrome needs printing */
@media print {
	.fd-page header,
	.fd-page footer,
	.fd-trust { display: none; }
}