/*
Theme Name: Raster Feedback Terminal
Description: A clean, minimalist, HTML5-responsive theme for ClassicPress 2.7+. Editorial layouts with featured images, review meta boxes, and structured post templates. Built for legibility at every screen size from mobile to 5K.
Theme URI:
Version: 5.1
License: GNU General Public License v3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: dark, light, two-column, custom-menu, responsive-layout, theme-options, featured-images
Text Domain: raster-feedback-terminal
*/

/* =============================================================
   CSS Custom Properties
   Now defined centrally in inc/css/fl-tokens.css (loaded first) —
   see that file for the full token set. This file previously kept
   its own drifted copy (missing --color-linkblog entirely).
   ============================================================= */

/* =============================================================
   Modern Reset
   ============================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
	height: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	background: var(--color-bg);
	color: var(--color-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

img, video, embed, object {
	max-width: 100%;
	height: auto;
	display: block;
}

::selection { background: var(--color-dark); color: #fff; text-shadow: none; }

/* =============================================================
   Layout
   ============================================================= */
#wrapper { min-height: 100%; display: flex; flex-direction: column; }

/* Container: full viewport width, left-pinned, no max-width */
.fl-container {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding-inline: 0;
}

/* =============================================================
   Typography
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
	color: var(--color-text);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

p { hyphens: auto; margin-bottom: 1em; line-height: 1.6; }

ul { list-style: disc; }
ol { list-style: decimal; }
li ul, li ol { margin: 0; }

a, a:link, a:visited { color: var(--color-text); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus, a:active { color: var(--color-accent); }

/* =============================================================
   Date / Time Strip (above header)
   ============================================================= */
.fl-datetime-strip {
	background: var(--color-darker);
	border-bottom: 1px solid #000;
	font-size: 0.72rem;
	color: var(--color-muted-on-dark);
	font-family: var(--font-heading);
	letter-spacing: 0.06em;
	padding: 5px 0;
	line-height: 1;
}

.fl-datetime-strip .fl-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.fl-datetime-strip .fl-mode-toggle {
	font-size: 0.85em;
	padding: 0.2em 0.5em;
	flex-shrink: 0;
}

.fl-datetime-display {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0;
}

.fl-datetime-date,
.fl-datetime-time {
	white-space: nowrap;
}

.fl-datetime-time {
	font-variant-numeric: tabular-nums;
}

/* Swatch Internet Time (.beat) — same treatment as style.css; this file
   was previously missing these two rules (drift from style.css), so the
   beat clock rendered unstyled on the homepage/archive/search contexts
   that load style-home.css instead of style.css. */
.fl-datetime-beat {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	color: var(--color-accent-on-dark);
	cursor: help;
}

.fl-datetime-beat-label {
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.8;
	letter-spacing: 0.02em;
}

@media screen and (max-width: 768px) {
	.fl-datetime-strip { display: none; }
}

/* =============================================================
   Header
   ============================================================= */
.site-header { background: var(--color-dark); }

.site-header .fl-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 0;
}

.site-branding a { color: #ddd; text-shadow: 2px 2px 1px rgba(0,0,0,0.9); text-decoration: none; }
.site-branding a:hover { color: var(--color-highlight); }

.site-title {
	font-family: var(--font-heading);
	font-size: 1.6rem;
	margin: 0;
	color: #fff;
}

.site-description {
	font-size: 0.8rem;
	color: var(--color-muted-on-dark);
	margin-top: 4px;
	font-family: var(--font-body);
	font-weight: normal;
}

/* =============================================================
   Navigation
   ============================================================= */
.selectnav { display: none; }

.main-nav {
	background: var(--color-dark);
	border-top: 1px solid var(--color-darker);
	border-bottom: 1px solid var(--color-darker);
}

.main-nav .fl-container { padding-block: 0; padding-inline: 0; }

.fl-nav-container {
	display: flex;
	align-items: stretch;
}

.main-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	flex: 1;
	margin: 0;
	padding: 0;
}

