/*
Theme Name: She Lived Here
Theme URI: n/a
Author: Lisa Kew / Els van Bloois
Author URI: https://kew-creative.com
Description: Theme for SheLivedHere
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: shelivedhere
*/

/* generic things */

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,form{
	padding:0;
	margin:0;
}
*{
	box-sizing:border-box;
}
html {
	font-size:16px; /* for rem base */
	scroll-behavior: smooth;
	/* note: this replaces the javascript version, which is not accessible due to the 'return false' setting. */
}
html,#nav{
	scrollbar-width: thin;
}
.screen-reader-text,
.skip-link,
.site-nav li.icon a span{
	position:fixed;
	top:-4000rem;
	left:-4000rem;
}
.skip-link:focus,
#toggle a:focus span.skip-link{
	top:2rem;
	left:2rem;
	background:black;
	color:white;
	padding:.5rem 1rem;
	border:2px dotted white;
	text-decoration:none;
	text-transform:uppercase;
	font-size:100%;
	z-index:10000;
}
.admin-bar .skip-link:focus,
#toggle a:focus span.skip-link{
	top:4rem;
}
iframe,
img{
	max-width:100%;
}
img.attachment-thumbnail,
img.attachment-large{
	height:auto !important;
}

/* colours */
/*
#b72eff - purple
#f9f5e3 - light yellow
#510289 - dark purple
#ffe443 - bright yellow
*/

html{
	scrollbar-color: #510289 #b72eff;
}
body{
	min-height:100vh;
	background:url(img/body-bg-1920.png) #510289 no-repeat center / cover;
	background-attachment:fixed;
	color:#510289;
}
#nav{
	background:#510289;
}
#main,
#footer{
	background:#f9f5e3;
}
.social-navigation ul li a{
	display:block;
	width:2.5rem;
	height:clamp(2rem,10vw,2.5rem);
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
}
.social-navigation ul li.instagram a{
	background-image:url(img/icon-ig-yellow.png);
}
.social-navigation ul li.tiktok a{
	background-image:url(img/icon-tt-yellow.png);
}
.social-navigation ul li.substack a{
	width:2.125rem;
	background-image:url(img/icon-ss-yellow.png);
}
.social-navigation ul li.instagram a:focus,
.social-navigation ul li.instagram a:hover,
.social-navigation ul li.instagram a:active{
	background-image:url(img/icon-ig-purple.png);
}
.social-navigation ul li.tiktok a:focus,
.social-navigation ul li.tiktok a:hover,
.social-navigation ul li.tiktok a:active{
	background-image:url(img/icon-tt-purple.png);
}
.social-navigation ul li.substack a:focus,
.social-navigation ul li.substack a:hover,
.social-navigation ul li.substack a:active{
	background-image:url(img/icon-ss-purple.png);
}
.button{
	background:#b72eff;
	color:#ffe443;
}
.button:focus,
.button:hover,
.button:active{
	background:#510289;
	color:#f9f5e3;
}


/* links */

a{
	color:inherit;
	text-underline-offset:.2em;
}
.page-content a{
	font-weight:600;
}
a:focus,
a:hover,
a:active{
	color:#b72eff;
}
.menu a{
	text-decoration:none;
}


/* fonts */

body,input,textarea{
	font-family:"Montserrat",sans-serif;
}


h1.site-title,
p.site-title{
	font-size:3rem;
}
h1{
	font-size:1.875rem;
	font-size:clamp(1.125rem,4.1vw,1.875rem);
	font-weight:600;
	line-height:1.5;
	margin-bottom:1.25em;
}
h2{
	font-size:1.25rem;
	font-weight:600;
	line-height:1.4;
	padding-top:.4em;
	margin-bottom:.7em;
}

body.page-id-2 .page-content h2{
	font-size:1.25rem;
	margin-top:clamp(1.40625rem,6.53125vw,2.34375rem);
}

