/* Notes  ________________________________________________________ 
	
	Styles to be moved into SCSS files;  but keep the empty breakpoints here.
	
*/



/* Globals  ________________________________________________________ */

:root {

	--lightgreen: #CBD9D9;
	--midgreen: #324645;
	--darkgreen: #182b2a;
	--lightgrey: #f2f6f6;
	--midgrey: #415757;
  
	--pink: #f05aa0; 
	--pink900: #760037;
	--pink800: #9e084e;  
	--pink700: #c21968; 
	--pink600: #db4189; 
	--pink500: #f05aa0; 
	--pink500: #f36cab; 
	--pink300: #f590bf; 
	--pink200: #fca7cf; 
	--pink100: #ffc5e0; 
	--pink050: #ffe8f2;  
	
	--grey:  #324646;
	--grey900: #040c0c;
	--grey800: #0d1919;
	--grey700: #182b2a;
	--grey600: #263939;
	--grey500: #324646;
	--grey400: #405757;
	--grey300: #587575;
	--grey200: #8da8a8;
	--grey100: #cbd9d9;
	--grey050: #f2f7f7;
	
		
}

.pink { color: var(--pink); }

html, body { font-size: 16px; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
	/* font-family: "Gotham SSm A", "Gotham SSm B"; */
	font-style: normal;
	font-weight: 400;
}

p, ul, ol, blockquote, button, a.button, [type=button], [type=submit], label {  }

p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6 { }
h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; font-weight: bold; color: #050C0C;  font-weight: 500; }
h1 { font-size: 2.8em; }
h2 { font-size: 1.8em; }

a { color: var(--pink); }
a:hover { opacity: 0.8; }

i.fa-solid, svg.fa-solid { margin-right: 0.25em; }

.grid-container { max-width: 1400px; }
.grid-container-narrow { max-width: 1000px; }

a.button, button, input[type=button], input[type=submit] {
	background: var(--pink);
	color: white;
	border-radius: 2px;
}
a.button:hover { opacity: 0.8; background: var(--pink); }

a.button.ghost { color: var(--pink);  background: none;  border: solid 1px var(--pink); }

.close-button, .close-button.medium { background: none; color: white; }

.greybg { background: var(--lightgrey); }


/* Layout  ________________________________________________________ */

body { background: white; }

.main {}
.content {}
.sidebar {}
.sidebar-left {}
.sidebar-right {}
.footer {}


/* Banner  ________________________________________________________ */

.sqe-sd { display: none; } /* TODO: Staging site notice - unhide  when we've fixed the plugin */

header.header.is-stuck { min-height: 100px !important; z-index: 100 !important; }


.header__inner { background: none; color: white; }
.header__inner a { color: white;  text-decoration: none; }
.header__inner #logo img { width: 170px; }

.nav--main .menu a { font-family: 'Roboto', sans-serif; font-size: 1.1rem; }
.nav--main .menu > .current-menu-item > a, .menu .is-active > a { color: var(--pink); }
.nav--main .sub-menu .current-menu-item a { border: 0; }

.nav--main .menu a[href="#"]{
    cursor: default;
}

.nav--main .sub-menu { background: black; width: auto;  left: auto;  right: auto;  padding: 1rem 2rem;  z-index: 500;   }
.nav--main .sub-menu__arrow { border-color: black; }
.nav--main .sub-menu li { justify-content: flex-start;  margin-bottom: 0.5rem; }
.nav--main .sub-menu li:last-child { margin-bottom: 0; }
.nav--main .sub-menu a { margin-bottom: 0; }

.breadcrumbs { margin-bottom: 1.5em; }

.off-canvas { background: var(--grey900); }
/* .off-canvas.position-right { width: 300px; } */
ul.hamburger {}
ul.simple.hamburger > li { font-weight: bold;  margin-bottom: 1em; }

ul.simple.hamburger ul.sub-menu { border-top: solid 1px white;  margin: 0.5rem 0 0 0;  padding: 0.5rem 0 0 1.25rem;  }
ul.hamburger li li { font-weight: normal; }
ul.hamburger li a { text-decoration: none; color: white;  }
ul.hamburger li a:hover { /* background: var(--grey400);  */}

