/*
Theme Name: Astra Child — Finney Crossing
Template: astra
Version: 1.0.0
Author: Brandthropology
Description: Finney Crossing styling layered on Astra.
*/

/* ---- Design Tokens ----
   The one place the brand palette is defined. This file loads on every page,
   so every stylesheet in this theme and the finney-listings-template plugin
   reads its colors from here rather than declaring its own copy of the hex. */
:root {
	/* Brand palette (style guide) */
	--fc-green: #4a7c3a;
	--fc-green-dark: #355829;
	--fc-green-light: #7ba368; /* the green used on navy and ink backgrounds */
	--fc-green-pale: #e5eee0;
	--fc-ink: #1f2419;
	--fc-warm-gray: #6b6e63;
	--fc-line: #d8d4c5;
	--fc-mist: #e7e3dc;
	--fc-mist-dark: #dad5c9;
	--fc-slate-900: #252f4c; /* Navy in the brand style guide */
	--fc-white: #ffffff;
	/* Heritage Purple, kept as an intentional accent (Tenant Login, the
	   sustainability CTA) after the 2026-08-24 rebrand made green the accent. */
	--fc-heritage-purple: #6B3E8F;
	--fc-heritage-purple-dark: #5B357A;

	/* Neutral UI grays for the header, nav and search chrome. */
	--fc-slate-700: #374151;
	--fc-slate-500: #6b7280;
	--fc-slate-300: #d1d5db;

	/* Short names the template stylesheets (home.css, news.css, contact.css
	   and so on) are written against. Aliases only, never a second hex. */
	--green: var(--fc-green);
	--green-dark: var(--fc-green-dark);
	--green-light: var(--fc-green-light);
	--green-pale: var(--fc-green-pale);
	--ink: var(--fc-ink);
	--warm-gray: var(--fc-warm-gray);
	--line: var(--fc-line);
	--mist: var(--fc-mist);
	--mist-dark: var(--fc-mist-dark);

	/* Corner scale: controls (buttons, inputs, toggles) 3px, status tags
	   square, cards and photos 8px, map frames 16px, and full pills only for
	   chips floating on a photo or a map. Round icon buttons stay circles. */
	--fc-radius-control: 3px;
	--fc-radius-card: 8px;
	--fc-radius-stage: 16px;
	--fc-radius-pill: 999px;
	/* Elevation scale, all tinted with ink rather than pure black: resting
	   cards, chips floating on a photo or map, cards raised over a map or a
	   page section, and the lift on hover. */
	--fc-shadow-rest: 0 1px 2px rgba(31, 36, 25, 0.10);
	--fc-shadow-float: 0 4px 16px rgba(31, 36, 25, 0.14);
	--fc-shadow-raised: 0 10px 28px rgba(31, 36, 25, 0.14);
	--fc-shadow-hover: 0 18px 40px rgba(31, 36, 25, 0.16);

	/* Header dropdown and mega menu chrome. */
	--fc-radius-sm: 8px;
	--fc-radius-md: 12px;
	--fc-shadow-lg: 0 8px 30px rgba(0,0,0,0.1);

	/* Type system — Adobe Fonts family names (see style guide), except
	   --font-accent which is Inter Tight (Google Fonts, weight 400). This
	   file is header/nav/footer chrome, which all sits on the body/UI face;
	   display and accent are defined for cross-file consistency. */
	--font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
	--font-accent:  'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
	--font-body:    'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Shared page frame: the header, the homepage hero copy and the homepage
	   search bar all use this, so the logo, the hero headline and the search
	   card's left edge sit on one line at every width. */
	--fc-frame-max: 1280px;
	--fc-frame-gutter: 60px;
}
@media (max-width: 1024px) {
	:root { --fc-frame-gutter: 30px; }
}
@media (max-width: 640px) {
	:root { --fc-frame-gutter: 20px; }
}