h3{
	font-size:1rem;
	font-weight:600;
	line-height:1.5;
	margin-bottom:0;
}
p,ul,ol{
	font-size:1rem;
	line-height:1.5;
	margin-bottom:1.25em;
}
.intro p,
.intro ul,
.intro ol,
input,
textarea{
	font-size:1.125rem;
	font-size:clamp(1rem,2vw,1.125rem);
	font-weight:400;
	line-height:1.5;
	margin-bottom:.75em;
}
#colophon p,
#colophon ul,
#colophon ol{
	font-size:clamp(.75rem,2.25vw,.875rem);
}
.button{
	font-size:1.125rem;
	font-weight:600;
	line-height:1.5;
}
p.caption{
	padding-top:.5em;
}
ul{
	list-style:none;
}
.page-content ul li{
	padding-left:1em;
	position:relative;
}
.page-content ul li:before{
	content:"\2022 ";
	display:inline-block;
	position:absolute;
	left:0;
	top:0;
}






/* layout */

#masthead,
#content,
#colophon{
	padding-left:clamp(1rem,7vw,3rem);
	padding-right:clamp(1rem,7vw,3rem);
}
#nav,
#main,
#footer{
	max-width:81.25rem;
	padding-left:clamp(1rem,7vw,3rem);
	padding-right:clamp(1rem,7vw,3rem);
	margin:0 auto;
}
#nav{
	height:6.25rem;
}
#main,
#footer{
	padding-top:clamp(1rem,7vw,3rem);
	padding-bottom:clamp(1rem,7vw,3rem);
}
.page-content .inner{
	padding:1px 0; /* to keep colours and margins inside */
}
body{
}
#page{
	padding-top:6.25rem; /* same as #masthead height */
}
#masthead{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:0;
	min-height:6.25rem; /* enough height for logo + nav menus */
	transition:height .5s ease-in-out 0s;
	overflow:hidden;
}
.admin-bar #masthead{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #masthead{
		top:46px;
	}
}
#nav{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	align-items:center;
}
.site-branding{
	width:15rem;
	order:0;
}
#toggle{
	display:none;
	order:1;
}
#navcontent{
	order:2;
}
.social-navigation ul li a span{
	position:absolute;
	left:-40000px;
	top:-40000px;
}
.social-navigation ul{
	margin-bottom:0;
}
.social-navigation ul li{
	display:inline-block;
	margin-left:4rem;
}

.landingsplit{
	overflow:hidden;
}
.landingsplit .site-branding{
	float:left;
	width:18%;
}
.landingsplit .page-header,
.landingsplit .page-content{
	float:right;
	width:74%;
}
.site-info,
.site-info .menu{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
}
.site-info .menu li{
	margin-left:clamp(1em,4vw,3em);
}
.site-info .menu li:before{
}



