/* =============================================================================
	The app header.

	Two rows across the full width: a sticky header (under the admin bar) with the
	brand and navigation, and a page title bar that scrolls with the page. The
	destinations wrap rather than hide, so there is no drawer or state to persist.

	The title bar does not stick: the nav row can wrap, so its height is not known
	to this stylesheet and a guessed `top` would slide the title over the nav.

	Depends on: tokens.css, base.css
	============================================================================= */

/* ── The admin bar offset ──────────────────────────────────────────────────── */

/*
 * WordPress renders a 32px admin bar, and 46px below 782px when it folds. Declared
 * once here and read by other stylesheets through a token.
 */
:root                             { --shiftora-admin-bar-offset: 0px; }
body.admin-bar                    { --shiftora-admin-bar-offset: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar                { --shiftora-admin-bar-offset: 46px; }
}

/*
 * Visually hidden but available to a screen reader. Not `display: none`, which
 * removes it from the accessibility tree too.
 */
.shiftora-visually-hidden {
	position:       absolute !important;
	inline-size:    1px;
	block-size:     1px;
	padding:        0;
	margin:         -1px;
	overflow:       hidden;
	clip-path:      inset(50%);
	white-space:    nowrap;
	border-width:   0;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */

.shiftora-layout {
	display:        flex;
	flex-direction: column;
	min-inline-size: 0;
}

.shiftora-shell {
	display:        flex;
	flex-direction: column;
	min-inline-size: 0;
}

/* ── The header ────────────────────────────────────────────────────────────── */

.shiftora-header {
	position:         sticky;
	inset-block-start: var(--shiftora-admin-bar-offset);
	z-index:          var(--shiftora-z-sticky);
	background:       var(--shiftora-color-bg-raised);
	border-block-end: 1px solid var(--shiftora-color-border);
	box-shadow:       var(--shiftora-shadow-sm);
}


.shiftora-header__row {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         var(--shiftora-space-3);
	padding:     var(--shiftora-space-3) var(--shiftora-space-7);
}

.shiftora-header__brand {
	display:        flex;
	align-items:    center;
	gap:            var(--shiftora-space-3);
	min-inline-size: 0;
	text-decoration: none;
}

.shiftora-header__brand:hover {
	text-decoration: none;
}

/*
 * Both block-size and inline-size are set: the source is 824x692, so a width alone
 * renders it too tall.
 */
.shiftora-header__logo {
	block-size:  22px;
	inline-size: auto;
	object-fit:  contain;

}

.shiftora-header__version {
	font-size:   var(--shiftora-font-size-xs);
	font-family: var(--shiftora-font-family-mono);
	color:       var(--shiftora-color-text-muted);
	white-space: nowrap;
}

/* ── The navigation row ────────────────────────────────────────────────────── */

.shiftora-nav {
	background: var(--shiftora-color-bg-surface-alt);
}

/*
 * The item is a wrapper; the link inside carries the hit area, hover and active
 * mark. Flex keeps the wrapper from adding a list-item box between list and anchor.
 */
.shiftora-nav__item {
	display: flex;
}

.shiftora-nav__list {
	display:    flex;
	flex-wrap:  wrap;
	align-items: center;
	gap:        2px;
	margin:     0;
	padding:    var(--shiftora-space-2) var(--shiftora-space-6);
	list-style: none;
}

.shiftora-nav__link {
	display:        flex;
	align-items:    center;
	min-block-size: 2.25rem;
	padding-inline: var(--shiftora-space-3);
	border-radius:  var(--shiftora-radius-md);
	color:          var(--shiftora-color-text-secondary);
	font-size:      var(--shiftora-font-size-sm);
	font-weight:    var(--shiftora-font-weight-medium);
	text-decoration: none;
	white-space:    nowrap;
	transition:     background-color var(--shiftora-duration-instant) var(--shiftora-ease-out),
	                color var(--shiftora-duration-instant) var(--shiftora-ease-out);
}

.shiftora-nav__link:hover {
	background: var(--shiftora-color-bg-inset);
	color:      var(--shiftora-color-text);
	text-decoration: none;
}

/*
 * The current page: a tinted fill and a weight change rather than an underline,
 * which is easy to miss on one link in a row of seven.
 */
.shiftora-nav__link.is-active {
	background: var(--shiftora-color-primary-subtle);
	color:      var(--shiftora-color-primary);
	font-weight: var(--shiftora-font-weight-semibold);
}

/* ── The bar above the content ─────────────────────────────────────────────── */

/* Carries the page title, and scrolls with the page. */
.shiftora-shell__bar {
	display:          flex;
	align-items:      flex-start;
	gap:              var(--shiftora-space-3);
	padding:          var(--shiftora-space-6) var(--shiftora-space-7) var(--shiftora-space-4);
	background:       var(--shiftora-color-bg);
	border-block-end: 1px solid var(--shiftora-color-border-light);
}

.shiftora-shell__crumbs {
	min-inline-size: 0;
}

.shiftora-shell__title {
	margin:      0;
	font-size:   var(--shiftora-font-size-2xl);
	font-weight: var(--shiftora-font-weight-bold);
	line-height: var(--shiftora-line-height-tight);
	letter-spacing: -0.015em;
	color:       var(--shiftora-color-text);
}

.shiftora-shell__desc {
	max-inline-size: var(--shiftora-content-prose-width);
	margin:           var(--shiftora-space-2) 0 0;
	color:            var(--shiftora-color-text-secondary);
}

/* ── Narrow viewports ──────────────────────────────────────────────────────── */

/*
 * Below the WordPress admin-bar breakpoint the header stops sticking, since two
 * wrapped rows of navigation would cover a fifth of a phone screen. The title bar
 * takes over as the orientation.
 */
@media screen and (max-width: 782px) {
	.shiftora-header {
		position: static;
	}

	.shiftora-header__row {
		padding: var(--shiftora-space-3) var(--shiftora-space-4);
	}

	.shiftora-nav__list {
		padding-inline: var(--shiftora-space-3);
	}

	.shiftora-shell__bar {
		position:         sticky;
		inset-block-start: var(--shiftora-admin-bar-offset);
		z-index:          var(--shiftora-z-sticky);
		padding:          var(--shiftora-space-4) var(--shiftora-space-4) var(--shiftora-space-3);
	}

	.shiftora-shell__title {
		font-size: var(--shiftora-font-size-xl);
	}
}