/**
 * BrewHub H3 — the luxury layer.
 *
 * Loaded last, and deliberately thin. Nothing here introduces a colour, a
 * typeface or a layout; it only refines what the components already draw.
 * Cormorant is tracked in a touch at display sizes, every section heading
 * gets a gold hairline, the focus ring becomes something a keyboard user can
 * actually see on either ground, panels sit on a deeper and softer shadow,
 * the photography — shot on different nights, in different rooms — is graded
 * to read as one set, and the bands breathe a little wider on large screens.
 *
 * House rules for this file: no positions, no layout widths (the only three
 * widths are the lengths of the gold hairlines it draws on ::before/::after),
 * no !important at all — the count is zero, not the two the brief allows —
 * nothing that could reveal a [hidden] element, and every transition it adds
 * is neutralised under prefers-reduced-motion at the foot of the file.
 */

/* Typographic polish ------------------------------------------------------ */

/*
 * Cormorant is drawn loose at text sizes and looser still when scaled to
 * display; pulling a few thousandths out of the tracking and a little out of
 * the leading is what makes a big serif line look set rather than typed.
 */
body.bh .bh-display {
	line-height: 1.07;
	letter-spacing: -0.006em;
	text-wrap: balance;
}

body.bh :is(h1, h2, h3, h4) {
	line-height: 1.13;
	letter-spacing: -0.004em;
	text-wrap: balance;
}

/* Stops the last line of a paragraph landing as a single orphaned word.
   Browsers without it simply wrap as before. */
body.bh :is(p, li, figcaption, blockquote) {
	text-wrap: pretty;
}

body.bh blockquote {
	font-style: italic;
}

/*
 * The eyebrow gains a hairline running off it — to the right when the
 * heading is ranged left, to both sides when it is centred. The rule is
 * translucent gold, so it holds on the ink ground and on a cream band alike
 * without either needing its own override.
 */
body.bh .bh-heading .bh-eyebrow {
	display: flex;
	/* Deliberately not wrapping: a wrapped rule would drop to its own line
	   and read as a stray hairline under the label. Under width pressure the
	   rules give up their own length instead, and the words wrap inside their
	   own item as they always did. */
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.85rem;
}

body.bh .bh-heading .bh-eyebrow::after {
	content: '';
	flex: 0 1 2.75rem;
	height: 1px;
	background: linear-gradient(90deg, var(--bh-gold-soft), transparent);
}

body.bh .bh-heading--center .bh-eyebrow {
	justify-content: center;
}

body.bh .bh-heading--center .bh-eyebrow::before {
	content: '';
	flex: 0 1 2.75rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--bh-gold-soft));
}

/* Gold hairline detailing under section headings --------------------------- */

body.bh .bh-heading::after {
	content: '';
	display: block;
	width: 3.25rem;
	height: 1px;
	margin-top: 1.15rem;
	background: linear-gradient(90deg, var(--bh-gold), var(--bh-gold-soft) 60%, transparent);
}

body.bh .bh-heading--center::after {
	width: 5rem;
	margin-inline: auto;
	background: linear-gradient(90deg, transparent, var(--bh-gold) 50%, transparent);
}

/* One exception: in the reviews head the heading is followed immediately by
   its lede, and a rule between the two only crowds them. */
body.bh .bh-reviews__head .bh-heading::after {
	display: none;
}

/* Buttons ----------------------------------------------------------------- */

/*
 * The theme transitions `all`, which sweeps up layout properties it never
 * meant to animate. Naming the properties keeps the hover to colour and
 * lift, and the easing — fast out of the gate, long settle — is what makes a
 * control feel expensive rather than merely animated.
 */
body.bh .bh-btn {
	transition:
		background-color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		border-color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		color 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		box-shadow 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
		transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.bh .bh-btn:hover {
	transform: translateY(-1px);
}

body.bh .bh-btn--gold:hover {
	box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.95);
}

/* The bare button is a word inside a form row, not an object on the page —
   it should not float off its baseline. */
body.bh .bh-btn--bare:hover {
	transform: none;
	box-shadow: none;
}

/* Focus ------------------------------------------------------------------- */