/* =========================================================
   MAIN CONTENT — Astra's base stylesheet sets #primary{margin:4em 0}
   sitewide, and the Customizer's inline CSS raises it further at desktop
   width via .ast-plain-container.ast-no-sidebar #primary{margin-top:60px}
   (higher specificity than a bare #primary). !important beats both so
   content starts flush under the header on every page/template, keeping
   the bottom margin intact.
   ========================================================= */

#primary {
	margin-top: 0 !important;
}

/* =========================================================
   Astra's core CSS sets #page{min-height:100vh} to pin the footer to the
   bottom on short pages. On real iOS Safari/Chrome, 100vh locks to the
   browser's tallest possible viewport (toolbar collapsed), which is taller
   than what's on screen once the toolbar is showing, leaving blank space
   below the footer once you scroll to the end. Doesn't reproduce in desktop
   devtools mobile emulation since that runs a different engine. 100dvh
   tracks the real, current viewport instead.
   ========================================================= */

#page {
	min-height: 100dvh;
}

/* Google Maps zoom and fullscreen buttons, on every map on the site: the
   site's control shape and float shadow (Google's inline styles need the
   !important). */
.gm-style .gm-fullscreen-control,
.gm-style .gm-bundled-control .gmnoprint > div {
	border-radius: var(--fc-radius-control) !important;
	box-shadow: var(--fc-shadow-float) !important;
	overflow: hidden;
}

/* =========================================================
   HEADER — targets Astra's .main-header-menu / ast-builder
   ========================================================= */

.site-header,
header.site-header {
	border: 0 !important;
	box-shadow: none !important;
	font-family: var(--font-body);
}

.ast-above-header-wrap,
.ast-above-header-bar,
.ast-main-header-wrap,
.main-header-bar,
.ast-main-header-wrap .main-header-bar {
	background: var(--fc-white) !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Astra boxes the header in its own 1240px .ast-container with ~20px
   padding. Put it on the shared page frame instead (see --fc-frame-*). */
.site-primary-header-wrap.ast-container {
	max-width: calc(var(--fc-frame-max) + 2 * var(--fc-frame-gutter)) !important;
	padding-left: var(--fc-frame-gutter) !important;
	padding-right: var(--fc-frame-gutter) !important;
}

#ast-desktop-header,
.ast-desktop-header {
	border-bottom: 1px solid #e8e8e2 !important;
}

/* Sticky header bar on mobile */
@media (max-width: 921px) {
	.site-header {
		position: sticky !important;
		top: 0;
		z-index: 100;
		transition: box-shadow 0.2s ease;
	}

	/* Shadow only once scrolled off the top (.is-scrolled toggled via JS
	   in mobile-menu.js), removed again at the top of the page. */
	.site-header.is-scrolled {
		box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
	}
}

/* Top contact strip — use a Astra HFB HTML widget with class .fc-header-contact */
.fc-header-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0 12px;
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1;
	color: var(--fc-slate-500);
}
.fc-header-contact a {
	color: var(--fc-slate-500);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: color 0.15s;
	text-decoration: none;
}
.fc-header-contact a:hover { color: var(--fc-green-dark); }
.fc-header-contact i { font-size: 12px; color: var(--fc-green); }

/* Active state for the two page links in the strip, matching the main nav's
   current-page treatment. Static HTML widget, so this is driven off body
   classes (see functions.php) rather than current-menu-item. */
body.fc-nav-current-location .fc-header-contact a[href="/location/"],
body.fc-nav-current-news .fc-header-contact a[href="/news-events/"] {
	color: var(--fc-green-dark);
	font-weight: 700;
}
body.fc-nav-current-location .fc-header-contact a[href="/location/"] i,
body.fc-nav-current-news .fc-header-contact a[href="/news-events/"] i {
	color: var(--fc-green-dark);
}

/* Primary nav */
.main-header-menu,
.main-header-bar-navigation .main-header-menu {
	font-family: var(--font-body);
}

