/* =========================================================
   ENVISION THEME — Design System
   Palette: Ink #14151A, Paper #FBFAF6, Signal (accent, set in Envision >
   Style, default #1A56DB), Slate #6B7280, Line #E5E3DC.
   Typography driven by --envision-font-heading / --envision-font-body,
   both printed by inc/style-settings.php.
   Header rows render as a 3-zone grid (Left / Center / Right), matching
   the Header Builder's column layout exactly.
   ========================================================= */

:root {
	--envision-accent: #1a56db;
	--envision-ink: #14151a;
	--envision-paper: #fbfaf6;
	--envision-slate: #6b7280;
	--envision-line: #e5e3dc;
	--envision-font-heading: Georgia, "Iowan Old Style", serif;
	--envision-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
img, select, input, textarea, table { max-width: 100%; }

body {
	background: var(--envision-paper);
	color: var(--envision-ink);
	font-family: var(--envision-font-body);
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var(--envision-font-heading);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
}

.envision-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Header rows (Top Bar / Main / Header Bottom) ---------- */
.envision-masthead { position: relative; z-index: 100; }

.envision-header-row {
	background: var(--envision-paper);
	border-bottom: 1px solid var(--envision-line);
}
.envision-header-row--topbar,
.envision-header-row--bottom {
	background: var(--envision-ink);
	color: #fff;
	font-size: 13px;
}
.envision-header-row--topbar .envision-header-inner,
.envision-header-row--bottom .envision-header-inner { padding: 8px 24px; }
.envision-header-row--topbar a,
.envision-header-row--bottom a { color: inherit; }

.envision-header--sticky { position: sticky; top: 0; }

/* 3-zone grid — Left / Center / Right, center always visually centered
   regardless of how wide the side zones are. Gap is admin-configurable
   per row (Envision -> Header Builder -> row -> "Gap between elements"). */
.envision-header-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--envision-row-gap, 24px);
	padding: 10px 24px;
	min-height: var(--envision-row-height, auto);
}
.envision-header-col {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}
.envision-header-col--left { justify-self: start; }
.envision-header-col--center { justify-self: center; }
.envision-header-col--right { justify-self: end; }

