/*
 * Sponsors logo cloud ([nhm_sponsors] and the NHM Sponsors widget) and the
 * wp-admin Sponsors screen. Loaded by includes/nhm-sponsors.php after the
 * redesign stylesheet, only where the sponsors show.
 *
 * Each tier sets a box (--nhm-sp-h tall, --nhm-sp-w wide); every logo in the
 * tier is scaled to fit inside it, so wide and square logos line up.
 * Colours fall back to literals so the cloud also works without the redesign.
 */

/* 1  Cloud
   -------------------------------------------------------------------------- */

.nhm-sponsors {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	margin: 0 auto;
	text-align: center;
}

.nhm-sponsors .nhm-sponsors__tier {
	width: 100%;
	--nhm-sp-h: 70px;
	--nhm-sp-w: 190px;
	--nhm-sp-gap: 24px 40px;
}

.nhm-sponsors .nhm-sponsors__tier--title {
	--nhm-sp-h: 160px;
	--nhm-sp-w: 480px;
}

.nhm-sponsors .nhm-sponsors__tier--platinum {
	--nhm-sp-h: 120px;
	--nhm-sp-w: 360px;
}

.nhm-sponsors .nhm-sponsors__tier--gold {
	--nhm-sp-h: 90px;
	--nhm-sp-w: 240px;
}

.nhm-sponsors .nhm-sponsors__tier--silver {
	--nhm-sp-h: 70px;
	--nhm-sp-w: 190px;
}

.nhm-sponsors .nhm-sponsors__tier--bronze {
	--nhm-sp-h: 56px;
	--nhm-sp-w: 150px;
	--nhm-sp-gap: 20px 32px;
}

/*
 * Specificity (0,4,1) on purpose: it ties the redesign's strongest heading rule,
 * `.nhm-redesign.nhm-has-page-hero .entry-content h2:not(.heading)` (size, border,
 * gold underline), and this file prints after the redesign, so the tie is ours.
 */
.nhm-sponsors .nhm-sponsors__tier :is(h2, h3, h4).nhm-sponsors__heading:not(.heading) {
	position: static;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	font-family: var(--nhm-display, inherit);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--nhm-steel-ink, #4b6a74);
}

.nhm-sponsors .nhm-sponsors__tier :is(h2, h3, h4).nhm-sponsors__heading:not(.heading)::after {
	content: none;
}

/*
 * List, item and link selectors are (0,3,1)/(0,3,2): they tie the redesign's
 * sidebar schedule rules (`.nhm-redesign .sidebar .widget ul|li|li a`: border,
 * padding, underline) and win because this file prints after the redesign.
 */
.nhm-sponsors .nhm-sponsors__tier ul.nhm-sponsors__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--nhm-sp-gap);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.nhm-sponsors .nhm-sponsors__list li.nhm-sponsors__item {
	display: flex;
	flex: 0 1 var(--nhm-sp-w);
	align-items: center;
	justify-content: center;
	max-width: var(--nhm-sp-w);
	height: var(--nhm-sp-h);
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.nhm-sponsors .nhm-sponsors__item::before,
.nhm-sponsors .nhm-sponsors__item::marker {
	content: none;
}

.nhm-sponsors .nhm-sponsors__list li a.nhm-sponsors__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	border-radius: var(--nhm-r, 4px);
}

.nhm-sponsors .nhm-sponsors__link:focus-visible {
	outline: 2px solid var(--nhm-navy, #384952);
	outline-offset: 4px;
}

.nhm-sponsors .nhm-sponsors__list img.nhm-sponsors__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	object-fit: contain;
	border-radius: 0;
	box-shadow: none;
}

/*
 * Shortcode pasted with code formatting (`<code>[nhm_sponsors]</code>`): the
 * browser re-opens that <code> inside every item, so each logo gets a grey,
 * padded inline box that breaks the fixed-size layout. Remove those boxes.
 */
.nhm-sponsors code {
	display: contents;
	font: inherit;
	color: inherit;
}

/* Sponsor saved without a logo yet: show the name instead of nothing. */
.nhm-sponsors .nhm-sponsors__name {
	font-family: var(--nhm-display, inherit);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--nhm-navy, #384952);
}

.nhm-sponsors .nhm-sponsors__tier--title .nhm-sponsors__name {
	font-size: 2rem;
}

/* 2  Grayscale (style="grayscale"; hover="color" brings the colour back)
   -------------------------------------------------------------------------- */

.nhm-sponsors--grayscale .nhm-sponsors__list img.nhm-sponsors__logo {
	filter: grayscale(1);
	opacity: .8;
	transition: filter .25s ease, opacity .25s ease;
}

.nhm-sponsors--hover-color .nhm-sponsors__list .nhm-sponsors__item:hover img.nhm-sponsors__logo,
.nhm-sponsors--hover-color .nhm-sponsors__list .nhm-sponsors__item:focus-within img.nhm-sponsors__logo {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.nhm-sponsors--grayscale .nhm-sponsors__list img.nhm-sponsors__logo {
		transition: none;
	}
}

/* 3  Narrow places: sidebars and phones
   -------------------------------------------------------------------------- */

.sidebar .nhm-sponsors {
	gap: 24px;
}

.sidebar .nhm-sponsors .nhm-sponsors__tier {
	--nhm-sp-gap: 16px 20px;
}

.sidebar .nhm-sponsors .nhm-sponsors__tier--title {
	--nhm-sp-h: 110px;
	--nhm-sp-w: 100%;
}

