/* Party on Butler — the light nav, from the Megamenu_Redesign mockup.
 *
 * Loaded by every page AFTER its own inline nav CSS, so these rules win on
 * equal specificity and the black bar becomes the white one without any page
 * having to delete the block it already carries. One file, 42 pages: the next
 * nav change is edited here once instead of forty-two times.
 *
 * The POB mark itself is unchanged — same boxed P-O-B, same PARTY ON BUTLER
 * wordmark. It is only re-inked from white to near-black so it reads on a white
 * bar.
 */

:root{
  --pn-ink:#161214;
  --pn-pink:#E83C8E;
  --pn-hair:#F1E4EA;
  --pn-mute:#8A7480;
  --pn-blush:#FFF9FB;
  --pn-teal:#3DB4B2;
  --pn-teal-ink:#04302F;
}

/* ------------------------------------------------ the announcement strip
   It is a link, not a sentence: the strip is the top line of every page on the
   site, so it points at the thing we want booked. Seasonal skins live here as
   .pn-annc-<name> so swapping the season is one class and one line of markup,
   not another pass over 42 pages. */
.pn-annc{
  display:block; text-align:center; padding:9px 16px;
  background:var(--pn-teal); color:var(--pn-teal-ink); text-decoration:none;
  font-family:'Martian Mono',monospace; font-size:9.5px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; line-height:1.5;
  transition:background .15s ease, transform .3s ease;
}
.pn-annc b{font-weight:700}
a.pn-annc:hover b{text-decoration:underline}

/* Halloween: pumpkin on near-black. Orange-on-orange would lose the pumpkin,
   and the pink brand bar below it needs something that is not pink. */
