/***************************************************/ 
/* VARIABLES  */
/***************************************************/

@font-face {
  font-family: gillsansMT;
  src: url(Assets/Fonts/gillsansmtpro-light-webfont.ttf);
}

:root {
    --ghost: rgba(255, 255, 255, 0.7);
    --c-red: #912338;
    --c-red-dark: #7a1d2e;
    --c-blue: #0072a8;
    --c-dark-blue: #004085;
    --c-turquoise: rgb(5, 125, 120);
    --c-turquoise-light: rgb(49, 138, 134);
    --c-turquoise-dark:rgb(4, 82, 79);
    --light-grey: #e5e5e5;
    --medium-grey: #ddd;
    --dark-grey: rgb(53, 53, 53);
    --container-max:940px;
    --footer-max:1200px;
  }

/***************************************************/ 
/* CSS RESET piccalil.li/blog/a-modern-css-reset/  */
/***************************************************/

/* Box sizing rules use border box instead of content box (default)  so any border or padding added inside the container is absorbed by the box, not added to the size of the container*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select,
address {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/********************************/
/*BASIC TEMPLATE                */
/********************************/

body {
  font-family: Arial; 
  font-size: 1.1em;
}

h1, h2, h3, h4, h5, h6, nav, .page-navigation {
  font-family: 'gillsansMT', Arial, 'Trebuchet MS', sans-serif;
  letter-spacing: 0.2ch;
}

li {
  padding: 0.25em;
  /*letter-spacing: 0.2ch;*/
}

.title {
  text-transform: capitalize;
}

a {
  text-underline-offset: 0.15em;
  color: black;
}

a:hover, a:active {
  color: var(--c-dark-blue);
}

a.btn {
  text-decoration:none;
  border: 1px solid var(--c-mediumgrey);
  padding: 0.9em 1em 1em 1em;
}

a[target="_blank"] {
  position: relative;
  margin-right: 10px;
}

a[target="_blank"]:after {
  position: relative;
  top: 0px;
  right: -3px;
  content: "\1f855"; 
 /*  content: "\1F865"; */
  font-size: 18px;
  color: black;
  line-height: 3px;
  height: 7px;
  width: 7px;
  /*border-right: 3px solid var(--light-grey);
  border-top: 3px solid var(--light-grey);
  */
}
a[target="_blank"]:before {
  position: relative;
  top: 4px;
  right: -20px;
  content: " ";
  /*border: 1px solid black;
  width: 12px;
  height: 12px;
  */
}


main :is(h2, h3, h4):not(:first-child){
  margin-top: 3em;
}

main :is(h2, h3, h4) {
  margin-bottom:1em;
}

main p {
  line-height: 1.7;
  letter-spacing: 0.08ch;
}

main p + p {
  padding-top: 1em;
}



/* screen reader only text from https://css-tricks.com/inclusively-hidden/ */
.sr-only:not(:focus):not(:active){
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.container, header, nav {
  width: min(100% - 3rem, var(--container-max, 60ch));
  margin-inline: auto;
  display: grid;
}

/* HEADER */

header {
  height: 10rem;
}

.logo {
  padding-top:1em;
}

.site-title {
  font-family: 'gillsansMT', Arial, 'Trebuchet MS', sans-serif;
  font-size: 1.8em;
  font-weight:500;
  letter-spacing:0.08ch;
}

.background {
  height: max-content;
  background: linear-gradient(45deg, var(--c-turquoise-light), var(--c-turquoise-dark));
}

.hero {
  display:grid;
  grid-template-areas:"hero";
  height:65vh;
  max-height:300px;
  align-items:center;
}

.hero > * {
  grid-area: hero;
}

.hero img {
  object-fit:cover;
  height:min(65vh, 300px);
  width:100%;
  filter:brightness(0.45);
}

.hero__content {
  z-index:1;
  text-align:center;
  line-height: clamp(4rem, 4vw, 7rem);
}

.hero__content h1 {
  color:#fff;
  font-size: clamp(2rem, 3vw, 3rem);
  text-transform: uppercase;
}

/* List styling for navigation */
.navigation {
  background-color:var(--dark-grey);
}

.navigation nav {
  text-transform:uppercase;
  color:#fff;
  height:max-content;
  display:grid;
  grid-template-columns: 11fr 1fr;
}

.navigation nav a {
  color:#fff;
  text-decoration:none;

}

.navigation nav li:first-child {
  margin-left:-1em;
}

.navigation nav ul, ul.crumbs, .page-navigation ul {
  margin:0;
  padding:0;
}

.navigation nav li, .crumbs li, .page-navigation li {
  list-style-type: none;
  display: inline-block;
}

.crumbs li:not(:last-child)::after {
  content:" / "
}

nav li a {
  padding: 0.9em 1em 1em 1em;
  display:flex;
  justify-content:center;
  align-items:center;
}


nav li:hover {
  background-color:#fff;
}

nav li:hover a {
  color:#000;
}

nav #search {
  justify-self:end;
  background-color:var(--c-red);
  width:3em;
}

