// Colours
$primary: #3B87C7;
$secondary: #3B87C7;
$background: #101C2F;
$border: #BCBCBC;

$textColour: #7B7B7B;
$textDarker: #242331;
$textMedium: #383838;
$errorColour: #ad0000;


$base-font-size: 16px;
@function px2rem($px) {
	@return ($px / $base-font-size) * 1rem;
}
////Font size and line height mixin
@mixin font-size($font-size, $line-height: false) {
	font-size: $font-size; /* #{$font-size} */
	font-size: px2rem($font-size); /* #{$font-size} */
	@if $line-height != false {
		line-height: ($line-height / $font-size); /* #{$line-height} */
	}
}
@mixin transform($attr) {
  -ms-transform: $attr; /* IE 9 */
   	-webkit-transform: $attr; /* Safari */
   	transform: $attr; /* Safari */
}


/******************************************************************************
* * * * * 			  	 					#CUSTOM STYLES FOR CHILD THEME			 	  * * * * *
******************************************************************************/



/******************************************************************************
* * * * * 			  	 					#STYLES FOR COLOUR CHANGE						 	  * * * * *
******************************************************************************/

// Init
body{
	color: $textColour;
}



// Typography
p {
	color: $textColour;
}
.intro {
	color: $textDarker;
}
a {
  color: $primary;
  &:hover, &:focus, &:focus-within {
    color: darken($primary, 10%);
  }
  &:active {
    color: lighten($primary, 10%);
  }
}
.button {
  color: $textDarker;
  &::after {
    background-color: $primary;
  }
}
.button:hover,
.button:focus-within {
  background-color: $primary;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: $textDarker;
}
blockquote p {
  color: $primary;
}
blockquote cite {
  color: $textDarker;
  &::before {
    background-color: $textDarker;
  }
}



// Nav
.top-nav {
  &__logo {
    background-color: opacify(rgba($background, 0.5), 0.4);
  }
}
.top-nav__menu .menu .menu-item {
  a {
    color: white;
  }
  &.current-menu-item > a::after,
  &.current_page_ancestor > a::after,
  &:hover > a::after {
    background-color: white;
  }
}
@media screen and (min-width: 1200px) {
  .top-nav__menu .menu .menu-item-has-children > a::before {
    border-color: transparent transparent #ffffff transparent;
  }
  .top-nav__menu .menu .sub-menu {
    background-color: white;
    .menu-title {
      color: $primary;
      a {
        color: $primary;
      }
      a:hover, a:focus-within {
        color: $textDarker;
      }
    }
    .menu-item a {
      color: $primary;
      &:hover {
        color: $textDarker;
      }
    }
  }
}
@media screen and (max-width: 1199px) {
	.menu-main-container::-webkit-scrollbar-thumb {
    background-color: $primary;
  }
  .mobile-menu-button-wrapper {
    background-color: opacify(rgba($background, 0.5), 0.4);
  }
  .top-nav__menu {
    background-color: opacify(rgba($background, 0.5), 0.4);
  }
  .top-nav__menu .menu .sub-menu {
    .menu-item.current-menu-item a,
    .menu-item:hover a {
    	color: $primary;
    }
  }
}
// Nav colours on index, archive, contact page
@media screen and (min-width: 1200px) {
	.blog, .archive, .page-template-tpl-contact {
	  .top-nav .top-nav__logo {
	    background-color: opacify(rgba($background, 1),1);
	  }
	  .top-nav__menu .menu .menu-item a {
	    color: $textDarker;
	    &:hover {
	      color: $primary;
	    }
	  }
	  .top-nav__menu .menu .menu-item.current-menu-item a,
	  .top-nav__menu .menu .menu-item.current_page_ancestor a {
	    color: $primary;
	  }
		.top-nav__useful-links .js-dropdown-title.quick-links {
      color: $textDarker;
    }
	}
}
@media screen and (min-width: 1200px) {
  .top-nav.fixed-header {
    background: $background;
    .top-nav__menu .menu > .menu-item > a {
      color: white;
    }
		.top-nav__menu .menu > .menu-item.current-menu-item > a,
    .top-nav__menu .menu > .menu-item.current_page_ancestor > a,
    .top-nav__menu .menu > .menu-item:hover > a {
      color: $primary;
    }
  }
}
@media screen and (min-width: 1200px) {
  .top-nav__useful-links {
    .js-dropdown.quick-links {
  	  color: $textDarker;
  	}
  	.js-dropdown-title.quick-links {
  		color: white;
  	}
  	.js-dropdown-content.quick-links {
  		li a {
  			color: $textDarker;
  		}
  		li a:hover {
  			color: $primary;
  		}
  	}
  }
}



