/* ============================= */
/* CSS Units: rem vs em          */
/* ============================= */
/*
 * This file uses a hybrid approach for CSS units:
 *
 * rem (root em) - Used for spacing and layout
 *   - Margins, padding, gaps between elements
 *   - Fixed dimensions (widths, heights)
 *   - Consistent and predictable across the page
 *
 * em (relative) - Used for values that should scale with font size
 *   - Font sizes (scale relative to parent)
 *   - Icon dimensions (scale with surrounding text)
 *   - Letter spacing
 *   - List indentation (relative to text size)
 *
 * unitless - Used for line-height so text keeps the same rhythm
 *   when parent font sizes change
 *
 * Why not em everywhere?
 *   em values compound. If an element has font-size: 1.5em and
 *   margin: 2em, the margin is 2x the element's font size (1.5),
 *   resulting in 3x the base size. Using rem for spacing avoids
 *   this compounding and keeps layout predictable.
 *
 * The baseline: <main> sets font-size: 1rem, which all em values
 * ultimately reference through inheritance.
 */

/* ============================= */
/* Page Primitives               */
/* ============================= */

/* Universal box-sizing to include padding in width calculations */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --font-size-base: 100%;
}

html {
  font-size: var(--font-size-base);
  scrollbar-gutter: stable;
}

/* Body layout - vertical flex container */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body, var(--font-sans));
}

/* Main content area - grows vertically */
main {
  margin-top: 0;
  padding: 0 1em;
  display: flex;
  flex-grow: 1;
  font-size: 1rem;
}

/* Blog content container - applies width constraints and padding */
.blog-container {
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Content width modifiers (applied via content_width_class helper) */
.max-w-content-narrow {
  max-width: var(--content-width-narrow);
}

.max-w-content-standard {
  max-width: var(--content-width-standard);
}

.max-w-content-wide {
  max-width: var(--content-width-wide);
}

/* Base theme colours */
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.custom-footer {
  margin-block-end: 1rem;
}

.custom-footer img {
  max-inline-size: 100%;
  block-size: auto;
}

:where(.custom-footer) a {
  color: var(--color-accent);
  text-decoration: underline;

  &:hover {
    color: var(--color-accent-hover);
  }

  &:has(img) {
    text-decoration: none;
  }
}

footer.blog-footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 2rem;
  margin-top: auto;
}

footer.blog-footer #brand svg {
  width: 110px;
  display: inline-flex;
  color: var(--color-text-heading);
}

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

:where(a) {
  text-decoration: none;
}

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

