/**
 * 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 {
	/* Max-width tokens */
	--max-width: 1200px;
	--max-width-wide: 1600px;

	/* Font families */
	--font-serif: 'Playfair Display', Georgia, serif;
	--font-sans: 'Jost', -apple-system, sans-serif;

	/* Short-hand aliases for theme palette colours */
	--ink:   var(--wp--preset--color--ink);
	--white: var(--wp--preset--color--white);

	/* 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;
}

/* ==========================================================================
   Base HTML & Body
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-sans);
	font-size: 17px;
	color: var(--ink);
	background: #FAF6F0;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ==========================================================================
   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);
	text-decoration: unset !important;
}

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

.wp-block-button__link.has-accent-background-color:hover {
	color: #fff !important;
	background-color: #000 !important;
}

/* Enhanced navigation */
.wp-block-navigation__responsive-container-open {
	background-color: var(--wp--preset--color--background);
	border-radius: var(--vm-radius-md);
	box-shadow: var(--vm-shadow-lg);
}

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

.wp-block-navigation-item:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: unset !important;
}

/* 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--neutral-light);
	margin: var(--wp--preset--spacing--huge) 0;
}

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

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

/* Improved columns */
.wp-block-columns {
	/* gap: var(--wp--preset--spacing--large); */
	padding-top: 90px !important;
	padding-bottom: 90px !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
	width: 100vw	!important;
	margin-right: 0 !important; 
	max-width: unset !important;
	margin-left: calc(50% - 50vw) !important;
	justify-content: center;
}


.wp-block-columns .vm-ig-block{
	width: unset !important;
	max-width: unset !important;
	margin: 0 !important;
}

@media (min-width: 999px) {
	.wp-block-column {
		/* gap: var(--wp--preset--spacing--medium); */
		max-width: 600px;
	}
}



@media (max-width: 781px) {	
	.vm-col{
		/* padding-left: 30px !important;
		padding-right: 30px !important;
		padding-top: 30px !important; */
		/* padding: 30px !important; */
		padding: 0 !important;
		padding-top: 30px !important;
		
	}
	
	.vm-col-top{
		padding-bottom: 0 !important;
	}
}

@media (max-width: 999px) {
	.vm-col{
		/* padding-left: 30px !important;
		padding-right: 30px !important; */
	}

	.vm-col-top{
		padding-right: 0 !important;
		padding-top: 0 !important;
	}
}

/* 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: 768px) {
	/* Mobile-specific adjustments */
	.wp-block-columns {
		flex-direction: column;
		gap: var(--wp--preset--spacing--medium);
	}
	
	.wp-block-navigation {
		gap: var(--wp--preset--spacing--small);
	}
}

@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 */
/* (intentionally no default hooks here) */

/* ==========================================================================
   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;
	}
}

.vm-cb-title{
	font-weight: 500;
	color: var(--wp--preset--color--accent);
}

.vm-cb-title em{
	font-weight: 400;
}

.wp-block-navigation__responsive-container-open{
	box-shadow: none !important;
	background: #fff;
}

.wp-block-navigation__responsive-container-open svg{
	fill: #000 !important;
}


.wp-block-columns{
	scroll-margin-top: 30px;
	margin-top: 0 !important;
}

.vm-media-text-frank{
	position: relative;
}

.vm-media-text-frank.has-white-background-color:after{
	content: '';
	background: #fff;
	height: 100%;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}

.vm-media-text-frank .wp-block-media-text__media{
	border-radius: 4px;
	overflow: hidden;
}
.scroll-to-top{
	bottom: 45px !important;
}	

.vm-med-padding{
	padding-bottom: 90px;
}

.vm-header-scroll-to{
	scroll-margin-top: 100px;
	margin-top: 0;
	margin-top: 40px;
}

.vm-eyebrow{
	font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--wp--preset--color--stone);
    margin-bottom: 12px;
	line-height: 1;
}

.vm-para-content p{
	color: var(--wp--preset--color--stone) !important;
	font-size: 15px !important;
    line-height: 1.6 !important;
    margin-bottom: 18px !important;
    font-weight: 300 !important;
}

.vm-button{
	display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.vm-full-hr{
	/* background: #aaa; */
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	/* height: 10px; */
}

