/* Site header + primary nav. Sticky on both mobile and desktop. Top-level
   items are a horizontal row; an item with children gets an accordion
   (click-toggle, not hover — hover doesn't exist on touch) submenu
   centered directly under it. Toggle behavior is in site-header.js. */

/* Standard WP a11y helper — visually hidden, still reachable by a screen
   reader/keyboard. Not just for the skip link below: any future
   screen-reader-only text in the theme can reuse this same class. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* The skip link itself (header.php) — invisible until it's actually
   focused (tab from the very top of the page), then a real, visible,
   high-contrast box so a keyboard user can see exactly what they're
   about to activate. */
.nonotami-skip-link:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	padding: 0.75em 1.25em;
	background: #000;
	color: #fff;
	text-decoration: none;
}

:root {
	/* Not the header's own height any more — just the shared reference
	   other elements offset against (sticky sidebars in layout.css,
	   scroll-padding-top below). js/site-header.js measures the header's
	   REAL rendered height (which varies: a tagline, a different header
	   design, font-size changes, the mobile title+hamburger row) and
	   keeps this in sync, the same way js/sticky-bounds.js already does
	   for --nonotami-footer-height. This 72px is only the very first
	   paint's fallback, before that JS runs once. */
	--nonotami-header-height: 72px;
}

#site-header {
	z-index: 100;
	/* No fixed height — the header sizes to whatever it actually holds
	   (title, and a tagline when there is one, plus the nav or the mobile
	   hamburger row) instead of clipping or overflowing a fixed box. */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 5%;
	background: var( --nonotami-color-bg );
	/* Toggled by the customizer's "Header bottom border" control —
	   see inc/layout-customizer.php. */
	border-bottom: var( --nonotami-header-border, none );
}

/* Sticky is desktop-only (no room to spare on mobile) and toggled by the
   customizer's "Sticky header" control — see inc/sticky.php, which sets
   --nonotami-sticky-header to `sticky` or `static`. */
@media ( min-width: 783px ) {
	#site-header {
		position: var( --nonotami-sticky-header, sticky );
		top: 0;
	}

	/* Anchor jumps (e.g. the Table of Contents plugin's links) land flush
	   at the very top of the viewport by default, right under/behind the
	   sticky header — this offsets every in-page #hash jump by the
	   header's own height (plus a little breathing room) so the target
	   heading, and the line right after it, actually stay visible.
	   Scoped to this same breakpoint since the header is only sticky
	   here. */
	html {
		scroll-padding-top: calc( var( --nonotami-header-height ) + 1rem );
	}
}

/* "Centered" design (inc/header-design.php): title above, subtitle below,
   then the menu — all centered. header.php's markup is already in that
   DOM order for the default design too, so this is CSS only, no template
   branch. Header height goes auto since stacked content is taller than
   the fixed --nonotami-header-height; sticky positioning (above) still
   works, it just no longer has a fixed height to offset sidebars by. */
body.nonotami-header-centered #site-header {
	flex-direction: column;
	justify-content: center;
	height: auto;
	padding: 1.5rem 5%;
	gap: 0.5rem;
}

body.nonotami-header-centered #site-branding {
	text-align: center;
}

/* "Side" design (the default) WITH a tagline (inc/header-design.php sets
   the body class only when get_bloginfo('description') isn't empty, and
   only for this design — the centered one above already handles a
   tagline on its own): title and tagline share one row, the menu drops
   to its own row under that — title+tagline left, menu right. Without a
   tagline this class isn't added at all, so the plain single-row rule
   above (#site-header: flex row, space-between) is untouched. Desktop
   only — below 783px the tagline and the horizontal nav are both hidden
   outright anyway (the mobile title+hamburger row, css/mobile-header.
   css), so this would have nothing to apply to there and would only
   fight that row's own layout if it weren't scoped out. */
