/*
 * Town Hall Theatre — application stylesheet.
 * Hand-written, mobile-first, no framework dependency.
 *
 * Sections:
 *   1. Custom properties & base reset
 *   2. Utility classes
 *   3. Buttons
 *   4. Site header / primary nav
 *   5. Secondary "What's On" month-tabs bar
 *   6. Hero carousel
 *   7. Footer
 *   8. Homepage body
 *   9. Month listing card grid
 *  10. At A Glance table + filters
 *  11. Event detail page
 *  12. Blog
 *  13. Genre colours (shared by show cards, glance table, filter pills)
 *  14. CMS rich-text authoring utilities
 */

/* ============ 1. Custom properties & base reset ============ */

:root {
  --tht-blue: #459EE0;
  --tht-dark: #2380BF;
  --tht-hover: #3390CF;
  --white: #FFFFFF;
  --ink: #333333;
  --orange: #E8722A;
  --content-max: 1280px;
  --font-sans: "Open Sans","Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  /* --font-sans: "Source Serif 4", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; */
  /* --font-header:  */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin:0;
  padding:0;
  font-family: var(--font-sans);
  line-height:1.6em;
  scroll-behavior: smooth;
}

img, video   {
  height: auto;
  max-width:100%;
}

iframe {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

table {
  width: 100%;
  margin-top: 1em;
}

p a {
  color: #000000;
}

/* ============ 2. Utility classes ============ */

.tc {
  text-align: center;
}

.pt1 { padding-top: 1em; }
.pb1 { padding-bottom: 1em; }
.pb0 { padding-bottom: 0; }

.bgw {
  background: var(--white);
}

.text-right {
  text-align: right;
}





.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* First focusable element on every page — invisible until a keyboard
   user tabs to it, then drops into view so they can jump straight past
   the header/nav to #main-content instead of tabbing/swiping through
   it on every single page load. */
.skip-link {
  position: absolute;
  top: -3rem;
  left: 0;
  z-index: 1000;
  padding: 0.75em 1.25em;
  background: var(--tht-dark);
  color: var(--white);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

.content-col,
.content-wide,
.blog-body__main,
.blog-body__aside {
  overflow-wrap: break-word;
}

.content-col {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.content-wide {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.8rem 1rem;
}

.row-tht .content-wide {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.4rem 1rem;
}

@media screen and (min-width: 640px) {
  .content-wide {
    padding: 0 1.4rem;
  }
}
/* ============ 3. Buttons ============ */

.button {
  display: inline-block;
  padding: 0.6em 1.2em;
  background: var(--tht-blue);
  color: var(--white);
  text-decoration: none;
  border: 0;
  border-radius: 3px;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
}

.button:hover,
.button:focus {
  background: var(--tht-hover);
  color: var(--white);
}

.button.warning {
  background: #e8722a;
}

.button.warning:hover,
.button.warning:focus {
  background: #d36423;
}

.button.tiny {
  padding: 0.35em 0.8em;
  font-size: 0.8rem;
}

.button.small {
  padding: 0.5em 1em;
  font-size: 0.875rem;
}

.button.large {
  padding: 1em 2em;
  font-size: 1.15rem;
  font-weight: 600;
}

/* ============ 4. Site header / primary nav ============ */

.site-header {
  position: relative;
  z-index: 2;
  background: var(--tht-blue);
  font-family: var(--font-sans);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/* Below 640px the header (logo + hamburger) sticks to the top of the
   viewport while scrolling, rather than scrolling away with the page.
   It also slides out of view on scroll-down and back in on scroll-up
   (driven by .is-hidden, toggled in site.js), so it stays out of the
   way while reading but is never more than a small scroll-up away. */
@media (max-width: 639px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: transform 0.3s ease;
  }

  .site-header.is-hidden {
    transform: translateY(-100%);
  }
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.75rem 1rem;
}

.site-header__logo {
  display: block;
  line-height: 0;
}

.site-header__logo img {
  display: block;
  /* width: 220px; */
  max-width: 76vw;
  height: auto;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--white);
  border-radius: 2px;
}

.site-nav {
  background: var(--tht-blue);
  max-height: 0;
  overflow: hidden;
  /* max-height:0 + overflow:hidden alone still leaves the links inside
     keyboard-focusable while closed — visibility does what max-height
     can't, actually removing them from the tab order. Visibility change
     is delayed until the collapse animation finishes closing (matching
     the desktop dropdown's own opacity/visibility pattern below) so it
     doesn't visibly cut the closing animation off early; opening drops
     the delay to 0 so it's immediately focusable again. */
  visibility: hidden;
  transition: max-height 0.25s ease, visibility 0s linear 0.25s;
}

.site-nav.is-open {
  max-height: 1200px;
  visibility: visible;
  transition-delay: 0s;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0 1rem 1rem;
}

.site-nav__item {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
}

.site-nav__item:first-child {
  border-top: 0;
}

.site-nav__item > a {
  display: block;
  padding: 0.85rem 0.25rem;
  color: var(--white);
  text-decoration: none;
  font-size: 1.0625rem;
}

.site-nav__item > a:hover,
.site-nav__item > a:focus {
  background: var(--tht-hover);
}

.site-nav__item.is-active > a {
  text-decoration: underline;
}

.site-nav__item--has-submenu > a {
  padding-right: 2.75rem;
}

.site-nav__caret {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
  font-size: 0.75rem;
}

.site-nav__caret::after {
  content: "\25BC";
  display: inline-block;
  transition: transform 0.2s ease;
}

.site-nav__item--has-submenu.is-open .site-nav__caret::after {
  transform: rotate(180deg);
}

.site-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1rem;
  max-height: 0;
  overflow: hidden;
  /* Same fix as .site-nav above — without this, a closed submenu's
     links stay keyboard-focusable even though they're not visible. */
  visibility: hidden;
  transition: max-height 0.2s ease, visibility 0s linear 0.2s;
}

.site-nav__item--has-submenu.is-open .site-nav__submenu {
  max-height: 600px;
  visibility: visible;
  transition-delay: 0s;
}

.site-nav__submenu a {
  display: block;
  padding: 0.6rem 0.25rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  opacity: 0.9;
}

.site-nav__submenu a:hover,
.site-nav__submenu a:focus {
  opacity: 1;
  text-decoration: underline;
}

.site-nav__item--mobile-only {
  display: block;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  /* Logo and nav share one row: .site-header__inner becomes the flex
     container and centering/max-width move here from .site-header__bar
     + .site-nav, so both sit on the same horizontal line instead of
     stacking. .site-header itself stays full-width/unconstrained so its
     background still spans the whole viewport. */
  .site-header__inner {
    display: flex;
    align-items: center;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 1rem;
  }

  .site-header__bar {
    flex-shrink: 0;
    max-width: none;
    margin: 0;
    padding: 0.75rem 0;
  }

  .site-nav {
    flex: 1;
    max-height: none;
    overflow: visible;
    /* The mobile-only visibility:hidden/is-open toggle above has no
       equivalent here — there's no hamburger button at this width, so
       .is-open is never applied and the nav must just stay visible. */
    visibility: visible;
  }

  .site-nav__list {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 0;
    max-width: none;
    margin: 0;
  }

  .site-nav__item--mobile-only {
    display: none;
  }

  .site-nav__item {
    border-top: 0;
  }

  .site-nav__item > a {
    padding: 1.15rem 0.65rem;
    font-size: 1rem;
    white-space: nowrap;
  }

  /* Caret is a separate tap target on mobile (no hover there); on
     desktop the arrow lives inline in the link itself instead, so
     hovering anywhere on "Box Office" opens the dropdown — matching
     the original site — and the item doesn't reserve extra width for
     a separate button. */
  .site-nav__caret {
    display: none;
  }

  .site-nav__item--has-submenu > a::after {
    content: "\25BC";
    display: inline-block;
    margin-left: 0.4em;
    font-size: 0.6rem;
    vertical-align: middle;
    transition: transform 0.2s ease;
  }

  .site-nav__item--has-submenu:hover > a::after,
  .site-nav__item--has-submenu:focus-within > a::after,
  .site-nav__item--has-submenu.is-open > a::after {
    transform: rotate(180deg);
  }

  .site-nav__submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: var(--tht-blue);
    max-height: none;
    overflow: visible;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18);
    z-index: 20;
    /* Opacity fades out immediately, but visibility (which actually
       removes it from hover/hit-testing) waits 300ms — gives the
       mouse time to travel from the link down into the dropdown
       without it disappearing first. */
    transition: opacity 0.15s ease, visibility 0s linear 0.3s;
  }

  .site-nav__item--has-submenu:hover .site-nav__submenu,
  .site-nav__item--has-submenu:focus-within .site-nav__submenu,
  .site-nav__item--has-submenu.is-open .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .site-nav__submenu a {
    padding: 0.75rem 1rem;
  }
}

