/* Site-wide responsive fixes.
   Loaded last (just before </body>) on every page so it wins the cascade
   against Duda's duplicate stylesheet link, which the export also places in <body>. */

@import url("https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");

/* Brand font, sitewide (client request). !important because Duda's own
   embedded per-page CSS sets font-family directly on most widgets (some
   with their own !important), which plain inheritance can't override.
   Icon glyphs are excluded by class name -- they're custom glyph fonts
   (Duda's icon font, FontAwesome, social icons all key off "icon" in the
   class), not readable text, so swapping their font would turn icons into
   boxes instead of fixing anything. */
body,
body *:not([class*="icon" i]) {
  font-family: "PT Serif", serif !important;
}

/* The exported Duda runtime CSS pins the page to a 768px floor on every
   device (".dmInner{min-width:768px!important}"), which is what forced
   horizontal scrolling / zoomed-looking pages on phones. Let the page
   shrink with the real viewport instead. */
#dm .dmInner {
  min-width: 0 !important;
}
html,
body {
  overflow-x: hidden;
}

/* Duda gates its mobile grid-wrapping rule behind a ".dmMobileBody" class
   on <body>, which this static export never actually has (it's frozen as
   "dmDesktopBody" from whenever it was exported). That silently breaks
   every multi-column row sitewide: columns that should stack on phones
   instead stay side-by-side and get squeezed/overlapping (seen first in
   the footer's 4-column row). Force the wrap Duda intended, independent
   of that body class. */
@media (max-width: 1024px) {
  #dm .dmRespColsWrapper {
    flex-wrap: wrap !important;
  }
}
@media (max-width: 767px) {
  #dm .dmRespDesignRow .small-12,
  #dm .dmRespRow .small-12 {
    width: 100% !important;
  }
}

/* Duda's per-page CSS defines desktop "size-NN"/"font-size-NN" classes but
   never shipped their "m-size-NN"/"m-font-size-NN" mobile companions, so
   headings never actually shrank on narrow screens. Fill in the missing
   values that are used across the site. */
@media (max-width: 767px) {
  .m-size-13,
  .m-font-size-13 {
    font-size: 13px !important;
  }
  .m-size-16,
  .m-font-size-16 {
    font-size: 16px !important;
  }
  .m-size-24,
  .m-font-size-24 {
    font-size: 24px !important;
  }
  .m-size-26,
  .m-font-size-26 {
    font-size: 26px !important;
  }
  .m-size-29,
  .m-font-size-29 {
    font-size: 29px !important;
  }
  .m-size-30,
  .m-font-size-30 {
    font-size: 30px !important;
  }
  .m-size-38,
  .m-font-size-38 {
    font-size: 38px !important;
  }
  .m-size-40,
  .m-font-size-40 {
    font-size: 40px !important;
  }
  .m-size-48,
  .m-font-size-48 {
    font-size: 48px !important;
  }
}

/* Homepage hero (index.html) and the Private Hire page intro both had their
   text column sized as "100% minus a fixed desktop side-margin"
   (e.g. calc(100% - 214px)), which left almost no room on a phone screen.
   Replace with a flex column that scales with the viewport at every size. */
/* Same bug as the hero container, but worse: this hero button was set to
   calc(100% - 716px), which goes negative and collapses to ~0 on any
   phone screen, squeezing its text into a sliver that then overflows.
   Sized the same as its sibling buttons below it now that it's a
   full-width stacked button rather than sitting next to the (removed)
   ticket dropdown. */
#dm .dmBody a.u_1137450832 {
  width: min(92%, 320px) !important;
  max-width: min(92%, 320px) !important;
  height: 44px !important;
  margin: 0 auto 10px !important;
  box-sizing: border-box !important;
  padding-left: 46px !important;
  background-color: rgba(242, 187, 5, 1) !important;
}
/* Bee Noir "B" mark as a badge on all three hero buttons (client-supplied
   artwork). Icon badges are hidden sitewide (--btn-icon-wrpr-display:none,
   set by Duda) because no other button uses one -- enabling display here
   is scoped to just these three badges. Black background because every
   source image here has a black backdrop baked in (no transparency);
   anything else would show as a visible square around the logo. */
#dm .dmBody a.u_1137450832 .iconBg,
#dm .dmBody a.u_1574572865 .iconBg,
#dm .dmBody a.bn-bee-sessions-tickets .iconBg {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  left: 5px;
  margin-top: -18px;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
}
#dm .dmBody a.u_1137450832 .iconBg img,
#dm .dmBody a.u_1574572865 .iconBg img,
#dm .dmBody a.bn-bee-sessions-tickets .iconBg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Upcoming Shows and Events" (client request): the black/grey gradient
   it used to only show on hover is now its permanent, static background
   -- no separate hover rule needed since Duda's own native hover for this
   widget already resolves to this exact same gradient (confirmed by
   toggling the .hover class it uses internally), so hovering now changes
   nothing, satisfying "no hover effect" without fighting Duda's CSS. */
