/* ================================
   NBHS Archive – Baseline Styles
   (foundation-custom / site.css)
   Last updated: 2025-10
   ================================ */

/* --- Design Tokens (tweak these first) --- */
:root{
  /* Font sizes */
  --fz-xs: .82rem;
  --fz-sm: .92rem;
  --fz-base: 1rem;
  --fz-lg: 1.15rem;

  /* Line heights */
  --lh-tight: 1.22;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* Spacing scale */
  --gap-0: 0;
  --gap-1: .15rem;
  --gap-2: .35rem;
  --gap-3: .75rem;
  --gap-4: 1rem;
  --gap-5: 1.5rem;

  /* Colors (adjust to your palette) */
  --text: #111827;          /* near-black */
  --muted: #6b7280;         /* gray-500 */
  --rule: #e5e7eb;          /* gray-200 */
  --link: #1d4ed8;          /* blue-700 */
  --link-hover: #1e40af;    /* blue-800 */
}

/* --- Global type & utility classes --- */
body{ color:var(--text); }

.text-xs{font-size:var(--fz-xs)}
.text-sm{font-size:var(--fz-sm)}
.text-base{font-size:var(--fz-base)}
.text-lg{font-size:var(--fz-lg)}

.leading-tight{line-height:var(--lh-tight)}
.leading-snug{line-height:var(--lh-snug)}
.leading-normal{line-height:var(--lh-normal)}

.font-normal{font-weight:400}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

.mt-0{margin-top:var(--gap-0)} .mt-1{margin-top:var(--gap-1)} .mt-2{margin-top:var(--gap-2)}
.mt-3{margin-top:var(--gap-3)} .mt-4{margin-top:var(--gap-4)} .mt-5{margin-top:var(--gap-5)}
.mb-0{margin-bottom:var(--gap-0)} .mb-1{margin-bottom:var(--gap-1)} .mb-2{margin-bottom:var(--gap-2)}
.mb-3{margin-bottom:var(--gap-3)} .mb-4{margin-bottom:var(--gap-4)} .mb-5{margin-bottom:var(--gap-5)}

.nowrap{white-space:nowrap}
.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.break-words{overflow-wrap:anywhere}
.muted{color:var(--muted)}

/* --- Links --- */
a{ color:var(--link); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--link-hover) }

/* --- Section rules (light separators without heavy <hr>) --- */
.rule{ border-top:1px solid var(--rule); margin:var(--gap-4) 0; }

/* --- Resource Title --- */
.resource-title h2{
  margin:0 0 var(--gap-3);
  line-height:var(--lh-snug);
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  letter-spacing:.2px;
}

/* --- Media block (images/videos) --- */
.item-media{ font-size:var(--fz-sm); line-height:var(--lh-snug); }
.item-media .media-render{ margin-bottom:var(--gap-3); }
.item-media figure{ margin:0; }
.item-media img, .item-media video{ max-width:100%; height:auto; border-radius:6px; }

/* --- Main metadata (compact list: "Label: Value") --- */
.item-metadata-compact{ /* sizing via utilities in the template */ }
.item-metadata-compact .meta-row{ margin:var(--gap-1) 0; }
.item-metadata-compact .meta-key{
  font-weight:600;
  margin-right:.35rem;
  white-space:nowrap;
}
.item-metadata-compact .meta-value > *:last-child{ margin-bottom:0; }

/* Optional: make long identifiers/URLs wrap nicely */
.item-metadata-compact .meta-value{ word-break:break-word; }

/* --- Sidebars (blocks list, item sets, etc.) --- */
.left-sidebar, .right-sidebar{
  font-size:var(--fz-sm);
  line-height:var(--lh-normal);
}
.left-sidebar .block, .right-sidebar .block{ margin-bottom:var(--gap-4); }

/* --- Comments module (if present) --- */
#comments, .comments, .comment-list{
  font-size:var(--fz-base);
  line-height:var(--lh-normal);
}
.comment, .comment-item{
  padding: var(--gap-2) 0;
  border-top: 1px solid var(--rule);
}
.comment .author, .comment .meta{ color:var(--muted); font-size:var(--fz-sm); }

/* --- Optional: Item-set navigator (if you add prev/next later) --- */
.itemset-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-3); margin:var(--gap-3) 0;
  font-size:var(--fz-sm);
}
.itemset-nav .set-name{ color:var(--muted); }

/* --- Tables (for any tabular metadata blocks) --- */
table{ width:100%; border-collapse:collapse; }
th, td{ padding:.5rem; border-top:1px solid var(--rule); vertical-align:top; }
th{ text-align:left; font-weight:600; }

/* --- Forms (search boxes in sidebars, etc.) --- */
input[type="text"], input[type="search"], select, textarea{
  max-width:100%;
  padding:.5rem .6rem;
  border:1px solid var(--rule);
  border-radius:6px;
  font-size:var(--fz-base);
}
button, .button{
  display:inline-block; padding:.5rem .8rem; border-radius:6px;
  background:#111827; color:#fff; text-decoration:none; border:none; cursor:pointer;
}
button:hover, .button:hover{ filter:brightness(.92); }

/* --- Print tweaks (clean, compact printouts) --- */
@media print{
  a{text-decoration:none}
  .no-print{display:none!important}
  .resource-title h2{ font-size:1.2rem }
  .item-media{ page-break-inside:avoid }
  .left-sidebar, .right-sidebar{ font-size:.9rem }
}

/* --- Small screens (nudge spacing for phone) --- */
@media (max-width: 640px){
  .resource-title h2{ margin-bottom:var(--gap-2) }
  .item-media .media-render{ margin-bottom:var(--gap-2) }
  .left-sidebar .block, .right-sidebar .block{ margin-bottom:var(--gap-3) }
}