/**
 * His Feet Fundraisers — the site-wide urgent-need ribbon.
 *
 * Deliberately self-contained and low-specificity-but-defended. This markup
 * lands inside a Thrive Leads form, which means it renders inside Thrive's own
 * wrappers and inherits whatever they set — link colours, underlines, line
 * heights, and on landing pages a stylesheet that has opinions about every `a`
 * on the page. The few !important declarations below are there because of that
 * neighbourhood, not out of habit; each one is defending a property Thrive sets
 * globally on links.
 *
 * The band never sets its own position. Thrive Leads owns placement — sticky,
 * top, bottom, dismissible — and a position here would fight it.
 */

.hff-ribbon {
	--hff-ribbon-bg: #07305a;
	--hff-ribbon-fg: #fff;
	--hff-ribbon-dim: rgba(255, 255, 255, .72);
	--hff-ribbon-track: rgba(255, 255, 255, .28);
	--hff-ribbon-fill: #f5a623;

	box-sizing: border-box;
	width: 100%;
	background: var(--hff-ribbon-bg);
	color: var(--hff-ribbon-fg);
	font-size: 15px;
	line-height: 1.3;
}

.hff-ribbon *,
.hff-ribbon *::before,
.hff-ribbon *::after {
	box-sizing: inherit;
}

/* Dark text, for a pale band. Mirrors the hero's light/dark switch so a need
   configured once looks right in both places. */
.hff-ribbon--text-dark {
	--hff-ribbon-fg: #10233a;
	--hff-ribbon-dim: rgba(16, 35, 58, .7);
	--hff-ribbon-track: rgba(16, 35, 58, .18);
	--hff-ribbon-fill: #c0392b;
}

.hff-ribbon__link,
.hff-ribbon__link:link,
.hff-ribbon__link:visited,
.hff-ribbon__link:hover,
.hff-ribbon__link:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 18px;
	color: var(--hff-ribbon-fg) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.hff-ribbon__link:focus-visible {
	outline: 2px solid var(--hff-ribbon-fg);
	outline-offset: -3px;
}

.hff-ribbon__eyebrow {
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 3px 8px;
	border-radius: 3px;
	background: var(--hff-ribbon-fill);
	/* The pill carries the accent colour, so its text has to be legible against
	   that rather than against the band. */
	color: #fff;
}

.hff-ribbon--text-dark .hff-ribbon__eyebrow {
	color: #fff;
}

.hff-ribbon__title {
	font-weight: 700;
	/* One line on a narrow band. The full title is a click away and repeating
	   it in three wrapped lines turns a ribbon into a paragraph. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: min(46ch, 100%);
}

.hff-ribbon__progress {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: none;
}

.hff-ribbon__bar {
	display: block;
	width: 110px;
	height: 6px;
	border-radius: 999px;
	background: var(--hff-ribbon-track);
	overflow: hidden;
}

.hff-ribbon__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--hff-ribbon-fill);
	transition: width .5s ease;
}

.hff-ribbon__amounts {
	font-size: 13px;
	color: var(--hff-ribbon-dim);
	white-space: nowrap;
}

.hff-ribbon__amounts .hff-card__raised {
	color: var(--hff-ribbon-fg);
	font-weight: 700;
}

.hff-ribbon__cta {
	flex: none;
	font-size: 13px;
	font-weight: 700;
	padding: 7px 16px;
	border-radius: 999px;
	border: 2px solid currentColor;
	white-space: nowrap;
}

.hff-ribbon__link:hover .hff-ribbon__cta,
.hff-ribbon__link:focus .hff-ribbon__cta {
	background: var(--hff-ribbon-fg);
	color: var(--hff-ribbon-bg);
}

/* Funded while the page sat in the host's cache. fundraiser.js sets this rather
   than removing the node, so Thrive Leads' own wrapper collapses with it
   instead of being left as an empty coloured band. */
.hff-ribbon[hidden],
.hff-ribbon--done {
	display: none !important;
}

@media (max-width: 780px) {
	.hff-ribbon__link {
		gap: 5px 10px;
		padding: 9px 14px;
		font-size: 14px;
	}

	/* The bar is the first thing to go: at this width it is a decoration, and
	   the figure beside it says the same thing in less room. */
	.hff-ribbon__bar {
		display: none;
	}

	.hff-ribbon__title {
		max-width: 100%;
	}
}

@media (max-width: 480px) {
	.hff-ribbon__amounts {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hff-ribbon__fill {
		transition: none;
	}
}