/* Belfast 89FM widgets — shared base styles.
   Colours fall back to the design tokens when the Elementor globals
   aren't defined; every colour is overridable per-widget in the editor. */

:root {
	--b89-yellow: var(--e-global-color-b89yellow, #FFD100);
	--b89-yellow-deep: var(--e-global-color-b89yellowdeep, #F5B800);
	--b89-ink: var(--e-global-color-b89ink, #17120D);
	--b89-red: var(--e-global-color-b89red, #E1332A);
	--b89-red-deep: var(--e-global-color-b89reddeep, #B92018);
	--b89-cream: var(--e-global-color-b89cream, #FFF8E3);
	--b89-paper: var(--e-global-color-b89paper, #FFFDF4);
	--b89-gold: var(--e-global-color-b89gold, #8A6A00);
	--b89-font-display: var(--e-global-typography-primary-font-family, 'Fredoka'), system-ui, sans-serif;
	--b89-font-body: var(--e-global-typography-text-font-family, 'Karla'), system-ui, sans-serif;
	--b89-shadow-pop: 0 3px 0 rgba(23, 18, 13, .9);
}

/* Unitless so each element recomputes against its own font-size,
   matching the reference design's body { line-height: 1.55 }. */
body {
	line-height: 1.55;
}

@keyframes b89-eq {
	0%, 100% { transform: scaleY(.4); }
	50% { transform: scaleY(1); }
}

@keyframes b89-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .25; }
}

@keyframes b89-spin {
	to { transform: rotate(360deg); }
}

/* ---------- button (listen live) ---------- */
.b89-btn {
	font-family: var(--b89-font-display);
	font-weight: 600;
	white-space: nowrap;
	border: 3px solid var(--b89-ink);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-shadow: var(--b89-shadow-pop);
	transition: transform .12s ease, box-shadow .12s ease;
	line-height: 1.4;
}

.b89-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(23, 18, 13, .9);
}

.b89-btn:active {
	transform: translateY(1px);
	box-shadow: 0 1px 0 rgba(23, 18, 13, .9);
}

/* Doubled class specificity so the kit's link colour (.elementor-kit-5 a)
   never overrides the preset text colours — and explicit hover/focus states,
   because the kit's a:hover rule carries an extra pseudo-class of specificity
   and would otherwise turn the label red on the red button. */
.b89-btn.b89-btn--red {
	background: var(--b89-red);
	color: #fff;
	padding: 9px 20px;
	font-size: 1rem;
}

.b89-btn.b89-btn--red:hover,
.b89-btn.b89-btn--red:focus {
	color: #fff;
}

.b89-btn.b89-btn--black {
	background: var(--b89-ink);
	color: var(--b89-yellow);
	padding: 14px 28px;
	font-size: 1.2rem;
}

.b89-btn.b89-btn--black:hover,
.b89-btn.b89-btn--black:focus {
	color: var(--b89-yellow);
}

.b89-play-tri {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 12px;
	border-color: transparent transparent transparent currentColor;
	flex-shrink: 0;
}

/* ---------- equaliser + now-playing pill ---------- */
.b89-eq {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 20px;
	flex-shrink: 0;
}

.b89-eq i {
	width: 4px;
	background: var(--b89-red);
	border-radius: 2px;
	animation: b89-eq 1s ease-in-out infinite;
	transform-origin: bottom;
}

.b89-eq i:nth-child(1) { height: 60%; animation-delay: 0s; }
.b89-eq i:nth-child(2) { height: 100%; animation-delay: .18s; }
.b89-eq i:nth-child(3) { height: 45%; animation-delay: .32s; }
.b89-eq i:nth-child(4) { height: 80%; animation-delay: .5s; }

.b89-nowplaying {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--b89-paper);
	border: 3px solid var(--b89-ink);
	border-radius: 999px;
	padding: 8px 20px 8px 12px;
	box-shadow: var(--b89-shadow-pop);
}

.b89-nowplaying .b89-np-label {
	font-family: var(--b89-font-body);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--b89-gold);
	margin: 0;
}

.b89-nowplaying .b89-np-track {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .98rem;
	line-height: 1.2;
	margin: 0;
	color: var(--b89-ink);
}

/* ---------- on-air hero text ---------- */
.b89-hero .b89-eyebrow {
	font-family: var(--b89-font-body);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	color: var(--b89-gold);
	margin: 0;
}

.b89-hero .b89-show-times {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 18px;
	color: var(--b89-ink);
}

.b89-hero .b89-show-times b { color: var(--b89-red); }

.b89-hero .b89-hero-title {
	font-family: var(--b89-font-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 5.2vw, 4rem);
	line-height: 1.02;
	letter-spacing: -.015em;
	margin: 0 0 10px;
	color: var(--b89-ink);
}

.b89-hero .b89-hero-desc {
	font-family: var(--b89-font-body);
	font-size: 1.15rem;
	font-weight: 500;
	margin: 0;
	max-width: 44ch;
	color: var(--b89-ink);
}

.b89-hero .b89-hero-desc b { font-weight: 700; }

/* ---------- vinyl ---------- */
.b89-vinyl-zone {
	display: grid;
	place-items: center;
	position: relative;
}

.b89-vinyl {
	width: min(380px, 88%);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 18px 40px -18px rgba(23, 18, 13, .55);
	position: relative;
}

/* The IMAGE spins, not the circle: a rotating square box adds its corners to
   the page's scrollable overflow, which gave phones a sideways scroll. The
   circle clips the image, so the record looks identical. */
.b89-vinyl img {
	width: 100.5%;
	height: 100.5%;
	object-fit: cover;
	display: block;
	margin: -0.25%;
	animation: b89-spin 9s linear infinite;
	animation-duration: var(--b89-vinyl-spin, 9s);
}

.b89-vinyl.b89-no-spin img { animation: none; }

.b89-vinyl-sticker {
	position: absolute;
	bottom: 8%;
	right: 4%;
	background: var(--b89-paper);
	border: 3px solid var(--b89-ink);
	border-radius: 12px;
	padding: 8px 14px;
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .8rem;
	transform: rotate(4deg);
	box-shadow: var(--b89-shadow-pop);
	color: var(--b89-ink);
}

.b89-vinyl-sticker b { color: var(--b89-red); }

/* ---------- on-air bar ---------- */
.b89-onair-bar {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.b89-mini-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	flex-shrink: 0;
	background: radial-gradient(circle at 32% 28%, #ff7a6d 0%, var(--b89-red) 42%, var(--b89-red-deep) 100%);
	border: 3px solid var(--b89-ink);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--b89-font-display);
	font-weight: 700;
	font-size: .62rem;
	text-align: center;
	line-height: 1.1;
	transform: rotate(-8deg);
	box-shadow: 2px 3px 0 rgba(23, 18, 13, .85);
}

.b89-onair-bar .b89-ob-time {
	font-family: var(--b89-font-body);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--b89-gold);
	margin: 0;
}

.b89-onair-bar .b89-ob-show {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: 1.15rem;
	line-height: 1.15;
	margin: 0;
	color: var(--b89-ink);
}

.b89-onair-bar .b89-nowplaying { padding: 6px 16px 6px 10px; }

.b89-onair-bar .b89-btn { margin-left: auto; padding: 10px 20px; font-size: 1rem; }

@media (max-width: 760px) {
	.b89-onair-bar .b89-btn { margin-left: 0; }
}

/* ---------- coming up ---------- */
.b89-coming-up {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.b89-slot {
	border: 3px solid var(--b89-ink);
	border-radius: 14px;
	background: var(--b89-cream);
	padding: 18px;
	box-shadow: var(--b89-shadow-pop);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.b89-slot.b89-live { background: var(--b89-yellow); }

.b89-slot .b89-s-time {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--b89-gold);
	margin: 0;
}

.b89-slot.b89-live .b89-s-time { color: var(--b89-red-deep); }

.b89-slot .b89-s-show {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: 1.18rem;
	line-height: 1.15;
	margin: 0;
	color: var(--b89-ink);
}

.b89-slot .b89-s-desc {
	font-family: var(--b89-font-body);
	font-size: .86rem;
	color: rgba(23, 18, 13, .72);
	margin: 0;
}

.b89-live-chip {
	align-self: flex-start;
	background: var(--b89-red);
	color: #fff;
	font-family: var(--b89-font-body);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .16em;
	padding: 3px 10px;
	border-radius: 999px;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.b89-live-chip::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: b89-pulse 1.4s infinite;
}

@media (max-width: 980px) {
	.b89-coming-up { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.b89-coming-up { grid-template-columns: 1fr; }
}

/* ---------- track cards ---------- */
.b89-tracks {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
}

.b89-track {
	background: var(--b89-paper);
	border: 3px solid var(--b89-ink);
	border-radius: 14px;
	padding: 14px;
	box-shadow: var(--b89-shadow-pop);
	transition: transform .15s ease;
}

.b89-track:hover { transform: translateY(-4px); }

.b89-track .b89-sleeve {
	aspect-ratio: 1;
	border-radius: 8px;
	margin-bottom: 12px;
	overflow: hidden;
	border: 2px solid var(--b89-ink);
	background: var(--b89-cream);
}

.b89-track .b89-sleeve img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.b89-track .b89-t-name {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .95rem;
	line-height: 1.25;
	margin: 0;
	color: var(--b89-ink);
}

.b89-track .b89-t-artist {
	font-family: var(--b89-font-body);
	font-size: .82rem;
	color: rgba(23, 18, 13, .65);
	font-weight: 600;
	margin: 0;
}

.b89-track .b89-t-time {
	font-family: var(--b89-font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--b89-gold);
	margin: 6px 0 0;
	text-transform: uppercase;
}

@media (max-width: 980px) {
	.b89-tracks { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.b89-tracks { grid-template-columns: 1fr 1fr; }
	.b89-track:nth-child(n+5) { display: none; }
}

/* ---------- rate table ---------- */
.b89-rates {
	border: 3px solid var(--b89-ink);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--b89-shadow-pop);
}

/* Explicit resets: WordPress/Astra base styles give tables a bottom margin
   (a page-coloured strip inside the rounded frame) and cells their own
   borders ("white gaps"). */
.b89-rates table {
	width: 100%;
	border-collapse: collapse;
	background: var(--b89-paper);
	margin: 0;
	border: none;
}

.b89-rates th,
.b89-rates td {
	border-left: none;
	border-right: none;
	border-top: none;
}

.b89-rates th {
	background: var(--b89-ink);
	color: var(--b89-yellow);
	text-align: left;
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .04em;
	padding: 12px 18px;
}

.b89-rates td {
	padding: 13px 18px;
	border-bottom: 2px solid rgba(23, 18, 13, .14);
	font-family: var(--b89-font-body);
	font-size: .95rem;
	color: var(--b89-ink);
	vertical-align: top;
}

.b89-rates tr:last-child td { border-bottom: none; }

.b89-rates td.b89-price {
	font-weight: 700;
	white-space: nowrap;
}

.b89-rates td .b89-note {
	display: block;
	font-size: .8rem;
	color: rgba(23, 18, 13, .6);
	font-weight: 500;
}

.b89-rates-footnote {
	font-family: var(--b89-font-body);
	font-size: .85rem;
	color: rgba(23, 18, 13, .6);
	margin-top: 10px;
}

@media (max-width: 760px) {
	.b89-rates { overflow-x: auto; }
	.b89-rates table { min-width: 520px; }
}

/* Phones: the three-column table becomes a stacked list — placement and
   price on the first line, "where it appears" underneath — instead of a
   sideways-scrolling table that clips its last column. */
@media (max-width: 560px) {
	.b89-rates { overflow-x: visible; }
	.b89-rates table { min-width: 0; }
	.b89-rates thead { display: none; }
	.b89-rates tbody,
	.b89-rates tr { display: block; }
	.b89-rates tr {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: start;
		gap: 2px 14px;
		padding: 13px 16px;
		border-bottom: 2px solid rgba(23, 18, 13, .14);
	}
	.b89-rates tr:last-child { border-bottom: none; }
	.b89-rates td { padding: 0; border: none; }
	.b89-rates td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 700; }
	.b89-rates td.b89-price { grid-column: 2; grid-row: 1; text-align: right; }
	.b89-rates td:nth-child(2) {
		grid-column: 1 / -1;
		grid-row: 2;
		font-size: .8rem;
		color: rgba(23, 18, 13, .6);
	}
	.b89-rates td:nth-child(2)::before { content: "Where: "; font-weight: 600; }
}

/* ---------- ad slot ---------- */
.b89-ad-slot {
	border: 3px dashed rgba(23, 18, 13, .55);
	border-radius: 14px;
	background: rgba(255, 253, 244, .65);
	min-height: 96px;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 14px;
	position: relative;
}

.b89-ad-slot .b89-ad-tag {
	position: absolute;
	top: -11px;
	left: 14px;
	background: var(--b89-ink);
	color: var(--b89-yellow);
	font-family: var(--b89-font-body);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}

.b89-ad-slot .b89-ad-line {
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .95rem;
	margin: 0;
	color: var(--b89-ink);
}

.b89-ad-slot .b89-ad-subline {
	display: block;
	font-weight: 500;
	color: rgba(23, 18, 13, .6);
	font-size: .78rem;
	margin-top: 2px;
}

.b89-ad-slot--image {
	border-style: solid;
	border-color: var(--b89-ink);
	padding: 0;
	overflow: hidden;
	background: var(--b89-paper);
}

/* Banner slots hug their image: the creative spans the slot width and the
   height follows its aspect ratio, so narrowing the page scales the whole
   slot down with no letterboxing — but never grows past the 100px design
   height, so an over-tall upload can't stretch the row. (Placeholders keep
   the fixed height.) */
.b89-ad-slot--image {
	height: auto;
	min-height: 0;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

.b89-ad-slot--image a {
	display: block;
	max-width: 100%;
}

.b89-ad-slot--image img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: 100px;
	margin: 0 auto;
}

/* When "Hide empty ad spots" removes a slot's output, collapse its wrapper
   column too. (Elementor drops empty widgets from the DOM entirely, so match
   the classed wrapper.) */
.b89-ad-col:not(:has(.b89-ad-slot)) {
	display: none;
}

/* Ad columns are exactly half the row (minus their share of the 20px gap)
   and never flex-grow — so a slot keeps the same width whether its
   neighbour is present or hidden. Mobile stacking is Elementor's. */
@media (min-width: 561px) {
	.b89-ad-col {
		width: calc(50% - 10px) !important;
		--flex-grow: 0;
		flex-grow: 0 !important;
	}
}

/* Presenter card "Meet …" link: text turns red when hovering anywhere on the
   card (the whole card is one <a>). Doubled heading class outguns the kit's
   heading-colour global. */
.e-loop-item a.e-con:hover .b89-pres-more .elementor-heading-title.elementor-heading-title {
	color: var(--b89-red);
}

/* Show chip (single page): the bolded times part reads red, like the design's
   .show-chip b rule. */
.b89-show-chip .elementor-heading-title b,
.b89-show-chip .elementor-heading-title strong {
	color: var(--b89-red);
}

/* Presenter bio (single page): the design caps line length at 58ch. */
.b89-bio p {
	max-width: 58ch;
	margin-bottom: 14px;
}

/* ---------- header (phones) ---------- */
/* The header row is space-between with three items, which parks the
   hamburger in the middle on phones. Give the logo the free space instead
   so the hamburger sits beside the Listen Live button. */
@media (max-width: 760px) {
	.elementor-location-header .e-con > .elementor-widget-image,
	.elementor-location-header .e-con-inner > .elementor-widget-image {
		margin-right: auto;
	}
	/* The right-hand group keeps its desktop 330px width on phones and soaks
	   up the whole row; shrink it to the Listen Live button so the logo's
	   auto margin has space to take. */
	.elementor-location-header .e-con-inner > .e-con:has(.b89-listen-btn),
	.elementor-location-header .e-con > .e-con:has(.b89-listen-btn) {
		--width: auto;
		width: auto;
		flex-shrink: 0;
	}
}

/* Small laptops (just above the 980px tablet breakpoint): the inline menu
   returns before there is room for it, so "Contact" wrapped to a second
   line until ~1090px. Tighten the items until the row has space. */
@media (min-width: 981px) and (max-width: 1240px) {
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item {
		padding-left: 8px;
		padding-right: 8px;
		font-size: .86rem;
	}
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu {
		gap: 2px;
	}
	/* …and let the socials + Listen Live group give up its fixed 330px. */
	.elementor-location-header .e-con-inner > .e-con:has(.b89-listen-btn),
	.elementor-location-header .e-con > .e-con:has(.b89-listen-btn) {
		--width: auto;
		width: auto;
		flex-shrink: 0;
	}
}

/* Narrowest laptops: seven menu items need one more notch. */
@media (min-width: 981px) and (max-width: 1060px) {
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu .elementor-item.elementor-item {
		padding-left: 6px;
		padding-right: 6px;
		font-size: .8rem;
	}
	.elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-nav-menu { gap: 0; }
}

/* ---------- advert audio samples (Advertise page) ---------- */
.b89-audio-sample audio {
	display: block;
	width: 100%;
	margin-top: 4px;
}

/* ---------- long-form content pages (policies, T&Cs) ---------- */
.b89-longform h2 { margin: 30px 0 10px; font-size: 1.5rem; }
.b89-longform h3 { margin: 24px 0 8px; font-size: 1.15rem; }
.b89-longform h2:first-child, .b89-longform h3:first-child { margin-top: 0; }
.b89-longform p { margin: 0 0 14px; }
.b89-longform ul, .b89-longform ol { margin: 0 0 16px; padding-left: 24px; }
.b89-longform li { margin-bottom: 6px; }
.b89-longform li > ul, .b89-longform li > ol { margin: 6px 0 0; }
.b89-longform table { width: 100%; border-collapse: collapse; margin: 6px 0 18px; font-size: .95rem; }
.b89-longform th, .b89-longform td { text-align: left; padding: 9px 12px; border-bottom: 2px solid rgba(23, 18, 13, .14); vertical-align: top; }
.b89-longform th { font-family: var(--b89-font-display); font-weight: 600; background: var(--b89-cream); }
.b89-longform .b89-note { font-size: .85rem; color: rgba(23, 18, 13, .6); }
.b89-longform a, .b89-underline-links a { overflow-wrap: anywhere; }
/* Phones: data tables stack into labelled rows (cells carry data-label). */
@media (max-width: 560px) {
	.b89-longform table, .b89-longform tbody, .b89-longform tr, .b89-longform td { display: block; width: 100%; box-sizing: border-box; }
	.b89-longform thead { display: none; }
	.b89-longform tr { padding: 12px 0; border-bottom: 2px solid rgba(23, 18, 13, .14); }
	.b89-longform tr:last-child { border-bottom: none; }
	.b89-longform td { padding: 3px 0; border: none; }
	.b89-longform td[data-label]::before { content: attr(data-label) ": "; font-family: var(--b89-font-display); font-weight: 600; }
	.b89-longform td:first-child { font-weight: 700; font-family: var(--b89-font-display); font-size: 1.02rem; }
	.b89-longform td:first-child::before { content: none; }
}
.b89-longform .b89-contact-block { background: var(--b89-cream); border: 2px solid rgba(23, 18, 13, .14); border-radius: 12px; padding: 14px 18px; margin: 0 0 16px; }
.b89-longform .b89-contact-block p:last-child { margin-bottom: 0; }

/* Forms with radio/checkbox lists: breathing room between questions. */
.b89-form .elementor-field-type-radio, .b89-form .elementor-field-type-checkbox { margin-bottom: 10px; }
.b89-form .elementor-field-subgroup .elementor-field-option { margin: 4px 0; }
.b89-form .elementor-field-subgroup .elementor-field-option label { font-family: var(--b89-font-body); font-size: .95rem; }
.b89-form .elementor-field-type-html { font-family: var(--b89-font-display); font-weight: 600; font-size: 1.15rem; margin-top: 18px; padding-bottom: 0; }
.b89-form .elementor-field-type-html p { margin: 0; }

/* Role cards (Getting Involved): the emoji badge is a 52px circle, not a bar. */
.e-con .elementor-widget.b89-role-icon,
.elementor-widget.b89-role-icon {
	--container-widget-width: 52px;
	align-self: flex-start;
	width: 52px;
	min-width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
}
.elementor-widget.b89-role-icon .elementor-widget-container,
.elementor-widget.b89-role-icon .elementor-heading-title { line-height: 1; margin: 0; }

/* Multi-step forms: keep step labels on one line; phones show numbers only. */
.b89-form .e-form__indicators__indicator__label { white-space: nowrap; text-align: center; }
.b89-form .e-form__indicators { margin-bottom: 18px; }
@media (max-width: 760px) {
	.b89-form .e-form__indicators__indicator__label { display: none; }
	.b89-form .e-form__indicators__indicator { padding: 0 2px; }
}

/* ---------- survey form: tappable chip answers ---------- */
/* Selectors carry .elementor-widget so they outrank Elementor's own form rules. */
.elementor-widget.b89-survey .elementor-form-fields-wrapper { row-gap: 0; }
.elementor-widget.b89-survey .e-form__indicators { margin-bottom: 34px; }
/* Each question is its own block: a rule above, generous space below. */
.elementor-widget.b89-survey .elementor-field-group:not(.elementor-field-type-step):not(.elementor-field-type-submit):not(.e-form__buttons__wrapper) {
	margin-bottom: 0;
	padding: 26px 0 30px;
	border-top: 2px solid rgba(23, 18, 13, .12);
}
.elementor-widget.b89-survey .e-form__step > .elementor-field-group:first-of-type { border-top: none; padding-top: 4px; }
.elementor-widget.b89-survey .elementor-field-group > label { margin-bottom: 16px; }
.elementor-widget.b89-survey .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.elementor-widget.b89-survey .elementor-field-subgroup .elementor-field-option { flex: 0 1 auto; margin: 0; position: relative; }
.elementor-widget.b89-survey .elementor-field-option input[type="radio"],
.elementor-widget.b89-survey .elementor-field-option input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.elementor-widget.b89-survey .elementor-field-subgroup .elementor-field-option label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 18px 11px 13px;
	border: 2.5px solid var(--b89-ink);
	border-radius: 999px;
	background: var(--b89-paper);
	font-family: var(--b89-font-body);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.25;
	color: var(--b89-ink);
	cursor: pointer;
	transition: background .12s;
}
.elementor-widget.b89-survey .elementor-field-option label::before {
	content: "";
	flex: none;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 2px solid var(--b89-ink);
	background: #fff;
	box-sizing: border-box;
}
.elementor-widget.b89-survey .elementor-field-type-checkbox .elementor-field-option label::before { border-radius: 4px; }
.elementor-widget.b89-survey .elementor-field-option label:hover { background: var(--b89-cream); }
.elementor-widget.b89-survey .elementor-field-option input:checked + label { background: var(--b89-yellow); }
.elementor-widget.b89-survey .elementor-field-option input:checked + label::before { background: var(--b89-red); box-shadow: inset 0 0 0 2.5px #fff; }
.elementor-widget.b89-survey .elementor-field-option input:focus-visible + label { outline: 3px solid var(--b89-red); outline-offset: 2px; }
.elementor-widget.b89-survey textarea.elementor-field { min-height: 120px; }
.elementor-widget.b89-survey .e-form__buttons { margin-top: 12px; padding-top: 22px; border-top: 2px solid rgba(23, 18, 13, .12); gap: 14px; }
.elementor-widget.b89-survey .e-form__buttons { display: flex; flex-wrap: nowrap; }
.elementor-widget.b89-survey .e-form__buttons__wrapper { padding: 0; flex: 1 1 0; width: auto; max-width: none; }
.elementor-widget.b89-survey .e-form__buttons__wrapper[style*="display: none"],
.elementor-widget.b89-survey .e-form__buttons__wrapper.e-form__buttons__wrapper--hidden { display: none; }
.elementor-widget.b89-survey .e-form__buttons__wrapper__button { width: 100%; }
.elementor-widget.b89-survey .e-form__buttons__wrapper__button { white-space: nowrap; }
.elementor-widget.b89-survey .e-form__buttons__wrapper__button-previous { background: var(--b89-ink) !important; color: var(--b89-yellow) !important; }

/* Text widgets inside tight cards: no trailing paragraph margin. */
.elementor-widget.b89-tight p:last-child { margin-bottom: 0; }

/* ---------- presenter photo ---------- */
/* The wrapper needs a definite width or Chrome sizes the flex item from the
   placeholder's text before the aspect-ratio resolves — on phones the loop
   card and the profile column then collapse to ~40px and the photo bleeds
   over the text below. Honour Elementor's custom-width var when set. */
.elementor-widget-b89_presenter_photo {
	width: var(--container-widget-width, 100%);
}

/* Profile page: once the photo column stacks above the text (tablet and
   down) a full-width 3:4 portrait is taller than the screen — cap it. */
@media (max-width: 980px) {
	.elementor-location-single .e-con.b89-polaroid {
		--width: min(100%, 460px);
		width: min(100%, 460px);
		max-width: 460px;
	}
}

.b89-pres-photo {
	aspect-ratio: 1 / 1.05;
	border-radius: 10px;
	border: 2px solid var(--b89-ink);
	overflow: hidden;
	position: relative;
	background: radial-gradient(circle at 50% 34%, #ff8d7f 0%, var(--b89-red) 46%, var(--b89-red-deep) 100%);
	display: grid;
	place-items: center;
}

.b89-pres-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 22%;
}

.b89-pres-photo .b89-initials {
	font-family: var(--b89-font-display);
	font-weight: 700;
	font-size: 4rem;
	color: var(--b89-yellow);
	text-shadow: 3px 3px 0 rgba(23, 18, 13, .6);
}

.b89-pres-photo .b89-ph-chip {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(23, 18, 13, .82);
	color: var(--b89-yellow);
	white-space: nowrap;
	font-family: var(--b89-font-body);
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

/* ---------- Q & A list ---------- */
.b89-qa {
	border: 3px solid var(--b89-ink);
	border-radius: 14px;
	background: var(--b89-paper);
	box-shadow: var(--b89-shadow-pop);
	overflow: hidden;
}

.b89-qa dl { margin: 0; }

.b89-qa .b89-qa-row {
	padding: 14px 20px;
	border-bottom: 2px solid rgba(23, 18, 13, .15);
}

.b89-qa .b89-qa-row:last-child { border-bottom: none; }

.b89-qa dt {
	font-family: var(--b89-font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--b89-gold);
	margin-bottom: 2px;
}

.b89-qa dd {
	font-family: var(--b89-font-body);
	font-weight: 600;
	margin: 0;
	color: var(--b89-ink);
}

/* ---------- advertise page helpers ---------- */
/* "From £X / week" price highlight on product cards. */
.b89-from b {
	color: var(--b89-red);
}

/* Pins the price line to the bottom of a flex-column card so cards in a row
   align (the design's .from { margin-top: auto }). Elementor sets widget
   margins via higher-specificity container rules and logical properties,
   so this needs both properties and !important to win. */
.elementor-element.b89-push-bottom {
	margin-top: auto !important;
	margin-block-start: auto !important;
}

/* ---------- listen page helpers ---------- */
/* 54px circle glyph for the method-card headers (FM / dial / phone / note). */
.b89-circle-ico .elementor-heading-title {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--b89-ink);
	color: var(--b89-yellow);
	display: grid;
	place-items: center;
	font-family: var(--b89-font-display);
	font-weight: 700;
	font-size: 1rem;
	border: 3px solid var(--b89-ink);
}

.b89-circle-ico--red .elementor-heading-title {
	background: var(--b89-red);
	color: #fff;
}

/* "89.0 FM" frequency display — unit smaller and ink-coloured. */
.b89-freq .elementor-heading-title small {
	font-size: .45em;
	color: var(--b89-ink);
}

/* Two-line app store buttons. */
.b89-store-btn .elementor-heading-title a {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	background: var(--b89-ink);
	color: var(--b89-cream);
	border: 3px solid var(--b89-ink);
	border-radius: 10px;
	padding: 7px 16px;
	text-decoration: none;
	line-height: 1.2;
	box-shadow: var(--b89-shadow-pop);
	transition: transform .12s ease;
}

.b89-store-btn .elementor-heading-title a:hover { transform: translateY(-2px); }

.b89-store-btn .elementor-heading-title small {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--b89-yellow);
}

.b89-store-btn .elementor-heading-title b {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: .95rem;
}

/* Smart-speaker quote bubbles — tail corner + red command text. */
.b89-say .elementor-heading-title {
	display: inline-block;
	background: var(--b89-cream);
	border: 2.5px solid var(--b89-ink);
	border-radius: 14px 14px 14px 3px;
	padding: 10px 16px;
	font-family: var(--b89-font-body);
	font-weight: 700;
	font-size: .95rem;
	color: var(--b89-ink);
}

.b89-say .elementor-heading-title i {
	font-style: normal;
	color: var(--b89-red);
}

/* Inline SVG glyphs inside the circles inherit the circle's colour. */
.b89-circle-ico .elementor-heading-title svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	display: block;
}

.b89-circle-ico--way .elementor-heading-title svg,
.b89-circle-ico--sm .elementor-heading-title svg {
	width: 18px;
	height: 18px;
}

/* Icon-widget circle badges: pin exact diameters regardless of icon size. */
.b89-icon-circle .elementor-icon {
	padding: 0;
	display: grid;
	place-items: center;
}

.b89-icon-circle--way .elementor-icon { width: 42px; height: 42px; }

.b89-icon-circle--method .elementor-icon { width: 54px; height: 54px; }

/* Home listen-strip variant: yellow circle, ink glyph (the design's .w-ico). */
.b89-circle-ico--way .elementor-heading-title {
	width: 42px;
	height: 42px;
	background: var(--b89-yellow);
	color: var(--b89-ink);
	font-size: .8rem;
	border: none;
}

/* Smaller circle variant for contact info cards. */
.b89-circle-ico--sm .elementor-heading-title {
	width: 42px;
	height: 42px;
	font-size: 1.05rem;
	border: none;
}

/* Contact page big phone link (!important: the heading widget's global
   typography rule outranks class selectors). */
.b89-big-link .elementor-heading-title a {
	font-family: var(--b89-font-display) !important;
	font-weight: 600 !important;
	font-size: 1.2rem !important;
	color: var(--b89-ink);
	text-decoration: none;
	border-bottom: 3px solid var(--b89-red);
	padding-bottom: 1px;
}

.b89-big-link .elementor-heading-title a:hover { color: var(--b89-red); }

/* Underlined inline links in info cards (matches the design's defaults). */
.b89-underline-links a { text-decoration: underline; }

/* Contact form details the widget controls don't reach (border width:
   Elementor's dimension control rounds 2.5 down to 2). */
/* :not(.elementor-select-wrapper): the select's wrapper div also carries the
   .elementor-field class — padding it shrinks the actual <select> inside. */
.elementor-widget.b89-form .elementor-field-group .elementor-field.elementor-field:not(.elementor-select-wrapper) {
	padding: 11px 14px;
	font-weight: 500;
	border-width: 2.5px;
}

.b89-form textarea.elementor-field {
	min-height: 130px;
	resize: vertical;
}

.b89-form .elementor-field:focus {
	outline: 3px solid var(--b89-red);
	outline-offset: 2px;
}

.b89-form .elementor-button {
	white-space: nowrap;
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: 1rem;
	box-shadow: var(--b89-shadow-pop);
	transition: transform .12s ease, box-shadow .12s ease;
}

.b89-form .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 rgba(23, 18, 13, .9);
}

