/* wildtravel.ro - content image highlight + lightbox
   Scoped to .wt-image / .wt-figure, the classes applied to in-content images. */

/* ---------- the highlight ---------- */
.wt-image,
.wt-figure img {
	border: 1px solid green;
	box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.25);
	max-width: 100%;
	height: auto;
	cursor: zoom-in;
}

/* floats: the margin goes on whichever element is actually floated */
.wt-image.alignleft,
.wt-figure.alignleft {
	float: left;
	margin: 1em 2em 1em 0;
}

.wt-image.alignright,
.wt-figure.alignright {
	float: right;
	margin: 1em 0 1em 2em;
}

.wt-image.aligncenter,
.wt-figure.aligncenter {
	display: block;
	margin: 1em auto;
}

.wt-image.alignnone,
.wt-figure.alignnone {
	margin: 1em 0;
}

/* a figure must not double up the border on its own box */
.wt-figure {
	border: 0;
	box-shadow: none;
	max-width: 100%;
	margin: 1em 0;
}

.wt-figure figcaption,
.wt-figure .wt-credit {
	font-size: 0.82em;
	line-height: 1.45;
	opacity: 0.75;
	margin-top: 0.45em;
}

/* on phones a floated image at a fixed width breaks the column: let it go full width */
@media (max-width: 600px) {
	.wt-image.alignleft,
	.wt-image.alignright,
	.wt-figure.alignleft,
	.wt-figure.alignright {
		float: none;
		display: block;
		width: auto !important;
		max-width: 100%;
		margin: 1em 0;
	}
}

/* ---------- the lightbox ---------- */
.wtlb {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(12, 12, 12, 0.93);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.wtlb.is-open {
	opacity: 1;
	visibility: visible;
}

.wtlb__stage {
	position: relative;
	max-width: 94vw;
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
}

.wtlb__img {
	max-width: 94vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	display: block;
	border: 1px solid green;
	box-shadow: 0 10px 50px -12px rgba(0, 0, 0, 0.8);
	background: #1a1a1a;
	border-radius: 2px;
}

.wtlb__cap {
	color: #e8e8e8;
	font-size: 0.86rem;
	line-height: 1.5;
	text-align: center;
	max-width: 80ch;
	margin: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.wtlb__cap a {
	color: #9fe3b4;
}

/* controls */
.wtlb__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.wtlb__btn:hover,
.wtlb__btn:focus-visible {
	background: rgba(0, 0, 0, 0.75);
	border-color: rgba(159, 227, 180, 0.9);
	outline: none;
}

.wtlb__btn[hidden] {
	display: none;
}

.wtlb__prev { left: -64px; }
.wtlb__next { right: -64px; }

.wtlb__close {
	position: fixed;
	top: 14px;
	right: 16px;
	width: 44px;
	height: 44px;
	transform: none;
}

.wtlb__count {
	position: fixed;
	top: 20px;
	left: 20px;
	color: #cfcfcf;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

/* no room for outside arrows on narrow screens - move them inside, bottom corners */
@media (max-width: 820px) {
	.wtlb__prev,
	.wtlb__next {
		top: auto;
		bottom: 8px;
		transform: none;
	}
	.wtlb__prev { left: 10px; }
	.wtlb__next { right: 10px; }
	.wtlb__img { max-height: 70vh; }
}

@media (prefers-reduced-motion: reduce) {
	.wtlb { transition: none; }
}

/* wildtravel.ro - full-bleed hero + glass header over it.
 *
 * Mirrors the chettusia.com treatment, but wildtravel renders an ELEMENTOR header
 * template (#42651), not the wild-world theme's header.php - so the theme's own
 * transparent_header mod and its logo_transparent_image are both inert here and
 * every part of this has to be done in CSS, including the logo swap.
 *
 * Loaded from a mu-plugin, after the child theme, so the scrim override below wins
 * on cascade order without anyone editing wildworld-child/style.css.
 */

/* ---------- 1. the header floats over the hero ---------- */
.wildworld_page-wrapper { position: relative; }

.wildworld_page-wrapper > header.elementor-location-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

/* ---------- 2. the glass bar ---------- */
header.elementor-location-header > .e-con {
	background-color: transparent !important;
	position: relative;
}

header.elementor-location-header > .e-con::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	background: linear-gradient(to bottom,
		rgba(8, 32, 40, 0.42) 0%,
		rgba(8, 32, 40, 0.26) 50%,
		rgba(8, 32, 40, 0) 100%);
	/* fades the glass out downward instead of ending on a hard edge */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 38%, rgba(0, 0, 0, 0.55) 70%, transparent 100%);
}

/* 1px highlight along the very top */
header.elementor-location-header > .e-con::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 1px;
	z-index: 2;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
	pointer-events: none;
}

