/*
 * Global component bridge.
 * Structure and functionality stay in their page modules; this final layer
 * maps the public UI to the shared design tokens.
 */

html {
	scroll-behavior: smooth;
}

body {
	background: var(--bgm-color-bg);
	color: var(--bgm-color-text);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-base);
	font-weight: var(--bgm-weight-regular);
	line-height: var(--bgm-leading-body);
	letter-spacing: var(--bgm-tracking-normal);
}

:where(h1, h2, h3, h4, h5, h6, .bgm-display) {
	color: var(--bgm-color-text);
	font-family: var(--bgm-font-heading);
	font-style: normal;
	font-weight: var(--bgm-weight-extrabold);
	text-wrap: balance;
}

:where(main p, main li) {
	text-wrap: pretty;
}

main p {
	max-width: var(--bgm-content-measure);
}

/*
 * Hero hierarchy across home, archives, detail pages and account areas.
 * .bgm-business-heading is deliberately not in this list: unlike the
 * marketing-style hero greeting on the personal account page, the business
 * dashboard is a dense, functional control panel (sidebar tabs, stat cards,
 * compact panel headings) — a hero-scale "Merhaba, {name}" here (up to 76px,
 * wrapping to 3 lines for a longer name) overwhelmed the page instead of
 * reading as a page title. business.css sets its own, smaller size below.
 */
:where(
	.bgm-hero,
	.bgm-explore-intro,
	.bgm-route-archive-hero,
	.bgm-events-hero,
	.bgm-guides-hero,
	.bgm-collections-hero,
	.bgm-route-hero,
	.bgm-guide-hero,
	.bgm-collection-hero,
	.bgm-advertise-hero,
	.bgm-promotion-hero,
	.bgm-account-hero
) h1,
.bgm-display {
	max-width: 16ch;
	font-size: var(--bgm-text-hero) !important;
	font-weight: var(--bgm-weight-extrabold) !important;
	line-height: var(--bgm-leading-hero) !important;
	letter-spacing: var(--bgm-tracking-hero) !important;
	/* A long single word (e.g. "Buluşmalarımı") has no space to break at, so
	   default overflow-wrap:normal lets the box overflow its own narrow-
	   viewport container instead of shrinking — a real 320px horizontal-
	   scroll source on account/hero pages. Only breaks mid-word when nothing
	   else fits. */
	overflow-wrap: anywhere !important;
}

/* Detail-page hero titles: preserve the approved Yellow Pencil desktop scale
   with selectors strong enough to override the shared display system. */
@media (min-width: 1101px) {
	body.single-bgm_place #bgm-place-title,
	body.single-bgm_route .bgm-route-hero h1,
	body.single-bgm_event #bgm-event-title,
	body.single-bgm_guide .bgm-guide-hero h1,
	body.single-bgm_collection .bgm-collection-hero h1 {
		font-size: 53px !important;
		line-height: 50px !important;
	}
}

/*
 * Shared section hierarchy without changing section order or markup.
 * .bgm-business-panel__heading doesn't belong in this list: every other
 * entry here is a page-level section header (archive result counts, etc.),
 * but this one repeats on every small dashboard card ("Görünürlüğünüz",
 * "Tanıtım takvimi", ...). Forcing it to section-heading scale (up to
 * 56px) blew each card title up well past business.css's own intended
 * clamp(1.5rem, 2vw, 2rem), overflowing into and overlapping the next
 * card and clipping the "Tümünü gör" link.
 */
:where(
	.bgm-section-heading,
	.bgm-discovery-heading,
	.bgm-editor-heading,
	.bgm-events-heading,
	.bgm-guides-heading,
	.bgm-flavour-heading,
	.bgm-season-heading,
	.bgm-today-heading,
	.bgm-route-section-heading,
	.bgm-place-related-heading,
	.bgm-advertise-section-heading,
	.bgm-promotion-section-heading,
	.bgm-account-panel-heading
) h2 {
	max-width: 34ch;
	font-size: var(--bgm-text-section) !important;
	font-weight: var(--bgm-weight-extrabold) !important;
	line-height: var(--bgm-leading-section) !important;
	letter-spacing: var(--bgm-tracking-section) !important;
}

