/*
 * Bandsintown widget - theme skin.
 *
 * The widget is third-party markup injected at runtime by
 * widgetv3.bandsintown.com. Its own data-* attributes cover background,
 * text and separator colour only, so everything else - type, buttons,
 * the nav bar, spacing - has to be handled here.
 *
 * Every rule is scoped under .bit-widget so nothing leaks into the theme.
 * Because the markup belongs to Bandsintown and can change without notice,
 * each block below says what it is targeting and why, so a future break is
 * quick to diagnose.
 *
 * Palette, matching the theme:
 *   #412415  heading brown  (body copy, dates, venue)
 *   #962a29  accent red     (buttons, links)
 *   #ffffff  button text
 */

.bit-widget {
	/* Inherit the theme's serif rather than the widget's bundled Inter. */
	font-family: inherit !important;
	color: #412415;
}

.bit-widget * {
	font-family: inherit !important;
}

/*
 * The "Upcoming / Past" tab bar. Hidden deliberately - the section already
 * has an "upcoming shows" heading above it, so the tabs are redundant and
 * let visitors navigate into an empty past-dates view.
 * This matches what the old plugin config was trying to do.
 */
.bit-widget .bit-nav-bar-container,
.bit-widget .bit-top-track-button {
	display: none !important;
}

/* Event rows ---------------------------------------------------------- */

.bit-widget .bit-event {
	border-bottom: 1px solid rgba( 65, 36, 21, 0.18 );
	padding: 1.1rem 0;
}

.bit-widget .bit-event:last-child {
	border-bottom: 0;
}

