/*!
Theme Name:		Rix 2021
Theme URI: 
Description:	A Twenty Twenty One Child Theme.
Author:			Richard Carter
Author URI:		http://richardcarter.com
Template:		twentytwentyone
Text Domain:	twentytwentyone
Version:      	1.2023-02-26--1216
*/



/* REMEMBER: Plugins can also contain some CSS. */


:root {
	/* The following parameters affect the main look of the site. */
	/* Page (area surrounding content */
	--rix-page-background: #b3b7bc;
	/* Branding */
	--site--brand--color-main: #c7392a;
	--branding--color-text: white;
	--branding--color-link: white;
		--branding--color-link-hover: whitesmoke;
		--rix--branding--link-weight: 500;
	/* Nav */
	--primary-nav--color-text: white;
	--primary-nav--color-link: white;
		--primary-nav--color-link-hover: whitesmoke;
	/* Main Content area */
	--rix-main--content-background: white;
	--rix-main--color-text: var(--global--color-primary);
	--rix-main--color-link: var(--site--brand--color-main);
		--rix-main--color-link-hover: var(--rix-main--color-link);
		--rix-main--link-weight: 500;
	/* Widgets */
	--rix-widgets--background: #404040;
	--rix-widget--color-text: #cccccc;
	--rix-widget--color-link: white;
		--rix-widget--color-link-hover: whitesmoke;
		--rix-widget--link-weight: 500;
	--widget--line-height-list: 1.7em;
	--latest-posts--title-font-size: var(--latest-posts--description-font-size);
	/* Footer/colophon */
	--rix-colophon--background: #222;
		--footer--color-text: white;
		--footer--color-link: white;
			--footer--color-link-hover: white;
			--rix-footer--link-weight: 500;
	/* Nav sub-menus */
	--rix-submenu--color-background: var(--site--brand--color-main);
	--rix-submenu--color-border: #fff;
	/* Forms/buttons */
	--button--color-text: var(--primary-nav--color-text);
	--button--color-text-hover: var(--primary-nav--color-text);
	--button--color-text-active: var(--primary-nav--color-text);
	--button--color-background: var(--site--brand--color-main);
	--button--color-background-active: #CC5500;
	/* Headings */
	--heading--font-weight: 500;
}


/* ========== */

:root {
	/* Force some changes on existing variables */
	--global--color-background: var(--site--brand--color-main);
}


/* New containers added to allow more control of individual page sections */
:root {
	--rix-content--width: min(1200px, 100vw);
	--rix-content--padding-horizontal: var(--responsive--spacing-horizontal);
	--rix-content--padding-vertical: var(--rix-content--padding-horizontal);
}
@media only screen and (max-width: 481px) { /* Small screens */
	:root {
		--rix-content--padding-horizontal: .5em;
	}
}
#pre-banner-widget-area,
#pre-content-widget-area,
.rix-template-section {
	width: 100%;
	max-width: 100%;
	padding: var(--rix-content--padding-vertical) var(--rix-content--padding-horizontal);
	margin: 0;
}
@media only screen and (min-width: 482px) {
	#pre-banner-widget-area,
	#pre-content-widget-area,
	.rix-template-section {
		max-width: var(--rix-content--width);
		margin-left: auto;
		margin-right: auto;
	}
}
/* Set page background colour (overrides customiser) */
#page {
	background-color: var(--rix-page-background);
}
#pre-banner-widget-area,
#pre-content-widget-area {
	background-color: var(--rix-main--content-background);
	padding: 0;
}
#pre-banner-widget-area section,
#pre-content-widget-area section {
	padding: 0;
}
#rix-template-section-header {
	background-color: var(--site--brand--color-main);
}
#rix-template-section-content {
	background-color: var(--rix-main--content-background);
}
#rix-template-section-widget-area {
	background-color: var(--rix-widgets--background);
}
.widget-area {
	max-width: 100%;
	margin-top: 0;
	padding: 0;
	color: var(--rix-widget--color-text);
}
.widget {
	padding: calc(.5 * var(--global--spacing-vertical)) 0;
}
.widget-area a,
.widget-area a:hover,
.widget-area a:link,
.widget-area a:visited,
.widget-area a:active {
	color: var(--rix-widget--color-link);
}
/* White border for images in widget area */
#rix-template-section-widget-area img {
	border: 1px solid white;
}
/* RSS widget */
.wp-block-rss > li > * {
	margin-bottom: 0;
}
.wp-block-rss .wp-block-rss__item-excerpt, .wp-block-rss .wp-block-rss__item-full-content {
	line-height: var(--global--line-height-body);
	margin-top: 0;
}
.wp-block-rss:not(.is-grid) > li {
	margin-top: calc(.666 * var(--global--spacing-vertical));
	margin-bottom: calc(.666 * var(--global--spacing-vertical));
}

