/* ============================================================
   site-nav.css
   Shared bottom rail navigation for Bumble Branch.
   Link this AFTER any page-specific stylesheet (like News.css)
   so it can safely override anything that stylesheet sets on
   generic <nav> elements.
   ============================================================ */

:root{
  --barn-red:#ba0400;
  --barn-red-deep:#8a0300;
  --rust:#db5201;
  --marigold:#ffb634;
  --rail-text:#FFF9EE;
}

body{
  /* keeps page content from being hidden behind the fixed rail */
  padding-bottom:100px;
}

nav.rail{
  /* explicit resets first, in case the page stylesheet styled
     the bare <nav> element (borders/margin/padding/etc.) */
  all:unset;
  box-sizing:border-box;

  position:fixed;
  bottom:0; left:0; right:0;
  display:flex;
  justify-content:center;
  overflow-x:auto;
  background:var(--barn-red);
  border-top:5px solid var(--barn-red-deep);
  z-index:100;
}

nav.rail .tab{
  all:unset;
  box-sizing:border-box;
  flex:1 1 auto;
  max-width:180px;
  text-align:center;
  cursor:pointer;
  color:var(--rail-text);
  font-family:'Rye', serif;
  font-weight:400;
  font-size:.85rem;
  letter-spacing:.5px;
  padding:.9rem .6rem;
  border-left:1px solid rgba(255,255,255,0.15);
  white-space:nowrap;
  transition:background .15s ease, color .15s ease;
}
nav.rail .tab:first-child{ border-left:none; }
nav.rail .tab:hover{ background:var(--rust); }
nav.rail .tab.active{ background:var(--marigold); color:var(--barn-red-deep); }