.sidebar .nhm-sponsors .nhm-sponsors__tier--platinum {
	--nhm-sp-h: 90px;
	--nhm-sp-w: 100%;
}

.sidebar .nhm-sponsors .nhm-sponsors__tier--gold {
	--nhm-sp-h: 64px;
	--nhm-sp-w: 46%;
}

.sidebar .nhm-sponsors .nhm-sponsors__tier--silver,
.sidebar .nhm-sponsors .nhm-sponsors__tier--bronze {
	--nhm-sp-h: 48px;
	--nhm-sp-w: 40%;
}

@media (max-width: 600px) {
	.nhm-sponsors {
		gap: 28px;
	}

	.nhm-sponsors .nhm-sponsors__tier {
		--nhm-sp-gap: 18px 24px;
	}

	.nhm-sponsors .nhm-sponsors__tier--title {
		--nhm-sp-h: 110px;
		--nhm-sp-w: 100%;
	}

	.nhm-sponsors .nhm-sponsors__tier--platinum {
		--nhm-sp-h: 88px;
		--nhm-sp-w: 80%;
	}

	.nhm-sponsors .nhm-sponsors__tier--gold {
		--nhm-sp-h: 68px;
		--nhm-sp-w: 42%;
	}

	.nhm-sponsors .nhm-sponsors__tier--silver {
		--nhm-sp-h: 54px;
		--nhm-sp-w: 38%;
	}

	.nhm-sponsors .nhm-sponsors__tier--bronze {
		--nhm-sp-h: 44px;
		--nhm-sp-w: 30%;
	}
}

/* 4  wp-admin → Sponsors
   -------------------------------------------------------------------------- */

.nhm-sp-admin .nhm-sp-help {
	max-width: 960px;
	margin: 16px 0 8px;
}

.nhm-sp-admin .nhm-sp-help summary {
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.nhm-sp-admin .nhm-sp-help td:first-child code {
	white-space: nowrap;
}

.nhm-sp-admin .nhm-sp-snippet {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	vertical-align: middle;
}

.nhm-sp-admin .nhm-sp-snippet input {
	max-width: 100%;
	min-width: 0;
	font-size: 12px;
	background: #f6f7f7;
}

.nhm-sp-admin .nhm-sp-tier {
	max-width: 960px;
	margin: 24px 0;
	padding: 4px 20px 12px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}

.nhm-sp-admin .nhm-sp-optin {
	padding: 8px 12px;
	background: #fcf9e8;
	border-left: 4px solid #dba617;
}

.nhm-sp-admin .nhm-sp-count {
	font-size: 13px;
	font-weight: 400;
	color: #646970;
}

.nhm-sp-admin .nhm-sp-heading label,
.nhm-sp-admin .nhm-sp-fields label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
}

.nhm-sp-admin .nhm-sp-heading .description {
	display: block;
	margin-top: 4px;
}

.nhm-sp-admin .nhm-sp-rows {
	margin: 0;
}

/* An empty tier stays a drop target for rows dragged from another tier. */
.nhm-sp-admin .nhm-sp-rows.is-sortable {
	min-height: 48px;
}

.nhm-sp-admin .nhm-sp-rows.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
	color: #646970;
}

.nhm-sp-admin .nhm-sp-rows.is-empty::before {
	content: attr(data-empty);
}

.nhm-sp-admin .nhm-sp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px 24px;
	margin: 0 0 12px;
	padding: 14px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.nhm-sp-admin .nhm-sp-handle {
	align-self: center;
	color: #8c8f94;
	cursor: move;
}

.nhm-sp-admin .nhm-sp-logo {
	width: 180px;
}

.nhm-sp-admin .nhm-sp-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px dashed #c3c4c7;
	border-radius: 4px;
}

.nhm-sp-admin .has-logo .nhm-sp-preview {
	border-style: solid;
}

.nhm-sp-admin .nhm-sp-preview img {
	max-width: 160px;
	max-height: 76px;
	width: auto;
	height: auto;
}

.nhm-sp-admin .nhm-sp-clear {
	display: none;
	margin-left: 8px;
}

.nhm-sp-admin .has-logo .nhm-sp-clear {
	display: inline;
}

.nhm-sp-admin .nhm-sp-fields {
	flex: 1 1 320px;
}

.nhm-sp-admin .nhm-sp-fields p {
	margin: 0 0 10px;
}

.nhm-sp-admin .nhm-sp-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.nhm-sp-admin .nhm-sp-show label {
	display: inline;
	margin: 0;
	font-weight: 600;
}

.nhm-sp-admin .nhm-sp-hidden-note {
	display: none;
	margin-left: 8px;
	color: #8a2424;
}

/* Hidden sponsor: still editable, visibly set aside. */
.nhm-sp-admin .nhm-sp-row.is-hidden {
	background: #fff;
	border-style: dashed;
}

.nhm-sp-admin .nhm-sp-row.is-hidden .nhm-sp-preview {
	opacity: .45;
	filter: grayscale(1);
}

.nhm-sp-admin .nhm-sp-row.is-hidden .nhm-sp-hidden-note {
	display: inline;
}

/* Brief highlight after a row is moved with its Tier menu. */
.nhm-sp-admin .nhm-sp-row.is-moved {
	box-shadow: 0 0 0 2px #2271b1;
}

.nhm-sp-admin .nhm-sp-placeholder {
	height: 120px;
	margin: 0 0 12px;
	border: 2px dashed #8c8f94;
	border-radius: 4px;
	visibility: visible !important;
}

.nhm-sp-admin .nhm-sp-preview-box {
	max-width: 960px;
	padding: 32px 20px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
}