/*
Theme Name: Nicola Wightman
Author: Jason Wightman
*/

 

/* Color reference
-------------------------------------------------------
Cream: #fffcf4 rgba(255, 252, 244, 1.0)
Black: #121212 rgba(18, 18, 18, 1.0)
Song Writer Blue: #173c9c rgba(23, 60, 156, 1.0)
Mum's Army Pink: #d91965 rgba(217, 25, 101, 1.0)
*/




/* Font references
----------------------------------------------- */

/*
// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.fraunces-<uniquifier> {
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "SOFT" 0,
    "WONK" 0;
}

// <weight>: Use a value from 100 to 900
// <uniquifier>: Use a unique and descriptive class name

.inter-<uniquifier> {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

html {
    font-size: 62.5%; 
    min-height: 100%;
    height: 100%;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}


/* Typography
----------------------------------------------- */

body {
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-size: 1.5rem;
	line-height: 21px;
	color: #121212;
	background-color: #fffcf4;
	
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Fraunces", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
		"SOFT" 0,
		"WONK" 0;
}

h1 {
	font-size: 7.2rem;
	line-height: 1.2;
	margin-bottom: 80px;
}

h2 {
	font-size: 4.2rem;
	letter-spacing: 0.1rem;
	line-height: 1.0;
	margin-bottom: 30px;
}

h3 {
	font-size: 2.8rem;
	letter-spacing: 0.1rem;
	line-height: 0.8;
	margin-bottom: 5px;
}

h4 {
	font-size: 2.4rem;
	line-height: 0.8;
	letter-spacing: 0.1rem;
	margin-bottom: 20px;
}

h6 {
	font-size: 2.2rem;
	line-height: 0.8;
	letter-spacing: 0.1rem;
	margin-bottom: 10px;
}

p {
	margin-bottom: 20px;
}

strong {
	font-weight: 700;
}

ul {
	padding-left: 13px;
}

ul li {
	padding-left: 5px;
}

ol {
	padding-left: 20px;
}

ol li {
    padding-left: 10px;
}

a {
	color: #121212;
	-ms-word-break: break-word;
	word-break: break-word;
	text-decoration: none;
}

a:hover,
a:active,
a:focus {
	color: inherit;
}


/* =Structure
----------------------------------------------- */

#page-content {
	background-color: #fffcf4;
}

#page {
	padding-top: 200px;
	padding-bottom: 80px;
	min-height: calc(100vh - 82px);	
}

@media (min-width: 768px) { 
	#page {
		min-height: calc(100vh - 61px);
	}
}

.home #page {
	padding-top: 0;
	padding-bottom: 0;
}

img {
	width: 100%;
	height: auto;
}

/* Buttons */

button,
.button {
	background-color: #121212;
	border: 1px solid #121212;
	padding: 14px 30px;
	box-shadow: none;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	color: #fffcf4;
	height: 40px;
	border-radius: 20px;
	display: inline-block;
}

button a,
.button a {
	text-decoration: none;
	color: #fffcf4;
}

button:hover,
.button:hover {
	background-color: #121212;
	color: #fffcf4;
	text-decoration: underline;
}

button:hover a,
.button:hover a {
	color: #fffcf4;
}

svg#facebook-button {
	margin-left: 6px;
}

button:hover svg#facebook-button path,
.button:hover svg#facebook-button path{
	fill: #fffcf4;
}


/* =Masthead
----------------------------------------------- */

.header {
	position: fixed;
	width: 100%;
    background: #fffcf4;
	border: none;
	z-index: 102;
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(18, 18, 18, 0.2);
}

.header .logo {
	text-align: center;
}

#logo svg {
	max-width: 220px;
	max-height: 39px;
}

@media (min-width: 576px) { 
	#logo svg {
		max-width: unset;
		max-height: unset;
	}
}


/* :::::::::::::::::::::::::::::

DESKTOP MENU

::::::::::::::::::::::::::::: */

#main-nav a {
	font-family: "Fraunces", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
		"SOFT" 0,
		"WONK" 0;
	font-size: 1.7rem;
	color: #121212;
	text-decoration: none;
}

#main-nav ul {
	display: flex;
    justify-content: center;
	margin-bottom: 0;
	line-height: 1;
	padding: 0;
}

