/* ============================================================
   MYOWN.FOOD
   ============================================================ */

* {box-sizing:border-box;}
html, body {margin:0; padding:0; min-height:100%;}
body {font-family:Arial,Helvetica,sans-serif; color:#073f2c; background:#f4f4f0;}


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

.food-hero {position:relative; min-height:100vh; overflow:hidden; background-image:url('/images/food-hero.jpg'); background-position:center center; background-size:cover; background-repeat:no-repeat; display:flex; flex-direction:column;}
.food-hero-shade {position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.72) 25%,rgba(255,255,255,.32) 57%,rgba(255,255,255,0) 75%); pointer-events:none;}
.food-header,.food-search-area,.food-values {position:relative; z-index:2;}


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

.food-header {width:100%; max-width:1450px; margin:0 auto; padding:24px 45px 0; display:flex; justify-content:space-between; align-items:flex-start;}
.food-logo-link {display:block;}
.food-logo {display:block; height:auto;}
.food-community-message {margin-top:8px; font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:700; font-size:28px; line-height:1.05; color:#07552e; text-align:center; transform:rotate(-4deg);}


/* ============================================================
   SEARCH AREA
   ============================================================ */

.food-search-area {width:calc(100% - 60px); max-width:1080px; margin:50px auto 0; text-align:center;}
.food-search-area h1 {margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(38px,4vw,62px); line-height:1.05; color:#063f2c;}
.food-intro {margin:8px 0 22px; font-size:22px; line-height:1.4; color:#244b3e;}


/* ============================================================
   SEARCH BOX
   ============================================================ */

.food-search-box {width:100%; min-height:78px; padding:6px 7px 6px 22px; display:flex; align-items:center; background:rgba(255,255,255,.97); border:2px solid rgba(7,85,46,.35); border-radius:22px; box-shadow:0 8px 24px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.08);}
.food-search-icon {width:34px; min-width:34px; margin-right:15px;}
.food-search-icon svg {display:block; width:100%; fill:none; stroke:#06462f; stroke-width:2.2; stroke-linecap:round;}
.food-search-input {flex:1; min-width:0; padding:16px 0; border:0; outline:0; background:transparent; color:#183d31; font-family:inherit; font-size:20px;}
.food-search-input::placeholder {color:#8c9591;}
.food-search-button {min-width:235px; padding:20px 30px; border:0; border-radius:17px; background:#26833b; color:white; font-size:17px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; cursor:pointer; transition:background .18s ease,transform .18s ease;}
.food-search-button:hover {background:#176c30;}
.food-search-button:active {transform:translateY(1px);}


/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.food-results {margin-top:22px; padding:22px 26px; background:rgba(255,255,255,.94); border:1px solid rgba(7,85,46,.20); border-radius:16px; box-shadow:0 5px 18px rgba(0,0,0,.10); color:#183f32; font-size:17px; line-height:1.5; text-align:left;}


/* ============================================================
   FEATURES UNDER SEARCH
   ============================================================ */

.food-features {margin:22px auto 0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.72); border-radius:12px; backdrop-filter:blur(3px);}
.food-feature {position:relative; flex:1; min-width:0; padding:13px 22px; display:flex; align-items:center; justify-content:center; gap:11px; text-align:left;}
.food-feature + .food-feature::before {content:""; position:absolute; left:0; top:18%; width:1px; height:64%; background:rgba(7,63,44,.25);}
.feature-icon {width:42px; height:42px; flex:0 0 42px; fill:#07552e; stroke:#07552e; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.food-feature strong,.food-feature span {display:block;}
.food-feature strong {font-size:15px;}
.food-feature span {margin-top:2px; font-size:14px; color:#183f32;}


/* ============================================================
   BOTTOM VALUES BAR
   ============================================================ */

.food-values {width:100%; margin-top:auto; padding:25px 45px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:25px; background:linear-gradient(90deg,rgba(4,70,43,.98),rgba(6,84,47,.96),rgba(4,61,41,.98)); color:white; box-shadow:0 -8px 30px rgba(0,0,0,.15);}
.food-value {display:flex; align-items:center; justify-content:center; gap:14px;}
.food-value svg {width:48px; height:48px; flex:0 0 48px; fill:none; stroke:white; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;}
.food-value strong,.food-value span {display:block;}
.food-value strong {margin-bottom:4px; font-size:14px; text-transform:uppercase; letter-spacing:.4px;}
.food-value span {font-size:13px; color:rgba(255,255,255,.78);}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width:900px) {
    .food-header {padding:20px 25px 0;}
    .food-logo {width:300px;}
    .food-community-message {font-size:22px;}
    .food-search-area {width:calc(100% - 40px);}
    .food-search-area h1 {font-size:42px;}
    .food-intro {font-size:19px;}
    .food-features {flex-wrap:wrap;}
    .food-feature {flex:0 0 33.333%; padding:12px 10px;}
    .food-feature + .food-feature::before {display:none;}
    .food-values {grid-template-columns:repeat(2,1fr);}
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:600px) {
    .food-hero {min-height:100svh; background-position:center bottom;}
    .food-hero-shade {background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 46%,rgba(255,255,255,.30) 72%,rgba(255,255,255,0) 88%);}

    .food-header {padding:16px 16px 0; justify-content:center;}
    .food-logo {width:290px; max-width:90vw;}
    .food-community-message {display:none;}

    .food-search-area {width:calc(100% - 28px); margin-top:22px;}
    .food-search-area h1 {font-size:34px; line-height:1.08;}
    .food-intro {margin:10px auto 18px; max-width:360px; font-size:17px;}

    .food-search-box {padding:8px; min-height:auto; flex-wrap:wrap; border-radius:18px;}
    .food-search-icon {width:29px; min-width:29px; margin-left:7px; margin-right:8px;}
    .food-search-input {width:calc(100% - 50px); flex:1; padding:15px 4px; font-size:16px;}
    .food-search-button {width:100%; min-width:0; margin-top:4px; padding:16px; border-radius:13px;}
    .food-results {margin-top:16px; padding:17px 18px; border-radius:13px; font-size:15px;}

    .food-features {margin-top:17px; padding:7px; flex-wrap:wrap;}
    .food-feature {flex:0 0 50%; justify-content:flex-start; padding:9px 10px; gap:8px;}
    .feature-icon {width:31px; height:31px; flex-basis:31px;}
    .food-feature strong,.food-feature span {font-size:12px;}
    .food-feature:last-child {flex-basis:100%; justify-content:center;}

    .food-values {margin-top:80px; padding:17px 15px; grid-template-columns:repeat(2,1fr); gap:18px 10px;}
    .food-value {justify-content:flex-start;}
    .food-value svg {width:35px; height:35px; flex-basis:35px;}
    .food-value strong {font-size:11px;}
    .food-value span {font-size:10px;}
}

.food-result-item {padding:12px 0; border-bottom:1px solid rgba(7,85,46,.15);}
.food-result-item:last-child {border-bottom:0;}


/* ============================================================
   VERY SMALL PHONES
   ============================================================ */

@media (max-width:380px) {
    .food-search-area h1 {font-size:30px;}
    .food-feature {flex-basis:100%;}
    .food-feature:last-child {justify-content:flex-start;}
    .food-values {grid-template-columns:1fr;}
}