#rix-template-section-colophon {
	background-color: var(--rix-colophon--background);
	color: white;
	padding-top: 0;
}
#colophon {
	margin: 0 calc(-1 * var(--rix-content--padding-horizontal));
	padding: 0;
	max-width: calc(100% + 2 * var(--rix-content--padding-horizontal));
}
.footer-navigation,
.site-info {
	padding-left: var(--rix-content--padding-horizontal);
	padding-right: var(--rix-content--padding-horizontal);
}
.footer-navigation {
	margin: var(--global--spacing-vertical) 0;
}
.site-info {
		margin: 0;
}
.site-branding {
	margin-right: 1em; /* Stop menu getting too close to branding */
}

:root {
	--primary-nav--color-link-hover: var(--primary-nav--color-link);
}

/* == Tweak the site header area == */
@media only screen and (max-width: 821px) {
	.site-header > .site-logo {
		display: block;
		width: max-content;
	}
	.site-branding {
		padding: 1em 0;
		display: block;
		margin: 0;
		clear: both;
	}
	.site-description {
		display: block;
		width: calc(100vw - 2 * var(--rix-content--padding-horizontal)); /* Fix for Safari bug on iPhone */
	}
	.primary-navigation {
		display: block;
		clear: both;
	}
}
.site-header {
	padding: 0;
	margin: 0;
	display: initial;
	justify-content: center;
}
.site-header > .site-logo {
	border-bottom: 0;
	margin: 0 auto;
	padding: 0;
}
@media only screen and (min-width: 822px) {
	.site-header > .site-logo {
		margin: 0;
		order: 99;
	}
	#masthead {
		width: 100%;
		max-width: 100%;
	}
	.site-header {
		display: flex;
		justify-content: flex-start;
		padding: var(--global--spacing-vertical) var(--responsive--spacing-horizontal);
		margin-left: auto;
		margin-right: auto;
	}
	.site-header > .site-logo {
		width: unset;
		order: 0;
		padding: 0;
		margin: 0;
		margin-right: max(var(--responsive--spacing-horizontal), var(--rix-content--padding-horizontal));
	}
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
	padding-top: 0; /* Nasty colour bleed otherwise */
}

/* Move menu to top on small screens with logos */
@media only screen and (max-width: 481px) {
	body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation {
		position: absolute;
		right: calc(.75 * var(--global--spacing-unit)); /* xxx Kludge */
		top: calc(var(--global--admin-bar--height) + .85 * var(--global--spacing-vertical)); /* xxx Kludge */
	}	 
}

/* On homepage, make content abut footer (without gap) */
.home .site-main,
.home #rix-template-section-content {
	padding-bottom: 0;
}

/* == Make main text a bit wider == */
@media only screen and (min-width: 822px) {
	:root {
		--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1000px);
	}
}

/* == Set alignfull and alignwide widths == */
.alignfull,
.full-max-width {
	margin-left: calc(-1 * var(--rix-content--padding-horizontal));
	margin-right: calc(-1 * var(--rix-content--padding-horizontal));
	width: var(--rix-content--width);
	max-width: var(--rix-content--width);
}
.alignwide {
	max-width: calc((min(100vw, var(--rix-content--width)) + var(--responsive--aligndefault-width)) / 2);
}

