/* =====================================================================
   PASTE-READY COPY for WordPress Custom CSS (SiteOrigin) or Additional CSS
   Includes everything the Calendar
   page needs for the photo banner and "How will you explore today?"
   (sections 16 and 17), including removing the old empty banner gap.
   Replace ALL of the existing SiteOrigin Custom CSS with this file.
   Everything is scoped to TNEW pages (.tnew-template-inner), so it
   won't change the rest of the website.
   ===================================================================== */

/* #####################################################################
   THANKSGIVING POINT · TNEW STYLE OVERRIDES · VERSION 1.1 (Nov 10, 2026)
   ---------------------------------------------------------------------
   One file with every style change from this project. Pair it with
   tnew-overrides.js (optional script), which is needed only for two optional
   features: the quantity plus/minus buttons (section 18) and the
   "Select date of your visit" mini calendar (section 11).

   HOW TO INSTALL
     - Add this file AFTER the theme's existing TNEW stylesheet
       (tnew_*.css). Best practice: add it to the theme's source styles
       and rebuild, rather than editing the compiled file.
     - Add tnew-overrides.js (optional script) to the theme's TNEW script, or load
       it as its own  on the TNEW template.
     - TNEW may cache its template; refresh it if changes don't appear.
     - Nothing in the original stylesheet is edited. To undo any part,
       delete that section below.

   WHAT'S INSIDE (in order; later sections build on earlier ones, so
   keep the order)
     1. Buttons: TNEW's original colors, with rounded corners and a
        keyboard focus ring
     2. Calendar: show only All-Access Pass (visual filter)
     3. Calendar: 80% width, centered (desktop)
     4. Calendar: half-size event tiles
     5. Calendar: equal-size day boxes (desktop)
     6. V2: closed Sundays/Thanksgiving, gray not-on-sale, past/next-
        month dates, header colors, tabs, duplicate heading removed
     7. V3: lighter tiles, plain tabs, less blue
     8. V4: dark-blue month bar, warm-sand header, orange "today",
        red "Closed"
     9. V5: mini month calendar on phones
    10. Event pages: description box at 80% width (desktop)
    11. Mini date picker styles (used by tnew-overrides.js (optional script))
    12. Compact List view
    13. Login page redesign
         (Heading/intro wording is changed in TNEW content, not here:
          "Log in or create an account" / "Members: log in before
          adding items to your cart to get your discount.")
    14. Calendar: Day / Week / Month switcher hidden
    15. Event pages: heading reads "Date of your visit"
    16. Calendar page: photo banner sizing (images go in TNEW intro text)
    17. Calendar page: "How will you explore today?" buttons
         (needs the HTML snippet added to TNEW's page intro text)
    18. Event pages: quantity plus / minus styles
         (needs the plus/minus script in tnew-overrides.js (optional script))
    19. Event pages: layout redesign (date picker merged into the page,
         ticket table, info box, full-width Add to Cart)
    20. Event pages: compact description (smaller text, two columns
         on wider screens)

   KEEP IN MIND
     - All-Access filter and closed days only change what's SHOWN;
       events are still sold via List view links/direct URLs unless
       changed in TNEW/Tessitura.
     - Thanksgiving dates are listed through 2030.
     - Rules target TNEW's class names; re-check after TNEW upgrades.
   ##################################################################### */


/* =====================================================================
   TNEW BUTTON OVERRIDES: email-receipt style
   ---------------------------------------------------------------------
   HOW TO USE: Paste this whole block at the very END of tnew.css (or
   load it after tnew.css). Nothing above it is edited. To undo, delete
   this block.

   WHY "!important" AND LONG SELECTORS: the existing button rules use
   !important and long selectors. These rules repeat those selectors so
   they win, and because this block comes last it takes priority.

   UPDATE (Nov 10, 2026): button colors are back to TNEW's originals.
   This section now only rounds the corners and adds a focus ring.
   WHAT CHANGES: rounded corners.
   WHAT DOES NOT: font (still Montserrat), UPPERCASE labels, size,
   padding, layout. (Uppercase is kept on purpose: some TNEW labels
   are typed in lowercase, e.g. the promo code "submit" button.)

   ===================================================================== */


/* ---------- 1. MAIN BUTTONS: blue ---------------------------------- */
/* Generic TNEW buttons, Add to Cart, Checkout/Continue, Submit Payment,
   donation ask, login/register, giving forms, modal "confirm".        */

.tnew-template-inner .btn:not(.btn-sm, .btn-small),
.tnew-template-inner .tn-events-detail-page #tn-add-to-cart-button,
.tnew-template-inner .tn-cart-details-page .tn-cart-buttons .btn-primary:not(.btn-small),
.tnew-template-inner .tn-payment-page .tn-cart-buttons .btn-primary:not(.btn-small),
.tnew-template-inner .tn-receipt-page .tn-cart-buttons .btn-primary:not(.btn-small),
.tnew-template-inner .tn-payment-page .tn-payment-submit-component #tn-payment-submit-button:not(.btn-small),
.tnew-template-inner .tn-payment-page .tn-donation-ask-component__submit-button:not(.btn-small),
.tnew-template-inner .tn-account-login-page .btn-primary:not(.btn-small),
.tnew-template-inner .tn-account-login-page .tn-register-button:not(.btn-small),
.tnew-template-inner .tn-account-create-page #tn-account-register-button-register:not(.btn-small),
.tnew-template-inner .tn-contribution-group-page #tn-contribution-submit,
.tnew-template-inner .tn-one-page-giving-page .btn-lg,
body.modal-open .modal .modal-btn-confirm {
  border-radius: 6px !important;      /* rounded corners only; colors are TNEW's originals */
}

/* (hover colors removed: TNEW's original hover is used) */


/* ---------- 2. UTILITY BAR + DATE PICKER: blue ------------------- */
/* Small utility buttons: Login / promo code Submit / View Cart in the
   top utility bar, and the calendar date picker (the month bar and its
   < > arrows). These need their own rules because the existing CSS
   styles them separately. The date picker is three buttons joined into
   one bar, so it keeps square corners to stay joined.                */