@media ( min-width: 783px ) {
	body.nonotami-header-has-tagline #site-header {
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}

	body.nonotami-header-has-tagline #site-branding {
		display: flex;
		align-items: baseline;
		justify-content: flex-start;
		gap: 0.75rem;
	}

	body.nonotami-header-has-tagline #site-nav ul {
		justify-content: flex-end;
	}
}

body.nonotami-header-centered #site-nav ul {
	justify-content: center;
}

#site-logo {
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none;
	color: inherit;
}

#site-nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	/* Customizer's "Menu item gap" control — inc/menu.php. A submenu
	   (.sub-menu, below) overrides this back to 0 regardless, since its
	   own items stack vertically with their own padding, not a gap. */
	gap: var( --nonotami-menu-item-gap, 1.5rem );
}

#site-nav li {
	position: relative;
}

#site-nav a {
	display: block;
	padding: 0.5rem 0;
	text-decoration: none;
	/* Shared by both levels — see inc/menu.php, the "Menu color" control. */
	color: var( --nonotami-menu-color, inherit );
}

/* Top-level items only (direct children of the top <ul>) — excludes
   nested .sub-menu anchors, which get their own font/size below but
   share this same color. See inc/menu.php. */
#site-nav > ul > li > a {
	font-family: var( --nonotami-menu-font-top, inherit );
	font-size: var( --nonotami-menu-size-top, inherit );
}

/* Submenu: hidden except for the two CSS-only ways to reveal it below —
   hover (desktop) or keyboard focus landing anywhere inside the item —
   centered under the parent item regardless of the item's own width.
   Nothing JS-driven any more (js/site-header.js): #site-nav never
   renders on a touch viewport in the first place (mobile has its own
   separate overlay menu), so there's no tap/click state to track here. */
#site-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX( -50% );
	flex-direction: column;
	gap: 0;
	min-width: 180px;
	padding: 0.5rem 0;
	background: var( --nonotami-color-bg );
	box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.12 );
}

/* Keyboard use: focus landing anywhere inside the item (the parent link
   itself, tabbed onto, or — once revealed — one of the submenu links)
   keeps the submenu visible, independent of hover. Unlike hover this
   isn't gated to a pointer/hover-capable device; a touch screen simply
   never reaches it in the first place, #site-nav being hidden there. */
#site-nav .menu-item-has-children:focus-within > .sub-menu {
	display: flex;
}

/* A real mouse hovering the item opens it too, independent of focus and
   of each other. Gated to devices that actually have hover AND a
   precise pointer (a real mouse) — without that, a touch tap (which
   also matches a bare `:hover` with no `pointer: fine`/`hover: hover`
   guard) could trigger a lingering "sticky hover" state on a
   touchscreen, which never gets a mouseleave to clear it. */
@media ( hover: hover ) and ( pointer: fine ) {
	#site-nav .menu-item-has-children:hover > .sub-menu {
		display: flex;
	}
}

#site-nav .sub-menu a {
	padding: 0.5rem 1.25rem;
	text-align: center;
	white-space: nowrap;
	font-family: var( --nonotami-menu-font-sub, inherit );
	font-size: var( --nonotami-menu-size-sub, inherit );
}

/* Category icon + title, prepended to a menu item's title when that
   item links to a category with one set (Nonotami → Category Management
   → Images) — inc/menu.php. An inline-flex label box, not vertical-align
   on the bare icon — vertical-align only ever approximates centering
   against the text's own font metrics, and looked off at every one of
   the three crop shapes; flex centers the icon against the label's
   actual box, exactly, same result regardless of shape/size. Circle is
   the default/fallback shape; the 3:2/square body classes
   (inc/mobile-menu.php adds these site-wide, same ones the mobile
   overlay's own icon uses) override the icon's width/radius only. */
.nonotami-menu-cat-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.nonotami-menu-cat-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	border-radius: 50%;
	object-fit: cover;
}

.nonotami-mm-icon-crop-square .nonotami-menu-cat-icon {
	border-radius: 3px;
}

.nonotami-mm-icon-crop-3-2 .nonotami-menu-cat-icon {
	width: 1.875em;
	border-radius: 3px;
}