/* ==========================================================
   ZRECIPEZ — SITE-WIDE VISUAL CONSISTENCY
   ========================================================== */

html {
    min-height: 100%;
    background: #000;
}

body {
    min-height: 100vh !important;

    background-image:
        url('/static/recipe.png') !important;

    background-position:
        center top !important;

    background-size:
        cover !important;

    background-repeat:
        no-repeat !important;

    background-attachment:
        fixed !important;

    background-color:
        #000 !important;

    color:
        #fff !important;
}


/* Kill old brown page wrappers/backgrounds */

main,
.page,
.page-wrapper,
.wrapper,
.content,
.main-content,
.recipe-page,
.recipe-detail,
.recipe-details,
.recipe-container,
.recipe-wrapper,
.detail-page {
    background-color:
        transparent !important;
}


/* Recipe information gets a neutral BLACK glass panel.
   NO BROWN. Wallpaper remains visible around it. */

.recipe-card,
.recipe-content,
.recipe-info,
.recipe-body,
.ingredients,
.instructions,
.nutrition,
.nutrition-info,
.recipe-ingredients,
.recipe-instructions,
.recipe-nutrition,
article.recipe,
article.recipe-detail {
    background:
        rgba(0, 0, 0, .76) !important;

    color:
        #fff !important;

    border:
        1px solid rgba(255, 205, 40, .80) !important;

    border-radius:
        18px !important;

    box-shadow:
        0 0 8px rgba(255, 190, 0, .35),
        0 12px 30px rgba(0, 0, 0, .45) !important;

    backdrop-filter:
        blur(3px);

    -webkit-backdrop-filter:
        blur(3px);
}


/* Headings */

.recipe-page h1,
.recipe-page h2,
.recipe-page h3,
.recipe-detail h1,
.recipe-detail h2,
.recipe-detail h3,
.recipe-content h1,
.recipe-content h2,
.recipe-content h3,
article h1,
article h2,
article h3 {
    color:
        #fff !important;

    text-shadow:
        0 2px 3px #000,
        0 0 7px rgba(255, 190, 0, .45) !important;
}


/* Gold accent headings */

.recipe-page h2,
.recipe-page h3,
.recipe-detail h2,
.recipe-detail h3,
.recipe-content h2,
.recipe-content h3 {
    color:
        #ffd84a !important;
}


/* Normal recipe text */

.recipe-page p,
.recipe-page li,
.recipe-detail p,
.recipe-detail li,
.recipe-content p,
.recipe-content li,
.ingredients li,
.instructions li,
.nutrition li {
    color:
        #fff !important;

    text-shadow:
        0 1px 2px #000 !important;
}


/* Tables — nutrition etc. */

.recipe-page table,
.recipe-detail table,
.nutrition table {
    background:
        rgba(0,0,0,.78) !important;

    color:
        #fff !important;

    border-color:
        rgba(255,205,40,.55) !important;
}

.recipe-page th,
.recipe-detail th,
.nutrition th {
    background:
        rgba(105,15,10,.95) !important;

    color:
        #fff !important;
}

.recipe-page td,
.recipe-detail td,
.nutrition td {
    background:
        rgba(0,0,0,.45) !important;

    color:
        #fff !important;
}


/* Form fields */

.recipe-page input,
.recipe-page select,
.recipe-page textarea,
.recipe-detail input,
.recipe-detail select,
.recipe-detail textarea {
    background:
        rgba(255,255,255,.96) !important;

    color:
        #111 !important;

    border:
        1px solid #ffd329 !important;
}


/* Links */

.recipe-page a,
.recipe-detail a,
.recipe-content a {
    color:
        #ffd84a;
}


/* Prevent common legacy brown colors from showing */

[style*="#2b1"],
[style*="#3b2"],
[style*="#4b2"],
[style*="brown"] {
    background-color:
        rgba(0,0,0,.76) !important;
}


/* Phone/tablet */

@media (max-width: 900px) {

    body {
        background-attachment:
            scroll !important;
    }

    .recipe-card,
    .recipe-content,
    .recipe-info,
    .recipe-body,
    .ingredients,
    .instructions,
    .nutrition,
    .nutrition-info {
        border-radius:
            12px !important;
    }
}