/*
 * Visoop — base reset + layout primitives.
 * Design system: Sooperstack — lime #AEFD2F · ink #0A0A0A · paper #FAFAF7
 * Hard flat offset shadows, thick borders, Space Grotesk + Manrope.
 * No vendor reset framework; pure CSS, mobile-first.
 */

:root {
	/* ── Sooperstack brand palette ──────────────────────────────────── */
	--ss-lime:        #AEFD2F;
	--ss-lime-dark:   #9AE024;   /* hover state */
	--ss-ink:         #0A0A0A;   /* near-black text + borders */
	--ss-paper:       #FAFAF7;   /* warm off-white bg */
	--ss-stone-50:    #F5F5F0;
	--ss-stone-100:   #EBEBЕ5;
	--ss-stone-200:   #D8D8D0;
	--ss-stone-500:   #8A8A80;
	--ss-stone-700:   #4A4A45;
	--ss-white:       #FFFFFF;

	/* ── Shadow system (hard flat offset, zero blur) ────────────────── */
	--ss-shadow-xs:   2px 2px 0 0 var(--ss-ink);
	--ss-shadow-sm:   3px 3px 0 0 var(--ss-ink);
	--ss-shadow:      6px 6px 0 0 var(--ss-ink);
	--ss-shadow-lg:   10px 10px 0 0 var(--ss-ink);

	/* ── Borders ────────────────────────────────────────────────────── */
	--ss-border:      1.5px solid var(--ss-ink);
	--ss-border-thin: 1px solid var(--ss-ink);
	--ss-border-muted: 1px solid var(--ss-stone-200);
	--ss-radius-sm:   8px;
	--ss-radius:      16px;
	--ss-radius-lg:   24px;
	--ss-radius-pill: 999px;

	/* ── Typography ─────────────────────────────────────────────────── */
	--ss-font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ss-font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ss-font-mono:    "JetBrains Mono", "Fira Code", "Courier New", monospace;

	/* ── Transitions ────────────────────────────────────────────────── */
	--ss-transition: 0.18s ease;

	/* ── Layout ─────────────────────────────────────────────────────── */
	--visoop-container: 1440px;
	--visoop-pad:       20px;
	--visoop-gap:       30px;

	/* ── Legacy aliases (used by older partials) ────────────────────── */
	--visoop-color-accent:      var(--ss-lime);
	--visoop-color-accent-dark: var(--ss-lime-dark);
	--visoop-color-dark:        var(--ss-ink);
	--visoop-color-dark-2:      #072032;
	--visoop-color-dark-3:      #1e2230;
	--visoop-color-dark-muted:  rgba(255,255,255,.6);
	--visoop-color-bg:          var(--ss-paper);
	--visoop-color-text:        var(--ss-ink);
	--visoop-color-muted:       var(--ss-stone-500);
	--visoop-color-border:      var(--ss-stone-200);
	--visoop-color-surface:     var(--ss-stone-50);
	--visoop-color-link:        var(--ss-ink);
	--visoop-color-link-hover:  var(--ss-stone-700);
	--visoop-radius:             var(--ss-radius);
	--visoop-font-body:          var(--ss-font-body);
	--visoop-font-heading:       var(--ss-font-heading);
}

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

html {
	-webkit-text-size-adjust: 100%;
	/* Ensure html/body don't create an overflow context that would
	   break `position: sticky` on direct children of body. */
	overflow-x: clip;
	overflow-y: visible;
}

body {
	margin: 0;
	font-family: var(--ss-font-body);
	font-size: 16px;
	line-height: 1.7;
	color: var(--ss-ink);
	background: var(--ss-paper);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--ss-ink); text-decoration: none; transition: color var(--ss-transition); }
a:hover, a:focus { color: var(--ss-stone-700); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ss-font-heading);
	line-height: 1.15;
	margin: 0 0 .6em;
	font-weight: 700;
	color: var(--ss-ink);
	letter-spacing: -0.02em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1em; }

code, kbd, pre, samp {
	font-family: var(--ss-font-mono);
	font-size: .9em;
}

