@charset "UTF-8";
/*!
Theme Name:     Unyson+ Theme
Theme URI:      http://lastimosa.com.ph/unysonplus
Description:    Bootstrap 5 WordPress theme for the Unyson+ framework. Requires the UnysonPlus plugin (the Unyson+ framework) to be installed and active — without it the theme’s features are disabled and an admin notice prompts you to install it.
Requires Plugins: unysonplus
Version: 2.5.39
Author:         Jon-Michael Lastimosa
Author URI:     http://jon-michael.lastimosa.com.ph
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    unysonplus
Tags:           bootstrap, unyson, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ========================================================================
   1. DESIGN TOKENS
   Defaults; overridden at runtime by inc/includes/theme-vars.php which
   emits a higher-priority <style id="unysonplus-theme-vars"> block.
   ======================================================================== */
:root {
	--color-primary:      #0d6efd;
	--color-accent:       #6610f2;
	--color-text:         #212529;
	--color-muted:        #6c757d;
	--color-bg:           #ffffff;
	--color-border:       rgba(0, 0, 0, 0.1);

	--font-body:          system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-heading:       inherit;

	--header-bg:          transparent; /* unset Main Header Background = no fill; set a colour to override */
	--header-min-height:  80px;
	--header-sticky-bg:   rgba(255, 255, 255, 0.95);
	--header-shadow:      0 2px 8px rgba(0, 0, 0, 0.08);
	--header-z:           1030;

	--topbar-bg:          #212529;
	--topbar-color:       #ffffff;
	--topbar-pad-y:       0.4rem;

	--footer-bg:          #1a1a1a;
	--footer-color:       #cccccc;
	--footer-link-color:  #ffffff;
	--footer-pad-top:     3rem;
	--footer-pad-bottom:  1.5rem;

	--menu-link-color:    var(--color-text);
	--menu-link-hover:    var(--color-primary);
	--menu-item-bg:       transparent;
	--menu-item-hover-bg: rgba(0, 0, 0, 0.05);
	--menu-link-pad-x:    1rem;
	--menu-link-pad-y:    0.5rem;
	--menu-dropdown-bg:   #ffffff;
	--menu-dropdown-link: var(--color-text);
	--menu-dropdown-link-hover: var(--menu-dropdown-link); /* readable dark on the light dropdown; was --menu-link-hover (top-level filled-pill white → unreadable on the dropdown bg). Preset can override for a coloured hover. */
	--menu-dropdown-item-hover-bg: rgba(0, 0, 0, 0.05);
	--menu-dropdown-width: 220px;
	--menu-dropdown-radius: var(--radius);
	--menu-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);

	--drawer-width:       min(360px, 85vw);
	--drawer-bg:          #ffffff;
	--drawer-color:       var(--color-text);
	--drawer-z:           1050;
	--scrim-bg:           rgba(0, 0, 0, 0.5);

	--admin-bar-offset:   0px;

	--site-max-width:     1320px;
	--transition-fast:    150ms ease;
	--transition-base:    250ms ease;
	--radius:             0.25rem;

	/* Auto-stack step for floating buttons sharing the same corner.
	   JS in assets/js/layout.js sets --stack-position: 1, 2, … on
	   subsequent buttons; corner-modifier rules read it. */
	--stack-step:         56px;
}

body.admin-bar { --admin-bar-offset: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --admin-bar-offset: 46px; }
}

/* ========================================================================
   2. ELEMENT DEFAULTS
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
	font-family: var(--font-body);
	/* Body size / rhythm from Typography (revert = keep the UA/Bootstrap default when unset). */
	font-size: var(--body-font-size, revert);
	line-height: var(--body-line-height, revert);
	letter-spacing: var(--body-letter-spacing, revert);
	color: var(--color-text);
	background-color: var(--color-bg);
}

img, video, svg { max-width: 100%; height: auto; }

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

a { color: var(--color-primary); text-decoration: none; }
/* NO global hover underline — it was over-broad (nav, footer, social, buttons all inherited it).
   CONTENT/prose links get their hover underline from the dedicated Body Link Underline rule below
   (`--body-link-decoration-hover`, Typography → Body Link, default underline); chrome + buttons
   signal hover by colour/fill. Keeps modern chrome clean with no per-site override. */
/* Global link hover: body-link tokens only — NEVER the menu token (--menu-link-hover
   is white on dark-header sites, which made every prose/card link vanish on hover).
   The menu styles its own hover via the scoped .menu rules. */
