* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

/* Sheila - Prompt 2 */

:root {

    /*FARVER*/

    --primary-color: #E30613;
    --text-color: #1D1D1B;
    --sektion-color-grey: #DADADA;
    --sektion-color-blue: #E8F1F8;
    --background-color: #FFFFFF;
    --hover-color-primary: #E9656C;
    --hover-color-secondary: #FFF0F1;

    /*TYPOGRAFI*/

    /* Font family */
    --font-primary: 'Open Sans', sans-serif;

    /* Font sizes */
    --font-size-h1: 1.625rem;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-body: 1rem;
    --font-size-caption: 1rem;
    --font-size-cta: 1rem;

    /* Font weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-h1: 1.2;
    --line-height-h2: 1.3;
    --line-height-h3: 1.5;
    --line-height-body: 1.5;
    --line-height-caption: 1.4;

    /*SPACING*/
    --spacing-xs: 0.4rem;
    --spacing-s: 0.5rem;
    --spacing-m: 1rem;
    --spacing-l: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 2.5rem;
    --spacing-3xl: 3rem;

    /*BORDER RADUIS*/
    --radius-s: 8px;
    --radius-l: 16px;

    /* GRID */
    --grid-columns-desktop: 12;
    --grid-columns-tablet: 8;
    --grid-columns-mobile: 4;
    --grid-gap: 24px;
    --container-max-width: 1200px;
    --container-padding: 24px;

    /* breakpoints */
    --breakpoint-mobile: 768px;
    --breakpoint-tablet: 1024px;
}


/* STYLING AF ELEMENTER */

/* BODY */

body {
    font-family: var(--font-primary);
    margin: 0;
    background-color: var(--background-color);
}

/* typografi*/
h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h1);
    color: var(--text-color);
    text-align: center;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
    color: var(--text-color);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
    color: var(--text-color);
}

p {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--text-color);
}

/* ICONS */
/* Sparret med AI – prompt 7 */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
}

/* Sheila - Prompt 9 */
/*icon for FAQ*/
.icon--chevron-down::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    transform: rotate(45deg);
}

.faq__item--open .icon {
    transform: rotate(180deg);
}

/* Sarah - Inspiration fra Sheila (prompt 9) linje 126 - 136 */
/* Sarah - Prompt 32 */
/* icon for carousel */
/* Arrow right */
.icon--arrow-right::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    transform: rotate(45deg);
}

/* Arrow left */
.icon--arrow-left::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    transform: rotate(-45deg);
}

/* HEADER
   position: sticky Kilde: https://www.w3schools.com/css/css_positioning.asp
   display: flex Kilde: https://www.w3schools.com/css/css3_flexbox.asp
   z-index Kilde: https://www.w3schools.com/css/css_z-index.asp
   box-shadow Kilde: https://www.w3schools.com/css/css3_shadows_box.asp */
/* Sparret med AI – prompt 12 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

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

    width: 100%;
    background-color: var(--background-color);
    padding: var(--spacing-m) var(--container-padding);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.site-header__logo-link {
    display: inline-block;
}

.logo {
    width: 184px;
    height: auto;
}

/* SCROLL-BEHAVIOR Kilde: https://www.w3schools.com/cssref/pr_scroll-behavior.php */
html {
    scroll-behavior: smooth;
}


/* BURGER-IKON — animeret til X med JavaScript Kilde: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js
   BUTTON — fjerner browserens standardstyling Kilde: https://www.w3schools.com/css/css_border.asp */
.burger {
    position: relative;
    z-index: 1002;
    display: inline-block;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.icon--menu {
    display: block;
    width: 35px;
    height: 28px;
    background-image: none;
}

/* TRANSITION på burger-streger Kilde: https://www.w3schools.com/css/css3_transitions.asp */
.burger__bar {
    display: block;
    width: 35px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 6px 0;
    transition: 0.4s ease;
}

/* TRANSFORM — roterer stregerne til et X Kilde: https://www.w3schools.com/css/css3_2dtransforms.asp */
.burger--active .burger__bar--top {
    transform: translate(0, 10px) rotate(-45deg);
}

.burger--active .burger__bar--middle {
    opacity: 0;
}

.burger--active .burger__bar--bottom {
    transform: translate(0, -10px) rotate(45deg);
}

/* MOBILMENU (overlay)
   position: fixed — låst til viewport Kilde: https://www.w3schools.com/css/css_positioning.asp
   height: 100vh — fuld viewport-højde Kilde: https://www.w3schools.com/css/css_units.asp */
.site-menu {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 1001;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.96);
    transition: right 0.5s ease;
}

.site-menu--open {
    right: 0;
}

/* flex-direction: column — menupunkter stablet lodret Kilde: https://www.w3schools.com/css/css3_flexbox_container.asp */
.site-menu__content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-l);
}