/* The home hero's subtle dot pattern. */
.b89-dots {
	background-image: radial-gradient(rgba(23, 18, 13, .05) 1.5px, transparent 1.5px) !important;
	background-size: 26px 26px !important;
}

/* FAQ accordion restyled as the design's separate pop-shadow cards. */
.b89-faq .elementor-accordion-item,
.b89-faq .elementor-toggle-item {
	background: var(--b89-paper);
	border: 3px solid var(--b89-ink) !important;
	border-radius: 14px;
	box-shadow: var(--b89-shadow-pop);
	margin-bottom: 14px;
	overflow: hidden;
}

.b89-faq .elementor-tab-title {
	font-family: var(--b89-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--b89-ink);
	padding: 16px 20px;
}

.b89-faq .elementor-tab-title .elementor-accordion-icon {
	color: var(--b89-red);
	font-size: 1.2rem;
}

.b89-faq .elementor-tab-content {
	font-family: var(--b89-font-body);
	font-size: .95rem;
	color: rgba(23, 18, 13, .8);
	padding: 0 20px 16px;
	border-top: none !important;
}

/* ---------- polaroid tilt (single presenter template) ---------- */
.b89-polaroid {
	transform: rotate(-1.5deg);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.b89-eq i,
	.b89-live-chip::before,
	.b89-onair-dot { animation: none; }

	.b89-vinyl img { animation: none; }
}