/*!
 * All-Safe Social Feed 1.0.6 — front-end styles (Facebook feed).
 * Every rule is scoped to .asff-root so the theme is not affected, and rules use
 * extra class specificity so common theme rules do not leak into the card.
 * Everything outside the white card is transparent: the card sits directly on
 * the page background.
 */

@font-face {
	font-family: "ASFF Poppins";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/poppins-latin-400.woff2") format("woff2");
}

@font-face {
	font-family: "ASFF Poppins";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/poppins-latin-500.woff2") format("woff2");
}

@font-face {
	font-family: "ASFF Poppins";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/poppins-latin-600.woff2") format("woff2");
}

/* ---------- Root & isolation reset ---------- */
.asff-root.asff-root {
	--asff-blue: #0d5e9f;
	--asff-text: #5d5e5f;
	--asff-muted: #65676b;
	--asff-soft: #8a8d91;
	--asff-like: #5890ff;
	--asff-radius: 8px;
	--asff-pad: 20px;
	--asff-shadow-space: 10px; /* Transparent room so the card shadow is not clipped. */
	--asff-fs: 14.5px; /* Post text size. */
	--asff-lh: 1.62; /* Post text line height. */

	all: revert;
	display: block;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--asff-card-width, 360px) + 2 * var(--asff-shadow-space));
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	color: var(--asff-text);
	-webkit-text-size-adjust: 100%;
}

.asff-root.asff-font-poppins {
	font-family: "ASFF Poppins", Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.asff-root.asff-root *,
.asff-root.asff-root *::before,
.asff-root.asff-root *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	float: none;
	max-width: none;
	min-width: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	color: inherit;
	vertical-align: baseline;
}

.asff-root.asff-root [hidden] {
	display: none !important;
}

.asff-root.asff-root svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
	overflow: visible;
}

/* Explicit icon sizes so theme rules such as `svg { width: … }` cannot resize them. */
.asff-root.asff-root .asff-fb svg {
	width: 16px;
	height: 16px;
}

.asff-root.asff-root a {
	text-decoration: none;
	cursor: pointer;
}

.asff-root.asff-root button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	min-height: 0;
	line-height: inherit;
}

.asff-root.asff-root a:focus-visible,
.asff-root.asff-root button:focus-visible {
	outline: 2px solid var(--asff-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------- Slider frame ---------- */
.asff-root.asff-root .asff-viewport {
	position: relative;
	overflow: hidden;
	padding: var(--asff-shadow-space);
	background: transparent;
	transition: height 0.35s ease;
}

.asff-root.asff-root .asff-track {
	display: flex;
	align-items: flex-start;
	gap: calc(2 * var(--asff-shadow-space)); /* Keeps neighbouring cards hidden. */
	background: transparent;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
	touch-action: pan-y;
}

.asff-root.asff-no-js .asff-card:not(.is-active),
.asff-root.asff-no-js .asff-nav {
	display: none;
}

/* ---------- Card ---------- */
.asff-root.asff-root .asff-card {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	padding: var(--asff-pad);
	border: 1px solid rgba(0, 0, 0, 0.07);
	background: #fff;
	border-radius: var(--asff-radius);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
	color: var(--asff-text);
	overflow: hidden;
}

.asff-root.asff-root .asff-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 15px;
}

.asff-root.asff-root .asff-avatar {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	background: #f0f2f5;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.asff-root.asff-root .asff-avatar img {
	display: block;
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
}

.asff-root.asff-root .asff-meta {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.asff-root.asff-root .asff-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--asff-blue);
	overflow-wrap: anywhere;
}

.asff-root.asff-root .asff-name:hover {
	text-decoration: underline;
}

.asff-root.asff-root .asff-time {
	display: block;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--asff-muted);
}

.asff-root.asff-root .asff-time:hover {
	text-decoration: underline;
}

.asff-root.asff-root .asff-fb {
	flex: 0 0 auto;
	align-self: flex-start;
	margin-left: auto;
	padding: 2px;
	color: var(--asff-blue);
}

