/*
Theme Name: Buckinghamshire HandClinic
Theme URI: n/a
Author: Lisa Kew
Author URI: https://theartpartnership.co.uk
Description: Theme for http://buckshandclinic.com/
Version: 1.0
License: no license, use a theme from https://wordpress.org/themes/ instead.
License URI: n/a
Tags: n/a
Text Domain: buckinghamshirehandclinic
*/

/* generic things */

html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,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. */
}
.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:10002;
}
.admin-bar .skip-link:focus,
#toggle a:focus span.skip-link{
	top:4rem;
}
iframe,
img{
	max-width:100%;
}

/* colours */
/*
Deep blue #132f55 (text and headings) 
And deep aqua #00a19a
Footer and pale aqua panels #e1f0ed
*/

body{
	background:#ffffff;
	color:#132f55;
}
#masthead{
	background:#ffffff;
	color:#132f55;
	border-color:#e1f0ed;
}
a{
	color:#00a19a;
}
#nav a,
.backlinks a,
.contacts a,
#colophon a{
	color:inherit;
}
.buttoncolour a{
	background:#00a19a;
	color:#ffffff;
	border-color:#00a19a;
}
#nav li.current-menu-item a,
#nav li.current-page-ancestor a,
#nav li a:focus,
#nav li a:hover,
#nav li a:active{
	color:#00a19a;
}
.site-nav li.icon a{
	background-color:grey;
}
.button a,
ul.buttonlinks a{
	transition:all .5s ease-in-out 0s;
}
.buttoncolour a:focus,
.buttoncolour a:hover,
.buttoncolour a:active,
ul.buttonlinks a,
ul.buttonlinks a.standoutlink:focus,
ul.buttonlinks a.standoutlink:hover,
ul.buttonlinks a.standoutlink:active{
	color:inherit;
	border-color:#00a19a;
	background:#ffffff;
}
ul.buttonlinks a.standoutlink,
ul.buttonlinks a.current,
ul.buttonlinks a:focus,
ul.buttonlinks a:hover,
ul.buttonlinks a:active{
	background:#00a19a;
	color:#ffffff;
}

.pubslists,
#colophon{
	background:#e1f0ed;
}
h2{
	border-color:#00a19a;
}
.backlinks a{
	padding-right:1.5em;
	background:url(img/arrow.png) transparent no-repeat right bottom;
}

/* decoration */

a,
#masthead a,
div.header-contact a,
ul.buttonlinks a,
div.button a{
	text-decoration:none;
}

a{
	text-underline-offset:.2em;
	/* applies to all underlined links */
}
a:focus,
a:hover,
a:active{
	text-decoration:underline;
}

/* fonts */

body{
	font-family:'Raleway',Arial,sans-serif;
	font-size:100%;
	font-weight:400;
	line-height:1;
}
strong{
	font-weight:700;
}
.contacts a{
	font-weight:700;
}
h1,h2,h3,h4,h5,h6,
#masthead p,
#masthead ul,
.header-contact,
ul.buttonlinks,
ul.imagelinks,
.button,
#colophon{
	font-family:'Montserrat',Arial,sans-serif;
	font-weight:400;
}
h1 strong,
h2 strong,
h3 strong,
.generalinfo h2,
.linksrefs h2{
	font-weight:500;
}
h1{
	font-size:2.125rem;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:.8em;
}
h1.withsections{
	margin-bottom:1.6em;
}
h1 span.line2{
	font-size:0.71em; /* equivalent of 1.5rem */
}
h2{
	font-size:1.5rem;
	font-weight:400;
	text-transform:uppercase;
	line-height:1.2;
	padding-top:.7em;
	margin-bottom:1.1em;
}
.pubslists h2{
	font-size:1.25rem;
	font-weight:500;
	padding-top:0;
	padding-bottom:.75em;
	border-width:0 0 1px 0;
	border-style:solid;
	margin-bottom:0.6em;
}
.contacts h2{
	font-size:1.25rem;
	font-weight:500;
	padding-top:1.5em;
	padding-bottom:.75em;
	border-width:0 0 1px 0;
	border-style:solid;
	margin-bottom:1.25em;
}
p,
ul,
ol,
dl{
	font-size:.9375rem;
	line-height:1.6;
	margin-bottom:1.6em;
}
.contacts p,
.contacts ul,
.contacts ol{
	font-size:1.1rem;
	margin-bottom:.55em;
}
.backlinks p{
	font-weight:700;
	text-transform:uppercase;
	margin-bottom:0; /* this is handled by the flex gap */
}
#colophon p,
#colophon ul{
	font-size:.875rem;
	margin-bottom:2.3rem;
}
h1.site-title,
p.site-title,
#nav ul{
	font-size:1rem;
	line-height:1.6;
	margin-bottom:0;
}
ul.buttonlinks,
ul.imagelinks{
	list-style:none;
	font-size:1.25rem;
	font-weight:500;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:1em;
}
ul.imagelinks{
	font-size:1.4rem;
}
dl{
	line-height:1.5;
	margin-bottom:3.4em;
}
dt{
	font-weight:600;
	padding-top:1.4em;
}
dd.itemauthors{
	font-style:italic;
}
dd.itemcredit{
	font-size:.8rem;
}
div.site-contact p,
div.header-contact{
	font-size:.875rem;
	text-transform:uppercase;
	margin-bottom:0;
}
.button{
	font-size:1.25rem;
	font-weight:500;
	text-transform:uppercase;
	line-height:1.2;
	margin-bottom:1em;
}


