/* ==========================================================================
   Site polish (WILDPIANOS-20). Loaded after dw-shows-part2.css.
   1. Booking band on the event-type pages (base look lives in dw-shows-part2.css).
   2. Phone sideways scroll: contain the Spectra/Slick galleries, even gutters.
   3. Heading look classes (dw-look-h3/h4/h6) so a heading can sit at the right
      level in the outline and keep the look it had.
   4. wild-blue #00a8ff never carries text: heading text on inner pages uses
      link-blue #006fb8 (5.30:1 on white, 4.65:1 on #f0f0f0).
   Customer-preferred style (slide-ins, autoplay carousels, ticker, counters, long
   home page, inner-page layout and copy) is untouched: see DESIGN.md.
   ========================================================================== */

/* ---------- 1. Booking band on event-type pages ---------- */
.entry-content .dw-book {
	clear: both;
	margin: 2.5rem 0 0;
	font-family: var(--dw-font-body, Raleway, sans-serif);
}
.dw-book__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.75rem;
}
.dw-book .dw-book__phone {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: #fff;
	font-size: 1.1875rem;
	font-weight: 700;
	letter-spacing: 0.25px;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
	white-space: nowrap;
}
.dw-book .dw-book__phone:hover,
.dw-book .dw-book__phone:focus-visible {
	color: #fff;
	text-decoration-thickness: 3px;
}
.dw-book .dw-book__phone:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.entry-content .dw-book p {
	color: #fff;
}
@media (max-width: 640px) {
	.dw-book__actions {
		width: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
	}
	.dw-book .dw-book__phone {
		justify-content: center;
	}
	.dw-book .dw-book__button {
		width: 100%;
	}
}

/* ---------- 2. Phone sideways scroll ----------
   Causes found: (a) golf and colleges had container classes that did not match their
   block ids, so Spectra's column layout never applied and the text ran off to the
   right (fixed in the page markup); (b) the Slick track is wider than the column and
   Astra's blockquote margin (26px on every side) widened the flex column's cross
   size, pushing every block 26px right. Both contained here. */
.entry-content .wp-block-uagb-image-gallery {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}
.entry-content .uagb-container-inner-blocks-wrap > * {
	max-width: 100%;
}
@media (max-width: 767px) {
	.entry-content .uagb-container-inner-blocks-wrap > blockquote.wp-block-quote {
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
		width: 100%;
	}
}

/* ---------- 3. Heading look classes (values from the Astra Customizer heading rules,
   incl. its 921px and 544px sizes). A heading can be an H2 in the outline and still
   look like the H3 / H4 / H6 it was. ---------- */
body .entry-content .dw-look-h3 .uagb-heading-text,
body .entry-content h2.dw-look-h3 {
	font-family: Raleway, sans-serif;
	font-size: 40px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: capitalize;
}
body .entry-content .dw-look-h4 .uagb-heading-text,
body .entry-content h2.dw-look-h4 {
	font-family: Raleway, sans-serif;
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
}
body .entry-content .dw-look-h6 .uagb-heading-text,
body .entry-content h2.dw-look-h6,
body .entry-content p.dw-look-h6 {
	font-family: Raleway, sans-serif;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
}
@media (max-width: 921px) {
	body .entry-content .dw-look-h4 .uagb-heading-text,
	body .entry-content h2.dw-look-h4 {
		font-size: 40px;
	}
	body .entry-content .dw-look-h6 .uagb-heading-text,
	body .entry-content h2.dw-look-h6,
	body .entry-content p.dw-look-h6 {
		font-size: 22.4px;
	}
}
@media (max-width: 544px) {
	body .entry-content .dw-look-h3 .uagb-heading-text,
	body .entry-content h2.dw-look-h3 {
		font-size: 22.4px;
	}
	body .entry-content .dw-look-h4 .uagb-heading-text,
	body .entry-content h2.dw-look-h4 {
		font-size: 25.6px;
	}
	body .entry-content .dw-look-h6 .uagb-heading-text,
	body .entry-content h2.dw-look-h6,
	body .entry-content p.dw-look-h6 {
		font-size: 19.2px;
	}
}

/* ---------- 4. Blue text on grey ----------
   Spectra headings and core headings pick wild-blue through the Astra palette variable.
   On the inner pages that variable reads link-blue inside headings, so text passes AA
   while the swatch stays wild-blue for decoration everywhere else (home page excluded:
   its blue headings sit on dark bands). */
body:not(.home) .entry-content .wp-block-uagb-advanced-heading,
body:not(.home) .entry-content .wp-block-heading,
body:not(.home) .entry-content .has-ast-global-color-0-color {
	--ast-global-color-0: #006fb8;
	--wp--preset--color--ast-global-color-0: #006fb8;
}

/* Astra underlines content links; the band's pill is a button, not a link. */
.entry-content .dw-book a.dw-book__button,
.entry-content .dw-book a.dw-book__button:hover,
.entry-content .dw-book a.dw-book__button:focus-visible {
	color: #fff;
	text-decoration: none;
}