/* Preserve the same scale where legacy long-form selectors are more specific. */
.bgm-place-related-heading h2.bgm-managed-text,
.bgm-route-related .bgm-route-section-heading h2.bgm-managed-text,
.bgm-event-related__header h2.bgm-managed-text,
.bgm-guide-related__header h2.bgm-managed-text,
.bgm-collection-related__header h2.bgm-managed-text,
.bgm-route-copy > h2.bgm-managed-text,
.bgm-route-flow .bgm-route-section-heading h2.bgm-managed-text,
.bgm-collection-story-copy > h2.bgm-managed-text,
.bgm-collection-flow__header h2.bgm-managed-text {
	max-width: 34ch;
	font-size: var(--bgm-text-section) !important;
	font-weight: var(--bgm-weight-extrabold) !important;
	line-height: var(--bgm-leading-section) !important;
	letter-spacing: var(--bgm-tracking-section) !important;
}

:where(
	.bgm-mood-section,
	.bgm-route-section,
	.bgm-discovery-section,
	.bgm-flavour-section,
	.bgm-editor-section,
	.bgm-events-section,
	.bgm-guides-section,
	.bgm-experience-section,
	.bgm-season-section,
	.bgm-newsletter-section,
	.bgm-route-story,
	.bgm-route-flow,
	.bgm-route-seasons,
	.bgm-route-related
) {
	padding-block: var(--bgm-section-space) !important;
}

/* Card title hierarchy. */
:where(
	.bgm-discovery-card,
	.bgm-editor-card-copy,
	.bgm-flavour-card-copy,
	.bgm-place-card-content,
	.bgm-route-card-body,
	.bgm-event-card__body,
	.bgm-guide-card__body,
	.bgm-guide-card-copy,
	.bgm-collections-card__body,
	.bgm-collection-item__body,
	.bgm-account-panel,
	.bgm-business-panel,
	.bgm-advertise-plan-card,
	.bgm-advertise-cpc-card,
	.bgm-promotion-package-card,
	.bgm-moderator-directory-card__body
) :where(h2, h3) {
	font-size: var(--bgm-text-card) !important;
	font-weight: var(--bgm-weight-bold) !important;
	line-height: var(--bgm-leading-card) !important;
	letter-spacing: var(--bgm-tracking-card) !important;
}

/* Eyebrows encode navigation and category context. */
:where(
	.bgm-eyebrow,
	.bgm-hero-eyebrow,
	.bgm-advertise-eyebrow,
	.bgm-collection-eyebrow,
	.bgm-collections-eyebrow,
	.bgm-event-eyebrow,
	.bgm-guide-eyebrow,
	.bgm-guides-eyebrow,
	.bgm-route-archive-eyebrow,
	.bgm-dialog-eyebrow,
	.bgm-managed-text--block_eyebrow,
	[class*="__eyebrow"]
) {
	color: var(--bgm-color-accent) !important;
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-2xs) !important;
	font-weight: var(--bgm-weight-bold) !important;
	letter-spacing: var(--bgm-tracking-eyebrow) !important;
	line-height: var(--bgm-leading-tight) !important;
	text-transform: uppercase !important;
}

/* Layout primitives. */
.bgm-container {
	width: min(100% - (2 * var(--bgm-gutter)), var(--bgm-container));
	margin-inline: auto;
}

.bgm-section {
	padding-block: var(--bgm-section-space);
}

/* Header and primary navigation. */
.bgm-site-header {
	border-bottom: var(--bgm-border-width) solid color-mix(in srgb, var(--bgm-color-border) 88%, transparent);
	background: rgb(var(--bgm-white-rgb) / 0.94);
	box-shadow: var(--bgm-shadow-none);
	backdrop-filter: blur(18px) saturate(125%);
}

