* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

:root {
    --theme: #435546ff;
    --theme-dark: #2d4231ff;
    --theme-light: #66816aff;
    --theme-text: #ebf0d8ff;
    --theme-text-90: #ebf0d890;
    --theme-text-dark: #1a1a1aff;
}

header {
    text-align: center;
    background: var(--theme);
    color: var(--theme-text);
    display: flex; /* Use flexbox to align logo and nav */
    justify-content: space-between; /* Puts space between the logo and the nav links */
    align-items: center; /* Vertically centers the items */
    padding: 0 20px; /* Some padding on the sides */
    height: 50px; /* Set a fixed height */
    position: fixed;
    z-index: 999;
    width: 100vw;
    top: 0;
    left: 0;
}

.header2 {
    text-align: center;
    background: var(--theme-light);
    color: var(--theme-text);
    display: flex; /* Use flexbox to align logo and nav */
    justify-content: space-between; /* Puts space between the logo and the nav links */
    align-items: center; /* Vertically centers the items */
    height: 25px; /* Set a fixed height */
    position: fixed;
    z-index: 999;
    width: 100vw;
    top: 50px;
    left: 0;
}

.logo {
    color: var(--theme-text);
    font-size: clamp(16px, 2.5vw, 32px);
    text-decoration: none; /* Remove underlines from links */
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

/* Navigation List Styling */
nav ul {
    list-style-type: none; /* Remove bullet points */
    display: flex; /* Use flexbox for horizontal list items */
}

nav ul li a {
    color: var(--theme-text);
    text-decoration: none; /* Remove underlines from links */
    padding: 14px 16px; /* Add spacing around links, making the whole area clickable */
    display: block; /* Make the links block-level for padding to work well */
    text-align: center;
}

.header2 nav ul li a {
    padding: 4px 10px; /*Reset padding for smaller area */
}

/* Hover and Active effects */
nav ul li a:hover {
    background-color: var(--theme-light); /* Light background on hover */
    color: black;
}

nav ul li a.active {
    border-bottom: 2px solid var(--theme-light); /* Highlight the active/current page link */
}

.header2 nav ul li a:hover {
    background-color: var(--theme); /* Light background on hover */
    color: black;
}

.header2 nav ul li a.active {
    border-bottom: 1px solid var(--theme); /* Highlight the active/current page link */
}


.container {
    height: 100vw;
    margin: 50px 63px 20px 63px;
}

.fullContainer {
    height: 100vw;
    margin-top: 50px;
}

h2 {
    font-family: "Noto Serif", serif;
    text-align: center;
    color: var(--theme-text-90);
    background: var(--theme-dark);
    /*border-top: solid var(--theme) 1px;*/
    border-bottom: solid var(--theme-text-dark) 1px;
    display: block;
    width: 100%;
}



.gallery {
    display: grid;
    /* Creates responsive columns that automatically fit */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px; /* Space between images */
    gap: 10px; /* Shorthand for grid-gap */
}

.gallery img {
    width: 100%;
    height: 200px; /* Fixed height for all images to create uniform rows */
    object-fit: cover; /* This is the key: it crops images to fit the container while maintaining aspect ratio */
    display: block; /* Helps with alignment issues */
}

.pageBorder {
    position: fixed;
    height: 100vh;
    width: 63px;

    background:
        /* SVG texture (static) */
        url("assets/invert.svg") repeat-y,

        /* Shimmer layer (animated) */
        linear-gradient(
            180deg,
            var(--theme-dark) 40%,
            var(--theme-light) 50%,
            var(--theme-dark) 60%
        );

    background-size:
        auto,
        100% 200%;

    animation: shimmer 10s linear 1;
    animation-play-state: paused;
}

@keyframes shimmer {
    from { background-position: 0 0, 0% 0%; }
    to   { background-position: 0 0, 20% 200%; }
}
.right {
    right: 0;
    transform: scaleX(-1); /*Flip the image*/
    animation-direction: reverse; 
}

.noto {
    font-family: "Noto Emoji", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5em;
}

.noto-small {
    font-family: "Noto Emoji", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

@media (prefers-reduced-motion: reduce) {
    .pageBorder {
        animation: none;
    }
}

#search-wrapper {
    position: relative; /* Anchor for absolute positioning */
    width: 100%;
}

.search-icon {
    font-family: "Noto Emoji", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5em;
    position: absolute;
    left: 5px;           /* Adjust based on padding */
    top: 50%;
    transform: translateY(-50%); /* Perfectly center vertically */
    pointer-events: none; /* Allows clicks to pass through to the input */
}

#search {
  padding: 12px 20px 12px 40px; /* Space for the icon */
  width: 100%;
  border: 1px solid #ccc;
}

.tableContainer {
    width: 100vw;  /* Never exceed viewport width */
    max-width: 100%;
    overflow: auto; /* Enable both x & y scrolling */
    position: relative;
    flex-grow: 1;
}

