/* ===================================================================
   NightOwl Book CMS — shared plugin-template chrome
   ONE top bar (full + minimal variants) + ONE compact footer for the
   four self-contained plugin templates (single-book, archive-book,
   single-post, category-posts). Loaded as a dependency of each
   template stylesheet, so it appears exactly where they do.
   Preserves the currently approved appearance:
     FULL    = the Blog-header style (110px bar, display-serif nav, gold CTA)
     MINIMAL = the Book-header style (compact, brand + back link)
   Colours, borders and type come from nightowl-design-system.css:
     --nightowl-black / -black-soft / -gold / -gold-light / -muted / -gold-border
   No global bare-element selectors. No external fonts. No JS.
   =================================================================== */

/* --- FULL top bar (approved Blog-header style) --- */
.noch-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 110px;
	padding: 0 48px;
	background: var(--nightowl-black);
	border-bottom: 1px solid var(--nightowl-gold-border);
	box-sizing: border-box;
}
.noch-topbar * { box-sizing: border-box; }

.noch-brand { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; color: inherit; }
.noch-brand img,
.noch-brand .noch-logo { display: block; width: auto; height: 64px; object-fit: contain; }
.noch-wordmark {
	font-size: 18px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--nightowl-gold-light);
}

.noch-nav { display: flex; align-items: center; gap: 40px; }
.noch-nav a {
	color: var(--nightowl-gold-light);
	font-family: var(--nightowl-font-display);
	font-weight: 400;
	font-size: 17px;
	letter-spacing: 0.5px;
	text-decoration: none;
	padding-bottom: 6px;
	position: relative;
	transition: color 0.2s ease;
}
.noch-nav a:hover,
.noch-nav a:focus-visible { color: #f0d79a; }
.noch-nav a.is-active { color: var(--nightowl-gold); }
.noch-nav a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--nightowl-gold);
}

.noch-cta {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 266px;
	height: 54px;
	background: transparent;
	border: 1px solid var(--nightowl-gold);
	border-radius: 5px;
	color: var(--nightowl-gold-light);
	font-family: var(--nightowl-font-ui);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: 1px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.noch-cta:hover,
.noch-cta:focus-visible { background: var(--nightowl-gold); color: #000; }

/* --- MINIMAL top bar (approved Book-header style) --- */
.noch-topbar--minimal {
	height: auto;
	padding: 20px clamp(16px, 5vw, 56px);
}
.noch-topbar--minimal .noch-brand img,
.noch-topbar--minimal .noch-brand .noch-logo { height: 60px; }
.noch-back {
	font-size: 15px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nightowl-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.noch-back:hover,
.noch-back:focus-visible { color: var(--nightowl-gold-light); }

/* --- Compact footer --- */
.noch-footer {
	border-top: 1px solid var(--nightowl-gold-border);
	background: var(--nightowl-black-soft);
	text-align: center;
	padding: 34px 24px 42px;
	box-sizing: border-box;
}
.noch-footer * { box-sizing: border-box; }
.noch-footer-brand {
	margin: 0 0 6px;
	font-size: 15px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--nightowl-gold-light);
}
.noch-footer-tag { margin: 0 0 14px; font-size: 13px; color: var(--nightowl-muted); }
.noch-footer-nav {
	margin: 0 0 14px;
	display: flex;
	gap: 22px;
	justify-content: center;
	flex-wrap: wrap;
}
.noch-footer-nav a {
	font-size: 13px;
	letter-spacing: 0.5px;
	color: var(--nightowl-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}
.noch-footer-nav a:hover,
.noch-footer-nav a:focus-visible { color: var(--nightowl-gold-light); }
.noch-footer-line { margin: 0; font-size: 12px; color: var(--nightowl-muted); } /* 13B: AA contrast on #090909 */

/* --- Focus --- */
.noch-topbar a:focus-visible,
.noch-footer a:focus-visible {
	outline: 2px solid var(--nightowl-gold-light);
	outline-offset: 3px;
	border-radius: var(--nightowl-radius-focus);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
	.noch-topbar { padding: 0 24px; }
	.noch-topbar--minimal { padding: 18px 24px; }
	.noch-nav { gap: 24px; }
	.noch-nav a { font-size: 15px; }
}
@media (max-width: 640px) {
	.noch-topbar {
		flex-wrap: wrap;
		height: auto;
		padding: 16px;
		gap: 12px;
	}
	.noch-topbar--minimal { padding: 16px; gap: 12px; }
	.noch-brand { order: 1; }
	.noch-cta { order: 2; }
	.noch-back { order: 2; }
	.noch-nav {
		order: 3;
		flex-wrap: wrap;
		justify-content: center;
		gap: 16px;
		width: 100%;
	}
}

/* --- Motion --- */
@media (prefers-reduced-motion: reduce) {
	.noch-nav a,
	.noch-cta,
	.noch-back,
	.noch-footer-nav a { transition: none; }
}