/* =========================================================================
   Shudhta site chrome — announcement strip, header, footer.
   Loaded on every page, so it is self-contained: it declares its own type and
   neutrals, and reads the palette tokens printed on .hd / .ft by PHP.
   COLOUR LAW: white and neutral greys only; every hue is a palette token.
   ========================================================================= */

.shudhta-announce,
.hd,
.ft {
	--font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
		"Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--font-body: "Jost", "Avenir Next", "Segoe UI", system-ui, -apple-system,
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;

	--paper: #fff;
	--muted: #6f6f6f;
	--near-black: #1a1a1a;
	--wrap: 1320px;
	--gutter: 24px;
}

.hd :where(*, *::before, *::after),
.ft :where(*, *::before, *::after) {
	box-sizing: border-box;
}
.hd :where(p, h1, h2, ul, li),
.ft :where(p, h1, h2, ul, li) {
	margin: 0;
	padding: 0;
}
.hd :where(ul),
.ft :where(ul) {
	list-style: none;
}
.hd :where(a),
.ft :where(a) {
	color: inherit;
	text-decoration: none;
}
.hd :where(a, button):focus-visible,
.ft :where(a, button):focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}
.hd .screen-reader-text,
.ft .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.hd-wrap,
.ft-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* --- ANNOUNCEMENT STRIP ---------------------------------------------- */

/* The promise ticker, scrolling, at the very top of every page. */
.shudhta-announce {
	overflow: hidden;
	width: 100%;
	background: var(--wash);
	color: var(--ink);
}
.shudhta-announce .hm-ticker-track {
	display: flex;
	width: max-content;
	animation: hm-scroll 46s linear infinite;
}
.shudhta-announce:hover .hm-ticker-track {
	animation-play-state: paused;
}
.shudhta-announce .hm-ticker-run {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}
.shudhta-announce .hm-ticker-run li {
	display: flex;
	align-items: center;
	padding: 9px 0;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}
.shudhta-announce .hm-ticker-run li::after {
	content: "·";
	margin: 0 26px;
	color: var(--accent);
}

@keyframes hm-scroll {
	from { transform: translateX(0); }
	/* Exactly one copy of the list, so the loop is seamless. */
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.shudhta-announce .hm-ticker-track {
		animation: none;
	}
}

/* --- HEADER ----------------------------------------------------------- */

.hd {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--paper);
	font-family: var(--font-body);
	color: var(--ink);
}
/* The admin bar owns the top 32px when it is present. */
.admin-bar .hd {
	top: 32px;
}

.hd-bar .hd-wrap {
	display: grid;
	/* minmax(0,…) so the side columns may shrink. Plain 1fr floors at its
	   content width and pushes the whole row past a narrow viewport. */
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 8px;
	min-height: 84px;
}
.hd-side {
	display: flex;
	align-items: center;
	gap: 4px;
}
.hd-side--end {
	justify-content: flex-end;
}

.hd-icon {
	position: relative;
	display: inline-grid;
	place-items: center;
	/* Comfortably above the 44px minimum. */
	width: 46px;
	height: 46px;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.hd .hd-icon:hover {
	background: var(--soft);
	color: var(--ink);
}
.hd-icon svg {
	width: 21px;
	height: 21px;
	display: block;
}
.hd-burger {
	display: none;
}

.hd-count {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--band);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 10px;
	line-height: 17px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.hd-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	color: var(--ink);
}
.hd-sprig {
	width: 22px;
	height: 22px;
	color: var(--accent);
	display: block;
}
.hd-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 27px;
	line-height: 1;
	letter-spacing: 0.2em;
	/* The tracking would otherwise push the word off-centre. */
	text-indent: 0.2em;
	text-transform: uppercase;
	color: var(--ink);
}
.hd-tag {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--muted);
}

.hd-nav .hd-wrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 34px;
}
.hd-nav a {
	display: inline-block;
	padding: 15px 0;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink);
	border-bottom: 2px solid transparent;
	transition: border-color 0.18s ease;
}
.hd-nav a:hover,
.hd-nav a.is-current {
	border-bottom-color: var(--accent);
}

/* --- PHONE DRAWER ------------------------------------------------------ */

