/*
Theme Name: Home Feast
Theme URI: https://example.com/home-feast
Author: Custom Theme Development
Description: Lightweight one-page WordPress theme for a homemade meal delivery business. Includes Customizer settings, native menus, editable meal items, testimonials, contact details, and footer content.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: home-feast
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==================================================
HOME FEAST - PREMIUM FOOD BRAND CSS
================================================== */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:'Inter',sans-serif;
    color:#2B1B14;
    background:#FFF7ED;

}



h1,
h2,
h3{

    font-family:'Playfair Display',serif;

}



/* ================= NAVBAR ================= */


.glass-nav{

    background:rgba(255,247,237,.85);

    backdrop-filter:blur(15px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



.nav-link{

    position:relative;

    transition:.3s;

}



.nav-link:hover{

    color:#E86A1C;

}




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


.hero-image{

    height:650px;

    object-fit:cover;

}



.trust-box{


background:white;

padding:15px;

border-radius:20px;

text-align:center;

font-size:14px;

font-weight:600;

box-shadow:

0 15px 35px rgba(0,0,0,.08);


transition:.3s;

}



.trust-box:hover{

transform:translateY(-8px);

}




.floating-card{


position:absolute;

background:white;

padding:18px 25px;

border-radius:25px;

font-weight:600;

font-size:14px;

box-shadow:

0 20px 40px rgba(0,0,0,.12);

animation:

float 4s infinite ease-in-out;


}



@keyframes float{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-15px);

}


}








/* ================= GENERAL ================= */


.section-title{


font-size:45px;

font-weight:800;

line-height:1.2;

}



@media(max-width:768px){


.section-title{

font-size:34px;

}

}





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


.feature-card{


background:white;

padding:35px;

border-radius:30px;


box-shadow:

0 20px 50px rgba(0,0,0,.06);


transition:.4s;


}



.feature-card:hover{


transform:translateY(-12px);


box-shadow:

0 25px 60px rgba(0,0,0,.12);


}



.feature-card h3{

font-size:24px;

margin-top:15px;

margin-bottom:10px;

}



.icon{

font-size:45px;

}







/* ================= COUNTERS ================= */



.counter-box{


background:white;

padding:30px 20px;

border-radius:25px;


box-shadow:

0 15px 40px rgba(0,0,0,.06);


}



.counter-box h3{


font-size:38px;

color:#E86A1C;

font-weight:800;


}







/* ================= PROCESS ================= */



.process-card{


background:#FFF7ED;

padding:40px;

border-radius:35px;

text-align:center;


transition:.3s;


}



.process-card:hover{


transform:scale(1.05);


}




.step{


width:70px;

height:70px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#E86A1C;

color:white;

border-radius:50%;


font-size:25px;

font-weight:bold;


margin-bottom:25px;

}







/* ================= FOOD CATEGORY ================= */


.food-category{


background:white;

border-radius:35px;

overflow:hidden;

box-shadow:

0 20px 40px rgba(0,0,0,.08);


transition:.4s;

}



.food-category:hover{


transform:translateY(-10px);


}




.food-category img{


width:100%;

height:250px;

object-fit:cover;

}



.food-category div{


padding:25px;


}



.food-category button{


margin-top:15px;

background:#E86A1C;

color:white;

padding:10px 25px;

border-radius:30px;

border:none;


}







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



.menu-card{


background:white;

padding:20px;

border-radius:30px;


box-shadow:

0 20px 40px rgba(0,0,0,.08);


transition:.3s;


}



.menu-card:hover{


transform:translateY(-10px);


}



.menu-card img{


height:220px;

width:100%;

object-fit:cover;

border-radius:25px;


}



.menu-card h3{


font-size:22px;

margin:20px 0 10px;

}



.veg{


background:#3A7D44;

color:white;

padding:5px 12px;

border-radius:20px;

font-size:12px;


}



.menu-card button{


width:100%;

margin-top:15px;

background:#E86A1C;

color:white;

padding:12px;

border-radius:25px;

border:none;

font-weight:600;


}








/* ================= BENEFITS ================= */


.benefit-item{


display:flex;

gap:20px;

align-items:flex-start;


background:white;

padding:20px;

border-radius:25px;

box-shadow:

0 10px 30px rgba(0,0,0,.06);


}



.benefit-item:first-letter{

font-size:30px;

}








