/**
 * Brains On Board site-wide guards (prompt 6).
 */

/*
 * No sideways scrolling, ever. On a real Android phone, anything wider than the screen makes
 * Chrome widen the whole page, so the right-hand edge sits off-screen.
 * html gets "hidden"; body gets "clip", not "hidden": "hidden" on both makes the body its own
 * scroll box, and the sticky header then scrolls away with the page.
 */
html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
}

/* Full-width bands never grow past the screen. */
.bob-hdr,
.bob-ftr,
.bob-sec,
.bob-hero,
.bob-strip,
.bob-final,
.bob-mbar,
.bob-pdp-hero,
.bob-pdp-sticky,
.bob-cart-wrap,
.bob-chkpage,
.bob-ty-hero {
	max-width: 100%;
}

/*
 * Header "Your booking" count (Breakdance mini cart). Breakdance pins the count to the corner of
 * the whole button, and the "Your booking" label is part of that button, so the count sat on the
 * label. Put it back in the row between the clipboard and the label, raised to the clipboard's
 * top-right corner, just outside the icon. When the booking is empty Breakdance hides it
 * (data-count="0") and the label closes up again.
 */
.bob-hdr .bob-hdr-actions .bde-mini-cart-toggle__counter {
	position: static;
	align-self: flex-start;
	margin: -13px 0 0 1px;
}

/* Slimmer side padding on that button, so the desktop header row still fits with the larger logo. */
.bob-hdr .bob-hdr-actions .bde-mini-cart-toggle {
	padding-left: 8px;
	padding-right: 8px;
}

/*
 * Header logo (0.18.3, Mike 27 Oct: "too small for the space it lives in"). Breakdance drew it
 * 67px tall on desktop and tablet and 41px on phones, with 14-15px of empty bar above and below it
 * on a phone. Now 76px (243px wide) on desktop and tablet, 58px (185px wide) on phones (below
 * 768px). The header bars keep their heights (84px and 70px), and the desktop row was checked not
 * to wrap from 768 to 1440px with a repair in the booking ("Your booking" label and count showing).
 */
body.breakdance .bob-hdr .bob-hdr-logo img {
	width: auto;
	height: 76px;
}
/* 1120-1199px is the tightest desktop row: with a repair booked, the menu wrapped onto two lines at
   1120px even with the old logo, and at 1120-1140px with the new one. There the logo stays at its old
   67px and the menu links sit 10px apart instead of 14px, so the menu is one line all the way down
   to 1120px (below that it becomes the burger menu). */
@media (min-width: 1120px) and (max-width: 1199px) {
	body.breakdance .bob-hdr .bob-hdr-logo img {
		height: 67px;
	}
	body.breakdance .bob-hdr .bob-hdr-nav {
		gap: 10px;
	}
}
@media (max-width: 767px) {
	body.breakdance .bob-hdr .bob-hdr-logo img {
		height: 58px;
	}
}

/*
 * Logged-in admins on phones (0.18.3). Breakdance's .bob-hdr sticks at
 * top: var(--wp-admin--admin-bar--height), which WordPress sets to 46px up to 782px wide. But below
 * 601px WordPress lets the admin bar scroll away with the page, so once scrolled the header sat 46px
 * down with a strip of the page showing above it. Visitors never had this (the variable isn't set for them).
 */
@media (max-width: 600px) {
	body.admin-bar .bob-hdr {
		top: 0;
	}
}

/*
 * The full desktop row (logo, menu, phone number, "Your booking" with its label, Book a fix) needs
 * about 1100px. Breakdance hides the label below 1120px; between 1120 and 1199 there isn't room for
 * it either, so the menu would wrap onto two lines. Hide the label there too; the icon and count stay.
 */
@media (max-width: 1199px) {
	.bob-hdr .bob-hdr-actions .bde-mini-cart-toggle::after {
		content: none;
	}
}