#dm .dmBody a.u_1574572865 {
  width: min(92%, 320px) !important;
  max-width: min(92%, 320px) !important;
  background-image: linear-gradient(
    90deg,
    rgb(0, 0, 0) 39%,
    rgb(217, 217, 217) 100%
  ) !important;
  padding-left: 46px !important;
}

/* "Bee Sessions Tickets" (client request): blue instead of yellow, sampled
   from the Bee Sessions logo's own glow color so the button and badge
   read as one brand mark rather than two different blues. White text
   instead of the old black-on-yellow for contrast. No hover rule, same
   as the other two -- static buttons, client request. */
#dm .dmBody a.bn-bee-sessions-tickets {
  width: min(92%, 320px) !important;
  max-width: min(92%, 320px) !important;
  padding-left: 46px !important;
  background-color: #067ae5 !important;
  color: #fff !important;
}

/* "Open Until 5AM" (client request): plain scrolling marquee instead of
   the static yellow pill it used to sit in.
   shortcut: the loop isn't seamless (there's a brief gap before the next
   pass) -- a continuous ticker needs a duplicated text track, not worth
   it for one short line. Upgrade if it ever needs to look truly endless. */
/* The wrapping <p> was shrink-wrapping to its old pill span's content
   width (~138px), which made the marquee's own percentage-based width
   resolve against that instead of the hero column -- force it to the
   column's full width so the marquee sizes against the right box. */
#bnOpenMarqueeWrap {
  display: block;
  width: 100%;
}
/* "LIVE EVENTS" / "Open Until 5AM" (client request): white pill, black
   text, sized the same as the hero buttons below them (min(92%, 320px)
   wide, 44px tall) instead of plain gold text. */
#dm .dmBody strong.bn-live-events-pill {
  background: #cfcccc;
  border-radius: 6px;
  display: block !important;
  box-sizing: border-box !important;
  min-width: min(92%, 320px) !important;
  width: fit-content !important;
  max-width: 92% !important;
  padding: 0 20px !important;
  height: 44px !important;
  line-height: 44px !important;
  margin: 0 auto !important;
  color: #000 !important;
  text-align: center !important;
  white-space: nowrap !important;
  font-size: 17px !important;
  letter-spacing: 0.5px !important;
}

/* Plain <h1>/<h2> tags inherit Duda's global 100px/40px defaults (more
   specific than Tailwind's own text-3xl/text-4xl utility classes, since
   preflight is off), so the events page headings need their own sized,
   !important-backed classes instead. */
.bn-page-h1 {
  font-size: clamp(28px, 6vw, 44px) !important;
  color: #f2bb05 !important;
}
.bn-page-h2 {
  font-size: clamp(22px, 5vw, 32px) !important;
  color: #fff !important;
}

/* Gallery page: the now-empty "Bee Session" photo gallery widget (0 images
   -- client request, images coming later) still leaves a large blank white
   box where its photos used to be. The gallery widget itself collapses to
   ~10px correctly once empty, but THREE nested wrapper divs around it
   (Duda's own generated per-element CSS) each carry their own explicit
   min-height, at different breakpoints: 0e2eeb24 and 3bf5cd58 are ~400px
   fixed on desktop, 020e9fbd is a ~50vh rule that only becomes the
   binding (largest) constraint at narrow/mobile widths -- all three must
   be zeroed, not just the first two, or the gap reappears on phones even
   though desktop looks fixed. These ids start with a digit, so a plain
   "#3bf5cd58" selector is invalid CSS and silently fails to parse --
   attribute-form [id="..."] selectors don't have that restriction. */
body[data-page-alias="gallery"] #dm div[id="0e2eeb24"],
body[data-page-alias="gallery"] #dm div[id="3bf5cd58"],
body[data-page-alias="gallery"] #dm div[id="020e9fbd"] {
  min-height: 0 !important;
  height: auto !important;
}

/* Same leftover-wrapper-min-height bug, same page, different section:
   "Special Guest" (client request) now holds 3 images instead of its
   original 1, and two of its own nested wrapper divs (d1336ba7, 55faf254)
   carry their own stray min-height, leaving white space above the tiles. */
body[data-page-alias="gallery"] #dm div[id="d1336ba7"],
body[data-page-alias="gallery"] #dm div[id="55faf254"],
body[data-page-alias="gallery"] #dm div[id="ca4dd614"] {
  min-height: 0 !important;
  height: auto !important;
}

/* "Special Guest" tiles (client request): same fixed-height square crop
   People/Venue already use (see the two ".u_1647649990"/".u_1393468050"
   rules a few lines up) for uniform tile size, applied here too so all
   three galleries match. Special Guest never had this override because
   it only ever held one image before, so its natural (and differing)
   source-photo aspect ratios were never an issue until now. Black
   background on every wrapper in the chain so no page-white shows
   through gaps the crop can't fully eliminate (e.g. an odd last row). */
