/* ODF Mobile Nav — base/structural styles only. Colors, the mobile/
   desktop breakpoint, and desktop alignment are controlled from
   Settings > ODF Mobile Nav in wp-admin and injected as a separate
   inline <style> block (see odfn_dynamic_css() in the main plugin
   file) — a breakpoint value has to live inside an actual
   @media (...) condition, which a CSS custom property can't do, so
   that part can't be handled with variables here. The values below
   are just a safety-net default in case that inline block is ever
   missing (e.g. a caching quirk) — Settings always take priority. */

.odfn-nav, .odfn-nav * { box-sizing: border-box; }

.odfn-nav {
	--odfn-bg: #1c1c1c;
	--odfn-text: #f2f2f2;
	--odfn-main-accent: #961f21;
	--odfn-sub-accent: #961f21;

	position: relative;
	width: 100%;
	/* The bar itself is deliberately transparent — see the note in
	   odfn_dynamic_css() in the main plugin file. --odfn-bg is still
	   used (and still configurable), just only for the two pieces that
	   float over arbitrary page content and need to stay legible on
	   their own: the desktop dropdown and the open mobile panel. */
	background: transparent;
	color: var(--odfn-text);
	font-family: inherit;
}

/* Settings > ODF Mobile Nav > "Sticky on scroll" toggles this class
   (see odf_mobile_nav() in the main plugin file) — a plain on/off
   flag doesn't need to be part of the generated CSS above. */
.odfn-nav.odfn-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
}

.odfn-admin-note {
	margin: 0;
	padding: .75rem 1rem;
	font-size: .85rem;
	color: #f2c94c;
	background: rgba(255, 255, 255, .06);
}

/* ---- Hamburger toggle (mobile only — hidden on desktop below) --------- */

.odfn-toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-left: auto;
	background: none;
	border: none;
	padding: .9rem 1rem;
	cursor: pointer;
	color: var(--odfn-text);
}

.odfn-toggle-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 26px;
	height: 18px;
}

.odfn-toggle-bar {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 1px;
	transform-origin: center;
	transition: transform .28s ease, opacity .2s ease, background-color .2s ease;
}

/* Hamburger -> X, driven by JS toggling .is-active on the button. Uses
   the MAIN nav accent (the toggle button is part of the top-level bar,
   not a submenu) — see Settings > ODF Mobile Nav > Colors. */
.odfn-toggle.is-active .odfn-toggle-bar { background: var(--odfn-main-accent); }
.odfn-toggle.is-active .odfn-toggle-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.odfn-toggle.is-active .odfn-toggle-bar:nth-child(2) { opacity: 0; }
.odfn-toggle.is-active .odfn-toggle-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- Menu — shared base ------------------------------------------------ */

/* !important + the extra `ul.odfn-menu`/`.odfn-nav` specificity here
   is deliberate, not sloppy: when this nav is placed via the
   [odf_nav_menu] shortcode, its markup sits inside whatever the theme
   considers "page content" — and most themes apply their own default
   list-style/margin/padding to every <ul>/<li> in that area (often
   with a selector like `.entry-content ul`, which beats a plain
   `.odfn-menu` class rule on specificity alone). Bullets or stray
   indentation reappearing is that theme rule winning, not this
   stylesheet failing to load — these overrides make sure this
   component's own list resets always win regardless of what the
   surrounding theme does. Placing the nav in header.php instead
   avoids the clash in the first place (see README.md), but the
   shortcode should look correct either way. */
.odfn-nav ul.odfn-menu,
.odfn-nav ul.odfn-menu ul {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.odfn-nav .odfn-menu li {
	list-style: none !important;
}
.odfn-menu a {
	display: block;
	color: var(--odfn-text);
	text-decoration: none;
}
.odfn-menu .menu-item {
	position: relative;
}

/* A small caret, inserted by JS only on items that have a submenu, so
   the item's own link still just navigates on click/tap — the caret
   is the thing that expands/collapses children. */
.odfn-submenu-toggle {
	background: none;
	border: none;
	color: currentColor;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.odfn-submenu-toggle::before {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.odfn-submenu-toggle[aria-expanded="true"]::before {
	transform: rotate(-135deg);
}

/* The mobile (< breakpoint) and desktop (>= breakpoint) rule blocks
   that used to live here as static @media queries are now generated
   dynamically — see odfn_dynamic_css() in the main plugin file and
   the big comment above. Keeping the breakpoint number itself in PHP
   (driven by Settings > ODF Mobile Nav) rather than hardcoding it
   here is the only way to make it admin-configurable, since a
   @media condition can't read a CSS custom property. */