/* GeneratePress owns header/navigation container widths, spacing and alignment. */

/* The toggle is child-owned; native header/navigation appearance is not. */
.pm-v2 .pm-theme-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border: var(--bw) solid var(--border-strong);
	border-radius: var(--r-sm);
	background-color: var(--surface);
	color: var(--text);
	cursor: pointer;
	transition: border-color var(--pm-ease), color var(--pm-ease), background-color var(--pm-ease);
}

.pm-v2 .pm-theme-toggle:hover,
.pm-v2 .pm-theme-toggle:focus-visible {
	border-color: var(--primary);
	color: var(--primary);
	background-color: var(--primary-soft);
}

.pm-v2 .pm-theme-toggle:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.pm-v2 .pm-theme-toggle__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pm-v2 .pm-theme-toggle__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Default (no explicit theme): follow the OS. */
@media (prefers-color-scheme: light) {
	.pm-v2 .pm-theme-toggle__icon--sun { display: none; }
	.pm-v2 .pm-theme-toggle__icon--moon { display: inline-flex; }
}
@media (prefers-color-scheme: dark) {
	.pm-v2 .pm-theme-toggle__icon--sun { display: inline-flex; }
	.pm-v2 .pm-theme-toggle__icon--moon { display: none; }
}

/* An explicit choice overrides the OS in both directions. */
html[data-theme="light"] .pm-v2 .pm-theme-toggle__icon--sun { display: none; }
html[data-theme="light"] .pm-v2 .pm-theme-toggle__icon--moon { display: inline-flex; }
html[data-theme="dark"] .pm-v2 .pm-theme-toggle__icon--sun { display: inline-flex; }
html[data-theme="dark"] .pm-v2 .pm-theme-toggle__icon--moon { display: none; }

html:not(.pm-has-js) .pm-v2 .main-navigation .menu-toggle,
html:not(.pm-has-js) .pm-v2 .mobile-menu-control-wrapper {
	display: none;
}

/*
 * Show the menu list regardless of the breakpoint and the (never-arriving) `.toggled`
 * class. `display: flex` matches what GeneratePress uses for the expanded desktop menu,
 * so the no-JS rendering is the same list, just always open.
 */
html:not(.pm-has-js) .pm-v2 .main-navigation:not(.slideout-navigation) .main-nav > ul,
html:not(.pm-has-js) .pm-v2 #site-navigation .main-nav > ul {
	display: flex;
	flex-wrap: wrap;
}

/*
 * A submenu opened without JS.
 *
 * GeneratePress hides every `ul ul` behind a combined state, not a single property:
 * `main.min.css` gives `.main-navigation ul ul` `position:absolute; left:-99999px;
 * opacity:0; height:0; overflow:hidden; pointer-events:none`, and only lifts that state
 * for a JS-added `.sfHover` (desktop) or `.toggled-on` (mobile) class. With scripting
 * off neither class can ever arrive, so re-declaring ONLY `position`/`display` — which
 * is what this rule used to do — left the links invisible: still zero-opacity, zero
 * height, clipped and non-interactive. Every one of those properties has to be reset
 * for the fallback to actually show the list.
 *
 * The reset is complete on purpose:
 *   - `position: static` (plus the `left`/`float`/`width` overrides) drops GP's
 *     off-canvas placement so the block cannot be clipped off-screen or float a
 *     200px panel;
 *   - `opacity: 1` and `visibility: visible` undo the fade that never runs;
 *   - `height: auto` and `overflow: visible` undo the collapse that hid the links;
 *   - `pointer-events: auto` makes them clickable/tappable again.
 *
 * `height: auto` (not a fixed value) so the block still sizes to its own links, and
 * `overflow: visible` so a wrapped long label is never clipped. The indented-block
 * shape is kept via `padding-left`, so the hierarchy is still readable without a
 * floating panel a no-JS visitor could not open or close.
 */
html:not(.pm-has-js) .pm-v2 .main-navigation .main-nav ul ul {
	position: static;
	left: auto;
	right: auto;
	float: none;
	width: auto;
	display: block;
	opacity: 1;
	visibility: visible;
	height: auto;
	overflow: visible;
	pointer-events: auto;
	padding-left: var(--sp-4);
	box-shadow: none;
}