.main-nav ul li { position: relative; }

.main-nav ul li a {
	display: block;
	color: var(--color-nav-text);
	padding: 11px 20px;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-right: 1px solid var(--color-darker);
	box-shadow: 1px 0 0 var(--color-mid);
	transition: background var(--transition), color var(--transition);
}

.main-nav ul li a:hover,
.main-nav ul li:hover > a,
.main-nav ul li.current-menu-item > a {
	background: var(--color-highlight);
	color: #fff;
}

.main-nav li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-dark);
	min-width: 180px;
	z-index: 9999;
	box-shadow: var(--shadow-md);
}

.main-nav li:hover > ul { display: block; }

.main-nav li ul li a {
	border-right: none;
	border-bottom: 1px solid var(--color-darker);
	box-shadow: 0 1px 0 var(--color-mid);
	padding: 10px 16px;
	white-space: nowrap;
}

.main-nav li li ul { top: 0; left: 100%; }

/* Nav Search Bar */
.fl-nav-search {
	display: flex;
	align-items: stretch;
	flex-shrink: 0;
	border-left: 1px solid var(--color-darker);
	box-shadow: -1px 0 0 var(--color-mid);
}

.fl-nav-search-input {
	width: 0;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	color: var(--color-nav-text);
	font-family: var(--font-body);
	font-size: 0.85rem;
	outline: none;
	transition: width 0.3s ease, padding 0.3s ease, background 0.3s ease;
	-webkit-appearance: none;
}

.fl-nav-search:focus-within .fl-nav-search-input,
.fl-nav-search-input:not(:placeholder-shown) {
	width: 180px;
	padding: 0 10px;
	background: rgba(255,255,255,0.08);
}

.fl-nav-search-input::placeholder { color: var(--color-muted-on-dark); opacity: 1; }
.fl-nav-search-input::-webkit-search-decoration,
.fl-nav-search-input::-webkit-search-cancel-button { display: none; }

.fl-nav-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 100%;
	background: transparent;
	border: none;
	color: var(--color-nav-text);
	font-size: 1rem;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
	flex-shrink: 0;
}

.fl-nav-search-btn:hover,
.fl-nav-search:focus-within .fl-nav-search-btn {
	background: var(--color-highlight);
	color: #fff;
}

.fl-nav-search-btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* =============================================================
   Homepage Layout — snap-to-edge card grid
   ============================================================= */
.fl-home-wrap {
	display: grid;
	grid-template-columns: 70% 30%; /* v8.2: 70/30 content/sidebar split (55/45 read as too close to equal) */
	gap: 0;
	align-items: start;
}

/* Prevent grid blowout — min-width:0 prevents overflow; never clip with overflow:hidden */
.fl-home-wrap > main,
.fl-home-wrap > aside {
	min-width: 0;
}

.fl-home-main { background: var(--color-surface); }

/* Each article card — 16:9 image on top, text body below */
.fl-home-card {
	border-bottom: 2px solid var(--color-bg);
	background: var(--color-surface);
	overflow: hidden;
}

.fl-home-card:last-of-type { border-bottom: none; }

/* 16:9 image link — full card width */
.fl-home-card-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-darker);
	line-height: 0;
	position: relative;          /* contains the category badge */
}

.fl-home-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.4s ease;
}

.fl-home-card:hover .fl-home-card-thumb img {
	transform: scale(1.03);
	filter: brightness(0.9);
}

/* Category badge — lower-right corner of the thumbnail */
.fl-card-cat-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-size: 0.62rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	line-height: 1;
	white-space: nowrap;
	max-width: 70%;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;        /* badge doesn't block the thumb link */
	transition: background var(--transition);
}

/* Placeholder when no featured image */
.fl-thumb-placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: var(--color-mid);
}

/* Text body below image */
.fl-home-card-body {
	padding: 12px 12px 4px;
}

