/*
Theme Name: Astra Child (Native)
Template: astra
Description: Native Gutenberg/PHP header, footer, and single-post templates for buybestforyou.com - no Elementor Theme Builder dependency. Visual output ported 1:1 from the live Elementor header (#4610) and footer (#4612) - not a redesign.
Version: 1.0.0
Author: buybestforyou
Text Domain: astra-child
*/

/* ==========================================================================
   Plain pages (About/Contact/Disclaimer/Our Process/Privacy/Terms) still
   carry stale Elementor postmeta from the old builder setup, which makes
   Astra apply its "ast-theme-transparent-header" compatibility class here
   too (same unresolved root cause as the homepage nav-color bug from
   Phase 5 QA) - it takes the header out of normal flow, so content starts
   at y=0 underneath it instead of below it. Same pragmatic fix as
   single.php's .main-content{margin-top:70px}: restore the space the
   static header would have occupied.
   ========================================================================== */

body.page.ast-theme-transparent-header #primary {
	/* !important: Astra's own ".ast-page-builder-template .site .site-content
	   #primary{padding-top:0}" rule (higher specificity, 3 classes) otherwise wins. */
	padding-top: 70px !important;
}

/* ==========================================================================
   Site-wide heading font: Astra's Customizer "Headings" typography default
   is Sora, but the production site's actual font (everywhere except a few
   footer widgets that set their own explicit font-family, e.g. the
   newsletter heading/Lato links) is Roboto. Astra injects its own dynamic
   CSS (same "h1,h2..." specificity) later in the cascade, so a plain
   override only wins by source-order luck on some page types (confirmed:
   worked on archive/homepage, lost on the plain the_content() pages) -
   !important needed for it to hold everywhere. The footer's own
   font-family declarations below carry !important too so they still win
   here.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif !important;
}

/* Astra's "Body" typography default (Inter, 15px) also bleeds through;
   production's real default is Roboto/18px everywhere (homepage, archive,
   plain pages, single-post all confirmed 18px - an earlier reading of 16px
   on one plain page was a stale/bad measurement, corrected during the
   final full-site visual pass). assets/css/style.css's own
   body{font-size:18px} (single-post only) already agrees with this. */
body {
	font-family: 'Roboto', sans-serif !important;
	font-size: 18px !important;
}

/* Astra defaults every heading to 700; production only keeps that for
   h1/h2 (already matching) - h3-h6 are 500 in actual page content. */
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-weight: 500 !important;
}

.entry-content h4 {
	font-size: 24px;
	line-height: 24px;
}

.astra-child-page-title {
	font-size: 48px;
	margin: 0 0 8px;
}

#breadcrumbs {
	/* !important: also matches .entry-content p{font-size:18px !important}
	   below (the breadcrumb <p> is inside .entry-content too) - needs equal
	   importance so the ID selector's higher specificity wins. */
	font-size: 15.3px !important;
	color: #000000 !important;
	margin: 0;
	padding: 0;
}

#breadcrumbs a {
	color: #000000;
	text-decoration: none;
}

/* ==========================================================================
   Plain-page content (the 6 pages from Phase 3, rendered via Astra's own
   stock page.php + the_content()) - Astra's global text-color variable
   bleeds through as a dark purple (#26222f/#4c455f-ish) instead of the
   production site's actual black, on every heading/paragraph we didn't
   explicitly set a color for. Same root cause as the header nav color
   issue (Phase 5 QA pass): fixed broadly here rather than per-element.
   ========================================================================== */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content li,
.buying-guide-wrapper h1,
.buying-guide-wrapper h2,
.buying-guide-wrapper h3,
.buying-guide-wrapper h4,
.buying-guide-wrapper h5,
.buying-guide-wrapper h6,
.buying-guide-wrapper p,
.buying-guide-wrapper li {
	color: #000000 !important;
}

/* Astra's own .entry-content p rule uses a relative em unit that resolves
   smaller than production's actual 18px (confirmed via final visual pass:
   body-level font-size fix didn't reach these, since this rule's own
   specificity/relative-unit wins over inheritance). */
