/* =============================================================
   Holidaymaker Help - Main Stylesheet
   Brand tokens from HolidaymakerXP Brand Identity Guide 2026
   ============================================================= */

:root {
	/* Colours */
	--hm-pink:         #FF3366;
	--hm-pink-700:     #D9264F;
	--hm-pink-300:     #FF87A2;
	--hm-pink-50:      #FFF1F4;
	--hm-cta:          #C2185B;
	--hm-cta-hover:    #A8124E;
	--hm-navy:         #081526;
	--hm-navy-900:     #050D17;
	--hm-navy-700:     #1A2A40;
	--hm-navy-500:     #3A4A60;
	--hm-navy-300:     #677488;
	--hm-green:        #007C5F;
	--hm-green-700:    #005B45;
	--hm-green-50:     #E6F4EF;
	--hm-white:        #FFFFFF;
	--hm-paper:        #FAFAFA;
	--hm-row:          #F5F6F8;
	--hm-line:         #E5E7EB;
	--hm-line-strong:  #C9CED6;

	/* Semantic */
	--fg-1:        var(--hm-navy);
	--fg-2:        var(--hm-navy-500);
	--fg-3:        var(--hm-navy-300);
	--fg-invert:   var(--hm-white);
	--fg-accent:   var(--hm-pink);
	--fg-positive: var(--hm-green);
	--fg-negative: var(--hm-pink-700);
	--bg-1:        var(--hm-white);
	--bg-2:        var(--hm-paper);
	--bg-3:        var(--hm-row);
	--line-1:      var(--hm-line);
	--line-2:      var(--hm-line-strong);

	/* Typography */
	--font-sans:  "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--t-h1:       clamp(32px, 3.6vw, 48px);
	--t-h2:       clamp(24px, 2.6vw, 36px);
	--t-h3:       22px;
	--t-h4:       18px;
	--t-body:     16px;
	--t-small:    14px;
	--t-caption:  12px;
	--lh-tight:   1.15;
	--lh-snug:    1.3;
	--lh-normal:  1.5;
	--lh-relaxed: 1.65;
	--w-regular:  400;
	--w-medium:   500;
	--w-semi:     600;
	--w-bold:     700;

	/* Spacing */
	--sp-1:  4px;
	--sp-2:  8px;
	--sp-3:  12px;
	--sp-4:  16px;
	--sp-5:  24px;
	--sp-6:  32px;
	--sp-7:  48px;
	--sp-8:  64px;
	--sp-9:  96px;

	/* Radii */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Elevation */
	--shadow-1: 0 1px 2px rgba(8, 21, 38, 0.06);
	--shadow-2: 0 4px 12px rgba(8, 21, 38, 0.08);
	--shadow-3: 0 12px 32px rgba(8, 21, 38, 0.10);

	/* Motion */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur-fast: 120ms;
	--dur-base: 200ms;

	/* Layout */
	--content-width: 1000px;
	--wide-width: 1100px;
	--sidebar-width: 280px;
	--header-height: 64px;
}

/* =============================================================
   Reset / Base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
	font-family: var(--font-sans);
	color: var(--fg-1);
	background: var(--bg-1);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	font-size: var(--t-body);
	line-height: var(--lh-relaxed);
	font-weight: var(--w-regular);
	background: var(--bg-2);
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--fg-accent);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--hm-pink-700); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   Layout
   ============================================================= */
.hmh-wrap {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--sp-5);
}

/* =============================================================
   Header
   ============================================================= */
.hmh-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hm-navy);
	border-bottom: 1px solid var(--hm-navy-700);
	height: var(--header-height);
}

.hmh-header__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--sp-5);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
}

.hmh-header__logo {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	text-decoration: none;
}
.hmh-header__logo:hover { text-decoration: none; }

/* Future wordmark lockup (design system "Brand - future logo"):
   Poppins 700, tight tracking, pink wordmark with the XP coloured per surface. */
.hmh-logo {
	font-family: var(--font-sans);
	font-weight: var(--w-bold);
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--hm-pink);
	white-space: nowrap;
}
.hmh-logo__xp { color: var(--fg-invert); }

.hmh-header__logo .hmh-logo {
	font-size: 24px;
}

.hmh-header__logo-tag {
	font-size: var(--t-caption);
	font-weight: var(--w-semi);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--fg-invert);
	opacity: 0.6;
	padding-left: var(--sp-3);
	border-left: 1px solid var(--hm-navy-500);
}

.hmh-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.hmh-header__search {
	flex: 0 1 320px;
	max-width: 320px;
}