/* layout */

/* #nav,*/
.outer{
	/* padding:0 2rem; */
	padding:0 6vw;
}
.inner{
	max-width:81.25rem;
	margin:0 auto;
}
.limited{
	max-width:52rem;
}
#page{
	position:relative;
	padding-top:158px;
}
#masthead{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:10000;
	transition:top .5s ease-in-out 0s;
}
.scrolled.scrolledup #masthead{
	top:0;
	border-width:0 0 1px 0;
	border-style:solid;
}
.admin-bar #masthead,
.admin-bar.scrolled.scrolledup #masthead{
	top:32px;
}
@media(max-width:782px){
	.admin-bar #masthead,
	.admin-bar.scrolled.scrolledup #masthead{
		top:46px;
	}
}
.scrolled #masthead{
	position:fixed;
	top:-400px;
}
.scrolled.scrolleddown #masthead{
	top:-400px;
}
#masthead .inner{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	height:0;
	min-height:9.875rem; /* enough height for logo + nav menus */
	transition:height .5s ease-in-out 0s;
	padding-top:2.25rem;
	padding-bottom:2.25rem;
}
.home #page{
	padding-top:13.0625rem;
}
.home #masthead .inner{
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	height:13.0625rem;
	padding-top:1rem;
	padding-bottom:1rem;
}
.buttoncolour a{
	border-width:1px;
	border-style:solid;
}
.site-contact a{
	position:fixed;
	top:0;
	right:0;
	padding:.5em clamp(2.25rem, calc((100% - 81.25rem) / 2), 50%) .5em .6em;
	border-width:0 0 1px 1px;
	border-radius:0 0 0 .5rem;
	z-index:10001;
}
.admin-bar .site-contact a{
	top:32px;
}
@media(max-width:782px){
	.admin-bar .site-contact a{
		top:46px;
	}
}
.site-branding{
	width:11rem;
	padding-bottom:.4rem; /* to level with bottom of nav ul */
	order:0;
}
.home #masthead .site-branding{
	width:15rem;
}
.site-branding a,
.site-branding img{
	display:block;
}
#toggle{
	display:none;
	order:1;
}
#navcontent{
	order:2;
}
.site-nav{
	display:flex;
	justify-content:flex-end;
	/* width:calc(100% - 12rem); */
}
.site-nav .main-navigation{
	text-align:center;
}
.site-nav .navi{
	display:inline-block;
}
.site-nav li{
	display:inline-block;
	margin-left:1.6em;
}
.home .site-nav li{
	margin-left:.8em;
	margin-right:.8em;
}
.site-nav li.icon a{
	display:inline-block;
	height:2rem;
	width:2rem;
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
}

