/* OpenPress global header. Uses tokens from main.css. */

.op-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--op-bg) 82%, transparent);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--op-border);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset;
}
.op-header::after {
	content: "";
	position: absolute;
	inset: auto 0 -1px 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--op-link) 55%, transparent) 30%, color-mix(in srgb, var(--op-accent-2) 55%, transparent) 70%, transparent);
	opacity: 0.5;
	pointer-events: none;
}

.admin-bar .op-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar .op-header { top: 46px; }
}

.op-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
}

/* Wordmark */
.op-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--op-text);
	font-family: var(--op-font-display);
	font-size: 1.1875rem;
	font-weight: var(--op-weight-heavy);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.op-logo::before {
	content: "";
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 4px;
	background: var(--op-gradient);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--op-link) 18%, transparent);
	transform: rotate(45deg);
}
.op-logo:hover { color: var(--op-text); }

/* Navigation (no-JS: stacks beneath the bar) */
.op-nav {
	order: 3;
	width: 100%;
	padding-block: var(--op-space-2) var(--op-space-3);
}

.op-menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.op-menu a {
	display: block;
	padding: var(--op-space-3) 0;
	position: relative;
	color: var(--op-text-muted);
	font-family: var(--op-font-display);
	font-size: var(--op-text-nav);
	font-weight: var(--op-weight-semibold);
	text-decoration: none;
	transition: color var(--op-transition);
}
.op-menu a:hover,
.op-menu .current-menu-item > a,
.op-menu .current-menu-ancestor > a,
.op-menu a[aria-current="page"] {
	color: var(--op-text);
}
@media (min-width: 1024px) {
	.op-menu a::after {
		content: "";
		position: absolute;
		inset: auto 0 0.125rem 0;
		height: 2px;
		border-radius: 2px;
		background: var(--op-gradient);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform var(--op-transition);
	}
	.op-menu a:hover::after,
	.op-menu .current-menu-item > a::after,
	.op-menu .current-menu-ancestor > a::after,
	.op-menu a[aria-current="page"]::after { transform: scaleX(1); }
}

/* Actions */
.op-header__actions {
	display: flex;
	align-items: center;
	gap: var(--op-space-1);
}

.op-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--op-radius);
	color: var(--op-text-muted);
	cursor: pointer;
	transition: color var(--op-transition), background-color var(--op-transition), box-shadow var(--op-transition);
}
.op-icon-btn:hover {
	color: var(--op-link);
	background: var(--op-bg-elevated);
	box-shadow: inset 0 0 0 1px var(--op-border);
}

/* Search toggle + panel. Without JS the form simply sits beneath the bar. */
.op-search-toggle { display: none; }
.js .op-search-toggle { display: inline-flex; }
.op-search-toggle[aria-expanded="true"] {
	color: var(--op-link);
	background: var(--op-bg-elevated);
	box-shadow: inset 0 0 0 1px var(--op-border);
}

.op-search { padding-block: 0 var(--op-space-3); }
.js .op-search {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding-block: var(--op-space-4);
	background: var(--op-bg-elevated);
	border-bottom: 1px solid var(--op-border);
	box-shadow: var(--op-shadow-lg);
}
.js .op-header.is-search-open .op-search { display: block; }

.op-search-form {
	display: flex;
	gap: var(--op-space-2);
	width: 100%;
	max-width: 40rem;
	margin-inline: auto;
}
.op-search-form__field {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
}
.op-search-form__icon {
	position: absolute;
	left: 0.875rem;
	color: var(--op-link);
	pointer-events: none;
}
.op-search-form__input {
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	padding: 0 0.875rem 0 2.75rem;
	background: var(--op-bg);
	border: 1px solid var(--op-border-strong);
	border-radius: var(--op-radius);
	color: var(--op-text);
	font-size: 1rem; /* 16px: no iOS zoom on focus */
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--op-transition), box-shadow var(--op-transition);
}
.op-search-form__input::placeholder { color: var(--op-text-muted); opacity: 1; }
.op-search-form__input:hover { border-color: var(--op-link); }
.op-search-form__input:focus-visible {
	outline: 2px solid var(--op-focus);
	outline-offset: 2px;
	border-color: var(--op-link);
}
.op-search-form__submit { flex: none; min-height: 3rem; }

