/*
Theme Name: CashFlow Theme
Theme URI: https://cashflow.com
Author: CashFlow Team
Author URI: https://cashflow.com
Description: Premium optimized child theme for Twenty Twenty-Five powering the CashFlow Fund platform.
Template: twentytwentyfive
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cashflowtheme
Tags: custom-colors, custom-menu, block-patterns, full-site-editing, responsiveness, performance
*/

/* ==========================================================================
   1. GLOBAL BASE & SMOOTH SCROLL
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	height: 100%;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body .wp-site-blocks {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body .wp-site-blocks .entry-content.alignfull.wp-block-post-content {
	flex: 1;
}

.wp-block-group.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained:has(.acf-fields-display) {
	flex: 1;
}

a:focus {
	outline: none;
}

a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	border-radius: 4px;
}

p:not(:empty) {
	margin-bottom: 10px;
}

p {
	font-size: var(--wp--preset--font-size--medium);
}

h2 {
	font-size: var(--wp--preset--font-size--xx-large);
}

.uagb-ifb-icon-wrap {
	display: none;
}

/* ==========================================================================
   2. BRANDING: CASHFLOW ACCENTS & EMOJI FIXES
   ========================================================================== */

.brand-cash {
	color: #f02a2a !important;
	font-weight: 800;
}

.brand-flow {
	color: #ffffff !important;
	font-weight: 800;
}

.accent-mark,
mark.has-custom-accent-color-color,
.has-custom-accent-color-color {
	background: transparent !important;
	background-color: transparent !important;
	color: #f02a2a !important;
	-webkit-text-fill-color: #f02a2a !important;
	display: inline-block;
}

/* Emoji Reset to prevent flex layout displacement */
img.emoji,
img.wp-smiley {
	display: inline-block !important;
	height: 1.2em !important;
	width: 1.2em !important;
	margin: 0 0.2em !important;
	vertical-align: -0.2em !important;
	box-shadow: none !important;
	border: none !important;
	background: none !important;
}

/* ==========================================================================
   3. UNIFIED MONOCHROME (BLACK & WHITE) BUTTON & PAGINATION SYSTEM
   ========================================================================== */

/* CTA Wrapper */
.wp-block-call-to-action-block.cta-wrapper {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 30px;
	backdrop-filter: blur(10px);
}

/* Black & White Buttons Standard */
.cta-button,
.content-button,
.wp-block-button__link,
.wp-element-button,
#load-more,
.cpt-load-more,
.uagb-ifb-button,
.uagb-spectra-button-wrapper,
button.wp-block-button__link,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	background-color: #000000 !important;
	background: #000000 !important;
	color: #ffffff !important;
	font-weight: 600;
	border-radius: 10px;
	text-decoration: none !important;
	transition: all 0.25s ease-in-out;
	border: 1px solid #ffffff !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.cta-button:hover,
.content-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
#load-more:hover,
.cpt-load-more:hover,
.uagb-ifb-button:hover,
.uagb-spectra-button-wrapper:hover,
button.wp-block-button__link:hover,
input[type="submit"]:hover {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

.cta-button:active,
.content-button:active,
.wp-block-button__link:active,
.wp-element-button:active,
#load-more:active {
	transform: translateY(0);
}

/* Slider & CPT Pagination Standard (4 States) */

/* 4. Non-current, WITHOUT hover */
.swiper-pagination-bullet,
#cpt-pagination span.pagination-number,
#cpt-pagination span.pagination-nav,
.page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	border-radius: 50% !important;
	background-color: #111111 !important;
	background: #111111 !important;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	opacity: 1 !important;
	box-shadow: none !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	margin: 0 4px !important;
	padding: 0 !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease-in-out !important;
	transform: none !important;
}

/* 3. Non-current, WITH hover */
.swiper-pagination-bullet:hover,
#cpt-pagination span.pagination-number:hover,
#cpt-pagination span.pagination-nav:hover,
.page-numbers:hover {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #ffffff !important;
	border-radius: 50% !important;
	width: 24px !important;
	height: 24px !important;
	box-shadow: none !important;
	opacity: 1 !important;
	transform: scale(1.05) !important;
}

/* 2. Current (Active), WITHOUT hover */
.swiper-pagination-bullet.swiper-pagination-bullet-active,
#cpt-pagination span.pagination-number.active,
.page-numbers.current {
	width: 36px !important;
	height: 24px !important;
	min-width: 36px !important;
	border-radius: 9999px !important;
	background-color: #f02a2a !important;
	background: #f02a2a !important;
	color: #000000 !important;
	border: 1px solid #f02a2a !important;
	opacity: 1 !important;
	box-shadow: 0 0 12px rgba(240, 42, 42, 0.75) !important;
	transform: none !important;
}

.swiper-pagination-bullet.swiper-pagination-bullet-active span,
#cpt-pagination span.pagination-number.active span,
.page-numbers.current span {
	color: #000000 !important;
}