/* "Everything centered" row alignment option */
.envision-header-row--align-center .envision-header-inner {
	grid-template-columns: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.envision-header-block { display: flex; align-items: center; }

.envision-logo-wrap { display: inline-flex; align-items: center; max-width: var(--envision-logo-width, 100%); }
.envision-logo-wrap img { max-width: 100%; height: auto; display: block; }

.envision-site-title-link {
	font-family: var(--envision-font-heading);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
	color: var(--envision-ink);
}

/* ---------- Menu + Mega Menu ---------- */
.envision-menu-wrap { display: flex; align-items: center; }
.envision-menu {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}
.envision-menu li { position: relative; display: flex; align-items: center; }
.envision-menu a {
	text-decoration: none;
	color: inherit;
	font-size: 15px;
	padding: 6px 0;
}
.envision-menu a:hover,
.envision-menu a:focus-visible { color: var(--envision-accent); }

.envision-mega-toggle {
	background: none; border: none; cursor: pointer; color: var(--envision-slate);
	display: inline-flex; padding: 4px; margin-left: 2px; transition: transform .2s ease;
}
.envision-menu li.is-open > .envision-mega-toggle { transform: rotate(180deg); color: var(--envision-accent); }

/* ---------- Mega panel: 3 selectable styles (flyout / sidebar / fullpage) ---------- */
.envision-mega-panel {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	max-width: calc(100vw - 48px);
	background: #fff;
	color: var(--envision-ink);
	border: 1px solid var(--envision-line);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(20,21,26,0.12);
	padding: 20px 24px;
	z-index: 70;
}
.envision-menu li.is-open > .envision-mega-panel { display: block; }
.envision-menu > li:last-child .envision-mega-panel:not(.envision-mega-panel--fullpage) { left: auto; right: 0; }

.envision-mega-inner { display: flex; gap: 28px; }

.envision-mega-cats {
	list-style: none;
	margin: 0;
	padding: 0 20px 0 0;
	min-width: 200px;
	flex-shrink: 0;
	border-right: 1px solid var(--envision-line);
}
.envision-mega-cat-item > a {
	display: block;
	padding: 10px 16px 10px 4px;
	font-size: 14px;
	color: var(--envision-ink);
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
}
.envision-mega-cat-item.is-active > a,
.envision-mega-cat-item:hover > a { background: var(--envision-paper); color: var(--envision-accent); }

.envision-mega-panels { flex: 1; min-width: 0; }
.envision-mega-panel-content {
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 220px;
}
.envision-mega-panel-content.is-active { display: flex; }
.envision-mega-subcat {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	text-decoration: none;
	color: var(--envision-ink);
	white-space: nowrap;
}
.envision-mega-subcat:hover { background: var(--envision-paper); color: var(--envision-accent); }

/* Sidebar style: right side becomes a wide multi-column grid */
.envision-mega-panel--sidebar { min-width: 620px; }
.envision-mega-panel--sidebar .envision-mega-panel-content.is-active {
	display: grid;
	grid-template-columns: repeat(4, minmax(140px, 1fr));
	gap: 6px 28px;
	align-content: start;
}

/* Full page style: covers the whole viewport */
.envision-mega-panel--fullpage {
	position: fixed;
	inset: 0;
	max-width: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	padding: 60px 48px;
	z-index: 300;
	overflow-y: auto;
}
.envision-mega-panel--fullpage .envision-mega-inner { max-width: 1100px; margin: 0 auto; }
.envision-mega-panel--fullpage .envision-mega-cats { min-width: 240px; }
.envision-mega-panel--fullpage .envision-mega-cat-item > a { font-size: 16px; padding: 12px 16px 12px 4px; }
.envision-mega-panel--fullpage .envision-mega-panel-content.is-active {
	display: grid;
	grid-template-columns: repeat(3, minmax(160px, 1fr));
	gap: 8px 32px;
}
.envision-mega-panel--fullpage .envision-mega-subcat { font-size: 15px; padding: 10px 12px; }
.envision-mega-close {
	position: absolute;
	top: 20px;
	right: 24px;
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	color: var(--envision-ink);
	padding: 8px;
}

/* ---------- Standard nested submenus (Appearance -> Menus parent/child
   items) — 1st level drops down, deeper levels flyout to the right ---------- */
.envision-menu li.menu-item-has-children { position: relative; }

.envision-submenu-caret {
	background: none; border: none; cursor: pointer; color: inherit;
	display: inline-flex; padding: 4px; margin-left: 2px; transition: transform .2s ease;
}
.envision-menu li.is-open > .envision-submenu-caret { transform: rotate(180deg); }
.envision-menu .sub-menu .envision-submenu-caret { transform: rotate(-90deg); }
.envision-menu .sub-menu li.is-open > .envision-submenu-caret { transform: rotate(90deg); }

.envision-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	margin: 0;
	padding: 8px;
	min-width: 220px;
	list-style: none;
	background: #fff;
	color: var(--envision-ink);
	border: 1px solid var(--envision-line);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(20,21,26,0.12);
	z-index: 60;
}
.envision-menu .sub-menu li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}
.envision-menu .sub-menu a {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border-radius: 6px;
	font-size: 14px;
	white-space: nowrap;
}
.envision-menu .sub-menu a:hover,
.envision-menu .sub-menu a:focus-visible { background: var(--envision-paper); color: var(--envision-accent); }

/* 2nd level and deeper flyout to the side instead of stacking below */
.envision-menu .sub-menu .sub-menu {
	top: -9px;
	left: 100%;
	margin-left: 6px;
}

/* Click/tap opens it (works everywhere, incl. touch) */
.envision-menu li.is-open > .sub-menu { display: block; }

/* Hover also opens it, but only for real mouse/trackpad input so it
   doesn't misfire on touch devices */
@media (hover: hover) and (pointer: fine) {
	.envision-menu li.menu-item-has-children:hover > .sub-menu,
	.envision-menu li.menu-item-has-children:focus-within > .sub-menu {
		display: block;
	}
}

/* ---------- Mobile menu toggle (breakpoint-specific CSS is injected
   inline by envision_mobile_menu_css() using the configured value) ---------- */
.envision-mobile-toggle {
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	align-items: center;
	justify-content: center;
	padding: 6px;
}
.envision-mobile-toggle[aria-expanded="true"] .envision-mobile-toggle-icon { display: none; }
.envision-mobile-search { display: none; margin-top: 20px; }
.envision-mobile-search .envision-search-field { width: 100%; }

