/* ─── General ───────────────────────────────────────────────────────────── */

:root {
  --header-height: 60px;
  --footer-height: 105px;
  --hero-min: 0px;
}

html { overflow-y: scroll; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  text-align: left;
  display: flex;
  flex-direction: column;
}

footer {
  min-height: 105px;
  flex-shrink: 0;
}

/* Prevent your hero banner from ever shrinking below its content */
#hero-container {
  flex: 0 0 auto; /* no grow, no shrink, size = auto/content-height */
}

/* Variant-based hero reservation to minimize layout shift */
#hero-container > header.header-hero {
  min-height: var(--hero-min);
  display: flex;            /* keeps text vertically centered */
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Full hero (home + posts) */
#hero-container > header.header-hero.header-hero--post { 
  --hero-min: 78px; /* tune to taste */
}

/* Compact hero (about/authors/privacy) */
#hero-container > header.header-hero.header-hero--compact { 
  --hero-min: 52px; /* tune to taste */
}

/* Make skeleton heroes reserve a bit more height so they visually match real content */
#hero-container.post-skeleton > header.header-hero.header-hero--post {
  --hero-min: 92px;   /* was 78px */
}

#hero-container.post-skeleton > header.header-hero.header-hero--compact {
  --hero-min: 60px;   /* was 52px */
}

/* Ensure the main content container stretches between header and footer */
#page-content { flex: 1 0 auto; }

#page-content.full,
#page-content.full-width,
#page-content.full .row,
#page-content.full-width .row,
#page-content.full .col-md-12,
#page-content.full-width .col-md-12 {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

/* ----------------------------------------
   Logo sizing & alignment
   ---------------------------------------- */

.site-logo {
  display: block;
  height: calc(var(--header-height) * 0.7);
  width: auto;
  max-width: 100%;
}

.footer-logo {
  height: calc(var(--footer-height) * 0.5);
  margin: 0 auto;
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

/* ─── Cards (main content cards) ─────────────────────────────────────────── */

.card-col {               /* Equal-height rows */
  display: flex;
}

.card {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease-in-out;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.card:hover { transform: scale(1.02); }

/* base text in cards */
.card-text,
.card-body p {
  color: #333;
  margin: 0 0 .35rem 0;
  line-height: 1.35;
  text-align: left;
}

/* Subtitle: clamp to 4 lines (reserve min height for stable rows) */
.card-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 4);
}

/* Summary fallback: clamp to 3 lines */
.card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-text strong { font-weight: normal; }
.card-body p:last-child { margin-bottom: 0; }

/* Card header: title left, badge right */
.card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
}

.card-header > .text-end {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.card-header .badge {
  white-space: nowrap;
  line-height: 1;
}

.card-header a {
  transition: background-color 0.3s, color 0.3s;
  font-weight: bold;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;                 /* required for ellipsis in flex */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-header a:hover {
  background-color: #f8f9fa;
  color: #007bff;
  text-decoration: underline;
}

/* Meta row (Author · Category · Date) */
.card-meta {
  color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .25rem;
  margin-bottom: .5rem;
  font-size: .8rem;
}
.card-meta .dot { color: #adb5bd; }

/* Tags row — allow ~2 lines then hide overflow */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  line-height: 1.2;
  max-height: calc(2 * 1.8em);
  overflow: hidden;
}

/* Card body layout: image left, text right */
.card-body {
  display: flex;
  padding: 0.75rem;             /* desktop baseline */
  font-size: 0.95rem;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  height: auto;
  overflow: visible;
}

.content-image-wrapper {
  flex: 0 0 40%;
  width: auto;
  padding-right: 0.75rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 60%;
  width: auto;
  min-width: 0;
}

/* ─── Text & Meta ───────────────────────────────────────────────────────── */

.text-muted { color: #6c757d; }

/* ─── Images ────────────────────────────────────────────────────────────── */

.content-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0.25rem;
}

/* ─── Grid & Layout ─────────────────────────────────────────────────────── */

#content-container {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  margin-top: 0 !important;
  width: 100%;
}

/* ─── Filters ───────────────────────────────────────────────────────────── */

.filter-box {
  position: relative;
  background-color: transparent;
  box-shadow: none;
  font-size: 0.85rem;
  padding: 0.5rem 0 0;
}

.filter-box::before,
.filter-box::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #e0e0e0;
}

