/* Elpis 2025 — block-chrome polish.
   Keyed to the classes in parts/header.html and parts/footer.html.
   Palette/fonts come from theme.json (exposed as --wp--preset--* custom props);
   this file only adds accents the block UI can't express on its own. */

/* ---------- Header ---------- */
.elpis-header { position: relative; z-index: 5; }

/* Line the header & footer content up with the ~10%-margin page sections.
   They were pinned to a fixed 1180px contentSize, so on wide screens their
   edges no longer matched the (now 80%-wide) hero/chart content. */
.elpis-header > .elpis-navrow,
.elpis-footer > .elpis-foot-row,
.elpis-footer > .elpis-foot-copy {
	max-width: min(80vw, 1600px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.elpis-brand { gap: 9px; }
.elpis-brand .wp-block-site-title,
.elpis-brand .elpis-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-weight: 500;
	font-size: 1.34rem;
	letter-spacing: 0.05em;
	white-space: nowrap;
	line-height: 1.1;
}
.elpis-brand .wp-block-site-title a,
.elpis-brand .elpis-wordmark a {
	color: var(--wp--preset--color--moon);
	text-decoration: none;
}
.elpis-brand .elpis-wordmark a:hover { color: var(--wp--preset--color--brass-soft); }

/* Header stays one tidy row: short wordmark on the left, nav + CTA on the right.
   The nav itself collapses to an overlay (hamburger) on mobile (overlayMenu:mobile);
   these rules keep the wordmark + hamburger + CTA from overflowing at small widths. */
@media (max-width: 900px) {
	.elpis-navrow { gap: 12px; }
	/* Send the hamburger (with the account/cart utilities it sits with) to the
	   far-left corner; navrow keeps its space-between, so the wordmark holds the
	   far-right. Standard phone header: menu left, brand right. */
	.elpis-navcluster { gap: 14px; order: -1; }
	/* Hide the header CTA once space is tight — it's repeated in the hero and menu,
	   and this is what was pushing off-screen on phones. !important beats WP's
	   .wp-block-buttons.is-layout-flex{display:flex}. */
	.elpis-book { display: none !important; }
}

/* Hamburger open button: WP's default icon is only two bars — draw a classic
   three-line hamburger in moon so it reads on the dark header. */
.elpis-nav .wp-block-navigation__responsive-container-open svg { display: none !important; }
.elpis-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--moon);
	width: 26px;
	height: 20px;
	padding: 0;
	position: relative;
}
.elpis-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	top: 3px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}
@media (max-width: 480px) {
	.elpis-brand .elpis-wordmark { font-size: 1.15rem; }
}
.elpis-glyph {
	margin: 0;
	line-height: 1;
	font-size: 1.12rem;
	color: var(--wp--preset--color--brass);
	opacity: 1;
}

.elpis-navcluster { gap: 26px; }

/* Navigation links: quiet moon-dim, brass underline on hover/current.
   block-library makes the __container display:flex but sets NO gap (the per-instance
   gap rule isn't always emitted), so set the item gap explicitly here. */
.elpis-nav.wp-block-navigation__container { gap: 26px; align-items: center; }
.elpis-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--moon-dim);
	text-decoration: none;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	transition: color 0.2s, border-color 0.2s;
}
.elpis-nav .wp-block-navigation-item__content:hover,
.elpis-nav .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.elpis-nav .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brass-soft);
	border-color: var(--wp--preset--color--brass);
}

/* "Book a reading" — brass pill, compact. */
.elpis-book .wp-block-button__link {
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	padding: 11px 20px;
	white-space: nowrap;
}

/* Mobile overlay panel (native Navigation block).
   WP core leaves the open overlay `background: inherit`, which resolves to a flat
   white sheet — against this dark site it reads as "a blank new page loaded"
   rather than a menu. Dress it as a deliberate full-screen menu: deep plum
   ground, cream Fraunces links, brass current/hover, a clear brass close (×).
   !important is needed to beat core's :not(.disable-default-overlay) rules. */
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: radial-gradient(120% 90% at 78% 0%,
		#3c2f59 0%, #2a2140 55%, #221a34 100%) !important;
}
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	padding-top: 12vh !important;
}
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 4px !important;
	align-items: flex-end !important;
	padding-right: 8vw !important;
}
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: var(--wp--preset--color--moon) !important;
	font-family: var(--wp--preset--font-family--fraunces) !important;
	font-size: 1.55rem !important;
	letter-spacing: 0.02em !important;
	padding: 12px 0 !important;
	border: 0 !important;
	opacity: 0.92;
}
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.current-menu-item .wp-block-navigation-item__content,
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.current_page_item .wp-block-navigation-item__content,
.elpis-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--brass-soft) !important;
	opacity: 1;
}
.elpis-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--moon) !important;
	opacity: 0.85;
	margin: 6px 8vw 0 0 !important;
}
.elpis-nav .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

/* ---------- Footer ---------- */
.elpis-footer {
	border-top: 1px solid rgba(246, 241, 231, 0.14);
	color: var(--wp--preset--color--moon-dim);
}
.elpis-foot-row { gap: 24px; }
/* footer wordmark lockup: celestial mark + serif, then a small-caps tagline
   and an italic signature — a considered logo, not console text with dots. */
.elpis-foot-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 9px;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: normal;
	font-weight: 500;
	font-size: 1.36rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--moon);
}
.elpis-foot-glyph { color: var(--wp--preset--color--brass); font-size: 0.92em; line-height: 1; }
.elpis-foot-tag {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brass-soft);
}
.elpis-foot-name {
	margin: 0;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-size: 0.98rem;
	color: var(--wp--preset--color--moon-dim);
}
/* legacy (unused after the footer restyle) */
.elpis-foot-meta { margin: 0; font-family: var(--wp--preset--font-family--manrope); font-size: 0.82rem; color: var(--wp--preset--color--moon-dim); }

.elpis-foot-right { gap: 24px; }
.elpis-foot-links { gap: 24px; }
.elpis-foot-links p { margin: 0; }
.elpis-foot-links a {
	color: var(--wp--preset--color--moon-dim);
	text-decoration: none;
	font-size: 0.82rem;
}
.elpis-foot-links a:hover { color: var(--wp--preset--color--brass-soft); }

.elpis-socials { gap: 8px; }

.elpis-foot-copy {
	margin-top: 26px;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.82rem;
	color: var(--wp--preset--color--moon-dim);
}

/* ---------- Content utilities (single / search / 404) ---------- */
.elpis-eyebrow {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic;
	font-size: 1rem;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--rose);
}
.elpis-post-meta {
	font-size: 0.82rem;
	color: var(--wp--preset--color--moon-dim);
	gap: 8px;
}
.elpis-post-meta a { color: var(--wp--preset--color--moon-dim); }