.bit-widget .bit-date,
.bit-widget .bit-mobile-date {
	color: #412415;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.bit-widget .bit-location,
.bit-widget .bit-venue {
	color: #412415;
}

.bit-widget .bit-venue {
	opacity: 0.75;
}

/* Buttons ------------------------------------------------------------- */

.bit-widget .bit-button,
.bit-widget .bit-offer-button,
.bit-widget .bit-rsvp-container .bit-rsvp,
.bit-widget .bit-follow-section-cta {
	background-color: #962a29 !important;
	border-color: #962a29 !important;
	color: #fff !important;
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
	transition: background-color 0.2s ease;
}

.bit-widget .bit-button:hover,
.bit-widget .bit-offer-button:hover,
.bit-widget .bit-rsvp-container .bit-rsvp:hover,
.bit-widget .bit-follow-section-cta:hover {
	background-color: #7a2221 !important;
	border-color: #7a2221 !important;
}

/* Links --------------------------------------------------------------- */

.bit-widget a {
	color: #962a29;
}

.bit-widget a:hover {
	color: #7a2221;
}

/* Follow block -------------------------------------------------------- */

.bit-widget .bit-follow-section-wrapper {
	border-bottom: 1px solid rgba( 65, 36, 21, 0.18 );
	padding-bottom: 1.25rem;
	margin-bottom: 0.5rem;
}

.bit-widget .bit-follow-section-heading-text {
	color: #412415;
}

/* "No upcoming shows" empty state ------------------------------------- */

.bit-widget .bit-no-dates-container,
.bit-widget .bit-no-dates {
	color: #412415;
	opacity: 0.8;
}

/* Play-my-city / footer promo, which does not belong on this site. */
.bit-widget .bit-play-my-city-container {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Button pair: RSVP + TICKETS
   ---------------------------------------------------------------------------
   By default Bandsintown stacks these vertically, and reversed:

       .bit-widget .bit-event .bit-event-buttons { flex-direction: column-reverse }

   so TICKETS sits above RSVP. This puts them side by side instead, evens out
   the 10px height difference between .bit-rsvp-container (34px) and
   .bit-offers-inner-wrapper (44px), and adds a gap so they read as a pair
   rather than one welded control.
   --------------------------------------------------------------------------- */

.bit-widget .bit-event .bit-details.bit-event-buttons,
.bit-widget.bit-layout-ipad .bit-event .bit-details.bit-event-buttons {
	display: flex !important;
	/*
	 * !important is load-bearing here, not laziness. Bandsintown injects its
	 * stylesheet at runtime, so it lands after this file in the cascade and
	 * wins every tie on specificity. Their rule is:
	 *
	 *   .bit-widget .bit-event .bit-event-buttons { flex-direction: column-reverse }
	 *
	 * column-reverse is also why TICKETS rendered above RSVP rather than below.
	 * Swap to row-reverse below if you want TICKETS on the left.
	 */
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end;
	gap: 0.6rem;
	flex-wrap: nowrap;
}

/*
 * Kill the height difference between the two button wrappers.
 *
 * Bandsintown gives .bit-rsvp-container margin-top:5px and
 * .bit-offers-container margin:5px 0, so the offers wrapper ends up 46px
 * against the RSVP container's 36px and the two buttons sit 3px apart
 * vertically. Their rules are injected after this file, so these need
 * !important to land.
 */
.bit-widget .bit-event .bit-rsvp-container,
.bit-widget .bit-event .bit-offers-inner-wrapper,
.bit-widget .bit-event .bit-offers-container {
	display: flex !important;
	align-items: center !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Make RSVP and TICKETS the same button.
   ---------------------------------------------------------------------------
   They share a bounding box but are not the same control. Bandsintown styles
   them from different rules, and theirs are injected after this file, so the
   differences survived a plain override:

                      RSVP        TICKETS
     border-radius    0px         4px      (.bit-button-type-tickets)
     font-size        12.48px     14px
     letter-spacing   0.749px     0.84px   (0.06em of each font-size)
     content          icon+text   text

   Everything below is pinned with !important for that reason. Width is fixed
   rather than min-width so the pair is symmetrical regardless of label length
   - "RSVP" is 4 characters and "TICKETS" is 7, so left to themselves they
   size differently even with the same min-width.
   --------------------------------------------------------------------------- */

.bit-widget .bit-event .bit-rsvp.bit-button,
.bit-widget .bit-event .bit-offers.bit-button,
.bit-widget .bit-event .bit-button-type-tickets {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;

	width: 132px !important;
	min-width: 132px !important;
	max-width: 132px !important;
	height: 38px !important;

	margin: 0 !important;
	padding: 0 0.75rem !important;

	border: 1px solid #962a29 !important;
	border-radius: 0 !important;

	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	white-space: nowrap !important;
}

/*
 * The label spans carry their own 16px font-size, which beats the button's,
 * so they have to be pinned separately or the two labels render at different
 * sizes inside identical buttons.
 */
.bit-widget .bit-event .bit-rsvp-text,
.bit-widget .bit-event .bit-offers-text {
	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: inherit !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * The small calendar glyph on RSVP only. Hidden so the two read as a matched
 * pair, and because the theme's own buttons ("BUY NOW", "SHOP ONLINE") are
 * plain uppercase text with no iconography. Delete this block to bring it
 * back - the 6px right margin on the svg is Bandsintown's, not ours.
 */
.bit-widget .bit-event .bit-rsvp.bit-button > svg {
	display: none !important;
}

/* ---------------------------------------------------------------------------
   Single-line event rows on anything tablet-width and up.
   ---------------------------------------------------------------------------
   Bandsintown picks its layout from the WIDTH OF ITS CONTAINER, not the
   viewport. The home page puts the widget in a vc_col-sm-7 column, which
   lands at ~782px - under their desktop threshold - so they apply
   .bit-layout-ipad and stack the date, the venue and the buttons onto three
   lines, leaving most of the 762px empty and each row 144px tall.

   This restores a single line: date left, venue centre, buttons right.
   Guarded by a viewport media query so the genuinely-mobile embed in the
   vc_hidden-lg column keeps Bandsintown's stacked layout.
   --------------------------------------------------------------------------- */

@media ( min-width: 768px ) {

	/* Same cascade problem: their .bit-widget.bit-layout-ipad .bit-event
	   sets column and is injected later, so this needs !important too. */
	.bit-widget.bit-layout-ipad .bit-event {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between;
		gap: 1.5rem;
		flex-wrap: nowrap;
	}

	/* Date */
	.bit-widget.bit-layout-ipad .bit-event > .bit-mobile-date-and-share-wrapper {
		flex: 0 0 auto;
		min-width: 120px;
		width: auto;
	}

	.bit-widget.bit-layout-ipad .bit-event > .bit-mobile-date-and-share-wrapper .bit-details {
		justify-content: flex-start;
	}

	/* Venue and location */
	.bit-widget.bit-layout-ipad .bit-event > .bit-details-inner-wrapper {
		flex: 1 1 auto;
		width: auto;
		text-align: left;
	}

	.bit-widget.bit-layout-ipad .bit-event > .bit-details-inner-wrapper .bit-details {
		justify-content: flex-start;
	}

	.bit-widget.bit-layout-ipad .bit-event .bit-location-under-mobile,
	.bit-widget.bit-layout-ipad .bit-event .bit-titleWrapper {
		text-align: left;
	}

	/* Buttons */
	.bit-widget.bit-layout-ipad .bit-event > .bit-details.bit-event-buttons {
		flex: 0 0 auto;
		width: auto;
	}
}

/* ---------------------------------------------------------------------------
   Text colour.
   ---------------------------------------------------------------------------
   Every date, venue and location in the widget is an <a>, and the theme's
   custom.css carries:

       a { color: #ffffff !important; }

   generated from the DMS Theme options anchor-colour setting. That !important
   beat the colours set earlier in this file, which is why the event text
   rendered white on the background-sky.webp section and was unreadable.

   Two rules below, and the order and specificity are deliberate:

     1. everything in the widget goes black
     2. the buttons are pulled back to white, at higher specificity
        (.bit-event a.bit-button is 0,3,1 against the black rule's 0,2,1)
        so the labels stay legible on the red fill

   Note: the embed still carries data-text-color="rgba(65,36,21,1)". That only
   drives Bandsintown's own injected rules and is superseded by what follows -
   it is left in place so the embed still matches what the Bandsintown builder
   would generate.
   --------------------------------------------------------------------------- */

.bit-widget,
.bit-widget .bit-event,
.bit-widget .bit-event a,
.bit-widget .bit-date,
.bit-widget .bit-mobile-date,
.bit-widget .bit-location,
.bit-widget .bit-location-under-desktop,
.bit-widget .bit-location-under-mobile,
.bit-widget .bit-venue,
.bit-widget .bit-titleWrapper .bit-venue,
.bit-widget .bit-follow-section-heading-text,
.bit-widget .bit-no-dates-container,
.bit-widget .bit-no-dates {
	color: #000 !important;
}

/* Buttons keep white labels on the red fill. */
.bit-widget .bit-event a.bit-button,
.bit-widget .bit-event a.bit-button *,
.bit-widget .bit-event .bit-rsvp-text,
.bit-widget .bit-event .bit-offers-text,
.bit-widget a.bit-follow-section-cta,
.bit-widget a.bit-follow-section-cta * {
	color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Widget background and spacing.
   ---------------------------------------------------------------------------
   Bandsintown injects TWO competing rules for .bit-widget at runtime - one
   setting background-color: white, one setting transparent - and which of them
   wins depends on the order they land in. That is why the panel sometimes
   renders white and sometimes not.

   The embed already carries data-background-color="rgba(0,0,0,0)", but that
   only feeds their injected rules, so it cannot settle a fight between two of
   them. Pinning it here takes the decision away from load order entirely.

   The margin gives the widget breathing room from the "upcoming shows" heading
   above and the section below; `auto` on the horizontal axis keeps it centred
   in its column.
   --------------------------------------------------------------------------- */

.bit-widget {
	background-color: transparent !important;
	margin: 25px auto !important;
}