/*
 Theme Name:        Lauren Stratton Child
 Theme URI:         https://laurenstrattonrealty.com
 Description:       A luxury real estate child theme for Hello Elementor. Built for Lauren Stratton Realty, Broker in Charge at Navigate Realty, covering the Research Triangle and Wilmington Coast markets of North Carolina. Requires Elementor Pro for full functionality.
 Author:            Lauren Stratton Realty
 Author URI:        https://laurenstrattonrealty.com
 Template:          hello-elementor
 Version:           1.0.0
 Requires at least: 6.0
 Tested up to:      6.7
 Requires PHP:      7.4
 License:           GNU General Public License v2 or later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:       lauren-stratton-child
 Tags:              two-columns, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, translation-ready, blog, portfolio
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
	--lsr-primary:     #50586b;
	--lsr-primary-dk:  #3d4455;
	--lsr-primary-lt:  #5d6678; /* Darkened from #6b7485 to pass WCAG AA 4.5:1 on light bg */
	--lsr-white:       #ffffff;
	--lsr-off-white:   #fafaf8;
	--lsr-gray-1:      #f5f5f4;
	--lsr-gray-2:      #eaeae8;
	--lsr-gray-3:      #d0d0ce;
	--lsr-charcoal-1:  #1c1c1a;
	--lsr-charcoal-2:  #3a3a38;
	--lsr-charcoal-3:  #666662;
	--lsr-charcoal-4:  #888884; /* Darkened from #999995 for WCAG AA on white */
	--lsr-focus-ring:  #50586b;
	--lsr-serif:       'Cormorant Garamond', Georgia, serif;
	--lsr-sans:        'Jost', system-ui, sans-serif;
}

/* ==========================================================================
   Skip to Content (Accessibility — required by WCAG 2.1 SC 2.4.1)
   ========================================================================== */
.skip-link {
	position: absolute;
	top: -9999px;
	left: 6px;
	z-index: 999999;
	padding: 8px 16px;
	background: var(--lsr-primary);
	color: var(--lsr-white);
	font-family: var(--lsr-sans);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.skip-link:focus {
	top: 6px;
}

/* ==========================================================================
   Base Reset
   ========================================================================== */
body {
	font-family: var(--lsr-sans);
	font-weight: 300;
	color: var(--lsr-charcoal-1);
	background-color: var(--lsr-off-white);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	font-family: var(--lsr-serif);
	font-weight: 300;
	line-height: 1.15;
}

p {
	font-weight: 300;
	line-height: 1.85;
}

a {
	color: inherit;
}

/* Global focus ring — never suppress outline without a replacement */
:focus-visible {
	outline: 2px solid var(--lsr-focus-ring);
	outline-offset: 3px;
}

/* ==========================================================================
   Elementor Global Overrides
   ========================================================================== */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: 1200px;
}

/* ==========================================================================
   Typography Helpers
   ========================================================================== */
.lsr-eyebrow {
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.lsr-serif-display {
	font-family: var(--lsr-serif);
	font-weight: 300;
}

/* ==========================================================================
   Ticker Bar
   ========================================================================== */
.lsr-ticker-wrap {
	background: var(--lsr-charcoal-1);
	padding: 13px 0;
	overflow: hidden;
}

.lsr-ticker-inner {
	display: flex;
	gap: 40px;
	align-items: center;
	padding: 0 48px;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
}

.lsr-ticker-inner::-webkit-scrollbar {
	display: none;
}

.lsr-ticker-item {
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}

.lsr-ticker-dot {
	width: 2px;
	height: 2px;
	background: var(--lsr-primary-lt);
	border-radius: 50%;
	flex-shrink: 0;
	display: inline-block;
}

/* ==========================================================================
   Section Labels
   ========================================================================== */
.lsr-section-label {
	font-family: var(--lsr-sans);
	font-size: 11px; /* Raised from 10px — aids contrast at this weight */
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--lsr-primary-lt);
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
}

.lsr-section-label::after {
	content: '';
	width: 32px;
	height: 1px;
	background: var(--lsr-gray-3);
}

.lsr-section-label.centered {
	justify-content: center;
}

.lsr-section-label.on-dark {
	color: rgba(255, 255, 255, 0.55);
}

