/*
Theme Name: Bitter Tea
Author: Bitter Tea
Version: 1.0
Text Domain: bittertea
*/

:root{
  --bt-bg: #ffffff;
  --bt-fg: #000000;
  --bt-grey: #d9d9d9;
}

*{ box-sizing: border-box; }

/* Kill horizontal scroll globally */
html, body{
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* fallback */
}
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

body{
  background: var(--bt-bg);
  color: var(--bt-fg);
  font-family: Arial, Helvetica, sans-serif;
  touch-action: pan-x pan-y;
}

/* =========================
   NAV
========================= */
.bt-nav{
  position: fixed;
  z-index: 1000;
  left: 0; top: 0; right: 0;
  background: var(--bt-bg);
  border-bottom: 2px solid var(--bt-fg);
}

.bt-nav__row{
  display:flex;
  border-left: 2px solid var(--bt-fg);
}

.bt-nav__cell{
  flex: 1;
  border-right: 2px solid var(--bt-fg);
  height: 44px;
  display: flex;
}

.bt-nav a{ text-decoration: none; }
.bt-nav a:focus{ outline: none; }

.bt-nav__link,
.bt-nav__brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height: 100%;
  width: 100%;
  padding: 0 10px;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  line-height: 1;
  color: var(--bt-fg);
  background: var(--bt-bg);
  transition: background .15s ease, color .15s ease, transform .05s ease;
}

.bt-nav__brand{
  background: var(--bt-fg);
  color: var(--bt-bg);
}

.bt-nav__link:hover{
  background: var(--bt-fg);
  color: var(--bt-bg);
}

.bt-nav__link:active,
.bt-nav__brand:active{
  transform: translateY(2px);
}

.bt-logo{
  display:flex;
  align-items:center;
  gap: 8px;
}
.bt-logo img{
  height: 20px;
  width: auto;
  display:block;
}

.custom-logo-link{
  display:flex;
  align-items:center;
}
.custom-logo{
  height: 20px;
  width: auto;
  display:block;
}

/* Desktop menu visible / mobile hidden */
.bt-desktop{ display:none; }
.bt-mobile{ display:flex; }

/* Mobile Menu button */
.bt-menu-btn{
  width: 100%;
  justify-content: flex-end;
  background: var(--bt-bg);
  color: var(--bt-fg);
  border: 0;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Full page overlay menu (mobile) */
.bt-overlay{
  position: fixed;
  inset: 0;
  background: var(--bt-bg);
  color: var(--bt-fg);
  z-index: 2000;
  display: none;
}
.bt-overlay.is-open{ display:block; }

.bt-overlay__top{
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding: 0 12px;
  border-bottom: 2px solid var(--bt-fg);
}

.bt-overlay__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font: inherit;
}

.bt-overlay__list{
  margin: 0;
  padding: 0;
  list-style: none;
}
.bt-overlay__item{
  border-bottom: 2px solid var(--bt-fg);
}
.bt-overlay__item a{
  display:block;
  padding: 14px 12px;
  text-decoration:none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bt-fg);
}
.bt-overlay__item a:hover{
  background: var(--bt-fg);
  color: var(--bt-bg);
}

/* Desktop breakpoint */
@media (min-width: 768px){
  .bt-desktop{ display:flex; }
  .bt-mobile{ display:none; }
  .bt-nav__link,
  .bt-nav__brand{ font-size: 16px; }
}

/* Spacer so content doesn't hide under fixed nav */
.bt-page{ padding-top: 46px; }
@media (min-width: 768px){
  .bt-page{ padding-top: 0px; }
}

@media (max-width: 767px){
  .bt-desktop{ display: none !important; }
  .bt-mobile{ display: flex !important; }

  .bt-nav__brand{
    background: var(--bt-fg);
    color: var(--bt-bg);
  }

  .bt-menu-btn{
    background: var(--bt-bg);
    color: var(--bt-fg);
    justify-content: flex-end;
  }
}

/* =========================
   SLIDER (FULL BLEED)
========================= */
.bt-slider{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-bottom: 2px solid var(--bt-fg);
}

