@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');
/* static/css/visual.css */
/* Purely visual styles: fonts, colors, text sizes, decorations, hover color changes */


body {
    font-family: 'DM Sans', serif;
    color: #000;
    background: #fff;
}



.secondlink {
    color: #000; /* black */
    font-weight: 600;
    text-decoration: underline;
}

.secondlink:hover {
    background: #E4FF00; /* optional */
    text-decoration: underline;
    color: #000; /* black */
}

.nav-button.left {
    left: -4rem; /* Position left of media */
}

.nav-button.right {
    right: -4rem; /* Position right of media */
}

.nav-button {
    font-size: 6rem;
    color: #000;
    transition: color 0.2s ease-in-out;
    text-decoration: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.nav-button:hover {
    color: #707273;
}




/* Dropdown submenu for series */
.submenu {
    display: none;
    position: absolute;
    background: #fff; /* White background */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Slicker shadow */
    padding: 0.5rem 0;
    z-index: 20;
    min-width: 200px; /* Slightly wider for slick feel */
    left: 0;
    border-radius: 0.25rem; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth transition */
}

nav ul li:hover .submenu {
    display: block;
}

.submenu-link {
    color: #000; /* Black text for black and white */
    text-decoration: none;
    display: block;
    padding: 0.2rem 0.2rem;
    transition: background-color 0.2s ease, color 0.2s ease; /* Slick hover transition */
}

.submenu-link:hover {
    background-color: #f0f4f7; /* Light grey on hover */
    color: #000;
}




/* Tags styling */
.tags {
    list-style: none;
    margin: 0.25rem 0 0 0;
    padding: 0;
}

.tags li {

      display: inline-flex;
      align-items: center;
      border-radius: 0.375rem;
      background-color:      #fff5fd;
;
      padding-left: 0.2rem;
      padding-right: 0.2rem;
      padding-top: 0.1rem;
      padding-bottom: 0.1rem;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 400;
      color: #494552;
      box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.2);
  }




/* Generic detail image */
.detail-image {
    max-width: 600px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Media container centered */
.media-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}

/* INDEX PAGE GRID (irregular positioning) */
.index-grid-container {
    position: relative;
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* set images for size index */
.index-grid-item {
    position: relative;
    transition: transform 0.3s ease;
    width: 35%;

    max-width: 370px;
}

.index-grid-item img,
.index-grid-item video {
    max-width: 100%;
    height: auto;
}

.index-grid-item video {
  max-height: 450px;
    width: auto;
}

/* Irregular positioning transforms only for index */
.index-grid-item:nth-child(1) {
    transform: translate(-5vw, 0);
}

.index-grid-item:nth-child(2) {
    transform: translate(0, 10vh);
}

.index-grid-item:nth-child(3) {
    transform: translate(5vw, 6vh);
}

.index-grid-item:nth-child(4) {
    transform: translate(-5vw, 15vh);
}

.index-grid-item:nth-child(5) {
    transform: translate(7vw, 22vh);
}

/* Reset transforms below 768px on index */
@media (max-width: 768px) {
    .index-grid-item {
        width: 80%;
        margin: 1rem;
        max-width: 350px;
        transform: none !important;
    }
    .index-grid-item img,
    .index-grid-item video {
        max-width: 350px;
    }
    .index-grid-item video {
        max-height: 203px;
    }
    .detail-image {
        max-width: 450px;
    }
    .index-grid-container {
        flex-direction: column;
        align-items: center;
    }
}

/* ARCHIVE GRID - Clean grid layout without transforms */
.archive-grid .grid-item {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  display: flex;
flex-direction: column;
justify-content: flex-end;
}


.archive-grid .grid-item img,
.archive-grid .grid-item video {
  width: auto; /* allows width to scale naturally */
  max-width: 100%; /* but not exceed container width */
  height: auto; /* height adjusts to aspect ratio */
  display: block;
  object-fit: contain; /* or cover if you want cropping */
}


.archive-grid .grid-item video {
   max-height: 563px;
    width: auto;
}

.archive-grid .grid-item .content {
    margin-top: 0.5rem;
    text-align: left;
}

/* Remove any transforms on archive items */
.archive-grid .grid-item:nth-child(1),
.archive-grid .grid-item:nth-child(2),
.archive-grid .grid-item:nth-child(3),
.archive-grid .grid-item:nth-child(n+4) {
    transform: none !important;
    position: static !important;
}


@media (max-width: 480px) {
    .archive-grid {
    /*    grid-template-columns: repeat(2, 1fr) !important;*/
    /*    gap: 0.75rem !important;*/
    }

    .grid-item img,
    .grid-item video {
        max-width: 350px;
    }
    .grid-item video {
        max-height: 197px;
    }
    .detail-image {
        max-width: 600px;
    }
}

/* Index page title alignment */
.index-grid-container .grid-item .title-link {
    text-align: left;
    margin-top: 0.5rem;
}



@media (max-width: 640px) {
  .archive-grid {
    grid-template-columns: 1fr !important;
  }

@media (max-width: 640px) {
  .archive-grid {
    grid-template-columns: 1fr !important;
  }
  .archive-grid > .grid-item {
    grid-column: 1 / -1 !important; /* fix for overlap because of video double column span entire one column */
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Reset spanning for any nested media like video inside grid-item */
  .archive-grid video, .archive-grid img {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}