/*
Theme Name: Astra Child (Native)
Template: astra
Description: Native Gutenberg/PHP header, footer, and homepage template - no Elementor Theme Builder dependency.
Version: 1.0.0
Author: abestfive
Text Domain: astra-child
*/

:root {
	--site-max-width: 1200px;
	--site-accent: #111218;
	/* Single source of truth for the fixed header's actual rendered height -
	   body's top padding, the sticky category subnav, and the sticky ad/
	   sidebar boxes all key off this instead of separately hardcoding the
	   same number, so they can never drift out of sync with each other or
	   with the real header height (which differs on mobile - see below). */
	--header-height: 81px;
}

body {
	padding-top: var(--header-height);
}

a:focus {
	outline: none;
}

/* Mobile browsers add up to ~300ms delay before firing a real click on any
   element styled with :hover, to disambiguate "hover then tap again" from
   a genuine tap - this is what made every link feel sluggish to touch.
   touch-action:manipulation tells the browser to skip that disambiguation
   and treat a tap as an immediate click. Desktop hover behavior (color/
   shadow transitions etc.) is untouched - this only affects tap latency. */
a,
button {
	touch-action: manipulation;
}

.site-header {
	border-bottom: 1px solid #e5e5e5;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
}

.site-header__inner {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.site-header__branding {
	display: flex;
	align-items: center;
}

.site-header__branding img {
	max-height: 48px;
	width: auto;
}

/* Mobile header is intentionally more compact (smaller logo, tighter
   padding) - --header-height is updated to match exactly, so body's top
   padding and every sticky element keyed off it (category subnav, sticky
   ad/sidebar boxes) stay correctly positioned instead of leaving a gap or
   overlapping content, which is what happens if only one of these is
   updated for mobile and the others keep assuming the desktop height. */
@media (max-width: 767px) {
	:root {
		--header-height: 65px;
	}

	.site-header__inner {
		padding: 12px 16px;
	}

	.site-header__branding img {
		max-height: 40px;
	}
}

.site-header__branding-text {
	font-size: 22px;
	font-weight: 700;
	color: var(--site-accent);
	text-decoration: none;
}

.site-header__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header__nav a {
	text-decoration: none;
	color: var(--site-accent);
	font-size: 15px;
}

.site-header__nav a:hover {
	text-decoration: underline;
}

.site-header__search .search-form {
	display: flex;
	align-items: center;
	gap: 6px;
}

.site-header__search .search-field {
	box-sizing: border-box;
	height: 38px;
	padding: 0 10px;
	border: 1px solid #ccc;
	font-size: 13px;
	max-width: 160px;
}

/* Astra's searchform.php renders an icon button (.ast-search-submit) AND a
   text submit input, both with class "search-submit" - keep only the text
   button so there's a single, unambiguous submit control. */
.site-header__search .ast-search-submit {
	display: none;
}

.site-header__search input.search-submit {
	box-sizing: border-box;
	height: 38px;
	padding: 0 14px;
	font-size: 12px;
	background: var(--site-accent);
	color: #fff;
	border: 1px solid var(--site-accent);
	cursor: pointer;
}

.site-header__search .search-submit:hover {
	background: transparent;
	color: var(--site-accent);
}

/* Mobile header: hamburger toggle + off-canvas drawer holding the nav and
   search form. Hidden on desktop; .site-header__drawer is a normal inline
   flex child there (nav + search sitting side by side, same as before). */
.site-header__menu-toggle {
	display: none;
}

.site-header__drawer {
	display: flex;
	align-items: center;
	gap: 20px;
}

.site-header__drawer-overlay {
	display: none;
}

.site-header__drawer-close {
	display: none;
}

@media (max-width: 767px) {
	.site-header__drawer-close {
		display: block;
		position: absolute;
		top: 16px;
		right: 16px;
		width: 44px;
		height: 44px;
		line-height: 1;
		font-size: 34px;
		background: none;
		border: none;
		color: var(--site-accent);
		cursor: pointer;
		padding: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: stretch;
		gap: 5px;
		width: 32px;
		height: 32px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		flex-shrink: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__menu-toggle span {
		display: block;
		width: 100%;
		height: 2px;
		background: var(--site-accent);
	}

	/* Explicit hover/focus/active state so the toggle never ends up with
	   dark lines on a dark background (e.g. a browser/OS default tap
	   highlight darkening the button while the lines stay --site-accent,
	   which reads as a solid black square with no visible icon at all). */
	.site-header__menu-toggle:hover,
	.site-header__menu-toggle:focus-visible,
	.site-header__menu-toggle:active {
		background: var(--site-accent);
	}

	.site-header__menu-toggle:hover span,
	.site-header__menu-toggle:focus-visible span,
	.site-header__menu-toggle:active span {
		background: #fff;
	}

	.site-header__drawer {
		position: fixed;
		top: 0;
		right: -100%;
		width: 75%;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 80px 20px 20px;
		box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
		transition: right 0.3s ease;
		z-index: 10000;
		overflow-y: auto;
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__drawer a {
		-webkit-tap-highlight-color: transparent;
	}

	.site-header__drawer.is-open {
		right: 0;
	}

	.site-header__drawer .site-header__nav ul {
		flex-direction: column !important;
		align-items: flex-start !important;
		width: 100%;
		gap: 16px !important;
	}

	.site-header__drawer .site-header__search {
		width: 100%;
	}

	.site-header__drawer .site-header__search .search-form {
		flex-wrap: wrap;
	}

	.site-header__drawer .site-header__search .search-field {
		max-width: none;
		flex: 1 1 auto;
	}

	/* display:none/block can't be transitioned (it snaps instantly), which
	   read as a "flash" out of sync with the drawer's own 0.3s slide -
	   opacity+visibility fades in at the same speed instead. */
	.site-header__drawer-overlay {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		/* .site-header has z-index:9999 and establishes its own stacking
		   context - the drawer's z-index:10000 only competes within that
		   context, not against this overlay (a sibling of <header> itself).
		   Comparing siblings, whichever has the higher z-index wins
		   regardless of source order, so this must stay below 9999 or the
		   overlay paints over the header/drawer instead of under it. */
		z-index: 9998;
	}

	.site-header__drawer-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}
}

/* "Categories" dropdown in the main nav - desktop shows a hover/focus
   dropdown anchored under the "Categories" link. Mobile (inside the
   off-canvas drawer) shows the same list as an always-expanded, indented
   inline sublist instead, since touch has no hover state and the drawer
   already scrolls vertically - a tap-to-toggle would just be one more
   step for no real space savings there. */
.site-header__nav .menu-item-has-children {
	position: relative;
}

.site-header__nav .menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.site-header__nav .menu-item-has-children > a::after {
	content: "\25BE";
	font-size: 20px;
	transition: transform 0.2s ease;
}

/* "Categories" gets no underline at all on hover/focus, overriding the
   general .site-header__nav a:hover underline - the color change + arrow
   rotation below are enough of a hover indicator on their own. */
.site-header__nav .menu-item-has-children > a:hover,
.site-header__nav .menu-item-has-children > a:focus {
	text-decoration: none;
}
.site-header__nav .menu-item-has-children > a:hover::after {
	text-decoration: none;
}

.site-header__nav .menu-item-has-children:hover > a,
.site-header__nav .menu-item-has-children:focus-within > a {
	color: #1b0279;
}

.site-header__nav .menu-item-has-children:hover > a::after,
.site-header__nav .menu-item-has-children:focus-within > a::after {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	/* The submenu is always expanded inline in the mobile drawer (see
	   below) rather than shown on hover/tap, so an interactive-looking
	   arrow here would promise a toggle that doesn't exist - hide it. */
	.site-header__nav .menu-item-has-children > a::after {
		display: none;
	}
}

.site-header__nav .sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
	z-index: 10;
}

.site-header__nav .menu-item-has-children:hover .sub-menu,
.site-header__nav .menu-item-has-children:focus-within .sub-menu {
	display: block;
}

.site-header__nav .sub-menu li {
	white-space: nowrap;
}

.site-header__nav .sub-menu a {
	display: block;
	padding: 8px 18px;
	font-size: 14px;
}

.site-header__nav .sub-menu a:hover {
	background: #f5f5f5;
	text-decoration: none;
}

@media (max-width: 767px) {
	.site-header__nav .sub-menu {
		display: block;
		position: static;
		border: none;
		box-shadow: none;
		padding: 4px 0 4px 16px;
		min-width: 0;
	}

	.site-header__nav .sub-menu a {
		padding: 6px 0;
		font-size: 14px;
		color: #555;
	}
}


.home-hero-row {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
	display: grid;
	grid-template-columns: 23fr 53.332fr 23fr;
	gap: 24px;
	align-items: start;
}

@media (max-width: 921px) {
	.home-hero-row {
		grid-template-columns: 1fr;
	}
}

.home-hero-row__col {
	min-width: 0;
}

.home-hero-row__new-updated h2 {
	font-family: 'Lora', serif;
	font-size: 28px;
	font-weight: 700;
	color: #22242F;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--site-accent);
}

.home-hero-row__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.home-hero-row__list li {
	margin: 0 0 12px;
}

.home-hero-row__list a {
	color: var(--site-accent);
	text-decoration: none;
	font-weight: 600;
}

.home-hero-row__list a:hover {
	text-decoration: underline;
}

.home-hero-row__see-everything {
	display: inline-block;
	border: 1px solid var(--site-accent);
	color: var(--site-accent);
	padding: 10px 24px;
	text-decoration: none;
	font-size: 15px;
}

.home-hero-row__see-everything:hover {
	background: var(--site-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.home-slideshow {
	position: relative;
}

.home-slideshow__slide {
	display: none;
}

.home-slideshow__slide.is-active {
	display: block;
}

.home-slideshow__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

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

.home-slideshow__body {
	padding: 16px 0;
}

.home-slideshow__badge {
	display: inline-block;
	background: #eee;
	color: #555;
	font-size: 13px;
	padding: 4px 10px;
	margin-bottom: 10px;
}

.home-slideshow__title {
	font-family: 'Lora', serif;
	font-size: 28px;
	font-weight: 700;
	color: #22242F;
	margin: 0 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.home-slideshow__excerpt {
	font-size: 15px;
	color: #555;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-hero-row__ad {
	text-align: center;
	position: sticky;
	top: calc(var(--header-height) + 9px);
	max-height: calc(100vh - var(--header-height) - 19px);
	overflow: hidden;
}

.home-hero-row__ad img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - var(--header-height) - 19px);
	object-fit: contain;
	margin: 0 auto 16px;
	display: block;
}

.home-category-section {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
}

.home-category-section__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
	border-top: 3px solid var(--site-accent);
	padding-top: 16px;
}

/* Listing pages (Blog, category archives, search, See Everything) only
   have one header at the very top of the page - the divider makes sense
   stacked between homepage sections, but looks orphaned as the first
   thing on the page here. */
.home-category-section__header--no-divider {
	border-top: none;
	padding-top: 0;
}

.home-category-section__header h2 {
	font-family: 'Lora', serif;
	font-size: 39px;
	font-weight: 700;
	color: #22242F;
	margin: 0;
}

.home-category-section__header a {
	font-size: 14px;
	color: var(--site-accent);
	white-space: nowrap;
}

@media (max-width: 767px) {
	.home-category-section__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.home-category-section__header h2 {
		font-size: 26px;
	}

	.home-category-section__header a {
		width: 100%;
	}
}

.home-listing-subtitle {
	font-size: 15px;
	font-weight: 600;
	color: #666;
	margin: 0 0 8px;
}

.home-listing-description {
	font-size: 15px;
	color: #45485F;
	margin: 0 0 20px;
	max-width: 800px;
}

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

/* Blog/category/search listing pages have no sidebar to share the row
   with, so they use the freed-up width for a 4th column. */
.home-post-grid--listing {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1200px) {
	.home-post-grid--listing {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

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

.home-post-card {
	background-color: #f6f6f6;
	box-shadow: 0 1px 25px rgba(0, 0, 0, 0.05);
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
	.home-post-card:hover {
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	}
}

.home-post-card__thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.home-post-card__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-post-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.home-post-card__title {
	font-family: 'Lora', serif;
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-post-card__title a {
	color: var(--site-accent);
	text-decoration: none;
}

.home-post-card__excerpt {
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	color: #45485F;
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-post-card__readmore {
	margin-top: auto;
	align-self: flex-start;
	color: #1b0279;
	background-color: transparent;
	border: none;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease;
}

.home-post-card__readmore:link,
.home-post-card__readmore:visited,
.home-post-card__readmore:focus,
.home-post-card__readmore:active {
	color: #1b0279;
}

.home-post-card__readmore:hover {
	color: #8b0000;
	text-decoration: none;
}

/* 65% main column (slideshow + its tab nav together) / 5% gap / 30% ad
   sidebar - percentage gap resolves against the grid container's own
   width same as the percentage columns, so 65+5+30 sums to exactly
   100% instead of needing separate fixed-px math. */
.home-exclusive-row {
	display: grid;
	grid-template-columns: 65% 30%;
	gap: 5%;
}

@media (max-width: 921px) {
	.home-exclusive-row {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* Slider (left) + slide-list nav (right) side by side within the 65%
   main column - same left-to-right, multi-piece-row pattern as the hero
   section above (nav list / slider / ad all side by side there), just a
   different pairing of pieces. */
.home-exclusive-row__main {
	min-width: 0;
	display: grid;
	grid-template-columns: 65% 30%;
	gap: 5%;
}

@media (max-width: 767px) {
	.home-exclusive-row__main {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.home-exclusive-row__slider {
	position: sticky;
	top: 90px;
	align-self: start;
	max-height: calc(100vh - 100px);
	overflow: hidden;
	min-width: 0;
}

.home-exclusive-row__slider .home-slideshow__thumb {
	aspect-ratio: 16 / 10;
}

.home-exclusive-row__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* Ad sidebar - same sticky/contain treatment as the other two ad
   placements on this page (.home-hero-row__ad, .home-latest-post-row__
   aside), for a consistent feel and to avoid the same scrollbar bug
   those originally had (overflow-y:auto with no height cap on the img). */
.home-exclusive-row__aside {
	position: sticky;
	top: calc(var(--header-height) + 9px);
	max-height: calc(100vh - var(--header-height) - 19px);
	overflow: hidden;
	text-align: center;
	min-width: 0;
}

@media (max-width: 921px) {
	.home-exclusive-row__aside {
		position: relative;
		top: auto;
		max-height: none;
		overflow: visible;
	}
}

.home-exclusive-row__ad-image {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - var(--header-height) - 19px);
	object-fit: contain;
	margin: 0 auto;
	display: block;
}

/* Slide-nav tabs: click one to jump the left slideshow to that category's
   post, active state (in sync with whichever slide is currently showing,
   including during auto-rotation) gets the accent left-border + tinted
   background. Reset from default <button> chrome since these act as a
   nav, not a form control. */
.home-exclusive-tab {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	padding: 14px 0 14px 16px;
	cursor: pointer;
	font-family: inherit;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.home-exclusive-tab:hover {
	background: #f7f7f7;
}

.home-exclusive-tab.is-active {
	background: #f5f5f5;
	border-left-color: #1b0279;
}

.home-exclusive-tab__badge {
	display: inline-block;
	background: #eee;
	color: #555;
	font-size: 12px;
	padding: 3px 9px;
}

.home-exclusive-tab.is-active .home-exclusive-tab__badge {
	background: #1b0279;
	color: #fff;
}

.home-exclusive-tab__title {
	font-family: 'Lora', serif;
	font-size: 17px;
	font-weight: 700;
	color: #22242F;
}

/* Same column widths/gap as .home-exclusive-row above (65%/5%/30%) so the
   left column and the ad column line up exactly between the two sections
   when stacked on the homepage, instead of each section inventing its own
   ratio (this one was 74fr/48px/26fr before). */
.home-latest-post-row {
	max-width: var(--site-max-width);
	margin: 0 auto;
	padding: 30px 20px;
	display: grid;
	grid-template-columns: 65% 30%;
	gap: 5%;
	align-items: start;
}

@media (max-width: 921px) {
	.home-latest-post-row {
		grid-template-columns: 1fr;
	}
}

.home-latest-post-row__main,
.home-latest-post-row__aside {
	min-width: 0;
}

.home-latest-post {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 20px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #e5e5e5;
}

.home-latest-post__body {
	min-width: 0;
}

.home-latest-post:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

@media (max-width: 544px) {
	.home-latest-post {
		grid-template-columns: 1fr;
	}
}

.home-latest-post__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f2f2f2;
}

.home-latest-post__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-latest-post-row__aside {
	text-align: center;
	align-self: start;
	position: sticky;
	top: calc(var(--header-height) + 9px);
	max-height: calc(100vh - var(--header-height) - 19px);
	overflow: hidden;
}

.home-latest-post-row__aside img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - var(--header-height) - 19px);
	object-fit: contain;
	margin: 0 auto;
	display: block;
}

/* Phones and small tablets (iPad mini portrait is 768px) - ads don't fit
   side by side at these widths, so hide them outright instead of stacking
   them into the content flow. Wider tablets (iPad Air/Pro, 800px+) keep the
   existing desktop-like behavior untouched. */
@media (max-width: 799px) {
	.home-hero-row__ad,
	.home-latest-post-row__aside,
	#secondary {
		display: none;
	}

	.home-hero-row {
		grid-template-columns: 1fr;
	}

	.home-latest-post-row {
		grid-template-columns: 1fr;
	}
}

/* No sticky content on mobile/small tablets - everything scrolls past
   normally instead of pinning and potentially overlapping other sections.
   Desktop behavior (position:sticky) is untouched above 921px. */
@media (max-width: 921px) {
	.home-exclusive-row__slider {
		position: relative;
		top: auto;
		max-height: none;
		overflow: visible;
	}
}

/* Footer: rendered entirely by Astra core's own footer-builder (astra_footer()
   in footer.php) using its native styling - no custom footer CSS needed. */
.site-footer {
	background-color: #f7f7f7;
	border-top: 1px solid #e5e5e5;
}

.site-below-footer-wrap .ast-builder-grid-row {
	border-top: 1px solid #e5e5e5;
	padding-top: 24px;
}

/* All footer text links (About/Company/Buying Guide/Legal/Follow Us
   widgets, plus "Powered by: Webtricker LLC" in the bottom row) - same
   dark blue / dark red scheme used site-wide. */
#colophon a {
	color: #1b0279;
}

#colophon a:hover {
	color: #8b0000;
}

/* Astra's own mobile footer behavior stacks all 4 widget columns full width,
   center-aligned - 2 columns, left-aligned, fits the content better and
   matches the tablet layout Astra already uses. Scoped to
   .site-primary-footer-wrap specifically (not just .ast-footer-row-mobile-
   stack, which the copyright/"Powered by" row below shares too) - applying
   this 2-column-forced layout there as well was overriding Astra's own
   correct 1-column stacking for that row.
   NOTE: the actual CSS Grid lives on .ast-builder-grid-row (it also carries
   .ast-builder-footer-grid-columns) - .ast-builder-grid-row-container-inner
   is just a plain wrapper div around it, not itself display:grid, so
   grid-template-columns has zero effect there. Also, without min-width:0
   grid items default to min-width:auto, which prevents a long, unbreakable
   category name (e.g. "Water Purifier & Filtration Accessories") from
   shrinking to fit its track - it forces the whole row wider than the
   viewport instead of wrapping, which is what was pushing/cutting off
   footer content sideways on real narrow phones (not reproducible in
   desktop responsive-mode testing, since dev tools default viewport is
   often wide enough that the same text never needed to shrink there). */
@media (max-width: 544px) {
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .ast-builder-grid-row-container-inner .ast-builder-grid-row {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* text-align:left on the section alone doesn't reach the widget title
	   or the nav-menu <ul> - both carry Astra's own explicit
	   text-align:center at this breakpoint, which wins over the inherited
	   value from this ancestor same as the "Follow Us" right-align issue
	   did earlier, so they need the override directly too. */
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .site-footer-section,
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .site-footer-section .widget-title,
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .site-footer-section ul,
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .site-footer-section li,
	.site-primary-footer-wrap.ast-footer-row-mobile-stack .site-footer-section .textwidget {
		min-width: 0;
		text-align: left !important;
	}

	/* Copyright / "Powered by" row: Astra's own ast-builder-grid-row-mobile-
	   full already stacks this to 1 column (untouched now that the rule
	   above no longer forces 2 columns here) - just needs centering
	   (unlike the widget columns above, which are left-aligned) and some
	   breathing room between the two lines. */
	.site-below-footer-wrap .site-footer-section {
		text-align: center;
	}

	.site-footer-below-section-2 {
		margin-top: 16px;
	}
}

/* Only the first widget in the single post/page sidebar (Astra core's own
   #secondary/.sidebar-main markup, unmodified here) is sticky; the rest
   scroll normally beneath it. #secondary is stretched to #primary's height
   by Astra's own .ast-container flex row (align-items:stretch), but that
   stretch doesn't cascade to the .sidebar-main block inside it by default -
   height:100% here makes .sidebar-main (and so the sticky widget's stuck
   duration) span the full height of the main article, not just its own
   short natural content height. */
#secondary .sidebar-main {
	align-self: start;
	height: 100%;
}

#secondary .sidebar-main > .widget:first-child {
	/* !important because the general compound-selector rule right below
	   also matches this element (it's a .widget too) and has more classes
	   in its selector (3 vs. this rule's 2), so on plain specificity alone
	   it would win and silently downgrade this to position:relative,
	   breaking the sticky ad box - it needs to stay position:sticky no
	   matter what order these two rules end up in. */
	position: sticky !important;
	top: calc(var(--header-height) + 9px);
	max-height: calc(100vh - var(--header-height) - 19px);
	overflow-y: auto;
}

/* Every widget in this sidebar gets a low baseline z-index/stacking
   context, so they layer predictably as they scroll past the sticky
   first one - reuses Astra's own compound selector (the same one "Fix 6"
   used to hijack for padding) since it's already proven to match every
   widget here reliably. #media_image-1 (the sticky ad box, id-targeted
   directly rather than :first-child, in case widget order ever changes)
   needs !important to actually win against this - it has fewer classes
   in its selector, so on plain specificity alone the compound rule below
   would otherwise override it despite being declared first. */
.ast-separate-container.ast-two-container #secondary .widget {
	position: relative;
	z-index: 3;
}

#media_image-1 {
	z-index: 999 !important;
}

