/* ===========================
   Header
   =========================== */
/* --- Header polish --- */
.site-header{
  position: sticky; top: 0; z-index: 10;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
  padding: 1.2rem 0 1rem;
}

/* Row: icon + text */
.hero{
  display: flex; align-items: center; gap: 1rem;
}

/* Monochrome SVG via CSS mask (uses currentColor) */
.logo-mask{
  width: 75px; height: 75px; flex: 0 0 75px;
  background-color: currentColor;
  -webkit-mask: var(--logo-url) no-repeat center / contain;
          mask: var(--logo-url) no-repeat center / contain;
}

/* Text block */
.hero-text{ min-width: 0; }               /* prevents overflow on narrow screens */
.site-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.site-tagline{
  margin: .3rem 0 0;
  color: var(--pico-muted-color);
  font-size: clamp(.98rem, 1.2vw, 1.05rem);
}

/* Slightly larger icon & gap on wide screens */
@media (min-width: 900px){
  .hero{ gap: 1.25rem; }
  .logo-mask{ width: 100px; height: 100px; flex-basis: 100px; }
}

/* (Optional) soften the color of the whole header mark/text */
.brand{ color: var(--pico-contrast); } /* or var(--pico-muted-color) for a lighter feel */

.site-title a { color: inherit; text-decoration: none; }

/* ===========================
   Index: card grid + cards
   =========================== */
.entries-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  margin: 1rem 0 1.25rem;
}
@media (min-width: 900px) { .entries-grid { gap: 1.25rem; } }

.entry {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  background: var(--pico-card-background-color, var(--pico-background-color));
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .06s ease, box-shadow .12s ease;
}
.entry:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.05); }

/* Title | Date */
/* Entry header: stack on mobile, align center on desktop */
.entry-head{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  margin-bottom:.35rem;
}

@media (min-width: 768px){
  .entry-head{
    display:grid;
    grid-template-columns: 1fr auto;   /* title | date */
    column-gap:.75rem;
    align-items: center;                /* <-- vertical center */
  }
  .entry-date{
    align-self: center;                 /* ensure the pill aligns too */
  }
}
/* Card titles: dark by default, underline + lighter on hover */
.entry-title { margin: 0; padding: 0; }
.entry-title a{
  color: var(--pico-contrast);          /* dark, strong */
  text-decoration: none;                /* no underline by default */
  font-weight: 700;                     /* keep the strong title weight */
  text-underline-offset: 2px;
  transition: color .14s ease, text-decoration-color .14s ease;
}

/* Ensure visited stays dark too */
.entry-title a:visited{
  color: var(--pico-contrast);
  text-decoration: none;
}

/* Hover/active: lighter (accent) + underline */
.entry-title a:hover,
.entry-title a:active{
  color: var(--pico-primary);           /* lighter/accent tone */
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* Keyboard focus: match hover for clarity + a focus ring */
.entry-title a:focus-visible{
  color: var(--pico-primary);
  text-decoration: underline;
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
  text-decoration-thickness: 2px;
}
/* Date pill */
.entry-date {
  padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-muted-border-color);
  font-size: .82rem; line-height: 1; white-space: nowrap;
}

/* --- Updates block --- */
.entry-updates{
  margin-top:1rem; padding-top:.75rem;
  border-top:1px solid var(--pico-muted-border-color);
}
.entry-updates .h6{ margin:0 0 .5rem; color:var(--pico-muted-color); font-weight:700; }

/* List layout: date | body */
.updates{
  list-style:none; margin:.25rem 0 0; padding:0;
  display:grid; gap:0; /* zero gap so the vertical line looks continuous */
}
.update{
  display:grid; grid-template-columns: auto 1fr; column-gap:.75rem; align-items:flex-start;
  /* A bit of vertical rhythm */
  padding:.25rem 0;
}

/* Date pill: reuse entry-date look */
.update-date,
.entry-date{
  padding:.2rem .6rem;
  border-radius:999px;
  border:1px solid var(--pico-muted-border-color);
  background:var(--pico-muted-border-color);
  font-size:.82rem; line-height:1; white-space:nowrap;
}

/* Indented body with a vertical line */
.update-body{
  border-left:2px solid var(--pico-muted-border-color);
  padding-left:.75rem;
  margin-left:.1rem;  /* tiny offset so the line feels centered between date & text */
}
.update-text{ line-height:1.35; }

/* Inline references (same look as entry references) */
.inline-refs{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }
.inline-refs strong{ margin-right:.25rem; }

.refs-list{
  display:inline-flex; flex-wrap:wrap; align-items:center;
}
.refs-list a, .refs-list span{ white-space:nowrap; }
.refs-list > * + *{ margin-left:.5rem; }
.refs-list > * + *::before{
  content:"|"; margin-right:.5rem; color:var(--pico-muted-color);
}

/* Link icon sizing (shared) */
.icon-link{ width:.95em; height:.95em; stroke:currentColor; margin-left:.25rem; }