.bgm-site-header.is-header-scrolled,
.bgm-site-header:focus-within {
	background: rgb(var(--bgm-white-rgb) / 0.98);
	box-shadow: var(--bgm-shadow-soft);
}

.bgm-wordmark {
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	gap: var(--bgm-space-2);
	color: var(--bgm-color-text);
	font-family: var(--bgm-font-sans);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: -0.055em;
	line-height: 0.8;
	text-decoration: none;
	text-transform: lowercase;
}

.bgm-wordmark__mark {
	display: grid;
	flex: 0 0 auto;
	width: 3.15rem;
	aspect-ratio: 1.25;
	place-items: center;
}

.bgm-wordmark__mark svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 4.25;
}

.bgm-wordmark__mark .bgm-wordmark__accent {
	fill: var(--bgm-color-accent);
	stroke: var(--bgm-color-accent);
}

.bgm-wordmark__type {
	display: grid;
	gap: 0.08em;
	font-family: var(--bgm-font-heading);
	font-size: 1.15rem;
	font-weight: var(--bgm-weight-bold);
	letter-spacing: -0.075em;
	line-height: 0.78;
}

.bgm-wordmark__type > span {
	display: block;
}

.bgm-wordmark:hover,
.bgm-wordmark:focus-visible {
	color: var(--bgm-color-primary);
}

.bgm-site-footer .bgm-wordmark:hover,
.bgm-site-footer .bgm-wordmark:focus-visible {
	color: var(--bgm-color-on-primary);
}

.bgm-nav-list a,
a.bgm-menu-item-link {
	color: var(--bgm-color-text);
	font-family: var(--bgm-font-sans);
	font-size: clamp(0.8125rem, 1vw, 0.875rem);
	font-weight: var(--bgm-weight-semibold);
}

.bgm-nav-list a:hover,
.bgm-nav-list a:focus-visible,
a.bgm-menu-item-link:is(:hover, :focus-visible),
.current-menu-item > a.bgm-menu-item-link {
	color: var(--bgm-color-accent);
}

.bgm-header-commercial-cta {
	min-height: var(--bgm-button-height);
	padding: var(--bgm-button-padding);
	border-color: var(--bgm-button-border);
	border-radius: var(--bgm-button-radius);
	background: var(--bgm-button-bg);
	box-shadow: var(--bgm-shadow-none);
	color: var(--bgm-button-text);
	font-size: var(--bgm-button-font-size);
	font-weight: var(--bgm-button-font-weight);
}

.bgm-header-commercial-cta .bgm-header-commercial-cta__icon {
	background: transparent;
	color: var(--bgm-button-text);
}

.bgm-header-commercial-cta:hover,
.bgm-header-commercial-cta:focus-visible {
	border-color: var(--bgm-button-bg-hover);
	background: var(--bgm-button-bg-hover);
	box-shadow: var(--bgm-shadow-soft);
	color: var(--bgm-button-text);
	transform: translateY(-1px);
}

.bgm-nav-list .bgm-nav-ad-cta a {
	min-height: var(--bgm-button-height) !important;
	padding: var(--bgm-button-padding) !important;
	border-radius: var(--bgm-button-radius) !important;
	background: var(--bgm-button-bg) !important;
	color: var(--bgm-button-text) !important;
	font-size: var(--bgm-button-font-size) !important;
	font-weight: var(--bgm-button-font-weight) !important;
}

.bgm-nav-list .bgm-nav-ad-cta a:is(:hover, :focus-visible) {
	background: var(--bgm-button-bg-hover) !important;
	box-shadow: var(--bgm-shadow-soft) !important;
	color: var(--bgm-button-text) !important;
	transform: translateY(-1px);
}

.bgm-icon-button {
	color: var(--bgm-color-text) !important;
}

.bgm-icon-button:hover,
.bgm-icon-button:focus-visible {
	background: var(--bgm-color-surface) !important;
	color: var(--bgm-color-accent) !important;
}

