/******* Do not edit this file *******
Code Snippets Manager
Saved: Oct 02 2026 | 00:49:20 */
/* =====================================================================
   SITE STYLES — Kenai Airport Hotel
   Custom CSS moved out of individual Elementor widgets so it lives in
   one place. Each block targets a class set on the widget under
   Advanced > CSS Classes (V3 widgets) or as a global class (V4).

     .kah-main-nav          Header > Nav Menu widget (KAH Main Menu)
     .kah-gallery-carousel  Home > "Alaska, Guided" > Image Carousel
     .kah-booking-wrap      Home > booking bar wrapper ([booking_bar])
     .kah-header            Header > outer container (sticky, transparent)
     .kah-hero              Home > hero section (offset for the header)

   Breakpoints match Elementor: tablet <= 1024px, mobile <= 767px.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. HEADER NAV MENU  (.kah-main-nav)
   Dropdown modelled on ys.loganmarketing.com.
   --------------------------------------------------------------------- */

/* Let the tablet/phone panel position against the header, not the widget. */
.elementor-widget-nav-menu.kah-main-nav,
.elementor-widget-nav-menu.kah-main-nav > .elementor-widget-container {
	position: static;
}

/* Desktop: top level */
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item {
	font-family: "Newsreader", serif;
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--kah-cream);
	fill: var(--kah-cream);
	padding: 13px 0;
}
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li + li {
	margin-left: 40px;
}
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:hover,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item.highlighted,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li > a.elementor-item:focus {
	color: var(--kah-mint);
	fill: var(--kah-mint);
}

/* Desktop: dropdown panel */
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--main .elementor-nav-menu > li > ul.sub-menu.elementor-nav-menu--dropdown {
	background-color: var(--kah-slate);
	border: 20px solid var(--kah-slate);
	border-radius: 0;
	box-shadow: 0 18px 40px color-mix(in srgb, var(--kah-black) 28%, transparent);
	min-width: 250px !important;
	margin-top: 10px !important;
}
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-sub-item,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-item {
	font-family: "Newsreader", serif;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.25rem;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	color: var(--kah-cream);
	background-color: transparent;
	padding: 13px 20px;
	border-left: 0;
}
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-sub-item:focus,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-sub-item.highlighted,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown a.elementor-item.highlighted {
	color: var(--kah-mint);
	background-color: var(--kah-slate);
}
.elementor-widget-nav-menu.kah-main-nav .elementor-nav-menu--dropdown li:not(:last-child) {
	border-bottom: 1px solid color-mix(in srgb, var(--kah-mint) 22%, transparent);
}

/* Tablet & phone: burger toggle */
.elementor-widget-nav-menu.kah-main-nav .elementor-menu-toggle {
	background-color: transparent;
	color: var(--kah-cream);
	font-size: 1.625rem;
	padding: 4px;
	border: 0;
}
.elementor-widget-nav-menu.kah-main-nav .elementor-menu-toggle svg { fill: var(--kah-cream); }
.elementor-widget-nav-menu.kah-main-nav .elementor-menu-toggle:hover { color: var(--kah-mint); }
.elementor-widget-nav-menu.kah-main-nav .elementor-menu-toggle:hover svg { fill: var(--kah-mint); }

/* Tablet & phone: full-width panel under the header */
.elementor-widget-nav-menu.kah-main-nav nav.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin-top: 0 !important;
	z-index: 60;
	background-color: var(--kah-slate);
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--kah-mint) 25%, transparent);
	padding: 8px 16px 20px;
	box-shadow: 0 14px 24px color-mix(in srgb, var(--kah-black) 25%, transparent);
}
.elementor-widget-nav-menu.kah-main-nav nav.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-nav-menu > li > a.elementor-item {
	font-size: 0.8125rem;
	padding: 14px 20px;
}
.elementor-widget-nav-menu.kah-main-nav nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu {
	border: 0;
	box-shadow: none;
	background-color: transparent;
	padding: 0 0 6px;
	margin: 0 !important;
	min-width: 0 !important;
}
.elementor-widget-nav-menu.kah-main-nav nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu a.elementor-sub-item {
	padding: 12px 20px 12px 44px !important;
	font-size: 0.75rem;
}
.elementor-widget-nav-menu.kah-main-nav nav.elementor-nav-menu__container.elementor-nav-menu--dropdown ul.sub-menu li:last-child {
	border-bottom: 0;
}


/* ---------------------------------------------------------------------
   2. GALLERY CAROUSEL  (.kah-gallery-carousel)
   Edge photos 80% visible: widen the track by 0.4 of a slide and shift
   it left by 0.2 of a slide. Slide width = (100% - gaps) / visible slides.
   --------------------------------------------------------------------- */

