/*
Theme Name: Droplet
Theme URI: https://droplet.io
Author: Droplet Dev
Description: A dark, web3-minimalist WordPress theme. Deep purple gradient base, wall-to-wall post card grid with featured images above text panels, tight sticky header and footer, clean and premium.
Version: 1.4.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: droplet
Tags: dark, web3, minimalist, grid, clean, premium
*/

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Dark purple "slushy web3" palette. Each value is a very dark gray with a
     subtle purple tint — calm, professional, not saturated. */
  --bg: #0e0a1a;          /* page base — deepest purple-black */
  --bg-card: #181226;     /* card surface — slightly lifted, purple-tinted */
  --bg-card-hover: #1f1830; /* card hover — a touch lighter */
  --bg-header: #0a0816;   /* header/footer deepest point */
  --bg-mid: #15102a;      /* mid purple — used in header/footer gradients */
  --fg: #e8e8e8;
  --fg-muted: #8a82a0;    /* muted text — slight purple shift to sit on purple bg */
  --fg-dim: #5a5470;      /* dim text — same purple shift */
  --accent: #ffffff;
  --border: #2a2438;      /* purple-tinted border */
  /* Solana gradient — teal → blue → purple, derived from the brand gradient image. */
  --sol-gradient: linear-gradient(135deg, #36c7b9 0%, #6e8ed1 50%, #ae4deb 100%);
  --sol-gradient-hover: linear-gradient(135deg, #4dd4c8 0%, #8da0db 50%, #c07aef 100%);
  --sol-gradient-text: linear-gradient(90deg, #36c7b9 0%, #6e8ed1 50%, #ae4deb 100%);
  --sol-purple: rgba(174, 77, 235, 1);
  --radius: 3px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
  --max-read: 680px;
  --header-h: 48px;
  --grid-gap: 2px;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  /* Deep purple gradient base — calm and professional, web3 slushy feel.
     A solid purple-black base with two subtle radial glows (top + bottom)
     that hint at purple without overwhelming. background-attachment: fixed
     keeps the glows stable as the user scrolls, so long pages don't
     stretch the gradient. */
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(70, 40, 110, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(50, 30, 85, 0.16) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--fg);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--fg-muted);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ─── Header ─── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Subtle dark-purple gradient: deepest at top, slightly lifted at bottom —
     "sheds" a hint of purple light onto the page below. */
  background: linear-gradient(180deg, var(--bg-header) 0%, var(--bg-mid) 100%);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

/* When the WP admin bar is present (logged-in users), the sticky header
   needs to sit just below it. WordPress admin bar behavior:
   - ≥783px: position: fixed, 32px tall → header offset 32px
   - 601-782px: position: fixed, 46px tall → header offset 46px
   - ≤600px: position: absolute (scrolls away with the page) → header sticks
     at top: 0 (no offset, otherwise a permanent gap is left after the
     admin bar scrolls off). */
.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.site-identity {
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-icon-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
}

.site-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: capitalize;
  line-height: 1;
  font-family: var(--font-sans);
}

.site-name a {
  color: var(--accent);
}

.site-name a:hover {
  color: var(--accent);
  opacity: 0.78;
}

/* ─── Navigation ─── */
.site-nav {
  display: flex;
  align-items: center;
  gap: 0;
}

.site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: block;
  padding: 4px 7px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: var(--accent);
  transition: opacity 0.15s ease;
  font-family: var(--font-sans);
}

.site-nav a:hover,
.site-nav .current-menu-item a {
  opacity: 0.78;
  color: var(--accent);
}

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

.menu-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ─── Grid Layout (Index / Archive) ───
   Masonry layout via CSS columns: one column on mobile, four on desktop.
   Cards flow top-to-bottom then left-to-right. This lets each card's
   featured image display at its natural aspect ratio without cropping. */
.grid-container {
  columns: 1;
  column-gap: 14px;
  padding: 14px;
}

@media (min-width: 1024px) {
  .grid-container {
    columns: 4;
  }
}

/* Each card must not break across columns. */
.grid-container .post-card {
  break-inside: avoid;
  margin-bottom: 14px;
}

/* ─── Post Card ───
   Two-zone card: featured image on top, text panel below. The text is no
   longer overlaid on the image — the image gets to breathe and the text
   sits on its own purple-tinted surface. Rounded corners + lift on hover
   match the broader dark-purple web3 aesthetic. */
.post-card {
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  border-color: #3a3050;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(80, 50, 130, 0.18);
}

/* Featured image wrapper — natural aspect ratio, top corners rounded with
   the card, slight zoom on hover. No fixed aspect-ratio so the full image
   shows at its native proportions (tall, wide, or square). */
.post-card-image-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0a0816;
}

.post-card-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-image {
  transform: scale(1.05);
}

/* Fallback for cards without an image — body panel takes the full card. */
.post-card.no-image .post-card-body {
  flex: 1;
}

/* Body panel — purple-tinted surface below the image, holds category pill,
   title, and date. */
.post-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

/* Category pill — inline at the top of the body panel, glassy with a
   purple-tinted backdrop so it sits naturally on the purple card surface. */
