/**
 * Mozi front-end stylesheet.
 *
 * This file is INTENTIONALLY almost empty. Mozi ships no typography, colour,
 * spacing, button, form or layout opinions so that it never fights your
 * custom designs.
 *
 * The only rule below is the accessibility helper for the skip link, which is
 * visually hidden until focused. It affects a single utility class the theme
 * itself outputs (`.screen-reader-text`) and nothing in your content, so it
 * cannot conflict with your design. Delete it if you provide your own.
 *
 * Add your project styles here, in a child theme, or via your build pipeline.
 */

/* -------------------------------------------------------------------------
 * LAYOUT LAYER  (the ONLY layout Mozi imposes — intentionally minimal)
 * -------------------------------------------------------------------------
 * This gives plain WordPress content (posts, pages, 404, archives) a readable
 * centered column instead of running edge-to-edge. It is NOT typography,
 * colour, or component styling — only width, centering and responsive media.
 *
 * The max-width defaults to 1140px to MATCH ELEMENTOR's default content
 * width, so native content and Elementor content line up.
 *
 * On Elementor-built pages the theme adds `.mozi-container--fluid` (and a
 * `.mozi-elementor` body class), which removes the max-width and padding so
 * Elementor's own layout / content-width settings fully control the page.
 *
 * To change the width: override --mozi-content-width (e.g. in a child theme
 * or via the Customizer additional CSS).
 * To remove this layer entirely: delete this LAYOUT block, or dequeue the
 * `mozi-theme` stylesheet.
 * ------------------------------------------------------------------------- */

:root {
	--mozi-content-width: 1140px; /* matches Elementor's default content width */
	--mozi-gutter: 20px;
	--mozi-mega-bg: #fff;         /* panel background (needed so dropdowns are legible) */
	--mozi-mega-shadow: 0 12px 30px rgba( 0, 0, 0, 0.08 );
	--mozi-mega-z: 999;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

.mozi-container {
	width: 100%;
	max-width: var(--mozi-content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mozi-gutter);
	padding-right: var(--mozi-gutter);
}

/* Elementor-driven views: let the builder own the width completely. */
.mozi-container--fluid {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Keep media from overflowing its container. Essential, not decorative. */
img,
iframe,
video,
svg,
embed,
object {
	max-width: 100%;
	height: auto;
}

/* -------------------------------------------------------------------------
 * NAVIGATION + MEGA MENU  (functional layout only — restyle freely)
 * -------------------------------------------------------------------------
 * Provides:
 *   - A horizontal primary menu on desktop.
 *   - CSS-only hover/focus dropdowns for normal sub-menus.
 *   - A full-width "mega" panel on items flagged as mega (content injected
 *     from a shortcode / HTML — build it in Elementor).
 *   - A mobile hamburger toggle and tap-to-expand accordion below 1024px.
 *
 * Colours/typography are intentionally omitted. Override --mozi-mega-* or
 * these rules in your child theme / builder to match each client's design.
 * ------------------------------------------------------------------------- */

/* The container the mega panel spans and is positioned against. */
.mozi-header-inner {
	position: relative;
}

#mozi-primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
}

#mozi-primary-menu a {
	text-decoration: none;
	display: inline-block;
}

/* Positioning context for standard dropdowns. */
#mozi-primary-menu .menu-item-has-children {
	position: relative;
}

/* Mega items use the header container as the positioning context so the
   panel can span the full content width, like a classic mega menu. */
#mozi-primary-menu .menu-item-mega {
	position: static;
}

/* ---- Standard sub-menu dropdowns (non-mega children) ---- */
#mozi-primary-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var( --mozi-mega-bg );
	box-shadow: var( --mozi-mega-shadow );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: var( --mozi-mega-z );
}

#mozi-primary-menu .sub-menu a {
	display: block;
	padding: 0.4rem 1.25rem;
	white-space: nowrap;
}

/* ---- Mega panel ---- */
.mozi-mega-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background: var( --mozi-mega-bg );
	box-shadow: var( --mozi-mega-shadow );
	opacity: 0;
	visibility: hidden;
	transform: translateY( 6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: var( --mozi-mega-z );
}