/* Primary and secondary actions. Icon-only controls remain circular. */
:where(
	.bgm-button,
	.bgm-hero-button,
	.bgm-event-button,
	.bgm-route-button,
	.bgm-advertise-button,
	.bgm-advertise-submit,
	.bgm-promotion-submit,
	.bgm-auth-submit,
	.bgm-place-promotion-cta,
	.bgm-flavour-empty-cta,
	.bgm-account-primary,
	.bgm-account-secondary,
	.bgm-danger-button,
	.bgm-explore-filter-actions button,
	.bgm-route-filter-actions button,
	.bgm-events-filter__actions button,
	.bgm-guides-filter__actions button,
	.bgm-collections-filter__actions button,
	.bgm-explore-filter-actions > a,
	.bgm-route-filter-actions a,
	.bgm-events-filter__actions a,
	.bgm-guides-filter__actions a,
	.bgm-collections-filter__actions a,
	.bgm-business-heading__actions a,
	.bgm-business-login-card form button,
	.bgm-business-profile-form button,
	.bgm-business-package-grid form button
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bgm-space-2);
	min-height: var(--bgm-button-height) !important;
	padding: var(--bgm-button-padding) !important;
	border: var(--bgm-border-width) solid var(--bgm-button-border) !important;
	border-radius: var(--bgm-button-radius) !important;
	background: var(--bgm-button-bg) !important;
	box-shadow: var(--bgm-shadow-none) !important;
	color: var(--bgm-button-text) !important;
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-button-font-size) !important;
	font-weight: var(--bgm-button-font-weight) !important;
	line-height: var(--bgm-leading-card) !important;
	text-decoration: none;
	transition:
		background-color var(--bgm-duration-fast) ease,
		border-color var(--bgm-duration-fast) ease,
		box-shadow var(--bgm-duration-normal) var(--bgm-ease-out),
		transform var(--bgm-duration-normal) var(--bgm-ease-out);
}

:where(
	.bgm-button,
	.bgm-hero-button,
	.bgm-event-button,
	.bgm-route-button,
	.bgm-advertise-button,
	.bgm-advertise-submit,
	.bgm-promotion-submit,
	.bgm-auth-submit,
	.bgm-place-promotion-cta,
	.bgm-flavour-empty-cta,
	.bgm-account-primary,
	.bgm-account-secondary,
	.bgm-danger-button,
	.bgm-explore-filter-actions button,
	.bgm-route-filter-actions button,
	.bgm-events-filter__actions button,
	.bgm-guides-filter__actions button,
	.bgm-collections-filter__actions button,
	.bgm-explore-filter-actions > a,
	.bgm-route-filter-actions a,
	.bgm-events-filter__actions a,
	.bgm-guides-filter__actions a,
	.bgm-collections-filter__actions a,
	.bgm-business-heading__actions a,
	.bgm-business-login-card form button,
	.bgm-business-profile-form button,
	.bgm-business-package-grid form button
):hover {
	border-color: var(--bgm-button-bg-hover) !important;
	background: var(--bgm-button-bg-hover) !important;
	box-shadow: var(--bgm-shadow-soft) !important;
	color: var(--bgm-button-text) !important;
	transform: translateY(-2px) !important;
}

/* Press feedback belongs on contact, not on release. */
:where(
	.bgm-button,
	.bgm-hero-button,
	.bgm-event-button,
	.bgm-route-button,
	.bgm-advertise-button,
	.bgm-advertise-submit,
	.bgm-promotion-submit,
	.bgm-auth-submit,
	.bgm-place-promotion-cta,
	.bgm-flavour-empty-cta,
	.bgm-account-primary,
	.bgm-account-secondary,
	.bgm-danger-button,
	.bgm-explore-filter-actions button,
	.bgm-route-filter-actions button,
	.bgm-events-filter__actions button,
	.bgm-guides-filter__actions button,
	.bgm-collections-filter__actions button,
	.bgm-explore-filter-actions > a,
	.bgm-route-filter-actions a,
	.bgm-events-filter__actions a,
	.bgm-guides-filter__actions a,
	.bgm-collections-filter__actions a,
	.bgm-business-heading__actions a,
	.bgm-business-login-card form button,
	.bgm-business-profile-form button,
	.bgm-business-package-grid form button
):active {
	transform: translateY(0) !important;
	transition-duration: var(--bgm-duration-fast) !important;
}

