/* ==========================================================
   Shared site header for every onpodium.com page.
   Loaded after each page's own styles: the inline-styled home and
   About pages and the pages on blog-onpodium.css. It owns the
   responsive behaviour of the header:
   - up to 820px: a "Menu" button opens the links as a panel;
   - "Log in" stays visible at every width;
   - the "Free Tools" list is a disclosure (button + list).
   Behaviour: /js/site-nav.js.
   ========================================================== */

nav.nav {
	--sn-text: #1d1a14;
	--sn-muted: #6b6457;
	--sn-line: #e0d5bd;
	--sn-card: #fbf6e8;
	--sn-hover: rgba(29, 26, 20, 0.06);
}

/* Keyboard focus: one clear ring for every header control. */
nav.nav a:focus-visible,
nav.nav button:focus-visible {
	outline: 2px solid var(--sn-text);
	outline-offset: 2px;
}

/* "Free Tools" opens on click and keyboard, not only on hover. */
nav.nav .nav-dropdown.is-open .nav-dropdown-toggle { color: var(--sn-text); }
nav.nav .nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }
nav.nav .nav-dropdown.is-open .nav-dropdown-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

nav.nav .nav-cta .btn-ghost { white-space: nowrap; }
nav.nav .nav-cta .btn-primary { white-space: nowrap; }

/* Menu button: only shown up to 820px. */
nav.nav .nav-toggle { display: none; }
.nav-toggle svg {
	width: 18px;
	height: 18px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}
.nav-toggle .nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: inline; }

@media (max-width: 820px) {
	nav.nav .nav-inner { gap: 8px; }

	nav.nav .nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		margin: 0 0 0 auto;
		min-height: 44px;
		padding: 0 14px;
		border: 1px solid var(--sn-line);
		border-radius: 999px;
		background: transparent;
		color: var(--sn-text);
		font: inherit;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	nav.nav .nav-toggle:hover,
	nav.nav .nav-toggle[aria-expanded="true"] { background: var(--sn-hover); }

	nav.nav .nav-cta { gap: 4px; }
	nav.nav .nav-cta .btn-ghost {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 10px;
		color: var(--sn-text);
	}
	nav.nav .nav-cta .btn-primary {
		min-height: 44px;
		padding: 0 16px;
	}

	/* Closed: the links are not shown and are not tab stops. */
	nav.nav .nav-links { display: none; }

	/* Open: a full-width panel under the header bar. */
	nav.nav.is-menu-open .nav-links {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 72px);
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 4px 20px 20px;
		background: var(--sn-card);
		border-bottom: 1px solid var(--sn-line);
		box-shadow: 0 18px 32px -16px rgba(29, 26, 20, 0.22);
	}
	nav.nav .nav-links > a,
	nav.nav .nav-dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 52px;
		padding: 0 2px;
		border-bottom: 1px solid var(--sn-line);
		color: var(--sn-text);
		font-size: 16px;
		font-weight: 500;
		text-align: left;
	}
	nav.nav .nav-dropdown-toggle svg { width: 12px; height: 12px; }

	/* The tools list opens in place under its button. */
	nav.nav .nav-dropdown-menu,
	nav.nav .nav-dropdown:hover .nav-dropdown-menu {
		display: none;
		position: static;
		transform: none;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		padding: 4px 0 8px 12px;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}
	nav.nav .nav-dropdown.is-open .nav-dropdown-menu {
		display: flex;
		flex-direction: column;
		transform: none;
		border-bottom: 1px solid var(--sn-line);
	}
	nav.nav .nav-dropdown-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 10px;
		font-size: 15px;
	}
}

@media (max-width: 560px) {
	nav.nav.is-menu-open .nav-links { padding-left: 16px; padding-right: 16px; }
}

/* Narrow phones: the button shows only its icon; its name stays "Menu". */
@media (max-width: 379px) {
	nav.nav .nav-toggle { padding: 0 12px; }
	nav.nav .nav-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	nav.nav .nav-cta .btn-ghost { padding: 0 8px; }
	nav.nav .nav-cta .btn-primary { padding: 0 14px; }
}