.tnew-template-inner .tn-utility-nav .btn {
  border-radius: 6px !important;      /* rounded corners only; colors are TNEW's originals */
}


/* ---------- 3. KEYBOARD FOCUS RING --------------------------------- */
/* The old sliding fill also showed keyboard focus. Since hover is now a
   subtle shade, this adds a clear outline for people tabbing through
   checkout. It only appears for keyboard focus, not mouse clicks.     */

.tnew-template-inner .btn:focus-visible,
.tnew-template-inner #tn-add-to-cart-button:focus-visible,
.tnew-template-inner #tn-payment-submit-button:focus-visible,
.tnew-template-inner #tn-account-register-button-register:focus-visible,
.tnew-template-inner #tn-contribution-submit:focus-visible,
.tnew-template-inner .tn-btn-datepicker__btn:focus-visible,
body.modal-open .modal .modal-btn-confirm:focus-visible {
  outline: 2px solid #1F4E79 !important;
  outline-offset: 2px !important;
}

/* ===================== END TNEW BUTTON OVERRIDES ===================== */


/* =====================================================================
   CALENDAR FILTER: show only "All-Access Pass"
   ---------------------------------------------------------------------
   Separate from the button styles above; delete this block on its own
   to bring all events back.

   HOW IT WORKS: every All-Access Pass tile links to production season
   307058 (its links look like /307058/314992). This rule hides every
   calendar tile whose link does NOT contain "/307058/".

   NOTES:
   - Calendar view only. "View as List" and direct links still show
     every event, and hidden events can still be bought by URL. This
     is a visual filter, not a sales restriction.
   - If All-Access Pass is ever rebuilt as a new production season in
     Tessitura, its ID changes and this rule will hide it too. Update
     307058 to the new ID.
   - Uses :has(), supported by all current major browsers (Chrome,
     Edge, Safari, Firefox).
   ===================================================================== */

.tnew-template-inner .tn-events-calendar__day-event-list-item:not(:has(a[href*="/307058/"])) {
  display: none !important;
}

/* ===================== END CALENDAR FILTER =========================== */


/* =====================================================================
   CALENDAR SIZE: 80% width, centered
   ---------------------------------------------------------------------
   Shrinks the month grid (and its "NOVEMBER 2026" heading) to 80% of
   the page's content width and centers it. Text size is unchanged.
   Only applies on screens 850px and wider; on phones and small
   tablets the calendar stays full width so it doesn't get cramped.
   Delete this block on its own to return to full width.
   ===================================================================== */