.main-header-menu > .menu-item > a,
.ast-builder-menu .main-header-menu > .menu-item > a,
.main-header-menu > .menu-item.menu-item-has-children > .menu-link {
	font-family: var(--font-body) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	color: #000 !important;
	padding: 10px 16px 14px !important;
	border-bottom: 2.5px solid transparent !important;
	transition: all 0.15s;
	text-transform: none;
	margin-bottom: -1px !important;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item:hover > a,
.main-header-menu > .menu-item.focus > a,
.main-header-menu > .menu-item.menu-item-has-children:hover > .menu-link,
.main-header-menu > .menu-item.menu-item-has-children > .menu-link:hover {
	color: var(--fc-slate-900) !important;
	border-bottom-color: var(--fc-slate-300) !important;
	background: transparent !important;
}

.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current-menu-ancestor > a,
.main-header-menu > .menu-item.current_page_item > a,
.main-header-menu > .menu-item.current-menu-item.menu-item-has-children > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor.menu-item-has-children > .menu-link,
.main-header-menu > .menu-item.current_page_item.menu-item-has-children > .menu-link {
	color: var(--fc-green-dark) !important;
	font-weight: 700 !important;
	border-bottom-color: var(--fc-green) !important;
}

/* Astra's .site-header-section rule stretches this column to the full
   header row height (matching the taller logo column) then vertically
   centers the nav inside it, which leaves the hover/active underline
   floating above the header's bottom border. Bottom-align this column
   instead so the border-bottom lands right on that edge. Scoped to the
   desktop header only: #ast-mobile-header reuses the same class combo
   for the hamburger button's column, which should stay centered. */
#ast-desktop-header .site-header-primary-section-right.site-header-section {
	align-items: flex-end !important;
}

/* Dropdowns (Astra sub-menu) */
.main-header-menu .sub-menu {
	background: var(--fc-white) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	border-radius: 0 0 var(--fc-radius-md) var(--fc-radius-md) !important;
	padding: 12px 8px !important;
	min-width: 240px !important;
	box-shadow: var(--fc-shadow-lg) !important;
}

.main-header-menu .sub-menu .menu-item a {
	font-family: var(--font-accent) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--fc-slate-700) !important;
	padding: 7px 12px !important;
	border-radius: 6px !important;
	transition: all 0.1s;
	border-bottom: 0 !important;
}

.main-header-menu .sub-menu .menu-item a:hover,
.main-header-menu .sub-menu .menu-item.focus > a {
	background: var(--fc-green-pale) !important;
	color: var(--fc-green-dark) !important;
}

.main-header-menu .sub-menu .menu-item.current-menu-item > a,
.main-header-menu .sub-menu .menu-item.current-menu-ancestor > a,
.main-header-menu .sub-menu .menu-item.current_page_item > a {
	color: var(--fc-green-dark) !important;
	font-weight: 600 !important;
}

/* Wide dropdown for "All Apartments" — add CSS class "nav-wide" to that menu item in WP admin */
.main-header-menu .menu-item.nav-wide > .sub-menu {
	min-width: 480px !important;
	padding: 20px 24px !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 4px 28px;
}
.main-header-menu .menu-item.nav-wide > .sub-menu > .menu-item {
	display: block;
}

/* Mobile menu inherits Astra; light tweaks */
.ast-mobile-menu-buttons .menu-toggle {
	color: var(--fc-slate-700);
}

/* =========================================================
   TENANT LOGIN BUTTON
   ========================================================= */

a.fc-tenant-login,
a.fc-tenant-login:visited,
.fc-tenant-login a,
.fc-tenant-login a:visited,
.fc-tenant-login,
.ast-custom-button-link.fc-tenant-login,
.ast-header-button-1 .ast-custom-button.fc-tenant-login,
.fc-header-contact a.fc-tenant-login,
.fc-header-contact a.fc-tenant-login:visited {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: var(--fc-heritage-purple) !important;
	color: var(--fc-white) !important;
	font-family: var(--font-body) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	padding: 9px 16px !important;
	border-radius: var(--fc-radius-sm) !important;
	text-decoration: none !important;
	border: 0 !important;
	line-height: 1 !important;
	transition: background 0.15s, transform 0.1s;
	text-transform: none !important;
	letter-spacing: normal !important;
}