#searchbar {
	background: var(--grey900);  color: white;  padding: 1rem;
	position: absolute;  top: 0; z-index: 50;
	width: 100%;
	display: none;
}



a.search-button { padding: 0.6rem; }
.search-form .input-group { border: 0; }
.search-form .input-group-label { border: solid 1px white; color: white; font-weight: bold; margin-right: 0.25rem; border: 0;  }
.search-form .input-group-field {  background: white; color: var(--grey400); font-size: 1.1rem;  padding: 1rem;  }
.search-form .input-group-button { border: solid 1px var(--pink); }


/* Related content  ________________________________________________________ */

section.related { background: var(--lightgreen);  padding-top: 1.5rem;  padding-bottom: 1.5rem;  }
section.related h2 { margin: 0; }


/* Footer  ________________________________________________________ */

.footer {}
.footer-top { background: var(--midgreen); color: white; font-size: 0.8em; font-weight: 300;  padding: 1.5em; }
.footer-bottom { background: var(--grey900); color: white; font-size: 0.8em; font-weight: 400; padding: 1em; }

.footer h3, .footer-top a, .footer-bottom a { color: white; }

.footer h3 { font-size: 1.4em; font-weight: 500; margin-bottom: 0.75rem;  }

.footer-menu-wrapper ul.simple li { margin: 0; }
.footer-menu-wrapper ul.simple li a { text-decoration: none; }

.footer ul.social.menu {  }
.footer ul.social.menu li { margin: 0 0.5em; }
.footer ul.social.menu li a { padding: 0; font-size: 3em; }

ul.footer-logos li {  margin: 0.75rem; }
ul.footer-logos a { display: inline-block; }
ul.footer-logos img { height: 80px; width:auto; }

/* .footer .button { background: #CBD9D9;  color: #324646; } */

.footer .button {
        background-color: var(--pink);
    }

/* Cards & callouts  ________________________________________________________ */

a.card:not(.card-white), .callout { box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1); }

a.card:not(.card-small) { height: 100%; }

a.card, .featured-boxes a { text-decoration: none;  }

a.card:not(.card-white):not(.card-shadow) .card-section, .callout { 
	background: var(--lightgrey); 
	}
	
a.card.card-white { border: none; }
	
a.card:not(.card-shadow) .card-section, .callout {
	border-left: solid 3px var(--pink);
}

.card.card-shadow {
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}

.card-section { padding: 0.75rem 1rem; }
.card-section span { display: block; }
span.name { font-weight: bold; }
span.excerpt { margin-top: 1rem; font-size: 90%; }

.card.card-small { border: 0; }
.card-small img { width: 100px;  float: right;  margin: -1rem -1rem -1rem 0; }

.callout { margin: 0 0 1.5rem; }

blockquote, blockquote:not(.blockquote--simple) { 
	background: white;
	font-style: normal;  font-size: 1em; 
	color: var(--midgrey); border: none;
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.07);
	padding: 1.5rem;
	  }
blockquote .source { font-weight: bold;  font-size: 90%;  margin-top: 1.5rem;  color: black;  display: block; }

blockquote i.fa-solid { color: var(--pink);  font-size: 2.4rem;  font-weight: bold; }
blockquote i.fa-quote-left { float: left;  margin: 0 1rem 1rem 0; }
blockquote i.fa-quote-right { float: right;  margin: 1rem 0 0 1rem; }


.cta { margin: 2rem 0; }
.cta > .grid-container > .grid-x { background: var(--grey700); }

.cta .category { margin-bottom: 1.25rem; }

.cta, .cta h2 { color: white;  }

.cta .padding { padding: 2rem; height: 100%; display: flex;   flex-direction: column  }
.cta .text-button { margin-top: auto; }
.cta .text { margin-bottom: 1rem; }




/* Lists & grids  ________________________________________________________ */

ul ul, ol ul, ul ol, ol ol {
	margin-bottom: 1.25rem;
}

ul.simple { list-style: none;  padding: 0;  margin: 0 0 1em; }
ul.simple li { list-style: none; padding: 0;  margin: 0 0 0.25em; }