:where(.blog) {
  --lexxy-color-ink: var(--color-text);
  --lexxy-color-ink-medium: var(--color-text-muted);
  --lexxy-color-ink-light: var(--color-text-light);
  --lexxy-color-ink-lighter: var(--color-text-disabled);
  --lexxy-color-ink-lightest: var(--color-bg-sunken);
  --lexxy-color-text: var(--color-text);
  --lexxy-color-text-subtle: var(--color-text-muted);
  --lexxy-color-link: var(--color-accent);
  --lexxy-color-accent-dark: var(--color-accent);
  --lexxy-color-accent-medium: var(--color-accent-hover);
  --lexxy-color-code-bg: var(--color-bg-subtle);


  .lexxy-content__table-cell--header,
  th {
    background-color: var(--color-bg-subtle) !important;
  }

  background-color: var(--color-bg);
  color: var(--color-text);

  :where(article) {
    line-height: 1.75;
  }

  :where(.lexxy-content) {
    line-height: inherit;

    /* gives images rounded corners */
    img:not(.posts-gallery *) {
      border-radius: 0.5em;
      max-width: 100%;
      display: block;
    }

    /* increased margin around images in article content */
    figure:has(img):not(.attachment-gallery *),
    img:not(figure img, .attachment-gallery *, .posts-gallery *),
    .attachment:not(.attachment-gallery *) {
      margin-block: 1.5rem;
    }

    .attachment-gallery {
      margin-block: 1.5rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
    }

    .attachment-gallery--2,
    .attachment-gallery--4 {
      grid-template-columns: repeat(2, 1fr);
    }

    .attachment-gallery .attachment,
    .attachment-gallery.attachment-gallery--2 .attachment,
    .attachment-gallery.attachment-gallery--4 .attachment {
      margin-block: 0;
      gap: calc(var(--lexxy-attachment-gap) / 2);
      inline-size: 100%;
      padding: 0;
    }

    .attachment--preview {
      inline-size: auto;
    }

    .attachment--preview:not(.attachment-gallery *) {
      padding-inline: 0;
    }
  }

  :where(header) {
    margin-top: 1rem;
    margin-bottom: 2rem;

    :where(hr) {
      padding: 0;
      margin: 0;
      border: none;
      border-top: 1px solid var(--color-border);
    }
  }

  :where(nav) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875em;

    :where(a) {
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-muted);

      &:hover {
        color: var(--color-text);
      }
    }

    svg {
      width: 1rem;
      height: 1rem;
    }
  }

  :where(.titlebar) {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  :where(.avatar-container) {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  :where(.avatar) {
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;

    :where(img) {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      object-fit: cover;
      border-radius: 9999px;
      border: 1px solid var(--color-border);
      width: 4rem;
      height: 4rem;
    }
  }

  :where(.bio) {
    --lexxy-color-ink: var(--color-text-muted);
    --lexxy-content-margin: 1rem;

    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875em;
    line-height: 1.4;
    color: var(--color-text-muted);
    overflow-wrap: break-word;

    :where(a) {
      color: var(--color-accent);
      text-decoration: underline;
      font-weight: 400;

      &:hover {
        color: var(--color-accent-hover);
      }
    }

    strong,
    b {
      color: var(--color-text);
    }
  }

  :where(.blog-title) {
    color: var(--color-text-heading);
    font-size: 1.25em;
    font-weight: 700;

    a, a:visited {
      color: inherit;
      text-decoration: none;
    }
  }
}

/* ============================= */
/* Article                       */
/* ============================= */

:where(.blog) {
  :where(article) {
    max-width: none;
    color: var(--color-text);
    text-wrap: pretty;
    overflow-wrap: break-word;
    word-break: break-word;

    :where(a) {
      color: var(--color-accent);
      text-decoration: underline;

      &:hover {
        color: var(--color-accent-hover);
      }
    }

    :where(blockquote) {
      color: var(--color-text-muted);
      border-left-color: var(--color-border);

      em {
        font-style: normal;
      }
    }

    li::marker {
      color: var(--color-text-light);
    }

    :where(.lexxy-content h1, .lexxy-content h2, .lexxy-content h3, .lexxy-content h4, .lexxy-content h5, .lexxy-content h6) {
      color: var(--color-text-heading);
    }

    h1.post-title {
      font-size: 1.875em;
      line-height: 1.4;
      margin-top: 0;
      margin-bottom: 2rem;
      color: var(--color-text-heading);
      font-weight: 800;
    }

    h1.post-title > a.post-title-link {
      color: inherit;
      text-decoration: none;
      font-weight: inherit;
    }

    h1.post-title > a.post-title-link:hover {
      color: inherit;
    }

    figcaption.attachment__caption {
      text-align: center;
      padding-inline: 1rem;

      @media (min-width: 640px) {
        padding-inline: 2rem;
      }
    }

    /* A PDF's rendered first page stands in for the document, sized like an
       image. Every part carries its own class so a blog can restyle this from
       custom CSS: a flex row on .attachment--pdf gives the compact chip
       layout, and either caption element can be hidden on its own. The caption
       uses gap rather than a separator glyph so hiding one leaves no orphan.
       Until the preview job has run there is no page, and .attachment__icon
       renders instead. */
    .attachment--pdf {
      .attachment__page {
        border: 1px solid var(--color-border);
        inline-size: auto;
        max-block-size: 600px;
      }

      /* A little document: portrait card, thick top edge, uppercase extension. */
      .attachment__icon {
        aspect-ratio: 4 / 5;
        block-size: 2.5lh;
        border: 2px solid var(--color-text-muted);
        border-block-start-width: 1ch;
        border-radius: 0.5ch;
        color: var(--color-text-muted);
        display: grid;
        font-size: 0.875em;
        font-weight: bold;
        margin-inline: auto;
        padding-inline: 0.5ch;
        place-content: center;
        text-transform: uppercase;
      }

      .attachment__caption {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75ch;
        justify-content: center;
      }

      /* Separators sit on the items either side of the Download link, never on
         the link itself, where they would be underlined and clickable. Each
         one disappears with its owner, so an attachment with no caption title
         starts cleanly and hiding the size from custom CSS takes its dot too. */
      .attachment__title::after {
        content: "·";
        margin-inline-start: 0.75ch;
      }

      .attachment__size::before {
        content: "·";
        margin-inline-end: 0.75ch;
      }
    }

    code,
    pre {
      background-color: var(--color-bg-subtle);
    }

    :where(audio) {
      margin: var(--lexxy-content-margin) 0;
      width: 100%;
      max-width: 500px;
    }

    hr {
      border: none;
      border-top: 1px solid var(--color-border);
      inline-size: 100%;
      margin-block: var(--lexxy-content-margin);
    }
  }
}

/* ============================= */
/* Excerpt Read More              */
/* ============================= */

.excerpt-read-more {
  margin-top: var(--lexxy-content-margin);
}

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

:where(.blog) {
  :where(article) :where(footer) {
    font-size: 0.875em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 1.5rem;

    a,
    button {
      color: var(--color-text-light);
      background-color: inherit;
      text-decoration: none;

      &:hover {
        color: var(--color-text-muted);
      }
    }

    .tags-container + & {
      margin-top: 1rem;
    }

    .post-actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      a,
      .comment-link-form,
      .comment-link,
      .upvote-form,
      .upvote {
        display: flex;
        align-items: center;
      }
    }
  }

  :where(.icon) {
    width: 1.5em;
    height: 1.5em;
    display: block;
  }
}

