/* ==========================================================================
   Type 00
   1. Tokens          5. Header / footer      9. Builder context
   2. Base            6. Custom elements
   3. Layout          7. WPBakery mapping
   4. Typography      8. Buttons
   The :root block below holds fallbacks; the Customizer prints the live values
   as an inline :root block after this file. Change tokens there, not here.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
	--t00-primary: #2f5bea;
	--t00-accent: #f2683c;
	--t00-text: #1b1f24;
	--t00-bg: #ffffff;
	--t00-surface: #f2f4f7;
	--t00-line: #cfd4dc;
	--t00-btn-bg: #2f5bea;
	--t00-btn-bg-hover: #f2683c;
	--t00-bullet: #f2683c;
	--t00-quote-border: #f2683c;

	--t00-font-heading: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--t00-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--t00-header-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--t00-header-logo-font-size: 20px;
	--t00-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--t00-font-size: 16px;
	--t00-scale: 1.25;
	--t00-line-height: 1.6;
	--t00-heading-line-height: 1.2;
	--t00-heading-weight: 700;

	--t00-container: 1140px;
	/* Not a Customizer field: a fixed minimum inset so content never touches
	   the physical screen edge on a narrow phone, before Content Width even
	   starts constraining anything. Kept separate from --t00-gutter on purpose
	   — see .t00-container below. */
	--t00-edge: 16px;
	--t00-section-y: 72px;
	--t00-gutter: 30px;
	--t00-gutter-bottom: 30px;
	--t00-col-pad: 0px;
	--t00-gap: 24px;
	--t00-header-pad-y: 14px;
	--t00-header-pad-x: 14px;
	--t00-header-border-width: 1px;
	--t00-header-border-style: solid;
	--t00-header-nav-align: flex-end;
	--t00-mobile-menu-font-size: 16px;
	--t00-mobile-menu-bg-transparency: 0%;
	--t00-mobile-menu-border-width: 0px;
	--t00-mobile-menu-border-style: solid;
	--t00-mobile-menu-padding-y: 16px;
	--t00-footer-pad-y: 32px;
	--t00-footer-pad-x: 32px;
	--t00-footer-border-width: 1px;
	--t00-footer-border-style: solid;
	--t00-footer-font-size: .9rem;
	--t00-footer-align: flex-start;
	--t00-radius: 6px;
	--t00-btn-radius: 6px;
	--t00-btn-transform: none;

	/* Derived heading sizes: each step is one scale ratio up from body size. */
	--t00-fs-h5: calc(1rem * var(--t00-scale));
	--t00-fs-h4: calc(var(--t00-fs-h5) * var(--t00-scale));
	--t00-fs-h3: calc(var(--t00-fs-h4) * var(--t00-scale));
	--t00-fs-h2: calc(var(--t00-fs-h3) * var(--t00-scale));
	--t00-fs-h1: calc(var(--t00-fs-h2) * var(--t00-scale));
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--t00-font-size); -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--t00-bg);
	color: var(--t00-text);
	font-family: var(--t00-font-body);
	font-size: 1rem;
	line-height: var(--t00-line-height);
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
/* Link / Link - Hover (Customizer → Colors) are optional; empty falls back
   to Primary / Accent. */
a { color: var(--t00-link-color, var(--t00-primary)); }
a:hover { color: var(--t00-link-hover-color, var(--t00-accent)); }
hr { border: 0; border-top: 1px solid var(--t00-line); margin: var(--t00-gap) 0; }

.t00-screen-reader {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}
.t00-skip { position: absolute; left: -9999px; }
.t00-skip:focus { left: 8px; top: 8px; z-index: 100000; background: var(--t00-bg); padding: 8px 12px; }

/* 3. Layout -------------------------------------------------------------- */
/* This padding used to be gutter/2, so raising Column gutter also shrank the
   page's own usable width and put header/footer/single-column rows further
   in from the edge than a multi-column row's own (deliberately flush) outer
   columns — an inconsistency raised directly. Using the fixed --t00-edge here
   instead, with nothing left to cancel it (the old row/column negative-margin
   trick below is gone too), means gutter only ever affects space *between*
   columns, and every context — header, footer, a single-column row, and a
   multi-column row's outer edge — shares the same one inset: --t00-edge plus
   that element's own --t00-col-pad, if any. */
.t00-container {
	width: 100%;
	max-width: var(--t00-container);
	margin-inline: auto;
	padding-inline: var(--t00-edge);
}
.t00-container--full { max-width: none; }
.t00-main { display: block; min-height: 50vh; overflow-x: clip; }
.t00-entry__content > *:first-child { margin-top: 0; }
.t00-center { text-align: center; }

/* 4. Typography ---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .5em;
	font-family: var(--t00-font-heading);
	font-weight: var(--t00-heading-weight);
	line-height: var(--t00-heading-line-height);
}
h1 { font-size: min(var(--t00-fs-h1), 9.5vw); }
h2 { font-size: min(var(--t00-fs-h2), 8vw); }
h3 { font-size: var(--t00-fs-h3); }
h4 { font-size: var(--t00-fs-h4); }
h5 { font-size: var(--t00-fs-h5); }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; }
p, ul, ol, blockquote, figure { margin: 0 0 1em; }
::marker { color: var(--t00-bullet); }
blockquote {
	margin-inline: 0; padding-left: 1em;
	border-left: 3px solid var(--t00-quote-border);
	font-family: var(--t00-font-heading);
}
code { font-family: var(--t00-mono); font-size: .9em; }
input[type="text"], input[type="email"], input[type="search"], input[type="url"], textarea, select {
	max-width: 100%; padding: .55em .75em; font: inherit; color: inherit;
	background: var(--t00-bg); border: 1px solid var(--t00-line); border-radius: var(--t00-radius);
}

/* 5. Header / footer ----------------------------------------------------- */
.t00-header {
	background: var(--t00-header-bg, var(--t00-bg));
	border-bottom: var(--t00-header-border-width) var(--t00-header-border-style) var(--t00-header-border-color, var(--t00-line));
	position: relative; z-index: 50;
}
.t00-sticky .t00-header { position: sticky; top: 0; }
.admin-bar.t00-sticky .t00-header { top: 32px; }
@media (max-width: 782px) { .admin-bar.t00-sticky .t00-header { top: 46px; } }

