/* index.css */

:root {
  --font-family: 'Open Sans', sans-serif;
  --font-size-base: 20px;

  --large-title: 3rem;
  --title1: 2.3rem;
  --title2: 1.8rem;
  --title3: 1.39rem;
  --headline: 1.45rem;
  --body: 1.26rem;
  --button: 1.25rem;
  --callout: 1.15rem;
  --subhead: 1.1rem;
  --footnote: 1rem;
  --footnote-small: 0.95rem;
  --body-small: 0.9rem;

  --font-color-primary: #484848;
  --font-color-secondary: #717171;
  --primary-color: #FF5A5F;
  --border-color: #ddd;
}

/* Typography Classes */
.text-large-title {
  font-family: var(--font-family);
  font-size: var(--large-title);
  font-weight: 500;
  line-height: 1.2;
}

.text-title-1 {
  font-family: var(--font-family);
  font-size: var(--title1);
  font-weight: 400;
  line-height: 1.3;
}

.text-title-2 {
  font-family: var(--font-family);
  font-size: var(--title2);
  font-weight: 500;
  line-height: 1.3;
}

.text-title-3 {
  font-family: var(--font-family);
  font-size: var(--title3);
  font-weight: 400;
  line-height: 1.4;
}

.text-headline {
  font-family: var(--font-family);
  font-size: var(--headline);
  font-weight: 500;
  line-height: 1.4;
}

.text-body {
  font-family: var(--font-family);
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.5;
}

.text-button {
  font-family: var(--font-family);
  font-size: var(--button);
  font-weight: 500;
  line-height: 1.4;
}

.text-callout {
  font-family: var(--font-family);
  font-size: var(--callout);
  font-weight: 400;
  line-height: 1.4;
}

.text-subhead {
  font-family: var(--font-family);
  font-size: var(--subhead);
  font-weight: 400;
  line-height: 1.4;
}

.text-footnote {
  font-family: var(--font-family);
  font-size: var(--footnote);
  font-weight: 400;
  line-height: 1.4;
}

.text-footnote-small {
  font-family: var(--font-family);
  font-size: var(--footnote-small);
  font-weight: 500;
  line-height: 1.2;
}

.text-body-small {
  font-family: var(--font-family);
  font-size: var(--body-small);
  font-weight: 400;
  line-height: 1.4;
}

/* Base HTML elements - applying the same styles directly */
h1 {
  font-family: var(--font-family);
  font-size: var(--large-title);
  font-weight: 500;
  line-height: 1.2;
}

h2 {
  font-family: var(--font-family);
  font-size: var(--title1);
  font-weight: 400;
  line-height: 1.3;
}

h3 {
  font-family: var(--font-family);
  font-size: var(--title2);
  font-weight: 500;
  line-height: 1.3;
}

h4,
.form-label {
  font-family: var(--font-family);
  font-size: var(--title3);
  font-weight: 400;
  line-height: 1.4;
}


.prelaunch-bg-image {
  min-height: 100vh;
  flex-direction: column;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  width: 100vw;
  color: '#FFFFFF';
  position: fixed;
  background: linear-gradient(120deg, #318686 30%, #6b2727 100%);
}

.prelaunch-bg-image-tint {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #23232344;
  /* z-index: 10; */
  width: 100vw;
  height: 100vh;
}

p,
.nav-item {
  font-size: var(--body);
  font-weight: 400;
  line-height: 1.5;
}

input {
  font-weight: 400;
  font-size: var(--body);
  color: black;
  border-radius: 1rem;
}

.custom-placeholder input::placeholder {
  color: black; /* Change placeholder text color to black */
}

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Scale-out animation */
@keyframes scaleOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0;
  }
}

.snackbar {
  animation: scaleIn 0.3s ease-in-out forwards;
}

.snackbar-exit {
  animation: scaleOut 0.3s ease-in-out forwards;
}

/* Weeks Grid Animations */
.weeks-grid-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.weeks-grid-container.animate-next {
  transform: translateX(10px);
  opacity: 0.7;
}

.weeks-grid-container.animate-prev {
  transform: translateX(-10px);
  opacity: 0.7;
}

.week-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.week-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.week-item:active {
  transform: translateY(0);
}

/* Custom scrollbar for selected weeks */
.selected-weeks-scroll::-webkit-scrollbar {
  width: 4px;
}

.selected-weeks-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.selected-weeks-scroll::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 2px;
}

.selected-weeks-scroll::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .prelaunch-bg-image {
    background-position-x: 20%;
    position: fixed;
  }
}

/* Tablet */

@media only screen and (min-width: 768px) and (max-width: 991px) {}

/* Computer/Desktop Monitor */

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

/* Large Monitor */

@media only screen and (min-width: 1200px) and (max-width: 1919px) {}

/* WideScreen Monitor */
@media only screen and (min-width: 1920px) {}


/* Custom animations for modals */
@keyframes customFlyUpIn {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes customFlyUpIn {
  from {
    transform: translateY(100px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes customFlyUpOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100px);
    opacity: 0;
  }
}

@keyframes customOpacityIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ui.modal {
  animation-duration: 0.4s !important;
  animation-fill-mode: both !important;
}

.ui.modal.visible {
  animation-name: customFlyUpIn !important;
}

.ui.modal.hidden {
  animation-name: customFlyUpOut !important;
}

.ui.dimmer {
  overflow: hidden !important;
  animation-name: customOpacityIn !important;
  background-color: rgba(0, 0, 0, 0.3) !important; /* default is 0.85 */
}