/* Coywolf Video Manager — front-end styles.
 *
 * Selectors are scoped under .coywolf-cvm with deliberately high specificity so
 * the defaults win over typical theme rules, but WITHOUT !important so themes
 * (or Settings) can override them. The look is driven by CSS custom properties
 * you can set from your theme, e.g.:
 *
 *   .coywolf-cvm {
 *     --cvm-title-color: #111;     --cvm-title-size: 1.25rem;
 *     --cvm-title-weight: 600;     --cvm-align: left;
 *     --cvm-like-color: #0f0f0f;   --cvm-like-bg: #f2f2f2;
 *     --cvm-meta-color: #606060;   --cvm-meta-size: 0.9rem;
 *   }
 *
 * --cvm-align (left|center|right) aligns both the video name and the meta row.
 */

.coywolf-cvm {
	--cvm-title-color: inherit;
	--cvm-title-size: 1rem;
	--cvm-title-weight: 700;
	--cvm-desc-weight: 400;
	--cvm-align: left;
	--cvm-like-color: #0f0f0f;
	--cvm-like-bg: #f2f2f2;
	--cvm-like-active: var( --cvm-like-color );
	--cvm-like-active-bg: var( --cvm-like-bg );
	--cvm-meta-color: #606060;
	--cvm-meta-size: 0.9rem;

	margin: 0 0 1.5em;
	padding: 0;
}

/* Optional color schemes (set via Settings → Appearance). */
.coywolf-cvm.coywolf-cvm-scheme-dark {
	--cvm-title-color: #f1f1f1;
	--cvm-like-color: #f1f1f1;
	--cvm-like-bg: #272727;
	--cvm-meta-color: #aaaaaa;
}

@media ( prefers-color-scheme: dark ) {
	.coywolf-cvm.coywolf-cvm-scheme-auto {
		--cvm-title-color: #f1f1f1;
		--cvm-like-color: #f1f1f1;
		--cvm-like-bg: #272727;
		--cvm-meta-color: #aaaaaa;
	}
}

/* Responsive iframe wrapper (padding-top + max-width come from inline styles). */
.coywolf-cvm .coywolf-cvm-frame {
	background: #000;
	overflow: hidden;
}

.coywolf-cvm .coywolf-cvm-poster {
	border: none;
	margin: 0;
}

/* Name & description. The figcaption sets the shared size/color/alignment;
   the name and description carry their own font weights. */
.coywolf-cvm figcaption.coywolf-cvm-title {
	display: block;
	float: none;
	width: auto;
	max-width: none;
	margin: 0.7em 0 0.4em;
	padding: 0;
	text-align: var( --cvm-align );
	font-weight: var( --cvm-desc-weight );
	font-size: var( --cvm-title-size );
	font-style: normal;
	line-height: 1.3;
	color: var( --cvm-title-color );
	background: none;
}

.coywolf-cvm .coywolf-cvm-name {
	font-weight: var( --cvm-title-weight );
}

.coywolf-cvm .coywolf-cvm-desc {
	font-weight: var( --cvm-desc-weight );
}

/* Like / views / date row. */
.coywolf-cvm .coywolf-cvm-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var( --cvm-align );
	gap: 0.6em 1em;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var( --cvm-meta-size );
	line-height: 1.4;
	color: var( --cvm-meta-color );
	text-align: var( --cvm-align );
}

/* Like button — reset theme <button> styling, then make it a YouTube pill. */
.coywolf-cvm .coywolf-cvm-like {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 0.45em 0.95em;
	border: 0;
	border-radius: 999px;
	background: var( --cvm-like-bg );
	color: var( --cvm-like-color );
	font: inherit;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background 0.15s ease;
}

.coywolf-cvm .coywolf-cvm-like:disabled {
	opacity: 0.7;
	cursor: default;
}

/* Icon: outline by default. */
.coywolf-cvm .coywolf-cvm-thumb {
	display: inline-block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	vertical-align: middle;
	transform-origin: 60% 60%;
	transition: fill 0.15s ease;
}

/* Liked (resting): clicked color + background, filled icon. */
.coywolf-cvm .coywolf-cvm-like.is-liked {
	color: var( --cvm-like-active );
	background: var( --cvm-like-active-bg );
}

.coywolf-cvm .coywolf-cvm-like.is-liked .coywolf-cvm-thumb {
	fill: currentColor;
}

/* Hover fills the icon and reverts the colors to unclicked (for both states).
   Suppressed by .is-held right after a click, so the just-toggled state holds
   until the cursor leaves the button. */
.coywolf-cvm .coywolf-cvm-like:not( .is-held ):hover {
	color: var( --cvm-like-color );
	background: var( --cvm-like-bg );
}

.coywolf-cvm .coywolf-cvm-like:not( .is-held ):hover .coywolf-cvm-thumb {
	fill: currentColor;
}

.coywolf-cvm .coywolf-cvm-like-count {
	font-variant-numeric: tabular-nums;
}

.coywolf-cvm .coywolf-cvm-like-count.is-empty {
	display: none;
}

.coywolf-cvm .coywolf-cvm-like.is-animating .coywolf-cvm-thumb {
	animation: coywolf-cvm-pop 0.35s ease;
}

@keyframes coywolf-cvm-pop {
	0% { transform: scale( 1 ); }
	40% { transform: scale( 1.35 ) rotate( -8deg ); }
	100% { transform: scale( 1 ); }
}

.coywolf-cvm .coywolf-cvm-views,
.coywolf-cvm .coywolf-cvm-date {
	color: var( --cvm-meta-color );
	white-space: nowrap;
}

.coywolf-cvm .coywolf-cvm-views.is-empty {
	display: none;
}

.coywolf-cvm .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}