.post-card-category {
  align-self: flex-start;
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e8e0ff;
  background: rgba(120, 80, 180, 0.22);
  border: 1px solid rgba(150, 110, 210, 0.32);
  padding: 3px 9px;
  border-radius: 999px;
  line-height: 1.4;
  margin-bottom: 2px;
}

.post-card-body .post-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
  max-width: 100%;
}

/* Post card title — Solana gradient text (teal → blue → purple).
   Clipped to text via background-clip. The stretched-link ::after still
   works because it's positioned absolutely and doesn't depend on text color. */
.post-card-body .post-card-title a {
  background: var(--sol-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
  display: inline-block;
  transition: opacity 0.15s ease;
}

.post-card-body .post-card-title a:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Hide the category pill on index/archive grid pages — the rainbow title
   already provides enough visual identity without the extra label. */
.grid-page .post-card-category {
  display: none;
}

/* Stretched link: the title <a>::after covers the entire body (= entire
   card) so any click on the thumbnail or text opens the post. */
.post-card-body .post-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

.post-card-body .post-card-date {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin-top: 2px;
}

/* ─── Single Post / Page ─── */
.single-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.single-container .post-header {
  margin-bottom: 36px;
}

.single-container .post-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

/* Post meta — sits BELOW the title. All elements (date, separators,
   category links) are accent color (white) for a clean, unified look. */
.single-container .post-meta {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--accent);
}

/* The separator dot inherits the accent color from the parent. */
.single-container .post-meta .meta-sep {
  opacity: 0.6;
}

.single-container .post-meta time {
  font-weight: 700;
  color: var(--accent);
}

/* Category links inside the meta — accent color to match the rest. */
.single-container .post-meta .cat a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.single-container .post-meta .cat a:hover {
  opacity: 0.78;
}

.single-container .post-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
}

.single-container .post-content h1,
.single-container .post-content h2,
.single-container .post-content h3,
.single-container .post-content h4,
.single-container .post-content h5,
.single-container .post-content h6 {
  color: var(--accent);
  margin: 1.5em 0 0.5em;
  font-weight: 600;
  line-height: 1.3;
}

.single-container .post-content h2 { font-size: 22px; }
.single-container .post-content h3 { font-size: 18px; }

.single-container .post-content p {
  margin-bottom: 1.3em;
}

/* Inline links in post content use the Solana gradient. */
.single-container .post-content a {
  background: var(--sol-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.single-container .post-content a:hover {
  opacity: 0.75;
}

/* ─── Gutenberg Buttons (Solana gradient) ───
   Applies the Solana teal → blue → purple gradient so default WordPress
   buttons (the Buttons block in the block editor) visually match the
   brand language across posts and pages. Targets the standard
   .wp-block-button__link class emitted by Gutenberg. */
.single-container .post-content .wp-block-button,
.page-container .page-content .wp-block-button {
  margin: 1.5em 0;
}

.single-container .post-content .wp-block-button__link,
.page-container .page-content .wp-block-button__link {
  display: inline-block;
  background: var(--sol-gradient);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none;
  padding: 12px 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 4px 14px rgba(174, 77, 235, 0.35);
  transition: all 0.2s ease;
  cursor: pointer;
}

.single-container .post-content .wp-block-button__link:hover,
.page-container .page-content .wp-block-button__link:hover {
  background: var(--sol-gradient-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 20px rgba(174, 77, 235, 0.5);
  transform: translateY(-1px);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none;
}

/* Outline button variant — transparent fill with Solana gradient border
   (achieved via a gradient background clipped to the border box). */
.single-container .post-content .is-style-outline .wp-block-button__link,
.page-container .page-content .is-style-outline .wp-block-button__link {
  background: var(--sol-gradient);
  border: 1px solid transparent;
  background-clip: padding-box;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(174, 77, 235, 0.2);
}

.single-container .post-content .is-style-outline .wp-block-button__link:hover,
.page-container .page-content .is-style-outline .wp-block-button__link:hover {
  background: var(--sol-gradient-hover);
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(174, 77, 235, 0.3);
  transform: translateY(-1px);
}

.single-container .post-content blockquote {
  border-left: 2px solid var(--fg-dim);
  padding-left: 16px;
  margin: 1.5em 0;
  color: var(--fg-muted);
  font-style: italic;
}

.single-container .post-content code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--fg);
}

.single-container .post-content pre {
  background: var(--bg-card);
  padding: 16px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--border);
}

.single-container .post-content pre code {
  background: none;
  padding: 0;
}

.single-container .post-content ul,
.single-container .post-content ol {
  padding-left: 20px;
  margin-bottom: 1.3em;
}

.single-container .post-content li {
  margin-bottom: 0.35em;
}

.single-container .post-content img {
  border-radius: var(--radius);
}