/*
 * Site Brain fixes (0.16.0): while the booking is empty, the header's "Your booking" button is
 * hidden. It comes back as soon as a repair is booked, with no reload: WooCommerce's cart
 * fragments swap in a new counter with the new data-count (Breakdance MiniCart/ajax.php).
 * The phone menu keeps its own "Your booking" line ([bob_booking_link]).
 */
.bob-hdr .bob-hdr-actions .bde-mini-cart:has(.bde-mini-cart-toggle__counter[data-count="0"]) {
	display: none;
}

/* "Your booking" line in the phone menu ([bob_booking_link]); the link itself uses .bob-mobile-link. */
.bob-mobile-booking {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bob-booking-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background-color: var(--bde-palette-accent);
	color: var(--bde-palette-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Tier icons (prompt 7, includes/icons.php) ---------- */
.bob-tier-icon {
	display: inline-block;
	flex-shrink: 0;
	line-height: 0;
}

.bob-tier-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Price cards on Home and /book/: top-left of the card. */
.bob-tier-icon--48 {
	width: 48px;
	height: 48px;
	margin-bottom: 10px;
}

/* Beside the repair name on product pages. */
.bob-tier-icon--40 {
	width: 40px;
	height: 40px;
}

/* Breakdance gives every Shortcode element width:100%. In the product title row that made the
   icon's wrapper take half the row and squeezed the name onto two lines, so size it to the icon. */
.bob-pdp-title-row > .bde-shortcode {
	width: auto;
	flex: 0 0 auto;
	line-height: 0;
}

.bob-pdp-title-row > .bde-heading {
	flex: 1 1 auto;
	min-width: 0;
}

/* Beside each repair on Your booking and Confirm your booking. */
.bob-tier-icon--24 {
	width: 24px;
	height: 24px;
	margin-right: 8px;
	vertical-align: middle;
	position: relative;
	top: -2px;
}

/* ---------- "Your booking" mini-cart panel (prompt 11) ---------- */
/* Close button: site.js swaps Breakdance's bare "×" for an inline SVG; same comic-kit look as the
   contact popup's close button (yellow disc, ink outline, hard shadow) with a navy ×. */
body.breakdance .bde-mini-cart-offcanvas__close-button.bob-close {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 0;
	line-height: 0;
	color: var(--bde-palette-dark);
	background-color: var(--bde-palette-paper);
	border: var(--bob-border);
	border-radius: 999px;
	box-shadow: var(--bob-shadow-sm);
	cursor: pointer;
	opacity: 1; /* Breakdance dims its close button to 50% until hover */
}
body.breakdance .bde-mini-cart-offcanvas__close-button.bob-close:hover {
	background-color: var(--bde-palette-white);
}
body.breakdance .bde-mini-cart-offcanvas__close-button.bob-close svg {
	display: block;
	width: 24px;
	height: 24px;
}
body.breakdance .bde-mini-cart-offcanvas__close-button.bob-close:focus-visible {
	outline: 3px solid var(--bde-palette-accent);
	outline-offset: 3px;
}

/* "Pick a repair →" already carries its arrow (vocabulary.php); drop Breakdance's extra one. */
body.breakdance .bde-mini-cart-continue-link::after {
	content: none;
}

/* Empty booking only: Crassus peeks up over the panel's bottom edge, bottom-right, tilted −6°.
   A background image, so screen readers skip him; the moment an item is added WooCommerce
   replaces the "Nothing on the bench yet." message, and the rule no longer matches. */
body.breakdance .bde-mini-cart-offcanvas-body:has(.woocommerce-mini-cart__empty-message) {
	padding-bottom: 40px;
}
body.breakdance .bde-mini-cart-offcanvas-body:has(.woocommerce-mini-cart__empty-message)::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -4px; /* the tilt lifts one bottom corner by ~4px; the panel clips the other */
	width: 80px;
	aspect-ratio: 240 / 114;
	background: url("../img/crassus-peek-240.webp") no-repeat center bottom / contain;
	transform: rotate(-6deg);
	transform-origin: 50% 100%;
	pointer-events: none;
}

/* Speech bubbles: tails navy #1E2A5A (prompt 13), borders navy too (prompt 15); the hard shadow
   stays ink. Each tail is a border triangle with three transparent sides, so each variant sets
   only its own visible side. */
body.breakdance .bob-speech {
	border-color: var(--bde-palette-dark);
}

/* Order-received page: the tail moves to the bubble's left edge, pointing at the headshot, as on
   Home. Measured from the bottom, so it holds however the text wraps: the headshot and bubble are
   bottom-aligned (flex, align end) and the bubble has a 24px bottom margin, so the headshot's
   centre sits (headshot / 2 - 24px) above the bubble's bottom edge. The 20px-tall tail is placed
   from the inside of the 2.5px border: 96px headshot -> bottom 12px; 76px (phones) -> 2px. */
body.breakdance .bob-ty-speech::after {
	top: auto;
	bottom: 12px;
	left: -15px;
	border-top: 10px solid transparent;
	border-right: 12px solid var(--bde-palette-dark);
	border-bottom: 10px solid transparent;
	border-left: 0 solid transparent;
}
@media (max-width: 767px) {
	body.breakdance .bob-ty-speech::after {
		bottom: 2px;
	}
}

/* Home About bubble: left tail on desktop, upward tail below 1024px (Breakdance sets the shapes). */
@media (min-width: 1024px) {
	body.breakdance .bob-about-speech::after {
		border-right-color: var(--bde-palette-dark);
	}
}
@media (max-width: 1023px) {
	body.breakdance .bob-about-speech::after {
		border-bottom-color: var(--bde-palette-dark);
	}
}

/* Any other bubble keeps the default downward tail, in navy too. */
body.breakdance .bob-speech:not(.bob-ty-speech):not(.bob-about-speech)::after {
	border-top-color: var(--bde-palette-dark);
}

/* About (Home, prompt 13): Mike's photo at 180px in its comic frame, top-aligned with the
   "Meet Mike" heading; the copy takes the rest of the row. Crassus becomes a corner stamp a
   quarter of the photo's width. Below 1024px the photo sits above the copy, left-aligned. */
body.breakdance .bob-about-photo {
	width: 180px;
}
body.breakdance .bob-about-badge {
	margin-left: 0;
	margin-right: 0;
	padding: 8px;
	box-shadow: var(--bob-shadow);
}
body.breakdance .bob-about-crassus {
	right: -12px;
	bottom: -12px;
	width: 45px;
}
@media (min-width: 1024px) {
	/* The copy's children join the section grid (display: contents), so the photo can start on
	   the heading's row: kicker on row 1, heading to bubble on rows 2 to 5, photo rows 2 to 5. */
	body.breakdance .bob-about {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: start;
		column-gap: 48px;
		row-gap: 0;
	}
	body.breakdance .bob-about-copy {
		display: contents;
	}
	body.breakdance .bob-about-copy > * {
		grid-column: 2;
	}
	/* The kicker is a tilted label sized to its text; as a grid item it would stretch. */
	body.breakdance .bob-about-copy > .bob-kicker {
		justify-self: start;
	}
	body.breakdance .bob-about-media {
		grid-column: 1;
		grid-row: 2 / span 4;
	}
}
@media (max-width: 1023px) {
	body.breakdance .bob-about {
		row-gap: 28px;
	}
}

/* About (Home, prompt 15): the plain paragraph keeps to a readable 65 characters a line. The lead
   and the bubble already have their own narrower widths. */
body.breakdance .bob-about-copy > p:not(.bob-kicker):not(.bob-lead):not(.bob-speech) {
	max-width: 65ch;
}

/* Tier-card, Brain Scan and /book/ card Book buttons: navy here from prompt 15 until 27 Oct 2026.
   Since then every button that starts a booking is yellow (Breakdance class .bob-btn-book, added by
   provision/colour-cleanup.php), and the navy override is gone. */

/* "We fix" strip under the hero's yellow tick bar (prompt 16, [bob_we_fix]): two comic badges,
   white with the ink outline and hard shadow. The laptop is an inline navy line drawing; the Android
   robot is Google's flat head (attribution in the footer). Windows is the word only, no logo. */
.bob-wefix {
	padding: 18px 16px;
	background: var(--bde-palette-paper);
	border-bottom: 3px solid var(--bde-palette-ink);
}
.bob-wefix-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 18px;
	max-width: 1100px;
	margin: 0 auto;
}
body.breakdance .bob-wefix-label {
	margin: 0;
	font-family: var(--bde-heading-font-family);
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--bde-palette-dark);
}
body.breakdance .bob-wefix-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.breakdance .bob-wefix-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px 8px 12px;
	background: var(--bde-palette-white);
	border: var(--bob-border);
	border-radius: var(--bob-radius);
	box-shadow: var(--bob-shadow-sm);
	font-family: var(--bde-body-font-family);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--bde-palette-dark);
}
.bob-wefix-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 32px;
}
.bob-wefix-svg,
.bob-wefix-robot {
	display: block;
	width: 44px;
	height: auto;
}

