/* Universal and Basic Styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and Global Settings */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #F4F4F4;  /* Light Grey Background */
    color: #0D3455;  /* Dark Blue Text */
    line-height: 1.6;
    font-size: 18px;
    padding: 20px;
}

.sc          { font-variant: small-caps; }

/* Container */
.container {
    max-width: 960px;
    margin: auto;
    background-color: #FFFFFF;  /* White */
    padding: 20px;
}

/* Normal state */
#switchImage {
    content: url("annika.png");
  }

  /* Hover state */
  .hover-image:hover #switchImage {
    content: url("frog.png");
  }

.research-container {
    display: grid;
    grid-template-columns: 1fr; /* Creates a 2-column grid */
    grid-gap: 16px; /* Space between each box */
    padding: 16px; /* Padding around the grid */
    max-width: 90%; /* Limits the width of the container */
    margin: auto; /* Centers the container */
  }

  .research-box {
    background-color: #D9D9D9; /* Slightly darker grey than the background */
    padding: 40px; /* Inner padding for the content */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds subtle shadow for depth */
    align-items: center;
  }

  .research-box img{
      display: block;        /* makes the <img> take up its own line */
      margin: 0.5em auto;    /* top / bottom spacing, auto left-right = centred */
      max-width: 80%;       /* stays responsive, won’t spill out of the box */
  }


/* 1. Paragraphs: space and first-line indent */
.research-box p{
    margin: 0 0 1em;      /* bottom-only space between paragraphs */
}

/* 2. Ordered list: pull the numbers inside the text block
      and make the whole list sit at the same indent
      as the paragraphs above */
.research-box ol{
    list-style-position: inside; /* marker appears inside the content box */
    margin: 0 0 1em;             /* bottom space like regular paragraphs */
}

/* 3. List items: add vertical breathing room and
      keep text flush with list markers */
.research-box li{
    margin-bottom: 0.75em; /* space between list items */
    padding-left: 1.5em;   /* keeps the rest of the item’s lines aligned */
}

/* Header */
header {
    background-color: #0D3455;  /* Dark Blue */
    color: #FFFFFF;  /* White for Contrast */
    text-align: center;
    /*flex-direction: column;*/
    padding: 1em;
    font-size: 1em;
    display: flex;
    justify-content: space-between; /* Positions content on the far ends */
    align-items: center; /* Vertically aligns the elements */
    position: relative;
}

/* Navigation */
nav {
    background-color: #1F4E60;  /* Dark Teal */
    color: #F4F4F4;  /* Light Grey for Contrast */
    text-align: center;
    padding: 1em;
}

nav a {
    margin: 0 15px;
    color: #F4F4F4;
    text-decoration: none;
}

.nav-button {
    background-color: #1F4E60;  /* Dark Teal */
    color: #F4F4F4;  /* Light Grey for Contrast */
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
}

.nav-bar {
    display: flex; /* Enables flexbox layout */
    justify-content: space-evenly; /* Distributes buttons with equal space */
    gap: 16px; /* Space between buttons */
}

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Hide by default */
    font-size: 2em;
    background: none;
    border: none;
    cursor: pointer;
    color: #FFFFFF;
}

/* Mobile Nav */
.mobile-nav {
    display: none; /* Hide by default, will be toggled by JavaScript */
    background-color: white; /* White background */
    width: 100%;  /* Take full width */
    position: absolute;  /* Positioning relative to parent */
    top: 100%;  /* Align to bottom of the parent, which should be your header */
    left: 0;  /* Align to the left */
    z-index: 1;  /* Z-index to appear on top of other content */
}

.mobile-nav a {
    color: #0D3455; /* Dark blue text */
    text-decoration: none; /* Removes the hyperlink underline */
    display: block;  /* Makes each link take a full row */
    padding: 8px;  /* Adds some padding around text */
}

.mobile-nav li {
    padding: 10px;
}

.name-section span {
font-weight: bold; /* Bold font */
font-size: 1.2em; /* Slightly larger font */
}

