/* styles.css */

/* Beginning Of Defining Variables */

:root{
    /* Styling Colors */
    --color-1: white; /* White */
    --color-2: rgba(255, 255, 255, 0.1); /* 10% Opaque White */
    --color-3: rgba(255, 255, 255, 0.2); /* 20% Opaque White */
    --color-4: black; /* Black */
    --color-5: #6d6d97;  /* Navy */
    --color-6: blue;  /* Blue */
    --color-7: #4f4f5e33; /* 20% Opaque Blue */
    --color-8: #7B68EE; /* Medium slate blue */
    --color-9: rgba(123, 104, 238, 0.5); /* 50% Opaque Medium slate blue */
    --color-10: powderblue; /* Powder Blue */
    --color-11: steelblue; /* Steel Blue */
    --color-12: #6F00FF; /* Electric Indigo */
    --color-13: #DA70D6; /* Orchid */;
    --color-14: rgba(218, 112, 214, 0.5); /* 50% Opaque Orchid */;
    --color-15: rgba(123, 104, 238, 0.2); /* 20% Opaque Medium slate blue */
    --color-16: rgba(218, 112, 214, 0.2); /* 20% Opaque Orchid */
    --color-17: rgba(255, 255, 255, 0.5); /* 50% Opaque White */
    --color-18: rgba(255, 0, 0, 1); /* 100% Opaque Red */

    /* Variable For Fixing Scroll Issues */
    --header-height: 20vh; /* Fall Back Value In Case JavaScript Fails */
}

/* End of Variable Definition */



/* Beginning Of Universal Margin, Padding And Box-Sizing Styling */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* End Of Universal Margin, Padding And Box-Sizing Styling */


/* Beginning Of Body Styling */
body{
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

/* End Of Body Styling */

/* Beginning Of Styling For Fixing Scroll Issues*/
html{
    scroll-padding-top: var(--header-height);
}
/* End Of Styling For Fixing Scroll Issues*/

/* Beginning Of Universal Homepage Styling */

hr{
    background-color: var(--color-13); /* Orchid */
    width: 100%;
    height: 1vw;
}

/* End Of Universal Homepage Styling */



/* Beginning Of Site Header Styling - System Logo, Name And Navigation Links */

.site-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 86vw;
    height: auto;
    margin-top: 1vh;
    padding-bottom: 1vh;
    background-color: var(--color-1); /* White */
    position: sticky;
    top: 0;
    z-index: 999;
}

.brand-link{
    display: flex;
    align-items: center;
    margin-right: auto;
    text-decoration: none;
    font-weight: bold;
    font-size: 5vw;
    color: var(--color-12); /* Electric Indigo */
}

.logo-img{
    width: 15vw;
    height: 15vw;
    border: 0.2vw solid var(--color-12); /* Electric Indigo */
    border-radius: 50%;
    background-color: var(--color-1); /* White */
    padding: 1vw;
}

.system-name-heading{
    margin-left: 1vw;
    font-size: 5vw;
}

.catch-phrase{
    color: var(--color-6);  /* Blue */
    font-size: 5vw;
}

.site-header a div{
    text-align: center;
}

.nav-bar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 60vw;
    background-color: var(--color-3); /* 20% Opaque White */
    backdrop-filter: blur(2vw);
    box-shadow: -5vw 0 5vw var(--color-4); /* Black */
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 999;
}


.nav-bar ul{
    width: 100%;
    list-style: none;
    padding: 1vw;
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
}

.nav-bar ul li, .nav-bar ul li a{
    width: 100%
}

.nav-bar ul li a{
    display: block;
    text-decoration: none;
    font-weight: bold;
    font-size: 4.5vw;
    color: var(--color-12); /* Electric Indigo */
}

.nav-bar ul li:hover, .nav-bar ul li a:hover, .open-nav-button:hover{
    background-color: var(--color-10); /* Powder Blue */
    color: var(--color-5);  /* Navy */
}

.nav-bar ul li:active, .nav-bar ul li a:active, .open-nav-button:active{
    background-color: var(--color-11); /* Steel Blue */
    color: var(--color-1); /* White */

}

.contact-link{
    background-color: var(--color-7); /* 20% Opaque Blue */
    padding: 0.3vw;
}

.active{
    background-color: var(--color-10); /* Powder Blue */
}

.close-nav-button{
    background-color: var(--color-6);  /* Blue */
    border: 0.5vw solid var(--color-5);  /* Navy */
    border-radius: 1vw;
}

