/* Global Variabler */
:root {
    --bg-color: hsl(35, 90%, 80%);
    --bg-secondary-color: hsl(0, 0%, 95%);
    --bg-tertiary-color: hsl(0, 0%, 85%);
    --primary-color: hsl(166 0% 4.5%);
    --secondary-color: hsl(14, 99%, 36%);
    --tertiary-color: hsl(216, 100%, 37%);
    
    --border-radius: 0.4rem;
}

@media (prefers-color-scheme: dark) {
    :root {    
    --bg-color: hsl(19, 81%, 5%);
    --bg-secondary-color: hsl(21, 35%, 10%);
    --bg-tertiary-color: hsl(0, 7%, 8%);
    --primary-color: hsl(0, 0%, 100%);
    --secondary-color: hsl(37, 87%, 84%);
    --tertiary-color: hsl(216, 100%, 37%);
    }
}

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

html {
    font-size: 62.5%; /* Nu är 1 rem lika med 10 px */
    font-family: 'Playfair Display',serif;
}

body {
    background-color: var(--bg-color);
    color: var(--primary-color);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.2rem;
}

h2 {
    font-size: 2.4rem;
    font-weight: 600;
}

/* Recept block */
.container {
    position: relative;
    width: 100%;
    max-width: 128rem;
    background: var(--bg-secondary-color);
    padding: 6.4rem;
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
    border-radius: calc(var(--border-radius) * 4);
    }

/* Hero */
.hero {
    margin: -6.4rem -6.4rem 3.2rem;
    height: 50rem;
    overflow: hidden;
    position: relative;
    border-top-left-radius: calc(var(--border-radius) * 4);
    border-top-right-radius: calc(var(--border-radius) * 4);
}

.hero img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Recept Innehåll */
.recept-content {
    display: flex;
    flex-direction: column;
    gap: 3.2rem;
}

/* Rubrik & Beskrivning */
.recept-content__intro h1 {
    color: var(--secondary-color);
    font-size: 4.8rem;
    font-weight: 900;
    margin-bottom: 3.2rem;
}

.recept-content__intro p {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.4;
    background-color: var(--bg-tertiary-color);
    padding: 2.4rem;
    border-radius: var(--border-radius);
}

/* Ingredienser & Instruktioner */
.ingredienser__heading {
    display: flex;
    align-items: baseline;
}

.ingredienser__heading span {
    font-size: 2.4rem;
    font-weight: 400;
    margin-left: 1rem;
}

.ingredienser ul {
    list-style: disc inside;
    padding-left: 2.8rem;
    margin-top: 12px;
}

.instruktioner ol {
    list-style: decimal inside;
    padding-left: 1.6rem;
    margin-top: 12px;
}

:is(.ingredienser, .instruktioner) li {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

/* Serveringsförslag */

.servering__images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2.4rem;
    margin-top: 2rem;
}

.servering__images img {
    flex: 1 1 48%;
    width: 54rem;
    max-width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--border-radius);
}

/* Tillgänglighetsanpassning */
section[tabindex="0"]:focus-visible {
    outline: 0.2rem solid var(--secondary-color);
    border-radius: var(--border-radius);
    /* background-color: hsl(25, 37%, 84%); */
}

/* :is(.ingredienser, .instruktioner) li:hover {
    font-size: 2.4rem;
    transform: scale(1.05);  
}

:is(.ingredienser, .instruktioner) li {
    transition: 
        font-size 0.2s ease,
        transform 0.3s ease; 
} */