/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* Tighter body text line-height than Astra's default (1.85714). */
body {
	line-height: 1.3;
}

/* Gallery lightbox: darken Elementor's default 80%-opaque backdrop
   (rgba(0,0,0,.8) in assets/css/conditionals/dialog.min.css) slightly to
   90%. */
.dialog-lightbox-widget {
	background: rgba(0, 0, 0, 0.9) !important;
}

/* Gallery lightbox: some images have near-duplicate WordPress Title and
   Caption text (e.g. "Custom Table-2" title + "Custom Wooden Table-2"
   description), and Elementor's lightbox footer shows both, stacked, which
   reads as the same caption twice. The description is the fuller, more
   human-written text and matches the caption already shown on the page, so
   keep only that when it's present. Images with no description (title
   only) are unaffected and keep showing their title as before. */
.elementor-slideshow__footer:has(.elementor-slideshow__description:not(:empty)) .elementor-slideshow__title {
	display: none;
}

/* Homepage "About" heading: this section's Elementor container lays its
   children out in a row by default (built for a single widget), so the
   heading added above the intro paragraph needs its own container to stack
   vertically instead of sitting beside the paragraph. */
.elementor-element-a62fa3d .e-con-inner {
	flex-direction: column !important;
}
#about {
	margin-bottom: 15px;
}

/* Contact page heading: unlike the other pages' section titles (e.g.
   "Additional Dwelling Units & Duplexes"), this one never got a per-widget
   color override in the original Elementor page, so it fell back to the
   generic .elementor-widget-heading default (primary orange) instead of the
   cream/accent color every other page's heading uses. */
.elementor-element-5ab273e .elementor-heading-title {
	color: var(--e-global-color-accent) !important;
}

/* Homepage hero image carousel: simple fade-crossfade slideshow with
   pagination dots (assets/js/hero-carousel.js), replacing the old Premium
   Addons "wheel" carousel plugin. */
.hero-carousel-wrap {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}
.hero-carousel {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.hero-carousel__slides {
	position: relative;
	width: 100%;
	height: 100%;
}
.hero-carousel__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1200ms ease-in-out;
}
.hero-carousel__slide.is-active {
	opacity: 1;
}
.hero-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
}
.hero-carousel__dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba(249, 241, 228, 0.35);
	cursor: pointer;
	transition: background-color 200ms ease;
}
.hero-carousel__dot:hover {
	background: rgba(249, 241, 228, 0.6);
}
.hero-carousel__dot.is-active {
	background: #C46316;
}

/* Sticky footer: keep it pinned to the bottom of the viewport on short
   pages (e.g. Contact) instead of floating mid-screen with empty space
   below it. Pages with enough content to fill the viewport are unaffected. */
html, body {
	height: 100%;
}
#page {
	display: flex !important;
	flex-direction: column;
	min-height: 100vh;
}
#content {
	flex: 1 0 auto;
}
footer.site-footer {
	flex-shrink: 0;
}

/* Compact header, same at every screen size — no separate mobile hamburger. */
#ast-desktop-header {
	display: block !important;
}
.custom-logo-link img {
	width: 120px !important;
	height: 120px !important;
	max-width: 120px !important;
}
.ast-builder-layout-element .ast-site-identity {
	margin: 0 !important;
}
.site-branding.ast-site-identity {
	padding: 0 !important;
}
.site-logo-img {
	padding-right: 0 !important;
}
.site-title {
	margin: 0 0 0 -3px !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
}
.ast-primary-header-bar {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.ast-builder-grid-row-has-sides {
	grid-template-columns: max-content 1fr !important;
}
/* Not enough room for logo + title + nav on one line: the logo moves to an
   absolutely-positioned column on the left that spans the full height of
   both rows, while the title (top) and nav menu (bottom, untouched other
   than alignment) stack in the space to its right. */
@media (max-width: 768px) {
	.ast-builder-grid-row-has-sides {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto auto !important;
		row-gap: 0 !important;
		align-content: center !important;
		position: relative;
		padding-left: 130px;
		min-height: 130px;
	}
	.site-header-primary-section-left,
	.site-header-primary-section-right {
		margin: 0 !important;
		align-items: flex-start !important;
		height: auto !important;
		min-height: 0 !important;
	}
	.custom-logo-link {
		position: absolute !important;
		left: 0;
		top: 0;
		bottom: 0;
		display: flex !important;
		align-items: center;
	}
	/* Nav row sits below the logo now, so left-align it (it was right-
	   aligned for sitting next to the logo in the single desktop row) */
	#primary-site-navigation-desktop .main-header-menu {
		justify-content: flex-start !important;
	}
}

/* ==========================================================================
   Site nav — plain, hand-written, ignores Astra's menu CSS entirely.
   Same simple horizontal-links style as the footer menu, at every screen
   size. "Services" opens a small dropdown that overlays the page (it never
   pushes the header taller); opens on hover (desktop) or tap (everywhere,
   via assets/js/nav-toggle.js toggling .mobile-submenu-open).
   ========================================================================== */