// Footer
.site-footer {
  background-color: $background;
  color: white;
  h4, a, p {
    color: white;
  }
  a:hover {
    color: $primary;
  }
  a:focus, a:active {
    color: white;
  }
}
.site-footer__social-media a {
  background-color: white;
}
.site-footer__copyright-section {
  border-top: 1px solid rgba(255,255,255,0.2);
}



// Content
article.main {
  ul li, ol li {
    color: $textColour;
  }
  ul li::before {
    background: $primary;
  }
}
.quote-wrapper {
  background-color: white;
}
table {
  thead {
    border: 1px solid #101C2F;
    background-color: #101C2F;
  }
  tbody {
    border: 1px solid $border;
  }
  td {
    color: #383838;
    border: 1px solid $border;
  }
  th {
    color: white;
    background-color: #101C2F;
    border-right: 1px solid $border;
  }
  tbody tr:nth-child(even) td {
    background-color: #F5F5F5;
  }
}



// Home
.notification-bar {
  background: $background;
}
.news-slider__details {
  background-color: white;
  .meta-date, .meta-category {
    color: $textDarker;
  }
  .meta-category {
    color: #8D8D8D;
  }
  .slick-dots li button::before {
    background-color: #D8D8D8;
  }
  .slick-dots li.slick-active button::before {
    background-color: $primary;
  }
}
.calendar-block {
  background-color: $primary;
  color: white;
  p {
    color: white;
  }
  h4 {
    color: white;
  }
}



// News
.featured-news {
  .meta-date {
    color: $primary;
  }
  h3 a {
    color: $textDarker;
    &:hover, &:focus-within {
      color: $primary;
    }
  }
}
.news-item {
  .meta-date {
    color: $primary;
  }
  h3 {
    a {
      color: $textDarker;
    }
    a:hover, &:focus-within {
      color: $primary;
    }
  }
}
.related-news {
  background-color: #F1F5F9;
}



// Contact
.contact-wrapper .map__overlay {
  background: linear-gradient(-90deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
}
.staff-list-wrapper {
  background-color: #F1F5F9;
}



// Banner
.banner {
  &__title {
    color: white;
  }
  &__overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, #000000 100%);
  }
  &__overlay--bottom {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
  }
}
.banner--homepage .banner__scroll {
  background-color: $primary;
  color: white;
	&:hover {
		background-color: darken($primary, 10%);
	}
}



// Sidebar
.sidebar-menu__container {
  background-color: white;
  .sidebar-menu {
    .page_item a {
      color: $textDarker;
    }
    .page_item a:hover,
    .page_item.current_page_item a {
      color: $primary;
    }
  }
}



