/* Adjustments for the WordPress version of the site. The original design is in rs.css. */

/* ---- Accessibility ------------------------------------------------------ */

/* Text for screen readers only (WordPress convention). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* "Skip to content": hidden until a keyboard user tabs to it. */
.skip-link:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	left: 0.5rem;
	top: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: #ffffff;
	color: #000000;
	font: bold 1rem Verdana, Arial, Helvetica, sans-serif;
	text-decoration: underline;
	outline: 2px solid #000000;
}
#content:focus {
	outline: none; /* the skip link's target; not interactive itself */
}

/* A clear focus outline for keyboard users. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid #000000;
	outline-offset: 2px;
}

/* The home page's "What's new" heading is shown as an image: keep its text for screen readers. */
div#whatsnewheader h2 {
	display: block;
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Tap targets at least 24px high (WCAG 2.2), about 44px for the phone menu. */
a.leftnav {
	display: block;
	padding: 0.375rem 0;
}
#topnav a.toplink,
#subcategorieslist li a,
#showotherprojects,
.rs-prevnext a.prevnext {
	display: inline-block;
	padding: 0.25rem 0;
}
#pagelinks a,
#pagelinks .pagelinksbck {
	display: inline-block;
	padding: 0.25rem 0.375rem;
}
ul.clients li a {
	display: inline-block;
	padding: 0.1875rem 0;
}

#footer p {
	text-align: right;
}

/* ---- Project pages ------------------------------------------------------ */

/* Previous on the left, Next at the right edge of the content area. */
.rs-prevnext {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0 0 10px;
}
.rs-prevnext .rs-next {
	margin-left: auto;
	text-align: right;
}

/* Images centred in the content area. */
#projectcontent .wp-block-image.picturepageimage {
	width: auto;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
#projectcontent .wp-block-image.picturepageimage img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
#projectcontent .wp-lightbox-container {
	align-items: center; /* the lightbox wrapper is a flex column */
}

/* Motion videos, centred. */
#projectcontent .wp-block-video {
	max-width: 100%;
	margin: 0 auto 1em;
	text-align: center;
}
#projectcontent .wp-block-video video {
	max-width: 100%;
	height: auto;
}

/* Gallery thumbnails: even 100px squares, like the original site. */
div.gallerycell a img {
	display: block;
	width: 100px;
	height: 100px;
	object-fit: cover;
}

/* ---- Layout ------------------------------------------------------------- */

/* Paragraphs keep a comfortable line length even when the column is wide. */
#content p,
#content li,
.sectionintro,
#clientdescript {
	max-width: 45rem;
}

/* Wider screens: the content column grows to 60rem instead of the original fixed 591px. */
@media (min-width: 800px) {
	#header {
		width: auto;
		max-width: 60rem;
	}
	#topnav {
		padding-top: 44px; /* room for the larger, padded top links inside the 77px header */
	}
	#leftnav {
		height: auto;
	}
	#content {
		width: calc(100% - 175px);
		max-width: 60rem;
	}
	#footer {
		box-sizing: border-box;
		width: auto;
		max-width: calc(159px + 60rem);
	}
}

/* Phones and small tablets. */
@media (max-width: 800px) {
	/* 100% width plus padding made the page 10px wider than the screen. */
	#content,
	#footer {
		box-sizing: border-box;
	}
	#leftnav a.leftnav {
		display: inline-block;
		min-height: 44px;
		line-height: 44px;
		padding: 0 0.5rem;
	}
}