/* Monsterrat google font import*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
/*Global variable*/
:root {
  --primary-font: "Montserrat", sans-serif;
  --secondary-font: "Varela", sans-serif;
  --primary-color: #315166;
  --secondary-color: #A8B4D3;
  /* corresponds to ei sn tf and jp to apply to h2 text headers and selection on test forms"*/
 /*e vs i*/
  --extraversion-color: #d9abfa;
  --introversion-color: #9ad0f5;
  --sensing-color: #71be95;
  --intuition-color: #d8c1e9;
  --thinking-color: #f0b8c9;
  --feeling-color: #61a4d1;
  --judging-color: #d67078;
  --perceiving-color: #6dd6a0;
}


/*font text color and background color for page*/
body {
  font-family: var(--primary-font);
  color: var(--primary-color);
  background-color: var(--secondary-color);
}
/*main headings stlye*/
h1,
h2,
h3 {
  font-family: var(--secondary-font);
  color: rgb(2, 18, 29);
  text-align: center;
}
/*Navbar styling*/
.custom-navbar {
  background-color: var(--primary-color);
  color: white;
}

.sticky-nav-wrapper {
  position: sticky;
  top: 0; /* sticks to the top */
  z-index: 1000; /* ensures it stays on top */
 
}

/*progress bar styling*/
#overall-progress-bar {
  width: 0%;
  height: 20px;
  background-color: #007bff; /* Bootstrap primary color */
  transition: width 0.3s ease;
}

#progress-container {
  width: 100%;
  background-color: white;
  height: 20px;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

/*centre alignment for homepage*/
.index-page .container {
  text-align: center;
}
/*image section stylinh*/
.image-section {
  background-color: var(--secondary-color);
  color: rgb(16, 12, 19);
}
/*image section - responsive full width with a max width*/
.image-section img {
  width: 100%;
  height: auto;
  max-width: 800px;
}

/*device scaling for image*/
@media (max-width: 768px) {
  .image-section img {
    width: 90%;
    max-width: 500px;
  }
}

@media (max-width: 480px) {
  .image-section img {
    width: 100%;
  }
}


/* boostrap quiz form override styles for optimised width on larger screens*/

#quiz-form {
  max-width: 700px;
  margin: auto;
  padding: 1rem;
}

#quiz-form .form-check-label:hover {
 
  cursor: pointer;
  transition: color 0.3s ease; /*smooth hover transition*/
}

/*spacing around cards*/
.card {
  margin-bottom: 1rem;
  color: rgb(255, 255, 255);
  background-color: rgb(20, 31, 51);
  font-size: 1rem;
  font-weight: 300; 
  /*ensures readbility with negative contrast*/

}

.card h1 {
  color: rgb(245, 231, 231); /* overwrites h1 text color withing card only*/
}
/*progress bar styling*/
#overall-progress-bar {
  width: 0%;
  height: 20px;
  background-color: #007bff; /* Bootstrap primary color */
  transition: width 0.3s ease;
}

/*updates card background dependent on selection and section - see myersbriggsdiagramcolors in readme */

.card.e-selected { background-color: var(--extraversion-color); }
.card.i-selected { background-color: var(--introversion-color); }
.card.s-selected { background-color: var(--sensing-color); }
.card.n-selected { background-color: var(--intuition-color); }
.card.t-selected { background-color: var(--thinking-color); }
.card.f-selected { background-color: var(--feeling-color); }
.card.j-selected { background-color: var(--judging-color); }
.card.p-selected { background-color: var(--perceiving-color); }
/*currently clashing with h1 variables, if have time fix*/

/* Results page card styling*/
.results .container{
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.results-card {
  text-align: center;
  background-color: #3e8656;
}
.results-card h2 {
  color: white;
}
.results-card a{ /* required for contrast/accessibility*/
  color: blue;
  text-decoration: underline;

}
#resultImage {
  aspect-ratio: 1046 / 516;
  width: 100%;
  height: auto;
  display: block;
}

/*span class text for header text on test/quiz pages*/
.extraversion-text {
  color: var(--extraversion-color);
  font-weight: bold;
  
}
.introversion-text {
color: var(--introversion-color);
font-weight: bold;
}

.sensing-text {
color: var(--sensing-color);
font-weight: bold; 
}

.intuition-text {
color: var(--intuition-color);
font-weight: bold;
}

.thinking-text {
color: var(--thinking-color);
font-weight: bold;
}

.feeling-text {
color: var(--feeling-color);
font-weight: bold;
}

.judging-text {
color: var(--judging-color);
font-weight: bold;
}

.perceiving-text {
color: var(--perceiving-color);
font-weight: bold;
}