@charset "UTF-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
}

/* Homepage hero - plain CSS, replacing Revolution Slider entirely (see
   index.php and docs/superpowers/specs/2026-08-01-hero-revslider-
   replacement-design.md). Heights snap to Bootstrap's own breakpoints
   (576/768/992/1200px) rather than RevSlider's non-standard curve -
   values were hand-picked to look visually equivalent at each tier, not
   formula-matched to RevSlider's exact numbers. */
.hero-wrap {
	position: relative;
	overflow: hidden;
	height: clamp(260px, 78vw, 340px);
}
@media (min-width: 576px) {
	.hero-wrap {
		height: 340px;
	}
}
@media (min-width: 768px) {
	.hero-wrap {
		height: 420px;
	}
}
@media (min-width: 992px) {
	.hero-wrap {
		height: 520px;
	}
}
@media (min-width: 1200px) {
	.hero-wrap {
		height: 600px;
	}
}
.hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	animation: hero-zoom 20s ease-in-out infinite alternate;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.35);
}
@keyframes hero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
	.hero-bg {
		animation: none;
	}
}
.hero-content {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	pointer-events: none;
}
.hero-content .hero-cta {
	pointer-events: auto;
}
.hero-title {
	font-family: Montserrat, "Montserrat-fallback", sans-serif;
	font-weight: 700;
	font-size: 70px;
	line-height: 1;
	color: #fff;
	margin: 0 0 18px;
}
.hero-subtitle {
	font-family: Montserrat, "Montserrat-fallback", sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 4px;
	color: #fff;
	margin: 0 0 28px;
}
/* a.btn_1 in style.css is an element+class selector (higher specificity
   than a plain .hero-cta class), so this override must match it with
   a.btn_1.hero-cta to actually win - same pattern as the .outline typo
   bug fixed elsewhere in this file. */
a.btn_1.hero-cta {
	letter-spacing: 3px;
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
}
a.btn_1.hero-cta:hover {
	background: #fff;
	color: #000;
	border-color: #fff;
}
@media (max-width: 767px) {
	.hero-content {
		transform: translateY(-10px);
	}
	.hero-title {
		font-size: 36px;
		margin-bottom: 12px;
	}
	.hero-subtitle {
		font-size: 12px;
		letter-spacing: 2px;
		margin-bottom: 18px;
		max-width: 280px;
	}
}

.badge_tripadvisor {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 220px;
	z-index: 2;
}
.badge_tripadvisor img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.badge_tripadvisor {
		top: 24px;
		left: 24px;
		width: 176px;
	}
}

/* The "Save X%" badge (badge_save, defined in style.css) sits flush at
   top:0; right:0 with no breathing room, same issue the tripadvisor
   badge had before. Nudging it inward to match. */
.img_container .badge_save {
	top: 12px;
	right: 12px;
}

/* Compact circular Tripadvisor badge for tour product-page hero banners. */
.badge_tripadvisor_circle {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 90px;
	z-index: 5;
}
.badge_tripadvisor_circle img {
	width: 100%;
	height: auto;
	display: block;
}

/* GDPR cookie consent banner (Accept/Reject) */
.cookie-consent-banner {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100000;
	background: #222;
	color: #fff;
	box-shadow: 0 -2px 10px rgba(0,0,0,.15);
	padding: 14px 0;
}
.cookie-consent-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cookie-consent-text {
	margin: 0;
	font-size: 14px;
	flex: 1 1 320px;
}
.cookie-consent-text a {
	color: #fff;
	text-decoration: underline;
}
.cookie-consent-actions {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}
/* style.css's outline-button selector has a typo ("outiline") that only
   matches correctly-spelled "outline" on <a> tags. These are real
   <button> elements (semantically correct for a JS action, not
   navigation), so give them the same outline treatment here. */
button.btn_1.outline {
	color: #555;
	background: none;
	border: 2px solid #555;
	padding: 5px 18px;
	cursor: pointer;
}
button.btn_1.outline:hover {
	color: #fff;
	background: #e04f67;
	border: 2px solid #e04f67;
}
button.btn_1 {
	cursor: pointer;
}
/* blog-post.php has no hero image behind the fixed header (unlike every
   other page), so .margin_60's normal 60px top padding isn't enough to
   clear the header's ~100px height - the header was overlapping the top
   of the post card. Bumped to clear the header plus some breathing room. */
.blog_post_wrap {
	padding-top: 140px;
}

/* Tour page banners - plain CSS, replacing parallax.js entirely (see
   docs/superpowers/specs/2026-08-01-tour-banner-parallax-removal-design.md).
   Heights are real values measured directly against production via CDP
   device-metrics override, not derived from a formula: flat 360px below
   768px width, flat 470px at/above it (matches Bootstrap's own md
   breakpoint and the old data-natural-height="470" value exactly).
   No overlay element here - .parallax-content-2's own existing
   background gradient (css/style.css) already handles text contrast. */
.tour-banner {
	position: relative;
	overflow: hidden;
	height: 360px;
}
@media (min-width: 768px) {
	.tour-banner {
		height: 470px;
	}
}
.tour-banner-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.hero-bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}