.rix-standfirst {
	color: var(--global--color-gray);
	font-weight: 500;
	font-size: var(--global--font-size-lg);
	font-style: italic;
	line-height: var(--global--line-height-heading);
}

/* Images on Review archive pages */
@media only screen and (min-width: 482px) and (max-width: 821px) {
	body.post-type-archive-review:not(.singular) figure.post-thumbnail {
		float:right;
		max-width: 50%;
		margin-top: 0;
		margin-left: var(--responsive--spacing-horizontal);
	}
	body.post-type-archive-review:not(.singular) .entry-content {
		margin-top: calc(2 * var(--global--spacing-vertical));
	}
}
/* Leave wider margin between archive entries on small screens */
@media only screen and (max-width: 481px) { /* Small screens */
	body.post-type-archive-review:not(.singular) article {
		margin-bottom: calc(5 * var(--global--spacing-vertical));
	}
}




/* ====================
   Fix stuff I don't like re parent theme's formatting:
   Note: Some of these will require corresponding changes to the block editor style sheets.
   ====================	*/

/* Fix weird button colour defaults */

.has-background .site .button:not(:hover):not(:active):not(.has-background),
.has-background button:not(:hover):not(:active):not(.has-background),
.has-background input[type=submit]:not(:hover):not(:active):not(.has-background),
.has-background input[type=reset]:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.has-background .wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
	background-color: var(--button--color-background);
	color: var(--button--color-text);
}
.site .button:not(:hover):not(:active):not(.has-background),
button:not(:hover):not(:active):not(.has-background),
input[type=submit]:not(:hover):not(:active):not(.has-background),
input[type=reset]:not(:hover):not(:active):not(.has-background),
.wp-block-search .wp-block-search__button:not(:hover):not(:active):not(.has-background),
.wp-block-button .wp-block-button__link:not(:hover):not(:active):not(.has-background),
.wp-block-file a.wp-block-file__button:not(:hover):not(:active):not(.has-background) {
	background-color: var(--button--color-background);
	color: var(--button--color-text);
}
.site .button:hover,
.site .button:active,
button:hover,
button:active,
input[type=submit]:hover,
input[type=submit]:active,
input[type=reset]:hover,
input[type=reset]:active,
.wp-block-search .wp-block-search__button:hover,
.wp-block-search .wp-block-search__button:active,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:active,
.wp-block-file a.wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:active {
	background-color: transparent;
	border-color: var(--button--color-background-active);
	border-style: solid;
	color: inherit;
}

/* Disable ghastly +/- on dropdown menus */
.sub-menu-toggle {
	display:none !important;
}

/* Fix bottom margin in centred, non-captioned images. */
.wp-block-image .aligncenter {
	margin-bottom: var(--global--spacing-vertical);
}
.wp-block-image .aligncenter figcaption {
	margin-bottom: 0;
}

/* Ensure tops of left- and right-aligned images are level with top of text */
.wp-block-image .alignright,
.wp-block-image .alignleft {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical);
}


/* The really big font sizes are too big, so shrink them a bit. */
:root {
	--global--font-size-xl: 2rem;
	--global--font-size-xxl: 3rem;
	--global--font-size-xxxl: 4rem;
	--entry-header--font-size: var(--global--font-size-xl);
}

.site-title,
.site-title a {
	font-weight: 600;
	letter-spacing: .15em;
	margin-bottom: 0;
}

/* Slightly bolder text on page titles */
:root {
	--heading--font-weight-page-title: 400;
}
/* Smaller text size in archive descriptions */
.archive-description p {
	font-size: var(--global--font-size-lg);
}
/* Smaller page titles on small devices */
@media only screen and (max-width: 481px) {
	:root {
		--global--font-size-page-title: var(--global--font-size-xl);
	}
}

