/*
Theme Name:  Web Wikkels Private Theme
Theme URI:   https://github.com/webwikkels/blogs-private-WP-theme.git
Author:      Web Wikkels
Author URI:  https://github.com/webwikkels
Description: Clean, fast, extensible base theme for SEO-focused content blogs. Minimal CSS, semantic HTML, system fonts, Rank Math compatible.
Version:     2.24.1
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: prive
Tags:        blog, news, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, threaded-comments, translation-ready
*/

/* ==========================================================================
   DESIGN TOKENS
   Edit these variables to retheme the entire site.
   ========================================================================== */

:root {
	/* Brand */
	--color-accent:        #1a1a2e;
	--color-accent-hover:  #16213e;
	--color-accent-light:  #e8e8f0;

	/* Surfaces */
	--color-bg:            #ffffff;
	--color-surface:       #f8f8f8;
	--color-surface-2:     #f0f0f0;
	--color-border:        #e2e2e2;

	/* Text */
	--color-text:          #1a1a1a;
	--color-text-muted:    #6b6b6b;
	--color-text-light:    #9a9a9a;
	--color-heading:       #111111;

	/* Content markers (fldiv) */
	--fldiv-color-list-marker: #0c7453;

	/* Status */
	--color-draft:         #b45309;
	--color-draft-bg:      #fef3c7;
	--fdiv-color-status:   #8a5a00;

	/* Foreground on an accent-filled control, and code blocks */
	--fdiv-color-on-accent: #ffffff;
	--fdiv-code-bg:         var(--color-heading);
	--fdiv-code-text:       #e8e8e8;
	--fdiv-code-border:     transparent;

	/* Dark palette. Design Settings overrides these; the dark blocks below apply them. */
	--fdiv-dark-color-accent:       #8ab4f8;
	--fdiv-dark-color-accent-hover: #aecbfa;
	--fdiv-dark-color-text:         #e4e4e4;
	--fdiv-dark-color-text-muted:   #a3a3a3;
	--fdiv-dark-color-heading:      #f5f5f5;
	--fdiv-dark-color-bg:           #121212;
	--fdiv-dark-color-surface:      #1e1e1e;
	--fdiv-dark-color-border:       #3a3a3a;
	--fdiv-dark-color-list-marker:  #4fd1a1;

	color-scheme: light;

	/* Typography */
	--font-sans:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
	                Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue",
	                Arial, sans-serif;
	--font-serif:   Georgia, "Times New Roman", Times, serif;
	--font-mono:    ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
	                Consolas, "DejaVu Sans Mono", monospace;

	/* Scale */
	--text-xs:   0.75rem;
	--text-sm:   0.875rem;
	--text-base: 1rem;
	--text-md:   1.0625rem;
	--text-lg:   1.125rem;
	--text-xl:   1.25rem;
	--text-2xl:  1.5rem;
	--text-3xl:  1.875rem;
	--text-4xl:  2.25rem;
	--text-5xl:  3rem;

	/* Line heights */
	--leading-tight:  1.2;
	--leading-snug:   1.35;
	--leading-normal: 1.5;
	--leading-relaxed:1.7;
	--leading-loose:  1.9;

	/* Spacing */
	--space-1:  0.25rem;
	--space-2:  0.5rem;
	--space-3:  0.75rem;
	--space-4:  1rem;
	--space-5:  1.25rem;
	--space-6:  1.5rem;
	--space-8:  2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Layout */
	--container:       72rem;    /* 1152px max content width */
	--container-text:  44rem;    /* ~700px optimal reading column */
	--container-wide:  86rem;
	--gutter:          clamp(1rem, 4vw, 2rem);
	--fdiv-header-offset: 3.5rem; /* .site-header__inner min-height — single source for TOC/anchor scroll offset */

	/* Radius */
	--radius-sm:  0.25rem;
	--radius:     0.375rem;
	--radius-md:  0.5rem;
	--radius-lg:  0.75rem;
	--radius-xl:  1rem;
	--radius-full:9999px;

	/* Shadows */
	--shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow:     0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

	/* Transitions */
	--transition: 150ms ease;
	--transition-md: 250ms ease;
}

/* ==========================================================================
   DARK MODE
   Applied when the reader picked Dark (data-theme="dark" on <html>), or when
   no explicit choice is stored and the OS prefers dark. The second block is
   also what a visitor without JavaScript gets. Both blocks must stay
   identical: they map the dark palette onto the live tokens and derive the
   secondary tokens from it, so they follow any saved dark value.
   ========================================================================== */

