/* Component-owned styles (shipped only when this component is used) */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  margin: var(--spacing-xxl) 0 1.875rem 0;
  /* Align with .section padding-top */
}

.widget-title {
  color: var(--heading-color);
  font-size: 1.25rem;
  /* 20px */
  font-weight: 600;
  padding: 0 0 0 0.625rem;
  /* 10px */
  margin: 0 0 1.25rem 0;
  /* 20px */
  border-left: 0.25rem solid var(--accent-color);
  /* 4px */
}

.widget-item {
  margin-bottom: 1.875rem;
  /* 30px */
  background-color: color-mix(in srgb, var(--card-background, #fff), transparent 50%);
  border: 1px solid var(--card-border, color-mix(in srgb, var(--default-color), transparent 90%));
  padding: 1.875rem;
  /* 30px */
  border-radius: 0.3125rem;
  /* 5px */
}

.widget-item:last-child {
  margin-bottom: 0;
}
.recent-posts-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.recent-posts-widget .post-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
  /* 20px */
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item h4 {
  font-size: 1rem;
  /* 16px */
  font-weight: 600;
  margin-bottom: 0.3125rem;
  /* 5px */
}

.recent-posts-widget .post-item h4 a {
  color: var(--accent-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--default-color);
  text-decoration: underline;
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 0.875rem;
  /* 14px */
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}
}@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

.share-menu-wrapper {
    position: relative;
    display: inline-block;
}

.share-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.3s ease;

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

    [data-icon] {
        font-size: 1.2rem;
    }
}

.share-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    /* Align to right edge of button so it doesn't overflow screen on mobile */
    margin-top: 0.5rem;
    min-width: 12rem;
    width: max-content;
    /* Allow width to expand to fit content */
    background-color: var(--surface-color, #ffffff);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--card-border);
    z-index: 1000;

    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);

    &.open {
        opacity: 1 !important;
        visibility: visible;
        transform: translateY(0);
        z-index: 1050; /* Ensure it stays above footer and other elements */
    }

    /* Dark mode specific tweak if surface color isn't enough */
    @media (prefers-color-scheme: dark) {
        :root:not(:has(.theme-state-light:checked)) & {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    }

    @media (prefers-color-scheme: light) {
        :root:has(.theme-state-dark:checked) & {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    }
}

.share-menu-list {
    list-style: none;
    padding: 0.25rem 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.share-menu-item {
    display: flex;
    /* Baseline alignment: icons sit on the text's alphabetic baseline —
       derives from the same font metrics as the glyphs, so icon and text
       round consistently across zoom levels (box-centering rounded
       independently and wobbled at certain zoom factors). */
    align-items: baseline;
    gap: 0.75rem;
    /* Trailing copy affordance anchors to the row's right edge.
       (& = .share-menu-item — without it the nested selector would
       double the parent and never match.) Specificity above the
       .share-menu-item [data-icon] rule below (later source). */
    &.action-copy-link .icon-trailing-copy {
        margin-left: auto;
        font-size: 0.85rem;
        width: 0.95rem;
        text-align: center;
        opacity: 0.6;
        transition: opacity 0.15s ease;
    }
    &:hover .icon-trailing-copy {
        opacity: 1;
    }

    /* Optical centering: trim the label's box to the cap-height so the
       flex-centered icons align with the TEXT's visual middle instead of
       the line-box middle (which carries descender space — the reason
       the trailing icon sat low). text-box: 3/3 engines. */
    & .label {
        display: inline-block;
        text-box: trim-both cap alphabetic;
    }
    padding: 0.6rem 1rem;
    color: var(--default-color);
    /* Match reference text color */
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
    /* Reference speed */
    cursor: pointer;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    white-space: nowrap !important;
    /* Prevent wrapping forcefully */

    [data-icon] {
        font-size: 1.1rem;
        width: 1.2rem;
        /* Fixed width for alignment */
        text-align: center;
        color: inherit;
        /* Ensure icon matches text */
    }

    /* Icon-specific coloring (optional, but reference uses generic black)
     We stick to generic text color until hover to match the clean aesthetic
  */

    &:hover {
        /* Revert background to neutral grey (Reference style) */
        background-color: color-mix(in srgb, var(--default-color), transparent 94%);

        /* Only change ICON color to accent (as requested), text remains default */
        [data-icon] {
            color: var(--accent-color);
        }
    }
}

.share-menu-divider {
    margin: 0.25rem 0;
    border: 0;
    border-top: 1px solid var(--card-border);
    /* Use theme var */
    height: 1px;
    display: block;
    opacity: 1;

    @media (prefers-color-scheme: dark) {
        :root:not(:has(.theme-state-light:checked)) & {
            border-color: var(--card-border);
            /* Use valid dark mode border var */
        }
    }

    @media (prefers-color-scheme: light) {
        :root:has(.theme-state-dark:checked) & {
            border-color: var(--card-border);
            /* Use valid dark mode border var */
        }
    }
}

/* Specific fix for buttons that wrap icons */
button.share-menu-item {
    font-family: inherit;
}
}/* Component-owned styles (shipped only when this component is used) */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Blog Post Section
--------------------------------------------------------------*/
.blog-post {
  padding-bottom: 1.875rem; /* 30px */
  margin: 0; /* Spacing handled by .section padding-top */
}

.blog-post .article {
  padding: 1.875rem; /* 30px */
  box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--default-color), transparent 90%); /* 0 4px 16px */
}