/* Don't allow left- or right-aligned images on very small screens */
@media only screen and (max-width: 481px) {
	.entry-content > .wp-block-image > .alignleft,
	.entry-content > .wp-block-image > .alignright {
		width: 100%;
	}
	.entry-content > .wp-block-image > .alignleft img,
	.entry-content > .wp-block-image > .alignright img {
		margin: 0 auto;
	}
}

/* Pull-quotes */
.wp-block-pullquote blockquote::before {
	content: "";
}
.wp-block-pullquote blockquote {
	margin-left: 0;
}
/* Block quotes */
:root {
	--quote--font-weight: normal;
}
blockquote::before,
.wp-block-quote::before {
	content: "";
}
blockquote,
.wp-block-quote {
	border-left: 10px solid var(--global--color-border);
}
.wp-block-quote {
	margin-top: calc(1.5 * var(--global--spacing-vertical));
	margin-bottom: calc(1.5 * var(--global--spacing-vertical));
}
blockquote { /* For old posts */
	padding-left: 1em;
}

/* == WIDGETS == */
h2.widget-title {
  text-transform: uppercase;
}
/* Limit widget area to 2 columns (parent has 3 for wide screens) */
@media only screen and (min-width: 1024px) {
	.widget-area {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		column-gap: calc(2 * var(--global--spacing-horizontal));
	}
}
/* Disable links in titles of RSS widget as they often don't link to where I want. */
h2.widget-title a.rsswidget {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: var(--rix-widget--color-text);
  font-weight: 600;
}
/* Space items more nicely */
section.widget_rss ul li {
	margin-top: .75em;
}
/* Fix colour of search submit button in blocks and widget area */
.wp-block-search button.wp-block-search__button,
.widget_search > .search-form .search-submit {
	color: var(--button--color-text);
	background-color: var(--button--color-background);
}
.wp-block-search button.wp-block-search__button:hover,
.widget_search > .search-form .search-submit:hover {
	color: var(--button--color-text-hover);
	background-color: var(--button--color-background-active);
}
.site .button:hover,
input[type=submit]:hover,
input[type=reset]:hover,
.wp-block-search .wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover {
	color: var(--button--color-text-hover);
	background: var(--button--color-background-active);
}
/* Search widget doesn't allow us to turn off label, so hide it */
.widget_search > .search-form > label {
	display: none !important;
	visibility: hidden !important;
}
/* Stop search block appearing rounded on iOS devices on Safari */
input[type="search"] {
	border-radius: 0;
	-webkit-appearance: none !important;
}


/*
===============
Author bio area
===============
*/
/* More width on small screens */
@media only screen and (max-width: 481px) { /* Small screens */
	.author-bio.show-avatars .author-bio-content {
		display: inline;
	}
}
/* Hide links to all of author's posts. */
div.author-bio-content a.author-link {
	display: none;
	visibility: hidden;
}
/* Place any a's with href=links on a new line (kludge) */
div.author-bio-content .author-description a[href='links'] {
	display: block;
}

/* LINKS */
/* == Sort out underlining for links == */
#rix-template-section-header a,
#rix-template-section-content a,
.widget-area a,
#rix-template-section-colophon a {
	text-decoration: none !important;
}
#rix-template-section-header a:hover,
#rix-template-section-content a:hover,
.widget-area a: hover,
#rix-template-section-colophon a:hover {
	text-decoration: underline !important;
	background-color: transparent;
}
/* Link colours and weights */
#rix-template-section-header a {
	color: var(--branding--color-link);
	font-weight: var(--rix--branding--link-weight);
}
#rix-template-section-header a:hover {
	color: var(--branding--color-link-hover);
	background-color: transparent;
}
#rix-template-section-content a {
	color: var(--rix-main--color-link);
	font-weight: var(--rix-main--link-weight);
	background-color: transparent;
}
#rix-template-section-content a:hover {
	color: var(--rix-main--color-link-hover);
	background-color: transparent;
}
.widget-area a {
	color: var(--rix-widget--color-link);
	font-weight: var(--rix-widget--link-weight);
}
.widget-area a:hover {
	color: var(--rix-widget--color-link-hover);
	background-color: transparent;
}
#rix-template-section-colophon a {
	color: var(--footer--color-link);
	font-weight: var(--rix-footer--link-weight);
}
#rix-template-section-colophon a:hover {
	color: var(--footer--color-link-hover);
	background-color: transparent;
}


