/**
 * Bola Awards - front-end styles.
 *
 * Everything is namespaced under .ba-widget and driven by custom properties so
 * the upcoming theme redesign can restyle the portal by overriding the tokens
 * rather than fighting these rules.
 */

.ba-widget,
.ba-dialog {
	--ba-bg: #231f20;
	--ba-card: #2c2828;
	--ba-card-alt: #332f2f;
	--ba-accent: #f2e63c;
	--ba-accent-ink: #1b1919;
	--ba-ink: #ffffff;
	--ba-ink-muted: #a8a2a2;
	--ba-track: #8d8a8a;
	--ba-button: #6f6c6c;
	--ba-button-ink: #efeaea;
	--ba-input-bg: #262323;
	--ba-head-bg: #ffffff;
	--ba-head-ink: #1b1919;
	--ba-head-muted: #6b6767;
	--ba-avatar: 38px;
	--ba-radius: 6px;
	--ba-gap: clamp(14px, 1.8vw, 22px);
	--ba-pad: clamp(14px, 1.6vw, 20px);
}

.ba-widget {
	box-sizing: border-box;
	background: var(--ba-bg);
	color: var(--ba-ink);
	padding: clamp(22px, 3.5vw, 44px) clamp(16px, 3.5vw, 48px);
	font-family: inherit;
}

.ba-dialog {
	font-family: inherit;
	color: var(--ba-ink);
}

.ba-dialog *,
.ba-dialog *::before,
.ba-dialog *::after {
	box-sizing: border-box;
}

.ba-widget *,
.ba-widget *::before,
.ba-widget *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */

.ba-widget__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 20px;
	margin-bottom: clamp(16px, 2.2vw, 26px);
}

.ba-widget__title {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: clamp(21px, 2.7vw, 36px);
	font-style: italic;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--ba-ink);
}

.ba-widget__title em {
	font-style: italic;
	color: var(--ba-accent);
}

.ba-widget__rule {
	display: inline-block;
	width: 6px;
	height: 1em;
	background: var(--ba-accent);
	transform: skewX(-12deg);
	flex: none;
}

.ba-widget__meta {
	margin: 0;
	font-size: clamp(12px, 0.95vw, 15px);
	color: var(--ba-ink-muted);
}

.ba-widget__meta strong {
	color: var(--ba-ink);
	font-weight: 700;
}

/* ---------- Card grid ---------- */

.ba-widget__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: var(--ba-gap);
}

.ba-card {
	background: var(--ba-card);
	border-radius: var(--ba-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	container-type: inline-size;
	container-name: bacard;
}

.ba-card__head {
	background: var(--ba-head-bg);
	color: var(--ba-head-ink);
	padding: 13px var(--ba-pad) 15px;
}

.ba-card--primary .ba-card__head {
	background: var(--ba-accent);
}

.ba-card__month {
	margin: 0 0 4px;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ba-head-muted);
}

.ba-card__title {
	margin: 0;
	font-size: clamp(15px, 3.6cqi, 21px);
	font-style: italic;
	font-weight: 800;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ba-head-ink);
}

/*
 * Explicit, high-specificity colours for the card header. These are headings,
 * so the theme's dark mode restyles them and inherited colour loses. The widget
 * is a dark component by design and must render identically in either mode.
 */
.ba-widget .ba-card__head,
.ba-widget .ba-card__head .ba-card__title,
.ba-widget .ba-card--primary .ba-card__head .ba-card__title {
	color: var(--ba-head-ink);
}

.ba-widget .ba-card__head .ba-card__month {
	color: var(--ba-head-muted);
}

.ba-widget .ba-card__head {
	background: var(--ba-head-bg);
}

.ba-widget .ba-card--primary .ba-card__head {
	background: var(--ba-accent);
}

.ba-card__empty {
	margin: 0;
	padding: 22px var(--ba-pad);
	color: var(--ba-ink-muted);
}

.ba-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
}

.ba-card__foot {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	padding: 13px var(--ba-pad);
	font-size: 14px;
	color: var(--ba-ink);
}

.ba-card__foot [data-ba-total] {
	font-weight: 700;
}

/* ---------- Nominee rows ---------- */

.ba-nominee {
	display: grid;
	grid-template-columns: 20px var(--ba-avatar) minmax(0, 1fr) minmax(64px, 150px) 74px;
	align-items: center;
	gap: clamp(8px, 1vw, 14px);
	padding: 11px var(--ba-pad);
}

