/*
Theme Name: Behest Fiction Editing Theme
Author: Steve Belleguelle - Behest Software
Author URI: https://www.behestsoftware.co.uk
Version: 1.0.250515
*/


/**************************************
General page elements
Using max-width: 768px for mobile breakpoint
**************************************/

:root {
	--html-background-colour: rgb(110, 110, 110);

	--background-colour: white;
	--text-colour: rgb(64, 64, 64);

	--banner-background-colour: #E4E4E8;

	--menu-text-colour:rgb(119, 180, 199);
	--menu-text-hover-colour:rgb(155, 238, 244);
	--menu-text-current-colour:rgb(104, 141, 158);
	--sub-menu-border-colour: black;

	--post-lists-top-border: 3px groove lightgray;


	--link-colour:rgb(119, 180, 199);
	--link-hover-colour:rgb(155, 238, 244);
	--link-visited-colour:rgb(104, 141, 158);

	--heading-colour:rgb(119, 180, 199);

	--select-color: rgb(210, 240, 255);
	--select-color-hover: rgb(180, 200, 240);

	--sub-menu-border-colour: black;
	--comments-background-even: aliceblue;
	--comments-background-odd: white;

}

@font-face {
	font-family: 'Imperial Script';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url(assets/fonts/imperial-script.woff2) format('woff2');
}
  

html {
	background: var(--html-background-colour);
    background-size: 100% 100%;
	font-family: Verdana, sans-serif;
}

body {
	margin-top: 20px;
	font-size: 1.1em;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	color: var(--text-colour);
	background: var(--background-colour);
	border-radius: 10px;
	line-height: 1.3;
}
@media only screen and (max-width: 1000px) {
	body {
		margin:0;
		width: 100%;
		max-width: 100%;
		border-radius: 0;
	}
}

.content, div.search-form, 
.post-navigation, .post-edit-link,
.search-query {
	padding: 0 5%;
}

div.search-form {
	margin: 1em 0;
}

.subscribe-to-posts {
	padding-top: 0.5em;
}

a {
	color: var(--link-colour);
}

a:hover {
	color: var(--link-hover-colour);
}

a:visited {
	color: var(--link-visited-colour);
}

p {
	margin-top: 0;
}

#page-home {
	text-align: center;
	font-style: normal;
	font-family: 'Imperial Script', "Brush Script MT", cursive;
	font-size: 3rem;
	color: var(--heading-colour);
	transform:scale(1.3,1);
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* Smaller h1 on multiple post pages */
.multiple h1 {
	font-size: 1.5em;
	margin-bottom: 0;
	font-style: italic;
}

h2 {
	margin: 2em 0 0 0;
}

h3 {
	margin-bottom: 0;
}

.hr-block {
	display:block;
	width: 90%;
	border: none;
	background-color: var(--html-background-colour);
	height: 1px;
}

.content div {
	margin-bottom: 0.8em;
}

ul {
	margin:0;
	line-height: 1.6;
}

li {
	margin-bottom: 1em;
}

p.indented-list {
	margin-left: 1.2em;
}

.author-comment {
	padding-left: 2em;
	font-style: italic;
}


.rounded-5px, .rounded-5px * {
	border-radius: 5px;
}

.max-width-50pc figure {
	max-width: 50%;
}

.alignright {
    float: right;
    margin: .5em 0 .5em 1em;
}

/**************************************
Menu area
**************************************/

.primary-menu {
	font-weight:bold;
	font-size: 1.3em;
	padding: 1% 5% 0%;
	margin: 0;
	text-align: center;
}

.primary-menu a[href='#'] {
	cursor: text;
}

.primary-menu > li {
	position: relative;
}

.primary-menu .menu-item {
	display: inline-block;
	padding:0;
	margin:0;
	text-align: center;
	vertical-align: top;
}
.primary-menu:has(> *:nth-child(4)) > .menu-item {
	width: 20.75%;
}
.primary-menu:has(> *:nth-child(5)) > .menu-item {
	width: 16.6%;
}

@media only screen and (max-width: 768px) {
	.primary-menu .menu-item {
		line-height: 1.6;
	}
	.primary-menu:has(> *:nth-child(4)) > .menu-item {
		width: 45%;
	}	
	.primary-menu:has(> *:nth-child(5)) > .menu-item {
		width: 30%;
	}
}

