@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* temp xmas styling */
/* .gradient-bg {
  position: relative;
  overflow: hidden;
}

.snowflake {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: fall linear infinite;
}

@keyframes fall {
  to {
      transform: translateY(100vh);
      opacity: 0;
  }
} */
/* End snow effect */

* {
  font-family: "Roboto", sans-serif;
}

/* Glowing button using custom variables */
.glow-btn {
  background: linear-gradient(
    170deg,
    var(--pp-pink-color-hsl),
    var(--pp-pink-color-hsl-gradient)
  );
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 20px; /* Fully rounded button */
  padding: 0.5rem 1.5rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle base shadow */
}

/* Hover effect for refined glow */
.glow-btn:hover {
  box-shadow: 0 0 5px rgba(255, 20, 147, 0.5),
    /* Softer pink glow */ 0 0 15px rgba(255, 20, 147, 0.3); /* Larger diffused glow */
}

/* Active state */
.glow-btn:active {
  transform: translateY(0); /* Remove lift */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Return to subtle shadow */
}

.glow-btn:hover {
  box-shadow: 0 0 5px rgba(255, 20, 147, 0.5),
    /* Softer pink glow */ 0 0 15px rgba(255, 20, 147, 0.3); /* Larger diffused glow */
}

.pioneer-text {
  color: var(--pp-pink-color-hsl-lighter);
}

/* ELEMENT STYLING */
a {
  text-decoration: none;
}
h2 {
  font-size: clamp(2.5rem, 5.5vh, 4rem);
}

/* Hide number input arrows in calc form */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}

input::-webkit-date-and-time-value {
  text-align: left;
}

/* ------------------------------------ */

/* NAV STYLING START */
/* Nav Bbottom border shaddow */
.navbar {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: #141414;
}

/* Remove toggle outline */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
}

/* Nav dropdown background */
.dropdown-menu-dark {
  --bs-dropdown-bg: var(--pp-pink-color-hsl);
  --bs-dropdown-link-active-bg: var(--pp-pink-color-darker);
}