.hmh-header__search-form {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--hm-navy-500);
	border-radius: var(--radius-pill);
	padding: var(--sp-2) var(--sp-4);
	transition: border-color var(--dur-fast) var(--ease);
}
.hmh-header__search-form:focus-within {
	border-color: var(--hm-pink);
	outline: 2px solid rgba(255, 51, 102, 0.25);
}

.hmh-header__search-input {
	flex: 1;
	border: none;
	background: none;
	font-family: var(--font-sans);
	font-size: var(--t-small);
	color: var(--fg-invert);
	outline: none;
}
.hmh-header__search-input::placeholder { color: rgba(255, 255, 255, 0.5); }

.hmh-header__search-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
}

.hmh-header__books-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: var(--sp-2) var(--sp-5);
	border-radius: var(--radius-pill);
	background: var(--hm-cta);
	color: var(--fg-invert);
	font-size: var(--t-small);
	font-weight: var(--w-semi);
	text-decoration: none;
	transition: background var(--dur-fast) var(--ease);
}
.hmh-header__books-btn:hover {
	background: var(--hm-cta-hover);
	color: var(--fg-invert);
	text-decoration: none;
}

/* =============================================================
   Footer
   ============================================================= */
.hmh-footer {
	border-top: 1px solid var(--hm-navy-700);
	background: var(--hm-navy);
	padding: var(--sp-7) 0;
	margin-top: var(--sp-9);
}

.hmh-footer__inner {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: 0 var(--sp-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
}

.hmh-footer__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.hmh-footer__logo .hmh-logo {
	font-size: 20px;
}

.hmh-footer__copy {
	font-size: var(--t-caption);
	color: rgba(255, 255, 255, 0.6);
}
.hmh-footer__copy a { color: rgba(255, 255, 255, 0.85); }
.hmh-footer__copy a:hover { color: var(--hm-pink-300); }

/* =============================================================
   Front page - Book grid
   ============================================================= */
.hmh-home {
	padding: var(--sp-8) 0;
}

.hmh-home__intro {
	margin-bottom: var(--sp-8);
}

.hmh-home__intro h1 {
	font-size: var(--t-h1);
	font-weight: var(--w-bold);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
}

.hmh-home__intro p {
	font-size: 18px;
	color: var(--fg-2);
	max-width: 540px;
	margin: 0;
}

.hmh-books-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--sp-6);
	margin-bottom: var(--sp-8);
}

/* Hardback book styling - navy spine + crease on the left, rounded fore-edge
   on the right, page striations and a grounded shadow. */
.hmh-book-card {
	position: relative;
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-radius: 2px 9px 9px 2px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	padding-left: 16px;
	box-shadow: 3px 5px 12px rgba(8, 21, 38, 0.12);
	transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

/* Spine: navy band with a highlight + shadow crease where the cover folds. */
.hmh-book-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 16px;
	z-index: 2;
	background: linear-gradient(
		to right,
		var(--hm-navy) 0,
		var(--hm-navy-700) 10px,
		rgba(255, 255, 255, 0.22) 11px,
		rgba(8, 21, 38, 0.30) 13px,
		rgba(8, 21, 38, 0.04) 16px
	);
}

/* Fore-edge: thin striations on the right to suggest stacked pages. */
.hmh-book-card::after {
	content: "";
	position: absolute;
	top: 5px;
	bottom: 5px;
	right: 0;
	width: 5px;
	z-index: 2;
	background: repeating-linear-gradient(
		to right,
		var(--line-2) 0,
		var(--line-2) 1px,
		var(--bg-1) 1px,
		var(--bg-1) 2px
	);
}

.hmh-book-card:hover {
	box-shadow: 7px 12px 26px rgba(8, 21, 38, 0.20);
	transform: translateY(-4px) rotate(-0.4deg);
	text-decoration: none;
	color: inherit;
}

.hmh-book-card__image {
	aspect-ratio: 4/3;
	overflow: hidden;
	background: var(--bg-3);
}
.hmh-book-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hmh-book-card__body {
	padding: var(--sp-5);
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}

.hmh-book-card__title {
	font-size: 18px;
	font-weight: var(--w-semi);
	color: var(--fg-1);
	line-height: var(--lh-snug);
	margin: 0;
}

.hmh-book-card__summary {
	font-size: var(--t-small);
	color: var(--fg-2);
	margin: 0;
	line-height: var(--lh-normal);
}

.hmh-book-card__meta {
	font-size: var(--t-caption);
	color: var(--fg-3);
	margin-top: auto;
	padding-top: var(--sp-3);
}

/* =============================================================
   Featured articles
   ============================================================= */
.hmh-featured {
	margin-top: var(--sp-7);
}