.columns{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.col1,
.col2{
	width:46%;
}
@media(max-width:767px){
	.col1,
	.col2{
		width:100% !important;
	}
}
.widesplit{
	display:flex;
	flex-wrap:wrap;
}
.widesplit .imageside{
	width:50%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.widesplit.imgright .imageside{
	order:2;
}
.widesplit .textside{
	width:50%;
}
.widesplit.imgleft .textside{
	padding-right:clamp(1rem,7vw,3rem);
}
.widesplit.imgright .textside{
	padding-left:clamp(1rem,7vw,3rem);
}
.widesplit .textside .inside{
	display:flex;
	flex-direction:column;
	justify-content:center;
	/* min-height is set in HTML, from image dimensions in the imageside */
	padding-top:max(2rem,6%);
	padding-bottom:max(2rem,6%);
	max-width:40.625rem;
}
.widesplit.imgleft .textside .inside{
	padding-left:clamp(2rem,5.7vw,4.8rem); /* 5.7vw (80/1400), otherwise narrow width gives more space for the text than wide width */
	margin-left:0;
	margin-right:auto;
}
.widesplit.imgright .textside .inside{
	padding-right:clamp(2rem,5.7vw,4.8rem); /* 4.8rem instead of 5rem of design, to fit a specific long title on one line */
	margin-right:0;
	margin-left:auto;
}
.widesplit .imageside .mobileplaceholder{
	display:none;
}
@media(max-width:767px){
	.widesplit .imageside{
		width:100%;
		/* height:56.25vw; */
	}
	.widesplit .imageside .mobileplaceholder{
		display:block;
		/* this one has the image dimensions as style */
	}
	.widesplit.imgright .imageside{
		order:0;
	}
	.widesplit .textside{
		width:100%;
	}
	.widesplit .textside{
		padding-left:0 !important;
		padding-right:0 !important;
	}
	.widesplit.imgleft .textside .inside,
	.widesplit.imgright .textside .inside{
		max-width:100%;
		padding-right:clamp(1rem,7vw,3rem);
		padding-left:clamp(1rem,7vw,3rem);
	}
	.colourdivider.narrowonly{
		display:block;
	}

}



/* pagination */
/* kriesi */

.pagination{
	text-align:center;
	padding:3rem 0;
}
.pagepn{
	text-indent:-250rem;
	background-repeat:no-repeat;
	background-position:center;
	background-size:auto 1rem;
}
.page-first{background-image:url(img/page-first.png);}
.page-prev{background-image:url(img/page-prev.png);}
.page-next{background-image:url(img/page-next.png);}
.page-last{background-image:url(img/page-last.png);}

.pagination a,
.pagination span{
	display:inline-block;
	width:1.75rem;
	height:1.75rem;
	font-size:.875rem;
	font-weight:600;
	line-height:1.75rem;
	border-radius:1.75rem;
	box-sizing:border-box;
	padding-top:.1rem;
}
.pagination a.inactive{
	opacity:0.5;
	cursor:default;
}
.page-numbers{
	color:inherit;
	margin:0 .5rem;
}
.page-numbers.current{
	background:#FF5229;
	color:#fff;
}
.page-prev{
	margin-left:-.5rem;
	margin-right:.5rem;
}
.page-next{
	margin-right:-.5rem;
	margin-left:.5rem;
}

/* form things */


body.home .page-header,
body.home .page-content{
	padding-right:6%;
}
@media(max-width:700px){
	body.home .page-header,
	body.home .page-content{
		padding-right:revert;
	}
}
input, textarea{
	display:block;
	width:98%;
	padding:1em;
	border-width:0;
}
.gdpr-submit{
	width:98%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
#mergeRow-gdpr{
	font-size:14px;
	line-height:1.5;
	width:calc(100% - 8rem);
}
fieldset{
	padding:0;
	border-width:0;
	margin-bottom:1rem;
}
label.checkbox.subfield span{
	display:block;
	margin-left:2em;
}
input[type="checkbox"]{
	float:left;
	width:1.25rem;
	height:1.25rem;
	margin-top:.2em;
	margin-left:-.1em;
	margin-right:.5em;
	margin-bottom:.2em;
}
.button{
	width:auto;
	padding:.3em .75em;
	margin-bottom:1.5em;
	cursor:pointer;
}
#mc_embed_signup div.mce_inline_error{
	background-color:#b72eff !important;
}
@media(max-width:480px){
	.gdpr-submit{
		display:block;
	}
	#mergeRow-gdpr{
		width:auto;
	}
	.button{
		margin-left:auto;
	}
}



/* webkit things */

input[type=text],
input[type=search],
input[type=button],
input[type=email],
input[type=submit],
textarea{
	-webkit-appearance:none;
	-webkit-border-radius:0;
}
*{
	-webkit-text-size-adjust:100%;
}


/* Where placeholder needs to obey the styles */

/* fix the stupid placeholder colour */
/* separate rules, because: "a group of selectors containing an invalid selector is invalid". */
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:1.125rem;
	color:#510289;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:1.125rem;
	color:#510289;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:1.125rem;
	color:#510289;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:1.125rem;
	color:#510289;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:1.125rem;
	color:#510289;
}
@media(max-width:900px){
	#masthead,
	#content,
	#colophon{
		padding-left:clamp(1rem,4.5vw,3rem);
		padding-right:clamp(1rem,4.5vw,3rem);
	}
}

@media(max-width:700px){
	#masthead,
	#content,
	#colophon{
		padding-left:0;
		padding-right:0;
	}
	#nav .inner{
		width:100%;
	}
	.social-navigation ul{
		width:100%;
		display:flex;
		justify-content:space-between;
	}
	.social-navigation ul li{
		margin-left:auto;
		margin-right:auto;
	}
	.landingsplit .site-branding{
		width:41%;
	}
	.landingsplit .page-header{
		width:52%;
	}
	.landingsplit .page-content{
		clear:both;
		float:none;
		width:100%;
		padding-top:.75rem;
	}
}