/* Custom CSS code for home page only */

/* ---- VARIABLES ---- */

:root {
  --body-background-color: #f8f8f8; /* Override theme default */
  --gradient-australia: linear-gradient(135deg, #006A4E 0%, #228B22 30%, #32CD32 60%, #FFD700 100%);
  --home-custom-partial-heading-color: linear-gradient(45deg, #215DEE 0%, #6E36FF 5%, #B61CFF 20%);
  --home-custom-partial-header-text-color: #6e6e73;
  --home-custom-partial-header-strong-color: linear-gradient(45deg, #d62839 0%, #f77f00 50%, #b34700 100%);
  --home-custom-partial-swiper-card-text-color: #6e6e73;
  --home-custom-partial-swiper-card-strong-color: linear-gradient(45deg, #0d99c8 0%, #3f6be0 50%, #243cbf 100%);
}

html[data-theme=dark] {
    --body-background-color: #100F15; /* Override theme default */
    --home-custom-partial-header-text-color: #bbb;
    --home-custom-partial-swiper-card-text-color: #bbb;
    --home-custom-partial-header-strong-color: linear-gradient(45deg, #FF6B6B 0%, #FFD93D 100%);
    --home-custom-partial-swiper-card-strong-color: linear-gradient(45deg, #12c2e9 0%, #5a82f0 50%, #2f4de0 100%);
}

/* ---- HERO INTRO ---- */

@media (max-width: 576px) {
  .hero-intro-content .heading-large {
    font-size: 2rem;
  }  
}

.site-hero h1 {
  margin: 10px 0px;
}

.site-hero h1:last-child {
  margin-bottom: 40px;
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .site-hero .australia-gradient span {
    background-image: var(--gradient-australia);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

/* Hides the CTA button */
.cta-wrapper {
  display: none;
}

/* ---- HERO IMAGE ---- */

.hero-image-container {
  width: 100%;
  max-width: 2600px;
  height: 600px;
  margin: 0 auto;
  background-image: image-set(
    url("../images/hero-image.jpg")
        1x,
    url("../images/hero-image@2x.jpg")
        2x,
    url("../images/hero-image@3x.jpg")
        3x
  );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

@media (min-width: 2600px) {
  .hero-image-container {
    border-radius: 10px;
  }
}

@media (max-width: 576px) {
  .hero-image-container {
    max-width: 600px;
    height: 600px;
    background-image: image-set(
      url("../images/hero-image_small.jpg")
          1x,
      url("../images/hero-image_small@2x.jpg")
          2x,
      url("../images/hero-image_small@3x.jpg")
          3x
    );
  }
} 

/* ---- CUSTOM PARTIALS COMMON FORMATTING ---- */

.custom-partial h1 {
  background-image: var(--home-custom-partial-heading-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3.5rem;
}

.custom-partial h3 {
  font-size: 1.5rem;
  font-weight: normal;
  line-height: 1.5;
  color: var(--home-custom-partial-header-text-color);
  max-width: 950px;
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .custom-partial h3 strong {
    background-image: var(--home-custom-partial-header-strong-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

@media (max-width: 576px) {
  .custom-partial h1 {
    font-size: 2.8rem;
  }

  .custom-partial h3 {
    font-size: 1.3rem;
  }
}

/* ---- CUSTOM PARTIAL: ABOUT ME ---- */

.about-me {
  margin-bottom: 80px;
}

.about-me .swiper {
  user-select: none;
  box-sizing: border-box;
  overflow: visible;
  width: 100%;
  height: 100%;
  padding: 0px 0px;
  touch-action: pan-y; /* So vertical page scroll and horizontal swiping play nicely on touch devices */
}

.about-me .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 800px;
  position: relative;
  box-sizing: border-box;
}

@media (max-width: 576px) {
  .about-me .swiper-slide {
    height: 650px;
  }
}

.about-me .swiper-slide-content {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 48px 48px; /* Image width = width of slide - 48px */
  flex-direction: column;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 576px) {
  .about-me .swiper-slide-content {
    padding: 16px; /* Image width = width of slide - 16px */
  }
}

.about-me .swiper-slide-block.card-image {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex; /* Needed to align text to the bottom */
    align-items: flex-end;
    padding: 20px;
    box-sizing: border-box; /* This makes padding count inside the dimensions */
    color: white;
    font-size: 24px;
}

@media (max-width: 576px) {
  .about-me .swiper-slide-block.card-image {
    height: 350px;
    padding: 16px;
  }
}

.about-me .swiper-slide-block.card-text {
    box-sizing: border-box;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0px;
    line-height: 1.7;
    color: var(--home-custom-partial-swiper-card-text-color);
    font-size: 18px;
}

@media (max-width: 576px) {
  .about-me .swiper-slide-block.card-text {
    font-size: 16px;
  }
}

.about-me .swiper-slide-block.card-text a {
  color: #E67E22;
  text-decoration: none;
  border-bottom: 1px solid transparent; /* reserve space */
  padding-bottom: 2px; /* pushes underline down a bit */
  transition: color .2s, border-color .2s;
}

.about-me .swiper-slide-block.card-text a:hover {
  color: #FF8C1A;
  border-bottom: 1px dashed currentColor;
}

@supports (-webkit-background-clip:text) and (-webkit-text-fill-color:transparent) {
  .about-me .swiper-slide-block.card-text strong {
    background-image: var(--home-custom-partial-swiper-card-strong-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.about-me .swiper-slide:first-child .swiper-slide-content {
  padding-left: 0;
}

.about-me .swiper-slide:last-child .swiper-slide-content {
  padding-right: 0;
}

/* Dark theme color changes */
html[data-theme="dark"] .swiper-slide-content .swiper-slide-block.card-text a {
	color: #FFB02E;
}

html[data-theme="dark"] .swiper-slide-content .swiper-slide-block.card-text a:hover {
	color: #FFD36E;
}

/* About me */
.about-me .swiper-slide.intro-aws {
  width: 500px;
}
  
.about-me .swiper-slide.intro-aws .swiper-slide-content .swiper-slide-block.card-image {
  background-image: image-set(
    url("../images/card-about-me.jpg")
        1x,
    url("../images/card-about-me@2x.jpg")
        2x,
    url("../images/card-about-me@3x.jpg")
        3x
  );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.intro-aws {
    width: 300px;
  }

  .about-me .swiper-slide.intro-aws .swiper-slide-content .swiper-slide-block.card-image {
  background-image: image-set(
    url("../images/card-about-me_small.jpg")
        1x,
    url("../images/card-about-me_small@2x.jpg")
        2x,
    url("../images/card-about-me_small@3x.jpg")
        3x
  );
}

}

/* Speaking */
.about-me .swiper-slide.speaking {
  width: 700px;
}

.about-me .swiper-slide.speaking .swiper-slide-content .swiper-slide-block.card-image {
  background-image: image-set(
    url("../images/card-speaking.jpg")
        1x,
    url("../images/card-speaking@2x.jpg")
        2x,
    url("../images/card-speaking@3x.jpg")
        3x
  );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.speaking {
    width: 316px;
  }

  .about-me .swiper-slide.speaking .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-speaking_small.jpg")
          1x,
      url("../images/card-speaking_small@2x.jpg")
          2x,
      url("../images/card-speaking_small@3x.jpg")
          3x
    );
  }
}

/* Udacity */
.about-me .swiper-slide.udacity {
  width: 700px;
}

.about-me .swiper-slide.udacity .swiper-slide-content .swiper-slide-block.card-image {
  background-image: image-set(
    url("../images/card-udacity.jpg")
        1x,
    url("../images/card-udacity@2x.jpg")
        2x,
    url("../images/card-udacity@3x.jpg")
        3x
  );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.udacity {
    width: 316px;
  }

  .about-me .swiper-slide.udacity .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-udacity_small.jpg")
          1x,
      url("../images/card-udacity_small@2x.jpg")
          2x,
      url("../images/card-udacity_small@3x.jpg")
          3x
    );
  }
}

/* Microlearning */
.about-me .swiper-slide.microlearning {
  width: 396px;
}

.about-me .swiper-slide.microlearning .swiper-slide-content .swiper-slide-block.card-image {
  background-image: image-set(
      url("../images/card-microlearning.jpg")
          1x,
      url("../images/card-microlearning@2x.jpg")
          2x,
      url("../images/card-microlearning@3x.jpg")
          3x
    );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.microlearning {
    width: 316px;
  }

  .about-me .swiper-slide.microlearning .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
        url("../images/card-microlearning_small.jpg")
            1x,
        url("../images/card-microlearning_small@2x.jpg")
            2x,
        url("../images/card-microlearning_small@3x.jpg")
            3x
      );
  }
}

/* Hobbies */
.about-me .swiper-slide.hobbies {
  width: 500px;
}

.about-me .swiper-slide.hobbies .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-hobbies.jpg")
          1x,
      url("../images/card-hobbies@2x.jpg")
          2x,
      url("../images/card-hobbies@3x.jpg")
          3x
    );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.hobbies {
    width: 316px;
  }

  .about-me .swiper-slide.hobbies .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-hobbies_small.jpg")
          1x,
      url("../images/card-hobbies_small@2x.jpg")
          2x,
      url("../images/card-hobbies_small@3x.jpg")
          3x
    );
  }
}

/* Random */
.about-me .swiper-slide.random {
  width: 700px;
}
  
.about-me .swiper-slide.random .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-random.jpg")
          1x,
      url("../images/card-random@2x.jpg")
          2x,
      url("../images/card-random@3x.jpg")
          3x
    );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.random {
    width: 316px;
  }

  .about-me .swiper-slide.random .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-random_small.jpg")
          1x,
      url("../images/card-random_small@2x.jpg")
          2x,
      url("../images/card-random_small@3x.jpg")
          3x
    );
  }
}

/* Connect */
.about-me .swiper-slide.connect {
  width: 500px;
}
  
.about-me .swiper-slide.connect .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-connect.jpg")
          1x,
      url("../images/card-connect@2x.jpg")
          2x,
      url("../images/card-connect@3x.jpg")
          3x
    );
}

@media (max-width: 576px) {
  .about-me .swiper-slide.connect {
    width: 316px;
  }

  .about-me .swiper-slide.connect .swiper-slide-content .swiper-slide-block.card-image {
    background-image: image-set(
      url("../images/card-connect_small.jpg")
          1x,
      url("../images/card-connect_small@2x.jpg")
          2x,
      url("../images/card-connect_small@3x.jpg")
          3x
    );
  } 
}

/* Previous and Next buttons */
.about-me .nav-buttons {
  display: flex;
  justify-content: flex-end; /* aligns buttons right */
  gap: .5rem; /* spacing between buttons */
}
  
.about-me .nav-buttons button {
  background: none;
  border: none;
  font-size: 32px;
  color: #3FA9F5; /* bright blue */
  transition: color .2s, text-shadow .2s;
}

.about-me .nav-buttons button:hover:not(:disabled) {
  color: #5BBEFF;
  text-shadow: 0 0 6px rgba(63,169,245,.6);
}

.about-me .nav-buttons button:disabled {
  color: rgba(0,0,0,.25);
}

/* Dark theme color changes */
html[data-theme="dark"] .nav-buttons button:disabled {
  color: rgba(255,255,255,.25);
}