html, body { height: 100%; }
body { 
  min-height: 100vh; 
  display: flex; 
  flex-direction: column;
}


main, .content, #main { 
  flex: 1 0 auto; 
}

footer { 
  margin-top: auto; 
}


body > footer { 
  margin-top: auto; 
} 

#logStatsPage footer{
    margin-top: 3em;
}





body {
    background-color: #01204E;
    color: #F6DCAC;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 1em; /* 16px */
    text-align: center;
}

body h1 {
    color: #FEAE6F;
    font-size: 2.5em;
}

#homePage #image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#homePage #image-container img {
    text-align: center;
    margin: auto;
    width: 30%;
}

#homePage #imgContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}

#homePage #imgContainer img {
    height: 10em;
    width: 50%;
    margin-bottom: 2.3em;
}

header {
    padding: 1em 0em;
    background-color: #028391;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
    width: 100%;
}

header h1 {
    margin: 0;
    color: #F6DCAC;
}

nav {
    width: 90%;
}


nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content:space-evenly ;
}

nav ul li {
    margin-left: 2em; 
    font-size: 0.94em;
}

nav ul li a {
    color: #F6DCAC;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #FEAE6F;
}

.content {
    padding: 1em 8em;
    text-align: center;
}

.content h2 {
    color: #FEAE6F;
    font-size: 3em;
}

.content p {
    font-size: 1.2em;
    margin: 2em 0; /* 2vw = 0.32em */
}

.content a, #login-cta, form  .cta-button, body form #cancelButton{
    display: inline-block;
    margin: 2em 1em; 
    padding: 1em 2em; 
    background-color: #FEAE6F;
    color: #01204E;
    text-decoration: none;
    border-radius: 0.5em; 
    font-weight: bold;
}

body form #cancelButton {
    width: 20%;
    margin: 0.5em auto;
    font-weight: normal;
    font-size: 1em;

}

#stepOneSetup #buttons a {
    display: inline-block;
    margin: 1.6em 0.6em;
    margin-top: 2em;
    padding: 1em 2em; 
    background-color: #FEAE6F;
    color: #01204E;
    text-decoration: none;
    border-radius: 0.5em; 
    font-weight: bold;
}

.content a:hover {
    background-color: #F6DCAC;
    color: #01204E;
}

.card-container {
    display: flex;
    justify-content: space-around;
}

.card {
    background-color: #028391;
    color: #F6DCAC;
    border-radius: 1em; 
    padding: 2em; 
    margin: 1em;
    width: calc(30% - 2em); 
    box-shadow: 0 4em 8em rgba(0, 0, 0, 0.2); 
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-1em); 
}

.card h3 {
    color: #FEAE6F;
}

.card p {
    font-size: 1em;
}


.testimonials {
    background-color: #028391;
    padding: 3em 5em; 
    margin-top: 2em; 
    margin-bottom: 2em; 
}

.testimonials h2 {
    text-align: center;
    font-size: 2.3em;
    margin-bottom: 0.3em;
}

.testimonial {
    background-color: #01204E;
    color: #F6DCAC;
    border-radius: 1em;
    padding: 2em;
    margin: 1em 0;
    box-shadow: 0 4em 8em rgba(0, 0, 0, 0.2);
}

.testimonial h4 {
    color: #FEAE6F;
    margin-bottom: 1em; /* 1vw = 0.16em */
}

footer {
    background-color: #028391;
    padding: 1em; /* 1vw = 0.16em */
    text-align: center;
    color: #F6DCAC;
    margin-top: 3em; /* 3vw = 0.48em */
}

.form body {
    text-align: center;
    background-color: #01204E;
    color: #F6DCAC;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.form h1 {
    color: #F6DCAC;
    text-align: center;
}

.form form {
    background-color: #028391;
    padding: 2em;
    margin: 2em 0;
    border-radius: 1em;
    width: 80em;
    max-width: 31.25em;
    text-align: center;
    margin: auto;
}

