/* Levine Homes Widgets — helper CSS only. Design system lives in the theme's css/main.css. */

/* Editor pitfall fix: scroll reveals never fire inside the Elementor editor preview,
   so force the revealed state there. */
body.elementor-editor-active .rv {
	opacity: 1 !important;
	transform: none !important;
}

/* Replicates the static build's inline paragraph rhythm (margin-top:1.3rem after
   a heading, 1rem between paragraphs) for widget-rendered rich text bodies. */
.lh-body > p:first-child { margin-top: 1.3rem; }
.lh-body > p + p { margin-top: 1rem; }
.lh-body--flush > p:first-child { margin-top: 0; }

/* main.css styles .article-copy h2/h3/ul/ol/img spacing but never restores a
   paragraph margin after the global `* { margin:0 }` reset — on the static build
   consecutive <p> in an article render with no gap at all. Blog bodies are almost
   entirely paragraphs, so supply the rhythm the headings already assume. */
.article-copy > p + p,
.article-copy > p + ul,
.article-copy > p + ol { margin-top: 1.15rem; }
.article-copy > ul + p,
.article-copy > ol + p { margin-top: 1.15rem; }
.article-copy > blockquote { margin: 1.6rem 0; padding-left: 1.2rem; border-left: 2px solid var(--brass); }

/* main.css stretches every body image to the full 820px column (width:100%), so a
   portrait photo from the import renders 1000-1800px tall and swallows the screen.
   `max-height` alone does NOT fix it: with an explicit width the browser clamps the
   height and distorts the picture (measured 820x620 on a 1600x2414 original), so the
   width has to go back to auto for the aspect ratio to drive it.
   620px keeps the common 3:2 landscape (546px tall) flush to the column exactly as
   before — only genuine outliers narrow. */
.lh-sec .article-copy img {
	width: auto;
	max-width: 100%;
	max-height: 620px;
	display: block;
	margin-inline: auto;
}

/* ---------- Single post: header ---------- */
/* .display is tuned for one-or-two-word marketing headlines; blog titles are full
   sentences, so the 6.2rem cap turns them into a wall. Step down to h-xl scale and
   trim the hero's top padding, which on a plain (image-less) hero reads as a gap. */
.page-hero--article { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.page-hero--article .article-head .display {
	font-size: clamp(2rem, 3.7vw, 3.2rem);
	line-height: 1.06;
	letter-spacing: -.03em;
	max-width: 26ch;
}

/* The header and body are two sections but read as one article, so the body's
   full --section-pad stacks under the byline as a second dead band. */
.lh-sec.article-body { padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }

/* ---------- Single post: table of contents ---------- */
.article-toc {
	width: min(820px, 100%);
	margin: 0 auto 2.75rem;
	padding: 1.5rem 1.7rem 1.6rem;
	background: var(--cream-2);
	border-left: 2px solid var(--brass);
}
.article-toc .toc-label {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--brass);
	margin-bottom: .95rem;
}
.article-toc .toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.article-toc .toc-list--num { counter-reset: toc; }
.article-toc .toc-list--num > li::before {
	counter-increment: toc;
	content: counter(toc) ".";
	color: var(--brass);
	font-weight: 700;
	margin-right: .5em;
}
.article-toc .toc-lvl-3 { padding-left: 1.15rem; }
.article-toc a {
	color: var(--ink);
	text-decoration: none;
	font-size: .96rem;
	line-height: 1.45;
	border-bottom: 1px solid transparent;
	transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.article-toc a:hover { color: var(--brass); border-bottom-color: var(--brass); }
/* Sticky header would otherwise cover the heading an anchor jumps to. */
.article-copy h2, .article-copy h3 { scroll-margin-top: 7rem; }

/* ---------- Single post: author box ---------- */
.article-author {
	width: min(820px, 100%);
	margin: 3.5rem auto 0;
	padding-top: 2.25rem;
	border-top: 1px solid var(--line-strong);
	display: grid;
	grid-template-columns: 104px 1fr;
	gap: 1.75rem;
	align-items: start;
}
.article-author--flat { grid-template-columns: 1fr; }
.article-author .aa-photo img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; }
.article-author .aa-name { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-top: .8rem; }
.article-author .aa-co {
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--brass);
	margin-top: .45rem;
}
.article-author .aa-role { color: var(--ink-soft); font-size: .95rem; margin-top: .7rem; }
.article-author .aa-bio { color: var(--ink-soft); line-height: 1.75; margin-top: .9rem; }
.article-author .link-arrow { margin-top: 1.2rem; }
@media (max-width: 560px) {
	.article-author { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ---------- Blog index: category filter ---------- */
.news-filter { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.news-filter .nf-item {
	display: inline-flex;
	align-items: baseline;
	gap: .5em;
	padding: .62rem 1.05rem;
	border: 1px solid var(--line-strong);
	color: var(--ink);
	text-decoration: none;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.news-filter .nf-item:hover { background: var(--cream-2); border-color: var(--brass); color: var(--brass); }
.news-filter .nf-item.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.news-filter .nf-item.is-active:hover { background: var(--ink); color: var(--cream); }
.news-filter .nf-n { font-size: .62rem; font-weight: 700; letter-spacing: .1em; opacity: .6; }

.news-empty { padding-block: 2.5rem; color: var(--ink-soft); }

/* ---------- Blog index: pagination ---------- */
.news-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2.75rem; }
.news-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: .68rem .8rem;
	border: 1px solid var(--line-strong);
	color: var(--ink);
	text-decoration: none;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.news-pager a.page-numbers:hover { background: var(--cream-2); border-color: var(--brass); color: var(--brass); }
.news-pager .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--cream); }
/* paginate_links renders the gap as a bare span — keep it as a hint, not a button. */
.news-pager .page-numbers.dots { border-color: transparent; min-width: 1.5rem; padding-inline: .2rem; }
.news-pager .prev, .news-pager .next { letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; }
@media (max-width: 560px) {
	.news-pager .page-numbers { min-width: 2.4rem; padding: .58rem .6rem; font-size: .72rem; }
}

/* Widgets are placed in full-width stretched sections; each widget's own .wrap
   centers content, so the host column must never constrain it. */
.elementor-widget-wrap > .elementor-element.lh-widget { width: 100%; }

/* Section background presets (Style tab > Section > Background Preset). */
.lh-sec--cream { background: var(--cream); }
/* Static always pairs cream-2 with a hairline border-block. */
.lh-sec--cream-2 { background: var(--cream-2); border-block: 1px solid var(--line); }
.lh-sec--paper { background: var(--paper); }

/* Section overlay: scoped so the pseudo-element only exists when enabled,
   keeping static sections' own pseudo-elements untouched. */
.lh-sec.lh-has-overlay { position: relative; }
.lh-sec.lh-has-overlay::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.lh-sec.lh-has-overlay > * { position: relative; z-index: 1; }

/* Generic buttons row for widgets whose static section had no action row. */
.lh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2.2rem; }

