/* Shared across every public page (loaded by website/layouts/app, after the theme CSS). */

/* Tokens — Nepal's flag and its trails: night navy, rhododendron (the national flower) for actions,
   marigold reserved for altitude marks only. */
:root
{
	--night: #121a2e;
	--rhodo: #d42a47;
	--rhodo-deep: #b31f3a;
	--marigold: #f2a541;
	--glacier: #eef2f6;
	--slate: #252c3b;
	--stone: #5f677a;
	--font-display: 'Archivo', 'Arial Narrow', sans-serif;
	--font-body: 'Mukta', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html { scroll-padding-top: 120px; } /* anchor targets (#find, #top-destinations) clear the fixed header */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--font-body); font-size: 15px; color: var(--slate); }
p { font-family: var(--font-body); }

/* Display type: condensed Archivo, sentence case, tight. Used for headlines only. */
.hero_title,
.section_title h2,
.home_title,
.contact_page_title,
.find_title,
.offers_section_title,
.destination_inquiry_title,
.trip_inquiry_title,
.offer_inquiry_title,
.logo div:first-of-type
{
	font-family: var(--font-display);
	font-stretch: 75%;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.section_title h2
{
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1;
	color: var(--night);
	text-wrap: balance;
}
.section_title div,
.section_title p
{
	font-size: 17px;
	text-transform: none;
	color: var(--stone);
	margin-top: 12px;
}
.logo div:first-of-type { font-size: 28px; line-height: 0.8; }
.main_nav_item a { font-weight: 500; font-size: 15px; }

/* Signature: the altitude benchmark — a marigold summit mark and the height, set like a trail sign. */
.alt_tag
{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 9px 4px 8px;
	border-radius: 2px;
	background: rgba(18, 26, 46, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #FFFFFF;
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-shadow: none;
	white-space: nowrap;
}
.alt_tag::before
{
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 8px solid var(--marigold);
}
.alt_tag b { font-weight: 500; color: var(--marigold); }
.top_item_content .alt_tag,
.popular_item_content .alt_tag { margin-bottom: 12px; }
.top_item_price,
.popular_item_price { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.02em; }
.top_item_text,
.popular_item_title
{
	font-family: var(--font-display);
	font-stretch: 75%;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.05;
}
.destination_detail_altitude { display: flex; align-items: center; gap: 10px; color: var(--stone); font-size: 15px; margin-bottom: 18px; }

/* Hero: headline bottom-left over the photo, actions underneath. */
.hero
{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 200px 0 clamp(72px, 11vh, 128px);
	background: linear-gradient(to top, rgba(18, 26, 46, 0.88) 0%, rgba(18, 26, 46, 0.5) 45%, rgba(18, 26, 46, 0) 100%);
	color: #FFFFFF;
}
.hero_eyebrow
{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 18px;
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.88);
}
.hero_eyebrow .alt_tag { letter-spacing: 0.04em; text-transform: none; }
.hero_title
{
	max-width: 11ch;
	margin: 0;
	font-size: clamp(48px, 8vw, 120px);
	line-height: 0.9;
	color: #FFFFFF;
	text-wrap: balance;
}
/* The page's inline .home_slide { height: 100vh } outlives responsive.css's phone cap — keep slides as tall as the hero. */
.home_has_slider .home_slide { height: 100%; }
.hero_actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn_rhodo,
.btn_ghost
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	border-radius: 2px;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn_rhodo { background: var(--rhodo); color: #FFFFFF; border: 0; }
.btn_rhodo:hover, .btn_rhodo:focus-visible { background: var(--rhodo-deep); color: #FFFFFF; text-decoration: none; }
.btn_ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); color: #FFFFFF; }
.btn_ghost:hover, .btn_ghost:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--night); text-decoration: none; }
.hero :focus-visible { outline-color: #FFFFFF; }

@media (max-width: 575px)
{
	.hero { padding-top: 140px; padding-bottom: 76px; }
	.hero_title { max-width: none; }
	.hero_actions a { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: no-preference)
{
	.hero_eyebrow, .hero_title, .hero_actions { animation: hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
	.hero_title { animation-delay: 0.08s; }
	.hero_actions { animation-delay: 0.16s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }

/* The hamburger is a real <button> now — strip native button chrome, keep the theme's sizing. */
button.hamburger { background: none; border: 0; line-height: 1; }
a.logo, a.logo:hover { display: block; text-decoration: none; }
.logo_image img { height: auto; max-height: 100%; object-fit: contain; }

/* width/height attributes reserve space (no layout shift); keep the rendered ratio fluid. */
.about_image img, .last_logo img { height: auto; }

:focus-visible { outline: 2px solid #d42a47; outline-offset: 3px; }
#main-content:focus { outline: none; }
.skip-link:focus
{
	position: fixed; top: 12px; left: 12px; z-index: 2000;
	padding: 10px 18px; border-radius: 4px;
	background: #FFFFFF; color: var(--night); font-weight: 600;
}

/* Footer social links */
.footer_social { display: flex; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.footer_social a
{
	display: flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,0.08); color: #FFFFFF; font-size: 16px;
	transition: background 0.2s ease;
}
.footer_social a:hover { background: #d42a47; color: #FFFFFF; }
address.footer_contact_blurb { font-style: normal; }

/* Floating contact buttons (website/partials/contact-buttons) */
.contact-float
{
	position: fixed;
	right: 20px;
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 999; /* above the header (100), below the open mobile menu (1000) */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}
.contact-float__btn
{
	position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	color: #FFFFFF; font-size: 24px; text-decoration: none;
	box-shadow: 0 8px 20px rgba(26,16,51,0.25), 0 0 0 4px rgba(255,255,255,0.7);
	transition: transform 0.2s ease;
}
.contact-float__btn:hover, .contact-float__btn:focus-visible { color: #FFFFFF; text-decoration: none; transform: scale(1.06); }
.contact-float__btn--phone, .contact-float__btn--phone .contact-float__ping { background: #d42a47; }
.contact-float__btn--whatsapp, .contact-float__btn--whatsapp .contact-float__ping { background: #1DA851; }
.contact-float__btn--whatsapp { font-size: 28px; }
.contact-float__btn--email, .contact-float__btn--email .contact-float__ping { background: var(--night); }
.contact-float__btn i { position: relative; }
.contact-float__ping { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.contact-float__tip
{
	position: absolute; right: 100%; top: 50%; margin-right: 12px;
	padding: 8px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none;
	background: #FFFFFF; color: var(--night); font-size: 13px; font-weight: 600;
	box-shadow: 0 8px 20px rgba(26,16,51,0.12);
	opacity: 0; transform: translate(8px, -50%);
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.contact-float__btn:hover .contact-float__tip,
.contact-float__btn:focus-visible .contact-float__tip { opacity: 1; transform: translate(0, -50%); }
@media (hover: none) { .contact-float__tip { display: none; } }
@media (max-width: 575px)
{
	.contact-float { right: 14px; gap: 10px; }
	.contact-float__btn { width: 48px; height: 48px; font-size: 20px; }
	.contact-float__btn--whatsapp { font-size: 24px; }
}
@keyframes contact-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes contact-ping { from { opacity: 0.45; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: no-preference)
{
	.contact-float { animation: contact-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s backwards; }
	.contact-float__ping { animation: contact-ping 1.8s ease-out 2s 3; }
}
@media (prefers-reduced-motion: reduce)
{
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}