/*
 * Shared navbar behavior — a FIXED asset (never per-element/per-request CSS), enqueued when
 * a page contains a navbar. It styles the navbar shell by the data-attributes the `nav`
 * element emits (data-layout / data-logo / data-sticky / data-scroll), so layout + behavior
 * stay out of the compiled, parity-pinned tree CSS. Appearance (padding, colors) comes from
 * the element's own compiled styles. (Phase 4 adds the scroll/transparent + logo-swap rules.)
 */

.lm-navbar-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	width: 100%;
}

/* The wp_nav_menu <ul> → a horizontal, unstyled row. */
.lm-navbar ul.lm-nav-menu {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lm-navbar ul.lm-nav-menu li { margin: 0; }
.lm-navbar ul.lm-nav-menu a { text-decoration: none; color: inherit; }

/* Orientation: vertical stacks the menu items in a column (default is the horizontal row above).
 * Set by the `nav` element's data-orientation="vertical" (#67); horizontal emits no attribute. */
.lm-navbar[data-orientation="vertical"] ul.lm-nav-menu {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

/* Layout (logo vs menu arrangement). */
.lm-navbar[data-layout="split"] .lm-navbar-inner { justify-content: space-between; }
.lm-navbar[data-layout="left"] .lm-navbar-inner { justify-content: flex-start; }
.lm-navbar[data-layout="center"] .lm-navbar-inner { justify-content: center; }
.lm-navbar[data-layout="right"] .lm-navbar-inner { justify-content: flex-end; }

/* ---- E004: N-section bar (1–5 ordered sections) ---------------------------------------
 * A navbar with data-sections lays its `.lm-navbar-inner` out as a GRID instead of the legacy
 * flex split. Each section's track comes from its data-width: `auto` sizes to content, `grow`
 * (default for a track with no data-width attr) shares the remaining space (1fr). A {fixed:px}
 * width instead compiles a per-element `grid-template-columns` rule (StyleCompiler), keyed by
 * .lm-{id}, which OVERRIDES the auto-track default below — so this shared sheet handles every
 * enumerable case and only the px arbitrary value becomes per-element CSS. */
.lm-navbar[data-sections] .lm-navbar-inner {
	display: grid;
	align-items: center;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}
.lm-navbar[data-sections] .lm-navbar-section {
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}
/* Width keywords (data-width); fixed-px comes from the compiled per-element rule. */
.lm-navbar[data-sections] .lm-navbar-section[data-width="auto"] { width: max-content; }
/* Justify the content WITHIN a section. start is the default (no attr). */
.lm-navbar[data-sections] .lm-navbar-section[data-justify="center"] { justify-content: center; }
.lm-navbar[data-sections] .lm-navbar-section[data-justify="end"] { justify-content: flex-end; }
.lm-navbar[data-sections] .lm-navbar-section[data-justify="between"] { justify-content: space-between; }
/* A per-section text run + button reuse the same color/typography inheritance as the bar. */
.lm-navbar[data-sections] .lm-navbar-text { white-space: nowrap; }
/* Mobile: sections collapse into the hamburger panel in DOM order; the logo stays in the bar. */
@media (max-width: 1024px) {
	.lm-navbar[data-sections][data-hamburger="true"] .lm-navbar-inner {
		display: flex;
		justify-content: space-between;
	}
	.lm-navbar[data-sections][data-hamburger="true"] .lm-navbar-section:not([data-content="logo"]) { display: none; }
	.lm-navbar[data-sections][data-hamburger="true"].is-open .lm-navbar-section:not([data-content="logo"]) {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 8px 0;
		background: var(--lm-color-surface, #ffffff);
		box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
		z-index: 60;
	}
}

/* Logo placement. */
.lm-navbar[data-logo="right"] .lm-navbar-inner { flex-direction: row-reverse; }
.lm-navbar-logo { display: inline-flex; align-items: center; }
.lm-navbar-logo img { height: 34px; width: auto; }

/* Brand lockup: a per-navbar logo image + name/subtitle as one linked unit. Colors/sizing
 * inherit from the navbar's compiled styles; this only lays the lockup out. */
.lm-navbar-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.lm-navbar-brand-logo { height: 40px; width: auto; display: block; object-fit: contain; }
.lm-navbar-brand-text { display: inline-flex; flex-direction: column; line-height: 1.1; }
.lm-navbar-brand-name { font-weight: 600; }
.lm-navbar-brand-sub { font-size: 0.7em; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.75; }

/* Actions slot: extra navbar content (styled text, CTA buttons) beside the logo + menu.
 * A horizontal group; the items themselves carry their own compiled/token styles, so this
 * only lays them out (never per-instance appearance — that stays in the compiled tree CSS). */
.lm-navbar-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
/* Keep the CTA group visible (not collapsed) when the menu folds into the hamburger. */
@media ( max-width: 1024px ) {
	.lm-navbar[data-hamburger="true"] .lm-navbar-actions { margin-left: auto; }
}

/* Logo swap: by default show the dark logo (solid bars on light backgrounds). */
.lm-navbar-logo .lm-logo-light { display: none; }
.lm-navbar-logo .lm-logo-dark { display: block; }

/* Sticky. */
.lm-navbar[data-sticky] { position: sticky; top: 0; z-index: 50; }

/* Transparent -> solid on scroll. The architect's own compiled styles are the SOLID look;
 * at the top (set by navbar.js) we override to transparent and swap to the light logo. */
.lm-navbar[data-scroll] { transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.lm-navbar[data-scroll][data-at-top] { background: transparent !important; box-shadow: none !important; }
.lm-navbar[data-scroll][data-at-top] .lm-logo-light { display: block; }
.lm-navbar[data-scroll][data-at-top] .lm-logo-dark { display: none; }

/* ---- Hamburger (small screens) ---------------------------------------------------------
 * The toggle button is a 3-bar hamburger, hidden on desktop. On small screens a navbar with
 * data-hamburger hides its menu and shows the toggle; `.is-open` (set by navbar.js) drops the
 * menu down as a stacked panel. */
.lm-navbar-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 9px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.lm-navbar-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Collapse at Loom's Tablet breakpoint (spec §6.1, ≤1024) so the Tablet/Mobile device
 * previews — and real tablets/phones — show the hamburger, while Desktop keeps the bar. */
@media (max-width: 1024px) {
	.lm-navbar[data-hamburger="true"] { position: relative; }
	.lm-navbar[data-hamburger="true"] .lm-navbar-toggle { display: flex; }
	/* Collapse the menu by default; reveal it as a dropdown panel when open. */
	.lm-navbar[data-hamburger="true"] .lm-nav-menu { display: none; }
	.lm-navbar[data-hamburger="true"].is-open .lm-nav-menu {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		padding: 8px 0;
		background: var(--lm-color-surface, #ffffff);
		box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
		z-index: 60;
	}
	.lm-navbar[data-hamburger="true"].is-open .lm-nav-menu li { width: 100%; }
	.lm-navbar[data-hamburger="true"].is-open .lm-nav-menu a { display: block; padding: 10px 20px; }
	/* Open-state hamburger → an X. */
	.lm-navbar[data-hamburger="true"].is-open .lm-navbar-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.lm-navbar[data-hamburger="true"].is-open .lm-navbar-toggle span:nth-child(2) { opacity: 0; }
	.lm-navbar[data-hamburger="true"].is-open .lm-navbar-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}