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

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