/* Thin separator between update refs and next content */
hr.meta-sep{
  margin:.6rem 0 0;
  border:none; border-top:1px solid var(--pico-muted-border-color);
}


/* Chips + excerpt */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .6rem; }
.chip {
  display: inline-flex; align-items: center; line-height: 1;
  padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-muted-border-color);
  font-size: .85rem;
}
.excerpt { margin: 0; color: var(--pico-muted-color); }

#no-results[hidden] { display: none; }
#no-results { margin: .25rem 0 1rem; color: var(--pico-muted-color); }

/* ===========================
   Tools (filters + search) at bottom
   =========================== */
.tools {
  margin: 1.25rem 0 1.5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--pico-muted-border-color);
}
.compact-tools { font-size: .92rem; }

.compact-tools .filters {
  display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin: 0 0 .5rem;
}
.compact-tools .filters strong { margin-right: .25rem; font-weight: 600; font-size: .9em; }

/* solid, readable filter pills */
.compact-tools .tag {
  display: inline-flex; align-items: center; cursor: pointer; font: inherit;
  padding: .35rem .6rem; border-radius: 999px;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-muted-border-color);
  color: inherit;
}
.compact-tools .tag.active {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  border-color: var(--pico-primary);
}

/* Pagefind search compactness (without relying on internal classes) */
#search { margin: .25rem 0 0; }
#search input[type="search"], #search input[type="text"] { font-size: .9rem; padding: .4rem .55rem; }
#search button { font-size: .9rem; }

/* ===========================
   Entry page (detail)
   =========================== */
.entry-page {
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 14px;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--pico-card-background-color, var(--pico-background-color));
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.entry-page .crumbs { margin-bottom: .5rem; }
.entry-page .crumbs a { color: var(--pico-muted-color); text-decoration: none; }
.entry-page .crumbs a:hover { text-decoration: underline; }

/* reuse .entry-head / .entry-date styles */

/* Bottom meta (references + tags) */
.entry-meta {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color);
  display: grid; gap: .75rem;
}

/* Inline references (label + pipe-separated items) */
.inline-refs { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.inline-refs strong { margin-right: .25rem; }
.refs-list { display: inline-flex; flex-wrap: wrap; align-items: center; }
.refs-list a, .refs-list span { white-space: nowrap; }
.refs-list > * + * { margin-left: .5rem; }
.refs-list > * + *::before {
  content: "|"; margin-right: .5rem; color: var(--pico-muted-color);
}
.icon-link { width: .95em; height: .95em; stroke: currentColor; margin-left: .25rem; }

/* Thin rule between references and tags */
hr.meta-sep {
  margin: .75rem 0; border: none;
  border-top: 1px solid var(--pico-muted-border-color);
}

.entry-footer-actions { display: flex; justify-content: flex-end; margin-top: .5rem; }

/* ===========================
   Accessibility
   =========================== */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto;
  background: var(--pico-primary-background); color: var(--pico-primary-inverse);
  padding: .5rem .75rem; border-radius: .5rem;
}

/* ===========================
   Optional: dark mode tweak (even if data-theme="light", harmless)
   =========================== */
@media (prefers-color-scheme: dark) {
  .entry, .entry-page { box-shadow: 0 1px 0 rgba(0,0,0,.2); }
}

/* ===========================
   Site Footer (with horizontal line)
   =========================== */
.site-footer{
  /* center the footer block itself */
  margin: 2rem auto 2.5rem;
  padding-top: 1rem;
  max-width: var(--pico-container-width, 1200px); /* keeps it aligned with the page */
  text-align: center;
  display: grid;
  gap: .35rem;
  justify-items: center;

  /* divider inside the container */
  border-top: 1px solid var(--pico-muted-border-color);
}

.site-footer .footer-meta,
.site-footer .footer-copy{
  color: var(--pico-muted-color);
}

/* Filters: compact chips */
.filters-compact{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .45rem;
  margin:.25rem 0 0;
}
.filters-label{
  margin-right:.25rem; color:var(--pico-muted-color); font-size:.86rem;
}
.filters-compact .tag{
  appearance:none; border:1px solid var(--pico-muted-border-color);
  background:var(--pico-muted-border-color); color:inherit; cursor:pointer;
  padding:.26rem .55rem; border-radius:999px; font-size:.9rem; line-height:1.1;
}
.filters-compact .tag:hover{ filter:brightness(.98); }
.filters-compact .tag:focus-visible{
  outline:2px solid var(--pico-primary); outline-offset:2px;
}
.filters-compact .tag.active{
  background:var(--pico-primary-background);
  border-color:var(--pico-primary);
  color:var(--pico-primary-inverse);
}

/* Tighten the block’s spacing a touch */
.tools{ margin-top:.6rem; }

button.chip { cursor: pointer; color: inherit; }
button.chip:hover { filter: brightness(.98); }