/*
Theme Name: Robust Results
Description: Custom WordPress theme for Robust Results - Award-winning digital marketing agency
Author: Robust Results Development Team
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: robustresults
*/

/* ==========================================================================
   Root Variables
   ========================================================================== */
:root {
  /* Brand Colors - Updated to match Broadplace design */
  --primary-color: #153c6e;          /* Pink #3892FF*/  /* Robust Change */ /* linear-gradient(179deg, #17427a 59%, #0098e6);*/
  /* --primary-color: #e91e63;          Pink */
  --secondary-color: #1a4f5c;        /* Teal */
  /* --accent-color: #4cb494;           Light Teal */
  --accent-color: #0098e6;           /* Light Teal */  /* Robust Change */
  --dark-blue-color: #0b1c2c;        /* Dark Blue */
  --text-color: #2c3e50;             /* Text Primary */
  --text-light: #7f8c8d;             /* Text Secondary */
  --text-white: #ffffff;             /* White Text */
  --background-color: #ffffff;        /* Background */
  --background-light: #f8f9fa;       /* Light Background */
  --background-dark: #1a4f5c;        /* Dark Background */
  --border-color: #e1e5e9;           /* Border */
  --shadow-color: rgba(0, 0, 0, 0.1);
  
  /* Brand Gradients */
  --primary-gradient: linear-gradient(135deg, #e91e63 0%, #1a4f5c 100%);
  --secondary-gradient: linear-gradient(135deg, #1a4f5c 0%, #0b1c2c 100%);
  --page-header-gradient: linear-gradient(135deg, #1a4f5c 0%, #e91e63 100%);
  --testimonial-gradient: linear-gradient(135deg, #4fd1c7 0%, #1a4f5c 50%, #e91e63 100%);
  
  /* Service Card Gradients */
  --service-card-pink: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
  --service-card-orange: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  --service-card-teal: linear-gradient(135deg, #1a4f5c 0%, #0b1c2c 100%);
  
  --font-family-primary: 'Poppins', sans-serif;
  --font-family-secondary: 'Roboto', sans-serif;
  
  --container-max-width: 1600px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-xxl: 4rem;
  
  --border-radius: 8px;
  --border-radius-large: 12px;
  --transition: all 0.3s ease;
  --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.15);
  --box-shadow-large: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
	box-sizing: border-box;
}

body {
  font-family: var(--font-family-secondary) !important;
  font-weight: 300 !important;
  color: var(--text-color);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  /* overflow-x: hidden; */
}

body .wp-site-blocks .entry-content{
	overflow-x: hidden;
}


/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary);
  margin: 0 0 var(--spacing-md) 0;
  line-height: 1.2;
}

h1 {
	font-size: 2.5rem;
}
h2 {
	font-size: 2rem;
}
h3 {
	font-size: 1.5rem;
}
h4 {
	font-size: 1.25rem;
}
h5 {
	font-size: 1.125rem;
}
h6 {
	font-size: 1rem;
}

p {
	margin: 0 0 var(--spacing-md) 0;
	font-size: clamp(16px, 1.4vw, 21px);
}

/* ==========================================================================
   Container & Layout
   ========================================================================== */
.wp-block-group {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

.wp-block-group.is-layout-constrained {
	padding: 0 var(--spacing-md);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link,
.wp-element-button {
	background: var(--accent-color);
	color: white;
	padding: var(--spacing-sm) var(--spacing-lg);
	border: none;
	border-radius: var(--border-radius);
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition);
	display: inline-block;
	cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--primary-color);
	transform: translateY(-2px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--primary-color);
	color: white;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
	:root {
		--spacing-md: 1rem;
		--spacing-lg: 1.5rem;
		--spacing-xl: 2rem;
		--spacing-xxl: 2.5rem;
	}

	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.75rem;
	}
	h3 {
		font-size: 1.35rem;
	}

	.wp-block-group {
		padding: 0 var(--spacing-sm);
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */
:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   Design-Specific Components (Based on Image Analysis)
   ========================================================================== */

/* Logo styling for the "bp" mark */
.broadplace-logo-mark {
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
	font-size: 4rem;
}

.wp-block-broadplace-page-header::after {
  content: '.';
  position: absolute;
  right: 10%;
  top: 50%;
  color: transparent !important;
  height: 100%;
  width: 246px;
  /* background-image: url('/wp-content/uploads/Path-400.svg'); */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translateY(-50%);
  font-size: 8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--font-family-primary);
  z-index: 1;
}

.wp-block-broadplace-page-header {
	margin: 0 !important;
}

/* Service Cards with Gradient Backgrounds */
.service-card-pink {
	background: var(--service-card-pink);
	color: white;
}

.service-card-orange {
	background: var(--service-card-orange);
	color: white;
}

.service-card-teal {
	background: var(--service-card-teal);
	color: white;
}

/* Contact Form Styling */
.wp-block-broadplace-contact-form .contact-form-block {
	background: transparent;
	border-radius: var(--border-radius-large);
	box-shadow: var(--box-shadow-large);
}

/* Testimonial Cards with Gradient */
.testimonial-card-gradient {
	background: var(--testimonial-gradient);
	color: white;
	border-radius: var(--border-radius-large);
}

/* Button Styles - Updated for Design */
.btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 25px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: var(--transition);
	border: none;
	cursor: pointer;
}

.btn-primary {
	background: var(--primary-color);
	color: white;
}

.btn-primary:hover {
	background: var(--secondary-color);
	transform: translateY(-2px);
	box-shadow: var(--box-shadow-hover);
}

.btn-secondary {
	background: var(--accent-color);
	color: white;
}

.btn-outline {
	background: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

.btn-outline:hover {
	background: var(--primary-color);
	color: white;
}

/* Section Headings */
.section-heading {
  font-family: var(--font-family-primary);
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: var(--spacing-lg);
}

.section-heading .highlight {
	color: var(--accent-color);
}

/* Cards with Hover Effects */
.card-hover {
	transition: var(--transition);
	border-radius: var(--border-radius);
	overflow: hidden;
}

.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: var(--box-shadow-hover);
}

/* Footer Styling */
.site-footer {
	background: var(--secondary-gradient);
	color: white;
}

.site-footer a {
	color: var(--accent-color);
}

.site-footer a:hover {
	color: white;
}

/* Navigation Styling */
.site-header {
	background: white;
	box-shadow: var(--box-shadow);
}

.main-navigation a {
	color: var(--text-color);
	font-weight: 500;
	transition: var(--transition);
}

.main-navigation a:hover {
	color: var(--primary-color);
}

/* Contact Info in Footer */
.contact-info {
	background: var(--background-dark);
	color: white;
	padding: var(--spacing-xl);
}

.contact-info h3 {
	color: var(--accent-color);
}

/* ==========================================================================
   Custom Block Styles
   ========================================================================== */
.wp-block-cover {
	border-radius: var(--border-radius);
	overflow: hidden;
}

.wp-block-image {
	margin: 0 0 var(--spacing-md) 0;
}

.wp-block-separator {
	border-color: var(--border-color);
	margin: var(--spacing-xl) 0;
}

.site-header {
	max-width: 100% !important;
}

.site-footer {
	max-width: 100% !important;
}

.wp-element-button {
	text-decoration: none !important;
}

.bottom-round {
	border-radius: 0 0 50% 50%;
}

.adjust-bottom-round {
	width: 137vw;
	transform: translateX(-14%);
}

.color-white {
	background-color: white;
}

.color-accent {
	color: var(--accent-color) !important;
}

.overflow-visible {
	overflow: visible !important;
}

.margin-bottom-50px-mobile {
	margin-bottom: 50px;
}

@media (max-width: 780px) {
  .hide-on-mobile{
    display: none !important;
  }
  
  .translate-y-35px-mobile {
  	transform: translateY(35px);
  }
  
  

}

.site-header > div {
	flex-wrap: nowrap !important;
}

.color-complementary {
	background-color: #f4f4f4;
}

/* Newsletter Input and Button Styling */

span[data-name="email-newsletter"] > input{  /* Input */
    padding: 12px;
    max-width: 214px;
    border-radius: 6px 0 0 6px;
    border: none;
    color: rgba(255, 255, 255, 0.692);
}

p:has(span[data-name="email-newsletter"]){
  display: flex;
  justify-content: center;
}

span[data-name="email-newsletter"] + input {  /* Button */
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    background: var(--primary-color);
    color: white;
    border: none;
}

.wpcf7-response-output {
	max-width: 350px;
}

@media (max-width: 480px) {
	.footer-list {
		display: none !important;
	}
}
.pattern-custom-container {
	max-width: 100% !important;
	padding: 0px !important;
}

header:has(.site-header) {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.432);
}