:root[data-theme="dark"] {
	--color-accent:           var(--fdiv-dark-color-accent);
	--color-accent-hover:     var(--fdiv-dark-color-accent-hover);
	--color-text:             var(--fdiv-dark-color-text);
	--color-text-muted:       var(--fdiv-dark-color-text-muted);
	--color-heading:          var(--fdiv-dark-color-heading);
	--color-bg:               var(--fdiv-dark-color-bg);
	--color-surface:          var(--fdiv-dark-color-surface);
	--color-border:           var(--fdiv-dark-color-border);
	--fldiv-color-list-marker: var(--fdiv-dark-color-list-marker);
	--color-accent-light:     color-mix(in srgb, var(--fdiv-dark-color-accent) 16%, var(--fdiv-dark-color-bg));
	--color-surface-2:        color-mix(in srgb, var(--fdiv-dark-color-surface) 90%, var(--fdiv-dark-color-text));
	--color-text-light:       color-mix(in srgb, var(--fdiv-dark-color-text-muted) 80%, var(--fdiv-dark-color-bg));
	--fdiv-color-status:      #e0a84a;
	--fdiv-color-on-accent:   var(--fdiv-dark-color-bg);
	--fdiv-code-bg:           var(--fdiv-dark-color-surface);
	--fdiv-code-text:         var(--fdiv-dark-color-text);
	--fdiv-code-border:       var(--fdiv-dark-color-border);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-accent:           var(--fdiv-dark-color-accent);
		--color-accent-hover:     var(--fdiv-dark-color-accent-hover);
		--color-text:             var(--fdiv-dark-color-text);
		--color-text-muted:       var(--fdiv-dark-color-text-muted);
		--color-heading:          var(--fdiv-dark-color-heading);
		--color-bg:               var(--fdiv-dark-color-bg);
		--color-surface:          var(--fdiv-dark-color-surface);
		--color-border:           var(--fdiv-dark-color-border);
		--fldiv-color-list-marker: var(--fdiv-dark-color-list-marker);
		--color-accent-light:     color-mix(in srgb, var(--fdiv-dark-color-accent) 16%, var(--fdiv-dark-color-bg));
		--color-surface-2:        color-mix(in srgb, var(--fdiv-dark-color-surface) 90%, var(--fdiv-dark-color-text));
		--color-text-light:       color-mix(in srgb, var(--fdiv-dark-color-text-muted) 80%, var(--fdiv-dark-color-bg));
		--fdiv-color-status:      #e0a84a;
		--fdiv-color-on-accent:   var(--fdiv-dark-color-bg);
		--fdiv-code-bg:           var(--fdiv-dark-color-surface);
		--fdiv-code-text:         var(--fdiv-dark-color-text);
		--fdiv-code-border:       var(--fdiv-dark-color-border);
		color-scheme: dark;
	}
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Prevents horizontal scroll caused by .alignfull (100vw + scrollbar). */
	overflow-x: clip;
}

img, picture, video, canvas, svg {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	line-height: var(--leading-tight);
	font-weight: 700;
	margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl)); }
h3 { font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
	margin: 0 0 var(--space-5);
}

a {
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color var(--transition), text-decoration-color var(--transition);
}

a:hover {
	color: var(--color-link-hover);
	text-decoration-color: currentColor;
}

a:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

strong, b { font-weight: 700; }
em, i     { font-style: italic; }

small { font-size: var(--text-sm); }

abbr[title] {
	text-decoration: underline dotted;
	cursor: help;
}

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--text {
	max-width: var(--container-text);
}

.container--wide {
	max-width: var(--container-wide);
}

/* Two-column content + sidebar grid */
.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-12);
}

@media (min-width: 960px) {
	.content-area--has-sidebar {
		grid-template-columns: 1fr 18rem;
	}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--space-4);
	z-index: 9999;
	padding: var(--space-2) var(--space-4);
	background: var(--color-accent);
	color: var(--fdiv-color-on-accent);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: top var(--transition);
}

.skip-link:focus {
	top: 0;
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

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

.site-header {
	position: sticky;
	top: 0;
	z-index: 200;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: var(--fdiv-header-offset);
	padding-block: var(--space-3);
}

/* Branding */
.site-branding {
	flex-shrink: 0;
}

.site-branding a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
}

.site-logo img {
	height: 2rem;
	width: auto;
}

.site-title {
	font-size: var(--text-xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-heading);
	line-height: 1;
	margin: 0;
}

.site-description {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1;
}

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

.nav-primary {
	display: flex;
	align-items: center;
	margin-left: auto;
}

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

.nav-primary > ul > li {
	position: relative;
}

.nav-primary a {
	display: block;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius);
	transition: color var(--transition), background var(--transition);
}

.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a {
	color: var(--color-accent);
	background: var(--color-accent-light);
}

/* Dropdown */
.nav-primary .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 300;
	min-width: 13rem;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	padding: var(--space-2) 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-md), visibility var(--transition-md),
	            transform var(--transition-md);
}

.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-primary .sub-menu a {
	border-radius: 0;
	padding: var(--space-2) var(--space-5);
	font-size: var(--text-sm);
}

.nav-primary .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* Third-level failsafe: keep on screen */
@media (min-width: 960px) {
	.nav-primary .sub-menu .sub-menu {
		left: auto;
		right: 100%;
	}
}

/* Mobile toggle */
.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	padding: 0;
	color: var(--color-text);
	flex-shrink: 0;
}

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

.nav-toggle__icon,
.nav-toggle__icon::before,
.nav-toggle__icon::after {
	display: block;
	width: 1.125rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--transition-md), opacity var(--transition);
}

.nav-toggle__icon {
	position: relative;
	margin: auto;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__icon::before { top: -5px; }
.nav-toggle__icon::after  { top: 5px; }

/* Open state */
.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
	transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 959px) {
	.nav-toggle {
		display: flex;
		margin-left: auto;
	}

	.nav-primary {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		box-shadow: var(--shadow-md);
		overflow: hidden;
		max-height: 0;
		visibility: hidden;
		transition: max-height var(--transition-md), visibility var(--transition-md);
	}

	.nav-primary.is-open {
		max-height: 100vh;
		visibility: visible;
		overflow-y: auto;
		/* Prevent scroll chaining to the page body while the mobile menu is open. */
		overscroll-behavior-y: contain;
	}

	.nav-primary ul {
		flex-direction: column;
		padding: var(--space-3) var(--gutter);
		gap: var(--space-1);
	}

	.nav-primary .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		background: var(--color-surface);
		border-radius: var(--radius);
		padding: var(--space-1) 0;
		margin-top: var(--space-1);
	}
}

