/*
Theme Name:   Understrap Child
Theme URI:    https://understrap.com
Description:  Jentech child theme for Understrap.
Author:       Konstruct Digital
Template:     understrap
Version:      1.2.0
Text Domain:  understrap-child
*/

/* ==========================================================================
   Hand-written CSS, deployed as-is (no compiling).

   1.  Design tokens
   2.  Header shell + sticky behaviour
   3.  Top-level items and buttons
   4.  Mega menu: shared (mobile first)
   5.  Mega menu: tablet, 992px and up
   6.  Mega menu: desktop, 1200px and up
   7.  Hamburger toggle
   8.  Nav search box
   9.  Motion
   10. Site components (formerly Appearance > Customize > Additional CSS)

   Breakpoints: 768 (md), 992 (lg), 1200 (xl, the point where the nav expands), 1400, 1600, 1920.
   The compiled bundle (css/child-theme.min.css) no longer contains any nav CSS.
   ========================================================================== */


/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--jt-primary: #275aa7;
	--jt-ink: #343434;
	--jt-panel-bg: #f5f5f5;
	--jt-rule: #d6d6d6;

	/* Fluid type, same scale as the old fluid-fz(min, max) mixin: min at 320px wide, max at 1920px. */
	--jt-fz-14-18: clamp(14px, 13.2px + 0.25vw, 18px);
	--jt-fz-14-20: clamp(14px, 12.8px + 0.375vw, 20px);
	--jt-fz-16-18: clamp(16px, 15.6px + 0.125vw, 18px);
	--jt-fz-16-20: clamp(16px, 15.2px + 0.25vw, 20px);
	--jt-fz-18-20: clamp(18px, 17.6px + 0.125vw, 20px);

	/* Mega menu (1200px and up): category list on the left, product panel on the right. */
	--jt-mega-left: clamp(26.25rem, 37.5vw, 33.75rem);
	--jt-mega-right: clamp(41.875rem, 62.5vw - 5rem, 70rem);
	--jt-mega-pad: 1.5rem;
	--jt-row-h: 60px;

	/* Motion. */
	--jt-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--jt-speed: 0.2s;

	/* Space taken by the WordPress admin bar when logged in. */
	--jt-adminbar: 0px;
}

body.admin-bar {
	--jt-adminbar: 32px;
}

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

@media (max-width: 600px) {
	/* The admin bar scrolls away on small phones. */
	body.admin-bar {
		--jt-adminbar: 0px;
	}
}

@media (min-width: 1600px) {
	:root {
		--jt-row-h: 80px;
	}
}


/* ==========================================================================
   2. Header shell + sticky behaviour
   ========================================================================== */

.wrapper-navbar {
	/*
	 * Header height in each state. Below 1200px the logo row is as tall as the logo (width x 0.3953
	 * image ratio + 10px of padding); from 1200px the nav items set it.
	 */
	--jt-logo-w: 200px;
	--jt-logo-compact-w: 130px;
	--jt-full-h: calc(var(--jt-logo-w) * 0.3953 + 10px);
	--jt-compact-h: calc(var(--jt-logo-compact-w) * 0.3953 + 10px);
	--jt-shrink: calc(var(--jt-full-h) - var(--jt-compact-h));
	--jt-header-h: var(--jt-full-h);

	/*
	 * The header always keeps its full height in the page (so nothing jumps when it shrinks) and is
	 * pinned with a negative `top`: it sticks once its top part has scrolled away, and the compact nav,
	 * bottom-aligned inside it, fills what stays visible. js/jentech-nav.js adds .is-compact at that moment.
	 */
	position: sticky;
	top: calc(var(--jt-adminbar) - var(--jt-shrink));
	z-index: 1030;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--jt-full-h);
	background-color: #fff;
	transition: top var(--jt-speed) var(--jt-ease);
}

.wrapper-navbar.is-compact {
	--jt-header-h: var(--jt-compact-h);
}

@media (min-width: 576px) {
	.wrapper-navbar {
		--jt-logo-w: 339px;
		--jt-logo-compact-w: 200px;
	}
}