/* Main Content */
.main-content {
    padding: 20px;
    color: #0D3455;
}

.main-content h2, .main-content h3, .main-content h4 {
    margin-top: 20px;
    margin-bottom: 20px;
    color: #0D3455;
}

.content {
    display: flex;  /* Use flexbox for layout */
    align-items: flex-start;  /* Align items to the start of the flex container */
  }

.left-section {
    flex: 2;  /* Take up 1 portion of the available space */
    max-width: 50%;  /* Limit width to 50% of the container */
    overflow: hidden;  /* Hide any overflowing content */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    flex-direction: column; /* Stack the content vertically */
    margin: 20px;  /* Add margin to create white space */
  }

  .left-section img {
    width: 70%;  /* Make the image responsive, taking up full width of the .left-section */
    height: auto;  /* Maintain aspect ratio */
  }

  figure {
    text-align: center; /* Centers the caption text */
  }

  .right-section {
    flex: 3;  /* Take up 1 portion of the available space */
    padding-left: 100px;  /* Add some padding for separation */
    padding-right: 50px;
    padding-top: 100px;
  }

  /* Publication container */

  /* Container to wrap all publications */
.publication-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 5%;
}

/* Individual publication box */
.publication-box {
    border: 1px solid #ccc;
    background-color: white;
    padding: 1em;
    margin: 1em;
    border-radius: 5px;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

/* Authors' names at the top */
.authors {
    font-size: 0.9em;
    margin-bottom: 0.5em;
}

/* Date and Journal details */
.pub-details {
    font-size: 0.8em;
    color: #555;
}

.date, .journal {
    margin: 0;
}

/* Paper title */
.pub-title {
    font-size: 1.4em;
    font-weight: bold;
    margin: 0.7em 0;
}

/* Abstract text */
.abstract {
    font-size: 1em;
    margin: 0.7em 0;
}

/* DOI button */
.doi-button {
    display: inline-block;
    padding: 5px 15px;
    background-color: #1F4E60;
    color: #fff;
    border-radius: 3px;
    font-size: 0.8em;
    text-decoration: none;
}

.middot-divider {
    padding-right: .45em;
    padding-left: .45em;
    font-size: 15px
}

.middot-divider::after {
    content: '\00B7'
}



/* Footer */
footer {
    background-color: #2F4F4F;  /* Dark Slate Grey */
    color: #F4F4F4;  /* Light Grey for Contrast */
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Responsiveness */
@media screen and (max-width: 1000px) {
    .desktop-nav {
        display: none; /* Hide desktop-nav */
    }
    .hamburger-menu {
        display: block; /* Show hamburger and mobile nav */
    }
    .research-container {
        grid-template-columns: 1fr; /* Creates a 1-column grid */
    }

    .name-section {
        align-items: center;
    }


}
@media screen and (max-width: 768px) {
    .content {
        flex-direction: column;  /* Stack them on top of each other */
    }

    .container {
        padding: 5px;
    }
    .left-section, .right-section {
        max-width: 100%;
        flex: 1;
        margin: 0px;
        padding: 5px;
    }

    .left-section img,
    .right-section img{
        width: 90%;          /* was 80 % */
        max-width: 600px;    /* safety cap */
        height: auto;
        margin: 0.5em auto;  /* keep centred */
        justify-items: center;
    }
    .research-box img{
        max-width: 100%;   /* let it fill the box */
        width: 100%;       /* or 90% if you want a bit of gutter */
    }


    .research-box{
        padding: 16px 8px;    /* top/bottom 16 px, left/right 8 px  */
        margin: 3px auto;
    }

    .publication-box{
        padding: 16px 8px;    /* top/bottom 16 px, left/right 8 px  */
        margin: 3px 5px;
    }

    .research-container, .publication-container{
        padding: 16px 0px;    /* top/bottom 16 px, left/right 8 px  */
        margin: 0 auto;
        justify-items: center;
    }

    .main-content h2{
        text-align: center;
    }
    .right-section h2{ text-align:center; }

}