/*
Theme Name: Second and Seneca 2026
Description: FSE theme for secondandseneca.lwh.dev (block templates/parts + ACF blocks)
Theme URI: https://localwebhub.com
Version: 2.8.0
Author: Dmitriy Agadzhanov
Author URI: https://localwebhub.com
*/

:root {
	--theme-menu-height: 51px;
	--theme-content-padding: 15px;

	/* Responsive spacing - override WordPress preset spacing */
	--wp--preset--spacing--small: 15px;
	--wp--preset--spacing--medium: 30px;
	--wp--preset--spacing--large: 60px;
	--wp--preset--spacing--x-large: 90px;

	/* ---- Design tokens (Dapper / Second & Seneca) --------------------------
	   Colors live in theme.json as the palette + the `sunset` gradient preset;
	   these are the values that have no theme.json equivalent. */

	/* Sunset gradient. Single source of truth is theme.json's gradient preset —
	   aliased here so block CSS reads one short name. The comp used seven
	   slightly different angles; normalized to one by agreement. */
	--lwh-sunset: var(--wp--preset--gradient--sunset);
	--lwh-sunset-solid: #ffb162; /* flat fallback where background-clip:text is unsupported */

	/* Photo scrims, so overlaid Linen text keeps its contrast */
	--lwh-scrim-strong: rgba(0, 0, 0, 0.3);
	--lwh-scrim-soft: rgba(0, 0, 0, 0.2);

	/* The rounded top on the Deep Sea panels */
	--lwh-panel-radius: 60px;

	/* Clipped bottom-right corner — the brand's signature shape.
	   Buttons: 20px 20px 0 20px. Carousel pill: 10px 10px 0 10px. */
	--lwh-clip-corner: 20px;
	--lwh-clip-corner-sm: 10px;
}

@media (min-width: 992px) {
	:root {
		--theme-content-padding: 30px;

		/* Desktop spacing - override WordPress preset spacing */
		--wp--preset--spacing--small: 30px;
		--wp--preset--spacing--medium: 60px;
		--wp--preset--spacing--large: 90px;
		--wp--preset--spacing--x-large: 120px;

		--lwh-panel-radius: 85px;
	}
}
@media (min-width: 1200px) {
	:root {
		--theme-menu-height: 71px;
	}
}

html {
	scroll-behavior: smooth;
}

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

/* ---------------------------------------------------------------------------
   Typography — Richmond Display (display) + Rig Sans (sans), per the Dapper
   design. Both load from the Adobe Fonts kit registered as `lwh-fonts`.
   Sizes reference the theme.json fluid presets; these classes mirror
   styles.elements.h1–h6 + base Body so the type styles are usable both on
   native heading tags (via theme.json) and as utility classes on any element.
   The .has-*-font-size preset classes (added when an editor picks a size in
   the UI) are paired in too — WP only generates their font-size, so without
   this they'd keep the body line-height/tracking, far too loose at H1 scale.

   Comp reference: H1/H2 124/125 · H3 48/48 · body 20/29 · eyebrow 18 @ 10%
   tracking uppercase · legal 15/20. H1 and H2 are the same size by design.
--------------------------------------------------------------------------- */

.acf-block-preview,
body:not(.wp-admin) {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--body, 20px);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.subhead {
	margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.has-h-1-font-size,
.has-h-2-font-size,
.has-h-3-font-size,
.has-h-4-font-size,
.has-h-5-font-size,
.has-h-6-font-size {
	font-family: var(--wp--preset--font-family--display, serif);
	font-weight: 300;
	letter-spacing: 0;
}

.h1,
.has-h-1-font-size {
	font-size: var(--wp--preset--font-size--h-1, 124px);
	line-height: 1.01;
}

.h2,
.has-h-2-font-size {
	font-size: var(--wp--preset--font-size--h-2, 124px);
	line-height: 1.01;
}

.h3,
.has-h-3-font-size {
	font-size: var(--wp--preset--font-size--h-3, 48px);
	line-height: 1;
}

.h4,
.has-h-4-font-size {
	font-size: var(--wp--preset--font-size--h-4, 48px);
	line-height: 1;
}

.h5,
.has-h-5-font-size {
	font-size: var(--wp--preset--font-size--h-5, 24px);
	line-height: 1.1;
}

.h6,
.has-h-6-font-size {
	font-size: var(--wp--preset--font-size--h-6, 20px);
	line-height: 1.2;
}

.subhead,
.has-subhead-font-size {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--subhead, 24px);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: 0;
}

/* Body-size preset picked on a heading: restore body metrics too */
.has-body-font-size {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 300;
	line-height: 1.45;
	letter-spacing: 0;
}

/* Legal / copyright scale */
.small,
.has-small-font-size {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--small, 15px);
	font-weight: 300;
	line-height: 1.333;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Block style variations (registered in inc/block-styles.php)
--------------------------------------------------------------------------- */

/* Sunset gradient headline. The gradient itself is theme.json's `sunset`
   preset, aliased to --lwh-sunset in :root. */
.is-style-sunset {
	background: var(--lwh-sunset);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Keep descenders from being clipped by the tight comp line-height */
	padding-bottom: 0.06em;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
	.is-style-sunset {
		background: none;
		color: var(--lwh-sunset-solid);
	}
}

/* Forced-colors / Windows high contrast: transparent text would vanish */
@media (forced-colors: active) {
	.is-style-sunset {
		background: none;
		color: CanvasText;
	}
}