.lsr-section-label.on-dark::after {
	background: rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.lsr-hero-section {
	min-height: 90vh;
}

.lsr-hero-left {
	background: var(--lsr-primary);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.lsr-hero-left::after {
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	width: 160px;
	height: 160px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	pointer-events: none;
}

.lsr-hero-right {
	background: var(--lsr-gray-1);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Stat Chip
   ========================================================================== */
.lsr-stat-chip {
	background: var(--lsr-white);
	padding: 16px 20px;
	border-left: 2px solid var(--lsr-primary);
	display: inline-block;
}

.lsr-stat-chip .num {
	font-family: var(--lsr-serif);
	font-size: 30px;
	font-weight: 400;
	color: var(--lsr-primary);
	line-height: 1;
}

.lsr-stat-chip .lbl {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-3);
	margin-top: 4px;
}

/* ==========================================================================
   Credentials Row
   ========================================================================== */
.lsr-creds {
	display: flex;
	gap: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--lsr-gray-2);
}

.lsr-cred-val {
	font-family: var(--lsr-serif);
	font-size: 28px;
	font-weight: 400;
	color: var(--lsr-primary);
	line-height: 1;
}

.lsr-cred-lbl {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-4);
	margin-top: 4px;
}

/* ==========================================================================
   Navigate Badge
   ========================================================================== */
.lsr-navigate-badge {
	background: var(--lsr-white);
	padding: 18px 22px;
	border-left: 2px solid var(--lsr-primary);
	display: inline-block;
}

.lsr-navigate-badge .eyebrow {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-4);
}

.lsr-navigate-badge .name {
	font-family: var(--lsr-serif);
	font-size: 20px;
	font-weight: 400;
	color: var(--lsr-charcoal-1);
	margin-top: 4px;
	display: block;
}

/* ==========================================================================
   Market Cards
   ========================================================================== */
.lsr-market-card {
	padding: 52px 44px;
	position: relative;
	overflow: hidden;
}

.lsr-market-card.triangle {
	background: var(--lsr-primary);
}

.lsr-market-card.coast {
	background: var(--lsr-primary-dk);
}

.lsr-market-deco {
	position: absolute;
	top: 28px;
	right: 28px;
	font-family: var(--lsr-serif);
	font-size: 110px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.04);
	line-height: 1;
	pointer-events: none;
	user-select: none;
	aria-hidden: true; /* Decorative — also set aria-hidden in markup */
}

.lsr-area-tag {
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.7); /* Raised from 0.55 — white on dark bg passes easily */
	display: inline-block;
}

/* ==========================================================================
   Testimonial Cards
   ========================================================================== */
.lsr-test-card {
	background: var(--lsr-gray-1);
	border: 1px solid var(--lsr-gray-2);
	padding: 32px;
}

.lsr-test-stars {
	color: var(--lsr-primary);
	font-size: 13px;
	letter-spacing: 3px;
	margin-bottom: 14px;
}

.lsr-test-quote {
	font-family: var(--lsr-serif);
	font-size: 17px;
	font-weight: 300;
	font-style: italic;
	line-height: 1.65;
	color: var(--lsr-charcoal-2);
	margin-bottom: 20px;
}

.lsr-test-author {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-2);
}

.lsr-test-market {
	font-size: 10px;
	color: var(--lsr-charcoal-4);
	margin-top: 3px;
}

/* ==========================================================================
   Buttons
   Higher specificity via .elementor-widget-button replaces !important.
   ========================================================================== */
.elementor-widget-button .elementor-button.lsr-btn-primary,
.elementor-widget-button .elementor-button.lsr-btn-primary:visited {
	background: var(--lsr-white);
	color: var(--lsr-primary);
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 13px 26px;
	border: none;
	border-radius: 0;
}

.elementor-widget-button .elementor-button.lsr-btn-primary:hover,
.elementor-widget-button .elementor-button.lsr-btn-primary:focus-visible {
	background: var(--lsr-gray-1);
	color: var(--lsr-primary);
	outline: 2px solid var(--lsr-primary);
	outline-offset: 2px;
}

.elementor-widget-button .elementor-button.lsr-btn-ghost,
.elementor-widget-button .elementor-button.lsr-btn-ghost:visited {
	background: transparent;
	color: var(--lsr-white);
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 12px 26px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 0;
}

.elementor-widget-button .elementor-button.lsr-btn-ghost:hover,
.elementor-widget-button .elementor-button.lsr-btn-ghost:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

.elementor-widget-button .elementor-button.lsr-btn-dark,
.elementor-widget-button .elementor-button.lsr-btn-dark:visited {
	background: var(--lsr-primary);
	color: var(--lsr-white);
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 13px 26px;
	border: none;
	border-radius: 0;
}

