/*
 * NSEMM interior design system (handle: nsemm-theme-interior).
 *
 * The shared §18 treatment for every interior page type (content pages, blog
 * single + archive, policy single + archive, search, 404) - everything EXCEPT
 * the homepage and the topic hubs. Faithful to:
 *   /var/www/nsemm-design/content-page.html
 *   /var/www/nsemm-design/policy-single.html
 *
 * THE OPT-IN CONTRACT (so the sibling template packages match it):
 *   Interior templates wrap their <main> content in a single namespaced
 *   wrapper class .nsemm-interior (NEVER a bare WP body class). Inside it:
 *     .nsemm-interior            -> the opted-in <main> (or a group inside it)
 *       .nsemm-pg-hero           -> title + breadcrumb region, sits on the
 *                                   SANDY canvas (no card); holds:
 *         .nsemm-breadcrumb        -> "Home / Section / This page" trail
 *         h1.nsemm-pg-title        -> the page H1 (the title-pill tracks this)
 *         .nsemm-last-updated      -> optional meta line (policy/blog)
 *       .nsemm-card              -> the WHITE prose card (~820px), holds the
 *                                   editable post/page content
 *   The page CANVAS itself is sandy: set on the .nsemm-interior wrapper so it
 *   never styles a bare landmark and never leaks onto the homepage.
 *
 * Brand hex are NEVER hard-coded: local vars map from the WP preset custom
 * properties at the top, so Brand-Sync keeps recolouring this CSS. Shadows /
 * alpha use color-mix on the var-colours (not rgba hex literals) so they keep
 * tracking the live palette, while reproducing the wireframe's exact alpha.
 */

/* == LOCAL VAR MAPPING ==
   gold-dark is a hover shade not in the palette, so it stays literal. */
:root {
	--blue: var(--wp--preset--color--university-blue);
	--gold: var(--wp--preset--color--knowledge-gold);
	--teal: var(--wp--preset--color--discovery-teal);
	--brown: var(--wp--preset--color--foundational-brown);
	--sandy: var(--wp--preset--color--sandy-brown);
	--midnight: var(--wp--preset--color--midnight);
	--bg: var(--wp--preset--color--white);
	--gold-dark: #D4AC00; /* hover shade, not a palette slug */
	--r-pill: 9999px;
	--r-card: 16px;
	--body: var(--wp--preset--font-family--readex-pro);
	--head: var(--wp--preset--font-family--sora);
}

/* == SANDY PAGE CANVAS (§18) ==
   The interior <main> paints the whole page area Sandy Brown so the white
   content card reads as a distinct sheet on top of it. Scoped to the
   namespaced wrapper - NEVER the bare WP body/main class - so it can never
   leak onto the homepage or a topic hub. min-height keeps the canvas filling
   the viewport even on short pages, so the footer always meets sandy, not the
   default white body background.
   The overrides on .has-white-background-color / .has-background reset belt-
   and-braces in case a stray block carries a body-level background. */
.nsemm-interior {
	background: var(--sandy);
	/* viewport minus a generous header allowance, so even a one-line page
	   shows a full sandy field rather than a thin sandy strip. */
	min-height: calc(100vh - 220px);
	padding-bottom: var(--wp--preset--spacing--60);
}

/* == TITLE / BREADCRUMB REGION (on the sandy canvas, above the card) == */
.nsemm-interior .nsemm-pg-hero {
	max-width: 1320px;
	margin-inline: auto;
	padding: 28px 64px 36px;
}
.nsemm-interior .nsemm-breadcrumb {
	font-size: 13px;
	color: var(--midnight);
	opacity: .5;
	margin-bottom: 18px;
	font-family: var(--head);
}
.nsemm-interior .nsemm-breadcrumb a {
	color: var(--blue);
	text-decoration: none;
	opacity: .8;
}
.nsemm-interior .nsemm-breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.nsemm-interior .nsemm-pg-title {
	font-family: var(--head);
	font-size: 42px;
	font-weight: 700;
	color: var(--blue);
	line-height: 1.15;
	padding: 18px 0 28px;
	max-width: 760px;
	/* The h1 inherits theme.json's huge size + heading margins by default; the
	   interior title is its own size, so reset those. */
	margin: 0;
}
.nsemm-interior .nsemm-last-updated {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--midnight);
	opacity: .55;
	font-family: var(--head);
	margin-bottom: 8px;
}
.nsemm-interior .nsemm-last-updated svg,
.nsemm-interior .nsemm-last-updated i {
	width: 14px;
	height: 14px;
	color: currentColor;
}

/* == WHITE PROSE CARD (§18) ==
   A single centred white sheet (~820px) holding the editable prose. The
   wireframe's .sandy-panel was renamed to .nsemm-card here because the canvas
   is now sandy and the card is white - keeping the old "sandy-panel" name
   would be a lie. Drop shadow via color-mix on midnight so it tracks the
   palette while matching the wireframe's rgba(0,0,0,.05). */