/* Padding - Sides (px) overrides the --t00-edge inset .t00-container gives
   every other row on the page (including .t00-header__tagline-row below,
   kept in step with this one so logo/nav and the tagline text under them
   stay aligned with each other whatever this is set to) -- the header
   already has its own independent Padding - Top & Bottom, so its own
   independent side padding follows the same idea. */
.t00-header__inner { display: flex; align-items: center; gap: var(--t00-gap); padding-block: var(--t00-header-pad-y); padding-inline: var(--t00-header-pad-x); justify-content: space-between; }
/* Nav Link alignments only ever moves the menu LINKS — the logo and the
   optional button both stay exactly where they already are. It can't be a
   justify-content on .t00-header__inner itself: the button lives inside
   #t00-nav alongside the menu (one flex item, not two), so that would drag
   logo and the whole nav block — button included — around together, not
   just the links. Desktop only: below 800px #t00-nav becomes the dropdown
   panel instead, an unrelated layout.
   #t00-nav itself grows to fill the space next to the logo (pinning its own
   right edge — and so the button inside it, which doesn't grow — to the
   header's true right edge), then .t00-menu grows again to fill *that* box
   (up to wherever the button now sits), with the links positioned within it
   by this setting. Two nested "growing" boxes, each swallowing the space
   the next fixed item doesn't need, is what keeps logo and button anchored
   while only the middle layer (the links) actually moves. */
@media (min-width: 801px) {
	#t00-nav { flex: 1; }
	#t00-nav .t00-menu { flex: 1; justify-content: var(--t00-header-nav-align); }
}
/* Header Layout: Centered (.t00-header--centered, set in header.php). Desktop
   only; below 800px nothing here applies, so both layouts share the same
   logo + toggle row and dropdown panel. The logo and nav live in
   .t00-header__inner but the tagline is a separate row after it, so
   display: contents lifts the logo and nav up to be siblings of that row,
   letting `order` stack them as logo, tagline, menu. The nav is then a
   centered flex row, so the links and the optional button are centered
   under the logo together, as one group. The menu sizes to its links
   (not growing, unlike Standard) and the button never shrinks, so a very
   long menu wraps its own links, each row still centered, rather than
   covering the button.
   The tagline gets 5px more space above it here than in Standard (9px vs 4px),
   since it sits directly under the centered logo.
   Nav Link alignments has no effect here (the menu is always centered). */
@media (min-width: 801px) {
	.t00-header--centered {
		display: flex; flex-direction: column; align-items: center;
		padding-block: var(--t00-header-pad-y);
	}
	.t00-header--centered .t00-header__inner { display: contents; }
	.t00-header--centered .t00-brand { order: 1; padding-inline: var(--t00-header-pad-x); }
	.t00-header--centered .t00-header__tagline-row { order: 2; padding-top: 9px; padding-bottom: 0; text-align: center; }
	.t00-header--centered #t00-nav {
		order: 3; flex: none;
		display: flex; justify-content: center; align-items: center; column-gap: 20px;
		width: 100%; max-width: var(--t00-container);
		margin-top: calc(var(--t00-gap) / 2);
		padding-inline: var(--t00-header-pad-x);
	}
	.t00-header--centered #t00-nav > .t00-menu { flex: 0 1 auto; justify-content: center; }
	.t00-header--centered #t00-nav > .t00-btn { flex: none; }
}
.t00-brand { display: inline-flex; align-items: center; text-decoration: none; color: inherit; font-family: var(--t00-font-heading); font-weight: var(--t00-heading-weight); }
.t00-brand img { display: block; max-height: 48px; width: auto; }
/* Logo Width (px), classic header only: .t00-header--logo-width is set in
   header.php only when a width is entered, so an empty field leaves the rule
   above in charge. The 48px height cap is lifted here, or it would squash a
   wide logo; height: auto overrides the height attribute WordPress puts on
   the custom logo's <img>, and max-width keeps it inside a narrow screen. */
.t00-header--logo-width .t00-header__inner .t00-brand { min-width: 0; }
.t00-header--logo-width .t00-header__inner .t00-brand img { width: var(--t00-header-logo-width); max-width: 100%; height: auto; max-height: none; }
.t00-brand__text { display: inline-block; }
/* Classic header only: the logo text's own font, size and color. Font-family
   and font-weight override .t00-brand's own (own declarations always beat
   inherited ones, so no extra specificity is needed for those two). Scoped
   to .t00-header__inner so this can't reach a "Type 00 logo" element used
   elsewhere, such as inside a WPBakery-built header or footer part. */
.t00-header__inner .t00-brand__text {
	font-family: var(--t00-header-font);
	font-size: var(--t00-header-logo-font-size);
	color: var(--t00-header-logo-color, var(--t00-text));
}
/* The tagline is its own full-width row below the logo/nav/button row, not
   part of that flex row at all — so it never affects the nav/button's
   position, and wraps across the whole header width rather than being
   squeezed under just the logo. .t00-header--has-tagline (set in header.php
   only when a tagline is actually there) moves the header's own bottom
   padding off .t00-header__inner and onto .t00-header__tagline-row instead,
   with a small fixed gap between the two rows — so Padding, Top & Bottom
   (px) still governs the space above the first row and below the last one,
   whichever that is, rather than applying twice. */
.t00-header--has-tagline .t00-header__inner { padding-bottom: 0; }
.t00-header__tagline-row { padding-top: 4px; padding-bottom: var(--t00-header-pad-y); padding-inline: var(--t00-header-pad-x); }
/* Classic header only, same reasoning/scoping as .t00-brand__text above: its
   font size and color deliberately aren't their own settings — .8em keeps it
   relative to the nav links' own (unset, so inherited) font size, and the
   color falls back through the exact same chain #t00-nav .t00-menu a uses
   below, so it always matches the nav links' color, chosen or not. The size
   follows Nav Links Font Size the same way: .8 of it when set, .8em (of the
   inherited size the links use too) when empty. */
