/**
 * JBS custom mobile menu — off-canvas drawer.
 *
 * Structure only; the tunable values (breakpoint, width, side, colours, overlay)
 * are set from Theme Options as CSS custom properties + media queries printed
 * inline by inc/mobile-menu.php. The hamburger (.jbs-mm-scope) lives in the
 * Elementor header; the drawer (.jbs-mm) + backdrop live at <body> level inside
 * .jbs-mm-root. Ported from the homepage.html mockup.
 *
 * Fixed tokens kept from the mockup: --ink #16181C, --line #EFE9DF.
 */

/* ----------------------------------------------------------------------
 * Strip inherited Elementor / Hello-theme button chrome.
 * The drawer's icon buttons (hamburger + close) are plain <button>s, so they
 * otherwise inherit whatever base styling Elementor/Hello apply to buttons:
 * box-shadow, text-shadow, outline, border-radius, tap highlight, min-height,
 * uppercase transforms, etc. Neutralise it all here; each button re-applies its
 * own deliberate look below. (The red CTA .btn-red is left as an intentional
 * button and keeps its own styling.)
 * -------------------------------------------------------------------- */
.jbs-mm-scope .jbs-mm-toggle,
.jbs-mm .nav-close,
.jbs-mm .jbs-mm-sub-toggle {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	line-height: normal;
	min-width: 0;
	min-height: 0;
	font: inherit;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}
.jbs-mm-scope .jbs-mm-toggle:focus-visible,
.jbs-mm .nav-close:focus-visible,
.jbs-mm .jbs-mm-sub-toggle:focus-visible {
	outline: 2px solid var(--jbs-mm-accent, #FF0533);
	outline-offset: 2px;
}

/* ---------- hamburger toggle (in the header) ---------- */
.jbs-mm-scope { display: inline-flex; align-items: center; }
.jbs-mm-scope .jbs-mm-toggle {
	/* Visible by default. When the hamburger shows is controlled in Elementor
	   via the widget's responsive visibility (Hide on Desktop / Tablet / Mobile),
	   not by a theme breakpoint. */
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 9px 8px;
	cursor: pointer;
}
.jbs-mm-scope .jbs-mm-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: #16181C;
	border-radius: 1px;
	transition: transform .25s ease, opacity .25s ease;
}
.jbs-mm-scope .jbs-mm-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.jbs-mm-scope .jbs-mm-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.jbs-mm-scope .jbs-mm-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- backdrop (body level) ---------- */
@keyframes jbs-mm-backdrop { from { opacity: 0; } to { opacity: 1; } }
.jbs-mm-backdrop {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(22, 24, 28, var(--jbs-mm-overlay, .5));
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	animation: jbs-mm-backdrop .3s ease;
}
.jbs-mm-backdrop[hidden] { display: none; }

