/**handles:supersite-pro-main-styles**/
/*
Theme Name: SuperSite Pro
Theme URI: 
Author: SuperSite Pro
Author URI: https://supersitepro.com/
Description: A home services block theme built by SuperSite Pro.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 5.7
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: supersite-pro
Tags: full-site-editing

/**** style.css - Base styles *****/

/**** style.css - Base styles *****/

html {
  scroll-behavior: smooth;
}


/* ACF Custom Block Types
-------------------------------------------------- */

.service-area-title p,
.service-title p,
.service-title-heading h3,
.special-amount-off p,
.special-original-price p,
.special-reduced-price p,
.team-job-title p {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

.special-amount-off P::after {
    content: " OFF";
}

.special-details ul {
    list-style-type: disc;
}

.special-terms {
    font-size: 12px;
}

/* Footer Map
-------------------------------------------------- */

.footer-map {
    margin-bottom: -9px;
}

/* Hover Cards
-------------------------------------------------- */

.hover-card {
    position: relative;
    transition: all 0.25s ease-out;
    &:hover {
        transform: translateY(calc(var(--wp--preset--spacing--10) * -1));
    }
}

/* Make group card (group block) clickable - Remove this when clickable group blocks are in core! */

.hover-card a:after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: '';
}

.hover-card a:hover {
    text-decoration: none;
}

.hover-card:hover .icon-bg {
    filter: brightness(1.1);
}

.icon-bg {
    transition: all 0.25s ease-out;
}

/* Inline SVG Icons (ACF)
-------------------------------------------------- */

.icon-48 svg {
    height: 48px;
    width: 48px;
}

.icon-64 svg {
    height: 64px;
    width: 64px;
}

.icon-48,
.icon-64 {
    line-height: 0;
}

.icon-base svg {
    fill: var(--wp--preset--color--base);
}

.icon-secondary svg {
    fill: var(--wp--preset--color--secondary);
}

/* Remove bottom gap from top-half overlap tranform  */

.is-style-group-overlap-top-half:is(.icon-48) {
    margin-bottom: -48px;
}

/* Homepage Heroes
-------------------------------------------------- */