.asff-root.asff-root .asff-fb:hover {
	opacity: 0.8;
}

/* ---------- Text ---------- */
.asff-root.asff-root .asff-text {
	margin-bottom: 12px;
}

.asff-root.asff-root .asff-text p {
	margin: 0 !important; /* Some themes force paragraph margins with !important. */
	padding: 0;
	font-size: var(--asff-fs);
	font-weight: 400;
	line-height: var(--asff-lh);
	color: var(--asff-text);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.asff-root.asff-root .asff-text p a:not(.asff-more) {
	color: var(--asff-blue);
	text-decoration: underline;
}

.asff-root.asff-root .asff-text .asff-full:focus {
	outline: none;
}

.asff-root.asff-root .asff-more,
.asff-root.asff-root .asff-less {
	display: inline;
	font-size: var(--asff-fs);
	color: var(--asff-soft);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}

.asff-root.asff-root .asff-more:hover,
.asff-root.asff-root .asff-less:hover {
	color: var(--asff-blue);
}

/* ---------- Media ---------- */
.asff-root.asff-root .asff-media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: #e9ebee;
}

/* The whole image is always shown at its own proportions (never stretched or
   cropped). Any spare room is filled with a softly blurred copy of the image. */
.asff-root.asff-root .asff-media-img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
}

.asff-root.asff-root .asff-media-bg {
	position: absolute;
	top: -12%;
	left: -12%;
	display: block;
	width: 124%;
	height: 124%;
	object-fit: cover;
	filter: blur(18px) saturate(1.1) brightness(0.92);
	pointer-events: none;
}

.asff-root.asff-root .asff-media.is-broken .asff-media-img,
.asff-root.asff-root .asff-media.is-broken .asff-media-bg {
	visibility: hidden;
}

.asff-root.asff-root .asff-media-link {
	position: absolute;
	inset: 0;
}

.asff-root.asff-root .asff-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 54px;
	height: 54px;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
	color: #fff;
}

.asff-root.asff-root .asff-play svg {
	width: 54px;
	height: 54px;
}

.asff-root.asff-root .asff-play:hover,
.asff-root.asff-root .asff-play:focus-visible {
	transform: translate(-50%, -50%) scale(1.08);
}

.asff-root.asff-root .asff-play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	border-radius: 50%;
}

.asff-root.asff-root .asff-media.is-embed {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto !important;
	background: #000;
}

.asff-root.asff-root .asff-media.is-embed .asff-media-bg,
.asff-root.asff-root .asff-media.is-embed .asff-media-img,
.asff-root.asff-root .asff-media.is-embed .asff-play {
	display: none;
}

/* Facebook sizes its player through data-width; only display is set here. */
.asff-root.asff-root .asff-media .fb-video {
	display: block;
}

.asff-root.asff-root .asff-media .fb-video > span,
.asff-root.asff-root .asff-media .fb-video iframe {
	display: block;
	max-width: 100%;
	max-height: 100%;
}

.asff-root.asff-root .asff-loading,
.asff-root.asff-root .asff-fallback {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 10px 12px;
	font-size: 13px;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	background: rgba(0, 0, 0, 0.7);
}

.asff-root.asff-root .asff-fallback {
	text-decoration: underline;
}

/* ---------- Engagement ---------- */
.asff-root.asff-root .asff-foot {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.3;
	color: var(--asff-soft);
}

.asff-root.asff-root .asff-reactions {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.asff-root.asff-root .asff-like {
	width: 18px;
	height: 18px;
}

.asff-root.asff-root .asff-foot-right {
	display: inline-flex;
	gap: 12px;
	margin-left: auto;
}

/* ---------- Navigation ---------- */
.asff-root.asff-root .asff-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 4px;
	background: transparent;
}

.asff-root.asff-root .asff-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(13, 94, 159, 0.18);
	border-radius: 50%;
	background: #fff;
	color: var(--asff-blue);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.asff-root.asff-root .asff-btn:hover {
	background: var(--asff-blue);
	color: #fff;
}