/* Eyebrow / tag — Rig Sans Bold, wide tracking, uppercase */
.is-style-eyebrow,
.eyebrow,
.has-eyebrow-font-size {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--eyebrow, 18px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Scroll reveal
   Armed only by the `js-reveal` class that functions.php prints inline in the
   head — so with JS off, or inside the block editor iframe where that script
   never runs, none of this applies and content renders plainly visible.
   js/reveal.js only ever ADDS .is-revealed.
--------------------------------------------------------------------------- */

.js-reveal [data-reveal],
.js-reveal [data-reveal-group] > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.8s ease, transform 0.8s ease;
	will-change: opacity, transform;
}

.js-reveal [data-reveal].is-revealed,
.js-reveal [data-reveal-group] > .is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Belt and braces: ACF preview mode can render into the parent document rather
   than the canvas iframe, where `js-reveal` would be present. Never hide there. */
.editor-styles-wrapper [data-reveal],
.editor-styles-wrapper [data-reveal-group] > *,
.acf-block-preview [data-reveal],
.acf-block-preview [data-reveal-group] > * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal],
	.js-reveal [data-reveal-group] > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

body:not(.wp-admin) [id] {
	scroll-margin-top: var(--theme-menu-height);
}

/* Section-level ACF blocks own their vertical spacing — cancel the blockGap
   margin that constrained layouts (post-content) add between top-level
   siblings. :root matches core's `:root :where(.is-layout-constrained) > *`
   specificity floor, then the class outranks it. */
:root .wp-block-acf-section,
:root .wp-block-acf-hero,
:root .wp-block-acf-copy,
:root .wp-block-acf-spacer,
:root .wp-block-acf-intro,
:root .wp-block-acf-image-band,
:root .wp-block-acf-amenities,
:root .wp-block-acf-leasing-footer {
	margin-block-start: 0;
	margin-block-end: 0;
}

.theme-container {
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--theme-content-padding);
	padding-right: var(--theme-content-padding);
}

.theme-row {
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(-1 * var(--theme-content-padding));
	margin-left: calc(-1 * var(--theme-content-padding));
}

.theme-row > * {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: var(--theme-content-padding);
	padding-left: var(--theme-content-padding);
	gap: var(--theme-content-padding);
}

@media (min-width: 992px) {
	.theme-col-lg {
		flex: 1 0 0%;
	}

	.theme-col-lg-auto {
		flex: 0 0 auto;
		width: auto;
	}

    .theme-lg-two-col {
		flex: 1 1 calc((100% - (calc(var(--theme-content-padding)) * 1)) / 2);
    }

	.theme-lg-three-col {
       flex: 1 1 calc((100% - (calc(var(--theme-content-padding)) * 2)) / 3);
    }

    .theme-lg-four-col {
       flex: 1 1 calc((100% - (calc(var(--theme-content-padding)) * 3)) / 4);
    }

}

.object-fit-cover > img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.object-fit-contain > img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

.alignleft,
.alignright,
.aligncenter {
	display: block;
	margin: 0 auto 30px auto;
}

@media (min-width:768px) {
	.alignleft {
		margin: 0 20px 20px 0;
		float: left;
	}

	.alignright {
		float: right;
		margin: 0 0 20px 20px;
	}
}

.article img {
	max-width: 100%;
	height: auto;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px);
	position: absolute !important;
	white-space: nowrap;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

@media (max-width: 575px) {
	.sm-ignore-br br {
		display: none;
	}
}

@media (max-width: 767px) {
	.md-ignore-br br {
		display: none;
	}
}

@media (max-width: 991px) {
	.lg-ignore-br br {
		display: none;
	}
}

.acf-block-preview * {
	box-sizing: border-box;
}

.acf-block-preview > section,
.acf-block-preview > div {
	font-size: 12px;
	border: 1px solid #ccc;
	min-height: 50px;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.acf-block-preview > div:before,
.acf-block-preview > section:before {
	content: attr(data-blockname);
	position: absolute;
	top: 0;
	left: 0;
	padding: 2px;
	font-size: .875rem;
	background: #ccc;
	color: #000;
	z-index: 4;
}

.vimeo--video[data-fill="1"] {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.vimeo--video[data-fill="1"] iframe {
	position: absolute;
}

.has-fixed-background {
	background-attachment: fixed;
}

@supports (-webkit-overflow-scrolling: touch) {
	.has-fixed-background {
		background-attachment: scroll;
	}
}

@media (prefers-reduced-motion: reduce) {
	.has-fixed-background {
		background-attachment: scroll;
	}
}

.grecaptcha-badge{
	visibility: collapse !important;
}

.recaptcha--terms {
	font-size: .6rem;
}

.single-post--content-width > [data-blockname],
.single-post--content-width > .alignfull {
	margin-left: -15px;
	margin-right: -15px;
}

@media (min-width: 780px) {
	.single-post--content-width > [data-blockname],
	.single-post--content-width > .alignfull {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - ((100vw - var(--scrollbar-width)) / 2));
		margin-right: calc(50% - ((100vw - var(--scrollbar-width)) / 2));
	}
}

.main--section > p,
.main--section > .wp-block-heading,
.main--section > .wp-block-list {
	max-width: var(--wp--style--global--content-size, 900px);
	margin: 0 auto 1em;
	padding: 0 30px;
}

.main--section > .wp-block-list {
	padding-left: calc(30px + 1em);
}