/*
	(c)2021 - visuallizard.com

	General styles.
	Template, view, plugin and element specific, etc.
*/

/* ! Colour Palette */
:root {
    --dkblue950: #1D252E; --dkblue900: #303D4A; --dkblue800: #354657;
    --dkblue700: #3D5267; --dkblue600: #4A667E; --dkblue500: #5F7F98;
    --dkblue400: #7E9BB1; --dkblue300: #ACBECD; --dkblue200: #D3DCE5;
    --dkblue100: #EBEFF3; --dkblue050: #F5F7FA;
    --blue950: #11233f; --blue900: #1a385f; --blue800: #1a4071;
    --blue700: #1b4a89; --blue600: #205CA7; --blue500: #3078C7;
    --blue400: #5595DA; --blue300: #90B9E8; --blue200: #C4D9F2;
    --blue100: #E4ECF9; --blue050: #F2F7FD;
    --green950: #074700; --green900: #1f6a00; --green800: #3b8f00;
    --green700: #468914; --green600: #5cad2e; --green500: #63b934;
    --green400: #77cb47; --green300: #8dd35d; --green200: #9ad969;
    --green100: #aee780; --green050: #d7fcb9;
    --yellow950: #3F2C0E; --yellow900: #6C5320; --yellow800: #7F6623;
    --yellow700: #998028; --yellow600: #d0b918; --yellow500: #f0d30a;
    --yellow400: #f9e653; --yellow300: #f0dc68; --yellow200: #EFF89B;
    --yellow100: #F5FBCB; --yellow050: #FBFDEB;
    --red950: #47090A; --red900: #811D1E; --red800: #9C1C1D;
    --red700: #BD1F20; --red600: #E12A2B; --red500: #F34445;
    --red400: #FB6E70; --red300: #FDA3A3; --red200: #FEC9CA;
    --red100: #FEE2E2; --red050: #FFF1F1;
    --white: #ffffff;
    --gray: #d4d4d4;
    --black: #000000;
}

.metagrid {
	display: grid;
	grid-template-columns: max-content;
	grid-template-rows: 1fr;
	row-gap: .5rem;
	column-gap: 1rem;
	margin-block: 0;
}
.metagrid dd + dt,
.metagrid dt + dd,
.metagrid dd + dd {
	margin-top: 0;
}
.metagrid dt {
	grid-column-start: 1;
	grid-column-end: 2;
}
.metagrid dd {
	grid-column-start: 2;
	grid-column-end: 3;

	font-weight: normal;
}



/* ! [custom buttons] */
a.button {
    padding: 0.75rem 1rem 0.65rem 1rem;
    border-radius: 0.5rem;
}
body.main a.button {
    font-weight: 700;
    background-color: var(--red700);
    color: var(--white);
}
body.main a.button:hover {
    background: var(--red100);
    color: var(--red700);
}
body.dj-hemminger a.button {
    font-weight: 700;
    background-color: var(--black);
    color: var(--white);
}
body.dj-hemminger a.button:hover {
    background: var(--red700);
    color: var(--white);
}
body.lizzie-quick a.button {
    font-weight: 700;
    background-color: var(--yellow500);
    color: var(--black);
}
body.lizzie-quick a.button:hover {
    background: var(--black);
    color: var(--yellow500);
}



/* ! [[ Bulletin Module ]] */

/* ! [ Articles - general ] */
.articles-block {
	padding: 1rem 0;
	margin-bottom: 2rem;
}
.articles-block .articles-heading {
	text-align: center;
	margin-bottom: 0;
}
.articles-block .more-all {
	text-align: center;
}

.article-items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	grid-gap: 1rem;
	align-items: stretch;
}
	.article-item {
		position: relative;
		padding: 0;
		margin: 1rem 0 2rem;

		display: flex;
		flex-direction: column;
	}
		.article-title {
			margin: 0 0 .5rem 0;
			font-size: 1rem;
			font-weight: normal;
		}
		.article-item .article-title a {
			text-decoration: none;
		}
		.article-item .article-title a:hover {
			text-decoration: underline;
		}
		.article-date {
			display: block;
			margin-bottom: .5rem;
			font-weight: 600;
			order: -1;
		}
	.article-figure {
		margin: 0;
		overflow: hidden;
		position: relative;
	}
		.article-img {
			display: block;
			width: 100%;
			height: auto;

			transition: transform .2s ease-in;
		}
		.article-item:hover .article-img {
			transform: scale(1.05);
		}
		.article-figure figcaption {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			padding: .5rem .75rem .3rem;
			background: hsla(0, 0%, 0%, .5);
			color: #fff;
			font-size: .75rem;
		}
	.article-details {
		display: flex;
		flex-direction: column;
		padding: .5rem 0 0;
		flex-grow: 1;
	}
	.article-details > :last-child {
		margin-bottom: 0;
	}
		.article-brief {
			margin-bottom: auto;
		}
		.article-brief p {

		}
	.article-item .more {

	}

/* ! [ Articles - Index ] */
	.articles-index .more-all {
		display: none;
	}

/* ! [ Articles - Latest ] */
	.articles-latest {

	}
	.articles-latest .article-items {

	}
	.articles-latest .article-item {

	}
	.articles-latest .pagination-links {
		display: none;
	}

