/*
Table of contents

1. Variables
2. CSS reset
3. Basic template
4. Header
5. Navigation
6. Layouts
7. Footer
*/

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


@font-face {
  /*Replaces GillSansMTProBoldCondensed*/
  font-family:gill-sans-nova-condensed;
  font-weight: 800;
  src: url(https://use.typekit.net/kmq6huc.css);
}

@font-face {
  /*Replaces GillSansMTProLight*/
  font-family:gill-sans-nova;
  font-weight: 300;
  src: url(https://use.typekit.net/kmq6huc.css);
}

@font-face {
  /*Replaces GillSansMTProMedium*/
  font-family:gill-sans-nova;
  font-weight: 500;
  src: url(https://use.typekit.net/kmq6huc.css);
}

@font-face {
  /*Replaces GillSansMTProBold*/
  font-family:gill-sans-nova;
  font-weight: 700;
  src: url(https://use.typekit.net/kmq6huc.css);
}

@font-face {
  /*Replaces GillSansMTPro and GillSansMTProBook*/
  font-family:gill-sans-nova-condensed;
  font-weight: 400;
  src: url(https://use.typekit.net/kmq6huc.css);
}

: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);
  --c-pink:#b5015b;
  --c-light-pink: #b45986;
  --light-grey: #e5e5e5;
  --medium-grey: #ddd;
  --dark-grey: rgb(53, 53, 53);
  --container-max: 1200px;
  --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,
dt {
  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                */
/********************************/
h1 {
  font-size:2.5rem;
}
h2 {
  font-size:2rem;
}
h3 {
  font-size:1.5rem
}
#card-container h3 {
  font-size:1.25rem;
  font-weight:bold;
}
body {
  font-family: Arial;
  font-size: 1.1em;
}

h1,
h2,
h3,
h4,
h5,
h6,
nav,
.page-navigation {
  font-family: 'gill-sans-nova', sans-serif;
  font-weight:400;
  letter-spacing: 0.1ch;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0 1rem 0;
}

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

.burgundy{
  color: var(--c-red-dark);
}

.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 {
  display: inline-block;
  position: relative;
  top: 0px;
  right: -3px;
  content: url('Images/arrow-NE.svg');
  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{
  margin-bottom: 0em;
}

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

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

main p,
main dt,
main dd,
main li {
  line-height: 1.5;
  letter-spacing: 0.08ch;
  padding-top:1em;
}

main p+p,
main p+dt {
  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: 400 1.8em 'gill-sans-nova', sans-serif;
  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(45vh, 200px);
  width: 100%;
}

.hero__content {
  z-index: 1;
  text-align: center;
  color: #fff;
  line-height: clamp(4rem, 4vw, 7rem);
  /*  width:min(100% - 3rem, var(--container-max, 60ch)); */
    margin-inline:auto;
}

.hero__content h1 {
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  font-weight: bold;
  font-size: clamp(3rem, 3vw, 3rem);
  letter-spacing: 0.2ch;
    
}

.hero__content p {
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
  font-family: 'gill-sans-nova';
  font-size: clamp(1rem, 3vw, 2rem);
  letter-spacing:1px;
}

/* 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;
  padding:0;
  margin:0;
}

.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('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('');
}

#side-nav a {
  text-decoration:none;
}

/* MAIN PAGE CONTENT */

/* to make the containers compatible with the current site */
.medium-container{
  max-width: 944px;
  margin: auto;
}

main {
  color: var(--dark-grey);
 /* background-color: rgb(248, 245, 244); */

}

section {
  margin-top: 2em;
}

h2+section {
  margin-top: 0;
}

a.btn {
 
  padding: .5em .8em;
  cursor: pointer;
 
}

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.btn-red {
  background-color: var(--c-red-dark);
  color: #fff;
}

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

a.btn-grey {
  background-color: rgb(59, 58, 58);
  color: #fff;
  transition: background-color 0.5s ease;
}

a.btn-grey:hover {
  background-color: rgb(36, 34, 34);
}

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);
}

a.bg-pink{
  background-color: var(--c-pink);
  color: #fff;
}

a.bg-pink:hover{
  background-color: var(--c-light-pink);
}

/* TAB Navigation*/

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

.tab-menu-element {
  color: #000;
  font-family: 500 'gill-sans-nova', 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: 'gill-sans-nova', sans-serif;
    font-size: 1.2em;
    font-weight: 500;
    letter-spacing: 0.08ch;
  }
}