/* =========================================================
   HAPPY HUNGER - FRESH LIGHT THEME
   Modern grocery / cloud-kitchen inspired colour scheme
   ========================================================= */

:root{
    /* Backgrounds */
    --cream:#f8fbf6;
    --cream-soft:#f2f8ef;
    --white:#ffffff;

    /* Primary Brand Colours */
    --saffron:#2f8f46;
    --orange:#f5b400;

    /* Text */
    --brown:#1f2d1f;
    --muted:#667366;

    /* Status Colours */
    --green:#25883d;
    --green-dark:#176b2c;
    --green-light:#eaf7e9;
    --red:#d64545;

    /* Cards */
    --card:#ffffff;

    /* Borders */
    --border:#e2ece0;
    --border-light:#edf3eb;

    /* Shadows */
    --shadow:0 8px 28px rgba(36,94,47,.08);

    /* Radius */
    --radius:20px;
}


/* =========================================================
   RESET / BASE
   ========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
		BlinkMacSystemFont,
        -apple-system,
        "Segoe UI",
		"Helvetica Neue",
        sans-serif;
    
    color:var(--brown);
    background:var(--cream);
    line-height:1.6;
}

img{
    max-width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    cursor:pointer;
}

.container{
    width:min(1160px,92%);
    margin:auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header{
    position:sticky;
    top:0;
    z-index:50;

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid var(--border);
}

.nav{
    min-height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.brand{
    display:flex;
    align-items:center;

    gap:10px;

    font-weight:900;
    font-size:1.25rem;

    color:var(--green-dark);
}

.brand img{
    width:44px;
    height:44px;

    border-radius:50%;
}

.nav-links{
    display:flex;
    gap:18px;

    align-items:center;

    font-size:.92rem;
    font-weight:600;
}

.nav-links a{
    color:#384638;

    transition:
        color .2s ease,
        background .2s ease;
}

.nav-links a:hover,
.nav-links a.active{
    color:var(--green);
}

.hamburger{
    display:none;

    background:#f0f7ee;

    color:var(--green-dark);

    border:0;
    border-radius:10px;

    font-size:1.8rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    padding:64px 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            #e6f5df 0,
            transparent 33%
        );
}

.hero-grid{
    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:44px;

    align-items:center;
}

.eyebrow{
    display:inline-flex;

    padding:7px 13px;

    border-radius:999px;

    background:#e8f6e6;

    color:#21753a;

    border:1px solid #d2ebd0;

    font-weight:800;
    font-size:.82rem;
}

.hero h1{
    font-size:clamp(3rem,7vw,6rem);

    line-height:.95;

    margin:18px 0 10px;

    letter-spacing:-.05em;

    color:#164d28;
}

.hero h2{
    color:#263d2c;
}

.lead{
    font-size:clamp(1.05rem,2vw,1.3rem);

    color:var(--muted);
}

.hero-media img{
    width:100%;

    border-radius:30px;

    box-shadow:
        0 22px 50px rgba(35,94,45,.14);

    aspect-ratio:4/3;

    object-fit:cover;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.actions{
    display:flex;
    flex-wrap:wrap;

    gap:12px;

    margin-top:24px;
}

.btn{
    border:0;

    border-radius:12px;

    padding:12px 18px;

    font-weight:800;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.btn:hover{
    transform:translateY(-2px);
}


/* Primary */

.btn-primary{
    background:var(--green);

    color:white;

    box-shadow:
        0 7px 18px rgba(32,126,56,.18);
}

.btn-primary:hover{
    background:var(--green-dark);
}


/* Secondary */

.btn-secondary{
    background:white;

    color:var(--green-dark);

    border:1px solid #cfe4cd;
}

.btn-secondary:hover{
    background:#f3faf2;
}


/* Dark button becomes yellow accent */

.btn-dark{
    background:var(--orange);

    color:#26351f;
}

.btn-dark:hover{
    background:#e8aa00;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
    padding:55px 0;
}

.section-title{
    font-size:clamp(2rem,4vw,3rem);

    margin:0 0 8px;

    color:#183d24;
}

.section-sub{
    color:var(--muted);

    margin:0 0 28px;
}


/* =========================================================
   GRID
   ========================================================= */

.grid{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
    background:var(--card);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    border:1px solid var(--border-light);

    transition:
        .2s transform,
        .2s box-shadow,
        .2s border-color;
}

