/*
 * Ergänzungen zum MiNK-Styleguide (styles.css bleibt unverändert).
 * Jede Regel schließt eine Lücke im Styleguide; der Grund steht jeweils darüber.
 */

/*
 * Hauptnavigation: styles.css öffnet das Menü nur, solange der Hamburger den Fokus hat.
 * Beim Drücken auf einen Menülink geht der Fokus verloren, das Menü verschwindet und der Klick
 * kommt nicht an. Mit smkm.js (data-menue="js") steuert stattdessen aria-expanded das Menü.
 */
[data-menue="js"] .mk-mainnav__hamburger:focus + * {
    display: none;
}

[data-menue="js"] .mk-mainnav__hamburger[aria-expanded="true"] + * {
    display: block;
}

[data-menue="js"] .mk-mainnav__hamburger:focus::before,
[data-menue="js"] .mk-mainnav__hamburger:focus::after,
[data-menue="js"] .mk-mainnav__hamburger:focus > div {
    transform: none;
}

[data-menue="js"] .mk-mainnav__hamburger[aria-expanded="true"]::before {
    transform: translateY(6px) rotate(135deg);
}

[data-menue="js"] .mk-mainnav__hamburger[aria-expanded="true"]::after {
    transform: translateY(-6px) rotate(-135deg);
}

[data-menue="js"] .mk-mainnav__hamburger[aria-expanded="true"] > div {
    transform: scale(0);
}

/*
 * Aktiver Menüpunkt: styleGuide.html markiert ihn mit is-active, styles.css gestaltet die Klasse nicht.
 * Markiert wird über aria-current, sichtbar wie der Hover-Zustand aus styles.css.
 */
.mk-mainnav__container a[aria-current="page"] {
    text-decoration: underline;
}

/*
 * Abmelden ist ein Formular-Button (POST statt Link); styles.css gestaltet in der Hauptnavigation nur Links.
 * Der Button übernimmt Abstand und Schrift der Menülinks aus .mk-mainnav__container a.
 */
