/*
==========================================================
FantasyFanzone Single Article
Version: 4.1
==========================================================
*/

/*========================================================
SINGLE PAGE
========================================================*/

.ffz-single{
	position:relative;

	padding:
		var(--ffz-section-padding)
		0;
}

.ffz-single > .ffz-container{
	max-width:1120px;
}

/*========================================================
ARTICLE
========================================================*/

.ffz-single-article{
	position:relative;

	width:100%;
}

/*========================================================
HEADER
========================================================*/

.ffz-single-header{
	max-width:920px;

	margin:
		0
		auto
		44px;

	text-align:center;
}

/*========================================================
CATEGORY
========================================================*/

.ffz-single-category{
	display:inline-flex;

	align-items:center;
	justify-content:center;

	margin-bottom:20px;

	padding:
		7px
		12px;

	border:
		1px solid
		rgba(124,58,237,.22);

	border-radius:999px;

	background:
		rgba(124,58,237,.12);

	color:#c4b5fd;

	font-size:12px;
	font-weight:800;

	letter-spacing:.06em;

	text-decoration:none;

	text-transform:uppercase;

	transition:
		background var(--ffz-transition-normal),
		border-color var(--ffz-transition-normal),
		color var(--ffz-transition-normal);
}

a.ffz-single-category:hover,
a.ffz-single-category:focus-visible{
	border-color:
		rgba(124,58,237,.55);

	background:
		rgba(124,58,237,.20);

	color:#fff;
}

/*========================================================
TITLE
========================================================*/

