/*
Theme Name: Lodge Starter
Description: Child theme of Hello Elementor. Design lives in Elementor; this theme holds small CSS and PHP tweaks.
Author: Media Farm
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: lodge
Update URI: false
*/

/*
 * Colours and fonts come from Elementor → Site Settings (set by the setup plugin).
 * Everything here uses Elementor's global variables so it follows the brand:
 *   --e-global-color-primary (bronze) / secondary (ink) / text / accent (bush)
 *   --e-global-color-sand / bone
 *   --e-global-typography-<id>-font-family
 *
 * ls-* classes are added to elements by the setup plugin's builder.
 * Add them yourself in Elementor → Advanced → CSS Classes.
 */

:root {
	--ls-ink: var(--e-global-color-secondary, #1f1c18);
	--ls-bronze: var(--e-global-color-primary, #8c6a43);
	--ls-sand: var(--e-global-color-sand, #ede6da);
	--ls-bone: var(--e-global-color-bone, #faf7f2);
	--ls-serif: var(--e-global-typography-primary-font-family, serif);
	--ls-sans: var(--e-global-typography-text-font-family, sans-serif);
	--ls-ease: cubic-bezier(0.25, 0.6, 0.2, 1);
	--ls-gutter: 40px;
}

@media (max-width: 767px) {
	:root {
		--ls-gutter: 24px;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern", "liga";
}

img {
	height: auto;
}

::selection {
	background: var(--ls-sand);
	color: var(--ls-ink);
}

:focus-visible {
	outline: 1px solid var(--ls-bronze);
	outline-offset: 4px;
}

/* Italic accents inside headlines, e.g. "Where the wild <em>things</em> rest." */
.elementor-heading-title em {
	font-style: italic;
	color: inherit;
}

/* ---------------------------------------------------------------------------
 * Header (Hello Elementor's built-in header — replace with Theme Builder later)
 * ------------------------------------------------------------------------- */

#site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--ls-bone);
	border-bottom: 1px solid rgba(31, 28, 24, 0.12);
}

.admin-bar #site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar #site-header {
		top: 0;
	}
}

#site-header .header-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 22px var(--ls-gutter);
	align-items: center;
}

#site-header .site-title,
#site-header .site-title a {
	margin: 0;
	font-family: var(--ls-serif);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ls-ink);
}

#site-header .site-navigation ul.menu {
	align-items: center;
	gap: 6px;
}

#site-header .site-navigation ul.menu li a,
#site-header .site-navigation-dropdown ul.menu li a {
	font-family: var(--ls-sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ls-ink);
}

#site-header .site-navigation ul.menu li a {
	padding: 10px 14px;
	position: relative;
}

#site-header .site-navigation ul.menu li:not(.ls-menu-reserve) a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ls-ease);
}

#site-header .site-navigation ul.menu li a:hover::after,
#site-header .site-navigation ul.menu li.current-menu-item a::after {
	transform: scaleX(1);
}

/* "Reserve" menu item as a quiet outlined button */
#site-header .site-navigation ul.menu li.ls-menu-reserve a {
	margin-left: 12px;
	padding: 12px 22px;
	border: 1px solid var(--ls-ink);
	transition: background-color 0.4s var(--ls-ease), color 0.4s var(--ls-ease);
}

#site-header .site-navigation ul.menu li.ls-menu-reserve a:hover {
	background: var(--ls-ink);
	color: var(--ls-bone);
}

@media (max-width: 767px) {
	#site-header .header-inner {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	#site-header .site-title,
	#site-header .site-title a {
		font-size: 17px;
		letter-spacing: 0.26em;
	}
}

/* ---------------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------------- */

#site-footer {
	background: var(--ls-ink);
	color: var(--ls-sand);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#site-footer .footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px var(--ls-gutter);
}

#site-footer,
#site-footer a,
#site-footer .site-description,
#site-footer .copyright p {
	color: var(--ls-sand);
	font-family: var(--ls-sans);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

#site-footer .site-title,
#site-footer .site-title a {
	font-family: var(--ls-serif);
	font-size: 20px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--ls-bone);
}

/* ---------------------------------------------------------------------------
 * Photography placeholders
 * ------------------------------------------------------------------------- */

.ls-photo {
	overflow: hidden;
}

/* The shot brief inside a placeholder. Delete the widget once a photo is in. */
.ls-brief .elementor-heading-title {
	opacity: 0.72;
	font-size: 10px !important;
}

.ls-brief .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	margin-right: 10px;
	vertical-align: middle;
	background: currentColor;
}

/* Cards: photo brightens gently on hover */
.ls-card .ls-photo {
	transition: filter 0.8s var(--ls-ease);
}

@media (hover: hover) {
	.ls-card:hover .ls-photo {
		filter: brightness(1.08);
	}
}

/* ---------------------------------------------------------------------------
 * Ornament, links, lists
 * ------------------------------------------------------------------------- */

.ls-ornament {
	width: 1px;
	height: 56px;
	margin: 0 auto;
	background: var(--ls-bronze);
	opacity: 0.6;
}

.ls-ornament--light {
	background: var(--ls-bone);
}

.ls-link .elementor-heading-title a {
	display: inline-block;
	padding-bottom: 6px;
	color: inherit;
	background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
	transition: background-size 0.6s var(--ls-ease), color 0.3s;
}

.ls-link .elementor-heading-title a:hover {
	background-size: 40% 1px;
	color: var(--ls-bronze);
}

body a.ls-underline {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

body a.ls-underline:hover {
	color: var(--ls-bronze);
}

.ls-contact-line a {
	color: inherit;
}

.ls-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ls-list li {
	padding: 14px 0;
	border-bottom: 1px solid rgba(31, 28, 24, 0.14);
}

.ls-list li:first-child {
	border-top: 1px solid rgba(31, 28, 24, 0.14);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------------- */

.ls-btn .elementor-button {
	transition: background-color 0.5s var(--ls-ease), color 0.5s var(--ls-ease), border-color 0.5s var(--ls-ease);
}

.ls-btn-bronze .elementor-button {
	background-color: var(--ls-bronze);
	color: #fff;
}

.ls-btn-bronze .elementor-button:hover {
	background-color: var(--ls-bone);
	color: var(--ls-ink);
}

.ls-btn-outline-light .elementor-button {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #fff;
}

.ls-btn-outline-light .elementor-button:hover {
	background-color: var(--ls-bone);
	border-color: var(--ls-bone);
	color: var(--ls-ink);
}

.ls-btn-outline-dark .elementor-button {
	background-color: transparent;
	border: 1px solid var(--ls-ink);
	color: var(--ls-ink);
}

.ls-btn-outline-dark .elementor-button:hover {
	background-color: var(--ls-ink);
	color: var(--ls-bone);
}

/* ---------------------------------------------------------------------------
 * Motion: slower, softer fade-ins; respect reduced-motion settings
 * ------------------------------------------------------------------------- */

.elementor-element.animated.fadeInUp {
	animation-name: ls-fade-up;
}

@keyframes ls-fade-up {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.elementor-invisible {
		visibility: visible !important;
	}

	.elementor-element.animated {
		animation: none !important;
	}
}