/*
 * Fixes and accessibility additions.
 *
 * The approved design's CSS lives in style.css and is not edited. Every rule
 * here fixes a bug or adds something a browser needs but the design does not
 * show. None of them change the approved look.
 */

/* Skip link: invisible until a keyboard user presses Tab, so people who cannot
   use a mouse can jump past the header straight to the page content. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--navy);
	color: var(--white);
	font-family: var(--display);
	font-weight: 700;
	font-size: .85rem;
	padding: 12px 20px;
	border-radius: 0 0 8px 0;
	text-decoration: none;
}

.skip-link:focus {
	left: 0;
}

#app:focus {
	outline: none;
}

/* The UK map behind the speaker is sized by its height, with an automatic
   width, but the design's img{max-width:100%} squashed it out of shape on a
   phone. The hero already crops whatever hangs over the edge. */
.d-hero .map {
	max-width: none;
}

/* Stops iOS inflating text when the phone is rotated to landscape. */
html {
	-webkit-text-size-adjust: 100%;
}

@media (max-width: 760px) {
	/* The booking bar's title block would not shrink, so on a 320px phone the
	   button was pushed past the right edge of the screen and clipped. */
	.bookbar > div {
		min-width: 0;
	}

	.bookbar .btn {
		flex: none;
	}

	/* Keeps the bar clear of the iPhone home indicator. env() is 0 elsewhere,
	   so the design's 12px padding is unchanged on every other device. */
	.bookbar {
		padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}
}

/* Notched iPhones held sideways put the notch over the left or right edge.
   env() is 0 on every other device, so the design's gutter is unchanged. */
@media (orientation: landscape) {
	.wrap {
		padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
		padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
	}
}

/* ---------- Client-requested changes (18 Sep) ---------- */

/* Session pages show the branded card as the header image. The design's photo
   box is 4:3 and would crop the card (cutting logos in half), so the card is
   shown at its own shape instead. */
.d-photo.is-card {
	aspect-ratio: auto;
}

.d-photo.is-card img {
	height: auto;
}

/* Links written into descriptions and FAQ answers. */
.prose a,
.faq details p a {
	color: var(--navy);
	font-weight: 600;
}

/* The design spans the last monthly tile across the tablet grid, which suits
   three tiles. With an even number it left a gap, so it only applies when
   the count is odd. */
@media (max-width: 960px) {
	.tiles.three .tile:last-child:nth-child(even) {
		grid-column: auto;
	}
}