/* ========== Base / Tokens ========== */
:root{
  --bg: #ffffff;
  --text: #1b1b1f;
  --muted: #636b74;
  --brand: #7a4b2c;       /* hazelnut brown */
  --brand-2: #c49a6c;     /* light nutty accent */
  --card: #f7f5f2;
  --ring: rgba(122,75,44,.25);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1115; --text:#eef1f4; --muted:#a9b1ba;
    --card:#161a20; --shadow:0 10px 30px rgba(0,0,0,.4);
    --ring: rgba(196,154,108,.3);
  }
}

html{scroll-behavior:smooth;}
*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Murecho", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:1.6;
  font-size:16px;
}

/* Typography */
h1,h2,h3,h4{margin:0 0 .6rem 0; line-height:1.25; font-weight:600}
h1{font-size:clamp(2rem, 3.5vw, 3rem)}
h2{font-size:clamp(1.5rem, 2.5vw, 2rem)}
h3{font-size:clamp(1.15rem, 1.8vw, 1.35rem)}
h4{font-size:1rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
p{margin:.6rem 0 1rem 0; color:var(--text)}
em{color:var(--muted)}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* Utility */
.container{max-width:1100px; margin:0 auto; padding:0 20px}

/* ========== Header ========== */
.header-bg-wrap{
  position:relative; overflow:hidden; border-radius:0 0 var(--radius) var(--radius);
  box-shadow:var(--shadow); background:linear-gradient(180deg, rgba(122,75,44,.15), transparent 60%);
}
.header-bg-image{
  width:100%; height:380px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.05);
}
.header-content{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:2rem;
}
.header-content h1{
  font-family:"Architects Daughter", cursive; 
  color:var(--text); text-shadow:0 6px 30px rgba(0,0,0,.35);
}
.header-content h2{
  color:#fff; opacity:.92; font-weight:600; 
  background:rgba(0,0,0,.35); padding:.5rem 1rem; border-radius:999px;
}

/* Fun subtle shine accent on the word “Calgary” */
.shine{
  background: linear-gradient(90deg, var(--brand-2), #fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
}

/* ========== Top bar / Hamburger ========== */
.w3-top{position:fixed; top:0; left:0; right:0; height:56px; z-index:20; pointer-events:none}
.hamburger-position{
  display:flex; justify-content:flex-start; align-items:center; height:56px;
  padding:0 .75rem; pointer-events:auto;
}
.w3-button{
  background:var(--card); border:1px solid transparent; border-radius:12px; cursor:pointer;
  box-shadow:var(--shadow); user-select:none;
}
.w3-button:hover{border-color:var(--brand-2); box-shadow:0 6px 24px var(--ring)}

/* ========== Sidebar (custom styling for the .w3-* classes in your HTML) ========== */
.w3-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:270px; background:var(--card);
  padding-top:70px; box-shadow:var(--shadow); z-index:30; border-right:1px solid rgba(0,0,0,.06);
}
.w3-bar-block .w3-bar-item{display:block; padding:.9rem 1.25rem; font-weight:600; color:var(--text)}
.w3-bar-item:hover{background:rgba(196,154,108,.15)}
.w3-card{border-radius:0}

/* ========== Main Layout ========== */
main{padding: clamp(12px, 2vw, 24px)}
.content{max-width:1100px; margin:-60px auto 2rem auto; padding:24px; background:var(--bg)}
/* Card-like articles */
article{
  background:var(--card); border-radius:var(--radius); padding:clamp(16px, 2vw, 28px); 
  margin:1.2rem 0; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.05)
}

/* Images */
.image-container{overflow:hidden; border-radius:calc(var(--radius) - 4px); margin-bottom:14px}
.image-container img{width:100%; height:auto; display:block; transform:scale(1.001); transition:transform .5s ease}
.image-container:hover img{transform:scale(1.02)}

/* Two-up grid for the drinks section */
.outer-container{
  display:grid; gap:clamp(14px, 2vw, 24px);
  grid-template-columns: 1fr; 
}
.inner-container{background:var(--bg); border-radius:var(--radius); padding:1rem; border:1px solid rgba(0,0,0,.06)}
.inner-container h3{margin-top:.25rem}
.inner-container ul{margin:.5rem 0 0 1rem}
.inner-container li{margin:.35rem 0}

@media (min-width: 860px){
  .outer-container{grid-template-columns: 1fr 1fr}
}

/* Lists inside recipe card */
ol{padding-left:1.25rem}
ul{padding-left:1.1rem}

/* ========== Footer ========== */
footer{margin:2rem 0 3rem}
footer .bg-container{
  max-width:1100px; margin:0 auto; background:var(--card); border-radius:var(--radius);
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06)
}
footer ol{
  display:flex; flex-wrap:wrap; gap:.35rem .75rem; list-style:decimal-leading-zero inside; 
  margin:0; padding:1rem 1.25rem;
}
footer a{font-weight:600}
footer a:hover{background:linear-gradient(90deg, rgba(196,154,108,.25), transparent); border-radius:8px; padding:.1rem .25rem}

/* ========== Nice little details ========== */
.content > h2{margin:1.8rem 0 .6rem}
article h3 + p{margin-top:.25rem}

/* Focus states for accessibility */
a:focus, button:focus, .w3-button:focus{
  outline:2px solid var(--brand-2);
  outline-offset:2px;
}

/* Print adjustments (screen CSS keeps it simple) */
@media print{
  .w3-top, .w3-sidebar{display:none !important}
  .header-bg-image{height:220px}
  article, footer .bg-container{box-shadow:none; border:1px solid #ddd}
}
/* --- Responsive layout fixes --- */
html, body {
  max-width: 100%;
  overflow-x: hidden;   /* stops sideways scrolling */
}

img, video, iframe {
  max-width: 100%;      /* makes images shrink if too big */
  height: auto;
  display: block;
}