/*
 * Main stylesheet.
 * Component and section styling will be added only after approval.
 */

@import url("03-components/header.css");
@import url("04-sections/hero.css");
@import url("04-sections/services.css");
@import url("04-sections/services-list.css");
@import url("04-sections/installations.css");
@import url("04-sections/projects.css");
@import url("04-sections/reviews.css");
@import url("04-sections/faq.css");
@import url("04-sections/contact.css");
@import url("04-sections/footer.css");
@import url("04-sections/services-page.css");
@import url("04-sections/about-page.css");
@import url("04-sections/projects-archive.css");

.et-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 9999;
}

.et-skip-link:focus {
	left: 1rem;
	top: 1rem;
}


/* ==========================================================================
   FONTS
   ========================================================================== */

@font-face {
    font-family: 'Gros Ventre';
    src: url('../fonts/Gros-Ventre-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Coming Soon';
    src: url('../fonts/Coming-Soon.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Medium.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/Comfortaa-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('../fonts/Gros-Ventre-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('../fonts/Gros-Ventre-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('../fonts/Gros-Ventre-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gros Ventre';
    src: url('../fonts/Gros-Ventre-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {

    /* Colors */
    --tn-yellow: #F4CA34;
    --tn-donkergrijs: #1E1E1E;
    --tn-purple: var(--tn-donkergrijs);
    --tn-blue: #60C0BE;
    --tn-grey: #626568;
    --tn-white: #FFFFFF;
    --color-page-bg: #E2D9D9;
    --color-body: #1E1E1E;

    /* Fonts */
    --font-heading: 'Gros Ventre', Arial, sans-serif;
    --font-body: 'Comfortaa', sans-serif;

    /* Typography */
    --font-size-h1-desktop: clamp(38px, 4vw, 58px);
    --font-size-h1-tablet: clamp(32px, 7vw, 58px);
    --font-size-h1-mobile: clamp(24px, 7vw, 34px);
    --font-size-h2-desktop: 36px;
    --font-size-h2-tablet: clamp(30px, 8vw, 36px);
    --font-size-h2-mobile: clamp(20px, 7vw, 24px);
    --font-size-h3-desktop: 18px;
    --font-size-h3-tablet: 16px;
    --font-size-h3-mobile: 16px;
    --font-size-body-desktop: 16px;
    --font-size-body-tablet: 16px;
    --font-size-body-mobile: 14px;
    --font-size-small: 14px;
    --font-size-button: 14px;
    --font-size-h1: var(--font-size-h1-desktop);
    --font-size-h2: var(--font-size-h2-desktop);
    --font-size-h3: var(--font-size-h3-desktop);
    --font-size-body: var(--font-size-body-desktop);
    --line-height-h1: 1.08;
    --line-height-h2: 39px;
    --line-height-h3: 1.12;
    --line-height-body: 18px;
    --line-height-small: 16px;
    --line-height-button: 15px;
    --fs-hero: var(--font-size-h1);
    --fs-h1: var(--font-size-h1);
    --fs-h2: var(--font-size-h2);
    --fs-h3: var(--font-size-h3);
    --fs-body: var(--font-size-body);
    --fs-button: var(--font-size-button);

    /* Layout */
    --container-width: 1440px;
    --container-padding: 100px;
    --section-width: min(calc(100% - 48px), 1440px);
    --section-padding-x: clamp(24px, 6.95vw, 100px);

    /* Radius */
    --radius-pill: 999px;

    /* Transitions */
    --transition: 0.3s ease;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}

@media (max-width: 1024px) {
    html,
    body {
        width: 100%;
        overflow-x: clip;
    }
}

@media (max-width: 980px) {
    :root {
        --font-size-h1: var(--font-size-h1-tablet);
        --font-size-h2: var(--font-size-h2-tablet);
        --font-size-h3: var(--font-size-h3-tablet);
        --font-size-body: var(--font-size-body-tablet);
        --line-height-h2: 1.08;
    }
}

@media (max-width: 620px) {
    :root {
        --font-size-h1: var(--font-size-h1-mobile);
        --font-size-h2: var(--font-size-h2-mobile);
        --font-size-h3: var(--font-size-h3-mobile);
        --font-size-body: var(--font-size-body-mobile);
        --line-height-body: 1.28;
        --section-width: min(calc(100% - 32px), 1440px);
        --section-padding-x: 16px;
    }
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--tn-grey);
    background: var(--color-page-bg);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}


/* ==========================================================================
   CONTAINER
   ========================================================================== */

.container {
    width: var(--section-width);
    margin-inline: auto;
    padding-inline: var(--section-padding-x);
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

.hero-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-hero);
    line-height: 1;
    text-transform: uppercase;
}

.tn-h1 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h1);
    line-height: 1;
    text-transform: uppercase;
}

.tn-h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    line-height: 1;
    text-transform: uppercase;
}

.tn-h3 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h3);
    line-height: 1;
    text-transform: uppercase;
}

.paragraph {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--line-height-body);
    font-weight: 400;
}

.button-text {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-button);
    line-height: 1;
    font-weight: 600;
    text-transform: lowercase;
    color: var(--color-body);
}


/* ==========================================================================
   COLOR UTILITIES
   ========================================================================== */

.yellow {
    color: var(--tn-yellow);
}

.purple {
    color: var(--tn-purple);
}

.white {
    color: var(--tn-white);
}

.grey {
    color: var(--tn-grey);
}

.blue {
    color: var(--tn-blue);
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.et-button,
.button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 6px 10px 6px 12px;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-size: var(--font-size-button);
    font-weight: 400;
    line-height: 1;
    text-transform: lowercase;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease;
}

.et-button:hover,
.et-button:focus-visible,
.button:hover,
.button:focus-visible {
    outline: 0;
}