/* Brain Scan cards (Home and /book/): "Computer brain fart? Book a Brain Scan." in the yellow kicker
   tag (Breakdance's .bob-kicker), just above the price (prompt 16, [bob_scan_kicker]). */
body.breakdance .bob-scan-kicker {
	margin: 10px 0 6px;
}

/*
 * "Most popular" tag (Breakdance class .bob-pkg-flag: absolute, top -18px, right 18px). Below
 * 1024px the price cards stack with a 34px gap, so the tag hung in the gap just under the Brain Fix
 * card and could read as Fix's. There, tuck it inside the Brain Refresh card's top-right corner.
 * Desktop is unchanged: side by side, the tag sits on Refresh's top edge (Site Brain fixes, 0.16.0).
 */
@media (max-width: 1023px) {
	.bob-pkg .bob-pkg-flag {
		top: 14px;
		right: 14px;
	}
}

/* ---------- Site Brain pages (0.17.0, provision/site-brain-pages.php) ---------- */
/* "How it works" on /websites/ has five steps: one row of five on wide screens. Below 1200px the
   card grids rule below takes over (grid fix, 0.18.2). */
@media (min-width: 1200px) {
	.bob-steps.bob-sb-steps5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
	}
}

/*
 * Card grids step down in stages (grid fix, 0.18.2).
 *
 * The Breakdance classes .bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid and .bob-pdp-more-grid
 * set the desktop columns (3 across; 2 for .bob-pdp-more-grid). On their own they then jump straight
 * to ONE column at 1023px, so a tablet or a narrowed laptop window got a single card stretched to
 * 700-850px with its picture and words small at the left. Breakdance compiles them as single-class
 * rules, so "body.breakdance" here wins without !important.
 *
 * From the point where the desktop layout stops fitting, the cards wrap in a centred row instead,
 * so a short last row sits in the middle:
 *   5-step grid (/websites/): 5 across from 1200px, 3 across below (3 + 2).
 *   Steps, numbers, tiers:    3 across 900-1023px, 2 across 600-899px.
 *   Price and plan cards (.bob-pkgs) and .bob-pdp-more-grid: 2 across 600-1023px. Three price
 *                             cards at 900px are 267px wide, too narrow for "Book a Brain Refresh".
 *   Every card grid:          1 column below 600px, each card at most 480px wide and centred.
 * --bob-cols is the number across; every rule here has the same specificity, so the later block wins.
 */
