/* Certified-Certified Theme Styles */ 

 :root {
    /* Colors */
    --cc-primary-color: #0074BC;
    --cc-blue: var(--cc-primary-color);
    --cc-secondary-color: #A20C33;
    --cc-rd: var(--cc-secondary-color);
    --cc-accent-1: #B52730;
    --cc-accent-2: #023E61;
    --cc-accent-3: #0F4869;
    --cc-white: #FFFFFF;
    --cc-alt: #F9F9F9;
    --cc-black: #2E2E32;
    --cc-gray: #60616B;
    --cc-light-gray: #F5F5F5;
    --white: var(--cc-white);
    --black: var(--cc-black);
    --bright-red: #E82C2B;
    --cc-bright-red: var(--bright-red);
    --cc-shadow: 0 12px 28px 0 rgba(0, 0, 0, .34);
    --cc-shadow-light: 0 6px 12px 0 rgba(0, 0, 0, 0.15);

     /* Buttons */
    --button-border-radius: 6px;
    --button-font-family: var(--alt-font-family);
    --button-font-weight: 600;
    --button-text-transform: capitalize;
    --button-font-size: .9em;
    --button-padding: 1em 2em;
    --button-color: var(--cc-white);
    --button-background: var(--cc-bright-red);
    --button-border: 2px solid var(--cc-bright-red);
    --button-border-radius: 999px;
    --button-text-transform uppercase;
    --button-font-weight: 600;
    --button-secondary-color: var(--cc-black);
    --button-text-transform: uppercase;
    /*--button-bright-red-color:  */
    /* --button-link-url: var(--cc-arrow-right); */
    --button-secondary-background-hover: transparent;
    --button-background-hover: transparent;
    --button-color-hover: var(--cc-bright-red);


    --font-size-ml: calc(calc(var(--font-size-md) + var(--font-size-lg)) / 2);
    --font-size-ms: calc(calc(var(--font-size-md) + var(--font-size-sm)) / 2);
    --font-size-sx: calc(calc(var(--font-size-xs) + var(--font-size-sm)) / 2);
    --title-area-padding-mobile: 20px;

    --title-area-padding-top-mobile: 30px;
	--title-area-padding-bottom-mobile: 10px;
    
    --cc-border-radius: 12px;
    --cc-md-border-radius: var(--cc-border-radius);
    --cc-sm-border-radius: 5px;
    --entry-title-single-margin-bottom: 0;
     
    --content-sidebar-wrap-margin-bottom: 0;
    --after-entry-margin: 0;

}

/* Before Header */

/* Header Nav Block Styles */
.menu-item-link{
    color: var(--cc-black);
        
}
.header-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.header-hero__inner {
    display: flex;
    /* flex-wrap: wrap; */
    width: 100%;
    gap: 6rem;
}

.header-hero__column {
    box-sizing: border-box;
}

/* Image Column */
.header-hero__column--image {
    text-align: center;
    flex: 1 1 40%;
}

.header-hero__column--content {
   flex: 1 1 60%; 
}

/* Optional polaroid style */
.header-hero__polaroid {
    display: inline-block;
    background: #fff;
    padding: 1rem 1rem 1.5rem; /* extra bottom space like a Polaroid */
    border-radius: 5px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
}

.header-hero__image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
}


/* Content Column */
.header-hero__column--content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Column Ordering */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

/* Responsive (stack columns) */
@media (max-width: 768px) {
    .header-hero__column {
        flex: 1 1 100%;
    }

    .order-1,
    .order-2 {
        order: unset;
    }
}

/* Polaroid Image Block */
.polaroid-image, .woajobs-job-img {
    position: relative;
    display: block;
    width: 90%;
    max-width: 375px;
    margin: 50px auto;
    z-index: 1;
}

/* Default red angled background */
.polaroid-image::before, .woajobs-job-img::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: -5px;
    left: 0%;
    z-index: -1;
    transform: rotate(13deg);
    /* background-color: var(--cc-accent-1); */
    border-radius: 20px;
}


/* Blue background variation */
.polaroid-image--primary::before, article.woajobs-job:nth-of-type(odd) .woajobs-job-img::before {
    background-color: var(--cc-primary-color);
}

/* Red background variation (default) */
.polaroid-image--secondary::before, article.woajobs-job:nth-of-type(even) .woajobs-job-img::before {
    background-color: var(--cc-accent-1);
}

