/* Dev blog layout. Loaded after base.css, which supplies colours, type and focus rings. */

body > header,
.layout,
body > footer {
  max-inline-size: 72rem;
  margin-inline: auto;
}

/* Masthead */
body > header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block-end: 16px;
  margin-block-end: 32px;
  border-block-end: 2px solid var(--bh-text);
}
.brand { display: inline-flex; align-items: center; min-block-size: 44px; }
.brand img { inline-size: auto; max-inline-size: 100%; }

ul.entries, ul.archive, ul.tags, ul.pagination,
body > header nav ul, aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

body > header nav ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 8px;
}
nav a[aria-current="page"] { font-weight: 800; text-decoration-thickness: 3px; }

/* Content and sidebar */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 65ch) minmax(12rem, 16rem);
  gap: 48px;
  align-items: start;
  justify-content: space-between;
}
.layout:not(:has(aside)) { grid-template-columns: minmax(0, 65ch); }

aside {
  padding-inline-start: 24px;
  border-inline-start: 2px solid var(--bh-text);
}
aside h2 { margin-block-start: 0; font-size: 1.125rem; }

@media (max-width: 50rem) {
  .layout, .layout:not(:has(aside)) { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  aside {
    padding-inline-start: 0;
    padding-block-start: 24px;
    border-inline-start: 0;
    border-block-start: 2px solid var(--bh-text);
  }
}

/* Entry lists */
.entries > li { padding-block: 20px; border-block-end: 2px solid var(--bh-text); }
.entries > li:first-child { padding-block-start: 0; }
.entries h3 { margin-block: 0 4px; }
.entries p { margin-block: 8px 0; }

.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: 0.95rem; }

ul.tags { display: flex; flex-wrap: wrap; gap: 4px 8px; }
ul.tags a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 12px;
  border: 2px solid var(--bh-text);
  border-radius: 8px;
}

ul.archive li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  padding-block: 8px;
  border-block-end: 2px solid var(--hover-bg);
}

/* Pagination */
nav[aria-label="Pagination"] { margin-block-start: 32px; }
ul.pagination { display: flex; flex-wrap: wrap; gap: 8px; }
ul.pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 12px;
  border: 2px solid var(--bh-text);
  border-radius: 8px;
}
ul.pagination a:hover { background: var(--hover-bg); }
ul.pagination a[aria-current="page"] {
  background: var(--bh-text);
  color: var(--bh-bg);
  font-weight: 800;
}

/* AI note on entries */
.ai-note {
  margin-block: 12px 0;
  padding-inline-start: 12px;
  border-inline-start: 4px solid var(--bh-accent);
  font-size: 0.95rem;
}

/* Entry body */
main img { max-inline-size: 100%; block-size: auto; }
main blockquote {
  margin-inline: 0;
  padding-inline: 16px;
  border-inline-start: 4px solid var(--bh-accent);
}
code, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.95em; }
code { padding-inline: 4px; background: var(--hover-bg); border-radius: 4px; }
pre {
  padding: 16px;
  overflow-x: auto;
  background: var(--hover-bg);
  border: 2px solid var(--bh-text);
  border-radius: 8px;
}
pre code { padding: 0; background: none; }

/* Footer */
body > footer {
  margin-block-start: 48px;
  padding-block-start: 16px;
  border-block-start: 2px solid var(--bh-text);
}

@media (forced-colors: active) {
  ul.pagination a[aria-current="page"] { background: Highlight; color: HighlightText; }
  ul.tags a, ul.pagination a, pre { border-color: LinkText; }
  aside, body > header, body > footer, .entries > li { border-color: CanvasText; }
}