.blog-post .post-img {
  /* margin: -1.875rem -1.875rem 1.25rem -1.875rem; // -30px -30px 20px -30px */
  margin: 0 0 1.25rem 0;
  overflow: hidden;
  border-radius: 0.25rem;
  aspect-ratio: 16/9;
  position: relative; /* For attribution overlay positioning */

  /* Attribution scales with the image; the wrapper is the query
     container (inline-size) so the rail/overlay can use cqi.
     1.3cqi ≈ the pre-proportional 0.65rem at desktop article width —
     the 2.34cqi card ratio overscaled on full-width post images. */
  container-type: inline-size;
  --attribution-font-size: max(1.3cqi, var(--attribution-min-size));

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Mute brightness in dark mode to avoid glare */
    @media (prefers-color-scheme: dark) {
      :root:not(:has(.theme-state-light:checked)) & {
        filter: brightness(0.85) contrast(1.1);
        transition: filter 0.3s ease;
      }
    }

    @media (prefers-color-scheme: light) {
      :root:has(.theme-state-dark:checked) & {
        filter: brightness(0.85) contrast(1.1);
        transition: filter 0.3s ease;
      }
    }
  }
}

/* Hover to restore full brightness for hero image */
@media (prefers-color-scheme: dark) {
  :root:not(:has(.theme-state-light:checked)) .blog-post .post-img img:hover {
    filter: brightness(1) contrast(1);
  }
}

@media (prefers-color-scheme: light) {
  :root:has(.theme-state-dark:checked) .blog-post .post-img img:hover {
    filter: brightness(1) contrast(1);
  }
}

.blog-post .title {
  color: var(--heading-color);
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  padding: 0;
  margin: 1.875rem 0; /* 30px 0 */
}

.blog-post .post-content {
  margin-top: 1.25rem; /* 20px */
  display: flow-root;
}

.blog-post .post-content p {
  text-align: justify;
}

.blog-post .post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.25rem; /* 4px */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 85%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem; /* 20px */
  margin-top: 0.625rem; /* 10px */
}

.blog-post .post-content svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem; /* 20px */
  margin-top: 0.625rem; /* 10px */
}

.blog-post .post-content.science-layout {
  text-align: justify;

  p {
    margin-bottom: 1.25rem;
    line-height: 1.6;
  }

  @media (min-width: 768px) {
    column-count: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

    h3, blockquote, table, iframe, pre, .expressive-code {
      column-span: all;
    }

    svg, img {
      &[style*="margin: 1.5rem auto"], &[style*="margin:1.5rem auto"] {
        column-span: all;
        max-width: 60%;
        margin: 2.5rem auto;
      }
    }
  }
}

.blog-post .post-content h3 {
  font-size: 1.375rem; /* 22px */
  margin-top: 1.875rem; /* 30px */
  font-weight: bold;
}

.blog-post .post-content table {
  /* Tables can't shrink below min-content — block + scroll keeps wide
     tables INSIDE the article instead of overflowing the page (which
     made mobile browsers zoom out and shrink everything). */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.25rem 0; /* 20px 0 */
  background-color: var(--surface-color);
  text-align: left;
}

