/* -----------------------------------------------------------
	Patrick Holcombe — base styles
	Site-wide design tokens, links, typography, and header/nav
	chrome that appears on every template. Loaded first; every
	other stylesheet builds on this one.
----------------------------------------------------------- */
:root {
	--max-width: 1400px;
	--letter-spacing: 0.04em;
	--transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	--nav-panel-inset: 1em;
	--signature-corner-radius: clamp(2.5rem, 8vw, 10rem);

	--admin-bar-inset: 0;
}

body.admin-bar {
	--admin-bar-inset: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--admin-bar-inset: 46px;
	}
}

body {
	background-color: var(--wp--preset--color--espresso);
	color: var(--wp--preset--color--cream);
}

/* ---------- Links ---------- */

a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	letter-spacing: 0.04em;

	--size: 0.35em;
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 0;
	/* space grows here on hover */
	transition: padding-left var(--transition),
		margin-right var(--transition);
}

a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--size);
	height: var(--size);
	border-radius: 50%;
	background: var(--wp--preset--color--clay);
	/* the accent dot color */
	transform: translate(-100%, -50%) scale(0);
	opacity: 0;
	transition: all var(--transition);
}

a:hover {
	color: var(--wp--preset--color--cream);
	text-decoration: none;

	--move: calc(var(--size) * 3);
	padding-left: var(--move);
	margin-right: calc(var(--move) * -1);
	/* pushes text to the side */
}

a:hover::before {
	transform: translate(0, -50%) scale(1);
	opacity: 1;
}

/* Post block link */
.wp-block-post figure a::before {
	content: none;
}

.wp-block-post figure a:hover {
	padding-left: 0;
	margin-right: 0;
}

.wp-block-post:hover .wp-block-post-title a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;

	--move: calc(var(--size) * 3);
	padding-left: var(--move);
	margin-right: calc(var(--move) * -1);
}

.wp-block-post:hover .wp-block-post-title a::before {
	transform: translate(0, -50%) scale(1);
	opacity: 1;
}

.wp-block-post img {
	transition: opacity var(--transition);
}

.wp-block-post:hover img {
	opacity: 0.85;
}

/* ---------- Typography ---------- */

.nav-overlay .wp-block-navigation-item a,
.wp-block-navigation a,
.wp-block-post-navigation a,
.post-navigation a,
.taxonomy-links a,
.wp-block-terms a,
.wp-block-query-pagination a,
.wp-block-button__link,
.wp-element-button {
	letter-spacing: var(--letter-spacing);
}


/* ---------- Blocks ---------- */
.entry-content .wp-block-group,
.editor-styles-wrapper .wp-block-group {
	padding: 0;
}

.wp-block-post-featured-image a img {
	aspect-ratio: 5/3;
}

/* ---------- Site header ---------- */
.site-header {
	inset: 0 0 auto 0;
	z-index: 46;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
}

body.home .site-header {
	position: fixed;
}

.site-header * {
	pointer-events: auto;
}

.site-logo img,
.site-logo svg {
	height: clamp(2.75rem, 5vw, 3.75rem);
	width: auto;
	display: block;
}

.site-logo {
	transition: opacity var(--transition);
}

.site-logo:hover {
	opacity: 0.8;
}

.site-logo a,
.site-logo a:hover,
.site-logo a::before {
	content: none;
	padding: 0;
	margin: 0;
	transform: none;
}

body.nav-is-open .site-header {
	pointer-events: none;
}

/* The toggle is intentionally NOT part of .site-header's own box —
	.site-header is only position:fixed on the home template, so a
	toggle positioned via its padding would scroll out of view on
	every other template once the overlay (which is always fixed)
	opens. Fixing the toggle itself, independently, keeps it in the
	same spot everywhere and at every scroll position. */
.menu-toggle {
	position: fixed;
	top: calc(var(--admin-bar-inset) + var(--wp--preset--spacing--40));
	right: var(--wp--preset--spacing--40);
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0.5rem;
	z-index: 110;
	transition: top var(--transition), right var(--transition);
}

.menu-toggle span {
	display: block;
	width: 30px;
	height: 1px;
	background: var(--wp--preset--color--cream);
	transition:
		transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
		opacity 0.25s ease,
		width 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Hover: spread the lines apart, only when menu is closed */
.menu-toggle:not([aria-expanded="true"]):hover span {
	width: 26px;
}

.menu-toggle:not([aria-expanded="true"]):hover span:nth-child(1) {
	transform: translateY(-2px);
}

.menu-toggle:not([aria-expanded="true"]):hover span:nth-child(2) {
	width: 30px;
}

.menu-toggle:not([aria-expanded="true"]):hover span:nth-child(3) {
	transform: translateY(2px);
}

/* Click: morph into X */
.menu-toggle[aria-expanded="true"] span {
	background: var(--wp--preset--color--cream);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Full-screen nav overlay: translucent white backdrop behind a black, right-hand panel */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.45);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.nav-overlay__panel {
	position: absolute;
	top: var(--nav-panel-inset);
	right: var(--nav-panel-inset);
	bottom: var(--nav-panel-inset);
	width: clamp(280px, 24vw, 380px);
	background: #000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--preset--spacing--40);
	transform: translateX(2%);
	transition: transform 0.45s ease;
}


body.admin-bar .nav-overlay__panel {
	top: calc(var(--nav-panel-inset) + var(--admin-bar-inset));
}

.nav-overlay.is-open .nav-overlay__panel {
	transform: translateX(0);
}

.nav-overlay .wp-block-navigation {
	--wp--style--block-gap: 0.75rem;
}

.nav-overlay ul.wp-block-navigation__container {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5em;
}

.nav-overlay .wp-block-navigation-item a {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--cream);
}

.nav-overlay .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--clay);
	text-decoration: none;
}

.nav-overlay__footer {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.nav-overlay__social {
	color: var(--wp--preset--color--clay);
	display: inline-flex;
	opacity: 0.85;
	/* preserve custom hover transition on links */
	transition-property: all;
}

.nav-overlay__social:hover {
	opacity: 1;
}

.nav-overlay__social svg {
	width: 20px;
	height: 20px;
}

/* The logo mark is drawn in clay elsewhere on the site; force it to
	white here so it reads against the panel's black background. */
.nav-overlay__logo img,
.nav-overlay__logo svg {
	width: clamp(2rem, 4vw, 2.5rem);
	height: auto;
	filter: brightness(0) invert(1);
}

/* ---------- Signature shape: two mirrored corner variants ----------
	`.is-style-signature-corner` rounds the bottom-left corner;
	`.signature-corner-alt` mirrors it on the top-right. Used on the
	single post navigation thumbnails. */
.is-style-signature-corner {
	display: block;
	overflow: hidden;
	border-bottom-left-radius: var(--signature-corner-radius);
}

.is-style-signature-corner img {
	border-bottom-left-radius: var(--signature-corner-radius);
}

.signature-corner-alt {
	display: block;
	overflow: hidden;
	border-top-right-radius: var(--signature-corner-radius);
}

.signature-corner-alt img {
	border-top-right-radius: var(--signature-corner-radius);
}

/* ---------- Title visibility toggle ----------
	Set from the editor via a toolbar button on the Title block (see
	inc/title-visibility.php + assets/js/editor-title-toggle.js).
	Collapses the whole title section rather than just the text, so
	no empty padded bar is left behind. */
.hide-page-title .page-title-section {
	display: none;
}