/* ===== FARGEVARIABLER ===== */
/* Definerer fargepaletten som brukes gjennom hele nettsiden */
:root {
    --peach-light: #FFE5D4;
    --peach: #F7B7A3;
    --peach-dark: #E89A84;
    --brown: #6B3F2B;
    --cream: #FFF3EC;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    background-color: var(--peach-light);
    color: var(--brown);

}

/* ===== NAVIGASJONSMENY ===== */
/* Fast navigasjonsmeny som alltid er synlig øverst */
#HUD {
    position: fixed;  /* Viktig: holder menyen fast øverst når du scroller */
    width: 100%;
    background: #f8edebfa; 
    top: 0;
    z-index: 1000;  /* Viktig: sørger for at menyen ligger over alt annet innhold */
}

/* Indre container for navigasjonselementer */
#HUDT {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 15px;
}
/* Styling av navigasjonslenker */  
#HUDT h3 a {
    color: var(--brown);
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    text-decoration: none;
    margin: 0;
    font-size: 1.1rem;
    position: relative;
}
/* Hover-effekt på navigasjonslenker */
#HUDT h3 a:hover {
    background: var(--peach-dark);
    color: white;
}

/* ===== TITTEL ===== */
/* Hovedseksjon med tittel og intro-tekst */
#Tittel {
    height: 740px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    scroll-margin-top: 150px;

}

/* Hovedoverskrifter i tittelseksjonen */
#Tittel h1 {
    font-size: 4.5rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

/* Gradient-effekt på første overskrift */
#Tittel h1:first-of-type {
    background: var(--peach);
    -webkit-text-fill-color: transparent;  /* Viktig: gjør teksten gjennomsiktig */
    background-clip: text;  /* Viktig: klipper bakgrunnen til tekstformen */
    -webkit-background-clip: text;
    margin-bottom: 10px;
}
/* Intro-tekst under tittel */
#Tittel p {
    font-size: 1.5rem;
    max-width: 600px;
    margin: 30px;
    line-height: 1.8;
}

/* ===== HVA ER MUTEPET ===== */
/* Container for hovedinnholdet */
#Tekst {
    margin: 80px auto;
    max-width: 1400px;
    padding: 0 20px;
}
/* Overskrift for "Hva er MutePet" */
#HEM {
    text-align: center;
    margin-bottom: 0px;
}
/* Styling av h2-overskrift */
#HEM h2 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--brown);
    display: inline-block;
    position: relative;
    border-bottom: 5px solid #fab89e;
}

/* Flexbox-layout for bilde og tekst side ved side */
#HEMB {
    display: flex;  /* Viktig: gjør at bilde og tekst kan stå ved siden av hverandre */
    align-items: center;
    gap: 50px;
    background: white;
    border-radius: 30px;
    padding: 20px;
    position: relative;
    overflow: hidden;
}
/* Produktbilde */
#Bilde {
    width: 400px;
    height: auto;
    border-radius: 20px;
}

#STBilde {
    flex: 1;  /* Viktig: tar opp resterende plass */
    background: linear-gradient(135deg, #FFF3EC 0%, #F9DCC4 100%);
    border-radius: 20px;
    padding: 20px;
    margin: 20px;
}
/* Container for tekst ved siden av bildet */
#Tekst1 {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin: 0;
}

/* ===== VERDIER-SEKSJON ===== */
/* Container for verdiene */
#VF {
    margin: 80px auto;
    max-width: 1400px;
    padding: 0 20px;
    scroll-margin-top: 150px;
}
/* Overskrift-container for verdier */
#OV {
    min-height: 100px;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flexbox-layout for verdi-bokser */
#Verdi {
    display: flex;  /* Viktig: legger boksene ved siden av hverandre */
    gap: 20px;
    flex-wrap: wrap;  /* Viktig: lar boksene wrappe på mindre skjermer */
}

/* Klikkbare verdi-bokser med hover-effekt */
.verdi-box {
    flex: 1;
    min-width: 250px;
    background: white;
    border-radius: 50px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;  /* Viktig: smooth animasjon ved hover */
}
/* Hover-effekt på verdi-bokser */
.verdi-box:hover {
    transform: translateY(-5px);  /* Løfter boksen litt opp ved hover */
}
/* Fjerner standard list-styling fra summary */
.verdi-box summary {
    list-style: none;
}
/* Overskrift i verdi-boks */
.verdi-box h3 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--brown);
}