/* ---------- drawer panel (body level) ---------- */
.jbs-mm {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100000;
	width: var(--jbs-mm-width, min(320px, 86vw));
	max-width: 100vw;
	box-sizing: border-box;
	padding: 0 24px 24px;
	background: var(--jbs-mm-bg, #FBF8F3);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Hidden while closed so the off-canvas panel casts no shadow onto the
	   screen (and its links stay out of the tab order). Visibility flips on
	   instantly when opening and only after the slide-out finishes when closing,
	   so the animation itself is never cut off. */
	visibility: hidden;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .35s;
	font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.jbs-mm--right { right: 0; left: auto; box-shadow: -24px 0 60px rgba(22, 24, 28, .25); transform: translateX(105%); }
.jbs-mm--left  { left: 0; right: auto; box-shadow: 24px 0 60px rgba(22, 24, 28, .25); transform: translateX(-105%); }
.jbs-mm.open { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility 0s; }

/* ---------- drawer header (logo + close) ---------- */
.jbs-mm .nav-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 60px;
	margin: 0 -24px 10px;
	padding: 0 16px 0 24px;
	border-bottom: 1px solid #EFE9DF;
	flex: none;
}
.jbs-mm .nav-head img { height: 26px; width: auto; }
.jbs-mm .nav-close {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #16181C;
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s ease, color .18s ease;
}
.jbs-mm .nav-close:hover { background: rgba(22, 24, 28, .06); color: var(--jbs-mm-accent, #FF0533); }
/* Pin the icon: as a flex item the inline SVG's width can collapse to 0 (its
   width/height HTML attributes are ignored once flex sizing kicks in), which
   makes the close button look empty. Force its box and stop it flexing. */
.jbs-mm .nav-close svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* ---------- links ----------
   Standard WordPress menu markup (<ul class="jbs-mm-menu"> > <li class="menu-item">
   > <a>) emitted by wp_nav_menu, restyled to match the mockup's flat link list.
   Sub-menus keep the nested <ul class="sub-menu"> structure and are indented. */
.jbs-mm .jbs-mm-menu,
.jbs-mm .jbs-mm-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.jbs-mm .jbs-mm-menu a {
	display: block;
	padding: 17px 0;
	border-bottom: 1px solid #EFE9DF;
	font-size: 16px;
	font-weight: 600;
	color: #16181C;
	text-decoration: none;
	transition: color .18s ease;
}
.jbs-mm .jbs-mm-menu .sub-menu a { padding-left: 16px; font-weight: 500; font-size: 15px; }
.jbs-mm .jbs-mm-menu a:hover,
.jbs-mm .jbs-mm-menu .current-menu-item > a { color: var(--jbs-mm-accent, #FF0533); }

/* ---------- collapsible submenus ----------
   Parent items (.menu-item-has-children) get a chevron injected in PHP; the
   anchor + chevron share a flex row so the link still navigates while the
   chevron toggles .is-open on the <li> (JS). The nested <ul class="sub-menu">
   stays collapsed until then. */
.jbs-mm .jbs-mm-menu .jbs-mm-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EFE9DF;
}
/* The link inside a row takes the space; its own bottom border moves to the row
   so the line runs full width past the chevron. */
.jbs-mm .jbs-mm-menu .jbs-mm-row > a {
	flex: 1 1 auto;
	border-bottom: 0;
}
.jbs-mm .jbs-mm-sub-toggle,
.jbs-mm .jbs-mm-sub-toggle:hover,
.jbs-mm .jbs-mm-sub-toggle:focus,
.jbs-mm .jbs-mm-sub-toggle:active {
	background: none;
}
.jbs-mm .jbs-mm-sub-toggle {
	flex: 0 0 44px;
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #16181C;
	cursor: pointer;
	transition: color .18s ease;
}
.jbs-mm .jbs-mm-sub-toggle:hover { color: var(--jbs-mm-accent, #FF0533); }
.jbs-mm .jbs-mm-sub-toggle svg {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	transition: transform .25s ease;
}
/* Collapsed by default; expands when the parent <li> is .is-open. */
.jbs-mm .jbs-mm-menu .sub-menu {
	overflow: hidden;
	max-height: 0;
	transition: max-height .3s ease;
}
.jbs-mm .jbs-mm-menu .menu-item-has-children.is-open > .sub-menu { max-height: 1500px; }
.jbs-mm .jbs-mm-menu .menu-item-has-children.is-open > .jbs-mm-row .jbs-mm-sub-toggle svg { transform: rotate(180deg); }

/* ---------- CTA button ----------
   Matched to the header's red CTA (mockup `nav .btn.btn-red`): a 6px
   rounded-rectangle (not a pill), 14px/700 type, and a darken + lift hover.
   Base colour still comes from the ACF accent so the drawer stays themeable;
   the hover deep-red matches the header's --red-deep (#D40029). */
.jbs-mm .btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	padding: 11px 20px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.jbs-mm .btn-red {
	background: var(--jbs-mm-accent, #FF0533);
	color: #fff;
	box-shadow: 0 6px 18px rgba(255, 5, 51, .28);
}
.jbs-mm .btn-red:hover {
	background: var(--red-deep, #D40029);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(255, 5, 51, .36);
}
