/* ============================================================================
   Latitude Key — home hero adjustments (child theme).
   Targets the Elementor-built hero elements by their stable element ids:
     .elementor-element-8ded50e  search block (holds the [lk_search] shortcode)
     .elementor-element-ca6327c  Explore More circle
   The old Elementor nav row and white logo card were removed from the page;
   the site header now comes from header.js + the WP "Header" menu, and the
   reversed white logo is injected as #lk-hero-logo (see below).
   ========================================================================== */

/* ---- Explore More: force a true circle (it was stretching to an oval) ---- */
.elementor-element-ca6327c {
	width: 46px !important; height: 46px !important; min-width: 46px;
	flex: 0 0 46px !important; align-self: center !important;
	border-radius: 50% !important; aspect-ratio: 1 / 1;
	display: flex; align-items: center; justify-content: center;
}

/* Hide the results count ("N rentals") in the home section only — the search
   above already frames the list, so the count is redundant here. */
#lk-properties .lk-toolbar { display: none; }

/* ============================================================================
   Logo above the search bar.
   A white, reversed-out logo (#lk-hero-logo, injected by hero.js) sits centered
   above the search widget, which fills the whole row. This spot is also the
   resting place the intro preloader flies its logo into — see preloader.js.
   ========================================================================== */

/* Stack the row: logo on top, full-width search below. */
.e-con-inner:has(> .elementor-element-8ded50e) {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 16px;
}
.elementor-element-8ded50e { width: 100% !important; }
.elementor-element-8ded50e .elementor-shortcode { height: auto !important; }
.elementor-element-8ded50e .lk-search { width: 100% !important; height: auto !important; margin: 0 !important; }

/* The reversed-out (white) logo. Hidden until revealed — either by the intro
   hand-off (html.lk-pl-done) or immediately when the intro is skipped/absent
   (html.lk-pl-skip). This avoids showing it before the preloader flies in. */
#lk-hero-logo {
	display: flex;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s ease;
}
#lk-hero-logo .lk-hero-logo-link { display: inline-flex; line-height: 0; }
html.lk-pl-done #lk-hero-logo,
html.lk-pl-skip #lk-hero-logo { opacity: 1; }

#lk-hero-logo svg {
	width: 220px;
	height: auto;
	display: block;
	filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .35));
}
#lk-hero-logo svg path { fill: #ffffff; stroke: none; }

@media (max-width: 767px) {
	#lk-hero-logo svg { width: 252px; } /* +50% on mobile (was 168px) */
	.e-con-inner:has(> .elementor-element-8ded50e) { gap: 14px; }
}

/* ---- Hero positioning ----
   Keep #lk-hero as the positioning anchor for the (absolute) top bar on the
   home page; nudge the logo + search down a touch below the floating header. */
#lk-hero { position: relative; }
#lk-hero-logo { margin-top: clamp(15px, 2.5vh, 29px); }

/* ============================================================================
   Hero tagline — robust to auto-translation (longer words in other languages).
   Desktop only (the tagline is hidden on mobile). So that nothing overlaps once
   translated: the Elegance/Privacy box hugs its text and grows in WIDTH, while
   "Curated Vacation Properties" shifts right (and wraps to more lines if needed)
   into the space freed by the removed right card. Elementor ids inside
   #lk-hero-content:  c0c700f left block · 50c0812 line-2 row ·
                      a534528 labels box · 601be00 title
   ========================================================================== */
@media (min-width: 768px) {
	/* Left block uses the freed width instead of the old 60% cap. */
	#lk-hero-content .elementor-element-c0c700f { width: auto !important; max-width: 100% !important; flex-grow: 1; }
	/* Row: labels + title, bottom-aligned, with a gap. */
	#lk-hero-content .elementor-element-50c0812 { flex-wrap: nowrap; column-gap: 22px; align-items: flex-end; }
	/* Labels box hugs its (translated) text; never stretch or shrink. */
	#lk-hero-content .elementor-element-a534528 { width: fit-content !important; flex: 0 0 auto !important; align-items: flex-start; }
	#lk-hero-content .elementor-element-a534528 .elementor-heading-title { white-space: nowrap; }
	/* Title shifts right as the labels grow, and wraps instead of overflowing.
	   margin-bottom lifts it 8px within the flex-end row so its baseline aligns
	   with the bottom of "Privacy" (line-height made it sit slightly low). */
	#lk-hero-content .elementor-element-601be00 { flex: 0 1 auto !important; min-width: 0; margin-bottom: 8px; }
}

/* ============================================================================
   "The Latitude Key Standard" section (#lk-about) + compass flip-in.
   The compass (printed by [lk_compass] as .lk-compass) flips in horizontally
   when the section scrolls into view — hero.js toggles .in-view. Reduced-motion
   is respected (no animation).
   ========================================================================== */