/* 1. Current (Active), WITH hover */
.swiper-pagination-bullet.swiper-pagination-bullet-active:hover,
#cpt-pagination span.pagination-number.active:hover,
.page-numbers.current:hover {
	width: 36px !important;
	height: 24px !important;
	min-width: 36px !important;
	border-radius: 9999px !important;
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
	opacity: 1 !important;
	box-shadow: 0 0 14px 2px rgba(240, 42, 42, 0.9), 0 0 4px rgba(240, 42, 42, 0.6) !important;
	transform: none !important;
}

/* ==========================================================================
   4. SWIPER CAROUSEL & GLASSMORPHIC CARDS
   ========================================================================== */

.swiper-container,
.swiper {
	position: relative;
	overflow: visible !important;
	padding-top: 10px !important;
	margin-top: -10px !important;
}

.swiper-wrapper {
	display: flex !important;
	align-items: stretch !important;
}

.swiper-slide {
	width: 100%;
	height: auto !important;
	display: flex !important;
	flex-direction: column !important;
	border-radius: 16px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-sizing: border-box;
}

.swiper-slide.has-border {
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.02);
	backdrop-filter: blur(8px);
	padding: 24px;
}

.swiper-slide:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	border-color: rgba(255, 255, 255, 0.15);
}

.swiper-slide a {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	align-items: stretch;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
}

.swiper-slide a img.content-image-wrapper {
	height: 320px;
	width: 100%;
	object-fit: cover;
	border-radius: 12px;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
}

.swiper-slide:hover a img.content-image-wrapper {
	transform: scale(1.04);
}

.swiper-slide a h3,
.swiper-slide a .content-text-wrapper {
	width: 100%;
}

.swiper-slide a .content-text-wrapper {
	font-size: 16px;
	line-height: 1.6;
	margin-top: 12px;
	flex: 1;
}

.swiper.reviews-slider .swiper-slide .content-text-wrapper,
.swiper.reviews-slider .swiper-slide .translation-block {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	flex: 1;
}

.reviews-author {
	text-align: center;
	font-weight: 700 !important;
	font-style: normal !important;
	display: flex;
	justify-content: center;
	margin-top: auto;
	padding-top: 16px;
	color: #ffffff !important;
}

.swiper-pagination {
	position: relative;
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 30px;
}

/* ==========================================================================
   5. ACF FIELDS & MEDIA DISPLAY (WITH EMOJI FLEX FIX)
   ========================================================================== */

.acf-text p,
.acf-field-value p {
	display: block;
	width: auto;
}

.single .acf-image .acf-field-value img {
	padding-block: 25px;
	border-radius: 12px;
}

.single .acf-field-value img {
	width: 50%;
	height: auto;
	border-radius: 12px;
}

.single .acf-text p:has(img:not(.emoji):not(.wp-smiley)) {
	display: flex;
	justify-content: center;
}

.acf-text .acf-field-value p:has(> iframe) {
	display: flex;
	justify-content: center;
}

.acf-text .acf-field-value p iframe {
	width: 100%;
	border-radius: 12px;
}

.acf-field-value div:has(img:not(.emoji):not(.wp-smiley)) {
	gap: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: 35px;
}

.acf-field-value div:has(img:not(.emoji):not(.wp-smiley))>img:not(.emoji) {
	width: 30%;
	height: auto;
	border-radius: 12px;
}

.acf-reviews_author {
	text-align: center;
	display: flex;
	justify-content: center;
}

.acf-reviews_author .acf-field-value {
	width: fit-content;
}