/* ============ 5. Secondary "What's On" month-tabs bar ============
   Visible at every width. On narrow screens the items don't all fit, so
   the list scrolls horizontally (a plain swipe/drag, no JS needed) —
   scrollbar hidden since the partially-cut-off last item is enough of
   a hint that there's more to slide to. */

.month-nav {
  display: block;
  position: relative;
  z-index: 1;
  background: var(--tht-blue);
  /* border-bottom: 0.35rem solid var(--tht-dark); */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);

}

.month-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-sans);
  /* box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); */
  
}

.month-nav__list::-webkit-scrollbar {
  display: none;
}

.month-nav__item {
  flex-shrink: 0;
}

.month-nav__item a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--white);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.month-nav__item a:hover,
.month-nav__item a:focus {
  background: var(--tht-hover);
}

.month-nav__item.is-active a {
  background: var(--tht-dark);
}

/* ============ 6. Hero carousel ============ */

.hero-carousel {
  position: relative;
  overflow: hidden;
  background: #000;
  aspect-ratio: 1150 / 350;
  max-width: var(--content-max);
  margin:0 auto;
  display:none;
}

.hero-carousel__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-carousel__track > div {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero-carousel__track > div.is-active {
  opacity: 1;
  pointer-events: auto;
}

.hero-carousel__track img,
.hero-carousel__track a {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  border: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.hero-carousel__nav--prev {
  left: 0.75rem;
}

.hero-carousel__nav--next {
  right: 0.75rem;
}

/* A two-tone ring (light inner + brand-blue outer) rather than relying
   on the browser's default outline — a single colour can vanish
   against a similarly-coloured hero photo, and nothing here had a
   deliberate focus style before. */
.hero-carousel__nav:focus,
.hero-carousel__dots button:focus {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--tht-blue);
}

.hero-carousel__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}