/* All ad widgets in this sidebar (Webtricker image + AdSense blocks) -
   no boxed padding/background, image ads run full width. AdSense's own
   <ins> keeps its own fixed ad-unit dimensions (required by Google), so
   only the container and plain <img> ads are touched here. */
/* Astra doesn't just set this in its static stylesheet - it also outputs
   a per-request DYNAMIC <style> block directly inline in <head> (separate
   from any enqueued/cached file), which repeats this same rule with
   !important too: .ast-separate-container.ast-two-container #secondary
   .widget { padding: .95em !important; } (confirmed via devtools - it
   was winning over the plain-!important version below since both are
   !important and specificity still decides the tie, and that selector's
   1 ID + 3 classes beats a plain 1 ID + 2 classes). The doubled #secondary
   below is a deliberate specificity boost (repeating an ID selector is
   valid CSS and counts twice) so this wins regardless of which stylesheet
   loads first or whether Astra ever changes that inline rule's contents. */
#secondary#secondary .sidebar-main .widget {
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* Match the site's standard 1200px max-width (used everywhere else -
   homepage, listing pages) instead of Astra's own 1240px default. */
.single-post .site-content > .ast-container,
.page .site-content > .ast-container {
	max-width: 1200px;
}

/* The static front page also carries the .page class, but front-page.php's
   own sections (.home-hero-row etc.) already apply their own 1200px+20px
   padding internally - adding it here too would double it up, so exclude
   .home (present on the front page) from the padding, not just max-width. */