.polaroid-image__frame, .woajobs-job-img a {
    display: block;
    position: relative;
    background-color: #fff; /* White frame */
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.polaroid-image__img, .woajobs-job-img a img {
    display: block;
    width: 100%;
    height: auto;
    /* aspect-ratio: 1; */
    object-fit: cover;
    border-radius: 3px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .polaroid-image, .woajobs-job-img {
        max-width: 85%;
    }
    
    .polaroid-image::before, .woajobs-job-img::before {
        width: 100%;
        height: 100%;
        top: 2%;
        left: -2%;
    }
}

/* custom class for landscaped image */
.landscaped-polaroid{
    max-width: unset !important;
}



/* Curved Section Styles */
.wp-block-group.is-style-blue-curve-bg,
.wp-block-group.is-style-blue-curve-bg * {
  color: var(--cc-white) !important;
}

.wp-block-group.is-style-blue-curve-bg {
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: transparent; /* we use the ::before for curve */
  }
  
  .wp-block-group.is-style-blue-curve-bg::before {
    content: '';
    position: absolute;
    width: 110vw;
    height: 76%;  /* adjust accordingly for the section content */
    background: var(--cc-accent-3);
    border-radius: 50% / 20%;
    transform: rotate(-2deg);
    z-index: -1;
    border: 20px solid var(--cc-accent-2);
    border-right-width: 5vw;
  }
  



/* To be moved to Customize > Add CSS */
/* YouTube embedded iframe class */
.yt-embed-element{
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Before Header Styles */
.before-header {
    background-color: #edeff4;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .9rem;
    color: var(--cc-black);
}

.cc-ph-info {
    display: flex;
    gap: 20px;
    align-items: center;
}

.cc-preheader .cc-preheader-time{
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.cc-preheader a{
    color: var(--cc-black);
    text-decoration: none;
}

/* Header Button BOOK NOW */
.before-header {
    --button-font-size: var(--font-size-ms);
    --button-padding: .5em 1em;

}

@media only screen and (max-width: 899px) {
    .before-header .certified-button {
        display: none;
    }
}
/* 
.site-header-wrap {
    height: 175px;
    border-bottom: 5px solid var(--cc-accent-1);
}
 */

/* Hero Section Styles */
.content-column .preheading {
    color: var(--cc-black);
    text-transform: uppercase;
    font-size: var(--font-size-ml);
    font-weight: 400;
    letter-spacing: 1px;
}
.content-column .heading {
    color: var(--cc-black);
    text-transform: unset;
    font-size: var(--font-size-xxxl);
}
.content-column .subheading {
    color: var(--cc-black);
    text-transform: unset;
    font-size: var(--font-size-lg);
}

.content-column p {
    color: var(--cc-gray);
    font-size: var(--font-size-lg);
    padding-bottom: 10px;
}

.content-column .custom-call-us,
.content-column .custom-call-us a{
    color: var(--cc-white);
    text-decoration: none;
}


/* added */
.custom-call-us a:hover {
    color: var(--cc-accent-1);
} 

.content-column .hero-section-button .wp-element-button{
    /* #E82C2B; */
    background-color: var(--bright-red);
    color: var(--cc-white);
    border-radius: 999px;
    font-weight: lighter;
    text-transform: uppercase;
    display: inline-block;
    font-size: 16px;
    transition: all 0.3s ease;
    border: 2px solid var(--cc-white); 
}

.content-column .hero-section-button .wp-element-button:hover{
    background-color: var(--cc-accent-1);     
    color: var(--cc-white);
    border-color: var(--cc-white);
}

/* Our Primary Services section */
.our-primary-services p{
    color: var(--cc-gray);
    font-size: var(--font-size-md);
}

.our-primary-services p a{
    color: var(--cc-black);
}

.our-primary-services p a:hover{
    color: var(--cc-accent-1);
}

.our-primary-services h2{
    color: var(--cc-black);
    text-transform: unset;
    font-size: 37px;

}

.our-primary-services h4{
    color: var(--cc-black);
    text-transform: unset;
    font-size: 22px;
}

/* About Us Section */
.about-us-section{
    margin: 30px 0 30px 0;
}

.about-us-content p{
    color: var(--cc-gray);
    font-size: var(--font-size-md);
}

.about-us-content h2{
    color: var(--cc-black);
    text-transform: unset;
    font-size: 37px;
}
p.content-column-about-us{
    color: var(--cc-black);
    font-size: var(--font-size-md);
}


/* Section with Blue Curve */
.blue-curve-section{
    padding-top: 35px;
    padding-bottom: 35px;
}

.blue-curve-section h2{
    text-transform: unset;
    font-size: 37px;
}

/* Testimonials */
.testimonials-section{
    display: flex;
    align-items: center;
    justify-content: center;
}
.testimonials-section .testimonials-section-p {
    color: var(--cc-gray);
    font-size: 17px;
}

.testimonials-section .testimonials-section-h2 {
    color: var(--cc-black);
    text-transform: unset;
    font-size: 37px;
    max-width: 650px;
    margin: 0 auto var(--spacing-sm) auto;
}


/* Our Guarantees Section Styles */
.our-guarantees-section {
    display: flex;
    align-items: center;
    justify-content: center;
}
.our-guarantees-section .wp-block-columns{
    
}

.why-choose-certified p {
    color: var(--cc-gray);
    font-size: 17px;
}
.why-choose-certified h2{
    text-transform: unset;
    font-size: 37px;
}

/* Mobile Menu */
.mobile-menu{
    max-height: 300px;
}


/* Responsiveness  */
@media (max-width: 768px) {
    .header-hero__image{
        height: 350px;
        width: 350px;
    }
    .header-hero__inner{
        gap: 1rem;
        flex-wrap: wrap-reverse;
    }
    .content-column p{
        /* color: var(--cc-white); */
        font-size: var(--font-size-lg);

    }

    .content-column h2{
        font-size: var(--font-size-xxxxl);
        color: var(--cc-black);
    }
    .content-column .custom-call-us,
    .content-column .custom-call-us a{
        font-size: var(--font-size-lg);
        color: var(--cc-gray);
    }
    .hero-section-bg .wp-block-cover__image-background{
        height: 114%;
    }

    /* Our Primary Services */
    .our-primary-services p,
    .our-primary-services h4 {
        font-size: var(--font-size-lg);
    }
    .our-primary-services h2{
        font-size: var(--font-size-xxxxl);
    }

    .our-primary-services p a{
        font-size: var(--font-size-lg);
    }

    /* About Us */
    .about-us-content p{
        font-size: var(--font-size-lg);
    }
    .about-us-content h2{
        font-size: var(--font-size-xxxxl);

    }

    /* How we Serve section*/
    .wp-block-group.is-style-blue-curve-bg{
        padding-top: unset;
        padding-bottom: unset;
    }

    .wp-block-group.is-style-blue-curve-bg::before{
        border-radius: 15% / 10%;
        transform: unset;
        height: 100%;
    }

    .blue-curve-section p{
        font-size: var(--font-size-lg) !important;
    }

    .blue-curve-section h2{
        font-size: var(--font-size-xxxxl) !important;

    }

    /* Why Choose Certified */
    .why-choose-certified p {
        font-size: var(--font-size-lg);
    }
    .why-choose-certified h2{
        font-size: var(--font-size-xxxxl);

    }

    /* Testimonials Sections */
    .testimonials-section,
    .testimonials-section-h2{
        width: unset !important;
        font-size: var(--font-size-xxxxl) !important;

    }
    
    

    /* BOOK NOW button on mobile */
    .header-custom-btn{
        display: none;
    }
    .menu-toggle-icon,
    .menu-toggle-icon:before,
    .menu-toggle-icon:after {
        background-color: var(--cc-black);
    }
}

/* Service Areas List Block - DD 5/28/25*/
.cover-areas-served{
    border-radius: 32px;
    overflow: hidden;
}
.areas-serve-section{
    margin-left: 10vw !important;
}
.areas-serve-section h2{
    text-transform: unset;
    font-size: var(--font-size-xxxl);
}
.areas-serve-section p{
    font-size: var(--font-size-lg);
    font-weight: 400;
    margin-bottom: 2px;
}
.service-areas-list ul {
    list-style: disc inside;
    margin: 0;
    padding: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}
.service-areas-list li {
    font-size: var(--font-size-ml);
    color: var(--cc-white);
}
.service-areas-list a {
    color: var(--cc-white);
    text-decoration: none;
    transition: color 0.2s;
}
.service-areas-list ul li::marker{
    color: var(--cc-white);
}
.service-areas-list a:hover {
    color: var(--cc-bright-red);
    text-decoration: underline;
}
.service-area-btn .wp-element-button{
    background-color: transparent;
    border: 2px solid var(--cc-white) !important;
}
.service-area-btn .wp-element-button:hover{
    border: 2px solid var(--cc-bright-red) !important;
}
@media (max-width: 700px) {
    .areas-serve-section{
        margin-left: 8vw !important;
    }
    .service-areas-list ul {
        columns: 1;
        -webkit-columns: 2;
        -moz-columns: 1;
    }
}

/* Brand Button Block - 2025-06-02 CW */ 
.brand-button-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: var(--cc-shadow);
	border-radius: 1rem;
	text-align: center;
	align-items: center;
	padding: var(--spacing-md);
	--link-text-decoration: none;
	--link-color: var(--cc-gray);
	transform: scale(.98);
}
.brand-button-inner:hover {
		transform: scale(1);
}
.brand-button-inner h3 {
	text-transform: uppercase;
	font-size: var(--font-size-ml);
}



/* ----------------------------------------------------------------
---------------CUSTOMIZE ROMAN JUNE 19 , 2025---------------------
---------------------------------------------------------------- */
/* html {scroll-behavior: smooth;} */
/* ----------- MENU HAMBURGER  ----------- */
button[aria-expanded="true"] span.menu-toggle-icon
{
    background-color: transparent;
}
header.site-header {
    border-bottom: 0;
}



/*  *//* ------------------------------------------
 * WOA View Document Link Wrapper Styles
 * ------------------------------------------ */

.woaview_doc_link {
    position: relative;
}

/* Overlay color effect on image hover */
.woaview_doc_link .woa_overlay_color {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    opacity: 0.3;
    transition: opacity 700ms;
}

/* ------------------------------------------
 * Caption Text + Title Transitions
 * ------------------------------------------ */

.woa_imageframe_caption_title,
.woa_imageframe_caption_text {
    transition: transform 500ms, opacity 200ms;
}

/* Responsive font size for caption text */
p.woa_imageframe_caption_text {
    font-size: clamp(1.2rem, 24px, 1.6rem);
}

/* Initial hidden state of caption text */
.woa_imageframe_caption_text {
    transform: translateY(50px);
    opacity: 0;
}

/* ------------------------------------------
 * Hover State for View Area and Captions
 * ------------------------------------------ */

.woaview_doc_link:hover,
.woa_imageframe_caption:hover {
    .woa_overlay_color {
        opacity: 0.6;
    }

    .woa_overlay_color:before {
        opacity: 1 !important;
        transform: scaleY(1);
    }

    .woa_overlay_color:after {
        opacity: 1 !important;
        transform: scaleX(1);
    }

    .woa_imageframe_caption_title,
    .woa_imageframe_caption_text {
        transform: translateY(-15px);
        opacity: 1;
    }
}

/* ------------------------------------------
 * Decorative Overlay Border Effects
 * ------------------------------------------ */

.woa_overlay_color {
    /* Hidden border state */
    &:before {
        transform: scaleY(0);
    }

    &:after {
        transform: scaleX(0);
    }

    /* Base styles for both borders */
    &:after,
    &:before {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        content: "";
        opacity: 0;
        transition: opacity 0.35s, transform 0.65s;
    }
}

/* Horizontal lines (top & bottom) */
.woa_overlay_color:after {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

/* Vertical lines (left & right) */
.woa_overlay_color:before {
    border-left: 1px solid white;
    border-right: 1px solid white;
}

/* ------------------------------------------
 * Caption Container Styling
 * ------------------------------------------ */

.woa_imageframe_caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 2em;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Text Color Styling */
h3.woa_imageframe_caption_title,
p.woa_imageframe-caption_text {
    color: white;
}

/* Reviews Text Color & Button Color Styling */
a.rpi-name{
    color: var(--cc-primary-color) !important;
    font-family: var(--heading-font-family);
}
.rpi-slider-btn .rpi-review_us{
    background-color: var(--cc-bright-red);
    font-family: var(--heading-font-family);
}
.rpi-body .rpi-text{
    font-family: var(--heading-font-family);
    color: var(--cc-black);
}
.rpi-content .rpi-card-inner{
    background-color: var(--color-header);
}
.rpi-header .rpi-card-inner{
    background-color: var(--slider-head-card-bg);
}

/* Job Listings - 2025-07-16 CW */ 
.woajobs-job-content a:not(.button) {
    --link-text-decoration: none;
    --h3-font-size: var(--font-size-xxl);
}
.woajobs-job-content a h3 {
    margin-bottom: var(--spacing-xs);
}
@media only screen and (max-width: 599px) {
    .woajobs-job .woajobs-job-img {
        --woajob-img-width: 50vw;
        margin: var(--spacing-xl) auto;
    }
    .woajobs-job-img img {
        aspect-ratio: 1/1;
    }
}
@media only screen and (min-width: 600px) {
    .woajobs-job .woajobs-job-content {
        margin-left: var(--spacing-lg);
    }
}