/* ============================= */
/* Forms                         */
/* ============================= */

:where(.blog) {
  :where(.form) {
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--color-bg-subtle);
    color: var(--color-text);
    border: none;

    label {
      font-weight: 500;
    }

    .button {
      font-size: 0.875em;
    }

    a.btn-cancel {
      display: inline-flex;
      align-items: center;
      font-weight: 500;
      color: inherit;
    }

    input[type="text"],
    input[type="email"],
    input[type="url"],
    textarea {
      font-family: inherit;
      font-size: 1em;
      background-color: var(--color-input-bg);
      border: 1px solid var(--color-input-border);
      color: var(--color-text);
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
      box-shadow: none;

      &:focus {
        border-color: var(--color-input-focus);
        outline: none;
      }
    }

    textarea {
      resize: vertical;
      max-width: 100%;

      &.autogrow {
        field-sizing: content;
        min-block-size: 10em;
      }

      /* Comments are short, so the box shouldn't dominate the thread */
      &.compact {
        field-sizing: content;
        min-block-size: 4em;
      }
    }

    input[type="email"]::placeholder,
    input[type="url"]::placeholder,
    textarea::placeholder {
      color: var(--color-placeholder);
    }

    input[type="submit"] {
      font-family: inherit;
      font-size: inherit;
      background-color: var(--color-button-bg);
      color: var(--color-button-text);
      border-radius: 0.375rem;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
      border: none;

      &:hover {
        background-color: var(--color-button-hover);
      }
    }
  }

  /* Search form on the /search page */
  .form.search-form {
    padding: 0;
    background-color: transparent;
    margin-block-end: 2rem;

    form {
      display: flex;
      gap: 0.5rem;
    }

    input[type="text"] {
      flex: 1;
      min-width: 0;
    }
  }

  /* Email subscription form - inline on desktop, stacked on mobile */
  :where(.email-subscriber-form) {
    input[type="email"] {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right: none;
    }

    input[type="submit"] {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      padding: 0.25rem 0.75rem;
    }

    @media (max-width: 480px) {
      input[type="email"],
      input[type="submit"] {
        border-radius: 0.375rem;
      }

      input[type="email"] {
        border-right: 1px solid var(--color-input-border);
      }

      input[type="submit"] {
        padding: 0.5rem 0.75rem;
      }
    }
  }
}