/* BLOCK EMBEDS */
.wp-block-embed-twitter {
	width: 520px; /* Twitter's embedded widget is fixed width */
}


:root {
	--global--color-border: var(--site--brand--color-main);
	--global--color-secondary: var(--site--brand--color-main);
	--button--color-background: var(--site--brand--color-main);
	--global--color-primary-hover: var(--site--brand--color-main);
}


/* Sub-menus */
.primary-navigation > div > .menu-wrapper > li > .sub-menu li {
		background: var(--rix-submenu--color-background);
	}
.primary-navigation .sub-menu {
	border: 2px solid var(--rix-submenu--color-border);;
}
.primary-navigation > div > .menu-wrapper > li > .sub-menu:before,
	.primary-navigation > div > .menu-wrapper > li > .sub-menu:after {
		border-color: var(--rix-submenu--color-border) transparent;
		border-width: 0 7px 10px 7px;
		top: -10px;
}

/* IMAGES */
/* == Wider gap above/below inline images == */
#content p > img,
#content p > figure {
	margin-top: calc(0.25 * var(--global--spacing-vertical));
	margin-bottom: calc(0.25 * var(--global--spacing-vertical));
}

/* LISTS */
/* == Wider gap between list items == */
#content ul li:not(:last-child),
#content ol li:not(:last-child) {
    margin-bottom: .5em;
}



/* Remove sub-menu borders on small screens (i.e. in hamburger menu) */
/* NOTE: For some reason this doesn't work in the theme CSS file, but works fine in Customise/Additional CSS. */
@media only screen and (max-width: 481px) {
	:root {
		--rix-submenu--color-border: var(--site--brand--color-main);
	}
}

/* == Tables == */
/* Change default border width and colour */
table td,
table th,
.wp-block-table td,
.wp-block-table th {
	border: 2px solid var(--global--color-border);
}

/* Insert gap below author image */
.author-bio.show-avatars .avatar {
	margin-bottom: 1em;
}

/*
===================
SEPARATORS/DIVIDERS
===================
/* == Default separator == */
#content article hr.wp-block-separator {
	max-width: 10%;
	border-bottom-width: 3px;
}
/* == Dividers using special characters == */
hr.wp-block-separator.star,
hr.wp-block-separator.asterisk,
hr.wp-block-separator.flower,
hr.wp-block-separator.snow,
hr.wp-block-separator.hellip {
	height: var(--global--spacing-vertical);
	border: 0;
	opacity: 70%;
	text-align: center;
	color: var(--global--color-border);
}
hr.wp-block-separator.star:before {
	content: "\2605";
}
hr.wp-block-separator.asterisk:before {
	content: "\273D";
}
hr.wp-block-separator.flower:before {
	content: "\2740";
}
hr.wp-block-separator.snow:before {
	content: "\2744";
}
hr.wp-block-separator.hellip:before {
	content: "\2022 \2022 \2022";
}


/*
=========================================================
Put border round Review image thumbnails on archive pages
=========================================================
*/
body.post-type-archive-review figure.post-thumbnail img {
	border: 1px solid #eee;
	/* Note image's width is constrained by rc-summary-thumbnail container */
}
/* …and around non-caption images on Review single item pages (usually book images) */
body.single-review .entry-content figure > img,
body.single-review .entry-content figure > a img,
body.single-review .entry-content figure > a:hover img {
	border: 1px solid #eee !important;
}








/*
==========
rix-Flickr
==========
*/
#rixFlickr {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.rixFlickr-img-container {
	box-sizing: border-box;
	display: block;
	max-width: calc(33% - 6px);
	margin: 3px;
}

