/**
 * Milfa Travel — "Explore Us" hero enhancement
 * ---------------------------------------------------------------
 * Scope: front-end, page ID 2938 (Explore Us) ONLY.
 * Enqueued by milfa_explore_hero_styles() in functions.php,
 * loaded after the Altair core styles (screen.css / grid.css).
 *
 * Target design: exploree-us.png — a short, wide hero band (~2.8:1),
 * white menu over the image, centred "EXPLORE US", and a flat
 * translucent dark box holding the intro copy. Nothing here changes
 * markup, links or navigation behaviour.
 */

/* ---------------------------------------------------------------
   1. Hero container — fixed-height band with a safe dark fallback
   (reference is a ~540px band, NOT a full-viewport hero)
   --------------------------------------------------------------- */
body.page-id-2938 #page_caption.hasbg.fullscreen {
	height: 560px !important;
	min-height: 0 !important;
	background-color: #0a1420;            /* deep navy instead of pure black */
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Keep the parallax image layer covering, never letterboxed */
body.page-id-2938 .parallax-block {
	background-color: #0a1420;
}
body.page-id-2938 .parallax-block .parallax-image {
	object-fit: cover;
}

/* ---------------------------------------------------------------
   2. Readability overlay — a soft, deep-blue glow at the TOP that
   fades smoothly into the image. Many stops so there's no hard
   line; the mid/lower image stays light and natural.
   --------------------------------------------------------------- */
body.page-id-2938 #page_caption .parallax_overlay_header,
body.page-id-2938 #page_caption.hasbg .parallax_overlay_header {
	background-color: transparent;
	background-image: linear-gradient(
		180deg,
		rgba(10, 28, 76, 0.86) 0%,
		rgba(11, 30, 78, 0.64) 11%,
		rgba(12, 32, 82, 0.42) 24%,
		rgba(13, 33, 86, 0.26) 42%,
		rgba(12, 30, 78, 0.16) 68%,
		rgba(9, 22, 60, 0.14) 100%
	);
	z-index: 2;
}

/* ---------------------------------------------------------------
   3. Title block — trim the theme's JS top padding a little so the
   heading + box ride higher in the band (closer to the reference),
   while still clearing the menu row.
   --------------------------------------------------------------- */
body.page-id-2938 #page_caption.hasbg.fullscreen {
	padding-top: 150px !important;
}
body.page-id-2938 #page_caption .page_title_wrapper {
	width: min(900px, 90%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	z-index: 3;
}

/* "EXPLORE US" */
body.page-id-2938 #page_caption.hasbg.fullscreen h1,
body.page-template-page-destination-php.page-id-2938 #page_caption.hasbg.fullscreen h1 {
	float: none;
	display: block;
	margin: 0 auto;
	color: #ffffff;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-weight: 800;
	font-size: clamp(2rem, 4.5vw, 4rem);
	line-height: 1.06;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Safety net: hide the auto-generated run-on sub-header on this page
   (page-destination.php already omits it from the markup for page 2938) */
body.page-id-2938 #page_caption .tour_country_subheader {
	display: none !important;
}

/* ---------------------------------------------------------------
   4. Intro box — dark navy-blue translucent "glass" panel,
   matching exploree-us.png (colour + soft shadow only).
   --------------------------------------------------------------- */
body.page-id-2938 .milfa-hero-intro {
	max-width: 620px;
	margin: 22px auto 0;
	padding: 24px 44px 28px;
	background-color: rgba(15, 35, 58, 0.72);
	border: 0;
	border-radius: 2px;
	box-shadow: 0 20px 50px -14px rgba(4, 12, 26, 0.55);
}

body.page-id-2938 .milfa-hero-intro p {
	margin: 0;
	color: #f4f6fa;
	font-family: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: 0.005em;
}

/* second line ("Professional guidance…") — white, regular, slightly smaller */
body.page-id-2938 .milfa-hero-intro p + p {
	margin-top: 18px;
	color: #eef1f6;
	font-size: clamp(0.92rem, 1vw, 1rem);
}

/* ---------------------------------------------------------------
   5. Navigation over the hero — white text
   (scoped to this page; the global navigation is untouched)
   --------------------------------------------------------------- */
/* Altair forces the menu label (wrapped in <span>) to black !important via
   its dynamic custom-css. Override it for this page, spans included. */