/* ================= PRICING ================= */


.pricing-card{


background:white;

padding:40px;

border-radius:35px;


box-shadow:

0 20px 50px rgba(0,0,0,.08);


position:relative;

transition:.4s;


}



.pricing-card:hover{

transform:translateY(-10px);

}



.pricing-card h3{


font-size:28px;

}



.pricing-card h2{


font-size:45px;

margin:20px 0;

}



.pricing-card span{


font-size:16px;

}



.pricing-card li{


margin:15px 0;

}



.pricing-card button{


background:#E86A1C;

color:white;

padding:14px 30px;

border-radius:30px;

border:none;

margin-top:25px;


}



.featured{


border:3px solid #E86A1C;

transform:scale(1.05);


}



.popular{


position:absolute;

top:-15px;

left:50%;

transform:translateX(-50%);


background:#D4A017;

color:white;

padding:8px 20px;

border-radius:20px;

font-size:13px;

}





/* ================= TESTIMONIAL ================= */



.testimonial-wrapper{


position:relative;

max-width:600px;

margin:auto;


}



.testimonial{


display:none;

background:white;

padding:40px;

border-radius:35px;

text-align:center;


}



.testimonial.active{


display:block;

animation:

fade .5s ease;


}



.testimonial img{


width:80px;

height:80px;

border-radius:50%;

margin:auto;

object-fit:cover;


}



@keyframes fade{


from{

opacity:0;

}


to{

opacity:1;

}


}








/* ================= LOCATION ================= */


.location-card{


background:#FFF7ED;

padding:35px;

border-radius:30px;

text-align:center;

transition:.3s;


}



.location-card:hover{


background:white;

box-shadow:

0 20px 40px rgba(0,0,0,.08);


}



.delivery-badge{


background:#3A7D44;

color:white;

padding:15px 30px;

border-radius:30px;

font-weight:bold;


}








/* ================= INGREDIENT ================= */


.ingredient{


background:white;

padding:18px;

border-radius:20px;

font-weight:600;

box-shadow:

0 10px 25px rgba(0,0,0,.05);


}








/* ================= PROMISE ================= */


.promise-box{


background:#2B1B14;

color:white;

padding:70px 40px;

border-radius:50px;

text-align:center;


}



.promise-box h2{


font-size:40px;


}








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


.faq{


border-bottom:1px solid #ddd;

padding:20px 0;


}



.faq button{


width:100%;

display:flex;

justify-content:space-between;

font-size:20px;

font-weight:600;

background:none;

border:none;

cursor:pointer;


}



.faq p{


max-height:0;

overflow:hidden;

transition:.4s;

color:#666;


}



.faq.active p{


max-height:100px;

padding-top:15px;


}







/* ================= CONTACT ================= */



.contact-input{


width:100%;

padding:18px;

border-radius:20px;

border:none;

background:white;

outline:none;


box-shadow:

0 10px 30px rgba(0,0,0,.05);


}








/* ================= SCROLL ANIMATION ================= */


.reveal{


opacity:0;

transform:translateY(40px);

transition:.8s;


}



.reveal.show{


opacity:1;

transform:translateY(0);


}








/* ================= BUTTON EFFECT ================= */


button,
a{


transition:.3s;


}



button:hover,
a:hover{


cursor:pointer;


}







/* ================= RESPONSIVE ================= */


@media(max-width:768px){


.hero-image{

height:450px;

}



.floating-card{


font-size:12px;

padding:12px;

}



.promise-box h2{

font-size:28px;

}



.section-title{

font-size:32px;

}


.featured{

transform:none;

}


}
 body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
