@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

/* CSS variables */
:root {
  --border-style: 1px solid #999;
  --small: clamp(0.8rem, 1.5vw, 1.3rem);
  --sans: "Lato", sans-serif;
}

/* CSS reset */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  color: black;
  background: #fff;
}

/* Makes the jump links smooth */
html {
  scroll-behavior: smooth;
}

/* text and button styles */

.bold {
  font-weight: 700;
}

.center {
  text-align: center;
}

.italic {
  font-style: italic;
}

.sans {
  font-family: "Lato", sans-serif;
}

.xx-large {
  font-size: clamp(2rem, 5vw, 5em);
}

.x-large {
  font-size: clamp(1.1rem, 2.8vw, 2.3em);
}

.large {
  font-size: clamp(1.1rem, 2vw, 1.8em);
}

.medium {
  font-size: clamp(1rem, 1.8vw, 1.6rem);
}

.small {
  font-size: var(--small);
}

.x-small {
  font-size: clamp(0.7rem, 1vw, 1rem);
}

.uppercase {
  text-transform: uppercase;
}

.button {
  padding: 0.4em;
  border: 1px solid black;
  border-radius: 50px;
  width: clamp(7em, 10vw, 10em);
  text-align: center;
  background-color: white;
}

.dark {
  background-color: black;
  color: white;
}

/* wrapper */

.wrapper {
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
}

/* header and footer styling */

/* Desktop styling */

header,
footer {
  padding: 1.5em;
}

header,
.footer-layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

address,
nav {
  display: flex;
  gap: 2em;
  justify-content: space-between;
}

address a {
  font-style: normal;
}

a {
  color: black;
  text-decoration: none;
}

.icon {
  display: none;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
}

/* footer styling with socials (based on https://www.w3schools.com/howto/howto_css_sticky_social_bar.asp )  */

footer ul {
  list-style-type: none;
}

.socials {
  justify-self: end;
}

/* Style the icon bar links */
.icon-bar a {
  /* display: block; */
  text-align: center;
  padding: 0.5em;
  transition: all 0.3s ease;
  color: white;
  font-size: var(--small);
}

/* Style the social media icons with color */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3b5998;
  color: white;
}

.twitter {
  background: #55acee;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

/* Mobile styling for header and footer */

@media (max-width: 40em) {
  .text {
    display: none;
  }

  .icon {
    display: block;
  }

  address,
  nav {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0.1em;
  }

  address a,
  nav a {
    justify-self: right;
  }

  header {
    padding: 0.4em;
    display: grid;
    grid-template-columns: auto 5em 12em;
    justify-content: normal;
  }

  .footer-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2em;
  }

  .affiliations {
    order: 1;
    grid-column: 1/3;
  }
}

/* hero styling */

.hero {
  position: relative;
}

.hero h1 {
  position: absolute;
  background-color: #000000a6; /*the opacity is 65%, alpha channel is modified */
  width: 30%;
  top: 18%;
  right: 5%;
  color: white;
  padding: 0.8em;
  line-height: 1.1;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

.hero-image {
  width: 100%;
}

.hero-caption-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 1.3em;
  background-color: #d0c19d;
}

@media (max-width: 40em) {
  .hero h1 {
    width: 40%;
    top: 10%;
  }

  .hero-caption-container {
    padding: 0.5em;
    gap: 0.6em;
    flex-direction: column;
  }
}

/* technique for putting line between flex-box items from https://ishadeed.com/article/flexbox-separator */

.line-between {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 1.3em;
}

.line-between::before {
  align-self: stretch;
  content: "";
  border: 1px solid black;
}

.line-between p,
.line-between h2 {
  order: -1;
}

@media (max-width: 40em) {
  .line-between {
    gap: 0.5em;
    padding: 0.5em;
  }
}

/* end technique */

/* styling for profile section */

.profile {
  display: flex;
  padding: 1.5em;
}

.profile > * {
  flex: 1;
}

.profile-text {
  padding-right: 3em;
}

.profile-text h2 {
  margin-bottom: 0.7em;
}