@media (min-width: 1200px) {
	.wrapper-navbar {
		--jt-logo-w: 243px;
		--jt-full-h: 147px;
		--jt-compact-h: 92px;
	}
}

@media (min-width: 1400px) {
	.wrapper-navbar {
		--jt-logo-w: 339px;
	}
}

/* Open mobile menu: show the full header, pinned to the top of the screen. */
html.jt-nav-open .wrapper-navbar {
	top: var(--jt-adminbar);
}

.wrapper-navbar .navbar {
	padding-top: 0;
	padding-bottom: 0;
	transition: box-shadow 0.3s var(--jt-ease);
}

/* Brand-colour rule under the header. */
.wrapper-navbar .navbar::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background-color: var(--jt-primary);
	pointer-events: none;
}

/* A soft shadow separates the shrunken header from the page scrolling under it. */
.wrapper-navbar.is-compact .navbar {
	box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.35);
}

.wrapper-navbar .navbar-brand {
	max-width: var(--jt-logo-w);
	transition: max-width 0.3s var(--jt-ease);
}

.wrapper-navbar.is-compact .navbar-brand {
	max-width: var(--jt-logo-compact-w);
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.wrapper-navbar .container {
		max-width: none;
	}
}

@media (min-width: 1600px) {
	.wrapper-navbar .container {
		max-width: 1540px;
	}

	.wrapper-navbar .navbar-brand {
		margin-right: 6rem;
	}
}

/*
 * Below 1200px the menu opens inside the (sticky) header. Cap its height at the screen minus the
 * header row so a tall menu scrolls inside itself instead of running off the bottom of the screen.
 * overscroll-behavior stops the page behind from scrolling when the menu reaches its end. (Don't lock
 * scrolling with overflow: hidden on <html>: it breaks position: sticky.)
 * --jt-head-h is the height of the logo row; js/jentech-nav.js keeps it up to date.
 */
@media (max-width: 1199.98px) {
	.wrapper-navbar .navbar-collapse {
		max-height: calc(100vh - var(--jt-adminbar) - var(--jt-head-h, 100px));
		max-height: calc(100dvh - var(--jt-adminbar) - var(--jt-head-h, 100px));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}

	/* "More below" hint: fades the bottom edge of the scrolling menu until you reach the end. */
	.wrapper-navbar .navbar-collapse::after {
		content: "";
		position: sticky;
		bottom: 0;
		display: block;
		height: 3rem;
		margin-top: -3rem;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s var(--jt-ease);
	}

	.wrapper-navbar .navbar-collapse.has-more::after {
		opacity: 1;
	}
}


/* ==========================================================================
   3. Top-level items and buttons
   ========================================================================== */

.wrapper-navbar .navbar-nav {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.wrapper-navbar .navbar-nav > .menu-item > .nav-link {
	color: var(--jt-ink);
	font-size: var(--jt-fz-14-20);
	font-weight: 600;
	text-transform: capitalize;
}

.wrapper-navbar .navbar-nav > .menu-item > .nav-link:hover,
.wrapper-navbar .navbar-nav > .menu-item > .nav-link:focus {
	color: var(--jt-primary);
}

/*
 * The page you are on (or the section it belongs to) is always dark and bold, and the label stays dark
 * while its menu is open. Bootstrap would otherwise turn .active and .show links white. Buttons excluded.
 */
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link.active,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link.show,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-item > .nav-link,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-ancestor > .nav-link,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-parent > .nav-link {
	color: var(--jt-ink);
}

.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link.active,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-item > .nav-link,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-ancestor > .nav-link,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn).current-menu-parent > .nav-link {
	font-weight: 700;
}

.wrapper-navbar .navbar-nav > .menu-item > .nav-link:focus-visible {
	outline: 2px solid var(--jt-primary);
	outline-offset: 2px;
}

@media (min-width: 1200px) {
	.wrapper-navbar .navbar-nav {
		padding-top: 0;
		padding-bottom: 0;
	}

	.wrapper-navbar .navbar-nav > .menu-item {
		display: flex;
		align-items: center;
		min-height: var(--jt-header-h);
	}
}