/* Remove global theme padding from cover block inner */
:is(.hero-01, .hero-02, .hero-03, .hero-04, .hero-05, .hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .has-global-padding {
    padding-left: 0;
    padding-right: 0;
}

/* Shared Mobile Styles
------------------------- */

@media (max-width: 1439px) {
    :is(.hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .content {
        padding: var(--wp--preset--spacing--30) !important;
    }
    :is(.hero-01, .hero-02, .hero-04) .is-style-featured-image-overlap-bottom {
        margin-bottom: calc(var(--wp--preset--spacing--30) * -1) !important;
    }
    :is(.hero-02, .hero-03, .hero-04) .is-style-group-reverse-mobile {
        gap: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;
    }
}

@media (max-width: 1079px) {
    :is(.hero-01, .hero-02, .hero-04) .is-style-group-reverse-mobile {
        gap: var(--wp--preset--spacing--30) !important;
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;
    }
    :is(.hero-05, .hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .is-style-columns-reverse-mobile {
        flex-direction: column-reverse !important;
        flex-wrap: nowrap !important;
    }
    :is(.hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .content {
        max-width: 100% !important;
        padding: var(--wp--preset--spacing--30) !important;
    }
    :is(.hero-01, .hero-02, .hero-04) .is-style-featured-image-overlap-bottom {
        margin-bottom: 0 !important;
    }
}

/* Set cover block aspect ratio to  16 / 9 for screen sizes 600px-1079px */
@media (min-width: 600px) and (max-width: 1079px) {
    :is(.hero-05, .hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .wp-block-column:last-child .wp-block-cover {
        aspect-ratio: 16 / 9 !important;
    }
}

/* Set cover block aspect ratio to  4 / 3 for screen sizes <600px */
@media (max-width: 599px) {
    :is(.hero-05, .hero-06, .hero-07, .hero-08, .hero-09, .hero-10, .cta-section) .wp-block-column:last-child .wp-block-cover {
        aspect-ratio: 4 / 3 !important;
    }
}

/* Hero 03 Mobile Styles
------------------------- */

@media (max-width: 1079px) {
    .hero-03 .is-style-group-reverse-mobile {
        gap: var(--wp--preset--spacing--30) !important;
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: 0 !important;
    }
}

/* Hero 05 Mobile Styles
------------------------- */

@media (max-width: 1439px) {
    .hero-05 {
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;
    }
}

/* Hero 07 Mobile Styles
------------------------- */

@media (max-width: 1439px) {
    .hero-07 .content {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    .hero-07 .is-style-columns-reverse-mobile {
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;
    }
}

@media (max-width: 1079px) {
    .hero-07 .content {
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;
    }
    .hero-07 .is-style-columns-reverse-mobile {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
}

/* Hero 08 Mobile Styles
------------------------- */

@media (max-width: 1439px) {
    .hero-08 .is-style-cover-overlap-bottom {
        margin-top: var(--wp--preset--spacing--30) !important;
    }
}

@media (max-width: 1079px) {
    .hero-08 .is-style-cover-overlap-bottom {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
    }
}

/* Hero 09 Mobile Styles
------------------------- */

@media (max-width: 1439px) {
    .hero-09 .is-style-group-overlap-right {
        margin-right: calc(var(--wp--preset--spacing--30) * -1) !important;
        position: relative;
        z-index: 9;
    }
    .hero-09 .wp-block-column:has(.content) {
        padding-bottom: var(--wp--preset--spacing--30) !important;
        padding-top: var(--wp--preset--spacing--30) !important;;
    }
}

@media (max-width: 1079px) {
    .hero-09 .is-style-group-overlap-right {
        margin-right: 0 !important;
    }
    .hero-09 .wp-block-column:has(.content) {
        padding-bottom: 0 !important;
        padding-top: 0 !important;;
    }
}

/* Misc
-------------------------------------------------- */

.avatar {
    margin-left: -12px !important;
    &:first-child {
        margin-left: 0 !important;
    }
}

/* Removes bottom gap on iframes */
iframe {
	display: block !important;
}

.mask {
    overflow: hidden;
}

/* Fix for squished images in row blocks */

.wp-block-group:is(.is-layout-flex) .wp-block-image img {
    max-width: none;
}

.sticky {
	position: sticky;
	top: 131px;
	z-index: 9;
	@media (min-width: 600px) {
		top: 151px;
	}
}

@media (min-width: 1080px) {
	.mask1 {
		mask-image: url(/wp-content/uploads/2026/01/mask1.svg) !important;
		mask-size: cover;
		mask-repeat: no-repeat;
	}
	
	.skew-inner {
		transform: skew(-12deg, 0deg);
	}

	.skew-inner .wp-block-column,
	.skew-inner > .wp-block-group {
		transform: skew(12deg, 0deg) !important;
	}

	.skew-intro {
		transform: skew(-12deg, 0deg);
	}

	.skew-intro > .wp-block-group {
		transform: skew(12deg, 0deg) !important;
	}
}

@media (max-width: 1079px) {
	.skew-section {
		background: var(--wp--preset--color--secondary) !important;
	}
}

.text-secondary {
	color: var(--wp--preset--color--secondary) !important;
}

.wp-block-button a,
.wp-block-button a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

@media (max-width: 599px) {
	.wp-block-site-logo img {
		width: 200px;
	}
	.cta-buttons {
		flex-wrap: wrap;
		
	}
	.cta-buttons .wp-block-buttons,
	.cta-buttons .wp-block-button{
		flex-basis: 100%;
	}
}

.popular-plan {
	position: relative;
	z-index: 2;
}

@media (max-width: 599px) {
	.popular-plan {
		margin-top: 56px !important;
		box-shadow: none !important;
	}
}

.plan-callout {
	position: absolute;
	top: -56px;
	left: 0;
	width: 100%;
}

.mask1 img {
	object-position: 20% 20%;
}

.comparison-grid img {
	width: 24px;
	height: 24px;
}

@media (max-width: 599px) {
	.comparison-grid-header h4,
	.comparison-grid p {
		font-size: var(--wp--preset--font-size--extra-small);
	}
	.comparison-grid img {
		width: 20px;
		height: 20px;
	}
}

.wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
	text-decoration: none;
}

.step-number {
	width: 64px !important;
	height: 64px !important;
	border-radius: 100px;
	background-color: var(--wp--preset--color--secondary);
}

.step-number p {
	width: 64px;
}

.hero-06 h2 {
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 600;
    line-height: 1.25;
    color: var(--wp--preset--color--base) !important;
    margin-bottom: var(--wp--preset--spacing--10);
    text-transform: none;
}

/* Grid 4 Columns
------------------------- */

@media (max-width: 1279px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 599px) {
    .wp-block-cloudcatch-light-modal-block {
        width: 100% !important;
        max-height: 100vh !important;
        transform: none !important;
    }
}

.wp-block-cloudcatch-light-modal-block {
    container-type: inline-size;
}

@container (width <= 768px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (width < 600px) {
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Modal loading to mask iframe loading */

.pane2 { position: relative; }

.pane2.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(2px);
  z-index: 50;
}