:root {
	--ipsm-font: 'Montserrat', sans-serif;
	--ipsm-bg: #000000;
	--ipsm-text: #ffffff;
	--ipsm-accent: #1E83BC;
	--ipsm-navy: #0F2548;
	--ipsm-line: #e3e7ec;
	--ipsm-blue-tint: #eaf3f9;
	--ipsm-faint: #98a2b3;
	--ipsm-shadow: 0 12px 28px rgba(0, 0, 0, .18);
	--ipsm-radius: 0; /* site-wide flat/square convention, same as --ips-radius in ips-catalog.css */
}

/* Every real <button> this plugin renders picks up the theme's/Elementor's
   global button style (gradient backgrounds, rounded corners, box-shadow,
   letter-spacing/text-transform, its own font) unless explicitly reset —
   same reason ips-catalog.css hardens these exact properties with
   `!important` on every button-like element it renders. Kept as a plain
   property reset (not `all:unset`) so it can't out-rank this file's own
   `display:flex` rules below on specificity. */
.ips-menu-root button {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	font-family: var(--ipsm-font) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: normal !important;
	box-shadow: none !important;
	outline: none !important;
	margin: 0 !important;
}

.ips-menu {
	font-family: var(--ipsm-font);
	background: var(--ipsm-bg);
	position: relative;
}

.ips-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.ips-menu__item {
	/* Deliberately no position:relative here — the dropdown is
	   position:fixed with its left/top/width set by JS (see ips-menu.js),
	   not CSS left:0/right:0 off this element. It was set here originally
	   and made the dropdown's left:0/right:0 resolve against this <li> —
	   just the width of one link — instead of the page, squeezing a
	   4-column mega menu into ~1/9th of the header width. */
}

.ips-menu__link {
	display: flex;
	align-items: center;
	gap: 5px;
	height: 100%;
	padding: 16px 18px;
	color: var(--ipsm-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: color .15s ease;
}

.ips-menu__link:hover { color: var(--ipsm-accent); }

.ips-menu__item.has-dropdown.is-open > .ips-menu__link { color: var(--ipsm-accent); }

.ips-menu__caret { width: 14px; height: 14px; flex: none; transition: transform .15s ease; }
.ips-menu__item.is-open .ips-menu__caret { transform: rotate(180deg); }

/* Capped to the site's actual Elementor container width (1240px — read
   directly from the active kit's global settings, not guessed) and
   centered, rather than sized to the <nav> element's own rendered width
   (which is narrower than the page's content width, since the nav sits in
   its own row below the logo/search and doesn't span edge to edge). Only
   `top` needs JS (it depends on the header's actual rendered height, which
   isn't a fixed constant) — left/right/max-width/centering are plain CSS:
   position:fixed with left:0 and right:0 spans the full viewport, and
   max-width + auto margins center a narrower box within that per the
   standard CSS spec behavior for constrained, over-specified positioned
   elements. */
.ips-menu__dropdown {
	position: fixed; /* top set inline by JS */
	left: 0;
	right: 0;
	max-width: 1240px;
	margin: 0 auto;
	background: #fff;
	border-top: 3px solid var(--ipsm-accent);
	box-shadow: var(--ipsm-shadow);
	z-index: 9990;
	animation: ips-menu-in .15s ease;
}
@keyframes ips-menu-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ================= mobile burger trigger ================= */
.ips-menu__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	border-radius: var(--ipsm-radius) !important;
	cursor: pointer;
}
.ips-menu__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ipsm-text);
	margin: 0 auto;
}

/* ================= mobile drawer (reference: a full-screen slide-in
   panel — logo + close row, an active-highlighted link list with a
   chevron-toggle accordion for items that carry a dropdown, and two
   CTA buttons pinned at the bottom, flat-cornered per the site's
   --ipsm-radius:0 convention rather than the reference screenshot's
   pill shape) ================= */
.ips-menu__drawer-overlay {
	position: fixed; inset: 0;
	background: rgba(15, 37, 72, .55);
	z-index: 10000;
	opacity: 0;
	transition: opacity .25s ease;
}
.ips-menu__drawer-overlay.is-visible { opacity: 1; }

.ips-menu__drawer {
	position: fixed;
	top: 0; right: 0; bottom: 0;
	width: 100%;
	max-width: 420px; /* tablet default: a right-hand panel, not edge-to-edge */
	background: #fff;
	z-index: 10001;
	display: flex;
	flex-direction: column;
	font-family: var(--ipsm-font);
	transform: translateX(100%);
	transition: transform .25s ease;
	box-shadow: -8px 0 24px rgba(0,0,0,.15);
}
.ips-menu__drawer.is-open { transform: translateX(0); }

.ips-menu__drawer-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ipsm-line);
	flex: none;
}
/* The site's actual logo file has a black background baked into the image
   itself (not transparent) — matching that here instead of leaving it to
   sit as a stray black rectangle on the drawer's white header row. */
.ips-menu__drawer-logo img { max-height: 36px; width: auto; display: block; background: var(--ipsm-bg); }
.ips-menu__drawer-logo strong { color: var(--ipsm-navy); font-size: 15px; }
.ips-menu__drawer-close {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	background: none !important; border: none !important; border-radius: var(--ipsm-radius) !important;
	color: var(--ipsm-navy);
	cursor: pointer; flex: none;
}