/* Desktop: 5 slides, 4 x 20px gaps -> slide = (100% - 80px) / 4.6 */
.elementor-widget-image-carousel.kah-gallery-carousel .elementor-image-carousel-wrapper {
	width: calc(100% + (100% - 80px) * 0.4 / 4.6) !important;
	max-width: none !important;
	margin-left: calc((100% - 80px) * -0.2 / 4.6) !important;
}
.elementor-widget-image-carousel.kah-gallery-carousel .swiper-slide .swiper-slide-image {
	width: 100%;
	height: 304px;
	object-fit: cover;
	border: 4px solid var(--kah-white);
	border-radius: 10px;
	box-sizing: border-box;
	display: block;
}

/* Tablet: 3 slides, 2 gaps -> slide = (100% - 40px) / 2.6 */
@media (max-width: 1024px) {
	.elementor-widget-image-carousel.kah-gallery-carousel .elementor-image-carousel-wrapper {
		width: calc(100% + (100% - 40px) * 0.4 / 2.6) !important;
		margin-left: calc((100% - 40px) * -0.2 / 2.6) !important;
	}
	.elementor-widget-image-carousel.kah-gallery-carousel .swiper-slide .swiper-slide-image { height: 290px; }
}

/* Phone: 3 slides, edges 15% visible -> slide = (100% - 40px) / 1.3 */
@media (max-width: 767px) {
	.elementor-widget-image-carousel.kah-gallery-carousel .elementor-image-carousel-wrapper {
		width: calc(100% + (100% - 40px) * 1.7 / 1.3) !important;
		margin-left: calc((100% - 40px) * -0.85 / 1.3) !important;
	}
	.elementor-widget-image-carousel.kah-gallery-carousel .swiper-slide .swiper-slide-image { height: 300px; }
}


/* ---------------------------------------------------------------------
   3. BOOKING BAR WRAPPER  (.kah-booking-wrap)
   The snippet's pill radius (999px) turns the phone 2x2 grid into a
   capsule, so soften it on phones only. !important beats the inline
   custom property the [booking_bar] shortcode writes.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.kah-booking-wrap .ys-bar { --ys-radius: 24px !important; }
}

/* Outer border + field dividers: a step darker than the shortcode's #E3E4DE. */
.kah-booking-wrap .ys-bar__row { --ys-line: var(--kah-line) !important; --ys-bar-border: var(--kah-line) !important; }
.kah-booking-wrap .ys-pop--cal { --ys-pop-border: var(--kah-line) !important; }


/* ---------------------------------------------------------------------
   4. STICKY TRANSPARENT HEADER  (.kah-header, .kah-hero)
   The header template is fixed to the top and starts transparent. The
   "Sticky Header" JS snippet adds body.kah-scrolled after 20px of scroll
   (navy fades in) and writes the header height to --kah-header-h.
   Inner pages have no hero behind the header, so they stay navy and are
   pushed down by the header height.
   --------------------------------------------------------------------- */
.elementor-location-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
body.admin-bar .elementor-location-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .elementor-location-header { top: 46px; }
}

body .elementor .kah-header {
	background-color: transparent;
	transition: background-color .25s ease, box-shadow .25s ease;
}
/* Navy once scrolled, on inner pages, and while the mobile menu is open. */
body.kah-scrolled .elementor .kah-header,
body:not(.home) .elementor .kah-header,
body .elementor .kah-header:has(.elementor-menu-toggle.elementor-active) {
	background-color: var(--kah-slate);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--kah-black) 18%, transparent);
}

/* Inner pages: keep content clear of the fixed header. */
body:not(.home) { padding-top: var(--kah-header-h, 100px); }

/* Home hero runs up behind the header, so add the header height back. */
body .elementor .kah-hero {
	min-height: calc(734px + var(--kah-header-h, 100px));
	padding-top: calc(110px + var(--kah-header-h, 100px));
}
@media (max-width: 1024px) {
	body .elementor .kah-hero { min-height: calc(620px + var(--kah-header-h, 92px)); }
}
@media (max-width: 767px) {
	body .elementor .kah-hero {
		min-height: calc(520px + var(--kah-header-h, 67px));
		padding-top: calc(80px + var(--kah-header-h, 67px));
	}
}


/* ---------------------------------------------------------------------
   5. ROOMS PAGE  (page /rooms, built from the Accommodation post type)
   Everything on the page is generated from the Accommodation posts, so a
   new room needs no new elements and no new CSS:
     tab bar      V4 collection loop of rooms        .kah-room-tab (first = active)
     room panels  Loop Grid > template 23527         .kah-rooms-panels .e-loop-item
   The script "JS - Rooms page tabs" marks the selected tab and the matching
   panel with .is-active and adds .kah-ready to the panels wrapper. Without the
   script every room is simply shown one under the other.
   --------------------------------------------------------------------- */