/* Color mode button: System, Light, Dark. Shown only once the head script has
   marked the page as scripted, so a visitor without JavaScript never sees a
   control that cannot work; their page follows the OS through the dark block. */
.fdiv-mode-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: calc(var(--space-2) - var(--space-6));
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
	padding: 0;
	color: var(--color-text);
	flex-shrink: 0;
}

.fdiv-js .fdiv-mode-toggle {
	display: inline-flex;
}

.fdiv-mode-toggle:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.fdiv-mode-toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.fdiv-mode-toggle__icon {
	display: none;
	width: 1.125rem;
	height: 1.125rem;
}

:root:not([data-theme]) .fdiv-mode-toggle__icon--system,
:root[data-theme="light"] .fdiv-mode-toggle__icon--light,
:root[data-theme="dark"] .fdiv-mode-toggle__icon--dark {
	display: block;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

/* Sized for a narrow screen first: below 640px the trail reads at body size, in both the compact
   and the full mobile trail. The desktop size is restored at the 640px breakpoint below. */
.breadcrumbs {
	padding-block: var(--space-4);
	font-size: var(--text-base);
	color: var(--color-text-muted);
	border-bottom: 1px solid var(--color-border);
}

/* Every template except the glossary already calls the trail from inside a .container, so the
   helper's own container must not add a second gutter or re-narrow the row there. Left alone at
   the top level, where it is the only container the trail has. */
.container .breadcrumbs .container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	align-items: center;
}

/* A long single label wraps inside its own item instead of pushing the row past the viewport;
   the flex row itself already wraps between items. */
.breadcrumbs__item {
	min-width: 0;
	overflow-wrap: anywhere;
}

.breadcrumbs__separator {
	margin-inline-end: var(--space-2);
	color: var(--color-text-light);
}

.breadcrumbs a {
	color: var(--color-text-muted);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--color-accent);
}

/* Compact single-post trail. Below 640px one item is shown — the category the post is filed
   under, or Home when it has none — and the separators go with the items they belong to, so a
   shortened trail never opens with a dangling one. display:none also removes the hidden links
   from the tab order, so what is reachable never disagrees with what is visible. */
.breadcrumbs--compact .breadcrumbs__item {
	display: none;
}

.breadcrumbs--compact .breadcrumbs__item--compact {
	display: list-item;
}

.breadcrumbs--compact .breadcrumbs__separator {
	display: none;
}

@media (min-width: 640px) {
	.breadcrumbs--compact .breadcrumbs__item {
		display: list-item;
	}

	.breadcrumbs--compact .breadcrumbs__separator {
		display: inline;
	}

	.breadcrumbs {
		font-size: var(--text-sm);
	}
}

/* ==========================================================================
   MAIN CONTENT AREA
   ========================================================================== */

.site-main {
	padding-block: var(--space-12);
}

/* ==========================================================================
   POST CARD (archive loop)
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
}

@media (min-width: 640px) {
	.posts-grid--cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.posts-grid--cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card {
	display: flex;
	flex-direction: column;
}

.post-card__thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--color-surface);
	aspect-ratio: 16 / 9;
	margin-bottom: var(--space-5);
}

.post-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-md);
}

.post-card:hover .post-card__thumb img {
	transform: scale(1.03);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.post-card__category a {
	color: var(--color-accent);
	text-decoration: none;
	font-weight: 700;
}

.post-card__title {
	font-size: clamp(var(--text-lg), 2vw, var(--text-2xl));
	margin-bottom: var(--space-3);
	line-height: var(--leading-snug);
}

.post-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.post-card__title a:hover {
	color: var(--color-accent);
}

.post-card__excerpt {
	color: var(--color-text-muted);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-4);
	flex: 1;
}

.post-card__footer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.post-card__author-avatar img {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: var(--radius-full);
	object-fit: cover;
}

/* Featured post (hero card) */
.post-card--featured {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 640px) {
	.post-card--featured {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.post-card--featured .post-card__thumb {
		margin-bottom: 0;
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

.single-header {
	padding-block: var(--space-10) var(--space-8);
	max-width: var(--container-text);
}

.single-header__category a {
	font-weight: 700;
	color: var(--color-accent);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--text-xs);
}

.single-header__title {
	font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
	line-height: var(--leading-tight);
	margin-bottom: var(--space-6);
}

.single-header__excerpt {
	font-size: var(--text-xl);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-6);
}

.single-header__byline {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.single-featured-image {
	margin-bottom: var(--space-10);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-featured-image img {
	width: 100%;
	height: auto;
}

/* Entry content typography */
.entry-content {
	max-width: var(--container-text);
}

.entry-content > * + * {
	margin-top: var(--space-5);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: var(--space-10);
	margin-bottom: var(--space-3);
}

.entry-content a {
	text-decoration-color: currentColor;
}

.entry-content ul,
.entry-content ol {
	padding-left: var(--space-6);
	margin: 0 0 var(--space-5);
}

.entry-content li {
	margin-bottom: var(--space-2);
}

.entry-content li::marker {
	color: var(--fldiv-color-list-marker);
}

.entry-content blockquote {
	margin: var(--space-8) 0;
	padding: var(--space-5) var(--space-8);
	border-left: 4px solid var(--color-accent);
	background: var(--color-surface);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-size: var(--text-xl);
	font-style: italic;
	color: var(--color-text-muted);
}

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

.entry-content pre {
	background: var(--fdiv-code-bg);
	color: var(--fdiv-code-text);
	box-shadow: inset 0 0 0 1px var(--fdiv-code-border);
	padding: var(--space-5) var(--space-6);
	border-radius: var(--radius-md);
	overflow-x: auto;
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	margin: var(--space-6) 0;
}

.entry-content code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--color-surface-2);
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
}

.entry-content pre code {
	background: none;
	padding: 0;
	font-size: inherit;
}

.entry-content hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-10) 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
	margin: var(--space-6) 0;
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
}

