/**
 * VM Base Theme - Custom Styles
 * 
 * Additional styles that complement theme.json
 * These styles enhance the theme's appearance and functionality
 * 
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Custom CSS Properties
   ========================================================================== */

:root {
	/* Mobile / tablet breakpoint — nav + layout switch at 850px */
	--vm-breakpoint-mobile: 850px;
	--vm-header-height-mobile: 109px;

	/* Custom spacing variables */
	--vm-spacing-xs: 0.25rem;
	--vm-spacing-sm: 0.5rem;
	--vm-spacing-md: 1rem;
	--vm-spacing-lg: 1.5rem;
	--vm-spacing-xl: 2rem;
	--vm-spacing-2xl: 3rem;
	--vm-spacing-3xl: 4rem;

	/* Custom border radius */
	--vm-radius-sm: 0.25rem;
	--vm-radius-md: 0.375rem;
	--vm-radius-lg: 0.5rem;
	--vm-radius-xl: 0.75rem;
	--vm-radius-2xl: 1rem;
	--vm-radius-full: 9999px;

	/* Custom shadows */
	--vm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--vm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--vm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--vm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Custom transitions */
	--vm-transition-fast: 150ms ease-in-out;
	--vm-transition-normal: 250ms ease-in-out;
	--vm-transition-slow: 350ms ease-in-out;
}

body{
	background-color: var(--wp--preset--color--secondary);
	overflow-x: hidden;
}

.grecaptcha-badge{
	bottom: 65px !important;
}

.vm-hide{
	display: none !important;
}

/* ==========================================================================
   Enhanced Typography
   ========================================================================== */

/* Improved heading hierarchy */
.wp-block-heading {
	scroll-margin-top: var(--wp--preset--spacing--large);
}

/* Better line height for readability */
.wp-block-paragraph {
	line-height: 1.7;
}

/* Enhanced code blocks */
.wp-block-code {
	background-color: var(--wp--preset--color--neutral-lighter);
	border: 1px solid var(--wp--preset--color--neutral-light);
	border-radius: var(--vm-radius-md);
	padding: var(--wp--preset--spacing--medium);
	font-family: var(--wp--preset--font-family--monospace);
	font-size: var(--wp--preset--font-size--small);
	overflow-x: auto;
}

/* ==========================================================================
   Enhanced Components
   ========================================================================== */

/* Improved buttons */
.wp-block-button__link {
	transition: all var(--vm-transition-fast);
	border-radius: var(--vm-radius-md);
	box-shadow: var(--vm-shadow-sm);
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--vm-shadow-md);
}

.wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: var(--vm-shadow-sm);
}

/* ==========================================================================
   Header Logo — colour correction
   --------------------------------------------------------------------------
   The site logo is a white asset, which is invisible against a light header
   background. The rule below uses CSS filter: brightness(0) to force every
   pixel to pure black, making it visible on light backgrounds.

   HOW TO REVERT / ADJUST:
   • To restore the original white logo, comment out the entire rule block
     below (select it and press Cmd+/ or Ctrl+/).
   • To use a different colour instead of pure black, replace brightness(0)
     with e.g. brightness(0) saturate(100%) invert(29%) sepia(98%)
     saturate(400%) hue-rotate(180deg) — use a tool like
     https://codepen.io/sosuke/pen/Pjoqqp to generate a filter for any hex.
   • If you later swap the logo image itself for a dark version, remove this
     rule entirely so the filter does not double-process the new image.
   ========================================================================== */

header{
	position: relative;
}

header .wp-block-site-logo{
	max-width: 155px;
	width: 100%;
}

header .wp-block-site-logo img{
	filter: brightness(0) saturate(100%) invert(33%) sepia(79%) saturate(459%) hue-rotate(122deg) brightness(91%) contrast(91%);
}

/*
 * Color stripe on the animated inner group (not the template-part shell),
 * so it fades in with vm-animate / is-visible.
 */
