/*** You will not need this file until Unit 3 ***/
/*** VSCodeEDU preview fix 

  Purpose:
  - Fix VSCodeEDU issue that causes a white border to show around
    the preview window

  When To Modify:
  - If you change the background color of your webpage, you may need to update this rule too.
***/
html {
    ;
}

/*** body ***
  
  Purpose:
  - Add style rules for the body of your webpage
  - This is useful if you want a rule to apply to EVERYTHING on your page
    - (Tip: You can always override these rules later in the stylesheet)

  When To Modify:
  - [ ] Project 3 (REQUIRED FEATURE) 
  - [ ] Any time after
***/

body {
    /* Add a background color or image */
    background-color:; /* see bottom of file for color variables */

    /* Customize the default size, color, and font for text*/
    font-size: 16px;
    color: var(--text-color);
    font-family: Verdana, fantasy, sans-serif; /* This tells the browser: "Try to use `Tahoma`, and if you can't find it, use any sans-serif font." */

    /* Put space around the edges of the webpage (I chose to eliminate this for a clean,full-width layout */
    margin: 0px;
    padding: 0px;
}

/*** Text ***
  
  Purpose: 
  - Add style rules for headings (h1-6),
    paragraphs (p), links (a), and buttons

  When To Modify:
  - [X] Project 3 (REQUIRED FEATURE) 
  - [ ] Any time after
***/

h1 {
    color:#1a1a3d;
    
}

h2 {
  font-size: 2rem;
  letter-spacing: 0.05em;
    
}

h3 {
    color:#1a1a3d
}

h4 {
    color: black
}

p {
    color: black;
    
}

a:link {
  color: #1a1a3d; /* default unvisited link */
  text-decoration: none;
}

a:visited {
  color: #333366; /* after it's been clicked */
}

a:hover {
  color: #92c4ad; /* when hovered */
  text-decoration: underline;
}

a:active {
  color: turquoise; /* while clicking */
}

.section-header {
  width: 100%;
  text-align: center;
  margin-bottom: 1.5rem;
}

.section-header h2 {
  font-size: 2rem;
  color:#1a1a3d;
  letter-spacing: 0.05em;
}

button {
    /* Example Style, replace with your own! */
    background-color: #75a690;    /* button color */
    color: white;               /* text color */
    border: none;               /* hides the default border */
    padding: 5px 12px;          /* space between button's text and edge */
    border-radius: 5px;         /* curved edges instead of square */
    cursor: pointer;            /* makes the cursor change when over button */
}

button:hover {
    /* Make the button look different when the user hovers over it */
}

.faded-img {
  max-width: 350px;
  box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.1);
  border-radius: 15px;
}

/*** header ***
  
  Purpose:
  - Add style rules for your website's header section

  When To Modify:
  - [X] Project 3 (REQUIRED FEATURE) 
  - [ ] Project 4 (REQUIRED FEATURE) 
  - [ ] Any time after
***/

.header { /* Example A: This styles elements with class="header" */
    background-color: #b9295d
    
}

/*** footer ***
  
  Purpose:
  - Add style rules for your website's footer section

  When To Modify:
  - [ ] Project 3 (STRETCH FEATURE) 
  - [ ] Any time after
***/

.site-footer { /* Example B: This styles elements with class="footer" */
    background-color: #1a1a3d;
    color:white;
    padding: 2rem 1rem;
    text-align: center;
}

.footer-content p {
    color: white;
}

.footer-nav a {
    text-decoration: none;
    color: white;
    font-weight: normal;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: color 0.3s ease;
}

.footer-nav a:visited {
    color: gray;
}

.footer-nav a:hover {
    color: #92c4ad;
}

.footer-nav a:active {
    color: turquoise
}

/*** Navbar [PLACEHOLDER] [ADDED IN UNIT 4] ***/
.navbar {
    background-color: #1a1a3d;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.2rem 2rem;
}

.nav-links {
  display: flex;
  justify-content: right;
  list-style: none;
  padding: 10px;
  margin:10px;
  gap: 2rem;
}

