/*
Theme Name: DrSplurge Child
Theme URI: https://drsplurge.com
Description: Child theme for DrSplurge — clean white background, navy + yellow brand accents, centered transparent header.
Author: DrSplurge
Template: astra
Version: 1.1.0
Text Domain: drsplurge-child
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
	--ds-navy: #1a2845;
	--ds-navy-deep: #0f1a30;
	--ds-yellow: #ffd63a;
	--ds-yellow-deep: #ffb81c;
	--ds-orange: #ff8c29;
	--ds-red: #d63838;
	--ds-ink: #1a2845;
	--ds-muted: #5a6785;
	--ds-border: #e8ebf2;
}

/* ---------- BASE + BACKGROUND ---------- */

body,
body.page,
body.single,
body.home,
body.blog,
body.archive {
	background: #ffffff !important;
	background-image: none !important;
	color: var(--ds-ink);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.site,
#page,
.ast-container,
.site-content {
	background: transparent !important;
}

/* Kill the leftover Astra "Tech News" starter-template green gradient on UAGB containers */
.wp-block-uagb-container,
.uagb-block-42c6b1de,
[class*="uagb-block-"],
.wp-block-uagb-container[style*="gradient-bg-green"],
.wp-block-uagb-container[style*="background-image"] {
	background-image: none !important;
	background: transparent !important;
}

/* Also kill any inline background-image rule that targets the green SVG */
[style*="tech-news-hero-gradient-bg-green"] {
	background-image: none !important;
	background: transparent !important;
}

/* ---------- TYPOGRAPHY ---------- */

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-archive-title,
.wp-block-heading {
	font-family: 'Poppins', 'Inter', sans-serif !important;
	font-weight: 700 !important;
	color: var(--ds-navy) !important;
	letter-spacing: -0.015em;
}

body, p, li, .entry-content, .widget {
	font-family: 'Inter', sans-serif;
	color: var(--ds-ink);
}

/* ---------- HEADER (TRANSPARENT + CENTERED) ---------- */

.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-above-header,
.ast-below-header {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Stack the header contents vertically and center everything */
.main-header-bar .ast-container,
.ast-primary-header-bar .ast-container,
.site-header .ast-builder-grid-row,
.site-header .ast-main-header-wrap,
.site-header .main-header-container {
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	gap: 12px;
}

.site-header [class*="site-header-primary-section"],
.site-header .site-branding,
.site-header .main-header-bar-navigation,
.site-header .ast-primary-header .ast-flex {
	width: auto !important;
	flex: 0 0 auto !important;
	justify-content: center !important;
	text-align: center;
}

.site-branding,
.ast-site-identity {
	margin: 0 auto !important;
	text-align: center !important;
	padding: 18px 0 4px !important;
}

.site-branding a,
.custom-logo-link {
	display: inline-block !important;
	margin: 0 auto !important;
}

/* Menu — navy text, centered, understated */
.main-header-menu,
.ast-primary-header .main-header-menu,
.main-navigation,
.ast-builder-menu-1 .main-header-menu {
	justify-content: center !important;
	margin: 0 auto !important;
}

.main-header-menu .menu-item > a,
.ast-primary-header .menu-item > a,
.main-header-bar .main-header-menu > .menu-item > .menu-link,
.menu-link {
	color: var(--ds-navy) !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem !important;
	padding: 10px 18px !important;
	transition: color 0.15s ease;
}

.main-header-menu .menu-item > a:hover,
.main-header-bar .main-header-menu > .menu-item > .menu-link:hover {
	color: var(--ds-red) !important;
}

/* Dropdown submenu */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
	background: #fff !important;
	border: 2px solid var(--ds-navy) !important;
	border-radius: 10px;
	box-shadow: 4px 4px 0 var(--ds-yellow);
	padding: 8px 0 !important;
	margin-top: 8px;
}

.main-header-menu .sub-menu a {
	color: var(--ds-navy) !important;
	font-size: 0.78rem !important;
	padding: 8px 18px !important;
	letter-spacing: 0.08em;
}

.main-header-menu .sub-menu a:hover {
	background: var(--ds-yellow) !important;
	color: var(--ds-navy) !important;
}

/* Search icon */
.ast-search-menu-icon,
.ast-search-icon {
	color: var(--ds-navy) !important;
}

.ast-search-menu-icon .search-field {
	background: #f6f7fa !important;
	border: 2px solid var(--ds-border) !important;
	color: var(--ds-navy) !important;
	border-radius: 999px !important;
}

.ast-search-menu-icon .search-field:focus {
	border-color: var(--ds-yellow) !important;
}

.search-submit {
	color: var(--ds-navy) !important;
}

/* Logo sizing */
.custom-logo,
.site-logo-img img,
.site-branding img {
	max-height: 90px !important;
	width: auto !important;
	height: auto !important;
}

/* Category / archive pages: force thumbnails into a uniform centered square
   so oversized product photos don't stretch the post cards vertically. */
body.archive article.post .post-thumb,
body.archive article.post .ast-post-thumb,
body.archive article.post .wp-block-post-featured-image,
body.category article.post .post-thumb,
body.category article.post .ast-post-thumb,
body.category article.post .wp-block-post-featured-image,
body.tag article.post .post-thumb,
body.tag article.post .ast-post-thumb,
body.search article.post .post-thumb,
body.search article.post .ast-post-thumb {
	aspect-ratio: 1 / 1 !important;
	max-width: 380px !important;
	margin: 0 auto !important;
	background: #ffffff !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--ds-border);
}

body.archive article.post .post-thumb img,
body.archive article.post .ast-post-thumb img,
body.archive article.post .wp-post-image,
body.category article.post .post-thumb img,
body.category article.post .ast-post-thumb img,
body.category article.post .wp-post-image,
body.tag article.post .post-thumb img,
body.tag article.post .ast-post-thumb img,
body.tag article.post .wp-post-image,
body.search article.post .post-thumb img,
body.search article.post .ast-post-thumb img,
body.search article.post .wp-post-image {
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	padding: 18px !important;
	background: #ffffff !important;
}

/* Single-post page: breathing room between the transparent header and
   the article card so the logo doesn't overlap the card's top border. */
body.single .site-content,
body.single-post .site-content,
body.single #primary,
body.single .ast-container {
	padding-top: 40px !important;
}

body.single article.post,
body.single-post article.post {
	margin-top: 20px;
}

/* Amazon affiliate product images inside articles: centered, max 450px tall.
   Scoped to links pointing at amazon.com / amzn.to only, so non-Amazon images
   and featured images are unaffected. */
.entry-content a[href*="amazon."] img,
.entry-content a[href*="amzn.to"] img {
	max-width: 100%;
	max-height: 450px;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;
	margin: 16px auto;
}

.entry-content a[href*="amazon."]:has(img),
.entry-content a[href*="amzn.to"]:has(img) {
	display: block;
	text-align: center;
}

/* ---------- ARTICLE CARDS ---------- */

.site-main .ast-article-single,
.site-main .ast-article-post,
article.post {
	background: #ffffff;
	border: 2px solid var(--ds-navy);
	border-radius: 14px;
	box-shadow: 5px 5px 0 var(--ds-yellow);
	overflow: hidden;
	margin-bottom: 40px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

article.post:hover {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--ds-yellow);
}

article.post .post-thumb,
article.post .wp-post-image {
	border-radius: 0 !important;
	margin: 0 !important;
}

article.post .entry-header,
article.post .entry-content,
article.post .ast-article-inner {
	padding: 24px 28px;
}

/* ---------- CATEGORY TAGS ---------- */

.ast-blog-meta-container .cat-links a,
.cat-links a,
.entry-meta .cat-links a,
.post-categories a,
a[rel="category"] {
	display: inline-block;
	background: var(--ds-yellow) !important;
	color: var(--ds-navy) !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	font-size: 0.72rem !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 12px !important;
	border-radius: 999px;
	border: 2px solid var(--ds-navy);
	text-decoration: none !important;
	transition: all 0.15s ease;
}

.cat-links a:hover,
a[rel="category"]:hover {
	background: var(--ds-navy) !important;
	color: var(--ds-yellow) !important;
}

/* ---------- BUTTONS / CTAs ---------- */

.wp-block-button__link,
button,
input[type="submit"],
.ast-button,
.button,
a.button {
	background: var(--ds-yellow) !important;
	color: var(--ds-navy) !important;
	border: 2px solid var(--ds-navy) !important;
	border-radius: 999px !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8rem !important;
	padding: 10px 22px !important;
	box-shadow: 3px 3px 0 var(--ds-navy);
	transition: all 0.15s ease;
	cursor: pointer;
}

.wp-block-button__link:hover,
button:hover,
input[type="submit"]:hover,
.ast-button:hover,
.button:hover,
a.button:hover {
	background: var(--ds-red) !important;
	color: #fff !important;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ds-navy);
}

/* ---------- SIDEBAR ---------- */

.widget,
.sidebar-main .widget,
#secondary .widget {
	background: #ffffff;
	border: 2px solid var(--ds-border);
	border-radius: 14px;
	padding: 20px 22px !important;
	margin-bottom: 28px;
}