.hmh-featured__heading {
	font-size: var(--t-h3);
	font-weight: var(--w-semi);
	color: var(--hm-green);
	margin: 0 0 var(--sp-5);
}

.hmh-featured__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-4);
}

.hmh-article-card {
	position: relative;
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	padding-right: calc(var(--sp-5) + var(--sp-4));
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--dur-base) var(--ease);
	display: block;
}
.hmh-article-card:hover {
	box-shadow: var(--shadow-2);
	text-decoration: none;
	color: inherit;
}

/* Brand-pink star marking the card as featured. */
.hmh-article-card::after {
	content: "\2605";
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-4);
	font-size: 15px;
	line-height: 1;
	color: var(--hm-pink);
}

.hmh-article-card__title {
	font-size: 15px;
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: 0 0 var(--sp-2);
	line-height: var(--lh-snug);
}

.hmh-article-card__excerpt {
	font-size: var(--t-small);
	color: var(--fg-2);
	margin: 0;
	line-height: var(--lh-normal);
}

/* =============================================================
   Home call to action
   ============================================================= */
.hmh-cta {
	margin-top: var(--sp-7);
	padding: var(--sp-7);
	background: var(--hm-green-50);
	border-radius: var(--radius-lg);
	text-align: center;
}

.hmh-cta__title {
	font-size: var(--t-h3);
	font-weight: var(--w-semi);
	color: var(--hm-green);
	margin: 0 0 var(--sp-4);
}

.hmh-cta__copy {
	font-size: var(--t-body);
	color: var(--fg-2);
	line-height: var(--lh-normal);
	max-width: 60ch;
	margin: 0 auto var(--sp-5);
}

.hmh-cta__copy :last-child {
	margin-bottom: 0;
}

.hmh-cta__button {
	display: inline-block;
	background: var(--hm-cta);
	color: var(--fg-invert);
	font-weight: var(--w-semi);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: background var(--dur-base) var(--ease);
}
.hmh-cta__button:hover {
	background: var(--hm-cta-hover);
	color: var(--fg-invert);
	text-decoration: none;
}

/* =============================================================
   404 / not found
   ============================================================= */
.hmh-404__inner {
	text-align: center;
	padding: var(--sp-8) var(--sp-5);
	max-width: var(--content-width);
}

.hmh-404__code {
	font-size: 64px;
	font-weight: var(--w-bold);
	line-height: 1;
	color: var(--hm-green);
	margin: 0 0 var(--sp-3);
}

.hmh-404__title {
	font-size: var(--t-h2);
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: 0 0 var(--sp-4);
}

.hmh-404__message {
	font-size: var(--t-body);
	color: var(--fg-2);
	line-height: var(--lh-normal);
	max-width: 52ch;
	margin: 0 auto var(--sp-6);
}

/* =============================================================
   Single book / chapter listing
   ============================================================= */
.hmh-book {
	padding: var(--sp-7) 0;
}

/* Empty book - no chapters or loose pages yet */
.hmh-book-empty {
	text-align: center;
	padding: var(--sp-8) var(--sp-5);
	max-width: var(--content-width);
	margin: 0 auto;
}

/* Animated D20 easter egg - tumbles in, lands on a natural 20 */
.hmh-d20 {
	display: block;
	width: 150px;
	height: 150px;
	margin: 0 auto var(--sp-5);
	overflow: visible;
}

.hmh-d20__frame {
	transform-box: fill-box;
	transform-origin: center;
	animation: hmhD20Roll 1.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes hmhD20Roll {
	0% {
		opacity: 0;
		transform: translateY(-28px) rotate(-560deg) scale(0.5);
	}
	55% {
		opacity: 1;
	}
	62% {
		transform: translateY(10px) rotate(-18deg) scale(1.06);
	}
	78% {
		transform: translateY(-5px) rotate(6deg) scale(0.98);
	}
	90% {
		transform: translateY(2px) rotate(-2deg) scale(1.01);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0) scale(1);
	}
}

.hmh-d20__spark {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: hmhD20Spark 0.6s ease-out 1.55s both;
}

@keyframes hmhD20Spark {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	60% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 0.9;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hmh-d20__frame,
	.hmh-d20__spark {
		animation: none;
	}
	.hmh-d20__spark {
		opacity: 1;
	}
}

.hmh-book-empty__title {
	font-size: var(--t-h2);
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: 0 0 var(--sp-4);
}

.hmh-book-empty__message {
	font-size: var(--t-body);
	color: var(--fg-2);
	line-height: var(--lh-normal);
	max-width: 52ch;
	margin: 0 auto;
}

