/***************************************************************
Base CSS =======================================================
***************************************************************/
:root {
  /* [Var] Color Palette (Blue-Beige) [--b* or --a*] */
  --color-ocean-light: hsl(204, 90%, 25%);
  --color-ocean-dark: hsl(204, 98%, 15%);
  --color-sky-light: hsl(195, 80%, 90%);
  --color-sky-dark: hsl(190, 85%, 80%);
  --color-sand-light: hsl(47, 80%, 95%);
  --color-sand-dark: hsl(47, 60%, 90%);
  /* [Var] Text (Minor Third 1.2 Scale Rounded Ratio) [--t*] */
  --text-size-sm: 0.8rem;
  --text-size-md: 1rem;
  --text-size-lg: 1.2rem;
  --text-size-xlg: 1.6rem;
  --text-size-title: 3rem;
  /* Others */
  --wave-height: 20px;
  --screen-side-padding: 2rem;
  /* [Fixed] Font (Inter Best Font)[--f*] */
  font-family: "Inter", sans-serif;
  font-feature-settings: "calt", "ss03", "cv02", "cv05", "cv11";
  /* Make sure the scrolling is smooth */
  scroll-behavior: smooth;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: "InterVariable", sans-serif;
  }
}

/* Html Body/Base Background */
html {
  min-width: calc(320px + 2rem);

  .side-padding {
    padding-left: var(--screen-side-padding);
    padding-right: var(--screen-side-padding);
    min-width: 320px;
  }
}

body {
  background: var(--color-sky-dark);
  font-size: var(--text-size-md);
  font-weight: normal;
  color: var(--color-ocean-dark);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Text */
h1 {
  text-transform: capitalize;
  font-size: var(--text-size-title);
  font-weight: bolder;
  margin: 0;
}

h2 {
  font-size: var(--text-size-xlg);
  font-weight: bold;
  margin: 0;
  padding: 0.5rem 0;
}

h3 {
  font-size: var(--text-size-lg);
  font-weight: bold;
  margin: 0;
  padding: 0.5rem 0 0;
}

/* Text Margin and Color */
p {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.5rem 0;
}

a {
  font-weight: bold;
  color: var(--base-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: rgb(from var(--color-ocean-light) r g b);
}

span.inline-block {
  display: inline-block;
  white-space: nowrap;
}

/***************************************************************
[ALL] Navigation Bar Design ====================================
***************************************************************/
.navBar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: hsla(from var(--color-sky-dark) h s l / 0.7);
  border-bottom: hsl(from var(--color-sky-dark) h s l) solid 1px;
  backdrop-filter: blur(8px);
  z-index: 3;

  .logo {
    height: 2rem;
    width: 2rem;
    margin-bottom: -0.6rem;
    margin-top: -0.4rem;
  }

  a {
    font-weight: bold;
  }
}

.navMenu {
  position: fixed;
  top: 0;
  /* Same right as side-padding padding-right */
  right: calc(var(--screen-side-padding) - 1rem);
  display: flex;
  flex-direction: row;
  z-index: 3;

  a {
    padding: 1rem 1rem;
  }

  a:hover {
    background-color: var(--color-sky-light);
  }
}

/* Mobile Version */
@media all and (width < 600px) {
  :root {
    /* TODO: move to its only css file */
    --screen-side-padding: 1rem;
  }

  .navMenu {
    top: 3.5rem;
    /* Same right as side-padding padding-right */
    left: 0;
    right: 0;
    justify-content: space-between;
    padding-left: var(--screen-side-padding);
    padding-right: var(--screen-side-padding);
    z-index: 3;
    background-color: hsla(from var(--color-sky-dark) h s l / 0.7);
    backdrop-filter: blur(8px);
    height: 0;
    overflow-x: hidden;
  }

  .menu-wrapper:has(#toggle-menu:checked) {
    .navMenu {
      height: auto;
      border-top: var(--color-sky-dark) solid 1px;
      border-bottom: var(--color-sky-dark) solid 1px;
    }
  }

  /* For Request Website Section */
  .four-key-areas {
    grid-template-areas:
      "div1"
      "div2"
      "div3"
      "div4"
      "div5";
  }
}

/* Desktop & tablet Version */
@media all and (width >=600px) {
  #toggle-menu-label {
    display: none;
  }

  /* For Request Website Section */
  .four-key-areas {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "div1 div2"
      "div3 div4"
      "div5 div5";
  }
}

/***************************************************************
[ALL] Layout: Page Design (Main) ===============================
***************************************************************/
/* Hero Section Stuff ======================================= */
.hero-section {
  width: 100%;
  /* pt of 3rem to avoid overlap with fixed header */
  padding-top: calc(3rem + 30px);
  padding-bottom: 0;
  background: linear-gradient(var(--color-sky-dark), var(--color-sky-light));

  /* Ensure hero-text is above waves-background */
  .hero-text {
    position: relative;
    max-width: 1000px;
    margin: auto;
    z-index: 2;
  }

  #hero-subheading {
    text-transform: capitalize;
    font-weight: bold;
  }

  p {
    padding-bottom: 2rem;
    width: min(450px, 100%);
    min-width: 320px;
  }
}