.filter-box::before { top: 0; }
.filter-box::after  { bottom: -0.5rem; }

.form-check {
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

#category-container,
#tag-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.category-label,
.tag-label {
  cursor: pointer;
  color: #007bff;
  text-decoration: underline;
  display: flex;
  align-items: center;
}

.category-label:hover,
.tag-label:hover { color: #0056b3; }

.filter-actions { position: relative; z-index: 2; }

#filterContent fieldset > legend.form-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .5rem;
}

.filter-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.filter-toggle i { font-size: 0.9rem; line-height: 1; }
.filter-body-collapsed { display: none !important; }

@media (min-width: 768px) { .filter-collapse-footer { display: none; } }

/* ─── Full-width Single-post Layout ─────────────────────────────────────── */

#page-content.full-width { width: 100%; }
#page-content.full-width #filter-section { display: none !important; }
#page-content.full-width .col-md-10 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
}
#page-content.full-width #content-container {
  grid-template-columns: 1fr !important;
}

/* ─── Single-post View ─────────────────────────────────────────────────── */

.image-container {
  width: 100%;
  height: 35svh;
  overflow: hidden;
}

.content-body { text-align: left; }

.btn-normal {
  width: fit-content;
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  line-height: 1.2;
  min-height: 2.5rem;
  text-align: center;
}

/* Buttons & Form */
.btn { display: inline-block; }
.btns-search { width: 75px; }

legend {
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  display: block;
}

/* ───────────────────────────────────────────────────────────────────────────
   Unified Skeleton Styles (List, Post Hero/Content, Sidebar)
   ─────────────────────────────────────────────────────────────────────────── */

/* Pulse animation */
@keyframes pulse {
  0% { opacity: .6; }
  50% { opacity: .95; }
  100% { opacity: .6; }
}
.skeleton-bar,
.skeleton-image,
.skel-title { animation: pulse 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar, .skeleton-image, .skel-title { animation: none; }
}

