/*Google Fonts Import*/
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Moderustic:wght@300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*General Selection to change default outlook of website from Love Running by Code Institute*/
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* General Body styles from Love Running by Code Institute*/
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    /* Generic project styles */
    color: #03045e;
    font-family: 'Moderustic', sans-serif;
}

h1 {
    font-family: 'Lora', sans-serif;
    color: #03045e;
}

/*Style header*/
header {
    background-color: #ffffff;
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

header a {
    text-decoration: none;
}

#menu a {
    color: #03045e;
}

#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    letter-spacing: 1.5px;
    font-size: 105%;
}

#menu>li {
    margin-bottom: 1rem;
}


.active {
    border-bottom: 3px solid #03045e;
    border-radius: 0 0 1% 1%;
}

/*Style navigation elements*/
nav {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    left: 0;
    padding: 0 1rem;
    box-shadow: 0 2px 2px #03045e;
    display: none;
    top: 100%;
}

/* Nav toggle */
#nav-tog:checked~nav {
    display: block;
}

#nav-tog {
    display: none;
    /*The checkbox won't show*/
}

.nav-tog-label {
    font-size: 2.3rem;
    color: #03045e;
}

/*Main content selectors' styles*/

#robo-div/* top section content in the main content of about page*/,
#con/*main content of contact page*/,
#about/*main content of about page*/ {
    margin: 5px auto;
    width: fit-content;
    font-size: 1.5rem;
    background-color: white;
    padding-top: 7%;
    text-align: center;
}

#th{
    margin: 8px 0px;
    width: 100%;
    font-size: 2rem;
    background-color: white;
    padding-top: 7%;
    text-align: center;
}

#read{
    margin: 0;
    width: 100%;
}

.special-text {
    font-size: 1.6rem;
    background-color: #03045e;
    color: #ffffff;
    margin-bottom: 1.5em;
    font-family: Montserrat;
    font-weight: bolder;
}

#whyus,
#whyus-about {
    text-align: center;
    line-height: 1.4;
    font-size: 140%;
}

hr {
    width: 50%;
    margin: 5% auto;
    border: 1px solid #03045e;
}

#whyus>aside,
#whyus-about>aside {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #03045e;
    color: #ffffff;
    padding: 2%;
    margin: 3.5%;
}

/*Styling for the form and its elements*/
form{
    display: block;
    position: relative;
    margin-top: 20px;
}

.fieldset-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column;
}

#btn {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    width: 25%;
    margin:  5px auto 25%;
    padding: 10px 10px;
    background-color: #03045e;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
}

#label a {
    text-align: center;
    text-decoration: none;
}

/* General styling for all input elements */
input, textarea {
    border: 2px solid #03045e;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    transition: border-color 0.3s ease;
    width: 300px;
    margin: 0px auto;
}

/*Styling main content for the read page*/
#toc {
    margin-bottom: 20px;
    padding: 2%;
}

#toc ol {
    list-style-type: none;
    text-align: center;
}

#toc li {
    font-size: larger;
    margin-bottom: 4px;
}

#toc a {
    text-decoration: none;
    color: inherit;
}

#toc a:hover {
    text-decoration: underline;
}

summary~ol {
    list-style-type: none;
}

dt {
    font-weight: bolder;
}

pre {
    font-family: inherit;
}

.article-read {
    margin-bottom: 20px;
    border: 1px solid #03045e;
    padding: 16px;
    border-radius: 5px;
    background-color: #ffffff;
}

.article-read img{
    display: block;
    margin: 1px auto;
    width: 320px;
    height: 240px;
}

summary {
    list-style: none;
}

.article-read details summary { /*Learnt from CSS Diners*/
    margin: 1%;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    background-color: #03045e;
    color: #ffffff;
}

.article-read details #det-about p { /*Learnt from CSS Diners*/
    margin: 10px 0;
    color: inherit;
}

/*Timeline styling with aid from ChatGPT*/

/* Timeline container */
.timeline-container {
    width: 80%;
    overflow-x: scroll;
    overflow-y: visible;
    /* Prevent vertical overflow */
    margin: 0 auto;
    /* Center the container */
}

/* Timeline styles for larger screens */
.timeline {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 20px 0;
    margin-top: 20px;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #ddd;
    z-index: 0;
}

.timeline-event {
    position: relative;
    width: 30%;
    text-align: center;
    margin: 0 10px;
    /* Add some spacing between events */
    flex-shrink: 0;
    /* Prevent events from shrinking */
    overflow: visible;
    /* Ensure that tooltips can overflow outside this element */
}

