/*
COLOR PALETTE OPTIONS: Two tone
 #815854, #F9EBDE Tans
 #F0EDCC, #02343F Light tan green and Black Green
 #2D2926, #ed6f63 Black brown-red, and light pastelish-red
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary-dark: #1a1a1a;
    --primary-light: #ffffff;
    --accent-gray: #f8f9fa;
    --text-gray: #6c757d;
    --border-light: #e9ecef;
}

html, body{
   height: 100%;
   color: #1a1a1a;
   background-color: #ffffff;
}


body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1 {
   font-weight: 600;
   letter-spacing: -0.02em;
   line-height: 1.2;
   text-align: center;
}

p {
   color: #1a1a1a;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   font-size: 14px;
   text-align: justify;
}

a {
   color: #ffffff;
   text-align: center;
   padding: 0px;
}

.container-fluid {
   padding: 0 !important;
   margin: 0 !important;
   height: 100%;
   width: 100%;
   overflow: hidden;
}

body .col-10 {
   background-color: #ffffff !important;
}

body .max-width-576px {
   display: none;
}

@media screen and (max-width: 576px) {
   body .col-10 {
      display: none;
   }
   body .col-2 {
      display: none;
   }

   body .max-width-576px {
      display: flex !important;
      justify-content: center;
   }
   .navSide a .nav-link-active {
   color: #ffffff !important;
   background-color: #1a1a1a !important;
   }

   .card {
      color: #ffffff;
      background-color: rgb(255,255,255, .20);
      backdrop-filter: blur(5px);
   }

}

/* NAVIGATION BAR CLASSES START*/

.navSideContainer {
/* This container holds and centers the navigation sidebar */
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
   max-width: 16%; /* Adjust based on nav bar width */
   height: 100vh;
   background-color: var(--accent-gray);
   border-right: 1px solid var(--border-light); /* Light border on the right side (lovely subtle detail)*/
   z-index: 1000; /* Ensures nav bar is on top of gallery images */
}

.navSide {
/* This is the sidebar navigation */
   display: flex; /* Allows for vertical distribution */
   flex-direction: column; /* stacks content vertically */
   justify-content: center; /* Distributes content evenly in the column */
   align-items: center; /* Aligning itmes to the start (left) */
}

.navSide a {
   justify-content: center;
   text-align: center;
   padding-left: 5px;
}

/* Nav a "Buttons" */
.navSide a:not(.socialMedia a)  {
   color: #1a1a1a;
   padding: 8px 20px;
   border-radius: 50px; /* Perfect pill shape */
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   display: inline-block;
   background-color: rgb(255,255,255); /* Transparent color rgb (color, opacity) */
   margin: 5px;
   box-shadow: 0 4px 15px rgb(0, 0, 0, .1);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.navSide a:not(.nav-link):not(.socialMedia a):not(.logo a) {
   color: #ffffff !important;
   background-color: #1a1a1a !important;
}

.navSide a:not(.socialMedia a):not(.nav-link-active):hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px ;
   color: white;
   background-color: #1a1a1a;
   text-decoration: none;
   opacity: .9;
}

.logo a{
   position: relative;
   text-decoration: none;
   color: #ffffff;
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   font-weight: 700;
   font-size: 1.2rem;
   letter-spacing: -0.01em;
}

.socialMedia {
   color: #ffffff;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   margin-top: 50px;
}

.socialMedia a {
   text-decoration: none;
   padding: 0;
}
.icons {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 15%;
   height: 25px;
   width: 25px;
   padding: 10px 0;
   margin: 12px 0;
   border: none;
   color: #1a1a1a;
   background-color: #ffffff;
   box-shadow: 0 4px 15px rgb(0, 0, 0, .1);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Rate at which colors transition and reposition of icon on hover*/
}      

.icons:hover{
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 15%;
   height: 25px;
   width: 25px;
   padding: 10px 0;
   margin: 12px 0;
   border: none;
   color: #ffffff;
   background-color: #1a1a1a;
   transform: translateY(-2px); /* trasnlates in specified direction x pixels */
}  