.open-nav-button{
    border: 0.3vw solid var(--color-6);  /* Blue */
    border-radius: 1vw;
}

#notification-red-bell {
    width: 5vw;     /* Scalable size for mobile */
    height: auto;
    margin-left: 5px;
    vertical-align: middle; /* Keeps it aligned with the text baseline */
}

/* End Of Site Header Styling - System Logo, Name And Navigation Links */



/* Beginning Of Site Main Content Styling */
main{
    width: 90%;
    max-width: 1200px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    margin-top: 3vh;
    flex: 1; /* Expand To Fill Available Space */
}

/* Beginning Of Styling The Notification Alert Section On The Home Page*/
.home-notification-alert-sect{
    position: fixed;
    z-index: 998;
    margin-top: 1vh;
    margin-bottom: 3hv;
    width: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-notification-alert-sect div{
    text-align: center;
    padding: 1vh 1vw;
    background-color: var(--color-2); /* 10% Opaque White */
    backdrop-filter: blur(0.3vw); /* Frost Effect */
    -webkit-backdrop-filter: blur(0.3vw);
}

.home-notification-alert-sect a{
    text-decoration: none;
    font-size: 6vw;
    font-weight: bold;
    color: var(--color-1); /* White */
    background-color: var(--color-18);  /* 100% Opaque Red */
}
/* End Of Styling The Notification Alert Section On The Home Page*/


/* Beginning Of Styling The Full System Name Section On The Home Page */
.home-full-system-name-sect{
    margin-top: 12vh;
    width: 100%;
    min-height: 25vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("../assets/images/main_window_background.jpg");
    background-size: cover;
    background-position: center;
}

.home-full-system-name-sect div{
    text-align: center;
    padding: 1vh 1vw;
    background-color: var(--color-2); /* 10% Opaque White */
    backdrop-filter: blur(0.3vw); /* Frost Effect */
    -webkit-backdrop-filter: blur(0.3vw);
}

.home-full-system-name-sect div h2{
    font-size: 6vw;
    color: var(--color-12); /* Electric Indigo */
}

.home-full-system-name-sect p{
    font-size: 6vw;
    color: var(--color-5);  /* Navy */
}

.home-full-system-name-sect a{
    text-decoration: none;
    font-size: 6vw;
    font-weight: bold;
    color: var(--color-1); /* White */
    background-color: var(--color-5);  /* Navy */
}
/* End Of Styling The Full System Name Section On The Home Page */


/* Beginning Of Styling The Subsidence Risk Maps Section On The Homepage */
.home-subsidence-risk-maps-sect{
    margin-top: 6vh;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.home-subsidence-risk-maps-sect div{
    margin-top: 1vh;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.home-subsidence-risk-maps-sect h2{
    font-size: 5vw;
    color: var(--color-12); /* Electric Indigo */
}

.home-subsidence-risk-maps-sect h3{
    font-size: 5vw;
    color: var(--color-5);  /* Navy */
}

.home-subsidence-risk-maps-sect div div{
    padding: 1vh 1%;
    margin: 1vh 0;
    width: 100%;
    height: auto;
    border-radius: 1vw;
    background-color: var(--color-9); /* 50% Opaque Medium slate blue */
}
/* End Of Styling The Subsidene Risk Maps Section On The Homepage */



/* Styling The Subsidence Risk Graphs Section On The Homepage */
.home-subsidence-risk-graphs-sect{
    margin-top: 6vh;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-subsidence-risk-graphs-sect div{
    margin-top: 1vh;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.home-subsidence-risk-graphs-sect h2{
    font-size: 5vw;
    color: var(--color-12); /* Electric Indigo */
}

.home-subsidence-risk-graphs-sect h3{
    font-size: 5vw;
    color: var(--color-5);  /* Navy */
}

.home-subsidence-risk-graphs-sect div div{
    padding: 1vh 1%;
    margin: 1vh 0;
    width: 100%;
    border-radius: 1vw;
    background-color: var(--color-14); /* 50% Opaque Orchid */;
}
/* End Of Styling The Subsidence Risk Graphs Section On The Homepage */

/* Beginning Of Styling The Map And Graph Navigation Arrows */
.arrow-image-div {
    width: 100%;
    display: flex;
    flex-direction: row; /* Force side-by-side */
    align-items: center;
    justify-content: center; /* Horizontally center the group */
    gap: 30px; /* Space between the two arrows */
    margin: 2vh 0; /* Add some breathing room above/below */
}

.arrow-image-div img {
    width: 8vw;  /* Mobile size */
    height: auto;
    cursor: pointer;
    transition: transform 0.2s;
}
.arrow-image-div img:active {
    transform: scale(0.9); /* Tactile click feedback */
}
/* End Of Styling The Map And Graph Navigation Arrows */

/* Beginning Of Site Footer Styling */
.site-footer{
    display: flex;
    width: 96vw;
    margin-top: 5vh;
    align-items: center;
    justify-content: center;
    min-height: 5vh;
    background-color: var(--color-5);  /* Navy */
    color: var(--color-1); /* White */
    text-align: center;
    font-size: 3vw;
    font-weight: bold;
    padding: 1vh 1vw;
    margin-bottom: 1vh;
    border-radius: 2vw;
}
/* End Of Site Footer Styling */

/* Beginning Of Specialised Styling For Displaying The Maps And Graphs */
.slot-viewport {
    position: relative;
    width: 100%;
    min-height: 550px; 
    height: auto !important;
    background-color: var(--color-2);
    border-radius: 1vw;
    overflow: hidden;
}

.slot-viewport iframe {
    display: block; /* Removes inline-block bottom gap */
    width: 100%;
    min-height: 550px;
    height: 100% !important; /* Fill the entire hieght of the parent */
    border: none;
    transition: filter 0.3s ease;
}

.loading-blur {
    filter: blur(10px);
}

.error-box {
    width: 100%;
    height: 100%;
    background-color: var(--color-1);
    color: var(--color-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    padding: 20px;
    border: 2px solid var(--color-18);
}

/* Hide navigation arrows by default until logic enables them */
/* .arrow-image-div img {
    visibility: hidden;
} */

.home-subsidence-risk-maps-sect div div,
.home-subsidence-risk-graphs-sect div div {
    padding: 0; /* Changed from 1vh 1% to allow map to fill the box */
    margin: 1vh 1vw;
    width: 100%;
    border-radius: 1vw;
    overflow: hidden; /* Ensures the map follows the border-radius */
}
.slot-div {
    overflow: hidden;
}

/* End Of Specialised Styling For Displaying The Maps And Graphs */
/* End Of Site Main Content Styling */

/* Beginning Of Styling The Notifications Page */
.notification-page-heading-sect{
    margin-top: 1vh;
    margin-bottom: 3hv;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.notification-heading{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-18);
    background-color: var(--color-5);
    font-size: 3vw;
}

.notifications-page-notifications-list-sect{
    margin-top: 1vh;
    margin-bottom: 3hv;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.notifications-page-notifications-list-sect div{
    width: 90%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    text-align: center;
    color: var(--color-18);
    background-color: var(--color-7);
}
/* End Of Styling The Notifications Page */

/* Beginning Of Styling The About Page */
.about-page-about-sect{
    margin-top: 3vh;
    margin-bottom: 3hv;
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-page-about-sect h1{
    color: var(--color-12);
    font-size: 6vw;
}

.about-page-about-sect div{
    margin-top: 1vh;
    font-size: 6vw;
    text-align: center;
    background-color: var(--color-8);
}

.about-page-about-sect div ul{
    text-align: justify;
    list-style-type: none;
    padding: 0 1vw;
}
/* End Of Styling The About Page */


/* Beginning Of Desktop Responsive Styling */
@media (min-width: 768px) {

    /* Beginning Of Site Header Responsive Styling */
    .open-nav-button, nav ul li:first-child {
        display: none;
    }

    .nav-bar{
        position: static;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        height: auto;
        width: auto;
        box-shadow: none;
    }

    .nav-bar ul{
        flex-direction: row;
        gap: 2vw;
    }

    .nav-bar ul li a{
        font-size: 3vw;
        color: var(--color-13); /* Orchid */;
    }

    .system-name-heading{
        font-size: 4vw;
    }

    .brand-link{
        font-size: 2vw;
    }
    

    .catch-phrase{
        font-size: 3.0vw;
    }

    #notification-red-bell {
        width: 4vw; /* Fixed small size for desktop */
        height: auto;
    }
/* End Of Site Header Responsive Styling */

/* Beginning Of Styling The Notification Alert Section On The Home Page*/
.home-notification-alert-sect a{
    font-size: 0.8vw;
    font-weight: bold;
}
/* End Of Styling The Notification Alert Section On The Home Page*/


/* Beginning Of Responsive Styling For The Full System Name Section On The Home Page */
    .home-full-system-name-sect {
        margin-top: 25vh;
    }
    .home-full-system-name-sect div h2{
        font-size: 3vw;
    }

    .home-full-system-name-sect p{
        font-size: 3vw;
    }

    .home-full-system-name-sect a{
        font-size: 3vw;
        font-weight: bold;
    }
    /* End Of Responsive Styling For The Full System Name Section On The Home Page */

    /* Beginning Of The Subsidence Risk Maps Section Reponsive Styling On The Home Page */   
    .home-subsidence-risk-maps-sect div{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .home-subsidence-risk-maps-sect div div{
        width: 100%;
        margin: 1vh 1vw;
    }

    .home-subsidence-risk-maps-sect h2{
        font-size: 3vw;
    }

    .home-subsidence-risk-maps-sect h3{
        font-size: 3vw;
    }
/* End Of The Subsidence Risk Maps Section Reponsive Styling On The Home Page */


/* Beginning Of The Subsidence Risk Graphs Section Reponsive Styling On The Home Page */  
    .home-subsidence-risk-graphs-sect div{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
    }

    .home-subsidence-risk-graphs-sect div div{
        width: 45%;
        margin: 1vh 1vw;
    }

    .home-subsidence-risk-graphs-sect h2{
        font-size: 3vw;
    }

    .home-subsidence-risk-graphs-sect h3{
        font-size: 3vw;
    }

    .home-subsidence-risk-graphs-sect h4{
        font-size: 3vw;
    }

    .home-subsidence-risk-graphs-sect div div p, .home-subsidence-risk-graphs-sect div div p a{
        font-size: 3vw;
    }
    /* End Of The Subsidence Risk Graphs Section Reponsive Styling On The Home Page */


    /* Beginning Of Site Footer Responsive Styling */
    .site-footer{
        margin-top: 10vh;
    }
    /* End Of Site Footer Responsive Styling */

    /* Beginning Of Responsive Styling Of The Map And Graph Navigation Arrows */
    .arrow-image-div img {
        width: 40px; /* Fixed size for larger screens */
    }
/* End Of Responsive Styling Of The Map And Graph Navigation Arrows */
    /* Stack the ML and FB boxes vertically */
    /* 1. Target the specific container that holds the two slots */
    /* .home-subsidence-risk-maps-sect > div:not(.arrow-image-div),
    /* .home-subsidence-risk-graphs-sect > div:not(.arrow-image-div) {
        display: flex;
        flex-direction: column; 
        align-items: center;
        width: 100%;
        gap: 50px; Increased gap for better visual separation
    } */

    /* 2. Style the individual Slot-Divs */
    .slot-div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        /* This is the physical box size on your screen */
        height: 95vh !important; 
        margin-bottom: 20px;
    }

    /* 3. The Viewport MUST fill the parent Slot-Div */
    .slot-viewport {
        width: 98% !important;
        flex: 1; /* This forces the viewport to grow and fill all space not taken by the H3 */
        height: auto !important; /* Overrides the 300vh from your general styles */
        min-height: 550px; /* Safety floor for smaller laptop screens */
        overflow: hidden;
    }

    /* Ensure the container holding the maps doesn't have internal padding */
    .home-subsidence-risk-maps-sect > div:not(.arrow-image-div),
    .home-subsidence-risk-graphs-sect > div:not(.arrow-image-div) {
        width: 100%;
        padding: 0 !important; /* Remove any side padding that might shrink the slots */
        justify-content: center;
    }

    .slot-div {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important; /* Forces it to match the 'main' width exactly */
        height: 95vh !important;
        margin: 20px 0;
        border-radius: 1vw;
        overflow: hidden; /* This clips the map to your rounded corners */
    }

    .slot-div h3 {
        padding: 10px 0;
        margin: 0;
    }

    /* Beginning Responsive Of Styling The Notifications Page */
    .notification-heading{
        font-size: 2vw;
    }

    .notifications-page-notifications-list-sect div{
        font-size: 2vw;
    }
    /* End Of Responsive Styling The Notifications Page */

    /* Beginning Of Responsive Styling The About Page */

    .about-page-about-sect h1{
        font-size: 3vw;
    }

    .about-page-about-sect div{
        font-size: 2vw;
    }
    /* End Of Responsive Styling The About Page */

}
/* End Of Desktop Responsive Styling */