@media only screen and (max-width: 520px) {
	.menu {
		font-size: 1.8rem !important;
	}
	.primary-menu:has(> *:nth-child(5)) > .menu-item {
		width: 45%;
	}	
}

.primary-menu .sub-menu {
	position: absolute;
	background: var(--background-colour);
	margin: 0;
	opacity: 1;
	padding: 0 1px 0 0;
	z-index: 99;
	width: auto;
	display: none;
	text-shadow: none;
	transition: opacity .2s ease-in-out;
}

.primary-menu .menu-item:hover .sub-menu {
	display: block;
}

.primary-menu .sub-menu > li {
	padding-right: 1em;
}

.primary-menu .menu-item.menu-item-has-children::before {
	content: "▼\00a0";
	font-size: 0.8em;
	vertical-align: 10%;
}

.primary-menu .menu-item.menu-item-has-children.current_page_item::before,
.primary-menu .menu-item.menu-item-has-children.current_page_ancestor::before {
	color: var(--menu-text-current-colour);
}

.primary-menu .sub-menu .menu-item {
	font-size: 1.2rem;
	display: block;
	position: relative;
	border: 1px solid var(--sub-menu-border-colour);
	border-top: none;
	width: 100%;
	text-align: left;
	padding: 0.3em 0;
}

.primary-menu .sub-menu .menu-item a {
	padding: 1em;
}

.primary-menu .sub-menu .menu-item:first-child {
	border: 1px solid var(--sub-menu-border-colour);
}

.primary-menu a,
.primary-menu .sub-menu .menu-item a,
.primary-menu .menu-item.menu-item-has-children::before {
	color:var(--menu-text-colour);
	text-decoration: none;
}

.primary-menu .current_page_item a,
.primary-menu .menu-item:has(.current_page_item) > a,
.primary-menu .sub-menu .menu-item.current_page_item > a {
	color: var(--menu-text-current-colour);
}

.primary-menu a:hover,
.primary-menu .sub-menu .menu-item a:hover,
.primary-menu .menu-item.menu-item-has-children::before:hover {
	color:var(--menu-text-hover-colour);
	text-decoration: none;
}

/**************************************
Banner image area
**************************************/
#banner {
	text-align:center;
	background-color: var(--banner-background-colour);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#banner img {
	font-family: 'Brush Script MT', cursive;
	font-weight:bold;
	font-size: 4.5vw;
	max-width: 100%;
	vertical-align: top;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
@media only screen and (max-width: 1000px) {
	#banner img {
		border-radius: 0;
	}	
}

/**************************************
Page footer
**************************************/

footer {
	padding: 0 0 0.5em 0;
	margin: 0;
	text-align:center;
	font-size:smaller;
}

footer hr {
	width: 90%;
	border: none;
	background-color: var(--html-background-colour);
	height: 1px;
	margin-top: 1em;
	margin-bottom: 1em;
}

footer .alignright {
	float: right;
	margin: 0.5em 0 0.5em 1em;
}

/**************************************
Navigation hyperlinks
**************************************/
.nav-next, .nav-previous {
	display: inline-block;
}

.nav-previous {
	padding-right:2em;
}

.content .post-edit-link {
	padding: 0;
}

.search-query {
	font-size: 2em;
	font-weight: bold;
}

.post-date {
	font-style: italic;
}


/**************************************
Comments area
**************************************/

.comments-area {
	padding: 0 5%;
	margin: 0 5%;
	border: 1px solid var(--comments-border-color);
	border-radius: 8px;
	font-family: Arial, Helvetica, sans-serif;
}