@media (max-width: 1199px) {
	body.breakdance .bob-sb-steps5 {
		--bob-cols: 3;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 26px;
		row-gap: 34px;
	}
	body.breakdance .bob-sb-steps5 > * {
		flex: 0 0 calc((100% - (var(--bob-cols) - 1) * 26px) / var(--bob-cols));
		min-width: 0;
	}
}
@media (max-width: 1023px) {
	body.breakdance :is(.bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid, .bob-pdp-more-grid) {
		--bob-cols: 3;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 26px;
		row-gap: 34px;
	}
	body.breakdance :is(.bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid, .bob-pdp-more-grid) > * {
		flex: 0 0 calc((100% - (var(--bob-cols) - 1) * 26px) / var(--bob-cols));
		min-width: 0;
	}
	body.breakdance :is(.bob-pkgs, .bob-pdp-more-grid) {
		--bob-cols: 2;
	}
}
@media (max-width: 899px) {
	body.breakdance :is(.bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid, .bob-pdp-more-grid) {
		--bob-cols: 2;
	}
	/* The repair pages' report card (picture beside the words) is now half width, so it stacks
	   here: picture above the words, as Breakdance's .bob-pdp-report already does below 768px.
	   Side by side at 768px the heading ran 44px past the card. */
	body.breakdance .bob-pdp-report {
		flex-flow: column;
		align-items: start;
	}
}
@media (max-width: 599px) {
	body.breakdance :is(.bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid, .bob-pdp-more-grid) {
		--bob-cols: 1;
	}
	body.breakdance :is(.bob-steps, .bob-pkgs, .bob-kpis, .bob-pdp-tier-grid, .bob-pdp-more-grid) > * {
		max-width: 480px;
	}
}