.single-post .site-content > .ast-container,
.page:not(.home) .site-content > .ast-container {
	padding-left: 20px;
	padding-right: 20px;
}

/* Native page title (e.g. About Us) inherits a generic light-grey, non-bold
   h1 style from Astra's core CSS, so it reads thin and blends into the body
   copy below it instead of standing out as the page title. */
.page .entry-title {
	font-size: 42px;
	font-weight: 700;
	color: var(--site-accent);
}

#secondary .sidebar-main .widget img {
	width: 100%;
	height: auto;
	display: block;
}

/* Migrated post content (Step 1) has a mix of button markup per post -
   some kept the raw Elementor button widget (.elementor-button), others
   became native Gutenberg buttons (.wp-block-button__link) - each carrying
   its own one-off colors/shape (or no visible style at all). Force one
   consistent look (logo's dark blue) across every post regardless of which
   markup it ended up with. */
.entry-content .elementor-button,
.entry-content .wp-block-button__link {
	background-color: #1b0279 !important;
	color: #fff !important;
	border-color: #1b0279 !important;
	border-radius: 4px !important;
}

.entry-content .elementor-button:hover,
.entry-content .wp-block-button__link:hover {
	filter: brightness(1.1);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	transition: filter 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .elementor-button:focus,
.entry-content .elementor-button:active,
.entry-content .wp-block-button__link:focus,
.entry-content .wp-block-button__link:active {
	color: #fff !important;
}

/* First heading directly after the featured image had no top spacing -
   Astra's heading reset sets margin-bottom but no margin-top, and the
   preceding image block also has margin:0, so they sat flush together. */
.entry-content .wp-block-heading {
	margin-top: 30px;
}

/* Astra's built-in "back to top" button - match the same logo dark blue. */
#ast-scroll-top {
	background-color: #1b0279 !important;
}