.widget-title,
.widget .widget-title {
	font-family: 'Poppins', sans-serif !important;
	color: var(--ds-navy) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem !important;
	border-bottom: 2px solid var(--ds-yellow);
	padding-bottom: 10px;
	margin-bottom: 16px !important;
}

.widget a {
	color: var(--ds-navy);
	text-decoration: none;
	font-weight: 500;
}

.widget a:hover {
	color: var(--ds-red);
}

.ast-widget-title,
.widget h6,
.widget h5 {
	font-family: 'Poppins', sans-serif !important;
	color: var(--ds-red) !important;
	font-size: 0.7rem !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 600 !important;
}

/* ---------- NEWSLETTER BOX ---------- */

.widget_mc4wp_form_widget,
.mc4wp-form,
.widget_subscribe {
	background: var(--ds-navy) !important;
	color: #ffffff !important;
	border-radius: 14px;
	border: 2px solid var(--ds-navy);
	box-shadow: 4px 4px 0 var(--ds-yellow);
	padding: 26px !important;
}

.widget_mc4wp_form_widget *,
.mc4wp-form *,
.widget_subscribe * {
	color: #ffffff;
}

.widget_mc4wp_form_widget h2,
.widget_mc4wp_form_widget h3,
.widget_mc4wp_form_widget .widget-title {
	color: #ffffff !important;
	border-bottom-color: var(--ds-yellow) !important;
}

