/* ================================================
   SITE STYLES — YSW-exact editorial layout
   Matches youstaywealthy.com computed styles
   ================================================ */

/* ================================================
   HEADER — Fixed, 77px height, white bg
   ================================================ */

.acr-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
}

.acr-header > .wp-block-group {
	padding-top: 15px !important;
	padding-bottom: 15px !important;
}

.acr-header-logo img,
.acr-header .wp-block-site-logo img {
	width: 180px;
	max-height: 45px;
	height: auto;
	object-fit: contain;
	object-position: left center;
	display: block;
}

/* "Work With Me" gradient button — padding: 14px 38px 14px 20px */
.acr-gradient-btn .wp-block-button__link {
	background: linear-gradient(to right, #5C2E81, #A41664) !important;
	color: #FFFFFF !important;
	border: none;
	padding: 14px 38px 14px 20px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	transition: opacity 0.2s ease;
}

.acr-gradient-btn .wp-block-button__link:hover {
	opacity: 0.9;
	transform: none;
	box-shadow: none;
}

/* ================================================
   NAVIGATION
   ================================================ */

.wp-block-navigation a {
	transition: color 0.2s ease;
}

/* ================================================
   BUTTONS — Dark charcoal #323232, 4px radius
   Consistent padding: 14px 50px 14px 25px
   ================================================ */

.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	opacity: 0.9;
}

/* ================================================
   HERO SECTION — black-curve-img background (matches YSW banner)
   YSW: 1190px tall, padding-top 215px, bg at bottom 35%
   ================================================ */

.acr-hero-section {
	position: relative;
	overflow: visible;
	padding-top: 215px; /* matches YSW: 215px padding-top */
	padding-bottom: 250px; /* extra space for dark curve area + trust overlap */
	background-image: url('../images/black-curve-img.png');
	background-position: 50% 100%;
	background-size: 100% 35%;
	background-repeat: no-repeat;
}

/* Green chevron decorations — left side */
.acr-hero-section::before {
	content: "❯❯❯";
	position: absolute;
	left: -10px;
	top: 55%;
	transform: translateY(-50%);
	font-size: 120px;
	font-weight: 900;
	color: rgba(0, 153, 82, 0.15);
	letter-spacing: -30px;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
}

/* Gray diagonal lines — top right */
.acr-hero-section::after {
	content: "";
	position: absolute;
	top: 80px;
	right: 0;
	width: 350px;
	height: 350px;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 8px,
		rgba(0, 0, 0, 0.08) 8px,
		rgba(0, 0, 0, 0.08) 9.5px
	);
	pointer-events: none;
	z-index: 1;
}

/* Hero image — absolutely positioned, large, behind text like YSW
   YSW: position absolute, left: 756px, top: 90px, z-index: -1, 780×761px */
.acr-hero-section > .wp-block-columns {
	position: static !important;
}

.acr-hero-section .wp-block-column:last-child {
	position: absolute !important;
	right: 0;
	top: 90px;
	bottom: 0;
	width: 55% !important;
	flex-basis: auto !important;
	z-index: -1; /* behind content, matches YSW */
	pointer-events: none;
}

.acr-hero-image {
	margin: 0 !important;
}

.acr-hero-image img {
	width: 780px !important;
	max-width: none !important;
	height: auto;
}

/* Hero text column — take ~65% width since image is absolute */
.acr-hero-section .wp-block-column:first-child {
	flex-basis: 65% !important;
	max-width: 65%;
	position: relative;
	z-index: 2;
}

/* Hero subtitle — matches YSW h6 at 25px/400 */
.acr-hero-subtitle {
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--body-text) !important;
}

/* Hero trust badge images */
.acr-hero-badges img {
	height: 80px;
	width: auto;
}

/* ================================================
   TRUST / RECOGNITION SECTION
   White bg (matches YSW named-financial section),
   white card inside with pink bottom border
   ================================================ */

.acr-trust-section {
	position: relative;
	margin-top: -250px; /* overlap into hero dark curve area like YSW (-285px) */
	z-index: 3;
	background-color: transparent;
}