.nav-links a{
  text-decoration: none;
  color: white;
  font-weight: normal;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: color 0.3s ease;
}

.nav-links a:visited {
  color: gray;
}

.nav-links a:hover {
  color:#92c4ad
}

.nav-links a:active {
  color: turquoise
}

.nav-button {
  background-color:#75a690;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: normal;
  transition: background-color 0.3s ease;
}

#nav-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}
#nav-buttons button {
  background-color: #3e3377;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration:none;
  font-weight: bolder;
  border-color:white;
  border-width: 15px;
  cursor: pointer;
}

#nav-buttons button:hover {
  background-color:#045d5d;
}

#reduce-motion {
  background-color: #3e3377;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-decoration:none;
  font-weight: bolder;
  border-color:white;
  border-width: 15px;
}

/** Hero Section**/
#hero {
  /* background-color:#75a690; */
  background: linear-gradient(30deg, #1a1a3d, #333377, #1a1a3d);
  max-width: 100%;
  display: flex;
  justify-content: center;
}

#hero-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 2rem;
  gap: 10px;
}

#hero h2 {
  color: white;
}

.hero-image img {
  display: block;
  max-width: 100%;
  max-height: 450px;
  width: auto;
  height: auto;
  object-fit: cover;
}

/*** About Section ***
  
  Purpose:
  - Add style rules for your website's About section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/
#about {
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 2rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

#about h2 {
  color: white;
  font-size: 2rem;
  letter-spacing: 0.05em;
}

.about-container {
  background-color: #045d5d;
  max-width: 1280px;
  border-radius: 10px;
  padding: 2rem;
}

/*** Schedule Section ***
  
  Purpose:
  - Add style rules for your website's Schedule section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/

.event-container {
  background-color: #cfcfcf;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 2rem;
}

.carousel-wrapper {
  display:flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  overflow: hidden;
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}

.event-carousel {
  display: flex;
  overflow-x: auto;
  transition: transform 0.5s ease;
  scroll-behavior: smooth;
  gap: 2rem;
  scroll-snap-type: x mandatory;
  padding: 1rem;
  max-width: 1280px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.event-carousel::-webkit-scrollbar {
  display: none;
}

.event-card {
  flex: 0 0 300px;
  /* flex: 1 1 300px; */
  scroll-snap-align: start;
  /* width: 300px; */
  background-color: #ececec;
  color: black;
  border-radius: 10px;
  /* max-width: 350px; */
  padding: 1em;
  margin-right: 2rem;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.event-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.event-card img {
  width: 100%;
  /* max-width: 300px;
  height:auto; */
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 1rem;
  /* display: block; */
}

.carousel-btn-left,
.carousel-btn-right {
  background-color: #cfcfcf;
  color:#1a1a3d;
}

.carousel-btn-left:hover,
.carousel-btn-right:hover {
  background-color: #333366;
  color: white;
}

.event-card p {
  color: black;
}

#schedule h2,
#schedule h3 {
  color:#1a1a3d;
}

#schedule {
  background-color: #cfcfcf;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 2rem;
}

/*** Links Section ***
  
  Purpose:
  - Add style rules for your website's Links section

  When To Modify:
  - [ ] Project 3 (OPTIONAL)
  - [ ] Project 4 (STRETCH FEATURE) 
  - [ ] Any time after
***/

#links {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5em;
  padding: 2e, 1em;
}

#links a h3,
#links a p {
  color:#1a1a3d;
}

#links a:hover article,
#links a:active article {
  box-shadow: 0 2px 8px rgba(146, 196, 173, 0.4);
  transform: translateY(-2px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

#links a:hover h3,
#links a:hover p {
  color:#333377
}


/*** RSVP Section ***
  
  Purpose:
  - Add style rules for your website's RSVP form

  When To Modify:
  - [ ] Project 6 (REQUIRED FEATURE)
  - [ ] Project 7 (REQUIRED FEATURE)
  - [ ] Any time after
***/

#rsvp {
  color: white;
  background: linear-gradient(30deg, #1a1a3d, #333377, #1a1a3d);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
}