#main-nav ul li {
    display: inline-block;
    margin: 0 0 0 35px;
	padding: 0;
	background: none;
}

#main-nav ul li:first-child {
	margin-left: 0;
}

#main-nav ul li:before {
    display: none;
}

/* menu onclick icon */

.plus-minus-toggle,
.mobile-plus-minus-toggle {
	cursor: pointer;
	height: 14px;
	position: relative;
	width: 14px;
	float: right;
	margin-left: 10px;
	top: 4px;
	z-index: 1;
}

.plus-minus-toggle:before,
.plus-minus-toggle:after,
.mobile-plus-minus-toggle:before,
.mobile-plus-minus-toggle:after {
	background: #121212;
	content: '';
	left: 0;
	position: absolute;
	transition: transform 500ms ease;
}

.plus-minus-toggle:before,
.mobile-plus-minus-toggle:before {
	height: 2px;
	width: 14px;
	top: 6px;
}

.plus-minus-toggle.collapsed:after,
.mobile-plus-minus-toggle.hidden:after {
	transform: scaleY(1);
}

.plus-minus-toggle:after,
.mobile-plus-minus-toggle:after {
	height: 14px;
	width: 2px;
	left: 6px;
	transform: scaleY(0);
	transition: transform 0.25s ease-in-out;
}

.main-menu li:hover .plus-minus-toggle,
.mobilemenu li:hover .mobile-plus-minus-toggle {
	opacity: 1;
}


/*------------------------------------*\
	Submenu Desktop
\*------------------------------------*/

#main-nav .sub-menu:before {
	height: 350px;
	width: 100vw;
	background-color: rgba(255, 252, 244, 0.9);
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0%;
	z-index: -1;
}

#main-nav .sub-menu:after {
	height: 350px;
	width: 100vw;
	background-color: rgba(255, 252, 244, 0.9);
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 100%;
}

#main-nav ul li.menu-item-has-children .sub-menu {
    display: none;
}

#main-nav ul li .sub-menu {
    margin-top: 31px;
	text-align: left;
	padding: 0;
	position: absolute;
	margin-left: 0;
	transition: .4s ease;
}

#main-nav ul li .sub-menu li {
	display: block;
	color: #121212;
	width: 100%;
	padding: 15px 0;
	margin: 0;
	white-space: nowrap;
	box-sizing: border-box;
}

#main-nav ul li .sub-menu li:first-child {
	padding-top:30px
}


/* Navigation Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Hamburger */

.hamburger {
	padding: 0;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	overflow: visible; 
	display: block;
	height: 18px;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
	background-color: #121212;
	}

.hamburger-box {
	width: 22px;
	height: 18px;
	display: inline-block;
	position: relative; 
}

.hamburger-inner {
	display: block;
	top: 50%;
	margin-top: -2px; 
}

.hamburger-inner, 
.hamburger-inner::before,
.hamburger-inner::after {
    width: 22px;
    height: 2px;
    background-color: #121212;
    border-radius: 1px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; 
}
  
.hamburger-inner::before, 
.hamburger-inner::after {
    content: "";
    display: block; 
}
  
.hamburger-inner::before {
    top: -6px; 
}
  
.hamburger-inner::after {
    bottom: -6px; 
}

/* Spin */

.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
  
.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; 
}
  
.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); 
}
  
.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; 
}
  
.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); 
}


/* :::::::::::::::::::::::::::::

MOBILE  MENU

::::::::::::::::::::::::::::: */

#mobile-nav {
	font-family: "Fraunces", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	font-variation-settings:
		"SOFT" 0,
		"WONK" 0;
	line-height: 1;
}

#mobile-nav.visible {
	display: block;
	text-align: left;
	padding-top:30px;
	position: fixed;
	width: 100vw;
	z-index: 500;
	top: 90px;
	bottom: 0;
	background-color: #fffcf4;
	height: 100vh;
	/*transition: 0.25s;*/
}

#mobile-nav {
	height: 0;
	overflow: hidden;
}

#mobile-nav ul {
	list-style: none;
    margin-top: 0;
	margin-bottom: 0;
    padding-left: 0;
}