/* Contact / Safety Data Sheets buttons (menu items with the "nav-btn" class). */
.wrapper-navbar .navbar-nav > .nav-btn > .nav-link {
	display: inline-block;
	min-width: 163px;
	border: 2px solid var(--jt-primary);
	background-color: var(--jt-primary);
	color: #fff;
	text-align: center;
}

.wrapper-navbar .navbar-nav > .nav-btn > .nav-link:hover,
.wrapper-navbar .navbar-nav > .nav-btn > .nav-link:focus {
	background-color: transparent;
	color: var(--jt-primary);
}

.wrapper-navbar .navbar-nav > .nav-btn.hollow > .nav-link {
	background-color: transparent;
	color: var(--jt-primary);
}

.wrapper-navbar .navbar-nav > .nav-btn.hollow > .nav-link:hover,
.wrapper-navbar .navbar-nav > .nav-btn.hollow > .nav-link:focus {
	background-color: var(--jt-primary);
	color: #fff;
}

.wrapper-navbar .navbar-nav > .nav-btn.smaller > .nav-link {
	padding-top: 0;
	padding-bottom: 0;
}


/* ==========================================================================
   4. Mega menu: shared (mobile first)

   Markup (from bs5_Walker in functions.php):

     li.is-mega-menu.dropdown                      "Products"
       ul.dropdown-menu.depth_0                    category list
         li.dropdown                               a category: classes set in Appearance > Menus
           a.dropdown-toggle  (+ img.menu-item-icon)
           ul.dropdown-menu.depth_1                the category's product panel
             li.dropdown-header                    panel title
             li / li.jt-group                      product links, or a heading with ul.jt-group-list
             li.promo-banner                       featured product (ACF fields on the category item)

   Menu item classes supported (Appearance > Menus > CSS Classes):
     panel columns   is-three-columns | is-twelve-columns | is-two-columns (a group's list)
     panel rows      two-rows | four-rows (set how tall the list area is on desktop), is-multi (compact title row)
     placement       is-full-width | span-2 ... span-6
     dividers        bottom-sep | right-sep (separator items), nav-border-bottom | nav-border-middle
   ========================================================================== */

.wrapper-navbar .dropdown-menu {
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* --- Category list (depth 0 panel) --- */

.wrapper-navbar .dropdown-menu.depth_0 {
	padding: 0.5rem 0;
}

.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--jt-row-h);
	background-color: transparent;
	color: var(--jt-ink);
	font-size: var(--jt-fz-14-18);
	font-weight: 700;
	line-height: normal;
	white-space: normal;
}

.wrapper-navbar .menu-item-icon {
	flex: 0 0 auto;
	width: 37px;
	height: 37px;
	margin-right: 11px;
}

/* Arrow on rows that open a panel. */
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle::before {
	content: "";
	position: absolute;
	right: 0.5rem;
	width: 21px;
	height: 12px;
	background: url("/wp-content/uploads/2025/12/arrow-inactive.svg") center / auto no-repeat;
}

.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle::after {
	content: none;
}

/* Active, open and current-page rows. */
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-item.show,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-ancestor > .dropdown-item,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-parent > .dropdown-item,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-item > .dropdown-item,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-item:focus-visible {
	background-color: var(--jt-primary);
	color: #fff;
}

/* Rows with a panel highlight with their open state (set by the script); rows without one need :hover. */
@media (hover: hover) {
	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item:not(.dropdown) > .dropdown-item:hover {
		background-color: var(--jt-primary);
		color: #fff;
	}
}

.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle.show::before,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-ancestor > .dropdown-toggle::before,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-parent > .dropdown-toggle::before,
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item.current-menu-item > .dropdown-toggle::before {
	width: 12px;
	height: 21px;
	background-image: url("/wp-content/uploads/2025/12/arrow-active.svg");
}

/* Below 1200px the open row's arrow points down; from 1200px up it points at the panel. */
.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle.show::before {
	transform: translateX(-6px) rotate(90deg);
}