/* For portrait images of known aspect ratio (i.e. < 100), restrict height by multiplying default width by aspect ratio (It's a kludge.) */
/* NOTE: See further below for small device equivalents. */
#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-67 { /* Canon 5d Mk II */
	max-width: calc((33% - 6px) * 0.67);
}
#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-75 { /* iPhone 8 */
	max-width: calc((33% - 6px) * 0.75);
}
/* …And assume any square images should be same height as 0.67 images. (It's a kludge.) And automate horizontal margins so they centre nicely. */
#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-100 {
	max-width: calc((33% - 6px) * 0.67);
	margin: auto;
}
	
#rixFlickr img {
	box-sizing: border-box;
	display: block;
	border: 1px solid white;
}
@media screen and (max-width: 481px) { /* Small devices */
	#rixFlickr .rixFlickr-img-container {
		max-width: calc(50% - 6px);
		margin: 3px;
	}
	#rixFlickr div.rixFlickr-img-container:last-child {
	/* As we're showing 2 columns instead of 3, don't display the final (9th) image, which would be on a row of its own */
		display: none;
		visibility: hidden;
	}
	/* For portrait images of known aspect ratio (i.e. < 1), restrict height by multiplying default width by aspect ratio (It's a kludge.) */
	#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-67 { /* Canon 5d Mk II */
		max-width: calc((50% - 6px) * 0.67);
	}
	#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-75 { /* iPhone 8 */
		max-width: calc((50% - 6px) * 0.75);
	}
	/* …And assume any square images are cropped 0.67 ratio images (It's a kludge.) */
	#rixFlickr .rixFlickr-img-container.rixFlickr-img-container-aspect-100 {
		max-width: calc((50% - 6px) * 0.67);
	}
}


/*
==============
RECENT READING
Images
==============
Note: For some reason, using a class of recentReading
rather than an id didn't work for iPhones.
*/
#recentReading,
.book-covers {
	display: inline;
	text-align: center;
}
#recentReading ul,
.book-covers ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#recentReading li,
.book-covers li {
	display: inline;
	margin: 0;
	padding: 0;
}
#recentReading img,
.book-covers img {
	display: inline;
	max-width: 21%;
	height: auto;
	margin: 0 1% 2% 1%;
}


/*
==================
BOOKS LISTS IMAGES
==================
*/
.books-index img {
	margin: 0 1em 2em 0;
	border: 1px solid black;
	float: left;
	max-height: 140px;
	width: auto;
}

.books-index p.book-desc {
	clear: left;
}

.bookshop {
	clear: both;
	padding: 1.5rem 1rem;
	margin-top: var(--rix-content--padding-vertical);
	margin-bottom: var(--rix-content--padding-vertical);
	background-color: #f3f3f3;
}
.bookshop-container {
	display: flex;
	justify-content: flex-start;
}
.bookshop-button-widget { /* Hide */
	width: 0;
	height: 0;
	overflow: hidden;
	margin: 0;
}
.bookshop-text {
	margin-left: 1rem;
}
.bookshop-disclosure {
	margin-top: 1.5rem;
}

@media screen and (max-width: 481px) { /* Small screens */
	.bookshop-container {
		display: block;
		text-align: center;
	}
	.bookshop-text {
		margin-left: 0;
		text-align: left;
	}
	.bookshop-book-widget { /* Hide */
		width: 0;
		height: 0;
		overflow: hidden;
		margin: 0;
	}
	.bookshop-button-widget { /* Un-hide */
		width: auto;
		height: auto;
		overflow: hidden;
		text-align: center;
		margin-bottom: 1.5rem;
	}
}

ul.rlcamazon {
	clear: both;
	padding: 1em;
	margin-left: 0;
	background-color: #f3f3f3;
}
ul.rlcamazon li {
	margin-left: 1em;
}




/*
===================
REVIEWS GENRES MENU
===================
*/
.reviews-menu {
	background-color: #fafafa;
	padding: .25em 1em;
	margin-top: calc(-2 * var(--global--spacing-vertical));
}
.reviews-menu ul,
.reviews-menu ul li {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.reviews-menu ul li:not(:last-child)::after {
	content: " · ";
}
.reviews-menu ul li:first-child::before {
	content: "Filter reviews: ";
	font-weight: 400;
}
ul#menu-review-genres li {
	display: inline;
}
ul#menu-review-genres p.menu-item-description {
	display: none;
}



