/* =====================================================
   File: /assets/styles/base.css
   Fire2Flavor Base Stylesheet – v1.0  (Oct 2025)
   ===================================================== */

:root {
  --brand:#E95C0C;
  --ink:#111111;
  --muted:#666666;
  --bg:#FFFFFF;
  --card:#FAFAFA;
  --border:#EDEDED;
}

/* Reset / structure */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;}

/* Headings & text */
h1{color:var(--brand);margin:1.25rem 0 .5rem;font-size:2rem;}
h2{margin:1.75rem 0 .75rem;font-size:1.4rem;}
h3{margin:1rem 0 .5rem;font-size:1.15rem;}
p,ul,ol{margin-bottom:1rem;font-size:1rem;color:var(--ink);}
strong,b{font-weight:600;}
ul,ol{padding-left:1.25rem;}

/* Links */
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}

/* Containers */
main,header,footer,section{max-width:880px;margin:0 auto;padding:24px;}
section{margin-bottom:24px;}

/* Cards / details */
details{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 12px;margin:10px 0;}
summary{cursor:pointer;font-weight:600;color:var(--brand);}

/* Buttons */
.btn{display:inline-block;padding:10px 18px;border-radius:999px;background:var(--brand);color:#fff;text-decoration:none;font-weight:600;}
.btn:hover{opacity:0.9;}

/* Footer */
.site-footer{background:var(--card);border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--muted);padding:24px 16px;margin-top:48px;}
.site-footer a{color:var(--brand);text-decoration:none;margin:0 4px;}
.site-footer a:hover{text-decoration:underline;}
.site-footer .affiliate-note{font-size:12px;color:#999;margin-top:10px;}
/* ===== Header (full-bleed bar; content constrained inside .inner) ===== */
.site-header { width:100%; background:#2b1d16; color:#fff; }
.site-header .inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 16px;
}

/* Layout: burger (left) | nav (middle) | brand (right) */
.burger { background:none; border:0; padding:6px; cursor:pointer; }
.burger .line { display:block; width:22px; height:2px; margin:4px 0; background:#fff; }

.nav { display:flex; gap:14px; }
.nav a { color:#fff; text-decoration:none; opacity:.9; font-weight:600; }
.nav a:hover, .nav a.is-active { opacity:1; text-decoration:underline; }

/* brand pinned right */
.brand { margin-left:auto; display:flex; align-items:center; gap:8px; color:#fff; text-decoration:none; font-weight:800; }
.brand-mark { width:28px; height:28px; }
.brand-name { font-size:1.05rem; letter-spacing:.2px; }

/* Mobile: show drawer, keep brand on right */
@media (max-width: 768px){
  .nav {
    position: fixed;
    inset: 56px 0 auto 0;
    background:#2b1d16;
    display: none;
    flex-direction: column;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,.12);
    z-index: 10;
  }
  .nav.open { display:flex; }
}