header.wp-block-template-part > .wp-block-group,
footer.wp-block-template-part > .wp-block-group {
	position: relative;
}

header.wp-block-template-part > .wp-block-group::before,
footer.wp-block-template-part > .wp-block-group::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 8px;
	background-image: repeating-linear-gradient(
		90deg,
		#c75a2c 0 14px,
		#0e6b58 14px 28px,
		#b98b3d 28px 42px,
		#b43a2a 42px 56px
	);
	background-size: 56px 100%;
	animation: vm-color-stripe-scroll 35s linear infinite;
	z-index: 1;
	pointer-events: none;
}

header.wp-block-template-part > .wp-block-group::before {
	bottom: 0;
}

.vm-show-lp{
	display: none;
}

footer.wp-block-template-part > .wp-block-group::before {
	top: 0;
}

@keyframes vm-color-stripe-scroll {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 56px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part > .wp-block-group::before,
	footer.wp-block-template-part > .wp-block-group::before {
		animation: none;
	}
}

body header.wp-block-template-part {
	/* padding: 20px 30px; */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100001;
	height: 109px;
}

body header.wp-block-template-part .wp-block-group.has-background-background-color{
	padding: 20px 30px;
	height: 100%;
}

.custom-logo-link img {
	/* Turns the white logo black. Comment out this block to revert. */
	filter: brightness(0);

	/* Optional: soften to very dark grey instead of pure black —
	   uncomment the line below and comment out the one above.     */
	/* filter: brightness(0) opacity(0.85); */
}

/* ==========================================================================
   Footer Logo — white
   --------------------------------------------------------------------------
   The footer site-logo block uses the same PNG as the header. CSS filter
   forces it to pure white (e.g. on a dark footer background).

   HOW TO REVERT / ADJUST:
   • Comment out the rule block below to restore the original logo colours.
   • If you upload a white PNG/SVG instead, remove this rule entirely.
   ========================================================================== */

footer{
	background-color: var(--wp--preset--color--ink) !important;
	position: relative;
}

footer .wp-block-group.has-neutral-lighter-background-color{
	background-color: var(--wp--preset--color--teal-ink) !important;
}

footer.wp-block-template-part .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/* footer newsletter styling */
footer .ctct-inline-form{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	
}

footer .ctct-inline-form .ctct-form-button{
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	font-weight: 800 !important;
}

footer .ctct-inline-form .ctct-form-container{
	/* background: #aaa; */
	width: 100%;
	max-width: 550px;
}

footer .ctct-inline-form .ctct-form-defaults{
	background-color: unset !important;
	color: #fff !important;
	padding: 0 !important;
	
}

footer .ctct-inline-form .ctct-form-defaults .ctct-form-header,
footer .ctct-inline-form .ctct-form-defaults p,
footer .ctct-inline-form .ctct-form-defaults label,
footer .ctct-inline-form .ctct-form-defaults a {
	font-family: var(--wp--preset--font-family--manrope) !important;
	color: #fff !important;
	text-align: center;
}

footer .ctct-inline-form .ctct-form-defaults .ctct-form-header{
	font-family: var(--wp--preset--font-family--zilla-slab, Georgia, serif) !important;
}

footer .wp-block-navigation__responsive-container-content ul li {
	text-align: center;
	justify-content: center;
}

.footer-row-right{
	font-family: 'Manrope', sans-serif !important;
	font-size: 13.5px !important;
	gap: 2px;
}

.footer-row-right a{
	font-family: 'Manrope', sans-serif !important;
}