/*
============================
Newsletter subscription form
============================
*/
/* Note: The HTML for the subscription form contains inline CSS.
   This is a kludge to force the CSS to be recognised by iPads. */
#tlemail {
	min-width: 50%;
	max-width: 80%;
	margin: 0;
}
@media only screen and (max-width: 481px) { /* Small screens */
	#tlemail {
		min-width: 90%;
		margin-bottom: .5em;
	}
}
button.newsletter-subscribe {
	color:				var(--button--color-text);
	background-color:	var(--button--color-background);
	border: 			var(--form--border-width) solid var(--form--border-color);
	padding: 			var(--form--spacing-unit);
	line-height:		var(--global--line-height-body);
	font-weight:		var(--button--font-weight);
	border-left:		0;
	margin: 0;
}
button.newsletter-subscribe:hover,
.widget_search > .search-form .search-submit:hover {
	color: var(--button--color-text-hover);
	background-color: var(--button--color-background-active);
}
.rix-newsletter-subscription-form {
	max-width: 600px !important;
	margin: 0 auto calc(var(--rix-content--padding-vertical) * .5) auto !important;
}
.newsletter-subscribe-intro {
	text-align: center;
	margin-bottom: calc(var(--rix-content--padding-vertical) * .5);
}

/*
===========
NEWSLETTERS
===========
*/
/* == Newsletter OLD 'Recent Reading' tables == */
.newsletter-recent-reading table {
	overflow: hidden;
	padding: 0;
	margin: 0;
	max-width: 100%;
}
.newsletter-recent-reading td {
	border: 0;
	vertical-align: top;
}
.newsletter-recent-reading td img {
	min-width: min(200px,20vw);
	border: 1px solid #eee;
}
/* == Newsletter NEW '.books' tables == */
.newsletter figure.books table td,
.newsletter figure.books table th {
	border-width: 0px;
}
.newsletter figure.books img {
	border: 1px solid #eee;
}


/* == Wider gap between list items for newsletters == */
#content article.newsletter ul li:not(:last-child),
#content article.newsletter ol li:not(:last-child) {
    margin-bottom: 1em;
}
/* …and nicer padding with numbered lists */
#content article.newsletter ol li {
    padding-left: 1em;
}

/* Newsletter block separators */
#content article.newsletter hr.wp-block-separator {
	max-width: 10%;
	border-bottom-width: 3px;
}

/*
=========================================
[displayrixtags] shortcode search results
=========================================
*/
.rixtaglist img.rixtag-thumbnail {
	float: right;
	border: 1px solid #CCC;
	padding: 0;
	margin: 0 0 0 1em;
	max-height: 7em;
	max-width: 50%;
}
.rixtag a {
	font-weight: bold;
}
.entry-content .rixtag {
	border: 1px solid #CCC;
	border-radius: 5px;
	padding: 1em;
	margin: 2em auto;
}




/* 
========================================================================
General additional styles to be used in blocks' Additional CSS class(es)
========================================================================
*/
.rix-noborder,
.noborder {
	border-width: 0px !important;
}
.rix-maxwidth-500px {
	max-width: 500px;
}
.rix-maxwidth-50pc {
	max-width: 50%;
}



/*
=========================
[rix-show-menu] shortcode
=========================
*/
.rix-shortcode-menu button {
	display: none; /* Turn off parent theme's added +/- buttons' */
}
.rix-shortcode-menu {
	margin-top: calc(2 * var(--global--spacing-vertical));
}
.rix-shortcode-menu ul.sub-menu {
    margin-top: .5em;
}
.rix-shortcode-menu>ul  {
	list-style-type: none;
	padding: 0;
}
.rix-shortcode-menu>ul>li {
	background-color: #f9f9f9;
	padding: var(--global--spacing-vertical);
	margin-bottom: calc(2 *var(--global--spacing-vertical)) !important;
}
/* Save some space on small screens */
@media only screen and (max-width: 481px) {
	.rix-shortcode-menu>ul>li {
		padding: 0;
		background-color: inherit;
	}
	.rix-shortcode-menu ul.sub-menu {
		padding: 1em;
		margin: 0 1em !important;
	}
}