/* Photos page gallery hover (Visual Portfolio "fly" style, block Phbb639640).
   The default fly overlay is solid black and this gallery has no captions, so
   hovering blacked the photo out. Use the brand gallery hover instead: the
   photo stays visible under a translucent spotlight-orange wash, matching the
   home "we entertain" tiles (blue at rest, orange on hover). */
.vp-id-Phbb639640 .vp-portfolio__item-overlay {
	background-color: rgba(255, 165, 0, 0.45) !important;
}
.vp-id-Phbb639640 .vp-portfolio__item-meta::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border-radius: 50%;
	background: rgba(20, 24, 39, 0.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.5-4.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 22px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
	.vp-id-Phbb639640 .vp-portfolio__item-overlay { transition: none !important; }
}

/* Counters band, "what makes us different" (WILDPIANOS-22, look revised in WILDPIANOS-25).
   The fountains photo stays clearly visible with the fine halftone dot grid the old wildpianos.com band
   has (its overlay2.png is a 2px tile: one black pixel, three at 44%). The beta's Spectra pattern
   overlay used an overlay blend that all but vanished, so the same kind of 2px tile is redrawn here
   at normal blend and lighter (20% black with a 62% dot, about 35% on average), over the photo.
   No scrim across the band. Text is white with a soft dark glow, and each column carries a localized
   soft radial scrim (about 0.48 to 0.55) that fades out before its edge. Do not use link-blue or
   wild-blue text on this band. Counting and the ticker are untouched (customer-preferred). */
.nk-awb:has(.uagb-block-487966c3) > .nk-awb-wrap::after {
	content: none;
}
.wp-block-uagb-container.uagb-block-487966c3::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='2' height='2' fill='%23000' fill-opacity='.2'/%3E%3Crect width='1' height='1' fill='%23000' fill-opacity='.62'/%3E%3C/svg%3E") !important;
	background-size: 2px 2px !important;
	background-attachment: scroll !important;
	mix-blend-mode: normal !important;
}
body .wp-block-uagb-container.uagb-block-487966c3 .wp-block-uagb-advanced-heading .uagb-heading-text {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 18px rgba(0, 0, 0, 0.6);
}
.uagb-block-487966c3 .uagb-block-71288669 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	background: radial-gradient(closest-side ellipse at 50% 50%, rgba(12, 14, 24, 0.55) 0%, rgba(12, 14, 24, 0.48) 65%, rgba(12, 14, 24, 0) 100%);
}
/* The heading gets the same kind of soft ellipse (a little lighter). */
.uagb-block-487966c3 .uagb-block-1c40143c {
	background: radial-gradient(ellipse 70% 100% at 50% 50%, rgba(12, 14, 24, 0.5) 0%, rgba(12, 14, 24, 0.42) 60%, rgba(12, 14, 24, 0) 100%);
}
/* Each column is a size container so the number always fits it, with no wrapping mid-count. */
.uagb-block-487966c3 .uagb-block-71288669 > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	container-type: inline-size;
}
body .wp-block-uagb-container.uagb-block-487966c3 [class*="counter-"] .uagb-heading-text {
	font-size: min(80px, 21cqi);
	line-height: 1.05;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Clickable show rows (WILDPIANOS-23).
   The venue link is the one real link; its ::after stretches over the whole public row, so a click
   anywhere opens the show page (middle and cmd-click work, no JS). Get Tickets sits above it.
   Booked rows (private/blocked) have no link and stay inert. Layout is unchanged: the hover tint
   reaches 0.75rem past each side with a box-shadow, so no padding moves. */
.tribe-common .dw-show-row--public {
	position: relative;
}
.tribe-common .dw-show-row--public .dw-show-row__venue a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	cursor: pointer;
}
.tribe-common .dw-show-row--public a.dw-show-row__tickets {
	position: relative;
	z-index: 2;
}
.tribe-common .dw-show-row--public .dw-show-row__notes a,
.tribe-common .dw-show-row--public .dw-show-row__meta a {
	position: relative;
	z-index: 2;
}
.tribe-common .dw-show-row--public:hover:not(:has(a.dw-show-row__tickets:hover)) {
	background-color: #f0f5fa;
	box-shadow: -0.75rem 0 0 #f0f5fa, 0.75rem 0 0 #f0f5fa;
}
.tribe-common .dw-show-row--public:hover:not(:has(a.dw-show-row__tickets:hover)) .dw-show-row__venue a {
	color: #006fb8;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
/* Keyboard focus outlines the whole row, not just the venue text. */
.tribe-common .dw-show-row--public .dw-show-row__venue a:focus {
	outline: none;
}
.tribe-common .dw-show-row--public .dw-show-row__venue a:focus-visible::after {
	outline: 3px solid #006fb8;
	outline-offset: 2px;
	border-radius: 4px;
}