:where(
	.bgm-account-secondary,
	.bgm-business-heading__actions .is-secondary,
	.bgm-explore-filter-actions > a,
	.bgm-route-filter-actions a,
	.bgm-events-filter__actions a,
	.bgm-guides-filter__actions a,
	.bgm-collections-filter__actions a
) {
	border-color: var(--bgm-color-border) !important;
	background: var(--bgm-color-surface) !important;
	color: var(--bgm-color-text) !important;
}

/* Form controls. */
:where(
	input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]),
	select,
	textarea
) {
	min-height: var(--bgm-input-height) !important;
	padding: var(--bgm-input-padding) !important;
	border: var(--bgm-border-width) solid var(--bgm-input-border) !important;
	border-radius: var(--bgm-input-radius) !important;
	background: var(--bgm-input-bg) !important;
	box-shadow: none !important;
	color: var(--bgm-input-text) !important;
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-base);
	line-height: var(--bgm-leading-body);
	transition:
		border-color var(--bgm-duration-fast) ease,
		box-shadow var(--bgm-duration-fast) ease;
}

:where(
	input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"]),
	select,
	textarea
):focus {
	border-color: var(--bgm-input-border-focus) !important;
	box-shadow: var(--bgm-input-shadow-focus) !important;
	outline: 0;
}

/*
 * These five archive search fields lay an absolutely-positioned icon over
 * the input and rely on their own left padding to keep the icon clear of
 * the typed text. The blanket "padding: var(--bgm-input-padding) !important"
 * above collapses that reserved space on every input site-wide, so the icon
 * overlapped the placeholder/typed text here. Restoring each field's own
 * padding (still !important, to win the same specificity fight) keeps them
 * all on the same icon-clear pattern.
 */
.bgm-route-filter-search input {
	padding: 0 1.2rem 0 3.1rem !important;
}

.bgm-events-filter input[type="search"] {
	padding: 0.8rem 1rem 0.8rem 3.25rem !important;
}

.bgm-guides-filter input {
	padding: 0 1rem 0 3.1rem !important;
}

.bgm-collections-filter input {
	padding: .8rem var(--bgm-space-5) .8rem 3.25rem !important;
}

.bgm-explore-search input {
	padding: 0 var(--bgm-space-5) 0 3.25rem !important;
}

/*
 * The mobile compact search field is the opposite case: its own CSS wants
 * the <input> borderless and transparent, with the pill border living on
 * the wrapping <form> instead — one visible capsule around the icon+input
 * pair. The blanket border/radius/background !important above still landed
 * on the input regardless, drawing a second, smaller pill nested inside
 * the form's pill. Forcing the input back to transparent/flat restores the
 * single-capsule look.
 */
.bgm-explore-mobile-tools input {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

:where(input, textarea)::placeholder {
	color: var(--bgm-color-text-soft);
	opacity: 0.9;
}

:where(label, legend) {
	color: var(--bgm-color-text);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-semibold);
}

