/* --- Enkel CSS --- */
body { font-family: sans-serif; margin: 0; padding: 0; line-height: 1.6; }

/* Menyn */
nav { 
    background: #fff;
    padding: 1rem; 
    position: sticky; 
    top: 0; 
    z-index: 100;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;*
    gap: 15px;
}

@media (max-width: 600px) {
    nav {
        justify-content: center;
    }
}

nav a { 
    color: #2a2a2a; 
    text-decoration: none; 
    font-size: 1.1rem;
    white-space: nowrap;
    font-family: BellMT;
    
    /* Gör länkarna aningen mer "knapp-liknande" för touch-vänlighet */
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.3s;
}

nav a:hover { 
    text-decoration: none; 
    color: #E6561E; 
    background: rgba(255,255,255,0.1);
}

nav a.active-link {
    color: #E6561E;; 
    background-color: white; 
}


/* Logotypen */
header { 
    max-width: 800px; 
    margin: auto; /* Centrerar headern på sidan */
    text-align: center; /* Centrerar innehållet (bilden) i headern */
    padding-top: 2rem; /* Lite luft ovanför logotypen */
    padding-bottom: 2rem; /* Lite luft under logotypen */
}
header img { 
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Innehållsytan */
main { padding: 2rem; max-width: 800px; margin: auto; }

/* Rubriker */
h1, h2, h3 { color: #094268; font-family: BellMT }

/* Snyggare lista för medlemmar */
dl { margin-top: 20px; }
dt { font-weight: bold; font-size: 1.1em; margin-top: 1.5rem; color: #005f73; border-bottom: 1px solid #eee; font-family: BellMT }
dd { margin-left: 0; margin-bottom: 0.5rem; }

/* --- Styrelse-layout --- */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsivt rutnät */
    gap: 3rem; /* Luft mellan personerna */
    margin-top: 2rem;
}

.board-member {
    text-align: center; /* Centrera allt innehåll */
    padding: 1rem;
}

.board-member img {
    width: 150px; /* Storlek på bilden */
    height: 150px;
    object-fit: cover; /* Beskär bilden snyggt om den inte är kvadratisk */
    border-radius: 50%; /* Gör bilden helt rund */
    border: 3px solid #eee; /* En tunn ram runt bilden */
    margin-bottom: 1rem;
}

.board-member h3 {
    color: #005f73; /* Samma blå som i menyn/rubriker */
    margin-bottom: 0.2rem;
    font-size: 1.3rem;
}

.board-role {
    font-weight: bold;
    color: #555;
    margin-bottom: 0.5rem;
    display: block;
}

.board-job {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.board-email a {
    color: #333;
    font-size: 0.9rem;
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

.board-email a:hover {
    color: #005f73;
    border-bottom: 1px solid #005f73;
}

/* HÄR HÄNDER MAGIN: Dölj alla sidor som standard */
.page { display: none; animation: fadeIn 0.5s; }

/* Visa den sida som har klassen "active" */
.page.active { display: block; }

/* En liten animation för känslans skull */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}