/* Voting feature -- colors from the Hitlist house style (petrol/marigold,
   same palette as muziektop10.nl/filmfun.nl), independent of whatever
   theme is otherwise active. */

.t10hq-explainer {
	font-family: "Public Sans", system-ui, sans-serif;
	font-size: 14px;
	color: #A9C4C0;
	margin: 24px 0 16px;
}

.t10hq-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 16px 0 32px;
}

.t10hq-item {
	display: grid;
	grid-template-columns: 48px 1fr 140px;
	gap: 16px;
	align-items: start;
	padding: 16px;
	background: #16393B;
	border: 1px solid #2D5053;
}

.t10hq-item-rank {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: #E8A33B;
	line-height: 1.2;
}

.t10hq-item-title {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	color: #F3EFE2 !important;
	margin: 0 0 8px;
}

/* Image, text and comments are separate grid children of .t10hq-item
 * (not nested inside .t10hq-item-content) so they use the full card
 * width. */
.t10hq-item-image,
.t10hq-item-video,
.t10hq-item-instagram,
.t10hq-item-x,
.t10hq-item-text,
.t10hq-comments {
	grid-column: 1 / -1;
}

/* Custom photo per item (instead of filmfun.nl's YouTube trailer) --
 * full-width treatment, breaks out of the card's own padding (16px) for
 * a borderless, well-aligned image. */
.t10hq-item-image {
	position: relative;
	margin: 8px -16px 0;
}

.t10hq-item-image img {
	width: 100%;
	height: auto;
	display: block;
	max-height: 500px;
	object-fit: cover;
}

/* Placeholder display when an item doesn't yet have its own image --
 * never a broken/empty <img>, just a calm block in the house style. */
.t10hq-item-image-placeholder {
	height: 220px;
	background: #122F30;
	border-top: 1px solid #2D5053;
	border-bottom: 1px solid #2D5053;
}

/* Optional YouTube video per item (instead of the image, if youtube_url
 * is filled in) -- same full-width treatment as .t10hq-item-image,
 * responsive 16:9 via aspect-ratio instead of a fixed height. */
.t10hq-item-video {
	/* Also breaks out of the card's own padding (16px) for a borderless,
	 * well-aligned video -- same treatment as .t10hq-item-image. */
	margin: 8px -16px 0;
}

.t10hq-item-video {
	/* Force a fixed 16:9 ratio, same as muziektop10.nl. */
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #122F30;
}

.t10hq-item-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

/* Instagram embed per item -- fixed public embed URL, same approach as
 * the video but without a forced 16:9 (Instagram posts are often square
 * or portrait). Instagram's own embed document handles its internal
 * layout; here just center it and give it a reasonable min-height so it
 * doesn't collapse before the iframe has loaded. */
.t10hq-item-instagram {
	margin: 8px -16px 0;
	display: flex;
	justify-content: center;
	background: #122F30;
}

.t10hq-item-instagram iframe {
	width: 100%;
	max-width: 540px;
	min-height: 580px;
	border: 0;
	display: block;
}

/* X/Twitter embed per item -- the twitter-tweet blockquote is replaced
 * client-side by widgets.js (see t10hq_enqueue_assets()) with its own
 * iframe at its own width (max ~550px); here just center it. */
.t10hq-item-x {
	margin: 8px -16px 0;
	padding: 0 16px;
	display: flex;
	justify-content: center;
}
.t10hq-item-text {
	font-family: "Public Sans", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #A9C4C0 !important;
	margin-top: 8px;
}

.t10hq-comments {
	margin-top: 8px;
}

.t10hq-item-vote {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 6px;
}

/* ▲/▼ side by side, each with its own count directly underneath. */
.t10hq-vote-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

/* Total all the way to the right, in its own yellow-bordered square --
 * same style as the vote buttons, separate from the up/down group. */
.t10hq-vote-total-box {
	margin-left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 32px;
	padding: 0 6px;
	border: 1px solid #E8A33B;
	flex-shrink: 0;
}

/* Short tooltip: "you already voted here" -- without this, voting on an
 * item you'd already voted on before (from the same device/network)
 * looked like it just did nothing, since the count correctly didn't go up. */
.t10hq-vote-already {
	position: absolute;
	top: -6px;
	right: 100%;
	margin-right: 8px;
	white-space: nowrap;
	background: #16393B;
	border: 1px solid #2D5053;
	color: #A9C4C0;
	font-family: "Public Sans", sans-serif;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	z-index: 2;
	animation: t10hq-nudge-in 200ms ease-out;
}

@media (max-width: 480px) {
	.t10hq-vote-already {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
		top: -28px;
		margin-right: 0;
	}
}

.t10hq-vote-btn {
	width: 34px;
	height: 32px;
	border: 1px solid #E8A33B;
	background: transparent;
	color: #E8A33B;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.t10hq-vote-btn:hover:not(:disabled) {
	background: #E8A33B;
	color: #24150A;
}

/* Downvote button gets its own color (same rust-red as the comment
 * downvote, .t10hq-comment-down.active) so up/down are also visually
 * distinct, not both marigold. */