.comment {
	padding: 5px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.comments-area .even {
	background-color: var(--comments-background-even);
}

.comments-area .odd {
	background-color: var(--comments-background-odd);
}

.comment-meta {
	font-size: smaller;
}

.comment-form label {
	display:inline-block;
	width: 6em;
}

p[class^="comment-form-"] {
	display: flex;
	align-items: center;
}
p.comment-form-cookies-consent,
p.comment-form-subscriptions {
	display: block;
}

.comment-form-comment textarea, 
.comment-form input[type="text"] {
	max-width: 400px;
	width: 90%;
	font-size: 1em;
}

.comment-form-comment textarea {
	resize: vertical;
	min-height: 5em;
}

.comment-form-cookies-consent label,
.comment-form-subscriptions label {
	display:inline;
}

@media only screen and (max-width: 600px) {
	p[class^="comment-form-"] {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.comment-form-comment textarea, 
	.comment-form input[type="text"] {
		width: 96%;
		margin-top: 4px;
	}
}

@media only screen and (max-width: 600px) {
	.comments-area {
		margin: 0 2%;
		padding: 0 2%;
	}

	ol.comment-list, ol.children {
	list-style: none;
	padding-inline-start: 0;
	}

	ol.children {
		margin: 5px 0;
	}
}

/**************************************
Cookies page
**************************************/
.cookies h1 {
	margin-bottom: 1em;
}

.cookies-group-name {
	font-weight: bold;
}

.cookies-group-descr, .cookies-group-clear {
	margin-left: 2em;
}

.cookies-clear-all {
	margin-top: 2em;
}

.cookies-clear-all span {
	font-weight: bold;
}

.cookies-clear-failed {
	margin: 1em 0;
	font-weight: bold;
}

/**************************************
Blog posts listing
**************************************/
.bfe-posts-list-nav {
	text-align: center;
	margin: auto;
	padding: 1em 3em;
	border-top: var(--post-lists-top-border);
}
.bfe-posts-list-nav > * {
	margin: 0.2em;
}
span.bfe-posts-list-prev, 
span.bfe-posts-list-next {
	color: darkgray;
}
span.bfe-posts-list-nav-page-num {
	background-color: lightblue;
	padding: 0.2em;
}

.bfe-posts-list-categories, .bfe-posts-list-tags {
	font-size: 75%;
	font-style: italic;
}

.bfe-posts-list-categories:has( + .bfe-posts-list-tags) {
	margin-bottom: 0.1em;
}

.bfe-posts-list-categories.bfe-posts-list-category,
.bfe-posts-list-tags.bfe-posts-list-tag {
	margin: 0;
}

.bfe-posts-list {

	list-style: none;
	padding-left: 0;
	box-sizing: border-box;
}

.bfe-posts-list > li {
	border-top: 3px groove lightgray;
	padding-top: 0.5em;
	clear: both;
	overflow-wrap: break-word;
}


.bfe-posts-list__post-excerpt {
	margin-left: 2em;
}

.bfe-posts-list__post-title {
	margin-right: 0.5em;
}

.bfe-posts-list__post-date {
	font-style: italic;
	display: inline-block;
}

.bfe-posts-list__post-date::before {
	content: "("
}

.bfe-posts-list__post-date::after {
	content: ")"
}

.bfe-before-categories, .bfe-before-tags,
.bfe-before-category, .bfe-before-tag {
	font-size: 1.1em;
}

.bfe-display-posts .list-constraints form div {
	display: inline-block;
	margin: 0.5em 1em 0 0;
}

.bfe-display-posts .list-constraints form select, 
.bfe-display-posts .list-constraints form button,
.bfe-display-posts .list-constraints form input {
	font-size: 1rem;
	padding: 0.3rem;
	border-width: 0.8px;
	border-radius: 0.5rem;
	background-color: var(--select-color);
}
.bfe-display-posts .list-constraints form input[type='submit'] {
	padding: 0.35rem;
}
.bfe-display-posts .list-constraints form  input[type='submit']:hover {
	background-color: var(--select-color-hover);
}

.select-category optgroup {
	font-weight: inherit;
	font-style: italic;
}
.select-category option {
	font-weight: normal;
	font-style: normal;
}

/**************************************
Blog posts
**************************************/
h1:has(+.post-date) {
	margin-block-end: 0.25em;
}

h1 + .post-date {
	padding-bottom: 0.5em;
	border-bottom: 3px groove lightgray;
}

.wp-element-caption {
	font-style: italic;
	font-size: 80%;
}

/**************************************
For mobile devices
**************************************/
@media only screen and (max-width: 768px) {
	/* Lists of links want a bit more spacing */
	.ul-links li {
		padding: 10px;
	}
}