.fl-home-card-title {
	font-family: var(--font-heading);
	font-size: 1.1rem;
	line-height: 1.25;
	margin: 0 0 5px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 0 #fff;
}

.fl-home-card-title a {
	color: var(--color-text);
	transition: color var(--transition);
}

.fl-home-card-title a:hover { color: var(--color-accent); }

/* Subtitle */
.fl-home-card-subtitle {
	font-size: 0.8rem;
	color: var(--color-muted);
	font-style: italic;
	margin: 0 0 6px;
	padding-bottom: 7px;
	line-height: 1.4;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 1px 0 #fff;
}

/* Excerpt */
.fl-home-card-excerpt {
	font-size: 0.87rem;
	color: var(--color-text);
	line-height: 1.55;
	margin: 0;
}

/* Meta strip */
.fl-home-card-meta {
	padding: 5px 12px 10px;
	font-size: 0.72rem;
	color: var(--color-muted);
}

.fl-home-card-meta a { color: var(--color-muted); }
.fl-home-card-meta a:hover { color: var(--color-accent); }

/* Pagination */
.fl-page-nav {
	padding: 12px 0;
	background: var(--color-surface);
	border-top: 1px solid var(--color-bg);
	font-family: var(--font-heading);
}

.fl-page-nav a,
.fl-page-nav .page-numbers {
	display: inline-block;
	color: var(--color-muted);
	font-size: 0.8em;
	padding: 5px 10px;
	margin: 0 2px;
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	background: var(--color-surface);
	transition: all var(--transition);
}

.fl-page-nav a:hover { color: var(--color-text); box-shadow: var(--shadow-md); }

.fl-page-nav .page-numbers.current {
	color: #fff;
	background: var(--color-accent);
	box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* =============================================================
   Sidebar (home)
   ============================================================= */
.fl-sidebar {
	background: var(--color-dark);
	padding: 20px;
}

.fl-sidebar h3,
.fl-sidebar .fl-widget-title {
	color: #ddd;
	font-family: var(--font-heading);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.4;
	margin: 0 0 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-darker);
	text-shadow: 0 1px 0 #000;
}

/* Suppress empty widget title tags — outputs bare <h3></h3> when widget has no title */
.fl-sidebar h3:empty,
.fl-sidebar .fl-widget-title:empty {
	display: none;
}

.fl-sidebar ul { list-style: none; margin: 0 0 20px; padding: 0; }

.fl-sidebar li {
	color: var(--color-sidebar-text);
	font-size: 0.875rem;
	line-height: 1;
}

.fl-sidebar li a {
	color: var(--color-sidebar-text);
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid var(--color-darker);
	box-shadow: 0 1px 0 var(--color-mid);
	transition: all var(--transition);
}

.fl-sidebar li a:hover {
	color: #fff;
	padding-left: 8px;
	background: rgba(0,0,0,0.25);
}

.fl-sidebar .textwidget { color: var(--color-sidebar-text); font-size: 0.875rem; line-height: 1.5; }

.fl-sidebar .tagcloud a {
	display: inline-block;
	color: var(--color-sidebar-text);
	font-size: 0.8rem !important;
	padding: 3px 8px;
	margin: 2px;
	border: 1px solid var(--color-mid);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.fl-sidebar .tagcloud a:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Sidebar search form */
.fl-sidebar .fl-search-form {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
}

.fl-sidebar .fl-search-input {
	flex: 1;
	padding: 7px 10px;
	background: rgba(255,255,255,0.08);
	border: 1px solid var(--color-mid);
	border-radius: var(--radius);
	color: #fff;
	font-family: var(--font-body);
	font-size: 0.875rem;
}

.fl-sidebar .fl-search-input:focus {
	outline: none;
	border-color: var(--color-accent);
	background: rgba(255,255,255,0.12);
}

.fl-sidebar .fl-search-btn {
	padding: 7px 12px;
	background: var(--color-accent);
	border: none;
	border-radius: var(--radius);
	color: #fff;
	cursor: pointer;
	font-family: var(--font-heading);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	transition: background var(--transition);
}

.fl-sidebar .fl-search-btn:hover { background: var(--color-accent-hover); }

/* Calendar */
#wp-calendar {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}

#wp-calendar caption {
	padding: 5px;
	font-size: 0.9em;
	background: #ddd;
	color: var(--color-text);
	margin-bottom: 6px;
}

