/* ==========================================================================
   Site navigation — loaded on EVERY page, not just the front page.

   Lives in its own stylesheet because the nav now renders on every template
   and front-page.css is enqueued only on the front page. Every custom
   property carries a literal fallback for exactly that reason: inner pages
   never see front-page.css's :root, so a bare var() would compute to nothing
   and the nav would render unstyled.
   ========================================================================== */

.sd-nav {
	grid-column: 1 / -1;
	grid-row: 3;
	border-top: 3px double var(--sd-ink, #1c1b19);
	border-bottom: 1px solid var(--sd-ink, #1c1b19);
}
.sd-nav ul {
	display: flex; flex-wrap: wrap;
	justify-content: center;
	gap: clamp(.6rem, 1.5vw, 1.35rem);
	list-style: none;
	margin: 0; padding: .5rem 0;
}
.sd-nav a,
.sd-nav__toggle {
	font-family: var(--sd-sans, "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: .74rem;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--sd-ink, #1c1b19);
	padding: .15rem 0;
	position: relative;
	transition: color .2s;
}
/* The one parent with no page of its own is a <button>, so it can take focus
   and open the dropdown by keyboard. Stripped back to look like its siblings. */
.sd-nav__toggle {
	background: none; border: 0; cursor: pointer; font: inherit;
	font-family: var(--sd-sans, "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: .74rem;
	/* A button's UA line-height is taller than the sibling links', which drops
	   its dropdown 2px lower than the others. Match the anchors exactly. */
	line-height: inherit; letter-spacing: .07em; text-transform: uppercase;
	color: var(--sd-ink, #1c1b19); padding: .15rem 0; position: relative;
}
.sd-nav a::after,
.sd-nav__toggle::after {
	content: "";
	position: absolute; left: 50%; right: 50%; bottom: -.4rem; height: 2px;
	background: var(--sd-oxblood, #c53f09);
	transition: left .25s, right .25s;
}
.sd-nav a:hover, .sd-nav a.is-active,
.sd-nav__toggle:hover, .sd-nav__toggle:focus-visible { color: var(--sd-oxblood, #c53f09); }
.sd-nav a:hover::after, .sd-nav a.is-active::after,
.sd-nav__toggle:hover::after, .sd-nav__toggle:focus-visible::after { left: 0; right: 0; }

/* --- Fire & Safety submenu ------------------------------------------------
   Opens on hover AND focus-within, so it is reachable by keyboard, not just
   mouse. On narrow screens it flattens into the nav row instead (see the 720px
   block below) — a hover-only dropdown would leave Alerts unreachable on a
   phone, which is the device that matters most during a fire. */
.sd-nav__parent { position: relative; }
.sd-nav__parent > a,
.sd-nav__parent > .sd-nav__toggle { padding-right: .85rem; }
.sd-nav__parent > a::before,
.sd-nav__parent > .sd-nav__toggle::before {          /* caret, drawn in CSS so no new asset */
	content: "";
	position: absolute; right: 0; top: 50%;
	width: .3rem; height: .3rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
}
.sd-nav .sd-subnav {
	position: absolute; top: 100%; left: 50%;
	/* Above the theme's own stacking — clean-bloggist uses 99999 for header
	   chrome, so anything lower lets the dropdown slide under it. */
	z-index: 100000;
	min-width: 10.5rem;
	display: flex; flex-direction: column; gap: .45rem;
	margin: 0; padding: .7rem 1.15rem .8rem 1.4rem;
	list-style: none;
	background: var(--sd-paper, #ffffff);
	border: 1px solid var(--sd-ink, #1c1b19);
	box-shadow: 0 6px 18px rgba(28, 27, 25, .14);
	opacity: 0; visibility: hidden;
	transform: translateX(-50%) translateY(-.3rem);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.sd-nav .sd-nav__parent:hover > .sd-subnav,
.sd-nav .sd-nav__parent:focus-within > .sd-subnav {
	opacity: 1; visibility: visible;
	transform: translateX(-50%) translateY(0);
}
.sd-nav .sd-subnav a { white-space: nowrap; padding-left: .2rem; }
.sd-nav .sd-subnav li { text-align: left; }

@media (prefers-reduced-motion: reduce) {
	.sd-nav .sd-subnav { transition: none; }
}

@media (hover: none), (max-width: 720px) {
	/* Flatten: parents and their children sit inline as ordinary nav items, and
	   the duplicate parent link is dropped because the real parent is tappable.
	   Keyed on (hover: none) as well as width: "Conditions" is a button with no
	   page behind it, so on a touch tablet wider than 720px a hover-only
	   dropdown would leave River Report, Beach Water, Dam Status and
	   Earthquakes with no way in at all. */
	.sd-nav__parent {
		position: static;
		display: flex; align-items: center;
		gap: clamp(.6rem, 1.5vw, 1.35rem);
	}
	.sd-nav__parent > a,
	.sd-nav__parent > .sd-nav__toggle { padding-right: 0; }
	.sd-nav__parent > a::before,
	.sd-nav__parent > .sd-nav__toggle::before { content: none; }
	.sd-nav .sd-subnav {
		position: static;
		flex-direction: row;
		gap: clamp(.6rem, 1.5vw, 1.35rem);
		min-width: 0; padding: 0;
		background: none; border: 0; box-shadow: none;
		opacity: 1; visibility: visible; transform: none;
	}
	.sd-nav .sd-subnav a { padding-left: 0; }   /* the indent is a dropdown affordance */
	/* The hover/focus rules above are more specific than the flatten, so their
	   translateX(-50%) survives into mobile and drags Alerts back over the
	   parent link. Only shows up once a phone user taps — kill it explicitly. */
	.sd-nav .sd-nav__parent:hover > .sd-subnav,
	.sd-nav .sd-nav__parent:focus-within > .sd-subnav {
		transform: none;
	}
	.sd-nav .sd-subnav__dupe { display: none; }
	/* Flattened, the button is just a label for the group beside it. */
	.sd-nav__toggle { cursor: default; opacity: .62; }
	.sd-nav__toggle::after { content: none; }
}

/* ===================== SECTION ROW (subnav) =====================
   The current section's own children, directly under the main nav. Only
   printed where a section has them (see sdf_render_subnav).

   HIDDEN on the same query that flattens the dropdowns: once flattened, the
   main nav already lists every one of these links inline, and printing them
   again immediately below is pure duplication. */

.sd-subnav-bar {
	border-bottom: 1px solid var(--sd-hairline, rgba(28, 27, 25, .12));
	background: var(--sd-paper, #ffffff);
}
.sd-subnav-bar ul {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: center;
	gap: .35rem clamp(.7rem, 1.6vw, 1.4rem);
	list-style: none;
	margin: 0 auto; padding: .4rem 1rem .45rem;
	max-width: 1400px;
}
.sd-subnav-bar a,
.sd-subnav-bar__label {
	font-family: var(--sd-sans, "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}
.sd-subnav-bar__label {
	color: var(--sd-fog, #8d8c8b);
	font-weight: 700;
}
.sd-subnav-bar__label::after {
	content: "";
	display: inline-block; width: 14px; height: 1px;
	background: currentColor; opacity: .55;
	vertical-align: middle; margin-left: .55rem;
}
.sd-subnav-bar a { color: var(--sd-ink-soft, #494846); padding: .1rem 0; }
.sd-subnav-bar a:hover,
.sd-subnav-bar a:focus-visible { color: var(--sd-oxblood, #c53f09); }
.sd-subnav-bar a.is-active {
	color: var(--sd-oxblood, #c53f09);
	box-shadow: inset 0 -2px 0 var(--sd-oxblood, #c53f09);
}

@media (hover: none), (max-width: 720px) {
	.sd-subnav-bar { display: none; }
}

/* Small phones — moved here from front-page.css so it applies on every
   template, now that the nav is not front-page-only. */
@media (max-width: 560px) {
	.sd-nav ul { gap: .55rem .9rem; padding: .45rem 0; }
	.sd-nav a,
	.sd-nav__toggle { font-size: .68rem; letter-spacing: .05em; }
}

@media print {
	.sd-nav, .sd-subnav-bar { display: none; }
}