.asff-root.asff-root .asff-btn:focus-visible,
.asff-root.asff-root .asff-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--asff-blue);
	border-radius: 50%;
}

.asff-root.asff-root .asff-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.asff-root.asff-root .asff-dot {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: transparent;
}

.asff-root.asff-root .asff-dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(13, 94, 159, 0.35);
	transform: translate(-50%, -50%);
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.asff-root.asff-root .asff-dot:hover::before {
	background: rgba(13, 94, 159, 0.65);
}

.asff-root.asff-root .asff-dot.is-active::before {
	background: var(--asff-blue);
	transform: translate(-50%, -50%) scale(1.25);
}

/* ---------- Uniform card height (1.0.5) ----------
   Every card has the height of the reference post (the "Coming Soon" video
   card): header, three lines of text, a 16:9 media area and the reactions row.
   The rows are fixed, so short posts do not shrink and long posts do not grow.
   The height follows the card width, so it stays consistent on any screen. */
@supports (width: 1cqw) {

	.asff-root.asff-root .asff-viewport {
		container-type: inline-size;
	}

	.asff-root.asff-root .asff-card {
		--asff-text-row: calc(3 * var(--asff-lh) * var(--asff-fs) + 12px);
		--asff-media-row: calc((100cqw - 2 * var(--asff-pad) - 2px) * 9 / 16);
		--asff-foot-row: 0px;

		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto var(--asff-text-row) var(--asff-media-row) var(--asff-foot-row);
		align-content: start;
	}

	.asff-root.asff-has-foot .asff-card {
		--asff-foot-row: 30px;
	}

	.asff-root.asff-root .asff-head {
		grid-row: 1;
	}

	.asff-root.asff-root .asff-text {
		grid-row: 2;
		min-height: 0;
		overflow: hidden;
	}

	.asff-root.asff-root .asff-media {
		grid-row: 3;
		height: 100%;
		min-height: 0;
		aspect-ratio: auto !important;
	}

	.asff-root.asff-root .asff-foot {
		grid-row: 4;
		align-self: start;
	}

	/* Posts with an image but no text: the media also uses the text row. */
	.asff-root.asff-root .asff-card--media-only .asff-media {
		grid-row: 2 / 4;
	}

	/* Text-only posts: the text uses the text and media rows. */
	.asff-root.asff-root .asff-card--text-only .asff-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		grid-row: 2 / 4;
		padding: 16px 18px;
		border-radius: 6px;
		background: #f0f2f5;
	}

	.asff-root.asff-root .asff-card--text-only .asff-text p {
		font-size: calc(var(--asff-fs) + 2px);
	}

	.asff-root.asff-root .asff-card--text-only .asff-more,
	.asff-root.asff-root .asff-card--text-only .asff-less {
		font-size: calc(var(--asff-fs) + 2px);
	}

	/* "Read more": the full text scrolls inside the same card area; the card
	   keeps its height. "Show less" restores the image. */
	.asff-root.asff-root .asff-card.is-expanded .asff-text {
		display: block;
		grid-row: 2 / 4;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	.asff-root.asff-root .asff-card--text-only.is-expanded .asff-text {
		display: block;
	}

	.asff-root.asff-root .asff-card.is-expanded .asff-media {
		display: none;
	}
}

/* ---------- Responsive & motion ---------- */
@media (max-width: 420px) {

	.asff-root.asff-root {
		--asff-pad: 16px;
		--asff-shadow-space: 6px;
		--asff-fs: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.asff-root.asff-root .asff-track,
	.asff-root.asff-root .asff-viewport,
	.asff-root.asff-root .asff-play {
		transition: none;
	}
}

/* Message shown to administrators only when the cache is empty. */
.asff-admin-empty {
	padding: 12px 16px;
	border-left: 4px solid #d63638;
	background: #fff;
	color: #1d2327;
	font-size: 14px;
}