.pn-annc-hw{
  background:#120C08; color:#FFA23D;
  box-shadow:inset 0 -2px 0 0 #FF6B00;
}
.pn-annc-hw b{color:#FF8A1F}
a.pn-annc-hw:hover{background:#1C120A}

/* ---------------------------------------------------------- the bar */
.pobtopnav{
  background:#fff; color:var(--pn-ink);
  gap:20px; padding:0 clamp(16px,3vw,28px); min-height:82px;
  border-bottom:1px solid var(--pn-hair);
  font-family:'Figtree',system-ui,-apple-system,sans-serif;
  box-shadow:0 1px 0 rgba(22,18,20,.02);
}
.pobtopnav .pn-brand{color:var(--pn-ink); gap:12px}
.pobtopnav .pn-logo{border:2px solid var(--pn-ink); color:var(--pn-ink); font-size:22px}
.pobtopnav .pn-logo b{color:var(--pn-ink)}
.pobtopnav .pn-lbl{color:var(--pn-mute); font-size:9px; letter-spacing:2px}

/* Nav items sit flush to the bar's full height so the active underline can be
   a rule along the bottom of the bar, the way the mockup draws it. */
.pobtopnav .pn-links{
  align-items:stretch; align-self:stretch; gap:0;
  flex:1 1 auto; min-width:0; justify-content:flex-start;
}
.pobtopnav .pn-links > *{display:flex; align-items:center}
.pobtopnav .pn-links a,
.pobtopnav .pn-droptop{
  color:var(--pn-ink); font-family:inherit; font-size:14px; font-weight:600;
  letter-spacing:0; text-transform:none; padding:0 12px; height:100%;
  box-shadow:none; transition:color .15s ease, box-shadow .15s ease;
}
.pobtopnav .pn-links a:hover,
.pobtopnav .pn-has-drop:hover .pn-droptop{color:var(--pn-pink)}
/* The dot separators were for a dark bar of shouty uppercase. They are noise
   between sentence-case words. */
.pobtopnav .pn-links > *:not(:first-child)::before{content:none}
.pobtopnav .pn-has-drop{display:flex; align-items:stretch}
.pobtopnav .pn-has-drop:hover .pn-droptop{box-shadow:inset 0 -3px 0 0 var(--pn-pink)}
.pobtopnav .pn-caret{font-size:9px; opacity:.55; transition:transform .18s ease}
.pobtopnav .pn-has-drop:hover .pn-caret{transform:rotate(180deg)}

/* The plain dropdown, still the fallback below 1024px and whenever the
   mega-menu script does not run. */
.pobtopnav .pn-drop{
  background:#fff; border:1px solid var(--pn-hair); border-radius:14px;
  box-shadow:0 22px 44px rgba(22,18,20,.14); padding:6px; min-width:236px;
  top:calc(100% - 8px);
}
.pobtopnav .pn-drop a{
  color:var(--pn-ink); border-top:0; border-radius:10px; padding:11px 13px;
  font-size:13.5px; font-weight:500; letter-spacing:0; text-transform:none;
}
.pobtopnav .pn-drop a:hover{background:#FDEAF2; color:var(--pn-pink)}

.pobtopnav .pn-right{gap:10px}
.pobtopnav .pn-cta{
  background:var(--pn-pink); color:#fff; border:0; border-radius:999px;
  font-family:'Martian Mono',monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; padding:14px 20px;
}
.pobtopnav .pn-cta:hover{background:var(--pn-ink)}
.pobtopnav .pn-burger{border:1.5px solid var(--pn-hair); color:var(--pn-ink)}

/* ------------------------------------------------------------ phones */
@media(max-width:900px){
  .pobtopnav{min-height:64px; padding:10px clamp(16px,4vw,28px)}
  .pobtopnav .pn-links{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--pn-hair); flex-direction:column;
    align-items:stretch; justify-content:flex-start; padding:0;
    box-shadow:0 16px 30px rgba(22,18,20,.16);
  }
  .pobtopnav .pn-links a,
  .pobtopnav .pn-droptop{
    padding:15px clamp(16px,4vw,28px); border-top:1px solid var(--pn-hair);
    font-size:15px; height:auto; box-shadow:none;
  }
  .pobtopnav .pn-has-drop{flex-direction:column}
  .pobtopnav .pn-has-drop:hover .pn-droptop{box-shadow:none}
  .pobtopnav .pn-drop{
    background:var(--pn-blush); border:0; border-radius:0; box-shadow:none;
    padding:0; min-width:0; top:auto;
  }
  .pobtopnav .pn-drop a{
    padding-left:40px; border-radius:0; font-size:14px;
    border-top:1px solid var(--pn-hair);
  }
  /* The strip is a sibling of .pobtopnav, not a child of it. */
  .pn-annc{font-size:8.5px; letter-spacing:.12em; padding:8px 14px}
}
@media(max-width:520px){
  /* On a phone the strip keeps the offer and the verb, and drops the
     middle clause that would push it onto a third line. */
  .pn-annc .pn-annc-2{display:none}
  .pn-annc{font-size:8px; letter-spacing:.1em}
}

/* The bar and the strip leave together on the way down. Anyone who has asked
   not to be moved around keeps them where they are. */
@media (prefers-reduced-motion:reduce){
  .pn-annc, .pobtopnav{transition:none !important; transform:none !important}
}

/* ---------------------------------------------------------------------------
   Why the bar used to leave and never come back on a phone.

   These pages set body{overflow-x:hidden} to stop a stray wide element from
   rocking the page sideways. CSS then quietly rewrites the other axis: when one
   axis is hidden and the other is visible, visible computes to auto -- which
   makes <body> a scroll container. position:sticky sticks inside its nearest
   scroll container, and that one never scrolls, so the bar just rode the page
   off the top and stayed gone until you scrolled all the way back up.

   overflow-x:clip does the same clipping without turning the box into a
   scroller, so visible stays visible and the bar sticks to the viewport again.

   !important is not decoration here: several pages declare their own
   overflow-x:hidden !important, and without it those pages keep the bug.
   --------------------------------------------------------------------------- */
body{overflow-x:clip !important}