#wp-calendar th,
#wp-calendar td {
	padding: 4px 2px;
	text-align: center;
	color: #fff;
	border: 1px solid #999;
}

#wp-calendar tfoot tr td,
#wp-calendar td.pad { border: none; }

#wp-calendar td a { color: var(--color-accent); }
#wp-calendar td a:hover { color: #fff; }

/* =============================================================
   No Posts
   ============================================================= */
.fl-no-posts {
	padding: 40px 24px;
	text-align: center;
	color: var(--color-muted);
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
	background: var(--color-dark);
	border-top: 1px solid var(--color-darker);
	padding: 20px 0;
	text-align: center;
	color: #ddd;
	font-size: 0.82rem;
	line-height: 1.5;
	margin-top: auto;
}

.site-footer a { color: #ccc; transition: color var(--transition); }
.site-footer a:hover { color: var(--color-highlight); }

/* =============================================================
   Responsive Embeds
   ============================================================= */
.fl-embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	margin: 1em 0;
}

.fl-embed-container iframe,
.fl-embed-container object,
.fl-embed-container embed,
.fl-embed-container video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* =============================================================
   WordPress helpers
   ============================================================= */
.wp-caption {
	max-width: 100%;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
	background: var(--color-surface);
	padding: 5px 5px 8px;
	text-align: center;
}

.wp-caption img { display: block; max-width: 100%; height: auto; margin: 0 auto; }

.wp-caption p.wp-caption-text {
	font-size: 0.78rem;
	color: var(--color-muted);
	margin: 4px 0 0;
	padding: 0 4px;
}

/* =============================================================
/* =============================================================
   Section Banners — Feedback + The Loop
   ============================================================= */

/* Shared banner strip */
.fl-section-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px 8px;
	border-bottom: 1px solid var(--color-darker);
}

.fl-section-banner-title {
	font-family: var(--font-heading);
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.fl-section-banner-sub {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	text-transform: none;
	opacity: 0.65;
	line-height: 1;
}

/* Feedback banner — dark with live-indicator pulse */
.fl-section-banner--feedback {
	background: var(--color-darker);
	border-bottom-color: #000;
}

.fl-section-banner--feedback .fl-section-banner-title {
	color: #fff;
}

.fl-section-banner--feedback .fl-section-banner-sub {
	color: #bbb;
}

/* Live pulse dot */
.fl-section-banner-pulse {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #e63946;
	flex-shrink: 0;
	box-shadow: 0 0 0 0 rgba(230,57,70,0.6);
	animation: fl-pulse 2s ease-in-out infinite;
}

@keyframes fl-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(230,57,70,0.6); }
	50%  { box-shadow: 0 0 0 6px rgba(230,57,70,0);   }
	100% { box-shadow: 0 0 0 0   rgba(230,57,70,0);   }
}

/* The Loop banner — mid-dark, editorial tone */
.fl-section-banner--loop {
	background: var(--color-dark);
	border-top: 3px solid var(--color-darker);
	border-bottom-color: var(--color-darker);
	margin-top: 0;
}

.fl-section-banner--loop .fl-section-banner-title {
	color: var(--color-nav-text);
}

.fl-section-banner--loop .fl-section-banner-sub {
	color: var(--color-muted-on-dark);
}

/* Search results banner — same dark treatment as Loop, with em highlighting
   the query so it reads "Search: <query>" without visual noise. */
.fl-section-banner--search {
	background: var(--color-dark);
	border-top: 3px solid var(--color-darker);
	border-bottom-color: var(--color-darker);
	margin-top: 0;
}

