/*
Theme Name: taraliv
Theme URI: https://taraliv.com
Author: Nate
Author URI: https://plaidpixel.com
Description: A custom WordPress theme for author Tara Liv.

Tags: author, tara liv, taraliv
Version: 2026
Text Domain: taraliv
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Bebas+Neue&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


/*********************************************************************************
------------------- CSS GRID Styles 	
*/
* {
  box-sizing: border-box;
}
.grid{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 10px;
	margin: auto;
}
.grid.no-gap{
	gap:0px;
}
.grid.contain{
/* 	max-width: 1480px; */
	max-width: 1200px;
}
.grid.center{
	align-items: center;
}
.col-1{
	grid-column: auto / span 1;
}
.col-2{
	grid-column: auto / span 2;
}
.col-3{
	grid-column: auto / span 3;
}
.col-4{
	grid-column: auto / span 4;
}
.col-5{
	grid-column: auto / span 5;
}
.col-6{
	grid-column: auto / span 6;
}
.col-7{
	grid-column: auto / span 7;
}
.col-8{
	grid-column: auto / span 8;
}
.col-9{
	grid-column: auto / span 9;
}
.col-10{
	grid-column: auto / span 10;
}
.col-11{
	grid-column: auto / span 11;
}
.col-12{
	grid-column: auto / span 12;
}
.grid img {
	width:100%;
	height:auto;
	display:block;
}
/* Bare minimum responsiveness... add more as needed ;) */
@media only screen and (max-width: 768px) {
	.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
		grid-column: 1 / 13;
	}
	.order-1{
		order:1;
	}
	.order-2{
		order:2;
	}
}

/*********************************************************************************
------------------- Default Styles 	
*/
@font-face {
	font-family: frighthouse; 
	src: url(fonts/thefrighthouse-webfont.woff);
}


:root {
/* 	--primary: rgb(49,70,90); */ /* hsl(209.27deg 29.5% 27.25%) */
/* 	--secondary: rgb(195 159 20); */ /* hsl(47.66deg 81.4% 42.16%) */


	--primary: rgb(34,48,82);
	--secondary:rgb(241,195,20);
	
	--highlight:rgb(222,181,101); /* hsl(39.67deg 64.71% 63.33%) */
	--book1:rgb(253,250,6);
	--white: #FEFEFE;
	--black: #1C1C1C;	
	
	--font-primary: "Barlow Condensed", sans-serif;
	--font-secondary: frighthouse;

}
body{
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	background:var(--white);
	color:var(--black);
}
h1 {
	font-family: frighthouse;
	font-size: 8rem;
	text-transform: uppercase;	
}
h2{
	font-size: 3.6rem;
    font-family: frighthouse;
    text-transform: uppercase;
}
h3{
	font-size:1.8rem;
}
p{
	font-size:1.2rem;
	line-height: 1.75rem;
	margin-bottom: 10px;
}
strong{
	font-weight: 700;
}
.text-center{
	text-align: center;
}
.text-right{
	text-align: right;
}
hr {
	border:none;
	border-top:1px solid #ccc;
}

.flex-middle{
	display:flex;
	justify-content: center;
	align-items: center;
}

/*********************************************************************************
------------------- Nav Section 	
*/

.nav-section{
	background:var(--primary);
}
.nav-section .nav {
	display: flex;
    justify-content: center;
}
.nav-section .nav a{
	color:var(--secondary);
	padding:20px;
	display:inline-block;
	font-size: 1.3rem;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	transition: 0.2s all;
}
.nav-section .nav a:hover{
	color:var(--primary);
	background:var(--secondary);
	transition: 0.2s all;
}

/*********************************************************************************
------------------- Home Page 	
*/


#header-video-wrap {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background:rgba(0,0,0,0.4);
}

#header-video-wrap video {
    position: absolute;
    top: 0px;
    z-index: -1;
    object-fit: cover;
    height: 100%;
    width: 100%;
    
    background-image:url('img/video-still.png');
	background-size:cover;
}
#homeHeroBox {
    padding: 30px 20px;
}
#homeHeroText {
    color: var(--book1);
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
    font-weight: bold;
    font-size:2rem;
}
#homeHeroText h1{
	text-shadow:0px 2px 0px var(--black);
	font-size:9rem;
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}