/*
======================
[rix-flickr] shortcode
======================
*/
.rix-flickr-link-block-inline {
	padding: .2em .5em;
	border-radius: 10px;
	background-color: var(--site--brand--color-main);
}
.rix-flickr-link-block-inline a,
.rix-flickr-link-block-inline a:hover {
	color: var(--branding--color-text) !important;
	cursor: pointer;
}


/*
=======================
[rix-otmplug shortcode]
=======================
*/
.otm-plug {
	padding: var(--global--spacing-vertical) 0;
	max-width: 100%;
	width: 100%;
}
.widget-area .otm-plug { /* Widget area */
	border: 1px solid #ccc;
	border-radius: .25em;
}
.otm-plug-title {
	font-weight: bold;
	margin-bottom: 1em;
}
.otm-plug-book-title {
	font-weight: bold;
	margin-bottom: .25em;
}
.otm-plug-book-title a {
	font-weight: bold;
}
.entry-content img.otm-plug-image,
img.otm-plug-image {
	max-width: 25%;
	float: right;
	margin: 0 0 0 1em;
}
@media only screen and (max-width: 481px) { /* Small screens */
	.entry-content img.otm-plug-image,
	img.otm-plug-image {
		max-width: 100%;
		float: none;
		margin: 0 auto 1em auto;
	}
}
.otm-plug-footer {
	margin: 1.5em 0 0 0;
}
.otm-plug-body {
	font-style: italic;
}
.otm-plug-cite,
.otm-plug-cite a {
	font-style: normal;
}
.otm-plug-more-reviews {
	font-style: normal;
}


/*
=============================
[rix-author-extras] shortcode
=============================
*/
.rix-author-extras {
	max-width: 100%;
	width: 100%;
}


/*
===================
Used on some blocks
===================
*/
.newsletter-subscribe-group,
.max-width-600px {
	max-width: 600px !important;
}

/*
==============================
Display Posts shortcode plugin
==============================
*/
.display-posts-listing-widgetarea {
		padding-top: var(--global--spacing-vertical);
}
/* Grid style */
.display-posts-listing.grid {
	display: grid;
	grid-gap: 2em 1em;
}

.display-posts-listing.grid .title {
	display: block;
	margin-top: .5em;
}

.display-posts-listing.grid img { 
	display: block; 
	max-width: 100%; 
	height: auto !important;
	margin: 0 auto;
}

@media (min-width: 482px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media (min-width: 822px) {
	.display-posts-listing.grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* Display Posts widget*/
/* Grid style, widget area */
.display-posts-listing-widgetarea.grid {
	display: grid;
	grid-gap: 2em 1em;
}
.display-posts-listing-widgetarea .title {
	display: block;
	margin-top: .75em;
	margin-bottom: .25em;
}
.display-posts-listing-widgetarea img { 
	display: block; 
	max-width: 100%; 
	height: auto !important;
	margin: 0 auto;
}
.display-posts-listing-widgetarea .excerpt { 
	display: block;
}

@media (min-width: 482px) {
	.display-posts-listing-widgetarea.grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* Social media menu icons (parent theme = 24px) */
.footer-navigation-wrapper li .svg-icon {
	width:  40px;
	height: 40px;
	margin: 20px 0;
}

/* Footer */
.site-footer > .site-info .site-name {
  text-transform: var(--branding--title--text-transform);
  font-size: calc( var(--branding--title--font-size) * 0.75);
}

/* Webmentions */
#webmention-form > p {
  margin-bottom: var(--global--spacing-unit);
}

/* Hide stuff */
.hidden {
	display: none;
	visibility: hidden;
}