/* © Jozef Kowalski, n11078952 - 2024 */

@import url("https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap");

:root {
  --bg-color1: white;
  --bg-color2: #efefef;
  --bg-color3: rgb(174, 174, 174);
  --bg-color4: #d6d6d6;
  --boxshadow-1: #707070;
  --attention-color1: rgb(255, 112, 41);
  --attention-color2: #a7c7e7;
  --lg-1: linear-gradient(
      90deg,
      rgba(56, 189, 248, 0),
      #707070 50%,
      rgba(236, 72, 153, 0)
    )
    1;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-color1);
  color: black;
  overscroll-behavior: none;
  font-family: "SUSE", sans-serif;
  font-weight: 100;
  font-style: normal;
}

img {
  transition: all 0.5s ease;
}

h1,
h2 {
  margin: 0;
}

a {
  color: black;
}

h3 {
  font-weight: 400;
}

header {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 10vh;
  background-color: var(--bg-color2);
  border-bottom: 2px solid;
  border-image: var(--lg-1);
  z-index: 9;
}

header img {
  position: absolute;
  left: 5%;
  display: none;
}

footer {
  position: static;
  background-color: white;
  width: 100%;
  min-height: 5vh;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: var(--bg-color2);
  border-top: 2px solid;
  border-image: var(--lg-1);
  text-align: center;
}

nav a {
  background-color: var(--bg-color1);
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: black;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
}

main {
  min-height: 80vh;
  width: 100%;
  position: relative;
  display: inline-block;
}

#explore {
  margin-bottom: 30px;
}

#feature {
  height: 60vh;
  margin: 10px;
  border-radius: 25px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  overflow: hidden;
}

#feature img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

#description {
  margin: 10px;
  border-radius: 25px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  padding: 20px;
  background-color: var(--bg-color4);
  color: #1b1b19;
}

#pageList {
  margin: 10px;
}

#pageList img {
  object-fit: cover;
  width: 100%;
}

#pageList div {
  max-height: 42.5%;
  margin-bottom: 10px;
  border-radius: 15px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  overflow: hidden;
  line-height: 0;
  position: relative;
}

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

#pageList section:nth-child(2) {
  margin-top: 25px;
}

.pageCapsule {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-color4);
  height: 5vh;
  padding-left: 25px;
  padding-right: 25px;
}

#pageList h2 {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  background-color: var(--bg-color2);
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  width: 40%;
  margin: auto;
  text-align: center;
}

#pageList p {
  font-weight: 400;
  font-size: 28px;
}

.overlayText {
  display: none;
  color: white;
}

#weather {
  background-color: var(--bg-color3);
  min-height: 40vh;
  margin: 10px;
  padding: 15px 0 15px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  border-radius: 25px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
}

#weather div {
  position: relative;
  flex: 0 1 calc(28.5% - 10px);
  background-color: var(--bg-color2);
  padding: 5px;
  border-radius: 15px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
}

#weather img {
  width: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#weather h3 {
  margin: 0;
}

.weather_temperatureLow {
  position: absolute;
  right: 7.5px;
  bottom: 7.5px;
  font-weight: 200;
}

.weather_temperatureHigh {
  position: absolute;
  left: 7.5px;
  bottom: 7.5px;
}

#funFact {
  margin: 30px 0 0 0;
  min-height: 10vh;
  background: rgb(255, 112, 41);
  background: linear-gradient(
    270deg,
    rgba(255, 112, 41, 1) 0%,
    rgba(255, 160, 113, 1) 100%
  );
  padding: 20px;
}

/* Styling for about.html */
#aboutContainer,
#contactContainer,
#referencesContainer {
  background-color: var(--bg-color4);
  margin: 25px;
  padding: 25px;
  border-radius: 25px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  text-align: center;
}

#contactContainer {
  background-color: var(--attention-color1);
}

#referencesContainer {
  background-color: var(--attention-color2);
}

.leftAlign {
  text-align: left;
}

#pageLocation {
  display: block;
  background: rgb(239, 239, 239);
  background: linear-gradient(
    0deg,
    rgba(239, 239, 239, 1) 0%,
    rgba(214, 214, 214, 1) 100%
  );
  padding: 10px;
  padding-left: 50px;
}

#pageLocation p {
  margin: 0;
}

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

#pageLocation a:hover {
  text-decoration: underline;
}

/* Styling for nature and history pages */
.page {
  position: relative;
  height: 20vh;
  border-radius: 25px;
  margin: 15px;
  padding: 10px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  font-size: 0.9rem;
  background-size: cover;
}