/* Footer navigation — always visible + stacked on mobile (no overlay toggle) */
@media (max-width: 850px) {
	footer .wp-block-navigation__responsive-container-open,
	footer .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	footer .wp-block-navigation__responsive-container {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		background: transparent !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: visible !important;
	}

	footer .wp-block-navigation__responsive-close,
	footer .wp-block-navigation__responsive-dialog {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	footer .wp-block-navigation__responsive-container-content {
		display: block !important;
		padding: 0 !important;
	}

	footer .wp-block-navigation__container {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.65rem;
		width: 100%;
	}

	footer .wp-block-navigation-item {
		width: 100%;
	}

	footer .vm-copyright-container{
		flex-direction: row !important;
		margin-top: 10px;
	}
}


@media (max-width: 850px) {
	body header.wp-block-template-part {
		height: var(--vm-header-height-mobile);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100001;
	}
}

body #main .entry-content {
	max-width: 1200px;
	width: 100%;
}

body main.wp-block-group {
	align-items: center;
}

body header.wp-block-template-part nav{
	gap: 25px;
}

body header.wp-block-template-part nav a{
	color: var(--wp--preset--color--teal) !important;
	font-size: 13.5px;
	font-weight: 700;
	text-transform: uppercase;
	text-underline-offset: 6px;
}

body header.wp-block-template-part nav a:hover{
	text-decoration-color: var(--wp--preset--color--primary) !important;
}

body header.wp-block-template-part nav .current-menu-item a{
	/* opacity: 0.5; */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--teal-ink) !important;
}

body.home header.wp-block-template-part .wp-block-group.vm-fade-in{}

body footer{
	/* margin-top: 90px; */
}

/* Header navigation — desktop inline; off-canvas at ≤850px (see offcanvas-nav.css) */

.wp-block-navigation-item {
	transition: color var(--vm-transition-fast);
}

.wp-block-navigation-item:hover {
	color: var(--wp--preset--color--primary);
}

/* Improved search block */
.wp-block-search__input {
	border-radius: var(--vm-radius-md);
	border: 1px solid var(--wp--preset--color--neutral-light);
	transition: border-color var(--vm-transition-fast);
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Enhanced post cards */
.wp-block-post {
	transition: transform var(--vm-transition-normal);
	border-radius: var(--vm-radius-lg);
	overflow: hidden;
}

.wp-block-post:hover {
	transform: translateY(-2px);
}

.wp-block-post-featured-image {
	border-radius: var(--vm-radius-lg) var(--vm-radius-lg) 0 0;
	overflow: hidden;
}

/* Improved separators */
.wp-block-separator {
	border-color: var(--wp--preset--color--secondary);
	margin: var(--wp--preset--spacing--huge) 0;
	width: 100%;
	border-bottom: 1px solid;
}

/* ==========================================================================
   Layout Enhancements
   ========================================================================== */

/* Better spacing for groups */
.wp-block-group {
	position: relative;
}

/* Improved columns */
.wp-block-columns {
	gap: var(--wp--preset--spacing--large);
}

.wp-block-column {
	gap: var(--wp--preset--spacing--medium);
}

/* Enhanced cover blocks */
.wp-block-cover {
	border-radius: var(--vm-radius-lg);
	overflow: hidden;
}

/* ==========================================================================
   Interactive Elements
   ========================================================================== */

/* Enhanced links */
a {
	transition: color var(--vm-transition-fast);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

/* Improved focus states */
*:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Enhanced form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
	border-radius: var(--vm-radius-md);
	border: 1px solid var(--wp--preset--color--neutral-light);
	padding: var(--wp--preset--spacing--small);
	transition: border-color var(--vm-transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ==========================================================================
   Responsive Enhancements
   ========================================================================== */

@media (max-width: 850px) {
	/* Mobile-specific adjustments */
	.wp-block-group {

	}

	.wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--medium);
	}

	header.wp-block-template-part .wp-block-group.is-layout-flex {
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--wp--preset--spacing--small);
		flex-direction: row;
	}

	header.wp-block-template-part .wp-block-group{
		padding: 0;
	}
}