.card:hover{
    transform:translateY(-4px);

    border-color:#cee4cb;

    box-shadow:
        0 16px 38px rgba(45,100,53,.12);
}

.card-img{
    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;
}

.card-body{
    padding:18px;
}

.card h3{
    margin:2px 0 8px;

    color:#253b29;
}

.card p{
    color:var(--muted);
}


/* =========================================================
   META / BADGES
   ========================================================= */

.meta{
    display:flex;

    gap:8px;

    flex-wrap:wrap;

    color:var(--muted);

    font-size:.88rem;
}

.badge{
    padding:4px 9px;

    border-radius:999px;

    background:#f1f6ef;

    color:#536653;

    border:1px solid #e2ece0;

    font-size:.76rem;

    font-weight:800;
}

.badge.green{
    background:#e8f7e8;

    color:#197336;

    border-color:#cfeace;
}

.badge.red{
    background:#fff0ee;

    color:#b52b27;

    border-color:#f5d7d3;
}

.price{
    font-weight:900;

    font-size:1.18rem;

    color:#176b2c;
}

.card-row{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    margin-top:14px;
}


/* =========================================================
   FILTERS
   ========================================================= */

.filters{
    display:grid;

    grid-template-columns:2fr repeat(4,1fr);

    gap:10px;

    background:white;

    padding:16px;

    border-radius:18px;

    border:1px solid var(--border);

    box-shadow:
        0 8px 24px rgba(49,89,52,.07);

    margin:22px 0;
}

.field{
    display:grid;

    gap:6px;
}

.field label{
    font-weight:800;

    font-size:.86rem;

    color:#405340;
}

.field input,
.field select,
.field textarea{
    width:100%;

    padding:12px;

    border:1px solid #d9e6d6;

    border-radius:11px;

    background:#fbfdf9;

    color:#2e3e2e;

    outline:none;

    transition:
        border .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#66a873;

    background:white;

    box-shadow:
        0 0 0 3px rgba(47,143,70,.10);
}


/* =========================================================
   FEATURE SECTION
   ========================================================= */

.feature-strip{
    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:12px;
}