.entry-content th {
	background: var(--color-surface);
	font-weight: 700;
}

.entry-content img {
	border-radius: var(--radius-md);
}

.entry-content .wp-caption {
	max-width: 100%;
}

.entry-content .wp-caption-text {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-align: center;
	margin-top: var(--space-2);
}

.img-caption {
    text-align: center;
    font-size: 0.75em;
}

/* ==========================================================================
   POST FOOTER / TAGS / AUTHOR BOX
   ========================================================================== */

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block: var(--space-8);
}

.post-tag {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-decoration: none;
	font-weight: 500;
	transition: background var(--transition), color var(--transition);
}

.post-tag:hover {
	background: var(--color-accent-light);
	color: var(--color-accent);
}

.author-box {
	display: flex;
	align-items: flex-start;
	gap: var(--space-5);
	padding: var(--space-6);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	margin-block: var(--space-10);
}

.author-box__avatar img {
	width: 37.5rem;
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.author-box__name {
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

.author-box__badge {
	display: inline-block;
	margin-left: var(--space-2);
	padding: 0.15em 0.6em;
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-accent);
	background: var(--color-accent-light);
	border-radius: var(--radius-full);
	vertical-align: middle;
}

.author-box__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.author-box__bio-wrap {
	position: relative;
	max-height: 4.5em;
	overflow: hidden;
	transition: max-height var(--transition);
}

.author-box__bio-wrap::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2.5em;
	background: linear-gradient( to bottom, transparent, var(--color-surface) );
	pointer-events: none;
	transition: opacity var(--transition);
}

.author-box__bio-wrap.is-expanded {
	max-height: 60rem;
}

.author-box__bio-wrap.is-expanded::after {
	opacity: 0;
}

.author-box__bio {
	white-space: pre-line;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.author-box__toggle {
	display: inline-block;
	margin-top: var(--space-3);
	background: none;
	border: none;
	padding: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	cursor: pointer;
	text-decoration: underline;
}

.author-box__toggle:hover {
	color: var(--color-accent-hover, var(--color-accent));
}

/* ==========================================================================
   RELATED POSTS
   ========================================================================== */

.related-posts {
	padding-block: var(--space-10);
	border-top: 1px solid var(--color-border);
}

.related-posts__title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-6);
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination,
.post-navigation {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-border);
}

.pagination .nav-links,
.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.pagination .page-numbers,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--color-text);
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition);
}

.pagination .page-numbers:hover,
.post-navigation a:hover {
	background: var(--color-accent-light);
	border-color: var(--color-accent-light);
	color: var(--color-accent);
}

.pagination .page-numbers.current {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--fdiv-color-on-accent);
}

.post-navigation .nav-links {
	justify-content: space-between;
}

/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.widget {
	margin-bottom: var(--space-8);
}

.widget-title {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-accent);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li {
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-3);
	font-size: var(--text-sm);
}

.widget li:last-child {
	border-bottom: none;
}

.widget a {
	color: var(--color-text);
	text-decoration: none;
}

.widget a:hover {
	color: var(--color-accent);
}

.toc-list__item--h3 {
	padding-left: var(--space-4);
}

.toc-list a {
	overflow-wrap: anywhere;
}

/* Non-color-only current-section cue: border + weight, not color alone. */
.toc-list a[aria-current="location"] {
	padding-left: var(--space-3);
	border-left: 3px solid var(--color-accent);
	color: var(--color-accent);
	font-weight: 700;
}

/* Account for the sticky header (and, logged in, the admin bar) so a
   fragment jump — native, keyboard, or JS-assisted — doesn't land a heading
   underneath either bar. Native anchor navigation needs no JS for this. */
.entry-content h2[id],
.entry-content h3[id] {
	scroll-margin-top: calc(var(--fdiv-header-offset) + var(--space-4));
}