.content {
    margin-top: 75px;
    height: calc(100vh - 75px);
}

#gardenPlanner {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid gray;
    table-layout: auto;
    width: max-content; /* Table can be wider than container */
    min-width: 100%; /* But never smaller than container */
}

#gardenPlanner thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
}
#gardenPlanner th, #gardenPlanner td {
    border-bottom: 1px solid gray;
}

#gardenPlanner th,
#gardenPlanner td {
    white-space: nowrap;
}

#gardenPlanner th:hover {
    cursor: pointer;
}

#gardenPlanner th, #gardenPlanner td {
  text-align: left;
  padding: 5px;
}

#gardenPlanner tr {
  border-bottom: 1px solid gray;
}

#gardenPlanner td:nth-of-type(n+4) {
    text-align: center;
  }


#gardenPlanner th.hide-col, #gardenPlanner td.hide-col {
    display: none;
}

#gardenPlanner td.center {
    text-align: center;
}

#gardenPlanner th.sortColumn:after {
    content: "  ⬇";
    color: #081c4d;
}

#gardenPlanner th.sortColumnUp:after {
    content: "  ⬆";
    color: #081c4d;
}

.common {
    cursor: pointer;
    color: blue;
}

.reflection {
    border-bottom: 1px solid var(--theme);
    display: flex; /* Makes the container a flex container */
    align-items: center; /* Vertically centers the items within the container */
    flex-wrap: wrap; 
}

.reflection img {
    width: 300px;
    max-width: 100%; /* Ensures the image is responsive within its wrapper */
    height: auto;
}

.reflection p {
    flex: 1;
    padding: 10px;
}

.winterSow {
    display: flex;
    gap: 5px;
    line-height: 0;
}

.winterSow img {
    /* Distributes the 5 images evenly across the container width */
    width: 20%; 
    /* Sets the fixed height */
    height: 120px;
    /* Crops the image to fit the container while maintaining aspect ratio */
    object-fit: cover;
    /* Centers the focus of the cropped area (optional) */
    object-position: center
}

@media screen and (max-width: 600px) {
    .winterSow img {
        height: 80px;
        width: 33%; /* Fixed height for all images to create uniform rows */
    }
    .extra {
        display: none;
    }
}

.plants p {
    padding: 10px;
    margin: 10px;
}

.plants ul li {
    list-style-type: circle;
    margin: 0 60px;
}

.plants-themed {
    background: var(--theme-light);
}

.plants-themed ul a {
    background: var(--theme-text-90);
    padding: 10px;
    margin: 10px;
    border-radius: 15px;
    text-decoration: none;
    list-style-type: none;
    display: block;
    width: calc(100% - 1em);
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  border-radius: 7px;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus, .closeList:hover, .closeList:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.closeList {
  color: #aaaaaa;
  text-decoration: none;
  position: absolute;
  top: 65px;
  right: 10px;
  font-weight: bold;
}

.modalDiv {
    padding-right: 10px;
    display: flex; /* Makes the container a flex container */
    align-items: center; /* Vertically centers the items within the container */
    flex-wrap: wrap; 
}
.profile-gallery {
    padding-right: 10px;
}

.profile-gallery img {
    width: 300px;
    max-width: 100%; /* Ensures the image is responsive within its wrapper */
    height: auto;
}

.profile {
    flex: 1;
}

.scientific {
    display: block;
    font-size: 1.25em;
    margin-top: .25em;
    margin-bottom: .25em;
    font-weight: bold;
    font-style: italic;
    text-decoration: none;
}





/***Expanding and collapsing***/
.collapsible {
background-color: #b4b0b0;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;

}

.collapsible:hover {
background-color: #555;
}

.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active {
background-color: #555;

}

.active:after {
content: "\2212";
}

.collapsibleContent {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: white;

}

label {
    padding-right: 10px;
}

.border {
    border: 2px solid var(--theme-light);
    width: 100%;
    margin: 1em;
    padding-bottom: 1em;
    border-radius: 5px;
}

.grid-container {
    display: flex; /* Makes the container a flex container */
    align-items: top; /* Vertically centers the items within the container */
    flex-wrap: wrap; 
    width: calc(100% - 2em);
    gap: 1em;
}

.column {
    flex: 1;
}

.plants-themed h3 {
    padding-left: 0.5em;
}

.plants-themed ul {
    padding-bottom: 0.5em;
}

.plants-themed p {
    padding: 0.5em;
}

.italic {
    font-style: italic;
}

.button {
  background-color: var(--theme-light);
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
  border-radius: 5px;
}
.button:hover {
  background-color: var(--theme);
}

.button.grey {
    background-color: grey;
}

.button.grey:hover {
  background-color: lightslategrey;
}