/* Menu toggle only exists when JS can drive it */
.op-menu-toggle { display: none; }
.op-menu-toggle .op-icon-close { display: none; }
.op-menu-toggle[aria-expanded="true"] .op-icon-open { display: none; }
.op-menu-toggle[aria-expanded="true"] .op-icon-close { display: block; }

/* Theme toggle icon: show the mode you would switch TO (moon in light, sun in dark) */
.op-theme-toggle .op-icon-sun { display: none; }
:root[data-theme="dark"] .op-theme-toggle .op-icon-moon { display: none; }
:root[data-theme="dark"] .op-theme-toggle .op-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .op-theme-toggle .op-icon-moon { display: none; }
	:root:not([data-theme="light"]) .op-theme-toggle .op-icon-sun { display: block; }
}

/* Mobile / tablet: dropdown panel when JS is available */
@media (max-width: 1023.98px) {
	.js .op-menu-toggle { display: inline-flex; }

	.js .op-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		padding: var(--op-space-2) var(--op-gutter) var(--op-space-4);
		background: var(--op-bg-elevated);
		border-bottom: 1px solid var(--op-border);
		box-shadow: var(--op-shadow-lg);
	}
	.js .op-header.is-menu-open .op-nav { display: block; }

	.op-menu li + li { border-top: 1px solid var(--op-border); }
	.op-menu a { padding-block: var(--op-space-4); }
}

/* Desktop */
@media (min-width: 1024px) {
	.op-header__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		min-height: 4.5rem;
	}

	.op-nav { order: 0; width: auto; padding: 0; }
	.op-menu { flex-direction: row; gap: var(--op-space-5); }
	.op-menu a { padding: var(--op-space-2) 0; }
	.op-logo { justify-self: start; }
	.op-header__actions { justify-self: end; }
}

/* Task 048: header polish: 44px touch targets (above), pressed state, focus that keeps the corner radius,
   and a current-page marker on the mobile menu that is not colour alone. */
.op-icon-btn:active { transform: scale(0.96); }
.op-icon-btn:focus-visible,
.op-logo:focus-visible { border-radius: var(--op-radius); outline-offset: 2px; }
.op-menu a:focus-visible { border-radius: var(--op-radius-xs); outline-offset: 2px; }
@media (max-width: 1023.98px) {
	.op-menu .current-menu-item > a,
	.op-menu .current-menu-ancestor > a,
	.op-menu a[aria-current="page"] { padding-left: var(--op-space-3); box-shadow: inset 3px 0 0 var(--op-link); }
}


/* Task 050: responsive refinement ------------------------------------------------ */
.op-logo { min-width: 0; white-space: nowrap; }

/* Menu panel never exceeds the viewport: scrolls inside itself on short (landscape) screens. */
@media (max-width: 1023.98px) {
	.js .op-nav {
		max-height: calc(100vh - 4rem);
		max-height: calc(100dvh - 4rem);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.js .op-header__inner { flex-wrap: nowrap; }
	.js .op-nav { animation: op-menu-in var(--op-duration) var(--op-ease); }
}
@keyframes op-menu-in { from { opacity: 0; transform: translateY(-0.25rem); } to { opacity: 1; transform: none; } }

/* Very narrow phones (320px): keep logo and three 44px buttons on one row. */
@media (max-width: 379.98px) {
	.op-logo { gap: 0.5rem; font-size: 1rem; letter-spacing: 0.08em; }
	.op-header__actions { gap: 0; }
}

/* Desktop 1024-1279: seven links plus logo and actions need room. Logo | centred nav | actions. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
	.op-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--op-space-4); }
	.op-nav { justify-self: center; }
	.op-menu { gap: var(--op-space-4); }
}

.op-menu-toggle:focus-visible,
.op-search-toggle:focus-visible,
.op-theme-toggle:focus-visible { outline-offset: -2px; }