/**
 * Auberge Theme — H3VT Tours
 *
 * Recreates the look of the Auberge 3DVista tours: solid black header with the
 * orange corner arc, orange italic uppercase navigation, slate dropdown panels
 * with an orange selected state, and orange "A" icon buttons.
 *
 * Colors come from the template's CSS custom properties where possible:
 *   --h3vt-button-bg   Auberge orange (#ED8B00)
 *   --h3vt-header-bg   black
 *   --h3vt-hover       pressed orange (#EC8B01)
 *
 * Scoped to .h3vt-tour--theme-auberge
 *
 * @package H3VT_Tours
 */

.h3vt-tour--theme-auberge {
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	background: #000;

	/* Form fields read as white cards on this theme's light panels. */
	--h3vt-field-bg: #fff;
	--h3vt-field-border: #c9cbce;
	--h3vt-field-text: #1a1a1a;
}

/* ---------- Header: solid black + orange corner arc ---------- */

/*
 * No `overflow: hidden` here — it would clip the open nav dropdowns, which
 * hang below the header. The arc is inset to the header box already.
 */
.h3vt-tour--theme-auberge .h3vt-tour__header {
	background: var(--h3vt-header-bg-gradient, var(--h3vt-header-bg, #000));
	/* Clear the corner arc so the logo starts on solid black, as in the tour. */
	padding-left: 132px;
}

/* The arc is the real skin artwork, stretched to the header height. */
.h3vt-tour--theme-auberge .h3vt-tour__header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 140px;
	background: url('header-corner.png') no-repeat left top;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 0;
}

/*
 * Keep logo / nav / address above the arc. These are flex children of the
 * header, and z-index alone orders a flex item — no `position` needed. Adding
 * one here would pin the nav to `relative` and beat the `absolute` the
 * collapsed hamburger menu relies on, dropping the menu inside the header
 * instead of below it.
 */
.h3vt-tour--theme-auberge .h3vt-tour__logo,
.h3vt-tour--theme-auberge .h3vt-tour__address,
.h3vt-tour--theme-auberge .h3vt-tour__nav,
.h3vt-tour--theme-auberge .h3vt-tour__hamburger {
	z-index: 1;
}

.h3vt-tour--theme-auberge .h3vt-tour__logo img {
	max-height: 46px;
	width: auto;
}

/* ---------- Navigation: orange, italic, uppercase ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__nav-button {
	color: var(--h3vt-button-bg, #ED8B00);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-size: 15px;
	gap: 10px;
}

.h3vt-tour--theme-auberge .h3vt-tour__nav-button:hover,
.h3vt-tour--theme-auberge .h3vt-tour__nav-button:focus-visible {
	color: var(--h3vt-hover, #EC8B01);
}

.h3vt-tour--theme-auberge .h3vt-tour__nav-chevron {
	width: 12px;
	height: 12px;
}

/* Buy back header width before the address or the categories have to go. */
@media (max-width: 1600px) {
	.h3vt-tour--theme-auberge .h3vt-tour__nav-button {
		font-size: 13px;
	}
}

/* ---------- Dropdown: slate panel, orange selected row ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__dropdown {
	background: #53565A;
	border: none;
	border-radius: 0;
	padding: 0;
}

.h3vt-tour--theme-auberge .h3vt-tour__dropdown-item {
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	padding: 10px 18px;
}

.h3vt-tour--theme-auberge .h3vt-tour__dropdown-item:hover,
.h3vt-tour--theme-auberge .h3vt-tour__dropdown-item:focus-visible {
	background: var(--h3vt-dropdown-hover, var(--h3vt-hover, #EC8B01));
	color: #fff;
}

/* ---------- Nav category gallery: white panel, photo + caption ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__modal--nav .h3vt-tour__modal-content {
	background: #fff;
	border-radius: 2px;
}

/* The tour stays legible behind the gallery, as in the 3DVista tour. */
.h3vt-tour--theme-auberge .h3vt-tour__modal--nav .h3vt-tour__modal-backdrop {
	background: rgba(0, 0, 0, 0.55);
}

.h3vt-tour--theme-auberge .h3vt-tour__nav-slide-caption {
	color: #53565A;
	font-weight: 600;
}

/* Close tile sits on the photo's top-right corner, as in the tour. */
.h3vt-tour--theme-auberge .h3vt-tour__modal--nav .h3vt-tour__modal-close {
	top: 8px;
	right: 8px;
	width: 42px;
	height: 42px;
	border-radius: 2px;
	background: #fff;
	color: #1a1a1a;
	font-size: 30px;
}

.h3vt-tour--theme-auberge .h3vt-tour__modal--nav .h3vt-tour__modal-close:hover,
.h3vt-tour--theme-auberge .h3vt-tour__modal--nav .h3vt-tour__modal-close:focus-visible {
	background: var(--h3vt-button-bg, #ED8B00);
	color: #fff;
}

/* Arrows overlay the photo, so they carry their own shadow for contrast. */
.h3vt-tour--theme-auberge .h3vt-tour__nav-gallery-arrow {
	color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.65));
}