// Form
.gform_wrapper {
	input {
		color: $textDarker;
		border: 1px solid $border;
		&:focus{
			border: 1px solid $primary;
		}
	}
	label {
		color: $textDarker;
	}
	textarea.medium:focus{
		border: 1px solid $primary;
	}
}
.gform_wrapper select{
	color: $textDarker;
	border: 1px solid $border;
	&:focus{
		border: 1px solid $primary;
	}
}
.gform_wrapper .gfield_time_hour input:focus,
.gform_wrapper .gfield_time_minute input:focus {
	border: 1px solid $primary;
}
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_page_footer input.button,
.gform_wrapper .gform_page_footer input[type=submit] {
	color: white;
	background-color: $primary;
	&:hover {
		background-color: darken($primary, 10%);
	}
}
.gform_wrapper div.validation_error {
	color: $errorColour !important;
}
.gform_wrapper li.gfield_error input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]), .gform_wrapper li.gfield_error textarea {
	border: 1px solid $errorColour !important;
}
.gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
	color: $errorColour !important;
}
.js .page-template-tpl-contact {
	.gform_wrapper:not(.gform_validation_error) .top_label .js-float-label .gfield_label,
	.gform_wrapper:not(.gform_validation_error) .js-float-label legend.gfield_label {
		color: $primary;
	}
}



// Slider
.flickity-prev-next-button {
  background-color: $primary;
  &:hover {
    background-color: darken($primary, 10%);
  }
  &:focus {
    background-color: darken($primary, 10%);
  }
  &::before, &::after {
    background-color: white;
  }
}



// Teaser
.teaser__text {
  background-color: white;
  .sub-title {
    color: $primary;
  }
	h2 {
    a {
      color: $textDarker;
    }
    a:hover, a:focus {
      color: $primary;
    }
  }
}



// Pagination
.pagination {
  span {
    color: $textDarker;
  }
  span a {
    color: $textDarker;
  }
  .current, span:hover {
    background: $primary;
    color: white;
  }
  span:hover a {
    color: white;
  }
}



// Accordion
.accordion {
  &__section {
    border: 1px solid $textDarker;
  }
  &__section:last-child {
    border-bottom: 1px solid $textDarker !important;
  }
  &__header {
    h3::before, h3::after {
      background-color: $textDarker;
    }
  }
  &__body {
    .accordion-intro {
      color: $textDarker;
    }
    .name, .title, .email {
      color: $textDarker;
    }
    .email {
      color: $primary;
    }
  }
}



// Calendar
.tribe-mini-calendar thead,
.tribe-mini-calendar-nav td {
	color: $textDarker !important;
	span {
		color: $textDarker !important;
	}
}
.tribe-mini-calendar-nav td {
	border-bottom: 1px solid $background !important;
}
.tribe-mini-calendar th {
	background: $background !important;
	border-color: $background !important;
	border-right: 1px solid white !important;
	color: white !important;
	&:last-child {
		border-right: 1px solid $background !important;
	}
}
.tribe-mini-calendar tbody td {
	background-color: #F5F5F5 !important;
	border-color: $border;
	color: $textDarker !important;
	span, a {
		color: $textDarker !important;
	}
}
.tribe-mini-calendar tbody tr:nth-child(even) td {
	background-color: white !important;
}
.tribe-mini-calendar .tribe-events-present,
.tribe-mini-calendar tbody tr:nth-child(even) .tribe-events-present,
.tribe-mini-calendar .tribe-mini-calendar-today,
.tribe-mini-calendar tbody tr:nth-child(even) .tribe-mini-calendar-today,
.tribe-mini-calendar .tribe-events-has-events:hover,
.tribe-mini-calendar .tribe-events-has-events:hover a:hover {
	background-color: $primary !important;
	color: white !important;
	span, a {
		color: white !important;
	}
	a::before {
		background: white !important;
	}
}
.tribe-mini-calendar .tribe-events-has-events:hover a:hover::before {
	background: white !important;
}
.tribe-mini-calendar .tribe-events-has-events div[id*=daynum-] a:before {
	background: $textDarker !important;
}
.tribe-mini-calendar .tribe-events-othermonth {
	background-color: white !important;
	color: white !important;
	span, a {
		color: white !important;
	}
}
.custom-lightbox__close {
	color: $textDarker;
}
.cal-content > h3 {
  color: $textDarker;
}
.time-event {
  color: $textColour;
}
.cal-content .cal-description {
  color: $textDarker !important;
}
.cal-venue {
	span {
	  color: $textColour;
	}
	p {
		color: $textDarker !important;
	}
}