.t00-header .t00-tagline { margin: 0; font-size: calc(var(--t00-header-menu-font-size, 1em) * .8); color: var(--t00-header-menu-color, var(--t00-text)); }
.t00-nav { display: flex; align-items: center; gap: 20px; }
.t00-menu { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.t00-menu a { color: var(--t00-text); text-decoration: none; }
.t00-menu a:hover, .t00-menu .current-menu-item > a, .t00-menu .current_page_item > a { color: var(--t00-primary); }
.t00-menu .sub-menu { display: none; }

/* Classic header only, via the #t00-nav id already on its <nav>: an id beats
   any number of classes, so these safely override the general menu-link and
   button colors above and the button style variants in section 8, regardless
   of which comes first in this file. Falls back to the site's own colors
   (Customizer → Type 00 styles → Colors) when left empty. Font Weight has
   nothing to fall back to (it isn't a color), so it's a plain var() with its
   own default rather than a var(x, fallback) pair. */
#t00-nav .t00-menu a { color: var(--t00-header-menu-color, var(--t00-text)); font-weight: var(--t00-header-menu-weight); font-size: var(--t00-header-menu-font-size, inherit); }
#t00-nav .t00-menu a:hover { color: var(--t00-header-menu-hover-color, var(--t00-primary)); }
/* The currently-open page's own link — separate from :hover, so the two can
   differ, but falling back to the hover color (then Primary) when left
   empty keeps a site that never touches this field looking exactly as it
   did back when the two were one shared rule. */
#t00-nav .t00-menu .current-menu-item > a,
#t00-nav .t00-menu .current_page_item > a {
	color: var(--t00-header-menu-active-color, var(--t00-header-menu-hover-color, var(--t00-primary)));
}
/* Second-level menu items (drag one under another in Appearance → Menus, or
   here via the header's own Menu picker's menus, the usual WordPress way):
   WordPress already gives a parent <li> the menu-item-has-children class and
   wraps its children in <ul class="sub-menu"> on its own — .t00-menu .sub-menu
   above hides that everywhere by default (Type 00 menu elements included); these
   rules, scoped to the classic header's own #t00-nav, are what actually shows
   it there. The arrow is a plain CSS triangle in currentColor, so it always
   matches whatever the link's own color already resolves to — no separate
   setting for it. :focus-within keeps it reachable by keyboard, not just a
   mouse hover. */
#t00-nav .menu-item-has-children { position: relative; }
#t00-nav .menu-item-has-children > a { display: inline-flex; align-items: center; gap: 6px; }
#t00-nav .menu-item-has-children > a::after {
	content: ""; width: 0; height: 0;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}
#t00-nav .sub-menu {
	display: none; position: absolute; top: calc(100% + 10px); z-index: 60;
	/* type00.js sets --t00-submenu-left / --t00-submenu-width on the parent
	   <li> so the dropdown spans the menu row (button included) plus 14% of
	   its width at each end. Without them it falls back to the parent item's
	   own left edge, at least as wide as the item and never under 400px. */
	left: var(--t00-submenu-left, 0);
	min-width: var(--t00-submenu-width, max(100%, 400px)); margin: 0; padding: 8px 0; list-style: none;
	background: var(--t00-submenu-bg, var(--t00-header-bg, var(--t00-bg)));
	border-radius: var(--t00-radius);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
/* The dropdown sits 10px below its link; this invisible strip fills that gap
   so the pointer can move down into the dropdown without it closing. */
#t00-nav .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
#t00-nav .menu-item-has-children:hover > .sub-menu,
#t00-nav .menu-item-has-children:focus-within > .sub-menu { display: block; }
#t00-nav .sub-menu a { display: block; padding: 8px 16px; }
/* The header button's background/hover-background overrides are NOT here: the
   button already has a filled/outline/ghost mode (section 8) that legitimately
   produces a different background per mode, and var(x, fallback) can't express
   "only override when x is actually set" — it always resolves to something, which
   would silently force one mode's look regardless of whether anyone chose a
   header-specific color. So those two are generated in PHP instead
   (type00_token_css(), inc/settings.php) and only appear in the page's CSS at
   all when a real color was chosen — see that function's comment for why. */

.t00-nav-toggle { display: none; background: none; border: none; border-radius: var(--t00-radius); padding: 10px; cursor: pointer; color: var(--t00-text); }
.t00-nav-toggle__bars, .t00-nav-toggle__bars::before, .t00-nav-toggle__bars::after {
	display: block; width: 20px; height: 2px; background: var(--t00-text); content: ""; position: relative;
}
.t00-nav-toggle__bars::before { position: absolute; top: -6px; }
.t00-nav-toggle__bars::after { position: absolute; top: 6px; }
/* The two alternatives to the bars above (Mobile Menu Icon, classic header
   only — a Type 00 menu element keeps the bars always, no picker of its own).
   Both use currentColor instead of their own var(), so the one color rule
   below covers all three shapes at once; each is sized/centered to roughly
   the bars' own 20x20 footprint so switching shape doesn't resize the
   button. */
.t00-nav-toggle__dots {
	display: block; width: 4px; height: 4px; margin: 9px auto;
	border-radius: 50%; background: currentColor;
	box-shadow: -8px 0 0 currentColor, 8px 0 0 currentColor;
}
.t00-nav-toggle__grid {
	display: block; width: 14px; height: 14px; margin: 3px auto;
	background-image:
		linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-size: 6px 6px;
	background-position: 0 0, 8px 0, 0 8px, 8px 8px;
	background-repeat: no-repeat;
}
/* Classic header only, matching Nav Links Font Color with the same fallback
   the menu links themselves use. Scoped via .t00-header__inner rather than
   #t00-nav — the toggle button sits next to the nav, not inside it — so this
   can't reach a Type 00 menu element's own toggle used elsewhere. This is what
   lets the dots/grid currentColor above pick it up too, without repeating
   the same var() for each shape. */
