@import url("font.css") layer(font);
@import url("reset.css") layer(reset);
@import url("composition.css") layer(composition);
@import url("theme.css") layer(theme);

@layer font, reset, composition, theme;

/* ---------- HEADER ---------- */
header {
  border-block-end: var(--border);
  justify-content: space-between;
  text-transform: lowercase;
  padding: var(--layout-padding);
}

header a {
  text-decoration: none;
}

#logo.home a {
  color: var(--color-theme);
}

#logo.subpage a {
  color: var(--color-medium);
}

#logo.subpage .page-title {
  color: var(--color-theme);
}

nav ul {
  padding-inline-start: 0;
  list-style: none;
}

nav a:hover {
  color: var(--accent-hover-color);
  /* Hover color */
}

/* Current page or parent page link */
/* Current page link */
nav li .current {
  color: var(--color-medium);
  /* Gray color for current page */
  pointer-events: none;
  /* Disable clicking on the current page link */
  cursor: not-allowed;
  /* Default cursor for current page link */
}

/* ---------- FOOTER ---------- */
footer {
  border-block-start: var(--border);
  justify-content: space-between;
  padding: var(--layout-padding);
  font-size: var(--size-step--1);
}

code,
p > code,
pre > code {
  padding-inline: 1ex;
  font-size: calc(var(--font-size) - 4px);
  border-radius: 4px;
  border: var(--border);
}

pre > code {
  display: block;
  /* https://kilianvalkhof.com/2021/css-html/you-want-overflow-auto-not-overflow-scroll/ */
  overflow-x: auto;
}

/*TODO: MAKE FOOTER AND HEADER AND TITLE ROW NOT A BOX!!!!!!!!!*/

/* -------------------- POSTS ------------------------ */
article {
  /* padding-block-start: 10lh; */
  /* padding-block-end: var(--space-3xl); */
  max-inline-size: var(--layout-measure);
  font-size: var(--size-step-0);
  overflow-y: scroll;
}

/* aside {
  font-size: var(--size-step-1);
} */

aside dl {
  display: grid;
  grid-gap: 4px 16px;
  grid-template-columns: max-content;
}

aside dd {
  margin: 0;
  grid-column-start: 2;
}

article h1 {
  color: var(--color-bright);
}

/* article h2 {
  color: var(--color-bright);
} */

/* https://webkit.org/blog/16831/line-height-units/ */
article p,
article ul,
article ol {
  margin-block-start: 0.5lh;
}

.footnote-ref {
  font-size: var(--size-step--2);
}

.footnotes-sep {
  inline-size: 100%;
}

.footnotes {
  font-size: var(--size-step--1);
}

.footnotes-list {
  margin: 0;
  padding-inline-start: 16px;
}

.footnote-backref {
  margin-inline-start: 4px;
}

/* TODO: Actually style the footnotes */
/* article {
  display: grid;
  grid-template-columns: auto var(--layout-measure);
  gap: var(--layout-padding);
}

article h1,
article h2 {
  grid-column: 1 / span 1;
  grid-row: 1 / span auto;
}

article>:not(h1, h2) {
  grid-column: 2 / span 1;
}


*/

/* ---------- Generic Details Defaults ---------- */
/* https://css-tricks.com/using-styling-the-details-element/
https://nerdy.dev/6-css-snippets-every-front-end-developer-should-know-in-2025#transition-animation-for-details */

details {
  @media (prefers-reduced-motion: no-preference) {
    /* Modern browsers with interpolate-size support */
    @supports (interpolate-size: allow-keywords) {
      &::details-content {
        overflow: clip;
        transition: content-visibility var(--transition-speed)
            var(--transition-function) allow-discrete,
          opacity var(--transition-speed) var(--transition-function),
          block-size var(--transition-speed) var(--transition-function);
        opacity: 0;
        block-size: 0;
      }

      &[open]::details-content {
        opacity: 1;
        block-size: auto;
      }
    }

    /* Fallback for browsers without interpolate-size */
    @supports not (interpolate-size: allow-keywords) {
      &[open] > div {
        animation: animateDown calc(var(--transition-speed) * 1.5)
          var(--transition-function) forwards;
      }
    }
  }
  & > div {
    padding-inline: var(--layout-padding);
    padding-block-end: var(--layout-padding);
  }
  & summary {
    cursor: pointer;
  }
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- ARCHIVE LAYOUT ---------- */
.archive {
  margin-block-start: 0;
  margin-inline: 0;
}

.title-row {
  justify-content: space-between;
}

.archive-item {
  max-inline-size: none;
}

.archive-list > a.archive-item {
  text-decoration: none;
}

.archive-item h2 {
  font-size: var(--font-size);
  flex: 1;
  max-inline-size: none;
}

.archive-item > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-padding);
  align-items: start;
}

project-preview {
  flex: 0 0 var(--layout-measure);
  min-inline-size: 0; /* Prevents long words from expanding container */
  display: flex;
  flex-direction: column;
  gap: var(--layout-padding);
}

.archive-item figure {
  flex: 1 1 0;
  min-inline-size: min(var(--layout-measure), 100%);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vw, 24px);
  border-radius: 24px;
  background: radial-gradient(
      at 27% 37%,
      oklch(0.4 0.15 280) 0px,
      transparent 50%
    ),
    radial-gradient(at 97% 21%, oklch(0.35 0.12 320) 0px, transparent 50%),
    radial-gradient(at 52% 99%, oklch(0.3 0.1 260) 0px, transparent 50%),
    radial-gradient(at 10% 29%, oklch(0.32 0.13 300) 0px, transparent 50%),
    radial-gradient(at 97% 96%, oklch(0.28 0.08 240) 0px, transparent 50%),
    radial-gradient(at 33% 50%, oklch(0.25 0.1 290) 0px, transparent 50%),
    radial-gradient(at 79% 53%, oklch(0.3 0.12 270) 0px, transparent 50%),
    var(--color-dark);

  & img,
  & video {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
    border: 8px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  }
}

/* .archive-item:active,
.archive-item:active * {
  opacity: 0.5;
} */

.archive-list hr {
  border: none;
  block-size: 1px;
  background-color: var(--color-medium);
  max-inline-size: none;
  margin-block: 0;
}

/* Hover Effect */
.archive-item {
  transition: opacity var(--transition-speed) var(--transition-function);
}

.archive-list:has(.archive-item:hover)
  .archive-item:not(:hover):not(.title-row) {
  opacity: 0.15;
}

.archive-list:has(.archive-item:hover, .archive-item:focus-within)
  .archive-item:not(:hover):not(:focus-within) {
  opacity: 0.15;
}

/*--- Project Image---*/
project-image {
  border: 8px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}