/*
Theme Name: Recipes Fast Food
Theme URI: https://recipesfastfood.com
Author: RecipesFastFood
Description: A fast food recipe theme with custom post types, categories, and SEO schema.
Version: 1.0
License: GNU General Public License v2
Text Domain: recipes-fast-food
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Inter:wght@400;500&display=swap');

:root {
  --red: #E53E3E;
  --red-dark: #C53030;
  --orange: #ED8936;
  --yellow: #F6E05E;
  --dark: #1A202C;
  --gray: #4A5568;
  --light: #F7FAFC;
  --white: #FFFFFF;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; color:var(--dark); background:var(--light); line-height:1.7; }
h1,h2,h3,h4,h5,h6 { font-family:'Poppins',sans-serif; font-weight:700; line-height:1.2; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; height:auto; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

/* Header */
.site-header { background:var(--white); box-shadow:0 2px 10px rgba(0,0,0,.06); position:sticky; top:0; z-index:100; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; height:72px; }
.site-logo { font-family:'Poppins',sans-serif; font-weight:800; font-size:1.4rem; color:var(--red); }
.site-logo span { color:var(--orange); }
.main-nav ul { display:flex; gap:28px; list-style:none; }
.main-nav a { font-weight:500; font-size:.95rem; color:var(--gray); transition:color .2s; }
.main-nav a:hover { color:var(--red); }
.mobile-toggle { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; }

/* Hero */
.hero { position:relative; min-height:420px; display:flex; align-items:center; background-size:cover; background-position:center; }
.hero::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(26,32,44,.85),rgba(229,62,62,.6)); }
.hero .container { position:relative; z-index:2; color:var(--white); }
.hero h1 { font-size:2.8rem; margin-bottom:12px; }
.hero p { font-size:1.15rem; opacity:.9; max-width:550px; margin-bottom:24px; }
.btn { display:inline-block; padding:14px 32px; border-radius:12px; font-family:'Poppins',sans-serif; font-weight:600; font-size:1rem; transition:all .2s; cursor:pointer; border:none; }
.btn-primary { background:var(--red); color:var(--white); }
.btn-primary:hover { background:var(--red-dark); transform:translateY(-2px); }


.hero-buttons {
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:24px;
}

.hero-buttons .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-secondary {
  background:transparent;
  color:var(--white);
  border:2px solid var(--white);
}

.btn-secondary:hover {
  background:rgba(255,255,255,.08);
  transform:translateY(-2px);
}

html {
  scroll-behavior:smooth;
}

/* Cards */
.recipe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px; }
.recipe-card { background:var(--white); border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.06); transition:transform .25s,box-shadow .25s; }
.recipe-card:hover { transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.12); }
.recipe-card img { width:100%; height:220px; object-fit:cover; }
.recipe-card-body { padding:20px; }
.recipe-card-body h3 { font-size:1.15rem; margin-bottom:6px; }
.recipe-card-body .meta { font-size:.85rem; color:var(--gray); display:flex; gap:16px; margin-bottom:8px; }
.recipe-card-body .category-tag { display:inline-block; background:var(--red); color:var(--white); padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:600; }

/* Category Grid */
.category-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; }
.category-card { position:relative; border-radius:16px; overflow:hidden; height:200px; }
.category-card img { width:100%; height:100%; object-fit:cover; }
.category-card .overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.7),transparent); display:flex; align-items:flex-end; padding:20px; }
.category-card h3 { color:var(--white); font-size:1.1rem; }

/* Single Recipe */
.recipe-single { padding:40px 0; }
.recipe-single h1 { font-size:2.2rem; margin-bottom:16px; }
.recipe-meta { display:flex; gap:24px; margin-bottom:24px; flex-wrap:wrap; }
.recipe-meta .meta-item { background:var(--white); padding:12px 20px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.recipe-meta .meta-item span { display:block; font-size:.8rem; color:var(--gray); }
.recipe-meta .meta-item strong { font-size:1.1rem; }
.recipe-featured-img { border-radius:16px; overflow:hidden; margin-bottom:32px; }
.recipe-featured-img img { width:100%; max-height:500px; object-fit:cover; }
.recipe-content { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.ingredients-list { list-style:none; }
.ingredients-list li { padding:10px 0; border-bottom:1px solid #E2E8F0; display:flex; align-items:center; gap:10px; cursor:pointer; }
.ingredients-list li.checked { text-decoration:line-through; opacity:.5; }
.instructions-list { list-style:none; counter-reset:step; }
.instructions-list li { counter-increment:step; padding:16px 0; border-bottom:1px solid #E2E8F0; padding-left:40px; position:relative; }
.instructions-list li::before { content:counter(step); position:absolute; left:0; top:16px; width:28px; height:28px; background:var(--red); color:var(--white); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; }

/* Nutrition Facts */
.nutrition-box { background:var(--white); border:2px solid var(--dark); padding:16px; max-width:320px; margin-top:24px; }
.nutrition-box h3 { font-size:1.6rem; border-bottom:8px solid var(--dark); padding-bottom:4px; margin-bottom:4px; }
.nutrition-box .nf-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid #ccc; font-size:.9rem; }
.nutrition-box .nf-row.thick { border-bottom:4px solid var(--dark); }

/* Footer */
.site-footer { background:var(--dark); color:var(--white); margin-top:60px; }
.site-footer .container { padding:48px 20px; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:32px; }
.site-footer h4 { font-family:'Poppins',sans-serif; font-size:.85rem; text-transform:uppercase; letter-spacing:1px; opacity:.5; margin-bottom:12px; }
.site-footer ul { list-style:none; }
.site-footer li { margin-bottom:8px; }
.site-footer a { opacity:.7; transition:opacity .2s; }
.site-footer a:hover { opacity:1; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:32px; padding-top:20px; text-align:center; font-size:.8rem; opacity:.4; }
.newsletter-form { display:flex; gap:8px; }
.newsletter-form input { flex:1; padding:10px 16px; border-radius:8px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:var(--white); font-size:.9rem; }
.newsletter-form button { padding:10px 20px; border-radius:8px; background:var(--red); color:var(--white); border:none; font-weight:600; cursor:pointer; }

/* Section */
.section { padding:60px 0; }
.section-title { font-size:1.8rem; margin-bottom:32px; text-align:center; }

/* Responsive */
@media(max-width:768px){
  .hero h1 { font-size:1.8rem; }
  .recipe-content { grid-template-columns:1fr; }
  .main-nav { display:none; }
  .mobile-toggle { display:block; }
  .main-nav.open { display:block; position:absolute; top:72px; left:0; right:0; background:var(--white); padding:20px; box-shadow:0 4px 12px rgba(0,0,0,.1); }
  .main-nav.open ul { flex-direction:column; gap:16px; }
}

/* Print */
@media print {
  .site-header,.site-footer,.btn,.newsletter-form { display:none !important; }
  .recipe-content { grid-template-columns:1fr; }
  body { font-size:12pt; }
}


/* ===== NEW EFFECTS ===== */

/* Menu hover zoom */
.main-nav a {
  display: inline-block;
  transition: color .2s ease, transform .2s ease;
}

.main-nav a:hover {
  color: var(--red);
  transform: scale(1.08);
}

/* Zoom images cards */
.category-card img,
.recipe-card img {
  transition: transform .4s ease;
}

.category-card:hover img,
.recipe-card:hover img {
  transform: scale(1.06);
}