/**
 * Relatedly Frontend Stylesheet
 *
 * All theme colours are driven by CSS custom properties set on the container
 * element by the PHP theme class. No inline styles per element.
 *
 * @package Relatedly
 * @since   2.0.0
 */

/* ============================================================
   Shared — all inline themes
   ============================================================ */

.relatedly-inline {
	margin: 20px 0;
	clear: both;
	animation: relatedly-fade-in-up 0.6s ease-out;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.relatedly-inline:hover {
	transform: translateY( -2px );
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.1 );
}

.relatedly-inline .relatedly-label {
	display: block;
	font-size: var( --relatedly-label-size, 14px );
	font-weight: var( --relatedly-label-weight, normal );
	color: var( --relatedly-label-color, #0073aa );
	margin-bottom: 4px;
}

.relatedly-inline .relatedly-title {
	display: block;
	font-size: var( --relatedly-title-size, 16px );
	font-weight: var( --relatedly-title-weight, normal );
	color: var( --relatedly-title-color, #333 );
	text-decoration: none;
	transition: color 0.2s ease;
}

.relatedly-inline .relatedly-title:hover {
	text-decoration: underline;
}

.relatedly-inline .relatedly-excerpt {
	display: block;
	font-size: var( --relatedly-excerpt-size, 14px );
	color: var( --relatedly-excerpt-color, #666 );
	margin-top: 4px;
}

/* ============================================================
   Theme 1 — Simple
   ============================================================ */

.relatedly-inline-simple {
	background: var( --relatedly-bg, #f9f9f9 );
	border-left: 4px solid var( --relatedly-border, #0073aa );
	padding: 15px;
}

/* ============================================================
   Theme 2 — Minimal
   ============================================================ */

.relatedly-inline-minimal {
	background: var( --relatedly-bg, #fff );
	border: 1px solid var( --relatedly-border, #ddd );
	padding: 10px 14px;
}

/* ============================================================
   Theme 3 — Featured (thumbnail)
   ============================================================ */

.relatedly-inline-featured {
	background: var( --relatedly-bg, #fff );
	border: 1px solid var( --relatedly-border, #e1e1e1 );
	padding: 12px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	overflow: hidden;
}

.relatedly-inline-featured.relatedly-align-right {
	flex-direction: row-reverse;
}

.relatedly-inline-featured .relatedly-thumbnail img {
	max-width: 100px;
	height: auto;
	display: block;
	transition: transform 0.4s ease;
}

.relatedly-inline-featured:hover .relatedly-thumbnail img {
	transform: scale( 1.05 );
}

/* ============================================================
   Theme 4 — Quote
   ============================================================ */

.relatedly-inline-quote {
	background: var( --relatedly-bg, #f8f9fa );
	border-left: 4px solid var( --relatedly-accent, #0073aa );
	padding: var( --relatedly-padding, 20px );
}

.relatedly-inline-quote .relatedly-quote {
	margin: 0;
	padding: 0;
	border: none;
}

.relatedly-inline-quote .relatedly-title {
	font-style: var( --relatedly-title-style, italic );
}

.relatedly-inline-quote cite.relatedly-label {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	font-style: normal;
}

/* ============================================================
   Theme 5 — Badge
   ============================================================ */

.relatedly-inline-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var( --relatedly-bg, #0073aa );
	color: var( --relatedly-text-color, #fff );
	padding: var( --relatedly-padding, 8px 12px );
	border-radius: 20px;
}

.relatedly-inline-badge .relatedly-label {
	color: var( --relatedly-label-color, rgba( 255,255,255,0.8 ) );
	font-size: var( --relatedly-label-size, 10px );
	margin-bottom: 0;
}

.relatedly-inline-badge .relatedly-title {
	color: var( --relatedly-text-color, #fff );
	font-size: var( --relatedly-font-size, 13px );
}

/* ============================================================
   Theme 6 — Callout
   ============================================================ */

.relatedly-inline-callout {
	background: var( --relatedly-bg, #fff3cd );
	border-left: 4px solid var( --relatedly-border, #ffc107 );
	padding: var( --relatedly-padding, 20px );
	border-radius: 4px;
}

/* ============================================================
   Theme 7 — Gradient
   ============================================================ */

.relatedly-inline-gradient {
	padding: var( --relatedly-padding, 25px );
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba( 0, 0, 0, 0.2 );
}

.relatedly-inline-gradient .relatedly-title {
	color: var( --relatedly-title-color, #fff );
}

.relatedly-inline-gradient .relatedly-excerpt {
	color: var( --relatedly-excerpt-color, rgba( 255,255,255,0.9 ) );
}

/* ============================================================
   Theme 8 — Card
   ============================================================ */

.relatedly-inline-card {
	background: var( --relatedly-bg, #fff );
	padding: var( --relatedly-padding, 20px );
	border-radius: var( --relatedly-radius, 8px );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.08 );
}

.relatedly-inline-card .relatedly-date {
	display: block;
	font-size: 12px;
	color: var( --relatedly-date-color, #999 );
	margin-top: 4px;
}

/* ============================================================
   Shared — all end-content themes
   ============================================================ */

.relatedly-end-content {
	margin: 30px 0;
	clear: both;
	animation: relatedly-fade-in-up 0.6s ease-out;
}

.relatedly-end-content .relatedly-heading {
	font-size: var( --relatedly-label-size, 20px );
	font-weight: var( --relatedly-label-weight, bold );
	color: var( --relatedly-label-color, #333 );
	margin: 0 0 16px;
}

.relatedly-end-content .relatedly-title {
	font-size: var( --relatedly-title-size, 16px );
	font-weight: var( --relatedly-title-weight, normal );
	color: var( --relatedly-title-color, #0073aa );
	text-decoration: none;
}

.relatedly-end-content .relatedly-title:hover {
	text-decoration: underline;
}

.relatedly-end-content .relatedly-excerpt {
	font-size: var( --relatedly-excerpt-size, 14px );
	color: var( --relatedly-excerpt-color, #666 );
	margin: 4px 0 0;
}

/* ============================================================
   End-Content Theme 1 — List
   ============================================================ */

.relatedly-end-content-list {
	background: var( --relatedly-bg, #f9f9f9 );
	border: 1px solid var( --relatedly-border, #e1e1e1 );
	padding: 20px;
}

.relatedly-end-content-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.relatedly-end-content-list li {
	padding: 10px 0;
	border-bottom: 1px solid var( --relatedly-border, #e1e1e1 );
	transition: transform 0.2s ease;
}

.relatedly-end-content-list li:last-child { border-bottom: none; }
.relatedly-end-content-list li:hover { transform: translateX( 4px ); }

/* ============================================================
   End-Content Theme 2 — Simple List
   ============================================================ */

.relatedly-end-content-simple-list {
	background: var( --relatedly-bg, #fff );
	border: 1px solid var( --relatedly-border, #e1e1e1 );
	padding: 20px;
}

.relatedly-end-content-simple-list .relatedly-item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 10px 0;
	border-bottom: 1px solid var( --relatedly-border, #e1e1e1 );
}

.relatedly-end-content-simple-list .relatedly-item:last-child { border-bottom: none; }

.relatedly-end-content-simple-list .relatedly-thumbnail img {
	width: 80px;
	height: auto;
	display: block;
}

/* ============================================================
   End-Content Theme 3 — Masonry
   ============================================================ */

.relatedly-end-content-masonry {
	background: var( --relatedly-bg, #fff );
	padding: 20px;
}

.relatedly-masonry-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 220px, 1fr ) );
	gap: 20px;
}

.relatedly-masonry-item {
	border: 1px solid var( --relatedly-border, #e1e1e1 );
	padding: 12px;
	transition: transform 0.3s ease;
}

.relatedly-masonry-item:hover { transform: translateY( -4px ); }

.relatedly-masonry-item img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 8px;
}

/* ============================================================
   End-Content Theme 4 — Carousel
   ============================================================ */

.relatedly-end-content-carousel { padding: 20px; }

.relatedly-carousel-container {
	position: relative;
	overflow: hidden;
}

.relatedly-carousel-wrapper {
	display: flex;
	gap: 20px;
	transition: transform 0.5s ease;
}

.relatedly-carousel-item {
	flex: 0 0 auto;
	min-width: 200px;
}

.relatedly-carousel-item img {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 8px;
}

.relatedly-carousel-prev,
.relatedly-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	background: rgba( 0, 0, 0, 0.5 );
	color: #fff;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 10;
	transition: background 0.2s ease;
}

.relatedly-carousel-prev:hover,
.relatedly-carousel-next:hover { background: rgba( 0, 0, 0, 0.8 ); }

.relatedly-carousel-prev { left: 8px; }
.relatedly-carousel-next { right: 8px; }

/* ============================================================
   End-Content Theme 5 — Timeline
   ============================================================ */

.relatedly-end-content-timeline {
	background: var( --relatedly-bg, #fff );
	padding: 20px;
}

.relatedly-timeline-items {
	position: relative;
	padding-left: 30px;
}

.relatedly-timeline-items::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var( --relatedly-line-color, #0073aa );
}

.relatedly-timeline-item {
	position: relative;
	padding: 10px 0;
	animation: relatedly-fade-in-left 0.5s ease-out both;
}

.relatedly-timeline-item::before {
	content: '';
	position: absolute;
	left: -24px;
	top: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --relatedly-line-color, #0073aa );
}

.relatedly-timeline-item .relatedly-date {
	display: block;
	font-size: 12px;
	color: var( --relatedly-date-color, #999 );
	margin-bottom: 4px;
}

/* ============================================================
   End-Content Theme 6 — Compact
   ============================================================ */

.relatedly-end-content-compact {
	background: var( --relatedly-bg, #f9f9f9 );
	padding: 16px;
}

.relatedly-end-content-compact ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.relatedly-end-content-compact li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid #e1e1e1;
	transition: background 0.2s ease;
}

.relatedly-end-content-compact li:last-child { border-bottom: none; }
.relatedly-end-content-compact li:hover { background: #f0f0f0; }

.relatedly-end-content-compact .relatedly-thumbnail img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	display: block;
}

.relatedly-end-content-compact .relatedly-meta {
	display: block;
	font-size: 11px;
	color: var( --relatedly-meta-color, #999 );
}

/* ============================================================
   Animations (replaces Animate.css CDN dependency)
   ============================================================ */

@keyframes relatedly-fade-in-up {
	from { opacity: 0; transform: translateY( 20px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

@keyframes relatedly-fade-in-left {
	from { opacity: 0; transform: translateX( -20px ); }
	to   { opacity: 1; transform: translateX( 0 ); }
}

/* ============================================================
   Responsive
   ============================================================ */

@media ( max-width: 768px ) {
	.relatedly-inline-featured { flex-direction: column; }
	.relatedly-masonry-grid { grid-template-columns: 1fr; }
	.relatedly-carousel-item { min-width: 160px; }
	.relatedly-end-content-simple-list .relatedly-item { flex-direction: column; }
}

@media ( max-width: 480px ) {
	.relatedly-inline-badge { display: block; }
	.relatedly-end-content-compact li { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media ( prefers-reduced-motion: reduce ) {
	.relatedly-inline,
	.relatedly-end-content,
	.relatedly-timeline-item,
	.relatedly-masonry-item,
	.relatedly-end-content-list li {
		animation: none;
		transition: none;
	}

	.relatedly-inline:hover,
	.relatedly-masonry-item:hover,
	.relatedly-end-content-list li:hover {
		transform: none;
	}

	.relatedly-carousel-wrapper { transition: none; }
}

/* ============================================================
   Floating Sidebar — shared
   ============================================================ */

.relatedly-floating-sidebar {
	position: fixed;
	bottom: 30px;
	width: 280px;
	max-width: 90vw;
	background: #fff;
	border: 1px solid #e1e1e1;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba( 0, 0, 0, 0.12 );
	padding: 16px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.relatedly-floating-right { right: 20px; }
.relatedly-floating-left  { left: 20px; }

.relatedly-floating-sidebar.relatedly-hidden {
	transform: translateY( 20px );
	opacity: 0;
	pointer-events: none;
}

.relatedly-floating-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	color: #999;
	padding: 0;
}

.relatedly-floating-close:hover { color: #333; }

/* ============================================================
   Floating item — shared
   ============================================================ */

.relatedly-floating-item {
	padding-top: 8px;
}

.relatedly-floating-label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var( --relatedly-label-color, #0073aa );
	margin-bottom: 6px;
}

.relatedly-floating-title {
	display: block;
	font-size: var( --relatedly-title-size, 14px );
	font-weight: 600;
	color: var( --relatedly-title-color, #333 );
	text-decoration: none;
	line-height: 1.4;
}

.relatedly-floating-title:hover { text-decoration: underline; }

.relatedly-floating-excerpt {
	display: block;
	font-size: 12px;
	color: var( --relatedly-excerpt-color, #666 );
	margin-top: 4px;
	line-height: 1.4;
}

/* ============================================================
   Variant 1 — Sidebar style (thumb left, content right)
   ============================================================ */

.relatedly-floating-v1 {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.relatedly-floating-v1 .relatedly-floating-thumb img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	display: block;
	border-radius: 4px;
}

.relatedly-floating-v1 .relatedly-floating-content { flex: 1; }

/* ============================================================
   Variant 2 — Minimal compact (label + title only)
   ============================================================ */

.relatedly-floating-v2 {
	background: var( --relatedly-bg, #f8f9fa );
	border-radius: 4px;
	padding: 10px 12px;
}

/* ============================================================
   Variant 3 — List style (small thumb + text)
   ============================================================ */

.relatedly-floating-v3 .relatedly-floating-row {
	display: flex;
	gap: 10px;
	align-items: center;
}

.relatedly-floating-v3 .relatedly-floating-thumb-sm img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

/* ============================================================
   Variant 4 — Featured (full-width hero image + text)
   ============================================================ */

.relatedly-floating-v4 .relatedly-floating-hero {
	margin: -16px -16px 12px;
	overflow: hidden;
	border-radius: 6px 6px 0 0;
}

.relatedly-floating-v4 .relatedly-floating-hero-img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

/* ============================================================
   Variant 5 — Badge style (coloured background)
   ============================================================ */

.relatedly-floating-v5 {
	background: var( --relatedly-bg, #0073aa );
	border-radius: 6px;
	padding: 12px 14px;
	margin: -16px;
}

.relatedly-floating-v5 .relatedly-floating-label {
	color: var( --relatedly-label-color, rgba( 255,255,255,0.8 ) );
}

.relatedly-floating-v5 .relatedly-floating-title {
	color: var( --relatedly-text-color, #fff );
}

/* ============================================================
   Floating sidebar — responsive
   ============================================================ */

@media ( max-width: 600px ) {
	.relatedly-floating-sidebar {
		width: calc( 100vw - 40px );
		bottom: 16px;
		right: 20px;
		left: 20px;
	}
	.relatedly-floating-right,
	.relatedly-floating-left {
		right: 20px;
		left: 20px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.relatedly-floating-sidebar { transition: none; }
}