/*
  Core styles for the Golabii redesign.

  This stylesheet defines a clean, modern layout with a heavy focus on
  typography and whitespace. Four decorative images are positioned
  around the hero to evoke the floral elixir brand. Responsive rules
  adjust type sizes and image placement on smaller screens.
*/

/* Root variables for easy theming */
:root {
  --primary-font: 'Quicksand', sans-serif;
  --secondary-font: 'Nunito', sans-serif;
  /* Use a soft pastel yellow as the base background colour */
  --background-color: #FFF9E0;
  --text-color: #1e1e1e;
  --accent-color: #d88a32; /* warm saffron tone */
  --button-bg: #1e1e1e;
  --button-text: #ffffff;
  --button-hover-bg: #444444;
}

/* Reset some default margins/padding */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--secondary-font);
  /* Animated pastel background. The background colour is set via CSS variables
     and animated with a keyframe definition below. */
  background-color: var(--background-color);
  color: var(--text-color);
  /* Fade between subtle pastel shades on a slow loop */
  animation: pastelBackground 20s ease-in-out infinite alternate;
}

/* Hero section occupies the full viewport height */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Decorative images. Each image uses a different source via CSS */
.hero .image {
  position: absolute;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 1rem;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  z-index: 0;
  /* White border to separate the images from the page background */
  outline: 6px solid var(--background-color);
}

/* Individual positions and images for each decorative element */
/* Position image1 closer to the centre while still cropping a small portion off the left edge */
.hero .image1 {
  top: -2%;
  left: -10%;
  background-image: url('10c423d293c03bdfa0113836f0656d49.jpg');
}

/* Position image2 near the top‑right but bring it further into view */
.hero .image2 {
  top: 2%;
  right: -8%;
  background-image: url('735975a91879e15b33e481a2ddf467c1.jpg');
}

/* Position image3 closer to the bottom‑left without hiding it completely */
.hero .image3 {
  bottom: 5%;
  left: -10%;
  background-image: url('e3ffb9e1dfb0dde09c0f2ca43ae2fa4b.jpg');
}

/* Position image4 near the bottom‑right while cropping only a small portion */
.hero .image4 {
  bottom: 2%;
  right: -8%;
  background-image: url('f5d6b2dbf5c32b493a94e11c24acda4c.jpg');
}

/* Additional decorative images for a chaotic yet harmonious layout */
/* Position image5 mid‑left but fully within the viewport */
.hero .image5 {
  top: 30%;
  left: 5%;
  width: 200px;
  height: 200px;
  background-image: url('hejhaa_in_the_same_style_and_reference_I_want_you_to_edit_thi_af6a4e56-47a7-488d-a5d8-61e0887edf79_1.png');
}

/* Position image6 mid‑right but keep most of it visible */
.hero .image6 {
  top: 35%;
  right: 5%;
  width: 240px;
  height: 240px;
  background-image: url('735975a91879e15b33e481a2ddf467c1.jpg');
}

/* Position image7 towards the bottom‑centre area */
.hero .image7 {
  bottom: 10%;
  left: 25%;
  width: 220px;
  height: 220px;
  background-image: url('e3ffb9e1dfb0dde09c0f2ca43ae2fa4b.jpg');
}

/* Position image8 in the lower‑right quadrant with moderate cropping */
.hero .image8 {
  bottom: 15%;
  right: 20%;
  width: 180px;
  height: 180px;
  background-image: url('10c423d293c03bdfa0113836f0656d49.jpg');
}

/* Brand name styling */
.hero .brand {
  font-family: var(--primary-font);
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  z-index: 1;
}

/* Subtitle styles */
.hero .subtitle {
  margin: 0.5rem 0;
  font-family: var(--secondary-font);
  font-weight: 400;
  font-size: 1.25rem;
  color: #555555;
  z-index: 1;
}

.hero .subtitle.subtitle2 {
  font-size: 1rem;
  color: #777777;
}

/* Call‑to‑action button */
.hero .cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2.2rem;
  border-radius: 40px;
  font-family: var(--primary-font);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  background-color: var(--button-bg);
  color: var(--button-text);
  transition: background-color 0.3s ease, transform 0.3s ease;
  z-index: 1;
}

