/* 

    Theme Name: Precision Cleaners NJ Custom Theme

*/

:root {
    --primary-white-color: #FEFEFE;
    --primary-blue-color: #192146;
    --secondary-grey-color: #5B5B5B;

    --shadow-color-hard: 0px 4px 4px rgba(0,0,0,25);
    --shadow-color-soft: 0px 4px 4px rgba(0,0,0,0.25);

    --fs-14-18: clamp(14px,calc(14px + 0.0044198895 * (100vw - 375px)),18px);
    --fs-18-24: clamp(18px,calc(18px + 0.0066298343 * (100vw - 375px)),24px);
    --fs-20-26: clamp(20px, 20px + 0.0066298343 * (100vw - 375px), 26px);
    --fs-22-32: clamp(22px,calc(22px + 0.0110497238 * (100vw - 375px)),32px);
    --fs-26-36: clamp(26px,calc(26px + 0.0110497238 * (100vw - 375px)),36px);
    --fs-32-42: clamp(32px,calc(32px + 0.0110497238 * (100vw - 375px)),42px);
    --fs-40-72: clamp(40px,calc(40px + 0.035359116 * (100vw - 375px)),72px);

    --p-0-52: clamp(0px,calc(0px + 0.0574585635 * (100vw - 375px)),52px);
    --p-20-64: clamp(20px, 14.9016px + 2.0695vw, 64px);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

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

a {
    text-decoration: none;
}

h1, h2 {
    font-family: "Cinzel", serif;
    font-weight: 700;
    font-style: normal;

    font-size: var(--fs-40-72);
}

.component-button, .menu-item a, .footer-menu-item a, .pcnj-footer-copyright, .services-card-title, .services-card-description, .process-card-title, .process-card-description, .about-card-title, .about-card-description, .cta-subtitle, .founders-deal-subtitle, .table-header, .table-item, .table-item-founder {
    font-family: "Cinzel", serif;
    font-weight: 400;
    font-style: normal;

    font-size: var(--fs-18-24);
} 

/* header */
.pcnj-header-nav {
    position: absolute;
    width: 100%;  
    
    z-index: 1000;
}

.pcnj-header-nav-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 50px;
}

.pcnj-header-nav-links {
    display: flex;
    flex-direction: row;
    gap: 60px;

    margin: 0 auto;

    list-style: none;
    grid-column: 2;
}

.menu-item a {

    text-decoration: none;
    color: var(--primary-white-color);

    text-shadow: var(--shadow-color-hard);
}

.pcnj-header-nav-right {
    grid-column: 3;
    justify-self: end;
}

.header-cta {
    padding: 12px 48px;

    color: var(--primary-white-color);
    background-color: var(--primary-blue-color);
    border: 1px solid var(--primary-white-color);

    border-radius: 5px;
}

/* hero */

.module-homepage-hero {
    min-height: 100vh;
    
    background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),  url('/wp-content/themes/precision-cleaners-nj-custom/assets/white-kitchen.jpg');
    background-size: cover;
    background-position: 50% 20%;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-title {
    color: var(--primary-white-color);
    text-shadow: var(--shadow-color-soft);
    text-align: center;
}

