/*
======================
FOCD-SPECIFIC STYLING
======================
*/

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


:root {
	/* Branding */
	--site--brand--color-main: #575D2E; /* Formerly: #6b723a; */
	--branding--color-text: white;
	--branding--color-link: white;
		--branding--color-link-hover: whitesmoke;
		--rix--branding--link-weight: 500;
	--branding--title--text-transform: initial;
	--branding--title--font-size: var(--global--font-size-xl);
	/* 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: #565e1e;
		--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;
	/* 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: #222;
}

/* Make header/branding area more compact */
#rix-template-section-header  {
	padding-top: 0;
	padding-bottom: 0;
}
.site-header {
	padding-top: 1em;
	padding-bottom: 1em;
	row-gap: 0px;
	align-items: baseline;
}
.menu-button-container {
	padding: .5em 0;
}


.site-title,
.site-title a {
	font-weight: 600;
	letter-spacing: .05em;
}
.site-description {
	font-style: italic;
}

/* Reduce top padding of main content on home page */
.home .site-main {
	padding-top: 0;
}

/*************
/docs/ section
**************/
.focd-doc {
	max-width: var(--responsive--aligndefault-width);
	margin-left: auto;
	margin-right: auto;
}
.focd-doc blockquote {
	margin: 1.5em 0 1.5em 1em;
}
.focd-doc p {
	margin: 0 0 1em 0;
}
.focd-doc h1,
.focd-doc h2,
.focd-doc h3,
.focd-doc h4,
.focd-doc h5,
.focd-doc h6,
.focd-doc ul,
.focd-doc ol,
.focd-doc img,
.focd-doc figure {
	margin: 1em 0;
}
.focd-doc h1 {
	font-size: 150%;
	margin-top: 0;
}
.focd-doc h2 {
	font-size: 125%;
}
.focd-doc h3,
.focd-doc h4,
.focd-doc h5,
.focd-doc h6 {
	font-size: 110%;
}


/* == NICER ARCHIVE PAGES == */
/* On tablets and large screens, display side-by side posts on archive pages. */
@media only screen and (min-width: 822px) {  /* Medium/large screens */
	.rix-archive-posts article {
		width: 45%;
	}
	.rix-archive-posts article .entry-title {
		font-size: calc(0.8 * var(--entry-header--font-size));
	}
	:root {
		--rix-archive-thumbnail-height: calc( 0.285 * var(--rix-content--width));
	}
}
@media only screen and (min-width: 1024px) {  /* Large screens */
	.rix-archive-posts article {
		width: 30%;
	}
	.rix-archive-posts article .entry-title {
		font-size: calc(0.7 * var(--entry-header--font-size));
	}
	:root {
		--rix-archive-thumbnail-height: calc(  0.19 * var(--rix-content--width));
	}
}
@media only screen and (min-width: 822px) { /* Medium/large */
	.rix-archive-posts {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-items: top;
		row-gap: calc( 2 * var(--global--spacing-vertical));
	}
	.rix-archive-posts article.review img {
		max-height: 350px;
		width: auto !important;
	}
	.rix-archive-posts article .post-taxonomies {
		display: none;
		visibility: hidden;
	}
	.rix-archive-posts article .entry-content {
		margin: 0.5em 0 0 0;
	}
	.rix-archive-posts article .entry-footer {
		margin-top: calc( 0.5 * var(--global--spacing-vertical) );
	}
}

/* Ensure that (on non-small archive screens) all thumbnail images are the same height (so they line up when displayed side-by-side). */
@media only screen and (min-width: 822px) { /* Medium/Large screens */
	.rix-archive-posts article.has-post-thumbnail header.entry-header figure.post-thumbnail {
		height: var(--rix-archive-thumbnail-height);
		display: flex; /* This centres the image vertically. */
		padding: 0;
		margin: 0;
	}
	.rix-archive-posts article.has-post-thumbnail header.entry-header figure.post-thumbnail figcaption {
		/* Hide image captions */
		display: none;
		visibility: hidden;
	}
	.rix-archive-posts article.has-post-thumbnail header.entry-header img:not(.wp-smiley, .emoji) {
		max-height: var(--rix-archive-thumbnail-height);
		height: var(--rix-archive-thumbnail-height) !important;
		width: auto;
		margin: 0;
		padding: 0;
		object-fit: cover; /* Trim image edges if necessary */
		object-position: 50% 50%; 
	}
}

/* Nicer gaps in header are on non-small screens… */
@media only screen and (min-width: 822px) {  /* Medium/large screens */
	.primary-navigation {
		margin-top: var(--global--spacing-vertical);
	}
	.site-branding {
		margin-top: var(--global--spacing-vertical)
	}
}

/* Join form */
form.FOCDJoinForm {
	margin: var(--global--spacing-vertical) 0;
}