.lk-compass { display: flex; justify-content: center; width: 100%; overflow: visible; perspective: 1100px; }
.lk-compass svg {
	width: clamp(140px, 11.2vw, 210px); max-width: none; height: auto; display: block;   /* 30% smaller than the original clamp(200,16vw,300) */
	transform-origin: center; opacity: 1;   /* visible immediately — no fade */
}
/* Single horizontal turn: 1s after the section enters view the compass does ONE
   full horizontal turn (rotateY 0→360°) with a brief slowdown at the half turn,
   then stops — no loop. hero.js still toggles .in-view. */
.lk-compass.in-view svg { animation: lk-compass-flip 1.6s ease-in-out 1s 1 forwards; }
@keyframes lk-compass-flip {
	0%   { transform: rotateY(0deg); }
	45%  { transform: rotateY(180deg); }   /* first half, decelerating in */
	60%  { transform: rotateY(180deg); }   /* brief slowdown at the half turn */
	100% { transform: rotateY(360deg); }   /* second half completes the single turn */
}
/* Centre it between the vertical separator (left) and the right end of the line
   below: ~53px left at the 1464px cap, scaling with the boxed width on narrower
   desktops. Two-column layout only. */
@media (min-width: 768px) {
	.lk-compass { transform: translateX(max(-2.9vw, -53px)); }
}
@media (prefers-reduced-motion: reduce) {
	.lk-compass.in-view svg { animation: none; }
	.lk-compass svg { transform: none; opacity: 1; }
}

/* Vertical separator between the text and the compass (empty Elementor
   containers collapse, so the size is enforced here). Hidden on mobile. */
#lk-about-sep {
	flex: 0 0 1px !important;
	width: 1px !important;
	height: 170px;
	align-self: center;
	background: #D9DFE2;
}
@media (max-width: 767px) {
	#lk-about-sep { display: none !important; }
	/* Section stacks to 1 column here — drop the compass with the separator. */
	.lk-compass { display: none !important; }
}

/* ---- Hero scroll-down chevron (bottom-centre → #lk-about) ----
   Injected by hero.js; smooth-scrolls to the About section. */
.lk-hero-chevron {
	position: absolute; left: 50%; bottom: clamp(16px, 3vh, 32px); transform: translateX(-50%);
	z-index: 20; width: 46px; height: 46px;
	display: flex; align-items: center; justify-content: center;
	/* !important beats the global Elementor kit link colour (blue) on this <a>. */
	color: #fff !important; text-decoration: none; cursor: pointer;
	animation: lk-chevron-bounce 2s ease-in-out infinite;
}
.lk-hero-chevron svg { width: 30px; height: 30px; stroke: #fff; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)); }
.lk-hero-chevron:hover { opacity: .75; }
@keyframes lk-chevron-bounce {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}
@media (prefers-reduced-motion: reduce) { .lk-hero-chevron { animation: none; } }

/* ---- Hero always fills the viewport (dvh handles mobile browser chrome). ---- */
#lk-hero { min-height: 100vh !important; min-height: 100dvh !important; }

/* ---- Mobile: strip the hero down — hide the tagline text block. ---- */
@media (max-width: 767px) {
	#lk-hero-content { display: none !important; }
	/* Lift the chevron above the fixed floating-contact band (~69px tall). */
	.lk-hero-chevron { bottom: 84px; }
	/* Rebalance the (tagline-less) hero: nudge the logo down a touch and drop the
	   search bar much lower toward the bottom. */
	#lk-hero-logo { margin-top: 10vh; }
	/* Raised so the search sits ~20px above its pre-enlarged-logo position. The
	   bigger mobile logo (166px vs ~111px) pushed it ~55px lower, so pull up 75px
	   total from the 18vh baseline (verified against the live 812px viewport). */
	#lk-hero .elementor-element-8ded50e { margin-top: calc(18vh - 75px); }
}

/* ============================================================================
   "Our Collections" (#lk-collections) — 3-up promo grid ("What's on" style).
   Each column = a property slider ([lk_properties_slider], styled by the plugin)
   + title + text + a Text-link CTA (the stylesheet's .lnk style). White section.
   ========================================================================== */
/* Section titles ("Our Collections", "Recent additions") — Playfair (inherited
   from the kit), Ink, left-aligned. Shared by the Collections + Properties heads.
   The SIZE is set globally in style.css (single source for all section titles). */
#lk-collections > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
#lk-properties > .e-con-inner > .elementor-widget-heading .elementor-heading-title {
	color: #16303C; margin-bottom: 34px; text-align: left;
}

