/* 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 brand mark is the circle logo, drawn here as a background image on the
 * span every page already ships. The PARTY ON BUTLER wordmark beside it is
 * unchanged, 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}
/* The mark is the circle logo. Every page still ships the old
   <span class="pn-logo">P<b>O</b>B</span>, so the letters are collapsed with
   font-size:0 and the image is painted behind them. One rule here beats an
   edit to the markup of every page on the site. The source is square and the
   art is a circle, so border-radius:50% trims the flat corners off. */
.pobtopnav .pn-logo{
  display:block; width:46px; height:46px; flex:0 0 46px;
  padding:0; border:0; border-radius:50%; overflow:hidden;
  background:#FEF1FA url("https://res.cloudinary.com/dcprxs9do/image/upload/c_fill,w_140,h_140,q_auto,f_auto/v1780925200/ppdrz3h2llpwdr099bb7.jpg") center/cover no-repeat;
  font-size:0; line-height:0; color:transparent; letter-spacing:0;
}
.pobtopnav .pn-logo b{font-size:0; color:transparent}
.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}


/* ============================================================ mobile
   This file is the only stylesheet all 208 pages load, and it loads last, so
   a fix here reaches every one of them without touching their markup. Keep it
   to things that are wrong on a phone everywhere, not to one page's layout.

   Measured at 390x844 across ten pages: the announcement strip was 8px, and
   every footer link, phone number and email was a 14px-tall tap target. Apple
   and Google both ask for 44. */
@media (max-width: 760px){
  /* 8px is not a font size, it is a texture. */
  .pn-annc{font-size:10px; letter-spacing:.12em; line-height:1.45; padding:10px 14px}

  /* Footer links were 14px tall. Give them a real hit area without moving the
     text: inline-block so vertical padding counts, and the padding does the
     work rather than a min-height that would space the columns out. */
  .pobfoot a{display:inline-block; padding:12px 0; line-height:1.45}
  .pobfoot .pf-grid a{padding:12px 0}

  /* Breadcrumbs on every product page were 11px tall. Same treatment. */
  .crumbs a{display:inline-block; padding:12px 0}

  /* Carousel dots on the event pages measured 10x10. The dot stays the size it
     is drawn; the button around it grows to something a thumb can hit. */
  .qs-dot{position:relative; min-width:14px; min-height:14px}
  .qs-dot::after{content:""; position:absolute; left:50%; top:50%;
    width:44px; height:44px; transform:translate(-50%,-50%)}

  /* iOS Safari zooms the page into any field under 16px when it is tapped,
     and does not zoom back out. Page rules like "#kbGate .pob-dc-input" outrank
     a bare type selector, hence !important. */
  input,select,textarea{font-size:16px !important}
}


/* ============================================================ phone drawer
   Every link on screen at once, nothing nested (Jordan, 2026-10-19). Each
   heading is a small label in the site's mono eyebrow style, its links sit
   two to a row underneath, and the thirteen events are split by the same
   four group labels as the desktop mega-menu.

   .pn-mnav is added by pob-megamenu.js only once it has finished building.
   If that file 404s or throws, none of this applies and the drawer is the
   plain list it ships as. */
@media (max-width:900px){
  .pobtopnav.pn-mnav .pn-has-drop{display:block; border-top:1px solid var(--pn-hair);
    padding:18px clamp(16px,4vw,28px) 10px}
  /* The heading is a label, not a button. Every page's own nav CSS hides the
     dropdown and shows it on :hover, so both states are pinned open here. */
  .pobtopnav.pn-mnav .pn-droptop,
  .pobtopnav.pn-mnav .pn-has-drop:hover .pn-droptop{
    display:block; padding:0 0 6px; border:0; height:auto; width:auto;
    font-family:'Martian Mono',monospace; font-size:10.5px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; color:var(--pn-pink);
    cursor:default; box-shadow:none;
  }
  .pobtopnav.pn-mnav .pn-droptop .pn-caret{display:none}
  .pobtopnav.pn-mnav .pn-drop,
  .pobtopnav.pn-mnav .pn-has-drop:hover > .pn-drop{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:12px; position:static; background:transparent; padding:0;
    border:0; box-shadow:none; min-width:0;
  }
  .pobtopnav.pn-mnav .pn-drop a{
    display:flex; align-items:center; gap:8px; min-width:0; min-height:44px;
    padding:8px 0; border:0; border-radius:0; font-size:15px; font-weight:600;
    color:var(--pn-ink); white-space:normal; line-height:1.2;
  }
  .pobtopnav.pn-mnav .pn-g2label{
    grid-column:1 / -1; padding:10px 0 2px; font-size:12px; font-weight:600;
    color:var(--pn-mute); letter-spacing:.02em;
  }
  .pobtopnav.pn-mnav .pn-g2label:first-child{padding-top:2px}
  /* Event Planning and any other top-level link. */
  .pobtopnav.pn-mnav .pn-links > a{display:flex; align-items:center; gap:11px;
    font-size:15px; font-weight:600}
  .pobtopnav.pn-mnav .pn-emo{flex:none; width:20px; font-size:16px; line-height:1;
    text-align:center}
}

/* Above the drawer's breakpoint the group labels and emoji are phone-only. */
@media (min-width:901px){
  .pobtopnav.pn-mnav .pn-g2label,
  .pobtopnav.pn-mnav .pn-emo{display:none}
}

/* ============================================================ full-screen menu
   The burger used to drop the drawer partway down the page, with the hero
   still showing (and scrolling) underneath it. Jordan asked for a full screen
   menu (2026-10-18), so an open drawer now fills everything below the bar.

   Each page's own CSS opens the drawer with .pn-open on the bar and a
   max-height of 82vh. Here it becomes position:fixed from the bar's bottom
   edge to the bottom of the screen. --pn-navh is set by pob-megamenu.js when
   the menu opens, because the bar sits lower while the announcement strip is
   still on screen; 64px is the bar's height on a phone if the script is gone.

   980px, not 900px: that is where every page switches to the burger. */
@media (max-width:980px){
  .pobtopnav.pn-open{transform:none !important}
  .pobtopnav.pn-open .pn-links{
    position:fixed; top:var(--pn-navh,64px); left:0; right:0; bottom:0;
    max-height:none !important; height:auto; overflow-y:auto;
    overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    background:#fff; border-bottom:0; box-shadow:none; z-index:9001;
    padding-bottom:max(24px, env(safe-area-inset-bottom));
  }
  /* The page behind the menu stays put. On <html> only: hiding overflow on
     <body> as well makes body a scroll container, and the sticky bar then
     sticks to body's top instead of the screen's and vanishes upward. */
  html.pn-lock{overflow:hidden !important}
  .pobtopnav.pn-open .pn-burger{font-size:22px; line-height:1}
}

/* No sticky quote bar along the bottom of the screen (Jordan, 2026-10-18).
   The event pages pinned .mobcta there on phones, the blog posts pinned
   .csbottom/.bpbottom/.pgbottom up to 1000px. This file loads last on every
   page, so these win over each page's own display:flex !important, and the
   room each page left for the bar goes too. */
.mobcta,.csbottom,.bpbottom,.pgbottom{display:none !important}
body:has(.mobcta){padding-bottom:0 !important}
.csbody,.bpbody,.pgbody{padding-bottom:0 !important}