/* text-decoration: none — fjerner understregning på links Kilde: https://www.w3schools.com/css/css_text_decoration.asp */
.site-menu__link {
    color: var(--primary-color);
    font-size: 2rem;
    font-weight: var(--font-weight-regular);
    text-decoration: none;
    transition: color 0.3s ease;
}

/* :hover og :focus Kilde: https://www.w3schools.com/css/css_pseudo_classes.asp */
.site-menu__link:hover,
.site-menu__link:focus {
    color: var(--hover-color-primary);
}

/* overflow: hidden — forhindrer scroll mens menu er åben Kilde: https://www.w3schools.com/css/css_overflow.asp */
body.menu-is-open {
    overflow: hidden;
}

/*GRID*/
.container {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
    width: 100%;
    max-width: var(--container-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
    column-gap: var(--grid-gap);
}

section {
    margin-bottom: var(--spacing-3xl);
}

/*Process SECTION*/
.process {
    background-color: var(--sektion-color-blue);
    border-radius: var(--radius-l);
    padding-block: var(--spacing-xl);
    margin: var(--spacing-l);
}

/*service card*/
.service-card {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    column-gap: var(--spacing-l);
    align-items: start;
    grid-column: 1 / -1;
}

/*service card content*/
.service-card__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}

/*Sheila - promt 11*/
/*service card img*/
.service-card__content img {
    width: 100%;
    max-width: 18rem;
    height: auto;
}

/*Sheila - Inspiration af time-line "https://www.youtube.com/watch?v=AIDiMA_C3sg"*/
/*TIMELINE*/
.timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

/*timeline circle*/
.timeline__circle {
    width: 2rem;
    height: 2rem;
    border: 0.15rem solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--background-color);
    flex-shrink: 0;
}

/*timeline line*/
.timeline-line {
    width: 0.25rem;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom,
            var(--primary-color) 0 1rem,
            transparent 1rem 1.5rem);
}

.process h1 {
    grid-column: 1 / -1;
}


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

/*KNAPPER*/

/* button*/
.btn {
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-l);
    padding: var(--spacing-m) var(--spacing-xl);
    transition: 0.3s ease;
    width: fit-content;
    white-space: nowrap;
    grid-column: 1 / -1;
    justify-self: center;
    margin-block: var(--spacing-m);
}

/*primary button*/
.btn--primary {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
}

/*primary button hover*/
.btn--primary:hover {
    background-color: var(--hover-color-primary);
}


/*secondary button outline*/
.btn--secondary {
    background-color: var(--background-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);

}

/*secondary button outline hover*/
.btn--secondary:hover {
    background-color: var(--hover-color-secondary);
}

/*FAQ*/


.faq__item {
    background-color: var(--sektion-color-grey);
    border-radius: var(--radius-l);
    margin-bottom: var(--spacing-s);
    overflow: hidden;
}

.faq__question {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    width: 100%;
    padding: 2rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    gap: 1rem;
}

.faq__title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body);
    color: var(--text-color);
}


.faq .container {
    display: flex;
    flex-direction: column;
}

.faq__item--open .faq__answer {
    display: block;
}

.faq__answer {
    display: none;
    padding: 0 2rem 2rem 2rem;
}

.faq__question .icon {
    flex-shrink: 0;
}

/* OM TEAMET */
.om-teamet {
    background-color: var(--background-color);
}

/* Sarah - Kilde: https://www.w3schools.com/css/css_grid.asp */
/* Sarah - prompt 8, 10 og 11 */
.om-teamet .container {
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
    align-items: start;
    gap: var(--spacing-l);
}

.om-teamet__image-wrapper {
    grid-column: 1 / -1;
}

/* OM TEAMET IMAGE */
.om-teamet__image {
    width: 100%;
    height: auto;
}

/* Sarah - Kilde: https://www.w3schools.com/css/css3_flexbox.asp */
/* Sarah - Prompt 11 */
/* OM TEAMET CONTENT */
.om-teamet__content {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
}



.pricing .container {
    display: block;
}

/* Prise- pakker - header title */
/* Ai prompt 2 - Rikke */
.pricing-title {
    grid-column: 1 / -1;
    margin-bottom: var(--spacing-xl);
    text-align: center;

}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns-mobile), 1fr);
    gap: var(--grid-gap);
}

.price-card {
    grid-column: 1 / -1;
    background: var(--sektion-color-blue);
    padding: var(--spacing-xl);
    border-radius: var(--radius-l);
}

/*Ai prompt - rikke 3*/
.price-card h3 {
    margin-bottom: var(--spacing-m);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-l);
}

.price-card p {
    margin-bottom: var(--spacing-m);
}

.price-card .price {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-l);
}