.feature{
    background:white;

    border-radius:18px;

    padding:20px;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:
        0 5px 18px rgba(36,84,39,.05);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.feature:hover{
    transform:translateY(-3px);

    border-color:#badab8;
}

.feature b{
    display:block;

    color:#246936;

    margin-top:5px;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero{
    padding:44px 0 20px;

    background:
        linear-gradient(
            180deg,
            #eef8eb 0%,
            var(--cream) 100%
        );
}

.page-hero h1{
    font-size:clamp(2.4rem,5vw,4.2rem);

    margin:0;

    color:#174b27;
}

.prose{
    max-width:780px;
}


/* =========================================================
   DETAILS
   ========================================================= */

.detail{
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

    align-items:start;
}

.detail img{
    border-radius:28px;

    box-shadow:
        0 15px 40px rgba(38,94,45,.12);
}

.list{
    padding-left:22px;
}


/* =========================================================
   RECIPE STEPS
   ========================================================= */

.steps{
    counter-reset:step;

    list-style:none;

    padding:0;
}

.steps li{
    counter-increment:step;

    display:flex;

    gap:12px;

    margin:14px 0;
}

.steps li:before{
    content:counter(step);

    min-width:32px;
    height:32px;

    border-radius:50%;

    background:var(--green);

    color:#fff;

    font-weight:900;

    display:grid;

    place-items:center;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel{
    background:white;

    padding:24px;

    border-radius:20px;

    border:1px solid var(--border-light);

    box-shadow:var(--shadow);
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    background:#163c22;

    color:#eef8ef;

    padding:44px 0 24px;

    margin-top:50px;
}

.site-footer a{
    color:#e4f2e5;
}

.site-footer a:hover{
    color:#ffd65a;
}

.footer-grid{
    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:28px;
}

.footer-links{
    display:grid;

    gap:7px;
}


/* =========================================================
   FLOATING BUTTONS
   ========================================================= */

.floating{
    position:fixed;

    right:18px;
    bottom:18px;

    z-index:40;

    display:grid;

    gap:10px;
}

.float-btn{
    width:50px;
    height:50px;

    border:0;

    border-radius:50%;

    box-shadow:
        0 8px 22px rgba(0,0,0,.16);

    display:grid;

    place-items:center;

    font-size:1.3rem;

    background:#25D366;

    color:#fff;
}

.float-btn:hover{
    transform:translateY(-2px);
}

.backtop{
    background:#2f8f46;
}


/* =========================================================
   OPEN / CLOSED STATUS
   ========================================================= */

.status{
    font-weight:900;
}

.open{
    color:#80e393;
}

.closed{
    color:#ff958d;
}


/* =========================================================
   MODAL
   ========================================================= */

.modal{
    position:fixed;

    inset:0;

    background:rgba(20,49,26,.58);

    backdrop-filter:blur(3px);

    z-index:100;

    display:none;

    place-items:center;

    padding:18px;
}

.modal.open{
    display:grid;
}

.modal-box{
    background:white;

    border-radius:22px;

    padding:22px;

    width:min(520px,100%);

    max-height:90vh;

    overflow:auto;

    border:1px solid var(--border);

    box-shadow:
        0 20px 55px rgba(20,60,25,.20);
}

.modal-head{
    display:flex;

    justify-content:space-between;

    align-items:center;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

.icon-btn{
    border:0;

    background:#edf6eb;

    color:#256b37;

    border-radius:10px;

    padding:8px 11px;
}

.icon-btn:hover{
    background:#dff0dc;
}


/* =========================================================
   FAVORITE BUTTON
   ========================================================= */

.fav{
    border:0;

    background:#fff7dc;

    color:#d78f00;

    border-radius:50%;

    width:40px;
    height:40px;

    font-size:1.15rem;

    transition:
        transform .2s ease,
        background .2s ease;
}

.fav:hover{
    transform:scale(1.07);

    background:#fff0b8;
}


/* =========================================================
   GALLERY
   ========================================================= */

.gallery{
    columns:3 260px;

    column-gap:18px;
}

.gallery figure{
    break-inside:avoid;

    background:white;

    border-radius:18px;

    overflow:hidden;

    margin:0 0 18px;

    border:1px solid var(--border-light);

    box-shadow:var(--shadow);
}

.gallery figcaption{
    padding:12px;

    color:#4e604e;
}

.gallery img{
    width:100%;
}


/* =========================================================
   FAQ
   ========================================================= */

.accordion{
    display:grid;

    gap:10px;
}

.faq-item{
    background:white;

    border-radius:14px;

    border:1px solid var(--border);
}

.faq-q{
    width:100%;

    text-align:left;

    padding:17px;

    background:transparent;

    border:0;

    font-weight:900;

    color:#2b472f;

    display:flex;

    justify-content:space-between;
}

.faq-q:hover{
    color:var(--green);
}

.faq-a{
    display:none;

    padding:0 17px 17px;

    color:var(--muted);
}

.faq-item.open .faq-a{
    display:block;
}


/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;
}

.stars{
    color:#f5b400;
}


/* =========================================================
   NOTICES
   ========================================================= */

.notice{
    padding:14px;

    border-radius:14px;

    background:#fff8dc;

    color:#765900;

    border:1px solid #f3df90;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.empty{
    text-align:center;

    color:var(--muted);

    padding:40px;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.lightbox img{
    max-height:78vh;

    max-width:92vw;

    border-radius:20px;
}


/* =========================================================
   GLOBAL SEARCH
   ========================================================= */

.search-pop{
    position:fixed;

    inset:0;

    background:rgba(20,49,26,.62);

    backdrop-filter:blur(4px);

    z-index:90;

    display:none;

    padding:8vh 5%;
}

.search-pop.open{
    display:block;
}

.search-box{
    max-width:820px;

    margin:auto;

    background:white;

    border-radius:20px;

    padding:20px;

    border:1px solid var(--border);

    box-shadow:
        0 22px 60px rgba(25,70,30,.25);
}

.search-results{
    max-height:60vh;

    overflow:auto;

    display:grid;

    gap:6px;

    margin-top:10px;
}

.search-results a{
    padding:12px;

    border-radius:10px;

    background:#f6faf4;

    border:1px solid transparent;

    transition:.2s ease;
}

.search-results a:hover{
    background:#eaf5e8;

    border-color:#d4e9d2;
}


/* =========================================================
   SELECTION
   ========================================================= */

::selection{
    background:#caeac7;

    color:#173c22;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#f3f7f1;
}

::-webkit-scrollbar-thumb{
    background:#b8d4b6;

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#87b987;
}