.ffz-single-title{
	margin:
		0
		auto;

	max-width:960px;

	color:
		var(--ffz-text,#fff);

	font-size:
		clamp(
			38px,
			5vw,
			68px
		);

	font-weight:850;

	letter-spacing:-.035em;

	line-height:1.06;

	text-wrap:balance;
}

/*========================================================
META
========================================================*/

.ffz-single-meta{
	display:flex;

	align-items:center;
	justify-content:center;

	flex-wrap:wrap;

	gap:
		8px
		16px;

	margin-top:26px;

	color:
		var(--ffz-text-muted);

	font-size:13px;
	font-weight:600;
}

.ffz-single-meta > *{
	display:inline-flex;

	align-items:center;
}

.ffz-single-meta > * + *::before{
	content:"";

	display:inline-block;

	width:4px;
	height:4px;

	margin-right:16px;

	border-radius:50%;

	background:
		rgba(255,255,255,.28);
}

.ffz-single-meta__author{
	gap:5px;
}

.ffz-single-meta__author a{
	color:#fff;

	font-weight:700;

	text-decoration:none;

	transition:
		color var(--ffz-transition-normal);
}

.ffz-single-meta__author a:hover,
.ffz-single-meta__author a:focus-visible{
	color:
		var(--ffz-primary);
}

.ffz-single-meta__date,
.ffz-single-meta__modified,
.ffz-single-meta__reading-time{
	font-variant-numeric:
		tabular-nums;
}

.ffz-single-meta__modified{
	color:
		#86efac;
}

/*========================================================
FEATURED IMAGE
========================================================*/

.ffz-single-featured-image{
	position:relative;

	max-width:1040px;

	margin:
		0
		auto
		54px;

	overflow:hidden;

	border:
		1px solid
		var(--ffz-border);

	border-radius:26px;

	background:
		var(--ffz-surface);

	box-shadow:
		var(--ffz-shadow-lg);
}

.ffz-single-featured-image img{
	display:block;

	width:100%;
	height:auto;

	aspect-ratio:16/9;

	object-fit:cover;
}

/*========================================================
ARTICLE CONTENT
========================================================*/

.ffz-single-content{
	max-width:820px;

	margin:
		0
		auto;

	color:
		var(--ffz-text);

	font-size:18px;

	line-height:1.85;
}

/*========================================================
CONTENT PARAGRAPHS
========================================================*/

.ffz-single-content p{
	margin:
		0
		0
		1.6em;

	color:
		var(--ffz-text-muted);
}

/*========================================================
CONTENT HEADINGS
========================================================*/

.ffz-single-content h2,
.ffz-single-content h3,
.ffz-single-content h4,
.ffz-single-content h5,
.ffz-single-content h6{
	color:#fff;

	font-weight:800;

	line-height:1.25;

	scroll-margin-top:120px;
}

.ffz-single-content h2{
	margin:
		2.2em
		0
		.8em;

	font-size:
		clamp(
			28px,
			3vw,
			38px
		);

	letter-spacing:-.02em;
}

.ffz-single-content h3{
	margin:
		1.9em
		0
		.7em;

	font-size:27px;
}

.ffz-single-content h4{
	margin:
		1.7em
		0
		.65em;

	font-size:22px;
}

.ffz-single-content h5,
.ffz-single-content h6{
	margin:
		1.5em
		0
		.6em;
}

/*========================================================
CONTENT LINKS
========================================================*/

.ffz-single-content a{
	color:
		#c4b5fd;

	text-decoration:
		underline;

	text-decoration-color:
		rgba(196,181,253,.45);

	text-decoration-thickness:
		1px;

	text-underline-offset:
		3px;

	transition:
		color var(--ffz-transition-normal),
		text-decoration-color
		var(--ffz-transition-normal);
}

.ffz-single-content a:hover,
.ffz-single-content a:focus-visible{
	color:#fff;

	text-decoration-color:#fff;
}

/*========================================================
LISTS
========================================================*/

.ffz-single-content ul,
.ffz-single-content ol{
	margin:
		0
		0
		1.7em;

	padding-left:1.5em;

	color:
		var(--ffz-text-muted);
}

.ffz-single-content li{
	margin-bottom:.55em;
}

.ffz-single-content li::marker{
	color:
		var(--ffz-primary);
}

/*========================================================
BLOCKQUOTE
========================================================*/

.ffz-single-content blockquote{
	position:relative;

	margin:
		2em
		0;

	padding:
		24px
		26px
		24px
		30px;

	border-left:
		4px solid
		var(--ffz-primary);

	border-radius:
		0
		16px
		16px
		0;

	background:
		rgba(124,58,237,.08);

	color:#e2e8f0;
}

.ffz-single-content blockquote p:last-child{
	margin-bottom:0;
}

/*========================================================
IMAGES
========================================================*/

.ffz-single-content img{
	max-width:100%;

	height:auto;

	border-radius:16px;
}

.ffz-single-content figure{
	margin:
		2em
		0;
}

.ffz-single-content figcaption{
	margin-top:10px;

	color:
		var(--ffz-text-muted);

	font-size:13px;

	line-height:1.6;

	text-align:center;
}

/*========================================================
TABLES
========================================================*/

.ffz-single-content table{
	width:100%;

	margin:
		2em
		0;

	border-collapse:collapse;

	border:
		1px solid
		var(--ffz-border);

	border-radius:14px;

	background:
		rgba(255,255,255,.025);
}

.ffz-single-content th,
.ffz-single-content td{
	padding:
		13px
		15px;

	border-bottom:
		1px solid
		rgba(255,255,255,.07);

	text-align:left;

	vertical-align:top;
}

.ffz-single-content th{
	background:
		rgba(124,58,237,.08);

	color:#fff;

	font-size:14px;
	font-weight:800;
}

.ffz-single-content td{
	color:
		var(--ffz-text-muted);

	font-size:14px;
}

.ffz-single-content tr:last-child td{
	border-bottom:0;
}

/*========================================================
CODE
========================================================*/

.ffz-single-content code{
	padding:
		2px
		6px;

	border-radius:6px;

	background:
		rgba(255,255,255,.07);

	color:#e9d5ff;

	font-size:.9em;
}

.ffz-single-content pre{
	max-width:100%;

	margin:
		2em
		0;

	overflow:auto;

	padding:20px;

	border:
		1px solid
		rgba(255,255,255,.08);

	border-radius:16px;

	background:#0b1020;

	color:#e2e8f0;

	font-size:14px;

	line-height:1.7;

	tab-size:4;
}

.ffz-single-content pre code{
	padding:0;

	background:none;

	color:inherit;
}

/*========================================================
HORIZONTAL RULE
========================================================*/

.ffz-single-content hr{
	margin:
		3em
		0;

	border:0;

	border-top:
		1px solid
		rgba(255,255,255,.10);
}

/*========================================================
PAGE LINKS
========================================================*/

.ffz-page-links{
	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:8px;

	margin-top:36px;

	padding-top:24px;

	border-top:
		1px solid
		rgba(255,255,255,.08);
}

.ffz-page-links__label{
	margin-right:4px;

	color:#fff;

	font-size:13px;
	font-weight:800;
}

.ffz-page-links a,
.ffz-page-links > span:not(
	.ffz-page-links__label
){
	display:inline-flex;

	align-items:center;
	justify-content:center;

	min-width:36px;
	height:36px;

	padding:
		0
		10px;

	border:
		1px solid
		var(--ffz-border);

	border-radius:10px;

	background:
		rgba(255,255,255,.035);

	color:#fff;

	font-size:13px;
	font-weight:700;

	text-decoration:none;
}

/*========================================================
ARTICLE FOOTER
========================================================*/

.ffz-single-footer{
	max-width:820px;

	margin:
		48px
		auto
		0;

	padding-top:28px;

	border-top:
		1px solid
		rgba(255,255,255,.08);
}

/*========================================================
TAGS
========================================================*/

.ffz-single-tags{
	display:flex;

	align-items:center;

	flex-wrap:wrap;

	gap:8px;
}

.ffz-single-tags a{
	display:inline-flex;

	align-items:center;

	padding:
		7px
		11px;

	border:
		1px solid
		rgba(255,255,255,.08);

	border-radius:999px;

	background:
		rgba(255,255,255,.035);

	color:
		var(--ffz-text-muted);

	font-size:11px;
	font-weight:700;

	text-decoration:none;

	transition:
		border-color var(--ffz-transition-normal),
		background var(--ffz-transition-normal),
		color var(--ffz-transition-normal);
}

.ffz-single-tags a:hover,
.ffz-single-tags a:focus-visible{
	border-color:
		rgba(124,58,237,.55);

	background:
		rgba(124,58,237,.12);

	color:#fff;
}

/*========================================================
POST NAVIGATION
========================================================*/

.ffz-post-navigation{
	display:grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap:18px;

	max-width:920px;

	margin:
		54px
		auto
		0;

	padding-top:32px;

	border-top:
		1px solid
		rgba(255,255,255,.08);
}

.ffz-post-navigation__previous,
.ffz-post-navigation__next{
	min-width:0;
}

.ffz-post-navigation a{
	display:grid;

	grid-template-columns:auto 1fr;

	align-items:center;

	gap:
		4px
		10px;

	height:100%;

	padding:
		20px;

	border:
		1px solid
		var(--ffz-border);

	border-radius:18px;

	background:
		rgba(255,255,255,.035);

	color:#fff;

	text-decoration:none;

	transition:
		transform var(--ffz-transition-normal),
		border-color var(--ffz-transition-normal),
		background var(--ffz-transition-normal),
		box-shadow var(--ffz-transition-normal);
}

.ffz-post-navigation a:hover,
.ffz-post-navigation a:focus-visible{
	transform:
		translateY(-3px);

	border-color:
		rgba(124,58,237,.55);

	background:
		rgba(124,58,237,.07);

	box-shadow:
		var(--ffz-shadow-md);
}

.ffz-post-navigation__next a{
	grid-template-columns:
		1fr auto;

	text-align:right;
}

.ffz-post-navigation__label{
	grid-column:2;

	color:
		var(--ffz-text-muted);

	font-size:10px;
	font-weight:800;

	letter-spacing:.06em;

	text-transform:uppercase;
}

.ffz-post-navigation__next
.ffz-post-navigation__label{
	grid-column:1;
}

.ffz-post-navigation__title{
	grid-column:2;

	overflow:hidden;

	font-size:14px;
	font-weight:750;

	line-height:1.4;

	text-overflow:ellipsis;
}

.ffz-post-navigation__next
.ffz-post-navigation__title{
	grid-column:1;
}

/*========================================================
FOCUS
========================================================*/

.ffz-single-category:focus-visible,
.ffz-single-meta a:focus-visible,
.ffz-single-tags a:focus-visible,
.ffz-post-navigation a:focus-visible{
	outline:
		2px solid
		var(--ffz-primary);

	outline-offset:3px;
}

/*========================================================
TABLET
========================================================*/

@media(max-width:992px){

	.ffz-single-header{
		margin-bottom:36px;
	}

	.ffz-single-title{
		font-size:
			clamp(
				36px,
				6vw,
				56px
			);
	}

	.ffz-single-featured-image{
		margin-bottom:44px;

		border-radius:22px;
	}

	.ffz-single-content{
		max-width:760px;

		font-size:17px;
	}
}

/*========================================================
MOBILE
========================================================*/

@media(max-width:768px){

	.ffz-single{
		padding:64px 0;
	}

	.ffz-single-header{
		margin-bottom:30px;

		text-align:left;
	}

	.ffz-single-category{
		margin-bottom:16px;
	}

	.ffz-single-title{
		font-size:
			clamp(
				34px,
				10vw,
				46px
			);

		line-height:1.1;
	}

	.ffz-single-meta{
		justify-content:flex-start;

		gap:
			7px
			12px;

		margin-top:20px;

		font-size:12px;
	}

	.ffz-single-meta > * + *::before{
		margin-right:12px;
	}

	.ffz-single-featured-image{
		margin-bottom:34px;

		border-radius:18px;
	}

	.ffz-single-content{
		font-size:16px;

		line-height:1.8;
	}

	.ffz-single-content h2{
		font-size:28px;
	}

	.ffz-single-content h3{
		font-size:23px;
	}

	.ffz-single-content table{
		display:block;

		overflow-x:auto;

		-webkit-overflow-scrolling:touch;
	}

	.ffz-post-navigation{
		grid-template-columns:1fr;

		margin-top:42px;
	}
}

/*========================================================
SMALL MOBILE
========================================================*/

@media(max-width:480px){

	.ffz-single-title{
		font-size:32px;
	}

	.ffz-single-meta{
		align-items:flex-start;

		flex-direction:column;

		gap:7px;
	}

	.ffz-single-meta > * + *::before{
		display:none;
	}

	.ffz-single-featured-image{
		border-radius:14px;
	}

	.ffz-single-content{
		font-size:15px;
	}

	.ffz-single-content h2{
		font-size:25px;
	}

	.ffz-single-content h3{
		font-size:21px;
	}

	.ffz-single-content blockquote{
		padding:
			20px
			18px
			20px
			22px;
	}

	.ffz-post-navigation a{
		padding:16px;
	}
}

/*========================================================
REDUCED MOTION
========================================================*/

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

	.ffz-single-category,
	.ffz-single-meta a,
	.ffz-single-content a,
	.ffz-single-tags a,
	.ffz-post-navigation a{
		transition:none;
	}

	.ffz-post-navigation a:hover{
		transform:none;
	}
}