/* TAP style overrides, loaded after the shared styles on every TAP page. */

/* Every button is TAP pink (Brand Kit color 3), except Register Now in the header. */
.btn-primary,
.btn-secondary,
.btn-turquoise,
.btn-pink {
  background: var(--brand-accent-1) !important;
  color: var(--brand-on-primary, #000000) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(var(--brand-accent-1-rgb), 0.35);
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-turquoise:hover,
.btn-pink:hover {
  background: var(--brand-accent-1) !important;
  box-shadow: 0 8px 30px rgba(var(--brand-accent-1-rgb), 0.6);
}

.navbar .btn-primary {
  background: linear-gradient(135deg, var(--meechy-purp) 0%, var(--brand-primary-dark) 100%) !important;
  box-shadow: 0 4px 20px rgba(var(--brand-primary-rgb), 0.45);
}

/* Home hero title ("The After Party") and subtitle ("A West Coast Swing Experience"): plain white League Spartan. */
.hero-title,
.hero-title .gradient-text,
.hero-title .gradient-pink-purple {
  font-family: 'League Spartan', sans-serif !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
}

/* Trial (28 Oct): hero title in cyan Xtreem Fat, first letter of each word
   capitalized. Revert this block to go back. */
@font-face {
  font-family: 'Xtreem Fat';
  src: url('/content/tap-26/fonts/XtreemFat_Demo.ttf') format('truetype');
  font-display: swap;
}

.hero-title {
  text-transform: capitalize;
}

.hero-title,
.hero-title .gradient-text {
  font-family: 'Xtreem Fat', 'League Spartan', sans-serif !important;
  font-weight: 400 !important;
}

.hero-title .gradient-pink-purple {
  font-weight: 900;
}

.hero-title,
.hero-title .gradient-text {
  color: var(--brand-primary) !important;
  -webkit-text-fill-color: var(--brand-primary) !important;
}

/* Hero subtitle at 30px, scaling down with the title on small screens. */
.hero-title .gradient-pink-purple {
  font-size: min(30px, 0.5em) !important;
}

/* Hero badge: 33px higher, pink text. */
.hero-badge-pill {
  position: relative;
  top: -33px;
  color: var(--brand-accent-1) !important;
}

/* Mobile: the script title stays on one line, sized to fit the screen, with
   room between it and the subtitle. */
@media (max-width: 768px) {
  .hero-title {
    font-size: calc((100vw - 48px) / 8.8) !important;
    white-space: nowrap;
    line-height: 1.7;
  }

  .hero-title .gradient-pink-purple {
    font-size: 24px !important;
    white-space: normal;
    line-height: 1.15;
    padding-top: 10px;
  }
}

/* Drop shadow behind the hero title only. */
.hero-title {
  text-shadow: 3px 4px 8px rgba(0, 0, 0, 0.75);
}

.hero-title .gradient-pink-purple {
  text-shadow: none;
}

/* Divisions and Our Vibe pages: pink icons on the cards. */
body[data-page="divisions"] .card-icon-wrapper,
body[data-page="our-vibe"] .card-icon-wrapper {
  color: var(--brand-accent-1);
}

/* Staff photos: crop from the bottom so heads aren't cut off. */
.staff-img {
  object-position: center top;
}

/* Leveled Classes: pull the Levels section 10px closer to Take vs Experience. */
body[data-page="leveled-classes"] #pageContent > section:nth-child(3) {
  margin-top: -10px;
}

/* Schedule: black day names on the colored corner flags (THU, FRI...). */
.corner-day-flag {
  color: #000000 !important;
}

/* Schedule: black text on the selected day tab (Full Schedule, Thursday...). */
.tab-btn.active,
.tab-btn.active i {
  color: #000000 !important;
}

/* Box View: time boxes match the room-name row (the day's color, and font). */
.box-table th.box-time,
.box-day[data-day-code] .box-table th.box-time {
  background: var(--dc, var(--brand-primary));
  color: #000000;
  font-family: var(--font-heading);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Box View: TAP into PRIDE sessions get a pride-flag rainbow. */
.box-session[data-title*="PRIDE" i] {
  /* A dark veil over the stripes mutes them so the text pops. */
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), linear-gradient(180deg, #e40303 0%, #e40303 16.6%, #ff8c00 16.6%, #ff8c00 33.3%, #ffed00 33.3%, #ffed00 50%, #008026 50%, #008026 66.6%, #24408e 66.6%, #24408e 83.3%, #732982 83.3%, #732982 100%);
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
}

/* Schedule: Box View is the first view button. */
#viewBtnBox {
  order: -1;
}

/* Box View: social / open dancing boxes are a white-to-grey gradient. */
:root {
  --tap-social-box: linear-gradient(180deg, #ffffff 0%, #b8bcc2 100%);
}

/* Box View: the room-name row (in the day's color) runs into the corner cells. */
.box-table thead th:first-child,
.box-table thead th:last-child {
  background: var(--dc, var(--brand-primary));
  border-radius: 4px;
}

/* Agenda: later events in the same time slot leave their time blank, so the
   empty spot shows they run at the same time as the card above. */
.session-card.same-slot .session-time {
  visibility: hidden;
}

/* Day colors, used by every schedule view and the Manage Matrix:
   Thursday cyan, Friday pink, Saturday blue, Sunday purple. The -ink color is
   the text on a filled day color. */
:root {
  --day-thu: var(--brand-primary); --day-thu-rgb: var(--brand-primary-rgb); --day-thu-ink: #000000;
  --day-fri: var(--brand-accent-1); --day-fri-rgb: var(--brand-accent-1-rgb); --day-fri-ink: #000000;
  --day-sat: var(--brand-accent-2); --day-sat-rgb: var(--brand-accent-2-rgb); --day-sat-ink: #000000;
  --day-sun: #b794f6; --day-sun-rgb: 183, 148, 246; --day-sun-ink: #000000;
}

/* Staff portal: Staff Hub & Info buttons are text only. */
.staff-modal-btns-grid .btn i {
  display: none;
}