body.admin-bar .entry-content h2[id],
body.admin-bar .entry-content h3[id] {
	scroll-margin-top: calc(var(--fdiv-header-offset) + var(--space-4) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .entry-content h2[id],
	body.admin-bar .entry-content h3[id] {
		scroll-margin-top: calc(var(--fdiv-header-offset) + var(--space-4) + 46px);
	}
}

/* ==========================================================================
   SINGLE-POST SIDEBAR READING REGION
   ==========================================================================

   Supersedes the previous "only the TOC widget is sticky" rule. That rule
   pinned one widget and let the reference widgets scroll away, so the two
   lists a reader actually consults while reading were gone for most of the
   article. The WHOLE configured stack is now one pinned, viewport-bounded
   region on single posts only.

   Three elements, three jobs:

   1. `.fldiv-sidebar-column` (template-parts/sidebar/sidebar-default.php,
      single posts only) is the travel area. `position: sticky` only ever
      travels inside its own parent's box, and it releases at that box's
      bottom — which is the only mechanism here that stops the stack pinning
      through the author box, related posts and comments. Its height is set by
      assets/js/heading-navigator.js to end at the end of the article body;
      with no script it falls back to `auto`, i.e. the full grid row, which is
      the previous behaviour and never overlaps anything.
   2. `.fldiv-sidebar-reading` is the pinned, bounded scroller. One region, so
      there are no nested competing sticky elements to fight each other.
   3. `--fldiv-sidebar-pinned` is the single source of truth for "is this
      layout side by side". The breakpoint is declared here, once; the script
      reads this custom property instead of repeating a media query it could
      get wrong. */

.fldiv-sidebar-column {
	--fldiv-sidebar-pinned: 0;
}

@media (min-width: 960px) {
	.fldiv-sidebar-column {
		--fldiv-sidebar-pinned: 1;
		align-self: start;
	}

	.fldiv-sidebar-column > .fldiv-sidebar-reading {
		position: sticky;
		top: calc(var(--fdiv-header-offset) + var(--space-6));
		max-height: calc(100vh - var(--fdiv-header-offset) - var(--space-10));
		overflow-y: auto;
		/* `auto`, never `contain`: reaching the inner edge must keep handing the
		   remaining scroll to the page, which is what makes a wheel or touch that
		   started over the sidebar behave like ordinary page scrolling once the
		   list is exhausted. */
		overscroll-behavior-y: auto;
		scrollbar-gutter: stable;
	}

	body.admin-bar .fldiv-sidebar-column > .fldiv-sidebar-reading {
		top: calc(var(--fdiv-header-offset) + var(--space-6) + 32px);
		max-height: calc(100vh - var(--fdiv-header-offset) - var(--space-10) - 32px);
	}

	/* RELEASED, past the end of the article body.

	   While the article is being read the region above is pinned AND bounded to
	   one viewport, and its overflow is reached by scrolling inside it. Past the
	   end of the article that clipping is the wrong contract: the reader is done
	   with the article and simply keeps scrolling the page, and a stack taller
	   than the viewport still had a permanently clipped tail that ordinary page
	   scrolling could never reach — releasing the sticky pin alone did not help,
	   because the box it unpinned was still a bounded scroller.

	   So both constraints go at once: no pin, no max-height, no inner scroller.
	   The whole stack becomes an ordinary block in the document, its remaining
	   items are revealed by continuing to scroll the page, and nothing is
	   overlapped because the column is still its own grid item.
	   assets/js/heading-navigator.js owns the boundary and the one padding-top it
	   sets to keep the stack exactly where the reader last saw it; with no script
	   this state never occurs and the previous behaviour is unchanged. */
	.fldiv-sidebar-column--released > .fldiv-sidebar-reading,
	body.admin-bar .fldiv-sidebar-column--released > .fldiv-sidebar-reading {
		position: static;
		top: auto;
		max-height: none;
		overflow-y: visible;
	}
}

/* The region is scrolled by keyboard, so it must be focusable (tabindex="0" in
   the template) and its focus must be visible. Without this a keyboard reader
   can reach the region but cannot see that they have. */
.fldiv-sidebar-reading:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Quiet reading-position emphasis on a reference whose actual body occurrence
   is in the part of the article being read (assets/js/heading-navigator.js).

   Deliberately NOT a recommendation, a ranking or a selection: no badge, no
   reordering, no icon, no motion. A tinted plate and a left edge, the same
   language the table of contents already uses for the current section, so the
   two read as one "you are here" cue rather than two competing signals.
   Colour is never the only carrier — the edge and the weight change too. */
.fdiv-referenced-list__item--in-view {
	background: var(--color-surface);
	box-shadow: inset 3px 0 0 0 var(--color-accent);
	padding-left: var(--space-3);
}

.fdiv-referenced-list__item--in-view .fdiv-referenced-list__link {
	font-weight: 600;
}

/* The plate appears and disappears as the reader moves through the article, so
   it fades rather than snapping — and does not, for anyone who asked for less
   motion. Nothing here ever animates continuously. */
@media (prefers-reduced-motion: no-preference) {
	.fdiv-referenced-list__item {
		transition: background-color 120ms linear, box-shadow 120ms linear;
	}
}

/* Single-post reference widgets (referenced articles / referenced services,
   inc/single-post-widgets.php). */

/* h2 upgrade for these widgets' titles (used together with the existing
   .widget-title styling below) — h2's UA-default margin-top would otherwise
   reintroduce spacing the div-based .widget-title convention never had. */
.fdiv-single-widget__title {
	margin-top: 0;
}

.fdiv-referenced-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.fdiv-referenced-list__thumb {
	flex: 0 0 auto;
	line-height: 0;
}

.fdiv-referenced-list__thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--radius-sm);
}

.fdiv-referenced-list__link,
.fdiv-referenced-list__label {
	flex: 1 1 auto;
}

.fdiv-referenced-list__item--unresolved .fdiv-referenced-list__label {
	color: var(--color-text-muted);
}