.hmh-book__hero {
	width: 100%;
	aspect-ratio: 21/6;
	object-fit: cover;
	border-radius: var(--radius-lg);
	margin-bottom: var(--sp-7);
}

.hmh-book__header {
	margin-bottom: var(--sp-7);
}

.hmh-book__title {
	font-size: var(--t-h1);
	font-weight: var(--w-bold);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-3);
}

.hmh-book__summary {
	font-size: 18px;
	color: var(--fg-2);
	margin: 0;
}

.hmh-chapter-list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.hmh-chapter {
	border: 1px solid var(--line-1);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.hmh-chapter__header {
	padding: var(--sp-5) var(--sp-6);
	background: var(--bg-1);
	border-bottom: 1px solid var(--line-1);
	text-decoration: none;
	display: block;
}
.hmh-chapter__header:hover { background: var(--bg-2); text-decoration: none; }

.hmh-chapter__title {
	font-size: var(--t-h3);
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: 0 0 var(--sp-1);
}

.hmh-chapter__summary {
	font-size: var(--t-small);
	color: var(--fg-2);
	margin: 0;
}

.hmh-chapter__articles {
	padding: var(--sp-4) var(--sp-6);
	display: flex;
	flex-direction: column;
}

.hmh-chapter__article-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--line-1);
	text-decoration: none;
	color: var(--fg-1);
	font-size: 15px;
	transition: color var(--dur-fast) var(--ease);
	gap: var(--sp-4);
}
.hmh-chapter__article-link:last-child { border-bottom: none; }
.hmh-chapter__article-link:hover { color: var(--hm-pink); text-decoration: none; }

.hmh-chapter__article-excerpt {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: var(--w-regular);
	line-height: var(--lh-normal);
	color: var(--fg-2);
}

/* =============================================================
   Article tags / pills (presentational - see hmhRenderArticleTags)
   ============================================================= */
.hmh-tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
}

/* In listing links and cards the tags sit on their own row below the title. */
.hmh-tags--listing,
.hmh-tags--card {
	display: flex;
	margin-top: var(--sp-3);
}

.hmh-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--t-caption);
	font-weight: var(--w-semi);
	line-height: 1.4;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	white-space: nowrap;
	color: var(--fg-2);
	background: var(--bg-3);
}

.hmh-tag__icon {
	flex-shrink: 0;
}

.hmh-tag--internal {
	color: var(--hm-green);
	background: var(--hm-green-50);
}

/* Draft - only ever shown to logged-in users; orange to stand out. */
.hmh-tag--draft {
	color: #9A4A00;
	background: #FFEBD6;
}

/* Device + version tags */
.hmh-tag--android {
	color: var(--hm-green-700);
	background: var(--hm-green-50);
}

.hmh-tag--ios,
.hmh-tag--ipados,
.hmh-tag--macos {
	color: var(--fg-1);
	background: var(--hm-line);
}

.hmh-tag--hmcore {
	color: var(--hm-pink-700);
	background: var(--hm-pink-50);
}

.hmh-tag--seeview {
	color: #1B4F8A;
	background: #E8F1FB;
}

.hmh-tag--android-version {
	color: #0F6B6B;
	background: #E0F4F4;
}

.hmh-tag--ios-version {
	color: #5B3B8A;
	background: #F1EBFB;
}

/* Custom pastel choices */
.hmh-tag--pink {
	color: var(--hm-pink-700);
	background: var(--hm-pink-50);
}

.hmh-tag--green {
	color: var(--hm-green-700);
	background: var(--hm-green-50);
}

.hmh-tag--blue {
	color: #1B4F8A;
	background: #E8F1FB;
}

.hmh-tag--amber {
	color: #8A5A00;
	background: #FDF2DC;
}

.hmh-tag--purple {
	color: #5B3B8A;
	background: #F1EBFB;
}

.hmh-tag--teal {
	color: #0F6B6B;
	background: #E0F4F4;
}

/* =============================================================
   Single article
   ============================================================= */
.hmh-article-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-8);
	max-width: var(--content-width);
	margin: 0 auto;
	padding: var(--sp-7) var(--sp-5);
	align-items: start;
}

/* Allow the content column to shrink so wide children (e.g. comparison
   tables) scroll within their own container instead of stretching the grid. */
.hmh-article {
	min-width: 0;
}

/* Breadcrumb */
.hmh-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--t-small);
	color: var(--fg-3);
	margin-bottom: var(--sp-5);
	flex-wrap: wrap;
}

.hmh-breadcrumb__sep { color: var(--line-2); }

.hmh-breadcrumb a {
	color: var(--fg-3);
	text-decoration: none;
}
.hmh-breadcrumb a:hover { color: var(--hm-pink); text-decoration: none; }