.hero-carousel__dots button {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 0;
  cursor: pointer;
}

.hero-carousel__dots button.is-active {
  background: var(--white);
}

@media (min-width: 640px) {
  .hero-carousel {
      display:block;
  }
}
/* ============ 7. Footer ============ */


.site-footer {
  background: #F2F2F2;
  margin-bottom:30px;
}

.site-footer a {
  color: var(--white);
}
/* .site-footer ul { padding:0; margin:0;}
.site-footer ul li { list-style-type:none; } */
.site-footer ul li a { 
color: var(--black);
}

.footer-menu {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1rem 1rem 1rem 1rem;
  background: #f2f2f2;
}

.footer-menu__heading {
  margin: 0 0 0.6rem;
  font-size: 1rem;
}

.footer-menu__heading a {
  color: var(--ink);
  text-decoration: none;
  font-weight: bold;
}

.footer-menu__list {
  list-style: none;
  margin: 0 0 0 1em;
  padding: 0;
}

.footer-menu__list li {
  margin-bottom: 0.6em;
}

.footer-menu a {
  color: var(--ink);
  text-decoration: none;
}

.footer-menu__list a:hover,
.footer-menu__list a:focus {
  font-weight: bold;
}

.footer-menu { }

.footer-menu .recentNews      { list-style: none; margin: 0 0 0 1em; padding: 0; }
.footer-menu .recentNews li   { margin-bottom:0.6em}
.footer-menu .recentNews li a { }

.blog-body .recentNews {
  list-style:none;
  padding:0 0 0 1em;
  margin:0;
} 
.blog-body .recentNews li {
  padding:0.4em 0; 
  border-bottom: 1px dashed #999999;
}


.blog-body .recentNews a { 
  color: #E8722A;
}
.blog-body .recentNews a:hover {
  filter: brightness(75%);
}

.blog-body h4 { font-size: 1.4375rem; }
.blog-body h4 a { color: #333333; text-decoration:none; }

.footer-bar {
  background: var(--tht-blue);
  color: var(--white);
  text-align: center;
  padding: 1rem;
  font-size: 1rem;
}

@media (min-width: 640px) {
  .footer-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2rem 1rem;
  }
}

@media (min-width: 900px) {
  .footer-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============ 8. Homepage body ============ */

.fp-message {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.fp-message p {
  background: #5ec774;
  color: var(--white);
  padding: 1em;
  margin-top: 1em;
}

.fp-message p a {
  color: var(--white);
  text-decoration: underline;
}

.home-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0rem;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
  font-family: var(--font-sans);
}

.home-welcome { 
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .home-body {
    gap: 2rem;
    padding: 1.5rem 1rem;
  }

  .home-welcome { 
  padding: 0;
  }
}

@media (min-width: 900px) {
  .home-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}

.home-promo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding:1rem;
}

.home-promo__item {
  text-align: center;
}

.home-promo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.home-welcome__map img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.home-funders {
  background: #f2f2f2;
  padding: 0;
  text-align: center;
}

.home-funders img {
  max-width: 100%;
  height: auto;
}

/* Social pills used in CMS-authored rich text (e.g. homepage welcome copy). */
.social a {
  text-decoration: none;
  padding: 0.4em 0.6em;
  text-align: center;
  margin-right: 0.6em;
  display: inline-block;
}