/* h-xl page-hero titles default to white (project/location pages); pages that
   need another tone (impact = cream) override via the Title color control. */
.lh-sec.page-hero h1.h-xl { color: var(--white); }

/* Elementor's `.elementor img { height: auto }` reset (0,1,1) outranks main.css's
   single-class .brand-logo sizing (0,1,0), letting the wordmark render at natural
   634x129. Re-assert the static sizes with higher specificity. */
.elementor img.brand-logo { height: 42px; width: auto; }
@media (max-width: 1300px) { .elementor img.brand-logo { height: 36px; } }
@media (max-width: 480px) { .elementor img.brand-logo { height: 32px; } }
.elementor .footer-about img.brand-logo { height: 40px; }

/* ============================================================
   LH FAQ — native <details> accordion (Location Page SOP §7)
   ============================================================ */
.lh-faq .faq-split { display: grid; grid-template-columns: 34% 1fr; gap: clamp(2rem, 4.5vw, 5rem); align-items: start; }
.lh-faq .faq-stack .faq-head { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
@media (max-width: 900px) {
	.lh-faq .faq-split { grid-template-columns: 1fr; }
}
.lh-faq .faq-lede { margin-top: 1.3rem; }
.lh-faq .faq-list { display: flex; flex-direction: column; gap: 0; }

.lh-faq .faq-item { border-top: 1px solid var(--line); }
.lh-faq .faq-list > .faq-item:last-child { border-bottom: 1px solid var(--line); }
.on-dark .faq-item, .on-dark .faq-list > .faq-item:last-child { border-color: var(--line-light); }

.lh-faq .faq-q {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	padding: 1.5rem 0; cursor: pointer; list-style: none;
	transition: color .35s var(--ease-out);
}
.lh-faq .faq-q::-webkit-details-marker { display: none; }
.lh-faq .faq-q:hover .faq-q-text { color: var(--brass); }
.lh-faq .faq-q-text {
	font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 700; line-height: 1.3;
	letter-spacing: -.015em; color: var(--ink); transition: color .35s var(--ease-out);
}
.on-dark .faq-q-text { color: var(--cream); }

/* Stroke-drawn plus that becomes a minus when the item is open. */
.lh-faq .faq-mark { position: relative; flex: 0 0 auto; width: 1em; height: 1em; font-size: 1.1rem; color: var(--brass); }
.lh-faq .faq-mark::before, .lh-faq .faq-mark::after {
	content: ""; position: absolute; inset: 0; margin: auto; background: currentColor;
	transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.lh-faq .faq-mark::before { width: 100%; height: 1px; }
.lh-faq .faq-mark::after { width: 1px; height: 100%; }
.lh-faq .faq-item[open] .faq-mark::after { transform: rotate(90deg); opacity: 0; }

.lh-faq .faq-a { padding: 0 0 1.7rem; max-width: 62ch; }
.lh-faq .faq-a > p + p { margin-top: 1rem; }
.lh-faq .faq-a a { color: var(--brass); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .faq-a { color: var(--cream); opacity: .82; }

/* ============================================================
   LH Map — Google embed + NAP (Location Page SOP §8)
   ============================================================ */
.lh-map .lh-map-split { display: grid; grid-template-columns: 38% 1fr; gap: clamp(2rem, 4.5vw, 5rem); align-items: center; }
.lh-map .lh-map-split--text-right { grid-template-columns: 1fr 38%; }
.lh-map .lh-map-split--text-right .lh-map-text { order: 2; }
.lh-map .lh-map-split--text-right .lh-map-frame { order: 1; }
@media (max-width: 900px) {
	.lh-map .lh-map-split, .lh-map .lh-map-split--text-right { grid-template-columns: 1fr; }
	.lh-map .lh-map-split--text-right .lh-map-text { order: 0; }
	.lh-map .lh-map-split--text-right .lh-map-frame { order: 0; }
}
.lh-map .lh-map-body { margin-top: 1.3rem; }
.lh-map .lh-map-body > p + p { margin-top: 1rem; }

.lh-map .lh-nap { margin-top: 2rem; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.6rem; align-items: baseline; }
.lh-map .lh-nap dt {
	font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
	font-weight: 600; color: var(--brass);
}
.lh-map .lh-nap dd { color: var(--ink); font-weight: 500; }
.lh-map .lh-nap dd a { transition: color .35s var(--ease-out); }
.lh-map .lh-nap dd a:hover { color: var(--brass); }
.on-dark .lh-nap dd { color: var(--cream); }

.lh-map .lh-map-frame { position: relative; aspect-ratio: 1 / .75; overflow: hidden; background: var(--paper); }
.lh-map .lh-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.lh-map .lh-map-full .lh-map-frame { aspect-ratio: 1 / .34; }
@media (max-width: 900px) {
	.lh-map .lh-map-full .lh-map-frame { aspect-ratio: 1 / .8; }
}

/* Arrow links sitting on a dark band inherit the ink colour from main.css and
   render at ~1.05:1 against --ink-deep. Lift them to cream. */
.on-dark .link-arrow,
.sec--dark .link-arrow { color: var(--cream); border-bottom-color: var(--line-light); }
.on-dark .link-arrow:hover,
.sec--dark .link-arrow:hover { color: var(--brass-bright); border-bottom-color: var(--brass-bright); }

/* Testimonials head — the static .testi section had no head, so give the
   optional one spacing that matches the centred slide beneath it. */
.testi-head { margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }


/* Page-hero "Content Column" head width. .policy-copy is min(820px,100%) centred
   inside the gutter-padded .wrap, so the hero wrap has to reserve the same
   gutters for the two columns to share a left edge. */
.page-hero .wrap.policy-head { max-width: calc(820px + var(--gutter) * 2); }
.page-hero .wrap.policy-head .lede { max-width: none; }

/* Footer bottom bar carries two legal links; group them so space-between still
   pins the copyright left and the pair right. */
.footer-bottom .footer-legal { display: flex; flex-wrap: wrap; gap: 1.6rem; }

/* .page-hero--plain zeroes its bottom padding, so a hero that ends in buttons
   collides with whatever band follows it (404, thank-you). */
.page-hero--plain .hero-actions { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* Contact split: the form column carries a GHL embed and needs more room than
   the info column. Above the 900px stacking breakpoint only. */
@media (min-width: 901px) {
  .split--f57 > .col-text:first-child { grid-column: span 5; }
  .split--f57 > .col-text:last-child  { grid-column: span 7; }
  .split--f48 > .col-text:first-child { grid-column: span 4; }
  .split--f48 > .col-text:last-child  { grid-column: span 8; }
}

/* The LeadConnector form can't report its height, so it has to be sized by hand.
   Cross-origin rules it out, GHL's form_embed.js hides this particular embed, and
   the form answers no height-request message — it only ever posts "iframeLoaded".
   The form gets TALLER as its column gets NARROWER, and the column width doesn't
   move with the viewport monotonically — it shrinks to ~463px just above the 900px
   stacking breakpoint, then jumps back to ~820px once the columns stack. Hence the
   non-monotonic ladder below. Measured document heights by form width: 820w=949,
   737w=969, 620w=1044, 493w=1064, 390w=1104, 352w=1124.
   Don't inflate these for validation errors: ~150px of every value is GHL's own
   fixed padding below the submit button, so a failed submit still shows every
   error message and the button without any extra room. */
.ghl-form-frame { min-height: 975px; }
@media (max-width: 1399px) { .ghl-form-frame { min-height: 1050px; } }
@media (max-width: 1199px) { .ghl-form-frame { min-height: 1085px; } }
@media (max-width: 900px)  { .ghl-form-frame { min-height: 1070px; } }
@media (max-width: 560px)  { .ghl-form-frame { min-height: 1160px; } }