/* Reviewer-only marker: dark-yellow, matching the plugin's existing
   admin-only Service-link marker color (inc/servicelink-shortcode.php).

   The color is declared TWICE on purpose. A linked marker is an <a> inside
   .widget, and the generic `.widget a` rule above is (0,1,1) — it outranks a
   lone `.fdiv-single-widget__status` (0,1,0), so a linked pencil silently
   rendered in the ordinary body-text color and lost the one visual cue that
   marks it as a reviewer diagnostic. `.widget a.fdiv-single-widget__status`
   is (0,2,1) and wins without !important and without touching any other
   widget link; the class-only rule below still covers the unlinked <span>
   form. Same reasoning for :hover, where `.widget a:hover` (0,1,2) would
   otherwise repaint the marker with the accent color. */
.fdiv-single-widget__status,
.widget a.fdiv-single-widget__status {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-left: var(--space-2);
	color: var(--fdiv-color-status);
	text-decoration: none;
	font-size: var(--text-xs);
	white-space: nowrap;
}

.fdiv-single-widget__status:hover,
.widget a.fdiv-single-widget__status:hover,
.widget a.fdiv-single-widget__status:focus-visible {
	color: var(--fdiv-color-status);
	text-decoration: underline;
}

/* Keyboard focus must stay visible on the marker itself — it is a small
   inline target and the theme's link styling gives it no other affordance. */
.widget a.fdiv-single-widget__status:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The theme's global `img, picture, video, canvas, svg` reset sets width:100%
   and height:auto. Inside this flex row that made the 13x13 pencil expand to
   the whole available line (measured at 129x129 in a real browser), pushing
   the status text out and turning a small marker into a giant icon. The
   element's own width/height attributes lose to that rule, so the intended
   size has to be stated in CSS. */
.fdiv-single-widget__pencil {
	flex: 0 0 auto;
	display: inline-block;
	width: 13px;
	height: 13px;
}

/* ==========================================================================
   RESPONSIVE TABLE-OF-CONTENTS PLACEMENT
   ==========================================================================

   ONE table of contents is ever visible. The stacked layout gets the
   collapsible one the server rendered above the article prose
   (prive_prebody_heading_navigator(), inc/helpers.php); the side-by-side
   layout gets the expanded one inside the sidebar stack. `display: none` is
   what enforces "one": a hidden subtree is out of the tab order and out of the
   accessibility tree, so the reader never meets a second copy — of the list,
   of its links, or of its focus stops. Both are built from the same heading
   list and the same admin-configured widget, so switching width switches which
   node is shown and nothing else.

   The other two reference widgets are NOT relocated: on a stacked layout they
   simply flow below the article like any other widget. */

.fldiv-prebody-toc {
	margin-block: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
}

/* Styled like a link, but a real disclosure control: it is keyboard-operable
   and correctly announced as expandable because it IS a <summary>. */
.fldiv-prebody-toc__summary {
	cursor: pointer;
	color: var(--color-accent);
	font-weight: 600;
	font-size: var(--text-sm);
}

.fldiv-prebody-toc__summary:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.fldiv-prebody-toc .toc-list {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
}

.fldiv-prebody-toc .toc-list__item {
	padding-block: var(--space-2);
	font-size: var(--text-sm);
}

.fldiv-prebody-toc .toc-list a {
	color: var(--color-text);
	text-decoration: none;
}

@media (min-width: 960px) {
	.fldiv-prebody-toc {
		display: none;
	}
}

/* The sidebar's own table of contents is hidden on a stacked layout ONLY when
   this request actually emitted the pre-body one — the `fldiv-has-prebody-toc`
   class is set from that rendering fact in
   template-parts/sidebar/sidebar-default.php, not from a second guess at the
   widget assignment.

   Unconditionally, this rule used to hide the sidebar copy whether or not a
   pre-body copy existed, so any request where the pre-body TOC was not emitted
   left a phone with NO section navigation at all while the desktop layout still
   showed one. A visible list lower down the page is worse than a disclosure
   above the prose, and far better than nothing. */
@media (max-width: 959.98px) {
	.sidebar.fldiv-has-prebody-toc .widget_fdiv_toc_widget {
		display: none;
	}
}

/* ==========================================================================
   PAGE TEMPLATES
   ========================================================================== */

/* Shared page hero */
.page-hero {
	padding-block: var(--space-12) var(--space-10);
	border-bottom: 1px solid var(--color-border);
}

.page-hero__title {
	font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
	margin-bottom: var(--space-4);
}

.page-hero__desc {
	font-size: var(--text-xl);
	color: var(--color-text-muted);
	max-width: 40rem;
	margin: 0;
}

.blogp-category-hero {
	display: block;
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: var(--space-6);
}

.page-hero__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-6);
}

.page-hero__image img {
	display: block;
	width: 100%;
	max-height: 320px;
	object-fit: cover;
}

.page-hero__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-4);
	margin-top: var(--space-4);
}

