/* =========================================================
   SABOR LEVE — design system
   Palette: forest green + citrus orange + tomato red on cream
   Display: Fraunces / Body: Work Sans / Labels: JetBrains Mono
   ========================================================= */

:root{
  --bg: #F8F4E9;
  --bg-deep: #142A20;
  --green: #1F3A2E;
  --green-light: #2F5142;
  --orange: #E8871E;
  --tomato: #C1440E;
  --text: #22241D;
  --text-soft: #5B5D4F;
  --card: #FFFFFF;
  --line: #DCD3B8;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20,42,32,0.10);
  --max: 1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Work Sans', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif;
  color:var(--green);
  line-height:1.1;
  margin:0 0 .4em;
  font-weight:600;
}
h1{font-size:clamp(2.2rem,5vw,3.6rem); font-weight:700;}
h2{font-size:clamp(1.6rem,3.2vw,2.4rem);}
h3{font-size:1.35rem;}
p{margin:0 0 1em;color:var(--text-soft);}
a{color:var(--tomato); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
ul{padding-left:1.2em;}
.container{max-width:var(--max); margin:0 auto; padding:0 24px;}

:focus-visible{outline:3px solid var(--orange); outline-offset:2px;}

/* -------- label / sticker signature element -------- */
.label{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.35em .7em;
  border:1.5px dashed var(--green);
  border-radius:6px;
  background:#FFFDF7;
  color:var(--green);
  transform:rotate(-1.5deg);
}
.label.orange{border-color:var(--orange); color:var(--orange);}
.label.tomato{border-color:var(--tomato); color:var(--tomato); transform:rotate(1.5deg);}

/* -------- perforated / scalloped divider -------- */
.scallop{
  height:14px;
  width:100%;
  background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--bg) 9px);
  background-size:20px 14px;
  background-repeat:repeat-x;
}
.scallop.on-deep{background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--bg-deep) 9px);}
.scallop.on-card{background-image: radial-gradient(circle at 10px 0, transparent 9px, var(--card) 9px);}

/* -------- header -------- */
header.site{
  background:var(--bg-deep);
  color:#F3EFE1;
  position:sticky; top:0; z-index:50;
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:var(--max); margin:0 auto;
}
.logo{
  font-family:'Fraunces', serif; font-weight:700; font-size:1.4rem;
  color:#F3EFE1; display:flex; align-items:baseline; gap:.3em;
}
.logo span{color:var(--orange); font-family:'JetBrains Mono',monospace; font-size:.65rem; letter-spacing:.08em; transform:rotate(-4deg); display:inline-block;}
nav.main-nav ul{
  display:flex; gap:28px; list-style:none; padding:0; margin:0;
}
nav.main-nav a{
  color:#E7E2CF; font-weight:500; font-size:.95rem;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--orange); text-decoration:none;}
.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.burger span{width:26px; height:2px; background:#F3EFE1; display:block;}

@media (max-width:840px){
  .burger{display:flex;}
  nav.main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--bg-deep);
    transform:translateX(100%); transition:transform .28s ease;
    padding:20px 24px; overflow-y:auto;
  }
  nav.main-nav.open{transform:translateX(0);}
  nav.main-nav ul{flex-direction:column; gap:0;}
  nav.main-nav li{border-bottom:1px solid rgba(255,255,255,.1);}
  nav.main-nav a{display:block; padding:16px 4px; font-size:1.05rem;}
}