#rsvp h2, h3 {
  text-align: center;
}

.rsvp-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 20px;
  max-width: 1280px;
  padding-bottom: 50px;
}

.rsvp-para{
  width: 55%;
  padding-right: 10px;
}

.rsvp-participants {
  width: 45%;
  padding-right: 10px;
}

.form-container {
  padding-top: 2rem;
}

#rsvp h2 {
  color: white;
  /* font-size: 2rem;
  letter-spacing: 0.05em; */
}

#rsvp h3, p {
  color: white;
}


input[type="submit"] {
  margin-top: 16px;
  padding: 12px 24px;
}

.error {
  background-color: #ee979e;
  border-style: solid;
  border-width: 2px;
  border-color:red
}

#confirmationMessage {
  margin-top: 1rem;
  font-weight: bold;
  color: white;
  text-align: center;
}

/*** Animations [PLACEHOLDER] [ADDED IN UNIT 8] ***/

/*** Success Modal  ***
  
  Purpose:
  - Add style rules to your website's pop-up modal, which appears
    when a user successfully submits the RSVP form

  When To Modify:
  - [ ] Project 9 (REQUIRED FEATURE)
  - [ ] Any time after
***/

.modal {
  display: none;   /* modal should be hidden by default*/
  position: fixed; /* modal cannot move around the screen */
  z-index: 2;      /* modal appears above other elements */ 
  padding: 1rem 2rem;
  
  /* TODO: Make the modal fill the entire screen */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  /* Add a semi-transparent background to shadow non-modal elements*/
  background-color: rgba(0,0,0,0.4); /* 40% opacity black */

  /* Flexbox settings for modal */
  /* These won't apply until we update "display:" from "hidden" to "flex" in our JS */
  flex-direction: column; 
  align-items: center;
  justify-content: center;
}

.modal-container {
    /* Change modal size and spacing here */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 25px;
    width: 55%;
    max-height: 80vh;
    overflow-y: auto;
    
    /* Customize modal style here */
    background-color:#333366;
    color: black;
    text-align: center;
    font-size: 1rem;
    font-family: Verdana, fantasy, sans-serif;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0. 0.3);

}

.modal-item {
    flex: 1;
    max-width: 50%;
}

.modal-text {
  text-align: left;
  line-height: 1.6;
  font-size: 1.1rem;
}

.modal-item img {
  max-width: 100%;
  height: auto;
}

/* Default dark mode style */
.dark-mode {
  background-color: black;
  color: white;

}

/* Example: Different dark mode style for h1 */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3 {
    color:white;
}

.dark-mode #schedule h2 {
  color: white;
}

.dark-mode #schedule,
.dark-mode .event-container,
.dark-mode .carousel-wrapper {
  background-color: #333333;
}

.dark-mode #schedule button,
.dark-mode #hero button {
  color: white;
  background-color: #75a690;
  border: none
}

/* Example: Different dark mode style for visited links */
.dark-mode a:visited * {
color:#75a690;
}

/**Share Section **/

#share {
  background-color: #cfcfcf;
  display:flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2em;
}

#share-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:1em;
}

/*** Custom Colors (OPTIONAL) ***
  
  Purpose:
  - Use CSS variables to define custom colors for your website
  - To get you started, we've provided the color scheme used in our example site.
  - To reference a color variable in your css, use var(--variable-name) in place of a color value

  When To Modify:
  - [ ] Any time (OPTIONAL)
***/

/* RSVP Form*/


:root {
    /* Light Mode */
    --bg-color: #a6a0cf;
    --text-color: #231942;

    /* Dark Mode */
    --bg-color-dark-mode: #3e3377;
    --text-color-dark-mode: #fff;

    /* Accent Colors */
    --accent-color-light: #d2cff5;
    --accent-color-medium: #684fb5;
    --accent-color-dark: #482f95;
    --accent-color-darkest: #231942;
    --accent-color-green: #28eb76;

    /* Error Colors */
    --error-color: #f8bbd0;
    --error-color-border: #e63946;
}