/* WordPress + plugin patches on top of the design system. */

/* Accessibility utility — hides content offscreen until keyboard-focused.
   Without this the standard "Skip to content" link from header.php renders
   visibly on every page. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
.screen-reader-text:focus {
	background-color: #fff;
	clip: auto !important;
	-webkit-clip-path: none;
	clip-path: none;
	color: #1d2327;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 8px;
	line-height: normal;
	padding: 12px 18px;
	text-decoration: none;
	top: 8px;
	width: auto;
	z-index: 100000;
}

/* Hide the legacy site title/branding placeholder when our header renders */
.site-branding { display: none; }

/* Admin bar offset for the sticky nav */
html.admin-bar .nav { top: 32px; }
@media (max-width: 782px) {
	html.admin-bar .nav { top: 46px; }
}

/* The body has a fallback class — let our design own background + colour */
body.site { background: var(--bone); color: var(--ink); }

/* Avoid Elementor's reset stripping our typography on widgets */
.hbn-page-content {
	max-width: 1320px;
	margin: 0 auto;
}

/* Pre-existing inline-style hero on single-service.php — defer to design tokens */
.hbn-single-service .hbn-service__hero {
	background: var(--aubergine) !important;
	color: var(--bone) !important;
}
.hbn-single-service .hbn-service__hero a {
	background: var(--rose) !important;
	color: var(--ink) !important;
}

/* Manage-booking page */
.hbn-manage {
	background: var(--paper);
	border-radius: 12px;
	padding: 32px !important;
	border: 1px solid var(--line-soft);
}
.hbn-manage h1 { font-family: var(--serif); font-weight: 500; font-size: 36px; line-height: 1.1; }

/* Smooth out lists from the editor */
.hbn-prose ul, .hbn-prose ol { padding-left: 1.5em; }
.hbn-prose p { color: var(--ink-2); line-height: 1.6; }

/* Single-location + simple article wrappers */
.hbn-single-location .hbn-location__hero {
	background: var(--aubergine) !important;
	color: var(--bone) !important;
}
.hbn-single-location .hbn-location__hero h1 {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1;
}

/* Default WordPress page wrapper — keep generous breathing room when no Elementor */
.hbn-fallback {
	max-width: 1100px;
	margin: 56px auto;
	padding: 0 24px;
}
.hbn-fallback .entry-title {
	font-family: var(--serif);
	font-weight: 400;
	font-size: clamp(40px, 5vw, 72px);
	line-height: 1;
	margin: 0 0 32px;
}

/* Better defaults for the magic-link manage page receipt button */
.button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 14px;
	background: var(--bone);
	color: var(--ink);
	text-decoration: none;
	transition: border-color .15s;
}
.button:hover { border-color: var(--ink); }

/* Form readability under our design */
input, textarea, select {
	background: var(--bone);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	color: var(--ink);
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--ink);
}

/* ---------- 404 ---------- */
.hbn-404 {
	background: var(--bone);
	color: var(--ink);
	padding-bottom: 96px;
}
.hbn-404__hero {
	background: var(--aubergine);
	color: var(--bone);
	padding: 112px 24px 96px;
}
.hbn-404__hero-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.hbn-404__eyebrow {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 12px;
	letter-spacing: .28em;
	text-transform: uppercase;
	opacity: .8;
	margin: 0 0 24px;
}
.hbn-404__code {
	font-family: var(--serif, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: clamp(120px, 18vw, 220px);
	line-height: .9;
	letter-spacing: -0.04em;
	margin: 0 0 8px;
	color: var(--bone);
}
.hbn-404__code em {
	font-style: italic;
	color: var(--rose, #D4A39A);
	font-weight: 400;
}
.hbn-404__title {
	font-family: var(--serif, "Cormorant Garamond", serif);
	font-weight: 400;
	font-size: clamp(26px, 3.2vw, 38px);
	line-height: 1.15;
	margin: 16px 0 16px;
	color: var(--bone);
}
.hbn-404__lead {
	margin: 0 auto 32px;
	max-width: 520px;
	opacity: .85;
	font-size: 16px;
	line-height: 1.6;
}

.hbn-404__search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto 28px;
	background: var(--bone);
	border-radius: 999px;
	padding: 6px;
	box-shadow: 0 2px 20px rgba(0,0,0,.18);
}
.hbn-404__search-input {
	flex: 1;
	background: transparent;
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	font-size: 15px;
	color: var(--ink);
}
.hbn-404__search-input:focus {
	outline: none;
	border: none;
}
.hbn-404__search-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	background: var(--aubergine);
	color: var(--bone);
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .2s, transform .15s ease;
}
.hbn-404__search-btn:hover {
	background: var(--ink);
	transform: translateY(-1px);
}
.hbn-404__search-btn .arrow { transition: transform .2s; }
.hbn-404__search-btn:hover .arrow { transform: translateX(3px); }

.hbn-404__ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 8px;
}
.hbn-404__ghost {
	color: var(--bone);
	border-color: rgba(246,239,228,.4);
	background: transparent;
}
.hbn-404__ghost:hover {
	border-color: var(--bone);
	color: var(--bone);
}

.hbn-404__suggested {
	max-width: 760px;
	margin: 64px auto 0;
	padding: 0 24px;
	text-align: center;
}
.hbn-404__suggested-label {
	font-family: var(--mono, "JetBrains Mono", monospace);
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--muted, #8a8a8a);
	margin: 0 0 20px;
}
.hbn-404__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 12px;
}
.hbn-404__links a {
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--line, #e2dcd2);
	border-radius: 999px;
	color: var(--ink);
	text-decoration: none;
	font-size: 14px;
	background: var(--bone);
	transition: border-color .15s, color .15s, background .15s;
}
.hbn-404__links a:hover {
	border-color: var(--aubergine);
	color: var(--aubergine);
}

@media (max-width: 640px) {
	.hbn-404__hero { padding: 88px 20px 72px; }
	.hbn-404__search { flex-direction: column; border-radius: 18px; padding: 10px; }
	.hbn-404__search-input { text-align: center; }
	.hbn-404__search-btn { justify-content: center; }
}