.acr-trust-card {
	background: var(--wp--preset--color--white);
	border-radius: 4px;
	padding: 40px 40px 20px 65px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 4px 0px;
	border-bottom: 5px solid #A61564;
}

.acr-trust-card h2 {
	font-size: clamp(40px, 5vw, 65px) !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em;
	max-width: none !important;
}

.acr-trust-card p {
	font-size: 18px;
	line-height: 1.5;
}

/* Media logos row in trust section */
.acr-media-logos {
	margin-top: 2rem !important;
}

.acr-media-logos img {
	width: 100% !important;
	max-width: 550px;
	height: auto;
	filter: grayscale(100%);
	opacity: 0.85;
}

.acr-investopedia-logo img {
	max-width: 300px;
	width: 100%;
	height: auto;
}

/* Large faded #2 watermark behind Investopedia */
.acr-trust-watermark {
	font-size: 200px;
	font-weight: 700;
	color: rgba(0, 0, 0, 0.05);
	position: absolute;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
}

.acr-watermark-img img {
	opacity: 0.08;
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ================================================
   SECTION LABELS — "— Listen", "— READ", "— ABOUT"
   h6: Inter 16px/500, uppercase, 1px letter-spacing
   color: #852172 (accent-purple)
   ================================================ */

.acr-section-label {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--wp--preset--color--accent-purple) !important;
}

/* ================================================
   SECTION HEADINGS — Playfair on YSW, Inter here
   h2/h3: 45px/500, #323232, line-height 1.2
   ================================================ */

.acr-podcast-section h2,
.acr-blog-section h2,
.acr-about-section h2 {
	font-size: 45px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}

/* Section subtitle */
.acr-section-subtitle {
	font-size: 17px;
	font-weight: 400;
	color: var(--wp--preset--color--body-text);
	line-height: 1.5;
}

/* ================================================
   PODCAST SECTION
   ================================================ */

.acr-podcast-cover img {
	border-radius: 0;
	width: 100%;
	height: auto;
}

/* Podcast info below cover */
.acr-podcast-info {
	background: var(--wp--preset--color--dark-charcoal);
	color: #FFFFFF;
	padding: 1.5rem;
	border-radius: 0 0 4px 4px;
}

/* Episode items — flex row, 14px margin-bottom between */
.acr-episode-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0 10px 30px;
	margin-bottom: 14px;
	transition: background-color 0.2s ease;
}

.acr-episode-item:hover {
	background-color: rgba(0, 0, 0, 0.015);
}

/* Episode category label — 12px/600, uppercase, accent color */
.acr-episode-category {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	color: rgb(147, 28, 106) !important;
	display: inline;
}

/* Episode date — 12px/600, uppercase, body color */
.acr-episode-date {
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--body-text) !important;
	display: inline;
	margin-left: 0.5rem;
}

/* Episode title — 21px/700, capitalize, #323232 */
.acr-episode-title,
.acr-episode-title a {
	font-size: 21px !important;
	font-weight: 700 !important;
	text-transform: capitalize;
	color: var(--wp--preset--color--heading-dark) !important;
	text-decoration: none !important;
	line-height: 1.2;
}

/* Listen button — outlined, 2px solid #323232, 4px radius */
.acr-listen-btn {
	flex-shrink: 0;
}

.acr-listen-btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid var(--wp--preset--color--dark-charcoal);
	border-radius: 4px;
	width: 107px;
	height: 50px;
	padding: 0 0 0 10px;
	color: var(--wp--preset--color--dark-charcoal) !important;
	text-decoration: none !important;
	font-weight: 700;
	font-size: 14px;
	line-height: 46px;
	transition: background-color 0.2s ease;
}

.acr-listen-btn a:hover {
	background-color: var(--wp--preset--color--dark-charcoal);
	color: #FFFFFF !important;
}

/* ================================================
   FEATURED PODCASTS — light blue-gray bg, 3x2 grid
   bg: rgb(233, 239, 242), padding: 60px 0
   ================================================ */