.blog-post .post-content th {
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--heading-color);
  padding: 0.75rem; /* 12px */
}

.blog-post .post-content td {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0.75rem; /* 12px */
}

.blog-post .post-content tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
}

.blog-post .post-content tr:hover td {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

/* ====================================================
   === MOBILE TABLE TREATMENTS (phones only, ≤767px) ===
   Markdown tables can't shrink below min-content; the base
   block+scroll above keeps them inside the article but hides
   columns with zero affordance. The treatment is selected via
   visuals.tables.mobile_style (body[data-tables-mobile]):
   - cards (default): each row becomes a self-describing card —
     remarkTableDataLabels copies the column headers into
     data-label attributes
   - scroll: the grid stays, first column pinned, right-edge
     fade as the scroll affordance (the tag-rail peek idiom)
   - native: no extra rules (base block+scroll only)
   ==================================================== */
@media (max-width: 767px) {
  /* --- "cards": labeled row cards, no horizontal scroll --- */
  body[data-tables-mobile="cards"] .blog-post .post-content table {
    display: block;
    border-collapse: separate;
    background-color: transparent;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content thead {
    display: none; /* column names live on each cell as data-label */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody {
    display: block;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr {
    display: block;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr:last-child {
    margin-bottom: 0;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
    background-color: transparent;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr:last-child td:last-child {
    border-bottom: none;
  }

  /* Column label as an overline above each cell's content. */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
    margin-bottom: 0.125rem;
  }

  /* --- Per-column accents: visual anchors so grouped columns
     (e.g. two colony columns in a schedule table) are pattern-
     scannable. Each column gets a hue for its label and a soft
     left bar on its blocks; the first column stays the neutral
     card header. Override any column via the custom properties,
     e.g. --table-col-3-color: #d97706. --- */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(2) {
    --table-col-color: var(--table-col-2-color, #0284c7); /* sky-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(3) {
    --table-col-color: var(--table-col-3-color, #d97706); /* amber-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(4) {
    --table-col-color: var(--table-col-4-color, #16a34a); /* green-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(5) {
    --table-col-color: var(--table-col-5-color, #dc2626); /* red-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(6) {
    --table-col-color: var(--table-col-6-color, #7c3aed); /* violet-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(7) {
    --table-col-color: var(--table-col-7-color, #0284c7);
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(8) {
    --table-col-color: var(--table-col-8-color, #d97706);
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(n + 2) {
    border-left: 0.1875rem solid color-mix(in srgb, var(--table-col-color, var(--accent-color)), transparent 60%);
    padding-left: 0.5rem;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(n + 2)::before {
    color: var(--table-col-color, color-mix(in srgb, var(--default-color), transparent 45%));
  }

  /* First column = the row identifier ("Day 0 — The Split"):
     emphasize it as the card header. */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:first-child {
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    color: var(--heading-color);
    font-weight: 700;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:first-child strong {
    color: var(--accent-color);
  }

  /* --- "scroll": compact data-grid for structured content
     (statistics, price lists — content that reads like a sheet).
     Dense typography, pinned first column, thin column separators,
     right-edge fade as the swipe affordance (the tag-rail peek
     idiom). Note: a sticky TOP header row is impossible inside an
     overflow-x scroll container (the spec forces overflow-y to auto,
     so there is no page-scroll to stick against) — the header row
     scrolls away vertically by design. */
  body[data-tables-mobile="scroll"] .blog-post .post-content table {
    font-size: 0.8125rem; /* 13px — sheet-density body */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent);
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content th {
    padding: 0.5rem 0.625rem; /* 8px 10px */
    background-color: var(--surface-color); /* solid: sticky head */
    border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 75%);
    font-weight: 700;
    white-space: nowrap;
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  /* Thin column separators give the grid its spreadsheet feel. */
  body[data-tables-mobile="scroll"] .blog-post .post-content th:not(:first-child),
  body[data-tables-mobile="scroll"] .blog-post .post-content td:not(:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  }

  /* Pinned first column: row identifiers stay readable while the
     remaining columns scroll. box-shadow instead of border — with
     border-collapse the td borders live on the table and would not
     travel with a sticky cell. */
  body[data-tables-mobile="scroll"] .blog-post .post-content th:first-child,
  body[data-tables-mobile="scroll"] .blog-post .post-content td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--surface-color);
    font-weight: 600;
    z-index: 1;
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--default-color), transparent 88%);
  }

  /* Zebra rows must stay behind the pinned column: use the opaque
     composite so the sticky cell doesn't turn see-through. */
  body[data-tables-mobile="scroll"] .blog-post .post-content tr:nth-child(even) td:first-child {
    background-color: color-mix(in srgb, var(--default-color) 3%, var(--surface-color));
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content thead th:first-child {
    z-index: 2; /* corner cell above pinned tds */
  }
}

/* Quote — paragraph-friendly: the accent bar (blockquote:after)
   is the signature; text sits left and reads like prose. For the
   big centered "pop" look use the :::pullquote directive instead. */
.blog-post .post-content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 1rem 1.25rem;
  position: relative;
  text-align: left;
  margin: 1.25rem 0; /* 20px 0 */
}

.blog-post .post-content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem; /* 17px */
  text-align: left;
}

/* Opt-in pop quote (:::pullquote) — one-liners meant to stand out. */
.blog-post .post-content blockquote.pullquote {
  text-align: center;
  padding: 1.875rem; /* 30px */
}

.blog-post .post-content blockquote.pullquote p {
  font-size: 1.375rem; /* 22px */
  font-weight: 500;
  text-align: center;
}

.blog-post .post-content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.1875rem; /* 3px */
  background-color: var(--accent-color);
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

/* ====================================================
   === ADMONITIONS (markdown container directives) ===
   :::warning[Title] … ::: / :::tip / :::info / :::note /
   :::important / :::caution — semantic hues are fixed on
   purpose (universal callout semantics); transparency keeps
   them dark-mode safe. See docs/features/admonitions.md.
   ==================================================== */
.blog-post .post-content .admonition {
  --admonition-color: var(--accent-color);
  margin: 1.25rem 0; /* 20px 0 */
  padding: 1rem 1.25rem;
  border-left: 0.1875rem solid var(--admonition-color);
  background-color: color-mix(in srgb, var(--admonition-color), transparent 92%);
  border-radius: 0.375rem;
  overflow: hidden;
}

.blog-post .post-content .admonition p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  text-align: left;
}

.blog-post .post-content .admonition p:last-child {
  margin-bottom: 0;
}

.blog-post .post-content .admonition-title {
  margin: 0 0 0.5rem !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--admonition-color);
}

/* The bracket line (:::info[Subtitle]) — follows the theme's subtitle
   idiom (mono, size/weight like .section-title em) but takes the
   admonition's semantic hue instead of the accent, matching the type
   title above it. */
.blog-post .post-content .admonition .admonition-subtitle {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--admonition-color);
}

.blog-post .post-content .admonition.admonition-warning {
  --admonition-color: #d97706; /* amber-600: readable on both themes */
}

.blog-post .post-content .admonition.admonition-caution {
  --admonition-color: #dc2626; /* red-600 */
}

.blog-post .post-content .admonition.admonition-tip {
  --admonition-color: #16a34a; /* green-600 */
}

.blog-post .post-content .admonition.admonition-info {
  --admonition-color: #0284c7; /* sky-600 */
}

.blog-post .post-content .admonition.admonition-note {
  --admonition-color: var(--default-color);
}

/* meta top styles */

.meta-top-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0.625rem 0; /* 10px 0 */
  padding: 0;
}

.blog-post .meta-top {
  margin-top: 0.625rem; /* 10px */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.625rem; /* 10px */
}

.blog-post .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-post .meta-top #info li+li {
  padding-left: 1.25rem; /* 20px */
}

.blog-post .meta-top #action li+li {
  padding-left: 0.625rem; /* 10px */
}

.blog-post .meta-top #info li [data-icon] {
  font-size: 1rem; /* 16px */
  margin-right: 0.5rem; /* 8px */
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-post .meta-top time,
.blog-post .meta-top span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.875rem; /* 14px */
  display: inline-block;
  line-height: 1;
}

.blog-post .meta-bottom {
  padding-top: 0.625rem; /* 10px */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-post .meta-bottom [data-icon] {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-post .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-post .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-post .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 1.25rem 0 0; /* 0 20px 0 0 */
  font-size: 0.875rem; /* 14px */
}

.blog-post .meta-bottom .cats li {
  display: inline-block;
}

.blog-post .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 0.875rem; /* 14px */
}

.blog-post .meta-bottom .tags li {
  display: inline-block;
}

.blog-post .meta-bottom .tags li+li::before {
  padding-right: 0.375rem; /* 6px */
  color: var(--default-color);
  content: ",";
}

.blog-post .meta-bottom .share {
  font-size: 1rem; /* 16px */
}

.blog-post .meta-bottom .share [data-icon] {
  padding-left: 0.3125rem; /* 5px */
}


.blog-post .post-top-content img,
.blog-post .post-content img {
  border-radius: 0.25rem; /* 4px */

  /* Mute brightness in dark mode to avoid glare */
  @media (prefers-color-scheme: dark) {
    :root:not(:has(.theme-state-light:checked)) & {
      filter: brightness(0.85) contrast(1.1);
      transition: filter 0.3s ease;
    }
  }

  @media (prefers-color-scheme: light) {
    :root:has(.theme-state-dark:checked) & {
      filter: brightness(0.85) contrast(1.1);
      transition: filter 0.3s ease;
    }
  }
}

/* Hover to restore full brightness */
@media (prefers-color-scheme: dark) {
  :root:not(:has(.theme-state-light:checked)) .blog-post img:hover {
    filter: brightness(1) contrast(1);
  }
}

@media (prefers-color-scheme: light) {
  :root:has(.theme-state-dark:checked) .blog-post img:hover {
    filter: brightness(1) contrast(1);
  }
}

.blog-post .post-tags {
  margin-top: 0.5em;
  position: relative;
  transition: max-height 0.35s ease-out;
}

/* ============================================================
   Clamped post tags — native reveal/collapse (checkbox pattern,
   theme-consistent with the radio theme switcher; works without JS).
   1 row on mobile, 2 on desktop; the label renders server-side only
   when the tag count can overflow (BlogPostTemplate).
   ============================================================ */
.blog-post {
  --post-tags-clamp: 1.75rem;      /* mobile: 1 badge row */
  --post-tags-clamp-desktop: 3.5rem; /* desktop: 2 rows */
}

@media (min-width: 768px) {
  .blog-post {
    --post-tags-clamp: var(--post-tags-clamp-desktop);
  }
}

.blog-post .tags-toggle-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Collapsed: 1 row (mobile) / 2 rows (desktop) fully crisp, plus a
   small PEEK strip where the next row's badge tops fade out (real
   hidden tags, not a fake hint) — via mask, so there is no overlay
   gradient (a gradient read as a dirty shadow in the dark theme).
   The toggle label sits centered below. */
.blog-post .tags-toggle-cb:not(:checked) ~ .post-tags {
  max-height: calc(var(--post-tags-clamp) + var(--post-tags-peek, 0.625rem));
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - var(--post-tags-peek, 0.625rem)),
    transparent
  );
}

/* Expanded */
.blog-post .tags-toggle-cb:checked ~ .post-tags {
  max-height: 40rem;
}

/* Toggle label — subtitle idiom (mono + accent) */
.blog-post .tags-toggle {
  /* Full row + centered: sits under the tag block, aligned with it */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-color);
  cursor: pointer;
  user-select: none;
}

