/*
  CQ de AJ0EF — Bilberry CSS refinement pass
  Append to static/css/aj0ef.css, loaded after Bilberry theme.css.

  Goals:
  - JetBrains Mono metadata line
  - category pills in metadata, no comma separators
  - tag pills in article footer, no slash separators
  - category pills in page/footer taxonomy lists
  - slightly more visible search field
*/

:root {
  --aj0ef-bg: #eef1ed;
  --aj0ef-paper: #fffdf8;
  --aj0ef-text: #1f2933;
  --aj0ef-muted: #6b7280;
  --aj0ef-blue: #0f5e7a;
  --aj0ef-blue-dark: #073747;
  --aj0ef-amber: #c47a24;
  --aj0ef-border: #d5ddd8;
  --aj0ef-pill-bg: rgba(15, 94, 122, 0.1);
  --aj0ef-pill-border: rgba(15, 94, 122, 0.2);
  --aj0ef-pill-hover-shadow: rgba(196, 122, 36, 0.24);
  --aj0ef-mono:
    "JetBrains Mono", "JetBrainsMono Nerd Font", "Fira Code", "Cascadia Code",
    "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* -------------------------------------------------------------------------
   Metadata line
   Bilberry adds slash separators between metadata spans and comma separators
   between category links in assets/sass/_articles.scss. Keep the span slash;
   remove the category commas and turn each category into a compact pill.
   ------------------------------------------------------------------------- */

article .meta,
.article .meta,
.post .meta,
.card .meta,
.content article .meta {
  font-family: var(--aj0ef-mono) !important;
  font-size: 0.78rem;
  font-style: normal !important;
  font-weight: 500;
  letter-spacing: 0.055em;
  line-height: 1.85;
  color: var(--aj0ef-muted) !important;
}

article .meta .date,
article .meta .readingTime,
article .meta .author,
article .meta .categories,
.article .meta .date,
.article .meta .readingTime,
.article .meta .author,
.article .meta .categories,
.content article .meta .date,
.content article .meta .readingTime,
.content article .meta .author,
.content article .meta .categories {
  font-family: var(--aj0ef-mono) !important;
}

/* Metadata category links: pills, with explicit spacing instead of commas. */
article .meta .categories a,
.article .meta .categories a,
.post .meta .categories a,
.card .meta .categories a,
.content article .meta .categories a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  margin: 0.12rem 0.22rem 0.12rem 0;
  padding: 0.16rem 0.52rem;
  border: 1px solid var(--aj0ef-pill-border) !important;
  border-radius: 999px;
  background: var(--aj0ef-pill-bg) !important;
  color: var(--aj0ef-blue) !important;
  font-family: var(--aj0ef-mono) !important;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: 0.035em;
  line-height: 1.35;
  text-decoration: none !important;
  text-transform: uppercase;
  vertical-align: baseline;
  white-space: nowrap;
}

/* Remove Bilberry's comma between metadata category links. */
article .meta .categories a:not(:last-child)::after,
.article .meta .categories a:not(:last-child)::after,
.post .meta .categories a:not(:last-child)::after,
.card .meta .categories a:not(:last-child)::after,
.content article .meta .categories a:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

article .meta .categories a:hover,
article .meta .categories a:focus,
.article .meta .categories a:hover,
.article .meta .categories a:focus,
.post .meta .categories a:hover,
.post .meta .categories a:focus,
.card .meta .categories a:hover,
.card .meta .categories a:focus,
.content article .meta .categories a:hover,
.content article .meta .categories a:focus {
  background: var(--aj0ef-amber) !important;
  border-color: var(--aj0ef-amber) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px var(--aj0ef-pill-hover-shadow);
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Article-footer tags
   Bilberry adds a " / " after each non-final tag link. Hide that generated
   slash and let flex gap separate the pills.
   ------------------------------------------------------------------------- */

article .footer .tags,
.article .footer .tags,
.post .footer .tags,
.content article .footer .tags {
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  font-family: var(--aj0ef-mono) !important;
}

article .footer .tags .links,
.article .footer .tags .links,
.post .footer .tags .links,
.content article .footer .tags .links {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.38rem;
  margin-left: 0.25rem !important;
}

article .footer .tags .links a,
.article .footer .tags .links a,
.post .footer .tags .links a,
.content article .footer .tags .links a,
article .tags a,
.article .tags a,
.post .tags a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.22rem 0.62rem;
  border: 1px solid var(--aj0ef-pill-border) !important;
  border-radius: 999px;
  background: var(--aj0ef-pill-bg) !important;
  color: var(--aj0ef-blue) !important;
  font-family: var(--aj0ef-mono) !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none !important;
  white-space: nowrap;
}

/* Remove Bilberry's slash separator between article-footer tag links. */
article .footer .tags .links a:not(:last-child)::after,
.article .footer .tags .links a:not(:last-child)::after,
.post .footer .tags .links a:not(:last-child)::after,
.content article .footer .tags .links a:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