.t10hq-vote-down:hover:not(:disabled) {
	background: #D6634C;
	border-color: #D6634C;
	color: #24150A;
}

.t10hq-vote-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.t10hq-vote-up.active {
	background: #E8A33B;
	color: #24150A;
}

.t10hq-vote-down.active {
	background: #D6634C;
	border-color: #D6634C;
	color: #24150A;
}

.t10hq-vote-count {
	font-family: "Public Sans", system-ui, sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #F3EFE2 !important;
}

/* Under each button: that one count (separate from the clamped total on
 * the right). */
.t10hq-vote-detail-up,
.t10hq-vote-detail-down {
	font-family: "Public Sans", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.t10hq-vote-detail-up {
	color: #E8A33B;
}

.t10hq-vote-detail-down {
	color: #D6634C;
}

@media (max-width: 480px) {
	.t10hq-item {
		grid-template-columns: 36px 1fr 112px;
		gap: 10px;
	}
	.t10hq-item-title {
		font-size: 17px;
	}
	.t10hq-item-image {
		margin: 8px -10px 0;
	}
	.t10hq-item-vote {
		gap: 4px;
	}
	.t10hq-vote-btn {
		width: 30px;
	}
	.t10hq-vote-total-box {
		min-width: 28px;
		padding: 0 4px;
	}
}

/* Comment form under an item: the theme applies a generic form style
 * (display:flex, align-items:stretch), which stretched the text field to
 * the same height as the column -- way too tall. Set to a normal, compact
 * height here. */
.t10hq-comment-form {
	align-items: flex-end;
}

.t10hq-comment-form textarea {
	height: 85px;
	resize: vertical;
}

/* ==========================================================================
   "Missing an item?" -- suggesting an item to add to an existing list.
   Anyone (not just the creator) may suggest one; goes live immediately.
   ========================================================================== */

.t10hq-item-suggestions {
	margin-top: 32px;
	padding: 20px;
	background: #16393B;
	border: 1px solid #2D5053;
	font-family: "Public Sans", sans-serif;
}

.t10hq-item-suggestions-title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 800;
	color: #F3EFE2;
}

.t10hq-item-suggestions-explainer {
	margin: 0 0 14px;
	font-size: 14px;
	color: #A9C4C0;
}

.t10hq-item-suggestions-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 480px;
}

.t10hq-item-suggestions-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #F3EFE2;
}

.t10hq-item-suggestions-form input,
.t10hq-item-suggestions-form textarea {
	background: #122F30;
	border: 1px solid #2D5053;
	color: #F3EFE2;
	padding: 10px 12px;
	font-family: "Public Sans", sans-serif;
	font-size: 15px;
	font-weight: 400;
}

.t10hq-item-suggestions-btn {
	background: #E8A33B;
	color: #24150A;
	border: none;
	border-radius: 0 !important;
	padding: 12px 24px !important;
	font-family: "Public Sans", sans-serif;
	font-weight: 700;
	text-transform: uppercase !important;
	font-size: 14px !important;
	cursor: pointer;
	align-self: flex-start;
	text-decoration: none;
	display: inline-block;
}

.t10hq-item-suggestions-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.t10hq-item-suggestions-message {
	margin: 0;
	font-size: 14px;
	color: #A9C4C0;
}

.t10hq-item-suggestions-message-ok {
	color: #E8A33B;
	font-weight: 700;
}

/* If you click the direct link from the "item added" email (#item-X), the
   browser jumps straight there -- this also gives it a brief highlight
   among the rest. */
.t10hq-item:target {
	border-color: #E8A33B;
	box-shadow: 0 0 0 2px #E8A33B;
}

/* ==========================================================================
   Banner for logged-out visitors on a list page: points out account
   benefits (your own lists, commenting, voting history).
   ========================================================================== */

.t10hq-account-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	justify-content: space-between;
	margin: 0 0 24px;
	padding: 16px 18px;
	background: #16393B;
	border: 1px solid #E8A33B;
	font-family: "Public Sans", sans-serif;
}

.t10hq-account-banner p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #F3EFE2;
	max-width: 480px;
}

.t10hq-account-banner .t10hq-account-button {
	flex-shrink: 0;
	padding: 10px 20px;
}

@media (max-width: 480px) {
	.t10hq-account-banner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Nudge that appears after the first vote from a logged-out visitor. */
.t10hq-vote-nudge {
	position: relative;
	margin-top: 16px;
	padding: 14px 40px 14px 16px;
	background: #16393B;
	border: 1px solid #E8A33B;
	font-family: "Public Sans", sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #F3EFE2;
	animation: t10hq-nudge-in 200ms ease-out;
}

.t10hq-vote-nudge a {
	color: #E8A33B;
	font-weight: 700;
	text-decoration: underline;
}

.t10hq-vote-nudge-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	color: #A9C4C0;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.t10hq-vote-nudge-close:hover {
	color: #F3EFE2;
}

@keyframes t10hq-nudge-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}