a.fc-tenant-login:hover,
.fc-tenant-login a:hover,
.ast-custom-button-link.fc-tenant-login:hover,
.fc-header-contact a.fc-tenant-login:hover {
	background: var(--fc-heritage-purple-dark) !important;
	color: var(--fc-white) !important;
	transform: translateY(-1px);
}

/* Press feedback: cancel the hover lift and compress slightly. Faster in
   (0.1s) than out, so the press reads as instant. */
a.fc-tenant-login:active,
.fc-tenant-login a:active,
.ast-custom-button-link.fc-tenant-login:active,
.fc-header-contact a.fc-tenant-login:active {
	transform: translateY(0) scale(0.97);
	transition-duration: 0.1s;
}

a.fc-tenant-login i,
a.fc-tenant-login i.fas,
a.fc-tenant-login svg,
.fc-tenant-login i {
	font-size: 12px;
	color: var(--fc-white) !important;
	fill: var(--fc-white) !important;
}

/* Gap before Tenant Login vs. the 10px .fc-header-contact gap between the
   other items — margin-left:auto did nothing here since the strip sizes
   to its own content rather than stretching to fill a wider row, so it
   never had free space to push against. Doubled again (10px -> 30px,
   for a 40px total gap including the flex gap) per request. */
.fc-header-contact .fc-tenant-login {
	margin-left: 30px;
}

/* =========================================================
   FOOTER — 4 footer widget areas (Astra: Footer Widget Area)
   Assumes 4 columns: Brand + 3 menu columns
   ========================================================= */

.site-footer,
footer.site-footer,
.ast-small-footer,
[data-section="section-below-footer-builder"],
[data-section="section-primary-footer-builder"] {
	background: var(--fc-slate-900) !important;
	color: rgba(255,255,255,0.7) !important;
	font-family: var(--font-body) !important;
	font-size: 14px;
	line-height: 1.6;
	border: 0 !important;
}

.site-footer a,
footer.site-footer a {
	color: rgba(255,255,255,0.7);
	transition: color 0.15s;
}
.site-footer a:hover,
footer.site-footer a:hover { color: var(--fc-green-light); }

/* Footer widget titles */
.site-footer .widget-title,
footer.site-footer .widget-title,
.site-footer .wp-block-heading,
footer.site-footer h2.widgettitle {
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: rgba(255,255,255,0.4) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 12px !important;
}

/* Footer menu widgets (nav menu widget) */
.site-footer .menu,
footer.site-footer .menu,
.site-footer .widget_nav_menu ul,
footer.site-footer .widget_nav_menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-footer .menu li a,
footer.site-footer .menu li a,
.site-footer .widget_nav_menu li a,
footer.site-footer .widget_nav_menu li a {
	color: rgba(255,255,255,0.7) !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	text-decoration: none;
}
.site-footer .menu li a:hover,
footer.site-footer .menu li a:hover,
.site-footer .widget_nav_menu li a:hover,
footer.site-footer .widget_nav_menu li a:hover {
	color: var(--fc-green-light) !important;
}
.site-footer .menu li a i,
footer.site-footer .menu li a i {
	font-size: 12px;
	width: 16px;
	text-align: center;
	color: rgba(255,255,255,0.4);
}
.site-footer .menu li a:hover i,
footer.site-footer .menu li a:hover i {
	color: var(--fc-green-light);
}

/* Brand column — use HTML widget with .fc-footer-brand */
.fc-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.fc-footer-brand img.fc-footer-logo {
	height: 52px;
	width: auto;
	display: block;
}
.fc-footer-tagline {
	font-size: 13px;
	color: rgba(255,255,255,0.5);
	line-height: 1.6;
	max-width: 280px;
	text-align: left !important;
	padding-top: 14px;
}
.fc-footer-social {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}
.fc-footer-social a {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.7);
	font-size: 13px;
	line-height: 1;
	transition: all 0.15s;
}
/* The Facebook f is far narrower than its 13px box, so center the glyph
   inside the box or it sits against the left edge of the circle. */
