/*
Theme Name: LPJH
Theme URI: https://luxurypropertiesjh.com
Description: Custom, Elementor-free luxury theme for Luxury Properties Jackson Hole. Child of Cassio (Arts framework) — inherits the header, footer, preloader, and GSAP/Barba page transitions. Built on the LPJH brand token system (Teton Reserve identity, with the Primary Palette as a switchable secondary). Goals: own the content layer, remove the Elementor subscription, and improve Core Web Vitals + SEO.
Author: The Peak CRTVE Group
Author URI: https://peakcrtve.com
Template: cassio
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lpjh
*/

/* Theme styles are enqueued via functions.php (brand-tokens.css first, then
   component styles). This file's header registers the theme; keep visual CSS
   in dedicated, versioned stylesheets rather than here. */
/* === Breadcrumbs — lpjh-hero-breadcrumbs style (all pages except home) ===
 * Matches the luxury unit template breadcrumb aesthetic:
 * small, white, subtle opacity over hero images.
 * Covers both custom-built breadcrumbs (.aioseo-breadcrumb-sep)
 * and AIOSEO plugin breadcrumbs (.aioseo-breadcrumb-separator) as fallback.
 */
body:not(.home) .section-masthead__breadcrumbs {
	font-size: 0.78rem;
	opacity: 0.7;
	margin-bottom: 1rem;
	letter-spacing: 0.02em;
}

body:not(.home) .section-masthead__breadcrumbs,
body:not(.home) .section-masthead__breadcrumbs a,
body:not(.home) .section-masthead__breadcrumbs .aioseo-breadcrumb-sep,
body:not(.home) .section-masthead__breadcrumbs .aioseo-breadcrumb-separator {
	color: #fff;
	text-decoration: none;
}

body:not(.home) .section-masthead__breadcrumbs a:hover {
	opacity: 0.85;
}

body:not(.home) .section-masthead__breadcrumbs .aioseo-breadcrumb-current,
body:not(.home) .section-masthead__breadcrumbs .aioseo-breadcrumb:last-child {
	color: #fff;
	opacity: 0.85;
	font-weight: 400;
}

.subheading {
	margin-top: 2em;
	margin-bottom: 0;
}

/* === Transparent Header — Luxury Unit Pages ===
 * Replicates the homepage header behavior on luxury unit pages.
 * Before scroll: header is transparent, overlays the hero with white
 * text, secondary logo, and white burger icon.
 * On scroll (>1px): Cassio JS adds .header_sticky → these rules
 * deactivate, and the opaque sticky header with box-shadow, reduced
 * padding, and primary logo takes over via the parent theme's
 * .js-sticky-header { transition: all 0.4s ease }.
 */
.lpjh-transparent-header #page-header:not(.header_sticky) {
	background-color: transparent !important;
	box-shadow: none !important;
	border-bottom: none !important;
}

/* Smooth transition for logo, burger, and nav color changes */
.lpjh-transparent-header #page-header .logo__img-primary,
.lpjh-transparent-header #page-header .logo__img-secondary {
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.lpjh-transparent-header #page-header .header__burger-line {
	transition: background-color 0.4s ease;
}

.lpjh-transparent-header #page-header .menu > li > a {
	transition: color 0.4s ease;
}

/* Transparent state: secondary (white) logo, hide primary */
.lpjh-transparent-header #page-header:not(.header_sticky) .logo__img-primary {
	opacity: 0 !important;
	visibility: hidden !important;
}

.lpjh-transparent-header #page-header:not(.header_sticky) .logo__img-secondary {
	opacity: 1 !important;
	visibility: visible !important;
}

/* White UI elements over hero */
.lpjh-transparent-header #page-header:not(.header_sticky) .header__burger-line {
	background-color: #ffffff !important;
}

.lpjh-transparent-header #page-header:not(.header_sticky) .menu > li > a {
	color: #ffffff !important;
}

.lpjh-transparent-header #page-header:not(.header_sticky) .header__controls .social__item a {
	color: #ffffff !important;
}

.lpjh-transparent-header #page-header:not(.header_sticky) .logo__text-title,
.lpjh-transparent-header #page-header:not(.header_sticky) .logo__text-tagline {
	color: #ffffff !important;
}

/* Let the hero sit behind the transparent header */
.lpjh-transparent-header .page-wrapper__content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* === Luxury Unit Header — match search-results header ===
 * Unit pages normally get .bg-accent-abe on the header (coloured
 * background + padding). Luxury unit pages should use the same
 * clean header as the search-results page instead.
 */
body.lpjh-luxury-unit-page #page-header.bg-accent-abe {
	background-color: transparent !important;
	padding: 0 !important;
}

/* === Elementor Buttons — YC-inspired restyle ===
 * Square corners, refined proportions, consistent typography
 * across all CMS pages (homepage, about, contact, etc.)
 */
.elementor-button {
	border-radius: 0 !important;
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	padding: 0 1.5rem !important;
	min-height: 3rem !important;
	line-height: 3rem !important;
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}

/* Ensure Elementor outline buttons also get square corners */
.elementor-button-wrapper .elementor-button {
	border-radius: 0 !important;
}
/* === Teton: structural dark surfaces use charcoal, not the gold accent ===
 * Cassio's .bg-accent-primary-1 utility maps to the brand accent (now gold).
 * Correct for small accents (custom cursor), but the FOOTER and the sticky
 * (scrolled) HEADER are large fills — flooding them gold reads loud, not luxury.
 * Repoint just those to charcoal via the brand role layer; gold stays for
 * true accents (buttons, links, cursor).
 */
#page-header.bg-accent-primary-1 {
	background-color: var(--brand-inverse-bg, #1C1917) !important;
}