/* ── Container ──────────────────────────────────────────────────────────── */
.visoop-container {
	width: 100%;
	max-width: var(--visoop-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 80px);
}

.visoop-main { padding: 80px 0 100px; }

/* Builder-rendered bodies (Elementor single/archive templates) have no page
   banner above them and no default gap needed below them — Elementor sections
   control their own spacing. The 80px/100px block padding is the default theme
   flow's banner→content / content→footer offset; on a builder body it shows as
   empty gaps directly under a builder header and above a builder footer, so
   drop it. Two-class selector to win over any single-class `.visoop-main`
   responsive overrides regardless of source order. */
.visoop-main.visoop-main--builder { padding-top: 0; padding-bottom: 0; }

/* ── Blockquote ────────────────────────────────────────────────────────── */
blockquote,
.wp-block-quote,
.wp-block-pullquote {
	position: relative;
	margin: 1.8em 0;
	/* Increased left padding (was 56px) so the oversized ::before quote
	   glyph doesn't crowd the paragraph text — especially noticeable on
	   `.is-style-large` blockquotes where the text itself grows. */
	padding: 28px 28px 28px 80px;
	background: var(--ss-stone-50);
	border: 1px solid var(--ss-stone-200);
	border-left: 4px solid var(--ss-ink);
	border-radius: var(--ss-radius-sm);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--ss-ink);
	font-style: italic;
}
blockquote::before,
.wp-block-quote::before,
.wp-block-pullquote::before {
	content: "\201C";              /* left double-quotation mark */
	position: absolute;
	top: 12px;
	left: 22px;
	font-family: var(--ss-font-heading);
	font-size: 3.25rem;
	font-style: normal;
	line-height: 1;
	color: var(--ss-lime);
	pointer-events: none;
}

/* Large blockquote variant — bigger text and quote mark, with a matching
   wider gap so the glyph stays clear of the copy. */
.wp-block-quote.is-style-large,
.wp-block-quote.is-large,
blockquote.is-style-large {
	padding: 32px 32px 32px 96px;
	font-size: 1.25rem;
	line-height: 1.55;
}
.wp-block-quote.is-style-large::before,
.wp-block-quote.is-large::before,
blockquote.is-style-large::before {
	font-size: 4rem;
	top: 14px;
	left: 26px;
}
blockquote > *:last-child,
.wp-block-quote > *:last-child,
.wp-block-pullquote > *:last-child { margin-bottom: 0; }

blockquote cite,
blockquote .wp-block-quote__citation,
.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation,
.wp-block-pullquote cite,
.wp-block-pullquote .wp-block-quote__citation {
	display: block;
	margin-top: 12px;
	font-family: var(--ss-font-mono);
	font-size: .8rem;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ss-stone-500);
}
blockquote cite::before,
.wp-block-quote cite::before,
.wp-block-pullquote cite::before { content: "— "; }

/* Pull-quote variant — bigger, centered. */
.wp-block-pullquote {
	text-align: center;
	padding: 36px 32px;
	border-left-width: 1px;
	border-top: 4px solid var(--ss-ink);
	border-bottom: 4px solid var(--ss-ink);
	font-size: 1.25rem;
}
.wp-block-pullquote::before { display: none; }

/* ── Accessibility ──────────────────────────────────────────────────────── */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--ss-ink);
	color: var(--ss-lime);
	padding: 12px 16px;
	z-index: 9999;
	font-weight: 600;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ── Buttons ────────────────────────────────────────────────────────────── */

/* Base */
.visoop-btn,
.ss-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 26px;
	font-family: var(--ss-font-body);
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
	border-radius: var(--ss-radius-sm);
	border: var(--ss-border);
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
	text-decoration: none;
}

/* Primary — lime (defaults; user can override background/color via
   Visoop Settings → Colors → Default Button Background / Text Color). */
.visoop-btn,
.ss-btn,
.ss-btn--primary {
	background: var(--ss-lime);
	color: var(--ss-ink);
	box-shadow: var(--ss-shadow-sm);
}
/* Hover preserves the active background + color (which may have been
   overridden via inline customizer CSS) so a custom button color doesn't
   snap back to lime/ink on hover. */