.et-button--yellow,
.button-yellow {
    background: var(--tn-yellow);
    color: var(--tn-purple);
}

.et-button--yellow:hover,
.et-button--yellow:focus-visible,
.button-yellow:hover,
.button-yellow:focus-visible {
    background: var(--tn-white);
    color: var(--tn-purple);
    transform: translateY(-1px);
}

.et-button--white,
.button-white {
    background: var(--tn-white);
    color: var(--tn-purple);
}

.et-button--white:hover,
.et-button--white:focus-visible,
.button-white:hover,
.button-white:focus-visible {
    background: var(--tn-yellow);
    color: var(--tn-purple);
    transform: translateY(-1px);
}

.et-button--purple,
.button-purple {
    background: var(--tn-purple);
    color: var(--tn-white);
}

.et-button--purple:hover,
.et-button--purple:focus-visible,
.button-purple:hover,
.button-purple:focus-visible {
    background: var(--tn-yellow);
    color: var(--tn-purple);
    transform: translateY(-1px);
}

.et-button__icon,
.button-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: var(--tn-blue);
    border-radius: 999px;
}

.button-icon {
    width: 14px;
    height: 14px;
}


/* ==========================================================================
   FLEX UTILITIES
   ========================================================================== */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 620px) {
    .et-services-intro,
    .et-projects,
    .et-projects-archive,
    .et-services-list,
    .et-about-intro,
    .et-about-usps,
    .et-contact,
    .et-faq {
        padding-top: 80px;
        padding-bottom: 40px;
    }

    .et-installations {
        padding-top: 44px;
        padding-bottom: 40px;
    }

    .et-services {
        padding-top: 8px;
        padding-bottom: 72px;
    }

    .et-reviews {
        padding-bottom: 20px;
    }

    .et-reviews__top {
        gap: 0px;
        padding-top: 28px;
        padding-bottom: 32px;
    }

    .et-reviews__intro {
        align-items: flex-start;
        gap: 10px;
        padding-top: 0;
    }

    .et-single-intro--service,
    .et-single-intro--project {
        padding-top: 32px;
        padding-bottom: 44px;
    }

    .single-et_service .et-single-service-detail,
    .single-et_project .et-contact {
        padding-top: 40px;
        padding-bottom: 44px;
    }

    .single-et_project .et-single-project-gallery {
        padding-bottom: 32px;
    }

    .et-footer {
        padding-top: 36px;
        padding-bottom: 0;
    }

    .et-services__inner,
    .et-projects__header,
    .et-contact__inner,
    .et-installations__inner,
    .et-services-intro__inner,
    .et-about-intro__inner,
    .et-about-usps__inner,
    .et-faq__inner,
    .et-single-intro__inner,
    .single-et_service .et-single-service-detail__inner,
    .et-projects-archive__header {
        gap: 22px;
    }

    .et-services__grid,
    .et-projects__grid,
    .et-services-list__grid,
    .et-projects-archive__grid,
    .et-reviews__cards {
        gap: 14px;
    }

    .et-hero__content {
        gap: 18px;
    }

    .et-hero__text-wrapper,
    .et-projects__intro,
    .et-contact__details,
    .et-installations__content,
    .et-services-intro__content,
    .et-about-intro__content,
    .et-faq__copy {
        gap: 10px;
    }

    .et-single-intro__title,
    .et-contact__title,
    .et-services-intro__title,
    .et-about-intro__title,
    .et-projects-archive__title,
    .et-services__title,
    .et-projects__title,
    .et-installations__title,
    .et-reviews__title,
    .et-about-usps__title,
    .et-faq__title {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
        font-size: 24px;
        line-height: 1.08;
    }

    .et-projects__intro p,
    .et-contact__details p,
    .et-installations__text p,
    .et-services-intro__text p,
    .et-about-intro__text p,
    .et-reviews__intro p,
    .et-faq__copy p {
        margin-top: 0;
    }

    .et-faq__copy p {
        margin-top: 10px;
        font-size: 12px;
        line-height: 1.35;
    }

    .et-faq__contact h3,
    .et-faq__question {
        font-size: 14px;
        line-height: 1.15;
    }

    .et-faq__summary {
        min-height: 50px;
        grid-template-columns: 36px 1fr;
        gap: 10px;
        padding: 8px 16px 8px 12px;
    }

    .et-faq__plug {
        width: 34px;
        height: 34px;
    }

    .et-faq__plug img {
        width: 22px;
        height: 22px;
    }

    .et-faq__answer {
        padding: 4px 18px 18px 58px;
        font-size: 12px;
        line-height: 1.35;
    }

    .et-faq__item.is-open .et-faq__plug {
        top: 16px;
        bottom: 14px;
        left: 14px;
        width: 34px;
        padding-top: 7px;
    }

    .et-faq__item.is-open .et-faq__plug::after {
        top: 26px;
        bottom: 12px;
    }

    .et-faq__item.is-open .et-faq__plug img {
        width: 22px;
        height: 22px;
    }

    .et-single-intro__text p,
    .single-et_service .et-single-service-detail__content p,
    .single-et_service .et-single-service-detail__content ul,
    .single-et_service .et-single-service-detail__content ol,
    .et-services-intro__text p,
    .et-about-intro__text p,
    .et-installations__text p {
        margin-bottom: 16px;
    }

    .et-services__card-content,
    .et-projects__card-content,
    .et-services-list__card-content {
        gap: 12px;
    }

    .et-single-intro__title br,
    .et-contact__title br,
    .et-services-intro__title br,
    .et-about-intro__title br,
    .et-projects-archive__title br,
    .et-services__title br,
    .et-projects__title br,
    .et-installations__title br,
    .et-reviews__title br,
    .et-about-usps__title br,
    .et-faq__title br {
        display: none;
    }
}