#mobile-nav ul li {
	margin-left: 0;
	padding: 12px 0;
	margin-bottom: 0;
	background: none;
}

#mobile-nav ul li:before {
	content: none;
}

#mobile-nav ul li a {
	color: #121212;
}

#mobile-nav li.menu-item-has-children .sub-menu {
    display: none;
}

#mobile-nav li .sub-menu {
    display: block;
}

#mobile-nav ul li .sub-menu li {
    padding: 12px 0;
    margin: 0;
}

#mobile-nav ul li .sub-menu li:first-child {
    padding-top: 24px;
}


/* =New Social Links
----------------------------------------------- */

ul.social-links {

    list-style: none;
    padding: 0 !important;
    margin: 0;
	display: flex;

}

/*#footer ul.social-links {
	justify-content: center;
}*/

#footer #instagram-footer {
	margin-left: 10px;
}

ul.social-links li a {
    display: inline-block;
    text-align: center;
}


/* * * * * * * * * * * * * * * * * * 

Generic

* * * * * * * * * * * * * * * * * */





/* * * * * * * * * * * * * * * * * * 

Home Page

* * * * * * * * * * * * * * * * * */

.left-panel,
.right-panel {
	height: calc(50vh - 81px);
	width: 100vw;
	background-position: center center;
	background-size: cover;
}

@media (min-width: 768px) { 
	.left-panel,
	.right-panel {
		height: calc(100vh - 150px);
		width: 50vw;
		margin-top: 89px;
	}
}

.left-panel {
	margin-top: 80px;
}

@media (min-width: 768px) { 
	.left-panel {
		margin-top: 89px;
	}
}

.right-panel {
		margin-top: 0;
}

@media (min-width: 768px) { 
	.right-panel {
		margin-top: 89px;
	}
}

.content-wrapper {
	width: 300px;
	text-align: center;
	color: #fffcf4;
	padding: 40px 30px;
	background-color: rgba(255, 252, 244, 0.1);
	border-radius: 20px;
	text-wrap: balance;
}

.content-wrapper h1 {
	font-size: 2.4rem;
	margin-bottom: 30px;
}

.content-wrapper p {
	margin-bottom: 50px;
}

.content-wrapper button {
	background-color: #fffcf4;
	color: #121212;
	border-color: #fffcf4;
}
.content-wrapper button a {
	color: #121212;
}

.content-wrapper button:hover,
.content-wrapper button:hover a {
	text-decoration: underline;
}


/* * * * * * * * * * * * * * * * * * 

Author

* * * * * * * * * * * * * * * * * */

.author-content {
	margin-bottom: 60px;
}

.cover-image {
	aspect-ratio: 3/2;
	margin-bottom: 20px;
}

@media (min-width: 992px) { 
	.cover-image {
		margin-bottom: 0;
	}
}


.cover-image img {
	object-fit: cover;
	object-position: right center;
	width: 100%;
	height: 100%;
}


/* Amazon Button */

#amazon {
	margin-top: 20px;
}


/* * * * * * * * * * * * * * * * * * 

Song Writer

* * * * * * * * * * * * * * * * * */

.songwriting-content {
	margin-bottom: 60px;
}

.songs-content {
	margin-bottom: 80px;
}

.songs-content iframe {
	margin-bottom: 20px;
}

/* SoundCloud Button */

#soundcloud {
	margin-top: 20px;
}

/* * * * * * * * * * * * * * * * * * 

About

* * * * * * * * * * * * * * * * * */


/* * * * * * * * * * * * * * * * * * 

Contact

* * * * * * * * * * * * * * * * * */

.contact-wrapper {
	text-align: center;
	color: #fffcf4;
	padding: 40px 20px;
	border-radius: 20px;
	text-wrap: balance;
	aspect-ratio: 4/3;
	background-position: center center;
	background-size: cover;
}

@media (min-width: 768px) { 
	.contact-wrapper {
		aspect-ratio: 3/4;
	}
}

.contact-wrapper.left {
	background-color: rgba(217, 25, 101, 0.6);
	position: relative;
}

.contact-wrapper.left:before {
	background-color: rgba(217, 25, 101, 1.0);
	width: 100%;
	height: 100%;
	content: "";
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 20px;
	opacity: 0.4;
}