li {
    cursor: default;
}
/* ==================================================
VANILLA CSS LAYOUT SYSTEM (TAILWIND-FREE)
================================================== */
:root{
  --primary:#E86A1C;
  --cream:#FFF7ED;
  --brown:#2B1B14;
  --green:#3A7D44;
  --gold:#D4A017;
  --muted:#6b7280;
  --container:80rem;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button,input,textarea{font:inherit;}
section{scroll-margin-top:88px;}

.hf-bg-cream{background:var(--cream)}
.hf-bg-white{background:#fff}
.hf-bg-primary{background:var(--primary)}
.hf-bg-green{background:var(--green)}
.hf-bg-brown{background:var(--brown)}
.hf-bg-orange-100{background:#ffedd5}
.hf-text-brown{color:var(--brown)}
.hf-text-primary{color:var(--primary)}
.hf-text-white{color:#fff}
.hf-text-gray-600{color:#4b5563}
.hf-text-gray-300{color:#d1d5db}
.hf-text-gray-400{color:#9ca3af}
.hf-overflow-x-hidden{overflow-x:hidden}
.hf-overflow-hidden{overflow:hidden}
.hf-fixed{position:fixed}
.hf-relative{position:relative}
.hf-inset-0{inset:0}
.hf-top-0{top:0}.hf-top-10{top:2.5rem}
.hf-left-0{left:0}.hf-left-10{left:2.5rem}.hf--left-8{left:-2rem}
.hf--right-8{right:-2rem}.hf-right-6{right:1.5rem}
.hf-bottom-20{bottom:5rem}.hf-bottom-5{bottom:1.25rem}.hf-bottom-6{bottom:1.5rem}
.hf-z-40{z-index:40}.hf-z-50{z-index:50}
.hf-hidden{display:none}
.hf-block{display:block}
.hf-inline-block{display:inline-block}
.hf-flex{display:flex}
.hf-inline-flex{display:inline-flex}
.hf-grid{display:grid}
.hf-flex-wrap{flex-wrap:wrap}
.hf-items-center{align-items:center}
.hf-justify-between{justify-content:space-between}
.hf-justify-center{justify-content:center}
.hf-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hf-gap-4{gap:1rem}.hf-gap-6{gap:1.5rem}.hf-gap-8{gap:2rem}.hf-gap-10{gap:2.5rem}.hf-gap-14{gap:3.5rem}
.hf-max-w-xl{max-width:36rem}.hf-max-w-2xl{max-width:42rem}.hf-max-w-4xl{max-width:56rem}.hf-max-w-6xl{max-width:72rem}.hf-max-w-7xl{max-width:var(--container)}
.hf-mx-auto{margin-left:auto;margin-right:auto}
.hf-mt-2{margin-top:.5rem}.hf-mt-4{margin-top:1rem}.hf-mt-5{margin-top:1.25rem}.hf-mt-6{margin-top:1.5rem}.hf-mt-8{margin-top:2rem}.hf-mt-10{margin-top:2.5rem}
.hf-mb-2{margin-bottom:.5rem}.hf-mb-4{margin-bottom:1rem}.hf-mb-8{margin-bottom:2rem}.hf-mb-12{margin-bottom:3rem}.hf-mb-14{margin-bottom:3.5rem}
.hf-my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.hf-p-10{padding:2.5rem}
.hf-px-5{padding-left:1.25rem;padding-right:1.25rem}.hf-px-6{padding-left:1.5rem;padding-right:1.5rem}.hf-px-7{padding-left:1.75rem;padding-right:1.75rem}.hf-px-8{padding-left:2rem;padding-right:2rem}.hf-px-10{padding-left:2.5rem;padding-right:2.5rem}
.hf-py-2{padding-top:.5rem;padding-bottom:.5rem}.hf-py-3{padding-top:.75rem;padding-bottom:.75rem}.hf-py-4{padding-top:1rem;padding-bottom:1rem}.hf-py-5{padding-top:1.25rem;padding-bottom:1.25rem}.hf-py-8{padding-top:2rem;padding-bottom:2rem}.hf-py-14{padding-top:3.5rem;padding-bottom:3.5rem}.hf-py-20{padding-top:5rem;padding-bottom:5rem}.hf-py-24{padding-top:6rem;padding-bottom:6rem}
.hf-pt-36{padding-top:9rem}.hf-pb-20{padding-bottom:5rem}.hf-pb-24{padding-bottom:6rem}
.hf-w-full{width:100%}.hf-w-12{width:3rem}.hf-h-12{height:3rem}
.hf-text-center{text-align:center}
.hf-text-sm{font-size:.875rem}.hf-text-lg{font-size:1.125rem}.hf-text-2xl{font-size:1.5rem}.hf-text-3xl{font-size:1.875rem}.hf-text-4xl{font-size:2.25rem}.hf-text-5xl{font-size:3rem}
.hf-font-medium{font-weight:500}.hf-font-semibold{font-weight:600}.hf-font-bold{font-weight:700}
.hf-font-display{font-family:'Playfair Display',serif}
.hf-leading-tight{line-height:1.18}
.hf-border{border-width:1px;border-style:solid}.hf-border-primary{border-color:var(--primary)}.hf-border-gray-700{border-color:#374151}
.hf-rounded-full{border-radius:9999px}.hf-rounded-b-3xl{border-radius:0 0 1.5rem 1.5rem}.hf-rounded-40px{border-radius:40px}
.hf-shadow-lg{box-shadow:0 10px 30px rgba(0,0,0,.12)}.hf-shadow-xl{box-shadow:0 20px 45px rgba(0,0,0,.15)}.hf-shadow-2xl{box-shadow:0 25px 60px rgba(0,0,0,.2)}
.hf-transition,.hf-transition-all{transition:all .3s ease}.hf-duration-500{transition-duration:.5s}
.hf-hover-scale-105:hover{transform:scale(1.05)}
.hf-hover-bg-primary:hover{background:var(--primary)}
.hf-hover-text-white:hover{color:#fff}
.hf-space-y-5>*+*{margin-top:1.25rem}
.hf-animate-bounce{animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(-15%)}50%{transform:translateY(0)}}

.loader-hidden{opacity:0;visibility:hidden}
#navbar{background:linear-gradient(to bottom,rgba(255,247,237,.97),rgba(255,247,237,.75),transparent);z-index:50}
#navbar nav{
    background:rgba(255,247,237,.95);
    backdrop-filter:blur(12px);
}

#navbar .menu-item a{
    color:var(--brown);
}

#navbar .menu-item a:hover{
    color:#E86A1C;
}

#navbar > nav > a:first-child{
    color:var(--primary);
}

#navbar > nav > a.hf-bg-primary{
    color:white;
}
#mobileMenu a{font-weight:600;border-bottom:1px solid #f3f4f6}
#mobileMenu a:last-child{border-bottom:0}
.menu-card button,.pricing-card button,.food-category button,.contact-input+button{cursor:pointer}
.menu-card button:hover,.pricing-card button:hover,.food-category button:hover{filter:brightness(.92);transform:translateY(-2px)}
.form-status{min-height:1.5rem;color:var(--green);font-weight:600}
.toast{position:fixed;left:50%;bottom:2rem;z-index:80;transform:translate(-50%,140%);background:var(--brown);color:#fff;padding:.9rem 1.25rem;border-radius:999px;box-shadow:0 15px 40px rgba(0,0,0,.2);opacity:0;transition:.3s ease;text-align:center;max-width:calc(100% - 2rem)}
.toast-visible{transform:translate(-50%,0);opacity:1}
#topBtn{display:grid;place-items:center;border:0;font-size:1.25rem}
.contact-input:focus{box-shadow:0 0 0 3px rgba(232,106,28,.2),0 10px 30px rgba(0,0,0,.05)}

@media(min-width:640px){.hf-sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:768px){
  .hf-md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hf-md-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hf-md-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(min-width:1024px){
  .hf-lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hf-lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hf-lg-flex{display:flex}.hf-lg-block{display:block}.hf-lg-hidden{display:none!important}
  .hf-lg-p-16{padding:4rem}.hf-lg-text-5xl{font-size:3rem}.hf-lg-text-7xl{font-size:4.5rem}
}
@media(max-width:1023px){
  #navbar nav{background:rgba(255,247,237,.92);backdrop-filter:blur(12px)}
  .floating-card{display:none}
}
@media(max-width:767px){
  .hf-py-24{padding-top:4rem;padding-bottom:4rem}
  .hf-pt-36{padding-top:7rem}
  .hf-text-5xl{font-size:2.5rem}
  .hf-rounded-40px{border-radius:28px}
  .pricing-card,.feature-card,.process-card{padding:28px}
}

/* WordPress integration */
.custom-logo-link, .custom-logo-link-text { display:inline-flex; align-items:center; }
.custom-logo { max-height:58px; width:auto; }
#navbar .menu-item a { position:relative; transition:.3s; }
#navbar .menu-item a:hover { color:#E86A1C; }
.mobile-menu-list, .footer-menu { list-style:none; margin:0; padding:0; }
.mobile-menu-list a { display:block; padding:.75rem 0; }
.footer-menu a { display:block; margin-bottom:.5rem; }
.menu-card .wp-post-image, .testimonial .wp-post-image { object-fit:cover; }
.testimonial .wp-post-image { width:90px; height:90px; border-radius:999px; }