.contact-form,
.reply-form,
.comment-form {
  width: 100%;
  max-width: var(--content-width-standard);
  margin-inline: auto;
  margin-block: var(--lexxy-content-margin);
}

/* ============================= */
/* Comments                      */
/* ============================= */

.comments {
  width: 100%;
  max-width: var(--content-width-standard);
  margin-inline: auto;
  margin-block: var(--lexxy-content-margin);
  padding-block: 1.5rem;
  border-block: 1px solid var(--color-border);
  font-size: 0.9375em;
}

/* The shared .form styles are built for full-page contact and reply forms.
   A comment box sits inside a thread and has to be much tighter. */
.comment-form {
  margin-block: 0;
  padding-block: 1.375rem;

  .form-container {
    padding: 0;
    gap: 0.75rem;
  }

  .form-row {
    gap: 0.75rem;
  }

  .form-actions {
    margin-block-start: 0.375rem;
  }
}

/* Themes give headings a display face, which is wrong for a section label, so
   this opts out. Only the three properties they actually set on a bare h2 need
   resetting: the section sits outside .post-body, so nothing else reaches it. */
.comments-heading {
  font-family: inherit;
  font-size: 1em;
  font-weight: 600;
  margin-block: 0 1rem;
}

/* Occupies the same slot as the form, so it reads as a block rather than
   running into the first comment. */
.comment-notice {
  padding: 0.75rem 1rem;
  margin-block: 0 1.75rem;
}

.comment-list,
.comment-replies {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Separates the first comment from whatever occupies the compose slot above it,
   matching the rhythm between comments. */
:where(.comment-list):not(:empty) {
  margin-block-start: 1.75rem;
}

/* Whitespace separates comments, not rules: a thread of hairlines reads as a
   table rather than a conversation. Each further page arrives inside its own
   turbo-frame, so the sibling rule can't reach across that boundary. */
.comment + .comment,
turbo-frame > .comment:first-child {
  margin-block-start: 1.75rem;
}

.comment-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block-end: 0.125rem;
}

.comment-name {
  font-weight: 600;
}

.comment-date {
  color: var(--color-text-muted);
  font-size: 0.875em;
}

.comment-badge {
  font-size: 0.6875em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

/* Escaped plain text, so newlines are honoured here rather than by markup */
.comment-message {
  white-space: pre-line;
}

.comment-replies {
  margin-block-start: 0.875rem;
}

/* The author's voice should be findable at a glance in a long thread. A tint
   rather than a colour, so themes painting the page with a gradient show
   through it instead of being covered by a flat panel. */
.comment-by-author {
  background-color: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-inline-start: 2px solid var(--color-accent);
  border-radius: 0 0.375rem 0.375rem 0;
  padding: 0.75rem 1rem;
}

.comment-count {
  font-size: 0.9375em;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 0.15rem;
}

.comments-more {
  display: block;
  margin-block-start: 1.75rem;
  padding: 0.625rem 1rem;
  text-align: center;
  font-weight: 500;

  &:hover {
    opacity: 0.75;
  }
}

.reply-sent {
  padding-block-end: 1.5rem;

  input[type="submit"] {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-muted);

    &:hover {
      color: var(--color-text);
    }
  }
}

.email-subscriber-form {
  display: flex;
  justify-content: center;
  font-size: 0.875em;
  margin-inline: auto;
  margin-block: 0 var(--lexxy-content-margin);
  width: 100%;
  max-width: 450px;
}

.email-subscriber-form turbo-frame {
  display: block;
  width: 100%;
}

.form-fieldset {
  display: flex;
  border: none;
}

