/* Site colors. Change any value below to restyle the whole site.
 * Use simplified-style.css instead for fewer, easier-to-swap variables. */
:root {
  /* Background: a gradient shown by default, blended with an optional image below */
  --site-bg-gradient: linear-gradient(135deg, #150225, #31026F, #4B0F82);
  /* Set to "none" to hide, or a url() for a photo or repeating pattern */
  --site-bg-image: url("images/site-bg-pattern.png");

  --post-bg: #4A2F5C;
  --post-text: #EDE3F0;
  --post-header-text: var(--sidebar-accent-aqua);
  --border-color: var(--sidebar-border-color);
  --border-shadow: #1F1329B3;

  --sidebar-text: #EDE3F0;
  --sidebar-bg: #3B2650;
  --sidebar-border-color: #B18AE0;   /* also used for the profile icon's hover ring */

  /* Nav buttons: subdued purple at rest, then each link gets its own
   * accent color on hover, with a matching purple outline */
  --sidebar-button-bg: #5A4370;
  --sidebar-button-text: #EDE3F0;
  --sidebar-button-hover-text: #1F1329;
  --sidebar-button-outline: #6B4C87;
  --sidebar-accent-pink: #F5A3C7;
  --sidebar-accent-aqua: #6EE7D0;
  --sidebar-accent-grey: #B3A8C2;
  --sidebar-accent-gold: #EEBB4D;

  /* Status box and tag filters at the top of the post list */
  --pinned-text: #EDE3F0;
  --pinned-bg: #5A4370;
  /* Tag filter buttons */
  --button-bg: #5A4370;
  --button-bg-hover: #6B4C87;
  --button-bg-selected: #B18AE0;
  --button-text: #EDE3F0;
  --button-border-color: #6B4C87;

  /* Text highlight colors */
  --selected-bg: #bde0ff;
  --selected-text: #5244c8;
}

/* Fonts used here:
 * https://fonts.google.com/specimen/Atkinson+Hyperlegible
 * https://fonts.google.com/specimen/Nunito
 * Add matching files to a /fonts folder, or browsers will substitute a default. */
@font-face {
  font-family: Nunito;
  src: url('/fonts/Nunito-Black.ttf');
  font-weight: bold;
}
@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
    font-family: Atkinson Hyperlegible;
    src: url('/fonts/AtkinsonHyperlegible-Bold.ttf');
    font-weight: bold;
}

html {scroll-behavior: smooth;}
/* Belt-and-suspenders guard against a horizontal scrollbar. The mobile
 * off-canvas sidebar pushes itself off-screen with a transform, which
 * some browsers still count toward the page's scrollable width even
 * though it's not visually there - this keeps that (and anything else
 * that might poke past the edge) from ever showing a sideways scrollbar. */
html, body {
  overflow-x: hidden;
}
::selection {
  background: var(--selected-bg);
  color: var(--selected-text);
}
* {
  box-sizing: border-box;
  scrollbar-color: var(--post-header-text) var(--post-bg);
  scrollbar-width: thin;
}

body {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  font-size: 16px;
  margin: 0;
  color: var(--post-text);
  line-height: 1.6em;
  /* Long unbroken words or links (URLs especially) would otherwise force
   * the page wider than the viewport instead of wrapping */
  overflow-wrap: break-word;
  word-break: break-word;
  /* Two layers: pattern on top, gradient underneath. Each property
   * below lists a value for the pattern, then one for the gradient. */
  background-image: var(--site-bg-image), var(--site-bg-gradient);
  background-size: 150px, cover;         /* pattern tile size; gradient fills the screen */
  background-position: top left, center;
  background-repeat: repeat, no-repeat;  /* image tiles like a pattern */
  background-attachment: fixed, fixed;   /* stays put while scrolling */
  /* Blends the layers together - color-dodge brightens the gradient
   * through the pattern's lighter areas. Try "multiply" or
   * "soft-light" for a gentler look. */
  background-blend-mode: color-dodge;
}

/* Sits behind all page content as its own layer, fixed to the viewport.
 * Kept separate from body's background so its opacity can be lowered
 * without also fading the gradient - a single background-image stack
 * can't do that, since opacity applies to a whole element, not one layer
 * within it. */