.hmh-breadcrumb__current { color: var(--fg-2); }

/* Article header */
.hmh-article__header {
	margin-bottom: var(--sp-6);
}

.hmh-article__title {
	font-size: var(--t-h1);
	font-weight: var(--w-bold);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-4);
}

.hmh-article__meta {
	font-size: var(--t-small);
	color: var(--fg-3);
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-wrap: wrap;
}


/* Article content */
.hmh-article__content {
	color: var(--fg-1);
}

.hmh-article__content h2 {
	font-size: var(--t-h2);
	font-weight: var(--w-bold);
	color: var(--fg-1);
	margin: var(--sp-7) 0 var(--sp-4);
	line-height: var(--lh-snug);
	scroll-margin-top: calc(var(--header-height) + var(--sp-4));
}

.hmh-article__content h3 {
	font-size: var(--t-h3);
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: var(--sp-6) 0 var(--sp-3);
	scroll-margin-top: calc(var(--header-height) + var(--sp-4));
}

.hmh-article__content h4 {
	font-size: var(--t-h4);
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: var(--sp-5) 0 var(--sp-2);
}

.hmh-article__content p {
	margin: 0 0 var(--sp-4);
	line-height: var(--lh-relaxed);
}

.hmh-article__content ul,
.hmh-article__content ol {
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-6);
}

.hmh-article__content li { margin-bottom: var(--sp-2); }

.hmh-article__content a {
	color: var(--hm-pink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hmh-article__content code {
	font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.88em;
	background: var(--bg-3);
	border: 1px solid var(--line-1);
	border-radius: 4px;
	padding: 2px 6px;
}

.hmh-article__content pre {
	background: var(--hm-navy);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	overflow-x: auto;
	margin: var(--sp-5) 0;
}

.hmh-article__content pre code {
	background: none;
	border: none;
	padding: 0;
	color: var(--hm-white);
	font-size: var(--t-small);
}

.hmh-article__content blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-4) var(--sp-6);
	border-left: 4px solid var(--hm-pink);
	background: var(--bg-2);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
	color: var(--fg-2);
}

.hmh-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--t-small);
	margin: var(--sp-5) 0;
}

/* The core table block is wrapped in figure.wp-block-table - clear its margin
   so the table spacing above is the single source of truth. Let it scroll
   horizontally (like the comparison block) rather than squeezing cells to fit
   the content column. */
.hmh-article__content figure.wp-block-table {
	margin: var(--sp-5) 0;
	overflow-x: auto;
}

/* Core image block + its native caption. The caption is authored in the block
   sidebar and saved as a <figcaption class="wp-element-caption">. */
.hmh-article__content figure.wp-block-image {
	margin: var(--sp-5) 0;
}

.hmh-article__content figure.wp-block-image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.hmh-article__content figure.wp-block-image figcaption,
.hmh-article__content .wp-element-caption {
	margin-top: var(--sp-2);
	font-size: var(--t-caption);
	line-height: var(--lh-snug);
	color: var(--fg-2);
	text-align: center;
	font-style: italic;
	font-weight: var(--w-bold);
}

.hmh-article__content figure.wp-block-table table {
	margin: 0;
	/* Size to content so wide tables overflow the scroll wrapper above instead
	   of cramming into the column; min-width keeps narrow tables full-width. */
	width: max-content;
	min-width: 100%;
}

.hmh-article__content th {
	background: var(--hm-navy);
	color: var(--fg-invert);
	font-weight: var(--w-semi);
	text-align: left;
	padding: var(--sp-4) var(--sp-5);
	letter-spacing: 0.02em;
	/* Override the core block-library full grid - header carries no border. */
	border: 0;
}

.hmh-article__content td {
	padding: var(--sp-4) var(--sp-5);
	/* Override the core block-library full grid - hairline bottom rule only. */
	border: 0;
	border-bottom: 1px solid var(--line-1);
	vertical-align: top;
}

.hmh-article__content tr:nth-child(even) td { background: var(--bg-3); }

.hmh-article__content details {
	background: var(--bg-2);
	border: 1px solid var(--line-1);
	border-radius: var(--radius-md);
	margin: var(--sp-4) 0;
}

