/*
 * Custom Stylesheet for Moondog Development Theme
 *
 * This file is loaded after the main stylesheet and is intended for all custom CSS modifications.
 * This keeps your changes separate and makes the theme easier to maintain.
 */

/* Custom Fonts
---------------------------------------------------------------------------- */
:root {
	--blue: #274586;
	--purple: #3f2663;
	--pink: #ff00cb;
	--moondog-development-link-color: var(--pink);
	--moondog-development-accent-color: var(--pink);
	--moondog-development-accent-color-contrast: var(--blue);
}

/* Body Font */
body {
	font-family: 'Josefin', sans-serif;
}

/* Headings Font */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	font-family: 'Montserrat', sans-serif;
}
.site-header {	
	box-shadow: none;	
	background: #fff;
}
.site-header > .wrap {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.nav-primary {
	margin: 0 0 0 auto;
}
.wp-custom-logo .title-area {
  max-width: 220px;
}

.genesis-nav-menu a {
	font-family: 'Montserrat', sans-serif;
}
/* Layout Overrides
---------------------------------------------------------------------------- */

/* Remove bottom margin from page content wrapper on larger screens. */
@media only screen and (min-width: 960px) {
	.page .entry {
		margin-bottom: 0;
	}

	/* Make page content full-width by default. */
	.page .content {
		width: 100%;
		float: none;
	}

	/* Allow full-width blocks by removing max-width from the main container. */
	.site-inner {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	/* Constrain the content of standard blocks to a readable width. */	
	.entry-content > .wp-block-genesis-blocks-gb-container:not(.alignwide):not(.alignfull) .gb-container-inside {
		max-width: 1200px; /* 1140px content + 30px padding on each side */
		margin-left: auto;
		margin-right: auto;
		padding-left: 30px;
		padding-right: 30px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	.entry-content > .section-hero > .gb-container-inside {
		padding-top: 0 !important;
	}
}


.bg-grey {
	background: #ebebeb;
}

/* Block Editor Overrides
---------------------------------------------------------------------------- */

/* Remove default bottom margin from Columns blocks to prevent unwanted white space. */
.wp-block-columns {
	margin-bottom: 0;
}
/* Buttons
---------------------------------------------------------------------------- */
.site-container .wp-block-button .wp-block-button__link {
	border-width: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

/* Dark Mode Styles
---------------------------------------------------------------------------- */
.dark-mode,
.auto-color-mode:where(:not(.light-mode)) {
    
    :root {
        /* Override WPForms variables for dark mode */
        --wpforms-field-background-color: #000;
        --wpforms-field-text-color: #eee;        
        --wpforms-button-background-color: var(--moondog-development-accent-color);
        --wpforms-button-text-color: var(--moondog-development-accent-color-contrast);		
    }

	/* Defaults
	--------------------------------------------- */
	body {
		background-color: #000000;
		color: #eee;
	}
	.section-hero {	
		background-color: #000000;
		color: #eee;
	}
	.wp-block-button__link.has-theme-primary-color.has-text-color.has-background.wp-element-button {
		background-color: var(--blue) !important;
		color:#fff;
	}
	.bg-grey {
		background: #111;
		color: #eee;
	}	
	.hero-pill {
		background: var(--blue);		
	}
	.hero-pill svg {
		fill: #eee;
	}
	a {
		color: var(--moondog-development-link-color);
	}

	a:focus,
	a:hover {
		color: #fff;
	}

	hr {
		color: #444;
	}

	/* Headings */
	p,
	.hero-services p,
	.hero-description,
	h1, h2, h3, h4, h5, h6,
	.entry-title a,
	.site-title a,
	.site-title a:focus,
	.site-title a:hover,
	.sidebar .widget-title a {
		color: #eee;
	}

	.entry-title a:focus,
	.entry-title a:hover {
		color: var(--moondog-development-link-color);
	}

	/* Forms */
	input,
	select,
	textarea {
		background-color: #333;
		border-color: #555;
		color: #eee;
	}

	input:focus,
	textarea:focus {
		border-color: #777;
        color: #eee;
	}
    div.wpforms-container-full input[type="submit"]:not(:hover):not(:active), div.wpforms-container-full button[type="submit"]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full input[type="submit"]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full button[type="submit"]:not(:hover):not(:active), .wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active),
	button,
	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	.button,
	.site-container .wp-block-button .wp-block-button__link {
		background-color: var(--moondog-development-accent-color);
		color: var(--moondog-development-accent-color-contrast);
	}

	button:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover,
	input[type="submit"]:hover,
	.button:hover,
	.site-container .wp-block-button .wp-block-button__link:hover,
	.site-container .wp-block-button .wp-block-button__link:focus {
		background-color: var(--moondog-development-accent-color-hover);
		color: var(--moondog-development-accent-color-contrast);
	}

	/* Structure */
	.site-inner,
	.site-header,
	.site-footer,
	.footer-widgets,
	.genesis-nav-menu .sub-menu a,
	.content .sticky,
	.author-box,
	.after-entry,
	.sidebar .enews {
		background-color: #000;
		border-color: #444;
		color: #eee;
	}
	.site-inner {
		background-color: #111;
	}

	/* Navigation */
	.genesis-nav-menu a,
	.menu-toggle,
	.sub-menu-toggle {
		color: #eee;
	}

	.genesis-nav-menu a:hover,
	.genesis-nav-menu .current-menu-item > a,
	.menu-toggle:hover,
	.sub-menu-toggle:hover {
		color: var(--moondog-development-link-color);
	}

	/* Genesis Blocks */
	.gb-block-testimonial {
		background-color: #333 !important; /* Use !important to override inline styles from the block */
		color: #eee !important;
	}

	/* WPForms */
	div.wpforms-container-full .wpforms-field-label {
		color: #eee;
	}    
	.wp-block-button__link.has-white-color.has-text-color.wp-element-button,
	.site-container .hero-buttons .wp-block-button.is-style-outline .wp-block-button__link.has-theme-primary-color {
		background: transparent;
	}
	
}

/* Color Mode Switcher
---------------------------------------------------------------------------- */

.color-mode-switcher {
	text-align: center;
	margin-top: 20px;
}

.color-mode-switcher .switcher-label {
	margin-right: 10px;
}

.color-mode-switcher .color-mode-button {
	background: transparent;	
	color: #333;
	margin: 0 2px;
	padding: 5px 10px;
	outline: none;
}

.dark-mode .color-mode-switcher .color-mode-button {
	border-color: #555;
	color: #eee;
}

.color-mode-switcher .color-mode-button[aria-pressed="true"] {
	background-color: var(--blue);
	color: #eee;	
}

/* Footer Widgets
---------------------------------------------------------------------------- */

/* Remove bottom margin from all widgets in the footer widget area. */
.footer-widgets .widget {
	margin-bottom: 0;
}

/* Testimonial Slider
---------------------------------------------------------------------------- */

.testimonials-group {
	position: relative;
}

/* Hide original block gap spacing */
.testimonials-group > .wp-block-group__inner-container {
	gap: 0 !important;
}

.tns-outer {
	padding: 0 !important;
}

.tns-controls {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	justify-content: space-between;
	pointer-events: none; /* Allows clicking through the container */
}

.tns-controls button {
	pointer-events: auto; /* Re-enable clicks on buttons */
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid #ddd;	
	
	font-size: 24px;
	color: #333;
	margin: 0 -45px; /* Adjust negative margin to pull buttons slightly outside */
}
.tns-nav {
	text-align: center;
	margin-top: 20px;
}

.tns-nav button {
	width: 12px;
	height: 12px;
	background-color: #ccc;
	border: 0;
	border-radius: 50%;
	margin: 0 5px;
	padding: 0;
}

.tns-nav button.tns-nav-active {
	background-color: var(--blue, #333);
}

.dark-mode .tns-controls button {
	background: rgba(0, 0, 0, 0.7);
	border-color: #555;
	color: #eee;
}

.dark-mode .tns-nav button {
	background-color: #555;
}

/* Override default testimonial block styles inside the slider */
.testimonials-group .gb-block-testimonial {
	background: #fff;
	color: #293038;
	border-radius: 5px;
	margin: 0; /* Remove margin when inside slider */
	padding: 40px; /* Use fixed padding instead of percentage */
	box-sizing: border-box; /* Ensure padding is included in element's total width/height */
	min-height: 280px; /* Set a minimum height to prevent slider jump */
}
.testimonials-group .gb-testimonial-text {
	cursor: pointer;
}
/* Testimonial Truncation and Read More */
.gb-testimonial-text.is-truncated {
	max-height: 100px; /* This should match the JS variable */
	overflow: hidden;
	position: relative;
	transition: max-height 0.5s ease-in-out;
}

/* Fade out effect for truncated text */
.gb-testimonial-text.is-truncated::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50px;
	background: linear-gradient(to bottom, transparent, #f2f2f2);
}

.dark-mode .gb-testimonial-text.is-truncated::after {
	background: linear-gradient(to bottom, transparent, #333);
}

.testimonial-read-more {
	display: inline-block;
	margin-top: 15px;
	font-weight: bold;
}

/* Logo Grid Styles
---------------------------------------------------------------------------- */

.section-brands .wp-block-post-featured-image img {
	filter: grayscale(100%);
	transition: filter 0.3s ease-in-out;
}

.section-brands .wp-block-post-featured-image:hover img {
	filter: grayscale(0%);
}
.section-brands .wp-block-post-template:has(.logo) img {
	max-width: 185px;	
	cursor: pointer;
}

.wp-block-post-template:has(.wp-block-post) {	
	padding-left: 0;
	margin-bottom: 0;
}
ul.wp-block-post-template > .wp-block-post {
	list-style: none;
}

/* Reset Query Loop display to prevent conflict with tiny-slider */
.section-brands .wp-block-post-template {
	display: block;
	margin-left: 0; /* Remove default ul margin */
}

/* Add spacing between logos when using autoWidth */
.section-brands .tns-item {
	align-self: center; /* Vertically center logos if they have different heights */
}

/* Logo Slider Styles
---------------------------------------------------------------------------- */

.section-brands .tns-outer {
	position: relative;
}

.section-brands .tns-controls {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	z-index: 10;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.section-brands .tns-controls button {
	pointer-events: auto;
	background: none;
	border: none;
	font-size: 40px;
	color: #aaa;
	transform: translateY(-10%);
	margin: 0 -20px;
}

/* Home Header */
/* #274586 blue
/* #3f2663 purple
/* */
.margin-bottom-28 {
	margin-bottom: 28px;
}
.margin-bottom-10 {
	margin-bottom: 10px;
}
.flexed {
	display: flex;
}
.gap-5 {
	gap: 5px;
}
.alignitems-center {
	align-items: center !important;
}
.flexed > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	gap: 4px;
}
:where(.wp-block-columns.is-layout-flex.nogap) {
	gap: 0;
}

.section-hero .wp-block-cover {
	padding: 0;
	overflow: unset;
}
.hero-column-left {
	padding-right: 40px;
}

.site-container .hero-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color:var(--blue);
	
}

.hero-pill, .hero-title > strong,
.site-container .hero-buttons .has-theme-primary-color, 
.site-container .hero-buttons .wp-block-button .wp-block-button__link.has-theme-primary-color, 
.site-container .hero-buttons .wp-block-button.is-style-outline .wp-block-button__link.has-theme-primary-color {
	color: var(--blue);	
}
.hero-pill {
	background: #f2f2f2;	
	padding: 5px 12px;
	font-size: 14px;
	line-height: 1;
	display: inline-block;
	border-radius: 35px;	
}
.hero-pill svg {
	fill: var(--blue);
	animation: fadeInUp 1s ease-out 0.1s forwards;
	opacity: 0;
}

.hero-pill p {
	margin: 0;
}

.hero-title {
	font-size: 48px;
	line-height: 1;
	animation: fadeInUp 1s ease-out 0.2s forwards;
	opacity: 0;
}
.hero-title > strong.typing {
	border-right: 0.1em solid var(--blue);
	animation: typing-cursor 0.75s step-end infinite;
}

@keyframes typing-cursor {
	from, to {
		border-color: transparent;
	}
	50% {
		border-color: var(--blue);
	}
}

.hero-description {
	animation: fadeInUp 1s ease-out 0.3s forwards;
	opacity: 0;
}
.hero-buttons {
	margin-bottom: 28px;
	animation: fadeInUp 1s ease-out 0.4s forwards;
	opacity: 0;
}
.hero-services {
	animation: fadeInUp 1s ease-out 0.5s forwards;
	opacity: 0;
}
.hero-services-icon svg {
	font-size: 40px;
	width: 40px;
	height: 40px;
	line-height: 1;
	fill: var(--blue);
	transition: transform 0.3s ease-in-out;
}
.hero-services-icon:hover svg {
	transform: scale(1.1);
}
.hero-services h2 {	
	line-height: 1;	
	margin: 0 0 5px;
}

.hero-column-right {
	position: relative;
}
.hero-image {
	margin-bottom: 0;
	animation: fadeInUp 1s ease-out 0.3s forwards;
	opacity: 0;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-brands, .hero-reviews {
	position: absolute;	
	padding: 10px;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.hero-brands {
	bottom: 20px;
	left: -20px;	
	background: #fff;	
	cursor: pointer;
}
.hero-reviews {	
	top: 20px;
	right: -20px;
	background: #fff;
	color: #333;
	cursor: pointer;
}

/* Brands Shortcode Styles
---------------------------------------------------------------------------- */

.brands-shortcode-wrapper {	
	line-height: 1;
}

.brands-shortcode-count {
	font-size: 16px;
	font-weight: bold;
	display: flex;
	align-items: center;
}
.brands-shortcode-count::after {
	content: '+';
	font-size: 12px;
}

.brands-shortcode-logos {
	display: flex;
	gap: 10px;
	margin-bottom: 5px;
}
.brands-shortcode-logos img {
	width: 40px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,.1);
	margin-left: -25px;
	height: 40px;
}
.brands-shortcode-logos img:first-of-type {
	margin-left: 0;
}
.brands-shortcode-text {
	font-size: 15px;
}
/* Google Reviews Shortcode Styles
---------------------------------------------------------------------------- */

.google-reviews-shortcode-wrapper {
	display: inline-flex;
	flex-direction: column;	
}

.google-reviews-row {
	display: flex;
	align-items: center;
}
.google-reviews-rating-text {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}
.google-reviews-rating {
	gap: 8px;
	font-size: 14px;	
}

.google-reviews-stars .dashicons {
	font-size: 20px;
	color: #fbbc05;
}

.google-reviews-count {
	font-size: 14px;	
}