.email-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.subscription-description {
  color: var(--color-text);
}

.subscription-message {
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;

  a {
    color: var(--color-accent);
  }
}

.email-input {
  width: 12rem;
}

@media (min-width: 640px) {
  .email-input {
    width: 16rem;
  }
}

/* Mobile: stack email form vertically on very small screens */
@media (max-width: 480px) {
  .email-subscriber-form .form-fieldset {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }

  .email-input {
    width: 100%;
  }
}

.form-container {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .form-container {
    padding: 1rem;
  }
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .form-row {
    flex-direction: row;
    gap: 1rem;
  }

  .form-row .form-field {
    flex: 1;
  }
}

.form-field label {
  display: block;
  margin-bottom: 0.25rem;
}

.form-field input,
.form-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.form-error {
  color: #ef4444;
  font-size: 0.875em;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

/* ============================= */
/* Post Lists                    */
/* ============================= */

/* Stream layout - spaced posts */
.post-stream-item {
  margin-bottom: 4rem;
}

/* Titles layout - compact chronological list */
.title_layout {
  margin-block-end: 2rem;
}

.posts-titles .year-header {
  color: var(--color-text-heading);
  font-size: 1.125em;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.posts-titles .year-header.has-previous {
  margin-top: 2rem;
}

.posts-titles .post-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  line-height: 1.5;
}

.post-row time {
  color: var(--color-text-muted);
  width: 4rem;
  flex-shrink: 0;
}

.posts-titles a {
  color: var(--color-accent);
  font-weight: 500;
}

.posts-titles a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

/* Cards layout - grid of post cards */
.post-card {
  margin-bottom: 2rem;
}

.post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-card-link:hover {
  text-decoration: none;
}

.post-card a {
  text-decoration: none;
}

.post-card:hover .post-card-content {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.post-card-content {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 200ms;
}

.post-card-title {
  font-size: 1.5em;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.post-card-summary {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
  overflow-wrap: break-word;
  line-height: 1.5;
}

.post-card-summary img {
  border-radius: 0.5rem;
  margin-inline: auto;
  max-width: 100%;
}

.post-card-summary video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 30rem;
  object-fit: contain;
}

.post-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.post-card-meta.has-tags {
  margin-top: 1rem;
}

.post-card-meta.no-tags {
  margin-top: 1.5rem;
}

.post-card-date {
  font-size: 0.875em;
  line-height: 1.4;
  color: var(--color-text-muted);
  opacity: 0.75;
}

.post-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75em;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 9999px;
  border: 1px solid var(--color-border);
}

/* ============================= */
/* Tags                          */
/* ============================= */

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2rem;
}

.tag-link {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.875em;
  font-weight: 500;
  text-decoration: none;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-muted);
  border-radius: 0.375rem;
  transition: background-color 200ms;
}

.tag-link:hover {
  background-color: var(--color-bg-elevated);
}

/* ============================= */
/* Confirmation                  */
/* ============================= */

:where(.blog) {
  :where(.confirmation-card) {
    background-color: var(--color-bg-subtle);
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-border);
    color: var(--color-text);
  }
}

.confirmation-page {
  margin-top: 3rem;
  max-width: 450px;
  margin-inline: auto;
  padding: 2rem;
}

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

.confirmation-link,
.confirmation-button {
  margin-top: 1rem;
}

.confirmation-link a, .confirmation-button button {
  color: var(--color-accent);
  background-color: inherit;
  font-size: inherit;
  font-weight: 500;
  text-decoration: underline;
}

.confirmation-button {
  display: flex;
  justify-content: center;
}

.confirmation-button button {
  font-family: inherit;
}

/* ============================= */
/* Custom Tag Components         */
/* ============================= */

/* Posts list component (for custom tags in page content) */
ul.posts-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-block: 0 var(--lexxy-content-margin);
  display: grid;
  gap: 0.25rem;
  grid-template-columns: min-content 1fr;
}

.posts-list li {
  display: grid;
  gap: 0.75rem;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  margin: 0;
  padding: 0;
}