.pricing-button {
    text-align: center;
    margin-bottom: var(--spacing-m);
}

/* inspiration fra https://www.youtube.com/watch?v=WD3mzN4X-rk */
.popup {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgb(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    display: none;
    justify-content: center;
    align-items: center;
}

.popup--visible {
    display: flex;
}

.popup__content {
    background: var(--sektion-color-blue);
    padding: var(--spacing-xl);
    width: min(90%, 420px);
    border-radius: var(--radius-s);
    box-shadow: 0 10px 30px rgb(0, 0, 0, 0.25);
    font-family: var(--font-primary);
    text-align: center;
    position: absolute;
}

.popup__close {
    position: absolute;
    top: var(--spacing-s);
    right: var(--spacing-s);
    background: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    border: none;
    outline: none;
}

label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    text-align: left;

}

input,
textarea {
    width: 100%;
    padding: var(--spacing-m);
    margin-bottom: var(--spacing-l);
    border: 1px solid var(--sektion-color-grey);
    border-radius: var(--radius-s);
    font-size: var(--font-size-body);
    font-family: var(--font-primary);
    color: var(--text-color);
}

input::placeholder,
textarea::placeholder {
    color: #999;
}

button[type=submit] {
    width: 100%;
    padding: var(--spacing-m);
    background: var(--primary-color);
    border: none;
    color: var(--background-color);
    border-radius: var(--radius-s);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

button[type="submit"]:hover {
    background: var(--hover-color-primary);
}



/* CAROUSEL MED ANMELDELSER */
/* Sarah - Prompt 20 */

/* Sarah - Kilde: https://www.w3schools.com/css/css_grid.asp */
.carousel__heading {
    grid-column: 1 / -1;
    margin-bottom: var(--spacing-l);
}

/* Sarah - Kilde: https://www.w3schools.com/css/css_grid.asp */
/* Sarah - Kilde: https://www.w3schools.com/css/css3_flexbox.asp */
/* Sarah - Kilde: https://www.w3schools.com/css/css_overflow.asp */
/* Sarah - Prompt 18 */
.carousel__wrapper {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    background-color: var(--sektion-color-grey);
    border-radius: var(--radius-l);
    overflow: hidden;
    padding: var(--spacing-2xl);
    min-height: 24rem;
}

/* Sarah - Kilde: https://www.w3schools.com/css/css3_flexbox.asp */
.carousel__viewport {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
}

.carousel__content {
    width: 100%;
    text-align: center;
}

.carousel__subtitle {
    font-weight: var(--font-weight-semibold);
    color: var(--primary-color);
}

.carousel__title {
    margin-bottom: var(--spacing-s);
}

.carousel__text {
    margin-bottom: var(--spacing-l);
}

.carousel__name {
    font-weight: var(--font-weight-regular);
    margin-bottom: var(--spacing-l);
}

/* Sarah - Kilde: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/cursor */
.carousel__btn {
    color: var(--primary-color);
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
}

/* Sarah - Kilde: https://www.w3schools.com/css/css_grid.asp */
/* Sarah - Kilde: https://www.w3schools.com/css/css3_flexbox.asp */
.carousel__dots {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    gap: var(--spacing-s);
    margin-top: var(--spacing-m);
}

.carousel__dot {
    padding: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--background-color);
    border: 2px solid var(--primary-color);
}

.carousel__dot--active {
    background-color: var(--primary-color);
}

/* FOOTER */
.footer {
    background-color: var(--background-color);
    width: 100%;
    margin-top: var(--spacing-3xl);
}

/* TRE-KOLONNE LAYOUT — kolonner i footeren
   Kilde: https://www.w3schools.com/css/css_grid.asp
   Kilde: https://www.w3schools.com/howto/howto_css_three_columns.asp */
/* Sparret med AI – prompt 5 */
.footer__columns {
    display: grid;
    grid-template-columns: 1fr;
}

/* GENEREL KOLONNE */
.footer__column {
    padding: var(--spacing-3xl) var(--container-padding);
}


/* KOLONNE 1 */
.footer__column--logo {
    background-color: var(--sektion-color-blue);
}

.footer__logo {
    width: 240px;
    height: auto;
    margin-bottom: var(--spacing-l);
}

/* LINKS */
/* flex-direction: column — links stablet lodret Kilde: https://www.w3schools.com/css/css3_flexbox_container.asp */
.footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-l);
    margin-bottom: var(--spacing-l);
}

/* text-transform: uppercase — store bogstaver via CSS Kilde: https://www.w3schools.com/cssref/pr_text_text-transform.php */
.footer__link-text {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

.footer__socials {
    display: flex;
    gap: var(--spacing-m);
}

.footer__social-icon {
    width: 37px;
    height: 37px;
}

/* background-image — SVG-ikoner via CSS Kilde: https://www.w3schools.com/css/css_background_image.asp */
.icon--facebook {
    background-image: url("../Image/icons/facebook.svg");
}

.icon--instagram {
    background-image: url("../Image/icons/instagram.svg");
}

/* KOLONNE 2 */
.footer__column--hours h3,
.footer__column--contact h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
    margin-bottom: var(--spacing-xl);
}