@media (min-width: 850px) {
  .tnew-template-inner .tn-events-calendar__table-container {
    width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ===================== END CALENDAR SIZE ============================= */


/* =====================================================================
   CALENDAR EVENT TILES: half size
   ---------------------------------------------------------------------
   Makes the event boxes inside each day (e.g. "All-Access Pass") about
   half their original height: 75px -> 41px for a normal tile.
     - Padding: was 30px top / 10px right / 7px bottom / 5px left;
       now 6px top and bottom, 5px left and right.
     - Text: was 16px; now 12px. (A true half, 8px, is too small to
       read, so the height comes mostly from the padding.)
     - min-height keeps one-line and two-line tiles the same height.
   The "Tickets Not On Sale" band uses negative margins to stretch
   edge to edge inside the tile, so those are adjusted to the new
   padding. Otherwise the band would stick out past the tile.
   Delete this block on its own to restore the original tile size.
   ===================================================================== */

.tnew-template-inner .tn-events-calendar__event {
  padding: 6px 5px !important;
  min-height: 41px !important;
  font-size: 12px !important;
  line-height: 13px !important;
}

.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-name {
  font-size: 12px !important;
}

.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-status {
  font-size: 10px !important;
  margin: 5px -5px -6px -5px !important;
  padding: 3px 5px !important;
}

/* ===================== END CALENDAR EVENT TILES ====================== */


/* =====================================================================
   CALENDAR DAY BOXES: all the same size
   ---------------------------------------------------------------------
   Before: a week with no events was short (52px), a week with a
   "Tickets Not On Sale" tile was tall (129px), and the Wednesday
   column was wider because the browser sized columns by their text.
     - table-layout: fixed makes all 7 columns equal width.
     - height: 130px gives every day box the same height, blank or
       not. 130px fits the tallest content today: the day number plus
       an All-Access Pass tile with its "Tickets Not On Sale" band.
     - vertical-align: top keeps the day number and tile at the top of
       the box.
   NOTE: In a table, "height" works as a minimum. If a day ever holds
   more than fits in 130px (e.g. if the All-Access Pass filter above is
   removed and a day has several events), that row grows to fit rather
   than cutting events off.
   Only applies on screens 850px and wider, like the 80% width.
   Delete this block on its own to go back to automatic sizing.
   ===================================================================== */

@media (min-width: 850px) {
  .tnew-template-inner .tn-events-calendar__table {
    table-layout: fixed !important;
    width: 100% !important;
  }

  .tnew-template-inner .tn-events-calendar__table tbody td.tn-events-calendar__day-cell {
    height: 130px !important;
    vertical-align: top !important;
  }
}

/* ===================== END CALENDAR DAY BOXES ======================== */


/* #####################################################################
   V2 DESIGN SUGGESTIONS (experiment, compare against CONTROL v1)
   Everything above this line is identical to CONTROL v1.
   Each block below can be deleted on its own.
   ##################################################################### */


/* ---------- S1. Not-on-sale and past days look different ----------- */
/* A tile that contains a status ("Tickets Not On Sale") turns gray
   with readable white text, so blue only means "available to buy".  */
.tnew-template-inner .tn-events-calendar__event:has(.tn-events-calendar__event-status),
.tnew-template-inner .tn-events-calendar__event:has(.tn-events-calendar__event-status):hover,
.tnew-template-inner .tn-events-calendar__event:has(.tn-events-calendar__event-status):focus {
  background: #8A9099 !important;
}
.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-status {
  background: transparent !important;
  color: #fff !important;
  margin: 3px 0 0 0 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

/* Past days: hide their tiles and gray out the date number.         */
.tnew-template-inner td.tn-events-calendar__day-cell--past .tn-events-calendar__day-event-list {
  display: none !important;
}
.tnew-template-inner td.tn-events-calendar__day-cell--past .tn-events-calendar__day-number {
  color: #A8A8A8 !important;
}

/* Days from the next/previous month (TNEW labels both
   "previous-month"): gray date number and faded tiles.               */
.tnew-template-inner td.tn-events-calendar__day-cell--previous-month .tn-events-calendar__day-number {
  color: #A8A8A8 !important;
}
.tnew-template-inner td.tn-events-calendar__day-cell--previous-month .tn-events-calendar__event {
  opacity: 0.5 !important;
}


/* ---------- S2. Weekday header in the email's colors --------------- */
.tnew-template-inner .tn-events-calendar__table thead th {
  background: #EAF2FA !important;
  color: #1F4E79 !important;
  font-weight: 700 !important;
}


/* ---------- S3. Remove duplicate month heading --------------------- */
/* The month already shows in the blue month bar.                     */
.tnew-template-inner .tn-events-calendar-view .tn-event-listing-view__results-heading {
  display: none !important;
}


/* ---------- S4. Tabs as rounded blue toggles ----------------------- */
/* "View as Calendar / View as List" and "Day / Week / Month".        */
.tnew-template-inner .tn-event-listing-mode-tab-nav__list {
  border-bottom: 0 !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item {
  background: #fff !important;
  border: 1px solid #3C7FC1 !important;
  color: #3C7FC1 !important;
  margin: 0 -1px 0 0 !important;
  border-radius: 0 !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item:first-child {
  border-radius: 6px 0 0 6px !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item:last-child {
  border-radius: 0 6px 6px 0 !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item[aria-selected="true"] {
  background: #3C7FC1 !important;
  color: #fff !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item[aria-selected="false"]:hover {
  background: #EAF2FA !important;
}
/* The existing CSS forces the selected tab's text to black with a
   longer selector, so this repeats that selector to make it white.   */
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item[aria-selected="true"],
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item.active {
  color: #fff !important;
}
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item[aria-selected="false"] {
  color: #3C7FC1 !important;
}


/* ---------- S5. Tile labels in normal case, white text ------------- */
/* "ALL-ACCESS PASS" becomes "All-Access Pass" (as typed in TNEW).    */
.tnew-template-inner .tn-events-calendar__event {
  text-transform: none !important;
  font-weight: 600 !important;
}
/* The existing CSS colors the event name dark gray (#282828), which
   is hard to read on blue (this also affects CONTROL v1). White fixes
   it.                                                                 */
.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-name {
  color: #fff !important;
}


/* ---------- CLOSED DAYS: Sundays and Thanksgiving ------------------ */
/* Adds a "Closed" label, a light hatched background, and hides any
   tiles on those days.
   Sundays = the first column of the month grid.
   Thanksgiving is the 4th Thursday of November, so its date changes
   every year. Dates are listed through 2030; add more later.          */
.tnew-template-inner .tn-events-calendar__table tbody td:first-child,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2026-11-26"]),
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2027-11-25"]),
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2028-11-23"]),
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2029-11-22"]),
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2030-11-28"]) {
  background: repeating-linear-gradient(135deg, #F4F4F4 0 8px, #ECECEC 8px 16px) !important;
}
.tnew-template-inner .tn-events-calendar__table tbody td:first-child .tn-events-calendar__day-event-list,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2026-11-26"]) .tn-events-calendar__day-event-list,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2027-11-25"]) .tn-events-calendar__day-event-list,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2028-11-23"]) .tn-events-calendar__day-event-list,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2029-11-22"]) .tn-events-calendar__day-event-list,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2030-11-28"]) .tn-events-calendar__day-event-list {
  display: none !important;
}
.tnew-template-inner .tn-events-calendar__table tbody td:first-child .tn-events-calendar__day::after {
  content: "Closed";
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2026-11-26"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2027-11-25"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2028-11-23"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2029-11-22"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2030-11-28"]) .tn-events-calendar__day::after {
  content: "Closed for Thanksgiving";
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  letter-spacing: .5px;
  text-transform: uppercase;
}

/* ######################## END V2 SUGGESTIONS ######################## */


/* #####################################################################
   V3: LESS BLUE (experiment, builds on V2)
   Solid blue is saved for action buttons (Login, Submit, View Cart,
   Add to Cart, Checkout, Submit Payment). Everything else uses lighter
   accents, like the boxed sections in the email receipt.
   Delete this whole section to go back to V2.
   ##################################################################### */

/* T1. Event tiles: pale blue with a blue left edge and navy text,
   like the email's "Thank you" callout.                              */
/* ".btn" is repeated in these selectors so they outrank the general
   "all buttons are blue" rule in the control section.               */
.tnew-template-inner .tn-events-calendar__event.btn {
  background: #EAF2FA !important;
  border-left: 3px solid #3C7FC1 !important;
  border-radius: 4px !important;
  text-align: left !important;
  padding-left: 7px !important;
}
.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-name {
  color: #1F4E79 !important;
}
.tnew-template-inner .tn-events-calendar__event.btn:not(.btn-sm, .btn-small):hover,
.tnew-template-inner .tn-events-calendar__event.btn:not(.btn-sm, .btn-small):focus {
  background: #D6E6F5 !important;
}

/* Not-on-sale tile: light gray with gray text and a gray edge.       */
.tnew-template-inner .tn-events-calendar__event.btn:has(.tn-events-calendar__event-status),
.tnew-template-inner .tn-events-calendar__event.btn:not(.btn-sm, .btn-small):has(.tn-events-calendar__event-status):hover,
.tnew-template-inner .tn-events-calendar__event.btn:not(.btn-sm, .btn-small):has(.tn-events-calendar__event-status):focus {
  background: #F0F0F0 !important;
  border-left-color: #A8A8A8 !important;
}
.tnew-template-inner .tn-events-calendar__event:has(.tn-events-calendar__event-status) .tn-events-calendar__event-name,
.tnew-template-inner .tn-events-calendar__event .tn-events-calendar__event-status {
  color: #666 !important;
}

/* T2. Weekday header: white with dark gray text and a thin line.     */
.tnew-template-inner .tn-events-calendar__table thead th {
  background: #fff !important;
  color: #414042 !important;
  border-bottom: 2px solid #d5dbe2 !important;
}

/* T3. Tabs: no fill. Selected tab is navy text with a blue underline;
   others are gray text.                                              */
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item,
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item:first-child,
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item:last-child {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 4px 0 0 !important;
}
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item[aria-selected="false"] {
  color: #666 !important;
}
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item[aria-selected="true"],
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item.active {
  background: transparent !important;
  color: #1F4E79 !important;
  font-weight: 700 !important;
  border-bottom-color: #3C7FC1 !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item[aria-selected="false"]:hover {
  background: transparent !important;
  color: #1F4E79 !important;
}

/* T4. Month bar: white with a gray border and navy text; arrows and
   calendar icon in blue.                                             */
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next {
  background: #fff !important;
  color: #1F4E79 !important;
  border-top: 1px solid #d5dbe2 !important;
  border-bottom: 1px solid #d5dbe2 !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn span,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn span[class*="label"] {
  color: #1F4E79 !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:first-child {
  border-left: 1px solid #d5dbe2 !important;
  border-radius: 6px 0 0 6px !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:last-child {
  border-right: 1px solid #d5dbe2 !important;
  border-radius: 0 6px 6px 0 !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:hover .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:focus .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__icon-calendar {
  color: #3C7FC1 !important;
  fill: #3C7FC1 !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn:hover,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn:focus,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:hover,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:focus {
  background: #EAF2FA !important;
  color: #1F4E79 !important;
}

/* ########################## END V3 LESS BLUE ######################## */


/* #####################################################################
   V4: MORE COLOR (experiment, builds on V3)
   Adds colors from thanksgivingpoint.org and the email receipt:
     Dark blue    #1F4E79   (email receipt's navy; hover #173B5C)
     Warm sand    #EEEBE7
     Orange       #F7A80F   (Museum of Ancient Life color)
     Red          #EE4036
   Blue stays the color for things you click to buy.
   Delete this whole section to go back to V3.
   ##################################################################### */

/* C1. Month bar: solid dark blue with white text, arrows and icon. */
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next {
  background: #1F4E79 !important;
  color: #fff !important;
  border-color: #1F4E79 !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn span,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn span[class*="label"],
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:hover .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:focus .glyphicon,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__icon-calendar {
  color: #fff !important;
  fill: #fff !important;
}
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn:hover,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn:focus,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:hover,
.tnew-template-inner .tn-event-listing-view__controls-container .tn-btn-datepicker__btn-period-prev-next:focus {
  background: #173B5C !important;
  color: #fff !important;
}

/* C2. Weekday header: warm sand with dark-blue text.               */
.tnew-template-inner .tn-events-calendar__table thead th {
  background: #EEEBE7 !important;
  color: #1F4E79 !important;
  border-bottom: 2px solid #1F4E79 !important;
}

/* C3. Selected tab underline in dark blue.                         */
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item[aria-selected="true"],
.tnew-template-inner .tn-event-listing__primary-views-container .tn-event-listing-mode-tab-nav__list-item.active {
  color: #1F4E79 !important;
  border-bottom-color: #1F4E79 !important;
}
.tnew-template-inner .tn-event-listing-mode-tab-nav__list-item[aria-selected="false"]:hover {
  color: #1F4E79 !important;
}

/* C4. Today's date: orange circle.                                    */
.tnew-template-inner .tn-events-calendar__day-number--today::after {
  background-color: #F7A80F !important;
}
.tnew-template-inner .tn-events-calendar__day-number--today {
  color: #fff !important;
}

/* C5. Closed days: "Closed" labels in red so they stand out.          */
.tnew-template-inner .tn-events-calendar__table tbody td:first-child .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2026-11-26"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2027-11-25"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2028-11-23"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2029-11-22"]) .tn-events-calendar__day::after,
.tnew-template-inner .tn-events-calendar__table tbody td:has([data-testid$="2030-11-28"]) .tn-events-calendar__day::after {
  color: #C8322A !important;
}

/* ######################### END V4 MORE COLOR ######################## */


/* #####################################################################
   V5: MINI CALENDAR ON PHONES (experiment, builds on V4)
   ---------------------------------------------------------------------
   On screens narrower than 850px, TNEW hides the month grid and shows
   only a day-by-day list. This section shows the grid again as a
   compact month view ABOVE that list:
     - Weekday names shortened to S M T W T F S (using the first letter
       of TNEW's own labels).
     - Each day is a 44px-tall box. A day with tickets becomes a
       light-blue square; tapping it opens that day's All-Access Pass
       page. Not-on-sale days are gray; closed days stay striped;
       today keeps its orange circle.
     - Event names are shrunk to zero size, not removed, so screen
       readers still announce "All-Access Pass" for each date.
     - The "Closed" words are hidden in the grid (no room); the stripes
       and the key under the calendar explain it.
   Desktop is not affected. Delete this section to remove the mini
   calendar from phones.
   ##################################################################### */

@media (max-width: 849.98px) {
  .tnew-template-inner .tn-events-calendar__table-container {
    display: block !important;
    width: 100% !important;
    margin: 0 0 24px !important;
  }
  .tnew-template-inner .tn-events-calendar__table-container::after {
    content: "Tap a blue date to get tickets. Striped dates are closed.";
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    text-align: center;
  }
  .tnew-template-inner .tn-events-calendar__table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  .tnew-template-inner .tn-events-calendar__table thead th {
    font-size: 0 !important;
    padding: 6px 0 !important;
    text-align: center !important;
  }
  .tnew-template-inner .tn-events-calendar__table thead th::first-letter {
    font-size: 12px !important;
  }
  .tnew-template-inner .tn-events-calendar__table tbody td.tn-events-calendar__day-cell {
    height: 44px !important;
    padding: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
  }
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__day {
    position: static !important;
    padding: 0 !important;
  }
  /* Day number sits on top of the tile; taps pass through to the tile. */
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__day-number {
    position: relative !important;
    z-index: 2 !important;
    pointer-events: none !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 44px !important;
  }
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__day-event-list,
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__day-event-list-item {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* The tile fills the day box and becomes the tap target. */
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__event.btn {
    position: absolute !important;
    top: 3px !important;
    right: 3px !important;
    bottom: 3px !important;
    left: 3px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-left-width: 0 !important;
    border-radius: 4px !important;
    z-index: 1 !important;
  }
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__event .tn-events-calendar__event-name,
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__event .tn-events-calendar__event-status,
  .tnew-template-inner .tn-events-calendar__table .tn-events-calendar__event .tn-events-calendar__event-time {
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
  }
  .tnew-template-inner .tn-events-calendar__table tbody td .tn-events-calendar__day::after {
    display: none !important;
  }
}

/* ##################### END V5 MINI CALENDAR ON PHONES ############### */


/* =====================================================================
   EVENT DETAIL PAGE: description box at 80% width
   ---------------------------------------------------------------------
   On an event's page (e.g. All-Access Pass), the gray box under the
   event title (description, prices, notes) is narrowed to 80% of its
   original width, left-aligned under the title so its left edge still
   lines up. Only on screens 850px and wider; on phones it stays full
   width. Applies to every event detail page, not just All-Access Pass.
   Delete this block on its own to return to full width.
   ===================================================================== */

@media (min-width: 850px) {
  .tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-container {
    width: 80% !important;
    max-width: 80% !important;
  }
}

/* ================== END EVENT DETAIL DESCRIPTION WIDTH =============== */


/* =====================================================================
   MINI DATE PICKER (styles for tnew-mini-date-picker.js)
   ---------------------------------------------------------------------
   Only takes effect when that script is installed. It hides TNEW's
   "Select date of your visit" dropdown and styles the small calendar
   the script draws in its place. Without the script, nothing here
   matches and the dropdown shows as normal.
   ===================================================================== */

.tnew-template-inner .tp-mini-cal-replaced {
  display: none !important;
}
.tnew-template-inner .tp-mini-cal {
  font-family: Montserrat, helvetica, sans-serif;
  margin-top: 8px;
  max-width: 280px;
}
.tnew-template-inner .tp-mini-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1F4E79;
  color: #fff;
  border-radius: 6px 6px 0 0;
  padding: 4px;
}
.tnew-template-inner .tp-mini-cal__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.tnew-template-inner .tp-mini-cal__nav {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
.tnew-template-inner .tp-mini-cal__nav:hover:not(:disabled) { background: #173B5C; }
.tnew-template-inner .tp-mini-cal__nav:disabled { opacity: .35; cursor: default; }
.tnew-template-inner .tp-mini-cal__nav:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tnew-template-inner .tp-mini-cal__grid {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
  background: #fff;
  border: 1px solid #d5dbe2;
  border-top: 0;
  border-radius: 0 0 6px 6px;
}
.tnew-template-inner .tp-mini-cal__grid th {
  background: #EEEBE7;
  color: #1F4E79;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 4px 0;
}
.tnew-template-inner .tp-mini-cal__grid td {
  padding: 0;
  text-align: center;
}
.tnew-template-inner .tp-mini-cal__day {
  display: block;
  font-size: 12px;
  line-height: 32px;
  border-radius: 4px;
}
.tnew-template-inner .tp-mini-cal__day--open {
  background: #EAF2FA;
  color: #1F4E79;
  font-weight: 600;
  text-decoration: none;
}
.tnew-template-inner .tp-mini-cal__day--open:hover { background: #D6E6F5; color: #1F4E79; text-decoration: none; }
.tnew-template-inner .tp-mini-cal__day--open:focus-visible { outline: 2px solid #1F4E79; outline-offset: 1px; }
.tnew-template-inner .tp-mini-cal__day--current,
.tnew-template-inner .tp-mini-cal__day--current:hover {
  background: #3C7FC1;
  color: #fff;
}
.tnew-template-inner .tp-mini-cal__day--none {
  color: #BBBBBB;
}

/* ===================== END MINI DATE PICKER ========================== */


/* =====================================================================
   COMPACT LIST VIEW ("View as List" on the events page)
   ---------------------------------------------------------------------
   Turns each event into a short row so more fit on screen. In testing,
   21 events went from about 11,500px of scrolling to about 2,700px
   (roughly 7 events per screen instead of 1-2).
     - White box with a thin border and rounded corners.
     - Photo shrunk to a 120 x 68px thumbnail on the left.
     - Title at 18px.
     - Description cut to 2 lines (ends with "..."); the event title
       still links to the full event page for the rest.
     - Paragraph breaks and any extra text sizes or pictures inside a
       description are flattened so every row looks the same.
   Only affects List view; Calendar view and event pages are unchanged.
   Delete this block on its own to return to the full-length list.
   ===================================================================== */

.tnew-template-inner .tn-events-list-view .tn-prod-list-item {
  display: flow-root !important;
  background: #fff !important;
  border: 1px solid #d5dbe2 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--img-container {
  float: left !important;
  width: 120px !important;
  margin: 2px 16px 0 0 !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--img-container img {
  display: block !important;
  width: 120px !important;
  height: 68px !important;
  object-fit: cover !important;
  border-radius: 4px !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--heading,
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--heading a {
  font-size: 18px !important;
  line-height: 1.3 !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--heading {
  margin: 0 0 4px !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #414042 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  max-height: 2.9em !important;          /* backstop: 2 lines */
  overflow: hidden !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description p {
  display: inline !important;
  margin: 0 !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description p::after {
  content: " ";
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description br,
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description img {
  display: none !important;
}
.tnew-template-inner .tn-events-list-view .tn-prod-list-item .tn-prod-list-item__property--description * {
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* ===================== END COMPACT LIST VIEW ========================= */


/* =====================================================================
   LOGIN PAGE SUGGESTIONS (experiment)
   ---------------------------------------------------------------------
   For TNEW's Account Login page (/account/login). Load AFTER the v5
   override CSS. Everything is scoped to .tn-account-login-page, so no
   other page is affected. Each block can be deleted on its own.

   NOT in this file (wording changes made in TNEW's page content, not
   CSS): the shorter heading and the one-line member tip. Suggested
   wording is at the bottom of this file.
   ===================================================================== */


/* L1. Button importance ---------------------------------------------- */
/* Log In stays solid blue (from v5).
   Register: white with a blue outline (secondary).                     */
/* (Register button colors removed: TNEW's original colors are used) */

/* Forgot password: a small text link placed right under the password
   field (the form is re-stacked so the link comes before Log In).     */
.tnew-template-inner .tn-account-login-page #tn-login-form {
  display: flex !important;
  flex-direction: column !important;
}
.tnew-template-inner .tn-account-login-page #tn-login-form > .tn-form-error-message-container { order: 0; }
.tnew-template-inner .tn-account-login-page #tn-login-form > section { order: 1; }
.tnew-template-inner .tn-account-login-page #tn-login-form > #tn-account-login-forgot-login-link { order: 2; }
.tnew-template-inner .tn-account-login-page #tn-login-form > .tn-btn-wrapper { order: 3; }

.tnew-template-inner .tn-account-login-page #tn-account-login-forgot-login-link.btn {
  align-self: flex-end !important;
  background: transparent !important;
  border: 0 !important;
  color: #3C7FC1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  text-decoration: underline !important;
  padding: 0 !important;
  margin: -6px 0 16px !important;
}
.tnew-template-inner .tn-account-login-page #tn-account-login-forgot-login-link.btn:hover,
.tnew-template-inner .tn-account-login-page #tn-account-login-forgot-login-link.btn:focus {
  background: transparent !important;
  color: #1F4E79 !important;
}


/* L2. Two matching boxes ---------------------------------------------- */
@media (min-width: 768px) {
  .tnew-template-inner .tn-account-login-page > .row {
    display: flex !important;
    gap: 24px;
    margin: 0 !important;
  }
  .tnew-template-inner .tn-account-login-page > .row > [class*="col-"] {
    float: none !important;
    flex: 1 1 0;
    width: auto !important;
  }
}
.tnew-template-inner .tn-account-login-page > .row > [class*="col-"] {
  background: #fff;
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  padding: 24px !important;
  margin-bottom: 16px;
}

/* Reasons to create an account, shown under "Create a New Account".   */
.tnew-template-inner .tn-account-login-page .tn-create-sub-heading::before {
  content: "\2713  Faster checkout\A\2713  See your tickets anytime";
  white-space: pre-line;
  display: block;
  font-size: 15px;
  line-height: 1.9;
  color: #414042;
  margin: 4px 0 8px;
}


/* L3. Smaller heading -------------------------------------------------- */
.tnew-template-inner .tn-account-login-page #tn-page-heading {
  font-size: 2rem !important;
  line-height: 1.2 !important;
  margin-bottom: 12px !important;
}


/* Box headings ("Account Login", "Create a New Account") one step
   smaller than the page heading, so the page reads top-down.          */
.tnew-template-inner .tn-account-login-page .tn-account-login-form__legend,
.tnew-template-inner .tn-account-login-page .tn-account-login-form__legend h2,
.tnew-template-inner .tn-account-login-page .tn-create-heading {
  font-size: 1.375rem !important;
  line-height: 1.3 !important;
  margin: 0 0 16px !important;
  border: 0 !important;
}


/* L4. Intro text as a light-blue callout (like the email's) ------------ */
.tnew-template-inner .tn-account-login-page .tn-header-component__sub-text {
  background: #EAF2FA;
  border-left: 4px solid #3C7FC1;
  border-radius: 4px;
  color: #1F4E79;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-size: 15px;
}


/* L5. Cleaner form fields ---------------------------------------------- */
/* "Required" labels are hidden visually but still read by screen
   readers.                                                             */
.tnew-template-inner .tn-account-login-page .tn-required-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.tnew-template-inner .tn-account-login-page .form-control {
  height: 44px !important;
  border: 1px solid #c6c6c6 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
.tnew-template-inner .tn-account-login-page .form-control:focus {
  border-color: #3C7FC1 !important;
  box-shadow: 0 0 0 3px rgba(60, 127, 193, .25) !important;
  outline: none !important;
}


/* L6. Hide the promo code bar on the login page ------------------------- */
/* Uses :has() to detect the login page from the outer wrapper.          */
.tnew-template-inner:has(.tn-account-login-page) .tn-utility-nav-inline-promo-code-form,
.tnew-template-inner:has(.tn-account-login-page) .tn-utility-nav-modal-promo-code-form__btn-open-modal {
  display: none !important;
}

/* ========================= END LOGIN PAGE ============================ */

/* SUGGESTED WORDING (change in TNEW's content settings, not CSS):
   Heading:  "Log in or create an account"
   Intro:    "Members: log in before adding items to your cart to get
              your discount."                                          */


/* =====================================================================
   14. CALENDAR: hide the Day / Week / Month switcher
   ---------------------------------------------------------------------
   The calendar opens in Month view by default, and TNEW doesn't
   remember a visitor's last choice, so removing the switcher just
   keeps everyone in Month view. Delete this block to bring it back.
   ===================================================================== */

.tnew-template-inner .tn-event-listing-mode-tab-nav__list--secondary {
  display: none !important;
}

/* ================= END HIDE DAY / WEEK / MONTH ======================= */


/* =====================================================================
   15. EVENT PAGES: "Select date of your visit" -> "Date of your visit"
   ---------------------------------------------------------------------
   TNEW supplies the heading text, so the stylesheet shrinks the
   original words to zero size and displays new words in their place
   (same font, 24px, uppercase, as before). Covers both the desktop and
   phone copies of the heading.
   Note: screen readers may still read TNEW's original words. To change
   the wording for everyone, edit it in TNEW's content settings instead
   and delete this block.
   ===================================================================== */

.tnew-template-inner .tn-additional-events__instructions {
  font-size: 0 !important;
}
.tnew-template-inner .tn-additional-events__instructions::before {
  content: "Date of your visit";
  font-size: 24px;
  line-height: 1.1;
}

/* ================= END "DATE OF YOUR VISIT" WORDING ================== */


/* =====================================================================
   16. CALENDAR PAGE: photo banner under the "Calendar" heading
   ---------------------------------------------------------------------
   The banner is now two uploaded images placed in TNEW's intro text
   (see tnew-calendar-banner-snippet.html), using a  tag so
   phones get the 3-photo version and larger screens get 5 photos.
   This section just sizes and spaces it. (The earlier version drew the
   photos with CSS; that is removed so it can't leave an empty gap.)
   ===================================================================== */

.tnew-template-inner .tn-events-listing-page #tn-page-heading::after {
  content: none !important;             /* remove the old CSS banner */
}
.tnew-template-inner .tp-banner {
  display: block;
  margin: 6px 0 18px;
}
.tnew-template-inner .tp-banner img {
  display: block;
  width: 100%;
  height: auto;
}

/* =================== END CALENDAR PHOTO BANNER ======================= */


/* =====================================================================
   17. CALENDAR PAGE: "How will you explore today?" choice
   ---------------------------------------------------------------------
   Styles for two buttons under the photo banner: "I'm a member" (goes
   to TNEW login and returns to this page) and "I'm visiting for the
   day" (jumps down to the calendar).

   NEEDS A CONTENT CHANGE IN TNEW: a stylesheet can't create links, so
   the buttons themselves are a short HTML snippet pasted into the
   Events/Calendar page's intro text in TNEW (see
   tnew-explore-choice-snippet.html). This section only styles them;
   without the snippet, nothing here shows.

   The snippet uses the theme's existing "tnew-is-not-logged-in" class,
   so the theme script hides the choice for people already logged in.
   ===================================================================== */

.tnew-template-inner .tp-explore {
  margin: 6px 0 22px;
}
.tnew-template-inner .tp-explore__title {
  font-family: Montserrat, helvetica, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1F4E79;
  text-transform: none;
  margin: 0 0 12px;
}
.tnew-template-inner .tp-explore__options {
  display: flex;
  gap: 14px;
}
.tnew-template-inner .tp-explore__option {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 2px solid #3C7FC1;
  border-radius: 8px;
  background: #EAF2FA;
  color: #1F4E79;
  font-family: Montserrat, helvetica, sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease;
}
.tnew-template-inner .tp-explore__option::after {
  content: "\203A";                     /* › arrow */
  font-size: 28px;
  line-height: 1;
  color: #3C7FC1;
}
.tnew-template-inner .tp-explore__option:hover,
.tnew-template-inner .tp-explore__option:focus {
  background: #D6E6F5;
  color: #1F4E79;
  text-decoration: none;
}
.tnew-template-inner .tp-explore__option:focus-visible {
  outline: 2px solid #1F4E79;
  outline-offset: 2px;
}
/* Leave room for the sticky site header when "visiting" jumps down. */
.tnew-template-inner #tn-event-listing-mode-tab-nav {
  scroll-margin-top: 110px;
}
@media (max-width: 575.98px) {
  .tnew-template-inner .tp-explore__options {
    flex-direction: column;
    gap: 10px;
  }
  .tnew-template-inner .tp-explore__option {
    font-size: 17px;
    padding: 14px 16px;
  }
}


/* Remove extra space under the buttons: hide any paragraph after them
   in the intro text (TNEW's editor leaves an empty "&nbsp;"
   behind) and tighten the spacing before the Calendar/List tabs.     */
.tnew-template-inner .tn-events-listing-page .tn-header-component__sub-text .tp-explore ~ p {
  display: none !important;
}
.tnew-template-inner .tn-events-listing-page .tp-explore {
  margin-bottom: 8px !important;
}
.tnew-template-inner .tn-events-listing-page .tn-header-component__sub-text {
  margin-bottom: 0 !important;
}

/* ================== END "HOW WILL YOU EXPLORE" ======================= */


/* =====================================================================
   18. EVENT PAGES: quantity plus / minus (styles only)
   ---------------------------------------------------------------------
   Styles the  −  [ 0 ]  +  control that the plus/minus script in
   tnew-overrides.js (optional script) puts in place of each Quantity dropdown.
   A stylesheet can't create buttons, so WITHOUT that script nothing
   here appears and the normal dropdowns stay.
   ===================================================================== */

.tnew-template-inner .tn-events-detail-page .tp-stepper-replaced {
  display: none !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-select-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 124px !important;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 44px;
  border: 1px solid #1F4E79;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper__btn {
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: #EAF2FA;
  color: #1F4E79;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper__btn:hover:not(:disabled) {
  background: #D6E6F5;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper__btn:focus-visible {
  outline: 2px solid #1F4E79;
  outline-offset: -2px;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper__btn:disabled {
  background: #F4F4F4;
  color: #BBBBBB;
  cursor: default;
}
.tnew-template-inner .tn-events-detail-page .tp-stepper__value {
  min-width: 40px;
  text-align: center;
  font-family: Montserrat, helvetica, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #1F4E79;
}

/* =================== END QUANTITY PLUS / MINUS ======================= */



/* =====================================================================
   19. EVENT PAGES: layout redesign
   ---------------------------------------------------------------------
   For an event's page (e.g. All-Access Pass). Stylesheet only.
     E1. Description in a white card
     E2. "Date of your visit" merged into the top of the page: small
         label + the date dropdown styled as a large dark-blue heading;
         the separate side box is gone and on phones the picker moves
         from the bottom to the top
     E3. Repeated date heading hidden on screen (kept for screen readers)
     E4. Ticket notes in a light-blue info box
     E5. "Maximum quantity" line as small gray text
     E6. Ticket table: clean rows, normal-case names, aligned columns
     E7. Add to Cart: full width; gray until a quantity is chosen
   Keep this section AFTER sections 15 and 18.
   ===================================================================== */


/* E1. Description: white card instead of gray, less empty space on top */
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-container {
  background: #fff !important;
  border: 1px solid #d5dbe2 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-heading {
  margin: 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description > p:first-child:empty,
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content > p:first-child:has(> meta:only-child) {
  display: none !important;
}

/* E2. Date picker merged into the top of the page ------------------------
   TNEW shows a separate "Date of your visit" box beside the content on
   desktop and at the bottom of the page on phones, while also showing
   the date again as a heading. This combines them: a small "Date of
   your visit" label, then the date dropdown styled as a large dark-blue
   heading you can click to change. The old repeated date heading is
   hidden on screen (still read by screen readers), and on phones the
   picker moves from the bottom to the top.
   (The desktop copy of the dropdown is used on all screen sizes; TNEW's
   phone copy is hidden. The theme script handles both the same way.) */
.tnew-template-inner .tn-events-detail-page .tn-event-detail {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.tnew-template-inner .tn-events-detail-page .tn-event-detail__additional-events-container {
  order: -1 !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
}
.tnew-template-inner .tn-events-detail-page .tn-event-detail__additional-events-container--mobile {
  display: none !important;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events,
.tnew-template-inner .tn-events-detail-page .tn-additional-events__controls-container,
.tnew-template-inner .tn-events-detail-page .tn-additional-events__select-view-container {
  padding: 0 !important;
  margin: 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__continue-shopping-link-container {
  display: none !important;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__controls-container {
  border: 0 !important;                 /* removes a stray gray line */
}
/* "Date of your visit" as a small gray label */
.tnew-template-inner .tn-events-detail-page .tn-additional-events__instructions {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 6px !important;
  color: #666 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__instructions::before {
  font-size: 13px !important;
  letter-spacing: .5px;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__instructions::after {
  display: none !important;
}
/* The dropdown as the date heading */
.tnew-template-inner .tn-events-detail-page .tn-additional-events__date-select-container {
  display: flex !important;
  gap: 8px;
  align-items: center;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__date-select {
  width: auto !important;
  min-width: 300px;
  height: 52px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1F4E79 !important;
  border: 1px solid #1F4E79 !important;
  border-radius: 6px !important;
  padding: 0 40px 0 14px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
.tnew-template-inner .tn-events-detail-page .tn-additional-events__btn-submit.btn {
  height: 52px !important;
  width: 52px !important;
  flex: 0 0 52px;
}
@media (min-width: 850px) {
  /* keep the date its natural width instead of stretching across */
  .tnew-template-inner .tn-events-detail-page .tn-additional-events__date-select {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 380px !important;
  }
}
@media (max-width: 849.98px) {
  .tnew-template-inner .tn-events-detail-page .tn-additional-events__date-select {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-size: 20px !important;
  }
}
/* Main content uses the full width now that the side box is gone */
.tnew-template-inner .tn-events-detail-page .tn-event-detail__main-container {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}
/* Quantity boxes: taller and rounded to match */
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-select {
  height: 44px !important;
  border: 1px solid #1F4E79 !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  padding: 0 10px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* E3. Repeated date heading hidden on screen; event title under it.   */
.tnew-template-inner .tn-events-detail-page .tn-event-detail__display-time {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.tnew-template-inner .tn-events-detail-page .tn-event-detail__title {
  font-size: 18px !important;
  color: #414042 !important;
  margin-top: 10px !important;
}

/* E4. Ticket notes (the bullet list) as a light-blue info box.        */
.tnew-template-inner .tn-events-detail-page .tn-event-detail__performance-details-container ul {
  background: #EAF2FA;
  border-left: 4px solid #3C7FC1;
  border-radius: 4px;
  padding: 12px 16px 12px 32px !important;
  margin: 12px 0 0 !important;
  font-size: 14px !important;
  color: #1F4E79;
  max-width: 760px;
}

/* E5. "The maximum quantity you can select is 30." as small gray text. */
.tnew-template-inner .tn-events-detail-page #tn-quantity-selection-text {
  font-size: 13px !important;
  color: #666 !important;
  margin: 0 0 8px !important;
}

/* E6. Ticket rows: tidy table with one column header row.
   The "Price" and "Quantity" labels show on the first row only
   (still read by screen readers on every row).                       */
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list {
  border: 1px solid #d5dbe2;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list-item {
  padding: 10px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid #EEEEEE !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list-item:last-child {
  border-bottom: 0 !important;
}
/* Name, price and quantity are each 44px tall and line up along the
   bottom. Row 1 keeps 22px on top for the "Price"/"Quantity" labels;
   the other rows don't need it.                                      */
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype > * {
  align-self: flex-end !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-label-container {
  padding: 22px 0 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list-item:not(:first-child) .tn-ticket-selector__pricetype-label-container {
  padding: 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-name {
  font-size: 16px !important;
  line-height: 44px !important;
  text-transform: none !important;
  color: #222 !important;
  margin: 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__fixed-amount-input {
  height: 44px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1F4E79 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list-item:not(:first-child) .control-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.tnew-template-inner .tn-events-detail-page .tn-ticket-selector__pricetype-list-item .control-label {
  margin: 0 0 6px !important;
  line-height: 16px !important;
  font-size: 12px !important;
  color: #666 !important;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* E7. Add to Cart: bigger, full width of the ticket table; when it's
   waiting for a quantity it turns gray instead of faded blue.        */
.tnew-template-inner .tn-events-detail-page #tn-add-to-cart-button {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin-top: 14px !important;
  font-size: 17px !important;
}
.tnew-template-inner .tn-events-detail-page #tn-add-to-cart-button.disabled,
.tnew-template-inner .tn-events-detail-page #tn-add-to-cart-button:disabled {
  cursor: not-allowed !important;     /* colors are TNEW's originals */
}

/* ======================= END EVENT PAGE ============================== */


/* =====================================================================
   20. EVENT PAGE: compact description (e.g. All-Access Pass)
   ---------------------------------------------------------------------
   Smaller text, tighter line and paragraph spacing, less padding, and
   the fine print (the italic paragraph) smaller and gray. On screens
   850px and wider the description flows into two columns, so the
   prices sit on the left and the notes on the right. Phones keep one
   column.
   ===================================================================== */

.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-container {
  padding: 12px 16px !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content,
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content p {
  font-size: 14px !important;
  line-height: 1.45 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content p {
  margin: 0 0 8px !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content p:last-child {
  margin-bottom: 0 !important;
}
.tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content p:has(> em) {
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: #666;
}
@media (min-width: 850px) {
  .tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content {
    column-count: 2;
    column-gap: 32px;
  }
  .tnew-template-inner .tn-events-detail-page .tn-prod-season-header__description-text-content p {
    break-inside: avoid;
  }
}

/* =================== END COMPACT EVENT DESCRIPTION =================== */