.widget_mc4wp_form_widget input[type="email"],
.mc4wp-form input[type="email"],
.widget_subscribe input[type="email"] {
	background: #ffffff !important;
	color: var(--ds-navy) !important;
	border-radius: 999px !important;
	border: 2px solid var(--ds-yellow) !important;
	padding: 10px 16px !important;
}

/* ---------- FOOTER ---------- */

/* Kill ALL leftover teal/gradient/starter-template backgrounds on footer rows */
.site-footer [class*="background-image"],
.site-footer [style*="gradient"],
.site-footer [style*="tech-news"],
.ast-hfb-footer [style*="gradient"],
.ast-hfb-footer [style*="background-image"] {
	background-image: none !important;
	background: transparent !important;
}

/* Whole footer scaffold */
.site-footer,
.ast-hfb-footer,
[id*="ast-hf-footer"] {
	background: var(--ds-navy) !important;
	color: #ffffff !important;
	border-top: 4px solid var(--ds-yellow);
}

/* Specifically target the Above-footer row that had the teal gradient */
.ast-hf-footer-above,
[class*="footer-above"],
.ast-builder-footer-grid-row-1,
.ast-builder-footer-grid-row-above {
	background: var(--ds-navy) !important;
	background-image: none !important;
	padding: 48px 24px !important;
}