/* custom mailer lite styles */

.ml-embedded .ml-form-embedContent{
	display: none;
}

.ml-embedded .ml-form-formContent{
	padding: 0 !important;
}

.ml-embedded .ml-form-embedWrapper{
	background-color: unset !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	max-width: unset !important;
}

.ml-embedded .ml-form-embedWrapper .ml-form-embedBody{
	padding: 0 !important;
}

.vm-cb-main {
	margin-top: 0;
	scroll-margin-top: 30px;
	padding: clamp(40px, 9vw, 100px) 30px;
}

@media (max-width: 870px) {

	/* .ml-embedded{} */

	.ml-embedded .ml-form-horizontalRow,
	.ml-embedded .ml-form-horizontalRow .ml-input-horizontal {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center;
		align-items: center;
		width: 100% !important;
	}

	.ml-embedded .ml-form-horizontalRow .ml-input-horizontal .horizontal-fields{
		width: 100% !important;
	}

	.ml-embedded .ml-button-horizontal{
		width: 100% !important;
	}

	.ml-embedded .horizontal-fields{
		padding-right: 0 !important;
	}

	.vm-med-padding{
		padding-bottom: 30px;
	}
}

@media (max-width: 599px) {
	.scroll-to-top{
		bottom: 40px !important;
	}	
}

@media (max-width: 820px) {
	.vm-media-text-frank .wp-block-media-text__media,
	.vm-media-text-frank .wp-block-media-text__media img{
		height: 100%;
	}

	.vm-media-text-frank .wp-block-media-text__media img{
		width: 100%;
		object-fit: cover;
	}
}

@media (min-width: 983px) {
	.vm-media-text-frank .wp-block-media-text__media{
		height: 100%;
		min-height: 60vh;
		overflow: hidden;
	}
	
	.vm-media-text-frank .wp-block-media-text__media img{
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 1190px) {
	.vm-cb-main {
	  scroll-margin-top: 70px; /* or whatever smaller spacing you want */
	}
	
	.vm-media-text-frank {
		/* opacity: 0.5; */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		grid-template-columns: 1fr !important;
	}

	.vm-media-text-frank .wp-block-media-text__media{
		height: 100%;
		max-height: 40vh;
		min-height: unset;
		/* margin-bottom: 30px; */
		/* width: 50vw; */
		width: 100%;

		display: flex;
		justify-content: center;
		align-items: center;
		
	}

	.vm-media-text-frank .wp-block-media-text__media img{
		/* height: 100%;
		max-height: 40vh;
		min-height: unset;
		margin-bottom: 30px; */
		height: 100%;
		width: 100%;
		/* max-width: 600px; */
		border-radius: 4px;
	}

	.vm-media-text-frank.is-stacked-on-mobile .wp-block-media-text__content{
		padding: 0;
		padding-top: 20px;
	}

	.vm-media-text-frank.is-stacked-on-mobile .wp-block-media-text__content p:first-child{
		margin-bottom: 0;
	}

}

@media (max-width: 599px) {
	.wp-block-navigation__responsive-container{
		width: 100vw;
		margin-left: calc(50% - 50vw);
	}

	.wp-block-media-text.is-stacked-on-mobile{
		padding: 60px 30px !important;
		padding-bottom: 30px !important;
	}

	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content{
		/* padding: 0; */
		/* padding-top: 20px; */
	}
}

@media (max-width: 1255px) {
	.vm-cb-main{
		padding: clamp(40px, 6vw, 120px) 30px !important;
	}
}


/* Ensure the WP navigation toggle (open button) only appears on mobile */
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open {
		display: none !important;
	}
}

@media (max-width: 599px) {
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}


/* Force the hamburger toggle to show at a higher breakpoint, e.g. 782px */

/* Re-hide the menu that core shows above 600px */
@media (max-width: 1190px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
	  display: none !important;
	}
	.wp-block-navigation__responsive-container-open {
	  display: flex !important;
	}
  }
  
  /* Re-show it above your new breakpoint */
  @media (min-width: 1190px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
	  display: flex !important;
	}
	.wp-block-navigation__responsive-container-open {
	  display: none !important;
	}
  }