.bannerwrapper{
	position:relative; /* to position the text */
}
.banner{
	position:relative; /* to position the swish */
	width:100%;
	height:28.81vw;
	height:24vw;
	min-height:19rem;
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
@media(max-width:740px){
	.banner{
		height:41vw;
		min-height:13rem;
	}
}
.banner:after{
	content:" ";
	display:block;
	position:absolute;
	bottom:-2px; /* to combat rounder error swish image overlap */
	left:0;
	width:100%;
	height:14.92vw;
	background:url('img/banner-swish.png') transparent no-repeat center bottom / cover;
}
@media(max-width:2400px){
	.banner:after{
		background-size:2400px auto;
	}
}
@media(max-width:1600px){
	.banner:after{
		background-size:150% auto;
		/* height:276px; */
	}
}
.home .banner{
	height:27.5vw;
	min-height:27rem;
	margin-bottom:1.2rem;
}
.home #main{
	padding-top:2rem;
}
@media(max-width:780px){
	.home .banner780{
		width:100%;
		height:100%;
		background-repeat:no-repeat;
		background-size:cover;
		background-position:center;
	}
}
@media(max-width:420px){
	.home .banner{
		min-height:100vw;
	}
}
.home .banner:after{
	height:11.17vw;
	min-height:11.5rem;
	background:url('img/banner-home-swish.png') transparent no-repeat center bottom / cover;
}
.home .page-header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%; /* same height as banner */
	height:calc(100% - 6rem); /* minus room for the swish */
	max-height:calc(100% - 6vw);
	z-index:100; /* to get text and button/link in front of swish image */
}
.home .page-header .inner{
	max-width:71.5rem;
	height:100%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
h1 span.line2{
	display:block;
}
@media(max-width:780px){
	.home .page-header{
		position:static;
		display:block;
		height:auto;
	}
}
.header-contact a{
	display:inline-block;
	padding:.6em;
	border-radius:.4rem;
}
ul.buttonlinks{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
	margin-left:-1.5%;
	margin-right:-1.5%;
}
ul.buttonlinks li{
	display:table;
	width:33.33%;
	padding:0 1.5%;
	margin-bottom:3%;
}
ul.buttonlinks a,
.button a{
	display:table-cell;
	width:100%;
	height:5em;
	text-align:center;
	vertical-align:middle;
	padding:1em;
	border-width:1px;
	border-style:solid;
	border-radius:.5rem;
}
.button{
	display:table;
	text-align:center;
	margin:0 auto;
}
.contactbutton .inner{
	padding:4.2rem 0 3rem 0;
}
ul.imagelinks{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin-left:-1.5%;
	margin-right:-1.5%;
}
ul.imagelinks li{
	width:33.33%;
	padding:0 1.5%;
	overflow:hidden; 
	/* to snip the curve overlay image */
}
ul.imagelinks li a{
	display:block;
	position:relative;
}
ul.imagelinks li a:after{
	content:" ";
	display:block;
	position:absolute;
	left:-2px;
	bottom:0;
	width:102%;
	height:37%;
	background:url(img/curve-high.png) transparent no-repeat center top / 100% auto;
	transition:height .5s ease-in-out 0s;
}
ul.imagelinks li a:hover:after{
	height:130%;
}
ul.imagelinks li a img{
	display:block;
}
ul.imagelinks li a span{
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	color:#132f55;
	text-align:center;
	padding:.4em 1em;
	z-index:1; /* to go in front of the curve overlay image */
}
.generalinfo{
	padding-top:3rem;
	text-align:center;
}
.linksrefs{
	padding-top:.5rem;
	text-align:center;
}
.generalinfo .limited{
	margin:0 auto 2.5rem auto;
}
.linksrefs .thelogos{
	list-style:none;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:5%;
	padding-top:2rem;
}
.linksrefs .thelogos li{
	margin-bottom:6%;
}
.backlinks{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	gap:2rem;
	padding:2.5rem 0;
}
#primary{
	padding-top:2rem;
}
.page-id-7 #primary{
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-start;
}
.page-id-7 #primary .portraitimage{
	max-width:34%;
	width:25.25rem;
	padding:.5rem 3.6% 0 3.6%;
}
.page-id-7 #primary #post-7{
	max-width:66%;
	width:895px;
	width:52.8125rem;
	padding:0 100px 0 50px;
	padding:0 3.6%;
}
.pubslists{
	padding-top:3rem;
	padding-bottom:1px; /* just to keep the margin of the dl inside */
}
.autocols{
	column-count:2;
	column-gap:4%;
	margin-bottom:4rem;
}
.twocols{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	margin-bottom:4rem;
}
.contacts.twocols{
	margin-bottom:0;
}
.column{
	width:48%;
	width:44%;
}
.contacts .column{
	width:44%;
	margin-bottom:2rem;
}
.contacts .map{
	padding-top:2rem;
}

#colophon .inner{
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	padding:3.5rem 0 1rem 0;
}
@media(max-width:860px){
	#colophon .inner{
		display:block;
		text-align:center;
		padding:2.4rem 0 .2rem 0;
	}
}

#colophon ul li{
	list-style:none;
	display:inline-block;
}
#colophon ul li:before{
	content:" | ";
	display:inline-block;
	padding:0 1em;
}
#colophon ul li:first-child:before{
	display:none;
}