.ips-menu__drawer-list {
	list-style: none;
	margin: 0;
	padding: 8px 0 0;
	overflow-y: auto;
	flex: 1 1 auto;
}
.ips-menu__drawer-item.is-active,
.ips-menu__drawer-item.is-expanded {
	background: var(--ipsm-blue-tint, #eaf3f9) !important;
}
.ips-menu__drawer-item > a,
.ips-menu__drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 15px 20px;
	background: none !important;
	border: none !important;
	border-radius: var(--ipsm-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	color: var(--ipsm-navy);
	font-size: 15px;
	font-weight: 500;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	font-family: var(--ipsm-font) !important;
}
/* The theme's/Elementor's global button style paints its own solid
   accent-color background + white text on :hover/:focus/:active — with no
   override here that wins on a tap-and-hold (mobile has no separate hover),
   burying the item's own text under a wrong-brand color combo instead of
   showing this plugin's own hover/active treatment. Forced back to the
   site's own palette (blue-tint background, accent text) explicitly. */
.ips-menu__drawer-item > a:hover,
.ips-menu__drawer-item > a:focus,
.ips-menu__drawer-item > a:active,
.ips-menu__drawer-toggle:hover,
.ips-menu__drawer-toggle:focus,
.ips-menu__drawer-toggle:active {
	background: var(--ipsm-blue-tint, #eaf3f9) !important;
	color: var(--ipsm-accent) !important;
	outline: none !important;
	box-shadow: none !important;
}
.ips-menu__drawer-item.is-active > a {
	color: var(--ipsm-accent) !important;
	font-weight: 700;
}
.ips-menu__drawer-item.is-expanded > .ips-menu__drawer-toggle {
	color: var(--ipsm-accent) !important;
}
.ips-menu__drawer-chevron { width: 16px; height: 16px; color: var(--ipsm-faint, #98a2b3); flex: none; transition: transform .2s ease; }
.ips-menu__drawer-item.is-expanded .ips-menu__drawer-chevron { transform: rotate(180deg); color: var(--ipsm-accent) !important; }

/* max-height starts at 0 and overflow is clipped so the accordion can
   transition smoothly open/closed (JS sets an explicit inline max-height
   to the content's measured scrollHeight) instead of the instant
   hidden/unhidden snap that used to shove the rest of the list down in a
   single frame — the "jump" opening this on mobile. Padding transitions
   alongside it (padding doesn't respect max-height's content-box clipping
   on its own) so the two settle together. */
.ips-menu__drawer-submenu {
	max-height: 0;
	overflow: hidden;
	padding: 0 20px;
	background: #fafbfc;
	font-size: 13px;
	transition: max-height .25s ease, padding .25s ease;
}
.ips-menu__drawer-item.is-expanded .ips-menu__drawer-submenu {
	padding: 4px 20px 16px;
}
/* The mega menu's own 4-column grid doesn't fit a 360px drawer — collapse
   it to a single stacked column and drop its column dividers/padding here
   only, without touching the shared desktop styling. */
.ips-menu__drawer-submenu .ips-mega-menu {
	display: block; padding: 0; background: none;
}
.ips-menu__drawer-submenu .ips-mega-menu__col {
	padding: 14px 0 0; border-left: none; border-top: 1px solid var(--ipsm-line);
}
.ips-menu__drawer-submenu .ips-mega-menu__col:first-child { border-top: none; }

.ips-menu__drawer-cta {
	display: flex;
	gap: 10px;
	padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--ipsm-line);
	flex: none;
}
.ips-menu__drawer-btn {
	flex: 1 1 0;
	text-align: center;
	padding: 12px 10px;
	border-radius: var(--ipsm-radius) !important;
	box-shadow: none !important;
	font-family: var(--ipsm-font) !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ips-menu__drawer-btn--solid { background: var(--ipsm-navy) !important; border: 1.5px solid var(--ipsm-navy) !important; color: #fff !important; }
.ips-menu__drawer-btn--solid:hover,
.ips-menu__drawer-btn--solid:focus,
.ips-menu__drawer-btn--solid:active { background: var(--ipsm-accent) !important; border-color: var(--ipsm-accent) !important; color: #fff !important; outline: none !important; }
.ips-menu__drawer-btn--outline { background: none !important; border: 1.5px solid var(--ipsm-navy) !important; color: var(--ipsm-navy) !important; }
.ips-menu__drawer-btn--outline:hover,
.ips-menu__drawer-btn--outline:focus,
.ips-menu__drawer-btn--outline:active { border-color: var(--ipsm-accent) !important; color: var(--ipsm-accent) !important; outline: none !important; }

body.ips-menu-drawer-open { overflow: hidden; }

@media (max-width: 1200px) {
	.ips-menu__list { display: none; }
	.ips-menu__burger { display: flex; }
}

/* Phone only: the drawer goes edge-to-edge. Above this (tablet, up to the
   1200px breakpoint where the drawer takes over from the desktop bar at
   all) it keeps the 420px cap set on .ips-menu__drawer above, so it reads
   as a side panel rather than covering the whole tablet screen. */
@media (max-width: 600px) {
	.ips-menu__drawer { max-width: 100%; }
}