.logged-in header:has(.site-header) {
	top: 32px !important;
}

/* .wp-block-cover{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
} */

footer:has(.site-footer) {
	margin-top: 0 !important;
}

.entry-content {
	margin: 0 !important;
}

.max-width-800 {
	max-width: 800px;
}

.max-width-850 {
	max-width: 850px;
}

/* --- Custom Pattern: Overlapping Boxes --- */
.my-overlapping-pattern {
	position: relative; /* Crucial: Establishes a positioning context for absolute children */
	padding-top: 50px; /* Adjust overall vertical padding */
	padding-bottom: 50px; /* Adjust overall vertical padding */
	margin-bottom: 50px; /* Space after the pattern */
	min-height: 400px; /* Ensure enough height if content is short */
}

/* Foreground Row: On top, standard flow */
.my-overlapping-pattern .foreground-boxes-row {
	position: relative; /* Ensures it stays on top of the absolute background */
	z-index: 2; /* Higher z-index than background */
	/* Adjust margin-bottom to make it visually overlap the background row more or less */
	margin-bottom: -50px; /* Pulls the next content up, but visual overlap is key */
}

.my-overlapping-pattern .foreground-boxes-row .wp-block-group {
	/* Ensure content is centered and boxes look good */
	justify-content: space-evenly;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease; /* Smooth hover effects */
	cursor: pointer;
}