.hmh-article__content summary {
	padding: var(--sp-4) var(--sp-5);
	font-weight: var(--w-semi);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.hmh-article__content summary::before {
	content: "▶";
	font-size: 10px;
	color: var(--fg-3);
	transition: transform var(--dur-fast) var(--ease);
}
.hmh-article__content details[open] summary::before { transform: rotate(90deg); }
.hmh-article__content details > *:not(summary) { padding: 0 var(--sp-5) var(--sp-4); }
/* Self-contained colour-band blocks (e.g. the callout) keep their own padding
   and a trimmed inset margin rather than inheriting the plain-content reset. */
.hmh-article__content details > .hmh-block-callout {
	padding: var(--sp-6);
	margin: var(--sp-4) var(--sp-5);
}
/* Lists need the body inset PLUS their own indent so bullet markers stay inside
   the panel rather than spilling to the far left. */
.hmh-article__content details > ul,
.hmh-article__content details > ol {
	padding-left: calc(var(--sp-5) + var(--sp-6));
}

/* Prev/Next navigation */
.hmh-article__nav {
	display: flex;
	gap: var(--sp-4);
	margin: var(--sp-7) 0;
	padding: var(--sp-5) 0;
	border-top: 1px solid var(--line-1);
}

.hmh-article__nav-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-4) var(--sp-5);
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hmh-article__nav-link:hover {
	border-color: var(--hm-pink);
	box-shadow: var(--shadow-1);
	text-decoration: none;
	color: inherit;
}

.hmh-article__nav-link--next { text-align: right; }

.hmh-article__nav-label {
	font-size: var(--t-caption);
	color: var(--fg-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: var(--w-semi);
}

.hmh-article__nav-title {
	font-size: 15px;
	font-weight: var(--w-semi);
	color: var(--fg-1);
}

/* =============================================================
   Table of Contents (sidebar)
   ============================================================= */
/* The sidebar ToC is retired - the wide single-column layout always uses the
   folded .hmh-toc-mobile block at the top of the article instead. */
.hmh-toc {
	display: none;
}

.hmh-toc__heading {
	font-size: var(--t-small);
	font-weight: var(--w-semi);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fg-3);
	margin: 0 0 var(--sp-3);
}

.hmh-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.hmh-toc__list--sub {
	padding-left: var(--sp-4);
	margin-top: 2px;
}

.hmh-toc__link {
	display: block;
	padding: var(--sp-1) var(--sp-3);
	font-size: var(--t-small);
	color: var(--fg-2);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
	line-height: var(--lh-normal);
}
.hmh-toc__link:hover { color: var(--hm-pink); background: var(--hm-pink-50); text-decoration: none; }
.hmh-toc__link--active { color: var(--hm-pink); font-weight: var(--w-medium); }

/* Folded ToC - shown at the top of the article on all viewports, and sticks to
   the top of the viewport as the reader scrolls so the contents stay reachable
   on long pages. */
.hmh-toc-mobile {
	display: block;
	position: sticky;
	top: calc(var(--header-height) + var(--sp-3));
	z-index: 20;
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-left: 3px solid var(--hm-pink);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-2);
	margin-bottom: var(--sp-6);
}