#primary-site-navigation-desktop .main-header-menu,
#primary-site-navigation-desktop .sub-menu {
	display: flex !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
}
#primary-site-navigation-desktop .main-header-menu {
	align-items: center;
	gap: 12px;
	flex-wrap: nowrap;
	justify-content: flex-end;
}
#primary-site-navigation-desktop .menu-item {
	position: relative;
	list-style: none;
	width: auto !important;
	flex: 0 0 auto !important;
}
#primary-site-navigation-desktop .menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
	color: #3E2A1C !important;
	font-family: 'Barlow', sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	text-decoration: none !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
	padding: 6px 0 !important;
	background: none !important;
	border: none !important;
}
#primary-site-navigation-desktop .menu-text {
	line-height: normal !important;
}
#primary-site-navigation-desktop .menu-link:hover {
	color: #E2BB7B !important;
	transform: none !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link {
	color: #C46316 !important;
	text-shadow: none !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link:hover {
	color: #E2BB7B !important;
}
#primary-site-navigation-desktop .menu-link .ast-icon {
	display: none !important;
}
#primary-site-navigation-desktop .dropdown-menu-toggle {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	min-width: 0 !important;
	width: auto !important;
	margin-left: -10px;
}
#primary-site-navigation-desktop .dropdown-menu-toggle .ast-icon {
	display: none !important;
}
#primary-site-navigation-desktop .dropdown-menu-toggle::after {
	content: "▾";
	color: #3E2A1C;
	font-size: 14px;
}
#primary-site-navigation-desktop .sub-menu {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	flex-direction: column;
	position: absolute !important;
	top: 100% !important;
	left: auto !important;
	right: 0 !important;
	min-width: 210px;
	background-color: #3E2A1C !important;
	padding: 6px 0;
	z-index: 999;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}
#primary-site-navigation-desktop .menu-item-has-children:hover > .sub-menu,
#primary-site-navigation-desktop .menu-item-has-children.mobile-submenu-open > .sub-menu {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}
#primary-site-navigation-desktop .sub-menu .menu-link {
	padding: 5px 20px !important;
	font-size: 16px !important;
	white-space: nowrap;
}
#primary-site-navigation-desktop .ast-menu-toggle {
	display: none !important;
}

/* Footer nav links: same colors and drop shadow as the header nav links */
#footer-site-navigation .menu-link,
.ast-footer-copyright a {
	color: #3E2A1C !important;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35) !important;
	font-weight: 600 !important;
}
#footer-site-navigation .menu-link:hover,
.ast-footer-copyright a:hover {
	color: #E2BB7B !important;
}

/* Services overview page: its h3 category headings ("ADUs & Duplexes",
   "Remodeling", etc.) were a step lighter than the h3 headings on each
   individual service page ("Meister Duplex", "Tables", etc.) -- match at
   600, same as h1 site-wide (don't want a lower-level heading heavier than
   a higher one). Scoped to this page only (page-id-412) since h3 is used
   for subheadings on every service page and shouldn't change elsewhere.
   These headings are links, so the actual visible text is styled by the
   nested <a>, which always gets its own font-weight:500 from the
   site-wide ".elementor-kit-1127 a" link-default rule regardless of what
   the parent heading says -- both declarations are needed, the <a> one
   isn't just a redundant duplicate of the h3 one. */
.page-id-412 h3.elementor-heading-title,
.page-id-412 h3.elementor-heading-title > a {
	font-weight: 600 !important;
}

/* Services overview page: the page-title widget sits one nesting level
   shallower than the repeated service blocks below it, so it was missing
   the padding those blocks pick up from their extra wrapper — this brings
   its width in line with everything else on the page. */
.elementor-element-69680d0 {
	padding-left: 10px !important;
	padding-right: 10px !important;
	box-sizing: border-box !important;
}
/* Service images on this page used the old 5px border; match the 2px
   gallery-item border used everywhere else on the site */
.elementor-412 .elementor-widget-container img {
	border-width: 2px !important;
}
/* Service category heading links need the same hover color as other links.
   !important because a later, equally-specific "color: inherit" rule on
   these links otherwise wins the tie and locks them to their parent
   heading's color regardless of :hover state. */
.elementor-412 .elementor-heading-title a {
	color: #C46316 !important;
}
.elementor-412 .elementor-heading-title a:hover {
	color: #E2BB7B !important;
}

/* Image gallery grid: single source of truth, replaces the old overlapping
   WordPress/Astra/Elementor column-class system */
.elementor-image-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 !important;
}
/* Every gallery item is the same size regardless of how many images are in
   its group (a group with fewer images just leaves its row short, still
   centered by the flex container above) */
.elementor-image-gallery .gallery-item {
	margin: 0 !important;
	padding: 0 !important;
	width: calc(33.333% - 6.667px);
}
@media (max-width: 767px) {
	.elementor-image-gallery .gallery-item {
		width: calc(50% - 5px);
	}
}
@media (max-width: 480px) {
	.elementor-image-gallery .gallery-item {
		width: 100%;
	}
}

/* Square, cropped thumbnails in the grid; the lightbox still opens the
   original image untouched since it renders into its own separate <img> */
.elementor-image-gallery .gallery-icon {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}
.elementor-image-gallery .gallery-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.elementor-image-gallery .gallery-item .gallery-caption {
	background-color: var(--e-global-color-primary, #C46316);
	color: var(--e-global-color-secondary, #3E2A1C);
	border: 2px solid var(--e-global-color-primary, #C46316);
	border-top: none;
	font-weight: 600 !important;
}