.t00-header__inner > .t00-nav-toggle {
	color: var(--t00-header-menu-color, var(--t00-text));
}
.t00-header__inner > .t00-nav-toggle .t00-nav-toggle__bars,
.t00-header__inner > .t00-nav-toggle .t00-nav-toggle__bars::before,
.t00-header__inner > .t00-nav-toggle .t00-nav-toggle__bars::after { background: var(--t00-header-menu-color, var(--t00-text)); }

/* Give the classic footer the same "padding inside columns" feel as WPBakery
   columns elsewhere on the site: .t00-container already gives the footer row
   the same --t00-edge inset a body row gets, and adding --t00-col-pad here,
   at the footer's own "column" level (the text/menu blocks), lands on the
   identical total inset a real column gets. The header does NOT use
   --t00-col-pad — its own Padding, Top & Bottom (px) field (--t00-header-pad-y
   on .t00-header__inner above) is the only thing controlling its padding, so
   the general Columns - Padding slider never touches it. */
.t00-footer__inner > .t00-footer__text,
.t00-footer__inner > .t00-footer__nav { padding: var(--t00-col-pad); }

/* Classic header only: scoped so it can't reach Type 00 menu elements used elsewhere. */
@media (max-width: 800px) {
	/* Mobile layout: logo centered on top, tagline (if any) under it, then the
	   menu toggle centered on its own full-width row below both. Same
	   display: contents + order technique as the desktop Centered layout
	   above, so the tagline (a separate row after .t00-header__inner in the
	   markup) can sit between the logo and the toggle. The header's bottom
	   padding moves inside the toggle row's own padding, so its lines sit
	   flush with the header's edges. The dropdown panel is still absolutely
	   positioned against .t00-header, so it opens right under this row. */
	.t00-header:not(.t00-header--part) {
		display: flex; flex-direction: column; align-items: center;
		padding-top: var(--t00-header-pad-y);
	}
	.t00-header__inner { display: contents; }
	.t00-header__inner > .t00-brand { order: 1; max-width: 100%; padding-inline: var(--t00-header-pad-x); }
	.t00-header__tagline-row { order: 2; width: 100%; padding-bottom: 0; text-align: center; }
	/* The toggle row: Mobile Menu - Padding Top & Bottom sets its height
	   around the icon, Mobile Menu - Border Thickness/Style/Color draw the line
	   above and below it, Mobile Menu - Background Color fills it (falling
	   back to the header's own background via transparent). */
	.t00-header__inner > .t00-nav-toggle {
		order: 3; display: flex; justify-content: center;
		padding-block: var(--t00-mobile-menu-padding-y);
		width: 100%; margin-top: calc(var(--t00-gap) / 2);
		border-radius: 0;
		border-block: var(--t00-mobile-menu-border-width) var(--t00-mobile-menu-border-style) var(--t00-mobile-menu-border-color, var(--t00-header-border-color, var(--t00-line)));
		background: var(--t00-mobile-menu-toggle-bg, transparent);
	}
	.t00-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: flex-start;
		padding: 16px var(--t00-header-pad-x) 20px;
		/* Transparency applies to whichever color the fallback chain resolves
		   to: 0% = fully opaque (the color as-is), 100% = fully see-through. */
		background: color-mix(in srgb, var(--t00-mobile-menu-bg, var(--t00-header-bg, var(--t00-bg))) calc(100% - var(--t00-mobile-menu-bg-transparency)), transparent);
		border-bottom: var(--t00-header-border-width) var(--t00-header-border-style) var(--t00-header-border-color, var(--t00-line));
	}
	.t00-nav.is-open { display: flex; }
	/* .t00-nav uses align-items: flex-start above so its optional CTA button
	   keeps its own natural width instead of stretching full-width — but that
	   same rule also shrinks .t00-menu down to its widest single link's own
	   width instead of the panel's full width, taking every sub-menu's
	   background down with it. width: 100% overrides that for the menu
	   specifically, without touching the button. */
	.t00-nav .t00-menu { flex-direction: column; width: 100%; }
	/* Same arrow + hover/focus reveal as desktop (above), but the sub-menu
	   flows in place instead of floating as its own dropdown card — the
	   mobile panel is already one vertical list, so an absolutely positioned
	   dropdown would just overlap the items below it. Its links keep the
	   same left/right padding as the desktop dropdown (#t00-nav .sub-menu a
	   above) for the same breathing room from the box's own edges. Only one
	   background (the <ul> itself, not each link) means border-radius here
	   rounds just the box's own top corners and bottom corners regardless of
	   how many links are inside — never a middle link's — with no extra
	   per-link rule needed for that. */
	#t00-nav .sub-menu {
		position: static;
		min-width: 180px;
		margin-top: 8px;
		border-radius: var(--t00-radius);
		box-shadow: none;
	}
	#t00-nav .sub-menu::before { content: none; }
	/* Same #t00-nav-scoped override pattern as the desktop menu colors above,
	   just gated to this width instead: falls back to Nav Links Font
	   Color/Hover (and from there to the site's own text/primary) when left
	   empty, so it only changes anything once actually set. */
	#t00-nav .t00-menu a {
		color: var(--t00-mobile-menu-color, var(--t00-header-menu-color, var(--t00-text)));
		font-size: var(--t00-mobile-menu-font-size);
	}
	#t00-nav .t00-menu a:hover {
		color: var(--t00-mobile-menu-hover-color, var(--t00-header-menu-hover-color, var(--t00-primary)));
	}
	/* Same active/hover split as desktop above, with the same two-step
	   fallback: this panel's own active color, then the desktop nav's, then
	   whichever hover color the chain above already resolves to. */
	#t00-nav .t00-menu .current-menu-item > a,
	#t00-nav .t00-menu .current_page_item > a {
		color: var(--t00-mobile-menu-active-color, var(--t00-header-menu-active-color, var(--t00-mobile-menu-hover-color, var(--t00-header-menu-hover-color, var(--t00-primary)))));
	}
}

