/* Scale page to 80% (zoom for Chrome/Edge/Safari, transform for Firefox) */
html {
  zoom: 0.8;
}

@supports not (zoom: 0.8) {
  html {
    transform: scale(0.8);
    transform-origin: top left;
    width: 125%;
  }
}

/* Secondary accent for dates, tags, categories, and other metadata */
:root {
  --secondary-accent: #888;
  --secondary-accent-alpha-70: rgba(136, 136, 136, 0.7);
  --secondary-accent-alpha-20: rgba(136, 136, 136, 0.2);
  --button-accent: #888;
  --button-accent-alpha-70: rgba(136, 136, 136, 0.7);
}

/* Post metadata (dates, author) */
.post-meta {
  color: var(--secondary-accent-alpha-70);
}

/* Tag and category links within post metadata */
.post-meta a {
  color: var(--secondary-accent);
}

.post-meta a:hover {
  color: var(--secondary-accent-alpha-70);
}

/* Footer copyright text */
.footer .copyright,
.footer .copyright--user {
  color: #999;
}
.footer .copyright a,
.footer .copyright--user a {
  color: #999;
}

/* === CLICKABLE POST CARDS === */
.post.on-list[data-href] {
  cursor: pointer;
  padding: 20px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
}

.post.on-list[data-href]:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Project titles */
.post.on-list .post-title {
  font-size: 1.05rem;
}

.post-title a {
  color: #e5e5e5;
  transition: color 0.2s ease;
}

.post.on-list[data-href]:hover .post-title a {
  color: #fff;
}

/* Divider under title */
.post-title {
  --border: 1px solid #333;
}

/* Dim description text for hierarchy */
.post.on-list .post-content {
  color: #888;
}

/* Read more arrow: understated */
.read-more {
  color: var(--button-accent);
  font-size: 0.88rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.post.on-list[data-href]:hover .read-more {
  opacity: 1;
}

/* Cursor pointer on clickable elements */
a,
button,
.menu-trigger,
.pagination .button,
.post.on-list[data-href] {
  cursor: pointer;
}

/* Smooth transitions on links */
a {
  transition: color 0.2s ease;
}

/* Older / Newer pagination buttons */
.pagination .button a {
  color: var(--button-accent);
  transition: color 0.2s ease;
}

.pagination .button a:hover {
  color: var(--button-accent-alpha-70);
}

/* Nav hover */
.menu__inner a {
  transition: color 0.2s ease;
}

/* Make tables horizontally scrollable on mobile only */
@media (max-width: 768px) {
  .post-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 500px;
  }
}

/* Reduce space between pagination and posts */
.pagination {
  margin-top: 20px;
}

/* Vertically center the 404 message between header and footer */
.not-found {
  margin: auto;
}

/* Align the "tanush" logo flush with the article text below it */
.logo {
  padding-left: 0;
  padding-right: 0;
}

/* Home page spacing.

   The theme's sticky footer (.container min-height: 100vh + footer
   margin-top: auto) is left intact so the footer lands at the same position
   here as on Books/Music. The leftover space is instead split evenly above and
   below the photos by making the article a flex column and giving the grid
   auto margins on both sides.

   Flex disables margin collapsing, so the rules below restore the spacing the
   text above had under normal block layout — measured in-browser to land on
   exactly the same pixels. */
.home-post {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}

.home-post > * + p {
  margin-top: 0;
}

.home-post > ul,
.home-post > ol {
  margin-top: 0;
  margin-bottom: 0;
}

.home-post > h2 {
  margin-top: 30px;
}

/* Side-by-side photo grid on the home page.
   Auto margins split the free space evenly; the padding offsets the fixed
   space below the captions (article padding 20px + footer padding 40px) so
   the visible gap above the images matches the gap under the captions. */
.photo-grid {
  display: flex;
  gap: 14px;
  width: 100%;
  margin: auto 0;
  padding-top: 74px;
}

.photo-item {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: block;
}

.photo-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

.photo-item figcaption {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-top: 6px;
  padding: 0;
  background: none;
  font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
}

@media (max-width: 684px) {
  .photo-grid {
    flex-direction: column;
  }
  .photo-item img {
    height: 200px;
  }
}