.mk-mainnav__container button {
    padding-left: 2rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.mk-mainnav__container button:hover,
.mk-mainnav__container button:focus {
    text-decoration: underline;
}

/*
 * Modal: styles.css legt .mk-modal nur als relativen Block an (Vorschau im Styleguide mit fester Höhe).
 * Als <dialog> muss es den ganzen Viewport überdecken; Abdunklung und Unschärfe liefert .mk-modal::before.
 */
dialog.mk-modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

dialog.mk-modal::backdrop {
    background: transparent;
}

/*
 * Seitenmeldungen (Erfolg, Hinweis, Fehler): Der Styleguide hat dafür keine Komponente.
 * Farben aus styles.css: Primärfarbe #1687A7 mit 10 % Deckkraft, Fehlerfarbe #B51F19.
 */
.smkm-meldung {
    margin: 1rem 0;
    padding: 0.75rem 1.5rem;
    border-left: 4px solid #1687A7;
    background-color: rgba(22, 135, 167, 0.1);
}

.smkm-meldung--fehler {
    border-left-color: #B51F19;
    background-color: #F5F5F5;
    color: #B51F19;
}

/*
 * Suchfeld in der Hauptnavigation: Der Styleguide hat dafür keine Komponente. input[type=search] aus styles.css
 * ist für Formulare gedacht (volle Breite, große Innenabstände); in der Navigation bleibt es schmal und auf
 * Höhe der Menülinks, mit demselben Abstand nach links.
 */
.smkm-navigationssuche {
    padding-left: 2rem;
}

.smkm-navigationssuche input[type=search] {
    width: 12rem;
    padding: 0.25rem 0.75rem;
}

/*
 * Untermenü „Mehr“ in der Hauptnavigation: Der Styleguide hat kein Untermenü. Umgesetzt mit <details>/<summary>,
 * das ohne JavaScript auf- und zuklappt. „Mehr“ sieht aus wie die Menülinks (.mk-mainnav__container a);
 * ab der Breite, in der die Hauptleiste sichtbar ist (u-display@md, 62em), schwebt die Liste unter „Mehr“,
 * darunter (Hamburger-Menü) steht sie eingerückt darunter. Schatten wie .mk-modal__container.
 */
.smkm-mehr {
    position: relative;
}

.smkm-mehr > summary {
    list-style: none;
    padding-left: 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1687A7;
    cursor: pointer;
}

.smkm-mehr > summary::-webkit-details-marker {
    display: none;
}

.smkm-mehr > summary::after {
    content: " ▾";
}

.smkm-mehr[open] > summary::after {
    content: " ▴";
}

.smkm-mehr > summary:hover,
.smkm-mehr > summary:focus,
.smkm-mehr--aktiv > summary {
    text-decoration: underline;
}

.smkm-mehr > summary:focus {
    outline: 1px #1687A7 dotted;
}

/* Im Hamburger-Menü ist alles rechtsbündig: Unterpunkte rücken von rechts ein und sind nicht fett. */
.smkm-mehr__liste {
    padding-right: 1.5rem !important;
}

.smkm-mehr__liste a {
    font-weight: 400;
}

@media only screen and (min-width: 62em) {
    .smkm-mehr__liste {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 10;
        min-width: 12rem;
        margin-top: 0.5rem !important;
        padding: 0.5rem 0 !important;
        text-align: left;
        background-color: #FFFFFF;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1098039216);
    }

    .smkm-mehr__liste a {
        display: block;
        padding: 0.5rem 1.25rem;
        font-weight: 600;
        white-space: nowrap;
    }
}

/*
 * Aufklappbare Detailzeile in Listen und Suche: Der Styleguide hat dafür keine Komponente. Der Knopf ▸ ist ein
 * zurückgesetzter Button in der Linkfarbe (.mk-btn--reset .mk-link), aber ohne Unterstrich; aufgeklappt
 * (aria-expanded, gesetzt von smkm.js) zeigt er nach unten. Die Detailzeile hebt sich mit der Primärfarbe in
 * 5 % Deckkraft von den übrigen Zeilen ab.
 */
.smkm-kurzinfo__knopf,
.smkm-kurzinfo__knopf:hover,
.smkm-kurzinfo__knopf:focus {
    display: inline-block;
    padding: 0 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.2s;
}

.smkm-kurzinfo__knopf[aria-expanded="true"] {
    transform: rotate(90deg);
}

.smkm-kurzinfo > td {
    background-color: rgba(22, 135, 167, 0.05);
}

.smkm-kurzinfo ul {
    margin: 0.5rem 0;
}

/*
 * Datums-, Monats- und Dateifelder: styles.css gestaltet nur text, email, password, number, tel und search.
 * Die Werte sind aus den Regeln für diese Eingabefelder übernommen (Abstände, Rahmen, Breite, Fokus, Fehler).
 */
input[type=date],
input[type=month],
input[type=file] {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    border: 1px solid rgba(22, 135, 167, 0.1);
    background-color: #FFFFFF;
    width: 100%;
    border-radius: 0.25rem;
}

input[type=date]::placeholder,
input[type=month]::placeholder {
    color: rgba(34, 34, 34, 0.5);
}

input[type=date]:focus,
input[type=month]:focus,
input[type=file]:focus,
input[type=file]:focus-within {
    outline: 0;
    box-shadow: 0 0 3px 0 #1687A7;
}

input[type=date]:focus,
input[type=month]:focus,
input[type=file]:focus,
input[type=date]:hover,
input[type=month]:hover,
input[type=file]:hover {
    border-color: #1687A7;
}

input[type=date]:disabled,
input[type=month]:disabled,
input[type=file]:disabled {
    color: rgba(34, 34, 34, 0.5);
    background-color: #F5F5F5;
    pointer-events: none;
}

input.has-error[type=date],
input.has-error[type=month],
input.has-error[type=file] {
    color: #B51F19;
}

/*
 * Auswahlknopf des Dateifelds: angelehnt an .mk-btn--outlined (Schrift, Farbe, Rahmen, Rundung),
 * mit kleinerem Innenabstand, damit er in die Höhe eines Eingabefelds passt.
 */
input[type=file]::file-selector-button {
    margin-right: 1rem;
    padding: 0.25rem 1rem;
    font: inherit;
    font-weight: 600;
    color: #1687A7;
    background-color: #FFFFFF;
    border: 1px solid currentColor;
    border-radius: 0.25rem;
    cursor: pointer;
}

input[type=file]::file-selector-button:hover {
    filter: opacity(0.9);
}

/*
 * Logo der Musikschule im Kopfbereich: styles.css sieht für .mk-page-header__logo 5rem Breite vor,
 * passend zum breiten MiNK-Logo. Das fast quadratische Musikschul-Logo braucht mehr, damit die Schrift lesbar bleibt.
 */
.mk-page-header__logo {
    width: 7rem;
}

.mk-page-header__logo img {
    display: block;
    width: 100%;
    height: auto;
}

/*
 * MiNK-Logo in der Fußzeile: Der Styleguide kennt kein Logo in der Fußzeile.
 * Logo und Copyright stehen in einer Flex-Zeile, damit das Logo mittig zum Schriftzug sitzt.
 */
.smkm-fussmarke {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.smkm-fusslogo {
    display: block;
    height: 2em;
    width: auto;
}

/*
 * Versionshinweise: styles.css nimmt allen Listen Aufzählungszeichen, Einrückung und Abstand (für Navigationen)
 * und allen Überschriften den Abstand nach oben. In den Versionshinweisen trennt das die Einträge nicht mehr;
 * hier bekommen Listen und Überschriften beides zurück.
 */
.smkm-versionshinweise ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0 0;
}

.smkm-versionshinweise ul ul {
    list-style: circle;
    margin-top: 0.25rem;
}

.smkm-versionshinweise li {
    margin-top: 0.75rem;
}

.smkm-versionshinweise li li {
    margin-top: 0.25rem;
}

.smkm-versionshinweise h2 {
    margin-top: 2.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #D3E0EA;
}

.smkm-versionshinweise h3 {
    margin-top: 2rem;
}

.smkm-versionshinweise h4 {
    margin-top: 1.5rem;
    color: #1687A7;
}