.entry-content p,
.entry-content li {
	font-size: 18px !important;
}

/* Production's <ol> lists (e.g. Our Process's numbered steps) have their
   numbers suppressed via list-style:none - they read as plain paragraphs,
   not a visible numbered list. */
.entry-content ol,
.entry-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* :first-of-type (not :first-child) - the breadcrumb <p> prepended via
   the_content filter is now the actual first child, which broke
   :first-child matching (caught by the final full-site visual pass). */
.entry-content > h2:first-of-type {
	font-size: 42px;
	font-weight: 700;
}

.top-tested-products-inner .accordion-label h4 {
	color: #000000 !important;
	font-weight: 500 !important;
}

.top-tested-products-inner .accordion-content .pros p,
.top-tested-products-inner .accordion-content .cons p {
	color: #000000 !important;
}

/* ==========================================================================
   Homepage - ported from the Elementor page (post 61): image accordion
   hero, intro text, 5 category sections. Same .ast-container flex-collapse
   guard as single.php/archive.php/footer.php (Phases 1/2/4).
   ========================================================================== */

.home-page-wrap {
	width: 100%;
	flex: 1 1 100%;
}

/* Image accordion hero - pure CSS via the classic radio-input trick, no JS
   needed (matches the live site's own ekit-image-accordion-click markup,
   which is also just hidden radios + adjacent-sibling CSS). */
.home-image-accordion {
	display: flex;
	height: 460px;
}

.home-image-accordion__item {
	flex: 1 1 0%;
	background-size: cover;
	background-position: center;
	position: relative;
	display: block;
	cursor: pointer;
	transition: flex 0.4s;
}

.home-image-accordion__input:checked + .home-image-accordion__item {
	flex: 3 1 0%;
}

/* Visually hidden but still focusable/tabbable - swapped in for the plain
   `hidden` attribute this markup used to have, which removed the radios
   from the tab order entirely and left keyboard users with no way to
   switch panels or ever reveal a "+" button other than the default-active
   one. Standard visually-hidden pattern (not display:none/visibility:hidden). */
.home-image-accordion__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.home-image-accordion__input:focus-visible + .home-image-accordion__item {
	outline: 2px solid #000000;
	outline-offset: -2px;
}