nav .search:hover {
  background-color:var(--c-red-dark);
}

svg {
  height:1.8rem;
  margin:.5rem .6rem 0 .6rem;
}

nav img {
  fill:#fff;
  justify-self:end;
  height:2rem;
  margin: .9rem .6rem 0 .6rem;
}

#dropdown-search {
  background-color: var(--medium-grey);
  height:3.5rem;
  display:none;
}

#dropdown-search form.container {
  display:grid;
  grid-template-columns: 3fr 1fr 1fr;
  height:2em;
  padding-top:20px;
}

#dropdown-search .search-box {
  display:inline;
  line-height:0.2;
}

#dropdown-search input[type=text]  {
  border:0;
  width:80%;
  font-size:1.5em;
  color: var(--dark-grey);
  background-color:var(--medium-grey);
}

#dropdown-search input[type=radio] {
  height:1em;
  width:1em;
  border-radius:1em;
  margin:0.2em;
  background-color: var(--dark-grey);
  border: 1px solid #aaa;
  border-radius: 20px;
  float: left;
  display: block;
  margin-right: 0.5em;
}

#dropdown-search label {
  margin:5px;
}

/*#dropdown-search .icon {
  color:#000;
  display:inline;
  font-size:2em;
}
*/
.closed a {
  content: url('Assets/Images/search-svgrepo-com.svg');
}

.page-navigation {
  height: max-content;
  background-color: var(--light-grey);
  font-size: 1em;
  font-weight:700;
}

.page-navigation li {
  height: max-content;
  background-color: var(--light-grey);
  padding: 0.6em 2em 0.6em 0;
  text-decoration: none;
}
.page-navigation li::after {
  content: url('');
}

/* MAIN PAGE CONTENT */
main {
  color: var(--dark-grey);
  background-color: rgb(248,245,244);
  padding-bottom: 2em;
}

section {
  margin-top:2em;
}

h2 + section {
  margin-top:0;
}

a.btn {
  text-decoration:none;
  padding:.5em .8em;
  cursor:pointer;
  margin:2em;
}

a.btn-large {
  text-transform: uppercase;
  letter-spacing:0.1em;
}

a.btn-blue {
  background-color:var(--c-dark-blue);
  color:#fff;
}

a.btn-blue:hover {
  background-color:var(--c-blue);
  color:#fff;
}

a.center {
  margin-left:auto;
  margin-right:auto;
}

a.btn-ghost {
  border:1px solid #fff;
  color:#fff;
}

a.btn-ghost:hover {
  background: rgba(0,0,0,0.5);
} 


/* TAB Navigation*/

.tab-menu{
  margin-top: 10px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tab-menu-element{
  color: #000;
  font-family: 'gillsansMT', Arial, 'Trebuchet MS', sans-serif;
  letter-spacing: 0.2ch;
  font-size: x-large;
  font-weight: bold;
  text-decoration: none;
  border-bottom: #ddd solid 5px;
}

.tab-menu-element-active{
  border-bottom: #912338 solid 5px;
}



/* FOOTER */


#backtotop {
  display: none;
  position: fixed;
  z-index: 99;
  bottom: 1.2em;
  right: 1.2em;
  cursor: pointer;
  background-color:#000;
  color:#fff;
  height: 3em;
  width: 3em;
  border-radius:0.5rem;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.35);
  transition: background-color 0.1s linear;
}

@media only screen and (max-width: 600px) {
  .site-title {
    font-family: 'gillsansMT', Arial, 'Trebuchet MS', sans-serif;
    font-size: 1.2em;
    font-weight:500;
    letter-spacing:0.08ch;
  }
}