/* Special font for headings and buttons */
h1,
nav,
.pinned summary {
  font-family: 'Nunito', Verdana, Tahoma, sans-serif;
  font-weight: bold;
}
details > summary,
#tag-filters label {cursor: pointer;}

/* Small helper classes */
.center {text-align: center;}
.small-text {font-size: smaller;}
.no-border {border: none; padding:0;}

/* Toggle visibility between desktop and mobile */
.mobile-only {display:none;}
.pc-only {display: block;}

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
/* Centers the page on wide screens */
#container {
  max-width:1200px;
  margin:auto;
}

/* Layout-transparent wrapper - keeps mobile's flex rules on #sidebar and
 * main working as if they were still direct children of #container */
#sidebar-wrapper {
  display: contents;
}

main {
  /* Fills the space between the sidebar and the right edge */
  position: absolute;
  left: 280px;
  right: 2em;
  width: auto;
  /* Small gap above the first post, so switching pages doesn't scroll
   * content flush against the very top of the screen */
  padding-top: 1.5em;
}

#sidebar {
  background: var(--sidebar-bg);
  padding: 2em 1em;
  width: 240px;
  border-right: 2px dashed var(--sidebar-border-color);
  outline: 4px solid var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  height: 100%;
  overflow-y: auto;
}

/* Covers the sidebar with one image until hovered. Fixed positioning keeps
 * it locked in place even if the sidebar content is taller than the screen.
 * z-index sits above the footer (100) so it hides the copyright text too. */
#sidebar-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  z-index: 150;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.35s ease;
}
#sidebar-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hover is detected on #sidebar-wrapper, not #sidebar or #sidebar-cover
 * directly - keeps the state stable no matter which one the mouse hits.
 * ".cover-open" is added by script.js for tap support on touch devices. */
#sidebar-wrapper:hover #sidebar-cover,
#sidebar-wrapper.cover-open #sidebar-cover {
  opacity: 0;
  pointer-events: none;
}

#sidebar h1 {
  margin-block: .5em;
}
#sidebar a {
  color: var(--sidebar-text);
}
#sidebar h1 a {
  font-size: 1.2em;
}
#sidebar h1 a,
#sidebar a:hover {text-decoration: none;}

#icon {margin:auto;}

#icon img {
  border-radius:50%;   /* lower this for a rounded square instead of a circle */
  max-width:200px;
}
#icon a img {
  outline: 2px solid var(--sidebar-bg);
  transition: .2s;
}
#icon a img:hover {
  outline: 2px solid var(--sidebar-border-color);
  outline-offset: 4px;
}

#profile p {
  margin-block: .3em;
  line-height: 1.5em;
}
#bio {
  border-block: 2px dashed var(--sidebar-border-color);
  padding-block: .5em;
  margin-block: 1em;
  font-size: small;
}

/* Rounded nav buttons */
#sidebar nav ul {
  text-align: center;
  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 1em;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 8px;
  justify-content: space-evenly;
}
#sidebar nav li a {
  min-width: 120px;   /* keeps buttons a consistent size */
  display: inline-block;
  background: var(--sidebar-button-bg);
  color: var(--sidebar-button-text);
  font-weight: bold;
  border-radius: 1rem;
  outline: 2px solid #fff0;
  transition: .2s;
  text-decoration: none;
}
#sidebar nav li a:visited {color: var(--sidebar-text);}
#sidebar nav li a:hover {
  color: var(--sidebar-button-hover-text);
  outline: 2px solid var(--sidebar-button-outline);
  outline-offset: 3px;
}
/* Each link gets a different accent on hover: pink, aquamarine, grey, gold */
#sidebar nav li:nth-child(1) a:hover {background: var(--sidebar-accent-aqua);}
#sidebar nav li:nth-child(2) a:hover {background: var(--sidebar-accent-pink);}
#sidebar nav li:nth-child(3) a:hover {background: var(--sidebar-accent-grey);}
#sidebar nav li:nth-child(4) a:hover {background: var(--sidebar-accent-gold);}
#sidebar nav {
  margin-block:1.5em;
}