.book-section{
	position: relative;
	background-image:url('img/texture.png');
	background-size: 100px 100px;
	color:var(--black);
}
.book-section .img-div{
	padding:180px 80px;
}
.book-section img{
	max-width: 250px;
    box-shadow: 5px 5px 30px var(--black);
	margin:30px;
	transition: 0.2s all;
}
.book-section img:hover{
    box-shadow: 5px 5px 10px var(--black);
	transition: 0.2s all;
}



.author-section {
/* 	background-color: var(--primary); */
/*
	background-image: url('img/background-pages.svg');
	background-size: cover;
	background-position: 40% 0;
	background-attachment:inherit;
	background-repeat: no-repeat;
*/
	padding:120px 0 120px;
}
.author-section .bio-text{
	padding:20px 30px;
/* 	color: var(--white); */
}
.author-section img{
	max-width: 700px;
}
.button-solid{
	text-decoration: none;
	display:inline-block;
	padding:12px 32px 16px;
    color: var(--primary);
    background-color: var(--secondary);
	border-radius: 4px !important;
	font-family:var(--font-primary);
	font-size:1.6rem;
	font-weight: 700;
	line-height: 1;
	border:none;
	transition: 0.2s all;
}
.button-solid:hover{
	cursor: pointer;
    color: var(--secondary);
    background-color: var(--primary);
	transition: 0.2s all;
}
.contact-section{
	padding:40px 20px;
	background-image:url('img/texture.png');
	background-size: 100px 100px;
	border-top:40px solid var(--highlight);
}
.contact-section form{
	padding:20px;
}
.wpcf7-quiz-label{
	display: block;
}
.wpcf7-not-valid-tip{
    color: var(--primary);
    background-color: var(--secondary);
	padding:8px 12px;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    color: var(--primary);
    background-color: var(--secondary);
	font-size: 1.2rem;
	border:none;
	padding:4px 8px;
	text-align:center;
}
form label{
	font-size:1rem;
	display: inline-block;
    margin-bottom: 4px;
	width:100%;
}
form input[type="text"],
form input[type="email"],
form textarea {
	font-size:1.2rem;
	border:none;
	border:solid 2px var(--primary);
	padding:4px 8px;
	width:100%;
	box-shadow: 4px 4px 0px var(--primary);
}
form textarea{
	resize: none;
}
.required{
	opacity: 0.75;
}


/*********************************************************************************
------------------- About Page 	
*/

#about-header{
	
}

#bio-section{
	padding:80px 10px;
}

.text-wrap{
	padding:20px;
}

p .dropcap{
    font-family: frighthouse;
    font-size: 3.5rem;
    line-height: 1.75rem;
    background: var(--black);
    color: var(--white);
    padding: 1.25rem;
    display: inline-block;
    border: 4px solid var(--white);
    outline: 4px solid var(--black);
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;	
}
p.tiny-p{
    font-size:1rem;
}
.endline{
	display:block;
	text-align: center;
}
.endline::after {
	font-family: frighthouse;
	content: "§";
	display:inline-block;
	margin-top: 1em;
	font-size: 3em;
	line-height: 1;
	transform: rotate(90deg);
}

#recommend-section{
	padding: 80px 10px;
    border-top: 40px solid var(--secondary);
}

.book-rec {
    max-width: 90%;
	margin:auto;
}
.book-rec .title{
	background:var(--primary);
	color:white;
	padding:2px;
	text-align: center;
	margin:0;
	border: solid 1px var(--primary);
}
.book-rec .author{
	text-align: center;
	border: solid 1px var(--primary);
	margin-bottom: 30px;
}

/*********************************************************************************
------------------- Footer 	
*/




footer#footer{
	background-color:var(--primary);
	padding:80px;
	text-align: center;
	color:var(--secondary);
}
footer#footer a{
	display:inline-block;
	padding:2px;
	color:var(--white);
}



@media only screen and (max-width:1200px) {
	.book-section .img-div{
		flex-direction: column;
	    padding: 180px 60px;
	}
}
@media only screen and (max-width:768px) {
	.book-section .img-div{
	    padding: 180px 20px;
	}
	.book-section .img-div:nth-of-type(1) {
	    padding: 180px 20px 0px;
	}
	#homeHeroText{
		font-size:1.25rem;
	}
	#homeHeroText h1 {
		font-size:5rem;	
	}
}