body.page-id-2938 #menu_wrapper div .nav > li > a,
body.page-id-2938 #menu_wrapper div .nav > li > a span,
body.page-id-2938 #menu_border_wrapper .nav > li > a,
body.page-id-2938 #menu_border_wrapper .nav > li > a span,
body.page-id-2938 #main_menu > li > a,
body.page-id-2938 #main_menu > li > a span {
	color: #ffffff !important;
}
body.page-id-2938 #menu_border_wrapper .nav > li > a,
body.page-id-2938 #main_menu > li > a {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Altair underlines the active item's <span> with a white border;
   recolour that accent to Milfa red and give it a little breathing room. */
body.page-id-2938 .top_bar.hasbg #menu_wrapper div .nav > li.current-menu-item > a span,
body.page-id-2938 .top_bar.hasbg #menu_wrapper div .nav > li.current-menu-parent > a span,
body.page-id-2938 .top_bar.hasbg #menu_wrapper div .nav > li.current-menu-ancestor > a span,
body.page-id-2938 #menu_border_wrapper .nav > li.current-menu-item > a span,
body.page-id-2938 #main_menu > li.current-menu-item > a span {
	border-color: #b63327 !important;
	padding: 10px !important;
}

/* The white contact pill / search icon are legible on any background as
   the theme ships them — left untouched so the phone number stays visible. */

/* ---------------------------------------------------------------
   6. Responsive
   --------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	body.page-id-2938 #page_caption.hasbg.fullscreen {
		height: 460px !important;
	}
	body.page-id-2938 .milfa-hero-intro {
		max-width: 88%;
		padding: 22px 32px 24px;
	}
}

@media only screen and (max-width: 767px) {
	body.page-id-2938 #page_caption.hasbg.fullscreen {
		height: 430px !important;
	}
	body.page-id-2938 #page_caption .page_title_wrapper {
		width: 90% !important;
	}
	body.page-id-2938 #page_caption.hasbg.fullscreen h1,
	body.page-template-page-destination-php.page-id-2938 #page_caption.hasbg.fullscreen h1 {
		font-size: clamp(1.8rem, 8vw, 2.6rem) !important;
		letter-spacing: 0.035em;
	}
	body.page-id-2938 .milfa-hero-intro {
		max-width: 100%;
		margin-top: 18px;
		padding: 18px 22px 20px;
	}
	body.page-id-2938 .milfa-hero-intro p {
		line-height: 1.65;
	}
}

/* ---------------------------------------------------------------
   7. Page body copy — the Altair default (13px #777) is too small
   and low-contrast for reading. Bump it on this page only.
   --------------------------------------------------------------- */
body.page-id-2938 .ppb_wrapper .page_content_wrapper > p,
body.page-id-2938 .ppb_wrapper .page_content_wrapper .two_third p,
body.page-id-2938 .ppb_wrapper .page_content_wrapper .one_third p,
body.page-id-2938 .ppb_wrapper .page_content_wrapper blockquote p,
body.page-id-2938 .ppb_wrapper .page_content_wrapper > ul li,
body.page-id-2938 .ppb_wrapper .page_content_wrapper > ol li {
	font-size: 19px;
	line-height: 1.85;
	color: #454545;
}

/* keep the reading column a comfortable width */
body.page-id-2938 .ppb_wrapper .page_content_wrapper > p {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

/* Tagline heading ("We are a passionate team…") — styles moved off the
   inline style attribute, with a little top padding. */
body.page-id-2938 .ppb_wrapper .page_content_wrapper h1.milfa-tagline,
body.page-id-2938 .ppb_wrapper .page_content_wrapper h1 {
	margin: 0;
	padding-top: 24px;
	font-size: 26px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.35;
}

/* ---------------------------------------------------------------
   8. Tighten the vertical rhythm — Altair's .one.withsmallpadding
   ships 60px top/bottom; cut the bottom and trim the top.
   --------------------------------------------------------------- */
body.page-id-2938 .ppb_wrapper .one.withsmallpadding {
	padding-top: 22px !important;
	padding-bottom: 0 !important;
}

@media only screen and (max-width: 767px) {
	body.page-id-2938 .ppb_wrapper .one.withsmallpadding {
		padding-top: 14px !important;
	}
}

@media only screen and (max-width: 767px) {
	body.page-id-2938 .ppb_wrapper .page_content_wrapper > p,
	body.page-id-2938 .ppb_wrapper .page_content_wrapper .two_third p,
	body.page-id-2938 .ppb_wrapper .page_content_wrapper .one_third p,
	body.page-id-2938 .ppb_wrapper .page_content_wrapper blockquote p {
		font-size: 17.5px;
		line-height: 1.8;
	}
}