@import "pygment-default.css";
@import "playlist.css";
@import "currently.css";
@import "archives.css";
@import "article.css";

:root {
  --background-color: var(--color-canvasWhite1);
  --background-color-alt: color-mix(in srgb, var(--background-color) 50%, var(--color-lotusGreen) 50%);
  --background-color-alt2:  color-mix(in srgb, var(--background-color) 75%, var(--color-lotusGreen) 25%);
  --body-text-color: var(--color-winterGreen);
  --accent-color: var(--color-lotusGreenDarker);
  --box-radius: 0.25rem;

  --body-font: serif;
  --accent-font: serif;
  --mono-font: monospace;

  /* rose-pine colors */
  --color-base: #191724;
  --color-surface: #1f1d2e;
  --color-overlay: #26233a;
  --color-muted: #6e6a86;
  --color-subtle: #908caa;
  --color-text: #e0def4;
  --color-love: #eb6f92;
  --color-gold: #f6c177;
  --color-rose: #ebbcba;
  --color-pine: #31748f;
  --color-foam: #9ccfd8;
  --color-iris: #c4a7e7;
  --color-highlight-low: #21202e;
  --color-highlight-med: #403d52;
  --color-highlight-high: #524f67;

  /* https://github.com/thesimonho/kanagawa-paper.nvim/blob/master/palette_colors.md */
  --color-dragonash: #737c73;
  --color-canvasash1: #637263;
  --color-dragongray: #a6a69c;
  --color-dragonGreen: #699469;
  --color-lotusGreen: #6f894e;
  --color-lotusGreenDarker: #51643A;
  --color-autumnGreen: #76946A;
  --color-winterGreen: #2B3328;
  --color-canvasWhite1: #cbc8bc;
  --color-canvasGray1: #aeaea6;
  --color-canvasWhite6: #ecece8;
}

html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

body {
  font-family: var(--body-font), serif;
  /* background-color: var(--background-color); */
  background: linear-gradient(180deg, var(--background-color) 0%, var(--background-color-alt) 100%);
  /* make the background stretch instead of repeating the gradient */
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--body-text-color);
  margin: 0px;
  padding: 0px;
  font-size: 1rem;
  min-height: 100%;
}

::-moz-selection, ::selection {
  background: color-mix(
    in srgb,
    var(--color-canvasash1) 75%,
    var(--background-color) 25%
  );
}

h1, h2, h3, h4, h5, h6, nav a, .subtitle {
  font-family: var(--accent-font), serif;
}

.container {
  display: flex;
  flex-direction: row;
  max-width: 1000px;
  height: 100%;
  padding: 2rem;
  gap: 1rem;
  margin: 0 auto;
}

.sidebar {
  max-width: 275px;
  height: fit-content;
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  padding: 1rem;
  background: var(--background-color);
}

.sidebar hgroup {
  margin-bottom: 1.5rem;
}

.sidebar h1 {
  font-size: 1.5rem;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0.25rem;
}

.sidebar h1 a {
  color: var(--accent-color);
}

.sidebar .subtitle {
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  margin: 0px;
}

.sidebar h3 {
  font-size: 1.1rem;
  margin: 0px;
}

.sidebar header img {
  max-width: 100%;
  height: auto;
}

.sidebar .navlink-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.sidebar .navlink {
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  display: block;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.4rem;
  gap: 0.5rem;
}

.sidebar .navlink:hover {
  font-style: italic;
  background: var(--background-color-alt);
}

.sidebar .navlink img {
  max-width: 1.5rem;
  height: auto;
}

.sidebar nav ul {
  list-style: none;
  padding: 0px;
}

.sidebar nav ul li {
  width: 100%;
  padding: 0.4rem;
  border: 1px solid var(--accent-color);
  font-size: 1rem;
  box-sizing: border-box;
  border-bottom: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.container header nav ul li img {
  max-width: 1.5rem;
  height: auto;
}

nav ul li:last-of-type {
  border-bottom: 1px solid var(--accent-color);
}

.button-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  margin-top: 2rem;
}

.button-container img {
  max-width: 100%;
}