.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-item:focus-visible {
	outline: 2px solid var(--jt-primary);
	outline-offset: -4px;
	box-shadow: inset 0 0 0 2px #fff;
}

@media (min-width: 768px) {
	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle::before {
		right: 1rem;
	}
}

/* --- Product panel (depth 1) --- */

.wrapper-navbar .dropdown-menu.depth_1 {
	--jt-cols: 1fr;
	--jt-rows: 4rem auto 1fr;

	position: static;
	padding: 1.5rem 0;
	background-color: var(--jt-panel-bg);
}

.wrapper-navbar .dropdown-menu.depth_1.show {
	display: grid;
	grid-template-columns: var(--jt-cols);
	grid-template-rows: var(--jt-rows);
}

/* Compact title row for panels made of several groups. */
.wrapper-navbar .menu-item.is-multi > .dropdown-menu.depth_1 {
	--jt-rows: 4rem auto;

	grid-auto-rows: auto;
	align-items: start;
}

.wrapper-navbar .dropdown-menu.depth_1 > .dropdown-header {
	grid-column: 1 / -1;
	padding: 0.5rem 1rem;
	color: var(--jt-primary);
	font-size: var(--jt-fz-18-20);
	font-weight: 800;
	line-height: normal;
	white-space: normal;
}

.wrapper-navbar .dropdown-header a {
	color: inherit;
	text-decoration: none;
}

.wrapper-navbar .dropdown-header a:hover,
.wrapper-navbar .dropdown-header a:focus-visible {
	text-decoration: underline;
}

/* Plain links in a panel. */
.wrapper-navbar .dropdown-menu.depth_1 > .menu-item > .dropdown-item:not(.jt-group-title),
.wrapper-navbar .jt-group-list > .menu-item > .dropdown-item {
	background-color: transparent;
	line-height: normal;
	white-space: normal;
}

.wrapper-navbar .dropdown-menu.depth_1 > .menu-item > .dropdown-item:not(.jt-group-title) {
	font-weight: 500;
}

.wrapper-navbar .dropdown-menu.depth_1 > .menu-item > .dropdown-item:not(.jt-group-title):hover,
.wrapper-navbar .dropdown-menu.depth_1 > .menu-item > .dropdown-item:not(.jt-group-title):focus-visible {
	background-color: transparent;
	font-weight: 700;
}

.wrapper-navbar .jt-group-list > .menu-item > .dropdown-item:hover,
.wrapper-navbar .jt-group-list > .menu-item > .dropdown-item:focus-visible {
	background-color: transparent;
	color: var(--jt-ink);
	font-weight: 700;
}

/* The page you are on: dark and bold at every level (Bootstrap's .active would make it white). */
.wrapper-navbar .dropdown-menu.depth_1 .current-menu-item > .dropdown-item,
.wrapper-navbar .dropdown-menu.depth_1 .dropdown-item[aria-current="page"],
.wrapper-navbar .dropdown-menu.depth_1 .dropdown-item.active:not(.jt-group-title) {
	background-color: transparent;
	color: var(--jt-ink);
	font-weight: 700;
}

.wrapper-navbar .dropdown-menu.depth_1 .dropdown-item:focus-visible {
	outline: 2px solid var(--jt-primary);
	outline-offset: -2px;
}

/* Group heading (a depth 2 link such as "Adapter Subs") and its list. */
.wrapper-navbar .jt-group-title {
	background-color: transparent;
	color: var(--jt-primary);
	font-size: var(--jt-fz-16-18);
	font-weight: 700;
	line-height: normal;
	white-space: normal;
}

.wrapper-navbar .jt-group-title:hover,
.wrapper-navbar .jt-group-title:focus-visible {
	background-color: transparent;
	color: var(--jt-primary);
}

.wrapper-navbar .jt-group-list {
	margin: 0 0 0 1rem;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.wrapper-navbar .jt-group-title {
		line-height: 2.78;
	}

	.wrapper-navbar .menu-item.is-multi > .dropdown-menu.depth_1 {
		--jt-rows: 3rem auto;
	}

	.wrapper-navbar .dropdown-menu.depth_1 {
		padding: 1.5rem;
	}
}