/* List skeleton (renderListSkeleton) */
.skeleton-card {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  pointer-events: none;
}
.skel-header { display:flex; align-items:center; gap:.5rem; padding:.5rem .5rem 0; }
.skel-title  { display:block; height:1.3rem; width:70%; border-radius:.4rem; background:#e0e0e0; }

.skel-body { display:flex; flex-direction:row; align-items:stretch; gap:.5rem; padding:.5rem; }
.skel-image-wrapper { flex:0 0 40%; aspect-ratio: 16 / 9; overflow:hidden; padding-right:.5rem; }
.skeleton-image { width:100%; height:100%; background:#e0e0e0; border-radius:.25rem; }

.skel-content { flex:1 1 60%; min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.skel-subtitle { width:100%; display:grid; gap:.3rem; }
.skel-subtitle .skeleton-bar { height:.9rem; border-radius:.25rem; background:#e0e0e0; }
.skel-spacer { height: 1.5rem; width: 100%; }


.skel-meta { margin-top:.35rem; width:100%; }
.skeleton-meta-line { width:75%; height:.8rem; border-radius:.25rem; background:#e0e0e0; }
.skel-tags { margin-top:.25rem; width:100%; }
.skeleton-tags-line { width:90%; height:.8rem; border-radius:.25rem; background:#e0e0e0; }

/* Post view skeleton (DOMUtils.showPostSkeleton) */
.post-skeleton .skeleton-hero-title { width:70%; height:1.25rem; border-radius:.35rem; background:#e0e0e0; }
.post-skeleton .skeleton-hero-subtitle { margin-top:.5rem; display:grid; gap:.4rem; }
.post-skeleton .skeleton-hero-subtitle .skeleton-bar { height:.95rem; border-radius:.3rem; background:#e0e0e0; }

.post-skeleton .skeleton-meta { margin: .75rem 0 .5rem; }
.post-skeleton .skeleton-meta .skeleton-bar { width:100%; height:.9rem; border-radius:.25rem; background:#e0e0e0; }

.post-skeleton .skeleton-summary { display:grid; gap:.35rem; }
.post-skeleton .skeleton-summary .skeleton-bar { height:.9rem; border-radius:.25rem; background:#e0e0e0; }

.post-skeleton .skeleton-hero-image {
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:.5rem;
  background:#e0e0e0;
  margin: 1rem 0;
}

.post-skeleton .skeleton-post { display:grid; gap:.45rem; }
.post-skeleton .skeleton-post .skeleton-bar { width:100%; height:.9rem; border-radius:.25rem; background:#e0e0e0; }

/* Sidebar compact skeleton (DOMUtils.showSidebarSkeleton) */
.sidebar .skeleton-card.card--compact { border-radius:.5rem; }
.sidebar .skeleton-card.card--compact .skel-header { 
   padding:.75rem .75rem .5rem; 
}
.sidebar .skeleton-card.card--compact .skel-title  { height:.1rem; width:70%; }

.sidebar .skeleton-card.card--compact .skel-body { padding:.75rem; gap:.6rem; }
.sidebar .skeleton-card.card--compact .skel-image-wrapper { flex:0 0 112px; padding-right:0; }
.sidebar .skeleton-card.card--compact .skeleton-image {
  width:128px; height:84px; border-radius:.25rem;
}
.sidebar .skeleton-card.card--compact .skel-content { display:flex; flex-direction:column; gap:.35rem; }
.sidebar .skeleton-card.card--compact .skel-content .skeleton-bar { height:.9rem; border-radius:.25rem; }

.sidebar .sidebar-cards .skeleton-card.card--compact + .skeleton-card.card--compact { margin-top: .9rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Single Post + Sidebar Layout (sticky, responsive)
   ─────────────────────────────────────────────────────────────────────────── */

.single-layout .sidebar {
  position: sticky;
  top: 80px;                 /* sit just below your navbar */
  align-self: flex-start;    /* don't stretch */
  padding-left: 1.5rem;      /* keep padding aligned and extra gap */
}

@media (max-width: 991.98px) {
  .single-layout .sidebar { position: static; margin-top: 1rem; }
}

/* Optional section grouping */
.sidebar-section + .sidebar-section { margin-top: 1.25rem; }
.sidebar-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 .5rem 0; }

/* Sidebar headings (block style) */
.block-heading {
  position: relative;
  text-align: center;
  margin: .25rem 0 .75rem 0;
  font-weight: 600;
}
.block-heading span {
  background: #fff;
  padding: 0 .5rem;
  position: relative;
  z-index: 1;
}
.block-heading::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px solid #e0e0e0;
  transform: translateY(-50%);
}

/* Keep sidebar cards tidy */
.sidebar-cards .card { margin-bottom: .9rem; }

/* ───────────────────────────────────────────────────────────────────────────
   Compact Card Variant (sidebar)
   ─────────────────────────────────────────────────────────────────────────── */

.card--compact .card-header {
  padding: .5rem .75rem;
}
.card--compact .card-header a {
  display: block;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* symmetric padding so gap above/below the image matches */
.card--compact .card-body {
  display: flex;
  gap: 12px;
  padding: .75rem;              /* match main card baseline */
}

/* image column fixed footprint */
.card--compact .content-image-wrapper {
  flex: 0 0 112px;
  padding-right: 0;             /* image has fixed width; no extra padding */
  aspect-ratio: auto;           /* fixed px sizing, so no 16:9 box here */
}
.card--compact .content-image {
  width: 112px;
  height: 84px;
  object-fit: cover;
  border-radius: .5rem;
}

/* tighter text + reserve 4 lines for stability */
.card--compact .card-subtitle,
.card--compact .card-summary {
  margin-bottom: .25rem;
  font-size: 0.95rem;
  line-height: 1.3;
  min-height: calc(1.3em * 4);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* hide meta + tags to keep it minimal */
.card--compact .card-meta,
.card--compact .card-tags { display: none !important; }

/* ───────────────────────────────────────────────────────────────────────────
   General card/grid tweaks & helpers
   ─────────────────────────────────────────────────────────────────────────── */

.card-col { display: flex; }
.card-col .card { flex: 1 1 auto; }

.dot { margin: 0 .4rem; color: #6c757d; }

/* Post meta */
.post-meta {
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 0 0 1rem;
  margin-bottom: 1rem;
  font-size: .95rem;
  color: #495057;
}
.post-meta__left > * { margin-right: .25rem; }
.post-meta__tags { gap:.4rem; }

/* Back button left alignment safeguard */
.single-layout .btn-back-home { display: inline-block; margin-left: 0; text-align: left; }

/* fall-through safety: let any direct .row child shrink */
.single-layout > .col-12,
.single-layout > [class^="col-"],
.single-layout > [class*=" col-"] { min-width: 0 !important; }


/* Footer link for collapsing filters (mobile only) */
.filter-collapse-footer {
  bottom: 0;
  padding: .25rem .5rem;
  background: linear-gradient(to top, rgba(255,255,255,0.9), rgba(255,255,255,0));
  border-top: 1px solid #e0e0e0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
}
.minimise-link { font-size: 0.85rem; color: #666; text-decoration: none; }
.minimise-link:hover { color: #333; text-decoration: underline; }

/* CSP-safe helpers for 404 page */
.csp-muted { opacity: .65; cursor: not-allowed; }
.icon-lg { font-size: 1.5rem; }

/* styling for posts that utilise simple tags in dynamoDB */

/* Ensure no ancestor clips overflow */
.content-body { overflow: visible; }

/* Global text rhythm for content */
.content-body p {
  margin-top: 0;
  margin-bottom: 1.25rem; /* slightly more breathing room */
}

/* Headings spacing within articles */
.content-body h1,
.content-body h2,
.content-body h3,
.content-body h4,
.content-body h5,
.content-body h6 {
  margin-top: 1.75rem;        /* bigger gap above headings */
  margin-bottom: 0.75rem;     /* tighter under heading */
  font-weight: 600;        /* visually distinct */
}

/* Lists (ul/ol) spacing */
.content-body ul,
.content-body ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 1.5rem; /* indent bullets nicely */
}

/* Inline code or emphasized terms */
.content-body code {
  padding: 0.15rem 0.3rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

#content-container,
#content-container > .row,
#content-container > [class^="col-"],
#content-container > [class*=" col-"],
.single-layout .row,
.single-layout [class^="col-"],
.single-layout [class*=" col-"],
.content-body {
  min-width: 0; /* ✅ KEY FIX: allow the column to shrink so <pre> can scroll */
}

/* Code blocks (multi-line) */
.content-body pre {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;       /* scroll inside <pre> */
  overflow-y: hidden;
  white-space: pre;
  background: rgba(0, 0, 0, 0.04);
  border: 0 !important;
  border-radius: 0.5rem;
  padding: 0rem 0.5rem 1.25rem 0.5rem; /* top right bottom left */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

/* Ensure the <pre> gets the scrollbar, not the whole page */
.content-body pre > code {
  display: inline-block;
  min-width: max-content;  /* allow long lines */
  width: auto;
  white-space: inherit;
  word-break: normal !important;
  overflow-wrap: normal !important;
  padding: 0;
}


/* ─── Responsive overrides ─────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  /* tighter padding on mobile for main cards */
  .card-body { padding: 0.5rem; }
  .content-image-wrapper { padding-right: 0.5rem; }
  .sidebar { margin-top: .75rem; }
  .card-subtitle {
    -webkit-line-clamp: 3;
    min-height: calc(1.35em * 3); /* was 4 lines on desktop */
  }
  .skel-spacer { display: none; }
}

@media (min-width: 768px) {
  /* Desktop: let the post hero image size itself by width; cap height */
  .image-container {
    height: auto;
  }
  .image-container .content-image {
    width: 100%;
  }
}