/* 3 equal columns; wrap to a single column on mobile. */
/* padding:0 so the columns align flush with the Properties section above
   (Elementor's default container padding would otherwise inset them). */
#lk-collections-grid { display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px 30px; align-items: stretch; padding: 0; }
#lk-collections-grid > .e-con { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }

/* Slider on top, then title / text / CTA. */
#lk-collections-grid .elementor-widget-shortcode { margin-bottom: 18px; }
#lk-collections-grid .elementor-widget-heading .elementor-heading-title { font-size: clamp(20px, 2vw, 24px); color: #16303C; margin-bottom: 8px; text-align: left; }
#lk-collections-grid .elementor-widget-text-editor { font-family: "Work Sans", system-ui, sans-serif; color: #5B6B73; font-size: 15px; line-height: 1.6; margin-bottom: 16px; text-align: left; }
/* Pin the CTA to the bottom so the cards align despite uneven text length. */
#lk-collections-grid .elementor-widget-button { margin-top: auto; }

/* CTA = the stylesheet Text link (.lnk): Corporate Blue, thin bottom rule, no
   pill. The !important resets beat the global Elementor button kit (fill + 999px). */
#lk-collections .elementor-button {
	display: inline-flex; align-items: center; width: auto; align-self: flex-start;
	background: transparent !important; box-shadow: none !important;
	border: 0 !important; border-radius: 0 !important; padding: 0 0 1px !important; min-height: 0 !important;
	color: #5581A2 !important;
	font-family: "Work Sans", system-ui, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: none;
	border-bottom: 1px solid rgba(85, 129, 162, .4) !important;
	transition: color .16s ease, border-color .16s ease;
}
#lk-collections .elementor-button:hover { color: #3C617D !important; border-bottom-color: #3C617D !important; background: transparent !important; }

@media (max-width: 767px) {
	#lk-collections-grid { gap: 40px; }
	#lk-collections-grid > .e-con { flex: 1 1 100%; }
}

/* ============================================================================
   Home — Amenities section (#lk-amenities): text block on the left, the
   [lk_amenities_accordion] (.lk-acc, styled by the plugin) on the right.
   Section box/padding come from Elementor (boxed min(80%,1464), 124/20); the
   two-column row + the left-column typography live here.
   ========================================================================== */
#lk-amenities > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;          /* content vertically centered */
	gap: 56px;
}
#lk-amenities-text { flex: 0 0 38%; max-width: 38%; }
#lk-amenities-acc { flex: 1 1 auto; min-width: 0; }
/* Section title — same treatment as the other home section titles. */
#lk-amenities-text .elementor-heading-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	color: #16303C;
	text-align: left;
	margin-bottom: 24px;
}
#lk-amenities-text .elementor-widget-text-editor {
	color: #16303C;
	font-family: "Work Sans", system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 28px;
}
/* "Learn more" = Secondary · outline, fills on hover. !important beats the
   page-level Elementor button colour (var(--e-global-color-accent) = green). */
#lk-amenities-text .elementor-button {
	background-color: transparent !important;
	background-image: none !important;
	color: #5581A2 !important;
	border: 1px solid #5581A2 !important;
}
#lk-amenities-text .elementor-button:hover {
	background-color: #5581A2 !important;
	color: #fff !important;
}
/* Desktop (≥1025px): the right column shows [lk_amenities_slider] and bleeds to
   the right edge of the viewport; the accordion (the mobile view) is hidden.
   margin-right = the boxed container's right gutter ((100% − 100vw)/2, where
   100% is the centred inner), so the slider's left edge stays put while its
   right edge reaches the viewport edge — no page overflow (it under-runs the
   scrollbar). */
@media (min-width: 1025px) {
	#lk-amenities-acc { margin-right: calc((100% - 100vw) / 2); }
	#lk-amenities-acc .lk-acc { display: none !important; }
}
/* Tablet/mobile (≤1024px): stack; keep the [lk_amenities_accordion], hide the
   slider, and drop the intro paragraph AND the "Learn more" button (only the
   title stays above the accordion). */
@media (max-width: 1024px) {
	#lk-amenities > .e-con-inner { flex-direction: column; align-items: stretch; gap: 40px; }
	#lk-amenities-text, #lk-amenities-acc { flex: 1 1 auto; max-width: 100%; }
	#lk-amenities-acc .lk-amslider { display: none !important; }
	#lk-amenities-text .elementor-widget-text-editor,
	#lk-amenities-text .elementor-widget-button { display: none !important; }
}

/* "Recent additions" section disabled (client request). */
#lk-properties { display: none !important; }