.visoop-btn:hover,
.ss-btn:hover,
.ss-btn--primary:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--ss-shadow);
}

/* Dark */
.ss-btn--dark {
	background: var(--ss-ink);
	color: var(--ss-white);
	box-shadow: var(--ss-shadow-sm);
}
.ss-btn--dark:hover {
	color: var(--ss-white);
	transform: translate(-2px, -2px);
	box-shadow: var(--ss-shadow);
}

/* Ghost / outline */
.ss-btn--ghost {
	background: transparent;
	color: var(--ss-ink);
	box-shadow: none;
}
.ss-btn--ghost:hover {
	background: var(--ss-stone-50);
	color: var(--ss-ink);
	box-shadow: var(--ss-shadow-sm);
	transform: translate(-1px, -1px);
}

/* ── Tags / pills ───────────────────────────────────────────────────────── */
.ss-tag {
	display: inline-block;
	padding: 4px 14px;
	border: var(--ss-border-thin);
	border-radius: var(--ss-radius-pill);
	font-family: var(--ss-font-mono);
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .03em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--ss-ink);
	background: transparent;
	transition: background var(--ss-transition), color var(--ss-transition);
}
.ss-tag--lime { background: var(--ss-lime); border-color: var(--ss-lime); }
.ss-tag--dark { background: var(--ss-ink); color: var(--ss-white); border-color: var(--ss-ink); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.ss-card {
	background: var(--ss-white);
	border: var(--ss-border);
	border-radius: var(--ss-radius);
	box-shadow: var(--ss-shadow);
	transition: transform var(--ss-transition), box-shadow var(--ss-transition);
}
.ss-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--ss-shadow-lg);
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.visoop-header {
	background: rgba(250,250,247,0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	position: relative;
	z-index: 200;
}



.visoop-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	/* Match .visoop-container so the header lines up with the page body. */
	width: 100%;
	max-width: var(--visoop-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 80px);
	min-height: 72px;
}

/* Logo / site name */
.visoop-header__brand { flex-shrink: 0; }
.visoop-header__brand img { max-height: 40px; width: auto; }

/* Brand link */
.visoop-header__brand-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ss-ink);
	text-decoration: none;
	transition: opacity var(--ss-transition);
}
.visoop-header__brand-link:hover { opacity: .75; color: var(--ss-ink); }

.visoop-header__brand-icon { flex-shrink: 0; display: block; }

.visoop-header__brand-name {
	font-family: var(--ss-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: var(--ss-ink);
	line-height: 1;
}

/* Nav */
.visoop-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	gap: 0;
}
@media (min-width: 960px) {
	/* Right-align the menu on desktop: push the nav (and the now-hidden
	   .visoop-header__actions hamburger) to the end of the flex row so the
	   menu sits next to the right edge instead of floating in the middle. */
	.visoop-nav { margin-left: auto; }
	.visoop-nav > ul { display: flex; }
}
.visoop-nav.is-open > ul {
	display: flex;
	flex-direction: column;
	padding: 8px 0 20px;
}

/* Nav links */
.visoop-nav a {
	font-family: var(--ss-font-body);
	font-weight: 500;
	font-size: .93rem;
	padding: 8px 14px;
	display: inline-block;
	color: var(--ss-ink);
	border-radius: var(--ss-radius-sm);
	transition: color var(--ss-transition), background var(--ss-transition);
	/* Strip the browser's default tap-highlight overlay on touch
	   devices — it paints a light blue / grey wash over the link for
	   a few hundred ms after tap, which users were reading as a
	   "stuck" focus background. */
	-webkit-tap-highlight-color: transparent;
}
/* Hover — subtle stone background. `:focus-visible` (not bare `:focus`)
   keeps the keyboard-focus ring intact while preventing the same
   background from sticking around after a touch tap — touch focus
   matches `:focus` but not `:focus-visible`. */
.visoop-nav a:hover,
.visoop-nav a:focus-visible {
	color: var(--ss-ink);
	background: var(--ss-stone-50);
}

