/* ===== Netura Mobile Nav ===== */

/* Shared bottom-bar height — the menu panel's `bottom` matches this so the two
   meet with no gap. */
:root { --latu-bar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }

/*
 * Off-canvas menu panel. Sits ABOVE the fixed bottom bar (bottom: 4.5rem) so the
 * bar — including the Valikko toggle — stays visible. The whole view fits the
 * screen; scrolling is intentionally disabled (overflow hidden).
 */
.latu-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0; /* full screen, BEHIND the bar (lower z-index) so there's no seam */
	z-index: 9990;
	background: var(--wp--preset--color--primary-dark, #133663);
	color: #fff;
	opacity: 0;
	visibility: hidden; /* non-interactive when closed; transitions for a clean fade */
	transition: opacity 0.25s ease, visibility 0.25s ease;
	overflow: hidden;
}
/* Single state class toggled by the Interactivity API (state.menuOpen). The
   visibility transition (not display:none) lets it fade both ways from one class. */
.latu-offcanvas.is-open { opacity: 1; visibility: visible; }

.latu-offcanvas__inner {
	/* Absolute insets give a definite height (height:100% doesn't resolve reliably
	   against the fixed overlay), so flex-end bottom-aligns within the real screen
	   height; overflow-y guards against content ever hiding behind the bar. */
	position: absolute;
	inset: 0;
	max-width: 680px;
	margin: 0 auto;
	padding: 1.5rem 1.75rem calc(var(--latu-bar-h, 3.5rem) + 1.5rem);
	display: flex;
	flex-direction: column;
	/* Bottom-aligned (thumb zone) with centred contents (reads cleaner than the
	   earlier right-align, even in two columns). */
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	gap: 1.25rem;
	overflow-y: auto;
}
/* Top row: white logo (left) + cart link (right). margin-bottom:auto pins it to
   the top while the menu stays bottom-aligned. */
.latu-offcanvas__top {
	width: 100%;
	margin-bottom: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.latu-offcanvas__logo { width: 150px; max-width: 45%; height: auto; }
.latu-offcanvas__cart {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: #fff;
	width: 1.8rem;
	height: 1.8rem;
}
.latu-offcanvas__cart svg { width: 1.8rem; height: 1.8rem; }
.latu-offcanvas__cart-count {
	position: absolute;
	top: -0.4rem;
	right: -0.5rem;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.25rem;
	border-radius: 0.6rem;
	background: #fff;
	color: var(--wp--preset--color--primary-dark, #133663);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1.1rem;
	text-align: center;
}
/* Social icons, centred, above the menu items. */
.latu-offcanvas__social {
	display: flex;
	justify-content: center;
	gap: 1.4rem;
}
.latu-offcanvas__social a { color: #fff; display: inline-flex; }
.latu-offcanvas__social a:hover, .latu-offcanvas__social a:focus { color: var(--wp--preset--color--tint, #95bedd); }
.latu-offcanvas__social svg { width: 1.8rem; height: 1.8rem; }

/* Two content-width columns, centred as a block, links left-aligned within their column
   behind a chevron (2026-10-29: centred text in uneven columns read ragged and the 28px
   text-only targets were hard to hit). Each link fills its column and is at least 3rem
   tall, so the whole row is the target, not just the word. The font eases down on narrow
   phones so the chevrons fit without widening the block. */
.latu-offcanvas__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: auto auto;
	gap: 0 1.25rem;
	text-align: left;
}
.latu-offcanvas__nav a {
	display: flex;
	align-items: center;
	gap: 0.35em;
	min-height: 3rem;
	color: #fff;
	text-decoration: none;
	font-size: clamp(1.05rem, 5vw, 1.2rem);
	font-weight: 700;
	line-height: 1.15;
}
.latu-offcanvas__nav a::before {
	content: "\203A" / "";
	flex: none;
	font-size: 1.3em;
	line-height: 1;
	color: var(--wp--preset--color--tint, #95bedd);
}
.latu-offcanvas__nav a:hover, .latu-offcanvas__nav a:focus { color: var(--wp--preset--color--tint, #95bedd); }
/* Outline, not filled: a solid white pill outshone the whole menu. It fills white on
   hover, focus and press, so the tap still answers visibly. */
.latu-offcanvas__cta {
	align-self: center;
	background: transparent;
	color: #fff;
	border: 0.125rem solid #fff;
	font-weight: 700;
	padding: 0.75rem 1.75rem;
	border-radius: 999px; /* pill, matching the site's buttons */
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.latu-offcanvas__cta:hover, .latu-offcanvas__cta:focus-visible, .latu-offcanvas__cta:active {
	background: #fff;
	color: var(--wp--preset--color--primary-dark, #133663);
}
.latu-offcanvas__meta { margin: 0; }
.latu-offcanvas__meta a { color: var(--wp--preset--color--tint, #95bedd); }

/* Fixed bottom tab bar (mobile only). All items blue. */
.latu-bottom-nav { display: none; }

/* Floating cart button — appears over the Valikko (bottom-right), above the page
   content, only when the cart has items (and only on mobile). Hidden while the
   menu is open (the overlay has its own cart link). */
.latu-cart-fab {
	display: none;
	position: fixed;
	right: 0.5rem;
	bottom: calc(var(--latu-bar-h, 3.5rem) + 0.6rem);
	z-index: 9996;
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--wp--preset--color--primary, #054a9b);
	color: #fff;
	box-shadow: 0 4px 14px rgba(19, 54, 99, 0.35);
	text-decoration: none;
}
.latu-cart-fab svg { width: 1.5rem; height: 1.5rem; }
.latu-cart-fab__count {
	position: absolute;
	top: -0.2rem;
	right: -0.2rem;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.3rem;
	border-radius: 0.7rem;
	background: #fff;
	color: var(--wp--preset--color--primary-dark, #133663);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.25rem;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
body.latu-menu-open .latu-cart-fab { display: none !important; }

/* Valikko toggle: shows the hamburger when closed, the X when open (never both). */
.latu-toggle-icon--menu { display: inline-flex; }
.latu-toggle-icon--close { display: none; }
.latu-bottom-nav__toggle[aria-expanded="true"] .latu-toggle-icon--menu { display: none; }
.latu-bottom-nav__toggle[aria-expanded="true"] .latu-toggle-icon--close { display: inline-flex; }

body.latu-menu-open { overflow: hidden; }

@media (max-width: 64em) {
	.latu-cart-fab { display: inline-flex; }
	.latu-bottom-nav {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9995;
		box-sizing: border-box;
		height: var(--latu-bar-h, 3.5rem);
		background: #fff;
		border-top: 1px solid #e5e5e5;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.latu-bottom-nav__item {
		flex: 1;
		min-width: 0;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 0.3rem 0.2rem;
		background: none;
		border: 0;
		cursor: pointer;
		text-decoration: none;
		font: inherit;
		font-size: 0.68rem;
		font-weight: 600;
		color: var(--wp--preset--color--primary, #054a9b);
	}
	.latu-bottom-nav__item svg { width: 22px; height: 22px; }

	/* Open state: the Valikko square fills with the MENU's colour so the button
	   and the open menu read as one seamless surface. */
	.latu-bottom-nav__toggle[aria-expanded="true"] {
		background: var(--wp--preset--color--primary-dark, #133663);
		color: #fff;
	}
	/* Drop the bar's top border while open so nothing draws a line over the menu
	   (the menu sits full-screen behind the bar). */
	body.latu-menu-open .latu-bottom-nav { border-top: 0; }

	/* Keep page content clear of the fixed bar. */
	body { padding-bottom: var(--latu-bar-h, 3.5rem); }
}