/* Primary footer row (4 cols: logo, company, popular, legal) */
.ast-hf-footer-primary,
.ast-builder-footer-grid-row-primary,
.ast-builder-footer-grid-row-2 {
	background: var(--ds-navy) !important;
	padding: 40px 24px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer *,
.site-footer p,
.site-footer li,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4, .site-footer h5, .site-footer h6 {
	color: #ffffff !important;
}

.site-footer a {
	color: var(--ds-yellow) !important;
	text-decoration: none !important;
}

.site-footer a:hover {
	color: #ffffff !important;
}

/* Footer widget boxes: white cream cards on navy for pop */
.site-footer .widget,
.ast-hfb-footer .widget,
.footer-widget-area .widget {
	background: #ffffff !important;
	border: 2px solid var(--ds-navy) !important;
	border-radius: 14px;
	box-shadow: 4px 4px 0 var(--ds-yellow);
	padding: 22px 24px !important;
}

.site-footer .widget *,
.ast-hfb-footer .widget *,
.footer-widget-area .widget * {
	color: var(--ds-navy) !important;
}

.site-footer .widget a,
.footer-widget-area .widget a {
	color: var(--ds-navy) !important;
	font-weight: 500;
}

.site-footer .widget a:hover {
	color: var(--ds-red) !important;
}

.site-footer .widget-title,
.footer-widget-area .widget-title {
	font-family: 'Poppins', sans-serif !important;
	color: var(--ds-navy) !important;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem !important;
	border-bottom: 2px solid var(--ds-yellow);
	padding-bottom: 10px;
	margin-bottom: 14px !important;
}

/* Note: the "Company" column was an Astra HFB HTML element (footer-html-1)
   paired with the footer_menu nav location. Both have been cleared in astra-settings. */

/* Convert Astra's 4-column grid to centered flex so the empty Company column
   (site-footer-primary-section-2) collapses and the 3 remaining columns center. */
.site-primary-footer-inner-wrap {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: 56px !important;
	grid-template-columns: none !important;
}

.site-primary-footer-inner-wrap .site-footer-section {
	flex: 0 1 auto !important;
	max-width: 340px;
	width: auto !important;
}

/* Hide the empty Company column (section-2) */
.site-footer-primary-section-2 {
	display: none !important;
}

/* Footer nav menu items: don't wrap mid-item, tighter tracking so they fit the column */
.site-footer .widget_nav_menu ul,
.footer-widget-area .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer .widget_nav_menu ul li,
.footer-widget-area .widget_nav_menu ul li {
	margin: 6px 0;
	padding: 0;
	border: none;
}

.site-footer .widget_nav_menu ul li a,
.footer-widget-area .widget_nav_menu ul li a {
	display: inline-block;
	white-space: nowrap !important;
	font-family: 'Poppins', sans-serif !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.06em !important;
	font-size: 0.78rem !important;
	padding: 2px 0 !important;
}

/* Newsletter heading in the above-footer row */
.ast-hf-footer-above h2,
[class*="footer-above"] h2 {
	font-family: 'Poppins', sans-serif !important;
	color: #ffffff !important;
	font-size: 2.2rem !important;
	margin-bottom: 8px;
}

.ast-hf-footer-above p,
[class*="footer-above"] p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 1rem;
	margin-bottom: 0;
}

/* Sureforms newsletter form styling */
.srfm-form-container,
.sureforms-form {
	background: transparent !important;
	padding: 0 !important;
	box-shadow: none !important;
	border: none !important;
}

.srfm-input-common,
.srfm-input,
input[type="email"].srfm-input-common {
	background: #ffffff !important;
	border: 2px solid var(--ds-yellow) !important;
	border-radius: 999px !important;
	padding: 12px 20px !important;
	color: var(--ds-navy) !important;
	font-family: 'Inter', sans-serif !important;
}

/* Subscribe button: replace text with an arrow icon so it never wraps */
.srfm-submit-btn,
.srfm-button,
.sureforms-form button[type="submit"],
.sureforms-form input[type="submit"],
.site-footer .wp-block-button__link,
.ast-hf-footer-above button[type="submit"],
.ast-hf-footer-above input[type="submit"] {
	white-space: nowrap !important;
	min-width: 56px !important;
	width: 56px !important;
	height: 56px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 0 !important; /* hides the "Subscribe" text */
	background-color: var(--ds-yellow) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2845' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 24px 24px !important;
	border: 2px solid var(--ds-navy) !important;
	box-shadow: 3px 3px 0 var(--ds-navy) !important;
	color: transparent !important;
	flex-shrink: 0 !important;
}

.srfm-submit-btn:hover,
.srfm-button:hover,
.sureforms-form button[type="submit"]:hover,
.sureforms-form input[type="submit"]:hover,
.ast-hf-footer-above button[type="submit"]:hover,
.ast-hf-footer-above input[type="submit"]:hover {
	background-color: var(--ds-red) !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") !important;
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--ds-navy) !important;
}

