/*
Theme Name: Retro Slate
Theme URI: https://github.com/chrismccoy/retroslate
Author: Chris McCoy
Author URI: https://github.com/chrismccoy
Description: Link directory theme with Clipped corners, hard shadows, monospace grid.
Version: 1.0.0
Text Domain: retro-slate
*/

.clipped-corner {
  clip-path: polygon(
    0 15px, 15px 0,
    100% 0, 100% calc(100% - 15px),
    calc(100% - 15px) 100%, 0 100%
  );
}
.clipped-corner-sm {
  clip-path: polygon(
    0 10px, 10px 0,
    100% 0, 100% calc(100% - 10px),
    calc(100% - 10px) 100%, 0 100%
  );
}

body {
  background-color: #e2e8f0;
  background-image:
    linear-gradient(#cbd5e1 1px, transparent 1px),
    linear-gradient(90deg, #cbd5e1 1px, transparent 1px);
  background-size: 20px 20px;
}

a.link-item:hover,
div.link-item:hover {
  background-color: #f472b6;
  color: #0f172a;
  text-decoration: none;
}

div.link-item:hover > a {
  color: #0f172a;
  text-decoration: none;
}

a.recent-post-item:hover,
a.recent-post-item:hover i,
a.recent-post-item:hover span {
  color: #ffffff;
}

.video-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
}

.retro-nav-menu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.retro-nav-menu ul li a { display: block; }

.retro-pagination .page-numbers { display: inline-block; }
.retro-pagination .page-numbers.current { background-color: #22d3ee; color: #0f172a; }
.retro-pagination .page-numbers.dots { box-shadow: none; opacity: 0.5; }

#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea { width: 100%; }

#retro-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#retro-lightbox.active { display: flex; }

.wp-caption, img { max-width: 100%; height: auto; }
.alignleft  { float: left;  margin: 0 1rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1rem; }
.aligncenter { display: block; margin: 0 auto 1rem; }