@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.6.52
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;

	/* Glass Surface token (plugin-inactive fallback; theme-vars.php overrides at runtime). */
	--glass-blur:         10px;
	--glass-bg:           rgba(255, 255, 255, 0.6);
	--glass-border:       1px solid rgba(255, 255, 255, 0.35);
	--glass-radius:       var(--radius-lg, 16px);
	--glass-shadow:       0 8px 32px rgba(0, 0, 0, 0.12);

	/* 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;
}

/* Glass Surface utility — apply the shared frosted-glass token to any element. Opt-in
   (add the class); every glass panel then tracks the one --glass-* token set above. The
   @supports guard keeps a readable solid-ish fill where backdrop-filter is unsupported. */
.glass-surface {
	background: var(--glass-bg);
	border: var(--glass-border);
	border-radius: var(--glass-radius);
	box-shadow: var(--glass-shadow);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.glass-surface {
		-webkit-backdrop-filter: blur(var(--glass-blur));
		backdrop-filter: blur(var(--glass-blur));
	}
}

body.admin-bar { --admin-bar-offset: 32px; }
@media (max-width: 782px) {
	body.admin-bar { --admin-bar-offset: 46px; }
	/* On mobile the WP admin bar is position:absolute (it scrolls away with the page), NOT fixed like
	   on desktop. So ONLY once the header is STUCK (scrolled — the admin bar has left the viewport)
	   should it hug the very top; reserving the 46px offset then would leave a gap above it. AT REST
	   (not stuck) the header keeps the 46px offset so it sits BELOW the admin bar, never behind it.
	   (0,4,1) here outranks the theme's `.site-header.header-sticky.site-header--transparent.is-stuck`
	   (0,4,0). Desktop is unaffected — its admin bar is fixed, so the 32px offset stays in both states. */
	body.admin-bar .site-header.header-sticky.is-stuck { top: 0; }
}

/* ========================================================================
   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; }

/* Paragraph rhythm lives BETWEEN paragraphs: the first one in any container carries no top margin and
   the last one no bottom margin, so a container's own padding (a column, a card, a boxed text block) is
   the only inner spacing. The UA default `margin-block-start: 1em` would otherwise add dead space at the
   top of every padded box. A paragraph after a heading is not :first-child, so heading rhythm is untouched.
   (Deliberately scoped to <p> — NOT a global * { margin: 0 } reset, which would strip every element's rhythm.) */
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

a { text-decoration: none; }
/* Link color for real links only — NOT buttons. A button (.btn) controls its own text color via its
   Button Preset; without this exclusion the global link color bleeds into any preset that doesn't set
   an explicit color (e.g. an outline preset), tinting the label with --color-primary. */
/* Specificity is held at (0,0,1) — the same as a bare `a` — via :where(), so ANY classed rule (a
   shortcode's link, pagination, a card title, a child theme's `.x a`) overrides it with no !important
   and no specificity race. The old `a:not(.btn)` weighed (0,1,1), and its :hover twin (0,2,1) beat
   component hovers like `.page-numbers:hover` (0,2,0) on every build. */
a:where(:not(.btn)) { color: var(--color-primary); }
/* 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:where(:not(.btn):hover, :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; }

/* Button BASE for theme-rendered buttons (header CTA, footer / drawer buttons, widget buttons). The
   `.btn` box model (display, padding, font-size, line-height, border, radius) ships with the plugin's
   Button shortcode stylesheet, which only loads on pages that contain a Button element — so on any
   other page the header CTA and footer buttons collapsed to bare inline links. This is the same
   baseline, with the same values, at ZERO specificity (:where): when the shortcode stylesheet also
   loads it changes nothing, and a Button Colour / Size Preset, the shortcode's own `.btn` rules or a
   child theme always win over it regardless of load order. */