header.elementor-location-header > .e-con > .e-con-inner { position: relative; z-index: 1; }

/* where backdrop-filter is unsupported, fall back to a flat tint so the bar stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	header.elementor-location-header > .e-con::before {
		background: linear-gradient(to bottom, rgba(8, 32, 40, 0.72) 0%, rgba(8, 32, 40, 0.45) 100%);
	}
}

/* ---------- 3. make the bar's contents legible on a photo ---------- */
/* top-level menu items only; submenus keep their own panel styling */
header.elementor-location-header .elementor-nav-menu > li > a,
header.elementor-location-header .elementor-nav-menu > li > a:hover,
header.elementor-location-header .elementor-nav-menu > li > a:focus {
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

header.elementor-location-header .elementor-nav-menu > li > a:hover { opacity: 0.82; }

/* the dark logo is unreadable on a photo - swap to the white variant the site already has */
header.elementor-location-header .elementor-widget-image img[src*="logo-125"] {
	content: url("/wp-content/uploads/2023/01/logo-alb-125.png");
}

/* burger / toggle icon */
header.elementor-location-header .elementor-menu-toggle {
	color: #fff !important;
	background: transparent !important;
}

/* ---------- 4. the hero, full bleed and at the very top ----------
 * theme.css:2551 caps it at max-width:1280px with margin:auto and pushes it down
 * with top:70px - all three have to be beaten.
 */
.wildworld_page_title_container {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	top: 0 !important;
}

/* ---------- 5. the title sits low in the hero ---------- */
.wildworld_page_title_container > .container {
	align-items: flex-end !important;
	/* clears the floating header at the top, and lifts the title off the bottom edge */
	padding-top: 7.5rem;
	padding-bottom: 3.25rem;
}

/* ---------- 6. scrim, re-weighted for the lowered title ----------
 * The child theme adds a top-weighted scrim (faded out by 75%) for a title that used
 * to sit 30px from the top. With the title moved to the bottom it would sit in the
 * clear part, so this redefines the gradient: dark at the top for the glass bar to
 * sit on, dark again at the bottom for the title, and largely clear through the middle
 * so the photograph still reads.
 */
.wildworld_page_title_container::before {
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0.48) 0%,
		rgba(0, 0, 0, 0.16) 26%,
		rgba(0, 0, 0, 0.10) 52%,
		rgba(0, 0, 0, 0.38) 80%,
		rgba(0, 0, 0, 0.66) 100%) !important;
}

/* ---------- 7. pages with no hero still need room for the floating header ----------
 * Elementor-built pages are exempt: they lay out their own full-bleed opening section
 * (the front page does exactly this), and padding there would push it down or leave a
 * band of body colour above it. Only plain theme pages with no page-title hero get the
 * spacer, since their content would otherwise start underneath the floating bar.
 */
body:not(.elementor-page):not(:has(.wildworld_page_title_container)) .wildworld_page-wrapper {
	padding-top: 78px;
}

/* ---------- 8. narrow screens ---------- */
@media (max-width: 767px) {
	.wildworld_page_title_container > .container {
		padding-top: 6rem;
		padding-bottom: 2rem;
	}
	header.elementor-location-header > .e-con::before {
		-webkit-backdrop-filter: blur(10px) saturate(130%);
		backdrop-filter: blur(10px) saturate(130%);
	}
}