.ba-nominee + .ba-nominee {
	border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.ba-nominee__rank {
	font-size: 15px;
	font-style: italic;
	font-weight: 700;
	color: var(--ba-accent);
}

.ba-nominee__identity {
	min-width: 0;
}

.ba-nominee__name {
	display: block;
	font-size: clamp(13px, 3.1cqi, 17px);
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: var(--ba-ink);
	hyphens: auto;
	overflow-wrap: break-word;
}

.ba-nominee__detail {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.25;
	color: var(--ba-ink-muted);
	overflow-wrap: break-word;
}

.ba-nominee__avatar {
	width: var(--ba-avatar);
	height: var(--ba-avatar);
	flex: none;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Hue is set per nominee inline and stays stable across renders. */
	background: hsl(var(--ba-hue, 45) 38% 30%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ba-nominee__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top; /* Favour the face when a photo is cropped. */
	display: block;
	border-radius: 50%;
}

.ba-nominee__initials {
	font-size: calc(var(--ba-avatar) * 0.36);
	font-weight: 800;
	font-style: italic;
	letter-spacing: 0.02em;
	line-height: 1;
	color: hsl(var(--ba-hue, 45) 70% 88%);
	user-select: none;
}

.ba-nominee__bar {
	position: relative;
	height: 7px;
	border-radius: 2px;
	background: var(--ba-track);
	overflow: hidden;
}

.ba-nominee__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--ba-accent);
	transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Vote button ---------- */

.ba-nominee__vote {
	appearance: none;
	border: 0;
	border-radius: 3px;
	background: var(--ba-button);
	color: var(--ba-button-ink);
	font: inherit;
	font-size: 12px;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 7px 5px;
	cursor: pointer;
	box-shadow: none;
	transition: background 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.ba-nominee__vote:hover:not(:disabled) {
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
}

.ba-nominee__vote:active:not(:disabled) {
	transform: translateY(1px);
}

.ba-nominee__vote:focus-visible {
	outline: 2px solid var(--ba-accent);
	outline-offset: 2px;
}

/*
 * The theme (Elementor) paints its own pink glow on button hover and focus.
 * These rules are scoped under .ba-widget so they outrank it on specificity
 * without needing !important, and they cover every interactive state so no
 * gap is left for the inherited style to show through.
 */
.ba-widget .ba-nominee__vote,
.ba-dialog .ba-dialog__submit,
.ba-dialog .ba-dialog__close {
	box-shadow: none !important;
}

.ba-widget .ba-nominee__vote:hover,
.ba-widget .ba-nominee__vote:focus,
.ba-widget .ba-nominee__vote:focus-visible,
.ba-widget .ba-nominee__vote:active,
.ba-dialog .ba-dialog__submit:hover,
.ba-dialog .ba-dialog__submit:focus,
.ba-dialog .ba-dialog__submit:focus-visible,
.ba-dialog .ba-dialog__submit:active {
	box-shadow: 0 0 0 2px rgba(242, 230, 60, 0.4) !important;
}

.ba-widget .ba-nominee__vote:disabled:hover,
.ba-widget .ba-nominee__vote:disabled:focus {
	box-shadow: none !important;
}

.ba-dialog .ba-dialog__close:hover,
.ba-dialog .ba-dialog__close:focus {
	box-shadow: none !important;
	outline: none;
}

.ba-nominee__vote:disabled {
	cursor: default;
	opacity: 0.65;
}

.ba-nominee__vote.is-voted {
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	opacity: 1;
}

.ba-nominee__vote.is-busy {
	opacity: 0.7;
	cursor: wait;
}

/* ---------- Footer link ---------- */

.ba-widget__more {
	margin: clamp(18px, 2.4vw, 28px) 0 0;
}

.ba-widget__more a {
	color: var(--ba-accent);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.ba-widget__more a:hover {
	border-bottom-color: var(--ba-accent);
}

/* ---------- Full layout ---------- */

.ba-widget--full .ba-nominee {
	padding-top: 18px;
	padding-bottom: 18px;
}

.ba-widget--full .ba-card__list {
	max-height: none;
}

/* ---------- Dialog ---------- */

.ba-dialog {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ba-dialog[hidden] {
	display: none;
}

.ba-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 13, 13, 0.78);
}

.ba-dialog__panel {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--ba-card-alt);
	color: var(--ba-ink);
	border-radius: var(--ba-radius);
	padding: clamp(22px, 3vw, 32px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.ba-dialog__close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: 0;
	color: var(--ba-ink-muted);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

.ba-dialog__close:hover {
	color: var(--ba-ink);
}

.ba-dialog__title {
	margin: 0 0 6px;
	font-size: clamp(19px, 2vw, 24px);
	font-style: italic;
	font-weight: 800;
	text-transform: uppercase;
}

.ba-dialog__subtitle {
	margin: 0 0 20px;
	color: var(--ba-ink-muted);
	font-size: 14px;
}

.ba-dialog__subtitle strong {
	color: var(--ba-accent);
}

.ba-dialog .ba-field {
	display: block;
	margin-bottom: 16px;
}

.ba-dialog .ba-field__label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ba-ink-muted);
}

.ba-dialog .ba-field input[type="text"],
.ba-dialog .ba-field input[type="email"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 4px;
	background: var(--ba-input-bg);
	color: var(--ba-ink);
	font: inherit;
	font-size: 15px;
}

.ba-dialog .ba-field input:focus,
.ba-dialog .ba-field input:focus-visible {
	outline: none;
	border-color: var(--ba-accent);
	box-shadow: 0 0 0 2px rgba(242, 230, 60, 0.3);
}

/*
 * Chrome paints autofilled fields with its own background and near-black text
 * through a UA style that `color` cannot override. The oversized inset shadow
 * repaints the background and -webkit-text-fill-color wins back the text.
 */
.ba-dialog .ba-field input:-webkit-autofill,
.ba-dialog .ba-field input:-webkit-autofill:hover,
.ba-dialog .ba-field input:-webkit-autofill:active {
	-webkit-text-fill-color: var(--ba-ink);
	caret-color: var(--ba-ink);
	box-shadow: 0 0 0 1000px var(--ba-input-bg) inset !important;
	/* Outlast Chrome's own background transition rather than fight it. */
	transition: background-color 100000s ease-in-out 0s;
}

.ba-dialog .ba-field input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ba-ink);
	box-shadow: 0 0 0 1000px var(--ba-input-bg) inset, 0 0 0 2px rgba(242, 230, 60, 0.3) !important;
}