/* ! [ Articles - Single article (Bulletin view) ] */
	.article-view {
		padding-top: 1rem;
	}
	.article-view .article-headline {

	}
	.article-view .article-figure {
		max-width: 1200px;
		margin-bottom: 1rem;
	}
	.article-view .article-img {
		max-width: 100%;
	}
	.article-view .article-date {
		margin-bottom: 1rem;
	}

/* ! [ Archive List ] */
	.archive-list {
		list-style: none;
		margin: 0;
		padding-left: 1rem;
	}
	.archive-list.year {
		margin-top: 1rem;
	}
		.archive-list.month {

		}
			.archive-articles {
				padding-left: 1rem
			}



/* ! [ Home page Featured Books module ] */
.banner-block {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 0 3rem 0;
    background: #f3f4f4;
}
.banner-block .book-list {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0;
}
    .banner-block .book-list .book-frame {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        row-gap: 1rem;
        width: 100%;
        max-width: 1000px;
        padding: 3rem 0 5rem 0;
        margin: 0 auto;
        z-index: 0;
    }
        .book-frame > figure {
            display: block;
            position: relative;
            flex: 0 0 40%;
            max-width: 40%;
            padding: 1.5rem;
            background: var(--white);
            box-shadow: 2px 2px 15px var(--black);
        }
            .book-frame > figure > img {
                display: block;
                position: relative;
                max-width: 100%;
            }
        .book-frame > div.description {
            display: block;
            position: relative;
            flex: 0 0 56%;
            max-width: 56%;
            padding: 1.5rem;
            background-color: var(--white);
            box-shadow: 2px 2px 15px var(--black);
        }
            .book-frame > div.description h2 {
                font-family: "Dancing Script", cursive;
            }
            .book-frame > div.description p {
                display: block;
                position: relative;
                height: auto;
            }
        .book-frame > h3.stamp {
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            z-index: 1;
            bottom: 2rem;
            left: -2rem;
            width: 12rem;
            height: 12rem;
            padding: 1rem;
            border-radius: 100%;
            font-size: 2rem;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            transform: rotate(-10deg);
            box-shadow: 2px 2px 15px var(--black);
            background-image: radial-gradient(circle, var(--red800), var(--red800) 35%, var(--red600) 65%, var(--red300) 65.01%, var(--red300));
            color: var(--white);
        }
        article.book p.stamp {
            display: flex;
            position: absolute;
            justify-content: center;
            align-items: center;
            top: 0.5rem;
            right: 0.5rem;
            width: 9rem;
            height: 9rem;
            padding: 1rem;
            border-radius: 100%;
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1;
            text-align: center;
            transform: rotate(10deg);
            box-shadow: 5px 5px 15px var(--black);
            background-image: radial-gradient(circle, var(--red800), var(--red800) 35%, var(--red600) 65%, var(--red300) 65.01%, var(--red300));
            color: var(--white);
        }
.banner-block .book-list .book.resort-romances {
    background-color: var(--blue700);
    background-image: url("../../img/resort-romance-bk.jpg");
}
.banner-block .book-list .book.north-pole-unlimited {
    background-color: var(--red700);
    background-image: url("../../img/northpole-unlimited-bk.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.banner-block .book-list .book.hollywood-to-olympus {
    background-color: var(--yellow700);
    background-image: url("../../img/hollywood-olympus-bk.jpg");
}
.banner-block .book-list .book.millionaire-ville {
    background-color: var(--green700);
}



/* ! [ Home page latest items ] */
.cards .card {
    flex: 0 0 49%;
    max-width: 49%;
    align-items: flex-start;
}



/* ! [ Book series display ] */
div.series-list {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 2rem 0;
}
    body.main div.series-list > h2 {
        font-family: "Dancing Script", cursive;
    }
    div.series-list > ul {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        flex-wrap: wrap;
        column-gap: 2%;
        row-gap: 1.25rem;
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
        div.series-list > ul > li {
            display: block;
            position: relative;
            flex: 0 0 18.4%;
            max-width: 18.4%;
            padding: 0;
            border: 1px solid var(--gray);
            line-height: 1.1;
            text-align: center;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        div.series-list > ul > li:hover {
            background-color: var(--blue100);
            border: 1px solid var(--blue700);
        }
            div.series-list > ul > li figure {
                padding: 0.5rem;
                margin: 0;
            }
            div.series-list > ul > li > span {
                display: block;
                position: relative;
                padding: 0.5rem 0.5rem 1rem 0.5rem;
            }
            div.series-list > ul > li > a {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
            }



/* ! [ Book Description display ] */
article.book {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    row-gap: 1.25rem;
    width: 100%;
    padding: 0;
    margin: 0;
}
    article.book > h2 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0;
        line-height: 1.25;
    }
    article.book > h2 > span {
        display: block;
        position: relative;
        font-size: 1.25rem;
        font-style: italic;
    }
    article.book > section {
        display: block;
        position: relative;
        flex: 0 0 48%;
        max-width: 48%;
    }
    article.book > figure {
        display: block;
        position: relative;
        flex: 0 0 48%;
        max-width: 48%;
    }
    article.book > ul.purchase-options {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        row-gap: 1rem;
        flex-wrap: wrap;
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }
        article.book > ul.purchase-options li {
            display: block;
            position: relative;
            flex: 0 0 32%;
            max-width: 32%;
        }
            article.book > ul.purchase-options li a.button {
                display: block;
                position: relative;
            }