/*
Theme Name: Astra Child — DSH
Theme URI: http://127.0.0.21/
Description: Child theme for the personal hobby blog. Layout skeleton lives here; every piece of copy and imagery is edited in Elementor.
Author: DSH
Template: astra
Version: 1.2.0
Text Domain: astra-child-dsh
*/

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
	--dsh-bg: #ebe5e3;
	--dsh-paper: #ebe5e3;
	--dsh-surface: #e1dad7;
	--dsh-ink: #2b2622;
	--dsh-muted: #6a615d;
	--dsh-accent: #0b8a47;
	--dsh-accent-bright: #17a85c;
	--dsh-bar: #3e4636;
	--dsh-bar-ink: #f3ede4;
	--dsh-bar-accent: #cbae84;
	--dsh-accent-ink: #ffffff;

	--dsh-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--dsh-sans: "Inter", "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;

	--dsh-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--dsh-body: 1.0625rem;
	--dsh-small: 0.875rem;

	--dsh-gutter: clamp(20px, 4vw, 64px);
	--dsh-rail-h: 76px;
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */
body.dsh {
	background-color: var(--dsh-bg);
	color: var(--dsh-ink);
	font-family: var(--dsh-sans);
	font-size: var(--dsh-body);
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

::selection {
	background: var(--dsh-accent);
	color: var(--dsh-accent-ink);
}

body.dsh h1,
body.dsh h2,
body.dsh h3,
body.dsh h4,
body.dsh .elementor-heading-title {
	font-family: var(--dsh-serif);
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--dsh-ink);
	line-height: 1.28;
}

body.dsh h1 { line-height: 1.2; }
body.dsh p { margin: 0 0 1.2em; }

body.dsh a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

body.dsh .entry-content a:not(.elementor-button) {
	border-bottom: 1px solid rgba(43, 38, 34, 0.28);
}

body.dsh .entry-content a:not(.elementor-button):hover {
	color: var(--dsh-accent);
	border-bottom-color: currentColor;
}

body.dsh :focus-visible {
	outline: 2px solid var(--dsh-accent);
	outline-offset: 3px;
}

body.dsh img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------
   3. Page frame — take Astra's spacing out of the way
   --------------------------------------------------------------- */
body.dsh .site-content,
body.dsh .site-content .ast-container,
body.dsh #primary,
body.dsh .site-main,
body.dsh .ast-article-single,
body.dsh .entry-content {
	padding: 0;
	margin: 0;
	max-width: none;
}

body.dsh .ast-container { width: 100%; }

body.dsh .ast-plain-container,
body.dsh .ast-page-builder-template,
body.dsh .ast-separate-container {
	background-color: transparent;
	background-image: none;
}

body.dsh .entry-header { display: none; }

/* ---------------------------------------------------------------
   4. Header — solid ink bar pinned to the top
   --------------------------------------------------------------- */
#masthead {
	position: sticky;
	top: 0;
	z-index: 120;
	width: 100%;
	background: var(--dsh-bar);
	border-bottom: 4px solid var(--dsh-bar-accent);
	--rail-ink: var(--dsh-bar-ink);
}

#masthead.is-docked {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

.dsh-rail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--dsh-rail-h);
	padding: 0 var(--dsh-gutter);
	color: var(--rail-ink, var(--dsh-paper));
}

.dsh-rail .dsh-wordmark { margin: 0; }

.dsh-rail .dsh-wordmark .elementor-heading-title {
	font-family: var(--dsh-serif);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: var(--rail-ink, var(--dsh-paper));
	margin: 0;
}

.dsh-rail .dsh-wordmark a { color: inherit; }

.dsh-rail .elementor-widget-navigation-menu {
	width: auto !important;
	max-width: none;
	flex: 0 0 auto;
	margin-left: auto;
}

@media (min-width: 922px) {
	.dsh-rail .hfe-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dsh-rail .hfe-nav-menu > li { display: block; }
}

.dsh-rail .hfe-menu-item {
	display: block;
	white-space: nowrap;
	color: var(--rail-ink, var(--dsh-paper)) !important;
	font-size: 0.875rem !important;
	font-weight: 500;
	letter-spacing: 0.06em !important;
	padding: 10px 0 10px 22px !important;
	transition: color 0.18s ease, opacity 0.18s ease;
}

.dsh-rail .hfe-menu-item:hover {
	color: var(--dsh-bar-accent) !important;
}

.dsh-rail .hfe-nav-menu .current-menu-item > a {
	color: var(--dsh-bar-accent) !important;
	opacity: 1;
}