.form label {
    display: block;
    margin-bottom: 1em; 
    font-weight: bold;
}

.form input[type="number"],
.form input[type="text"],
.form input[type="date"],
input[type="submit"] {
    width: calc(100% - 2em);
    padding: 1em;
    margin-bottom: 2em;
    border: none;
    border-radius: 0.5em;
}

.form input[type="number"],
.form input[type="text"],
.form input[type="date"] {
    background-color: #F6DCAC;
    color: #01204E;
}

.form input[type="submit"] {
    background-color: #FEAE6F;
    color: #01204E;
    font-weight: bold;
    cursor: pointer;
}

.form input[type="submit"]:hover {
    background-color: #F6DCAC;
    color: #01204E;
}

@media (max-width: 600px) {
    .form form {
        width: 90em; 
        padding: 2em; 
    }

    .form input[type="number"],
    .form input[type="text"],
    .form input[type="date"],
    .form input[type="submit"] {
        width: calc(100% - 4em); 
        padding: 2em; 
        margin-bottom: 4em;
        border-radius: 1em; 
    }
}

#statsPage main {
    text-align: center;
    margin: 2em auto;
}


#statsLoggedPage .mainContent {
    text-align: center;
   margin: 4em auto;
}

#statsLoggedPage .mainContent a {
    display: inline-block;
    margin: 0.5em 1em;
    padding: 1em 2em;
    background-color: #FEAE6F;
    color: #01204E;
    text-decoration: none;
    border-radius: 0.5em;
    font-weight: bold;
}

#logStatsPage > header +  h1, #setupExperimentPage > header + h1  {
    color: #FEAE6F;
}

#logStatsPage #experiment-name {
    margin-bottom: 2.2em;
}

#logStatsPage p {
    text-align: center;
    margin-bottom: 1.7em;
    font-size: 1.2em;
}

#setupExperimentPage p {
    text-align: center;
    margin-bottom: 1.7em;
    color: rgb(234, 9, 9);
}

.footer {
    font-size: 0.8em;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 0.1em; 

}

.footer ul {
    padding: 0;
    display: flex;

}

.footer li {
    margin: 1em auto;
}

nav img {
    width: 7em;
    height: 6em;
    border-radius: 2.2em;
    margin-right: 1em;
}

.content h3 {
    font-size: 2em;
    margin-bottom: 0;
}

#general-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
}

.experiment-details {
    background-color: #028391;
    margin: 1.2em;
    margin-top: 1em;
    border-radius: 10em;
    padding: 2em;
}

#statsPage #general-wrapper h2 {
    color: #FEAE6F;
    margin: 0;
    padding: 1em;
}

footer {
    margin-top: 5em;
}



/* Homepage content media queries */

/* XS Screens (good) */
@media (max-width: 375px) {
    .step {
        width: 50%;
        margin: 0 auto;
    }

    #proPage {
        font-size: 0.7em;
    }

    #proPage li {
        margin: 1em;
        font-size: 1.2em;
    }

    .card-container {
        width: 100%;
        margin: 0 auto;
    }

    

    body {
        font-size: 0.5em;
    }

    body h1 {
        font-size: 2.5em;
    }

    #instructions {
        font-size: 1.3em;
        margin: 1em;
    }


    #homePage h3{
        font-size: 1.8em;
    }


    #homePage p {
        font-size: 1.8em;
    }

    #homePage .content > p ~ a  {
        font-size: 1.5em;
    }

    .card-container {
        flex-direction: column;
        margin: auto;
        text-align: center;
    }

    .card {
        width: 80%;
        margin: 1em auto;
    }

    nav ul {
        flex-direction: column;
        margin: 0.5em;

    }

    nav ul li {
        margin: 0.5em;
    }

    nav ul li a {
        font-size: 1.6em;
    }

    h4 {
        font-size: 2.2em;
    }

    label, input {
        font-size: 1.5em;
    }

    #instructions {
        font-size: 1.5em;
        margin: 1em auto;
    }

    #setupExperimentForm {
        font-size: 1em;
    }

}