/* Header/footer built with WPBakery (parts): compact rows instead of full section padding. */
.t00-site .t00-header--part .vc_row:not(.vc_inner) { padding-block: 14px; }
.t00-header--part .wpb_content_element,
.t00-header--part .t00-btn-wrap,
.t00-header--part .t00-menu-el,
.t00-header--part .t00-logo { margin-bottom: 0; }
.t00-footer.t00-footer--part { padding-block: 0; }
.t00-site .t00-footer--part .vc_row:not(.vc_inner) { padding-block: 28px; }
.t00-footer--part .wpb_content_element,
.t00-footer--part .t00-menu-el { margin-bottom: 0; }
/* Compact header/footer: columns keep the gutter (still on the outer box) but
   ignore the column padding. */
.t00-site .t00-header--part .vc_column_container > .vc_column-inner,
.t00-site .t00-footer--part .vc_column_container > .vc_column-inner { padding: 0; }
.t00-part-preview.t00-header, .t00-part-preview.t00-footer { margin-top: 0; }

/* Single post template: shown only while editing the template itself (see
   inc/post-elements.php), never to a visitor reading a real post. */
.t00-post-placeholder {
	display: inline-block; padding: 1px 6px; border: 1px dashed var(--t00-line);
	background: var(--t00-surface); color: color-mix(in srgb, var(--t00-text) 60%, transparent);
	font: 500 .8em/1.4 var(--t00-mono); font-style: normal;
}

/* Type 00 logo and Type 00 menu elements */
.t00-logo { margin-bottom: var(--t00-gap); }
.t00-brand__img { display: block; max-height: 48px; width: auto; }
.t00-menu-el .t00-nav-toggle { display: none; }
.t00-menu-el--center .t00-menu { justify-content: center; }
.t00-menu-el--right .t00-menu { justify-content: flex-end; }
/* WPBakery stacks columns below 768px; collapse the menu at the same point so the
   button never floats between two layouts. */
@media (max-width: 767px) {
	.t00-menu-el .t00-nav-toggle { display: block; }
	.t00-menu-el__list { display: none; padding-top: 12px; }
	.t00-menu-el__list.is-open { display: block; }
	.t00-menu-el .t00-menu { flex-direction: column; }
	.t00-menu-el--right .t00-nav-toggle, .t00-menu-el--right .t00-menu { margin-left: auto; }
}

.t00-footer {
	background: var(--t00-footer-bg, var(--t00-surface));
	color: var(--t00-footer-text-color, var(--t00-text));
	border-top: var(--t00-footer-border-width) var(--t00-footer-border-style) var(--t00-footer-border-color, var(--t00-line));
	padding-block: var(--t00-footer-pad-y);
	margin-top: var(--t00-section-y);
	font-size: var(--t00-footer-font-size);
}
/* Padding - Sides (px), same idea as the header's own — overrides the
   --t00-edge inset .t00-container gives every other row, so the footer
   gets independent horizontal padding to match the independent vertical
   padding it already had. */
.t00-footer__inner { display: flex; flex-wrap: wrap; justify-content: var(--t00-footer-align); align-items: center; gap: 12px var(--t00-gap); padding-inline: var(--t00-footer-pad-x); }
.t00-footer__text { margin: 0; }
/* Customizer → Header and Footer → Footer: "Remove section padding directly
   above the footer". Same idea as the header's own gap toggle above: this is
   the footer's OWN top margin, separate from the last row's own bottom padding
   just before it (also --t00-section-y by default), adjustable per row instead
   via that row's own WPBakery Design Options. */
.t00-footer-no-gap .t00-footer { margin-top: 0; }
/* Classic footer's own links, via the .t00-footer ancestor: more specific than
   the general .t00-menu a / a rules above, so this wins regardless of source
   order. Falls back to the site's own colors when left empty. Covers both a
   footer menu's links (.t00-menu a) AND any link typed by hand into the
   "Classic footer: text" field itself (.t00-footer__text a) — the same
   setting is meant to cover either source. */
.t00-footer .t00-menu a,
.t00-footer .t00-footer__text a { color: var(--t00-footer-link-color, var(--t00-text)); }
.t00-footer .t00-menu a:hover,
.t00-footer .t00-footer__text a:hover,
.t00-footer .t00-menu .current-menu-item > a,
.t00-footer .t00-menu .current_page_item > a { color: var(--t00-footer-link-hover-color, var(--t00-primary)); }

/* Posts and cards */
.t00-entry { padding-block: var(--t00-section-y) 0; }
/* Customizer → Header and Footer → Header: "Remove section padding directly
   below the header". This is the page-wrapper's OWN top padding — separate
   from a row's own top padding just inside it (also --t00-section-y by
   default), which stacks on top of this one and is adjustable per row instead,
   via that row's own WPBakery Design Options. */
.t00-header-no-gap .t00-entry { padding-top: 0; }
.t00-entry__meta { color: color-mix(in srgb, var(--t00-text) 60%, transparent); font-size: .9rem; }
.t00-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--t00-gutter); padding-top: var(--t00-section-y); }
.t00-card__title { font-size: var(--t00-fs-h4); margin-top: 1rem; }
.t00-card__title a { color: inherit; text-decoration: none; }
.t00-card__media { display: block; }

/* 6. Custom elements ----------------------------------------------------- */

/* Blog post thumbnails (index.php, single.php) — an empty state when no
   featured image is set, not the old Wire-image placeholder system. */
.t00-media {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	background: var(--t00-surface);
	border: 1px solid var(--t00-line); border-radius: var(--t00-radius);
}
.t00-media--16-9 { aspect-ratio: 16 / 9; }
.t00-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.t00-x { position: absolute; inset: 0; width: 100%; height: 100%; }
.t00-x line { stroke: var(--t00-line); stroke-width: 1; }