.contact-wrapper.right {
	background-color: rgba(23, 60, 156, 0.6);
	position: relative;
}

.contact-wrapper.right:before {
	background-color: rgba(23, 60, 156, 1.0);
	width: 100%;
	height: 100%;
	content: "";
	top: 0;
	left: 0;
	position: absolute;
	border-radius: 20px;
	opacity: 0.7;
}

.contact-wrapper > div {
	z-index: 1;
}


.contact-wrapper h1 {
	font-size: 2.4rem;
	margin-bottom: 30px;
}

.contact-wrapper p {
	margin-bottom: 50px;
}

.contact-wrapper button {
	background-color: #fffcf4;
	color: #121212;
	border-color: #fffcf4;
}

.contact-wrapper button a {
	color: #121212;
}

.contact-wrapper button:hover,
.contact-wrapper button:hover a {
	text-decoration: underline;
}


/* * * * * * * * * * * * * * * * * * 

Footer

* * * * * * * * * * * * * * * * * */

#footer {
	margin-top: 0;
	padding-top: 20px;
	color: #fffcf4;
	background-color: #121212;
	font-size: 1.2rem;
}

#footer a {
	color: #fffcf4;
	text-decoration: none;
}

#footer #left {
	text-align: center;
}

@media (min-width: 768px) { 
	#footer #left {
		text-align: left;
	}
}

#footer #left p {
	margin-bottom: 0;
}

@media (min-width: 768px) { 
	#footer #left p {
		margin-bottom: 20px;
	}
}

#footer #right {
	text-align: center;
}

@media (min-width: 768px) { 
	#footer #right {
		text-align: right;
	}
}


/* * * * * * * * * * * * * * * * * * 

404 Page

* * * * * * * * * * * * * * * * * */

body.error404 #page {
	padding-top: 125px;
}

.FourOFour {
	height: calc(100vh - 125px);
}

/* 404 Text */

#error-text {
	text-align: center;
	margin: 50px 0 0 0;
}

@media (min-width: 768px) {
	#error-text {
	text-align: center;
	margin: auto 0 auto 0;
	}
}

#error-text #fof {
	font-size: 1.6rem;
	font-weight: 600;
	margin-bottom: 3rem;
}

#error-text h1 {
	font-size: 10rem;
	margin-bottom: 2.2rem;
}

#error-text p {
	font-size: 1.8rem;
	margin-bottom: 3rem;	
}

/* Face */

.face {
  display: block;
  width: 12em;
  height: auto;
}

@media (min-width: 768px) {
	.face {
	  width: 20em;
	}
}

.face g {
	stroke: #121212;
}
	
.face__eyes, .face__eye-lid, .face__mouth-left, .face__mouth-right, .face__nose, .face__pupil {
  animation: eyes 1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.face__eye-lid, .face__pupil {
  animation-duration: 4s;
  animation-delay: 1.3s;
  animation-iteration-count: infinite;
}
.face__eye-lid {
  animation-name: eye-lid;
}
.face__mouth-left, .face__mouth-right {
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
.face__mouth-left {
  animation-name: mouth-left;
}
.face__mouth-right {
  animation-name: mouth-right;
}
.face__nose {
  animation-name: nose;
}
.face__pupil {
  animation-name: pupil;
}

/* Animations */
@keyframes eye-lid {
  from, 40%, 45%, to {
    transform: translateY(0);
  }
  42.5% {
    transform: translateY(17.5px);
  }
}
@keyframes eyes {
  from {
    transform: translateY(112.5px);
  }
  to {
    transform: translateY(15px);
  }
}
@keyframes pupil {
  from, 37.5%, 40%, 45%, 87.5%, to {
    stroke-dashoffset: 0;
    transform: translate(0, 0);
  }
  12.5%, 25%, 62.5%, 75% {
    stroke-dashoffset: 0;
    transform: translate(-35px, 0);
  }
  42.5% {
    stroke-dashoffset: 35;
    transform: translate(0, 17.5px);
  }
}
@keyframes mouth-left {
  from, 50% {
    stroke-dashoffset: -102;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes mouth-right {
  from, 50% {
    stroke-dashoffset: 102;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes nose {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(0, 22.5px);
  }
}