.dsh-rail .hfe-nav-menu .parent-has-child > a::after { display: none; }

/* Phone navigation shortcode widget: hidden on desktop. */
.dsh-mobile-nav { display: none; }

/* ---------------------------------------------------------------
   5. Hero
   --------------------------------------------------------------- */
.dsh-hero {
	position: relative;
	overflow: hidden;
	min-height: 100svh;
}

body.home .dsh-hero {
	min-height: calc(100svh - var(--dsh-rail-h) - 4px);
}

.dsh-hero-text {
	position: absolute;
	left: clamp(24px, 6vw, 96px);
	right: clamp(24px, 6vw, 96px);
	bottom: clamp(48px, 10vh, 110px);
	max-width: 720px;
	width: auto !important;
}

.dsh-hero-text h1,
.dsh-hero-text p {
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.32);
}

.dsh-hero-text p {
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.88);
}

/* ---------------------------------------------------------------
   6. Text blocks
   --------------------------------------------------------------- */
.dsh-narrow { max-width: 34rem; }

@media (min-width: 922px) {
	.dsh-narrow {
		margin-left: clamp(0px, 16vw, 270px) !important;
		margin-right: auto !important;
	}
}

.dsh-narrow--inline {
	margin-left: 0 !important;
	max-width: 30rem;
}

.dsh-narrow p {
	font-size: var(--dsh-body);
	line-height: 1.95;
}

.dsh-lead {
	font-family: var(--dsh-serif);
	font-size: var(--dsh-lead) !important;
	line-height: 1.8 !important;
	letter-spacing: 0.02em;
}

.dsh-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.dsh-caption {
	margin: 14px 0 0;
	font-size: var(--dsh-small);
	line-height: 1.7;
	letter-spacing: 0.02em;
	color: var(--dsh-muted);
}

.dsh-muted { color: var(--dsh-muted); }

.dsh-quote {
	font-family: var(--dsh-serif) !important;
	font-size: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem) !important;
	line-height: 1.7 !important;
	letter-spacing: 0.03em;
	color: var(--dsh-ink);
	padding: 0;
	margin: 1.8em 0 !important;
}

.dsh-next {
	display: inline-block;
	margin-top: 12px;
	font-size: 0.9375rem;
	letter-spacing: 0.04em;
}

.dsh-next a {
	border-bottom: 1px solid rgba(43, 38, 34, 0.3);
	padding-bottom: 2px;
}

.dsh-next a:hover { color: var(--dsh-accent); }

/* ---------------------------------------------------------------
   7. Cluster gallery
   --------------------------------------------------------------- */
.dsh-cluster {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: clamp(24px, 3vw, 44px);
	width: 100%;
	max-width: 1320px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.dsh-cluster > .dsh-figure {
	width: auto !important;
	margin-top: 0 !important;
	transition: transform 0.45s ease;
}

.dsh-cluster > .dsh-figure:nth-child(1) { margin-top: clamp(12px, 2vw, 24px) !important; }
.dsh-cluster > .dsh-figure:nth-child(3) { margin-top: clamp(24px, 4vw, 48px) !important; }

.dsh-figure img {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 10;
	object-fit: cover;
	filter: saturate(0.94);
}

.dsh-figure p {
	margin: 12px 0 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	letter-spacing: 0.03em;
}

.dsh-figure p strong { font-weight: 500; }

.dsh-figure p.dsh-muted {
	margin-top: 2px;
	font-size: var(--dsh-small);
	color: var(--dsh-muted);
}

.dsh-cluster > .dsh-figure:hover { transform: translateY(-6px); }

@media (prefers-reduced-motion: reduce) {
	.dsh-cluster > .dsh-figure { transition: none; }
	.dsh-cluster > .dsh-figure:hover { transform: none; }
}

/* ---------------------------------------------------------------
   8. Buttons
   --------------------------------------------------------------- */
body.dsh .elementor-button {
	background-color: var(--dsh-accent);
	color: var(--dsh-accent-ink);
	border-radius: 0;
	padding: 15px 28px;
	font-size: 0.9375rem;
	letter-spacing: 0.06em !important;
	transition: background-color 0.18s ease;
}

body.dsh .elementor-button:hover,
body.dsh .elementor-button:focus {
	background-color: var(--dsh-accent-bright);
	color: var(--dsh-accent-ink);
}

/* ---------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------- */
body.dsh #colophon,
body.dsh .site-footer {
	background: var(--dsh-bg);
}

.dsh-footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	padding: 48px var(--dsh-gutter) 40px;
	font-size: var(--dsh-small);
	color: var(--dsh-muted);
}