.fc-footer-social a i,
.fc-footer-social a svg {
	display: block;
	width: 13px;
	height: 13px;
	font-size: 13px;
	line-height: 13px;
	text-align: center;
}
.fc-footer-social a:hover {
	background: var(--fc-green);
	color: var(--fc-white);
}

/* Below-footer / copyright row */
.ast-below-footer-wrap,
.site-below-footer-wrap,
[data-section="section-below-footer-builder"] {
	border-top: 1px solid rgba(255,255,255,0.08) !important;
	background: var(--fc-slate-900) !important;
	color: rgba(255,255,255,0.35) !important;
	font-size: 12px !important;
}
.ast-below-footer-wrap a,
.site-below-footer-wrap a {
	color: rgba(255,255,255,0.45) !important;
}
.ast-below-footer-wrap a:hover,
.site-below-footer-wrap a:hover {
	color: var(--fc-green-light) !important;
}

/* =========================================================
   ASTRA PRO MEGA MENU
   ========================================================= */

/* Mega menu panel */
.main-header-menu .astra-megamenu,
.ast-builder-menu .astra-megamenu,
.astra-megamenu-wrapper,
ul.astra-megamenu {
	background: var(--fc-white) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	border-radius: 0 0 var(--fc-radius-md) var(--fc-radius-md) !important;
	box-shadow: var(--fc-shadow-lg) !important;
	padding: 20px 24px !important;
	font-family: var(--font-body) !important;
}

/* Column heading <li class="menu-item-heading"> */
.astra-megamenu > li.menu-item-heading {
	padding: 0 12px !important;
}

.astra-megamenu > li.menu-item-heading > .ast-disable-link,
.astra-megamenu > li.menu-item-heading > .menu-link {
	display: block !important;
	padding: 0 0 4px !important;
	margin: 0 0 4px !important;
	border-bottom: 0 !important;
	background: transparent !important;
	cursor: default !important;
}

.astra-megamenu > li.menu-item-heading > .ast-disable-link .menu-text,
.astra-megamenu > li.menu-item-heading > .menu-link .menu-text {
	font-family: var(--font-body) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--fc-green-dark) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
}

/* Hide dropdown arrows on headings (they're not clickable parents visually) */
.astra-megamenu > li.menu-item-heading > .ast-disable-link .ast-icon,
.astra-megamenu > li.menu-item-heading > .ast-disable-link .dropdown-menu-toggle,
.astra-megamenu > li.menu-item-heading > .ast-menu-toggle {
	display: none !important;
}

/* Sub-menu links under headings */
.astra-megamenu > li.menu-item-heading > ul.sub-menu {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	position: static !important;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: auto !important;
}

.astra-megamenu > li.menu-item-heading > ul.sub-menu > li {
	padding: 0 !important;
}

.astra-megamenu > li.menu-item-heading > ul.sub-menu > li > a.menu-link {
	font-family: var(--font-accent) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	color: var(--fc-slate-700) !important;
	padding: 3px 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	border-bottom: 0 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	display: flex !important;
	align-items: center !important;
}

.astra-megamenu > li.menu-item-heading > ul.sub-menu > li > a.menu-link:hover {
	background: var(--fc-green-pale) !important;
	color: var(--fc-green-dark) !important;
	padding: 3px 8px !important;
}

/* Active state for the currently-viewed apartment/building link. Matches
   the ".menu-link" specificity of the base rule above (line 508) so it
   isn't shadowed the same way the top-level "View Apartments" item was. */
.astra-megamenu > li.menu-item-heading > ul.sub-menu > li.current-menu-item > a.menu-link,
.astra-megamenu > li.menu-item-heading > ul.sub-menu > li.current_page_item > a.menu-link {
	color: var(--fc-green-dark) !important;
	font-weight: 600 !important;
}

/* Hide the sub-menu arrow icons */
.astra-megamenu > li.menu-item-heading > ul.sub-menu > li > a.menu-link .ast-icon {
	display: none !important;
}