.hd-scrim {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: rgb(0 0 0 / 48%);
}
.hd-scrim[hidden] {
	display: none;
}
.hd-drawer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 700;
	width: min(320px, 84vw);
	background: var(--paper);
	border-right: 1px solid var(--line);
	transform: translateX(-101%);
	transition: transform 0.25s ease;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.hd-drawer.is-open {
	transform: none;
}
.hd-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 10px 14px 20px;
	border-bottom: 1px solid var(--line);
}
.hd-drawer-title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
}
.hd-drawer-nav a {
	display: block;
	padding: 17px 20px;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 21px;
	color: var(--ink);
}
.hd-drawer-nav a[aria-current] {
	color: var(--accent);
}

/* --- FOOTER ------------------------------------------------------------ */

.ft {
	position: relative;
	margin-top: 96px;
	background: var(--band);
	color: var(--paper);
	font-family: var(--font-body);
}
.ft-ridge {
	display: block;
	width: 100%;
	height: 46px;
	/* currentColor is the band, so the ridge reads as the footer rising into
	   the page above it rather than as a separate shape. */
	color: var(--band);
	margin-top: -1px;
	position: relative;
	top: -45px;
	margin-bottom: -45px;
}

.ft-main {
	padding-block: 24px 56px;
}
.ft-main .ft-wrap {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 40px;
}

.ft-mark {
	display: flex;
	align-items: center;
	gap: 9px;
}
.ft-mark .hd-sprig {
	color: var(--paper);
	opacity: 0.9;
}
.ft-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--paper);
}
.ft-line {
	margin-top: 10px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--paper);
	opacity: 0.85;
}
.ft-blurb {
	margin-top: 14px;
	max-width: 42ch;
	font-size: 14px;
	line-height: 1.7;
	color: var(--line);
}

.ft-head {
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--paper);
	opacity: 0.75;
	margin-bottom: 16px;
}
.ft-col ul {
	display: flex;
	flex-direction: column;
	gap: 11px;
}
.ft-col a,
.ft-quiet {
	font-size: 14px;
	color: var(--line);
}
.ft-col a {
	border-bottom: 1px solid transparent;
	transition: border-color 0.18s ease, color 0.18s ease;
}
.ft .ft-col a:hover {
	color: var(--paper);
	border-bottom-color: var(--accent);
}

.ft-base {
	border-top: 1px solid var(--band-soft);
	padding-block: 20px 24px;
}
.ft-base .ft-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}
.ft-base p {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--line);
}

/* The theme's own footer still carries demo copy and is replaced by the
   above. Hidden rather than removed, so nothing else in the theme breaks.
   Its mobile bottom panel goes too: it duplicates the drawer navigation and
   still points at demo destinations. */
.et-footers-wrapper,
.et-mobile-panel-wrapper {
	display: none !important;
}

/* --- RESPONSIVE -------------------------------------------------------- */

@media (max-width: 1000px) {
	.ft-main .ft-wrap {
		grid-template-columns: 1fr 1fr;
		gap: 34px;
	}
	.ft-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 860px) {
	.hd-burger {
		display: inline-grid;
	}
	/* Below this width the row is too tight for a second line of links. */
	.hd-nav {
		display: none;
	}
	.hd-bar .hd-wrap {
		min-height: 68px;
	}
	.hd-name {
		font-size: 22px;
		letter-spacing: 0.16em;
		text-indent: 0.16em;
	}
	.hd-tag {
		font-size: 8px;
		letter-spacing: 0.2em;
	}
	.hd-sprig {
		width: 18px;
		height: 18px;
	}
}

@media (max-width: 560px) {
	.shudhta-announce,
	.hd,
	.ft {
		--gutter: 16px;
	}
	/* Four 46px targets plus the wordmark do not fit a 320px row. Search moves
	   into the drawer rather than the wordmark being shrunk to nothing. */
	.hd-search {
		display: none;
	}
	.hd-icon {
		width: 42px;
		height: 42px;
	}
	.hd-name {
		font-size: 19px;
		letter-spacing: 0.12em;
		text-indent: 0.12em;
	}
	.hd-tag {
		font-size: 7px;
		letter-spacing: 0.16em;
	}
	.ft-main .ft-wrap {
		grid-template-columns: 1fr;
	}
	.ft-base .ft-wrap {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.ft-ridge {
		height: 30px;
		top: -29px;
		margin-bottom: -29px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hd-drawer,
	.hd-icon,
	.hd-nav a,
	.ft-col a {
		transition: none;
	}
}