/* Placeholder image ([t00_placeholder_image]) — a ratio box that fills its
   container, or (Ratio: None) a fixed-size box using the inline width/
   height the shortcode writes directly on the element; the two never
   apply at once. Reuses .t00-x above for the empty-state cross. */
.t00-ph-image {
	position: relative; overflow: hidden;
	background: var(--t00-surface);
	border: 1px solid var(--t00-line); border-radius: var(--t00-radius);
	margin-bottom: var(--t00-gap);
}
.t00-ph-image--16-9 { width: 100%; aspect-ratio: 16 / 9; }
.t00-ph-image--4-3  { width: 100%; aspect-ratio: 4 / 3; }
.t00-ph-image--1-1  { width: 100%; aspect-ratio: 1 / 1; }
.t00-ph-image--3-4  { width: 100%; aspect-ratio: 3 / 4; }
.t00-ph-image--21-9 { width: 100%; aspect-ratio: 21 / 9; }
.t00-ph-image--fixed { max-width: 100%; }
/* Box width (ratio boxes) arrives inline, like Ratio: None's size; keep
   it inside the column either way. Alignment only moves a box narrower
   than its column. Left is the default, so no class. */
.t00-ph-image { max-width: 100%; }
.t00-ph-image--align-center { margin-inline: auto; }
.t00-ph-image--align-right { margin-left: auto; margin-right: 0; }
.t00-ph-image__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* .t00-ph-image__info is the one centered, one bordered/background box;
   Label and the ratio tag are just plain stacked lines inside it, not
   boxes of their own — centering each of them separately, or bordering
   each separately, would read as two badges instead of one. */
.t00-ph-image__info {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 3px 8px; background: var(--t00-bg); border: 1px solid var(--t00-line);
}
.t00-ph-image__label,
.t00-ph-image__tag {
	font: 600 11px/1.2 var(--t00-mono); letter-spacing: .06em; color: color-mix(in srgb, var(--t00-text) 70%, transparent);
	white-space: nowrap;
}

/* Placeholder text ([t00_placeholder_text]) — real text by default (Text
   field's own value, auto-paragraphed); Wireframe swaps it for one
   skeleton line per line typed into that field, so the same element reads
   as a heading placeholder (one line) or a body-copy one (several)
   depending only on what's in there, with the real text kept for screen
   readers via .t00-screen-reader. */
.t00-ph-text { margin-bottom: var(--t00-gap); }
.t00-ph-text__lines { display: grid; gap: .65em; }
.t00-ph-text__line { display: block; height: .8em; border-radius: 999px; background: var(--t00-line); opacity: .8; }
/* Plain body lines (--p) keep the varied-width "paragraph" look; headings
   get their own fixed, shorter width instead — a heading reads as one
   deliberate short line, not part of that same wrapping-paragraph pattern. */
.t00-ph-text__lines .t00-ph-text__line--p:nth-child(3n+2) { width: 96%; }
.t00-ph-text__lines .t00-ph-text__line--p:nth-child(3n) { width: 88%; }
.t00-ph-text__lines .t00-ph-text__line--p:last-child { width: 60%; }
/* Sized to roughly the same scale as the real h1-h6 tags they stand in
   for — bigger reads as a bigger heading — with a shorter, fixed width
   each, since headlines are typically punchier than a full paragraph.
   Darker than a plain line by default (lighter once Dark Background is
   checked, below), so a heading and a paragraph are distinguishable by
   more than height/width alone even at a glance. */
.t00-ph-text__line--h1,
.t00-ph-text__line--h2,
.t00-ph-text__line--h3,
.t00-ph-text__line--h4,
.t00-ph-text__line--h5,
.t00-ph-text__line--h6 {
	background: color-mix(in srgb, var(--t00-line) 55%, var(--t00-text) 45%);
}
.t00-ph-text__line--h1 { height: 2em; width: 75%; }
.t00-ph-text__line--h2 { height: 1.6em; width: 72%; }
.t00-ph-text__line--h3 { height: 1.35em; width: 68%; }
.t00-ph-text__line--h4 { height: 1.15em; width: 64%; }
.t00-ph-text__line--h5 { height: 1.05em; width: 60%; }
.t00-ph-text__line--h6 { height: 1em; width: 56%; }
/* Dark Background: swaps the line color for a translucent white instead of
   --t00-line's light gray, so wireframe lines stay visible on a dark
   section regardless of exactly how dark — only ever set manually (there's
   no way to detect a WPBakery row's own background color from here), and
   only ever changes these lines, never real text. Headings go lighter
   still (more opaque white) than a plain line here — the light-background
   pair above goes darker, so either way it's the same "heading stands out
   more" relationship, just inverted since the background itself inverted. */
/* Alignment: text-align for real text; the wireframe lines are each
   narrower than the column, so they move with auto margins instead. */
.t00-ph-text--align-center { text-align: center; }
.t00-ph-text--align-right { text-align: right; }
.t00-ph-text--align-center .t00-ph-text__line { margin-inline: auto; }
.t00-ph-text--align-right .t00-ph-text__line { margin-left: auto; }
/* A line aligned with the editor's own alignment buttons (text-align on
   that heading/paragraph) follows it, overriding the element's Alignment. */
.t00-ph-text__lines .t00-ph-text__line--align-left { margin-inline: 0 auto; }
.t00-ph-text__lines .t00-ph-text__line--align-center { margin-inline: auto; }
.t00-ph-text__lines .t00-ph-text__line--align-right { margin-inline: auto 0; }
.t00-ph-text--dark .t00-ph-text__line { background: color-mix(in srgb, white 35%, transparent); opacity: 1; }
.t00-ph-text--dark .t00-ph-text__line--h1,
.t00-ph-text--dark .t00-ph-text__line--h2,
.t00-ph-text--dark .t00-ph-text__line--h3,
.t00-ph-text--dark .t00-ph-text__line--h4,
.t00-ph-text--dark .t00-ph-text__line--h5,
.t00-ph-text--dark .t00-ph-text__line--h6 {
	background: color-mix(in srgb, white 65%, transparent);
}