/* Active / current item — lime accent. Placed AFTER the :hover rule (same
   specificity) so the active state wins the cascade when the user hovers
   over the current menu item — otherwise the stone hover bg would paint on
   top of the lime active bg, causing the "two backgrounds overlap" effect. */
.visoop-nav .current-menu-item > a,
.visoop-nav .current_page_item > a,
.visoop-nav .current_page_ancestor > a,
.visoop-nav .current-menu-item > a:hover,
.visoop-nav .current_page_item > a:hover,
.visoop-nav .current_page_ancestor > a:hover {
	color: var(--ss-ink);
	background: var(--ss-lime);
}

/* Chevron toggle — injected by theme.js into every parent <li>.
   Hidden on desktop where the menu uses hover; the mobile breakpoint
   below reveals and styles it. */
.visoop-nav__chevron {
	display: none;
}

/* Sub-menu */
.visoop-nav .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	background: var(--ss-white);
	border: var(--ss-border);
	border-radius: var(--ss-radius-sm);
	padding: 8px 0;
	min-width: 210px;
	box-shadow: var(--ss-shadow);
	z-index: 50;
}
/* Invisible bridge that covers the 8px gap between the parent item and
   its submenu — without it the mouse leaves the parent's :hover before
   reaching the submenu's :hover, and the dropdown collapses. */
.visoop-nav .sub-menu::before {
	content: '';
	position: absolute;
	top: -8px;
	left: 0;
	right: 0;
	height: 8px;
}
.visoop-nav .menu-item-has-children { position: relative; }
.visoop-nav .menu-item-has-children:hover > .sub-menu,
.visoop-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
.visoop-nav .sub-menu a {
	display: block;
	padding: 8px 18px;
	color: var(--ss-ink);
	font-size: .9rem;
	background: transparent;
	border-radius: 0;
}
.visoop-nav .sub-menu a:hover { background: var(--ss-stone-50); color: var(--ss-ink); }

/* Nested submenu (level 3+) — opens to the side of its parent. Bridge
   sits to the LEFT this time to cover the horizontal gap. */
.visoop-nav .sub-menu .sub-menu {
	top: -9px;             /* -border-1px so panels visually align */
	left: calc(100% + 8px);
}
.visoop-nav .sub-menu .sub-menu::before {
	top: 0;
	bottom: 0;
	height: auto;
	left: -8px;
	width: 8px;
	right: auto;
}

/* Right-side actions — hamburger wrapper. Only visible below 960px so it
   doesn't push the desktop nav away from the container's right edge. */
.visoop-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	background: var(--ss-stone-50);
	border-radius: 5px;
}
@media (min-width: 960px) {
	.visoop-header__actions { display: none; }
}

/* Hamburger toggle */
.visoop-header__toggle {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 10px;
	border-radius: 5px;
	transition: background .15s ease;
}
.visoop-header__toggle:hover { background: rgba(10, 10, 10, .06); }
.visoop-header__toggle span:not(.screen-reader-text) {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ss-ink);
	transition: transform .2s ease, opacity .2s ease;
	border-radius: 2px;
}