.my-overlapping-pattern .foreground-boxes-row .wp-block-group:hover {
	transform: translateY(-5px); /* Lift on hover */
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Background Row: Absolutely positioned, behind, and offset */
.my-overlapping-pattern .background-boxes-row {
	position: absolute; /* Takes it out of the normal document flow */
	z-index: 1; /* Lower z-index than foreground */
	top: 0; /* Aligns to the top of the .my-overlapping-pattern container */
	width: 120%; /* Takes full width of the parent */
	left: 170px;
	gap: 35px;
	pointer-events: none; /* Allows clicks to go through to foreground elements */
	max-width: none !important;
	/* Horizontal offset:
       - Calculated to shift the background row left by roughly half the width of a foreground column,
         plus half the column gap.
       - A foreground column (5 cols) is ~20%. Half of that is ~10%.
       - `var(--wp--style--block-gap, 1.5em)` is the default block gap in WordPress.
    */
	/* transform: translateX(calc( -1 * ( (100% / 5 / 2) + (var(--wp--style--block-gap, 1.5em) / 2) ) )); */
	/* Vertical offset to position it nicely relative to the foreground */
	margin-top: 25px; /* Adjust this value to raise/lower the entire background row */
}

.my-overlapping-pattern .background-box-item {
	/* Styling for the empty background boxes */
	border: 2px dashed #dcdcdc; /* Light dashed border to indicate emptiness */
	background-color: rgba(
		245,
		245,
		245,
		0.4
	); /* Very light, semi-transparent background */
	opacity: 0.5; /* Make them semi-transparent */
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
	min-height: var(
		--wp--custom--dimensions--min-height,
		180px
	); /* Ensure consistent height */
	border-radius: 8px; /* Match foreground border-radius */
	gap: 100px;
}

/* Alternating up and down effect for background boxes */
.my-overlapping-pattern
	.background-boxes-row
	.wp-block-column:nth-child(even)
	.background-box-item {
	transform: translateY(75px); /* Moves even-numbered boxes down */
}

.my-overlapping-pattern
	.background-boxes-row
	.wp-block-column:nth-child(odd)
	.background-box-item {
	transform: translateY(-65px); /* Moves odd-numbered boxes up */
}

/* Responsive Adjustments: Hide background boxes on smaller screens */
@media (max-width: 782px) { /* WordPress breakpoint for tablet/mobile */
    .my-overlapping-pattern .background-boxes-row {
        display: none; /* Hide background boxes on small screens */
    }
    .my-overlapping-pattern .foreground-boxes-row {
        margin-bottom: 0; /* Remove negative margin when background is hidden */
    }
    .my-overlapping-pattern {
        padding-top: 20px;
        padding-bottom: 20px;
        min-height: auto;
    }
    
    .center-view-on-mobile {
		text-align: center !important;
	}

	.site-footer,
	.site-header {
		padding: 10px 0 !important;
	}

	.justify-center-mobile {
		justify-content: center !important;
	}

  .wpcf7-spinner{
    display: none;  /* Hides the footer newsletter spinner */
  }

  .site-header nav + div{
    display: none;
  }

}

.width-100 {
	width: 100% !important;
}


/* Optional: Adjust foreground column gap for better mobile spacing */
@media (max-width: 782px) {
    .my-overlapping-pattern .foreground-boxes-row > .wp-block-column {
        margin-bottom: var(--wp--style--block-gap, 1.5em); /* Add space between stacked columns */
    }
    
    .width-100-mobile {
    	width: 100% !important;
	}
    
}



/* Styles for the custom mega menu pattern */

.decoration-none a {
	text-decoration: none !important;
}

.mega-menu-content {
	/* display: none; */
	position: absolute;
	max-width: 100vw;
	width: 100%;
	left: 0;
	top: 100%;
	/* padding: 20px; */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 999;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.3s ease,
		visibility 0.3s ease,
		transform 0.3s ease;
	transform: translateY(-10px);
}

.mega-menu-content>div{
  width: 100%;
  margin: 0 auto;
}

.mega-menu-content.active {
	/* display: block; */
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Adjust for responsive behavior on smaller screens */
@media (max-width: 768px) {
	.mega-menu-content {
		position: static; /* Stack instead of absolute */
        display: none;
		width: auto;
		box-shadow: none;
		border-top: none;
		padding: 10px;
	}
}


/* Blogs Pagination CSS */

/* Main Pagination Container */
.wp-block-query-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between pagination items */
    margin-top: 40px; /* Space above pagination */
    margin-bottom: 40px; /* Space below pagination */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem; /* Base font size */
}

/* Common styles for all page numbers and navigation buttons */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px; /* Fixed width for consistent circles/squares */
    height: 40px; /* Fixed height */
    padding: 0 12px; /* Horizontal padding for text, 0 vertical */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 6px; /* Slightly rounded corners */
    text-decoration: none;
    color: #333; /* Dark grey text */
    background-color: #fff; /* White background */
    transition: all 0.2s ease-in-out; /* Smooth transitions for hover effects */
    box-sizing: border-box; /* Include padding and border in element's total width and height */
    font-weight: 500;
}

