/* css styles */

body {
  font-family: Arial;
}


/* ------------------------ Navbar control -----------------------------------*/

.navbar {
  background-image: url(images/navbar_background2.png);
  background-position: center;
  width: 100%;
  padding: 10px;
}

.navbar .navbar-brand,
.navbar .navbar-nav .nav-link {
    color: #1d3a69;
    margin-right: 2em;
}

.navbar .navbar-nav .nav-link:hover {
    color: #c9eaf0;
}

/* Change the color of social media icons */
.quarto-navbar-tools .quarto-navigation-tool i {
    color: #1d3a69 !important; /* Dark blue */
    font-size: 1.2em; /* Adjust the size if needed */
}

/* Change color on hover */
.quarto-navbar-tools .quarto-navigation-tool:hover i {
    color: #c9eaf0 !important; /* Light blue */
}

/* Change the search icon color */
#quarto-search .aa-SubmitIcon {
    fill: #1d3a69 !important; /* Dark blue */
    width: 22px; /* Adjust size if needed */
    height: 22px;
}

/* Change color on hover */
#quarto-search .aa-SubmitIcon:hover {
    fill: #c9eaf0 !important; /* Light blue */
}


.navbar-logo {
    height: 150px !important;
    width: auto !important;
    max-height: none !important;
    margin-left: 2em;
    
}

/*---------------------------- footer ----------------------------------------*/ 

/* Apply the same background image as navbar to the footer */
.nav-footer {
    background-image: url(images/navbar_background2.png); 
    background-size: cover; /* Ensures it covers the entire footer */
    background-position: center;
    padding: 20px 0; /* Adjust padding for better spacing */
    color: #1d3a69;
}

/* Make links dark blue */
.nav-footer a {
    color: #1d3a69; 
}

/* Footer hover effect for links */
.nav-footer a:hover {
    color: #c9eaf0; 
}


/* ------------------------------- Index ------------------------------------*/

/* Target the div that contains the image and text */
.quarto-about-jolla.column-page {
  margin-top: 40px;  /* Adjust this value to reduce the space at the top */
  padding-bottom: 10px;  /* Adjust bottom padding to reduce space below */
}

body.index { */
  height: 100vh;  /* Make sure the body takes the full height of the viewport */
  background-color: #c9eaf0;  
}

#bio {
  margin-top: -50px;  /* Space between the bio and image */
}

.bio-text {
  /*margin-top: 20px;  Space between the image and bio text */
  font-size: 2em;  /* Adjust the font size of the bio text */
  max-width: 600px;  /* Set a max width for readability */
  padding: 0 20px;  /* Add padding to the sides of the bio text */
}


/* ---------------------------- About Me page -------------------------------*/

html, body.about {
  height: auto; /* Allows the background to expand beyond viewport */
  min-height: 100vh; /* Ensures it at least covers the full screen */
  width: 100%;
  margin: 0;
  padding: 0;
}

body.about {
  background-image: url("images/about_background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #1d3a69; 
}



/* ----------------------------- IU Research --------------------------------*/
/* not using this page at the moment

html, body.IU {
  height: auto; /* Allows the background to expand beyond viewport */
  min-height: 100vh; /* Ensures it at least covers the full screen */
  width: 100%;
  margin: 0;
  padding: 0;
}

body.IU {
  background-image: url("images/IU_background2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: black; 
}

#pdf-viewer {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically (if the container has height) */
  width: 100%; /* Makes it span full width */
}

#pdf-viewer iframe, 
#pdf-viewer embed, 
#pdf-viewer object {
  width: 100vh; /* Adjust this to make the PDF viewing box bigger */
  height: 700px; /* Adjust height to fit more content */
  border: none; /* Removes unwanted borders */
}



/* ----------------------------- FIU Research -------------------------------*/

html, body.FIU {
  height: auto; /* Allows the background to expand beyond viewport */
  min-height: 100vh; /* Ensures it at least covers the full screen */
  width: 100%;
  margin: 0;
  padding: 0;
  color: #1d3a69;
}

/* decided to keep background for this page white so that when I create figures
and conceptual diagrams to showcase they look cleaner*/
/*body.FIU {
  background-image: url("images/FIU_background2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: lightgray; 
}*/

/* --------------------------------CV page -----------------------------------*/


body.CV { */
  height: 100vh;  /* Make sure the body takes the full height of the viewport */
  background-color: #c9eaf0;  
}


/* -----------------Travel page -----------------*/

/* Styles for travel page */

body.travel-page {
  background-color: #fcf2d7;
}

.travel-page {
  padding: 20px;
  min-height: 100vh;
}

.travel-page h1 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  color: #54441a;
}

/* Grid container for trip cards */
.trip-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 10px auto;
  max-width: 1200px;
  padding: 10px;
}

/* Individual trip card */
.trip-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  cursor: pointer; /* Make the card feel clickable */
  width: 100%;
  /* Remove fixed height approach */
  height: auto; /* Let the card height adjust automatically */
  display: block; /* Ensure it's displayed as a block-level element */
}

.trip-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures image fills the entire card */
  border-radius: 10px;
}

/* Hover effect - no movement, just shadow */
.trip-card:hover {
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Semi-transparent overlay for hover effect */
.trip-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6); /* Semi-transparent white overlay */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.trip-card:hover .overlay {
  opacity: 1; /* Show the overlay on hover */
}

/* Centering the text inside the card */
.trip-card h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center text vertically and horizontally */
  margin: 0;
  padding: 10px 15px; /* Adjust padding for proper space */
  font-size: 1.5rem;
  color: black;
  text-align: center;
  z-index: 1; /* Ensure the text is above the overlay */
  box-shadow: none; /* No box-shadow to avoid faint lines */
  width: calc(100% - 30px); /* Ensures text width stays within card */
}

/* -----------------Grand Canyon page -----------------*/



body.GCE {
  background-color: #D98C6C;
  color: #D3D3D3;
}

footer.GCE {
  background-color: #a4c3f5;
}

/* -----------------Dominican Republic page -----------------*/

body.DR {
  background-color: #0c7a6e;
  color: #D3D3D3;
}

/* -----------------Australia page -----------------*/

body.aus {
  background-image: url("images/aus/background3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #F1E6B4;
}

/* -----------------Costa Rica page -----------------*/

html, body.CR {
  height: auto; /* Allows the background to expand beyond viewport */
  min-height: 100vh; /* Ensures it at least covers the full screen */
  width: 100%;
  margin: 0;
  padding: 0;
}

body.CR {
  background-image: url("images/CR/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #1d3a69; 
}

body.CR {
  height: 100%;
  background-image: url("images/CR/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: white; 
  margin: 0;
}