/* Hamburger → X animation */
.visoop-header__toggle[aria-expanded="true"] span:nth-child(2) { transform: rotate(45deg)  translate(5px,  5px); }
.visoop-header__toggle[aria-expanded="true"] span:nth-child(3) { opacity: 0; }
.visoop-header__toggle[aria-expanded="true"] span:nth-child(4) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile nav (below 960px) — modern floating dropdown panel ────────── */
@media (max-width: 959px) {
	/* Header inner stays single-row; nav escapes as an absolutely-positioned
	   panel below the header instead of wrapping inline. */
	.visoop-header { position: relative; }

	.visoop-nav.is-open > ul {
		position: absolute;
		top: calc(100% + 8px);
		right: clamp(16px, 4vw, 80px);
		left: clamp(16px, 4vw, 80px);
		max-width: 360px;
		margin-left: auto;
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 10px;
		background: var(--ss-white);
		border: 1px solid var(--ss-stone-200);
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba(10, 10, 10, .12);
		z-index: 200;
		animation: visoopNavReveal .18s ease;
	}

	@keyframes visoopNavReveal {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	.visoop-nav.is-open > ul > li { width: 100%; }

	/* Parent items become a flex row so the JS-injected chevron button
	   (.visoop-nav__chevron) can sit beside the link without disturbing
	   the link's tap target. The submenu wraps to its own row via
	   `flex-basis: 100%`. */
	.visoop-nav.is-open .menu-item-has-children {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.visoop-nav.is-open .menu-item-has-children > a {
		flex: 1 1 auto;
		width: auto;       /* defeat the `.visoop-nav.is-open a { width: 100% }` rule below — */
		min-width: 0;      /* without this the parent link took the whole row and pushed   */
		                   /* the chevron onto a second line beneath it.                   */
	}

	.visoop-nav.is-open a {
		display: block;
		width: 100%;
		padding: 12px 14px;
		border-radius: 8px;
		font-size: .95rem;
		font-weight: 500;
		color: var(--ss-ink);
	}

	/* Desktop's hover / focus-within submenu reveal must not survive into
	   the mobile drawer — tapping the chevron parks focus on the button,
	   the focus-within stays true, and the user could never collapse the
	   submenu (re-tapping the chevron flipped `.is-open` off but the
	   focus-within rule kept the panel painted). The chevron toggle is
	   the only thing that opens / closes a submenu on mobile now. */
	.visoop-nav .menu-item-has-children:hover > .sub-menu,
	.visoop-nav .menu-item-has-children:focus-within > .sub-menu {
		display: none;
	}

	/* Chevron toggle injected by theme.js next to each parent link. Real
	   <button> rather than a CSS pseudo so the chevron tap can toggle
	   the submenu while the link tap is left free to navigate. */
	.visoop-nav__chevron {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 40px;
		height: 40px;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		color: inherit;
		opacity: .6;
		transition: transform .25s ease, opacity .2s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.visoop-nav__chevron:hover {
		opacity: 1;
	}
	.visoop-nav.is-open .menu-item-has-children.is-open > .visoop-nav__chevron {
		transform: rotate(180deg);
		opacity: 1;
	}
	.visoop-nav__chevron svg {
		display: block;
	}

	.visoop-nav.is-open .sub-menu {
		position: static;
		background: var(--ss-stone-50);
		border: 0;
		box-shadow: none;
		border-radius: 8px;
		padding: 4px 0;
		margin: 4px 0 4px 14px;
		display: none; /* keep collapsed until the chevron's been tapped */
		flex-basis: 100%;
		width: 100%;
	}
	/* The submenu is revealed only by the chevron toggle (.is-open on the
	   parent <li>). The old `:hover` / `:focus-within` triggers had to go —
	   on touch those events fire on every tap of the link itself, which
	   reopened the submenu under the user's finger whenever they were
	   actually trying to navigate to the parent's page. */
	.visoop-nav.is-open .menu-item-has-children.is-open > .sub-menu { display: block; }
	.visoop-nav.is-open .sub-menu a {
		padding: 8px 12px;
		font-size: .88rem;
		color: var(--ss-stone-700);
	}
}

/* ── Transparent / overlay header ──────────────────────────────────────── */
body.visoop-header-overlay .site-header,
body.visoop-header-overlay .visoop-header,
body.visoop-header-overlay .visoop-header--builder {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border-bottom: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.visoop-header-overlay .elementor-section-wrap { pointer-events: auto; }

/* NOTE: no admin-bar `top` offset here on purpose. The overlay header is
   `position: absolute` and its containing block is a normal in-flow
   element, so WP's `html { margin-top: 32px/46px }` (added when the admin
   bar shows) already shifts the header down by exactly the bar's height.
   A previous `top: 32px` / `top: 46px` override stacked ON TOP of that
   shift, double-counting the offset — the header dropped ~46px too far on
   mobile and collided with the hero. Leaving `top: 0` (from the rule
   above) lets WP's margin do the positioning at every width. */

/* ── Page Banner / Breadcrumb ───────────────────────────────────────────── */
.visoop-banner {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 100px 0 110px;
	text-align: center;
	z-index: 1;
	overflow: hidden;
}
@media (max-width: 767px) { .visoop-banner { padding: 70px 0 80px; } }

.visoop-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10,10,10,.72);
	z-index: 0;
}

/* No bg image set: use ink bg instead of overlay */
.visoop-banner:not([style]) {
	background: var(--ss-ink);
}
.visoop-banner:not([style])::before {
	display: none;
}

.visoop-banner__inner {
	position: relative;
	z-index: 1;
}

.visoop-banner__title {
	color: #fff;
	font-family: var(--ss-font-heading);
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 700;
	margin: 0 0 16px;
	line-height: 1.05;
	letter-spacing: -0.03em;
	word-break: break-word;
}

.visoop-breadcrumbs {
	margin-top: 12px;
	max-width: 100%;
}

.visoop-breadcrumbs__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	color: rgba(255,255,255,.5);
	font-size: .875rem;
	gap: 0 4px;
	/* Contain long current-page titles inside the banner container so they
	   don't push the breadcrumb past the viewport edges in responsive view. */
	max-width: 100%;
	min-width: 0;
}

/* Each item must allow its inner text to wrap. inline-flex items would
   otherwise become as wide as their longest unbroken word (e.g. a 70-
   character Māori place name) and bleed through both viewport edges. */
.visoop-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.visoop-breadcrumbs__item a {
	color: rgba(255,255,255,.65);
	transition: color var(--ss-transition);
}
.visoop-breadcrumbs__item a:hover { color: var(--ss-lime); }

.visoop-breadcrumbs__item + .visoop-breadcrumbs__item::before {
	content: '/';
	padding: 0 10px;
	opacity: .4;
}

.visoop-breadcrumbs__item--current { color: rgba(255,255,255,.88); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.visoop-footer {
	background: var(--ss-ink);
	color: rgba(255,255,255,.6);
	border-top: 2px solid var(--ss-ink);
}
/* A builder-rendered footer controls its own styling (background, spacing,
   borders) via Elementor, so drop the default top border there. Two-class
   selector to win over the base rule regardless of source order. */
.visoop-footer.visoop-footer--builder { border-top: 0; }
.visoop-footer a { color: rgba(255,255,255,.6); }
.visoop-footer a:hover { color: var(--ss-lime); }

.visoop-footer__widgets { padding: 70px 0 50px; }

.visoop-footer__widgets-inner {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.visoop-footer__widgets-inner > .widget,
.visoop-footer__widgets-inner > section { display: block; }

.visoop-footer .widget-title,
.visoop-footer .wp-block-heading {
	color: #fff;
	font-family: var(--ss-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,.12);
	letter-spacing: -.01em;
}
.visoop-footer ul { list-style: none; margin: 0; padding: 0; }
.visoop-footer ul li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; }
.visoop-footer ul li:last-child { border-bottom: 0; }

.visoop-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 28px 0; }

.visoop-footer__bottom .visoop-container { text-align: center; }

.visoop-footer__copy {
	margin: 0;
	font-size: .88rem;
	color: rgba(255,255,255,.45);
	font-family: var(--ss-font-mono);
	letter-spacing: .02em;
}

/* ── Nav Menu widget (visoop-core plugin) ───────────────────────────────── *
   The widget owns its full stylesheet now (plugin: assets/css/nav-menu.css).
   Previously these rules lived here as a theme fallback, but they kept
   winning specificity battles against the user's Elementor Style controls
   (especially link color / hover color, which were hard-coded via
   var(--ss-lime)) — the only thing visibly broken was the colour control
   because everything else in the widget controls hits a property the theme
   wasn't already setting. Moving the styling fully into the widget's own
   CSS file (which loads at lower specificity than Elementor's inline
   per-instance CSS) lets the controls behave normally. The placeholder
   text uses a generic class so it lives here. */
.visoop-navmenu__placeholder { color: #9ca3af; font-style: italic; margin: 0; }