/* SM Screens */
@media (min-width:376px) and (max-width: 500px) {
    .step {
        width: 50%;
        margin: 0 auto;
    }

    #proPage {
        font-size: 0.9em;
    }

    #proPage li {
        margin: 1em auto;
        padding: 0.5em 1em;
        font-size: 1.2em;
    }

    #logStats {
        width: 80%;
        margin: 0 auto;
    }

    #logStats input {
        padding: 1em;

    }



    .testimonial {
        width: 90%;
        max-width: 0 auto;
    }

    #homePage .testimonials h2 {
        font-size: 2em;
    }
    
    .content {
        padding: 2em 4em;
    }

    body {
        font-size: .8em;
    }

    #homePageParagraph {
        font-size: 1em;
        margin: 0.5em auto;
    }

    body h1 {
        font-size: 1.8em;
        width: 100%;
        margin: 1em auto;
    }

    #instructions {
        font-size: 1em;
        margin: 1em;
    }

    /* Make the labels, and text areas smaller */ 
    label, input {
        font-size: 1.3em;
    }

    #setupExperimentForm {
        font-size: 0.8em;
    }

    #loggingInstructions {
        font-size: 1em;
    }

    header > a {
        font-size: 1.5em;
        margin: 1em;
    }

    .card-container {
        flex-direction: column;
        margin: auto;
        text-align: center;
    }

    .card {
        width: 80%;
        margin: 1em auto;
    }

    #homePage h3 {
        font-size: 1.8em;
    }

    nav ul {
        flex-direction: column;
        margin: 0.5em;

    }

    nav ul li {
        margin: 0.5em;
    }

    nav ul li a {
        font-size: 1.6em;
    }

    h4 {
        font-size: 2.2em;
    }
}


@media (min-width:501px) and (max-width: 584px) {
    body {
        font-size: 0.7em;
    }

    #homePage h2{
        font-size: 2.4em;
    }

    #homePage p {
        font-size: 1.7em;
    }

    #homePage .card p {
        font-size: 1em;
    }

    h4 {
        font-size: 2.2em;
    }

    .card-container {
        flex-direction: row;
        margin: auto;
        text-align: center;
    }

    .card {
        width: auto;
        padding: 0.1em;
    }

    .card p {
        font-size: 0.8em;
    }

    nav ul {
        flex-direction: column;
        margin: 0.5em;

    }

    nav ul li {
        margin: 0.5em;
    }

    nav ul li a {
        font-size: 1.6em;
    }
}

/* MD Screens */
@media (min-width:585px) and (max-width: 768px) {
    body {
        font-size: 0.8em;
    }

    #homePage h2{
        font-size: 2em;
    }

    .card-container {
        flex-direction: row;
        margin: auto;
        text-align: center;
    }

    .card {
        width: 30%;
        margin: 1em;
    }
}

/* LG Screens */
@media (min-width:769px) and (max-width: 1024px) {
    body {
        font-size: 1em;
    }

    #homePage h2{
        font-size: 2.5em;
    }

    .card-container {
        flex-direction: row;
        margin: auto;
        text-align: center;
    }

    .card {
        width: 30%;
        margin: 1em;
    }
}


@media screen and (max-width: 868px) {
    .footer .spacer {
        display: none;
    }
}

/* StepOneSetup Page */
#stepOneSetup h1, #setupExperimentPage #instructions {
    color: #FEAE6F;
}

#stepOneSetup p {
    margin-top: 2em;
}

fieldset {
    border: 0;
}

fieldset #formSection {
    width: 80%;
    margin: 2em auto;
    display: flex;
    justify-content:space-evenly;

}



#formSection label {
    margin: 0.5em;
}