.arrow-down-container {
    position: absolute;

    bottom: 15px;

    border: 2px solid var(--primary-white-color);
    box-shadow: var(--shadow-color-soft);
    border-radius: 100%;

    height: 48px;
    width: 48px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow-down {
    animation: bounce 2.5s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(2px);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* services */
.module-homepage-services {
    max-width: 1440px;
    margin: 15px auto;
    width: 100%;

    padding: var(--p-20-64);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.services-title {
    color: var(--primary-blue-color);

    padding-bottom: 12px;   
    border-bottom: 1px solid var(--primary-blue-color); 

    font-size: var(--fs-20-26);
}

.services-container {
    display: grid;
    grid-template-columns: 6fr 4fr;
    column-gap: 64px;
}

.services-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 12px;
    box-shadow: var(--shadow-color-soft);
}

.services-cards-container {
    grid-column: 2;
    list-style: none;

    display: flex;
    flex-direction: column;
    gap: 16px;
}

.services-cards-container li {
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(85,85,85,0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.services-cards-container li:last-child {
    border-bottom: 0px;
}

.services-card-title {
    color: var(--primary-blue-color);
    font-weight: 700;
    font-size: var(--fs-22-32);
}

.services-card-title::first-letter {
    font-size: var(--fs-26-36);
}

.services-card-description {
    color: var(--primary-blue-color);
}

/* process */
.module-homepage-process {
    max-width: 1440px;
    margin: 30px auto;
    width: 100%;

    padding: var(--p-20-64);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.process-title {
    font-size: var(--fs-22-32);
    color: var(--primary-blue-color);
    text-align: center;

    padding-bottom: 12px;   
}

.process-cards-container {
    list-style: none;

    display: grid;
    grid-template-columns: repeat(4, auto);

    border-radius: 12px;

    padding: clamp(12px, 8.1197px + 1.0347vw, 24px);
    gap: clamp(20px, 18.337px + 0.4435vw, 24px);;
}

.process-card {
    display: flex;
    flex-direction: column;

    align-items: center;
    padding: 0px var(--p-0-52);  
}

.process-card-icon svg {
    width: 48px;
    height: 48px;

    fill: var(--primary-blue-color);
    margin-bottom: 28px;
}

.process-card-title {
    color: var(--primary-blue-color);
    font-weight: 700;
    font-size: var(--fs-22-32);
    padding-bottom: 12px;
}

.process-divider {
    min-height: 1px;
    width: 10%;
    background-color: var(--primary-blue-color);
    margin-bottom: 16px;
}

.process-card-description {
    text-align: center;
    font-size: 18px;
}

.process-hint {
    display: none;
}

/* about */

.module-homepage-about {
    max-width: 1440px;
    margin: 15px auto;
    width: 100%;

    padding: var(--p-20-64);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.about-title {
    font-size: var(--fs-20-26);
    color: var(--primary-blue-color);

    padding-bottom: 12px;   
    border-bottom: 1px solid var(--primary-blue-color); 
}

.about-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 64px;
}

.about-cards-container {
    list-style: none;
}

.about-cards-container li {
    padding-bottom: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(85,85,85,0.25);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-cards-container li:last-child {
    border-bottom: 0px;
}

.about-card-title {
    color: var(--primary-blue-color);
    font-weight: 700;
    font-size: var(--fs-18-24);
}

.about-card-title:first-letter {
    font-size: var(--fs-20-26);
}

.about-card-description {
    color: var(--primary-blue-color);
    font-size: var(--fs-14-18);
}

.about-cta {
    margin-top: 32px;
    padding: 12px 48px;
    max-width: 70%;
    font-size: 18px;
    text-align: center;

    color: var(--primary-white-color);
    background-color: var(--primary-blue-color);
    border: 1px solid var(--primary-white-color);

    border-radius: 5px;
}

.about-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 12px;
    box-shadow: var(--shadow-color-soft);
}

/* founders-deal */
.module-homepage-founders-deal {
    max-width: 1440px;
    margin: 15px auto;
    width: 100%;

    padding: var(--p-0-52);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.founders-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.founders-deal-title {
    font-size: var(--fs-32-42);
    color: var(--primary-blue-color);
}

.founders-deal-subtitle {
    font-size: var(--fs-18-24);
    color: var(--primary-blue-color);
}

.deal-highlight {
    font-weight: 700;
    color: var(--primary-blue-color);
}

.table-header {
    font-weight: 700;
}

.deal-table {
    width: 100%;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
}

th, td {
    padding: 24px 32px;
    border: none;
}

th:nth-child(3),
td:nth-child(3) {
    font-weight: 700;
    border-left: 1px solid black;
    border-right: 1px solid black;

    color: var(--primary-white-color);
    background-color: var(--primary-blue-color);

    max-width: 180px;
}

th:nth-child(3) {
    border-top: 1px solid black;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

tr:last-child td:nth-child(3) {
    border-bottom: 1px solid black;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* cta */
.module-homepage-cta {
    max-width: 1440px;
    margin: 15px auto;
    width: 100%;

    padding: var(--p-20-64);
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.cta-header {
    display: flex;
    flex-direction: column;

    align-items: center;
}

.cta-title {
    font-size: var(--fs-22-32);
    color: var(--primary-blue-color);
    text-align: center;
}

.cta-subtitle {
    text-align: center;
}

.cta-form {
    display: flex;
    flex-direction: row;

    justify-content: center;
}

.cta-form input {
    padding: 12px 32px;
    border-radius: 0px;
    border-top: 1px solid var(--primary-blue-color);
    border-bottom: 1px solid var(--primary-blue-color);

    border-left: none;
    border-right: none;
}

#first-input {
    border-left: 1px solid var(--primary-blue-color);
}

#last-input {
    border-right: 1px solid var(--primary-blue-color);
}

.cta-form input::placeholder {
    font-family: "Cinzel", serif;
    font-size: 16px;
}

.vertical-divider {
    height: 20px;
    width: 1px;
    background-color: var(--secondary-grey-color);
    align-self: center;
}

.cta-form button {
    margin-left: 32px;
    padding: 12px 32px;

    color: var(--primary-white-color);
    background-color: var(--primary-blue-color);
    border: 1px solid var(--primary-white-color);

    border-radius: 5px;
}

.form-success {
    font-family: "Cinzel", serif;
    font-size: 24px;
    font-weight: 24px;

    color: var(--primary-blue-color);
    text-align: center;
    margin: 20px 0;
}

/* footer */

.pcnj-footer {
    background: var(--primary-white-color);
    width: 100%;
    padding: 12px 24px;
    margin-top: 50px;
}

.pcnj-footer-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;

    margin: 0 50px;
    padding: 0px 24px;
    
    align-items: center;
}

.pcnj-footer-left {
    grid-column: 1;
    justify-self: center;
}

.pcnj-logo {
    height: 140px;
}


.pcnj-footer-center {
    display: flex;
    flex-direction: column;

    align-items: center;
    gap: 14px;
}

.pcnj-footer-nav-links {
    display: flex;
    flex-direction: row;
    gap: 60px;

    margin: 0 auto;

    list-style: none;
    grid-column: 2;
}

.footer-menu-item a {
    text-decoration: none;
    color: var(--primary-blue-color);
    
    font-size: 18px;
    font-weight: 700;
}

.pcnj-footer-copyright {
    color: var(--secondary-grey-color);
    font-size: 14px;
}

.pcnj-footer-copyright span {
    color: var(--primary-blue-color);
    font-size: 16px;
    font-weight: 700;
}

.pcnj-footer-right {
    grid-column: 3;
    justify-self: center;
}

.pcnj-footer-soc-links {
    list-style: none;

    display: flex;
    flex-diection: row;
    gap: 32px;
}

.soc-med-link svg {
    width: 24px;
    height: 24px;

    fill: var(--primary-blue-color);
}

/* MOBILE */

@media (max-width: 768px) {
    /* header */
    .pcnj-header-nav {
        display: none;
    }

    /* services */
    .services-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    /* process */
    .module-homepage-process {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .process-cards-container {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        gap:0;
        padding:0;
    }

    .process-card {
        flex: 0 0 100%;
        scroll-snap-align: center;

        padding: 24px;
    }

    .process-cards-container::-webkit-scrollbar {
        display: none;
    }

    .process-hint {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }

    .process-hint span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--secondary-grey-color);
        opacity: 0.5;
    }

    /* about */
    .about-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 24px;
    }

    .about-cta {
        align-self: center;
    }

    /* deal */
    .module-homepage-founders-deal {
        gap: 24px;
        max-height: 450px;
    }

    table {
        align-self: center;
        transform: scale(0.5);
        transform-origin: top;

        max-height: 250px;
    }

    /* cta */
    .cta-form {
        display: flex;
        flex-direction: column;
        gap: 14px;

        padding: 0 28px;
    }

    .cta-form input {
        border: 1px solid var(--secondary-grey-color);
    }

    .cta-form button {
        margin-left: 0;
    }

    /* footer */
    .pcnj-footer-container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 1fr auto 1fr;

        row-gap: 12px;

        padding: 0;
    }

    .pcnj-logo {
        max-height: 100%;
    }

    .pcnj-footer-center {
        margin-top: 8px;
        grid-column: 1;
        grid-row: 3;
        text-align: center;
    }

    .pcnj-footer-right {
        grid-column: 1;
        grid-row: 2;
    }

    .pcnj-footer-nav-links {
        flex-direction: column;
        gap: 0px;

        
    }

    .pcnj-footer-copyright {
        font-size: 10px;
    }

    .pcnj-footer-copyright span {
        font-size: 12px;
    }

}