.fl-section-banner--search .fl-section-banner-title {
	color: var(--color-nav-text);
}

.fl-section-banner--search .fl-section-banner-title em {
	color: var(--color-accent);
	font-style: normal;
}

.fl-section-banner--search .fl-section-banner-sub {
	color: var(--color-muted-on-dark);
}

/* Search-again form container — sits between the banner and the grid,
   matches the horizontal padding of the grid cards. */
.fl-search-again {
	padding: 16px 16px 0;
	background: var(--color-surface);
}

.fl-search-again .fl-search-form {
	margin: 0;
}

/* ── Latest posts grid (below format cards) ──────────────────── */
.fl-latest-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	width: 100%;
	background: var(--color-surface);
	border-top: 1px solid var(--color-bg);
}

/* Grid items must not expand beyond their column */
.fl-latest-grid .fl-home-card {
	min-width: 0;
	border-right: 2px solid var(--color-bg);
	border-bottom: 2px solid var(--color-bg);
}

.fl-latest-grid .fl-home-card:nth-child(even) {
	border-right: none;
}

/* Tighter sizing within the narrower grid cells */
.fl-latest-grid .fl-home-card-thumb {
	aspect-ratio: 16 / 9;
}

.fl-latest-grid .fl-home-card-body {
	padding: 10px 12px 4px;
}

.fl-latest-grid .fl-home-card-title {
	font-size: 0.9rem;
}

.fl-latest-grid .fl-home-card-subtitle,
.fl-latest-grid .fl-home-card-excerpt {
	font-size: 0.8rem;
}

/* =============================================================
   Responsive
   ============================================================= */
@media screen and (max-width: 900px) {
	/* All home wrap variants: drop sidebar to single column */
	.fl-home-wrap,
	.fl-format-hero-wrap {
		grid-template-columns: 1fr;
	}

	.fl-latest-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (max-width: 768px) {
	/* Latest grid: single column */
	.fl-latest-grid {
		grid-template-columns: 1fr;
	}

	.fl-latest-grid .fl-home-card {
		border-right: none;
	}
}

/* Small: mobile — full overrides in style-mobile.css */
@media screen and (max-width: 600px) {
	.site-header .fl-container { padding: 0 14px; }
}

/* =============================================================
   Back to Top Button
   Duplicated from style.css — homepage loads this sheet instead.
   ============================================================= */
.fl-back-to-top,
.fl-back-to-top:link,
.fl-back-to-top:visited {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	background: var(--color-dark);
	color: #fff;
	font-size: 1.4rem;
	line-height: 40px;
	text-align: center;
	border-radius: var(--radius);
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition), background var(--transition);
	z-index: 8000;
	box-shadow: var(--shadow-md);
}

.fl-back-to-top.fl-btt-visible {
	opacity: 1;
	pointer-events: auto;
}

.fl-back-to-top:hover {
	background: var(--color-accent);
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Hero Featured Post (.fl-hero-*)
   ═══════════════════════════════════════════════════════════════════════════════ */

.fl-hero-section {
	margin-bottom: 60px;
	border-bottom: 3px solid var(--color-border);
	padding-bottom: 40px;
}

.fl-hero-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
}