ul.spacing li { margin-bottom: 1em; }

ul.programme li { margin-bottom: 1em; padding-bottom: 1em;  border-bottom: solid 1px var(--pink); }

ul.menu.share { }
ul.menu.share li { margin: 0 0.5em 0 0; }
ul.menu.share li a { padding: 0;  font-size: 1.8em; }

ul.items {}
ul.items li { margin-bottom: 0.25rem; }
ul.items li a { display: block; background: var(--lightgrey); padding: 0.5rem 0.75rem; text-decoration: none;  }
ul.items li a span { display: block; }
ul.items .title { }
ul.items .date { color: var(--grey900); }

ul.logos {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 1.5rem;
}

ul.logos li {
	margin-right: 1rem;
	margin-bottom: 1rem;
}
ul.logos li a {}
ul.logos li img { height: 120px; width: auto; }

.single-barrister .sidebar ul.items li { margin-bottom: 0.5rem; }
.single-barrister .sidebar ul.items li a { background: none; padding: 0; }
.single-barrister .sidebar ul.items li a:hover { color: var(--pink); }
.single-barrister .sidebar ul.items li .date { color: white; }



/* Home page  ________________________________________________________ */

.home-banner { 
	background-color: var(--grey700);
	background: url(../img/home.bubbles.large.jpg) center center;
	background-size: cover;
}



.home-text { color: white; }
.home-text span { display: block; }
.home-text span.strapline { font-weight: bold;  font-size: 5.1rem; margin-bottom: 1rem;  line-height: 1.2; }
.home-text span.subtitle { font-size: 1.1rem;  }

/* Post & page  ________________________________________________________ */

.single-post .subtitle, .single-event .subtitle, .single-newsletter .subtitle, .single-video .subtitle {
	margin: -0.75rem 0 3rem; 
	font-size: 1.6rem;
	font-weight: 500;
}
.single-post .subtitle.citation { margin: -0.75rem 0 0.75rem;  font-weight: bold; }

.single-post p.areas-list { margin: -1.5rem 0 3rem; }

.single-post img.wp-post-image { margin: 0 0 1.5rem 1.5rem; }
.single-event img.wp-post-image { margin: 0 0 1rem 1rem;  float: right;  width: 33%; }


.share-wrapper { margin-top: 1.5rem; }
.share-wrapper h2 {
	display: inline-block;
	margin-top: 1rem;
	padding-left: 0.5rem;
	border-left: solid 3px var(--pink);
	font-size: 1rem;
	text-transform: uppercase;
	font-weight: bold;
}


/* Profiles  ________________________________________________________ */


@media (min-width: 1024px) {
	.single-barrister .sidebar.has-testimonials, .single-clerk .sidebar.has-testimonials, .single-staff .sidebar.has-testimonials {
		z-index: 25;
		position: relative;
		margin-top: -9rem;
	}
}

.sidebar blockquote { background: var(--lightgreen); }

.profile-sections-wrapper { background: var(--grey900); padding: 1rem;  margin-bottom: 3rem;  }
.profile-sections-wrapper, .profile-sections-wrapper h2 { color: white;  font-size: 1.4rem;  }

.single-barrister .accordion { background: none; }
.single-barrister  a.accordion-title {
	text-decoration: none;  border: none; border-bottom: solid 1px var(--grey900);
}
.single-barrister a.accordion-title:hover, .single-barrister a.accordion-title:focus { background: none; }

.single-barrister ul.accordion li.is-active a.accordion-title { border-bottom: none; }


.single-barrister .accordion-content {
	background: none;  padding: 1rem; border: 0;
}

.single-barrister .accordion-content p, .single-barrister .accordion-content ul, .single-barrister .accordion-content ol { font-size: 0.9rem; }


/* Tabs & accordions */

ul.tabs { border-bottom: solid 1px var(--lightgreen);  margin-bottom: 1rem; }
li.tabs-title { }
li.tabs-title a { text-decoration: none; color: var(--lightgreen); border-bottom: solid 2px white; }
li.tabs-title.is-active a { color: var(--grey900);  border-color: var(--pink); }