article .footer .tags .links a:hover,
article .footer .tags .links a:focus,
.article .footer .tags .links a:hover,
.article .footer .tags .links a:focus,
.post .footer .tags .links a:hover,
.post .footer .tags .links a:focus,
.content article .footer .tags .links a:hover,
.content article .footer .tags .links a:focus,
article .tags a:hover,
article .tags a:focus,
.article .tags a:hover,
.article .tags a:focus,
.post .tags a:hover,
.post .tags a:focus {
  background: var(--aj0ef-amber) !important;
  border-color: var(--aj0ef-amber) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px var(--aj0ef-pill-hover-shadow);
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* -------------------------------------------------------------------------
   Footer / bottom-of-page categories + taxonomy term pages
   ------------------------------------------------------------------------- */

footer .categories ul,
ul#all-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

footer .categories li,
ul#all-categories li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

footer .categories li a,
ul#all-categories li a,
.categories li a {
  position: static !important;
  left: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.64rem;
  border: 1px solid var(--aj0ef-pill-border) !important;
  border-radius: 999px;
  background: var(--aj0ef-pill-bg) !important;
  color: var(--aj0ef-blue) !important;
  font-family: var(--aj0ef-mono) !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none !important;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
  white-space: nowrap;
}

footer .categories li a:hover,
footer .categories li a:focus,
ul#all-categories li a:hover,
ul#all-categories li a:focus,
.categories li a:hover,
.categories li a:focus {
  left: auto !important;
  background: var(--aj0ef-amber) !important;
  border-color: var(--aj0ef-amber) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px var(--aj0ef-pill-hover-shadow);
  text-decoration: none !important;
  transform: translateY(-1px);
}

/* Keep footer category section from inheriting awkward left margin on wrap. */
footer .container > .categories,
footer .categories {
  min-width: min(18rem, 100%);
}

/* -------------------------------------------------------------------------
   Search box polish
   Bilberry markup: nav .search > i + input#search, with Algolia wrapper when
   active. This keeps it light-mode-first but makes it read as intentional UI.
   ------------------------------------------------------------------------- */

nav .search,
nav #search-box {
  min-width: min(320px, 38vw);
}

nav .search i,
nav #search-box i {
  color: var(--aj0ef-blue) !important;
  opacity: 0.82;
}

nav .search input,
nav #search-box input,
nav input#search,
nav .algolia-autocomplete input#search,
nav .aa-input {
  box-sizing: border-box;
  min-height: 2.55rem;
  border: 1px solid rgba(15, 94, 122, 0.24) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 253, 248, 0.92)
  ) !important;
  color: var(--aj0ef-blue-dark) !important;
  font-family: var(--aj0ef-mono) !important;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 2px 8px rgba(7, 55, 71, 0.08) !important;
  outline: none !important;
}

nav .search input::placeholder,
nav #search-box input::placeholder,
nav input#search::placeholder,
nav .aa-input::placeholder {
  color: rgba(7, 55, 71, 0.58) !important;
  opacity: 1;
}

nav .search input:hover,
nav #search-box input:hover,
nav input#search:hover,
nav .algolia-autocomplete input#search:hover,
nav .aa-input:hover {
  border-color: rgba(15, 94, 122, 0.42) !important;
  background: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 4px 12px rgba(7, 55, 71, 0.12) !important;
}

nav .search input:focus,
nav #search-box input:focus,
nav input#search:focus,
nav .algolia-autocomplete input#search:focus,
nav .aa-input:focus {
  border-color: var(--aj0ef-amber) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 3px rgba(196, 122, 36, 0.14),
    0 5px 14px rgba(7, 55, 71, 0.14) !important;
}

@media (max-width: 760px) {
  nav .search,
  nav #search-box {
    min-width: 100%;
    width: 100%;
    margin-top: 0.45rem;
  }

  article .meta,
  .article .meta,
  .post .meta,
  .card .meta,
  .content article .meta {
    line-height: 2.1;
  }
}

/* -------------------------------------------------------------------------
   Header and post-title sizing
   Bilberry renders the site title as h3.title and post titles as h1.article-title.
   Make the main site title more prominent, while visually bringing post titles
   closer to an h2 scale without changing semantic HTML.
   ------------------------------------------------------------------------- */

header .titles .title,
.header .titles .title,
div.titles h3.title {
  font-size: clamp(3.15rem, 552vw, 4.45rem) !important;
  line-height: 1.02;
  letter-spacing: -0.045em;
  margin-bottom: 0.35rem;
}

header .titles .title a,
.header .titles .title a,
div.titles h3.title a {
  font-size: inherit !important;
  line-height: inherit;
}

header .titles .subtitle,
.header .titles .subtitle,
div.titles .subtitle {
  font-size: clamp(1.9rem, 2.55vw, 2.12rem) !important;
  letter-spacing: 0.035em;
}

article h1.article-title,
.article h1.article-title,
.post h1.article-title,
.content article h1.article-title {
  font-size: clamp(1.55rem, 2.45vw, 2.1rem) !important;
  line-height: 1.18;
  letter-spacing: -0.035em;
}

article h1.article-title a,
.article h1.article-title a,
.post h1.article-title a,
.content article h1.article-title a {
  font-size: inherit !important;
  line-height: inherit;
}

@media (max-width: 760px) {
  header .titles .title,
  .header .titles .title,
  div.titles h3.title {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
  }

  article h1.article-title,
  .article h1.article-title,
  .post h1.article-title,
  .content article h1.article-title {
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
  }
}

/* -------------------------------------------------------------------------
   Continue Reading link
   Bilberry renders the summary link as a.more. Keep it understated and in the
   same station-log mono voice as the rest of the article chrome.
   ------------------------------------------------------------------------- */

/* Continue Reading link */
a.more,
article .content a.more,
.content article .content a.more {
  display: block !important;
  width: fit-content !important;
  margin: 0.95rem 0 0.25rem !important;
  color: var(--aj0ef-blue) !important;
  font-family: var(--aj0ef-mono) !important;
  font-size: 1.05rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.065em;
  line-height: 1.35 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em;
  text-transform: uppercase;
}

a.more:hover,
article .content a.more:hover,
.content article .content a.more:hover {
  color: var(--aj0ef-amber) !important;
}