/* Collapsible boxes at the top: status and tag filters */
.pinned {
  background: var(--pinned-bg);
  font-size: smaller;
  padding: .5em;
  border-radius: 1em;
  margin: 1em 0;
  border: 2px solid var(--border-color);
  outline: 2px solid var(--post-bg);
  box-shadow: 2px 2px 6px var(--border-shadow);
}
.pinned summary {
  color: var(--sidebar-text);
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 2px dashed var(--border-color);
  margin: .5em;
}
.pinned time {
  font-family: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  float: right;
  font-weight: normal;
  font-size: small;
}

/* Alternating rows in the status list */
#status ul {
  background: var(--post-bg);
  margin:.5em;
  padding:.5em;
  border-radius: .5em;
}
#status li {
  list-style-type: none;
  padding: .2em;
}
#status li:nth-child(odd) {   /* label, e.g "reading:" */
  font-weight: bold;
  font-size: 1.2em;
  color: var(--sidebar-accent-pink);
}
#status li:nth-child(even) {  /* value, e.g "books about magic" */
  background: var(--pinned-bg);
  color: var(--pinned-text);
  border-radius: .3em;
  padding-inline: .8em;
}
#status li a {color: var(--pinned-text);}
#status li a:hover {text-decoration: none;}

/* Posts */
.post {
  background: var(--post-bg);
  color: var(--post-text);
  border-radius: 1rem;
  padding: 0 .8rem .2rem .8rem;
  margin-bottom: 1em;
  box-shadow: 3px 3px 10px var(--border-shadow);
  min-width: 100%;
}
.post img {max-width:100%;}
.post div + img {margin-top: 1em;}   /* space below the header when an image comes first */

.post-header {
  color: var(--post-header-text);
  font-weight: bold;
  padding: .5rem 0;
  border-bottom: 2px dashed var(--border-color);
}
.post time {
  float: right;
  font-weight: normal;
  font-size: smaller;
  margin: .2em;
}
.post a {color:var(--post-text);}
.post a:hover {text-decoration: none;}

.post li {
  list-style-image: url("images/star.png");   /* swap for your own icon, or use list-style-type instead */
}

.readmore {
  margin-bottom: 1em;
}
.readmore summary {
  font-weight: bold;
  color: var(--post-header-text);
  list-style-type: none;   /* removes the default arrow */
}
.readmore[open] > summary {display:none;}   /* hides the button once opened */
.readmore[open] {
  border-top: 2px dashed var(--button-bg);
  padding-top:1em;
}

.tags {
  border-top: 2px dashed var(--border-color);
  padding: .4em 0;
}
.tags a {color: var(--post-text);}
.tags span {color: var(--sidebar-accent-grey);}
.tags a,
.tags span {
  font-size: small;
  padding: .2em .5em;
  border-radius: 1em;
  text-decoration: none;
}
.tags a:hover {
  background:var(--button-bg);
  text-decoration: underline;
}

/* Tag filtering and pagination both run through script.js - CSS alone
 * can't count or slice posts into pages */

#pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .4em;
  flex-wrap: wrap;
  margin: 1em 0;
}
#pagination a {
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  padding: .3em .6em;
  border-radius: .5em;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--button-border-color);
  text-decoration: none;
  font-size: small;
}
#pagination a:hover {
  background: var(--button-bg-hover);
  text-decoration: underline;
}
/* Each button's outline cycles through the four accents, in order.
 * Offset by one since #1 in the sequence is actually "prev", so page 1
 * (the 2nd child) is the one that lands on aqua. */
#pagination a:nth-child(4n+2) {border-color: var(--sidebar-accent-aqua);}
#pagination a:nth-child(4n+3) {border-color: var(--sidebar-accent-pink);}
#pagination a:nth-child(4n+4) {border-color: var(--sidebar-accent-gold);}
#pagination a:nth-child(4n+1) {border-color: var(--sidebar-accent-grey);}
/* Prev/next stay neutral - only the numbered pages cycle through accents */
#pagination a:first-child,
#pagination a:last-child {
  border-color: var(--button-border-color);
}
#pagination a.current {
  background: var(--button-bg-selected);
  color: var(--sidebar-button-hover-text);
  border-color: var(--button-border-color);   /* accent outline disappears once active */
  font-weight: bold;
  text-decoration: underline;
}
#pagination a.disabled {
  opacity: .4;
  pointer-events: none;
}