@media (max-width: 480px) {
	/* Small mobile adjustments */
	.wp-block-heading {
		font-size: var(--wp--preset--font-size--large);
	}
	
	.wp-block-paragraph {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	/* Hide navigation and footer for print */
	.wp-block-navigation,
	.wp-block-group:has(.wp-block-site-title) {
		display: none;
	}
	
	/* Ensure good contrast for print */
	* {
		color: #000 !important;
		background: #fff !important;
	}
	
	/* Remove shadows and borders for print */
	* {
		box-shadow: none !important;
		border: none !important;
	}
}

/* ==========================================================================
   Dark Mode Support (Future Enhancement)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root {
		--vm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
		--vm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
		--vm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
		--vm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
	}
}

/* ==========================================================================
   Accessibility Enhancements
   ========================================================================== */

/* Improved focus indicators */
.wp-block-button__link:focus,
.wp-block-navigation-item:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Better contrast for low vision users */
@media (prefers-contrast: high) {
	.wp-block-button__link {
		border: 2px solid currentColor;
	}
	
	.wp-block-separator {
		border-width: 2px;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   Custom Block Styles
   ========================================================================== */

/* Custom styles for VM blocks category */
.wp-block[data-type^="vm-"] {
	position: relative;
}

/* Enhanced query blocks */
.wp-block-query {
	position: relative;
}

.wp-block-query .wp-block-post-template {
	gap: var(--wp--preset--spacing--large);
}

/* Improved pagination */
.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--wp--preset--spacing--small);
	margin-top: var(--wp--preset--spacing--huge);
}

.wp-block-query-pagination-numbers {
	display: flex;
	gap: var(--wp--preset--spacing--small);
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
	border-radius: var(--vm-radius-md);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background-color var(--vm-transition-fast);
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }

/* Display utilities */
.hidden { display: none; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* ==========================================================================
   Theme Customization Hooks
   ========================================================================== */

/* These classes can be used by child themes or plugins */
.vm-custom-header {
	/* Custom header styles */
}


.vm-custom-footer {
	/* Custom footer styles */
}

.vm-custom-sidebar {
	/* Custom sidebar styles */
}

.vm-header-btn a,
.vm-shortcode-container a{
	font-weight: 800;
	font-size: 14px;
	border-radius: 0;
	padding: 10px 20px;
	border-radius: 3px;
}

.vm-header-btn a:hover{
	background-color: var(--wp--preset--color--primary) !important;
	color: #fff !important;
}

.vm-shortcode-container a{
	background: var(--wp--preset--color--primary);
	color: #fff;
	text-decoration: none;
	transition: background 0.3s ease, transform 0.3s ease;
	padding: 11px 20px;
}

.vm-shortcode-container a:hover{
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
}



.vm-cb-main{
	/* margin-bottom: 90px; */
	scroll-margin-top: 30px;
	margin-top: 0;
	padding: 90px 30px;
}

@media (max-width: 850px) {

	.vm-cb-main{
		scroll-margin-top: 70px;
	}
}

.vm-cb-inner{
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto;
}

/* Gutenberg color supports — background padding and text color cascade */
.vm-hero-block.has-background {
	padding: 0;
}

/* Full-bleed blocks: inherit background from ACF outer wrapper when editor puts it there */
[class*="wp-block-acf-"].has-background .vm-cb-main:not(.has-background):not([class*="-background-color"]),
[class*="wp-block-acf-"][class*="-background-color"] .vm-cb-main:not([class*="-background-color"]) {
	background-color: inherit;
}

[class*="wp-block-acf-"].has-background .vm-cb-main:not(.has-background):not([class*="-gradient-background"]),
[class*="wp-block-acf-"][class*="-gradient-background"] .vm-cb-main:not([class*="-gradient-background"]) {
	background: inherit;
}

/* Editor: don't hide blocks (and their backgrounds) before scroll animation runs */
.editor-styles-wrapper .vm-animate,
.block-editor-writing-flow .vm-animate {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}

/*
 * Child reveal patterns stay opacity:0 until .is-visible is added by
 * animations.js. That script does not run inside the editor canvas iframe,
 * so force nested content visible here (How It Works, Why Choose, Detailed
 * Tiers, Product Descriptions).
 */
.editor-styles-wrapper .vm-how-it-works-steps:not(.is-visible) .vm-how-it-works-step,
.editor-styles-wrapper .vm-how-it-works-steps.is-visible .vm-how-it-works-step,
.editor-styles-wrapper .vm-why-choose-columns:not(.is-visible) .why-choose-content-left,
.editor-styles-wrapper .vm-why-choose-columns:not(.is-visible) .why-choose-content-right,
.editor-styles-wrapper .vm-why-choose-columns.is-visible .why-choose-content-left,
.editor-styles-wrapper .vm-why-choose-columns.is-visible .why-choose-content-right,
.editor-styles-wrapper .vm-detailed-tiers-cards-reveal:not(.is-visible) .vm-detailed-tier-card,
.editor-styles-wrapper .vm-detailed-tiers-cards-reveal.is-visible .vm-detailed-tier-card,
.editor-styles-wrapper .vm-product-cards-reveal:not(.is-visible) .vm-product-card,
.editor-styles-wrapper .vm-product-cards-reveal.is-visible .vm-product-card,
.editor-styles-wrapper .vm-our-partners-choices-reveal:not(.is-visible) .vm-our-partners-choice-card,
.editor-styles-wrapper .vm-our-partners-choices-reveal.is-visible .vm-our-partners-choice-card,
.block-editor-writing-flow .vm-how-it-works-steps:not(.is-visible) .vm-how-it-works-step,
.block-editor-writing-flow .vm-how-it-works-steps.is-visible .vm-how-it-works-step,
.block-editor-writing-flow .vm-why-choose-columns:not(.is-visible) .why-choose-content-left,
.block-editor-writing-flow .vm-why-choose-columns:not(.is-visible) .why-choose-content-right,
.block-editor-writing-flow .vm-why-choose-columns.is-visible .why-choose-content-left,
.block-editor-writing-flow .vm-why-choose-columns.is-visible .why-choose-content-right,
.block-editor-writing-flow .vm-detailed-tiers-cards-reveal:not(.is-visible) .vm-detailed-tier-card,
.block-editor-writing-flow .vm-detailed-tiers-cards-reveal.is-visible .vm-detailed-tier-card,
.block-editor-writing-flow .vm-product-cards-reveal:not(.is-visible) .vm-product-card,
.block-editor-writing-flow .vm-product-cards-reveal.is-visible .vm-product-card,
.block-editor-writing-flow .vm-our-partners-choices-reveal:not(.is-visible) .vm-our-partners-choice-card,
.block-editor-writing-flow .vm-our-partners-choices-reveal.is-visible .vm-our-partners-choice-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
}

.editor-styles-wrapper .vm-how-it-works-steps::before,
.block-editor-writing-flow .vm-how-it-works-steps::before {
	transform: scaleX(1) !important;
	transition: none !important;
}

.vm-cb-main.has-text-color :where(
	h1, h2, h3, h4, h5, h6,
	p, li, dt, dd, span, label, button
) {
	color: inherit;
}

.vm-cb-main.has-text-color :where(a) {
	color: inherit;
}

/* ==========================================================================
   Performance Optimizations
   ========================================================================== */

/* Optimize images */
.wp-block-image img,
.wp-block-post-featured-image img {
	height: auto;
	max-width: 100%;
	object-fit: cover;
}

/* Optimize animations */
.wp-block-group,
.wp-block-post,
.wp-block-button__link {
	will-change: transform;
}

/* ==========================================================================
   Browser Compatibility
   ========================================================================== */

/* Fallbacks for older browsers */
.wp-block-group {
	display: flex;
	flex-direction: column;
}

/* Ensure proper fallbacks for CSS Grid */
@supports not (display: grid) {
	.wp-block-columns {
		display: flex;
		flex-wrap: wrap;
	}
	
	.wp-block-column {
		flex: 1;
		min-width: 300px;
	}
}

@media (max-width: 850px) {
	.vm-cb-main{
		padding: 60px 30px;
	}
}