/*
 * Excalibur's Sheath
 * Components
 *
 * Header, navigation, breadcrumbs, content elements,
 * tables, pagination, social links, syntax highlighting,
 * and footer.
 */


/* ============================================================
   Site Header
   ============================================================ */

.header-background {
  position: relative;

  max-height: 120px;
  padding: 2rem 1rem;

  overflow: visible;

  background-image: url("/images/sword-horiz-web.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.site-title {
  position: relative;
  z-index: 2;

  text-align: center;

  color: var(--ansi-bright-green);

  text-shadow:
    2px 2px 0 var(--ansi-cyan),
    4px 4px 0 var(--ansi-cyan),
    6px 6px 0 var(--ansi-cyan),
    0 0 8px rgb(0 255 0 / 50%);
}


/* ============================================================
   Main Navigation
   ============================================================ */

.menu {
  margin-bottom: 1rem;
  padding: 0.75rem 0;

  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}

.menu a {
  display: inline-block;
  padding: 0.125rem 0.25rem;

  color: var(--color-link);
}

.menu a:hover,
.menu a:focus {
  color: var(--color-link-hover);
}


/* ============================================================
   Breadcrumbs
   ============================================================ */

.breadcrumbs {
  margin-bottom: 1rem;

  color: var(--color-muted);

  font-size: 0.95rem;
}

.breadcrumb-link {
  color: var(--color-breadcrumb);
}

.breadcrumb-link:hover,
.breadcrumb-link:focus {
  color: var(--ansi-bright-white);
}

.breadcrumb-current {
  color: var(--color-muted);
}

.breadcrumb-separator {
  margin: 0 0.35rem;
  color: var(--color-muted);
}

/* ============================================================
   Post / Page Metadata
   ============================================================ */

.post-meta {
  margin-bottom: 1.5rem;

  color: var(--color-muted);

  font-size: 0.9rem;
}


/* ============================================================
   Images
   ============================================================ */

main img {
  display: block;

  width: min(80%, 100%);
  height: auto;

  margin: 1.5rem auto;
  padding: 0.5rem;

  border: 1px dashed var(--color-border);
  border-radius: 3px;
}


/* ============================================================
   Embedded Content
   ============================================================ */

iframe {
  display: block;

  width: 100%;
  min-height: 400px;

  margin: 1.5rem auto;
  padding: 0.5rem;

  border: 1px dashed var(--color-border);
  border-radius: 3px;
}


/* ============================================================
   Audio
   ============================================================ */

audio {
  display: block;

  width: min(90%, 100%);
  margin: 1rem auto;
}


/* ============================================================
   Tables
   ============================================================ */

table {
  width: 100%;
  margin: 1.5rem 0;

  text-align: center;
}

th,
td {
  padding: 0.5rem;

  border: 1px dashed var(--color-border);
}

th {
  color: var(--color-heading);
  font-weight: 400;
}

table a {
  color: var(--color-link);
}

caption {
  margin-bottom: 0.5rem;

  color: var(--color-muted);

  text-align: left;
}


/* ============================================================
   Feed Recommendation
   ============================================================ */

.feed-recommendation {
  margin-top: 1.5rem;
  padding: 1rem 0;

  border-top: 1px dashed var(--color-border);
  border-bottom: 1px dashed var(--color-border);
}


/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: 1rem;

  margin-top: 2rem;

  font-size: 1rem;
}

.pagination a {
  color: var(--color-link);
}

.pagination a:hover,
.pagination a:focus {
  color: var(--color-link-hover);
}

.pagination .disabled {
  color: var(--color-muted);
  cursor: not-allowed;
}


/* ============================================================
   Social Links
   ============================================================ */

.social-icons {
  font-size: 2rem;
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 1rem;

  margin: 1rem 0;
  padding: 0;

  list-style: none;
}

.social-icons a,
.social-icons i {
  color: var(--color-text);
}

.social-icons a:hover,
.social-icons a:focus,
.social-icons a:hover i,
.social-icons a:focus i {
  color: var(--color-link);
}


/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-top: 1rem;

  border-top: 1px dashed var(--color-border);

  font-weight: 400;
  text-align: center;
}


/* ============================================================
   Syntax Highlighting
   ANSI-inspired Rouge palette
   ============================================================ */

.highlight {
  color: var(--color-text);
}

.highlight .c,
.highlight .cm,
.highlight .c1,
.highlight .cs {
  color: var(--ansi-bright-black);
  font-style: italic;
}

.highlight .err {
  color: var(--ansi-bright-red);
}

.highlight .k,
.highlight .kc,
.highlight .kd,
.highlight .kp,
.highlight .kr,
.highlight .kt {
  color: var(--ansi-bright-yellow);
}

.highlight .o,
.highlight .ow {
  color: var(--ansi-yellow);
}

.highlight .s,
.highlight .sb,
.highlight .sc,
.highlight .sd,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .sr,
.highlight .ss {
  color: var(--ansi-bright-green);
}

.highlight .m,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .il {
  color: var(--ansi-bright-cyan);
}

.highlight .na,
.highlight .nb,
.highlight .nc,
.highlight .no,
.highlight .nf,
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi {
  color: var(--ansi-bright-cyan);
}

.highlight .ne,
.highlight .gr,
.highlight .gt {
  color: var(--ansi-bright-red);
}

.highlight .nn,
.highlight .bp,
.highlight .w {
  color: var(--ansi-white);
}

.highlight .gh,
.highlight .gu {
  color: var(--ansi-bright-yellow);
}

.highlight .ge {
  font-style: italic;
}

.highlight .gs {
  color: var(--ansi-bright-white);
  font-weight: 700;
}

.highlight .go,
.highlight .gp {
  color: var(--ansi-white);
}

.highlight .gd {
  color: var(--ansi-bright-red);
}

.highlight .gi {
  color: var(--ansi-bright-green);
}


/* ============================================================
   Mobile
   ============================================================ */

@media (max-width: 768px) {
  .header-background {
    max-height: none;
    padding: 1.5rem 0.75rem;

    background-size: cover;
  }

  .site-title {
    font-size: clamp(2.75rem, 12vw, 4rem);
    white-space: nowrap;

    text-shadow:
      1px 1px 0 var(--ansi-cyan),
      0 0 4px rgb(0 255 0 / 30%);
  }

  main img {
    width: 100%;
  }

  iframe {
    min-height: 300px;
  }

  .social-icons {
    font-size: 1.75rem;
  }
}

/* ============================================================
   Archives
   ============================================================ */

.archive-list {
  margin: 1.5rem 0;
  padding: 0;

  list-style: none;
}

.archive-item {
  display: grid;
  grid-template-columns: auto 1fr;

  gap: 1rem;

  margin-bottom: 0.5rem;
}

.archive-item time {
  color: var(--color-muted);
  white-space: nowrap;
}

@media (max-width: 480px) {
  .archive-item {
    grid-template-columns: 1fr;
    gap: 0.125rem;

    margin-bottom: 1rem;
  }
}