a.facebook  { background: #5270a6; color: var(--white); }
a.twitter   { background: #459ee0; color: var(--white); }
a.mastodon  { background: #6364ff; color: var(--white); }
a.instagram { background: #ff0076; color: var(--white); }

@media (min-width: 640px) {
  .home-promo {
    padding-top:0;
  }

  .home-funders {
    padding: 1.5rem 1rem 0 1rem;
  }
}
/* ============ 9. Month listing card grid ============
   CSS Grid's default row stretch behavior equalizes card heights within a
   row natively, replacing Foundation's data-equalizer JS. */

h1 { font-size:1.6rem; }

.show-grid {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 0.75rem;
  max-width: var(--content-max);
  margin: 0 auto;
  padding:10px;
}

.show-grid > li {
  list-style: none;
  min-width: 0;
  padding:0;
  margin:0;
  min-height: calc(100vh - 50px);
}

.show-grid > li > div {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  padding:0;
  margin:0;
}

.show-grid > li > div:hover {
  background: #eaf4fc;
}

/* .card-link stretches to cover the whole card so the card itself acts
   as the link (image/title/date/summary all become clickable) without
   nesting an <a> inside another <a> (the real Details/Buy links). It's
   a direct child of the card, not nested inside .options, so it keeps
   working regardless of .options' own positioning (e.g. the sticky
   treatment below establishes its own containing block, which broke
   the previous version of this technique — a ::after stretched from
   .moredetails a — since that pseudo-element lived inside .options).
   "Buy"/"Details" sit on top via their own stacking layer so they stay
   independently clickable instead of being swallowed by the overlay. */
.card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.moredetails a,
.buytickets a {
  position: relative;
  z-index: 2;
}

.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-media {
  overflow: hidden;
}

.show-grid img {
  width:100%;
  margin: 0 auto;
  display: block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.show-grid > li > div:hover img {
  transform: scale(1.08);
}

/* A show marked cancelled (Status = 0): greyed-out card + strikethrough
   title (the <s> tag is emitted directly by getMonth()/getMonthGlance()). */
.show-grid > li.cancelled > div {
  background: #dadada !important;
}

.show-grid > li.cancelled img {
  filter: grayscale(100%);
  opacity: 0.6;
}

.show-grid-empty {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.5rem 1rem;
  font-family: var(--font-sans);
}

@media (min-width: 640px) {
  .show-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 1.5rem 1rem;
  }
  .show-grid > li {
    min-height:0;
  }
  .show-grid > li > div {
    min-height: 0;
    height: 100%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
  }
  .show-grid img {
    width: 100%;
}
}

@media (min-width: 900px) {
  .show-grid {
    /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
    grid-template-columns: repeat(4, minmax(0, 300px));
  }
  .show-grid img { max-width:300px; }
}

/* Keep Details/Buy reachable without scrolling the whole card: they stick
   just above the mobile bottom-bar (44px tall, see section 16, plus a
   10px gap so it doesn't touch it) as you scroll through a card's
   content, then release once the card's own bottom (its natural
   end-of-flow position, since .options is card-body's last child)
   scrolls up to that point — so a card shorter than the screen never
   visibly moves, and a long summary doesn't push the buttons out of
   reach. z-index keeps both buttons above .moredetails a::after's
   whole-card click overlay. */
@media (max-width: 639px) {
  div.options {
    position: sticky;
    bottom: 54px;
    z-index: 3;
  }
}

.genre {
  padding: 0.1em 0.3em;
  text-overflow: hidden;
  margin-top: -45px;
  color: #ffffff;
  float: right;
  display: inline;
  font-size: 0.8em;
  text-align: right;
  /* Its old opacity<1 incidentally created a stacking context that (by
     luck, not design) painted above .card-link's whole-card overlay
     (z-index:1) — removing that opacity for contrast dropped it back
     behind the overlay instead, so it needs its own explicit stacking
     now to stay visible. It's a label, not a link (same as the type
     column in the At A Glance list), so pointer-events:none lets a tap
     on it still fall through to .card-link and navigate like the rest
     of the card. */
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.date {
  font-size: 1em;
  text-align: center;
  font-style:italic
}

.moredetails {
  font-size: 1em;
  background: var(--tht-blue);
  width:50%;
  display:block;
}

.buytickets {
  padding: 0;
  background: #e8722a;
  width:50%;
  display:block;
  height:100%;
}

.moredetails a,
.buytickets a {
  color: #ffffff;
  text-decoration:none;
  display:block;
  padding: 0.6em 0.6em;
  font-size: 1.12em;
}

div.title {
  text-align: center;
  padding: 0.4em 1em 0 1em;
  color: #333333;
  font-size: 1.2em;
  font-weight: 600;
  text-decoration:none;
}

div.options {
  text-align: center;
  display: flex;
  margin-top: auto;
}

div.summary {
  padding: 0 0.8em;
  line-height:1.4em;
}

div.summary p {
  font-size: 0.92em;
}


@media (min-width: 640px) {

  .moredetails a,
  .buytickets a {
    padding: 1em 0.6em;
  }

}
/* ============ 10. At A Glance list + filters ============
   A div/CSS-Grid list rather than a <table>: the mobile view already
   overrides the table model completely (rows become flex cards), and
   without <thead>/column headers there was no real table semantics to
   lose. Grid gives every row the same column tracks so they line up
   without the old JS width-locking hack a <table> needed. */

/* One line, no wrapping — on narrow screens the pills that don't fit
   are reached by dragging left/right (native overflow scroll, no JS),
   same pattern as the month-nav tabs. Scrollbar hidden since the
   partially cut-off last pill is enough of a hint there's more. */
#filters {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-align: left;
  border-bottom: 1em solid var(--tht-dark);
  margin-bottom: 0 !important;
  font-size: 1em;
}

#filters::-webkit-scrollbar {
  display: none;
}

.glance-search-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8em;
  font-weight: 600;
  color: #666666;
}

/* 16px stops iOS Safari auto-zooming the page when this input is focused. */
#searchShows {
  font-size: 16px;
  padding: 0.6em 0.7em;
  width:100%;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: var(--white);
}

.glance-results-status {
  margin: 0.6rem 0 0;
  font-size: 0.85em;
  color: #666666;
}

/* Mobile: the pill row is a poor tap target once there are this many
   types, so type + month become a pair of native <select> dropdowns
   instead, side by side. Hidden on desktop, where the pills already
   work fine. */
.glance-selects {
  display: none;
}

.glance-select-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8em;
  font-weight: 600;
  color: #666666;
}