.fl-hero-visual {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--color-surface);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fl-hero-quote-wrap,
.fl-hero-quote-wrap:link,
.fl-hero-quote-wrap:visited,
.fl-hero-video-wrap,
.fl-hero-video-wrap:link,
.fl-hero-video-wrap:visited,
.fl-hero-aside-wrap,
.fl-hero-aside-wrap:link,
.fl-hero-aside-wrap:visited,
.fl-hero-image-wrap,
.fl-hero-image-wrap:link,
.fl-hero-image-wrap:visited,
.fl-hero-default-wrap,
.fl-hero-default-wrap:link,
.fl-hero-default-wrap:visited {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.fl-hero-quote-wrap,
.fl-hero-quote-wrap:link,
.fl-hero-quote-wrap:visited {
	background: #2c3e50;
	color: white;
	padding: 40px;
	text-align: center;
	flex-direction: column;
}

.fl-hero-quote-text {
	font-size: 1.5rem;
	font-style: italic;
	margin: 0 0 20px;
	line-height: 1.6;
}

.fl-hero-quote-cite {
	font-size: 0.9rem;
	font-style: normal;
	color: #bbb;
}

.fl-hero-video-wrap,
.fl-hero-image-wrap,
.fl-hero-default-wrap {
	background: #000;
}

.fl-hero-video-thumb,
.fl-hero-image-img,
.fl-hero-default-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fl-hero-video-play {
	position: absolute;
	font-size: 4rem;
	color: white;
	opacity: 0.9;
	transition: opacity 0.3s;
}

.fl-hero-video-wrap:hover .fl-hero-video-play {
	opacity: 1;
}

.fl-hero-video-placeholder,
.fl-hero-image-placeholder,
.fl-hero-default-placeholder {
	font-size: 4rem;
	opacity: 0.5;
}

.fl-hero-aside-wrap {
	background: #f9f9f9;
	padding: 40px;
	text-align: center;
}

.fl-hero-aside-text {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0;
	line-height: 1.4;
	color: var(--color-text);
}

.fl-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	position: relative;
	z-index: 2;
	padding: 20px;
}

.fl-hero-title {
	font-size: 2rem;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}

.fl-hero-title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.3s;
}

.fl-hero-title a:hover {
	color: var(--color-accent);
}

.fl-hero-excerpt {
	font-size: 1rem;
	color: var(--color-muted);
	margin: 0;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fl-hero-meta {
	display: flex;
	gap: 16px;
	font-size: 0.85rem;
	color: var(--color-muted);
	flex-wrap: wrap;
}

.fl-hero-date {
	font-family: var(--font-mono);
}

.fl-hero-author {
	font-style: italic;
}

.fl-hero-readmore {
	display: inline-block;
	color: var(--color-accent);
	text-decoration: none;
	font-weight: bold;
	margin-top: 8px;
	transition: color 0.3s;
}

.fl-hero-readmore:hover {
	color: var(--color-accent-hover);
}

.fl-hero-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	background: var(--color-accent);
	color: white;
	padding: 6px 12px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 3;
}

.fl-hero-tag--quote {
	background: #667eea;
}

.fl-hero-tag--video {
	background: #e74c3c;
}

.fl-hero-tag--aside {
	background: #3498db;
}

.fl-hero-tag--image {
	background: #9b59b6;
}

.fl-hero-tag--status {
	background: #1abc9c;
}

.fl-hero-tag--link {
	background: #f39c12;
}

.fl-hero-tag--audio {
	background: #e91e63;
}

.fl-hero-tag--chat {
	background: #00bcd4;
}

.fl-hero-tag--gallery {
	background: #ff6b6b;
}

/* ── Reviews Hero Section (.fl-reviews-hero-*) ─────────────────────────────── */

.fl-reviews-hero-section {
	margin-bottom: 60px;
	border-bottom: 3px solid var(--color-border);
	padding-bottom: 40px;
}

.fl-reviews-hero-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	position: relative;
}

.fl-reviews-hero-visual {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: var(--color-surface);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fl-reviews-hero-image-wrap,
.fl-reviews-hero-image-wrap:link,
.fl-reviews-hero-image-wrap:visited {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	background: #000;
}

.fl-reviews-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fl-reviews-hero-image-placeholder {
	font-size: 4rem;
	opacity: 0.5;
}

.fl-reviews-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	position: relative;
	z-index: 2;
	padding: 20px;
}

.fl-reviews-hero-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fl-reviews-hero-title {
	font-size: 2rem;
	font-weight: bold;
	margin: 0;
	line-height: 1.2;
}

.fl-reviews-hero-title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color 0.3s;
}

.fl-reviews-hero-title a:hover {
	color: var(--color-accent);
}