.elementor-widget-button .elementor-button.lsr-btn-dark:hover,
.elementor-widget-button .elementor-button.lsr-btn-dark:focus-visible {
	background: var(--lsr-primary-dk);
	outline: 2px solid var(--lsr-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   CTA Section / Footer
   ========================================================================== */
.lsr-cta-section {
	background: var(--lsr-charcoal-1);
}

.lsr-footer {
	background: var(--lsr-charcoal-2);
}

.lsr-footer-link {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5); /* Raised from 0.4 — white on #3a3a38 needs care */
	display: block;
	margin-bottom: 10px;
	text-decoration: none;
	letter-spacing: 0.04em;
}

.lsr-footer-link:hover,
.lsr-footer-link:focus-visible {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.lsr-main-header {
	transition: box-shadow 0.2s ease;
}

.lsr-main-header.elementor-sticky--active {
	box-shadow: 0 1px 0 rgba(28, 28, 26, 0.08);
}

.lsr-header-cta {
	white-space: nowrap;
}

.lsr-mobile-nav-toggle {
	display: none;
}

/* ==========================================================================
   Content Page — rich text body styles
   ========================================================================== */
.lsr-content-body h2 {
	font-family: var(--lsr-serif);
	font-size: 28px;
	font-weight: 300;
	color: var(--lsr-charcoal-1);
	margin: 2.5rem 0 1rem;
	line-height: 1.2;
}

.lsr-content-body h3 {
	font-family: var(--lsr-serif);
	font-size: 22px;
	font-weight: 300;
	color: var(--lsr-charcoal-2);
	margin: 2rem 0 0.75rem;
}

.lsr-content-body h4 {
	font-family: var(--lsr-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lsr-primary);
	margin: 1.5rem 0 0.5rem;
}

.lsr-content-body p {
	margin-bottom: 1.25rem;
}

.lsr-content-body ul,
.lsr-content-body ol {
	margin: 0 0 1.25rem 1.5rem;
	color: var(--lsr-charcoal-3);
}

.lsr-content-body li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.lsr-content-body a {
	color: var(--lsr-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lsr-content-body a:hover,
.lsr-content-body a:focus-visible {
	color: var(--lsr-primary-dk);
}

.lsr-content-body blockquote {
	border-left: 2px solid var(--lsr-primary);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
	font-family: var(--lsr-serif);
	font-size: 20px;
	font-style: italic;
	font-weight: 300;
	color: var(--lsr-charcoal-2);
	line-height: 1.55;
}

/* ==========================================================================
   Community Page
   ========================================================================== */
.lsr-highlight-card {
	background: var(--lsr-white);
	border: 1px solid var(--lsr-gray-2);
	padding: 32px 28px;
	height: 100%;
}

.lsr-hl-icon {
	margin-bottom: 18px;
}

.lsr-hl-title {
	font-family: var(--lsr-serif);
	font-size: 20px;
	font-weight: 300;
	color: var(--lsr-charcoal-1);
	margin-bottom: 10px;
	line-height: 1.3;
}

.lsr-hl-body {
	font-family: var(--lsr-sans);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--lsr-charcoal-3);
	margin: 0;
}

.lsr-listing-card {
	background: var(--lsr-white);
	border: 1px solid var(--lsr-gray-2);
	overflow: hidden;
}

.lsr-listing-body {
	padding: 20px;
}

.lsr-listing-price {
	font-family: var(--lsr-serif);
	font-size: 22px;
	font-weight: 400;
	color: var(--lsr-charcoal-1);
	margin-bottom: 6px;
}

.lsr-listing-address {
	font-family: var(--lsr-sans);
	font-size: 13px;
	font-weight: 300;
	color: var(--lsr-charcoal-3);
	margin-bottom: 12px;
}

.lsr-listing-meta {
	display: flex;
	gap: 16px;
	font-family: var(--lsr-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-4);
}

.lsr-zillow-cta {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid var(--lsr-gray-2);
	border-bottom: 1px solid var(--lsr-gray-2);
}

.lsr-zillow-text {
	font-family: var(--lsr-sans);
	font-size: 14px;
	font-weight: 300;
	color: var(--lsr-charcoal-3);
}

.lsr-nearby-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lsr-nearby-link {
	font-family: var(--lsr-sans);
	font-size: 13px;
	font-weight: 400;
	color: var(--lsr-charcoal-2);
	text-decoration: none;
	padding: 10px 18px;
	border: 1px solid var(--lsr-gray-3);
	background: var(--lsr-white);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.lsr-nearby-link:hover,
.lsr-nearby-link:focus-visible {
	border-color: var(--lsr-primary);
	color: var(--lsr-primary);
	outline: 2px solid var(--lsr-primary);
	outline-offset: 2px;
}

.lsr-nearby-link span {
	color: var(--lsr-primary);
}

/* ==========================================================================
   Blog — filter bar
   ========================================================================== */
.lsr-blog-filter {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.lsr-filter-label {
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-4);
	margin-right: 8px;
}

.lsr-filter-tag {
	font-family: var(--lsr-sans);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lsr-charcoal-3);
	text-decoration: none;
	padding: 6px 14px;
	border: 1px solid var(--lsr-gray-3);
	/* Name specific properties — never transition: all (breaks :focus outline) */
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lsr-filter-tag:hover,
.lsr-filter-tag:focus-visible,
.lsr-filter-tag.active {
	background: var(--lsr-primary);
	color: var(--lsr-white);
	border-color: var(--lsr-primary);
	outline: 2px solid var(--lsr-primary);
	outline-offset: 2px;
}

/* ==========================================================================
   Blog — post grid (Elementor Posts widget overrides)
   ========================================================================== */
.lsr-posts-grid .elementor-post {
	background: var(--lsr-white);
	border: 1px solid var(--lsr-gray-2);
	overflow: hidden;
}

.lsr-posts-grid .elementor-post__thumbnail img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.lsr-posts-grid .elementor-post:hover .elementor-post__thumbnail img {
	transform: scale(1.03);
}

.lsr-posts-grid .elementor-post__text {
	padding: 20px 22px 24px;
}

.lsr-posts-grid .elementor-post__title a {
	text-decoration: none;
	color: var(--lsr-charcoal-1);
}

.lsr-posts-grid .elementor-post__title a:hover,
.lsr-posts-grid .elementor-post__title a:focus-visible {
	color: var(--lsr-primary);
}

.lsr-posts-grid .elementor-post-info {
	margin-bottom: 10px;
}

/* ==========================================================================
   Blog — single post content
   ========================================================================== */
.lsr-post-content img {
	max-width: 100%;
	height: auto;
	margin: 2rem 0;
}

.lsr-post-content h2 {
	font-family: var(--lsr-serif);
	font-size: 30px;
	font-weight: 300;
	color: var(--lsr-charcoal-1);
	margin: 2.5rem 0 1rem;
	line-height: 1.2;
}

.lsr-post-content h3 {
	font-family: var(--lsr-serif);
	font-size: 24px;
	font-weight: 300;
	color: var(--lsr-charcoal-2);
	margin: 2rem 0 0.75rem;
}

.lsr-post-content blockquote {
	border-left: 2px solid var(--lsr-primary);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
	font-family: var(--lsr-serif);
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
	color: var(--lsr-charcoal-2);
	line-height: 1.55;
}

.lsr-post-content a {
	color: var(--lsr-primary);
	text-underline-offset: 3px;
}

.lsr-post-content a:hover,
.lsr-post-content a:focus-visible {
	color: var(--lsr-primary-dk);
}

.lsr-post-tags a {
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lsr-primary);
	text-decoration: none;
	padding: 4px 10px;
	border: 1px solid var(--lsr-gray-3);
	margin-right: 6px;
	display: inline-block;
	margin-top: 32px;
}

.lsr-post-tags a:hover,
.lsr-post-tags a:focus-visible {
	background: var(--lsr-primary);
	color: var(--lsr-white);
	border-color: var(--lsr-primary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.lsr-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding-top: 16px;
}

.lsr-pagination .page-numbers,
.lsr-pagination a {
	font-family: var(--lsr-sans);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--lsr-charcoal-3);
	text-decoration: none;
	padding: 8px 14px;
	border: 1px solid var(--lsr-gray-3);
	display: inline-block;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lsr-pagination .page-numbers:hover,
.lsr-pagination a:hover,
.lsr-pagination a:focus-visible,
.lsr-pagination .current {
	background: var(--lsr-primary);
	color: var(--lsr-white);
	border-color: var(--lsr-primary);
}

/* ==========================================================================
   Responsive — Tablet (Elementor breakpoint: max-width 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.lsr-market-card {
		padding: 44px 36px;
	}

	.lsr-listing-meta {
		flex-wrap: wrap;
		gap: 10px;
	}

	.lsr-zillow-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
}

/* ==========================================================================
   Responsive — Mobile (Elementor breakpoint: max-width 767px)
   ========================================================================== */
@media screen and (max-width: 767px) {
	.lsr-market-card {
		padding: 40px 28px;
	}

	.lsr-market-deco {
		font-size: 80px;
	}

	.lsr-creds {
		flex-wrap: wrap;
		gap: 20px;
	}

	.lsr-ticker-inner {
		padding: 0 24px;
		gap: 24px;
	}

	.lsr-mobile-nav-toggle {
		display: block;
	}

	.lsr-blog-filter {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 4px;
		/* Smooth momentum scrolling via JS-driven scroll — CSS property removed as deprecated */
	}

	.lsr-nearby-links {
		flex-direction: column;
	}

	.lsr-listing-card {
		max-width: 100%;
	}

	.lsr-highlight-card {
		padding: 24px 20px;
	}

	.lsr-zillow-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.lsr-stat-chip {
		left: 0;
		bottom: 24px;
	}

	.lsr-footer {
		grid-template-columns: 1fr;
	}
}