.hero .cta:hover {
  background-color: var(--button-hover-bg);
  transform: translateY(-3px);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .hero .image {
    width: 120px;
    height: 120px;
  }
  /* Slightly pull in the corner images on small screens */
  .hero .image1 {
    top: 0;
    left: -6%;
  }
  .hero .image2 {
    top: 0;
    right: -4%;
  }
  .hero .image3 {
    bottom: 4%;
    left: -6%;
  }
  .hero .image4 {
    bottom: 0;
    right: -4%;
  }
  /* Central images scaled down and repositioned */
  .hero .image5 {
    top: 25%;
    left: 5%;
    width: 80px;
    height: 80px;
  }
  .hero .image6 {
    top: 35%;
    right: 5%;
    width: 100px;
    height: 100px;
  }
  .hero .image7 {
    bottom: 10%;
    left: 20%;
    width: 100px;
    height: 100px;
  }
  .hero .image8 {
    bottom: 12%;
    right: 18%;
    width: 80px;
    height: 80px;
  }
  .hero .subtitle {
    font-size: 1rem;
  }
  .hero .subtitle.subtitle2 {
    font-size: 0.875rem;
  }
  .hero .cta {
    padding: 0.8rem 1.8rem;
    font-size: 1rem;
  }
}

/* Styles for the simple waitlist page */
.waitlist-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 5rem 2rem;
  text-align: center;
}

/* -------------------------------------------------------------------------
   Custom overrides for updated branding

   The following rules adjust the overall page background and hero brand
   typography. A static yellow–orange gradient replaces the animated pastel
   background to create a soothing, warm atmosphere. The hero title colour
   is updated to a vibrant magenta to align with new brand guidelines. These
   overrides live at the bottom of the stylesheet to take precedence over
   earlier declarations.
*/

/* Apply a soft yellow‑orange gradient to the entire page background. The
   gradient starts with a pale buttery yellow and transitions into a light
   apricot orange. Disabling the animation ensures the gradient remains
   steady rather than shifting colours. */
html,
body {
  background: linear-gradient(135deg, #FFF4C1 0%, #FFE1A1 100%);
  animation: none;
}

/* Update the hero brand colour to a bright magenta. This colour is
   specified without relying on CSS variables so it overrides any inherited
   text colour. */
.hero .brand {
  color: #FA00F3;
}

/* Animated pastel background keyframes
   This keyframe animation slowly shifts the body background between
   complementary pastel yellows. It adds a gentle, chic ambience to the page
   without distracting from the main content. */
@keyframes pastelBackground {
  0% {
    background-color: #FFF9E0;
  }
  50% {
    background-color: #FFF3CC;
  }
  100% {
    background-color: #FFFDEB;
  }
}

.waitlist-container h2 {
  font-family: var(--primary-font);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.waitlist-container p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: #666666;
}

.waitlist-container form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.waitlist-container input,
.waitlist-container button {
  padding: 0.9rem 1rem;
  border-radius: 30px;
  border: 1px solid #cccccc;
  font-size: 1rem;
  font-family: var(--secondary-font);
}

.waitlist-container button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.waitlist-container button:hover {
  background-color: var(--button-hover-bg);
  transform: translateY(-2px);
}

.waitlist-container .back-link {
  margin-top: 2rem;
  display: inline-block;
  color: #555555;
  text-decoration: none;
  font-size: 0.9rem;
}

.waitlist-container .back-link:hover {
  text-decoration: underline;
}


/* Soft pink join waitlist button overrides */
.nav .pill {
  background: #e5a6c2 !important;
  border: 2px solid #d4af37 !important;
  color: #7a0e17 !important;
  box-shadow: none !important;
}
.nav .pill:hover {
  background: #dca0b8 !important;
  box-shadow: 0 0 12px #d4af37, inset 0 0 6px rgba(255, 255, 255, 0.6) !important;
}

/* Center hero labels above images with soft pink color */
.hero-label.top {
  position: relative !important;
  top: -1.5rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  text-align: center !important;
  color: #e5a6c2 !important;
  font-weight: 600 !important;
}

/* Adjust hero link images size and layout for mobile */
@media (max-width: 900px) {
  .hero-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  .hero-link img {
    width: min(30vw, 100px) !important;
  }
}