/* ---------- Slide title: white, upper-left, understated ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__slide-content {
	top: 22%;
	bottom: auto;
	left: 48px;
	max-width: 380px;
}

.h3vt-tour--theme-auberge .h3vt-tour__slide-title {
	font-size: 1.35rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
}

.h3vt-tour--theme-auberge .h3vt-tour__slide-description {
	font-size: 0.95rem;
}

/* ---------- Playback controls: white outline, orange on hover ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__control {
	border-color: rgba(255, 255, 255, 0.85);
	width: 44px;
	height: 44px;
}

.h3vt-tour--theme-auberge .h3vt-tour__control:hover,
.h3vt-tour--theme-auberge .h3vt-tour__control:focus-visible {
	background: var(--h3vt-nav-control-hover, var(--h3vt-hover, #ED8B00));
	border-color: var(--h3vt-nav-control-hover, var(--h3vt-hover, #ED8B00));
	color: #fff;
}

/* ---------- Bottom icon buttons: orange "A" mark + orange label ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon img {
	width: 64px;
	height: 64px;
}

.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon span {
	color: var(--h3vt-button-bg, #ED8B00);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.2px;
}

.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon:hover span,
.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon:focus-visible span {
	color: var(--h3vt-hover, #EC8B01);
}

.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--text {
	font-style: italic;
	font-weight: 700;
}

/* ---------- Exit intent popup: white card, slate text, orange CTA ---------- */

.h3vt-tour--theme-auberge .h3vt-tour__modal--exit .h3vt-tour__modal-content {
	background: #fff;
	border-radius: 2px;
	color: #53565A;
}

.h3vt-tour--theme-auberge .h3vt-tour__exit-headline {
	color: #1a1a1a;
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.h3vt-tour--theme-auberge .h3vt-tour__exit-message {
	opacity: 1;
}

.h3vt-tour--theme-auberge .h3vt-tour__exit-field span {
	color: #53565A;
	opacity: 1;
}

.h3vt-tour--theme-auberge .h3vt-tour__exit-submit {
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.h3vt-tour--theme-auberge .h3vt-tour__exit-dismiss {
	color: #53565A;
}

.h3vt-tour--theme-auberge .h3vt-tour__modal--exit .h3vt-tour__modal-close {
	color: #1a1a1a;
}

.h3vt-tour--theme-auberge .h3vt-tour__modal--exit .h3vt-tour__modal-close:hover,
.h3vt-tour--theme-auberge .h3vt-tour__modal--exit .h3vt-tour__modal-close:focus-visible {
	background: var(--h3vt-button-bg, #ED8B00);
	color: #fff;
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
	.h3vt-tour--theme-auberge .h3vt-tour__header {
		padding-left: 16px;
	}

	.h3vt-tour--theme-auberge .h3vt-tour__header::before {
		width: 90px;
		opacity: 0.9;
	}

	.h3vt-tour--theme-auberge .h3vt-tour__logo img {
		max-height: 44px;
	}

	.h3vt-tour--theme-auberge .h3vt-tour__slide-content {
		top: auto;
		bottom: 110px;
		left: 20px;
		right: 20px;
	}

	/* Keep the enlarged icon buttons from crowding the mobile bottom bar. */
	.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon img {
		width: 44px;
		height: 44px;
	}

	.h3vt-tour--theme-auberge .h3vt-tour__bottom-btn--icon span {
		font-size: 11px;
	}
}