.mozi-mega-inner {
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
}

/*
 * Reveal logic.
 *
 * - Keyboard focus (:focus-within) always reveals — no JS needed.
 * - Without JS, :hover reveals (progressive-enhancement fallback).
 * - With JS, <html> gets `.mozi-enhanced`; the script then controls opening
 *   via `.is-open` using a hover-intent delay (or click mode), so the raw
 *   :hover reveal is disabled to avoid flicker.
 */
#mozi-primary-menu .menu-item-has-children:focus-within > .sub-menu,
.menu-item-mega:focus-within > .mozi-mega-panel,
html:not( .mozi-enhanced ) #mozi-primary-menu .menu-item-has-children:hover > .sub-menu,
html:not( .mozi-enhanced ) .menu-item-mega:hover > .mozi-mega-panel,
html.mozi-enhanced #mozi-primary-menu .menu-item-has-children.is-open > .sub-menu,
html.mozi-enhanced .menu-item-mega.is-open > .mozi-mega-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- Toggle buttons (hidden on desktop; shown/used on mobile) ---- */
.mozi-menu-toggle,
.mozi-submenu-toggle {
	display: none;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 1;
}

/* Simple hamburger icon built from a bar + pseudo-elements. */
.mozi-menu-toggle-icon,
.mozi-menu-toggle-icon::before,
.mozi-menu-toggle-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.mozi-menu-toggle-icon::before,
.mozi-menu-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.mozi-menu-toggle-icon::before {
	top: -7px;
}

.mozi-menu-toggle-icon::after {
	top: 7px;
}

.mozi-caret {
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform 0.18s ease;
}

.is-open > .mozi-submenu-toggle .mozi-caret {
	transform: rotate( -135deg );
}

/* -------------------------------------------------------------------------
 * MOBILE (<= 1024px): hamburger + tap-to-expand accordion.
 * ------------------------------------------------------------------------- */
@media ( max-width: 1024px ) {

	/* No-JS fallback: the hamburger needs JS, so without it just show the
	   full menu expanded rather than trapping it behind a dead button. */
	html:not( .mozi-enhanced ) .mozi-menu-toggle {
		display: none;
	}

	html:not( .mozi-enhanced ) #mozi-primary-menu {
		display: flex;
	}

	html:not( .mozi-enhanced ) .mozi-mega-panel,
	html:not( .mozi-enhanced ) #mozi-primary-menu .sub-menu {
		display: block;
	}

	.mozi-menu-toggle {
		display: inline-flex;
		align-items: center;
	}

	.mozi-submenu-toggle {
		display: inline-flex;
		align-items: center;
		margin-left: 0.25rem;
	}

	/* Collapsed by default; opened by the toggle button (JS adds the class). */
	#mozi-primary-menu {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.mozi-nav-open #mozi-primary-menu {
		display: flex;
	}

	#mozi-primary-menu .menu-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	#mozi-primary-menu .menu-item > a {
		flex: 1 1 auto;
		padding: 0.75rem 0;
	}

	/* Panels become static, full-width blocks, hidden until the item is open. */
	#mozi-primary-menu .sub-menu,
	.mozi-mega-panel {
		position: static;
		width: 100%;
		flex-basis: 100%;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		display: none;
	}

	#mozi-primary-menu .menu-item.is-open > .sub-menu,
	.menu-item-mega.is-open > .mozi-mega-panel {
		display: block;
	}

	.mozi-mega-inner {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Respect users who prefer reduced motion: drop the panel transitions. */
@media ( prefers-reduced-motion: reduce ) {
	.mozi-mega-panel,
	#mozi-primary-menu .sub-menu,
	.mozi-caret {
		transition: none;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	clip-path: none;
	color: #111;
	display: block;
	height: auto;
	left: 5px;
	top: 5px;
	padding: 8px 16px;
	width: auto;
	z-index: 100000;
	text-decoration: none;
}