/* Button element */
.t00-btn-wrap { display: inline-block; margin: 0 12px var(--t00-gap) 0; }
.t00-btn-wrap--center, .t00-btn-wrap--right { display: block; margin-right: 0; }
.t00-btn-wrap--center { text-align: center; }
.t00-btn-wrap--right { text-align: right; }

/* Style guide */
.t00-styleguide section { padding-block: var(--t00-gap); border-bottom: 1px dashed var(--t00-line); }
.t00-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.t00-swatch { display: grid; gap: 4px; font-size: .85rem; }
.t00-swatch__chip { height: 64px; border: 1px solid var(--t00-line); border-radius: var(--t00-radius); }
.t00-btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Icon list ([t00_icon_list]) — every per-element setting arrives as an
   inline custom property only when it's set, so each fallback here is what
   an empty field means. align-items: baseline lines the icon up with the
   first line of a wrapping item rather than its middle. Alignment moves
   the whole block; with no Width set, Center and Right shrink it to its
   widest item so there's something to move. */
.t00-icon-list {
	margin: 0 0 var(--t00-gap); padding: 0; list-style: none;
	width: var(--t00-il-width, auto); max-width: 100%; box-sizing: border-box;
	font-size: var(--t00-il-text-size, inherit); color: var(--t00-il-text-color, inherit);
}
.t00-icon-list__item { display: flex; align-items: baseline; gap: var(--t00-il-icon-gap, 10px); margin: 0 0 var(--t00-il-row-gap, 8px); padding: 0; }
.t00-icon-list__item:last-child { margin-bottom: 0; }
.t00-icon-list__icon { flex: none; font-size: var(--t00-il-icon-size, 16px); line-height: 1; color: var(--t00-il-icon-color, var(--t00-primary)); }
.t00-icon-list__icon i { display: inline-block; line-height: 1; }
.t00-icon-list__text { flex: 1; min-width: 0; }
.t00-icon-list--align-center, .t00-icon-list--align-right { width: var(--t00-il-width, fit-content); }
.t00-icon-list--align-center { margin-left: auto; margin-right: auto; }
.t00-icon-list--align-right { margin-left: auto; margin-right: 0; }

/* 7. WPBakery mapping ---------------------------------------------------- */
/* Rows are sections: vertical rhythm comes from --t00-section-y. Horizontally,
   WPBakery's own stylesheet (js_composer.min.css, not this one) gives every
   .vc_row a fixed margin-left/right: -15px of its own, independent of
   --t00-gutter — the classic Bootstrap-style row/column technique, expecting
   each column to counter it with its own fixed padding. Our columns don't:
   they use --t00-gutter/--t00-col-pad instead and assume the row has no margin
   of its own, so WPBakery's -15px has to be zeroed out here, not matched. */