/* Dividers only make sense once the panel has columns. */
.wrapper-navbar .bottom-sep,
.wrapper-navbar .right-sep {
	display: none;
}

/* --- Featured product banner --- */

.wrapper-navbar .promo-banner {
	grid-column: 1 / -1;
	align-self: end;
	margin-top: 1.5rem;
}

.wrapper-navbar .promo-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wrapper-navbar .promo-banner .btn {
	min-height: 33px;
}

.wrapper-navbar .promo-banner .promo-info-wrapper {
	padding: 1.5rem;
	background: url("/wp-content/uploads/2025/12/Featured-product-banner-background.png") center / cover no-repeat;
}

.wrapper-navbar .promo-banner p.eyebrow {
	font-size: 14px;
}

.wrapper-navbar .promo-banner .promo-title {
	margin: 0 0 0.5rem;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: var(--jt-fz-16-20);
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1.25;
}


/* ==========================================================================
   5. Mega menu: tablet, 992px and up (still the stacked mobile menu, with a multi-column panel)
   ========================================================================== */

@media (min-width: 992px) {
	.wrapper-navbar .dropdown-menu.depth_1 {
		--jt-cols: 1fr 1fr;
	}

	.wrapper-navbar .menu-item.is-three-columns > .dropdown-menu.depth_1 {
		--jt-cols: repeat(3, 1fr);
	}

	.wrapper-navbar .menu-item.is-twelve-columns > .dropdown-menu.depth_1 {
		--jt-cols: repeat(12, 1fr);
	}

	.wrapper-navbar .menu-item.is-multi > .dropdown-menu.depth_1 > .menu-item:not(.bottom-sep):not(.right-sep) {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.wrapper-navbar .menu-item.is-full-width {
		grid-column: 1 / -1;
	}

	.wrapper-navbar .menu-item.span-2 { grid-column: span 2; }
	.wrapper-navbar .menu-item.span-3 { grid-column: span 3; }
	.wrapper-navbar .menu-item.span-4 { grid-column: span 4; }
	.wrapper-navbar .menu-item.span-5 { grid-column: span 5; }
	.wrapper-navbar .menu-item.span-6 { grid-column: span 6; }

	/* A group list can show its links in columns. */
	.wrapper-navbar .is-full-width > .jt-group-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.wrapper-navbar .is-two-columns > .jt-group-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	/* Dividers. */
	.wrapper-navbar .bottom-sep {
		display: block;
		grid-column: 1 / -1;
		padding: 0;
		border-bottom: 1px solid #d9d9d9;
	}

	.wrapper-navbar .right-sep {
		position: relative;
		display: block;
		padding: 0;
	}

	.wrapper-navbar .right-sep::before {
		content: "";
		position: absolute;
		top: 25px;
		left: 50%;
		width: 1px;
		height: 170px;
		background-color: var(--jt-rule);
		transform: translateX(-50%);
	}

	.wrapper-navbar .nav-border-bottom {
		position: relative;
	}

	.wrapper-navbar .nav-border-bottom::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		width: 90%;
		height: 1px;
		background-color: var(--jt-rule);
		transform: translateX(-50%);
	}

	/*
	 * Vertical rule between the two columns of a two-column panel ("nav-border-middle").
	 * It is placed on the grid so it spans the two rows of groups (rows 2 and 3, under the title)
	 * and stops above the promo banner, whatever the content height.
	 */
	.wrapper-navbar .nav-border-middle > .dropdown-menu.depth_1 {
		position: relative;
	}

	.wrapper-navbar .nav-border-middle > .dropdown-menu.depth_1::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		grid-column: 1 / -1;
		grid-row: 2 / 4;
		width: 1px;
		background-color: var(--jt-rule);
		pointer-events: none;
	}
}


/* ==========================================================================
   6. Mega menu: desktop, 1200px and up

   .depth_0 becomes a two-column grid: category rows in column 1, the open category's panel in
   column 2 spanning every row. The panel sets the height of the whole menu, so nothing is clipped.
   The category <li> uses display: contents so its link and panel can sit in that grid.
   ========================================================================== */

