/**
 * Overrides of the frozen CSS.
 *
 * This file loads after the frozen files (app.min.css, blocks.min.css and the
 * WordPress 5.1.1 block library) and after the libraries. Every new rule goes here.
 * Do not change the frozen files (see ADR 0002).
 *
 * Give each rule a comment that says why it is necessary.
 *
 * Contents:
 * 1. The cookie bar: the old plugin CSS
 * 2. The cookie bar: new rules
 * 3. The Cookie Preferences link ("Cookie settings") in the footer
 * 4. The image block: images with width and height (also the Work Row images)
 * 5. The home slider: images with width and height
 */


/**
 * 1. The cookie bar: the old plugin CSS
 *
 * The UK Cookie Consent plugin of the Old Site is gone, so its rules for the bar are
 * copied here with the same selectors, values and order: first the rules of its
 * `assets/css/style.css` (plugin version 2.3.0) that apply to the "bottom right
 * block" bar, then its inline `<style id="ctcc-css" media="screen">` (the colours
 * and the position from the plugin settings). Only the indentation is new.
 *
 * Left out, because the new bar does not use them: the rules for the top and bottom
 * bar types, the geo-IP exclusions and the close cross (`.x_close`).
 */
#catapult-cookie-bar {
	box-sizing: border-box;
	max-height: 0;
	opacity: 0;
	direction: ltr;
	padding: 0 20px;
	z-index: 99999;
	overflow: hidden;
	text-align: left;
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	transition: all 0.25s;
}

#catapult-cookie-bar.rounded-corners {
	border-radius: 3px;
}

#catapult-cookie-bar.drop-shadow {
	-webkit-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.4);
	box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.4);
}

.cookie-bar-block #catapult-cookie-bar {
	max-height: 999px;
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	transition: opacity 0.25s;
}

.has-cookie-bar #catapult-cookie-bar {
	opacity: 1;
	max-height: 999px;
	min-height: 30px;
	padding: 15px 20px 15px;
}

.cookie-bar-block #catapult-cookie-bar span {
	display: block;
	margin: 1em 0;
}

button#catapultCookie {
	cursor: pointer;
	margin: 0 20px 0 0;
}

.ctcc-right-side {
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
}

.cookie-bar-block #catapult-cookie-bar h3 {
	margin: 0.5em 0 0;
}

/* From here: the inline `#ctcc-css` styles of the plugin. */
@media screen {

	#catapult-cookie-bar {
		box-sizing: border-box;
		max-height: 0;
		opacity: 0;
		z-index: 99999;
		overflow: hidden;
		color: #323230;
		position: fixed;
		right: 20px;
		bottom: 6%;
		width: 300px;
		background-color: #fff;
	}

	#catapult-cookie-bar a {
		color: #b1b1b1;
	}

	button#catapultCookie {
		background: #b1b1b1;
		color: #fff;
		border: 0;
		padding: 6px 9px;
		border-radius: 3px;
	}

	#catapult-cookie-bar h3 {
		color: #323230;
	}

	.has-cookie-bar #catapult-cookie-bar {
		opacity: 1;
		max-height: 999px;
		min-height: 30px;
	}
}

/* The one media query of the plugin style.css. */
@media screen and (max-width: 991px) {

	.ctcc-left-side {
		margin-right: 1em;
	}
}


/**
 * 2. The cookie bar: new rules
 */

/*
 * The Reject button is new. It has the look of the Accept button
 * (`button#catapultCookie` above), so the two choices are equally easy to see.
 */
button#imp-cookie-reject {
	padding: 6px 9px;
	border: 0;
	border-radius: 3px;
	background: #b1b1b1;
	color: #fff;
	cursor: pointer;
}

/* The bar has tabindex="-1", so "Cookie settings" can move the focus to it. The bar itself needs no focus ring. */
#catapult-cookie-bar:focus {
	outline: 0;
}

/* A clear focus ring on the buttons and the link, for keyboard users. */
#catapult-cookie-bar button:focus-visible,
#catapult-cookie-bar a:focus-visible {
	outline: 2px solid #323230;
	outline-offset: 2px;
}


/**
 * 3. The Cookie Preferences link ("Cookie settings") in the footer
 *
 * It is new. It is in the last footer column, below the social icons, with the
 * alignment of the social icons and the look of the footer text links
 * (`footer .sidebar-wrapper .widget a` in app.min.css). It is a button, because it
 * opens the cookie bar and goes to no other page.
 */
footer .sidebar-wrapper .widget .imp-cookie-preferences {
	margin: 20px 0 0;
	padding-left: 30px;
	text-align: center;
}

footer .sidebar-wrapper .widget .imp-cookie-preferences__button {
	padding: 0;
	border: 0;
	background: none;
	color: #323230;
	font-family: "HK-Grotesk-Light", sans-serif;
	font-size: 14px;
	font-weight: 300;
	line-height: 20px;
	cursor: pointer;
}

/* A button has no underline on hover, so it gets one, as a sign that it does something. */
footer .sidebar-wrapper .widget .imp-cookie-preferences__button:hover {
	text-decoration: underline;
}

/* The breakpoint of the social icons in app.min.css: left aligned on small screens. */
@media screen and (max-width: 992px) {

	footer .sidebar-wrapper .widget .imp-cookie-preferences {
		padding-left: 0;
		text-align: left;
	}
}

/**
 * 4. The image block: images with width and height
 *
 * An image of a `wp-block-image` figure (for example in a Half Row of a Work) now has
 * `width` and `height` attributes (the Old Site printed none). Keep its aspect ratio when the frozen `max-width: 100%`
 * makes it smaller, as the WordPress block CSS does today.
 */
.wp-block-image img {
	height: auto;
}

/**
 * 5. The home slider: images with width and height
 *
 * The rule of section 4 has the same specificity as the slider rule of app.min.css
 * (`.wp-block-rst-slider-block img { height: 100%; object-fit: cover; }`) and loads
 * later, so it made the slider images shorter than the slide. This rule puts the
 * app.min.css height back for the slider images.
 */
.wp-block-rst-slider-block .wp-block-image img {
	height: 100%;
}