.timeline-content {
    position: relative;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1;
    overflow: visible;
    /* Ensure the content doesn't clip the tooltip */
}

.timeline-content h3 {
    margin: 0 0 10px;
    font-size: 1.2em;
    color: #03045e;
}

.timeline-content p {
    margin: 0;
    color: #0077b6;
}

/* Tooltip styling */
.tooltip {
    display: none;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #03045e;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: normal;
    z-index: 1000;
    max-width: 80vw;
    word-wrap: break-word;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    pointer-events: none;
}

/* Display tooltip on hover */
.timeline-event:hover .tooltip {
    display: inline-block;
}

.timeline-event::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #0077b6;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.timeline-event:hover::before {
    background-color: #03045e;
}

/*Style for the about page main content*/
#man,
#a-robot{
    width: 320px;
    height: fit-content;
    margin: 0px auto;
}

#about h2{
    text-align: center;
    font-size: 140%;
    padding-top: 2%;
}

video{
    margin: 1px auto;
}

#det-about{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #03045e;
    color: #ffffff;
    padding: 2%;
    margin: 3%;
    font-size: 1.2em;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    font-size: 110%;
}

/*Thank you page header style*/
#thanks{
    margin: 5% auto 20%;
}

/* Footer stays at the bottom */
footer {
    position: relative;
    bottom: 0;
    width: 100%;
    z-index: 2;
    background-color: #03045e;
    color: white;
    padding: 20px;
    text-align: center;
}

#socials {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 1%;
    margin: 2%;
}

#socials>li {
    list-style-type: none;
}

.fa-brands,
.ems-for-forms {
    color: white;
    font-size: 165%;
    padding: 5%;
    margin: 2.5%;
}

#read-footer {
    margin-top: 10px;
}


/*Media Queries*/
/*media query for screens of tablets and larger */
@media screen and (min-width:768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
        width: fit-content;
        padding-right: 1rem;
    }

    #menu {
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    .nav-tog-label {
        display: none;
    }

    #header_logo {
        font-size: 280%;
        line-height: 75px;
        margin: 0 0.5rem;
    }

    /*Main Content*/
    #robodiv {
        display: flex;
        align-items: center;
    }

    #robodiv img {
        max-width: 100%;
        height: auto;
        margin-right: 20px;
    }

    #robodiv p {
        flex: 1;
        margin: 0;
    }

    .special-text {
        font-size: 2.5rem;
        border-bottom: 2px solid #ffffff;
        background-color: #03045e;
        color: #ffffff;
        margin-bottom: 2em;
        font-family: Montserrat;
        font-weight: bolder;
    }
}

/*media query for hover effect on laptops and larger*/
@media screen and (min-width:992px) {

    /*Hover effect*/
    #menu a:hover {
        border-bottom: 3px solid #03045e;
    }
}

/*Media query for laptops or larger for contact form*/
@media screen and (min-width: 1024px) {
    /*Main content- Contact Form*/
    .fieldset-form{
        display: block;
    }
}

/*Timeline media queries with aid from ChatGPT*/

/* Responsive styling for tablets and below  */
@media (max-width: 1024px) {
    /*Read Page Timeline- vertical layout*/
    .timeline-container {
        overflow-y: auto;
        /* Enable vertical scrolling for smaller screens */
        overflow-x: hidden;
        /* Prevent horizontal scrolling */
    }

    .timeline {
        flex-direction: column;
        /* Stack the events vertically */
        justify-content: flex-start;
        align-items: center;
        height: 400px;
        /* Adjust the height as needed */
    }

    .timeline::before {
        top: 0;
        left: 50%;
        width: 4px;
        height: 1500px;
        transform: translateX(-50%);
    }

    .timeline-event {
        width: 100%;
        /* Make events take full width */
        margin: 20px 0;
        text-align: center;
        /* Center text on smaller screens */
    }

    .timeline-event::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .tooltip {
        top: -40px;
        /* Adjust tooltip position for vertical layout */
        max-width: 90vw;
        /* Ensure tooltips fit on smaller screens */
    }
}

/* Timeline styling for devices of small screens (phones) */
@media (max-width: 480px) {
    .timeline {
        height: 1500px;
        /* Set a smaller height for scrolling */
    }

    .timeline-event {
        width: 100%;
        /* Make events take full width */
        text-align: center;
        /* Center text on very small screens */
    }

    .timeline-event::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .tooltip {
        top: -30px;
        /* Adjust tooltip position for smaller screens */
    }
}