/*!
Theme Name: LGE Design Build 2026
Theme URI: https://lgedesignbuild.com/
Author: LGE Design Build
Author URI: https://lgedesignbuild.com/
Description: The 2026 LGE Design Build website. Rebuilt from the earlier LGE theme (Digital Interactive / STUDIO JVCKSON, based on Underscores).
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:
Tags:

This theme, like WordPress, is licensed under the GPL.

LGE is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/* ============================================================
   PAGE TRANSITIONS REMOVED
   ------------------------------------------------------------
   The theme hid the page on load and relied on JavaScript to
   reveal it, across three layers:

     1. header.php inline CSS setting #page and #footer to opacity:0
     2. #intro-animation — a full-viewport Lottie overlay at z-index 500
     3. .wiper — a full-screen panel at z-index 999 driven by GSAP

   Each was undone only by a JS callback, so any stall left the
   site blank. Measured before this change: 3.5s after load, #page
   and #footer were still at opacity 0, the overlay had no .go-away
   class, and the wiper still covered the viewport.

   This stylesheet loads after the inline block in header.php, so
   these rules take precedence. Pages now render immediately.
   ============================================================ */

#page,
#footer {
	opacity: 1 !important;
	visibility: visible !important;
}

#intro-animation,
.wiper {
	display: none !important;
}

/* ============================================================
   PROJECTS INDEX
   ------------------------------------------------------------
   All projects on one page, filtered by building type and
   searchable. Filtering runs in the browser, so it is instant
   and behaves identically on mobile.
   ============================================================ */

.lge-projects {
	--lge-navy: #071A24;
	--lge-gold: #FDAF3F;
	--lge-ink: #3C464F;
	--lge-muted: #8A939A;
	--lge-hair: #E2E6E8;

	background: #fff;
	padding: clamp(40px, 6vw, 80px) 0 clamp(64px, 9vw, 120px);
}

.lge-projects-inner {
	max-width: 1480px;
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

/* ---------- Controls ---------- */
.lge-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px 32px;
	border-bottom: 1px solid var(--lge-hair);
	padding-bottom: 14px;
	margin-bottom: 8px;
}

/* Filters scroll horizontally rather than stacking into a tall block
   or running off the edge of the screen. */
.lge-filters {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2.4vw, 34px);
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	margin: 0 -4px;
	padding: 0 4px 2px;
	min-width: 0;
	max-width: 100%;
}
.lge-filters::-webkit-scrollbar { display: none; }

.lge-filter {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 0;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	flex: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--lge-muted);
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
.lge-filter:hover { color: var(--lge-navy); }
.lge-filter.is-active {
	color: var(--lge-navy);
	border-bottom-color: var(--lge-navy);
}
.lge-filter:focus-visible {
	outline: 2px solid var(--lge-gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Search ---------- */
.lge-search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 1 280px;
	min-width: 0;
	max-width: 100%;
	padding-bottom: 4px;
}

/* The theme sizes inline SVGs to fill their container, which made the
   magnifier expand across the whole row and squeezed the input down to
   a couple of pixels. Pin the icon to its own size. */
.lge-search-icon {
	color: var(--lge-muted);
	flex: 0 0 16px;
	width: 16px !important;
	height: 16px !important;
	max-width: 16px !important;
}

.lge-search-input {
	appearance: none;
	border: 0;
	background: none;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 6px 22px 6px 0;
	font-family: inherit;
	font-size: 16px; /* 16px avoids iOS zooming the page on focus */
	color: var(--lge-navy);
}
.lge-search-input::placeholder { color: var(--lge-muted); }
.lge-search-input:focus { outline: none; }
.lge-search:focus-within .lge-search-icon { color: var(--lge-navy); }

.lge-search-clear {
	position: absolute;
	right: 0;
	appearance: none;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--lge-muted);
	padding: 2px 4px;
}
.lge-search-clear:hover { color: var(--lge-navy); }

/* ---------- Result count ---------- */
.lge-result-count {
	margin: 14px 0 26px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lge-muted);
}

/* ---------- Grid ---------- */
.lge-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.4vw, 36px);
}

.lge-card { min-width: 0; }
.lge-card[hidden] { display: none; }

.lge-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.lge-card-media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #EEF0F1;
	border-radius: 2px;
}
.lge-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.lge-card-link:hover .lge-card-media img { transform: scale(1.04); }

.lge-card-body { display: block; padding: 14px 2px 0; }

.lge-card-title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--lge-navy);
	transition: color .2s ease;
}
.lge-card-link:hover .lge-card-title { color: var(--lge-gold); }

.lge-card-meta {
	display: block;
	margin-top: 5px;
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--lge-muted);
}

.lge-card-link:focus-visible {
	outline: 2px solid var(--lge-gold);
	outline-offset: 4px;
	border-radius: 2px;
}

/* ---------- Empty state ---------- */
.lge-empty {
	margin: 48px 0 0;
	font-size: 17px;
	color: var(--lge-ink);
}
.lge-reset {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	padding: 0;
	font: inherit;
	color: var(--lge-navy);
	cursor: pointer;
}
.lge-reset:hover { color: var(--lge-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.lge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Below this width the filter row and the search no longer share a line
   comfortably, so stack them instead of letting the search wrap into an
   orphaned second row. */
@media (max-width: 900px) {
	.lge-controls {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	/* In a column flex container flex-basis sizes the height, not the
	   width — so the children kept their intrinsic width and the filter
	   row ran off-screen with no way to scroll to the later types.
	   Constrain both children to the container explicitly. */
	.lge-controls > * {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		flex: 0 0 auto;
	}

	/* Search sits above the filters so both stay in thumb reach. */
	.lge-search {
		order: -1;
		border-bottom: 1px solid var(--lge-hair);
		padding-bottom: 8px;
		margin-bottom: 6px;
	}
	.lge-filters {
		border-bottom: 1px solid var(--lge-hair);
		padding-bottom: 4px;
	}
}

@media (max-width: 680px) {
	.lge-filter { font-size: 14px; }
	.lge-grid { grid-template-columns: 1fr; gap: 26px; }
	.lge-card-media { aspect-ratio: 16 / 10; }
	.lge-result-count { margin: 12px 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.lge-card-media img,
	.lge-filter { transition: none; }
	.lge-card-link:hover .lge-card-media img { transform: none; }
}