.single-container .post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Post tags */
.post-tags {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.post-tags a {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 2px;
  color: var(--fg-muted);
  transition: all 0.15s ease;
}

.post-tags a:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

/* ─── Page Layout ─── */
.page-container {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.page-container .page-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--accent);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.page-container .page-content {
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
}

.page-container .page-content p {
  margin-bottom: 1.3em;
}

/* Inline links in page content use the Solana gradient. */
.page-container .page-content a {
  background: var(--sol-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

.page-container .page-content a:hover {
  opacity: 0.75;
}

/* ─── Archive Header ─── */
.archive-header {
  padding: 24px 18px;
  border-bottom: 1px solid var(--border);
}

.archive-header .archive-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.archive-header .archive-title span {
  color: var(--accent);
}

/* ─── Footer ───
   Sticky on ALL devices via position: fixed. Body has a matching
   padding-bottom (set below) so content isn't hidden behind it.
   Thinner than v1.4.5 to feel less heavy. Mirrors the header's purple
   gradient (lifted at top → deepest at bottom) for a cohesive frame. */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-header) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Offset body so the fixed footer doesn't cover content on any device. */
body {
  padding-bottom: 56px;
}

/* Footer inner: edge-to-edge (matches the header's full-width treatment)
   so the prev/next arrows extend to the same horizontal bounds as the
   header's logo + nav. No max-width cap. */
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

/* When prev/next sides are present, switch to a 3-column layout so the home
   link stays perfectly centered. */
.site-footer-inner.site-footer-nav {
  justify-content: space-between;
}

.footer-nav-side {
  flex: 1;
  display: flex;
  align-items: center;
}

.footer-nav-prev {
  justify-content: flex-start;
}

.footer-nav-next {
  justify-content: flex-end;
}

.footer-nav-placeholder {
  /* Empty spacer keeps the home link centered when one side is missing. */
  display: inline-block;
  min-width: 1px;
}

.footer-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  opacity: 0.78;
  font-family: var(--font-sans);
}

.footer-nav-link:hover {
  color: #ffffff;
  opacity: 1;
}

.footer-nav-arrow {
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
}

.site-footer-home {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  color: #ffffff;
  margin: 0;
  line-height: 1;
  font-family: var(--font-sans);
}

.site-footer a {
  color: #ffffff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: opacity 0.15s ease;
  font-family: var(--font-sans);
}

.site-footer a:hover {
  opacity: 0.78;
  color: #ffffff;
}

.site-footer .footer-icon-img {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  display: inline-block;
  flex-shrink: 0;
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 32px 16px;
  border-top: 1px solid var(--border);
}

.pagination a,
.pagination span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: all 0.15s ease;
}

.pagination a:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

.pagination .current {
  color: var(--accent);
  border-color: var(--fg-dim);
  background: var(--bg-card);
}

/* ─── 404 ─── */
.error-404 {
  max-width: var(--max-read);
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
}

.error-404 .error-code {
  font-size: 64px;
  font-weight: 700;
  color: var(--fg-dim);
  line-height: 1;
  margin-bottom: 12px;
}

.error-404 .error-msg {
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}

/* ─── Search Form ─── */
.search-form {
  display: flex;
  max-width: 400px;
}

.search-form input[type="search"] {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-right: none;
  color: var(--fg);
  font-size: 12px;
  padding: 6px 12px;
  outline: none;
  font-family: var(--font-sans);
  border-radius: 2px 0 0 2px;
  flex: 1;
}

.search-form input[type="search"]::placeholder {
  color: var(--fg-dim);
}

.search-form input[type="search"]:focus {
  border-color: var(--fg-dim);
}

.search-form button {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0 2px 2px 0;
  transition: all 0.15s ease;
  font-family: var(--font-sans);
}

.search-form button:hover {
  color: var(--accent);
  border-color: var(--fg-dim);
}

/* ─── Comments (minimal) ─── */
.comments-area {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.comments-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 24px;
}

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

.comment {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.comment:first-child {
  padding-top: 0;
}

.comment-author {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 6px;
}

.comment-content {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-muted);
}

.comment-content p {
  margin-bottom: 0.5em;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  /* Mobile footer is shorter — reduce body offset accordingly. */
  body {
    padding-bottom: 44px;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--bg-mid) 0%, var(--bg-header) 100%);
    border-bottom: 1px solid var(--border);
    padding: 8px 16px;
    z-index: 99;
  }

  .site-nav.active {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav a {
    padding: 8px 0;
  }

  /* Compact footer on mobile — smaller padding. */
  .site-footer {
    padding: 10px 14px;
  }

  /* Compact footer nav on mobile: tighten gap and hide "Prev"/"Next" labels,
     leaving just the arrows flanking the centered home link. */
  .site-footer-inner {
    gap: 10px;
  }

  .footer-nav-link {
    gap: 4px;
  }

  .footer-nav-label {
    /* Visually hidden on small screens to save space; arrow still conveys direction. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .footer-nav-arrow {
    font-size: 16px;
  }

  .single-container .post-title {
    font-size: 22px;
  }

  /* Single-column mobile cards: slightly larger title for legibility,
     tighter padding so the cards stay compact. */
  .post-card-body {
    padding: 11px 13px 13px;
  }

  .post-card-body .post-card-title {
    font-size: 15px;
  }

  .post-card-category {
    font-size: 9px;
    padding: 2px 8px;
  }
}