.fl-reviews-hero-category {
	font-size: 0.85rem;
	color: var(--color-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Review score and rating display */
.fl-reviews-hero-rating {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 16px;
	background: var(--color-surface);
	border-left: 4px solid var(--color-accent);
	border-radius: 4px;
}

.fl-reviews-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.fl-reviews-score-value {
	font-size: 2.5rem;
	font-weight: bold;
	color: var(--color-text);
	line-height: 1;
}

.fl-reviews-score-max {
	font-size: 0.9rem;
	color: var(--color-muted);
	font-weight: 600;
}

.fl-reviews-score-stars {
	font-size: 1.2rem;
	color: #f1c40f;
	letter-spacing: 2px;
}

.fl-reviews-verdict {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	flex: 1;
}

/* Review excerpt and metadata */
.fl-reviews-hero-excerpt {
	font-size: 1rem;
	color: var(--color-muted);
	margin: 0;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.fl-reviews-hero-meta {
	display: flex;
	gap: 16px;
	font-size: 0.85rem;
	color: var(--color-muted);
	flex-wrap: wrap;
}

.fl-reviews-hero-date {
	font-family: var(--font-mono);
}

.fl-reviews-hero-author {
	font-style: italic;
}

.fl-reviews-hero-readmore {
	display: inline-block;
	color: var(--color-accent);
	text-decoration: none;
	font-weight: bold;
	margin-top: 8px;
	transition: color 0.3s;
	align-self: flex-start;
}

.fl-reviews-hero-readmore:hover {
	color: var(--color-accent-hover);
}

/* ── Mobile hero responsive ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.fl-hero-post {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0;
	}

	.fl-hero-visual {
		aspect-ratio: 16 / 10;
		order: -1;
	}

	.fl-hero-body {
		padding: 0;
	}

	.fl-hero-title {
		font-size: 1.4rem;
	}

	.fl-hero-excerpt {
		-webkit-line-clamp: 2;
	}

	.fl-hero-quote-wrap {
		padding: 30px 20px;
	}

	.fl-hero-aside-wrap {
		padding: 30px 20px;
	}

	.fl-hero-quote-text {
		font-size: 1.2rem;
	}

	.fl-hero-aside-text {
		font-size: 1.4rem;
	}

	/* Reviews hero mobile */
	.fl-reviews-hero-post {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 0;
	}

	.fl-reviews-hero-visual {
		aspect-ratio: 16 / 10;
		order: -1;
	}

	.fl-reviews-hero-body {
		padding: 0;
	}

	.fl-reviews-hero-title {
		font-size: 1.4rem;
	}

	.fl-reviews-hero-rating {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.fl-reviews-score {
		flex-direction: row;
		align-items: center;
		gap: 12px;
	}

	.fl-reviews-hero-excerpt {
		-webkit-line-clamp: 2;
	}
}

/* ── Sponsored Hero (.fl-sponsored-hero-*) ─────────────────────────────────────
   High-contrast yellow/black treatment, deliberately distinct from the rest
   of the theme's palette — this is a paid-placement signal, not an editorial
   one, and should read as unmistakably different at a glance. Renders only
   when raster_feedback_terminal_active_sponsored_post() returns a post (Sticky + the
   "fl_is_sponsored" checkbox + the "sponsored" category, all three). */

.fl-sponsored-hero {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 0;
	background: #ffd400;
	border: 4px solid #000;
	margin-bottom: 24px;
	overflow: hidden;
	position: relative;
}

.fl-sponsored-hero-thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	line-height: 0;
	border-right: 4px solid #000;
}

.fl-sponsored-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(0.15) contrast(1.05);
}

.fl-sponsored-hero-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #ffd400;
	background: #000;
}

/* Corner ribbon-style tag, always visible regardless of image presence */
.fl-sponsored-hero-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: #000;
	color: #ffd400;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 12px;
	line-height: 1;
	border: 2px solid #ffd400;
}

