/*
 * Pitru Theme v2 — shell/nav.css
 *
 * NavBar chrome. Every rule is the inline-style from ORG
 * `components/Shell.jsx` NavBar (lines 37-82) ported to tokens.
 *
 * Scroll-state mapping:
 *   Shell.jsx unscrolled → background rgba(246,241,230,0.4), border transparent
 *   Shell.jsx scrolled   → background rgba(246,241,230,0.78), border var(--line-2)
 *
 * The ivory-alpha values have no token in core/tokens.css, so we use
 * color-mix() against var(--ivory) rather than hardcoding hex.
 *
 * Class conventions: all classes prefixed `.pps-shell-nav` (BEM) to
 * avoid collision with cards / bands / archive partials.
 *
 * Note: `nav [data-nav-links] { display: none }` at ≤1024px lives in
 * core/tokens.css (inherited from ORG's global responsive rules) — we
 * don't redefine it here.
 */

/* -------------------------------------------------------------------------
 * Header shell
 * -------------------------------------------------------------------------
 * Shell.jsx: sticky top, padding 14px 0, blur backdrop, conditional
 * background + border tied to `scrolled`.
 */
.pps-shell-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 14px 0;
	background: color-mix(in srgb, var(--ivory) 40%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: background 0.3s var(--ease-ios), border-color 0.3s var(--ease-ios);
}

.pps-shell-nav.is-scrolled {
	background: color-mix(in srgb, var(--ivory) 78%, transparent);
	border-bottom-color: var(--line-2);
}

.pps-shell-nav__wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* -------------------------------------------------------------------------
 * Brand (logo link wrapper)
 * ------------------------------------------------------------------------- */
.pps-shell-nav__brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Logo partial — shared styles (used in nav AND footer)
 * ------------------------------------------------------------------------- */
.pps-shell-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.pps-shell-logo__mark {
	flex: 0 0 auto;
}

.pps-shell-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.pps-shell-logo__name {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: inherit;
}

.pps-shell-logo__tagline {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	color: var(--stone);
	margin-top: 2px;
}

/* When rendered inside the dark footer, the subtitle's stone colour
 * reads too low on ink — mono variant uses an ivory-alpha mix instead. */
.pps-shell-logo--mono .pps-shell-logo__tagline {
	color: color-mix(in srgb, var(--ivory) 60%, transparent);
}

/* -------------------------------------------------------------------------
 * Primary link rail (center)
 * -------------------------------------------------------------------------
 * Shell.jsx: display:flex, align-items:center, gap:4.
 */
.pps-shell-nav__links {
	display: flex;
	align-items: center;
	gap: 4px;
}

.pps-shell-nav__link {
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-size: 14px;
	color: var(--ink-soft);
	background: transparent;
	text-decoration: none;
	transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios);
}

.pps-shell-nav__link:hover {
	background: rgba(26, 22, 19, 0.06); /* == var(--line-2) equivalent */
	color: var(--ink);
}

.pps-shell-nav__link.is-active {
	color: var(--ink);
	background: rgba(26, 22, 19, 0.06); /* matches Shell.jsx active pill */
}

/* -------------------------------------------------------------------------
 * Right-side actions (search icon, dashboard icon, CTA)
 * ------------------------------------------------------------------------- */
.pps-shell-nav__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
}

.pps-shell-nav__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-soft);
	text-decoration: none;
	transition: background 0.2s var(--ease-ios), color 0.2s var(--ease-ios);
}

.pps-shell-nav__icon:hover {
	background: rgba(26, 22, 19, 0.06);
	color: var(--ink);
}

.pps-shell-nav__icon.is-active {
	background: rgba(26, 22, 19, 0.06);
	color: var(--ink);
}

.pps-shell-nav__cta {
	padding: 10px 20px;
	font-size: 14px;
	white-space: nowrap;
	margin-left: 4px;
}

.pps-shell-nav__cta-short {
	display: none;
}

/* -------------------------------------------------------------------------
 * Skip-link (a11y)
 * ------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.skip-link:focus {
	position: fixed;
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: var(--ink);
	color: var(--paper);
	border-radius: var(--r-pill);
	z-index: 100;
}

/* -------------------------------------------------------------------------
 * Responsive — follow ORG tokens.css: hide link rail at tablet+mobile.
 * tokens.css already handles that via `nav [data-nav-links]`; we just
 * tighten the action row's gap on narrow viewports.
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
	.pps-shell-nav {
		padding: 12px 0;
	}
	.pps-shell-nav__wrap {
		gap: 8px;
	}
	.pps-shell-nav__actions {
		gap: 3px;
	}
	.pps-shell-nav__icon {
		width: 34px;
		height: 34px;
	}
	.pps-shell-nav__cta {
		padding: 9px 13px;
		margin-left: 1px;
	}
	.pps-shell-logo__tagline {
		display: none;
	}
	.pps-shell-nav__cta-full {
		display: none;
	}
	.pps-shell-nav__cta-short {
		display: inline;
	}
}

@media (max-width: 390px) {
	.pps-shell-nav__wrap {
		gap: 6px;
	}
	.pps-shell-logo {
		gap: 8px;
	}
	.pps-shell-logo__name {
		font-size: 18px;
	}
	.pps-shell-nav__icon {
		width: 32px;
		height: 32px;
	}
	.pps-shell-nav__cta {
		padding: 8px 11px;
	}
}