.profile-figure img {
  opacity: 65%;
}

.image-credit {
  padding: 0.6em;
}

@media (max-width: 40em) {
  .profile-text {
    padding-right: 1.5em;
  }
}

/* styling for the home page gallery */

.home-gallery {
  max-width: 70vw;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 6em;
  border-bottom: var(--border-style);
}

.home-gallery h2 {
  padding-bottom: 0.5em;
  border-bottom: var(--border-style);
  margin-top: 3em;
  margin-bottom: 1em;
}

.home-gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5vw;
}

.home-gallery-container img {
  border-radius: 30px;
}

.home-gallery-container a {
  grid-column: 1/4;
  justify-self: end;
}

@media (max-width: 40em) {
  .home-gallery {
    max-width: 80vw;
  }
}

/* call to action styling */

.cta {
  margin-top: 3em;
  margin-bottom: 3em;
  width: 35%;
  margin-left: auto;
  margin-right: auto;
}

.cta a {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 40em) {
  .cta {
    width: 40%;
  }
}

/* Gallery page about section styling - mobile first */

.about h2 {
  margin-top: 2em;
}

.about p {
  width: 70%;
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
}

/* Gallery page gallery grid styling - mobile first */

.gallery {
  max-width: 90%;

  margin-left: auto;
  margin-right: auto;
}

.gallery h1 {
  margin-top: 2em;
  margin-bottom: 0.5em;
}

hr {
  border-top: var(--border-style);
}

.grid {
  margin-top: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4em;
}

.grid hr {
  grid-column: 1/3;
  margin-top: 1em;
}

.product-card > * {
  padding: 0.5em;
}

.product-card div {
  height: 50%;
}

.desktop {
  display: none;
}

article img {
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Desktop */
@media (min-width: 40em) {
  .about p {
    width: 52%;
  }

  .gallery {
    max-width: 80%;
  }

  .grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 7em;
  }

  .grid hr {
    grid-column: 1/4;
  }

  .mobile {
    display: none;
  }

  .desktop {
    display: block;
  }
}

/* Enquiries page styling */

.enquiries-wrapper {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
}

.query,
.mailing-list {
  padding-bottom: 4em;
  margin-bottom: 3em;
  border-bottom: var(--border-style);
}

/* Form styling */

form > * {
  display: block;
}

label {
  padding-top: 1em;
}

input {
  padding: 0.3em;
  width: 100%;
}

textarea {
  width: 100%;
  height: 200px;
  resize: none;
}

form button {
  margin-top: 1em;
  margin-left: auto;
}

@media (min-width: 40em) {
  .enquiries-wrapper {
    max-width: 80%;
  }

  form {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2em;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: 1.5em;
  }

  label {
    grid-column: 1/2;
    padding-top: 0.3em;
  }

  input,
  textarea {
    grid-column: 2/3;
  }

  form button {
    grid-column: 2/3;
    justify-self: end;
  }
}

/* Chart section styling */

.chart {
  padding-bottom: 8em;
  border-bottom: var(--border-style);
}

.chart h2 {
  text-align: left;
}

.chart h3 {
  font-weight: 300;
  font-size: var(--small);
  margin-top: 2em;
  padding-bottom: 0.8em;
  border-bottom: var(--border-style);
  display: inline-block;
}

table {
  width: 100%;
  margin-top: 1em;
  border-collapse: collapse;
}

th,
td {
  font-family: var(--sans);
  font-size: var(--small);
  font-weight: 300;
  padding: 1em;
  text-align: center;
  width: 33.3%;
}

tr:nth-child(odd) {
  background-color: #eee;
}

tr:first-child {
  background-color: white;
}

/* CSS for thanks.html to centre the thank you message on the page */
.thanks {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.background {
  background-color: #d0c19d;
}

/* Privacy page styling */

.privacy {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  margin-bottom: 6em;
}

.privacy p {
  margin-top: 1em;
}
.privacy ul {
  padding: 1em;
}

.privacy a {
  text-decoration: revert;
  color: revert;
}

.privacy h2 {
  margin-top: 1.5em;
}