.nsemm-interior .nsemm-card {
	background: var(--bg);
	border-radius: var(--r-card);
	padding: 48px;
	max-width: 820px;
	margin: 0 auto 64px;
	box-shadow: 0 4px 20px color-mix(in srgb, var(--midnight) 6%, transparent);
}
/* Full-width content variant: a content group that wants the wider 1320px
   sheet (e.g. a rich content page) opts in with .nsemm-card--wide. */
.nsemm-interior .nsemm-card.nsemm-card--wide {
	max-width: 1320px;
}

/* Prose rhythm inside the card - mirrors the wireframe's .sandy-panel rules.
   Paragraphs and headings get a readable measure; we scope to the card so we
   never restyle core blocks elsewhere. */
.nsemm-interior .nsemm-card p {
	font-size: 16px;
	line-height: 1.8;
	color: var(--midnight);
	opacity: .85;
	margin-bottom: 18px;
	max-width: 760px;
}
.nsemm-interior .nsemm-card h2 {
	font-family: var(--head);
	font-size: 24px;
	color: var(--blue);
	font-weight: 700;
	margin: 32px 0 14px;
	padding-top: 6px;
	line-height: 1.2;
}
.nsemm-interior .nsemm-card h3 {
	font-family: var(--head);
	font-size: 19px;
	color: var(--blue);
	font-weight: 700;
	margin: 24px 0 10px;
	line-height: 1.25;
}
.nsemm-interior .nsemm-card ul,
.nsemm-interior .nsemm-card ol {
	max-width: 760px;
	margin: 0 0 18px 1.1em;
	line-height: 1.8;
}
.nsemm-interior .nsemm-card li {
	margin-bottom: 8px;
	opacity: .85;
}
.nsemm-interior .nsemm-card a {
	color: var(--blue);
	text-underline-offset: 3px;
}

/* == SCROLL PROGRESS BAR (theme-level; policy/blog single opt in) ==
   A thin gold bar pinned to the very top tracking read progress. The width is
   driven by title-pill.js. Hidden by default; the JS only animates it when a
   page actually carries the element. */
.nsemm-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background: var(--blue);
	z-index: 500;
	width: 0%;
	transition: width .1s linear;
	pointer-events: none;
}

/* == FLOATING PAGE-TITLE PILL (§18 shared chrome) ==
   Fades in once the page H1 scrolls out of view. Its left edge lines up with
   the floating header BAR's OUTER (border-box) left edge - i.e. the two pills
   share a vertical line down their outer left edge, NOT the logo inside the bar.

   Derived from the same gutter the header uses, so it stays responsive and
   never hard-codes a number that breaks on mobile:
     --pill-edge  : the scrolled header bar's OUTER (border-box) left edge.
       desktop  -> the inner header is box-sizing:content-box with max-width
                   1300px AND padding 0 20px, so its visible BORDER box is
                   1300 + 40 = 1340px wide, centred inside the wrapper's 16px
                   side gutter. Its outer edge is therefore
                   max(16px, (100vw-1340px)/2). Algebraically this equals the
                   16px wrapper gutter plus the centring offset, so the value
                   tracks the bar's true outer edge at every desktop width.
   The pill's left is set straight to --pill-edge (no extra inner padding), so
   it lands on the bar's outer edge rather than the logo's content start.
   --pill-edge is overridden per breakpoint below to track the header's
   responsive padding/max-width changes.

   z-index 190 sits BELOW the header (hdr-wrap is 200) so a dropped-down mega
   menu always renders in front. .suppressed wins over .visible (faded out while
   a mega menu is open). Self-positioned, body-level - it is NOT inside
   .nsemm-interior so it can never inherit the canvas. */
.nsemm-page-title-bar {
	--pill-edge: max(16px, calc((100vw - 1340px) / 2));
	position: fixed;
	top: 78px;
	left: var(--pill-edge);
	z-index: 190;
	background: var(--blue);
	color: #fff;
	font-family: var(--head);
	font-weight: 600;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 12px;
	box-shadow: 0 4px 16px color-mix(in srgb, var(--midnight) 22%, transparent);
	max-width: min(320px, 70vw);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translateX(-14px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.nsemm-page-title-bar.visible {
	opacity: 1;
	transform: translateX(0);
}
.nsemm-page-title-bar.suppressed {
	opacity: 0;
	pointer-events: none;
}

/* == RESPONSIVE == */
@media (max-width: 900px) {
	.nsemm-interior .nsemm-pg-hero {
		padding: 40px 24px 24px;
	}
	.nsemm-interior .nsemm-pg-title {
		font-size: 32px;
	}
	.nsemm-interior .nsemm-card {
		margin: 0 20px 48px;
		padding: 28px;
	}
	/* Match the mobile header pill's content start: at <=900px the scrolled
	   header is max-width calc(100% - 24px) (12px outer gutter each side) with
	   20px horizontal padding (.hdr-wrap header { padding: 12px 20px }). The
	   pill is no longer max-width-constrained, so the outer edge is the fixed
	   12px gutter, not the centred desktop calc. */
	.nsemm-page-title-bar {
		--pill-edge: 12px;
	}
}

/* == REDUCED MOTION == */
@media (prefers-reduced-motion: reduce) {
	.nsemm-page-title-bar,
	.nsemm-scroll-progress {
		transition: none !important;
	}
}