/* The PFX navigation bar, shared by every page except the 3-D homepage
   (index.html carries its own copy of the same bar). Self-contained: its own
   class names (pfx-*) so nothing in a page's stylesheet reaches it. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(assets/fonts/inter-latin-wght-normal.woff2) format('woff2'); }
.pfx-nav{
  position:sticky; top:0; z-index:200; height:84px;
  display:flex; align-items:center; gap:24px; padding:0 clamp(20px,3.4vw,56px);
  background:rgba(5,7,10,.62); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(223,231,224,.07);
  font-family:'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.pfx-nav *{ box-sizing:border-box; }
.pfx-brand{ display:block; flex:0 0 auto; }
.pfx-brand img{ display:block; height:30px; width:auto; }
/* the phone menu waits just off the right edge; clip the page's horizontal
   axis so that parked sheet can't make the whole page scroll sideways
   (clip, not hidden, so no scroll container is created) */
html{ overflow-x:clip; }
.pfx-links{ display:flex; align-items:center; gap:clamp(16px,2vw,34px); margin-left:auto; }
.pfx-link{ font-size:14px; font-weight:500; letter-spacing:-.005em; color:#aab4ad; text-decoration:none; transition:color .3s; }
.pfx-link:hover, .pfx-link.on{ color:#dfe7e0; }
.pfx-link--talk{ display:none; }
.pfx-actions{ display:flex; align-items:center; gap:14px; margin-left:clamp(18px,2.2vw,36px); flex:0 0 auto; }
.pfx-search{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer;
  background:none; color:#dfe7e0; border:0; transition:background .3s; }   /* no ring: just the glass */
.pfx-search svg{ width:18px; height:18px; }
.pfx-search:hover{ background:rgba(223,231,224,.12); }
.pfx-talk{ display:inline-flex; align-items:center; padding:11px 22px; border-radius:12px; background:#c00022; color:#fff;
  font-size:14px; font-weight:700; letter-spacing:-.01em; text-decoration:none; transition:background .3s; }
.pfx-talk:hover{ background:#a80f22; }
.pfx-burger{ display:none; width:26px; height:16px; position:relative; background:none; border:0; padding:0; cursor:pointer; }
.pfx-burger i{ position:absolute; right:0; height:1.5px; background:#dfe7e0; transition:transform .45s cubic-bezier(.16,1,.3,1), top .45s; }
.pfx-burger i:nth-child(1){ top:4px; width:26px; }
.pfx-burger i:nth-child(2){ top:11px; width:17px; }
@media (max-width:1080px){ .pfx-links{ gap:14px; } .pfx-link{ font-size:13px; } .pfx-talk{ padding:10px 16px; } }
.pfx-link--m, .pfx-msearch{ display:none; }
@media (max-width:820px){
  .pfx-actions{ margin-left:auto; gap:12px; }
  .pfx-talk{ display:none; }
  .pfx-burger{ display:block; }
  .pfx-links{
    position:fixed; top:0; right:0; bottom:0; width:min(84vw,360px); margin:0;
    padding:100px 28px 34px; flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(3,6,9,.98); border-left:1px solid rgba(223,231,224,.07);
    /* closed = wiped away with clip-path rather than pushed off-screen: an
       off-screen panel widens the page on phones and zooms the whole site out */
    clip-path:inset(0 0 0 100%); visibility:hidden; transition:clip-path .55s cubic-bezier(.16,1,.3,1), visibility 0s linear .55s;
  }
  .pfx-nav.menu-open .pfx-links{ clip-path:inset(0); visibility:visible; transition-delay:0s; }
  .pfx-nav.menu-open{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  .pfx-link{ display:block; width:100%; padding:17px 0; font-size:17px; border-bottom:1px solid rgba(223,231,224,.07); }
  .pfx-link--talk{ display:block; color:#c00022; }
  .pfx-link--m{ display:block; background:none; border:0; border-bottom:1px solid rgba(223,231,224,.07); border-radius:0;
    font-family:inherit; text-align:left; cursor:pointer; }
  .pfx-link--pf{ color:#c00022; border-bottom:0; }
  /* the search entry looks like a field: a ruled line, the word greyed, the glass at the right */
  .pfx-msearch{ display:flex; align-items:center; justify-content:space-between; width:100%; margin:0 0 10px; padding:12px 0;
    background:none; border:0; border-bottom:1px solid rgba(223,231,224,.3); border-radius:0;
    font:400 16px/1.2 'Inter', system-ui, sans-serif; color:rgba(223,231,224,.45); text-align:left; cursor:pointer; }
  .pfx-msearch svg{ width:18px; height:18px; flex:0 0 auto; }
  /* a long menu scrolls inside the sheet rather than running off the bottom */
  .pfx-links{ overflow-y:auto; overscroll-behavior:contain; padding-top:80px; }
  .pfx-link{ padding:14px 0; }
  /* the bar keeps just the logo and the menu button; smaller logo, shorter bar */
  .pfx-nav .pfx-search, .pfx-nav .pfx-pf{ display:none; }
  .pfx-nav{ height:60px; }
  .pfx-brand img{ height:22px; }
  .pfx-burger{ position:relative; z-index:2; }
  .pfx-burger.active i:nth-child(1){ top:7px; transform:rotate(45deg); }
  .pfx-burger.active i:nth-child(2){ top:7px; width:26px; transform:rotate(-45deg); }
  html.pfx-nav-open, html.pfx-nav-open body{ overflow:hidden; }
}

/* the PizzaForno logomark, between the links and the search button */
.pfx-pf{ display:inline-flex; align-items:center; flex:0 0 auto; transition:transform .3s, opacity .3s; opacity:.92; }
.pfx-pf img{ width:34px; height:34px; display:block; }
.pfx-pf:hover{ opacity:1; transform:translateY(-1px); }

/* "Explore Kiosks": the three kiosks drop down on hover (and keyboard focus) */
.pfx-dd, .nav-dd{ position:relative; display:flex; align-items:center; }
.pfx-dd-toggle{ display:none; }
.pfx-dd-menu, .nav-dd-menu{
  position:absolute; top:100%; left:-18px; padding-top:14px; min-width:190px; z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .25s, transform .25s, visibility 0s linear .25s;
}
.pfx-dd-menu::before, .nav-dd-menu::before{ content:''; position:absolute; inset:14px 0 0; z-index:-1;
  background:rgba(9,12,16,.96); border:1px solid rgba(223,231,224,.12); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.pfx-dd-menu a, .nav-dd-menu a{ display:block; padding:12px 18px; font-size:14px; font-weight:500; color:#aab4ad; text-decoration:none; white-space:nowrap; transition:color .2s, background .2s; }
.pfx-dd-menu a:first-child, .nav-dd-menu a:first-child{ padding-top:16px; }
.pfx-dd-menu a:last-child, .nav-dd-menu a:last-child{ padding-bottom:16px; }
.pfx-dd-menu a:hover, .nav-dd-menu a:hover{ color:#fff; }
.pfx-dd:hover .pfx-dd-menu, .pfx-dd:focus-within .pfx-dd-menu,
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (max-width:820px){
  /* in the phone menu the three sit under it, indented, folded away until
     the arrow beside "Explore Kiosks" opens them */
  .pfx-dd, .nav-dd{ display:block; width:100%; position:relative; }
  .pfx-dd-menu, .nav-dd-menu{ position:static; opacity:1; visibility:visible; transform:none; padding:0 0 6px 16px; min-width:0; display:none; }
  .pfx-dd.open .pfx-dd-menu{ display:block; }
  .pfx-dd-toggle{ display:flex !important; position:absolute; top:0; right:0; height:var(--dd-h, 52px); width:56px; align-items:center; justify-content:flex-end;
    padding:0; background:none; border:0; color:#fff; cursor:pointer; }
  .pfx-dd-toggle svg{ width:22px; height:22px; transition:transform .25s; }
  .pfx-dd.open .pfx-dd-toggle svg{ transform:rotate(180deg); }
  .pfx-dd-menu::before, .nav-dd-menu::before{ display:none; }
  .pfx-dd-menu a, .nav-dd-menu a{ padding:10px 0 !important; font-size:15px; }
}