/* ---------- Search ---------- */
.envision-search-form {
	display: flex;
	align-items: center;
	border: 1px solid var(--envision-line);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.envision-header-row--topbar .envision-search-form,
.envision-header-row--bottom .envision-search-form { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.envision-search-field {
	border: none;
	padding: 8px 14px;
	font-size: 14px;
	outline: none;
	background: transparent;
	color: inherit;
	width: 160px;
}
.envision-search-submit {
	border: none;
	background: transparent;
	cursor: pointer;
	color: inherit;
	padding: 8px 12px;
	display: inline-flex;
}

/* ---------- Search style variants (Header Builder -> Search element) ---------- */
.envision-search--minimal {
	border: none;
	border-bottom: 1.5px solid var(--envision-line);
	border-radius: 0;
	background: transparent;
}
.envision-header-row--topbar .envision-search--minimal,
.envision-header-row--bottom .envision-search--minimal { border-bottom-color: rgba(255,255,255,.35); }

.envision-search--boxed { border-radius: 6px; }

.envision-search--filled {
	background: var(--envision-accent);
	border-color: var(--envision-accent);
}
.envision-search--filled .envision-search-field { color: #fff; }
.envision-search--filled .envision-search-field::placeholder { color: rgba(255,255,255,.75); }
.envision-search--filled .envision-search-submit { color: #fff; }

.envision-search--icon-toggle {
	border: none;
	background: transparent;
	overflow: visible;
	position: relative;
	justify-content: flex-end;
}
.envision-search--icon-toggle .envision-search-field {
	width: 0;
	padding: 0;
	border: none;
	opacity: 0;
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	color: var(--envision-ink);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(20,21,26,.15);
	transition: width .25s ease, opacity .2s ease, padding .25s ease;
}
.envision-search--icon-toggle.is-expanded .envision-search-field {
	width: 200px;
	padding: 8px 14px;
	opacity: 1;
	border: 1px solid var(--envision-line);
}
.envision-search--icon-toggle .envision-search-submit {
	border-radius: 50%;
	background: var(--envision-paper);
	position: relative;
	z-index: 1;
}
.envision-header-row--topbar .envision-search--icon-toggle .envision-search-submit,
.envision-header-row--bottom .envision-search--icon-toggle .envision-search-submit { background: rgba(255,255,255,.12); }

/* ---------- Social icons ---------- */
.envision-social-icons { display: flex; gap: 12px; align-items: center; }
.envision-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	opacity: .85;
	transition: opacity .15s ease, color .15s ease;
}
.envision-social-icon:hover { opacity: 1; color: var(--envision-accent); }

/* ---------- Button + Text header blocks ---------- */
.envision-header-btn {
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, opacity .15s ease;
}
.envision-header-btn:hover { transform: translateY(-1px); opacity: .92; }
.envision-header-btn--solid { background: var(--envision-accent); color: #fff; }
.envision-header-btn--outline { border: 1.5px solid currentColor; color: inherit; }
.envision-header-text { font-size: 14px; }

/* ---------- Content ---------- */
.envision-main { padding: 48px 24px; }
.envision-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 32px;
}
.envision-card-title a { text-decoration: none; color: var(--envision-ink); }
.envision-card-meta { color: var(--envision-slate); font-size: 13px; margin: 6px 0 10px; }
.envision-page-title { font-size: 38px; }

.envision-footer {
	border-top: 1px solid var(--envision-line);
	margin-top: 64px;
	color: var(--envision-slate);
	font-size: 14px;
}
.envision-footer-inner { padding: 40px 24px 24px; }
.envision-footer-menu { gap: 18px; margin-bottom: 0; }

.envision-footer-bottom {
	border-top: 1px solid var(--envision-line);
	padding: 14px 0;
}
.envision-footer-bottom .envision-container { padding: 0 24px; }
.envision-footer-credit { margin: 0; font-size: 13px; }

/* ---------- Footer widget columns (Envision > Footer layout) ---------- */
.envision-footer-widgets {
	display: grid;
	gap: 32px;
	margin-bottom: 32px;
}
.envision-footer-layout--1 { grid-template-columns: 1fr; }
.envision-footer-layout--2 { grid-template-columns: repeat(2, 1fr); }
.envision-footer-layout--3 { grid-template-columns: repeat(3, 1fr); }
.envision-footer-layout--4 { grid-template-columns: repeat(4, 1fr); }
.envision-footer-layout--5 { grid-template-columns: repeat(5, 1fr); }
.envision-footer-layout--6 { grid-template-columns: repeat(6, 1fr); }
.envision-footer-layout--2-66-33 { grid-template-columns: 2fr 1fr; }
.envision-footer-layout--2-33-66 { grid-template-columns: 1fr 2fr; }
.envision-footer-layout--3-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
.envision-footer-layout--3-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
.envision-footer-layout--3-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
.envision-footer-block { margin-bottom: 32px; }
.envision-footer-admin-notice {
	background: #fff3cd;
	border: 1px solid #ffe69c;
	color: #664d03;
	padding: 10px 14px;
	border-radius: 6px;
	font-size: 13px;
}

/* ---------- Widget areas (Sidebar / Shop / Footer columns) ---------- */
.envision-widget { margin-bottom: 28px; }
.envision-widget:last-child { margin-bottom: 0; }
.envision-widget-title {
	font-family: var(--envision-font-heading);
	font-size: 16px;
	margin-bottom: 12px;
}
.envision-widget ul { list-style: none; margin: 0; padding: 0; }
.envision-widget a { text-decoration: none; }
.envision-shop-sidebar { margin-bottom: 32px; }

/* ---------- Shop layout: sidebar beside products, not below ---------- */
.envision-shop-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin-top: 32px;
}
.envision-shop-layout > #primary { flex: 1; min-width: 0; }
.envision-shop-layout > .envision-shop-sidebar {
	width: 260px;
	flex-shrink: 0;
	order: -1; /* sidebar first (left), regardless of DOM output order */
	margin-bottom: 0;
}
@media (max-width: 960px) {
	.envision-shop-layout { flex-direction: column; }
	.envision-shop-layout > .envision-shop-sidebar { width: 100%; order: 0; }
}

/* ---------- Collapsible product-categories widget (WoodMart style):
   closed by default, chevron toggle for any category with children.
   Applies wherever the Categories widget is used, not just the shop
   sidebar, so it works no matter which widget area it's placed in. ---------- */
.widget_categories ul,
.widget_product_categories ul { list-style: none; margin: 0; padding: 0; }
.widget_categories li,
.widget_product_categories li { position: relative; }
.widget_categories > ul > li,
.widget_product_categories > ul > li { border-bottom: 1px solid var(--envision-line); }
.widget_categories a,
.widget_product_categories a {
	display: block;
	padding: 10px 28px 10px 2px;
	font-size: 14px;
	color: var(--envision-ink);
	text-decoration: none;
}
.widget_categories a:hover,
.widget_product_categories a:hover { color: var(--envision-accent); }
.widget_categories .children,
.widget_product_categories .children {
	margin: 0 0 6px 14px;
	display: none;
}
.widget_categories .children.is-open,
.widget_product_categories .children.is-open { display: block; }
.envision-cat-toggle {
	position: absolute;
	right: 0;
	top: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	color: inherit;
	transition: transform .2s ease;
}
.envision-cat-toggle.is-open { transform: rotate(180deg); }

/* ---------- Envision: Product Categories widget (dedicated, always
   closed by default) ---------- */
.envision-prodcat-list { list-style: none; margin: 0; padding: 0; }
.envision-prodcat-item { position: relative; border-bottom: 1px solid var(--envision-line); }
.envision-prodcat-item .envision-prodcat-list.children { border-bottom: none; }
.envision-prodcat-item > a {
	display: block;
	padding: 12px 30px 12px 4px;
	font-size: 14px;
	color: var(--envision-ink);
	text-decoration: none;
}
.envision-prodcat-item > a:hover { color: var(--envision-accent); }
.envision-prodcat-count { color: var(--envision-slate); font-size: 12px; margin-left: 4px; }
.envision-prodcat-item .children {
	display: none;
	margin: 0 0 4px 14px;
}
.envision-prodcat-item .children.is-open { display: block; }

.envision-prodcat-widget--dark {
	background: #17181c;
	color: #fff;
	padding: 20px;
	border-radius: 8px;
}
.envision-prodcat-widget--dark .envision-prodcat-item { border-bottom-color: rgba(255,255,255,.08); }
.envision-prodcat-widget--dark .envision-prodcat-item > a { color: #d7d7db; }
.envision-prodcat-widget--dark .envision-prodcat-item > a:hover { color: var(--envision-accent); }
.envision-prodcat-widget--dark .envision-prodcat-count { color: #8b8b93; }

/* ---------- Shortcodes (logo/menu/search reused outside the header) ---------- */
.envision-shortcode { display: inline-flex; }

/* ---------- Responsive polish (non-menu-specific) ---------- */
@media (max-width: 782px) {
	.envision-container { padding: 0 16px; }
	.envision-header-inner { grid-template-columns: auto 1fr; }
	.envision-header-col--right { grid-column: 2; justify-self: end; }
	.envision-logo-wrap { max-width: var(--envision-logo-width-mobile, var(--envision-logo-width, 100%)); }
}

@media (max-width: 960px) {
	.envision-footer-layout--4,
	.envision-footer-layout--5,
	.envision-footer-layout--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.envision-footer-widgets { grid-template-columns: 1fr !important; }
	.envision-footer-widgets .envision-footer-col { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--envision-accent);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	width: 1px; height: 1px;
	overflow: hidden;
}