.waves-background {
  display: flex;
  flex-direction: column;
  margin-top: -210px;
  position: relative;
  z-index: 1;
}

/* Waves from https://codepen.io/goodkatz/pen/LYPGxQz*/
.waves {
  color: var(--color-ocean-light);
  position: relative;
  width: 100%;
  height: var(--wave-height);
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) var(--wave-height), var(--color-ocean-light) var(--wave-height), var(--color-ocean-light) 100%);
  padding-bottom: 2rem;
  /* Fix for safari gap */
  margin-bottom: -8px;
}

/* Sailboat on the Waves */
#sailboat {
  height: 300px;
  aspect-ratio: 36 / 42;
  bottom: 0;
  align-self: flex-end;
  margin-right: 8px;
  margin-bottom: -20px;
  z-index: 0;
  animation: sailboat-wave 5s ease-in-out infinite;
  transform-origin: 20% 20%;
}

/* Other Section Stuff =================================== */
section {
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#about {
  background-color: var(--color-ocean-light);
  color: var(--color-sand-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  /* No padding-bottom for the curved svg background */
  padding-bottom: 0;

  .goals {
    margin: 1rem 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    div {
      width: 8rem;
      margin: 0 0.5rem;
      margin-top: 1rem;
    }
  }
}

.center-text {
  text-align: center;
}

p.center-text {
  justify-self: center;
  max-width: 780px;
}

#events {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-sand-dark);
  color: var(--color-ocean-dark);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.events-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  justify-items: center;
  max-width: 1000px;

  .event-card {
    display: flex;
    flex-direction: row;
    background-color: var(--color-sand-light);
    justify-content: center;
    align-items: center;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    margin: 0.5rem;

    .date {
      font-weight: bold;
      text-align: center;
      padding-right: 1rem;

      .month {
        color: var(--color-ocean-light);
        padding: 0;
      }

      .day {
        color: var(--color-ocean-dark);
        font-size: 2rem;
        padding: 0;
      }
    }

    .title {
      font-size: var(--text-size-lg);
      font-weight: bold;
      padding: 0;
    }

    .time {
      position: relative;
      padding: 0 0 0 1.8rem;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 1.5rem;
        height: 1.5rem;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6.5V12l3.5 2m5.5-2a9 9 0 1 1-18 0a9 9 0 0 1 18 0'/%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
      }
    }

    .location {
      position: relative;
      padding: 0 0 0 1.8rem;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        width: 1.5rem;
        height: 1.5rem;
        --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M6.72 16.64a1 1 0 0 1 .56 1.92c-.5.146-.86.3-1.091.44c.238.143.614.303 1.136.452C8.48 19.782 10.133 20 12 20s3.52-.218 4.675-.548c.523-.149.898-.309 1.136-.452c-.23-.14-.59-.294-1.09-.44a1 1 0 0 1 .559-1.92c.668.195 1.28.445 1.75.766c.435.299.97.82.97 1.594c0 .783-.548 1.308-.99 1.607c-.478.322-1.103.573-1.786.768C15.846 21.77 14 22 12 22s-3.846-.23-5.224-.625c-.683-.195-1.308-.446-1.786-.768c-.442-.3-.99-.824-.99-1.607c0-.774.535-1.295.97-1.594c.47-.321 1.082-.571 1.75-.766M12 2a7.5 7.5 0 0 1 7.5 7.5c0 2.568-1.4 4.656-2.85 6.14a16.4 16.4 0 0 1-1.853 1.615c-.594.446-1.952 1.282-1.952 1.282a1.71 1.71 0 0 1-1.69 0a21 21 0 0 1-1.952-1.282A16 16 0 0 1 7.35 15.64C5.9 14.156 4.5 12.068 4.5 9.5A7.5 7.5 0 0 1 12 2m0 5.5a2 2 0 1 0 0 4a2 2 0 0 0 0-4'/%3E%3C/g%3E%3C/svg%3E");
        background-color: currentColor;
        -webkit-mask-image: var(--svg);
        mask-image: var(--svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
      }
    }
  }
}

.curved-svg-divider {
  width: 100%;
  height: 2rem;
  /* Fix for safari gap */
  margin-bottom: -8px;
}