.kah-rooms-panels.kah-ready .e-loop-item { display: none; }
.kah-rooms-panels.kah-ready .e-loop-item.is-active { display: block; }
.kah-rooms-panels .e-loop-item > .e-con { width: 100%; }


/* ---------------------------------------------------------------------
   6. ROOM PANEL LAYOUT  (loop-item template "KAH Room Panel Loop Item")
   Desktop: gallery 55% | room details 45%. Tablet and mobile: stacked.
   --------------------------------------------------------------------- */
.kah-rooms-panels .kah-room-panel {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	width: 100%;
}
.kah-rooms-panels .kah-room-panel > .elementor-widget {
	flex: 0 0 55%;
	width: 55%;
	max-width: 55%;
	margin: 0;
}
.kah-rooms-panels .kah-room-panel > .e-con,
.kah-rooms-panels .kah-room-panel > .e-atomic-element {
	flex: 0 0 45%;
	width: 45%;
	max-width: 45%;
}
@media (max-width: 1024px) {
	.kah-rooms-panels .kah-room-panel { flex-flow: column nowrap; }
	.kah-rooms-panels .kah-room-panel > .elementor-widget,
	.kah-rooms-panels .kah-room-panel > .e-con,
	.kah-rooms-panels .kah-room-panel > .e-atomic-element {
		flex: 0 0 auto;
		width: 100%;
		max-width: 100%;
	}
}
.kah-rooms-panels .kah-room-panel > .e-con,
.kah-rooms-panels .kah-room-panel > .e-atomic-element {
	box-sizing: border-box;
	padding: 0 0 0 40px;
}
@media (max-width: 1024px) {
	.kah-rooms-panels .kah-room-panel > .e-con,
	.kah-rooms-panels .kah-room-panel > .e-atomic-element { padding: 24px 0 0; }
}
/* The loop grid itself: always one column */
.kah-rooms-panels .elementor-loop-container,
.elementor-23516 .elementor-loop-container { grid-template-columns: 1fr !important; }


/* ---------------------------------------------------------------------
   7. SHOW ALL PHOTOS BUTTON  (Property Photo Gallery plugin)
   Styled to match the play/pause buttons on the homepage hero video:
   lighter translucent navy pill, thin cream border, small cream serif text in title case.
   Padding, corner radius and the (removed) icon are set in the Property
   Photo Gallery widget settings of the "Room Photo Gallery Loop Item"
   template. Placement (bottom/right offsets) is also a widget setting.
   --------------------------------------------------------------------- */
.elementor .ppphoto-show-more a.ppphoto_show_more {
	border: 1px solid color-mix(in srgb, var(--kah-cream) 50%, transparent);
	background-color: color-mix(in srgb, var(--kah-navy) 15%, transparent);
	color: var(--kah-cream);
	font-family: var(--font-serif);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.elementor .ppphoto-show-more a.ppphoto_show_more:hover,
.elementor .ppphoto-show-more a.ppphoto_show_more:focus-visible {
	background-color: color-mix(in srgb, var(--kah-navy) 35%, transparent);
	color: var(--kah-cream);
}


/* ---------------------------------------------------------------------
   8. ROOM GALLERY: THREE PHOTOS  (.kah-rooms-panels)
   The Property Photo Gallery shows one large photo plus a 2 x 2 grid.
   Here it shows the large photo plus two stacked photos, so the right
   column is exactly as tall as the large photo (squared up top and
   bottom). The remaining photos stay in the page and still open in the
   "Show All Photos" lightbox.
   The selectors are long on purpose: the widget prints its own inline
   sizing rules (half width, 50% height) that this has to outrank.
   --------------------------------------------------------------------- */
.elementor .kah-rooms-panels .e-loop-item .property-detail-gallery .ppt_second_half .ppt_row > .ppt_col_6 {
	flex: 0 0 100%;
	width: 100%;
	max-width: 100%;
	height: calc(50% - 5px);
}

.elementor .kah-rooms-panels .e-loop-item .property-detail-gallery .ppt_second_half .ppt_row > .ppt_col_6:nth-child(n+3) {
	display: none;
}

/* 9. Lightbox (dark single-image viewer): small pill-style nav arrows */
.elementor-lightbox .swiper .elementor-swiper-button {
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1rem;
  color: var(--kah-white, #fff);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s;
}
.elementor-lightbox .swiper .elementor-swiper-button:hover {
  background: rgba(255, 255, 255, 0.25);
}
.elementor-lightbox .swiper .elementor-swiper-button svg {
  width: 1rem;
  height: 1rem;
}
.elementor-lightbox .swiper .elementor-swiper-button-prev { left: 24px !important; }
.elementor-lightbox .swiper .elementor-swiper-button-next { right: 24px !important; }

/* Rooms page: keep each room-extras item whole inside its CSS column */
.kah-room-extras span {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
}