a:not(.btn):hover, a:not(.btn):focus-visible { color: var(--body-link-hover, var(--color-primary, #0d6efd)); }
/* Body/content link colors (Typography → Body Link Color). Fall back to the base
   link color so an unset value keeps current behavior.
   Scoped to `:not([class])` so ONLY bare prose links get the body-link color —
   the whole page-builder lives inside `.entry-content`, so an unscoped
   `.entry-content a` would override every classed link (buttons like
   `.toplist-offers__btn`, `.btn`, shortcode links, etc.). Per the clean-DOM
   convention, genuine prose links carry no class, so they still match. */
.entry-content :is(p, li) a:not([class]) {
	color: var(--body-link-color, var(--color-primary));
	text-decoration: var(--body-link-decoration, underline); /* accessible default — 'hover'/'never' via Typography → Body Link Underline */
}
.entry-content :is(p, li) a:not([class]):is(:hover, :focus-visible) {
	color: var(--body-link-hover, var(--body-link-color, var(--body-link-hover, var(--color-primary, #0d6efd))));
	text-decoration: var(--body-link-decoration-hover, underline);
}
a.btn:hover, a.btn:focus-visible { text-decoration: none; }

/* Keyboard focus ring — color/width configurable via General → Base (default 2px primary). */
:focus-visible {
	outline: var(--focus-width, 2px) solid var(--focus-color, var(--color-primary));
	outline-offset: 2px;
}

/* Text selection (General → Base) — vars unset ⇒ browser default.
   The fallback MUST be the system selection colors: an unset custom property with
   no fallback makes the whole declaration invalid, which resolves background-color
   to `transparent` — i.e. an INVISIBLE selection, not the browser default. Falling
   back to the `Highlight` / `HighlightText` system colors restores the real native
   selection when no custom color is set. */
::selection { background-color: var(--selection-bg, Highlight); color: var(--selection-color, HighlightText); }
::-moz-selection { background-color: var(--selection-bg, Highlight); color: var(--selection-color, HighlightText); }

/* Custom scrollbar (General → Base) — opt-in via body.custom-scrollbar so default
   scrollbars are untouched unless a Scrollbar Color is set. */
body.custom-scrollbar { scrollbar-color: var(--scrollbar-color) transparent; scrollbar-width: thin; }
body.custom-scrollbar ::-webkit-scrollbar { width: var(--scrollbar-width, 10px); height: var(--scrollbar-width, 10px); }
body.custom-scrollbar ::-webkit-scrollbar-track { background: transparent; }
body.custom-scrollbar ::-webkit-scrollbar-thumb { background: var(--scrollbar-color); border-radius: 10px; }

/* Content protection (General → Base) — opt-in deterrent. `body.up-noselect`
   disables text selection site-wide EXCEPT in form fields, so search / logins /
   comments stay usable. Right-click + copy blocking are handled in theme.js
   (body.up-nocontext / body.up-nocopy). Deterrent only — content is still
   accessible via View Source / Reader mode / DevTools. */
body.up-noselect,
body.up-noselect *:not(input):not(textarea):not(select):not([contenteditable]) {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
body.up-noselect input,
body.up-noselect textarea,
body.up-noselect select,
body.up-noselect [contenteditable] {
	-webkit-user-select: text;
	user-select: text;
}

/* Container Width (General → Layout → Container Width). Governs the site's BOXED
   content width — the page-builder grid's Fixed-Width container (.fw-container, used
   by boxed sections + the non-builder content wrapper) AND Bootstrap's .container.
   The grid gives .fw-container a FIXED per-breakpoint width (750/970/1170px), which
   ignores this setting; we switch it to width:100% + a responsive max-width so the
   option actually applies — and can WIDEN past the grid default, not just shrink.
   Full-Width containers (*-fluid) are intentionally left at 100%. Each var is emitted
   only when the option is set (theme-vars.php); the fallbacks keep the current look
   when blank. `body …` (0,1,1) outranks the grid's `.fw-container` (0,1,0) at any
   breakpoint, regardless of stylesheet order. */
body .fw-container,
body .container {
	width: 100%;
	/* "Container Width" is the CONTENT width (like Tailwind's max-w-*): the gutter lives OUTSIDE it,
	   so the content is EXACTLY the value set — not that value minus the padding. (Was
	   `max-width: var(--container-max-desktop)`, which — with box-sizing:border-box — let the
	   left/right gutter eat ~2*gutter off the content, making e.g. a 1280/max-w-7xl setting render
	   ~1216 of content.) The gutter only shrinks the content once the viewport < width + 2*gutter. */
	max-width: calc(var(--container-max-desktop, 1170px) + 2 * var(--container-gutter, clamp(1.25rem, 3vw, 2rem)));
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
	body .fw-container,
	body .container { max-width: calc(var(--container-max-tablet, 45rem) + 2 * var(--container-gutter, clamp(1.25rem, 3vw, 2rem))); }
}
@media (max-width: 767.98px) {
	body .fw-container,
	body .container { max-width: var(--container-max-mobile, 100%); }
}
/* Header Container Width (Header → Layout) — lets the header bar use its OWN content width,
   independent of the site-wide Container Width the body/footer use (a common source pattern:
   a header on `max-w-7xl px-8` renders narrower content than a footer on `max-w-7xl`). When
   --header-container-max is unset it falls back to the global, so the header is unchanged. */
body .site-header .fw-container {
	max-width: calc(var(--header-container-max, var(--container-max-desktop, 1170px)) + 2 * var(--container-gutter, clamp(1.25rem, 3vw, 2rem)));
}

/* Headings — driven by Typography tokens (Preset scale or per-heading overrides).
   Each property `revert`s to the UA / Bootstrap default when its token is unset, so
   an untouched install looks exactly as before; the per-heading family falls back to
   the global --font-heading (Heading Font / preset). */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
h1 { font-family: var(--h1-font-family, var(--font-heading)); font-size: var(--h1-font-size, revert); line-height: var(--h1-line-height, revert); letter-spacing: var(--h1-letter-spacing, revert); font-weight: var(--h1-font-weight, 500); color: var(--h1-color, revert); text-transform: var(--h1-text-transform, revert); }
h2 { font-family: var(--h2-font-family, var(--font-heading)); font-size: var(--h2-font-size, revert); line-height: var(--h2-line-height, revert); letter-spacing: var(--h2-letter-spacing, revert); font-weight: var(--h2-font-weight, 500); color: var(--h2-color, revert); text-transform: var(--h2-text-transform, revert); }
h3 { font-family: var(--h3-font-family, var(--font-heading)); font-size: var(--h3-font-size, revert); line-height: var(--h3-line-height, revert); letter-spacing: var(--h3-letter-spacing, revert); font-weight: var(--h3-font-weight, 500); color: var(--h3-color, revert); text-transform: var(--h3-text-transform, revert); }
h4 { font-family: var(--h4-font-family, var(--font-heading)); font-size: var(--h4-font-size, revert); line-height: var(--h4-line-height, revert); letter-spacing: var(--h4-letter-spacing, revert); font-weight: var(--h4-font-weight, 500); color: var(--h4-color, revert); text-transform: var(--h4-text-transform, revert); }
h5 { font-family: var(--h5-font-family, var(--font-heading)); font-size: var(--h5-font-size, revert); line-height: var(--h5-line-height, revert); letter-spacing: var(--h5-letter-spacing, revert); font-weight: var(--h5-font-weight, 500); color: var(--h5-color, revert); text-transform: var(--h5-text-transform, revert); }
h6 { font-family: var(--h6-font-family, var(--font-heading)); font-size: var(--h6-font-size, revert); line-height: var(--h6-line-height, revert); letter-spacing: var(--h6-letter-spacing, revert); font-weight: var(--h6-font-weight, 500); color: var(--h6-color, revert); text-transform: var(--h6-text-transform, revert); }

/* ========================================================================
   3. WORDPRESS REQUIRED CLASSES
   ======================================================================== */

/* --- Accessibility --- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: var(--radius);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
}
.skip-link:focus { left: 5px; top: 5px; }

/* --- Image alignment --- */
.alignleft   { float: left;  margin: 0.25rem 1.5rem 1rem 0; }
.alignright  { float: right; margin: 0.25rem 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignnone   { display: block; }
.alignwide   { max-width: min(1200px, 100%); margin-left: auto; margin-right: auto; }
.alignfull   { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* --- Captions --- */
.wp-caption { max-width: 100%; margin-bottom: 1.5rem; }
.wp-caption img { display: block; max-width: 100%; height: auto; }
.wp-caption-text,
.wp-caption .wp-caption-text {
	font-size: 0.875rem;
	color: var(--color-muted);
	padding-top: 0.5rem;
	text-align: center;
}

/* --- Galleries --- */
.gallery { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.gallery-columns-1 { grid-template-columns: 1fr; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }
.gallery-item { text-align: center; }
.gallery-item img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.gallery-caption { font-size: 0.8125rem; color: var(--color-muted); padding-top: 0.25rem; }

/* --- WP sticky post + comment user classes --- */
.sticky        { /* hook for sticky post styling — kept minimal by default */ }
.bypostauthor  { /* hook for comments by post author */ }

/* --- Block editor minimums --- */
.wp-block-image    { margin: 0 0 1.5rem; }
.wp-block-quote    { border-left: 4px solid var(--color-primary); padding: 0.5rem 1rem; margin: 1.5rem 0; }
.wp-block-pullquote{ border-top: 2px solid var(--color-border); border-bottom: 2px solid var(--color-border); padding: 1.5rem 0; margin: 2rem 0; text-align: center; }
.wp-block-button   { margin: 0 0 1rem; }
.wp-block-cover    { margin: 0 0 1.5rem; }
.wp-block-gallery  { margin: 0 0 1.5rem; }
.wp-block-columns  { gap: 1.5rem; margin: 0 0 1.5rem; }

.has-text-align-left   { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }

/* --- Clearfix --- */
.entry-content::after,
.comment-content::after { content: ""; display: table; clear: both; }

/* ========================================================================
   4. LAYOUT PRIMITIVES
   ======================================================================== */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site-content {
	flex: 1 0 auto;
	/* Vertical breathing room between the header and the content
	   (and between the content and the footer). Scales with the
	   Spacing setting in General → Layout. */
	padding-block: calc(2.5rem * var(--section-spacing-scale));
}
.site > footer  { flex-shrink: 0; }

/* Page-builder posts manage their own padding — the builder handles
   section spacing internally and any forced padding here would
   double-space hero sections. */
body.unyson.page-builder .site-content { padding-block: 0; }

/* Default vertical rhythm for page-builder sections. Builder pages zero the
   .site-content padding (above) so each section must space itself, but a
   section with no Padding Top/Bottom set had none — content hugged the header.
   The section shortcode renders a bare <section> whose base class is a variant
   like `section--alt` (or none at all), NOT `.section`, so we target the page
   builder's direct <section> children. style.css now loads AFTER the framework
   shortcode CSS (see inc/static.php), so a plain selector is enough to win the
   cascade — and a section's own Top/Bottom Spacing (.pt- / .pb- utilities,
   emitted !important) still overrides this default. Scales with General →
   Layout spacing. Bleed sections opt out (image runs full-height, edge to edge). */
.fw-page-builder-content > section                { padding-block: calc(4rem * var(--section-spacing-scale, 1)); }
.fw-page-builder-content > section.section--bleed { padding-block: 0; }

/* ========================================================================
   BLOG LISTING — Theme Settings → Blog → Blog Index.
   Wrapper classes are emitted by inc/includes/blog.php (loop hooks); the
   card markup lives in template-parts/content.php.
   ======================================================================== */
.posts-list { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.posts-list--grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.posts-list--grid.posts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.posts-list--grid.posts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.posts-list--grid.posts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .posts-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .posts-list--grid { grid-template-columns: 1fr; } }

.post-entry { margin: 0; }
.post-entry__body { padding-top: 1rem; }

/* List layout: image beside content from md up. */
@media (min-width: 768px) {
	.posts-list--list .post-entry--list { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 1.75rem; align-items: start; }
	.posts-list--list .post-entry--list .post-entry__body { padding-top: 0; }
}

.post-thumb { display: block; overflow: hidden; border-radius: var(--radius-md, 10px); background: var(--color-section-alt, #f3f3f3); }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-out, ease); }
.post-thumb:hover img { transform: scale(1.04); }
.post-thumb--ratio-16-9 { aspect-ratio: 16 / 9; }
.post-thumb--ratio-4-3  { aspect-ratio: 4 / 3; }
.post-thumb--ratio-1-1  { aspect-ratio: 1 / 1; }
.post-thumb--ratio-original img { height: auto; }

.post-entry .entry-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	margin: .35rem 0 .5rem; font-size: .8125rem; color: var(--color-muted, #6c757d);
}
.post-entry .entry-meta a { color: inherit; }
.post-entry .entry-meta a:hover { color: var(--color-primary, #0d6efd); }
.post-entry .entry-meta .meta-sep { opacity: .45; }
.post-entry .entry-summary { margin-top: .5rem; }
.post-entry .read-more { font-weight: 600; white-space: nowrap; }

/* Masonry (no JS) via CSS columns. */
.posts-list--masonry { display: block; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
.posts-list--masonry.posts-cols-2 { column-count: 2; }
.posts-list--masonry.posts-cols-3 { column-count: 3; }
.posts-list--masonry.posts-cols-4 { column-count: 4; }
.posts-list--masonry .post-entry { break-inside: avoid; display: inline-block; width: 100%; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 991.98px) { .posts-list--masonry.posts-cols-3, .posts-list--masonry.posts-cols-4 { column-count: 2; } }
@media (max-width: 575.98px) { .posts-list--masonry { column-count: 1 !important; } }

/* Featured-image wrapper (positioning context for the category badge). */
.post-thumb-wrap { position: relative; }
.post-cat-badge {
	position: absolute; top: .75rem; left: .75rem; z-index: 2;
	display: inline-block; padding: .25rem .625rem;
	font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
	color: #fff; text-decoration: none; border-radius: 999px;
	background: var(--color-primary, #0d6efd);
	box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18);
}
.post-cat-badge:hover { filter: brightness(1.08); color: #fff; }

/* ---- Image hover modes (default is zoom, set in .post-thumb above) ------ */
.posts-list--hover-none .post-thumb:hover img { transform: none; }
.posts-list--hover-lift .post-thumb:hover img { transform: none; }
.posts-list--hover-lift .post-entry { transition: transform .3s var(--ease-out, ease), box-shadow .3s var(--ease-out, ease); }
.posts-list--hover-lift .post-entry:hover { transform: translateY(-.375rem); }

/* ---- Card styles --------------------------------------------------------- */
.posts-list--card-boxed .post-entry,
.posts-list--card-bordered .post-entry {
	border-radius: var(--post-card-radius, var(--radius-lg, 14px));
	overflow: hidden;
	box-sizing: border-box;
	position: relative;
}
.posts-list--card-boxed .post-entry {
	background: var(--color-surface, #fff);
	box-shadow: var(--post-card-shadow, 0 .25rem 1.25rem rgba(0, 0, 0, .07));
}
.posts-list--card-bordered .post-entry { border: 1px solid var(--color-border, rgba(0, 0, 0, .1)); }
.posts-list--card-boxed .post-entry__body,
.posts-list--card-bordered .post-entry__body { padding: var(--post-card-pad, 1.25rem 1.375rem 1.5rem); }

/* Card Design: accent border drawn on hover (radius/shadow/padding come from the
   --post-card-* custom properties emitted on the wrapper by inc/includes/blog.php). */
.posts-list--card-accent .post-entry::before {
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
	background: var(--color-primary, #0d6efd);
	transform: scaleX(0); transform-origin: left center;
	transition: transform .3s var(--ease-out, ease);
}
.posts-list--card-accent .post-entry:hover::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
	.posts-list--card-accent .post-entry::before { transition: none; }
}
.posts-list--card-boxed.posts-list--list .post-entry--list,
.posts-list--card-bordered.posts-list--list .post-entry--list { gap: 0; }
.posts-list--card-boxed.posts-list--hover-lift .post-entry:hover,
.posts-list--card-bordered.posts-list--hover-lift .post-entry:hover { box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .12); }

/* Overlay card: content sits over the image with a gradient scrim. */
.posts-list--card-overlay .post-entry {
	position: relative; border-radius: var(--radius-lg, 14px); overflow: hidden;
	display: flex; align-items: flex-end; min-height: 20rem;
}
.posts-list--card-overlay .post-thumb-wrap { position: absolute; inset: 0; }
.posts-list--card-overlay .post-thumb,
.posts-list--card-overlay .post-thumb--ratio-16-9,
.posts-list--card-overlay .post-thumb--ratio-4-3,
.posts-list--card-overlay .post-thumb--ratio-1-1 { aspect-ratio: auto; height: 100%; border-radius: 0; }
.posts-list--card-overlay .post-thumb img { height: 100%; }
.posts-list--card-overlay .post-entry::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 75%);
}
.posts-list--card-overlay .post-entry__body { position: relative; z-index: 2; padding: 1.5rem; color: #fff; }
.posts-list--card-overlay .entry-title a,
.posts-list--card-overlay .entry-meta,
.posts-list--card-overlay .entry-meta a,
.posts-list--card-overlay .entry-summary { color: #fff; }
.posts-list--card-overlay .entry-summary { opacity: .9; }

/* ---- Meta above the title ------------------------------------------------ */
.posts-list--meta-above .entry-header { display: flex; flex-direction: column; }
.posts-list--meta-above .entry-header .entry-meta { order: -1; margin-top: 0; margin-bottom: .35rem; }

/* ---- Sticky highlight ---------------------------------------------------- */
.posts-list--sticky-hl .post-entry.sticky {
	background: var(--color-section-alt, #f7f9ff);
	border-radius: var(--radius-lg, 14px);
	box-shadow: inset 0 0 0 1px var(--color-primary, #0d6efd);
}
.posts-list--sticky-hl.posts-list--card-boxed .post-entry.sticky,
.posts-list--sticky-hl.posts-list--card-bordered .post-entry.sticky { box-shadow: inset 0 0 0 2px var(--color-primary, #0d6efd); }

/* ---- Feature the first post (grid / masonry, page 1) --------------------- */
@media (min-width: 768px) {
	.posts-list--first-featured.posts-list--grid > .post-entry:first-child { grid-column: 1 / -1; }
	.posts-list--first-featured.posts-list--grid > .post-entry:first-child.post-entry--card { display: grid; grid-template-columns: minmax(0, 55%) 1fr; gap: 0; align-items: stretch; }
	.posts-list--first-featured.posts-list--card-boxed .post-entry:first-child .post-entry__body,
	.posts-list--first-featured.posts-list--card-bordered .post-entry:first-child .post-entry__body { align-self: center; }
	.posts-list--first-featured .post-entry:first-child .entry-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
}

/* ---- Load More ----------------------------------------------------------- */
.posts-loadmore { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.posts-loadmore__btn { min-width: 12rem; text-align: center; }
.posts-loadmore.is-loading .posts-loadmore__btn { opacity: .6; pointer-events: none; }
.posts-loadmore.is-loading .posts-loadmore__btn::after {
	content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .5em;
	vertical-align: -.1em; border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; animation: upw-spin .6s linear infinite;
}
@keyframes upw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.posts-loadmore.is-loading .posts-loadmore__btn::after { animation-duration: 1.4s; }
	.posts-list--hover-lift .post-entry { transition: none; }
}

/* ========================================================================
   SINGLE POST — Theme Settings → Blog → Single Post (inc/includes/blog.php).
   ======================================================================== */
.single-featured { margin: 0 0 1.75rem; border-radius: var(--radius-md, 10px); overflow: hidden; }
.single-featured img { width: 100%; height: auto; display: block; }

.author-box {
	display: flex; gap: 1.25rem; align-items: flex-start;
	margin: 2.5rem 0; padding: 1.5rem;
	background: var(--color-section-alt, #f7f7f7); border-radius: var(--radius-md, 10px);
}
.author-box__avatar img { border-radius: 50%; display: block; }
.author-box__name { font-size: 1.1rem; margin: 0 0 .35rem; }
.author-box__bio { margin: 0 0 .5rem; color: var(--color-muted, #6c757d); }
.author-box__link { font-weight: 600; }

.related-posts { margin-top: 3rem; }
.related-posts__title { font-size: 1.4rem; margin-bottom: 1.25rem; }
.related-posts__grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.related-posts__grid.posts-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.related-posts__grid.posts-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.related-posts__grid.posts-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .related-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .related-posts__grid { grid-template-columns: 1fr; } }
.related-post__title { font-size: 1rem; line-height: 1.35; margin: .65rem 0 .25rem; }
.related-post__date { font-size: .8125rem; color: var(--color-muted, #6c757d); }

.post-navigation { margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border, #e5e5e5); }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
.post-navigation .nav-label { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted, #6c757d); }
.post-navigation .nav-title { font-weight: 600; }

/* ---- Related-posts styles (grid / list / carousel) ---------------------- */
.related-posts--list .related-posts__grid { display: block; }
.related-posts--list .related-post { display: grid; grid-template-columns: minmax(0, 30%) 1fr; gap: 1.25rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--color-border, #eee); }
.related-posts--list .related-post .post-thumb { margin: 0; }
.related-posts--carousel .related-posts__grid {
	display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; scroll-snap-type: x mandatory;
	padding-bottom: .5rem; scrollbar-width: thin;
}
.related-posts--carousel .related-post { scroll-snap-align: start; }

/* ---- Single hero header ------------------------------------------------- */
.single-hero {
	position: relative; display: flex; background-size: cover; background-position: center;
	margin-bottom: clamp(1.75rem, 4vw, 3rem); border-radius: var(--radius-lg, 14px); overflow: hidden;
}
.single-hero--small      { min-height: 300px; }
.single-hero--medium     { min-height: 440px; }
.single-hero--large      { min-height: 600px; }
.single-hero--fullscreen { min-height: 100vh; }
.single-hero--align-top    { align-items: flex-start; }
.single-hero--align-center { align-items: center; }
.single-hero--align-bottom { align-items: flex-end; }
.single-hero__overlay { position: absolute; inset: 0; z-index: 1; }
.single-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(1.75rem, 4vw, 3rem); color: #fff; }
.single-hero__title { color: #fff; margin: 0 0 .5rem; text-wrap: balance; }
.single-hero__inner .entry-meta,
.single-hero__inner .entry-meta a { color: rgba(255, 255, 255, .9); }
.single-hero__inner .single-breadcrumbs,
.single-hero__inner .single-breadcrumbs a { color: rgba(255, 255, 255, .85); }

/* ---- Breadcrumbs -------------------------------------------------------- */
.single-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--color-muted, #6c757d); margin-bottom: .75rem; }
.single-breadcrumbs a { color: inherit; text-decoration: none; }
.single-breadcrumbs a:hover { color: var(--color-primary, #0d6efd); }
.single-breadcrumbs .crumb-sep { opacity: .5; }
.single-breadcrumbs .is-current { color: inherit; opacity: .8; }

/* ---- Reading progress bar ---------------------------------------------- */
.reading-progress { position: fixed; top: var(--admin-bar-offset, 0px); left: 0; right: 0; height: 3px; z-index: 1040; background: transparent; pointer-events: none; }
.reading-progress__fill { display: block; height: 100%; width: 0; background: var(--color-primary, #0d6efd); transition: width .1s linear; }

/* ---- Table of contents -------------------------------------------------- */
.post-toc {
	margin: 0 0 2rem; padding: 1.1rem 1.35rem; border-radius: var(--radius-md, 10px);
	background: var(--color-section-alt, #f7f9ff); border: 1px solid var(--color-border, rgba(0, 0, 0, .07));
}
.post-toc__title { margin: 0 0 .6rem; font-weight: 700; font-size: .95rem; }
.post-toc__list { margin: 0; padding: 0; list-style: none; }
.post-toc__item { margin: .3rem 0; line-height: 1.4; }
.post-toc__item--h3 { padding-left: 1rem; font-size: .925rem; }
.post-toc__item a { color: var(--color-body, inherit); text-decoration: none; }
.post-toc__item a:hover { color: var(--color-primary, #0d6efd); text-decoration: underline; }

/* ---- Share buttons ------------------------------------------------------ */
.post-share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.5rem 0; }
.post-share__label { font-weight: 700; font-size: .85rem; margin-right: .25rem; }
.post-share__btn {
	display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem;
	font-size: .8125rem; font-weight: 600; line-height: 1; border-radius: 999px; cursor: pointer;
	text-decoration: none; border: 1px solid var(--color-border, rgba(0, 0, 0, .12));
	background: var(--color-surface, #fff); color: var(--color-body, inherit); transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.post-share__btn:hover { background: var(--color-primary, #0d6efd); border-color: var(--color-primary, #0d6efd); color: #fff; }
.post-share__btn.is-copied { background: var(--color-success, #1a9c5b); border-color: var(--color-success, #1a9c5b); color: #fff; }

/* ---- Tag row ------------------------------------------------------------ */
.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.75rem 0; }
.post-tag {
	display: inline-block; padding: .3rem .7rem; font-size: .8rem; font-weight: 600; line-height: 1;
	text-decoration: none; border-radius: 999px; color: var(--color-muted, #555);
	background: var(--color-section-alt, #f1f3f5); transition: background .15s ease, color .15s ease;
}
.post-tag:hover { background: var(--color-primary, #0d6efd); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.reading-progress__fill { transition: none; }
	.related-posts--carousel .related-posts__grid { scroll-behavior: auto; }
}

/* ========================================================================
   ARCHIVES & SEARCH — Theme Settings → Blog → Archives & Search.
   ======================================================================== */
.archive-header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.archive-header .page-title { margin: 0 0 .5rem; }
.archive-header .archive-description { color: var(--color-muted, #6c757d); max-width: 65ch; }
.archive-author { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.archive-author img { border-radius: 50%; display: block; }
.archive-author__bio { margin: 0; color: var(--color-muted, #6c757d); max-width: 60ch; }

.container, .container-fluid, .container-lg, .container-xl, .container-xxl {
	--bs-gutter-x: 1.5rem;
}

/* ========================================================================
   5. HEADER
   ======================================================================== */
.site-header {
	background-color: var(--header-bg);
	min-height: var(--header-min-height);
	position: relative;
	z-index: var(--header-z);
}

.site-header.header-sticky {
	position: sticky;
	top: var(--admin-bar-offset);
	transition: background-color var(--transition-base), box-shadow var(--transition-base);
}
.site-header.header-sticky.is-stuck {
	background-color: var(--header-sticky-bg);
	box-shadow: var(--header-shadow);
}

/* --- Topbar --- */
.header-topbar {
	background-color: var(--topbar-bg);
	color: var(--topbar-color);
	padding-top: var(--topbar-pad-y);
	padding-bottom: var(--topbar-pad-y);
	font-size: 0.875rem;
}
.header-topbar a { color: inherit; }
.header-topbar a:hover { opacity: 0.85; }

/* Three zones via flexbox (robust — no grid justify-self quirks). The side columns
   grow and pin their content to the OUTER edges; the center takes only its content
   width and sits in the middle. An empty side still grows (so left + right stay at
   the edges); an empty center collapses. All three columns are always rendered — the
   empty center is what lets a lone Center column self-center. */
.header-topbar .header-row {
	display: flex;
	align-items: var(--header-valign, center);
	gap: 1rem;
}
.header-topbar .header-col--start  { flex: 1 1 0;    justify-content: flex-start; min-width: 0; }
.header-topbar .header-col--center { flex: 0 1 auto; justify-content: center;     min-width: 0; }
.header-topbar .header-col--end    { flex: 1 1 0;    justify-content: flex-end;   min-width: 0; }

@media (max-width: 767.98px) {
	.header-topbar .header-row { flex-direction: column; gap: 0.25rem; text-align: center; }
	.header-topbar .header-col { flex: 0 0 auto; justify-content: center; }
	/* Hide Top / Bottom Bar on Mobile (Header → Layout → Mobile). */
	.site-header.header-hide-topbar-m    .header-topbar    { display: none; }
	.site-header.header-hide-bottombar-m .header-bottombar { display: none; }
}

/* --- Main header --- */
.header-main {
	min-height: var(--header-min-height);
	display: flex;
	align-items: center;
}
.header-main > .container,
.header-main > .container-fluid { width: 100%; }

/* Container Gutter (General → Layout → Container Gutter) — horizontal breathing room
   INSIDE the boxed/content containers, site-wide: the page-builder grid's
   .fw-container (Fixed) / .fw-container-fluid (Full) — used by header rows, footer
   sections, page-builder sections AND the non-builder content wrapper — plus
   Bootstrap's .container / .container-fluid. The grid ships a tight ~15px gutter that
   ignores this setting; `body …` (0,1,1) outranks the grid's `.fw-container` (0,1,0)
   at any stylesheet order, so the theme gutter applies consistently to Fixed AND Full
   containers everywhere (previously it only reached the header). */
body .fw-container,
body .fw-container-fluid,
body .container,
body .container-fluid {
	padding-left: var(--container-gutter, clamp(1.25rem, 3vw, 2rem));
	padding-right: var(--container-gutter, clamp(1.25rem, 3vw, 2rem));
}

.header-main .header-row {
	display: flex;
	align-items: var(--header-valign, center);
	gap: 1rem;
	min-height: var(--header-min-height);
}
/* --header-valign / --header-element-gap come from Header → Layout (Vertical
   Alignment / Element Gap); unset = the centred defaults below. */
.header-col { display: flex; align-items: var(--header-valign, center); gap: var(--header-element-gap, 1rem); min-width: 0; }
/* These belong to the MAIN header's flex row only — scoped to .header-main so they
   don't leak into the Top Bar / Bottom Bar grids (where margin-left:auto on --end
   was overriding the grid's justify-self:end, pulling the right column inward). */
.header-main .header-col--start  { flex-shrink: 0; }
.header-main .header-col--center { display: none; flex: 1 1 auto; justify-content: center; }  /* shown on lg+ via media query below */
.header-main .header-col--end    { margin-left: auto; gap: var(--header-element-gap, 0.75rem); }
@media (min-width: 992px) {
	.header-main .header-col--center { display: flex; }
}

/* ========================================================================
   Social icons (Social tab → Social Icon Style). The renderer adds
   .social-style-<shape> + .social-fx-<fx> + .social-brand on the wrapper;
   size/gap/colors come from the --social-* vars (theme-vars.php). Shared by
   the header Social Icons element and the footer. Every default is a no-op so
   an unstyled set (style = Bare, no colors) renders as plain inline glyphs.
   ======================================================================== */
.header-social-icons {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--social-gap, 0.5rem);
}
.header-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--social-icon-color, currentColor);
	text-decoration: none;
	line-height: 1;
	transition: color var(--transition-fast), background-color var(--transition-fast),
		border-color var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}
.header-social-icon:hover { color: var(--social-icon-hover-color, var(--social-icon-color, currentColor)); }
.header-social-icon i { line-height: 1; }

/* Bare — glyph only, sized by --social-size (defaults to a sensible glyph size). */
.social-style-bare .header-social-icon i,
.social-style-bare .header-social-icon__label { font-size: var(--social-size, 1.25rem); }

/* Chip shapes — a fixed square box; the glyph is ~half the box. */
.social-style-circle .header-social-icon,
.social-style-circle-outline .header-social-icon,
.social-style-rounded .header-social-icon,
.social-style-square .header-social-icon,
.social-style-square-outline .header-social-icon {
	width: var(--social-size, 2.25rem);
	height: var(--social-size, 2.25rem);
}
.social-style-circle .header-social-icon i,
.social-style-circle-outline .header-social-icon i,
.social-style-rounded .header-social-icon i,
.social-style-square .header-social-icon i,
.social-style-square-outline .header-social-icon i { font-size: calc(var(--social-size, 2.25rem) * 0.46); }

.social-style-circle .header-social-icon,
.social-style-circle-outline .header-social-icon { border-radius: 50%; }
.social-style-rounded .header-social-icon { border-radius: var(--radius, 0.375rem); }

/* Filled chips */
.social-style-circle .header-social-icon,
.social-style-rounded .header-social-icon,
.social-style-square .header-social-icon { background-color: var(--social-icon-bg, rgba(0, 0, 0, 0.06)); }
/* Outline chips */
.social-style-circle-outline .header-social-icon,
.social-style-square-outline .header-social-icon { border: 1px solid currentColor; background-color: transparent; }

/* Hover background for any chip style */
.social-style-circle .header-social-icon:hover,
.social-style-circle-outline .header-social-icon:hover,
.social-style-rounded .header-social-icon:hover,
.social-style-square .header-social-icon:hover,
.social-style-square-outline .header-social-icon:hover {
	background-color: var(--social-icon-hover-bg, var(--social-icon-bg, rgba(0, 0, 0, 0.06)));
}

/* Hover effects */
.social-fx-lift  .header-social-icon:hover { transform: translateY(-2px); }
.social-fx-scale .header-social-icon:hover { transform: scale(1.12); }
.social-fx-fill  .header-social-icon:hover { background-color: var(--social-icon-hover-bg, var(--color-primary)); color: #fff; }

/* Brand colors — each icon uses its network's --social-brand (set inline). */
.social-brand .header-social-icon { background-color: var(--social-brand, var(--social-icon-bg, rgba(0, 0, 0, 0.06))); color: #fff; }
.social-brand.social-style-circle-outline .header-social-icon,
.social-brand.social-style-square-outline .header-social-icon { background-color: transparent; border-color: var(--social-brand, currentColor); color: var(--social-brand, currentColor); }
.social-brand.social-style-bare .header-social-icon { background: none; color: var(--social-brand, currentColor); }
.social-brand .header-social-icon:hover { filter: brightness(1.12); }

/* Icon Text element (icon + text, optional smart link) — header & footer. */
.header-icon-text {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}
a.header-icon-text:hover { opacity: 0.85; }
.header-icon-text i { font-size: 1em; line-height: 1; }
/* SVG / library glyph in an Icon Text element (a font <i> is sized above). Cap to the text size and
   don't let it shrink, so a converted contact row's inline map-pin/phone/mail sits neatly beside the line. */
.header-icon-text__icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; }

/* --- Brand / logo --- */
.site-title,
.navbar-brand {
	font-size: var(--site-title-size, 1.25rem);
	font-weight: var(--site-title-weight, 700);
	color: var(--color-text);
	text-decoration: none;
	line-height: 1;
	margin: 0;
	padding: 0;
}
.site-title:hover,
.navbar-brand:hover { color: var(--color-text); text-decoration: none; }
.site-title img,
.navbar-brand img { width: var(--logo-width, auto); height: auto; max-height: var(--logo-max-height, calc(var(--header-min-height) - 24px)); display: block; }

/* Logo Icon + wordmark (Header → Identity → Logo Icon): an inline-SVG brand mark
   beside the text site title. The mark's font-size sizes the SVG (1em); color +
   size are overridable from Theme Settings (generated CSS). Default ~1.4em so the
   mark reads slightly larger than the wordmark. */
.site-title--has-icon a { display: inline-flex; align-items: center; gap: .5rem; }
.site-logo__mark { display: inline-flex; align-items: center; line-height: 0; font-size: 1.4em; color: inherit; }
/* Icon size is HEIGHT-driven (width auto) so a wide SVG wordmark keeps its
   viewBox ratio instead of letterboxing inside a forced 1em square. Square
   icons (the common case) render identically. max-width only guards the
   pathological no-viewBox SVG (whose auto width would default to 300px).
   img = an uploaded-image icon (icon-v2 custom-upload) — same height-driven
   sizing so every icon type honors Logo Icon Size / the 1.4em default. */
.site-logo__mark svg,
.site-logo__mark img { height: 1em; width: auto; max-width: 8em; display: block; }
.site-title-text { display: inline-block; }

/* Icon-only lockup (Logo Layout = Icon only): the mark IS the whole logo, so
   don't crush it into the 1em icon square - size it like an image logo (the
   header logo height) via the mark's font-size (the svg is 1em tall), and let
   the SVG keep its own aspect ratio (width:auto reads the viewBox ratio). The
   Logo Icon Size option still wins: the generated CSS emits an equally-specific
   .site-logo--icon-only override after this file (hf-custom-css.php). */
.site-logo--icon-only .site-logo__mark {
	font-size: var(--logo-max-height, calc(var(--header-min-height, 80px) - 24px));
}
.site-logo--icon-only .site-logo__mark svg { width: auto; }

/* Logo Layout (Header → Identity → Logo Layout): how the icon / title / tagline arrange.
   Inline = one line (default). Stacked / Eyebrow = a two-line lockup beside the icon, with
   the tagline riding inside the lockup (below the title, or as an eyebrow above it). */
.site-logo--stacked a,
.site-logo--eyebrow a { align-items: center; }
.site-logo__text { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.site-logo__eyebrow { display: block; font-size: .62em; letter-spacing: .22em; text-transform: uppercase; opacity: .6; font-weight: 600; }
.site-logo__sub { display: block; font-size: .72em; opacity: .65; font-weight: 400; margin-top: 1px; }

/* Logo Icon Frame (Header → Identity → Logo Icon Frame): the "app icon" tile behind the mark. */
.site-logo__mark--framed { justify-content: center; width: 2.2em; height: 2.2em; border: 1px solid currentColor; background-color: rgba(127,127,127,.06); }
.site-logo__mark--rounded  { border-radius: .5em; }
.site-logo__mark--squircle { border-radius: 32%; }        /* iOS-style continuous rounding */
.site-logo__mark--circle   { border-radius: 50%; }
.site-logo__mark--square   { border-radius: 0; }
/* Hexagon is a clip-path tile; the clip removes the border, so it reads via a slightly stronger
   fill instead of a stroke (the frame's hairline can't survive the clip). */
.site-logo__mark--hexagon  { border: 0; background: rgba(127,127,127,.12); -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
/* Inside a frame tile the mark stays height-driven but is CAPPED to the tile,
   so a wide mark letterboxes within the frame instead of overflowing it. */
.site-logo__mark--framed svg,
.site-logo__mark--framed img { height: .82em; width: auto; max-width: .82em; }

/* WooCommerce core ships `.woocommerce img,.woocommerce-page img{max-width:100%;height:auto}`
   (woocommerce-layout.css), which over-broadly resizes the brand logo on any page WC tags
   with the woocommerce-page body class. These selectors (0,2,1) out-rank WC's (0,1,1) so the
   logo keeps its configured size regardless of stylesheet order. */
.site-header .site-title img,
.site-header .navbar-brand img,
.woocommerce-page .site-title img,
.woocommerce-page .navbar-brand img,
.woocommerce .site-title img,
.woocommerce .navbar-brand img {
	width: var(--logo-width, auto);
	height: auto;
	max-width: var(--logo-width, none);
	max-height: var(--logo-max-height, calc(var(--header-min-height) - 24px));
}

/* Logo variants (Header → Identity). The wrapper carries has-sticky-logo /
   has-mobile-logo only when that variant is configured, so the default logo is
   never hidden with nothing to replace it. Sticky swap fires when theme.js adds
   .sticky to #masthead; the mobile swap takes over below 768px. */
.site-logo--sticky,
.site-logo--mobile,
.site-logo--transparent { display: none; }
#masthead.sticky .has-sticky-logo .site-logo--default { display: none; }
#masthead.sticky .has-sticky-logo .site-logo--sticky { display: block; }
/* Transparent-header logo: shown while the header is transparent AND not yet stuck
   (Behavior = Transparent, or a per-page Transparent header). Once stuck it repaints
   solid, so the default / sticky logo takes back over. */
.site-header--transparent:not(.is-stuck) .has-transparent-logo .site-logo--default,
body.transparent .site-header:not(.is-stuck) .has-transparent-logo .site-logo--default { display: none; }
.site-header--transparent:not(.is-stuck) .has-transparent-logo .site-logo--transparent,
body.transparent .site-header:not(.is-stuck) .has-transparent-logo .site-logo--transparent { display: block; }
@media (max-width: 767.98px) {
	.has-mobile-logo .site-logo--mobile { display: block; }
	.has-mobile-logo .site-logo--default { display: none; }
	#masthead.sticky .has-mobile-logo .site-logo--sticky { display: none; }
	/* Mobile logo wins over the transparent variant on small screens. */
	.has-mobile-logo .site-logo--transparent { display: none; }
}

/* --- Primary navigation (renders inline inside a header slot) --- */
.primary-navigation { display: inline-block; max-width: 100%; }
.primary-navigation > ul,
.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}
.primary-menu .menu-item { position: relative; }
.primary-menu .menu-item > a {
	display: inline-flex;
	align-items: center;
	padding: var(--menu-link-pad-y) var(--menu-link-pad-x);
	color: var(--menu-link-color);
	background-color: var(--menu-item-bg, transparent);
	font-family: var(--menu-font-family, inherit);
	font-size: var(--menu-link-font-size, inherit);
	font-weight: var(--menu-link-font-weight, 500);
	letter-spacing: var(--menu-link-letter-spacing, normal);
	text-transform: var(--menu-link-transform, none);
	border-radius: var(--radius);
	transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.primary-menu .menu-item > a:hover,
.primary-menu .menu-item > a:focus-visible,
.primary-menu .current-menu-item > a,
.primary-menu .current-menu-ancestor > a {
	color: var(--menu-link-hover);
	text-decoration: none;
}

/* ============================================================
   Menu item styles (Header → Menu → Menu Item Style)
   A body.menu-style-<name> class (see unysonplus_layout_body_classes) selects the
   hover / current-page treatment applied to TOP-LEVEL primary-menu items. The
   fills (pill / box / highlight) use --menu-item-hover-bg; underline + the bars
   use --menu-link-hover as the accent. 'none' needs no rule (base color only).
   ============================================================ */

/* Relative positioning for the ::before treatments (underline-grow + bars). */
body.menu-style-underline-grow .site-header .primary-menu > .menu-item > a,
body.menu-style-bottom-bar     .site-header .primary-menu > .menu-item > a,
body.menu-style-top-bar        .site-header .primary-menu > .menu-item > a { position: relative; }

/* Underline (animated) — a bar grows in from the center. */
body.menu-style-underline-grow .site-header .primary-menu > .menu-item > a::before {
	content: "";
	position: absolute;
	left: var(--menu-link-pad-x);
	right: var(--menu-link-pad-x);
	bottom: 0.25rem;
	height: 2px;
	background-color: var(--menu-link-hover);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--transition-fast);
}
body.menu-style-underline-grow .site-header .primary-menu > .menu-item > a:hover::before,
body.menu-style-underline-grow .site-header .primary-menu > .menu-item > a:focus-visible::before,
body.menu-style-underline-grow .site-header .primary-menu > .current-menu-item > a::before,
body.menu-style-underline-grow .site-header .primary-menu > .current-menu-ancestor > a::before { transform: scaleX(1); }

/* Underline (static) — a simple rule appears on hover / current. */
body.menu-style-underline .site-header .primary-menu > .menu-item > a:hover,
body.menu-style-underline .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-style-underline .site-header .primary-menu > .current-menu-item > a,
body.menu-style-underline .site-header .primary-menu > .current-menu-ancestor > a {
	box-shadow: inset 0 -2px 0 var(--menu-link-hover);
}

/* Pill / Box / Highlight — filled background from --menu-item-hover-bg. */
body.menu-style-pill .site-header .primary-menu > .menu-item > a { border-radius: 999px; }
body.menu-style-pill      .site-header .primary-menu > .menu-item > a:hover,
body.menu-style-pill      .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-style-pill      .site-header .primary-menu > .current-menu-item > a,
body.menu-style-pill      .site-header .primary-menu > .current-menu-ancestor > a,
body.menu-style-box       .site-header .primary-menu > .menu-item > a:hover,
body.menu-style-box       .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-style-box       .site-header .primary-menu > .current-menu-item > a,
body.menu-style-box       .site-header .primary-menu > .current-menu-ancestor > a,
body.menu-style-highlight .site-header .primary-menu > .menu-item > a:hover,
body.menu-style-highlight .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-style-highlight .site-header .primary-menu > .current-menu-item > a,
body.menu-style-highlight .site-header .primary-menu > .current-menu-ancestor > a {
	background-color: var(--menu-item-hover-bg);
}

/* On the FILLED menu styles the link text flips to the contrast colour on hover /
   current, but the sub-label carries its own muted resting colour and so looks like
   it "didn't change" (and reads low-contrast on the filled background). Make it
   follow the link colour like the main label. Higher specificity than the header
   preset's generated sub-label colour rules, so it wins on hover / current. */
body.menu-style-pill      .site-header .primary-menu > .menu-item > a:hover .menu-sublabel,
body.menu-style-pill      .site-header .primary-menu > .menu-item > a:focus-visible .menu-sublabel,
body.menu-style-pill      .site-header .primary-menu > .current-menu-item > a .menu-sublabel,
body.menu-style-pill      .site-header .primary-menu > .current-menu-ancestor > a .menu-sublabel,
body.menu-style-box       .site-header .primary-menu > .menu-item > a:hover .menu-sublabel,
body.menu-style-box       .site-header .primary-menu > .menu-item > a:focus-visible .menu-sublabel,
body.menu-style-box       .site-header .primary-menu > .current-menu-item > a .menu-sublabel,
body.menu-style-box       .site-header .primary-menu > .current-menu-ancestor > a .menu-sublabel,
body.menu-style-highlight .site-header .primary-menu > .menu-item > a:hover .menu-sublabel,
body.menu-style-highlight .site-header .primary-menu > .menu-item > a:focus-visible .menu-sublabel,
body.menu-style-highlight .site-header .primary-menu > .current-menu-item > a .menu-sublabel,
body.menu-style-highlight .site-header .primary-menu > .current-menu-ancestor > a .menu-sublabel {
	color: inherit;
	opacity: .82;
}

/* Outline — a bordered box on hover / current. */
body.menu-style-outline .site-header .primary-menu > .menu-item > a { border: 1px solid transparent; }
body.menu-style-outline .site-header .primary-menu > .menu-item > a:hover,
body.menu-style-outline .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-style-outline .site-header .primary-menu > .current-menu-item > a,
body.menu-style-outline .site-header .primary-menu > .current-menu-ancestor > a {
	border-color: var(--menu-link-hover);
	background-color: transparent;
}

/* Bottom / Top accent bar — a thick rule flush to one edge. */
body.menu-style-bottom-bar .site-header .primary-menu > .menu-item > a::before,
body.menu-style-top-bar    .site-header .primary-menu > .menu-item > a::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--menu-link-hover);
	transform: scaleX(0);
	transition: transform var(--transition-fast);
}
body.menu-style-bottom-bar .site-header .primary-menu > .menu-item > a::before { bottom: 0; }
body.menu-style-top-bar    .site-header .primary-menu > .menu-item > a::before { top: 0; }
body.menu-style-bottom-bar .site-header .primary-menu > .menu-item > a:hover::before,
body.menu-style-bottom-bar .site-header .primary-menu > .menu-item > a:focus-visible::before,
body.menu-style-bottom-bar .site-header .primary-menu > .current-menu-item > a::before,
body.menu-style-bottom-bar .site-header .primary-menu > .current-menu-ancestor > a::before,
body.menu-style-top-bar .site-header .primary-menu > .menu-item > a:hover::before,
body.menu-style-top-bar .site-header .primary-menu > .menu-item > a:focus-visible::before,
body.menu-style-top-bar .site-header .primary-menu > .current-menu-item > a::before,
body.menu-style-top-bar .site-header .primary-menu > .current-menu-ancestor > a::before { transform: scaleX(1); }

/* Dropdowns */
.primary-menu .menu-item-has-children > a { padding-right: 2rem; position: relative; }
.primary-menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 0.75rem;
	top: 50%;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-75%) rotate(45deg);
	opacity: 0.6;
}
.primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: var(--menu-dropdown-width, 220px);
	background-color: var(--menu-dropdown-bg);
	box-shadow: var(--menu-dropdown-shadow);
	border-radius: var(--menu-dropdown-radius, var(--radius));
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.25rem);
	transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
	z-index: 1;
}
.primary-menu .menu-item-has-children.is-open > .sub-menu,
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.primary-menu .sub-menu .menu-item > a {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--menu-dropdown-link, var(--color-text));
	border-radius: 0;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}
.primary-menu .sub-menu .menu-item > a:hover,
.primary-menu .sub-menu .menu-item > a:focus-visible,
.primary-menu .sub-menu .current-menu-item > a,
.primary-menu .sub-menu .current-menu-ancestor > a {
	color: var(--menu-dropdown-link-hover, var(--menu-link-hover));
	background-color: var(--menu-dropdown-item-hover-bg, rgba(0, 0, 0, 0.05));
	text-decoration: none;
}
.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* ============================================================
   Dropdown designs (Header → Menu → Dropdown → Dropdown Design)
   Overall submenu-panel treatment; body.dropdown-style-<name> (see
   unysonplus_layout_body_classes) keys off the value. 'classic' is the base
   rule above. The drawer's inline accordion resets these (see below), so a
   design never leaks into the mobile menu.
   ============================================================ */
body.dropdown-style-elevated .site-header .primary-menu .sub-menu {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	border: 0;
}
body.dropdown-style-bordered .site-header .primary-menu .sub-menu {
	box-shadow: none;
	border: 1px solid var(--color-border);
}
body.dropdown-style-minimal .site-header .primary-menu .sub-menu {
	box-shadow: none;
	border: 0;
}
body.dropdown-style-top-accent .site-header .primary-menu .sub-menu {
	border-top: 3px solid var(--menu-link-hover);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* --- Mobile menu toggle (hidden on lg+ by default; layout modes override) --- */
.menu-toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	/* Toggle Size (Header → Mobile & Tablet). */
	width: var(--toggle-size, 44px);
	height: var(--toggle-size, 44px);
	padding: 10px;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	cursor: pointer;
}
@media (min-width: 992px) {
	.menu-toggle { display: none; }
}
.menu-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	/* Toggle Colour (Header → Mobile & Tablet). */
	background-color: var(--toggle-color, var(--color-text));
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Toggle style: Thin bars. */
.menu-toggle--style-thin .menu-toggle__bar { height: 1px; }
/* Toggle style: Dots — three round dots; they do not morph to an X. */
.menu-toggle--style-dots { gap: 4px; }
.menu-toggle--style-dots .menu-toggle__bar { height: 5px; width: 5px; border-radius: 50%; align-self: center; }
.menu-toggle--style-dots[aria-expanded="true"] .menu-toggle__bar { transform: none; opacity: 1; }
/* Animate to X = Off — keep bars static when the drawer opens. */
.menu-toggle--no-animate[aria-expanded="true"] .menu-toggle__bar { transform: none !important; opacity: 1 !important; }

/* Optional label beside the icon ("Menu"). The bars wrap in .menu-toggle__bars so icon
   and text sit in a row; the button grows to fit and drops its square dimensions. */
.menu-toggle--has-label {
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	width: auto;
	height: auto;
	padding: 0.4rem 0.7rem;
}
.menu-toggle--has-label .menu-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 22px;
}
.menu-toggle--has-label.menu-toggle--style-dots .menu-toggle__bars { gap: 4px; }
.menu-toggle__label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
	color: var(--toggle-color, var(--color-text));
}

/* --- Off-canvas drawer (mobile) --- */
.primary-navigation-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--drawer-z);
	pointer-events: none;
}
.primary-navigation-drawer[hidden] { display: none; }
.primary-navigation-drawer__scrim {
	position: absolute;
	inset: 0;
	/* Scrim Colour / Blur (Phase 2, Header → Mobile & Tablet). */
	background-color: var(--drawer-scrim-color, var(--scrim-bg));
	-webkit-backdrop-filter: blur(var(--drawer-scrim-blur, 0));
	backdrop-filter: blur(var(--drawer-scrim-blur, 0));
	opacity: 0;
	transition: opacity var(--transition-base);
	pointer-events: auto;
}
.primary-navigation-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--drawer-width);
	background-color: var(--drawer-bg);
	/* Drawer Corner Radius (Phase 2) — inner corners only (right-side panel). */
	border-radius: var(--drawer-radius, 0) 0 0 var(--drawer-radius, 0);
	padding: 1.5rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform var(--transition-base);
	pointer-events: auto;
	box-shadow: -2px 0 16px rgba(0, 0, 0, 0.15);
}
/* Scrim Opacity (Phase 2) — the open-state max opacity (default fully-on). */
.primary-navigation-drawer.is-open .primary-navigation-drawer__scrim { opacity: var(--drawer-scrim-opacity, 1); }
.primary-navigation-drawer.is-open .primary-navigation-drawer__panel { transform: translateX(0); }

/* Open animation = Fade — the panel cross-fades in place instead of sliding. */
.primary-navigation-drawer--anim-fade .primary-navigation-drawer__panel {
	transform: none;
	opacity: 0;
	transition: opacity var(--transition-base);
}
.primary-navigation-drawer--anim-fade.is-open .primary-navigation-drawer__panel { transform: none; opacity: 1; }

/* Open animation = Fullscreen — the panel covers the whole viewport and fades in. */
.primary-navigation-drawer--anim-fullscreen .primary-navigation-drawer__panel {
	width: 100%;
	left: 0;
	right: 0;
	border-radius: 0;
	transform: none;
	opacity: 0;
	transition: opacity var(--transition-base);
}
.primary-navigation-drawer--anim-fullscreen.is-open .primary-navigation-drawer__panel { transform: none; opacity: 1; }

/* Mobile Menu Side = Left (Header → Layout → Mobile). The side drawer slides in
   from the left instead of the right. */
.primary-navigation-drawer--left .primary-navigation-drawer__panel {
	right: auto;
	left: 0;
	border-radius: 0 var(--drawer-radius, 0) var(--drawer-radius, 0) 0;
	transform: translateX(-100%);
	box-shadow: 2px 0 16px rgba(0, 0, 0, 0.15);
}
.primary-navigation-drawer--left.is-open .primary-navigation-drawer__panel { transform: translateX(0); }

.primary-navigation-drawer__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 40px;
	height: 40px;
	/* Close Size / Colour (Phase 2, Header → Mobile & Tablet). */
	font-size: var(--close-size, 1.75rem);
	line-height: 1;
	background: transparent;
	border: 0;
	color: var(--close-color, var(--color-text));
	cursor: pointer;
}
/* Close style = "Close" text. */
.primary-navigation-drawer__close--text {
	width: auto;
	height: auto;
	font-size: var(--close-size, 0.85rem);
	padding: 0.35rem 0.6rem;
}
.primary-navigation-drawer__close-text { text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
/* Close position = Floating — pinned to the viewport corner on the SCRIM side (opposite the panel). */
.primary-navigation-drawer__close--floating {
	position: fixed;
	z-index: calc(var(--drawer-z, 1050) + 1);
	top: 0.75rem;
	right: auto;
	left: 0.75rem;
}
.primary-navigation-drawer--left .primary-navigation-drawer__close--floating { left: auto; right: 0.75rem; }

/* Drawer item min tap-target height (Phase 2). */
.primary-navigation-drawer .primary-menu .menu-item > a { min-height: var(--drawer-item-minh, 0); }

/* Drawer search form (Phase 2). */
.drawer-search { margin: 0 0 1.25rem; }
.drawer-search form { display: flex; gap: 0.5rem; }
.drawer-search input[type="search"],
.drawer-search .search-field { flex: 1 1 auto; width: 100%; }

/* Custom Open / Close icons (Theme Settings → Header → Layout → Trigger & Close
   Icons). sc_icon_render() emits a font <i> (sized by font-size), an <svg>, or an
   <img>; the width/height only bites the latter two, so a font glyph keeps its
   font-size while an inline SVG / uploaded image is constrained to the glyph box.
   --icon buttons drop the hamburger padding/gap so the icon centers cleanly. */
.menu-toggle--icon {
	padding: 0;
	gap: 0;
}
.menu-toggle__icon {
	font-size: 1.4rem;
	line-height: 1;
}
.primary-navigation-drawer__close--icon {
	font-size: 0; /* neutralize the &times; sizing; the icon carries its own */
}
.primary-navigation-drawer__close-icon {
	font-size: 1.4rem;
	line-height: 1;
}
.menu-toggle__icon:is( svg, img ),
.primary-navigation-drawer__close-icon:is( svg, img ) {
	width: 1.4rem;
	height: 1.4rem;
}

/* The drawer reuses .primary-menu — the HORIZONTAL header nav — so every rule that
   only makes sense in a bar (inline-flex links, wrapping, centred alignment) has to
   be reset here, or the items shrink-to-fit and float centred with the row divider
   spanning only the text. Force a plain full-width, left-aligned vertical list. */
.primary-navigation-drawer .primary-menu {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	/* Drawer Item Spacing (Header → Layout → Mobile → Drawer Item Spacing). */
	gap: var(--drawer-item-gap, 0);
	margin-top: 2.5rem;
	width: 100%;
}
.primary-navigation-drawer .primary-menu .menu-item { width: 100%; }
.primary-navigation-drawer .primary-menu .menu-item > a {
	display: flex;              /* base is inline-flex (shrink-to-fit) */
	width: 100%;
	align-items: center;
	/* Drawer Item Alignment (Header → Layout → Mobile → Drawer Item Alignment).
	   Defaults to left; the vars only override when a non-left alignment is chosen. */
	justify-content: var(--drawer-align, flex-start);
	text-align: var(--drawer-text-align, left);
	/* Drawer Link Size (Header → Layout → Mobile). Inherits the menu size when unset. */
	font-size: var(--drawer-link-size, inherit);
	/* right padding leaves room for the absolutely-positioned .submenu-toggle */
	padding: 0.875rem 3rem 0.875rem 0.5rem;
}
/* Drawer Item Dividers (Header → Layout → Mobile → Drawer Item Dividers). Off by
   default for a clean panel; the toggle adds a hairline rule between items via the
   .primary-navigation-drawer--dividers class on the drawer root. */
.primary-navigation-drawer--dividers .primary-menu .menu-item > a {
	border-bottom: 1px solid var(--color-border);
}
/* Items with a Description sub-label stack label-over-sublabel, left-aligned
   (the header-bar rule centres them, which reads wrong in a vertical drawer). */
.primary-navigation-drawer .primary-menu .menu-item > a:has(.menu-sublabel) {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

/* Colour. The panel has its own background (--drawer-bg, light by default), but
   --menu-link-color / --menu-link-hover come from Header → Menu and are picked to
   sit on the HEADER BAR — often dark, or an image. Those rules are unscoped, so
   without this the bar's palette bleeds into the drawer: a site with a dark header
   gets white links on the white panel, and the ACTIVE item (which always takes
   --menu-link-hover) disappears entirely. Re-anchor to the drawer's own colours. */
.primary-navigation-drawer .primary-menu .menu-item > a {
	color: var(--drawer-color, var(--color-text));
	background-color: transparent;
}
.primary-navigation-drawer .primary-menu .menu-item > a:hover,
.primary-navigation-drawer .primary-menu .menu-item > a:focus-visible,
.primary-navigation-drawer .primary-menu .current-menu-item > a,
.primary-navigation-drawer .primary-menu .current_page_item > a,
.primary-navigation-drawer .primary-menu .current-menu-ancestor > a {
	color: var(--drawer-active, var(--color-primary));
	background-color: transparent;
}
.primary-navigation-drawer .primary-menu .menu-sublabel { color: inherit; }
.primary-navigation-drawer .primary-menu .menu-item-has-children > a::after { display: none; }
.primary-navigation-drawer .primary-menu .submenu-toggle {
	position: absolute;
	right: 0;
	top: 0.5rem;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--color-text);
}
.primary-navigation-drawer .primary-menu .submenu-toggle::after {
	content: "+";
	font-size: 1.5rem;
	line-height: 1;
}
.primary-navigation-drawer .primary-menu .menu-item-has-children.is-open > .submenu-toggle::after { content: "−"; }
.primary-navigation-drawer .primary-menu .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	padding: 0 0 0 1rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height var(--transition-base);
}
.primary-navigation-drawer .primary-menu .menu-item-has-children.is-open > .sub-menu {
	max-height: 1000px;
}

/* Submenu mode: Expand-all — every level shown as a static indented tree; no toggle. */
.primary-navigation-drawer--submenu-expand-all .primary-menu .sub-menu { max-height: none; overflow: visible; }
.primary-navigation-drawer--submenu-expand-all .primary-menu .submenu-toggle { display: none; }

/* Submenu mode: Flyout — the child list slides in over the parent as a full panel, with
   a "‹ Back" row to return. The panel (.primary-navigation-drawer__panel) is the
   positioning context (it is already absolutely positioned). Nested submenus stack. */
.primary-navigation-drawer--submenu-flyout .primary-menu .sub-menu {
	position: absolute;
	inset: 0;
	max-height: none;
	overflow-y: auto;
	margin: 0;
	padding: 1.5rem;
	background-color: var(--drawer-bg, #fff);
	transform: translateX(100%);
	transition: transform var(--transition-base);
	z-index: 2;
}
.primary-navigation-drawer--submenu-flyout .primary-menu .sub-menu.is-flyout-open { transform: translateX(0); }
.primary-navigation-drawer--submenu-flyout .primary-menu .submenu-toggle::after { content: "\203A"; } /* › */
.primary-navigation-drawer--submenu-flyout .primary-menu .submenu-back { list-style: none; margin: 0 0 0.5rem; }
.primary-navigation-drawer--submenu-flyout .primary-menu .submenu-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: transparent;
	border: 0;
	padding: 0.5rem 0;
	font: inherit;
	cursor: pointer;
	color: var(--drawer-active, var(--color-primary));
}

body.menu-drawer-open { overflow: hidden; }

/* --- "No menu assigned" admin-only notice --- */
.primary-menu-notice {
	display: inline-block;
	padding: 0.5rem 0.875rem;
	background-color: #fff3cd;
	border: 1px dashed #ffc107;
	border-radius: var(--radius);
	color: #664d03;
	font-size: 0.8125rem;
	line-height: 1.4;
	max-width: 100%;
}
.primary-menu-notice p { margin: 0; }
.primary-menu-notice a {
	color: #664d03;
	text-decoration: underline;
	font-weight: 600;
}
.primary-menu-notice a:hover { color: #332600; }
.primary-menu-notice__hint {
	opacity: 0.7;
	font-style: italic;
	margin-left: 0.25rem;
}
.primary-navigation-drawer .primary-menu-notice {
	display: block;
	margin-top: 2.5rem;
}

/* ========================================================================
   SCROLL SPY — Header → Layout → Scroll Spy (body.nav-scrollspy).
   Active-item styling reuses .current-menu-item (styled for every menu preset
   above), so nothing is needed here for the highlight. These two rules just
   handle smooth anchor scrolling + the sticky-header landing offset.
   ======================================================================== */
/* Native smooth scroll for anchor jumps — but NOT when Lenis (Animation Engine →
   Scroll Loop) owns scrolling (it adds .lenis to <html>); navigation.js adds
   html.nav-scrollspy so this stays opt-in. Reduced-motion turns it off. */
html.nav-scrollspy:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.nav-scrollspy { scroll-behavior: auto; } }
/* Land anchor targets below the sticky header. Scoped to page-builder sections
   (they render as <section id>) so it never shifts non-section anchor targets
   (accordion panels, tabs, etc.). */
body.nav-scrollspy section[id] {
	scroll-margin-top: calc(var(--header-min-height, 4rem) + var(--admin-bar-offset, 0px));
}

/* ========================================================================
   6. FOOTER
   ======================================================================== */
.footer {
	/* --footer-bg-color comes from the Background Pro control (Footer → Layout →
	   Background); --footer-bg is the theme default token / dark-mode fallback. */
	background-color: var(--footer-bg-color, var(--footer-bg));
	color: var(--footer-color);
	position: relative;
}

/* Overlay on Last Section (Footer → Layout → Overlay on Last Section). The footer is pulled up by
   its own measured height (--footer-overlay-h) so it sits on the bottom of the page's last
   full-height section instead of a separate band below it — removing any blank tail after a pinned
   last section. `footer--overlay-on` is added by the JS ONLY when that last section is tall enough
   to sit on (otherwise it stays a normal band). This changes POSITIONING only — set the footer
   Background (a scrim, or a transparent colour) and Text/Link colours in Footer settings for
   legibility over your final scene. */
.footer--overlay-on {
	position: relative;
	z-index: 40;
	margin-top: calc(-1 * var(--footer-overlay-h, 0px));
	background-color: var(--footer-bg-color, transparent);
}

/* Footer border (Footer → Layout → Border). ONE shared width / style / colour, applied
   to any combination of edges — .footer--bt (top), .footer--br (right), .footer--bb
   (bottom), .footer--bl (left), set by the multi-select Border Sides picker. Invisible
   until both a width and a colour are set (width falls back to 0, colour to transparent).
   The CSS vars keep the legacy `--footer-border-top-*` names but drive every edge. Left /
   right are vertical, so they always render as real borders (Border Extent only affects
   the horizontal top/bottom lines). */
.footer--bt:not(.footer--bcontained) {
	border-top: var(--footer-border-top-width, 0) var(--footer-border-top-style, solid) var(--footer-border-top-color, transparent);
}
.footer--bb:not(.footer--bcontained) {
	border-bottom: var(--footer-border-top-width, 0) var(--footer-border-top-style, solid) var(--footer-border-top-color, transparent);
}
.footer--bl {
	border-left: var(--footer-border-top-width, 0) var(--footer-border-top-style, solid) var(--footer-border-top-color, transparent);
}
.footer--br {
	border-right: var(--footer-border-top-width, 0) var(--footer-border-top-style, solid) var(--footer-border-top-color, transparent);
}

/* Border EXTENT = Container / Custom (Footer → Layout → Border Extent): move each active
   HORIZONTAL border off the full-width <footer> onto a centered pseudo-element capped at
   --footer-border-top-max, so the line aligns with the content instead of spanning edge
   to edge. ::before = the top edge, ::after = the bottom edge. max-width only caps, so on
   a narrow viewport the line still fits. Full Width (default) has no class. This only
   sizes the border line — the footer sections' container width is never affected. Left /
   right vertical borders are unaffected by extent. */
.footer--bcontained.footer--bt::before,
.footer--bcontained.footer--bb::after {
	content: "";
	display: block;
	max-width: var(--footer-border-top-max, 100%);
	margin-inline: auto;
	border-top: var(--footer-border-top-width, 0) var(--footer-border-top-style, solid) var(--footer-border-top-color, transparent);
}

/* The footer's vertical padding (Footer → Layout → Padding Top/Bottom) lives on the
   inner .footer__body wrapper (pre / main / post) — NOT the outer <footer> — so the
   padding-bottom sits ABOVE the copyright bar (rendered after the wrapper) and the
   copyright is flush at the footer's bottom edge with only its own .footer-section
   padding. The actual padding declarations are emitted (scaled by Content Density) in
   the Content Density section below; markup is in template-parts/footer-builder.php. */
.footer a { color: var(--footer-link-color); }
.footer a:hover { color: var(--footer-link-color); opacity: 0.85; }

/* Background Pro image (+ any gradient overlay it folds in). All the placement
   knobs come from the control; an overlay is a semi-transparent colour/gradient
   layered into --footer-bg-image, so no separate ::before tint is needed. */
.footer--has-bg-image {
	background-image: var(--footer-bg-image, none);
	background-size: var(--footer-bg-size, cover);
	background-position: var(--footer-bg-position, center center);
	background-repeat: var(--footer-bg-repeat, no-repeat);
	background-attachment: var(--footer-bg-attachment, scroll);
}
.footer--has-bg-image > * { position: relative; z-index: 1; }

.footer .footer-section { padding-block: 1rem; }
/* Optional divider between footer sections (and between the footer body and the copyright bar,
   which follows the .footer__body wrapper rather than being a sibling section). Routed through
   --footer-section-divider and defaults to NO border, so footers are clean out of the box and
   new child themes don't have to fight this rule's specificity to remove an unwanted line. A
   site that wants section dividers opts in from its child theme, e.g.
   `--footer-section-divider: 1px solid rgba(255,255,255,0.08);`. */
.footer .footer-section + .footer-section,
.footer .footer__body + .footer-section { border-top: var(--footer-section-divider, none); }

.footer .widget-title {
	color: var(--footer-link-color);
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.footer .widget ul { list-style: none; padding: 0; margin: 0; }
.footer .widget ul li { padding: 0.25rem 0; }

.footer-fallback { text-align: center; }
.footer-fallback p { margin: 0; }

/* ========================================================================
   7. CONTENT
   ======================================================================== */
.entry-header { margin-bottom: 1.5rem; }
.entry-title  { margin-bottom: 0.5rem; }
.entry-meta   { color: var(--color-muted); font-size: 0.875rem; }

/* Builder-page title header — the page title rendered as the H1 at the top of
   Page Builder pages (template-parts/content-page.php). Top padding gives it
   breathing room and clears an overhanging logo plaque / floating header. */
/* Compact, clean title header for builder pages: top padding only, no bottom
   padding/margin — the first builder section carries its own top spacing, so a
   bottom gap here just doubles it and reads as an awkward empty band. The
   .entry-header.page-title-header specificity beats the generic .entry-header
   margin-bottom rule further down. */
.entry-header.page-title-header { padding: 2.5rem 0 1.5rem; margin-bottom: 0; }
.page-title-header .entry-title { margin-bottom: 0; }
/* Let the first builder section sit close under the compact title instead of
   stacking its full top spacing below the header's — kills the empty band. */
.page-title-header + .entry-content .fw-page-builder-content > section:first-child { padding-top: 1.5rem; }

/* ==========================================================================
   Bootstrap utility bridge
   --------------------------------------------------------------------------
   The full bootstrap.min.css (232 KB) + bootstrap.min.js (80 KB) were dropped
   for performance (see inc/static.php): the grid is the plugin's frontend-grid
   (fw-*), spacing/.text-* come from the presets-css utilities, and each
   shortcode ships its own component CSS/JS. These are the ONLY Bootstrap-only
   classes still rendered by the theme/shortcodes, reproduced verbatim so
   markup that uses them is unaffected. (Bootstrap grid classes were replaced
   with the fw-* grid, e.g. the page article now uses fw-col-12.) Keep in sync
   if a template starts using another Bootstrap utility (audit: grep class="").
   ========================================================================== */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.align-items-center { align-items: center !important; }
.w-100 { width: 100% !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.img-fluid { max-width: 100%; height: auto; }

/* Per-page Title Icon (Page Settings → Page Title / Hero). Inline before the
   heading text, brand colour, sized to the heading. Works for the <i> font/emoji
   markup and for an uploaded <img>. */
.entry-title__icon {
	color: currentColor; /* inherit the heading text colour (matches the Special Heading icons); --color-primary was Bootstrap blue */
	margin-right: 0.4em;
	font-size: 0.9em;
	line-height: 1;
	vertical-align: -0.05em;
}
.entry-title__icon.entry-title__icon,
img.entry-title__icon { display: inline-block; }
img.entry-title__icon { width: auto; height: 0.9em; vertical-align: -0.08em; }
.entry-content { margin-bottom: 2rem; }
.entry-content > * + * { margin-top: 1rem; }
.entry-footer { padding-top: 1rem; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.875rem; }

.post-thumbnail { display: block; margin-bottom: 1.5rem; }
.post-thumbnail img { width: 100%; height: auto; border-radius: var(--radius); }

/* --- Pagination --- */
.pagination,
.posts-navigation,
.post-navigation {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2rem 0;
}
.page-numbers,
.posts-navigation .nav-links a,
.post-navigation .nav-links a {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 0.875rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	color: var(--color-text);
	text-decoration: none;
}
.page-numbers.current,
.page-numbers:hover {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}

/* --- Comments
   Designed against WordPress's default Walker_Comment markup
   (style=ul, short_ping=true). Author + metadata flow as one row;
   content sits below. Nested replies indent + add a left rail.
   --- */
.comments-area {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}
.comments-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 1.5rem;
}
.comment-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
}
.comment-list .comment {
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--color-border);
}
.comment-list .comment:first-child { padding-top: 0; }
.comment-list .comment:last-child  { padding-bottom: 0; border-bottom: 0; }
.comment-list .children {
	list-style: none;
	padding-left: 1.5rem;
	margin-top: 1.5rem;
	border-left: 2px solid var(--color-border);
}
.comment-list .children .comment:first-child { padding-top: 0; }

/* Article wrapper (no grid — natural flow) */
.comment-body { display: block; }

/* Meta row: avatar + author + says + permalink date + edit-link, all inline */
.comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.625rem;
	margin-bottom: 0.875rem;
	font-size: 0.875rem;
	line-height: 1.4;
}
.comment-author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	min-width: 0;
}
.comment-author .avatar {
	border-radius: 50%;
	flex-shrink: 0;
}
.comment-author .fn,
.comment-author b {
	font-weight: 600;
	color: var(--color-text);
	font-style: normal;
}
.comment-author .fn a,
.comment-author b a {
	color: inherit;
	text-decoration: none;
}
.comment-author .fn a:hover { color: var(--color-primary); }
.comment-author .says {
	color: var(--color-muted);
}
.comment-metadata {
	color: var(--color-muted);
	font-size: 0.8125rem;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}
.comment-metadata a {
	color: inherit;
	text-decoration: none;
}
.comment-metadata a:hover { color: var(--color-text); }
.comment-metadata .edit-link::before { content: "·"; margin-right: 0.5rem; opacity: 0.6; }

/* Awaiting moderation badge */
.comment-awaiting-moderation {
	display: inline-block;
	background-color: rgba(255, 193, 7, 0.15);
	color: #856404;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius);
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
}

/* Body */
.comment-content {
	color: var(--color-text);
}
.comment-content > * + * { margin-top: 0.75rem; }
.comment-content p { margin: 0 0 0.75rem; }
.comment-content p:last-child { margin-bottom: 0; }

/* Reply link — small pill button */
.reply { margin-top: 0.875rem; }
.comment-reply-link {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background-color: transparent;
	color: var(--color-primary);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: 0.8125rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.comment-reply-link:hover,
.comment-reply-link:focus-visible {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
	text-decoration: none;
}

/* Comment navigation (older/newer) */
.comment-navigation,
.navigation.comment-navigation {
	margin: 1.5rem 0;
	font-size: 0.875rem;
}
.comment-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

/* "Comments are closed" notice */
.no-comments {
	color: var(--color-muted);
	font-style: italic;
	padding: 1rem 0;
}

/* ---- Comment form ---- */
#respond {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-border);
}
#reply-title,
.comment-reply-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}
.comment-reply-title small {
	font-size: 0.8125rem;
	font-weight: 400;
	margin-left: 0.75rem;
}
.comment-reply-title small a { color: var(--color-muted); }

#commentform { margin-top: 1rem; }
#commentform p { margin: 0 0 1rem; }
#commentform label {
	display: block;
	font-weight: 500;
	font-size: 0.875rem;
	margin-bottom: 0.375rem;
	color: var(--color-text);
}
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea {
	width: 100%;
	padding: 0.625rem 0.875rem;
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.5;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#commentform input[type="text"]:focus,
#commentform input[type="email"]:focus,
#commentform input[type="url"]:focus,
#commentform textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}
#commentform textarea {
	min-height: 140px;
	resize: vertical;
}
#commentform .form-submit { margin-top: 1.25rem; margin-bottom: 0; }
#commentform input[type="submit"],
.form-submit input[type="submit"] {
	background-color: var(--color-primary);
	color: #fff;
	border: 0;
	padding: 0.625rem 1.5rem;
	border-radius: var(--radius);
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}
#commentform input[type="submit"]:hover,
.form-submit input[type="submit"]:hover {
	/* Stay in the button's own color family — NEVER the menu token (white on
	   dark-header sites = invisible button). Brightness gives the hover cue
	   for any brand color. */
	background-color: var(--color-primary, #0d6efd);
	filter: brightness(0.9);
	transform: translateY(-1px);
}
#commentform .comment-notes,
#commentform .logged-in-as,
.form-allowed-tags {
	font-size: 0.8125rem;
	color: var(--color-muted);
}
.form-allowed-tags code {
	background-color: rgba(127, 127, 127, 0.12);
	padding: 0.125rem 0.375rem;
	border-radius: 0.125rem;
	font-size: 0.8125rem;
	word-break: break-word;
}
#cancel-comment-reply-link {
	display: inline-block;
	margin-left: 0.75rem;
	font-size: 0.8125rem;
	color: var(--color-muted);
}

/* --- Search / 404 --- */
.error-404 { padding: 3rem 0; text-align: center; }
.error-404 .page-title { margin-bottom: 1rem; }

/* ========================================================================
   8. FORMS (minimal — Bootstrap handles most)
   ======================================================================== */
.search-form { display: flex; gap: 0.5rem; max-width: 480px; margin: 0 auto; }
.search-form .search-field {
	flex: 1 1 auto;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}
.search-form .search-submit {
	padding: 0.5rem 1rem;
	background-color: var(--color-primary);
	color: #fff;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

/* ========================================================================
   8a. SCROLL-TO-TOP BUTTONS
   ======================================================================== */

/* --- Floating button (Misc > Scroll to Top) --- */
.scroll-to-top {
	position: fixed;
	z-index: 1040;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.625rem 0.875rem;
	background-color: var(--color-primary);
	color: #ffffff;
	border: 0;
	border-radius: var(--radius);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--transition-base), transform var(--transition-base);
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1;
}
/* Corner placement reads --stack-position (set by JS when buttons collide). */
.scroll-to-top--right { bottom: calc(1.5rem + var(--stack-position, 0) * var(--stack-step)); right: 1.5rem; }
.scroll-to-top--left  { bottom: calc(1.5rem + var(--stack-position, 0) * var(--stack-step)); left:  1.5rem; }
.scroll-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.scroll-to-top:hover,
.scroll-to-top:focus-visible {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.scroll-to-top svg { display: block; width: 1.1em; height: 1.1em; }
.scroll-to-top__label { white-space: nowrap; }

/* --- Scroll-to-top designs --- */
.scroll-to-top--square  { border-radius: 6px; }
.scroll-to-top--pill    { border-radius: 999px; }
.scroll-to-top--circle,
.scroll-to-top--ring    { width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; justify-content: center; }
/* Outline: transparent fill, coloured border + icon (overrides the generated bg rule). */
.scroll-to-top--outline { background-color: transparent !important; border: 2px solid currentColor; box-shadow: none; }
.scroll-to-top--outline:hover,
.scroll-to-top--outline:focus-visible { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
/* Icon-only designs hide the text label. */
.scroll-to-top--circle .scroll-to-top__label,
.scroll-to-top--square .scroll-to-top__label,
.scroll-to-top--ring .scroll-to-top__label { display: none; }

/* Sizes */
.scroll-to-top--size-small  { font-size: 0.8rem; padding: 0.5rem 0.7rem; }
.scroll-to-top--size-large  { font-size: 1rem;   padding: 0.8rem 1.1rem; }
.scroll-to-top--size-small.scroll-to-top--circle,
.scroll-to-top--size-small.scroll-to-top--ring  { width: 2.25rem; height: 2.25rem; padding: 0; }
.scroll-to-top--size-large.scroll-to-top--circle,
.scroll-to-top--size-large.scroll-to-top--ring  { width: 3.25rem; height: 3.25rem; padding: 0; }

/* Progress ring (design = ring): a circle that fills with scroll progress (scroll-top.js). */
.scroll-to-top--ring { overflow: visible; }
.scroll-to-top__ring { position: absolute; inset: -4px; pointer-events: none; }
.scroll-to-top__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-to-top__ring-track { fill: none; stroke: currentColor; opacity: 0.25; stroke-width: 2.5; }
.scroll-to-top__ring-fill  { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dashoffset 0.1s linear; }

/* --- Inline footer-builder button (back_to_top element) --- */
.footer-back-to-top {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.875rem;
	color: inherit;
	text-decoration: none;
	border: 1px solid currentColor;
	border-radius: var(--radius);
	line-height: 1;
	transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.footer-back-to-top:hover,
.footer-back-to-top:focus-visible {
	opacity: 0.85;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.08);
}
.footer-back-to-top svg { display: block; width: 1em; height: 1em; }

/* ========================================================================
   8b. DARK MODE
   Bootstrap 5.3 ships its own [data-bs-theme="dark"] palette for forms,
   buttons, dropdowns, alerts, etc. — those swap automatically when the
   attribute is set on <html>. This block re-binds our custom CSS
   properties to a coordinated dark palette under the same selector.
   ======================================================================== */
:root[data-bs-theme="dark"] {
	--color-bg:           #1a1a1a;
	--color-text:         #e9ecef;
	--color-muted:        #adb5bd;
	--color-border:       rgba(255, 255, 255, 0.12);

	--header-bg:          transparent; /* unset = no fill (shows the dark page behind); a set colour overrides */
	--header-sticky-bg:   rgba(33, 37, 41, 0.95);
	--header-shadow:      0 2px 8px rgba(0, 0, 0, 0.4);

	--topbar-bg:          #0d0e10;
	--topbar-color:       #e9ecef;

	--footer-bg:          #0d0e10;
	--footer-color:       #adb5bd;
	--footer-link-color:  #f0f0f0;

	--menu-link-color:    #e9ecef;
	--menu-link-hover:    #ffc107;
	--menu-dropdown-bg:   #2b2f33;
	--menu-dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);

	--drawer-bg:          #1a1a1a;
	--drawer-color:       #f1f1f1;
	--scrim-bg:           rgba(0, 0, 0, 0.7);

	/* Site container backgrounds (introduced in Phase 2; must flip in dark mode
	   or body keeps its light bg even after JS sets data-bs-theme="dark"). */
	--site-bg-color:      #0d0e10;
	--preloader-bg:       #ffffff;
}

/* --- Floating theme-mode toggle --- */
.theme-toggle {
	position: fixed;
	z-index: 1041;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.625rem;
	background-color: var(--color-bg);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	line-height: 1;
	transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast);
}
/* Corner placement reads --stack-position (set by JS when buttons collide). */
.theme-toggle--bottom-left   { bottom: calc(1.5rem + var(--stack-position, 0) * var(--stack-step)); left:  1.5rem; }
.theme-toggle--bottom-right  { bottom: calc(1.5rem + var(--stack-position, 0) * var(--stack-step)); right: 1.5rem; }
.theme-toggle--top-left      { top: calc(var(--admin-bar-offset) + 1.5rem + var(--stack-position, 0) * var(--stack-step)); left:  1.5rem; }
.theme-toggle--top-right     { top: calc(var(--admin-bar-offset) + 1.5rem + var(--stack-position, 0) * var(--stack-step)); right: 1.5rem; }
.theme-toggle:hover,
.theme-toggle:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.theme-toggle svg { display: block; width: 1.1em; height: 1.1em; }

/* Show the icon that matches the user's preference (data-theme-mode). */
.theme-toggle__icon { display: none; }
[data-theme-mode="light"] .theme-toggle__icon--light { display: inline-block; }
[data-theme-mode="dark"]  .theme-toggle__icon--dark  { display: inline-block; }
[data-theme-mode="auto"]  .theme-toggle__icon--auto  { display: inline-block; }

.theme-toggle__label { display: none; }
.theme-toggle--with-label .theme-toggle__label { display: inline; }
[data-theme-mode="light"] .theme-toggle__label::after { content: attr(data-label-light); }
[data-theme-mode="dark"]  .theme-toggle__label::after { content: attr(data-label-dark); }
[data-theme-mode="auto"]  .theme-toggle__label::after { content: attr(data-label-auto); }

/* Hide the button until the boot script confirms which mode applies. */
html:not([data-theme-mode]) .theme-toggle { visibility: hidden; }

/* ========================================================================
   10. SITE CONTAINER  (General → Layout sub-tab)
   Body classes: site-full / site-boxed / site-framed  +  site-boxed--{align}
   Variables consumed: --site-bg-color, --site-bg-image, --site-bg-pattern,
                       --site-bg-position, --site-bg-repeat, --site-bg-size,
                       --site-bg-attachment, --site-max-width, --site-margin,
                       --site-frame-width, --site-frame-color
   The site background is driven by the General Layout "Site Background"
   (Background Pro) field; theme-vars.php emits the vars above from it.
   ======================================================================== */
body {
	background-color: var(--site-bg-color, #ffffff);
	/* Two layers: the Site Background image (top) + the Background Pattern Overlay
	   (bottom, repeating). Each property carries a value per layer so the pattern
	   always tiles top-left regardless of the site image's own settings. When a
	   layer is unset its var falls back to `none`, leaving an empty layer. */
	background-image:      var(--site-bg-image, none),        var(--site-bg-pattern, none);
	background-position:   var(--site-bg-position, top left), top left;
	background-repeat:     var(--site-bg-repeat, repeat),     repeat;
	background-size:       var(--site-bg-size, auto),         auto;
	background-attachment: var(--site-bg-attachment, fixed),  fixed;
}

/* --- Full width (default) — no constraints on #page --- */
body.site-full #page { width: 100%; max-width: 100%; }

/* --- Boxed: centered (or aligned) fixed-width container --- */
body.site-boxed {
	padding-top: var(--site-margin);
	padding-bottom: var(--site-margin);
}
body.site-boxed #page {
	width: 100%;
	max-width: var(--site-max-width);
	background-color: var(--color-bg);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08);
	margin-left: auto;
	margin-right: auto;
}
body.site-boxed--left  #page { margin-left: 0; }
body.site-boxed--right #page { margin-right: 0; }

/* --- Framed: decorative border around the entire viewport --- */
body.site-framed {
	padding: var(--site-frame-width);
	background-color: var(--site-frame-color, #222222);
	min-height: 100vh;
}
body.site-framed #page {
	min-height: calc(100vh - (var(--site-frame-width) * 2));
	background-color: var(--color-bg);
}

/* Background pattern overlay is applied as the 2nd `background-image` layer on
   `body` above, via the `--site-bg-pattern` variable (set by theme-vars.php from
   the General → Layout "Background Pattern Overlay" field). Works for both the
   bundled presets and a user-uploaded tiling image. */

/* ========================================================================
   11. SPACING SCALE
   Body classes: spacing-compact (×0.75) / spacing-cozy (×1) / spacing-spacious (×1.5)
   Variable consumed: --section-spacing-scale (set per body class via theme-vars.php)
   ======================================================================== */
.entry-content      { margin-bottom: calc(2rem * var(--section-spacing-scale)); }
/* Page-builder pages: each section owns its own vertical rhythm, so drop the
   prose bottom margin that would otherwise leave a dead gap between the last
   section and the footer. */
body.unyson.page-builder .entry-content { margin-bottom: 0; }
.entry-header       { margin-bottom: calc(1.5rem * var(--section-spacing-scale)); }
.entry-content > * + * { margin-top: calc(1rem * var(--section-spacing-scale)); }
.entry-footer       { padding-top: calc(1rem * var(--section-spacing-scale)); }
.pagination,
.posts-navigation,
.post-navigation    { margin: calc(2rem * var(--section-spacing-scale)) 0; }
.comments-area      { margin-top: calc(2rem * var(--section-spacing-scale)); }
/* Footer vertical padding — on the inner .footer__body (pre/main/post) so it stays
   ABOVE the copyright bar; the copyright sits flush. See footer-builder.php. */
.footer__body       {
	padding-top:    calc(var(--footer-pad-top)    * var(--section-spacing-scale));
	padding-bottom: calc(var(--footer-pad-bottom) * var(--section-spacing-scale));
}
/* Fallback: a footer with NO pre/main/post sections (e.g. copyright only) has no
   .footer__body wrapper, so the padding above would have nothing to live on. Apply it
   to the footer itself in that case. :not(:has()) guarantees it never doubles with the
   rule above when a body IS present. */
.footer:not(:has(.footer__body)) {
	padding-top:    calc(var(--footer-pad-top)    * var(--section-spacing-scale));
	padding-bottom: calc(var(--footer-pad-bottom) * var(--section-spacing-scale));
}

/* Container horizontal padding.
   IMPORTANT: the theme does NOT always load Bootstrap's CSS, so we must define
   `.container` side padding ourselves — relying on Bootstrap's own
   `.container { padding: calc(--bs-gutter-x * .5) }` left the container with ZERO
   padding (logo + content flush against the edge). `--bs-gutter-x` stays at the
   normal grid value for Bootstrap .row/.col (when present); the side padding is a
   generous, responsive default (~20px on phones up to ~32px on desktop). The
   Container Gutter option overrides it; blank = this responsive default. */
.container,
.container-fluid,
.container-lg,
.container-xl,
.container-xxl {
	--bs-gutter-x: 1.5rem;
	padding-right: var(--container-gutter, clamp(1.25rem, 3vw, 2rem));
	padding-left:  var(--container-gutter, clamp(1.25rem, 3vw, 2rem));
}

/* ========================================================================
   12. UX POLISH  (Preloader, Scroll Progress; Smooth Scroll handled via inline <style>)
   ======================================================================== */

/* --- Preloader: full-screen splash, JS removes preloader-active body class on window.load --- */
.preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--preloader-bg);
	transition: opacity 400ms ease, visibility 400ms;
}
body:not(.preloader-active) .preloader {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
.preloader__spinner {
	width: 48px;
	height: 48px;
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: unysonplus-spin 800ms linear infinite;
}
.preloader__logo {
	max-width: 200px;
	height: auto;
	animation: unysonplus-pulse 1.4s ease-in-out infinite;
}
.preloader__logo-text {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	animation: unysonplus-pulse 1.4s ease-in-out infinite;
}
@keyframes unysonplus-spin { to { transform: rotate(360deg); } }
@keyframes unysonplus-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}

/* Prevent body scroll while preloader is active */
body.preloader-active { overflow: hidden; }

/* --- Scroll Progress Bar --- */
.scroll-progress {
	position: fixed;
	top: var(--admin-bar-offset);
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9998;
	pointer-events: none;
	background-color: transparent;
}
.scroll-progress__bar {
	height: 100%;
	width: 100%;
	background-color: var(--scroll-progress-color, var(--color-primary, #0d6efd));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 80ms linear;
}

/* ========================================================================
   13. SIDEBAR LAYOUT  (Phase 5)
   Body classes: sidebar-none / sidebar-left / sidebar-right (theme-wide default)
   Wrapper: .with-sidebar  +  .has-sidebar (only when sidebar widget area is active)
   Variable consumed: --sidebar-width
   ======================================================================== */
.with-sidebar { display: block; }

/* Content/sidebar gap, sticky sidebar, reading width — General → Layout. */
body.sidebar-right .with-sidebar.has-sidebar,
body.sidebar-left  .with-sidebar.has-sidebar { gap: var(--content-sidebar-gap, 2.5rem); }
@media (min-width: 992px) {
	body.sidebar-sticky .with-sidebar.has-sidebar > .sidebar {
		position: sticky; top: var(--sticky-sidebar-top, 24px); align-self: start;
	}
}
body.single .with-sidebar:not(.has-sidebar) > main,
body.page   .with-sidebar:not(.has-sidebar) > main {
	max-width: var(--prose-max-width, none);
	margin-inline: auto;
}

body.sidebar-right .with-sidebar.has-sidebar,
body.sidebar-left  .with-sidebar.has-sidebar {
	display: grid;
	gap: 2rem;
	align-items: start;
}
body.sidebar-right .with-sidebar.has-sidebar {
	grid-template-columns: minmax(0, 1fr) var(--sidebar-width);
}
body.sidebar-left  .with-sidebar.has-sidebar {
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

/* Sidebar is rendered after <main> in the DOM (for reading-order accessibility).
   When sidebar-left is active, flip the visual order. */
body.sidebar-left .with-sidebar.has-sidebar > .sidebar { order: -1; }

/* Stacking (General → Sidebar → Responsive & Sticky). The layout stacks at the
   chosen breakpoint — body.sidebar-collapse-lg (992px, default) or -md (768px).
   sidebar-mobile-above flips the sidebar above content; sidebar-hide-mobile drops it. */
@media (max-width: 991.98px) {
	body.sidebar-collapse-lg .with-sidebar.has-sidebar {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body.sidebar-collapse-lg .with-sidebar.has-sidebar > .sidebar { order: 0; margin-top: 2rem; }
	body.sidebar-collapse-lg.sidebar-mobile-above .with-sidebar.has-sidebar > .sidebar { order: -1; margin-top: 0; margin-bottom: 2rem; }
	body.sidebar-collapse-lg.sidebar-hide-mobile .with-sidebar.has-sidebar > .sidebar { display: none; }
}
@media (max-width: 767.98px) {
	body.sidebar-collapse-md .with-sidebar.has-sidebar {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	body.sidebar-collapse-md .with-sidebar.has-sidebar > .sidebar { order: 0; margin-top: 2rem; }
	body.sidebar-collapse-md.sidebar-mobile-above .with-sidebar.has-sidebar > .sidebar { order: -1; margin-top: 0; margin-bottom: 2rem; }
	body.sidebar-collapse-md.sidebar-hide-mobile .with-sidebar.has-sidebar > .sidebar { display: none; }
}

/* Sidebar visual baseline. Styling vars (bg/padding/border/radius, widget spacing +
   title) come from General → Sidebar → Styling (theme-vars.php); each defaults to a
   no-op so an unstyled sidebar looks exactly as before. */
.sidebar {
	min-width: 0; /* lets grid track shrink */
	background-color: var(--sidebar-bg, transparent);
	padding: var(--sidebar-padding, 0);
	border: var(--sidebar-border-width, 0) var(--sidebar-border-style, solid) var(--sidebar-border-color, var(--color-border));
	border-radius: var(--sidebar-radius, 0);
}
.sidebar .widget + .widget { margin-top: var(--widget-spacing, 1.5rem); }
.sidebar .widget-title {
	font-size: var(--widget-title-size, 1rem);
	font-weight: var(--widget-title-weight, 600);
	text-transform: var(--widget-title-transform, none);
	color: var(--widget-title-color, inherit);
	margin: 0 0 0.75rem;
	letter-spacing: 0.02em;
}
.sidebar .widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.sidebar .widget ul li {
	padding: 0.375rem 0;
	border-bottom: 1px solid var(--color-border);
}
.sidebar .widget ul li:last-child { border-bottom: 0; }


/* ========================================================================
   14. ALTERNATE HEADER LAYOUTS — moved to per-mode stylesheets
   assets/css/header/modes/{vertical,off-canvas,overlay-panel,overlay-radial}.css,
   loaded only for the active mode by inc/static.php. The shared drawer base
   (mobile menu) stays above; only mode-specific rules moved out.
   ======================================================================== */

/* ========================================================================
   9. UTILITIES
   ======================================================================== */
.site-header--transparent {
	background-color: transparent;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
body.transparent .site-header { background-color: transparent; }

/* Hide focus ring for mouse users; keep for keyboard */
:focus:not(:focus-visible) { outline: none; }

/* ========================================================================
   15. PAGE TEMPLATE WIDTH VARIANTS
   Wrapper classes emitted by unysonplus_main_wrapper_open() based on the
   resolved 'width' override (per-page meta → template → global → default).
   ======================================================================== */
.with-sidebar.layout-width-narrow > main {
	max-width: 720px;
	margin-inline: auto;
}
.with-sidebar.layout-width-wide > main {
	max-width: 100%;
}
.with-sidebar.layout-width-full {
	display: block;
}
.with-sidebar.layout-width-full > main {
	max-width: 100vw;
	padding-inline: 0;
}

/* Landing template — strip header, footer, and content padding for a true
   edge-to-edge campaign page. Hide is also enforced server-side via the
   hide_header / hide_footer overrides, but this guards against any other
   template that adds the class. */
body.page-layout-landing .site-content { padding-block: 0; }
body.page-layout-landing #masthead,
body.page-layout-landing #colophon { display: none; }

/* ========================================================================
   16. PAGE HERO HEADER
   Emitted by unysonplus_render_page_hero() when a header_image is set.
   Markup:  .page-hero[.page-hero--<height>][.page-hero--align-<pos>]
              .page-hero__overlay     (when overlay color + opacity > 0)
              .page-hero__inner.container
                .page-hero__title (h1.entry-title)
   ======================================================================== */
.page-hero {
	position: relative;
	display: flex;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}
.page-hero--auto       { min-height: 280px; padding-block: 4rem; }
.page-hero--small      { min-height: 220px; }
.page-hero--medium     { min-height: 380px; }
.page-hero--large      { min-height: 560px; }
.page-hero--fullscreen { min-height: 100vh; }

.page-hero--align-top    { align-items: flex-start; padding-top: 4rem; }
.page-hero--align-center { align-items: center; }
.page-hero--align-bottom { align-items: flex-end; padding-bottom: 4rem; }

.page-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}
.page-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
}
.page-hero__title {
	color: inherit;
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

/* The hero replaces the classic .entry-header — strip the entry's own padding
   so it sits flush against following .entry-content. */
.has-page-hero .entry-header { display: none; }

@media (max-width: 767.98px) {
	.page-hero--large      { min-height: 380px; }
	.page-hero--fullscreen { min-height: 70vh; }
}

/* ============================================================
 * Print — drop site chrome, print readable content only.
 * ============================================================ */
@media print {
	#masthead, .site-header, .header-topbar, .header-bottombar,
	#colophon, .site-footer, .footer,
	#sidebar, .sidebar, .widget-area,
	.primary-navigation-drawer, .scroll-to-top, .scroll-progress,
	.preloader, #unysonplus-preloader, .comment-respond, .entry-footer,
	.no-print {
		display: none !important;
	}
	body { background: #fff !important; color: #000 !important; }
	.site-main, .content-area, .container, .container-fluid {
		width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important;
	}
	a, .entry-content a { color: #000 !important; text-decoration: underline; }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
	img { max-width: 100% !important; }
}

/* ========================================================================
   13. REDUCED MOTION  (respect the OS "reduce motion" accessibility setting)
   ========================================================================
   Honors prefers-reduced-motion: near-instant transitions/animations, no
   smooth scrolling, and the preloader / scroll-progress bar stop easing.
   The WCAG-recommended catch-all plus a few theme-specific overrides. JS that
   scrolls smoothly checks the same media query at runtime. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	html { scroll-behavior: auto !important; }
	/* Preloader disappears instantly instead of fading. */
	.preloader { transition: none !important; }
	/* Scroll-progress bar still indicates position, just without easing. */
	.scroll-progress, .scroll-progress-bar { transition: none !important; }
}