/* General styling */
 .hamburger {
  font-size: 2rem;
  background: none;
  border: none;
  color: #F6DCAC;
  display: none;
  cursor: pointer;
}

#mobileHeaderText {
    display: none;
}

#logo {
  display: flex;
  align-items: center;
}

#logo img {
  height: 3.2em;
  width: auto;
}

body nav #headerContainer {
    display: flex;
    align-items: center;
    justify-content:center;
    font-size: 1.2em;
    padding:1em 0.5em;
}


/* Mobile view */
@media (max-width: 768px) {
    /* Show the hamburger button */
  body header .hamburger {
    display: block;
  }

 
  #logo img {
    height: 2.9em;
    width: auto;
  }

  body #mobileHeaderText {
    display: inline-block;
    color: #000000;
    font-size: 1.3em;
  }

  nav {
    padding-bottom: 1em;
  }

.navbar {
    /* Centerize the hamburger icon with the text and logo */
    display: flex;
    align-items: center;
    justify-content:space-evenly;
    width: 90%;
    padding: 0 1em;
}


#mobileHeaderText {
  font-size: 0.9em;


}

#headerContainer {
    order: 1;

}

#logo {
  order: 2;
  margin-left: auto;
  max-height: 40px;
}


  /* Hide the nav (inherits the styling from before, just adds positioning) Width and height set to auto as default. */
  .nav-links {
    display: none;
    flex-direction: column;
    background-color: #028391;
    position: absolute;
    top: 68px;
    left: 10px;
    padding: 1rem;
    border-radius: 8px;
  }


  nav ul li {
    margin: 2em;
  }

  /* On click, show the nav bar with the the mobile styling */
  .nav-links.show {
    display: flex;
  }

}


.how-it-works {
  background-color: #01204E;  
  color: #01204E;              
  padding: 0em 0em 5em 0em;
  text-align: center;
}

.how-it-works h2 {
  font-size: 2.5em;
  margin-bottom: 1.5em;
  color: #FEAE6F;            
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
  max-width: 1000px;
  margin: 0 auto;
}

.step {
  background: #028391;        
  color: #F6DCAC;             
  padding: 2em;
  border-radius: 1em;
  border: 2px solid #FEAE6F;   /* orange border */
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
}

.step:hover {
  transform: translateY(-5px);
}

.step h4 {
  color: #FEAE6F;              /* orange headings */
  margin-bottom: 0.6em;
}


#homePageParagraph {
  margin: 3em 0;
  line-height: 1.6;
  font-size: 1.3em;
}

#enterDailyBtn {
    margin-bottom: 2.9em;
}

#setupExperimentForm {
    margin-bottom: 4em;
}



/* Page-level polish (you already center main) */
#statsPage main p { margin-top: .25em; }

/* Section titles match your brand heading color */
#statsPage h2 {
  color: #FEAE6F;
  margin: 0.6em 0 0.4em;
  font-size: 1.7em;
  font-weight: bolder;
}