/*
 * The theme ships no focus-visible styling at all, and its form fields go as
 * far as `outline: none`. This is the fix: two concentric rings — an ink
 * hairline hugging the control and a gold ring outside it. On the ink ground
 * the gold carries; on a cream band the ink hairline draws the edge and the
 * gold reads against it. One ring alone would fail on one ground or the
 * other, which is exactly the trap this palette sets.
 */
body.bh :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--bh-gold);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(22, 17, 15, 0.55);
}

/* Fields already carry a gold border on focus, so their ring hugs closer and
   does not double up into a halo. */
body.bh .bh-form :is(input, select, textarea):focus-visible {
	outline-offset: 1px;
}

/* Cards and panels -------------------------------------------------------- */

/*
 * A wide, deep, heavily-offset shadow reads as air beneath the panel rather
 * than as a drop shadow behind it. The negative spread keeps it from
 * bleeding out past the corners.
 */
body.bh :is(.bh-card, .bh-clubs__card, .bh-chefcard__media, .bh-clubs__photo, .bh-menu__photo, .bh-chef__photo, .bh-single__media img, .bh-cart__panel, .bh-popup__panel) {
	box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85);
}

body.bh :is(.bh-card, .bh-faq__item) {
	transition:
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		transform 0.35s ease;
}

body.bh .bh-card:hover {
	border-color: var(--bh-gold-soft);
	box-shadow: 0 32px 62px -28px rgba(0, 0, 0, 0.9);
	transform: translateY(-2px);
}

/* The FAQ rows are the one place a hairline is the whole component, so they
   warm on hover and on open rather than moving. */
body.bh .bh-faq__item:hover,
body.bh .bh-faq__item[open] {
	border-color: var(--bh-gold-soft);
}

/* Figures ----------------------------------------------------------------- */

/*
 * Thirteen photographs, shot across different nights and different white
 * balances, have to look like one commission. A shallow warm grade over all
 * of them — a breath of sepia, saturation pulled back a hair, contrast
 * nudged up — closes the gap between the coolest and the warmest frame
 * without touching any single image's crop or aspect. The lockup and the
 * lotus are excluded: they are artwork, not photography.
 */
body.bh :is(figure, .bh-card__media, .bh-clubs__card, .bh-socialstrip__row, .bh-product__media, .bh-product__photo) img:not(.bh-lotus) {
	filter: saturate(0.97) sepia(0.06) contrast(1.02);
}

/* Refined radii: the house corner is 14px, which is soft enough to notice
   and not soft enough to feel considered. The large media surfaces step up
   together so the page reads to one radius. The circular product shots and
   the small timeline stamps are left exactly as they are. */
body.bh :is(.bh-card, .bh-clubs__photo, .bh-menu__photo, .bh-chef__photo, .bh-chefcard__media, .bh-single__media img) {
	border-radius: 18px;
}

body.bh :is(.bh-clubs__card, .bh-popup__panel) {
	border-radius: 20px;
}

/* Section rhythm ---------------------------------------------------------- */

/*
 * On a wide screen the 5.5rem bands sit closer together than the type in
 * them wants. These are only the sections whose padding is already
 * symmetrical, so nothing that was deliberately lopsided gets flattened —
 * which is why .bh-menupage is absent from the second list: its own part
 * sets 4rem over 5.5rem on purpose, and a single value here would flatten it.
 */
@media (min-width: 90em) {
	body.bh :is(.bh-products, .bh-clubs, .bh-menu, .bh-chefs, .bh-faq, .bh-reviews, .bh-adventure, .bh-reservation) {
		padding-block: 7rem;
	}

	body.bh :is(.bh-orderpage, .bh-archive, .bh-contact, .bh-chefpage, .bh-single) {
		padding-block: 6rem;
	}

	body.bh .bh-heading {
		margin-bottom: 3.25rem;
	}
}

/* Small mercies ----------------------------------------------------------- */

body.bh ::selection {
	background: var(--bh-gold);
	color: var(--bh-ink);
}

/* Reduced motion ---------------------------------------------------------- */

/*
 * The theme clamps transition durations globally; this block additionally
 * removes the displacements themselves, so a hover changes colour and
 * nothing on the page moves.
 */
@media (prefers-reduced-motion: reduce) {
	body.bh .bh-btn,
	body.bh :is(.bh-card, .bh-faq__item) {
		transition: none;
	}

	body.bh .bh-btn:hover,
	body.bh .bh-card:hover {
		transform: none;
	}
}