/* Shared card system. */
:where(
	.bgm-card,
	.bgm-discovery-card,
	.bgm-mood-card,
	.bgm-flavour-card,
	.bgm-editor-card,
	.bgm-place-card,
	.bgm-place-related-card,
	.bgm-route-card,
	.bgm-route-related-card,
	.bgm-event-card,
	.bgm-event-related-card,
	.bgm-event-sidebar-card,
	.bgm-guide-card,
	.bgm-guide-related-card,
	.bgm-guide-quick__item,
	.bgm-collections-card,
	.bgm-collection-item,
	.bgm-collection-related-card,
	.bgm-account-panel,
	.bgm-account-discovery-card,
	.bgm-auth-card,
	.bgm-business-panel,
	.bgm-business-venue,
	.bgm-business-add-venue,
	.bgm-advertise-plan-card,
	.bgm-advertise-cpc-card,
	.bgm-advertise-form-card,
	.bgm-promotion-package-card,
	.bgm-promotion-form-card,
	.bgm-newsletter-card,
	.bgm-moderator-directory-card
) {
	border: var(--bgm-border-width) solid var(--bgm-card-border) !important;
	border-radius: var(--bgm-card-radius) !important;
	background-color: var(--bgm-card-bg) !important;
	box-shadow: var(--bgm-card-shadow) !important;
	color: var(--bgm-card-text) !important;
}

/* A guide's four facts are one continuous summary panel, like venue facts. */
.bgm-guide-quick .bgm-guide-quick__item {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.bgm-guide-quick > .bgm-guide-quick__item + .bgm-guide-quick__item {
	border-inline-start: var(--bgm-border-width) solid var(--bgm-color-accent-soft) !important;
}

@media (max-width: 960px) {
	.bgm-guide-quick > .bgm-guide-quick__item:nth-child(3) {
		border-inline-start: 0 !important;
	}

	.bgm-guide-quick > .bgm-guide-quick__item:nth-child(n + 3) {
		border-top: var(--bgm-border-width) solid var(--bgm-color-accent-soft) !important;
	}
}

@media (max-width: 479px) {
	.bgm-guide-quick > .bgm-guide-quick__item + .bgm-guide-quick__item,
	.bgm-guide-quick > .bgm-guide-quick__item:nth-child(3) {
		border-inline-start: 0 !important;
		border-top: var(--bgm-border-width) solid var(--bgm-color-accent-soft) !important;
	}
}

:where(
	.bgm-card,
	.bgm-discovery-card,
	.bgm-mood-card,
	.bgm-flavour-card,
	.bgm-editor-card,
	.bgm-place-card,
	.bgm-route-card,
	.bgm-event-card,
	.bgm-guide-card,
	.bgm-collections-card,
	.bgm-collection-item,
	.bgm-account-discovery-card,
	.bgm-business-venue,
	.bgm-business-add-venue,
	.bgm-moderator-directory-card
):hover {
	border-color: color-mix(in srgb, var(--bgm-color-text) 18%, var(--bgm-color-border)) !important;
	box-shadow: var(--bgm-card-shadow-hover) !important;
	transform: translateY(-2px) !important;
}

/*
 * Clickable cards hold several internal links (media, title, CTA); :active
 * still reaches the card itself while a descendant link is pressed, so this
 * gives the whole card a brief press settle instead of just the link text.
 */
:where(
	.bgm-card,
	.bgm-discovery-card,
	.bgm-mood-card,
	.bgm-place-card,
	.bgm-route-card,
	.bgm-event-card,
	.bgm-guide-card,
	.bgm-collections-card,
	.bgm-collection-item,
	.bgm-account-discovery-card,
	.bgm-business-venue
):active {
	box-shadow: var(--bgm-card-shadow) !important;
	transform: translateY(-1px) !important;
	transition-duration: var(--bgm-duration-fast) !important;
}

:where(
	.bgm-business-kpis article.is-accent,
	.bgm-business-current-plan,
	.bgm-business-profile-card,
	.bgm-advertise-plan-card.is-selected,
	.bgm-promotion-package-card.is-selected
) {
	border-color: var(--bgm-card-priority-bg) !important;
	background: var(--bgm-card-priority-bg) !important;
	color: var(--bgm-card-priority-text) !important;
}

:where(
	.bgm-business-kpis article.is-accent,
	.bgm-business-current-plan,
	.bgm-business-profile-card,
	.bgm-advertise-plan-card.is-selected,
	.bgm-promotion-package-card.is-selected
) :where(h2, h3, p, span, strong, small, label) {
	color: inherit !important;
}

/* Badges, filters and statuses may remain compact pills. */
:where(
	.bgm-gallery-count-badge,
	.bgm-event-badge,
	.bgm-guide-card__badge,
	.bgm-collections-card__badge,
	.bgm-advertise-price-badge,
	.bgm-business-status,
	.bgm-place-card-taxonomy,
	.bgm-route-card-type
) {
	border-color: color-mix(in srgb, var(--bgm-color-accent) 24%, var(--bgm-color-border));
	border-radius: var(--bgm-badge-radius);
	background: var(--bgm-badge-bg);
	color: var(--bgm-badge-text);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-bold);
	letter-spacing: 0.04em;
}