@media (max-width: 639px) {

/* .fTHEATRE    { border-left: 20px solid #48a0e0; }
.fMUSIC,
.fMUSICAL    { border-left: 20px solid  #3f916d; }
.fDANCE,
.fVARIETY    { border-left: 20px solid  #fc7fb7; }
.fFILM       { border-left: 20px solid  #a1277a; }
.fCOMEDY     { border-left: 20px solid  #99ccff; }
.fFIGHT,
.fLITERATURE { border-left: 20px solid  #ffff33; color: 20px solid  #000000; }
.fTALK,
.fCOMMUNITY  { border-left: 20px solid  #3ed975; }
.fMISC       { border-left: 20px solid  #d9044b; }
.fCHILDRENS,
.fFAMILY     { border-left: 20px solid  #e56f53; }
.fEXHIBITION { border-left: 20px solid  #9931cc; }
.fOPERA,
.fFESTIVAL,
.fCLUB,
.fSPORT,
.fWORKSHOP   { border-left: #333333; } */

/* Same WCAG-driven text colour choice as the badge colours in section
   13 (this is the same colour enum, duplicated here for the mobile
   date row's venue-inline badge — .glance-cell--venue-inline.fTYPE). */
.fTHEATRE    { background: #48a0e0; color: #000000; }
.fMUSIC,
.fMUSICAL    { background: #3f916d; color: #000000; }
.fDANCE,
.fVARIETY    { background: #fc7fb7; color: #000000; }
.fFILM       { background: #a1277a; color:#FFFFFF; }
.fCOMEDY     { background: #99ccff; color: #000000; }
.fFIGHT,
.fLITERATURE { background: #ffff33; color:#000000; }
.fTALK,
.fCOMMUNITY  { background: #3ed975; color: #000000; }
.fMISC       { background: #d9044b; color:#FFFFFF; }
.fCHILDRENS,
.fFAMILY     { background: #e56f53; color: #000000; }
.fEXHIBITION { background: #9931cc; color:#FFFFFF; }
.fOPERA,
.fFESTIVAL,
.fCLUB,
.fSPORT,
.fWORKSHOP   { background: #333333; color:#FFFFFF}

.glance-cell--date {padding-bottom:0.4rem !important;}
 /* border-left:20px solid white; */
  #filters {
    display: none;
  }

  .glance-selects {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .glance-select-group {
    flex: 1;
    min-width: 0;
  }

  .glance-select {
    width: 100%;
    padding: 0.85em 0.7em;
    font-size: 16px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid #cccccc;
    border-radius: 6px;
  }

  /* The dropdown's own list of options is browser/OS-rendered chrome, not
     really part of the page — Android (and most non-iOS browsers) do
     read font-size/padding off <option> though, so set it explicitly
     rather than leaving it to whatever tiny default the browser picks.
     iOS Safari's picker wheel ignores this entirely; there's no CSS
     that reaches it. */
  .glance-select option {
    font-size: 16px;
    padding: 0.5em;
  }

  #searchShows {
    margin-top: 0.6rem;
  }
}

#filters button:hover {
  text-decoration: underline;
}

/* Same two-tone ring as the hero carousel/related-card fixes — a
   single-colour outline could vanish against a similarly-light pill
   background (e.g. Comedy's pale blue), and nothing here had a
   deliberate focus style before. */
#filters button:focus {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--tht-blue);
}

/* <button>, not <a> — these never navigated anywhere (href="#" plus a
   JS preventDefault()), so a real button is both the correct element
   and, unlike a link, activates on Space as well as Enter without any
   extra JS. */
button.type {
  text-decoration: none;
  padding: 0.6em 0.8em;
  display: inline-block;
  flex-shrink: 0;
  white-space: nowrap;
  color:#FFFFFF;
  border: 0;
  font: inherit;
  cursor: pointer;
}

button.ALL {
  background: var(--tht-dark);
}

.selected {
  text-decoration: underline !important;
  /* padding-bottom: 1.2em !important; */
}

.glance-list {
  margin-top: 1em;
}

.glance-row {
  position: relative;
  display: grid;
  grid-template-columns: 130px 1fr 150px 120px 150px;
  align-items: stretch;
  border-bottom: 1px solid #e5e5e5;
}

/* Stretches the whole row into a click target through to the show,
   without nesting an <a> inside another <a> (the real Title/Buy links).
   Being position:absolute takes it out of the row's own grid flow
   entirely, so it doesn't consume a grid cell. Title/Buy sit above it
   via z-index so they stay independently clickable/correct (Buy keeps
   going to ticketing instead of the show page). */
.glance-row-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.glance-cell--title a,
.glance-cell--buy a {
  position: relative;
  z-index: 2;
}

.glance-row:hover {
  background: #79bff2;
}

.glance-row:hover a {
  text-decoration: underline;
}

.glance-row.is-draft {
  background: #ff9999;
}

.glance-row.odd:not(:first-child) {
  background: #ffffff;
}

.glance-row.even:not(:first-child) {
  background: #f9f9f9;
}

.glance-cell {
  display: flex;
  align-items: center;
  padding: 0.4em 0.6em;
  overflow-wrap: break-word;
}

.glance-cell--filter {
padding:0.4rem;
margin-right:0.4rem;
}

.glance-cell--type {
  font-size: 0.85em;
  color:#FFFFFF;
  text-align:center;
  justify-content: center;
}

.glance-cell--title a {
  color: #333333;
  text-decoration: none;
}

.cancelled-label {
  color: #cc3333;
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
}

/* Duplicated into the title/date cells for mobile's two-line layout
   (see the max-width:639px block) — desktop already shows type/venue
   as their own columns, so these stay hidden there. */
.glance-cell--type-inline,
.glance-cell--venue-inline {
  display: none;
}

.glance-cell--date {
  background: #e9e9e9;
  justify-content: flex-end;
  font-size: 0.9em;
}

.glance-cell--venue {
  justify-content: center;
  font-size: 0.9em;
}

.glance-cell--venue.THEATRE,
.glance-cell--venue.FESTIVAL,
.glance-cell--venue.DANCE {
  color: #ffffff;
}

.glance-cell--buy {
  justify-content: center;
  padding: 0;
}

.glance-cell--buy a {
  display: block;
  width: 100%;
  padding: 0.4em 0.6em;
  background: #e8722a;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
}

.glance-cell--buy a:hover {
  text-decoration: underline;
  background: #d36423;
}

.glance-cell--buy-disabled {
  background: #afafaf;
}

/* Below the nav breakpoint, five grid columns don't fit — each row
   becomes a two-line card instead: title (with a small inline type
   badge) on the first line, date + venue inline on the second, and
   BUY spanning both lines on the right. The standalone type/venue
   cells (used for desktop's column layout) are hidden here in favour
   of the inline badge/text duplicated into the title/date cells. */
@media (max-width: 639px) {
  .glance-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "title buy"
      "date  buy";
    align-items: stretch;
    margin-bottom: 0.4rem;
    /* border-radius: 6px; */
    overflow: hidden;
    box-shadow: none;
    border-bottom: 1px solid #e5e5e5;
  }

  .glance-cell {
    padding: 0em 0.6em;
  }
  .glance-cell--type,
  .glance-cell--venue {
    display: none;
  }

  .glance-cell--title {
    grid-area: title;
    display: block;
    font-weight:bold;
  }

  .glance-cell--date {
    grid-area: date;
    display: block;
    background: none;
    font-size: 0.85em;
    color: #666666;
  }

  .glance-cell--type-inline {
    display: inline-block;
    margin-right: 0.5em;
    padding: 0.15em 0.5em;
    border-radius: 3px;
    font-size: 0.7em;
    color: #ffffff;
    vertical-align: middle;
  }

  .glance-cell--venue-inline {
    display: inline;
    margin-left: 0.5em;
        padding:0 0.4rem;
  }

  .glance-cell--venue-inline::before {
    /* content: "\00b7"; */
    margin-right: 0.5em;

  }

  .glance-cell--buy {
    grid-area: buy;
    padding: 0;
    display:none;
  }

  .glance-cell--buy a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 4.5rem;
    padding: 0.6em;
  }
}

/* ============ 11. Event detail page ============ */

.row-tht { 
  background: var(--tht-dark);
  border-bottom: 1px solid #dfdfdf;
  padding: 0.4em 0;
}
.row-tht h1 {
  color: var(--white);
  margin: 0 0 0.2em;
  font-weight:normal;
  text-align:center;
  font-size:1.12rem;
}

/* Previous/next month arrows either side of the month-listing heading —
   reuses the same chevron glyphs as the hero carousel's prev/next nav.
   Pushed out to the edges of the row so they sit near the screen edges
   rather than clustered on the title; always rendered so the layout
   doesn't jump, faded out via .month-title__arrow--disabled when
   there's nowhere to go.
   Takes over .content-wide's centering/padding directly (rather than
   nesting inside a separate .content-wide div) since this is the only
   place .month-title is ever rendered. */
.month-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0.4rem 1rem;
}

.month-title h1 {
  margin: 0;
}

.month-title__arrow {
  display: none;
  flex-shrink: 0;
  color: var(--white);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.25em 0.4em;
}

.month-title__arrow:hover:not(.month-title__arrow--disabled),
.month-title__arrow:focus:not(.month-title__arrow--disabled) {
  opacity: 0.7;
}

.month-title__arrow--disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 639px) {
  .month-title__arrow {
    display: inline-block;
  }
}
.row-grey {
  background: #f2f2f2;
  border-top: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  padding: 1.25em 0;
}

/* Presenter credit + venue read as secondary meta around the title, not
   full-size body text — tightened down from the browser's default
   font-size/line-height/margins so the block doesn't sprawl. */
.presents {
  margin: 0 0 0.3em;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #666666;
}

.row-grey h1 {
  margin: 0 0 0.2em;
}

.show-venue {
  margin: 0;
  font-size: 0.9rem;
  color: #666666;
}

.show-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.show-header__text {
  min-width: 0;
}

.show-header__buy {
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .row-tht { padding: 0.75em 0; }
  .row-tht h1 { text-align:left; font-size:1.4rem; }
}

@media (max-width: 639px) {
  .show-header__buy {
    width: 100%;
    text-align: center;
  }
}

.show-banner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0;
}

@media (min-width:640px) {
    .show-banner {
    padding: 1rem;
  }
}

.show-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* Book-now panel, styled after the Backstage event-preview's booking
   card (solid colour, centered, rounded) but recoloured to the
   front-end's own palette instead of Backstage's blue. */
.booking-panel {
  background: var(--tht-blue);
  color: var(--white);
  text-align: center;
  padding: 1.5em; 
  border-radius: 8px;
  margin: 0;
}

.booking-panel__heading {
  margin: 0 0 0.4em;
  color: var(--white);
}

.booking-panel__price {
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0 0 1em;
}

.booking-panel__buy {
  margin-top: 0.25em;
}

/* "SOLD OUT" badge, shown in place of the ticket price. */
.so {
  color: #fff;
  padding: 0.6em 1em;
  background: #cc0000;
  display: inline-block;
}

.findus {
  padding: 0.6em 0;
  background: #e8722a;
  color: #ffffff;
  text-align: center;
}

.findus a {
  color: #ffffff;
}

/* Main content, with the info/times box stacked full-width beneath it
   (they're already in this order in the markup, so a single-column grid
   is all that's needed to place it there). */
.show-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

.show-times__heading {
  margin: 0 0 0.5em;
  font-size: 1rem;
}

.show-times__month {
  margin-top: 1em;
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #666666;
}

.show-times__month:first-of-type {
  margin-top: 0;
}

/* A single show can have anywhere from 1 to 20+ dates, several with more
   than one time. The full-width info box gives room to lay dates out as
   a grid of tiles rather than one long stacked list, so a show with a
   dozen-plus dates reads as a few short rows instead of a scroll. */
.show-times__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
}

.show-times__row {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.5em 0.75em;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  font-size: 0.9em;
}

.show-times__day {
  display: block;
  font-weight: 600;
}

.show-times__time {
  color: #666666;
  margin-right: 0.5em;
}

.show-times__time:last-child {
  margin-right: 0;
}

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block;
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em;
  font-size: 0.8em;
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
  font-family: var(--font-sans);
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  margin-top: 0.2em;
  vertical-align: top;
}

.resp-sharing-button__icon--solid {
  fill: #fff;
  stroke: none;
}

.resp-sharing-button--facebook { background: #3b5998; }
.resp-sharing-button--facebook:hover { background: #2d4373; }
.resp-sharing-button--twitter { background: #55acee; }
.resp-sharing-button--twitter:hover { background: #2795e9; }
.resp-sharing-button--email { background: #777; }
.resp-sharing-button--email:hover { background: #5e5e5e; }

/* ============ 12. Blog ============ */

.blog-body {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.blog-body a { 
  color: var(--orange);
  color: var(--tht-blue);
}

@media (min-width: 900px) {
  .blog-body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    max-width: var(--content-max);
  }
}

/* ============ 13. Genre colours ============
   Shared by show-card genre badges (.genre.TYPE), the At A Glance list
   (.glance-cell--type / .glance-cell--venue — the latter reuses THEATRE/
   FESTIVAL/DANCE/COMEDY as venue-color codes), and the filter pills
   (button.TYPE). Bare class selectors so any element carrying a TYPE
   class picks up its colour automatically. Full 20-value enum kept even
   though only a handful are in use at any given time, since Type/Venue
   are DB-driven and can appear later.

   Text colour is chosen per background for WCAG AA contrast (4.5:1)
   rather than assumed white — several of these brand colours (THEATRE's
   blue, COMEDY's pale blue, the pink, the greens) are too light for
   white text to read reliably; black passes comfortably on all of them
   without changing the colours themselves. The button.type.TYPE pairs
   exist only to out-specificity button.type's own `color:#FFFFFF`
   (element+class beats a bare class) — .genre and .glance-cell--type
   are bare classes too, so the plain .TYPE rule already wins there via
   source order. */

.THEATRE    { background: #48a0e0; color: #000000; }
.MUSIC,
.MUSICAL    { background: #3f916d; color: #000000; }
.DANCE,
.VARIETY    { background: #fc7fb7; color: #000000; }
.FILM       { background: #a1277a; }
.COMEDY     { background: #99ccff; color: #000000; }
.FIGHT,
.LITERATURE { background: #ffff33; color: #000000; }
.TALK,
.COMMUNITY  { background: #3ed975; color: #000000; }
.MISC       { background: #d9044b; }
.CHILDRENS,
.FAMILY     { background: #e56f53; color: #000000; }
.EXHIBITION { background: #9931cc; }
.OPERA,
.FESTIVAL,
.CLUB,
.SPORT,
.WORKSHOP   { background: #333333; }

button.type.THEATRE,
button.type.MUSIC,
button.type.MUSICAL,
button.type.DANCE,
button.type.VARIETY,
button.type.COMEDY,
button.type.TALK,
button.type.COMMUNITY,
button.type.CHILDRENS,
button.type.FAMILY { color: #000000; }



/* ============ 14. CMS rich-text authoring utilities ============
   Used inside editor-authored $Content/$Body HTML (event descriptions,
   pages, news posts) — not emitted by templates, so not tied to any
   specific sampled page. */

.q14 { text-align: center; font-size: 1.4em; }
.q12 { text-align: center; font-size: 1.2em; }

.sinfo { padding: 1em 1em 0.4em 1em; margin-bottom: 1em; }
.cLight { background: #efefef; }
.cDark { background: #dfdfdf; }
.cRed { background: #ffaba0; }
.cYellow { background: #fefbd8; }



/* ============ 15. Mailchimp newsletter signup form ============ */
#mc_embed_signup p {margin-bottom: 0.6em;}
#mc_embed_signup p.newsletter {font-size: 1.6em;color: #FFFFFF;margin-bottom: 0.4em;}
#mc_embed_signup form {display: block;position: relative;text-align: center;padding: 10px 0 10px 0;}
#mc_embed_signup input {border: 1px solid #999;-webkit-appearance: none;}
#mc_embed_signup input:focus {border-color: #333;}
#mc_embed_signup .button {clear: both;background-color: #3390CF;border: 0 none;border-radius: 4px;letter-spacing: .03em;color: #FFFFFF;cursor: pointer;display: inline-block;font-size: 15px;height: 32px;line-height: 32px;margin: 0 5px 10px 0;padding: 0;text-align: center;text-decoration: none;vertical-align: top;white-space: nowrap;width: auto;transition: all 0.23s ease-in-out 0s;background: #FEC232;color: #000;}
#mc_embed_signup .button:hover {background: #FFD276; }
#mc_embed_signup .clear {clear: none;display: inline;}
#mc_embed_signup input.email {font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Verdana, sans-serif;font-size: 15px;display: block;padding: 0 0.4em;margin: 0 auto 10px auto;min-height: 32px;width: 80%;min-width: 130px;border-radius: 3px;}
#mc_embed_signup input.button {display: block;width: 80%;margin: 0 auto 10px auto;min-width: 90px;}
#mc_embed_signup {margin-bottom: 1em;background: #459EE0;color: #FFF;clear: left;font: 14px Helvetica, Arial, sans-serif;}

/* ============ 16. Bottom bar (back to top / prev-next show) ============ */

/* One floating menu instead of separate corner buttons: back-to-top
   always sits in the middle (works on every page, any width); the
   prev/next show buttons join it either side, but only on the month
   listing grid, and only below 640px — on wider multi-column layouts
   "next/previous card" isn't a clean linear sequence the way it is in
   mobile's single-column stack. The whole bar appears together on
   scroll, matching back-to-top's previous behaviour. */
.bottom-bar {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  background: var(--white);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 0.5rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 30;
}

.bottom-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.bottom-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
  border: 0;
  background: var(--tht-blue);
  color: var(--white);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.bottom-bar__btn:hover,
.bottom-bar__btn:focus {
  background: var(--tht-hover);
}

.bottom-bar__btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.bottom-bar__btn--nav,
.bottom-bar__counter {
  display: none;
}

/* On mobile the floating pill becomes a thin, full-width bar flush with
   the bottom edge instead — square corners, dark THT blue. 44px tall to
   meet the WCAG 44x44px touch-target minimum without eating into the
   page any more than that requires. */
@media (max-width: 639px) {
  .bottom-bar__btn--nav {
    display: flex;
  }

  .bottom-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 44px;
    padding: 0;
    gap: 0;
    background: var(--tht-dark);
    border-radius: 0;
    box-shadow: none;
    transform: translateY(100%);
  }

  .bottom-bar.is-visible {
    transform: translateY(0);
  }

  .bottom-bar__btn {
    flex: 1;
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
  }

  .bottom-bar__btn + .bottom-bar__btn,
  .bottom-bar__btn + .bottom-bar__counter,
  .bottom-bar__counter + .bottom-bar__btn {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }

  .bottom-bar__btn:hover,
  .bottom-bar__btn:focus {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Live position ("1 / 6") from initShowNav's current-card tracking —
     sized to its own content rather than stretching like the buttons,
     so Prev/Top/Next stay full-size. */
  .bottom-bar__counter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.75em;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    white-space: nowrap;
  }
}

.hide-for-small {
  display: none;
}

@media (min-width: 640px) {
  .hide-for-small {
    display: inline;
  }
}