#tag-filters label {
  background: var(--button-bg);
  border: 1px solid var(--button-border-color);
  border-radius: .5em;
  display: inline-block;
  margin-left: .5em;
  margin-block: .3em;
  padding: 0 .8em 0 .1em;
}
#tag-filters label:hover {
  background: var(--button-bg-hover);
  text-decoration: underline;
}
#tag-filters label:has(input:checked) {
  background: var(--button-bg-selected);
  color: var(--sidebar-button-hover-text);
  text-decoration: underline;
  font-weight: bold;
}
#tag-filters label:has(input:checked):hover {
  background: var(--button-bg-hover);
  text-decoration: none;
}
#tag-filters input {appearance: none;}   /* hides the actual radio dot */

#page-nav a {color:var(--sidebar-text);}
#page-nav a:hover {text-decoration: none;}

footer {
  color: var(--sidebar-text);
  background: var(--sidebar-bg);
  /* Positioned to visually sit at the bottom of the sidebar, even though
   * it comes last in the HTML */
  z-index: 100;
  position: fixed;
  left: 0;
  margin-left:2px;
  width:236px;
  bottom:4px;
  font-size: small;
  opacity:60%;   /* lets the sidebar color show through slightly */
  text-align: center;
}

/* Off-canvas menu button - only ever shown on mobile (see media query
 * below), but defined here so its base look/animation lives in one place.
 * Fixed in the corner so it's reachable no matter how far you've scrolled. */
#sidebar-toggle {
  display: none;
  position: fixed;
  top: 1em;
  left: 1em;
  z-index: 310;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border: 1px solid var(--sidebar-border-color);
  border-radius: 50%;
  background: var(--sidebar-button-bg);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
#sidebar-toggle span {
  display: block;
  width: 1.3em;
  height: 2px;
  background: var(--sidebar-button-text);
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
/* Morphs into an X once the panel is open, driven off the button's own
 * aria-expanded state instead of a separate class to track */
#sidebar-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#sidebar-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
#sidebar-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Dark backdrop behind the open mobile panel - tapping it closes the menu.
 * Hidden entirely outside the mobile breakpoint and until opened. */
#sidebar-backdrop {
  display: none;
}
#sidebar-backdrop.mobile-open {
  display: block;
  position: fixed;
  inset: 0;
  background: #0A0212B3;
  z-index: 290;
}

/* Keeps the page from scrolling behind the open panel */
body.menu-open {
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
  .mobile-only {display: block;}
  .pc-only {display: none;}
  /* Desktop's hover-reveal cover doesn't apply anymore - the panel is
   * reached via the toggle button instead */
  #sidebar-cover {display: none;}
  #sidebar-toggle {display: flex;}

  #container {
    display: block;
  }

  /* Sidebar becomes an off-canvas panel instead of a stacked block at the
   * top of the page - full width so it completely takes over the screen
   * and nothing behind it shows through, reached via #sidebar-toggle and
   * slid back out on close or backdrop tap. */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    max-width: none;
    transform: translateX(-100%);
    transition: transform .3s ease;
    z-index: 300;
    border-inline: none;
    margin-left: 0;
    padding: 4em 1.5em 1.5em;
    box-shadow: 4px 0 20px #0A021266;
    /* Centers everything inside now that the panel spans the full
     * screen, instead of the left-aligned desktop layout */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #sidebar.mobile-open {
    transform: translateX(0);
  }
  #sidebar .flex {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  #sidebar nav ul {
    justify-content: center;
  }

  main {
    position: static;
    height: auto;
    max-width: none;
    left: 0;
    margin-inline: 1em;
    padding-top: 4.5em;   /* clears the fixed toggle button */
  }

  #icon {
    max-width: 140px;
    margin: 0 0 .5em;
  }
  #icon img {max-width: 100%;}

  #sidebar nav {margin-block:.5em;}

  #profile p {
    margin-block: .3em;
    margin-left: 0;
  }
  #bio {
    border: none;
    padding-block: 0;
  }
  footer {
    position:static;
    text-align:center;
    background:none;
    margin:0;
    width:100%;
    opacity:100%;
  }
}