@media (min-width: 1200px) {
	.wrapper-navbar .navbar-nav > .is-mega-menu {
		position: static; /* anchor the menu to the header, not to the "Products" link */
	}

	.wrapper-navbar .is-mega-menu > .dropdown-menu.depth_0 {
		position: absolute;
		top: calc(100% - 7px); /* tuck under the header so the pointer never leaves the menu */
		left: calc((100% - var(--jt-mega-left) - var(--jt-mega-right)) / 2);
		z-index: 1000;
		width: max-content;
		max-width: 100vw;
		padding: var(--jt-mega-pad) 0;
		/*
		 * White under the category list, grey under the panel. The grey is painted on the menu itself, not
		 * only on the panel, so a classic (always visible) scrollbar sits on grey and the right edge stays
		 * flush instead of showing a white strip.
		 */
		background: linear-gradient(to right, #fff var(--jt-mega-left), var(--jt-panel-bg) var(--jt-mega-left));
		/* Quiet scrollbar, for menus taller than the window. */
		scrollbar-width: thin;
		scrollbar-color: rgba(52, 52, 52, 0.35) transparent;
	}

	.wrapper-navbar .is-mega-menu > .dropdown-menu.depth_0.show {
		display: grid;
		grid-template-columns: var(--jt-mega-left) auto;
		/* Spare auto rows collapse to nothing; the last row absorbs the panel's extra height. */
		grid-template-rows: repeat(24, auto) 1fr;
		/* Never taller than the screen: very short windows scroll the menu instead. */
		max-height: calc(100vh - var(--jt-adminbar) - var(--jt-header-h) - 1rem);
		max-height: calc(100dvh - var(--jt-adminbar) - var(--jt-header-h) - 1rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/*
	 * "More below" hint. When the menu is taller than the window it scrolls; this fades the bottom edge
	 * (white under the list, grey under the panel) until you reach the end. The script adds .has-more to
	 * the Products item. It is drawn on that item, not inside the scrolling menu, so it stays put.
	 */
	.wrapper-navbar .navbar-nav > .is-mega-menu::after {
		content: "";
		position: absolute;
		z-index: 1001;
		top: calc(var(--jt-header-h) - 7px + (100vh - var(--jt-adminbar) - var(--jt-header-h) - 1rem) - 4rem);
		top: calc(var(--jt-header-h) - 7px + (100dvh - var(--jt-adminbar) - var(--jt-header-h) - 1rem) - 4rem);
		left: calc((100% - var(--jt-mega-left) - var(--jt-mega-right)) / 2);
		width: calc(var(--jt-mega-left) + var(--jt-mega-right));
		height: 4rem;
		background:
			linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff) left top / var(--jt-mega-left) 100% no-repeat,
			linear-gradient(to bottom, rgba(245, 245, 245, 0), var(--jt-panel-bg)) right top / var(--jt-mega-right) 100% no-repeat;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.2s var(--jt-ease);
	}

	.wrapper-navbar .navbar-nav > .is-mega-menu.has-more::after {
		opacity: 1;
	}

	/* Category rows: the link spans the full column so the pointer can't fall into a gap. */
	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item {
		display: contents;
	}

	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-item {
		grid-column: 1;
		border-right: 2rem solid transparent;
		border-left: 2rem solid transparent;
		background-clip: padding-box;
	}

	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-toggle.show::before {
		transform: none;
	}

	/* Product panel. */
	.wrapper-navbar .dropdown-menu.depth_0 > .menu-item > .dropdown-menu.depth_1 {
		position: relative;
		grid-column: 2;
		grid-row: 1 / -1;
		width: var(--jt-mega-right);
		/* Cover the menu's own padding so the grey runs edge to edge. */
		margin: calc(var(--jt-mega-pad) * -1) 0;
		padding: 3rem 1.5rem 1.5rem;
	}

	.wrapper-navbar .menu-item.two-rows > .dropdown-menu.depth_1 {
		--jt-rows: 4rem repeat(2, 3rem) 1fr;
	}

	.wrapper-navbar .menu-item.four-rows > .dropdown-menu.depth_1 {
		--jt-rows: 4rem repeat(4, 3rem) 1fr;
	}
}


/* ==========================================================================
   7. Hamburger toggle
   ========================================================================== */

.wrapper-navbar .navbar-toggler {
	border-color: transparent;
}

.wrapper-navbar .navbar-toggler:focus {
	box-shadow: none;
}

.wrapper-navbar .navbar-toggler:focus-visible {
	outline: 2px solid var(--jt-primary);
	outline-offset: 2px;
}

.hamburger {
	display: block;
	cursor: pointer;
}

.hamburger .line {
	display: block;
	width: 50px;
	height: 5px;
	margin: 8px auto;
	background-color: var(--jt-primary);
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Bootstrap keeps aria-expanded on the toggler in sync, so no extra class is needed. */
.navbar-toggler[aria-expanded="true"] .hamburger .line:nth-child(1) {
	transform: translateY(13px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .hamburger .line:nth-child(2) {
	opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .hamburger .line:nth-child(3) {
	transform: translateY(-13px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.hamburger .line {
		transition: none;
	}
}


/* ==========================================================================
   8. Nav search box (Products search, shown from 1200px)
   ========================================================================== */

.search-form {
	position: relative;
	margin-left: 3rem;
	color: var(--jt-ink);
	font-family: "Inter", sans-serif;
	font-size: 14px;
	font-weight: 400;
}

.search-form .search-field {
	max-width: 219px;
	min-height: 31px;
	padding-right: 1rem;
	padding-left: 1rem;
	border: 1px solid #e2e2e3;
	border-radius: 0;
	outline: none;
}

.search-form .search-field:focus {
	border-color: var(--jt-primary);
	box-shadow: 0 0 0 3px rgba(39, 90, 167, 0.15);
}

.search-form::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 16px;
	height: 16px;
	background-image: url("/wp-content/uploads/2025/12/Search-icon-1.svg");
	transform: translateY(-50%);
}

.search-form .search-submit {
	display: none;
}


/* ==========================================================================
   9. Motion

   Short, quiet transitions only. All of it is switched off for visitors who ask their device for
   reduced motion. The header's own transitions (shrinking on scroll) are in section 2.
   ========================================================================== */

@keyframes jt-menu-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes jt-fade-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Opening a menu on mobile: fade in. */
.wrapper-navbar .dropdown-menu.show {
	animation: jt-fade-in 0.22s var(--jt-ease) both;
}

/*
 * Desktop mega menu: the whole menu drops in quickly when "Products" opens. Switching between categories
 * has no animation at all (no fade, no colour transition) so it keeps up with a fast pointer.
 */
@media (min-width: 1200px) {
	.wrapper-navbar .dropdown-menu.depth_1.show {
		animation: none;
	}

	.wrapper-navbar .is-mega-menu > .dropdown-menu.depth_0.show {
		animation: jt-menu-in 0.14s var(--jt-ease) both;
	}
}

/* Top-level links: colour fades, and a thin line draws in under the label on hover, focus or while open. */
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link {
	background: linear-gradient(var(--jt-primary), var(--jt-primary)) 0 calc(100% - 0.25rem) / 0 2px no-repeat;
	transition: color var(--jt-speed) var(--jt-ease), background-size 0.28s var(--jt-ease);
}

.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link:focus-visible,
.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link.show {
	background-size: 100% 2px;
}

@media (hover: hover) {
	.wrapper-navbar .navbar-nav > .menu-item:not(.nav-btn) > .nav-link:hover {
		background-size: 100% 2px;
	}
}

/* Buttons. */
.wrapper-navbar .navbar-nav > .nav-btn > .nav-link {
	transition: background-color var(--jt-speed) var(--jt-ease), color var(--jt-speed) var(--jt-ease);
}

/* Header row height eases when the header shrinks (1200px and up; below that the logo drives it). */
@media (min-width: 1200px) {
	.wrapper-navbar .navbar-nav > .menu-item {
		transition: min-height 0.3s var(--jt-ease);
	}
}

/* Featured product: the photo eases in slightly on hover. */
.wrapper-navbar .promo-banner .col-lg-5 {
	overflow: hidden;
}

.wrapper-navbar .promo-banner img {
	transition: transform 0.6s var(--jt-ease);
}

@media (hover: hover) {
	.wrapper-navbar .promo-banner:hover img {
		transform: scale(1.04);
	}
}

/* Search box. */
.search-form .search-field {
	transition: border-color var(--jt-speed) var(--jt-ease), box-shadow var(--jt-speed) var(--jt-ease);
}

@media (prefers-reduced-motion: reduce) {
	.wrapper-navbar,
	.wrapper-navbar *,
	.wrapper-navbar *::before,
	.wrapper-navbar *::after,
	.search-form .search-field {
		animation: none !important;
		transition: none !important;
	}
}


/* ==========================================================================
   10. Site components (formerly Appearance > Customize > Additional CSS)
   ========================================================================== */

/* Headings: fluid size caps. */
.h3,
h3 {
	font-size: clamp(1.25rem, 1.21rem + 0.2vw, 1.375rem);
}

.h3-as-h2 {
	font-size: clamp(1.5625rem, 1.3625rem + 1vw, 2.1875rem);
}

/* Buttons. */
.btn.btn-green,
.btn.btn-green:active,
.btn.btn-green:focus,
.btn.btn-green:hover {
	border-color: #78be21 !important;
	background-color: #78be21 !important;
	color: #fff !important;
}

.btn-hollow {
	border: 1px solid #275aa7 !important;
	background-color: transparent !important;
	color: #616163;
}

.btn-hollow:focus,
.btn-hollow:hover {
	color: #616163 !important;
}

.btn-hollow span::after {
	filter: invert(1);
}

/* Button with an "opens in a new tab" icon. */
.btn.icon-new-tab {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.btn.icon-new-tab::after {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-4'/%3E%3Cpath d='M14.5 3H21v6.5'/%3E%3Cpath d='M21 3L11 13'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a3 3 0 0 0-3 3v11a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-4'/%3E%3Cpath d='M14.5 3H21v6.5'/%3E%3Cpath d='M21 3L11 13'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 1200px) {
	.btn.icon-new-tab::after {
		width: 30px;
		height: 30px;
	}
}

/* Home page product grid: move the sixth card up. */
#products .col-xl-3:nth-of-type(6) {
	order: 1;
}

/* Contact page form section. */
#form .wp-block-cover__inner-container {
	padding-top: 3rem;
	padding-bottom: 3rem;
}

@media (max-width: 991.98px) {
	#form .wp-bootstrap-blocks-row > .col-lg-6 {
		order: -1;
	}
}

/* Pre-footer columns: no divider on the third column when stacked. */
@media (max-width: 767.98px) {
	.prefooter [class*="col-"]:nth-of-type(3) {
		border: 0;
	}
}

/* Request a Quote: "Products you selected" box. */
.gform_wrapper .kd-gform-quote {
	margin-bottom: 2rem;
	padding: 1.5rem;
	background-color: #242b3a;
	color: #fff;
}

@media (min-width: 768px) {
	.gform_wrapper .kd-gform-quote {
		padding: 2rem;
	}
}

.gform_wrapper .kd-gform-quote .kd-gform-quote__title {
	margin-bottom: 1rem;
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
}

.gform_wrapper .kd-gform-quote .kd-quote-box__list {
	margin-bottom: 0;
}

.gform_wrapper .kd-gform-quote .kd-quote-box__list li {
	justify-content: flex-start;
	gap: 1rem;
	padding: 0.25rem 0;
	color: #fff;
}

.gform_wrapper .kd-gform-quote .kd-quote-box__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-right: 0.25rem;
	border-top: 2px solid #275aa7;
	border-right: 2px solid #275aa7;
	transform: rotate(45deg);
}

.gform_wrapper .kd-gform-quote .kd-quote-box__list li .btn-close {
	margin-left: auto !important;
}

.gform_wrapper .kd-gform-quote .btn-close {
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat !important;
	box-shadow: none !important;
}