/* hase.css - post list and metadata styles for issei/hase
 *
 * Requires shide.css. Uses the same CSS custom properties:
 * --font-mono, --font-sans, --gap, --border
 * and the same color keywords: GrayText, CanvasText, LinkText.
 *
 * SPDX-License-Identifier: ISC
 * Copyright (c) 2026 Sergiy Duras
 */

/* ---------------------------------------------------------------------------
 * Post list
 * ---------------------------------------------------------------------------
 */

ol.post-list {
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  max-width: 100%;
  counter-reset: post-counter var(--post-count, 0);
}

ol.post-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  counter-increment: post-counter -1;
  transition: background 0.2s ease;
}

@media (hover: hover) {
  ol.post-list li:hover {
    background: color-mix(in srgb, CanvasText 2%, transparent);
  }
}

ol.post-list li::before {
  content: counter(post-counter) ".";
  color: GrayText;
  font-size: 0.85em;
  min-width: 3ch;
  text-align: right;
  flex-shrink: 0;
}

ol.post-list li a {
  flex: 1;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

ol.post-list li time {
  color: GrayText;
  font-size: 0.85em;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * Post metadata
 * ---------------------------------------------------------------------------
 */

p.post-meta {
  color: GrayText;
  font-size: 0.85em;
  margin-top: 0;
  margin-bottom: var(--gap);
}

p.post-meta a {
  color: GrayText;
  text-decoration-color: var(--border);
}

@media (hover: hover) {
  p.post-meta a:hover {
    color: LinkText;
    text-decoration: none;
  }
}

/* ---------------------------------------------------------------------------
 * Static pages
 * ---------------------------------------------------------------------------
 */

blockquote footer {
  text-align: left;
  margin-top: -1rem;
}

blockquote footer::before {
  content: "\FE63  ";
  color: CanvasText;
}

/* ---------------------------------------------------------------------------
 * Tag cloud
 * ---------------------------------------------------------------------------
 */

p.tag-cloud {
  line-height: 2.2;
}

p.tag-cloud a,
p.tag-cloud a:hover,
p.tag-cloud a:focus,
.post-meta a,
.post-meta a:hover,
.post-meta a:focus {
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------------
 */

.disclaimer {
}
#last-changed {
  font-family: var(--font-mono);
}

.post-meta a[href$=".html"] {
  color: LinkText;
}

.post-meta a[href$=".html"]::before {
  content: "🏷️ ";
  font-size: 95%;
  margin-right: 0.07rem;
  vertical-align: middle;
}

#reading-time::before {
  content: "⏳ ";
  font-size: 95%;
  margin-right: 0.07rem;
  vertical-align: middle;
}

#orange-tag {
  color: darkorange;
  font-weight: 700;
}

@media (max-width: 480px) {
  ol.post-list li {
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
  }
  ol.post-list li a {
    flex-basis: 100%;
    order: 1;
  }
  ol.post-list li::before {
    order: 0;
  }
  ol.post-list li time {
    order: 2;
    margin-left: 3.75ch;
  }
}

code: {font-family: var(--font-mono);}

figure {display: block; margin: 0 auto; wifth: 100% max-width: 100%; height: auto;}

figure img {box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;}

figcaption {font-size: 85%; color: GrayText; text-align: center; margin-top: -1em;}