/* border-collapse: collapse — fjerner mellemrum mellem celler Kilde: https://www.w3schools.com/css/css_table.asp */
.footer__hours {
    width: 100%;
    border-collapse: collapse;
}

.footer__hours td {
    padding: var(--spacing-s) 0;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-transform: uppercase;
}

.footer__hours td:first-child {
    text-align: left;
    padding-right: var(--spacing-l);
}

/* white-space: nowrap — forhindrer linjebrud Kilde: https://www.w3schools.com/cssref/pr_text_white-space.php */
.footer__time {
    text-align: right;
    white-space: nowrap;
}

/* KOLONNE 3 */
.footer__company-name {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-l);
    margin-top: -2rem;
    letter-spacing: 1px;
}

/* list-style: none — fjerner punkter fra ul Kilde: https://www.w3schools.com/css/css_list.asp */
.footer__contact-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-l);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
}

.footer__contact-list li {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-align: left;
}

.footer__highlight {
    color: var(--primary-color);
}

.footer__certifications img {
    height: 60px;
}

/* Sarah - Prompt 7 */
/*TABLET*/
@media (min-width: 768px) {

    .container {
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
    }


    h1 {
        font-size: 2rem;
        justify-self: center;
        text-align: center;
    }


    .process h1 {
        max-width: 45rem;
        margin-inline: auto;
        margin-bottom: 4rem;
    }

    /*Sheila - promt 11*/
    .service-card__content img {
        max-width: 20rem;
    }

    /* Sarah - Prompt 8 og 10 */
    .om-teamet .container {
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
        align-items: center;
    }

    .om-teamet__image-wrapper {
        grid-column: 1 / 5;
    }

    .om-teamet__content {
        grid-column: 5 / 9;
    }

    /* Footer  Kilde: https://www.w3schools.com/howto/howto_css_three_columns.asp */
    .footer__columns {
        grid-template-columns: 1fr 1fr;
    }

    /* grid-column: 1 / -1 — fylder hele bredden Kilde: https://www.w3schools.com/css/css_grid_item.asp */
    .footer__column--logo {
        grid-column: 1 / -1;
    }

    .pricing-grid {
        grid-template-columns: repeat(var(--grid-columns-tablet), 1fr);
    }

    .price-card {
        grid-column: span 4;
    }

    .popup__content {
        width: min(80%, 600px);
        padding: var(--spacing-2xl);
    }
}


/*DESKTOP*/
@media (min-width: 1024px) {

    .container {
        grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
        max-width: var(--container-max-width);
    }

    h1 {
        font-size: 2rem;
        justify-self: center;
        text-align: center;
    }

    section {
        margin-bottom: var(--spacing-3xl);
    }

    .container h1 {
        max-width: 45rem;
        margin-inline: auto;
        margin-bottom: 4rem;
    }


    /* Sarah - Prompt 8 og 10 */
    .om-teamet .container {
        grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
    }

    .om-teamet__image-wrapper {
        grid-column: 1 / 7;
    }

    .om-teamet__content {
        grid-column: 7 / 13;
    }

    /**/

    .service-card {
        display: grid;
        grid-template-columns: 1fr 5rem 1fr;
        align-items: center;
        column-gap: 2rem;
    }

    .timeline {
        grid-column: 2;
        justify-items: center;
    }

    .timeline-line {
        width: 0.25rem;
        height: 26rem;

        margin-bottom: -18rem;

        background-image: repeating-linear-gradient(to bottom,
                var(--primary-color) 0 1rem,
                transparent 1rem 1.5rem);
    }

    .service-card__content {
        display: contents;
    }

    /*Sheila - promt 11*/
    .service-card__content img {
        grid-column: 1;

        justify-self: end;
        max-width: 22rem;
        max-height: 18rem;
        margin-bottom: 0;
        justify-self: center;
    }

    .service-card__text {
        grid-column: 3;

        max-width: 28rem;
        text-align: center;
        justify-self: center;
    }

    /* /* grid-column: 1 / -1 Kilde: https://www.w3schools.com/css/css_grid_item.asp */
    .footer__columns {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer__column--logo {
        grid-column: auto;
    }

    .pricing-grid {
        grid-template-columns: repeat(var(--grid-columns-desktop), 1fr);
    }

    .price-card {
        grid-column: span 6;
    }

    .popup__content {
        width: min(70%, 750px);
        padding: var(--spacing-3xl);
    }
}