/* 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.search-form{
	padding-bottom:2rem;
}

/* 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:.875rem;
	color:#fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
	opacity:1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
	font-family:"Montserrat",Arial,sans-serif;
	font-size:.875rem;
	color:#fff;
}


@media (max-width:1000px){ /* temp width */
	#page{
		padding-top:5.75rem !important;
	}
	#masthead{
		position:static !important;
	}
	#masthead .inner{
		height:auto !important;
		min-height:0 !important;
		padding:1.25rem 0;
	}
	#masthead .site-branding{
		width:12.5rem !important;
		margin:0 auto;
	}
	.site-contact a{
		right:auto;
		left:0;
		display:flex;
		align-items:center;
		height:5.75rem;
		padding:1rem 6vw;
		border-radius:0;
	}
	#nav{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:5.75rem;
		min-height:5.75rem;
		transition:height 2.5s ease-in-out 0s;
		overflow:hidden;
		background:#00a19a;
		color:#fff;
		z-index:10001;
	}
	#nav li.current-menu-item a,
	#nav li.current-page-ancestor a,
	#nav li a:focus,
	#nav li a:hover,
	#nav li a:active{
		color:#fff;
		text-decoration:underline;
	}
	#toggle{
		position:fixed;
		right:6vw;
		top:0;
		display:block;
		width:2.5rem;
		height:5.75rem; /* same height as #nav when #nav is closed */
	}
	.admin-bar #nav,
	.admin-bar #toggle{
		top:32px;
	}
	@media(max-width:782px){
		.admin-bar #nav,
		.admin-bar #toggle{
			top:46px;
		}
	}
	#toggle a{
		display:block;
		width:100%;
		height:100%;
	}
	#toggle a span.burger{
		display:block;
		width:100%;
		height:100%;
		background:url(img/menu.png) transparent no-repeat right center / contain;
	}
	#toggle a.navisopen span.burger{
		background:url(img/close.png) transparent no-repeat right center / contain;
	}
	#navcontent{
		display:none;
	}
	.toggled-on #nav,
	#nav:target{
		height:100%;
		overflow:hidden;
	}
	.toggled-on #navcontent,
	#nav:target #navcontent{
		display:block;
		padding-top:6rem;
		padding-bottom:5rem;
		/* to make sure that even with the admin bar, there will be */
		/* a scrollbar for the last items in the list */
	}
	.site-nav .navi{
		width:100%;
		margin-top:0;
		margin-left:auto;
	}
	ul.nav-menu{
		width:100%;
		text-align:center;
		margin-bottom:1rem;
	}
	.site-nav ul.nav-menu li{
		display:block;
		float:none;
		width:100%;
		margin-left:revert;
		margin-right:revert;
	}
	.site-header ul.nav-menu li a{
		display:block;
		padding:1rem 0;
	}
	@media(max-height:450px){
		.site-header ul.nav-menu li a{
			padding:.5rem 0;
		}
	}
	@media(max-height:340px){
		.toggled-on #nav,
		#nav:target{
			overflow:auto;
		}
	}
	#nav .navisopen,
	#nav:target .navisclosed,
	.toggled-on #nav .navisclosed{
		display:none;
	}
	#nav .navisclosed,
	#nav:target .navisopen,
	.toggled-on #nav .navisopen{
		display:block;
	}
}


@media(max-width:1130px){
	ul.imagelinks{
		font-size:1.2rem;
	}
	ul.buttonlinks{
		font-size:1.1rem;
	}
}
@media(max-width:970px){
	ul.buttonlinks{
		font-size:1.25rem;
	}
	ul.buttonlinks li{
		width:50%;
	}
	ul.imagelinks{
		font-size:1.4rem;
		max-width:31.75rem;
		margin-left:auto;
		margin-right:auto;
	}
	ul.imagelinks li{
		width:100%;
		padding:0;
		margin-bottom:6%;
	}
	.autocols{
		column-count:1;
	}
	.twocols,
	.column{
		display:block;
		width:100%;
	}
	.contacts .column{
		display:block;
		width:100%;
	}
}
@media(max-width:790px){
	h1{
		font-size:2rem;
	}
	.home .page-header h1{
		font-size:2.125rem;
	}
}
@media(max-width:750px){
	h1{
		font-size:1.8rem;
	}
}
@media(max-width:700px){
	.page-id-7 #primary{
		display:block;
	}
	.page-id-7 #primary .portraitimage{
		width:auto;
		max-width:100%;
		padding:.5rem 0 0 0;
		margin-bottom:2rem;
	}
	.page-id-7 #primary #post-7{
		max-width:100%;
		padding:0;
	}
	ul.buttonlinks{
		font-size:1.1rem;
	}
}
@media(max-width:670px){
	h1{
		font-size:1.6rem;
	}
	h1 br{
		display:none;
	}
	.home .page-header h1{
		font-size:2rem;
	}
}
@media(max-width:620px){
	ul.buttonlinks{
		font-size:1rem;
	}
	h2{
		font-size:1.25rem;
	}
}
@media(max-width:550px){
	.home .page-header h1{
		font-size:6vw;
	}
	ul.buttonlinks{
		max-width:31.75rem;
		font-size:1.25rem;
		margin-left:auto;
		margin-right:auto;
	}
	ul.buttonlinks li{
		width:100%;
		padding:0;
	}
}
@media(max-width:400px){
	ul.imagelinks{
		font-size:1.25rem;
	}
}
@media(max-width:360px){
	ul.imagelinks{
		font-size:1rem;
	}
	ul.buttonlinks{
		font-size:1rem;
	}
}