/* Custom background for offcanvas when open */
.offcanvas-custom-bg {
  background-color: #0d0d0d;
  color: #fff;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Targeting the offcaanvas links */
.offcanvas-body ul li a:hover {
  color: var(--pp-pink-color-hsl-lightest);
  text-decoration: underline;
}

footer ul li a:hover {
  color: var(--pp-pink-color-lightest); /* Ensures consistency on hover */
  text-decoration: underline; /* Optional: Adds underline on hover */
}

/* Success message on submission of form */
.form-success-message {
  position: fixed;
  top: 70px; /* Push it below the navbar */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100; /* Higher than navbar */
}
/* Ensure close btn is white */
.btn-close {
  filter: invert(1); /* Makes the default black "X" white */
  opacity: 1; /* Ensures full visibility */
}
/* ------------------------------------ */

/* ************* MAIN PAGE STYLING ***************** */

/* HERO SECTION STYLING */
/* Ghost element to push down content under the nav */
body::before {
  display: block;
  content: "";
  height: 45px;
}

.hero {
  width: 100%;
  height: 100dvh;
}

.hero-img {
  height: 30dvh;
  width: auto;
}

.gradient-bg {
  display: flex;
  background-image: var(--pp-bg-gradient),
    url("https://www.transparenttextures.com/patterns/noise.png");
  background-repeat: no-repeat, repeat;
  background-attachment: fixed;
  background-blend-mode: overlay; /* Ensures noise subtly blends */
  height: 100dvh;
  text-align: center;
  color: white;
}

/* Adjust main font to  */
h1 {
  font-size: clamp(2.75rem, 4.5vw, 4rem);
}

.masthead {
  top: -1rem;
  padding-bottom: 2dvh;
}

.hero-btns {
  padding: 3dvh 3dvh;
}

/* ------------------------------------ */

/* FEATURED ON STYLING */

.radio-4 {
  height: clamp(100px, 42%, 280px);
  width: clamp(100px, 42%, 280px);
}

.the-i {
  height: clamp(100px, 90%, 300px);
}

.forbes {
  height: clamp(200px, 50%, 360px);
  width: clamp(200px, 50%, 360px);
}

.stylist {
  height: clamp(260px, 80%, 450px);
  width: clamp(260px, 80%, 450px);
  margin-top: -1.5vh;
}
.the-sun {
  height: clamp(90px, 40%, 300px);
  width: clamp(90px, 40%, 340px);
}
.techround {
  height: clamp(260px, 75%, 450px);
  width: clamp(260px, 75%, 450px);
}
.hr-grapevine {
  height: clamp(60px, 30%, 250px);
  width: clamp(60px, 30%, 250px);
}
/* ------------------------------------ */

/* CAROUSEL STYLING - START*/
.bg-img-pattern {
  background-image: url("/background.jpg");
}

.bg-img-inverse {
  background-image: url("/public/gradient.jpg");
  background-color: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.swiper {
  height: 300px;
  height: 70dvh;
  max-height: 550px;
  padding: 0 38px;
}

.swiper-wrapper {
  display: flex;
  height: 85%;
  align-items: center;
}

.swiper-slide {
  background: var(--pp-pink-color-hsl);

  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: none;
  max-height: 515px;
  flex-direction: column;
  padding: 4px;
}

.card-image {
  position: absolute;
  top: 10px;
  border-radius: 50%;
  background: var(--pp-pink-color-hsl-lightest);
  width: 120px;
  height: 120px;
  border: solid 2px #ffffffcd;
  margin: 5px 16px;
  font-size: 2.5rem;
}

.card-name-txt {
  position: absolute;
  top: 135px;
  padding: 1dvh 1dvh;
  color: #ffffffcd;
}
.card-title-txt {
  position: absolute;
  top: 180px;
  font-size: 0.8rem;
  padding: 1dvh 1dvh;
  color: #ffffffcd;
}

.rating {
  position: absolute;
  padding-top: 3px;
  top: 205px;
  color: #ffffffda;
}

.card-description,
.card-description-dark {
  font-weight: normal;
  text-align: center;
  margin-bottom: 24px;
  min-height: 120px;
  padding-right: 5px;
  padding-left: 5px;
}

.card-description {
  position: absolute;
  top: 245px;
  color: #ffffffcd;
  font: clamp(0.75rem, 1rem, 1.25rem);
}

.card-description-dark {
  color: #fff;
}

.swiper-button-prev,
.swiper-button-next {
  color: #fff;
  transform: scale(0.8);
  transition: 0.25s;
  position: absolute;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-bullet {
  background: #fff;
  width: 15px;
  height: 15px;
}

/* Specific media query to hide swiper buttons on smaller screens */
@media screen and (max-width: 768px) {
  .swiper {
    width: 100%;
  }
  /* .swiper-button-prev,
  .swiper-button-next {
    display: none;
  } */
}

/* Emojis */
.icon {
  font-size: 4dvh;
}

/* ------------------------------------ */

/* WORK WITH US ACCORDIAN STYLING */
.accordion {
  --bs-accordion-bg: var(--pp-bg-dark);
  --bs-accordion-color: var(--pp-light-grey);
  --bs-accordion-btn-color: #fff;
}

.accordion-button {
  font-size: clamp(0.9rem, 1.2vw, 1.4rem);
}

.accordion-icon {
  font-size: 1.75rem;
}

.accordion-button:not(.collapsed) {
  color: var(--pp-dark-color);
  background-color: var(--pp-pink-color-hsl-lighter);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0
    var(--bs-accordion-border-color);
}

.no-text {
  margin-right: 0.35rem;
}

/* Styling arrows so white unclicked, background when clicked - SVG amended.*/
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* Expanded state: Black arrow (#0D0D0D) when clicked */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d0d0d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

/* ------------------------------------ */

/* BRAND LOGO SLIDER */

@keyframes slide {
  from {
    transform: translateX(0);
    -webkit-transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  }
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 20px; /* Space between text and slider */
  padding: 30px 0;
  background-color: var(--pp-bg-dark); /* Match background color */
  white-space: nowrap;
}

.trusted-text {
  flex-shrink: 0; /* Prevent 'trusted by' from shrinking */
  color: #fff;
  font-weight: bold;
  font-size: clamp(1.4rem, 2.5vw, 2.4rem);
}
.logos {
  overflow: hidden;
  padding: 30px 0;
  white-space: nowrap;
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}

.logos:hover .logos-slide {
  animation-play-state: paused;
}

.logos::before,
.logos::after {
  position: absolute;
  top: 0;
  width: 250px;
  height: 100%;
  content: "";
  z-index: 2;
}

.logos::before {
  left: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0),
    var(--pp-bg-dark)
  );
}

.logos-slide img {
  height: 40px;
  margin: 0 40px;
}

.logo-padding {
  padding: 8px 0;
}

.logos-slide {
  display: inline-block;
  animation: 100s slide infinite linear;
}

.nightMode img[src$=".svg"] {
  filter: invert(1) hue-rotate(180deg);
}

/* Adjusting styling for mobile
  In particular moving the carousel to its own line and adjusting the speed for mobile */
/* @media (max-width: 768px) { */

/* #questions {
      display: block;
      height: auto;
      align-items: initial;
      justify-content: initial;
    }
  
      .logo-container {
      display: flex;
      flex-direction: column; 
      align-items: flex-start; 
      width: 100%;
    }
  
    .trusted-text {
      margin-bottom: 40px;
    }
  
    .pipe {
      display: none;
    }
  
 
    .logos {
      overflow-x: auto;
      max-width: 100%;
      padding: 10px 0;
      white-space: nowrap;
    }
  
    .logos-slide {
      display: inline;
      animation: none !important; 
    }
  
    .logos-slide img {
      margin: 0 20px;
      height: 40px;
      flex-shrink: 0;
    }
  } */
@media (max-width: 768px) {
  #questions {
    display: block;
    align-items: initial;
    justify-content: initial;
  }

  .trusted-container {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .trusted-text {
    margin-bottom: 40px;
  }
  .pipe {
    display: none;
  }

  .logos {
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    padding: 10px 0;
    white-space: nowrap;
  }

  .logos-slide {
    display: inline-flex;
  }

  .logos-slide img {
    margin: 0 20px;
    height: 40px;
    flex-shrink: 0;
  }
}

/* FOOTER STYLING */
a,
.copyright-text {
  text-decoration: none;
  color: #fff;
}

/* Custom styles for app/play store buttons */
.google-play-btn img {
  width: 135px;
  height: auto;
}

.app-store-btn img {
  width: 122px;
  height: auto;
}
/* ------------------------------------ */

/* About Page CSS */

.about-img {
  background-image: url("/js-bg-sharper.jpg");
  background-size: cover;
  background-position: center;
  height: 50dvh; /* Set an appropriate height */
  width: 100%;
}

.h1-about {
  margin-bottom: 0;
  text-align: center;
}

.about-text {
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  padding-bottom: 10px;
}

.about-text-body {
  text-align: center;
  overflow-wrap: break-word;
  line-height: 1.8;
}

/* FAQ */
.h1-faqD {
  font-size: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

.list {
  padding-left: 25px; /* Apply padding to the list itself */
}
.list li {
  list-style-type: disc;
  padding-left: 10px; /* Additional padding for the items */
}

/* Sign in pages */
.destination-logo {
  margin-top: 55dvh;
  padding-bottom: 10px;
}

.pioneer-logo {
  margin-top: 50dvh;
  padding-bottom: 10px;
}

/* Medium Screens */
@media (max-width: 768px) {
  .accordion-button {
    font-size: 1.25rem;
  }

  /* App and Play Store buttons */
  .google-play-btn img {
    width: 110px;
    height: auto;
  }

  .app-store-btn img {
    width: 100px;
    height: auto;
  }

  .about-img {
    height: 30dvh;
    width: 100%;
  }
  :root {
    --pp-bg-gradient: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      #0c0c0c,
      rgba(255, 255, 255, 0.1)
    );
  }
}

/* Infobubble - diabled text */
.info-icon {
  pointer-events: auto; /* This overrides the parent's 'disabled' state */
  cursor: pointer;
}

/* Small Screens */
@media (max-width: 576px) {
  .google-play-btn img {
    width: 90px;
    height: auto;
  }

  .app-store-btn img {
    width: 80px;
    height: auto;
  }

  body::before {
    display: block;
    content: "";
    height: 50px;
  }
}

/* Apply glass effect on medium screens and above */
@media (min-width: 992px) {
  .glass-nav {
    background: rgba(0, 0, 0, 0.85); /* Glass-like background */
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional shadow */
  }
}

/* Amend swiper for mobile landscape */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .swiper {
    height: 100dvh; /* Expand height to make better use of available space */
    padding: 0 20px; /* Reduce padding to maximize space */
  }

  .swiper-slide {
    max-height: 400px; /* Adjust as needed */
    overflow-y: auto; /* Add scroll if content exceeds height */
    padding: 8px; /* Add slight padding for better spacing */
  }

  .card-description {
    min-height: auto; /* Avoid unnecessary height restrictions in landscape */
    padding-top: 1rem;
  }

  #hero {
    .landscape {
      width: 40%;
    }

    .hero-copy {
      font-size: clamp(
        0.9rem,
        1vw,
        1.1rem
      ); /* Slightly smaller text for readability */
    }
  }
}

/* ERORR PAGE */
.error-page {
  height: 100dvh;
  padding-top: 30dvh;
}

.error-btns {
  padding-top: 2rem;
}

.error-page h2 {
  padding-bottom: 1.5rem;
}

@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .destination-logo {
    margin-top: 60dvh;
    margin: ;
  }
  .pioneer-logo {
    margin-top: 50dvh;
    margin: ;
  }
}

@media (min-width: 1200px) {
  /* xl and larger */
  .break-lg {
    display: none;
  }

  .pioneer-logo {
    margin-top: 40dvh;
}