/* Legger til nedover-pil etter overskrift */
.verdi-box summary h3::after {
    content: ' ▼';  /* Viktig: legger til pil-symbol */
    font-size: 1rem;
    opacity: 1;
}
/* Innhold som vises når verdi-boks er åpen */
.verdi-content {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid var(--peach-light);
}
/* Styling for tittelen til verdier*/
#OV h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brown);
    margin: 0;
    border-bottom: 5px solid #fab89e;
}
/* Tekst i verdi-innhold */
.verdi-content p {
    margin: 0;
    line-height: 1.6;
    color: #555;
    text-align: left;
}

/* ===== OM IDEEN ===== */
/* Hovedcontainer for "Om ideen" */
#Down {
    background: linear-gradient(135deg, #F9DCC4 0%, #ffccb8 100%);
    border-radius: 50px;
    margin: 50px auto;
    max-width: 1400px;
    padding: 60px;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 100px;
}
/* Container for "Om ideen"-tittel */
#Omideentittel{
    text-align: center;
    margin-bottom: 40px;    
}
/* "Om ideen"-overskrift */
#Omideentittel h2{
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--brown);
    margin: 0;
    display: inline-block;
    position: relative;
    border-bottom: 5px solid #fab89e;

}
/* Innholdsboks for "Om ideen" */
#Omideen {
    background: white;
    border-radius: 30px;
    padding: 10px;
    text-align: left;
    line-height: 1.8;

}
/* Paragrafer i "Om ideen" */
#Omideen p {
    font-size: 1.1rem;
    color: #444;
    margin-bottom: 20px;
}

/* Spesielle paragrafer med labb-ikon */
#Omideen p:nth-child(3),
#Omideen p:nth-child(4),
#Omideen p:nth-child(5) {
    padding-left: 30px;
    position: relative;
    font-weight: 500;
    color: var(--brown);
}

/* Legger til labb-emoji før paragrafene */
#Omideen p:nth-child(3)::before,
#Omideen p:nth-child(4)::before,
#Omideen p:nth-child(5)::before {
    content: '🐾';  /* Viktig: legger til emoji før teksten */
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Siste paragraf med sitat-stil */
#Omideen p:nth-child(6) {
    font-style: italic;
    color: #666;
    border-left: 4px solid var(--peach);  /* Venstre kant som sitat-markør */
    padding-left: 20px;
    margin-top: 30px;
}

/* ===== OM OSS/TEAMET ===== */
#OS {
    display: flex;
    text-align: center;
    flex-direction: column;
    max-width: 1400px;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    padding: 60px;
    background: linear-gradient(135deg, #F9DCC4 0%, #ffccb8 100%);
}
/* "Om oss"-overskrift */
#OST h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 3rem;
    font-weight: 700;
    color: var(--brown);
    display: inline-block;
    position: relative;
    border-bottom: 5px solid #fab89e;
}
/* Grid-layout for team-kort */
#Omoss {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    background: transparent;
    padding: 10px;
    width: 100%;
    max-width: 1200px;
    scroll-margin-top: 250px;
}

/* Hvert team-kort */
.team-kort {
    background: white;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.team-kort img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Navn */
.team-kort .team-navn {
    font-weight: 700;
    color: var(--brown);
    text-align: center;
}

/* Tittel/rolle */
.team-kort .team-roller {
    font-size: smaller;
    color: var(--peach-dark);
    font-weight: 700;
    background: var(--peach-light);
    padding: 4px 10px;
    border-radius: 20px;
    text-align: center; 
}


/* ===== RESPONSIV DESIGN FOR MOBIL ===== */
/* Tilpassinger for skjermer mindre enn 768px (mobil/tablet) */
@media screen and (max-width: 768px) {
    /* Viktig: stiller bilde og tekst vertikalt på små skjermer */
    Body{
        max-width: 730px;
    }
    #HEMB {
        flex-direction: column;
        text-align: center;
    }
    #HUD {
        width: 100%;
    }
    #Tittel{
        margin-top: 100px;
    }

    #Bilde {
        width: 100%;
        max-width: 300px;
    }
    #Down {
        padding: 20px;
    }
    #STBilde {
        padding: 10px;
    }

    /* Viktig: gjør verdi-bokser full bredde på mobil */
    .verdi-box {
        max-width: 600px;
    }
    #OS {
        padding: 10px;
    }
    #Omoss {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .team-card {
        max-width: 150px;
    }
    .team-card img {
        width: auto;
        height: 150px;
    }
}