/* Step pictures (800 x 800 artwork), capped so a phone doesn't scroll past five giant squares. */
.bob-sb-step-img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin: 4px 0 14px;
	border-radius: 8px;
}

/* Site Brain Setup / Care / Boost badges (512 x 512 artwork) at the top of each plan card. */
.bob-sb-icon {
	display: block;
	width: 96px;
	height: 96px;
	margin-bottom: 10px;
}

/* Home "Websites too" band: space between the wide picture and the words. */
.bob-sb-band-img {
	margin-bottom: 22px;
}

/*
 * With "Websites" in the header menu, the desktop row (max 1160px wide at every screen size) has
 * no room for the "Your booking" text when something is booked: the menu wrapped onto two lines
 * (measured 50px tall instead of 31px at 1200 to 1536 wide). Keep the clipboard and its count,
 * drop the words. Until "Websites" is published this changes nothing for the public.
 */
.bob-hdr:has(.bob-hdr-nav a[href="/websites/"]) .bob-hdr-actions .bde-mini-cart-toggle::after {
	content: none;
}

/* Websites FAQ (0.17.5): a small picture beside the answer. The answer's own side padding moves to
   the row, so the text lines up with the question above it. */
.bob-sb-faq-row {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 0 22px 18px;
}

.bob-sb-faq-row .bob-faq-a {
	padding: 0;
}

.bob-sb-faq-img {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	border-radius: 8px;
	border: var(--bob-border);
}

/* Phones: picture above the answer, so the text keeps the full width (beside it, the text column
   was only 166px wide at 360). */
@media (max-width: 599px) {
	.bob-sb-faq-row {
		flex-direction: column;
		gap: 12px;
	}

	.bob-sb-faq-img {
		flex-basis: auto;
		width: 96px;
		height: 96px;
	}
}

/* ---------- Colour clean-up (0.18.0): yellow is for Book buttons only ---------- */
/* Section labels (.bob-kicker) are navy with cream text now; on a navy band they'd disappear, so
   there they're cream with navy text. */
.bob-show .bob-kicker {
	background-color: var(--bde-palette-paper);
	color: var(--bde-palette-dark);
}

/* The "Your booking" panel's "Confirm booking" button is a booking step, so it stays yellow
   (Breakdance's global primary button, which it uses, is navy now). */
body.breakdance .bde-mini-cart-offcanvas a.button.checkout {
	--bde-button-primary-background-color: var(--bde-palette-highlight);
	--bde-button-primary-background-color-hover: var(--bde-palette-highlight);
	--bde-button-primary-text-color: var(--bde-palette-ink);
	--bde-button-primary-text-color-hover: var(--bde-palette-ink);
	background-color: var(--bde-palette-highlight);
	color: var(--bde-palette-ink);
}