.dsh-footer p { margin: 0; }
.dsh-footer a { color: var(--dsh-ink); }
.dsh-footer a:hover { color: var(--dsh-accent); }

/* ---------------------------------------------------------------
   10. Phones
   --------------------------------------------------------------- */
@media (max-width: 921px) {
	body.dsh { font-size: 1rem; line-height: 1.85; }

	#masthead,
	body.home #masthead,
	body.home #masthead.is-docked {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		background: var(--dsh-bar);
	}

	.dsh-rail {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 0 !important;
		height: auto !important;
		padding: 12px var(--dsh-gutter);
		color: var(--dsh-bar-ink);
	}

	.dsh-rail .dsh-wordmark { margin: 0; }

	.dsh-rail .dsh-wordmark .elementor-heading-title {
		font-size: 1.125rem;
		color: var(--dsh-bar-ink);
	}

	.dsh-rail .elementor-widget-navigation-menu {
		display: none !important;
		width: 100% !important;
		margin: 0;
	}

	.dsh-rail .elementor-widget-shortcode {
		width: auto !important;
		margin: 0;
		flex: 0 0 auto;
	}

	/* Hamburger + dropdown panel (native <details>, no JavaScript needed). */
	/* The dropdown panel anchors to the header, not to the 44px burger box. */
	.dsh-rail,
	.dsh-rail .elementor-element,
	.dsh-rail .elementor-widget,
	.dsh-rail .elementor-widget-container,
	.dsh-mobile-nav {
		position: static !important;
	}

	.dsh-mobile-nav { display: block; }

	.dsh-burger {
		list-style: none;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-end;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin: 0 -8px 0 0;
		padding: 0 8px;
	}

	.dsh-burger::-webkit-details-marker,
	.dsh-burger::marker { display: none; content: ''; }

	.dsh-burger span {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--dsh-bar-ink);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.dsh-mobile-nav[open] .dsh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.dsh-mobile-nav[open] .dsh-burger span:nth-child(2) { opacity: 0; }
	.dsh-mobile-nav[open] .dsh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.dsh-mobile-panel {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 130;
		background: var(--dsh-bar);
		border-top: 1px solid rgba(243, 237, 228, 0.16);
		padding: 6px 0 14px;
	}

	.dsh-mobile-panel ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.dsh-mobile-panel li { margin: 0; }

	.dsh-mobile-panel a {
		display: block;
		padding: 14px var(--dsh-gutter);
		color: var(--dsh-bar-ink);
		font-size: 1rem;
		letter-spacing: 0.04em;
	}

	.dsh-mobile-panel .current-menu-item > a { color: var(--dsh-bar-accent); }

	body.home .dsh-hero { min-height: calc(100svh - 124px); }

	.dsh-hero-text { bottom: 8vh; }

	.dsh-narrow {
		max-width: none;
		margin-left: 0 !important;
	}

	.dsh-cluster {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.dsh-cluster > .dsh-figure {
		display: grid !important;
		grid-template-columns: 42% 1fr;
		gap: 16px;
		align-items: center;
		width: auto !important;
		margin-top: 0 !important;
	}

	.dsh-cluster > .dsh-figure img {
		aspect-ratio: 4 / 3;
	}

	.dsh-cluster > .dsh-figure p {
		margin: 0;
	}

	.dsh-cluster > .dsh-figure:nth-child(1),
	.dsh-cluster > .dsh-figure:nth-child(3) { margin-top: 0 !important; }

	.dsh-figure p { font-size: 0.8125rem; }

	.dsh-footer {
		flex-direction: column;
		gap: 6px;
		padding: 40px var(--dsh-gutter) 32px;
	}

	.dsh-footer .elementor-widget-text-editor p { text-align: left !important; }
}

/* Everyday Photos — two frames on deliberately different baselines. */
.dsh-photo-wide img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.dsh-photo-tall {
	margin-left: auto !important;
}

.dsh-photo-tall img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 921px) {
	.dsh-photos-intro,
	.dsh-photos-strip {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 36px !important;
	}

	.dsh-photos-intro > *,
	.dsh-photos-strip > * {
		width: 100% !important;
		margin-top: 0 !important;
	}

	.dsh-photo-tall {
	margin-left: auto !important;
}

.dsh-photo-tall img { aspect-ratio: 3 / 2; }
}
/* Centre the Everyday Hobbies intro row instead of letting it hug the left edge. */
.dsh-center-row {
	width: 100% !important;
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}