#request-website {
  background-color: var(--color-sand-light);
  color: var(--color-ocean-dark);

  .four-key-areas {
    display: grid;
    max-width: 1000px;
    align-self: center;
    margin-left: auto;
    margin-right: auto;

    div:hover {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }
  }

  .div1 {
    grid-area: div1;
  }

  .div2 {
    grid-area: div2;
  }

  .div3 {
    grid-area: div3;
  }

  .div4 {
    grid-area: div4;
  }

  .div1,
  .div2,
  .div3,
  .div4 {
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 0.2rem;
  }

  .div5 {
    grid-area: div5;
    border-radius: 0.5rem;
    padding: 1rem 1rem 1.5rem;
    margin: 1rem 0.2rem 0.2rem;

    background-color: var(--color-ocean-light);
    color: var(--color-sand-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;
    overflow: hidden;
    z-index: 1;
  }

  .div5::before {
    /* rotating shark-circle */
    content: "";
    position: absolute;
    width: 80%;
    aspect-ratio: 1 / 1;
    background-image: url("../assets/shark-circle.png");
    background-size: 100% 100%;
    animation: rotate 60s linear infinite;
    z-index: -1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Button Styles */
button {
  background-color: var(--color-ocean-dark);
  color: var(--color-sand-light);
  font-weight: bold;
  font-size: normal;
  border: none;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: 0.3s;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;

  &:hover {
    background-color: var(--color-sand-light);
    color: var(--color-ocean-dark);
  }
}

#join-us {
  background-image: linear-gradient(var(--color-sky-light), var(--color-sky-dark));
  background-color: var(--color-sky-light);
  color: var(--color-ocean-dark);
}

.accordion-section {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--color-sand-light);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  margin: 1rem auto 0;
  border-radius: 0.5rem;
  /* Hidden for border radius */
  overflow: hidden;
  max-width: 1000px;

  .accordion-question {
    position: relative;
    cursor: pointer;
    font-weight: bold;
    padding: 1rem;
    padding-left: 2.5rem;
    transition: 0.3s;
  }

  .accordion-question::before {
    content: "";
    position: absolute;
    left: 0.75rem;
    transform: rotate(0deg);
    width: 1.5rem;
    height: 1.5rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m2 11l2.05.1a7.96 7.96 0 0 1 3.2-5.54L6.13 3.84c-.27-.48-.13-1.09.37-1.37c.5-.27 1.09-.11 1.37.37l.93 1.82a8.1 8.1 0 0 1 6.4 0l.93-1.82c.28-.48.87-.64 1.37-.37c.5.28.64.89.37 1.37l-1.12 1.72a7.96 7.96 0 0 1 3.2 5.54L22 11a1 1 0 0 1 1 1a1 1 0 0 1-1 1l-2.05-.1a7.96 7.96 0 0 1-3.2 5.54l1.12 1.72c.27.48.13 1.09-.37 1.37c-.5.27-1.09.11-1.37-.37l-.93-1.82a8.1 8.1 0 0 1-6.4 0l-.93 1.82c-.28.48-.87.64-1.37.37c-.5-.28-.64-.89-.37-1.37l1.12-1.72a7.96 7.96 0 0 1-3.2-5.54L2 13a1 1 0 0 1-1-1a1 1 0 0 1 1-1m7.07.35c.13-.61.46-1.15.93-1.56L8.34 7.25a6 6 0 0 0-2.29 3.95zM12 9c.32 0 .62.05.9.14l1.38-2.69C13.58 6.16 12.81 6 12 6s-1.58.16-2.28.45l1.38 2.69c.28-.09.58-.14.9-.14m2.93 2.35l3.02-.15a6 6 0 0 0-2.29-3.95L14 9.79c.47.41.8.95.93 1.56m0 1.3c-.13.61-.46 1.15-.93 1.56l1.66 2.54a6 6 0 0 0 2.29-3.95zM12 15c-.32 0-.62-.05-.91-.14l-1.37 2.69c.7.29 1.47.45 2.28.45s1.58-.16 2.28-.45l-1.37-2.69c-.29.09-.59.14-.91.14m-2.93-2.35l-3.02.15c.22 1.6 1.06 3.01 2.29 3.95L10 14.21c-.47-.41-.8-.95-.93-1.56'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-color: currentColor;
    transition: transform 1s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
  }

  input[type="radio"]:checked+.accordion-question::before {
    animation: wheel-spin-ccw 0.7s cubic-bezier(.4, 0, .2, 1);
    transform: rotate(180deg);
  }

  input[type="radio"]:not(:checked)+.accordion-question::before {
    animation: wheel-spin-cw 0.7s cubic-bezier(.4, 0, .2, 1);
    transform: rotate(0deg);
  }

  .accordion-question:hover,
  input[type="radio"]:focus+.accordion-question {
    background: var(--color-ocean-light);
    color: var(--color-sky-light);
  }

  .accordion-answer {
    height: 0;
    overflow: hidden;
    background: #fff;
    transition: 0.4s;
    padding: 0 1em;
  }

  /* accordion-answer expanded */
  input[type="radio"]:checked+.accordion-question+.accordion-answer {
    height: max-content;
    padding: 1rem;
    transition: 0.4s;
  }
}

#contact-us {
  background-color: var(--color-sky-dark);
  color: var(--color-ocean-dark);
}

.socials {
  fill: var(--color-ocean-dark);
  margin-top: 1rem;

  a:not(:last-child) {
    margin-right: 1rem;
  }
}