.hmh-toc-mobile__toggle {
	width: 100%;
	background: none;
	border: none;
	padding: var(--sp-4) var(--sp-5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: var(--w-semi);
	color: var(--fg-1);
	cursor: pointer;
}

.hmh-toc-mobile__label {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
}

.hmh-toc-mobile__icon {
	color: var(--hm-pink);
	flex-shrink: 0;
}

.hmh-toc-mobile__chevron {
	color: var(--fg-3);
	flex-shrink: 0;
	transition: transform var(--dur-fast) var(--ease);
}
.hmh-toc-mobile__toggle[aria-expanded="true"] .hmh-toc-mobile__chevron {
	transform: rotate(180deg);
}

.hmh-toc-mobile__body {
	padding: 0 var(--sp-5) var(--sp-4);
	display: none;
	max-height: min(60vh, 420px);
	overflow-y: auto;
}
.hmh-toc-mobile__body.is-open { display: block; }

/* =============================================================
   Search results
   ============================================================= */
.hmh-search {
	padding: var(--sp-7) 0;
}

.hmh-search__heading {
	font-size: var(--t-h2);
	font-weight: var(--w-bold);
	margin: 0 0 var(--sp-6);
}

.hmh-search__results {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.hmh-search__result {
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-radius: var(--radius-md);
	padding: var(--sp-5);
	text-decoration: none;
	color: inherit;
	display: block;
	transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.hmh-search__result:hover {
	border-color: var(--hm-pink);
	box-shadow: var(--shadow-1);
	text-decoration: none;
	color: inherit;
}

.hmh-search__result-title {
	font-size: 17px;
	font-weight: var(--w-semi);
	color: var(--fg-1);
	margin: 0 0 var(--sp-2);
}

.hmh-search__result-excerpt {
	font-size: var(--t-small);
	color: var(--fg-2);
	margin: 0;
	line-height: var(--lh-normal);
}

.hmh-search__no-results {
	text-align: center;
	padding: var(--sp-9) 0;
	color: var(--fg-2);
}

/* =============================================================
   ACF Blocks
   ============================================================= */

/* Split Image */
.hmh-block-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-7);
	align-items: start;
	margin: var(--sp-6) 0;
}
.hmh-block-split--right { direction: rtl; }
.hmh-block-split--right > * { direction: ltr; }
.hmh-block-split--inverted { background: var(--hm-navy); color: var(--fg-invert); padding: var(--sp-7); border-radius: var(--radius-lg); }
.hmh-block-split--brand { background: var(--hm-green); color: var(--fg-invert); padding: var(--sp-7); border-radius: var(--radius-lg); }
.hmh-block-split--inverted .hmh-block-split__content :is(h2, h3, h4),
.hmh-block-split--brand .hmh-block-split__content :is(h2, h3, h4) { color: var(--fg-invert); }
.hmh-block-split__image img { border-radius: var(--radius-md); width: 100%; object-fit: cover; }
.hmh-block-split__content { font-size: 17px; line-height: var(--lh-relaxed); }
.hmh-block-split__content > :first-child { margin-top: 0; }

/* Callout */
/* Web callout - flat full-width colour band (design system "Components - web
   callout"), white text, uppercase eyebrow, with a brand Lucide icon. */
.hmh-block-callout {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	padding: var(--sp-6) var(--sp-6);
	border-radius: var(--radius-md);
	margin: var(--sp-6) 0;
	color: #fff;
}
.hmh-block-callout--info { background: var(--hm-navy); }
.hmh-block-callout--warning { background: var(--hm-pink-700); }
.hmh-block-callout--version { background: var(--hm-green); }

.hmh-block-callout__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	/* Match the eyebrow line box so the icon centres on the title row. */
	height: 16px;
}
.hmh-block-callout__icon svg {
	width: 20px;
	height: 20px;
}

.hmh-block-callout__body { flex: 1; }

.hmh-block-callout__eyebrow {
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: var(--w-semi);
	margin: 0 0 var(--sp-2);
}

/* Eyebrow + icon accent: pink on the navy band, white elsewhere. */
.hmh-block-callout--info .hmh-block-callout__eyebrow,
.hmh-block-callout--info .hmh-block-callout__icon { color: var(--hm-pink-300); }
.hmh-block-callout--warning .hmh-block-callout__eyebrow,
.hmh-block-callout--version .hmh-block-callout__eyebrow { color: #fff; }

.hmh-block-callout__content { flex: 1; }
.hmh-block-callout__content,
.hmh-block-callout__content p { color: #fff; }
.hmh-block-callout__content a { color: #fff; text-decoration: underline; }
.hmh-block-callout__content p:last-child { margin-bottom: 0; }

/* Video */
.hmh-block-video { margin: var(--sp-6) 0; }
.hmh-block-video__embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	border-radius: var(--radius-md);
	overflow: hidden;
}
.hmh-block-video__embed iframe,
.hmh-block-video__embed video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border: none;
}
.hmh-block-video__caption {
	text-align: center;
	font-size: var(--t-caption);
	color: var(--fg-3);
	margin-top: var(--sp-3);
}

/* Steps */
.hmh-block-steps { margin: var(--sp-6) 0; }
.hmh-block-steps__slider {
	position: relative;
	overflow: hidden;
	transition: height var(--dur-base) var(--ease);
}
.hmh-block-steps__track {
	display: flex;
	align-items: flex-start;
	transition: transform var(--dur-base) var(--ease);
}
.hmh-block-steps__card {
	min-width: 100%;
	background: var(--bg-1);
	border: 1px solid var(--line-1);
	border-radius: var(--radius-lg);
	padding: var(--sp-7);
}
.hmh-block-steps__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}
.hmh-block-steps__card-counter {
	font-size: var(--t-small);
	font-weight: var(--w-semi);
	color: var(--fg-2);
}
.hmh-block-steps__card-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background: var(--bg-1);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	font-size: var(--t-body);
	line-height: 1;
	cursor: pointer;
	color: var(--fg-1);
	transition: background var(--dur-fast) var(--ease);
}
.hmh-block-steps__card-btn:hover { background: var(--bg-3); }
.hmh-block-steps__card-spacer { width: 2rem; height: 2rem; }
.hmh-block-steps__card-title {
	font-size: var(--t-h3);
	font-weight: var(--w-semi);
	margin: 0 0 var(--sp-4);
}
.hmh-block-steps__card-image { margin-top: var(--sp-5); border-radius: var(--radius-md); text-align: center; }
.hmh-block-steps__card-image img {
	max-width: 600px;
	width: 100%;
	margin-inline: auto;
	border-radius: 8px;
	border: 1px solid var(--line-1);
	box-shadow: var(--shadow-1);
}
.hmh-block-steps__card--image-right .hmh-block-steps__card-body {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-6);
}
.hmh-block-steps__card--image-right .hmh-block-steps__card-text { flex: 1 1 0; min-width: 0; }
.hmh-block-steps__card--image-right .hmh-block-steps__card-image {
	flex: 0 0 auto;
	margin-top: 0;
	width: 220px;
}
.hmh-block-steps__card--image-right .hmh-block-steps__card-image img {
	max-width: 100%;
	height: auto;
}
@media (max-width: 640px) {
	.hmh-block-steps__card--image-right .hmh-block-steps__card-body { flex-direction: column; }
	.hmh-block-steps__card--image-right .hmh-block-steps__card-image { width: 100%; margin-top: var(--sp-5); }
}
.hmh-block-steps__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: var(--sp-4);
}
.hmh-block-steps__btn {
	background: var(--bg-1);
	border: 1px solid var(--line-2);
	border-radius: var(--radius-pill);
	padding: var(--sp-2) var(--sp-5);
	font-family: var(--font-sans);
	font-size: var(--t-small);
	font-weight: var(--w-semi);
	cursor: pointer;
	color: var(--fg-1);
	transition: background var(--dur-fast) var(--ease);
}
.hmh-block-steps__btn:hover { background: var(--bg-3); }
.hmh-block-steps__btn:disabled { opacity: 0.4; cursor: default; }
.hmh-block-steps__counter {
	font-size: var(--t-small);
	font-weight: var(--w-semi);
	color: var(--fg-2);
}
.hmh-block-steps__dots {
	display: flex;
	gap: var(--sp-2);
	justify-content: center;
	margin-top: var(--sp-3);
}
.hmh-block-steps__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--line-2);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--dur-fast) var(--ease);
}
.hmh-block-steps__dot.is-active { background: var(--hm-pink); }