/* Burger Menu Button */
.bi-list {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 45px;
   width: 45px;
   position: absolute;
   top: 12px;
   left: 14px;
   z-index: 1001;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Rate at which colors transition and reposition of icon on hover*/
   border-radius: 10px;
   border-width: 1px;
   border: 1px solid var(--text-gray);
   font-weight: bold;
   font-size: 1.5rem;
   background-color: rgba(255, 255, 255, 0.6);
   backdrop-filter: blur(5px);
   color: #1a1a1a;
}

.bi-list:hover {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 45px;
   width: 45px;
   position: absolute;
   top: 12px;
   left: 14px;
   z-index: 1001;
   background-color: #1a1a1a;
   color: rgba(255, 255, 255, 1);
   transform: translateY(-2px);
}


/* Burger Menu Content */
.collapseContainer {
   position: absolute;  /*Allows container to be above other content */
   top: 63px;  /* Positions container just below burger button */
   left: 14px;  /* Aligns container with burger button */
   z-index: 1002;
}

.card {
   color: #1a1a1a;
   /* Glossy glass effect */
   background-color: rgb(255,255,255, .60);
   backdrop-filter: blur(10px);
}

.card a {
   color: #1a1a1a;
}

/* NAVIGATION BAR CLASSES END*/


/* HOME PAGE CLASSES */
.title {
   display: flex;
   position: absolute;
   justify-content: center;
   width: 100%;
   top: 23%;
   padding: 4px 10px 4px 10px;
   border-radius: 50px;
   z-index: 1001;
}

.title h1 {
   position: absolute;
   width: auto;
   color: rgb(0, 0, 0, .75);
   text-shadow: 0 10px 25px rgba(255, 255, 255, 0.9);
}

.homeNav {
/* This is the sidebar navigation */
   display: flex; /* Allows for vertical distribution */
   position: absolute;
   flex-direction: column; /* stacks content vertically */
   justify-content: space-around; /* Distributes content evenly in the column */
   align-items: center; /* Aligning itmes to the start (left) */
   z-index: 1001;
   color: #1a1a1a;
}

/* Cool buttons affects. Not needed for this project 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
*/
/* .homeNav a is for clear, modern, transitioning button */
.homeNav a:not(.socialMedia a) {
    padding: 8px 20px;
    border-radius: 50px; /* Perfect pill shape */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin: 5px;
    color: #1a1a1a;
    /* Creates glossy glass button */
    background-color: rgb(255,255,255, .20); /* Transparent color rgb (color, opacity) */
    backdrop-filter: blur(10px); /* background blur */
    box-shadow: 0 4px 15px rgb(0, 0, 0, .7); /* shadow affect around a "button" */
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Transitions button ease-in-out functionality */
}

.homeNav a:not(.socialMedia a):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px ;
    color: white;
    background-color: #1a1a1a;
    text-decoration: none;
    opacity: .9;
}

/* Roundabout CLASSES START */
.roundabout-container {
   position: relative;
   width: 100vw;    /* Full viewport width */
   height: 100vh;   /* Full viewport height */
   overflow: hidden;  /* Hide any overflow from the image */
}

.roundabout-item {
    display: flex;
    height: 100vh;
    width: 100vw;
    align-items: center;
    justify-content: center;
}

.image-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.roundabout-image {
    position: absolute;  /* Stacks  images on top of eachother for "Dissolve" transition effect */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.49, 0.94); /* Smooth in out transition */
    z-index: 1;
}

.roundabout-image.active {
    opacity: 1;
    z-index: 2;  /* Active image on top */
}


#next-button, #prev-button {
   position: absolute;
   top: 50%;
   background-color: transparent;
   border: none;
   font-size: 2rem;
   cursor: pointer;
   z-index: 1000; /* Makes buttons visible */
}
#next-button{
   right: 20px;
}

#prev-button{
   left: 20px;
}/* Roundabout CLASSES END */
/* HOME PAGE CLASSES END */

/* GALLERY PAGE CLASSES */
.scroll {
   display: flex;
   height: 100vh !important;
   width: 100% !important;
   overflow: hidden;
}

.scroll .row {
   height: 100vh !important;
   width: 100% !important;
   overflow-x: hidden;
   overflow-y: scroll;
}

.galleryContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 16.6%; /* Adjust based on nav bar width */
   width: 83.4%; /* Adjust based on nav bar width */
   height: 100vh;
   overflow-x: hidden;
   padding: 0 !important;
}

.galleryContainer .row .col-4 {
   background-color: #ffffff;;
   padding: 0 8px; /* Add some padding to the columns */
   
}

.middleColumn {
   padding: 0 !important;
}

.galleryRow {
   display: flex;
   align-items: center;
}

.galleryImage img {
   width: 100%; /* This is the key: Prioritize filling the height */
   height: auto;  /* Let width adjust automatically to maintain aspect ratio */
   padding-top: 6px;
   cursor: pointer;
   transition: transform 0.2s ease, box-shadow 0.2s ease;
   border-radius: 25px;
}

.galleryImage img:hover {
   transform: scale(1.02);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Interactive elements*/
/* These classes are used to style gallery modal created by clicking on images */
.modalOverlay {
/* This class is used to create a full screen overlay for the modal which will contain the image */
   position: relative;
   display: flex; /* REMEMBER: DISPLAY FLEX IS USED TO CENTER CONTENT */
   justify-content: center;
   align-items: center;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   position: fixed;
   height: 100vh;
   width: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000; /* Ensure class is top of other elements */
   visibility: hidden;  
   transition: visibility 0s, opacity 0.3s ease-in-out; 
}

@media screen and (max-aspect-ratio: 5/3) {
   .modalImageContainer{
   display: flex;
   height: auto;
   width: 100%;
   display: flex;
   object-fit: contain;
   visibility: hidden;
   }
}

.modalImageContainer {
   display: flex;
   height: 100vh;
   display: flex;
   object-fit: contain;
   visibility: hidden;
}

.modalImageContent {
/* This class is used to style the image within the modalOverlay */
   height: 90%;
   width: 90%;
   object-fit: contain;
   visibility: hidden;
}

#modalImage {
   z-index: 1001;
   visibility: hidden;
}

.modalCloseButton {
   position: absolute;
   top: 12px;
   right: 14px;
   background-color: transparent;
   border: none;
   color: #ffffff;
   font-size: 1.5rem;
   cursor: pointer;
   z-index: 1002; /* Ensure class is top of other elements */
   visibility: hidden;
   transition: background-color 0.2s ease;
}

.modalCloseButton:hover {
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.6);
   color: #1a1a1a;
}

#prevButton, #nextButton {
   position: absolute;
   background-color: transparent;
   border: none;
   font-size: 2.5rem;
   cursor: pointer;
   z-index: 1002;
   visibility: hidden;
   transition: background-color 0.2s ease;
}

.modalPrevButton {
   left: 10px;
} 
.modalNextButton{
   right: 10px;
}

.bi-chevron-compact-left, .bi-chevron-compact-right{
   font-weight: bold;
   font-size: 2rem;
   color: rgb(255,255,255, .60);
   backdrop-filter: blur(50px);
}
.bi-chevron-compact-left:hover, .bi-chevron-compact-right:hover {
   border-radius: 5px;
   background-color: rgba(255, 255, 255, 0.60);
   color: #1a1a1a;
}/* interactive elements END */
/* GALLERY PAGE CLASSES END */

/* CONTACT PAGE CLASSES START*/
.contactContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 16.6%; /* Adjust based on nav bar width */
   width: 83.4%; /* Adjust based on nav bar width */
   height: 100vh; /* Ensure full viewport height */
   overflow: hidden; /* Prevent content from spilling out */
}

.contactContentContainer-flex {
   display: flex;
   flex-direction: column;
   position: relative;
   height: 100dvh;
   height: 100vh;
   width: 100%;
   padding: 20px;
   box-sizing: border-box;
}

.contactContent {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.contactContent h1 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--primary-dark);
}

.contactContent p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-gray);
    max-width: 600px;
}