.fl-sponsored-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 28px 32px;
	color: #000;
}

.fl-sponsored-hero-eyebrow {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #000;
}

.fl-sponsored-hero-title {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.fl-sponsored-hero-title a {
	color: #000;
	text-decoration: none;
}

.fl-sponsored-hero-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.fl-sponsored-hero-excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: #1a1a1a;
	margin: 0;
}

.fl-sponsored-hero-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: #000;
	color: #ffd400;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 20px;
	margin-top: 6px;
	transition: background 0.2s ease, color 0.2s ease;
}

.fl-sponsored-hero-readmore:hover {
	background: #1a1a1a;
}

/* ── Linkblog Hero (.fl-linkblog-hero-*) ───────────────────────────────────────
   Editorial-content treatment for CP Link Roundup's featured roundup post.
   Deliberately distinct from Sponsored Hero: no black border/outline (that
   framing is reserved for paid placement), single deep-green surface instead
   of a high-contrast two-tone split. Renders only when
   raster_feedback_terminal_active_linkblog_post() returns a post (the "Link Roundup"
   checkbox + the "linkblog" category, both — see CPLR_Roundup::is_roundup()
   in the CP Link Roundup plugin, which is the single source of truth for
   this gate). No Sticky requirement, unlike Sponsored — this is a recurring
   content type, not a one-off spotlight. */

.fl-linkblog-hero {
	display: grid;
	grid-template-columns: 40% 60%;
	gap: 0;
	background: var(--color-linkblog);
	margin-bottom: 24px;
	overflow: hidden;
	position: relative;
	border-radius: 4px;
}

.fl-linkblog-hero-thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #10291d;
	line-height: 0;
}

.fl-linkblog-hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fl-linkblog-hero-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #ffffff;
	background: #10291d;
}

.fl-linkblog-hero-tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 5px 12px;
	line-height: 1;
	border-radius: 2px;
}

.fl-linkblog-hero-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 28px 32px;
	color: #ffffff;
}

.fl-linkblog-hero-eyebrow {
	font-family: var(--font-heading);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
}

.fl-linkblog-hero-title {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.2;
	margin: 0;
}

.fl-linkblog-hero-title a {
	color: #ffffff;
	text-decoration: none;
}

.fl-linkblog-hero-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.fl-linkblog-hero-excerpt {
	font-size: 1rem;
	line-height: 1.6;
	color: #d9e6de; /* light tint of the green, not pure white — 8.6:1 on --color-linkblog */
	margin: 0;
}

.fl-linkblog-hero-readmore {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	background: #ffffff;
	color: var(--color-linkblog);
	text-decoration: none;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 10px 20px;
	margin-top: 6px;
	border-radius: 3px;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.fl-linkblog-hero-readmore:hover {
	opacity: 0.88;
}

/* ── Mobile responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.fl-sponsored-hero {
		grid-template-columns: 1fr;
	}

	.fl-sponsored-hero-thumb {
		border-right: none;
		border-bottom: 4px solid #000;
	}

	.fl-sponsored-hero-body {
		padding: 20px;
	}

	.fl-sponsored-hero-title {
		font-size: 1.4rem;
	}

	.fl-linkblog-hero {
		grid-template-columns: 1fr;
	}

	.fl-linkblog-hero-body {
		padding: 20px;
	}

	.fl-linkblog-hero-title {
		font-size: 1.4rem;
	}
}

/* ── /links archive card badge (.fl-card-linkblog-badge) ───────────────────────
   Small inline pill on archive-linkblog.php cards, sitting in the card
   body above the title rather than overlaying the thumbnail. Uses the
   same green token as the Linkblog Hero for a consistent, recognizable
   signal wherever a Link Roundup post appears across the site. */

.fl-card-linkblog-badge {
	display: inline-block;
	background: var(--color-linkblog);
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 9px;
	line-height: 1;
	border-radius: 2px;
	margin-bottom: 8px;
}