/**
 * Matsnakk.no - Phase 3W v1e
 * Justert global luft mellom offentlig header og content: mellom v1c og v1d.
 * Beholder presis sirkel-avatar i oppskriftshero.
 * Dette er et rent visuelt lag. Ingen DB, ingen router, ingen terminal.
 */

:root {
    /* v1c var litt lite, v1d ble ett hakk for mye. v1e legger seg kontrollert mellom disse. */
    --mn-3w-header-content-gap: clamp(45px, 4.2vw, 78px);
}

html body .mn-header + .mn-main,
html body .mn-header ~ .mn-main {
    margin-top: var(--mn-3w-header-content-gap) !important;
}

html body .mn-main {
    padding-top: 0 !important;
}

html body .mn-header + .mn-flash-wrap {
    margin-top: var(--mn-3w-header-content-gap) !important;
}

html body .mn-flash-wrap + .mn-main {
    margin-top: clamp(20px, 1.9vw, 34px) !important;
}

html body .mn-main > article:first-child,
html body .mn-main > section:first-child,
html body .mn-main > div:first-child,
html body .mn-main > article:first-of-type,
html body .mn-main > section:first-of-type,
html body .mn-main > div:first-of-type {
    margin-top: 0 !important;
}

html body .mn-main > article.mn-recipe-detail:first-child,
html body .mn-main > article.mn-recipe-detail:first-of-type,
html body article.mn-recipe-detail.mn-recipe-detail {
    margin-top: 0 !important;
}

html body .mn-recipe-detail .mn-recipe-hero:first-child {
    margin-top: 0 !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge,
html body .mn-recipe-detail .mn-recipe-hero__meta a.mn-author-badge.mn-v30-author-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    min-width: 0 !important;
    color: #2b1a10 !important;
    text-decoration: none !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__avatar,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge .mn-author-badge__avatar,
html body .mn-recipe-detail .mn-recipe-hero__meta a.mn-author-badge.mn-v30-author-badge .mn-author-badge__avatar {
    box-sizing: border-box !important;
    display: block !important;
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    max-height: 76px !important;
    flex: 0 0 76px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: 3px solid rgba(255, 248, 226, .96) !important;
    background: linear-gradient(135deg, #f0d69f 0%, #b77a43 45%, #4a2b1a 100%) !important;
    box-shadow: 0 14px 30px rgba(42, 25, 14, 0.24) !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__avatar img,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge .mn-author-badge__avatar img,
html body .mn-recipe-detail .mn-recipe-hero__meta a.mn-author-badge.mn-v30-author-badge .mn-author-badge__avatar img {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 50% !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__text,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge .mn-author-badge__text {
    display: grid !important;
    gap: 2px !important;
    min-width: 0 !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__text strong,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge strong {
    font-size: 1.18rem !important;
    line-height: 1.05 !important;
    color: #24160e !important;
    text-shadow: none !important;
}

html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__text small,
html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge small,
html body .mn-recipe-detail .mn-recipe-hero__meta time {
    font-size: .92rem !important;
    line-height: 1.08 !important;
    color: #60412d !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

@media (max-width: 760px) {
    :root {
        --mn-3w-header-content-gap: 28px;
    }

    html body .mn-recipe-detail .mn-recipe-hero__meta .mn-author-badge__avatar,
    html body .mn-recipe-detail .mn-recipe-hero__meta .mn-v30-author-badge .mn-author-badge__avatar,
    html body .mn-recipe-detail .mn-recipe-hero__meta a.mn-author-badge.mn-v30-author-badge .mn-author-badge__avatar {
        width: 62px !important;
        min-width: 62px !important;
        max-width: 62px !important;
        height: 62px !important;
        min-height: 62px !important;
        max-height: 62px !important;
        flex-basis: 62px !important;
    }
}