/* Image-led event cards need a fixed, high-contrast label. */
body.home .bgm-event-lead .bgm-event-badge {
	border: var(--bgm-border-width) solid color-mix(in srgb, var(--bgm-color-surface) 72%, transparent) !important;
	background: var(--bgm-color-primary) !important;
	color: var(--bgm-color-surface) !important;
	box-shadow: 0 0.35rem 0.9rem rgb(11 38 56 / 0.24);
	font-weight: var(--bgm-weight-extrabold);
	letter-spacing: var(--bgm-tracking-eyebrow);
}

/* Home media-card metadata follows the muted ivory city label standard. */
body.home .bgm-editor-card .bgm-editor-card-copy > span,
body.home .bgm-events-section .bgm-event-lead .bgm-event-lead-copy > small,
body.home .bgm-events-section .bgm-event-lead .bgm-event-lead-copy > span,
body.home .bgm-guides-section .bgm-guide-card .bgm-guide-card-copy > span {
	color: rgb(var(--bgm-white-rgb) / 0.78) !important;
	opacity: 1 !important;
}

/*
 * .bgm-explore-filter-shell is a position/z-index wrapper, not the visible
 * filter card — explore.css already styles its child, .bgm-explore-filters
 * (and the mobile search pill inside it), as the one visible card. Including
 * the shell here gave it its own near-identical border/background, nested
 * right around that card: a redundant "box in a box" outline.
 */
:where(
	.bgm-route-archive-filter,
	.bgm-events-filter,
	.bgm-guides-filter,
	.bgm-collections-filter
) {
	border: var(--bgm-border-width) solid var(--bgm-color-border);
	border-radius: var(--bgm-card-radius);
	background: var(--bgm-color-surface);
	box-shadow: var(--bgm-shadow-soft);
}

:where(
	.bgm-explore-active-filters a,
	.bgm-route-active-filters a,
	.bgm-account-filter a
) {
	border-color: var(--bgm-color-border);
	background: var(--bgm-chip-bg);
	color: var(--bgm-chip-text);
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-sm);
	font-weight: var(--bgm-weight-semibold);
}

:where(
	.bgm-explore-active-filters a:hover,
	.bgm-route-active-filters a:hover,
	.bgm-account-filter a:hover,
	.bgm-account-filter a.is-active
) {
	border-color: var(--bgm-color-success);
	background: var(--bgm-color-success-soft);
	color: var(--bgm-color-success-hover);
}

/* Dialogs and data tables. */
.bgm-dialog {
	border: var(--bgm-border-width) solid var(--bgm-color-border);
	border-radius: var(--bgm-dialog-radius);
	background: var(--bgm-dialog-bg);
	box-shadow: var(--bgm-dialog-shadow);
}

.bgm-dialog::backdrop {
	background: rgb(var(--bgm-navy-rgb) / 0.5);
	backdrop-filter: blur(5px);
}

:where(.bgm-business-table, table) :where(th, td) {
	border-color: var(--bgm-table-border);
}

:where(.bgm-business-table, table) tbody tr:hover > * {
	background: var(--bgm-table-row-hover);
}

/* Footer. */
.bgm-site-footer {
	border-top: 0;
	background: var(--bgm-color-primary);
	color: var(--bgm-color-on-primary);
}