ul.accordion {}
ul.accordion li {}
ul.accordion .accordion-title { padding: 1rem; text-decoration: none; font-weight: bold;  border-color: #EEE; }
ul.accordion .accordion-content { padding: 1rem; border-color: #EEE;  }
ul.accordion .accordion-content p:last-child { margin-bottom: 0; }
ul.accordion :last-child > .accordion-title, ul.accordion :last-child > .accordion-content:last-child { border-bottom-color: #EEE;  }



.profile-sections-wrapper a.accordion-title {  border-color: white; color: white; }
.profile-sections-wrapper ul.accordion li:last-child:not(.is-active) > a.accordion-title { border-color: white; }

.profile-sections-wrapper .accordion-content, .profile-sections-wrapper .accordion-content h2, .profile-sections-wrapper .accordion-content h3, .profile-sections-wrapper .accordion-content h4 { color: white; }



/* Filters & archives  ________________________________________________________ */

section.filters-wrapper {
	background: var(--grey900); 
	color: white;
}
section.filters-wrapper h1, section.filters-wrapper legend, section.filters-wrapper label { color: white; }

section.filters-wrapper label.legend { display: inline-block; font-weight: bold; margin-right: 1rem; }

section.filters-wrapper select { background: white; color: var(--grey900);  }



/* Search results  ________________________________________________________ */

.search-results figure a { display: block; }

.search-results figure img { float: right; width: 100px;  margin: 0 0 1rem 1rem; }

.search-results figure span { display: block; }
.search-results figure span.meta { font-weight: bold; margin: -0.5rem 0 1rem; }


/* Gravity Forms  ________________________________________________________ */

body .gform_wrapper .field_description_below .gfield_consent_description, body .gform_wrapper .gfield_consent_description,
body .gform_wrapper.gravity-theme .gfield_consent_description { 
	border: 0; font-size: 1em; padding: 0;
}

[type='radio'] { margin: 0; }

.gform_wrapper select { background: none; }


/* jQuery Cycle  ________________________________________________________ */

ul.cycle-slideshow { margin: 0; width: 100%;}



/* Foundation breakpoints  ________________________________________________________ */


/* Small __________________ */

@media only screen { 

} /* Define mobile styles */

@media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium __________________ */

@media only screen and (min-width: 40.063em) { 
	
	ul.two-col { column-count: 2; }
	ul.three-col { column-count: 3; }
	
	.medium-align-top { -webkit-box-align: start; align-items: flex-start; }
	.medium-align-bottom { -webkit-box-align: end;  align-items: flex-end; }
	.medium-align-center {
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	
	.page-template-expertise .banner, .page-template-news .banner { min-height: 400px; }
	
	
} /* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large __________________ */

@media only screen and (min-width: 64.063em) { 
	
	.large-align-top { -webkit-box-align: start;  align-items: flex-start; }
	.large-align-bottom { -webkit-box-align: end;  align-items: flex-end; }
	.large-align-center {
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	
	header ul.contact-details { margin-bottom: 0.5rem; }
	/* header ul.contact-details li:first-child { border-right: solid 1px white; } */
	header ul.contact-details li:nth-child(1),
header ul.contact-details li:nth-child(2) {
  margin-top: 0.6rem;
}

	header ul.contact-details li a { padding-top: 0;  padding-bottom: 0; }
	
	
} /* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* X Large __________________ */

@media only screen and (min-width: 90.063em) { 
	
	.x-large-align-top { -webkit-box-align: start;  align-items: flex-start; }
	.x-large-align-bottom { -webkit-box-align: end;  align-items: flex-end; }
	.x-large-align-center {
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	
	
} /* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

/* XX Large __________________ */

@media only screen and (min-width: 120.063em) { 
	
	.xx-large-align-top { -webkit-box-align: start;  align-items: flex-start; }
	.xx-large-align-bottom { -webkit-box-align: end;  align-items: flex-end; }
	.x-large-align-center {
	    -webkit-box-pack: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	}
	
	
} /* min-width 1921px, xxlarge screens */