/* =========================================================
   FOOTER BOTTOM (Astra Copyright element)
   ========================================================= */

/* Our custom HTML wrapper */
.fc-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 0;
	font-size: 12px;
	color: rgba(255,255,255,0.35);
	text-align: left !important;
}

.fc-footer-bottom-left,
.fc-footer-bottom-right {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	line-height: 1;
}

.fc-footer-bottom-left > *,
.fc-footer-bottom-right > * {
	flex: 0 0 auto;
	line-height: 1;
}

.fc-footer-bottom-left > a,
.fc-footer-bottom-right > a,
.fc-footer-bottom-left > img,
.fc-footer-bottom-right > img {
	display: inline-flex;
	align-items: center;
}

/* Text spans containing inline links — keep normal inline flow */
.fc-footer-bottom-left > span,
.fc-footer-bottom-right > span {
	display: inline;
}
.fc-footer-bottom-left > span a,
.fc-footer-bottom-right > span a {
	display: inline;
}

.fc-footer-rp-logo {
	height: 34px;
	display: block;
	opacity: 0.5;
	transition: opacity 0.15s;
}
.fc-footer-rp-logo:hover { opacity: 0.8; }

.fc-footer-bottom a {
	color: rgba(255,255,255,0.45) !important;
	text-decoration: none;
	transition: color 0.15s;
}
.fc-footer-bottom a:hover { color: var(--fc-green-light) !important; }

/* Hat icon next to "Brandthropology" in the credit link. The SVG is solid
   white, so opacity 0.45 matches the surrounding text's rgba(255,255,255,0.45)
   without needing a recolor. */
.fc-footer-brandthropology-icon {
	height: 1.33em;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	opacity: 0.45;
	transition: opacity 0.15s;
}
.fc-footer-credit a:hover .fc-footer-brandthropology-icon { opacity: 0.8; }

.fc-footer-dot {
	color: rgba(255,255,255,0.3);
	display: inline-block;
}

/* wpautop turns the newlines between tags in the HTML widget source into
   <br> tags; harmless as flex-row items but each becomes its own row once
   the mobile media query below switches .fc-footer-bottom-right to a
   column, stacking extra blank lines between the links. */
.fc-footer-bottom br {
	display: none;
}

/* Override Astra below-footer column spacing */
.ast-below-footer-wrap .ast-builder-html-element,
.site-below-footer-wrap .ast-builder-html-element,
[data-section="section-below-footer-builder"] .ast-builder-html-element {
	width: 100%;
}

.ast-below-footer-wrap [data-section*="html"],
.site-below-footer-wrap [data-section*="html"] {
	padding: 0 !important;
}

/* Kill the stretch on Astra's inner flex containers in below-footer */
.site-below-footer-wrap .ast-builder-grid-row,
.ast-below-footer-wrap .ast-builder-grid-row {
	padding: 0 20px;
}

/* Responsive */
@media (max-width: 921px) {
	.main-header-menu .menu-item.nav-wide > .sub-menu {
		display: block !important;
		grid-template-columns: 1fr;
	}
}

/* Astra gives the below-footer row (.site-below-footer-inner-wrap) its own
   35px side padding by default at every width, via its own inline CSS, but
   never sets any padding on the primary footer row (.site-primary-footer-inner-wrap
   — logo/menus), which just centers at max-width:1200px with no gutter. Below
   1200px that leaves it flush against the viewport edge. Give it the same
   35px gutter unconditionally so both rows share one left/right edge at
   every width, then taper both down together on small screens. */
.site-primary-footer-inner-wrap {
	padding-left: 35px;
	padding-right: 35px;
}

/* Astra's own breakpoints keep the 4 footer columns (brand + 3 menus) at
   full width from desktop all the way down to its 544px mobile cutoff,
   where they jump straight to a single stacked column — no intermediate
   step, so at typical tablet/narrow-laptop widths the 4 columns get
   uncomfortably cramped. Add a 2-column step for that range. */