.page h2 {
  position: absolute;
  bottom: 10px;
}

#threeSisters {
  background-image: url(../imgs/threesisters.webp);
}

#wategosBeach {
  background-image: url(../imgs/wategos.jpg);
}

#byronTrain {
  background-image: url(../imgs/train.jpg);
}

#byronLighthouse {
  background-image: url(../imgs/byronbay.jpg);
}

.page::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8) 100%
  );
  border-radius: 25px;
}

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

/* Styling for the Three Sisters Page */
#locationPage {
  display: flex;
  align-items: center;
  gap: 25px;
  flex-direction: column;
  position: relative;
  width: auto;
}

#locationPage iframe {
  min-height: 40vh;
  width: 90%;
  height: 100%;
  border-radius: 15px;
  background-color: var(--bg-color4);
  box-shadow: 3px 5px 5px var(--boxshadow-1);
}

#aboutLocation {
  width: 90%;
  border-radius: 15px;
  box-shadow: 3px 5px 5px var(--boxshadow-1);
  background-color: var(--bg-color4);
}

#aboutLocation p {
  font-weight: 300;
}

#aboutLocation h3::before {
  position: relative;
  top: 4px;
}

.grade::before {
  content: url(/imgs/icons/trophy.svg);
}

.distance::before {
  content: url(/imgs/icons/distance.svg);
}

.duration::before {
  content: url(/imgs/icons/time.svg);
}

.accessibility::before {
  content: url(/imgs/icons/accessibility.svg);
}

.items::before {
  content: url(/imgs/icons/bag.svg);
}

.warning::before {
  content: url(/imgs/icons/warning.svg);
}

.summerTemp::before {
  content: url(/imgs/icons/sunny.svg);
}

.winterTemp::before {
  content: url(/imgs/icons/winter.svg);
}

.cost::before {
  content: url(/imgs/icons/cost.svg);
}

#aboutLocation * {
  margin: 15px;
}

#aboutLocation b,
#aboutLocation a {
  margin: 0px;
  padding: 0;
}

#featuredPhoto {
  min-height: 40vh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#featuredPhoto img {
  height: 100%;
  width: 100%;
}

#photoGallery {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
}

#photoGallery img {
  width: auto;
}

/* Media Queries to assist with responsivity */
@media (min-aspect-ratio: 1/1) {
  #explore {
    float: left;
    width: 50%;
  }

  #mainContent {
    float: right;
    width: 50%;
  }

  #pageList div {
    max-height: 35vh;
  }

  #pageList h2 {
    display: none;
  }

  #pageList img:hover {
    filter: blur(4px);
  }

  #historyCapsule:hover .overlayText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }

  #natureCapsule:hover .overlayText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }

  #weather div {
    flex: 0 1 20%;
  }

  #weather img {
    width: 50px;
  }

  #funFact {
    margin: 30px 0 10px 10px;
  }

  #aboutPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
  }

  #aboutContainer,
  #contactContainer,
  #referencesContainer {
    text-align: left;
    width: 50%;
  }

  #pageLocation {
    padding-left: 5%;
  }

  #categoryPage {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .page {
    height: 30vh;
    width: 30vw;
    transition: all 0.5s ease;
  }

  .page:hover {
    height: 35vh;
    width: 35vw;
  }

  #locationPage {
    display: block;
    height: 100vh;
  }

  #locationPage iframe {
    margin: 2.5%;
    width: 45%;
    max-height: 30%;
    float: right;
    border-radius: 15px;
    background-color: var(--bg-color4);
    box-shadow: 3px 5px 5px var(--boxshadow-1);
  }

  #aboutLocation,
  #featuredPhoto {
    margin: 2.5%;
    width: 45%;
    height: 30%;
    border-radius: 15px;
    box-shadow: 3px 5px 5px var(--boxshadow-1);
    background-color: var(--bg-color4);
    float: left;
  }

  #aboutLocation {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  #photoGallery {
    flex-direction: row;
    flex-wrap: wrap;
    float: right;
    margin: 2.5%;
    width: 45%;
    border-radius: 15px;
    box-shadow: 3px 5px 5px var(--boxshadow-1);
    background-color: var(--bg-color4);
    overflow: hidden;
  }

  #photoGallery img {
    width: 50%;
  }
}

@media (width >= 1050px) {
  #pageList img {
    transform: translateY(-20%);
  }

  header img {
    display: block;
  }
}