/* ============================================================================
   Home — Brochure section (#lk-brochure): portrait cover image on the left,
   text block on the right. White bg; boxed width / 124px padding come from
   Elementor. The cover keeps its portrait ratio (the Elementor Image widget
   otherwise forces width:100% and squashes it), so the media column is sized to
   the image and the text takes the rest.
   ========================================================================== */
#lk-brochure > .e-con-inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 64px;
}
#lk-brochure-media { flex: 0 0 auto; width: clamp(260px, 27vw, 380px); }
#lk-brochure-media > .e-con-inner { width: 100% !important; max-width: none !important; padding: 0 !important; }
#lk-brochure-media .elementor-widget-image,
#lk-brochure-media .elementor-widget-image .elementor-widget-container,
#lk-brochure-media .elementor-image { width: 100% !important; }
#lk-brochure-media img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; }
#lk-brochure-text { flex: 1 1 auto; min-width: 0; }
#lk-brochure-text .elementor-heading-title {
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15; font-weight: 700; color: #16303C;
	margin-bottom: 24px;
}
#lk-brochure-text .elementor-widget-text-editor {
	color: #16303C; font-family: "Work Sans", system-ui, sans-serif;
	font-size: 16px; line-height: 1.7; margin-bottom: 30px;
}
/* "Download Brochure" uses the shared ".lk-link" arrow-link style (uppercase,
   underline, single → arrow, colours) — see the "Shared inline arrow link"
   block in style.css. Keep the inner wrapper inline so the arrow sits beside
   the label. */
#lk-brochure-text .elementor-button-content-wrapper { display: inline-flex; align-items: center; }
/* Stack on tablet/mobile: cover on top, text below. */
@media (max-width: 1024px) {
	#lk-brochure > .e-con-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
	#lk-brochure-media { width: clamp(220px, 45vw, 320px); }
	#lk-brochure-text { width: 100%; }
}

/* ============================================================================
   MOBILE ONLY (≤767px) — halve the white space between the home sections
   (the desktop standard is 124px → 62px here) and keep it uniform across every
   content section. The horizontal side margin is already a uniform 20px on the
   sections' outer .e-con (Collections reference), so only the vertical padding
   (which lives on .e-con-inner) is touched here. Owners' side margin is fixed
   to 20px in style.css. Desktop/tablet are unchanged.
   ========================================================================== */
@media (max-width: 767px) {
	#lk-about > .e-con-inner,
	#lk-collections > .e-con-inner,
	#lk-amenities > .e-con-inner,
	#lk-testimonials > .e-con-inner,
	#lk-brochure > .e-con-inner {
		padding-top: 62px !important;
		padding-bottom: 62px !important;
	}
	/* Align each section's CONTENT to the same 20px side margins (Collections
	   reference). These nested Elementor containers carry a default 10px inline
	   padding that pushed their content in to 30px — zero it so the collection
	   sliders, the Amenities title/accordion and the Brochure image+text all
	   line up with the section's 20px edge. */
	#lk-collections-grid > .e-con,
	#lk-amenities-text,
	#lk-amenities-acc,
	#lk-brochure-media,
	#lk-brochure-text {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Brochure cover fills the width on mobile (was a narrow 220px pushed left). */
	#lk-brochure-media { width: 100% !important; }
	/* Reduce + uniformise the space under the section titles on mobile
	   (desktop: About/Collections 34px, Amenities 24px → all 16px here). */
	#lk-about .elementor-heading-title,
	#lk-collections > .e-con-inner > .elementor-widget-heading .elementor-heading-title,
	#lk-amenities-text .elementor-heading-title {
		margin-bottom: 16px !important;
	}
	/* Amenities stacks as two columns (title, then accordion) with a 40px flex
	   gap + 10px column padding — so the space under its title was ~66px, much
	   bigger than the others. Collapse both so ONLY the title's 16px margin
	   separates it from the accordion (matches About / Collections). */
	#lk-amenities > .e-con-inner { gap: 0 !important; }
	#lk-amenities-text, #lk-amenities-acc { padding-top: 0 !important; padding-bottom: 0 !important; }
}

/* ============================================================================
   Mobile H1 — surfaced below the hero, above "The Latitude Key Standard".
   The hero's own H1 is display:none at <=767px (no room in the hero), so this
   inserted heading (hero.js) carries the visible H1 on mobile. Hidden on desktop.
   ========================================================================== */
.lk-hero-h1-mobile { display: none; }
@media (max-width: 767px) {
	.lk-hero-h1-mobile {
		display: block;
		margin: 0 20px;
		padding: 34px 0 24px;
		border-bottom: 1px solid #D9DFE2;
		font-family: "Playfair Display", Georgia, serif;
		font-weight: 700 !important;
		font-size: 40px !important;
		line-height: 1.18;
		color: #16303C;
		text-align: center;
	}
}