@media (max-width: 920px) and (min-width: 545px) {
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
		grid-template-columns: repeat(2, 1fr) !important;
		row-gap: 32px;
		column-gap: 24px;
	}
}

@media (max-width: 767px) {
	.site-primary-footer-inner-wrap,
	.site-below-footer-inner-wrap {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 600px) {
	/* Breathing room between the last footer column (Get In Touch) and
	   the "Family Owned & Family Managed By" row below it. */
	.site-below-footer-inner-wrap {
		padding-top: 24px !important;
	}

	.fc-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	/* Keep Privacy Policy · Accessibility · © year on one wrapped row with
	   their dot separators; only the "Website by ..." credit drops to its
	   own line, along with the dot before it. */
	.fc-footer-bottom-right {
		row-gap: 8px;
		column-gap: 8px;
	}
	.fc-footer-bottom-right .fc-footer-dot-credit {
		display: none;
	}
	.fc-footer-bottom-right .fc-footer-credit {
		flex-basis: 100%;
	}
}

/* Astra stacks the 4 footer columns into a single column below its own
   544px breakpoint (not our 600px one above) — scope the stacked-layout
   spacing to match, or the rules below hit the still-side-by-side columns
   at 545–600px. */
@media (max-width: 544px) {
	/* Stacked columns need real air between them to read as separate
	   groups; Astra's default 10px is only enough to separate lines,
	   not sections. Use a rule instead of a gap so it doesn't add
	   space above the first column or below the last. */
	.site-footer-section {
		margin-bottom: 0 !important;
		padding: 28px 0;
		border-top: 1px solid rgba(255,255,255,0.08);
	}
	.site-footer-section:first-child {
		padding-top: 0;
		border-top: 0;
	}
	.site-footer-section:last-child {
		padding-bottom: 4px;
	}

	/* About Us and Get In Touch are short lists, so they share a row under
	   the full-width brand and Quick Links rather than each taking a
	   section of their own. Keeps every link visible without the footer
	   running several screens long. */
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .ast-builder-grid-row {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 24px;
	}
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-section:nth-child(-n+2) {
		grid-column: 1 / -1;
	}
	.site-primary-footer-wrap[data-section="section-primary-footer-builder"] .site-footer-section:nth-last-child(-n+2) {
		padding-bottom: 4px;
	}

	.site-footer .widget-title,
	footer.site-footer .widget-title {
		margin-bottom: 16px !important;
	}

	/* Bigger tap targets for the menu links (footer nav + Get In Touch
	   contact links), which had no vertical padding at all. */
	.site-footer .menu li a,
	footer.site-footer .menu li a,
	.site-footer .widget_nav_menu li a,
	footer.site-footer .widget_nav_menu li a {
		padding: 6px 0;
		margin: -6px 0;
	}
	.site-footer .menu,
	footer.site-footer .menu,
	.site-footer .widget_nav_menu ul,
	footer.site-footer .widget_nav_menu ul {
		gap: 4px;
	}
}


/* Container slides down from behind header */
.below-header-template,
[data-elementor-type="section"].below-header-wrap {
    transform: translateY(-100%);
    opacity: 0;
    animation: slideDown 0.6s ease-out 0.3s forwards;
    position: relative;
    z-index: 1;
}

@keyframes slideDown {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.below-header-template .quick-links > * {
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeInLeft 0.5s ease-out forwards;
}

.below-header-template .quick-links > *:nth-child(1) { animation-delay: 0.9s; }
.below-header-template .quick-links > *:nth-child(2) { animation-delay: 1.05s; }
.below-header-template .quick-links > *:nth-child(3) { animation-delay: 1.2s; }
.below-header-template .quick-links > *:nth-child(4) { animation-delay: 1.35s; }
.below-header-template .quick-links > *:nth-child(5) { animation-delay: 1.5s; }
.below-header-template .quick-links > *:nth-child(6) { animation-delay: 1.65s; }

@keyframes fadeInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Quick-links bar: wrap on small screens.
   Elementor sets flex-wrap:nowrap on .quick-links, so at iPhone widths the five
   links (~291px of text plus 4x20px gaps) run to 466px against a 393px viewport
   and force a horizontal scroll on every building page. Allow wrapping, tighten
   the gaps, and trim the container's 30px left padding to something symmetric. */
@media (max-width: 767px) {
    .below-header-template {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .below-header-template .quick-links {
        flex-wrap: wrap !important;
        gap: 8px 14px;
    }
}

/* Logo sizing.
   Astra renders the header logo at the customizer's
   ast-header-responsive-logo-width (88px). That value is stored in the database,
   not in the theme, so it does not travel with a git deploy — size it here so the
   dimensions ship with the code. The desktop header is 116px tall and the mobile
   header 62px, so both sizes below still clear their bar comfortably. */
.ast-site-identity .custom-logo,
.site-logo-img .custom-logo {
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
}

/* Vertically center the logo in the header bar — Astra's default doesn't
   reliably center it once the logo is sized up beyond its stock width. */
.main-header-bar .ast-site-identity,
.main-header-bar .site-logo-img,
.main-header-bar .ast-site-identity .site-logo-img {
    display: flex !important;
    align-items: center !important;
}

/* Astra's stock top padding on the logo/identity block comes from the
   customizer (header padding), which doesn't travel with a git deploy —
   zero it here so the logo sits flush at the top of the header bar. */
.ast-site-identity,
.site-logo-img,
.main-header-bar .ast-site-identity,
.main-header-bar .site-logo-img {
    padding-top: 0 !important;
}

@media (max-width: 921px) {
    .ast-site-identity .custom-logo,
    .site-logo-img .custom-logo {
        width: 170px !important;
        max-width: 170px !important;
    }

    /* The zeroed desktop padding above leaves the logo flush against the
       mobile header's top and bottom, so give it room to breathe there. No
       side padding: the bar's frame gutter alone sets the logo's left edge,
       so it lines up with the homepage hero and search card. */
    #ast-mobile-header .ast-site-identity,
    #ast-mobile-header .site-logo-img {
        padding: 14px 0 !important;
    }

    #ast-mobile-header .site-primary-header-wrap {
        padding-left: var(--fc-frame-gutter) !important;
        padding-right: var(--fc-frame-gutter) !important;
    }
}

/* Header sits above for slide-from-behind effect */
.ast-main-header-wrap,
header.site-header {
    position: relative;
    z-index: 10;
    background: #fff;
}

/* Shared WPForms submit feedback. WPForms toggles wpforms-loading for AJAX
   requests and restores the button text/state after errors or completion. */
/* WPForms toggles this image with JavaScript during submission. Keep it out
   of the layout entirely; the button pseudo-element below is the visible
   loading indicator. */
img.wpforms-submit-spinner,
.wpforms-container img.wpforms-submit-spinner,
.wpforms-submit-container > .wpforms-submit-spinner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

.wpforms-container.wpforms-loading button.wpforms-submit::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    margin-inline-start: 10px;
    vertical-align: -2px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fc-form-submit-spin 0.7s linear infinite;
}

@keyframes fc-form-submit-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .wpforms-container.wpforms-loading button.wpforms-submit::after {
        animation: none;
    }
}

/* Closing bento CTAs: the Contact page's fade in and up (contact.css,
   fc-contact-rise), started on scroll by assets/bento-rise.js, which adds
   .is-rise-pending only once it is watching a grid. `backwards` rather than
   `both` so the card's own hover lift still applies after the entrance. */
.fc-news-bento__card.is-rise-pending,
.fclt-rf-bento__card.is-rise-pending {
    opacity: 0;
}

.fc-news-bento__card.is-risen,
.fclt-rf-bento__card.is-risen {
    animation: fc-bento-rise 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.fc-news-bento__card.is-risen + .fc-news-bento__card,
.fclt-rf-bento__card.is-risen + .fclt-rf-bento__card {
    animation-delay: 0.08s;
}

@keyframes fc-bento-rise {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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