:where(.btn) {
	display: inline-block;
	font-family: inherit;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	border-radius: 0.375rem;
	color: inherit;
	border: 1px solid #ced4da;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
:where(.btn:hover) { color: inherit; border-color: #adb5bd; }
:where(.btn-lg) { padding: 0.5rem 1rem; font-size: 1.25rem; border-radius: 0.5rem; }
:where(.btn-sm) { padding: 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 0.25rem; }

/* 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; }
/* The title opens the card body; the body's own padding sets the gap, so drop the
   global heading top margin (it pushed list titles below the top of the image). */
.post-entry .entry-header > .entry-title { margin-top: 0; }

/* 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,
.entry-header > .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, .entry-header > .entry-meta a { color: inherit; }
.post-entry .entry-meta a:hover, .entry-header > .entry-meta a:hover { color: var(--color-primary, #0d6efd); }
.post-entry .entry-meta .meta-sep, .entry-header > .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); }

/* Single prev / next: two equal cards side by side (stacked on phones), small muted label
   with an arrow over the title; the card's border takes the primary colour on hover. */
.post-navigation { display: block; margin: 2.5rem 0; padding-top: 1.5rem; border-top: 1px solid var(--color-border, #e5e5e5); }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.post-navigation .nav-next { grid-column: 2; text-align: right; }
.post-navigation .nav-links a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.25rem;
	border: 1px solid var(--color-border, #e5e5e5); border-radius: var(--radius, .5rem); color: var(--color-text); text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease; }
.post-navigation .nav-links a:hover, .post-navigation .nav-links a:focus-visible { border-color: var(--color-primary); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.post-navigation .nav-label { display: block; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted, #6c757d); }
.post-navigation .nav-previous .nav-label::before { content: "\2190\00a0"; }
.post-navigation .nav-next .nav-label::after { content: "\00a0\2192"; }
.post-navigation .nav-title { font-weight: 600; line-height: 1.35; }
.post-navigation .nav-links a:hover .nav-title { color: var(--color-primary); }
@media (max-width: 600px) {
	.post-navigation .nav-links { grid-template-columns: 1fr; }
	.post-navigation .nav-next { grid-column: 1; }
}

/* ---- 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);
}
/* The stuck DROP SHADOW is a legacy default that predates the two-state chrome in
   header-footer-builder.css. Left unconditional it (a) painted a shadow on headers whose Header Shadow
   and Shadow-on-scroll options are both OFF, and (b) overwrote the Border hairline, which is an inset
   box-shadow — and box-shadow does not stack across rules, so the later declaration simply won and the
   scrolled hairline vanished (a real-site audit). It now yields whenever the explicit chrome options own
   the stuck look; those rules draw the border, the shadow, or both composed. */
.site-header.header-sticky.is-stuck:not(.site-header--border):not(.site-header--shadow):not(.site-header--scroll-change):not(.site-header--scroll-border):not(.site-header--scroll-shadow) {
	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); flex-shrink: 0; }
/* Don't squeeze the CTA/action buttons: keep the end column at its content width and let the (growable)
   nav column yield space instead — otherwise a wide CTA gets pushed past the container into a scrollbar. */
.header-main .header-col--center { min-width: 0; flex: 1 1 auto; }
.header-main .header-col--center .primary-menu { flex-wrap: wrap; }
@media (min-width: 992px) {
	.header-main .header-col--center { display: flex; }
}
/* Laptop-width breathing room: between the nav-collapse breakpoint (992px) and roomy desktops, a full
   menu plus a large CTA can run past the container and trip a horizontal scrollbar. Trim the header
   gaps and the big CTA's padding in that range so everything fits — no content is hidden or clipped.
   (Scoped to .header-main and the header CTA, so it never touches page buttons or the top/bottom bars.) */
@media (min-width: 992px) and (max-width: 1400px) {
	.header-main .sc-nav .primary-menu { gap: 1rem; }
	.header-main .header-row { gap: 0.75rem; }
	.header-main .header-col--end { gap: 0.5rem; }
	.header-main .header-cta-btn.btn-lg { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ========================================================================
   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); }
/* ...and the same for an SVG mark. The rule above sizes an icon FONT (<i>), which is what the picker
   produces for a hand-built site; a converted site's marks arrive as inline <svg>, which the rule never
   touched. They then drew at their own intrinsic size -- measured 24px inside a 40px chip, against the
   18px the 0.46 ratio intends -- so every converted social row looked crowded. */
.social-style-circle .header-social-icon svg,
.social-style-circle-outline .header-social-icon svg,
.social-style-rounded .header-social-icon svg,
.social-style-square .header-social-icon svg,
.social-style-square-outline .header-social-icon svg {
	width: calc(var(--social-size, 2.25rem) * 0.46);
	height: 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 */
/* The ring colour is its own token. It was locked to currentColor, which ties the ring to the GLYPH --
   a source commonly draws a faint ring (white at 0.1) around a much brighter mark (white at 0.7), and
   that is unreachable while the two share one colour. Falls back to currentColor, so nothing changes
   for a site that never sets it. The fill falls back to transparent, so an outline chip that also
   declares a background (a faint glass ring) can keep both. */
.social-style-circle-outline .header-social-icon,
.social-style-square-outline .header-social-icon {
	border: 1px solid var(--social-icon-border, currentColor);
	background-color: var(--social-icon-bg, 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-family: var(--site-title-font, var(--font-heading, inherit));
	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;
}

/* ---- Modifiers (stack on any primary) ---- */

/* Bold — the label goes bold on hover / current. */
body.menu-mod-bold .site-header .primary-menu > .menu-item > a:hover,
body.menu-mod-bold .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-mod-bold .site-header .primary-menu > .current-menu-item > a,
body.menu-mod-bold .site-header .primary-menu > .current-menu-ancestor > a { font-weight: 700; }

/* Spread — letter-spacing widens slightly on hover / current. */
body.menu-mod-spread .site-header .primary-menu > .menu-item > a { transition: color var(--transition-fast), letter-spacing var(--transition-fast); }
body.menu-mod-spread .site-header .primary-menu > .menu-item > a:hover,
body.menu-mod-spread .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-mod-spread .site-header .primary-menu > .current-menu-item > a,
body.menu-mod-spread .site-header .primary-menu > .current-menu-ancestor > a { letter-spacing: 0.045em; }

/* Uppercase — nav labels rendered in uppercase with a touch of tracking. */
body.menu-mod-uppercase .site-header .primary-menu > .menu-item > a { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.94em; }

/* Glow — a soft accent glow blooms behind the text on hover / current (shines on dark headers). */
body.menu-mod-glow .site-header .primary-menu > .menu-item > a { transition: color var(--transition-fast), text-shadow var(--transition-fast); }
body.menu-mod-glow .site-header .primary-menu > .menu-item > a:hover,
body.menu-mod-glow .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-mod-glow .site-header .primary-menu > .current-menu-item > a,
body.menu-mod-glow .site-header .primary-menu > .current-menu-ancestor > a { text-shadow: 0 0 12px var(--menu-link-hover); }

/* Fade rest — non-active items rest slightly dimmed, full strength on hover / current (was the
   standalone "Fade" style; now a stackable modifier so it combines with any primary). */
body.menu-mod-fade-rest .site-header .primary-menu > .menu-item > a { opacity: var(--menu-fade-rest, 0.7); transition: opacity 0.2s ease; }
body.menu-mod-fade-rest .site-header .primary-menu > .menu-item > a:hover,
body.menu-mod-fade-rest .site-header .primary-menu > .menu-item > a:focus-visible,
body.menu-mod-fade-rest .site-header .primary-menu > .menu-item.current-menu-item > a,
body.menu-mod-fade-rest .site-header .primary-menu > .menu-item.current-menu-ancestor > a { opacity: 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; }
/* The primary-navigation is inline-block in the desktop bar (shrinks to content); inside the drawer
   it must be a full-width block so each menu row spans the panel and the submenu-toggle's right:0
   lands at the far-right edge instead of just past the text. */
.primary-navigation-drawer .primary-navigation { display: block; width: 100%; }

.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;
}

/* Mega menu inside the drawer. The desktop mega panel is position:fixed / display:none (a hover
   flyout) — unreachable on touch. navigation.js now gives the mega parent an accordion toggle; here
   we re-render its `> .mega-menu` panel in place: reset the fixed positioning, stack the columns
   full-width, and reveal every column's links so the whole mega is browsable by tapping the parent. */
.primary-navigation-drawer .primary-menu .menu-item-has-mega-menu > .mega-menu {
	position: static !important; left: auto !important; right: auto !important;
	width: auto !important; min-width: 0 !important; max-width: none !important;
	display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important;
	box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
	padding: 0 0 0 1rem !important;
	max-height: 0; overflow: hidden; transition: max-height var(--transition-base);
}
.primary-navigation-drawer .primary-menu .menu-item-has-mega-menu.is-open > .mega-menu { max-height: 4000px; }
/* The category ROW shows whenever the panel is open (it carries .sub-menu, which the generic drawer
   rule would otherwise collapse). Each category column keeps its OWN accordion toggle + link list, so
   tapping the mega parent reveals the categories, and tapping a category reveals its links — the whole
   60-item mega isn't dumped at once. This respects the Submenu Behaviour setting (accordion default). */
.primary-navigation-drawer .primary-menu .mega-menu > .mega-menu-row { display: block !important; max-height: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
.primary-navigation-drawer .primary-menu .mega-menu .mega-menu-col { display: block !important; width: 100% !important; }
/* Each category's link list collapses by default and expands when the category is tapped (.is-open).
   The mega extension's frontend.css keeps mega-col sub-menus open (max-height:none) for the desktop
   panel, so override it here — except in Expand-all mode, where everything stays shown. */
.primary-navigation-drawer:not(.primary-navigation-drawer--submenu-expand-all) .primary-menu .mega-menu .mega-menu-col > .sub-menu { max-height: 0 !important; overflow: hidden !important; transition: max-height var(--transition-base); }
.primary-navigation-drawer .primary-menu .mega-menu .mega-menu-col.is-open > .sub-menu { max-height: 1000px !important; }
/* Expand-all mode: show the whole mega (columns + every link) statically, matching how expand-all
   treats normal sub-menus. */
.primary-navigation-drawer--submenu-expand-all .primary-menu .menu-item-has-mega-menu > .mega-menu { max-height: none !important; overflow: visible !important; }

/* 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 link hover. 90% of measured footers change the link COLOUR on hover; the theme only
   faded it, so a distinct hover colour was unreachable. --footer-link-hover falls back to the
   rest colour, and --footer-link-hover-opacity is set to 1 by theme-vars.php whenever a hover
   colour IS chosen (so the new colour is not dimmed by the legacy fade). */
.footer a:hover { color: var(--footer-link-hover, var(--footer-link-color)); opacity: var(--footer-link-hover-opacity, 0.85); }

/* Footer headings (Footer → Layout → Colors → Heading Color). Without this every footer heading wears
   the GLOBAL heading colour (--h1-color … --h6-color), unreadable on a dark footer. footer.php adds
   .footer--heading-color when a Heading Color is set, or automatically when the footer Background is
   dark (then white). Builder sections placed in the footer are page content with their own surfaces
   (often a light card), so their headings are left alone. One class + element = (0,1,1): beats the
   global hN rule but not a child theme's `.footer .hf-heading` / `footer.footer h2` override. */
.footer--heading-color :is(h1, h2, h3, h4, h5, h6):not(:where(.up-builder-section *)) {
	color: var(--footer-heading-color, #ffffff);
}

/* 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-heading-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 {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2rem 0;
}
.page-numbers,
.posts-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);
}

/* Reply link — small pill button */
.reply { margin-top: 0.875rem; }

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

@media (prefers-reduced-motion: reduce) {
	.error-404__btn { transition: none; }
	.error-404__btn--primary:hover,
	.error-404__btn--primary:focus-visible { transform: none; }
}

/* ========================================================================
   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; }

/* --- 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; }
/* Inline variant — the same control placed IN a header/footer column by the builder's
   `theme_toggle` element, so it flows with the row instead of floating in a page corner. */
.theme-toggle--inline { position: static; inset: auto; z-index: auto; box-shadow: none; }
.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)); }
/* Page-builder sections own their rhythm (padding-block above): the prose flow gap between them made every
   converted page 16–24px taller per section than its source (sections that abut in the source did not here). */
.entry-content.fw-page-builder-content > * + * { margin-top: 0; }
.entry-footer       { padding-top: calc(1rem * var(--section-spacing-scale)); }
.pagination,
.posts-navigation,
.post-navigation    { margin: calc(2rem * var(--section-spacing-scale)) 0; }
/* 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. */
/* NOT multiplied by --section-spacing-scale. That scale is a coarse density PRESET meant to nudge
   DEFAULT rhythm, and everywhere else it multiplies a hardcoded base (sections: calc(4rem * scale),
   .entry-content: calc(2rem * scale)). The footer's padding is not a default — it has its own explicit
   Padding Top/Bottom controls (Footer -> Layout -> Spacing) plus exact numeric overrides, so composing
   the two meant typing 80px and rendering 120px whenever density was "spacious" (x1.5) or 60px when
   "compact" (x0.75). One property, one control. */
.footer__body       {
	padding-top:    var(--footer-pad-top);
	padding-bottom: var(--footer-pad-bottom);
}
/* A PRE-footer that paints its own full-width background (a coloured CTA band, e.g. the burger source's "Craving a juicy
   burger?") sits FLUSH to the footer's top edge — the mirror of the flush copyright bar at the bottom — instead
   of the .footer__body top padding showing as a white gap above it. Pull the first bg-carrying section up by the
   body's top padding; its OWN section padding still gives it internal breathing room. Only the first child, so a
   plain (no-background) pre-footer / columns keep the normal top spacing. */
/* The pull must equal the padding it cancels — and that padding is deliberately NOT scaled (see the note
   above: "One property, one control"). Multiplying the pull by --section-spacing-scale while the padding
   stayed unscaled meant the band was yanked 1.5x its inset on a "spacious" site: measured, a 64px body
   padding against a -96px pull lifted a full-bleed pre-footer 32px ABOVE the footer's top edge, where it
   overlapped the section before it and swallowed its own height. */
.footer__body > .footer-section--has-bg:first-child {
	margin-top: calc(-1 * var(--footer-pad-top));
	/* …and give the padding back BELOW the band. The pull lifts the band flush to the footer's top edge, but it
	   lifts everything after it too, so the body's top padding stopped separating the band from the columns and
	   they butted together: measured, a source that sets its band 64px clear of the link grid rendered them
	   touching. Re-assert the same distance under the band, where it is now needed. */
	margin-bottom: var(--footer-pad-top);
}
/* 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));
}
/* BOXED BODY (Footer → Layout → Boxed Body). The content bars (and, opted in, the copyright) sit in ONE
   inset panel: the footer's Padding Top/Bottom moves onto the footer itself (space AROUND the panel) and
   .footer__body becomes the panel — width: min(Max Width, 100% - 2 × gutter), centred, with its own padding,
   fill, border, radius and shadow (--footer-box-* from theme-vars.php). Bars inside the panel drop their
   container gutter (the panel padding is the gutter) so a Full Width bar spans the panel exactly. */
.footer--boxed {
	padding-top:    var(--footer-pad-top);
	padding-bottom: var(--footer-pad-bottom);
}
.footer--boxed .footer__body {
	box-sizing: border-box;
	width: min(var(--footer-box-max, var(--container-max-desktop, var(--site-max-width, 1170px))), calc(100% - 2 * var(--footer-box-gutter, 16px)));
	margin-inline: auto;
	padding: var(--footer-box-pad-y, 2rem) var(--footer-box-pad-x, 2rem);
	background-color: var(--footer-box-bg-color, transparent);
	background-image: var(--footer-box-bg-image, none);
	background-size: var(--footer-box-bg-size, cover);
	background-position: var(--footer-box-bg-position, center center);
	background-repeat: var(--footer-box-bg-repeat, no-repeat);
	border: var(--footer-box-border, 0 solid transparent);
	border-radius: var(--footer-box-radius, 0);
	box-shadow: var(--footer-box-shadow, none);
	position: relative;
	overflow: hidden;
}
.footer--boxed .footer__body > .footer-section { position: relative; z-index: 1; }
.footer--boxed .footer__body .footer-section__inner.fw-container-fluid { padding-left: 0; padding-right: 0; }
.footer--boxed .footer__body .footer-section__inner.fw-container { max-width: none; padding-left: 0; padding-right: 0; }
.footer--boxed .footer__body > .footer-section--has-bg:first-child { margin-top: 0; }
.footer--boxed .footer__body + .footer-section { border-top: none; }

/* 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 {
	/* A FROSTED overlay (a translucent Main Header Background over the hero) must show its fill; only an
	   unset background (--header-bg = transparent by default) is see-through. Mirrors header-footer-builder.css. */
	background-color: var(--header-bg, 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; }
}

/* ---------------------------------------------------------------------------
   INLINE RUN (footer element option: Inline With Previous)
   A run of consecutive elements that share ONE row instead of stacking — the
   common centred footer whose nav links and social icons sit on a single line.
   Wraps by default: five links beside four icons must fold on a phone rather
   than overflow. Alignment is inherited from the column, so a centred column
   centres its inline row too, and the gap is one themeable variable.
   --------------------------------------------------------------------------- */
.hf-inline-run {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hf-inline-gap, 1.5rem);
}
/* The column's text alignment decides where the row sits. */
.footer-col--center .hf-inline-run,
.text-center .hf-inline-run { justify-content: center; }
.text-end .hf-inline-run,
.footer-col--right .hf-inline-run { justify-content: flex-end; }
/* A grouped <ul> inside the row must not re-stack or keep its block margins. */
.hf-inline-run > .footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hf-inline-gap, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}
.hf-inline-run > .footer-element { margin: 0; }

/* A centred column must also centre its FLEX children. `text-align` moves text but not a flex or
   grid box, so a logo lockup / social row / button stayed pinned left inside an otherwise centred
   footer column -- the visible half of "my footer is centred except the logo". */
.footer-col.text-center .footer-column > .footer-element,
.footer-col.text-center .footer-column > .hf-inline-run { justify-content: center; }
.footer-col.text-center .footer-column .site-logo,
.footer-col.text-center .footer-column .footer-logo { justify-content: center; margin-inline: auto; }
.footer-col.text-end .footer-column > .footer-element,
.footer-col.text-end .footer-column > .hf-inline-run { justify-content: flex-end; }
.footer-col.text-end .footer-column .site-logo,
.footer-col.text-end .footer-column .footer-logo { justify-content: flex-end; margin-inline-start: auto; }