.page-hero__nav-link {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.page-hero__nav-link:hover {
	text-decoration: underline;
}

.page-hero__nav-link--up {
	display: inline-block;
	margin-block: var(--space-8);
}

/* Home hero — the page content owns the H1 and lead paragraph, so the
   typography below is applied through .fldiv-home-hero__intro as well. */
.home-hero__title {
	font-size: clamp(var(--text-4xl), 6vw, 4rem);
	line-height: var(--leading-tight);
	letter-spacing: -0.03em;
	margin-bottom: var(--space-5);
}

.fldiv-home-hero {
	padding-block: var(--space-16) var(--space-12);
}

.fldiv-home-hero__grid {
	display: grid;
	gap: var(--space-10);
	align-items: center;
}

@media (min-width: 800px) {
	.fldiv-home-hero__grid {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.fldiv-home-hero__intro > h1 {
	font-size: clamp(var(--text-4xl), 6vw, 4rem);
	line-height: var(--leading-tight);
	letter-spacing: -0.03em;
	margin-bottom: var(--space-5);
}

.fldiv-home-hero__intro > p {
	font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	max-width: 38rem;
}

.fldiv-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

.fldiv-home-hero__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
}

.fldiv-home-hero__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Home sections — vertical rhythm between hero, topics and articles. */
.fldiv-home-section {
	padding-block: var(--space-12);
}

.fldiv-home-section--alt {
	background: var(--color-surface);
}

.fldiv-home-section__grid {
	margin-top: var(--space-10);
}

.fldiv-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.fldiv-section-head .section-title {
	padding-bottom: 0;
	border-bottom: 0;
}

.fldiv-section-head__link {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.fldiv-section-head__link:hover {
	text-decoration: underline;
}

/* Home: featured topics */
.fldiv-topic-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.fldiv-topic-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.fldiv-topic-grid { grid-template-columns: repeat(4, 1fr); }
}

.fldiv-topic-card {
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.fldiv-topic-card__title {
	font-size: var(--text-lg);
	margin-bottom: var(--space-3);
}

.fldiv-topic-card__title a {
	color: var(--color-heading);
	text-decoration: none;
}

.fldiv-topic-card__title a:hover {
	color: var(--color-accent);
}

.fldiv-topic-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	flex: 1;
	margin-bottom: var(--space-4);
}

.fldiv-topic-card__count {
	margin-bottom: 0;
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

/* Home: closing editorial statement + explore CTA (footer transition) */
.fldiv-home-trust {
	padding-block: var(--space-12);
	background: var(--color-surface);
	border-top: 1px solid var(--color-border);
	text-align: center;
}

.fldiv-home-trust__title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-4);
}

.fldiv-home-trust__lead {
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-6);
}

.fldiv-home-trust__links,
.fldiv-home-trust__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin-bottom: var(--space-6);
}

.fldiv-home-trust__cta {
	margin-bottom: 0;
}

/* Section titles */
.section-title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-8);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

/* Category archive (the product's listing page — "PLP").
   The hero reuses .page-hero and the listing reuses .posts-grid / .post-card, so
   category pages open exactly like every other collection page in the theme. */
.fldiv-category-children {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-3);
	margin-block: var(--space-8) var(--space-4);
}

.fldiv-category-children__label {
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.fldiv-category-children__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.fldiv-category-children__list a {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
}

.fldiv-category-children__list a:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.fldiv-category-disclosure {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-bottom: var(--space-8);
}

/* .product-card__rating-stars is retained deliberately: the [prive_rating]
   shortcode (inc/shortcodes.php) renders its stars with this class inside
   article bodies. The .product-card / .plp-grid and .pdp-* blocks that also
   used it were removed with page-plp.php and page-pdp.php. */
.product-card__rating-stars {
	color: #f59e0b;
	letter-spacing: 1px;
}

.read-more {
    float: right;
    color: var(--color-accent);
}

.read-more:hover {
    color: var(--color-accent-hover);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), box-shadow var(--transition);
	white-space: nowrap;
}

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

.btn--primary {
	background: var(--color-accent);
	color: var(--fdiv-color-on-accent);
	border-color: var(--color-accent);
}

.btn--primary:hover {
	background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	color: var(--fdiv-color-on-accent);
}

.btn--secondary {
	background: transparent;
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.btn--secondary:hover {
	background: var(--color-accent);
	color: var(--fdiv-color-on-accent);
}

.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

.btn--ghost:hover {
	background: var(--color-surface);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
}

.btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}

.form-label {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-text);
}

.form-input,
.form-textarea,
.form-select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg);
	color: var(--color-text);
	font-size: var(--text-base);
	transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
	outline: none;
	border-color: var(--color-accent);
	/* Static fallback for browsers that do not support color-mix() (Safari < 16.2). */
	box-shadow: 0 0 0 3px rgba(26, 26, 46, 0.15);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.form-textarea {
	min-height: 8rem;
	resize: vertical;
}

/* Search form */
.search-form {
	display: flex;
	gap: 0;
}

.search-field {
	flex: 1;
	border-radius: var(--radius) 0 0 var(--radius);
	border-right: none;
}

.search-submit {
	padding: var(--space-3) var(--space-5);
	background: var(--color-accent);
	color: var(--fdiv-color-on-accent);
	border: 1px solid var(--color-accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: 600;
	transition: background var(--transition);
}

.search-submit:hover {
	background: var(--color-accent-hover);
}

/* ==========================================================================
   GLOSSARY
   ========================================================================== */

.glossary-index {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-8);
}

.glossary-index a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-text-muted);
	text-decoration: none;
	transition: background var(--transition), color var(--transition);
}

.glossary-index a:hover,
.glossary-index a.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--fdiv-color-on-accent);
}

.glossary-section {
	margin-bottom: var(--space-10);
}

.glossary-letter {
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--color-accent);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-accent);
}