.blog-post .tags-toggle .tags-chevron {
  display: inline-block;
  transition: transform 0.35s ease-out;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .tags-chevron {
  transform: rotate(180deg);
}

.blog-post .tags-toggle .when-open {
  display: none;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .when-closed {
  display: none;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .when-open {
  display: inline;
}

/* The label renders per tag count: 4–10 = mobile only (desktop fits
   two rows), ≥11 = always. ≤3: no label at all. */
.blog-post .tags-toggle--mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .blog-post .tags-toggle--mobile-only {
    display: inline-flex;
  }
}

/* Keyboard: focus ring on the label when the hidden checkbox focuses */
.blog-post .tags-toggle-cb:focus-visible ~ .tags-toggle {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-post .post-tags,
  .blog-post .tags-toggle .tags-chevron {
    transition: none;
  }
}



.blog-post .post-content {
  margin-top: 2em;
}

#blog-post {
  position: relative;
  z-index: 10;
}

/* Post header layout */
.post-header {
  margin-bottom: 2em;
  position: relative;
  z-index: 5;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.post-title {
  margin: 0;
  flex: 1;
}

.MathJax {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.post-content .mjx-chtml {
  margin: 1em 0;
}

.post-content .mjx-chtml.MJXc-display {
  margin: 1.5em 0;
  padding: 0;
}

/* Ensure equation numbers are visible */
.post-content .mjx-chtml .mjx-right {
  margin-right: 0 !important;
  float: right !important;
  text-align: right !important;
}

/* LaTeX equation overflow handling with centered content */
.post-content .MathJax_Display,
.post-content .mjx-chtml.MJXc-display {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1em 0;
  padding: 0.5em 0;
  width: 100% !important;
  /* Force width to ensure scrollbar works */
  max-width: 100%;
  display: flex !important;
  /* Use flexbox for centering */
  justify-content: center !important;
}

/* Center the math content while allowing it to be wider than container */
.post-content .mjx-chtml .mjx-math {
  min-width: min-content !important;
  /* Allow content to determine width */
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Style the scrollbar for better appearance */
.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar,
.post-content .MathJax_Display::-webkit-scrollbar {
  height: 0.5rem; /* 8px */
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-track,
.post-content .MathJax_Display::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-thumb,
.post-content .MathJax_Display::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-thumb:hover,
.post-content .MathJax_Display::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Ensure equation container doesn't overflow */
.post-content .MathJax_SVG_Display,
.post-content .MathJax {
  max-width: 100%;
}

/* Ensure container for equations has proper overflow */
.post-content .mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

/* Figure-wrapper alignment: paragraphs inside .text-center/.text-end
   wrappers (used by post content for figure grouping) follow the
   wrapper's alignment instead of the post-wide justified text. */
.text-center p, .text-end p, .text-start p {
  text-align: inherit !important;
}
}
/* .post-figure markup is injected into post content by plugins/rehypeFigures,
     so its styles belong to the blog-post rendering path. */
@layer components {
/* Modern Scientific/Editorial Figure Cards */
.post-figure {
  position: relative;
  /* Contain absolute overlay */
  background-color: var(--card-background);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 0.375rem;
  padding: 1.25rem;
  box-shadow: none;
  box-sizing: border-box;
  margin-bottom: 1.5rem;
  /* Attribution scales with the figure's own width
     (1.3cqi ≈ the pre-proportional size at desktop figure width) */
  container-type: inline-size;
  --attribution-font-size: max(1.3cqi, var(--attribution-min-size));

  /* Inherit and include theme attribution overlay styles */

  /* Custom override to move attribution statically below the image */
  .img-attribution {
    position: static;
    margin-top: 1rem;
    align-items: flex-end;
  }

  /* Media elements (SVG or Img) */
  svg,
  img {
    margin: 0 auto !important;
    display: block;
    max-width: 100%;
    height: auto;
    box-shadow: none !important;
    /* box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 92%) !important; */
  }

  img {
    border-radius: 0.1875rem;
  }

  /* Figure Captions */
  figcaption {
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed color-mix(in srgb, var(--default-color), transparent 80%);
    font-size: 0.825rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-family: var(--font-body);
    text-align: center;

    .figure-title {
      font-weight: 600;
      color: var(--heading-color);

      &::before {
        content: "Figure: ";
        color: var(--accent-color);
      }
    }

    .figure-desc {
      font-style: italic;
    }

    .figure-attribution {
      font-size: 0.75rem;
      opacity: 0.85;
      font-style: normal;
      margin-left: 0.25rem;

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

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  /* Responsive layout: clear floats on mobile viewports (< 576px) */
  &[style*="float: left"],
  &[style*="float:left"] {
    @media (max-width: 576px) {
      float: none !important;
      display: block !important;
      width: 100% !important;
      margin: 1.5rem 0 !important;
    }
  }

  &[style*="float: right"],
  &[style*="float:right"] {
    @media (max-width: 576px) {
      float: none !important;
      display: block !important;
      width: 100% !important;
      margin: 1.5rem 0 !important;
    }
  }
}
}