/*  Emberfall site navigation -- the one copy.
    --------------------------------------------------------------
    The main site, the forum and the store are three different rendering
    systems (static HTML, a phpBB template, a Jinja template), so the markup has
    to be repeated in each. The styling does not: all three link this file, which
    is why they cannot drift apart.

    Every colour carries a literal fallback, so the bar is correct on a page that
    has not defined the palette tokens.

    The markup each page must repeat verbatim:

      <nav class="ef-nav"><div class="ef-nav-inner">
        <a class="ef-brand" href="/" title="Emberfall"><img src="/assets/wordmark.png" alt="Emberfall"></a>
        <ul>
          <li><a href="/#features">Features</a></li>
          <li><a href="/#start">Getting started</a></li>
          <li><a href="/#connect">Connect</a></li>
          <li><a href="/#rules">Rules</a></li>
          <li><a href="/forum/">Forum</a></li>
          <li><a href="/store">Store</a></li>
        </ul>
        <a class="ef-cta" href="/Emberfall.jar">Play now</a>
      </div></nav>

    The link for the page you are on gets aria-current="page".
    --------------------------------------------------------------
*/

/* The component sets its own box model rather than trusting the host page's
   reset: the site and the store set `* { box-sizing: border-box }`, prosilver
   has that rule commented out in base.css, and the difference put the forum's
   bar 24px wider than the other two -- max-width was excluding the padding
   there and including it everywhere else. */
.ef-nav, .ef-nav *, .ef-nav *:before, .ef-nav *:after{box-sizing:border-box}

.ef-nav{
	position:sticky; top:0; z-index:40;
	background:rgba(13,11,10,.86);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--line, #2b2320);
	font-family:var(--ef-sans, ui-sans-serif),-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1.5;
}
.ef-nav-inner{
	width:100%; max-width:68rem; margin-inline:auto; padding-inline:1.5rem;
	display:flex; align-items:center; gap:2rem; height:4rem;
}
.ef-brand{display:flex; align-items:center; text-decoration:none; flex:none}
.ef-brand img{height:2.6rem; width:auto; display:block}
.ef-nav ul{
	display:flex; align-items:center; gap:1.5rem;
	list-style:none; margin:0 0 0 auto; padding:0;
	font-size:.92rem; line-height:1;
}
.ef-nav ul li{margin:0; padding:0; list-style:none}
.ef-nav ul li:before{content:none}
.ef-nav ul a{color:var(--ink-2, #a49585); text-decoration:none; white-space:nowrap}
.ef-nav ul a:hover{color:var(--ink, #ece4d8); text-decoration:none}
.ef-nav ul a[aria-current="page"]{
	color:var(--ink, #ece4d8);
	border-bottom:2px solid var(--ember, #e0873a);
	padding-bottom:.35rem;
}
.ef-cta{
	flex:none;
	background:var(--ember, #e0873a); color:#1a0f06;
	padding:.45rem 1rem; border-radius:6px;
	text-decoration:none; font-weight:650; font-size:.9rem; white-space:nowrap;
}
.ef-cta:hover{background:var(--ember-2, #f0a95c); color:#1a0f06; text-decoration:none}

/* Below this the six links no longer fit beside the wordmark; the brand and the
   call to action are what matter on a phone. */
@media (max-width:60rem){
	.ef-nav ul{display:none}
	.ef-nav-inner{gap:1rem; justify-content:space-between}
}