.calendly-inline-widget {
   position: relative; /* Change from absolute to relative */
   flex: 1; /* Take up remaining space */
   min-height: 400px;
   max-height: calc(100vh - 150px); /* fixes static widget height problem*/
   width: 100%;
   margin-top: 20px;
}
/* Grabbed from claude to fix height stretch problem on Mac OS */
@media screen and (max-width: 576px) {
   .contactContainer {
       /* Use smaller viewport unit for mobile to account for browser UI */
       height: 100svh; /* Small viewport height - excludes dynamic UI */
       height: 100vh; /* Fallback */
   }
   
   .contactContentContainer-flex {
       height: 100svh;
       height: 100vh; /* Fallback */
       padding: 15px; /* Reduce padding on mobile */
   }
   
   .calendly-inline-widget {
       height: 350px; /* Smaller height for mobile */
       min-height: 300px;
       max-height: calc(100vh - 150px);
   }

}
/* CONTACT PAGE CLASSES END*/

/* ABOUT PAGE CLASSES */

.aboutContentContainer {   
   /* Container to align image and text */
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: 16.6%; /* Adjust based on nav bar width */
   width: 83.4%; /* Adjust based on nav bar width */
   height: 100vh; /* Ensure full viewport height */
   overflow: hidden; /* Prevent content from spilling out */
}

.profileImageContainer {
   height: 100vh; /*contains image within aboutContentContainer*/
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
}
#childProfileImageContainer{
   /* Keeps image aspect ratio */
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
   opacity: 100%;
}

.aboutTextOverlay {
   /* displays text over profile image in about page */
   display: flex;
   position: absolute; /* needed to display aboutTextOverlay*/
   flex-direction: column;
   height: auto;
   z-index: 1000; /* setting z-index determines which elements are on top*/
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 10px;
   background-color: rgb(255,255,255, .60);
   backdrop-filter: blur(5px); /* background blur */
}
.aboutTextOverlay p, .aboutTextOverlay h1{
   /*marginal details for formatting */
   color: #1a1a1a;
   padding-bottom: 3%;
}

/* Hide mobile container and alternative columns by default */
.aboutContainer {
   display: none;
}

/* Default: Show col-2 and col-10 (for large screens > 768px) */
.col-2 {
   display: flex !important;
}

.col-10 {
   display: flex !important;
}

/* Medium screens: 577px to 768px - Show col-3 and col-9 */
@media screen and (min-width: 577px) and (max-width: 768px) {
   /* Override Bootstrap's col-2 to behave like col-3 */
   .navSideContainer.col-2 {
      flex: 0 0 22% !important; /* col-3 equivalent */
      max-width: 22% !important;
   }

   .galNavSideContainer.col-2, .col-2 {
      flex: 0 0 22% !important; /* col-3 equivalent */
      max-width: 22% !important;
   }
   
   /* Override Bootstrap's col-10 to behave like col-9 */
   .col-10.aboutContentContainer, .col-10 {
      flex: 0 0 78% !important; /* col-9 equivalent */
      max-width: 78% !important;
   }
   
   /* Keep desktop layout structure */
   .aboutContainer {
      display: none !important;
   }

}

@media screen and (max-width: 576px) {
   /* Hide all desktop columns */
   .col-2, .col-10, .navSideContainer, .galNavSideContainer {
      display: none !important;
   }
   .galleryContainer {
      left: 0 !important; /* Full width for gallery on mobile */
      width: 100% !important;
   }
   
   /* Show mobile container */
   .aboutContainer {
      display: flex !important;
      position: relative;
      width: 100vw;
      height: 100vh;
   }

   .aboutContent {
      display: flex;
      height: 100vh;
      width: 100vw;
      align-items: center;
      justify-content: center;
   overflow: hidden;
   }

   .aboutContent .image-container {
      position: relative;
      width: 100vw;
      height: 100vh;
   }

   .profileImage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 1;
   }

   .aboutContainer .aboutTextOverlay {
      display: flex;
      position: absolute;
      text-align: justify;
      flex-direction: column;
      height: auto;
      z-index: 1000;
      padding: 0 12px;
      margin: 0 14px;
      border-radius: 10px;
      background-color: rgb(255,255,255, .60);
      backdrop-filter: blur(5px);
   }

   .contactContainer {
      display: flex!;
      position: relative;
      left: 0 !important; /* Full width for contact on mobile */
      width: 100vw;
      height: 100vh;
   }
}

/* ABOUT PAGE CLASSES END */