.acf-video-wrapper {
	width: 50%;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.acf-field-value:has(.acf-video-wrapper) {
	display: flex;
	justify-content: center;
}

.wp-block-column-is-layout-flow .wp-block-image {
	display: flex;
	justify-content: center;
}

.page-id-170 .wp-block-column-is-layout-flow .wp-block-image img {
	height: 280px;
	border-radius: 12px;
}

/* ==========================================================================
   6. NAVIGATION & MODALS / POPUPS / UAGB CONTAINERS
   ========================================================================== */

.wp-block-uagb-container,
.uagb-block-0afbfd9d,
.uagb-block-kyv5crsb,
.wp-block-uagb-container.uagb-is-root-container {
	background-color: transparent !important;
	background: transparent !important;
}

.wp-block-navigation__responsive-container.is-menu-open,
.uagb-modal-popup-wrap {
	background-color: var(--wp--preset--color--custom-background, #111111);
	color: var(--wp--preset--color--custom-main-color, #FFFFFF);
	backdrop-filter: blur(12px);
}

/* Enhanced Navigation Submenu / Dropdown Styling */
.wp-block-navigation__submenu-container {
	border-radius: 14px !important;
	background-color: rgba(11, 14, 20, 0.9) !important;
	backdrop-filter: blur(24px) saturate(180%) !important;
	-webkit-backdrop-filter: blur(24px) saturate(180%) !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3) !important;
	padding: 8px 6px !important;
	overflow: hidden;
}

@media (min-width: 600px) {
	.wp-block-navigation .wp-block-navigation__submenu-container {
		margin-top: 10px !important;
	}

	.wp-block-navigation .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		top: -12px;
		left: 0;
		right: 0;
		height: 12px;
		background: transparent;
	}
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	border-radius: 8px !important;
	padding: 10px 14px !important;
	color: #ffffff !important;
	font-weight: 500 !important;
	transition: background 0.2s ease, color 0.2s ease;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

.uagb-modal-popup-wrap .uagb-modal-popup-content .uagb-ifb-content h3,
.uagb-modal-popup-wrap .uagb-modal-popup-content .uagb-ifb-content mark {
	color: var(--wp--preset--color--base, #FFFFFF);
}

.uagb-modal-popup-content {
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.uagb-modal-popup-wrap .uagb-modal-popup-content .uagb-ifb-content .uagb-ifb-button-wrapper.wp-block-button {
	display: flex;
	justify-content: center;
}

.wp-block-uagb-modal .uagb-spectra-button-wrapper {
	--bg: #000000;
	--bg-hover: #ffffff;
	--text: #ffffff;
	--text-hover: #000000;

	display: flex;
	flex-direction: column-reverse;
	position: fixed;
	z-index: 99999;
	overflow: hidden;
	padding: var(--switcher-padding, 10px);
	border: 1px solid #ffffff;
	border-radius: 8px;
	background: #000000;
	top: var(--top, unset);
	right: var(--right, unset);
	bottom: var(--bottom, unset);
	left: var(--left, unset);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */

footer.wp-block-template-part .is-nowrap.is-layout-flex {
	justify-content: center;
	flex-wrap: wrap;
}

footer.wp-block-template-part .is-nowrap.is-layout-flex:nth-child(2) {
	padding-top: 25px;
}

footer {
	padding-block: 45px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (min-width: 599px) {
	.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
		left: auto;
		right: 0;
		transform: none;
	}
}

@media (max-width: 1020px) {
	.cta-wrapper {
		flex-direction: column;
		text-align: center;
	}

	.cta-wrapper .cta-text {
		padding-bottom: 20px;
	}
}

@media (max-width: 768px) {
	.wp-block-group.alignfull.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained>*:nth-child(4n+1) .wp-block-column-is-layout-flow:has(h2) {
		order: 2;
	}

	.single .acf-field-value img,
	.acf-video-wrapper {
		width: 100%;
	}
}

/* ==========================================================================
   9. FINTECH UI ENHANCEMENTS: FULL-WIDTH STICKY HEADER & BRAND RED (#f02a2a) ACCENTS
   ========================================================================== */

/* Full-width Sticky Header with Frosted Glass Blur */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
	width: 100%;
	background: rgba(11, 14, 20, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Ensure inner groups inside header remain full bleed & transparent */
header.wp-block-template-part .wp-block-group {
	background: transparent !important;
	backdrop-filter: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Gradient Text Helpers (Brand Red #f02a2a) */
.text-gradient-red,
.text-gradient-brand {
	background: linear-gradient(135deg, #ff4d4d 0%, #f02a2a 50%, #c81e1e 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

.text-gradient-gold {
	background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

.text-gradient-cyan {
	background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 50%, #0284c7 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: 700;
}

/* Primary Brand Gradient Button */
.btn-primary-gradient,
.wp-block-button__link.is-style-gradient {
	background: linear-gradient(135deg, #f02a2a 0%, #c81e1e 100%) !important;
	color: #ffffff !important;
	border: 1px solid rgba(240, 42, 42, 0.4) !important;
	box-shadow: 0 4px 15px rgba(240, 42, 42, 0.35) !important;
}

.btn-primary-gradient:hover,
.wp-block-button__link.is-style-gradient:hover {
	background: linear-gradient(135deg, #ff4d4d 0%, #f02a2a 100%) !important;
	box-shadow: 0 6px 25px rgba(240, 42, 42, 0.5) !important;
	transform: translateY(-2px);
}

/* Glassmorphism Stats Cards */
.stats-grid-wrapper {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-block: 30px;
}

.stat-glass-card {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 24px;
	text-align: center;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: all 0.3s ease;
}

.stat-glass-card:hover {
	transform: translateY(-4px);
	border-color: rgba(240, 42, 42, 0.3);
	box-shadow: 0 10px 30px rgba(240, 42, 42, 0.1);
}

.stat-number {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 8px;
}

/* Currency Badge Chips Grid */
.currency-chips-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 15px;
	margin-bottom: 25px;
}

.currency-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 20px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #ffffff;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: all 0.25s ease;
}

.currency-chip:hover {
	background: rgba(240, 42, 42, 0.15);
	border-color: rgba(240, 42, 42, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(240, 42, 42, 0.2);
}


li.wp-block-navigation-link__expanded {
	background-color: transparent !important;
}