/* Product image + "See Price On Amazon" button, normalized across all 16
   migrated posts (see the_content filter in functions.php that pulls each
   image and its own button together): 60% image, 10% gap, 30% button,
   button bottom-aligned with the image. */
.product-cta {
	display: flex;
	align-items: flex-end;
	gap: 10%;
	margin: 24px 0;
}

.product-cta .wp-block-image {
	flex: 0 0 60%;
	margin: 0;
}

.product-cta .wp-block-buttons {
	flex: 0 0 30%;
	margin: 0;
}

.product-cta .wp-block-button {
	width: 100%;
}

.product-cta .wp-block-button__link {
	display: block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	padding-left: 8px !important;
	padding-right: 8px !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Plain text links within post/page content (e.g. the About page's
   closing "Let's see the best reviews" CTA, "Contact us", "affiliate
   disclosure") - same dark blue / dark red scheme used site-wide. */
.entry-content a {
	color: #1b0279;
}

.entry-content a:hover {
	color: #8b0000;
}

/* Product model-name heading right after the image/button - links to the
   same Amazon URL as the button, styled to still read as a heading rather
   than a plain blue link. */
.entry-content h3.wp-block-heading a {
	color: inherit;
	text-decoration: none;
}

.entry-content h3.wp-block-heading a:hover {
	color: #8b0000;
	text-decoration: none;
}

@media (max-width: 600px) {
	.product-cta {
		flex-wrap: wrap;
	}

	.product-cta .wp-block-image,
	.product-cta .wp-block-buttons {
		flex-basis: 100%;
	}
}

/* Native archive/search/blog listing pages (home.php, archive.php,
   search.php) - reuse the same section header + grid classes as the
   homepage category sections, plus a "browse other categories" fallback
   for zero-result pages and default pagination styling. */
.site-browse-categories {
	margin-bottom: 24px;
}

.site-browse-categories h3 {
	margin: 0 0 0.5em;
}

.site-browse-categories ul {
	list-style: disc;
	padding-left: 1.5em;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5em;
}

.site-browse-categories li {
	margin: 0.2em 0;
}

.site-browse-categories a {
	text-decoration: underline;
}

.navigation.pagination {
	margin-top: 30px;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.navigation.pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid #e0e0e0;
	color: var(--site-accent);
	text-decoration: none;
	font-size: 14px;
}

.navigation.pagination .page-numbers.current {
	background-color: var(--site-accent);
	color: #fff;
	border-color: var(--site-accent);
}

.navigation.pagination .page-numbers:hover {
	border-color: var(--site-accent);
}

/* Zero-result fallback ("browse other categories" list), output by
   astra_child_no_results() in functions.php - migrated here from the
   legacy site-search-fallback.php mu-plugin, which also contained a pile
   of now-fully-dead CSS targeting .elementor-element-*/.uael-post__*
   classes from before this site was native (removed entirely - see the
   "Fix 6" incident this was found during: that file was ALSO still
   silently forcing this exact sidebar widget's padding back to .95em on
   every single page, via a plain wp_head-injected <style> block, which
   is why the specificity-boosted rule further up this file wasn't
   enough on its own - the real fix was deleting the competing rule at
   its source, not just out-specificity-ing it). */
.site-browse-categories {
	margin-bottom: 24px;
}

.site-browse-categories h3 {
	margin: 0 0 0.5em;
}

.site-browse-categories ul {
	list-style: disc;
	padding-left: 1.5em;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5em;
}

.site-browse-categories li {
	margin: 0.2em 0;
}

.site-browse-categories a {
	text-decoration: underline;
}

/* Collapse any AdSense <ins class="adsbygoogle"> slot sitewide when Google
   didn't fill it, instead of leaving reserved empty space. Google sets
   data-ad-status="unfilled" on the <ins> once the ad request resolves
   with nothing to show. This only affects standard manually-placed ad
   units; it does not control Auto ads/Matched content placement, which
   is managed from the AdSense account dashboard, not from the site. */
ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}