.t00-site .vc_row { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.t00-site .vc_row:not(.vc_inner) { padding-block: var(--t00-section-y); }
.t00-site .vc_row.vc_inner { margin-bottom: var(--t00-gap); }
.t00-site .vc_row.vc_inner:last-child { margin-bottom: 0; }
.t00-site .vc_section { padding-block: var(--t00-section-y); }
/* Gutter lives on the outer column box, padding-inside-columns on the inner one
   (the box WPBakery's own Design options — including a column border — target).
   Keeping them apart means a border a column picks up from Design options sits
   inset from its neighbour by the gutter, instead of the two borders touching
   because both settings shared the same bordered box. A left/right value typed
   into a column's own Design options still overrides the inner box's side. */
.t00-site .vc_column_container {
	padding-left: calc(var(--t00-gutter) / 2);
	padding-right: calc(var(--t00-gutter) / 2);
}
/* The gutter is only ever meant to separate columns from each other, not from
   the row's own edges (which now sit flush with .t00-container's own --t00-edge
   inset — see above), so the outer side of the first and last column drops
   it. A lone column is simultaneously :first-child and :last-child, so it
   drops it on both sides — its content sits at the same --t00-edge (+
   --t00-col-pad, if set) inset as everything else on the page, the footer
   included (the header uses its own Padding, Top & Bottom (px) field
   instead — see section 5). */
.t00-site .vc_column_container:first-child { padding-left: 0; }
.t00-site .vc_column_container:last-child { padding-right: 0; }
/* WPBakery stacks a multi-column row to one column per line below its own
   768px breakpoint (matched elsewhere in this file). Once stacked, every
   column is effectively both first and last — the only thing on its own
   line — so it should drop the side gutter like a lone column already does,
   not just whichever one is first/last in the markup. Without this, a
   stacked row's outer columns come out lopsided (edge inset on one side,
   edge + gutter on the other) and its middle columns sit in further than
   either end. Columns - Gutter - Bottom only matters here too: side by
   side there's nothing under a column to space out, so it stays out of the
   non-stacked rule above entirely. */
@media (max-width: 767px) {
	.t00-site .vc_column_container {
		padding-left: 0; padding-right: 0;
		margin-bottom: var(--t00-gutter-bottom);
	}
	.t00-site .vc_column_container:last-child { margin-bottom: 0; }
}
.t00-site .vc_column_container > .vc_column-inner {
	padding: var(--t00-col-pad);
}
.t00-site .wpb_content_element,
.t00-site .wpb_button,
.t00-site .vc_btn3-container,
/* WPBakery's own Custom Heading element (vc_custom_heading) doesn't carry the
   wpb_content_element class the way most other elements do, so on its own it
   keeps a fixed 10px margin regardless of this setting — confirmed on a live
   page. Added here so a heading followed by something else also follows
   "Space between elements" like everything around it. */
.t00-site .vc_custom_heading { margin-bottom: var(--t00-gap); }
.t00-site .wpb_text_column > .wpb_wrapper > :last-child { margin-bottom: 0; }
.t00-site .wpb_single_image img,
.t00-site .vc_single_image-wrapper { border-radius: var(--t00-radius); }
.t00-site .vc_separator .vc_sep_line { border-color: var(--t00-line); }

/* 8. Buttons: the Type 00 element and WPBakery's own button share one look.
   WPBakery renders vc_btn3 as a <button> when the element has no link set —
   which, on a wireframe placeholder button, is the common case — and as an
   <a> once a link is added. Both carry the same vc_btn3 class either way, so
   the selectors below aren't tag-qualified: an a-only selector left every
   still-unlinked placeholder button unstyled.
   On a WPBakery button, only the typography always follows the theme. The
   Customizer's colors, radius and padding apply only while the element has
   no colours of its own (see below) and its Shape and Size are left at
   WPBakery's defaults (Rounded, Medium); otherwise the element's choice wins.
   This file loads after WPBakery's, so even the non-!important rules here
   would beat its same-specificity ones, hence the scoping on each. */
.t00-btn,
.t00-site .vc_btn3 {
	appearance: none; -webkit-appearance: none;
	display: inline-block;
	font-family: var(--t00-font-body); font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
	text-transform: var(--t00-btn-transform); letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
/* Default Button Size (Customizer → Buttons) sets these two through a body
   class, using WPBakery's own size names (xs Mini, sm Small, md Normal,
   lg Large). The header button and the explicit --sm/--lg modifiers below
   keep their fixed sizes. */
.t00-btn-size-xs { --t00-btn-pad: .35em .8em; --t00-btn-fs: .75rem; }
.t00-btn-size-sm { --t00-btn-pad: .45em 1em; --t00-btn-fs: .875rem; }
.t00-btn-size-lg { --t00-btn-pad: .9em 1.9em; --t00-btn-fs: 1.125rem; }
.t00-btn,
.t00-site .vc_btn3.vc_btn3-size-md { padding: var(--t00-btn-pad, .7em 1.4em); font-size: var(--t00-btn-fs, 1rem); }
.t00-btn {
	border: 2px solid var(--t00-btn-bg); border-radius: var(--t00-btn-radius);
	background: var(--t00-btn-bg); color: #fff;
}
.t00-btn:hover, .t00-btn:focus-visible { background: var(--t00-btn-bg-hover); border-color: var(--t00-btn-bg-hover); color: #fff; }
.t00-btn--sm { padding: .45em 1em; font-size: .875rem; }
.t00-btn--lg { padding: .9em 1.9em; font-size: 1.125rem; }

.t00-btn--outline, .t00-btn-outline .t00-btn--default {
	background: transparent; color: var(--t00-btn-bg);
}
.t00-btn--outline:hover, .t00-btn-outline .t00-btn--default:hover { background: var(--t00-btn-bg); border-color: var(--t00-btn-bg); color: #fff; }
.t00-btn--ghost { background: transparent; border-color: transparent; color: var(--t00-btn-bg); padding-inline: .2em; }
.t00-btn--ghost:hover { background: transparent; border-color: transparent; color: var(--t00-btn-bg-hover); }
.t00-btn--ghost::after { content: " \2192"; }

/* WPBakery buttons ship gradients and per-colour rules; !important is the
   deliberate override so the Customizer button settings apply to them too,
   but only to a button that hasn't been given colours of its own in the
   element. WPBakery marks those in two ways: a vc_btn3-color-* class for a
   preset Color other than the default Grey, or an inline style attribute
   (background-color / color), which this version writes even on the
   Modern style. A freshly added button already carries its default grey
   inline (background-color:#ebebeb; color:#666), so that exact background
   still counts as "nothing chosen". Any other colour, or the Custom /
   Outline custom / Gradient styles, keeps the element's own look. An Outline-style button gets the
   theme's outline look, as does every theme-styled button when the
   Customizer's Default Button Style is Outline. Radius follows the
   Customizer only for the default Rounded shape, so Square and Round work. */
.t00-site .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]),
.t00-site .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]) {
	background-image: none !important; box-shadow: none !important; text-shadow: none !important;
	border: 2px solid var(--t00-btn-bg) !important;
	background-color: var(--t00-btn-bg) !important; color: #fff !important;
}
.t00-site .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):hover,
.t00-site .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):hover,
.t00-site .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):focus,
.t00-site .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):focus { background-color: var(--t00-btn-bg-hover) !important; border-color: var(--t00-btn-bg-hover) !important; color: #fff !important; }
.t00-btn-outline .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]),
.t00-btn-outline .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]),
.t00-site .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]).vc_btn3-style-outline,
.t00-site .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]).vc_btn3-style-outline { background-color: transparent !important; color: var(--t00-btn-bg) !important; }
.t00-btn-outline .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):hover,
.t00-btn-outline .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]):hover,
.t00-site .vc_btn3:not([class*="vc_btn3-color-"]):not([class*="-custom"]):not(.vc_btn3-style-gradient):is(:not([style*="color"]), [style*="background-color:#ebebeb" i]).vc_btn3-style-outline:hover,
.t00-site .vc_btn3.vc_btn3-color-grey:is(:not([style*="color"]), [style*="background-color:#ebebeb" i]).vc_btn3-style-outline:hover { background-color: var(--t00-btn-bg) !important; border-color: var(--t00-btn-bg) !important; color: #fff !important; }
.t00-site .vc_btn3.vc_btn3-shape-rounded { border-radius: var(--t00-btn-radius) !important; }

/* 9. Builder context (WPBakery frontend editor, body.t00-builder) ----------
   The editor draws its row/column controls as small absolutely positioned bars
   that hang over or beyond the element's edge. Anything that clips or stacks
   above them makes them look like they vanished, so remove those effects. */
.t00-builder .t00-main { overflow: visible; }
.t00-builder .t00-header { position: relative; z-index: auto; top: auto; }
.t00-builder .t00-footer { position: relative; z-index: auto; }

/* Column control bars (which carry the "Row" edit buttons) hang 30px above the
   column's top edge. WPBakery clips stretched rows (overflow: hidden), so with
   little or no row padding the bar sits outside the row and is cut off. Letting
   rows overflow in the editor keeps the bar visible without adding any spacing. */
.t00-builder .vc_row,
.t00-builder .vc_row[data-vc-full-width] { overflow: visible !important; }