/* Grundstil alla knappar */
.esbjorn-button {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    transition: background-color 0.3s ease;
    border: none;
    color: #ffffff;
}

/* Subject-knappar (orange) */
#subject-buttons .esbjorn-button.subject-btn {
    background-color: #f97316;
}
#subject-buttons .esbjorn-button.subject-btn:hover {
    background-color: #ea580c;
}
#subject-buttons .esbjorn-button.subject-btn.selected {
    background-color: #c2410c;
}

/* Media-knappar (blå som blir svart vid hover) */
#media-buttons .esbjorn-button.media-btn {
    background-color: #2c2e83;
    color: #ffffff;
    padding: 10px 18px;
    border-radius: 6px;
}
#media-buttons .esbjorn-button.media-btn:hover {
    background-color: #000000;
    color: #ffffff;
}
#media-buttons .esbjorn-button.media-btn.selected {
    background-color: #1a1c66; /* mörkare blå när vald */
}

/* Avstånd mellan subject och media */
#subject-buttons {
    margin-bottom: 30px;
}
/* Specialfärg för knappen "Overview" */
#media-buttons .esbjorn-button.media-btn[data-slug="overview"] {
    background-color: #ea580c; /* samma mörkorange som hover på subject-knappar */
    color: #ffffff;
}
#media-buttons .esbjorn-button.media-btn[data-slug="overview"]:hover {
    background-color: #c2410c; /* ännu mörkare orange vid hover */
}
#media-buttons .esbjorn-button.media-btn[data-slug="overview"].selected {
    background-color: #c2410c; /* behåll mörkare orange även när vald */
}
/* Specialfärg och stil för knappen "Overview" */
#media-buttons .esbjorn-button.media-btn[data-slug="overview"] {
    background-color: #ea580c; /* mörkorange */
    color: #ffffff;
    font-weight: bold;         /* fetstil */
}
#media-buttons .esbjorn-button.media-btn[data-slug="overview"]:hover {
    background-color: #c2410c; /* ännu mörkare orange vid hover */
}
#media-buttons .esbjorn-button.media-btn[data-slug="overview"].selected {
    background-color: #c2410c; /* behåll mörkare orange när vald */
}