.container main {
  /* border: 1px solid var(--color-dragonGreen); */
  padding: 1rem;
  padding-top: 0px;
  width: 100%;
  max-width: 650px;
}

.container main h2 {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  align-items: center;
}

.container main h2 img {
  max-width: 1.5rem;
  height: auto;
}

a {
  color: var(--accent-color);
  /* text-decoration: none; */
}

a:visited {
  color: var(--accent-color);
  /* text-decoration: none; */
}

.branch-image {
  position: sticky;
  float: right;
  right: 0;
  bottom: 0;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  max-width: 400px;
  opacity: 0.75;
}

/* article list on homepage */
.articles-index {
  /* border: 1px solid var(--accent-color); */
  display: grid;
  /* grid-template-rows: 50% 50%; */
  grid-template-columns: repeat(2, minmax(100px, 1fr));
  /* flex-direction: row; */
  gap: 1rem;
}

.articles-index p {
  margin: 0px;
}

.articles-index-header {
  margin-top: 0px;
  margin-bottom: 0.5rem;
}

.article-list .article-listing {
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  padding: 0.75rem;
  margin-bottom: 1rem;
  background: var(--background-color);
}

.articles-index .article-listing {
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  padding: 0.75rem;
  background: var(--background-color);
}

.article-listing-header header {
  border: none;
  padding: 0px;
  font-size: 1.1rem;
}

.article-listing-header header p {
  margin: 0px;
}

.article-listing footer, .text-small {
  font-size: 0.75rem;
}

.article-listing footer p {
  margin: 0px;
}

.article-listing-body {
  margin-top: 0.5rem;
}

.article-listing-body p {
  margin: 0px;
}

.dummy-article-listing {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* page */
article header h2 {
  margin: 0px;
}

.container main article header {
  padding: 0px;
  border: none;
}

/* page */
.page-main {
  background: var(--background-color);
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  padding: 1rem;
}

/* categories page */
.categories-list {
  padding: 0px;
  list-style: none;
}

.categories-list li {
  background: var(--background-color);
  padding: 1rem;
  border: 1px solid var(--accent-color);
  border-radius: var(--box-radius);
  margin-bottom: 0.5rem;
}

/* pages page */
.stripey-table {
  width: 100%;
  border-collapse: collapse;
}

.stripey-table th {
  text-align: left;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}

.stripey-table tr:nth-child(even) {
  background-color: var(--background-color-alt2);
}

.stripey-table td {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* responsive nav */
nav input[type="checkbox"], .hamburger-lines {
  display: none;
}

@media screen and (max-width: 850px) {
  .container {
    flex-direction: column;
    padding: 0rem;
    align-items: center;
  }

  .container main {
    padding: 0.5rem;
    box-sizing: border-box;
  }

  .branch-image {
    position: static;
    max-width: 75%;
    height: auto;
  }

  .articles-index {
    display: flex;
    flex-direction: column;
  }

  /* nav */
  .sidebar {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid var(--accent-color);
    border-radius: 0px;
  }

  .sidebar hgroup h1, .sidebar .subtitle {
    text-align: left;
  }

  .sidebar hgroup {
    margin-bottom: 0px;
  }

  nav {
    width: 100%;
    height: fit-content;
  }

  nav input[type="checkbox"] {
    display: block;
    position: absolute;
    display: block;
    height: 32px;
    width: 30px;
    top: 20px;
    right: 20px;
    z-index: 5;
    opacity: 0;
  }

  .hamburger-lines {
    display: block;
    height: 23px;
    width: 35px;
    position: absolute;
    top: 17px;
    right: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    background: var(--accent-color);
  }

  .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  nav input[type="checkbox"]:checked ~ .navitems {
    transform: translateX(0);
  }

  nav input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(35deg);
  }

  nav input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
  }

  nav input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-35deg);
  }

  .navitems {
    display: none;
    /* transform: translate(0, -150%);
    transition: transform 0.5s ease-in-out; */
  }

  nav input[type="checkbox"]:checked ~ .navitems {
    display: block;
  }

}