/**
 * RFM Video — front-end + editor styles.
 * BRAND-NEUTRAL BY LAW (RFM Universal Color System): this shared plugin never
 * hardcodes a client color. Color enters ONLY through semantic tokens with
 * neutral fallbacks. A child theme defines --accent once and every player on
 * the site is on-brand automatically. Do not add a brand-named token default.
 */
.rfm-vp {
	/* semantic tokens with neutral fallbacks */
	--rfm-vp-accent:      var(--accent, var(--brand, #2271b1));
	--rfm-vp-accent-deep: var(--accent-deep, var(--rfm-vp-accent));
	--rfm-vp-on-accent:   var(--on-accent, #fff);
	--rfm-vp-active:      var(--gold, var(--accent-2, var(--rfm-vp-accent))); /* sound-on state */
	--rfm-vp-maxw: 560px;
	--rfm-vp-radius: 16px;

	position: relative;
	max-width: var(--rfm-vp-maxw);
	margin-left: auto;
	margin-right: auto;
}

/* The stage ALWAYS reserves the aspect ratio so the box never shifts (zero CLS).
   --rfm-vp-ar is emitted server-side from the poster, then the video, then the
   chosen aspect, falling back to 16/9. Video + poster absolutely fill the box. */
.rfm-vp__stage {
	position: relative;
	aspect-ratio: var(--rfm-vp-ar, 16 / 9);
	border-radius: var(--rfm-vp-radius);
	overflow: hidden;
	border: 3px solid rgba(255,255,255,.14);
	box-shadow: 0 18px 50px rgba(0,0,0,.38);
	background: #000;
}
.rfm-vp__video,
.rfm-vp__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.rfm-vp__video  { z-index: 1; }
.rfm-vp__poster { z-index: 2; transition: opacity .45s ease; }
.rfm-vp.is-playing .rfm-vp__poster { opacity: 0; pointer-events: none; }

/* center play button — poster/tap mode only (>=44px target). Hidden by default;
   view.js reveals it via .is-tap when the effective mode needs a manual start. */
.rfm-vp__big {
	position: absolute; inset: 0; margin: auto; z-index: 4;
	display: none; align-items: center; justify-content: center;
	width: 72px; height: 72px; padding: 0;
	background: var(--rfm-vp-accent); color: var(--rfm-vp-on-accent);
	border: 2px solid rgba(255,255,255,.5); border-radius: 999px;
	cursor: pointer; box-shadow: 0 8px 26px rgba(0,0,0,.4);
	backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
	transition: background .15s, transform .12s;
}
.rfm-vp__big svg { width: 30px; height: 30px; }
.rfm-vp__big:hover { background: var(--rfm-vp-accent-deep); transform: translate(-0px,-1px) scale(1.04); }
.rfm-vp.is-tap .rfm-vp__big { display: inline-flex; }
.rfm-vp.is-tap.is-playing .rfm-vp__big { display: none; }

/* play / pause pill (bottom-left) */
.rfm-vp__pp {
	position: absolute; left: 12px; bottom: 12px; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	background: var(--rfm-vp-accent); color: var(--rfm-vp-on-accent);
	border: 2px solid rgba(255,255,255,.38); border-radius: 999px;
	font-size: 17px; line-height: 1; cursor: pointer;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	transition: background .15s, transform .12s;
}
.rfm-vp__pp:hover { background: var(--rfm-vp-accent-deep); transform: translateY(-1px); }

/* sound pill (bottom-right) */
.rfm-vp__snd {
	position: absolute; right: 12px; bottom: 12px; z-index: 3;
	display: inline-flex; align-items: center; gap: 7px;
	background: var(--rfm-vp-accent); color: var(--rfm-vp-on-accent);
	border: 2px solid rgba(255,255,255,.38); border-radius: 999px;
	padding: 10px 16px; font-weight: 800; font-size: 15px; line-height: 1;
	cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	transition: background .15s, transform .12s;
}
.rfm-vp__snd:hover { background: var(--rfm-vp-accent-deep); transform: translateY(-1px); }
.rfm-vp__snd.is-on { background: var(--rfm-vp-active); color: #241f10; border-color: rgba(0,0,0,.15); }

/* focus visibility (accessibility) */
.rfm-vp__pp:focus-visible,
.rfm-vp__snd:focus-visible,
.rfm-vp__big:focus-visible { outline: 3px solid var(--rfm-vp-active); outline-offset: 2px; }

/* VTT caption cue styling — brand-tinted, readable */
.rfm-vp__video::cue {
	background: rgba(0,0,0,.62);
	color: #fff;
	font-weight: 700;
	line-height: 1.3;
}

/* editor preview */
.rfm-vp-editor .rfm-vp-preview video { max-width: 100%; }