/* The wrapping "card" around the form in the footer — make it transparent so the navy row shows through */
.ast-hf-footer-above .srfm-form-container,
[class*="footer-above"] form,
[class*="footer-above"] .wp-block-group {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Copyright strip — make it readable */
.ast-small-footer,
.ast-hf-footer-below,
[class*="footer-below"],
.site-below-footer-wrap,
.site-below-footer {
	background: var(--ds-navy-deep) !important;
	color: rgba(255, 255, 255, 0.7) !important;
	padding: 14px 0 !important;
	font-size: 0.85rem;
}

.ast-small-footer *,
.ast-hf-footer-below *,
.site-below-footer * {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Social icons — brand-yellow circles */
.ast-builder-social-element,
.footer-widget-area .ast-builder-social-element,
.site-footer .ast-builder-social-element {
	color: var(--ds-navy) !important;
	background: var(--ds-yellow);
	border-radius: 50%;
	padding: 6px;
	margin: 0 4px;
	transition: background 0.15s ease;
}

.ast-builder-social-element:hover {
	background: var(--ds-red) !important;
	color: #fff !important;
}

/* ---------- LINKS ---------- */

.entry-content a,
a {
	color: var(--ds-red);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
}

.entry-content a:hover,
a:hover {
	color: var(--ds-navy);
}

.main-header-menu a,
.menu-link,
article.post a,
.widget a,
.site-footer a,
h1 a, h2 a, h3 a, h4 a,
.site-branding a,
.custom-logo-link {
	text-decoration: none !important;
}

/* ---------- KETO HERO: INVISIBLE TEXT, FULL IMAGE PRESERVED ---------- */
/* visibility:hidden (not display:none) keeps each element's box, so the card
   height is the same as before — the image stays full-size. */

.uagb-block-5e5cfb3a .uagb-post__title,
.uagb-block-5e5cfb3a .uagb-post__text,
.uagb-block-5e5cfb3a .uagb-post-meta,
.uagb-block-5e5cfb3a .uagb-post-meta *,
.uagb-block-5e5cfb3a .uagb-post__content,
.uagb-block-5e5cfb3a .uagb-post__cta,
.uagb-block-5e5cfb3a .uagb-post__author,
.uagb-block-5e5cfb3a .uagb-post__date,
.uagb-block-5e5cfb3a .uagb-post__comments {
	visibility: hidden !important;
}

/* ---------- UNIFORM POST GRID THUMBNAILS ---------- */
/* Scoped ONLY to the Budget Picks + Recent Reviews grids.
   Hero grids and other post-grid layouts are left untouched. */

.uagb-block-f6a2d87e .uagb-post__image,
.uagb-block-449feeaf .uagb-post__image {
	aspect-ratio: 4 / 3 !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
	border-radius: 10px !important;
	border: 1px solid var(--ds-border) !important;
	width: 100% !important;
	height: auto !important;
	position: relative;
}

.uagb-block-f6a2d87e .uagb-post__image a,
.uagb-block-449feeaf .uagb-post__image a {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.uagb-block-f6a2d87e .uagb-post__image img,
.uagb-block-449feeaf .uagb-post__image img {
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	padding: 14px !important;
	background: #ffffff !important;
	border-radius: 0 !important;
	display: block;
}

.uagb-block-f6a2d87e .uagb-post__title,
.uagb-block-f6a2d87e .uagb-post__text,
.uagb-block-449feeaf .uagb-post__title,
.uagb-block-449feeaf .uagb-post__text {
	margin-top: 14px !important;
	line-height: 1.3 !important;
}

/* ---------- SECTION HEADER UNDERLINE ---------- */

h2.wp-block-heading::after {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	background: var(--ds-yellow);
	margin-top: 8px;
	border-radius: 3px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 768px) {
	article.post {
		box-shadow: 3px 3px 0 var(--ds-yellow);
	}
	article.post:hover {
		transform: none;
		box-shadow: 3px 3px 0 var(--ds-yellow);
	}
	.custom-logo,
	.site-branding img {
		max-height: 70px !important;
	}
}