.posts-list a {
  font-weight: 500;
  text-decoration: none;
}

.posts-list a:hover {
  text-decoration: underline;
}

.posts-list li time {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.posts-list h2 {
  margin-bottom: 0.5rem;
}

.posts-list h2:not(:first-child) {
  margin-top: 1.5rem;
}

.posts-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-block: 1.5rem;
}

@media (min-width: 640px) {
  .posts-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.posts-gallery-image {
  aspect-ratio: 1;
  overflow: hidden;
}

.posts-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.posts-gallery-title {
  display: none;
}

/* Tag list component */
.tag-list {
  list-style: disc;
  padding-left: 1.5em;
  margin-block: 0 var(--lexxy-content-margin);
}

.tag-list li {
  margin: 0;
  padding: 0;
}

.tag-list a,
.tags-inline a {
  font-weight: 500;
  text-decoration: none;
}

.tag-list a:hover,
.tags-inline a:hover {
  text-decoration: underline;
}

.table-of-contents {
  margin-block: 0 var(--lexxy-content-margin);
}

.table-of-contents ol {
  margin-block: 0;
}

.table-of-contents li,
.table-of-contents ol {
  margin: 0;
}

.table-of-contents li::marker {
  color: var(--color-text);
}

/* ============================= */
/* Media Embeds                  */
/* ============================= */

/* YouTube 16:9 aspect ratio container */
.video-embed-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 = 0.5625) */
  margin-block: 0 var(--lexxy-content-margin);
}

.video-embed-container > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* General iframe styling */
:where(.blog) {
  :where(iframe) {
    display: block;
    margin-block: 0 var(--lexxy-content-margin);
    max-width: 100%;
    width: 100%;
    border: none;
  }
}

/* ============================= */
/* UI Components                 */
/* ============================= */

:where(.blog) button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  display: flex;
  cursor: pointer;
  padding: 0;
}

/* Empty state messages */
.empty-state {
  text-align: center;
}

.empty-state a {
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: underline;
}

/* Tag filter notice */
.tag-filter-notice {
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875em;
  color: var(--color-text-muted);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
}

.tag-filter-notice p {
  margin: 0;
}

.tag-filter-notice strong {
  color: var(--color-text);
}

.tag-filter-notice-links {
  margin-top: 0.5rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}

.tag-filter-notice-link {
  color: var(--color-text-muted);
  text-decoration: underline;
  white-space: nowrap;
}

.tag-filter-notice-link:hover {
  color: var(--color-accent);
}

.tag-filter-rss {
  text-decoration: none;
}

.tag-filter-rss span {
  text-decoration: underline;
}

.tag-filter-rss .icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
}

/* ============================= */
/* Typography                    */
/* ============================= */

/* Font family classes (applied dynamically) */
.font-sans {
   --font-body: var(--font-sans);
}

.font-serif {
   --font-body: var(--font-serif);
}

.font-mono {
  --font-body: var(--font-mono);
}

/* ============================= */
/* Flash Messages                */
/* ============================= */

/* Note: Flash container uses .hidden class for initial display: none */

.flash-wrapper {
  position: absolute;
  width: 100%;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  z-index: 10;
}

.flash-message {
  max-width: 300px;
  padding: 0.5rem 1rem;
  margin-inline: auto;
  border-radius: 0.375rem;
  background-color: var(--color-bg-subtle);
  box-shadow: 0 4px 6px -1px var(--color-shadow);
}

@media (min-width: 640px) {
  .flash-message {
    max-width: 400px;
  }
}

.flash-message-text {
  color: var(--color-text);
  text-align: center;
}

/* ============================= */
/* Utilities                     */
/* ============================= */

.hidden {
  display: none;
}

.pointer-events-none {
  pointer-events: none;
}

/* ============================= */
/* Animations                    */
/* ============================= */

@keyframes pulseGrow {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
  }
}

.animate-pulse-grow {
  animation: pulseGrow 500ms ease-in-out;
}