/* Comparison */
.hmh-block-comparison { margin: var(--sp-6) 0; overflow-x: auto; }
.hmh-block-comparison table { min-width: 500px; }

/* Centre the comparison cells; keep the row-label column left-aligned. */
.hmh-block-comparison th:not(:first-child),
.hmh-block-comparison td:not(:first-child) {
	text-align: center;
	vertical-align: middle;
}

/* Vertical dividers between columns so each option is easy to follow down the row. */
.hmh-block-comparison th + th,
.hmh-block-comparison td + td {
	border-left: 1px solid var(--line-1);
}
.hmh-block-comparison thead th + th {
	border-left-color: var(--hm-navy-700);
}

.hmh-comparison__tick { color: var(--hm-green); font-size: 18px; }
.hmh-comparison__cross { color: var(--fg-negative); font-size: 18px; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 900px) {
	.hmh-block-split {
		grid-template-columns: 1fr;
	}
	.hmh-block-split--right { direction: ltr; }
}

@media (max-width: 600px) {
	.hmh-books-grid { grid-template-columns: 1fr; }
	.hmh-featured__list { grid-template-columns: 1fr; }
	.hmh-article__nav { flex-direction: column; }
	.hmh-header__search { display: none; }
}

/* =============================================================
   Gallery lightbox
   ============================================================= */
.hmh-lightbox-lock {
	overflow: hidden;
}

.hmh-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	background: rgba(8, 21, 38, 0.88);
	opacity: 0;
	transition: opacity var(--dur-base) var(--ease);
}

.hmh-lightbox.is-open {
	display: flex;
	opacity: 1;
}

.hmh-lightbox__figure {
	margin: 0;
	max-width: min(1100px, 90vw);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.hmh-lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-3);
	background: var(--bg-1);
}

.hmh-lightbox__caption {
	color: var(--fg-invert);
	font-size: 0.9rem;
	text-align: center;
	max-width: 60ch;
}

.hmh-lightbox__close,
.hmh-lightbox__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: var(--fg-invert);
	background: rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-pill);
	transition: background var(--dur-fast) var(--ease);
}

.hmh-lightbox__close:hover,
.hmh-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.hmh-lightbox__close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
}

.hmh-lightbox__nav {
	width: 52px;
	height: 52px;
}

.hmh-lightbox__icon {
	width: 50%;
	height: 50%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 600px) {
	.hmh-lightbox {
		gap: 6px;
		padding: 12px;
	}
	.hmh-lightbox__nav {
		width: 40px;
		height: 40px;
	}
}