.acr-featured-podcasts {
	position: relative;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

/* Section heading — matches YSW h6: 18px/600, purple, uppercase, center, 35px mb */
.acr-featured-podcasts h2 {
	font-size: 18px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	color: var(--wp--preset--color--accent-purple) !important;
	line-height: 1.3 !important;
	margin-bottom: 35px !important;
}

/* 3-column grid of episode items */
.acr-fp-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 40px 40px !important;
	max-width: 1170px;
	margin: 0 auto;
}

/* Each featured podcast item — flex row with portrait + title */
.acr-fp-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	text-decoration: none !important;
	color: inherit !important;
}

.acr-fp-item:hover span {
	color: var(--wp--preset--color--accent-purple) !important;
}

/* Circular portrait images — 64px, circle, grayscale */
.acr-fp-item img {
	width: 64px !important;
	height: 64px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	flex-shrink: 0 !important;
	filter: grayscale(1);
}

/* Episode title text — 18px/700, capitalize, dark charcoal */
.acr-fp-item span {
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--heading-dark, #323232) !important;
	text-transform: capitalize;
}

/* ================================================
   BLOG SECTION — 2 columns, cards with pink border
   ================================================ */

.acr-blog-card {
	background: var(--wp--preset--color--white);
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.acr-blog-card:hover {
	box-shadow: var(--wp--custom--shadow--card-hover);
	transform: translateY(-3px);
}

.acr-blog-card__image {
	border-bottom: 5px solid #A61564;
}

.acr-blog-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* Blog post title — 25px/400 Playfair on YSW → Inter */
.acr-blog-card h4,
.acr-blog-card h4 a {
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--heading-dark) !important;
	text-decoration: none !important;
}

/* Blog meta — author in pink, date in body text */
.acr-blog-meta {
	font-size: 14px;
	color: var(--wp--preset--color--body-text);
}

.acr-blog-meta a {
	color: #C3288A !important;
	text-decoration: none !important;
}

/* Blog excerpt — 18px/400, #3A3837 */
.acr-blog-excerpt {
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 28px !important;
	color: var(--wp--preset--color--body-text) !important;
}

/* ================================================
   ABOUT SECTION
   ================================================ */

.acr-about-section {
	position: relative;
}

/* Green chevron decorations — right side of about */
.acr-about-section::after {
	content: "❯❯❯";
	position: absolute;
	right: -10px;
	bottom: 15%;
	font-size: 100px;
	font-weight: 900;
	color: rgba(0, 153, 82, 0.15);
	letter-spacing: -25px;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
}

/* Green chevron on blog section — right side */
.acr-blog-section {
	position: relative;
}

.acr-blog-section::after {
	content: "❯❯❯";
	position: absolute;
	right: -10px;
	top: 20%;
	font-size: 100px;
	font-weight: 900;
	color: rgba(0, 153, 82, 0.15);
	letter-spacing: -25px;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
}

.acr-about-portrait {
	position: relative;
}

.acr-about-portrait img {
	border-radius: 50%;
	width: 100%;
	max-width: 500px;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

/* Bio paragraph — 18px/400 */
.acr-about-bio {
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}

/* Stat numbers — 30px/700, accent-purple */
.acr-stat-number {
	font-size: 30px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--accent-purple) !important;
}

/* Stat labels — 14px/600, dark */
.acr-stat-label {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--wp--preset--color--heading-dark) !important;
	line-height: 1.4;
}

.acr-stat {
	min-width: 140px;
}

/* ================================================
   NEWSLETTER — Green card on dark bg pattern
   ================================================ */

.acr-newsletter-outer {
	background-color: var(--wp--preset--color--dark-charcoal);
	background-image: url('../images/black-pattern-img-scaled.jpg');
	background-size: cover;
	background-position: center;
}

.acr-newsletter-card {
	position: relative;
	background-color: var(--wp--preset--color--primary-green) !important;
	border-radius: 5px;
	padding: 85px 100px 25px !important;
}

/* Newsletter envelope icon — positioned at top-left */
.acr-newsletter-icon {
	position: absolute !important;
	top: -20px;
	left: 40px;
	z-index: 2;
	margin: 0 !important;
}

.acr-newsletter-icon img {
	width: 100px;
	height: auto;
}

