/*
 * Matsnakk.no – frontend fase 2
 * Lesbarhet + offentlige visningsmaler.
 * Laster etter global visuell identitet v1 og retter spesielt mørk/forsvinnende tekst i hero.
 */

/* 1) Forsidehero / mørke fotoheroer: tekst skal være lys og tydelig */
.mn-v30-hero,
.mn-v30-hero * {
    box-sizing: border-box;
}

.mn-v30-hero {
    position: relative;
    color: #fff7e8;
}

.mn-v30-hero__shade {
    background:
        radial-gradient(circle at 27% 45%, rgba(0,0,0,.30), transparent 28rem),
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.58) 36%, rgba(0,0,0,.28) 68%, rgba(0,0,0,.18) 100%) !important;
}

.mn-v30-hero__content,
.mn-v30-hero__content p,
.mn-v30-hero__lead {
    color: #fff4df !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.52);
}

.mn-v30-hero h1,
.mn-v30-hero__content h1,
#mn-v30-hero-title {
    color: #fff1d4 !important;
    text-shadow: 0 4px 26px rgba(0,0,0,.62);
}

.mn-v30-hero h1 span,
#mn-v30-hero-title span {
    color: #e6c66c !important;
}

.mn-v30-hero .mn-v30-kicker {
    color: #d89454 !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.62);
}

.mn-v30-hero__actions .mn-v30-cta--primary {
    background: linear-gradient(135deg, #0b6b52, #0f8061) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.22) !important;
}

.mn-v30-hero__actions .mn-v30-cta--secondary {
    background: rgba(255, 247, 232, .12) !important;
    color: #fff7e8 !important;
    border-color: rgba(255, 247, 232, .35) !important;
    backdrop-filter: blur(8px);
}

/* 2) Toppmeny/header: stabil kontrast på mørk bakgrunn */
.mn-header,
.mn-site-header,
header[role="banner"] {
    color: #fff4df;
}

.mn-nav a,
.mn-nav button,
.mn-nav__trigger,
.mn-logo__text,
.mn-logo__subtext {
    color: rgba(255, 247, 232, .92) !important;
}

.mn-nav__trigger:hover,
.mn-nav a:hover {
    color: #e7c879 !important;
}

.mn-nav__dropdown {
    background: rgba(34, 25, 20, .96) !important;
    border: 1px solid rgba(226, 190, 111, .22) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
}

.mn-nav__dropdown a {
    color: #fff4df !important;
}

.mn-nav__dropdown a:hover {
    background: rgba(226, 190, 111, .12) !important;
    color: #fff !important;
}

/* 3) Generelle offentlige sidehoder skal være mørke på lys bakgrunn, men ikke påvirke fotohero */
.mn-v22-page-hero:not(.mn-v30-hero),
.mn-page-hero:not(.mn-v30-hero),
.mn-categories-page-hero {
    color: #241913;
}

.mn-v22-page-hero:not(.mn-v30-hero) h1,
.mn-page-hero:not(.mn-v30-hero) h1,
.mn-categories-page-hero h1 {
    color: #241913 !important;
    text-shadow: none;
}

.mn-v22-page-hero:not(.mn-v30-hero) p,
.mn-page-hero:not(.mn-v30-hero) p,
.mn-categories-page-hero p {
    color: #66564a;
}

/* 4) Kategori- og innholdskort: mer likt godkjent Matsnakk-layout */
.mn-v22-content-card,
.mn-v30-story-card,
.mn-category-overview-card,
.mn-v22-empty-card {
    border: 1px solid rgba(93, 63, 39, .16) !important;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,241,.94)) !important;
    box-shadow: 0 18px 40px rgba(43, 28, 18, .10) !important;
}

.mn-v22-content-card__body,
.mn-v30-story-card__body,
.mn-category-overview-card__body {
    color: #241913;
}

.mn-v22-content-card__body h2,
.mn-v30-story-card__body h3,
.mn-category-overview-card__body h3 {
    color: #21160f;
}

.mn-v22-content-card__body p,
.mn-v30-story-card__body p,
.mn-category-overview-card__body p {
    color: #5e5148;
}

/* 5) Kortbilder: profesjonell crop og rolig hover */
.mn-v22-content-card__image,
.mn-v30-story-card__image,
.mn-category-overview-card__image,
.mn-v22-mini-card {
    background: #e9dccb;
}

.mn-v22-content-card__image img,
.mn-v30-story-card__image img,
.mn-category-overview-card__image img,
.mn-v22-mini-card img {
    width: 100%;
    object-fit: cover;
    filter: saturate(1.04) contrast(1.03);
}

.mn-v22-content-card:hover img,
.mn-v30-story-card:hover img,
.mn-category-overview-card:hover img {
    transform: scale(1.025);
}

/* 6) Meta, badges og type labels */
.mn-v22-content-card__image span,
.mn-v30-story-card__image span,
.mn-v22-mini-card span,
.mn-category-overview-card__meta {
    background: linear-gradient(135deg, #075642, #0d6b53) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    letter-spacing: .02em;
}

.mn-author-badge,
.mn-v30-author-badge {
    color: #5e5148;
}

/* 7) Tagg-/taksonomi-visning: klarere chips */
.mn-tag,
.mn-chip,
.mn-taxonomy-chip,
.mn-recipe-tag,
.mn-meta-chip,
[class*="taxonomy-chip"] {
    background: #e8f4ee !important;
    color: #075642 !important;
    border: 1px solid rgba(7, 86, 66, .16) !important;
    font-weight: 800;
}

.mn-tag:nth-child(4n+2),
.mn-chip:nth-child(4n+2),
.mn-taxonomy-chip:nth-child(4n+2) {
    background: #f5e7d9 !important;
    color: #8a552e !important;
    border-color: rgba(168, 102, 58, .18) !important;
}

.mn-tag:nth-child(4n+3),
.mn-chip:nth-child(4n+3),
.mn-taxonomy-chip:nth-child(4n+3) {
    background: #f7f0d9 !important;
    color: #6f5718 !important;
    border-color: rgba(224, 189, 102, .22) !important;
}

/* 8) /categories grid beholdes: fire i bredden på stor skjerm */
.mn-category-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
    align-items: stretch;
    justify-content: start;
}

@media (max-width: 1180px) {
    .mn-category-overview-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .mn-category-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 620px) {
    .mn-category-overview-grid {
        grid-template-columns: 1fr;
    }
}

/* 9) Tomme kategorier/empty states */
.mn-v22-empty-card {
    padding: clamp(1rem, 2vw, 1.4rem);
    border-left: 5px solid #a8663a !important;
}

.mn-v22-empty-card h2 {
    color: #241913;
}

/* 10) Søkefelt og topphandlinger */
.mn-header input,
.mn-site-header input,
.mn-search input,
input[type="search"] {
    color: #fff4df;
    background: rgba(12, 8, 6, .70) !important;
    border-color: rgba(226, 190, 111, .35) !important;
}

.mn-header input::placeholder,
.mn-site-header input::placeholder,
.mn-search input::placeholder,
input[type="search"]::placeholder {
    color: rgba(255, 244, 223, .68);
}

/* 11) Lesbarhet på AdSense-placeholder */
.mn-adsense-placeholder,
[class*="adsense"] {
    color: #4d4037;
}

/* 12) Mobil */
@media (max-width: 760px) {
    .mn-v30-hero__shade {
        background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.42)) !important;
    }

    .mn-v30-hero h1,
    #mn-v30-hero-title {
        font-size: clamp(2.3rem, 15vw, 4.4rem);
    }

    .mn-nav__dropdown {
        background: rgba(34, 25, 20, .98) !important;
    }
}