/* Hover state for clickable page numbers and navigation buttons */
.wp-block-query-pagination .page-numbers:hover:not(.current),
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background-color: #f0f0f0; /* Lighter grey background on hover */
    border-color: #c0c0c0; /* Slightly darker border on hover */
    color: var(--primary-color); /* A nice blue for hover text */
    cursor: pointer;
}

/* Current Page Number */
.wp-block-query-pagination .page-numbers.current {
    background-color: var(--primary-color); /* Primary accent color */
    color: #fff; /* White text for current page */
    font-weight: 600; /* Bolder text for current page */
    cursor: default; /* Indicate it's not clickable */
    pointer-events: none; /* Ensure it's not clickable */
}

/* Ellipsis (...) for skipped pages */
.wp-block-query-pagination .page-numbers.dots {
    background-color: transparent;
    border-color: transparent;
    color: #777; /* Muted grey for dots */
    cursor: default;
    pointer-events: none; /* Ensure it's not clickable */
    padding: 0 5px; /* Adjust padding for dots */
    min-width: auto; /* Allow dots to be narrower */
}

/* Previous and Next Arrows */
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
    font-size: 1.2em; /* Slightly larger arrows */
    line-height: 1; /* Ensure vertical centering */
}

/* Adjust padding for previous/next buttons if arrows are too close to border */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    padding: 0 15px; /* Slightly more horizontal padding for arrows */
}