#dm .dmBody .u_1059393793 .photoGalleryThumbs .image-container a {
  padding-top: 319px !important;
}
body[data-page-alias="gallery"] #dm div[id="d1336ba7"],
body[data-page-alias="gallery"] #dm div[id="55faf254"],
body[data-page-alias="gallery"] #dm div[id="ca4dd614"],
body[data-page-alias="gallery"] #dm .u_1059393793,
body[data-page-alias="gallery"] #dm .u_1059393793 .layout-container {
  background-color: #000 !important;
}

/* Same specificity problem as above: Duda's "#dm .dmNewParagraph a" rule
   (from the terms-page template events.html was built from) force-underlines
   every link inside that container, beating Tailwind's plain ".no-underline"
   utility class. Affects the VIP Table button on the Bee Sessions view. */
#dm .dmNewParagraph a.no-underline {
  text-decoration: none !important;
}

/* events.html was built from the (intentionally light/white) terms page
   template, so the page background needs to switch to the site's dark
   theme to match every other page. */
body[data-page-alias="events"] #dm .dmInner,
body[data-page-alias="events"] #dm div[id="1173938290"] {
  background-color: #0a0a0a !important;
}

/* Large empty gap above "Upcoming Events" / "Bee Sessions": two leftover
   bits of the Duda template this page was built from. #1173938290 is a
   totally empty decorative row (its 100px height comes from Duda's own
   *editor* placeholder CSS for empty columns -- useful so empty rows stay
   clickable in the Duda editor, meaningless on the published site) sitting
   above the real content row; .u_1243667655 is that real content row,
   carrying 77.5px of its own top padding on top of that. The gap was
   always there but easy to miss while "Past Events" filled out the page
   below it -- shrinking the Bee Sessions view down to two sections (see
   the dmNewParagraph rule above) made it obvious. */
body[data-page-alias="events"] #dm div[id="1173938290"] {
  display: none !important;
}
body[data-page-alias="events"] #dm .dmBody div.u_1243667655 {
  padding-top: 24px !important;
}

#dm .dmBody div.u_1489861467,
#dm .dmBody div.u_1375412832 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: min(94%, 966px) !important;
  max-width: min(94%, 966px) !important;
  margin: 14px auto 8px !important;
  padding: 0 clamp(12px, 4vw, 24px) !important;
}

/* Hero headline: fluid type scale instead of one fixed 100px size, so it
   scales smoothly between phone and desktop instead of snapping once. */
.bn-hero-h1 {
  font-size: clamp(30px, 8vw, 100px) !important;
}

/* New mobile-first Tailwind header (logo-left, hamburger + language
   accordion under 1025px, inline nav + dropdown at 1025px+) replaces
   Duda's generated header entirely — but only on the pages that actually
   got the new header built (#bnMenuBtn). The translated-language pages
   never got that replacement, so unconditionally hiding Duda's original
   there left them with no nav at all; :has() keeps this rule scoped to
   pages where a replacement truly exists. Hide the original rather than
   delete it, in case other inline scripts still reference it by id. */
body:has(#bnMenuBtn) #dm #hamburger-header-container,
body:has(#bnMenuBtn) #dm #layout-drawer-hamburger,
body:has(#bnMenuBtn) #dm .u_1073338270.middleDrawerRow,
body:has(#bnMenuBtn) #dm .dmHeaderContainer.d-header-wrapper.showOnLarge,
body:has(#bnMenuBtn) #dm #layout-drawer-overlay {
  display: none !important;
}

/* On the translated pages (restored above), Duda's own hamburger icon is
   genuinely invisible as shipped: its three bars are drawn with a white
   border and no background, sitting inside a strip that renders white —
   white-on-white. Give it a dark chip so it's visible regardless of
   whatever happens to be behind it. */
#dm #layout-drawer-hamburger {
  background: rgba(0, 0, 0, 0.55) !important;
  border-radius: 6px;
}
#dm #layout-drawer-hamburger .hamburger__slice {
  border-color: #fff !important;
}

/* The mobile menu's hamburger/close icon and its two accordion triggers
   (BEE SESSIONS, language picker) are native <button> elements; with
   Tailwind preflight off they keep the browser's default light grey/white
   button chrome instead of the dark theme, showing up as a stray white
   panel. Same id/button is reused on every page that has the custom
   header, so this one rule covers all of them. Reset to transparent and
   use the brand yellow for the open state instead of a background. */
#bnMenuBtn,
#bnBeeSessionsNavBtn,
#bnLangBtn,
#bnEmailGateClose {
  background: transparent !important;
  border: none !important;
}
#bnBeeSessionsNavBtn[aria-expanded="true"],
#bnLangBtn[aria-expanded="true"] {
  color: #f2bb05 !important;
}