/*
Theme Name: Momos Craft
Theme URI: https://momoscraft.example.com
Author: Momos Craft
Author URI: https://momoscraft.example.com
Description: A warm, food-brand WordPress theme for Momos Craft by Sheikh Qirrat — built for pasta, burgers, momos, cookies and brownies. Fully editable from the WordPress Customizer: logo, hero video/image, menu category photos, contact details and social links. WooCommerce-ready.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: momos-craft
Tags: food, restaurant, e-commerce, custom-menu, featured-images, footer-widgets, threaded-comments, translation-ready, woocommerce
*/

/* ==========================================================================
   0. Custom properties (brand palette taken from the Momos Craft logo)
   ========================================================================== */
:root{
  --mc-cream:#faf6f0;
  --mc-cream-2:#f2e9dd;
  --mc-dark:#2b1c14;
  --mc-brown:#5a3a29;
  --mc-terracotta:#c17a5e;
  --mc-terracotta-dark:#a85f45;
  --mc-white:#ffffff;
  --mc-shadow:0 10px 30px rgba(43,28,20,0.12);
  --mc-radius:18px;
  --mc-font-display:'Playfair Display', Georgia, serif;
  --mc-font-body:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==========================================================================
   1. Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--mc-cream);
  color:var(--mc-dark);
  font-family:var(--mc-font-body);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--mc-terracotta-dark);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--mc-dark);}
h1,h2,h3,h4{font-family:var(--mc-font-display);color:var(--mc-dark);line-height:1.2;margin:0 0 .5em;}
ul{margin:0;padding:0;list-style:none;}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:50px;
  background:var(--mc-terracotta);
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  border:2px solid var(--mc-terracotta);
  cursor:pointer;
  transition:all .25s ease;
}
.btn:hover{background:transparent;color:var(--mc-terracotta);}
.btn.btn-outline{background:transparent;color:var(--mc-cream);border-color:var(--mc-cream);}
.btn.btn-outline:hover{background:var(--mc-cream);color:var(--mc-dark);}
.section{padding:80px 0;}
.section-tag{
  display:inline-block;color:var(--mc-terracotta-dark);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;font-size:.8rem;margin-bottom:10px;
}
.section-title{font-size:2.4rem;margin-bottom:18px;}
.section-desc{max-width:640px;color:var(--mc-brown);margin-bottom:40px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:999;
  background:rgba(250,246,240,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(43,28,20,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;}
.site-logo{display:flex;align-items:center;gap:10px;}
.site-logo img,.site-logo .custom-logo{height:58px !important;width:58px !important;max-width:58px !important;border-radius:50%;object-fit:cover;}
.site-logo .custom-logo-link{display:flex;align-items:center;}
.site-logo .logo-text{font-family:var(--mc-font-display);font-weight:700;font-size:1.3rem;color:var(--mc-dark);}
.site-logo .logo-text span{display:block;font-family:var(--mc-font-body);font-size:.65rem;letter-spacing:.15em;color:var(--mc-terracotta-dark);font-weight:600;text-transform:uppercase;}
.main-nav ul{display:flex;gap:30px;}
.main-nav a{font-weight:600;color:var(--mc-dark);font-size:.95rem;}
.header-actions{display:flex;align-items:center;gap:14px;}
.menu-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--mc-dark);}
@media(max-width:880px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:78%;max-width:320px;background:var(--mc-cream);
    box-shadow:-10px 0 30px rgba(0,0,0,.15);padding:100px 30px 30px;transform:translateX(100%);
    transition:transform .3s ease;z-index:1000;
  }
  .main-nav.is-open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:22px;}
  .menu-toggle{display:block;}
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;color:#fff;}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,28,20,.55),rgba(43,28,20,.75));}
.hero-content{position:relative;z-index:1;max-width:720px;padding:0 24px;margin:0 auto;text-align:center;}
.hero-content .section-tag{color:var(--mc-cream-2);}
.hero-content h1{color:#fff;font-size:3.4rem;margin-bottom:16px;}
.hero-content p{font-size:1.15rem;color:var(--mc-cream-2);margin-bottom:34px;}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
@media(max-width:600px){.hero-content h1{font-size:2.3rem;}}

/* ==========================================================================
   4. About
   ========================================================================== */
.about{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.about-img{border-radius:var(--mc-radius);overflow:hidden;box-shadow:var(--mc-shadow);}
@media(max-width:880px){.about{grid-template-columns:1fr;}}

/* ==========================================================================
   5. Menu categories
   ========================================================================== */
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.menu-card{
  background:#fff;border-radius:var(--mc-radius);overflow:hidden;box-shadow:var(--mc-shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.menu-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(43,28,20,.18);}
.menu-card-img{aspect-ratio:4/3;overflow:hidden;}
.menu-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.menu-card:hover .menu-card-img img{transform:scale(1.08);}
.menu-card-body{padding:22px 22px 26px;}
.menu-card-body h3{font-size:1.3rem;margin-bottom:6px;}
.menu-card-body p{color:var(--mc-brown);font-size:.92rem;margin-bottom:16px;}
.menu-card-body .btn{padding:9px 20px;font-size:.85rem;}
@media(max-width:960px){.menu-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.menu-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   6. WooCommerce shop grid (featured products on homepage)
   ========================================================================== */
.shop-teaser ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;}
.shop-teaser ul.products li.product{
  background:#fff;border-radius:var(--mc-radius);padding:18px;box-shadow:var(--mc-shadow);text-align:center;
}
.shop-teaser ul.products li.product img{border-radius:12px;margin-bottom:12px;}
.shop-teaser ul.products li.product .price{color:var(--mc-terracotta-dark);font-weight:700;}
@media(max-width:960px){.shop-teaser ul.products{grid-template-columns:repeat(2,1fr);}}

/* ==========================================================================
   7. Contact / footer
   ========================================================================== */
.site-footer{background:var(--mc-dark);color:var(--mc-cream-2);padding:70px 0 30px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer-col h4{color:#fff;margin-bottom:18px;font-size:1.05rem;}
.footer-col p,.footer-col a{color:var(--mc-cream-2);font-size:.92rem;}
.footer-col ul li{margin-bottom:10px;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.footer-logo img{height:48px;width:48px;border-radius:50%;object-fit:cover;}
.social-row{display:flex;gap:14px;margin-top:16px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.9rem;
}
.social-row a:hover{background:var(--mc-terracotta);border-color:var(--mc-terracotta);}
.footer-bottom{text-align:center;font-size:.82rem;color:rgba(250,246,240,.55);border-top:1px solid rgba(255,255,255,.1);padding-top:24px;}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr;}}

/* WhatsApp floating button */
.wa-float{
  position:fixed;bottom:26px;right:26px;z-index:998;background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;box-shadow:0 8px 20px rgba(0,0,0,.25);
}

/* Generic page/content */
.entry-content{max-width:800px;margin:60px auto;padding:0 24px;}
.page-hero-simple{background:var(--mc-cream-2);padding:60px 24px;text-align:center;}