.bgm-site-footer :where(.bgm-wordmark, h2, p, a) {
	color: var(--bgm-color-on-primary);
}

.bgm-site-footer :where(p, a) {
	opacity: 0.72;
}

.bgm-site-footer a:hover,
.bgm-site-footer a:focus-visible {
	color: var(--bgm-color-accent);
	opacity: 1;
}

.bgm-footer-column h2,
.bgm-footer-social h2 {
	font-family: var(--bgm-font-sans);
	font-size: var(--bgm-text-2xs);
	font-weight: var(--bgm-weight-bold);
	letter-spacing: var(--bgm-tracking-eyebrow);
	text-transform: uppercase;
}

.bgm-footer-bottom {
	border-color: rgb(var(--bgm-white-rgb) / 0.16);
}

/* Links and keyboard focus. */
main :where(a:not(.bgm-button):not([class*="button"])) {
	color: var(--bgm-link-color);
}

main :where(a:not(.bgm-button):not([class*="button"])):hover {
	color: var(--bgm-link-hover);
}

/*
 * Canonical keyboard focus ring for buttons, links and card actions.
 * Wins over any per-page :focus-visible rule regardless of its own
 * specificity, so the whole site converges on one ring. Form fields keep
 * their own box-shadow-based ring (see the input/select/textarea :focus
 * rule above) and are deliberately excluded here to avoid a double ring.
 */
:where(a, button, summary):focus-visible {
	outline: var(--bgm-focus-ring-width) solid var(--bgm-focus-ring-color) !important;
	outline-offset: var(--bgm-focus-ring-offset) !important;
	box-shadow: none !important;
}

::selection {
	background: var(--bgm-color-accent-soft);
	color: var(--bgm-color-text);
}

@media (max-width: 1023px) {
	.bgm-container {
		width: min(100% - (2 * var(--bgm-gutter)), var(--bgm-container));
	}

	.bgm-primary-nav {
		background: var(--bgm-color-surface);
	}

	.bgm-mobile-commercial-actions__buttons {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.bgm-wordmark__mark {
		width: 2.7rem;
	}

	.bgm-wordmark__type {
		font-size: 1rem;
	}

	:where(
		.bgm-hero,
		.bgm-explore-intro,
		.bgm-route-archive-hero,
		.bgm-events-hero,
		.bgm-guides-hero,
		.bgm-collections-hero,
		.bgm-route-hero,
		.bgm-guide-hero,
		.bgm-collection-hero,
		.bgm-advertise-hero,
		.bgm-promotion-hero,
		.bgm-account-hero,
		.bgm-business-heading
	) h1,
	.bgm-display {
		font-size: clamp(3.625rem, 16vw, 4.75rem);
	}

	:where(
		.bgm-section-heading,
		.bgm-discovery-heading,
		.bgm-editor-heading,
		.bgm-events-heading,
		.bgm-guides-heading,
		.bgm-flavour-heading,
		.bgm-today-heading,
		.bgm-route-section-heading,
		.bgm-place-related-heading,
		.bgm-advertise-section-heading,
		.bgm-promotion-section-heading
	) h2 {
		font-size: clamp(2.625rem, 12vw, 3.5rem);
	}

	:where(
		.bgm-button,
		.bgm-hero-button,
		.bgm-event-button,
		.bgm-route-button,
		.bgm-advertise-button,
		.bgm-advertise-submit,
		.bgm-promotion-submit,
		.bgm-auth-submit
	) {
		width: auto;
	}
}

/*
 * One step further than the 767px reduction above: at this width the header
 * needs the few extra pixels back to fit a logged-in visitor's 5th action
 * icon (notification bell) without touching icon size — see the matching
 * .bgm-header-inner gap reduction in home.css. Declared after the 767px
 * block so it wins the equal-specificity overlap at ≤340px.
 */
@media (max-width: 340px) {
	.bgm-wordmark__mark {
		width: 2.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}