.ba-dialog .ba-field input::placeholder {
	color: var(--ba-ink-muted);
	opacity: 1;
}

/* Honeypot - kept out of view without display:none so bots still fill it. */
.ba-dialog .ba-field--hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ba-dialog__error {
	margin: 0 0 14px;
	padding: 10px 12px;
	border-radius: 4px;
	background: rgba(214, 54, 56, 0.14);
	border: 1px solid rgba(214, 54, 56, 0.5);
	color: #ff9d9e;
	font-size: 14px;
}

.ba-dialog__error[hidden] {
	display: none;
}

.ba-dialog__submit {
	width: 100%;
	appearance: none;
	border: 0;
	border-radius: 4px;
	background: var(--ba-accent);
	color: var(--ba-accent-ink);
	font: inherit;
	font-size: 15px;
	font-style: italic;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 12px 18px;
	cursor: pointer;
	box-shadow: none;
	transition: box-shadow 160ms ease, opacity 160ms ease;
}

.ba-dialog__submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.ba-dialog__note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--ba-ink-muted);
}

.ba-dialog__note a {
	color: var(--ba-ink-muted);
	text-decoration: underline;
}

/* ---------- Small screens ---------- */

/*
 * Narrow-container layout: the bar drops to its own row so the name keeps the
 * full width. Driven by the widget's own width, so it fires correctly inside a
 * two-column row where the viewport is still wide.
 */
@container bacard (max-width: 400px) {
	.ba-nominee {
		--ba-avatar: 32px;
		grid-template-columns: 18px var(--ba-avatar) minmax(0, 1fr) 72px;
		grid-template-areas:
			"rank avatar identity vote"
			". . bar bar";
		row-gap: 8px;
	}

	.ba-nominee__rank { grid-area: rank; }
	.ba-nominee__avatar { grid-area: avatar; }
	.ba-nominee__identity { grid-area: identity; }
	.ba-nominee__bar { grid-area: bar; }
	.ba-nominee__vote { grid-area: vote; }
}

@container bacard (max-width: 250px) {
	.ba-nominee {
		--ba-avatar: 28px;
		grid-template-columns: 16px var(--ba-avatar) minmax(0, 1fr);
		grid-template-areas:
			"rank avatar identity"
			". . bar"
			". . vote";
		row-gap: 8px;
	}

	.ba-nominee__vote {
		justify-self: start;
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Fallback for browsers without container query support. */
@supports not (container-type: inline-size) {
	@media (max-width: 640px) {
		.ba-nominee {
			--ba-avatar: 32px;
			grid-template-columns: 18px var(--ba-avatar) minmax(0, 1fr) 72px;
			grid-template-areas:
				"rank avatar identity vote"
				". . bar bar";
			row-gap: 8px;
		}

		.ba-nominee__rank { grid-area: rank; }
		.ba-nominee__avatar { grid-area: avatar; }
		.ba-nominee__identity { grid-area: identity; }
		.ba-nominee__bar { grid-area: bar; }
		.ba-nominee__vote { grid-area: vote; }
	}
}

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