/* =============================================================================
   Mukaan – Funktionsebene

   Hier steht ausschliesslich, was das Ghost-Theme strukturell braucht, damit
   das Markup dieses Themes funktioniert: Geometrie der Kopfzeile, Wortmarke,
   Verhalten von ein- und ausblendbaren Elementen.

   Gestaltung steht in brand.css. screen.css bleibt unveraendertes Ghost-CSS.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Wortmarke
   Groesse haengt an einer Variablen, die Tagline rechnet das Verhaeltnis 54:11
   aus der Logo-Spec selbst aus. Nur --mk-logo-size anfassen.
   -------------------------------------------------------------------------- */

:root {
    --mk-logo-size: 40px;
}

@media (min-width: 641px) {
    :root {
        --mk-logo-size: 44px;
    }
}

.gh-navigation-logo .mk-logo,
.gh-footer-logo .mk-logo {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
    text-decoration: none;
}

.mk-logo-word {
    font-family: "Space Grotesk", Helvetica, Arial, sans-serif;
    font-size: var(--mk-logo-size);
    font-weight: 700;
    line-height: 1;
    color: var(--color-darker-gray);
    letter-spacing: -0.035em;
}

/* Farben laut README-logo.md */
.mk-logo-accent {
    color: var(--ghost-accent-color);
}

.mk-logo-tag {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: calc(var(--mk-logo-size) * 11 / 54);
    font-weight: 600;
    line-height: 1;
    color: #a2a2a2;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    white-space: nowrap;
}

/* Ghosts eigene Logo-Typografie darf die Wortmarke nicht ueberschreiben */
.gh-navigation-logo:has(.mk-logo),
.gh-footer-logo:has(.mk-logo) {
    font-size: inherit;
    letter-spacing: normal;
}

/* -----------------------------------------------------------------------------
   Kopfzeile
   Ohne Menuepunkte darf das Raster keine leeren Zeilen samt Abstand
   reservieren, und die Leiste muss hoeher sein als die Wortmarke, weil das
   Logo absolut zentriert sitzt.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    #gh-navigation {
        height: auto;
    }

    #gh-navigation .gh-navigation-inner {
        grid-template-rows: auto;
        gap: 0;
    }

    #gh-navigation .gh-navigation-brand {
        position: relative;
        grid-template-columns: 1fr;
        min-height: 96px;
        height: auto;
    }

    #gh-navigation .gh-navigation-logo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* -----------------------------------------------------------------------------
   Autorenbild im Artikel
   Ghost dimensioniert das Avatar-SVG ueber den umgebenden <a>. Grav hat keine
   Autorenseiten, deshalb ein <span> mit denselben Massen.
   -------------------------------------------------------------------------- */

.gh-article-author-image .gh-author-avatar {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 -8px;
    overflow: hidden;
    border-radius: 50%;
}

/* -----------------------------------------------------------------------------
   hidden-Attribut
   Eigene Bausteine mit display-Angabe muessen es respektieren, sonst schlaegt
   das Author-CSS die Browser-Vorgabe und vermeintlich verborgene Elemente
   bleiben sichtbar.
   -------------------------------------------------------------------------- */

.mk-searchbar-close[hidden],
.mk-filter-more[hidden],
.gh-card[hidden] {
    display: none;
}