/* -------- hero -------- */
.hero{
  background:var(--bg-deep); color:#F3EFE1; padding:56px 0 70px;
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.hero h1{color:#FBF8EF;}
.hero .eyebrow{margin-bottom:14px;}
.hero p.lead{color:#CFC9B0; font-size:1.1rem; max-width:46ch;}
.hero-actions{display:flex; gap:14px; margin-top:22px; flex-wrap:wrap;}
.hero-card{
  background:var(--card); color:var(--text); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); position:relative;
}
.hero-card .tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
@media (max-width:840px){ .hero-grid{grid-template-columns:1fr;} }

/* -------- buttons -------- */
.btn{
  display:inline-block; padding:13px 26px; border-radius:999px; font-weight:600;
  font-size:.95rem; cursor:pointer; border:2px solid transparent; text-decoration:none;
}
.btn-primary{background:var(--orange); color:#20180B;}
.btn-primary:hover{background:#f39b3c; text-decoration:none;}
.btn-outline{border-color:#F3EFE1; color:#F3EFE1;}
.btn-outline:hover{background:#F3EFE1; color:var(--bg-deep); text-decoration:none;}
.btn-dark{background:var(--green); color:#fff;}
.btn-dark:hover{background:var(--green-light); text-decoration:none;}

/* -------- sections -------- */
section{padding:64px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:32px; flex-wrap:wrap;}
.section-head p{margin:0; max-width:52ch;}

/* -------- recipe cards -------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid{grid-template-columns:1fr;}}

.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease;
}
.card:hover{transform:translateY(-4px);}
.card .thumb{
  height:150px; display:flex; align-items:center; justify-content:center;
  font-size:3rem; position:relative;
}
.card .thumb .corner{
  position:absolute; top:10px; right:10px; font-family:'JetBrains Mono',monospace;
  font-size:.65rem; background:rgba(255,255,255,.85); padding:3px 7px; border-radius:5px; color:var(--green);
}
.card .body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card .tags{display:flex; gap:8px; flex-wrap:wrap;}
.card h3{margin-bottom:2px;}
.card p{font-size:.92rem; margin-bottom:4px;}
.card .card-link{margin-top:auto; font-weight:600; font-size:.9rem;}

.thumb.c1{background:#FCE9CF;}
.thumb.c2{background:#DCEBDD;}
.thumb.c3{background:#F3DCD2;}
.thumb.c4{background:#F0E4C9;}
.thumb.c5{background:#DDE6D0;}
.thumb.c6{background:#F1DEDB;}

/* -------- category chips -------- */
.chips{display:flex; gap:12px; flex-wrap:wrap;}
.chip{
  background:var(--card); border:1px solid var(--line); padding:10px 18px; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--green);
}

/* -------- recipe detail page -------- */
.recipe-hero{background:var(--green); color:#F3EFE1; padding:48px 0;}
.recipe-hero .tag-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.recipe-body{display:grid; grid-template-columns:280px 1fr; gap:44px; padding-top:48px;}
@media (max-width:800px){.recipe-body{grid-template-columns:1fr;}}
.ingredients{
  background:var(--card); border:1.5px dashed var(--line); border-radius:var(--radius);
  padding:24px; align-self:start; position:sticky; top:96px;
}
.ingredients h3{margin-bottom:12px;}
.ingredients ul{list-style:none; padding:0; margin:0;}
.ingredients li{padding:9px 0; border-bottom:1px solid var(--line); font-size:.95rem;}
.ingredients li:last-child{border-bottom:none;}
.steps ol{padding-left:1.3em;}
.steps li{margin-bottom:16px; padding-left:6px;}
.steps li::marker{font-family:'Fraunces',serif; font-weight:700; color:var(--orange);}
.note-box{
  background:#FCE9CF; border-left:4px solid var(--orange); padding:16px 20px; border-radius:8px; margin-top:24px; font-size:.92rem;
}
.disclaimer-box{
  background:#F1EFE4; border-left:4px solid var(--green); padding:16px 20px; border-radius:8px; margin-top:16px; font-size:.85rem; color:var(--text-soft);
}

/* -------- newsletter -------- */
.newsletter{
  background:var(--green); color:#F3EFE1; border-radius:var(--radius); padding:40px; text-align:center;
}
.newsletter h2{color:#fff;}
.newsletter form{display:flex; gap:10px; justify-content:center; max-width:480px; margin:20px auto 0; flex-wrap:wrap;}
.newsletter input[type=email]{
  flex:1; min-width:200px; padding:13px 16px; border-radius:999px; border:none; font-size:.95rem;
}
.newsletter small{display:block; margin-top:14px; color:#CFC9B0;}

/* -------- footer -------- */
footer.site{background:var(--bg-deep); color:#CFC9B0; padding:48px 0 24px; margin-top:40px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
footer.site h4{color:#F3EFE1; font-family:'Work Sans',sans-serif; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px;}
footer.site ul{list-style:none; padding:0; margin:0;}
footer.site li{margin-bottom:9px;}
footer.site a{color:#CFC9B0; font-size:.92rem;}
footer.site a:hover{color:var(--orange);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12); margin-top:36px; padding-top:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:#9C9683;
}

/* -------- generic content pages -------- */
.page-hero{background:var(--green); color:#F3EFE1; padding:52px 0;}
.page-hero h1{color:#fff;}
.prose h2{margin-top:1.6em;}
.prose{max-width:74ch;}
.prose ul{color:var(--text-soft);}

/* -------- cookie banner -------- */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:200;
  background:var(--bg-deep); color:#F3EFE1; border-radius:12px; padding:18px 22px;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap; box-shadow:0 10px 30px rgba(0,0,0,.3);
  max-width:760px; margin:0 auto;
}
#cookie-banner p{color:#CFC9B0; margin:0; font-size:.88rem; flex:1; min-width:220px;}
#cookie-banner.hidden{display:none;}

/* -------- contact form -------- */
.form-box{background:var(--card); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); max-width:560px;}
.form-box label{display:block; font-weight:600; margin-bottom:6px; font-size:.9rem; color:var(--green);}
.form-box input, .form-box textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:8px; margin-bottom:18px; font-family:inherit; font-size:.95rem;
}
.form-box textarea{min-height:130px; resize:vertical;}

/* -------- 404 -------- */
.error-page{min-height:50vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:80px 24px;}
.error-page .big{font-family:'Fraunces',serif; font-size:6rem; color:var(--orange); line-height:1;}