/* Optional: Make the pagination responsive for smaller screens */
@media (max-width: 600px) {
    .wp-block-query-pagination {
        flex-wrap: wrap; /* Allow items to wrap to next line */
        gap: 6px;
    }
    .wp-block-query-pagination .page-numbers,
    .wp-block-query-pagination-previous,
    .wp-block-query-pagination-next {
        min-width: 36px;
        height: 36px;
        font-size: 0.9rem;
        padding: 0 10px;
    }
}

/* MAJOR Footer borderline css for  */

@media (max-width: 1300px) {
	/* .footer-border-box{
		border:none;
	} */
    
    .site-footer {
		padding-left: 0 !important;
		padding-right: 0 !important;

	}

	.footer-upper-grid {
		padding: 0;
	}

	.footer-upper-grid>div:nth-child(1) {
		padding-right: 0;
	}
	
	.footer-upper-grid>div:nth-child(1) > * {
		max-width: 260px;
	}
	
	.footer-upper-grid>div:nth-child(2) {
		padding-right: 0;
	}

	.footer-upper-grid>div:nth-child(2)>:first-child {
		gap: 4rem;
	}

	.footer-upper-grid>div:nth-child(2) .wpcf7-spinner {
		display: none;
	}
    
}

@media (max-width: 800px ) {
	.footer-border-box{
		border:none;
        border-top: 1px solid #566669;
        border-bottom: 1px solid #566669;
	}
    
	.footer-upper-grid {
		flex-direction: column;
        align-items: center;
     }
     
     .footer-upper-grid>div:nth-child(2) {
     	width: 100%;
     }
     
     .footer-upper-grid>div:nth-child(2)>:first-child {
     	justify-content: center;
     }
     
     .footer-upper-grid>div:nth-child(2)>:last-child {
     	align-items: center;
     }
     
}


/* Trusted brands mobile min height */

@media (max-width: 728px) {
	.trusted-brand-cover {
		min-height: 300px !important;
	}
}


/* Contact Page layout CSS */

.contact-bg-width {
	max-width: 100% !important;
}

.wp-block-broadplace-contact-form .contact-form-block {
	box-shadow: none !important;
}
.case-study-cover{
	min-height: 350px!important;
	padding: 0px !important;
}
.contact-column{
max-width: 1250px;
}


.blog-excerpt-font, .wp-block-post-excerpt__excerpt{
	font-size: 16px !important;
}

.justify-between{
	justify-content: space-between;
}

.rounded-tags>a{
	border: 1px solid white;
    border-radius: 20px;
    padding: 8px 11px;
    text-decoration: none;
}

.image-width-full img {
	width: 100% !important;
}