.glossary-term {
	margin-bottom: var(--space-6);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.glossary-term__name {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: var(--space-2);
}

.glossary-term__def {
	font-size: var(--text-base);
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   FAQ ACCORDION
   Renders the plugin's [faq] shortcode (template-parts/content/faq.php).
   Native <details>/<summary> — no JS. Overridable via --fldiv-faq-* tokens.
   ========================================================================== */

.fldiv-faq {
	margin-block: var(--space-8);
}

.fldiv-faq__heading {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-4);
}

.fldiv-faq__item {
	border: 1px solid var(--fldiv-faq-border, var(--color-border));
	border-radius: var(--radius-md);
	margin-bottom: var(--space-3);
	padding-inline: var(--space-5);
	background: var(--fldiv-faq-surface, transparent);
}

/* The <summary> is the clickable question row. list-style/marker resets remove the default
   disclosure triangle so we can supply our own rotating chevron. */
.fldiv-faq__q {
	cursor: pointer;
	font-weight: 700;
	color: var(--fldiv-faq-question-color, var(--color-heading));
	padding-block: var(--space-4);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
}

.fldiv-faq__q::-webkit-details-marker {
	display: none;
}

.fldiv-faq__q::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--transition);
	flex: none;
}

.fldiv-faq__item[open] > .fldiv-faq__q::after {
	transform: rotate(-135deg);
}

.fldiv-faq__q:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.fldiv-faq__a {
	color: var(--fldiv-faq-answer-color, var(--color-text-muted));
	padding-bottom: var(--space-4);
}

.fldiv-faq__a > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   404 / NO RESULTS
   ========================================================================== */

.error-page {
	text-align: center;
	padding-block: var(--space-20);
}

.error-page__code {
	font-size: 6rem;
	font-weight: 800;
	color: var(--color-surface-2);
	line-height: 1;
	margin-bottom: var(--space-4);
}

.error-page__title {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-4);
}

.error-page__desc {
	color: var(--color-text-muted);
	margin-bottom: var(--space-8);
}

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

.site-footer {
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
	padding-block: var(--space-12);
}

.footer-inner {
	display: grid;
	gap: var(--space-10);
}

@media (min-width: 640px) {
	.footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 960px) {
	.footer-inner {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

.footer-brand__logo {
	margin-bottom: var(--space-4);
}

.footer-brand__logo img {
	height: 1.75rem;
	width: auto;
}

.footer-brand__name {
	font-size: var(--text-xl);
	font-weight: 800;
	color: var(--color-heading);
	margin-bottom: var(--space-2);
}

.footer-brand__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

.footer-col__title {
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li {
	margin-bottom: var(--space-3);
}

.footer-col a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
	transition: color var(--transition);
}

.footer-col a:hover {
	color: var(--color-accent);
}

.footer-bottom {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-6);
	margin-top: var(--space-10);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   COMMENTS
   ========================================================================== */

.comments-area {
	padding-top: var(--space-10);
	border-top: 1px solid var(--color-border);
	max-width: var(--container-text);
}

.comments-title {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-6);
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment {
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.comment-author img {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-full);
}

.comment-author__name {
	font-weight: 700;
	font-size: var(--text-sm);
}

.comment-date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.reply a {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-accent);
	text-decoration: none;
}

.comment-reply-title {
	font-size: var(--text-xl);
	margin-bottom: var(--space-5);
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* .visually-hidden is intentionally omitted — use .screen-reader-text which
   is the standard WordPress class and is defined in the Accessibility section. */

.text-center  { text-align: center; }
.text-muted   { color: var(--color-text-muted); }
.text-sm      { font-size: var(--text-sm); }

.mt-auto { margin-top: auto; }
.mb-0    { margin-bottom: 0; }
.mb-8    { margin-bottom: var(--space-8); }

/* Page content padding wrappers — replaces inline style attributes. */
.page-body    { padding-block: var(--space-10); }
.page-body--lg { padding-block: var(--space-12); }

/* Alignment classes (classic editor / blocks) */
.alignleft   { float: left; margin: 0 var(--space-5) var(--space-4) 0; }
.alignright  { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { display: block; margin-inline: auto; }
/* overflow-x: clip on body prevents horizontal scroll from the 100vw trick. */
.alignfull   { width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide   { width: min(100%, calc(var(--container) + var(--space-16)));
               margin-inline: auto; }

/* ==========================================================================
   NOTICE / CALLOUT (used by [prive_notice] shortcode and disclosure template)
   ========================================================================== */

.notice {
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-md);
	border-left: 4px solid currentColor;
	font-size: var(--text-base);
}

.notice p:last-child { margin-bottom: 0; }

.notice--info    { background: #eff6ff; color: #1d4ed8; }
.notice--warning { background: #fffbeb; color: #92400e; }
.notice--success { background: #f0fdf4; color: #166534; }
.notice--danger  { background: #fef2f2; color: #991b1b; }

/* Footer nav inline list */
.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav__list a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	text-decoration: none;
}

.footer-nav__list a:hover {
	color: var(--color-accent);
}

/* Inline rating (shortcode) */
.inline-rating {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
}

/* Draft badge (editors previewing unpublished posts/pages) */
.prive-draft-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-right: var(--space-2);
	padding: 0 var(--space-2);
	border-radius: var(--radius-full);
	background: var(--color-draft-bg);
	color: var(--color-draft);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	vertical-align: middle;
}

/* ==========================================================================
   PRINT
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.sidebar,
	.nav-primary,
	.post-navigation,
	.related-posts,
	.comments-area { display: none; }

	.entry-content { max-width: 100%; }
	a[href]::after { content: " (" attr(href) ")"; }
}