.home-image-accordion__expand {
	position: absolute;
	bottom: 52px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #fff;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Only the active/expanded accordion image shows its "+" button. */
.home-image-accordion__input:checked + .home-image-accordion__item .home-image-accordion__expand {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.home-image-accordion__expand {
	background: transparent;
	padding: 0;
	cursor: pointer;
	font: inherit;
	transition: opacity 0.2s, visibility 0.2s;
}

.home-image-accordion__expand:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 2px;
}

/* Lightbox - replicates Elementor's own native lightbox (image + filename
   caption, dark overlay, click-outside to close). z-index stays below the
   header's (99999) so the header remains visible on top of the overlay. */
.home-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

.home-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.home-lightbox__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.home-lightbox__figure {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.home-lightbox__image {
	max-width: 90vw;
	max-height: 80vh;
	width: auto;
	height: auto;
	display: block;
}

.home-lightbox__caption {
	color: #FFFFFF;
	font-size: 14px;
	margin-top: 12px;
	text-align: center;
}

body.home-lightbox-open {
	overflow: hidden;
}

/* ==========================================================================
   Homepage revamp: hero (value prop + resized accordion visual), Browse by
   Category, Editor's Picks, How We Research. Replaces the old
   intro/home-category-section/home-post-card archive-dump styles above
   (removed along with their now-deleted template parts). Reuses the
   existing brand palette (#E76E34/#D64304 orange, #03A019/#00A016 green,
   #393D46/#69727D neutrals, Roboto) and the 992px/600px breakpoints already
   used elsewhere in this file rather than introducing new ones.
   ========================================================================== */

.home-section-heading {
	max-width: 1200px;
	margin: 0 auto 32px;
	padding: 0 20px;
	font-size: 36px;
	font-weight: 700;
	color: #000000 !important;
	text-align: center;
}

/* Hero */
.home-hero {
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 20px 40px;
}

.home-hero__inner {
	display: flex;
	align-items: center;
	gap: 48px;
}

.home-hero__copy {
	flex: 1 1 480px;
}

.home-hero__visual {
	flex: 1 1 420px;
}

.home-hero__heading {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.15;
	color: #000000 !important;
	margin: 0 0 16px;
}

.home-hero__subhead {
	font-size: 18px;
	line-height: 1.6;
	color: #000000 !important;
	max-width: 560px;
	margin: 0 0 28px;
}

.home-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.home-hero__cta {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.home-hero__cta--primary {
	background-color: #E76E34;
	color: #FFFFFF;
}

.home-hero__cta--primary:hover {
	background-color: #D64304;
}

.home-hero__cta--secondary {
	background-color: transparent;
	color: #000000;
	border: 1.5px solid #69727D;
}

.home-hero__cta--secondary:hover {
	border-color: #000000;
}

.home-hero__trust {
	font-size: 14px;
	color: #69727D !important;
	margin: 0;
}

/* Same accordion/lightbox markup as before, just sized to sit beside the
   hero copy instead of spanning the full page width. */
.home-hero__visual .home-image-accordion {
	height: 340px;
}

.home-hero__cta:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Browse by Category */
.home-category-grid {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.home-category-grid__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.home-category-tile {
	display: block;
	background-color: #FFFFFF;
	border-radius: 6px;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.home-category-tile:hover,
.home-category-tile:focus-visible {
	box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.home-category-tile:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

.home-category-tile__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.home-category-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-category-tile__body {
	padding: 18px;
}

.home-category-tile__name {
	font-size: 20px;
	font-weight: 700;
	color: #000000 !important;
	margin: 0 0 8px;
}

.home-category-tile__description {
	font-size: 14px;
	line-height: 1.5;
	color: #000000 !important;
	margin: 0 0 12px;
}

.home-category-tile__link {
	font-size: 14px;
	font-weight: 600;
	color: #E76E34;
}

.home-category-tile:hover .home-category-tile__link {
	color: #D64304;
}

/* Branded image fallback - used by both category tiles and article cards
   whenever there's no real featured image to show. */
.home-img-fallback {
	width: 100%;
	height: 100%;
	min-height: 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #393D46, #69727D);
}

.home-img-fallback__label {
	color: #FFFFFF;
	font-weight: 600;
	font-size: 16px;
	text-align: center;
	padding: 0 16px;
}

/* Editor's Picks - standardized article card, reused nowhere else on the
   homepage since the repeated category grids were removed. */
.home-editors-picks {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.home-editors-picks__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.home-article-card {
	background-color: #FFFFFF;
	box-shadow: 9.899px 9.899px 30px 0px rgba(0, 0, 0, 0.1);
}

.home-article-card__media {
	position: relative;
}

.home-article-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.home-article-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.home-article-card__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background-color: #00A016;
	color: #FFFFFF;
	font-size: 13px;
	padding: 3px 8px;
	border-radius: 3px;
}

.home-article-card__body {
	padding: 20px;
}

.home-article-card__title {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 8px;
}

.home-article-card__title a {
	color: #000000;
	text-decoration: none;
}

.home-article-card__title a:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

.home-article-card__differentiator {
	font-size: 15px;
	line-height: 1.5;
	color: #000000;
	margin: 0 0 10px;
}

.home-article-card__meta {
	font-size: 13px;
	color: #69727D;
	margin: 0 0 16px;
}

.home-article-card__cta {
	display: inline-block;
	background-color: #E76E34;
	color: #FFFFFF;
	padding: 10px 20px;
	border-radius: 5px;
	text-decoration: none;
	font-size: 15px;
}

.home-article-card__cta:hover {
	background-color: #D64304;
}

.home-article-card__cta:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* Latest Guides and Articles - same .home-article-card component as Editor's
   Picks, 6 items so no odd-item-out centering hack is needed at any
   breakpoint (unlike .home-editors-picks__grid's 3-item case). */
.home-latest-articles {
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.home-latest-articles__heading-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto 32px;
}

.home-latest-articles__heading-row .home-section-heading {
	margin: 0;
	text-align: left;
	padding: 0;
}

.home-latest-articles__view-all {
	color: #E76E34;
	text-decoration: none;
	font-weight: 700;
	white-space: nowrap;
}

.home-latest-articles__view-all:hover,
.home-latest-articles__view-all:focus-visible {
	text-decoration: underline;
}

.home-latest-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

@media (max-width: 992px) {
	.home-latest-articles__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.home-latest-articles__heading-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.home-latest-articles__grid {
		grid-template-columns: 1fr;
	}
}

/* How We Research */
.home-methodology {
	background-color: #FAFAFA;
	padding: 48px 20px;
}

.home-methodology__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.home-methodology__body {
	font-size: 17px;
	line-height: 1.6;
	color: #000000;
	margin: 0 0 24px;
}

.home-methodology__principles {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 24px;
	margin: 0 0 28px;
	padding: 0;
}

.home-methodology__principles li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	color: #000000;
}

.home-methodology__principles li::before {
	content: '\2713';
	position: absolute;
	left: 0;
	color: #03A019;
}

.home-methodology__link {
	font-size: 16px;
	font-weight: 600;
	color: #E76E34;
	text-decoration: none;
}

.home-methodology__link:hover {
	color: #D64304;
}

.home-methodology__link:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

@media (max-width: 992px) {
	.home-hero__inner {
		flex-direction: column;
	}
	.home-hero__visual {
		width: 100%;
	}
	.home-category-grid__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-editors-picks__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.home-editors-picks__grid > :nth-child(3) {
		grid-column: 1 / -1;
		max-width: calc(50% - 15px);
	}
}

@media (max-width: 600px) {
	.home-hero {
		padding: 40px 20px 32px;
	}
	.home-hero__heading {
		font-size: 32px;
	}
	.home-hero__ctas {
		flex-direction: column;
	}
	.home-hero__cta {
		text-align: center;
		width: 100%;
	}
	.home-hero__visual .home-image-accordion {
		height: 220px;
	}
	.home-category-grid__list,
	.home-editors-picks__grid {
		grid-template-columns: 1fr;
	}
	.home-editors-picks__grid > :nth-child(3) {
		max-width: none;
	}
}

/* ==========================================================================
   Archive/category/blog/search listing - ported from the Elementor archive
   template (post 4775, "archive_cards" skin). Same .ast-container
   flex-collapse guard as single.php/footer.php (Phase 1/2).
   ========================================================================== */

.archive-content-wrap {
	width: 100%;
	flex: 1 1 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px;
}

.archive-content-wrap__title {
	font-size: 36px;
	font-weight: 700;
	color: #000000 !important;
	margin-bottom: 30px;
}

.archive-post-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 35px 30px;
}

.archive-post-card__inner {
	position: relative;
	background-color: #FFFFFF;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	overflow: hidden;
}

.archive-post-card__thumb img {
	width: 100%;
	height: auto;
	display: block;
}

.archive-post-card__text {
	padding: 40px 30px 0;
}

.archive-post-card__badge {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	background-color: #69727D;
	color: #FFFFFF;
	font-size: 12px;
	padding: 7.2px 14.4px;
}

.archive-post-card__title {
	font-size: 16px;
	text-transform: uppercase;
	color: #000000;
	font-weight: 500;
	margin: 0 0 25px;
}

.archive-post-card__title a {
	color: inherit;
	text-decoration: none;
}

.archive-post-card__read-more {
	color: #000000;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}

.archive-content-wrap__pagination {
	margin-top: 40px;
	text-align: center;
}

.archive-content-wrap__pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	margin: 0 4px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #000000;
	text-decoration: none;
}

.archive-content-wrap__pagination .page-numbers.current {
	background-color: #69727D;
	color: #FFFFFF;
	border-color: #69727D;
}

@media (max-width: 992px) {
	.archive-post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.archive-post-grid {
		grid-template-columns: 1fr;
	}
}

/* Category hub content (Phase 2 Step 3) - intro/Start Here/subcat nav/
   methodology, rendered above the archive grid on the 4 primary hubs only.
   Reuses .home-article-card (defined in the homepage section above) for
   Start Here cards, so no separate card styling is needed here. */
.category-hub {
	margin-bottom: 40px;
}

.category-hub__intro {
	font-size: 17px;
	line-height: 1.6;
	color: #393D46;
	max-width: 900px;
	margin: 0 0 32px;
}

.category-hub__section-heading {
	font-size: 24px;
	font-weight: 700;
	color: #000000;
	margin: 0 0 16px;
}

.category-hub__section-heading--compact {
	font-size: 18px;
	margin-bottom: 12px;
}

.category-hub__start-here {
	margin-bottom: 36px;
}

.category-hub__start-here-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}

.category-hub__subcats {
	margin-bottom: 28px;
}

.category-hub__subcats-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin: 0;
	padding: 0;
}

.category-hub__subcats-list a {
	display: inline-block;
	background-color: #FAFAFA;
	border: 1px solid #E5E5E5;
	border-radius: 20px;
	padding: 8px 16px;
	color: #000000;
	text-decoration: none;
	font-size: 14px;
}

.category-hub__subcats-list a:hover,
.category-hub__subcats-list a:focus-visible {
	border-color: #E76E34;
	color: #E76E34;
}

.category-hub__subcats-count {
	color: #69727D;
	font-size: 12px;
}

.category-hub__methodology {
	font-size: 14px;
	color: #69727D;
	border-top: 1px solid #E5E5E5;
	padding-top: 20px;
	margin: 0 0 32px;
}

.category-hub__methodology a {
	color: #E76E34;
}

@media (max-width: 992px) {
	.category-hub__start-here-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.category-hub__start-here-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   ElementsKit accordion content (e.g. Our Process page FAQ) - the Bootstrap-
   style markup (data-ekit-toggle, aria-expanded) is already present in
   post_content since Elementor mirrors HTML but not the plugin's own JS/CSS
   that made it interactive. Restored generically via attribute selectors
   rather than one-off content edits, so it covers any page with this same
   pattern, not just Our Process.
   ========================================================================== */

a[data-ekit-toggle="collapse"] {
	cursor: pointer;
	display: block;
}

/* ==========================================================================
   2-column rows (About's heading+photo, Contact's image+form) - built via
   functions.php the_content filters since the original column split is
   Elementor layout data, not present in post_content. Proportions/spacing
   match production's own Elementor columns exactly.
   ========================================================================== */

.astra-child-2col {
	display: flex;
	align-items: stretch;
}

.astra-child-heading--center {
	text-align: center;
}

.astra-child-2col--33-66 > :first-child {
	flex: 0 0 33%;
	max-width: 33%;
	box-sizing: border-box;
	padding-right: 60px;
}

.astra-child-2col--33-66 > :last-child {
	flex: 0 0 66%;
	max-width: 66%;
}

.astra-child-2col--50-50 > * {
	flex: 0 0 50%;
	max-width: 50%;
	box-sizing: border-box;
	padding: 10px;
}

@media (max-width: 767px) {
	.astra-child-2col {
		flex-direction: column;
	}
	.astra-child-2col--33-66 > :first-child,
	.astra-child-2col--33-66 > :last-child,
	.astra-child-2col--50-50 > * {
		flex: 0 0 100%;
		max-width: 100%;
		padding: 0;
	}
}

/* ==========================================================================
   Contact page form - see functions.php's the_content filter for why this
   is appended here rather than living in post_content directly.
   ========================================================================== */

.astra-child-contact-form {
	max-width: 500px;
	margin-top: 20px;
}

.astra-child-contact-form p {
	margin-bottom: 16px;
}

.astra-child-contact-form label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.astra-child-contact-form input,
.astra-child-contact-form textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-family: inherit;
	font-size: 15px;
}

.astra-child-contact-form textarea {
	min-height: 120px;
}

.astra-child-contact-form button {
	background-color: #E76E34;
	color: #FFFFFF;
	border: none;
	padding: 10px 24px;
	border-radius: 4px;
	font-size: 15px;
	cursor: pointer;
}

/* ==========================================================================
   Single post content - .ast-container (opened by header.php, closed by our
   footer.php) is a flex container, so our <main> - like the <footer> before
   it - would otherwise shrink to its content's natural width instead of
   filling the page. Same fix as the footer's width collapse in Phase 1.
   ========================================================================== */

.main-content.blog-details-page {
	width: 100%;
	flex: 1 1 100%;
}

/* ==========================================================================
   Header - ported from Elementor header #4610.
   Astra's native header (.ast-main-header-wrap / #masthead) is restyled in
   place rather than replaced, matching the sibling-site migration pattern.
   ========================================================================== */

/* Astra's "ast-theme-transparent-header" bug (same unresolved root cause
   documented elsewhere in this file) makes the outer <header> itself
   position:absolute with a fixed 60px height - so a sticky child inside it
   has nothing left to stick to once the user scrolls past that 60px box,
   and the whole header scrolls away instead of staying visible like
   production's. Production's own <header> is directly position:sticky;
   top:0 (not a nested wrap) - matched here. */
.site-header {
	position: sticky !important;
	top: 0 !important;
	z-index: 99999;
}

.ast-main-header-wrap {
	background-color: #000000;
	position: sticky;
	top: 0;
	z-index: 99999;
}

/* .ast-primary-header-bar is a direct child of .ast-main-header-wrap with
   its own opaque white background (Astra's default), completely covering
   the black background above on any page not affected by the
   ast-theme-transparent-header bug (that bug happens to make this inner
   layer transparent too, which is why homepage/single-post/plain-pages
   looked fine while archive/category pages showed a plain white header -
   caught when the user compared production/staging screenshots directly). */
.ast-primary-header-bar {
	background-color: #000000 !important;
}

/* Astra's inner header wrap carries its own 20px horizontal padding on top
   of the outer bar's padding (Customizer: Header > General > Primary Header
   padding) - redundant double-padding was eating ~40px of space needed by
   the primary nav menu, causing the last item to wrap to a second row. */
.main-header-bar .site-primary-header-wrap {
	padding-left: 0;
	padding-right: 0;
}

.main-header-bar .ast-builder-grid-row {
	column-gap: 10px;
}

/* .site-header-section has an Astra-core rule of height:100%, which given
   this row's implicit (not explicitly sized) grid track height resolves to
   a much taller value than any of the row's actual content needs - forcing
   it down to the menu's own natural content height closes that gap.
   33px matches production's actual header content height (measured via
   the live Elementor header: 53px total bar height - 10px top - 10px
   bottom padding = 33px) - the original 40px here left the whole header
   noticeably taller than production's. */
.main-header-bar .ast-builder-grid-row,
.main-header-bar .site-header-section {
	height: 33px;
}

.ast-main-header-wrap,
.ast-main-header-wrap a,
.main-header-bar .main-navigation ul li a {
	font-family: 'Roboto', sans-serif;
}

.site-branding .custom-logo-link img,
.site-branding .site-logo-img img {
	max-height: 50px;
}

.main-header-bar .main-navigation ul li a {
	/* !important: same Astra transparent-header compatibility override as
	   the current-menu-item rule below - its --ast-global-color-2 based
	   rule otherwise wins over this base color regardless of specificity. */
	color: #FFFFFF !important;
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	padding: 10px 15px;
}

.main-header-bar .main-navigation ul li a:hover,
.main-header-bar .main-navigation ul li.current-menu-item > a,
.main-header-bar .main-navigation ul li.current-menu-ancestor > a {
	/* !important needed: Astra applies an "ast-theme-transparent-header" body
	   class (its Elementor-canvas-page compatibility behavior) even with
	   the "Transparent Header" setting itself disabled - that selector
	   chain's specificity (5 chained classes) otherwise wins over this rule. */
	color: #D64304 !important;
}

.main-header-bar .main-navigation ul ul {
	background-color: #393D46;
}

.main-header-bar .main-navigation ul ul li a {
	color: #FFFFFF !important;
	font-weight: 400;
	text-transform: none;
	/* !important: Astra's own .main-header-menu .sub-menu .menu-link rule
	   (3 classes) has higher specificity than this selector (2 classes)
	   despite more element parts, and was zeroing out padding-bottom. */
	padding: 10px 15px !important;
}

.main-header-bar .main-navigation ul ul li a:hover {
	color: #D64304;
}

.main-header-bar .menu-toggle.main-header-menu-toggle {
	color: #FFFFFF !important;
	/* Astra's default "minimal" trigger padding (13.5px) makes the 20px
	   icon a 47px button - well past production's 33px toggle (22px icon +
	   5.5px padding, measured live), which was the main contributor to the
	   header being visibly taller on staging than production. */
	padding: 6.5px;
}

.main-header-bar .menu-toggle.main-header-menu-toggle svg {
	fill: #FFFFFF !important;
}

/* Header search icon - same Astra default-color bleed-through as the nav
   links/mobile toggle, rendering near-invisible dark purple against the
   black header instead of white (user initially read this as "missing"
   since it blends into the background). */
.main-header-bar .ast-search-menu-icon.slide-search,
.main-header-bar .ast-search-menu-icon.slide-search .ast-icon,
.main-header-bar .ast-search-menu-icon.slide-search svg {
	color: #FFFFFF !important;
	fill: #FFFFFF !important;
}

/* ==========================================================================
   Footer - ported from Elementor footer #4612 (main 4-column content row +
   bottom bar; the newsletter bar was removed sitewide per explicit request).
   ========================================================================== */

.astra-child-footer {
	background-color: #393D46;
	color: #FAFAFA;
}

.astra-child-footer__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.astra-child-footer__main-row {
	display: flex;
	flex-wrap: wrap;
	padding: 88px 0 60px;
	gap: 30px;
}

.astra-child-footer__col {
	flex: 1 1 15%;
}

.astra-child-footer__col--brand {
	flex: 0 0 44%;
	max-width: 44%;
	padding: 0 40px 0 0;
}

.astra-child-footer__disclosure {
	font-size: 13px;
	line-height: 21px;
	letter-spacing: 1px;
	color: #FAFAFA;
	margin-top: 0;
	margin-bottom: 14.4px;
}

.astra-child-footer__disclosure a {
	color: #ff6600;
}

.astra-child-footer__disclosure-cta {
	margin-bottom: 0;
}

.astra-child-footer__heading {
	color: #FFFFFF;
	font-family: 'Lato', sans-serif !important;
	font-size: 16px;
	font-weight: 800;
	margin-bottom: 16px;
}

.astra-child-footer__nav,
.astra-child-footer__category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.astra-child-footer__nav li,
.astra-child-footer__category-list li {
	margin-bottom: 8px;
}

.astra-child-footer__nav a,
.astra-child-footer__category-list a {
	color: #FFFFFF;
	font-size: 15px;
	text-decoration: none;
}

.astra-child-footer__nav a:hover,
.astra-child-footer__category-list a:hover {
	color: #D64304;
}

.astra-child-footer__bottom {
	border-top: 1px solid #F5EAEA;
}

.astra-child-footer__bottom-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0;
	flex-wrap: wrap;
	gap: 16px;
}

.astra-child-footer__social-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.astra-child-footer__social-list li {
	margin-bottom: 5px;
}

.astra-child-footer__social-list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #FFFFFF;
	font-size: 16px;
	text-decoration: none;
}

.astra-child-footer__social-list a:hover {
	color: #D64304;
}

.astra-child-footer__copyright {
	margin: 0;
	font-size: 12px;
	color: #FFFFFF;
}

.astra-child-footer__legal-nav {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.astra-child-footer__legal-nav a {
	display: block;
	padding: 13px 20px;
	color: #FFFFFF;
	font-size: 12px;
	text-decoration: none;
}

.astra-child-footer__legal-nav a:hover {
	color: #D64304;
}

@media (max-width: 768px) {
	.astra-child-footer__main-row {
		flex-direction: column;
	}
	.astra-child-footer__col--brand {
		max-width: 100%;
	}
}