/*
Theme Name: Faizan's Kitchen
Theme URI: https://example.com/
Author: OpenAI
Description: A colorful food blog theme converted from the supplied Faizan's Kitchen HTML design.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: faizans-kitchen
*/
:root{
    --plum:#3B1F3D;
    --plum-deep:#2A1530;
    --saffron:#FFA630;
    --saffron-deep:#E8891F;
    --coral:#FF5D5D;
    --mint:#5FD9A4;
    --cream:#FFF6EA;
    --paper:#FFFDF9;
    --gold:#F4B942;
    --ink:#2A1530;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  body{
    background:
      radial-gradient(circle at 10% 5%, rgba(255,166,48,0.14), transparent 40%),
      radial-gradient(circle at 90% 15%, rgba(95,217,164,0.14), transparent 40%),
      var(--cream);
    color:var(--ink);
    font-family:'Nunito',sans-serif;
    overflow-x:hidden;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2',cursive;
    font-weight:800;
    line-height:1.05;
  }
  a{text-decoration:none;color:inherit;}
  img{max-width:100%;display:block;}

  /* ===== 3D shadow system =====
     layered shadows: near/mid/far give real depth instead of one flat offset */
  .depth-1{ box-shadow:
      0 1px 2px rgba(42,21,48,0.10),
      0 4px 8px rgba(42,21,48,0.10),
      0 10px 20px rgba(42,21,48,0.12); }
  .depth-2{ box-shadow:
      0 2px 4px rgba(42,21,48,0.14),
      0 10px 18px rgba(42,21,48,0.16),
      0 24px 40px rgba(42,21,48,0.20); }

  /* ===== Nav ===== */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(255,246,234,0.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(42,21,48,0.08);
  }
  .nav{
    max-width:1180px;margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 24px;
  }
  .logo{
    font-family:'Baloo 2';font-weight:800;font-size:1.5rem;
    display:flex;align-items:center;gap:10px;color:var(--plum);
  }
  .logo .badge{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(145deg,var(--saffron),var(--coral));
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;
    box-shadow:
      inset 0 2px 3px rgba(255,255,255,0.5),
      inset 0 -3px 4px rgba(0,0,0,0.15),
      0 6px 12px rgba(255,93,93,0.35);
  }
  .nav-links{display:flex;gap:30px;font-weight:700;font-size:0.98rem;color:var(--plum);}
  .nav-links a{transition:color .15s;}
  .nav-links a:hover{color:var(--coral);}
  .nav-cta{
    background:linear-gradient(160deg,var(--mint),#3FBB84);
    color:var(--paper);
    padding:11px 22px;border-radius:14px;
    font-weight:800;font-size:0.95rem;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,0.35),
      inset 0 -3px 4px rgba(0,0,0,0.15),
      0 8px 16px rgba(95,217,164,0.4);
    transition:transform .15s, box-shadow .15s;
  }
  .nav-cta:hover{transform:translateY(-2px);
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,0.35),
      inset 0 -3px 4px rgba(0,0,0,0.15),
      0 12px 22px rgba(95,217,164,0.5);}

  /* ===== Hero ===== */
  .hero{
    max-width:1180px;margin:0 auto;
    padding:80px 24px 100px;
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:50px;
    align-items:center;
    position:relative;
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(160deg,#fff,var(--gold) 220%);
    padding:8px 16px;border-radius:999px;
    font-weight:800;font-size:0.85rem;color:var(--plum-deep);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.8),
      0 6px 14px rgba(244,185,66,0.4);
    margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(2.6rem,5.2vw,4.3rem);
    margin-bottom:22px;
    color:var(--plum);
    text-shadow: 0 3px 0 rgba(255,166,48,0.18);
  }
  .hero h1 .accent{
    background:linear-gradient(160deg,var(--coral),var(--saffron-deep));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero p{
    font-size:1.15rem;max-width:480px;margin-bottom:32px;
    font-weight:600;color:#6b5163;
  }
  .hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
  .btn-primary{
    background:linear-gradient(160deg,var(--coral),#E6453F);
    color:#fff;
    padding:15px 28px;border-radius:16px;font-weight:800;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,0.35),
      inset 0 -4px 6px rgba(0,0,0,0.18),
      0 10px 20px rgba(255,93,93,0.4);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-primary:hover{transform:translateY(-3px);
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,0.35),
      inset 0 -4px 6px rgba(0,0,0,0.18),
      0 16px 28px rgba(255,93,93,0.5);}
  .btn-ghost{
    padding:15px 28px;border-radius:16px;font-weight:800;
    background:var(--paper);color:var(--plum);
    box-shadow:
      0 2px 4px rgba(42,21,48,0.06),
      0 8px 16px rgba(42,21,48,0.10);
    transition:transform .15s, box-shadow .15s;
  }
  .btn-ghost:hover{transform:translateY(-3px);
    box-shadow:0 4px 8px rgba(42,21,48,0.08), 0 14px 24px rgba(42,21,48,0.14);}

  /* ===== Hero art: 3D floating card stack ===== */
  .hero-art{
    position:relative;height:440px;
    perspective:1200px;
  }
  .float-card{
    position:absolute;
    background:var(--paper);
    padding:14px 14px 46px;border-radius:22px;
    width:230px;
    transform-style:preserve-3d;
    animation:float 6s ease-in-out infinite;
  }
  .float-card img{border-radius:14px;height:180px;object-fit:cover;width:100%;}
  .float-card .cap{
    font-family:'Baloo 2';font-size:1rem;text-align:center;
    margin-top:12px;color:var(--plum);
  }
  .fc1{
    top:0;left:10px;z-index:3;width:220px;
    transform:rotateY(-14deg) rotateX(6deg) rotate(-4deg);
    animation-delay:0s;
  }
  .fc2{
    top:90px;right:0;z-index:2;width:195px;
    transform:rotateY(12deg) rotateX(-4deg) rotate(5deg);
    animation-delay:1.4s;
  }
  .fc3{
    bottom:0;left:100px;z-index:4;width:185px;
    transform:rotateY(-8deg) rotateX(4deg) rotate(3deg);
    animation-delay:2.8s;
  }
  @keyframes float{
    0%,100%{ margin-top:0px; }
    50%{ margin-top:-16px; }
  }
  .blob{
    position:absolute;border-radius:50%;
    filter:blur(50px);opacity:0.5;z-index:0;
  }
  .blob1{width:220px;height:220px;background:var(--mint);top:-40px;right:60px;}
  .blob2{width:180px;height:180px;background:var(--saffron);bottom:-20px;left:0;}

  @media(prefers-reduced-motion: reduce){
    .float-card{ animation:none; }
  }

  /* ===== Ticker ===== */
  .ticker-wrap{
    background:linear-gradient(90deg,var(--plum-deep),var(--plum));
    color:var(--cream);
    overflow:hidden;white-space:nowrap;padding:14px 0;
    box-shadow:inset 0 3px 8px rgba(0,0,0,0.3);
  }
  .ticker{
    display:inline-block;
    font-family:'Baloo 2';font-weight:700;font-size:1.1rem;
    animation:scroll 24s linear infinite;
  }
  .ticker span{margin:0 26px;color:var(--gold);}
  @keyframes scroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ===== Section heading ===== */
  .section{max-width:1180px;margin:0 auto;padding:100px 24px;}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:50px;flex-wrap:wrap;gap:16px;
  }
  .section-head h2{font-size:clamp(2rem,4vw,2.8rem);color:var(--plum);}
  .section-head p{font-weight:700;color:#8a6f5c;max-width:340px;}

  /* ===== Recipe cards — 3D tilt on hover ===== */
  .recipe-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
    perspective:1400px;
  }
  .recipe-card{
    background:var(--paper);
    border-radius:22px;
    overflow:hidden;
    box-shadow:
      0 2px 4px rgba(42,21,48,0.08),
      0 12px 24px rgba(42,21,48,0.10);
    transition:transform .3s ease, box-shadow .3s ease;
    position:relative;
    transform-style:preserve-3d;
  }
  .recipe-card:hover{
    transform:rotateX(4deg) rotateY(-4deg) translateY(-8px);
    box-shadow:
      0 4px 8px rgba(42,21,48,0.10),
      0 24px 44px rgba(42,21,48,0.22);
  }
  .recipe-img{height:200px;overflow:hidden;position:relative;}
  .recipe-img img{width:100%;height:100%;object-fit:cover;}
  .stamp{
    position:absolute;top:14px;right:14px;
    background:linear-gradient(155deg,#fff,var(--gold) 230%);
    border-radius:50%;width:60px;height:60px;
    display:flex;align-items:center;justify-content:center;
    font-family:'Baloo 2';font-weight:800;font-size:0.7rem;
    text-align:center;color:var(--plum-deep);
    line-height:1.05;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.7),
      0 6px 14px rgba(0,0,0,0.25);
  }
  .recipe-body{padding:22px;}
  .recipe-tag{
    display:inline-block;font-size:0.78rem;font-weight:800;
    color:var(--mint);margin-bottom:8px;
    text-transform:uppercase;letter-spacing:0.05em;
  }
  .recipe-body h3{font-size:1.32rem;margin-bottom:10px;color:var(--plum);}
  .recipe-meta{
    display:flex;gap:14px;font-size:0.85rem;font-weight:700;
    color:#8a6f5c;margin-top:14px;
  }

  /* ===== Category strip — 3D buttons ===== */
  .cat-strip{
    display:flex;gap:20px;overflow-x:auto;padding:8px 8px 20px;
  }
  .cat-pill{
    flex:0 0 auto;
    background:var(--paper);
    border-radius:20px;padding:26px 30px;
    text-align:center;font-family:'Baloo 2';font-weight:700;
    min-width:150px;color:var(--plum);
    box-shadow:
      0 2px 4px rgba(42,21,48,0.06),
      0 10px 20px rgba(42,21,48,0.10);
    transition:transform .2s, box-shadow .2s;
  }
  .cat-pill:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:
      0 4px 8px rgba(42,21,48,0.08),
      0 18px 30px rgba(42,21,48,0.16);
  }
  .cat-pill .emoji{
    font-size:2.3rem;display:block;margin-bottom:10px;
    filter:drop-shadow(0 6px 6px rgba(0,0,0,0.15));
  }

  /* ===== Newsletter — deep 3D panel ===== */
  .newsletter{
    background:linear-gradient(155deg,var(--plum),var(--plum-deep));
    color:var(--cream);
    border-radius:28px;
    padding:64px 40px;text-align:center;
    box-shadow:
      0 10px 20px rgba(42,21,48,0.25),
      0 30px 60px rgba(42,21,48,0.3),
      inset 0 1px 1px rgba(255,255,255,0.06);
    max-width:1180px;margin:0 auto 100px;
    position:relative;overflow:hidden;
  }
  .newsletter::before{
    content:"";position:absolute;width:300px;height:300px;
    background:radial-gradient(circle,rgba(255,166,48,0.25),transparent 70%);
    top:-100px;right:-60px;border-radius:50%;
  }
  .newsletter h2{color:var(--gold);margin-bottom:16px;font-size:clamp(1.8rem,3.5vw,2.5rem);}
  .newsletter p{font-weight:600;margin-bottom:30px;opacity:0.85;}
  .n-form{
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
    position:relative;z-index:1;
  }
  .n-form input{
    padding:15px 20px;border-radius:14px;border:none;
    font-family:'Nunito';font-weight:600;width:280px;max-width:100%;
    box-shadow:inset 0 2px 5px rgba(0,0,0,0.2);
  }
  .n-form button{
    background:linear-gradient(160deg,var(--saffron),var(--saffron-deep));
    color:#2A1530;
    padding:15px 28px;border-radius:14px;font-weight:800;
    border:none;font-family:'Nunito';cursor:pointer;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,0.4),
      0 8px 18px rgba(255,166,48,0.4);
    transition:transform .15s;
  }
  .n-form button:hover{transform:translateY(-2px);}

  /* ===== Footer ===== */
  footer{
    padding:44px 24px;
    display:flex;justify-content:space-between;align-items:center;
    max-width:1180px;margin:0 auto;flex-wrap:wrap;gap:16px;
    font-weight:700;color:var(--plum);
  }
  .footer-links{display:flex;gap:22px;}

  @media(max-width:880px){
    .hero{grid-template-columns:1fr;}
    .hero-art{height:360px;order:-1;}
    .recipe-grid{grid-template-columns:1fr;}
    .nav-links{display:none;}
  }