/* ===== Results: card basics (on-brand) ===== */
.experiment-details {
  background-color: #028391;
  border-radius: 1.5em;
  padding: 1em;
}
.experiment-details h2 { color: #FEAE6F; margin: 0 0 0.4em; }
.experiment-details .dates,
.experiment-details .status,
.experiment-details .days { color: #F6DCAC; margin: 0.3em 0; }

/* ===== Metric list layout ===== */
.experiment-details.result .metrics {
  list-style: none;
  padding: 0;
  margin: 0.8em 0 0;
  display: grid;
  grid-template-columns: minmax(14ch, 1fr) auto; /* left col grows to longest label */
  column-gap: 2rem;   /* space between label and value */
  row-gap: 2em;     /* vertical space between rows */
  align-items: center;/* center label/value vertically on each row */
}

/* Make each LI “transparent” so its children become direct grid items */
.experiment-details.result .metrics li { display: contents; }

/* Explicitly place label/value into columns to keep alignment perfect */
.experiment-details.result .metrics .label {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  opacity: 0.95;
  font-size: 1.2rem;
  line-height: 1.2;
}
.experiment-details.result .metrics .value {
  grid-column: 2;
  justify-self: end;      /* stick the box to the right edge of its column */
  align-self: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  min-width: 110px;
  padding: 0.5em 1.3em;   /* bigger box */
  border-radius: 12px;
  border: 2px solid transparent;
  display: inline-block;
  white-space: nowrap;    /* keeps +12 min etc. on one line */
}

/* ===== Default value box colors ===== */
.experiment-details.result .metrics .value.plus {
  background: #FEAE6F;    /* peach positive */
  border-color: #FEAE6F;
  color: #01204E;         /* navy text pops */
}
.experiment-details.result .metrics .value.minus {
  background: #F6DCAC;    /* cream negative */
  border-color: #FEAE6F;  /* peach border */
  color: #01204E;
}

/* ===== Inverted metric (Awake time: lower is better) overrides ===== */
/* Place AFTER defaults; add !important to ensure they win */
.experiment-details.result .metrics li.invert .value.plus {
  background: #991b1b !important;   /* red = BAD when awake time increased */
  border-color: #991b1b !important;
  color: #ffffff !important;
}
.experiment-details.result .metrics li.invert .value.minus {
  background: #FEAE6F !important;   /* teal = GOOD when awake time decreased */
  border-color: #FEAE6F !important;
  color: #01204E !important;
}

/* ===== Hover polish for cards ===== */
.experiment-details:hover {
  box-shadow: 0 0.8em 2em rgba(0,0,0,0.22);
  transform: translateY(-2px);
  transition: box-shadow .15s ease, transform .15s ease;
}

/* ===== Fallback for browsers that don’t like display: contents ===== */
@supports not (display: contents) {
  .experiment-details.result .metrics {
    display: block; /* revert list to block */
  }
  .experiment-details.result .metrics li {
    display: grid;
    grid-template-columns: minmax(14ch, 1fr) auto;
    column-gap: 2rem;
    align-items: center;
    margin-bottom: 0.8em;
  }
  .experiment-details.result .metrics li .label { grid-column: 1; }
  .experiment-details.result .metrics li .value { grid-column: 2; justify-self: end; }
}

#statsPage .experiment-details.result .conclusion {
  margin-top: 2em;
  color: #F6DCAC;
  font-weight: 600;
}

#statsPage #exp-status .finished-notice {
    margin-top: 1.3em;
}

#setupExperimentForm {
    margin-bottom: 2em;

}

#wearableRequestForm {
    width: 50%;
    margin: .5em auto;
    padding: 0;
}

/* =======================
   Contact Page Styles
   ======================= */

#contactPage .form form {
    background-color: #028391;
    padding: 2em;
    margin: 2em auto;
    border-radius: 1em;
    width: 90%;
    max-width: 600px;   /* cap on desktops */
    text-align: center;
}

#contactPage .form textarea {
    width: calc(100% - 2em);
    padding: 1em;
    margin-bottom: 2em;
    border: none;
    border-radius: 0.5em;
    background-color: #F6DCAC;
    color: #01204E;
    font-family: inherit;
    font-size: 1em;
    resize: vertical;
}

/* Messages */
#contactPage .form-message {
    max-width: 600px;
    margin: 1em auto;
    padding: 1em;
    border-radius: 0.5em;
    font-weight: bold;
}
#contactPage .form-message.error {
    background-color: #991b1b;
    color: #fff;
}
#contactPage .form-message.success {
    background-color: #2e7d32;
    color: #fff;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    #contactPage .form form {
        width: 95%;
        padding: 1.5em;
    }

    #contactPage .form input,
    #contactPage .form textarea {
        font-size: 1.1em;
        padding: 1em;
    }
}