/* 1. RESET & GRUNDINSTÄLLNINGAR */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #000000;
    display: flex;
    justify-content: center;
    line-height: 1.6;
}

/* 2. TYPOGRAFI */
h1, h2, h3, p {
    color: #2d2222;
    overflow-wrap: break-word; /* Förhindrar att långa ord klipper på mobil */
}

h2 {
    font-family: 'Crimson Text', serif;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 5vw, 1.5rem); /* Dynamisk storlek för mobil */
    text-align: center;
    margin: 20px 0;
}

h3 {
    font-family: 'Crimson Text', serif;
    font-size: 1.1rem;
    text-align: left; /* Ändrat till vänster för bättre läsbarhet i boxar */
    margin-bottom: 10px;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: #e38c76; /* Din originalfärg */
    font-size: inherit; /* Behåll textens storlek */
}

    a:hover {
        color: #b76;
    }

b[onclick] {
    cursor: pointer;
}

p {
    font-family: 'Source Serif Pro', serif;
    font-size: 15px;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
}

.centered-paragraph {
    text-align: center;
    max-width: 800px;
    margin: 16px auto;
}

.quote {
    font-style: italic;
    color: #555;
    border-left: 3px solid #fba;
    padding-left: 15px;
    margin: 20px 0;
}

/* 3. LAYOUT & CONTAINER */
.container {
    width: 100%;
    max-width: 1100px; /* Mer standardvänlig bredd */
    margin: 0 auto;
    padding: 0 15px; /* "Safety margin" för mobiler */
}

.sheet {
    background-color: #fefefe;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    padding-bottom: 40px;
}

/* 4. NAVIGATION */
.navbar {
    display: flex;
    justify-content: flex-end; /* Flyttar menyn till höger */
    padding: 20px;
    min-height: 80px;
}

.nav-right ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
}

.menulink {
    font-family: 'Reem Kufi', sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
    color: #222;
    font-weight: 500;
}

    .menulink:hover {
        border-bottom: 2px solid #222;
    }

.wheel {
    margin: 8px auto 20px auto;
    width: 200px; 
    height: 200px;
    display: block; 
    transition: all 1.2s ease-in-out;
}

    .wheel:hover {
        transform: rotate(360deg);
    }

center a {
    display: inline-block;
}

/* 5. FLEXBOX MODULER (Fixar dina textboxar) */
.content-flexbox {
    display: flex;
    flex-wrap: wrap; /* Gör att de hoppar ner under varandra på mobil */
    gap: 20px;
    padding: 20px;
}

.module-flexbox {
    flex: 1 1 450px; /* Försök ta 50% bredd, men minst 450px */
    padding: 20px;
    background: #fff;
}

.module {
    padding: 20px 40px;
}

.module-center {
    padding: 20px;
    text-align: center;
}

/* 6. MEDIA (Video & Bilder) */
.videoelement {
    width: 100%;
    margin: 15px 0;
}

video {
    width: 100%;
    height: auto;
    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px; /* Justera till den storlek du vill att skivan ska ha */
    margin: 0 auto;
}

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

/* 7. HJÄLPKLASSER */
.hidden {
    display: none;
}


/* 8. MOBILANPASSNING (RESPONSIVE) */
@media (max-width: 768px) {
    .navbar {
        justify-content: center;
        text-align: center;
    }

    .module-flexbox {
        flex: 1 1 100%; /* Tar hela bredden på mobilen */
        padding: 10px 0;
    }

    .module {
        padding: 20px;
    }

    p {
        font-size: 14px; /* Lite mindre text på små skärmar */
    }
}