/* ============================================================
   M.A. Knights — Fantasy Tavern NAV + FOOTER
   Shared header/footer chrome for About, Books, Events,
   Newsletter and Contact — brings them in line with index.html.

   Loads AFTER style.css. Colours are hardcoded (not the shared
   :root tokens) on purpose: style.css and the homepage stylesheet
   define --wood/--paper/--line with different values, so reusing
   var() here would risk bleeding the wrong shade into whichever
   file loads last. Body content on these pages keeps using
   style.css exactly as before — this file only touches .nav-*
   and .foot-* elements.

   Mobile menu behaviour is unchanged: /assets/js/main.js already
   toggles the .open class on .nav-panel via .nav-toggle, and this
   file reuses those same class names so no JS changes are needed.
   ============================================================ */

/* ---------- NAV ---------- */
.nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  padding:18px 56px; position:relative; z-index:5;
  background:linear-gradient(rgba(10,7,4,.62),rgba(10,7,4,.62)), url('/assets/img/wood-texture.jpg') 0 0/220px repeat;
  border-bottom:1px solid rgba(245,234,214,.1);
}
.nav-brand{ display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; }
.nav-brand img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid #c17f24; }
.nav-brand span{ font-family:'Playfair Display', Georgia, serif; font-weight:800; color:#f5ead6; font-size:19px; letter-spacing:.02em; }
.nav-links{ display:flex; gap:10px; flex-wrap:wrap; }
.plaque{
  font-family:'Lora', Georgia, serif; font-size:13px; font-weight:600; color:#f5ead6;
  padding:9px 16px; border-radius:3px; background:linear-gradient(180deg,#3a2b19,#2c2013);
  border:1px solid rgba(245,234,214,.12); box-shadow:0 3px 0 rgba(0,0,0,.35), 0 6px 10px rgba(0,0,0,.3);
  text-decoration:none;
}
.plaque:hover{ color:#f5ead6; filter:brightness(1.15); }
.plaque.active{ color:#241a10; background:linear-gradient(180deg,#e7a53f,#c17f24); border-color:transparent; }
.nav-cta{
  font-weight:700; font-size:13px; color:#241a10; background:#e7a53f;
  padding:10px 18px; border-radius:999px; box-shadow:0 4px 14px rgba(199,140,50,.35);
  text-decoration:none;
}
.nav-cta:hover{ color:#241a10; filter:brightness(1.06); }

/* Mobile hamburger + dropdown panel */
.nav-toggle{ display:none; background:none; border:none; padding:8px; cursor:pointer; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#f5ead6; margin:5px 0; border-radius:2px; }
.nav-panel{
  display:none; flex-direction:column; gap:8px; width:100%;
  margin-top:14px; padding-top:14px; border-top:1px solid rgba(245,234,214,.12);
}
.nav-panel.open{ display:flex; }
.nav-panel a{
  font-family:'Lora', Georgia, serif; font-size:14px; font-weight:600; color:#f5ead6;
  padding:10px 14px; border-radius:3px; background:linear-gradient(180deg,#3a2b19,#2c2013);
  border:1px solid rgba(245,234,214,.12); text-decoration:none;
}
.nav-panel a.active{ color:#241a10; background:linear-gradient(180deg,#e7a53f,#c17f24); border-color:transparent; }

@media (max-width: 860px){
  .nav{ padding:14px 20px; }
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- FOOTER ---------- */
.foot{
  padding:56px 56px 28px; text-align:left;
  background:linear-gradient(rgba(10,7,4,.72),rgba(10,7,4,.72)), url('/assets/img/wood-texture.jpg') 0 0/220px repeat;
}
.foot-inner{
  max-width:1320px; margin:0 auto; display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap;
  border-bottom:1px solid rgba(245,234,214,.12); padding-bottom:34px; margin-bottom:22px;
}
.foot .tagline-strange{
  font-family:'Playfair Display', Georgia, serif; font-style:italic; color:#e7a53f;
  font-weight:700; line-height:1.2; margin:0 0 10px; font-size:22px;
}
.foot-tag{ color:rgba(245,234,214,.55); font-size:13px; margin:0 0 14px; }
.foot-social{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; }
.foot-social a{ color:rgba(245,234,214,.7); text-decoration:none; }
.foot-social a:hover{ color:#e7a53f; }
.foot-social .foot-patreon{ color:#e7a53f; font-weight:700; }
.foot-links{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start; }
.foot-links a{ color:rgba(245,234,214,.7); font-size:14px; font-weight:600; text-decoration:none; }
.foot-links a:hover{ color:#e7a53f; }
.foot-copy{ max-width:1320px; margin:0 auto; color:rgba(245,234,214,.4); font-size:12px; text-align:center; }

@media (max-width: 860px){
  .foot{ padding:44px 20px 24px; }
  .foot-inner{ flex-direction:column; gap:26px; }
}