/* Newsletter heading — 40px/400, white */
.acr-newsletter-card h2 {
	font-size: 40px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	color: #FFFFFF !important;
}

/* Newsletter subtitle — 14px/600, white, uppercase */
.acr-newsletter-subtitle {
	font-size: 14px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #FFFFFF !important;
}

.acr-signup-form {
	width: 100%;
}

.acr-form-fields-row {
	display: flex;
	gap: 0.75rem;
	width: 100%;
	align-items: stretch;
}

.acr-form-fields-row input {
	flex: 1;
	height: 50px;
	padding: 5px 4px 5px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 15px;
	font-family: var(--wp--preset--font-family--body);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body-text);
}

.acr-form-fields-row input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.acr-form-button {
	background: var(--wp--preset--color--dark-charcoal);
	color: #FFFFFF;
	border: none;
	border-radius: 5px;
	padding: 16px 24px;
	font-size: 14px;
	font-weight: 700;
	font-family: var(--wp--preset--font-family--body);
	cursor: pointer;
	transition: background-color 0.2s ease;
	white-space: nowrap;
	width: 150px;
}

.acr-form-button:hover {
	background: #1a1a1a;
}

/* ================================================
   FOOTER — White bg, centered, padding 60px 0 40px
   ================================================ */

.acr-footer {
	padding: 60px 0 40px;
}

.acr-footer a {
	text-decoration: underline !important;
}

/* ================================================
   RESPONSIVE
   ================================================ */

@media (max-width: 900px) {
	.acr-hero-section .wp-block-columns,
	.acr-podcast-section .wp-block-columns,
	.acr-about-section .wp-block-columns {
		flex-direction: column !important;
	}

	.acr-hero-section .wp-block-column,
	.acr-podcast-section .wp-block-column,
	.acr-about-section .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Hero — simpler layout on mobile */
	.acr-hero-section {
		padding-top: 100px;
		padding-bottom: 60px;
		background-size: 100% 25%;
	}

	.acr-trust-section {
		margin-top: -60px;
	}

	/* Hero — revert absolute positioning on mobile */
	.acr-hero-section .wp-block-column:last-child {
		position: relative !important;
		right: auto;
		top: auto;
		bottom: auto;
		width: 100% !important;
		pointer-events: auto;
		z-index: 1;
	}

	.acr-hero-section .wp-block-column:first-child {
		flex-basis: 100% !important;
		max-width: 100%;
	}

	.acr-hero-image img {
		width: 100% !important;
		max-width: 360px !important;
		margin: 2rem auto 0;
		display: block;
	}

	.acr-header-logo img {
		width: 140px;
	}

	.acr-about-portrait img {
		max-width: 300px;
		margin: 0 auto 2rem;
		display: block;
	}

	.acr-about-section .wp-block-columns {
		flex-direction: column-reverse !important;
	}

	.acr-blog-card:hover {
		transform: none;
	}

	.acr-podcast-cover img {
		max-width: 300px;
		margin: 0 auto;
		display: block;
	}

	.acr-form-fields-row {
		flex-direction: column;
	}

	.acr-form-button {
		width: 100%;
	}

	.acr-newsletter-card {
		padding: 40px 30px 25px !important;
	}

	.acr-trust-card {
		padding: 30px 20px;
	}

	.acr-trust-card h2 {
		font-size: 36px !important;
	}

	.acr-episode-item {
		padding-left: 0;
	}

	.acr-podcast-section h2,
	.acr-blog-section h2,
	.acr-about-section h2 {
		font-size: 32px !important;
	}

	/* Featured podcasts — 2 columns on tablet */
	.acr-fp-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 30px 30px !important;
	}
}

@media (max-width: 600px) {
	.acr-header-logo img {
		width: 120px;
	}

	.acr-stat {
		min-width: 100px;
	}

	.acr-gradient-btn {
		display: none;
	}

	.acr-hero-badges img {
		height: 60px;
	}

	.acr-newsletter-card h2 {
		font-size: 28px !important;
	}

	/* Featured podcasts — 1 column on mobile */
	.acr-fp-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}
/* v3.7.1 hero-fix */