/**
 * Package: matsnakk_public_hero_flash_layout_repair_v1_20260716
 * Formål:
 * 1) Retter lav kontrast på artikkel-/innholdshero der hvit overskrift havner på lys bakgrunn.
 * 2) Gjør system-/loginmeldinger flytende over siden, slik at de ikke skyver hero ned.
 * Ingen AdSense-, oppskrift-, database- eller controlpanel-layout-endringer.
 */

/* MN_PUBLIC_HERO_FLASH_LAYOUT_REPAIR_V1_CSS_FILE_START */

/* 1) Innholds-/artikkelhero: mørk tekst på lys Matsnakk-bakgrunn. */
html body .mn-v22-detail__hero,
html body article.mn-v22-detail > header.mn-v22-detail__hero {
    color: #24150c !important;
}

html body .mn-v22-detail__hero h1,
html body article.mn-v22-detail > header.mn-v22-detail__hero h1 {
    color: #24150c !important;
    text-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html body .mn-v22-detail__hero p:not(.mn-v30-kicker):not(.mn-kicker),
html body article.mn-v22-detail > header.mn-v22-detail__hero p:not(.mn-v30-kicker):not(.mn-kicker) {
    color: #5f4a3c !important;
    text-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html body .mn-v22-detail__hero .mn-v30-kicker,
html body .mn-v22-detail__hero .mn-kicker,
html body article.mn-v22-detail > header.mn-v22-detail__hero .mn-v30-kicker,
html body article.mn-v22-detail > header.mn-v22-detail__hero .mn-kicker {
    color: #9a5a28 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

html body .mn-v22-detail__hero .mn-v22-detail__meta,
html body .mn-v22-detail__hero .mn-v22-detail__meta *,
html body article.mn-v22-detail > header.mn-v22-detail__hero .mn-v22-detail__meta,
html body article.mn-v22-detail > header.mn-v22-detail__hero .mn-v22-detail__meta * {
    color: #2b1a10 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* 2) Systemmeldinger/loginbeskjed skal ikke ligge i dokumentflyten mellom header og hero. */
html body .mn-header + .mn-flash-wrap,
html body .mn-header ~ .mn-flash-wrap,
html body > .mn-flash-wrap,
html body .mn-flash-wrap {
    position: fixed !important;
    top: clamp(86px, 7.6vw, 122px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 7000 !important;
    width: min(100% - 32px, 1180px) !important;
    max-width: 1180px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: .7rem !important;
    pointer-events: none !important;
}

html body .mn-flash-wrap .mn-flash {
    pointer-events: auto !important;
    box-shadow: 0 18px 55px rgba(25, 12, 5, .16) !important;
}

/* Når flash-wrap finnes mellom header og main, skal ikke main/hero få ekstra toppluft. */
html body .mn-header + .mn-flash-wrap + .mn-main,
html body .mn-header ~ .mn-flash-wrap + .mn-main,
html body .mn-flash-wrap + .mn-main {
    margin-top: 0 !important;
}

/* Forsiden skal fortsatt starte helt inntil headeren, også når flash finnes. */
html body .mn-flash-wrap + .mn-main[data-route="/"],
html body .mn-main[data-route="/"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html body .mn-main[data-route="/"] > .mn-v30-home:first-child,
html body .mn-main[data-route="/"] > .mn-v30-home:first-of-type,
html body .mn-main[data-route="/"] .mn-v30-home > .mn-v30-hero:first-child,
html body .mn-main[data-route="/"] .mn-v30-hero:first-child,
html body .mn-main[data-route="/"] .mn-v30-hero {
    margin-top: 0 !important;
}

@media (max-width: 780px) {
    html body .mn-header + .mn-flash-wrap,
    html body .mn-header ~ .mn-flash-wrap,
    html body > .mn-flash-wrap,
    html body .mn-flash-wrap {
        top: clamp(72px, 16vw, 104px) !important;
        width: calc(100% - 24px) !important;
    }

    html body .mn-flash-wrap .mn-flash {
        border-radius: 14px !important;
        padding: .75rem .9rem !important;
        font-size: .94rem !important;
    }
}

/* MN_PUBLIC_HERO_FLASH_LAYOUT_REPAIR_V1_CSS_FILE_END */