.bt-slider__viewport{
  width: 100%;
  height: calc(100svh - 44px);
  overflow: hidden;
}

.bt-slider__track{
  display: flex;
  height: 100%;
  transform: translateX(0%);
  transition: transform 450ms ease;
}

.bt-slide{
  min-width: 100%;
  height: 100%;
}

.bt-slide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* =========================
   TOUR (FULL BLEED)
========================= */
.bt-tour{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--bt-grey);
  border-top: 2px solid var(--bt-fg);
  border-bottom: 2px solid var(--bt-fg);
}

.bt-tour__header{
  padding: 18px 18px 12px;
  border-left: 2px solid var(--bt-fg);
  border-right: 2px solid var(--bt-fg);
  background: var(--bt-grey);
}

.bt-tour__title{
  margin: 0;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.bt-tour__subtitle{
  margin: 6px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
}

.bt-tour__table{
  border-left: 2px solid var(--bt-fg);
  border-right: 2px solid var(--bt-fg);
}

.bt-tour__row{
  display: grid;
  grid-template-columns: 420px 1fr 160px;
  align-items: stretch;
  border-top: 2px solid var(--bt-fg);
  background: var(--bt-grey);
  min-height: 78px;
}

.bt-tour__col{
  padding: 14px 16px;
  height: 100%;
  display: flex;
  align-items: center;
}

.bt-tour__date{ border-right: 2px solid var(--bt-fg); }
.bt-tour__city{ border-right: 2px solid var(--bt-fg); }

.bt-tour__date{
  align-items: flex-start;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.bt-tour__date-top{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-size: 14px;
  line-height: 1.1;
}

.bt-tour__venue{
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 500;
}

.bt-tour__city{
  justify-content: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
}

.bt-tour__btn{
  padding: 0;
  justify-content: flex-end;
}

/* Tickets: not a full black block; becomes black on hover */
.bt-tour__tickets{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  color: #000;
  border-left: 2px solid var(--bt-fg);

  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.8px;

  transition: background .15s ease, color .15s ease;
}

.bt-tour__tickets::after{
  content: "↗";
  display: inline-block;
  margin-left: 8px;
  font-weight: 900;
  transform: translateY(-1px);
}

.bt-tour__tickets:hover{
  background: #000;
  color: #fff;
}

.bt-tour__empty{
  grid-template-columns: 1fr;
}
.bt-tour__empty .bt-tour__col{
  border-right: 0 !important;
  justify-content: flex-start;
}

@media (max-width: 767px){
  .bt-tour__header{
    padding: 16px 14px 12px;
  }

  .bt-tour__title{ font-size: 40px; }

  .bt-tour__row{
    grid-template-columns: 1fr;
    min-height: unset;
    border-top: 2px solid var(--bt-fg);
  }

  .bt-tour__date,
  .bt-tour__city,
  .bt-tour__btn{
    border-right: 0 !important;
  }

  .bt-tour__col{
    padding: 14px 14px;
    justify-content: center;
    text-align: center;
  }

  .bt-tour__date{
    align-items: center;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 10px;
  }

  .bt-tour__city{
    padding-top: 0;
    padding-bottom: 14px;
  }

  .bt-tour__btn{
    padding: 0;
    justify-content: center;
  }

  .bt-tour__tickets{
    width: 100%;
    height: 44px;
    border: 0;
    border-top: 2px solid var(--bt-fg);
    background: #000;
    color: #fff;
  }

  .bt-tour__tickets::after{ display:none; }

  .bt-tour__tickets:hover{
    background: #fff;
    color: #000;
  }
}

/* =========================
   UPCOMING TOURS (REFERENCE-LIKE: WATCH LAYOUT)
   Full-width bordered container
   Left: title with max-width
   Right: poster with border-left and nav bar
   Posters: 1440x1920 (3:4)
========================= */

.bt-pt{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--bt-grey);
  border: 2px solid var(--bt-fg); /* full frame like reference */
}

/* Flex container inside (like reference flex border ... justify-between w-svw) */
.bt-pt__grid{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

/* LEFT COLUMN (like max-w-1/3) */
.bt-pt__header{
  flex: 1 1 0;
  max-width: 33.333%;
  padding: 18px;
}

.bt-pt__title{
  margin: 0;
  font-size: 44px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

/* RIGHT COLUMN (like max-w-2/3 + border-l-2) */
.bt-pt__frame{
  flex: 1 1 0;
  max-width: 66.666%;
  width: 100%;
  border-left: 2px solid var(--bt-fg);
  background: var(--bt-grey);
  min-width: 0;
}

/* Stage */
.bt-pt__stage{
  width: 100%;
  overflow: hidden;
  background: var(--bt-grey);
}

/* Poster aspect ratio (portrait) */
.bt-pt__track{
  display: flex;
  width: 100%;
  transform: translateX(0%);
  transition: transform 450ms ease;
}

.bt-pt__slide{
  min-width: 100%;
}

/* the poster box = full width, height comes from aspect-ratio */
.bt-pt__slide img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;     /* forces poster-shaped area like reference aspect-video */
  display: block;
  object-fit: contain;      /* show whole poster */
  object-position: center;
  background: var(--bt-grey);
}

/* Bottom bar like reference (border-top, arrows, label) */
.bt-pt__bar{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;

  border-top: 2px solid var(--bt-fg);
  height: 32px;
  min-height: 32px;
  background: var(--bt-grey);
  overflow: hidden;
}

.bt-pt__nav{
  width: 44px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bt-pt__prev{
  border-right: 2px solid var(--bt-fg);
}
.bt-pt__next{
  border-left: 2px solid var(--bt-fg);
}

.bt-pt__nav:hover{
  background: #000;
  color: #fff;
}

.bt-pt__label{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  font-size: 12px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Larger controls on desktop (like lg:h-12) */
@media (min-width: 1024px){
  .bt-pt__title{ font-size: 56px; }

  .bt-pt__bar{
    height: 48px;
    min-height: 48px;
    grid-template-columns: 48px 1fr 48px;
  }

  .bt-pt__nav{
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
}

/* MOBILE: stack, like reference behaviour in other sections */
@media (max-width: 767px){
  .bt-pt__grid{
    flex-direction: column;
  }

  .bt-pt__header{
    max-width: 100%;
    width: 100%;
    padding: 16px 14px 12px;
    border-bottom: 2px solid var(--bt-fg);
  }

  .bt-pt__title{ font-size: 40px; }

  .bt-pt__frame{
    max-width: 100%;
    border-left: 0;
  }

  .bt-pt__slide img{
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
  }
}


/* =========================
   FOOTER (FULL BLEED)
========================= */
.bt-footer{
  position: relative;
  left: 50%;
  right: 50%;
  width: 100%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--bt-grey);
  border-top: 2px solid var(--bt-fg);
  border-bottom: 2px solid var(--bt-fg);
}

.bt-footer__row{
  display: flex;
  align-items: stretch;
  justify-content: space-between;

  border-left: 2px solid var(--bt-fg);
  border-right: 2px solid var(--bt-fg);
}

.bt-footer__cell{
  flex: 1;
  min-height: 44px;
  display: flex;
  align-items: center;

  padding: 0 12px;

  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.bt-footer__left{
  justify-content: flex-start;
  border-right: 2px solid var(--bt-fg);
}

.bt-footer__right{
  justify-content: flex-end;
}

.bt-footer a{
  color: var(--bt-fg);
  text-decoration: none;
}

.bt-footer a:hover{
  background: var(--bt-fg);
  color: var(--bt-bg);
  padding: 2px 6px;
  margin-right: -6px; /* keeps alignment visually stable */
}

/* Mobile: stack like the other sections */
@media (max-width: 767px){
  .bt-footer__row{
    flex-direction: column;
  }
  .bt-footer__left{
    border-right: 0;
    border-bottom: 2px solid var(--bt-fg);
    justify-content: center;
  }
  .bt-footer__right{
    justify-content: center;
  }
}