/* Ghost cards — styling for Ghost CMS card markup in migrated post content.
 * Loaded on singular pages only.
 * Phase 3 fills this out exhaustively per card type the staging content uses.
 */
.almanac-post__content :is(.kg-card) {
  margin: 1.5rem 0;
  border-radius: 14px;   /* consistent corner on every Ghost card */
}

/* Image card */
.almanac-post__content .kg-image-card { text-align: center; }
.almanac-post__content .kg-image-card img,
.almanac-post__content .kg-image {
  border-radius: 14px;
  border: 1px solid var(--almanac-border);
  width: 100%;
  height: auto;
}
.almanac-post__content .kg-width-wide img { max-width: min(82rem, 95vw); margin-inline: auto; display: block; }
.almanac-post__content .kg-width-full img { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); border-radius: 0; border: 0; }
.almanac-post__content .kg-card-hascaption figcaption,
.almanac-post__content .kg-image-card figcaption {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  font-style: italic;
  text-align: center;
  margin-top: 0.5rem;
}

/* Align center utility used inline */
.almanac-post__content .kg-align-center { text-align: center; }

/* Modern callout — soft rounded tint card with an icon chip; full-width so it
   uses the measure. No dated left-rule bar; the accent lives in the border and
   the icon ring. Ghost emits these with -blue, -yellow, -red, etc. */
.almanac-post__content .kg-callout-card {
  display: flex;
  align-items: flex-start;
  gap: var(--almanac-space-sm);
  padding: var(--almanac-space-md);
  margin: 1.75rem 0;
  border-radius: 14px;
  border: 1px solid var(--almanac-border);
  background: var(--almanac-bg-cream);
  font-size: 1rem;
}
.almanac-post__content .kg-callout-emoji {
  position: relative;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.125rem; height: 2.125rem;
  border-radius: 50%;
  background: var(--almanac-bg-paper);
  font-size: 1.0625rem; line-height: 1;
}
/* Hand-drawn ring hugging the icon (replaces the clean 1px inset ring). */
.almanac-post__content .kg-callout-emoji::after {
  content: "";
  position: absolute; inset: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%238a7250' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M26 4C36 3 44 13 43 24 42 35 31 45 20 43 10 41 4 30 7 19 9 11 17 5 27 4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}
.almanac-post__content .kg-callout-text { line-height: 1.6; min-width: 0; }
.almanac-post__content .kg-callout-text p:first-child { margin-top: 0; }
.almanac-post__content .kg-callout-text p:last-child { margin-bottom: 0; }

/* Color variants — soft tint + matching accent border and icon ring. */
.almanac-post__content .kg-callout-card-blue   { background: var(--almanac-info-soft);    border-color: color-mix(in srgb, var(--almanac-info) 34%, var(--almanac-border)); }
.almanac-post__content .kg-callout-card-blue   .kg-callout-emoji { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--almanac-info) 45%, transparent); }
.almanac-post__content .kg-callout-card-yellow { background: var(--almanac-yellow-soft);  border-color: color-mix(in srgb, var(--almanac-yellow-deep) 42%, var(--almanac-border)); }
.almanac-post__content .kg-callout-card-yellow .kg-callout-emoji { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--almanac-yellow-deep) 50%, transparent); }
.almanac-post__content .kg-callout-card-red    { background: var(--almanac-danger-soft);  border-color: color-mix(in srgb, var(--almanac-danger) 34%, var(--almanac-border)); }
.almanac-post__content .kg-callout-card-green  { background: var(--almanac-success-soft); border-color: color-mix(in srgb, var(--almanac-success) 34%, var(--almanac-border)); }
.almanac-post__content .kg-callout-card-grey,
.almanac-post__content .kg-callout-card-gray   { background: var(--almanac-bg-cream);     border-color: var(--almanac-border); }
.almanac-post__content .kg-callout-card-pink   { background: var(--almanac-tan-soft);     border-color: color-mix(in srgb, var(--almanac-tan) 45%, var(--almanac-border)); }
.almanac-post__content .kg-callout-card-purple { background: #EDE1F2;                     border-color: #C9A6DD; }

[data-almanac-theme="dark"] .almanac-post__content .kg-callout-card-pink { background: var(--almanac-tan-soft); }
[data-almanac-theme="dark"] .almanac-post__content .kg-callout-card-purple { background: #2A1A35; border-color: #6E4A86; }

/* Button card */
.almanac-post__content .kg-button-card { text-align: center; }
.almanac-post__content .kg-button-card.kg-align-center { text-align: center; }
.almanac-post__content .kg-button-card.kg-align-left { text-align: left; }
.almanac-post__content .kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--almanac-radius-md);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 1px solid var(--almanac-fg-primary);
  background: var(--almanac-fg-primary);
  color: var(--almanac-fg-inverted);
  transition: background var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content .kg-btn:hover { background: var(--almanac-yellow); color: var(--almanac-on-yellow); }
.almanac-post__content .kg-btn-accent {
  background: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
  border-color: var(--almanac-yellow);
}
.almanac-post__content .kg-btn-accent:hover { background: var(--almanac-yellow-deep); }

/* Toggle card */
.almanac-post__content .kg-toggle-card {
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  margin: 1.5rem 0;
}
.almanac-post__content .kg-toggle-card .kg-toggle-heading {
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.almanac-post__content .kg-toggle-card .kg-toggle-heading-text {
  padding: 0.875rem 1rem;
  flex: 1 1 auto;
  font-weight: 600;
  font-size: 1.0625rem;
  font-family: var(--almanac-font-display);
}
.almanac-post__content .kg-toggle-card .kg-toggle-card-icon {
  width: 16px; height: 16px;
  margin-right: 1rem;
  transition: transform var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content .kg-toggle-card.is-open .kg-toggle-card-icon { transform: rotate(180deg); }
.almanac-post__content .kg-toggle-card .kg-toggle-content {
  padding: 0 1rem 1rem 1rem;
  display: none;
}
.almanac-post__content .kg-toggle-card.is-open .kg-toggle-content { display: block; }

/* Bookmark card */
.almanac-post__content .kg-bookmark-card {
  display: block;
  margin: 1.5rem 0;
}
.almanac-post__content .kg-bookmark-container {
  display: flex;
  align-items: stretch;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: background var(--almanac-duration) var(--almanac-ease), border-color var(--almanac-duration) var(--almanac-ease);
}
.almanac-post__content .kg-bookmark-container:hover {
  background: var(--almanac-bg-cream);
  border-color: var(--almanac-border-strong);
}
.almanac-post__content .kg-bookmark-content {
  flex: 1 1 auto;
  padding: var(--almanac-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--almanac-space-2xs);
  min-width: 0;
}
.almanac-post__content .kg-bookmark-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--almanac-fg-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.almanac-post__content .kg-bookmark-description {
  font-size: 0.875rem;
  color: var(--almanac-fg-tertiary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.almanac-post__content .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  gap: var(--almanac-space-xs);
  font-size: 0.75rem;
  color: var(--almanac-fg-quaternary);
  margin-top: var(--almanac-space-2xs);
}
.almanac-post__content .kg-bookmark-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}
.almanac-post__content .kg-bookmark-thumbnail {
  flex: 0 0 160px;
  position: relative;
}
.almanac-post__content .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .almanac-post__content .kg-bookmark-container { flex-direction: column; }
  .almanac-post__content .kg-bookmark-thumbnail { flex: 0 0 auto; max-height: 180px; }
}

/* Gallery card */
.almanac-post__content .kg-gallery-card {
  margin: 1.5rem 0;
}
.almanac-post__content .kg-gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--almanac-space-xs);
}
.almanac-post__content .kg-gallery-row { display: contents; }
.almanac-post__content .kg-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--almanac-radius-sm);
}

/* Embed cards */
.almanac-post__content .kg-embed-card {
  margin: 1.5rem 0;
}
.almanac-post__content .kg-embed-card iframe {
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: var(--almanac-radius-md);
}
.almanac-post__content .twitter-tweet,
.almanac-post__content .instagram-media {
  margin: 1.5rem auto !important;
}

/* HTML card — raw, just minimal safety */
.almanac-post__content .kg-html-card { margin: 1.5rem 0; }

/* File card */
.almanac-post__content .kg-file-card {
  display: flex;
  gap: var(--almanac-space-md);
  align-items: center;
  padding: var(--almanac-space-md);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  margin: 1.5rem 0;
}
.almanac-post__content .kg-file-card-container { flex: 1 1 auto; }
.almanac-post__content .kg-file-card-title { font-weight: 600; }
.almanac-post__content .kg-file-card-caption,
.almanac-post__content .kg-file-card-metadata { font-size: 0.875rem; color: var(--almanac-fg-tertiary); }
.almanac-post__content .kg-file-card-icon { flex: 0 0 32px; color: var(--almanac-tan-deep); }

/* Audio card */
.almanac-post__content .kg-audio-card {
  padding: var(--almanac-space-md);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  margin: 1.5rem 0;
}
.almanac-post__content .kg-audio-card audio { width: 100%; }

/* Video card — Ghost wraps in kg-video-card */
.almanac-post__content .kg-video-card {
  margin: 1.5rem 0;
  background: black;
  border-radius: var(--almanac-radius-md);
  overflow: hidden;
}
.almanac-post__content .kg-video-card video {
  width: 100%;
  display: block;
  background: black;
}

/* Product card */
.almanac-post__content .kg-product-card {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: var(--almanac-space-md);
  padding: var(--almanac-space-md);
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  margin: 1.5rem 0;
  align-items: center;
}
.almanac-post__content .kg-product-card-image { border-radius: var(--almanac-radius-sm); object-fit: cover; }
.almanac-post__content .kg-product-card-title { font-family: var(--almanac-font-display); font-weight: 700; font-size: 1.125rem; margin: 0 0 0.25rem; }
.almanac-post__content .kg-product-card-rating { color: var(--almanac-yellow-deep); }
.almanac-post__content .kg-product-card-description { font-size: 0.9375rem; color: var(--almanac-fg-secondary); }
@media (max-width: 640px) {
  .almanac-post__content .kg-product-card { grid-template-columns: 1fr; }
}

/* Header card — in-content hero */
.almanac-post__content .kg-header-card {
  position: relative;
  padding: var(--almanac-space-2xl) var(--almanac-space-lg);
  background: var(--almanac-fg-primary);
  color: var(--almanac-fg-inverted);
  border-radius: var(--almanac-radius-lg);
  margin: 1.5rem 0;
  background-size: cover;
  background-position: center;
}
.almanac-post__content .kg-header-card-text {
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.almanac-post__content .kg-header-card h2,
.almanac-post__content .kg-header-card h3 { color: inherit; margin-top: 0; }

/* Codes list — both the legacy `<ul class="codes-list">` shape and the
 * Gutenberg block-style variant. JS in assets/js/codes.js progressively
 * enhances them with copy buttons and status pills.
 */
.almanac-post__content ul.codes-list,
.almanac-post__content .is-style-almanac-codes,
.almanac-codes {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: var(--almanac-space-xs);
}
.almanac-post__content ul.codes-list li,
.almanac-post__content .is-style-almanac-codes li,
.almanac-codes li {
  display: block;
  padding: 11px 13px;
  background: var(--almanac-bg-canvas);
  border: 1px solid var(--almanac-border);
  border-radius: var(--almanac-radius-md);
  margin: 0;
  transition: border-color var(--almanac-duration) var(--almanac-ease);
}
/* Head row: code + status + a compact copy button (right-aligned). */
.almanac-codes-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* Rewards rendered as scannable chips (comma-separated list). */
.almanac-codes-rewards {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
/* High-specificity card rules (.almanac-post__content ul.codes-list li) also
   match these nested chips, so force the lightweight pill treatment. */
.almanac-codes-rewards li {
  margin: 0 !important;
  padding: 3px 11px !important;
  background: var(--almanac-bg-cream) !important;
  border: 0 !important;
  border-radius: 9999px !important;
  font-size: 0.9375rem !important;
  line-height: 1.45 !important;
  color: var(--almanac-fg-secondary) !important;
}
.almanac-codes-rewards li:hover { border-color: transparent !important; }
.almanac-post__content ul.codes-list li:hover,
.almanac-post__content .is-style-almanac-codes li:hover,
.almanac-codes li:hover { border-color: var(--almanac-yellow-deep); }
.almanac-post__content ul.codes-list li::marker { content: ''; }
.almanac-post__content ul.codes-list code,
.almanac-post__content .is-style-almanac-codes code,
.almanac-codes code {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--almanac-yellow-soft);
  border: 1px solid var(--almanac-yellow-deep);
  color: var(--almanac-on-yellow);
  font-family: var(--almanac-font-mono);
  font-weight: 600;
  font-size: 0.9375rem;
  border-radius: var(--almanac-radius-sm);
  letter-spacing: 0.04em;
}

/* Status pill */
.almanac-codes-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--almanac-radius-pill);
  flex: 0 0 auto;
}
.almanac-codes-status--new     { background: var(--almanac-yellow);       color: var(--almanac-on-yellow); }
.almanac-codes-status--working { background: var(--almanac-success-soft); color: var(--almanac-success); }
.almanac-codes-status--expired { background: var(--almanac-bg-cream);     color: var(--almanac-fg-tertiary); text-decoration: line-through; }

/* Expired-codes lists — plain bullet lists whose items are bare code chips
   (not the interactive .codes-list widget). Flow them into two columns on
   wider screens; they stay single-column on phones where long codes need room. */
@media (min-width: 600px) {
  .almanac-post__content ul:not(.codes-list):not(.is-style-almanac-codes):has(> li > code:only-child) {
    columns: 2;
    column-gap: 2.5rem;
  }
  .almanac-post__content ul:not(.codes-list):not(.is-style-almanac-codes):has(> li > code:only-child) > li {
    break-inside: avoid;
  }
}

/* Copy button */
.almanac-codes-copy {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--almanac-space-2xs);
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--almanac-border-strong);
  color: var(--almanac-fg-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: var(--almanac-radius-sm);
  cursor: pointer;
  transition: all var(--almanac-duration) var(--almanac-ease);
}
.almanac-codes-copy:hover {
  background: var(--almanac-yellow);
  border-color: var(--almanac-yellow);
  color: var(--almanac-on-yellow);
}
.almanac-codes-copy.is-copied {
  background: var(--almanac-fg-primary);
  color: var(--almanac-bg-paper);
  border-color: var(--almanac-fg-primary);
}
/* Compact copy button, right-aligned in the head row (not full width). */
.almanac-codes-copy { padding: 6px 14px; }
/* Touch target floor on phones so the copy chip is comfortably tappable. */
@media (max-width: 640px) {
  .almanac-codes-copy { min-height: 40px; }
}

/* Copy-all toolbar */
.almanac-codes-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: var(--almanac-space-md) 0 var(--almanac-space-xs);
}
.almanac-codes-toolbar .almanac-btn { margin: 0; }

/* ===========================================================================
   Image lightbox — PhotoSwipe v5 (assets/js/lightbox.js).
   PhotoSwipe ships its own CSS (lazy-loaded on first open); these rules brand
   the chrome and style the caption element we register in JS.
   =========================================================================== */
.almanac-post__content .almanac-zoomable { cursor: zoom-in; }

/* Drive the viewer chrome off the theme's own surface/text tokens so it adopts
   the site's light AND dark palettes automatically (these tokens flip under
   html[data-almanac-theme="dark"]). The high z-index clears the WP admin bar
   (z-index 99999) so the zoom / close controls are always clickable. */
.pswp {
  z-index: 100000;
  /* !important: photoswipe.css is lazy-injected AFTER this file, so its own
     `.pswp { --pswp-bg:#000 }` would otherwise win on equal specificity. */
  --pswp-bg: var(--almanac-bg-paper) !important;
  --pswp-placeholder-bg: var(--almanac-bg-canvas) !important;
  --pswp-icon-color: var(--almanac-fg-primary) !important;
  --pswp-icon-color-secondary: var(--almanac-bg-paper) !important;
  --pswp-icon-stroke-color: var(--almanac-bg-paper) !important;
  --pswp-icon-stroke-width: 2px !important;
}
.pswp .pswp__counter { color: var(--almanac-fg-primary); opacity: 0.85; }
/* Lift the image off the design-matched backdrop so screenshots stay distinct
   on the light cream surface (and pop on the dark one). */
.pswp .pswp__img { box-shadow: 0 12px 48px rgba(26, 22, 18, 0.22); }
[data-almanac-theme="dark"] .pswp .pswp__img { box-shadow: 0 14px 52px rgba(0, 0, 0, 0.55); }
/* Brand-yellow focus ring for keyboard users on the toolbar buttons. */
.pswp .pswp__button:focus-visible {
  outline: 2px solid var(--almanac-yellow, #ffd700);
  outline-offset: -3px;
}
.pswp__almanac-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  max-width: min(900px, 92vw);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: var(--almanac-fg-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  pointer-events: none;
}
@media (max-width: 640px) {
  .pswp__almanac-caption {
    font-size: 0.82rem;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ===========================================================================
   Bold, standout content tables — a heavy bordered card with an inverted
   header bar and a chunky offset shadow so tables grab the eye on scroll.
   (Every content table is wrapped in .almanac-table-wrap by almanac.js.)
   =========================================================================== */
.almanac-post__content .almanac-table-wrap {
  border: 2px solid var(--almanac-fg-primary);
  border-radius: 14px;
  overflow: auto hidden;
  margin: 2.25rem 0;
  -webkit-overflow-scrolling: touch;
}
.almanac-post__content .almanac-table-wrap > table { margin: 0; border: 0; }
/* table-layout: auto lets the browser hand the widest space to the column with
   the most text. Cells keep whole words intact (only genuinely unbreakable
   strings soft-break); when the table can't fit, the wrapper scrolls
   horizontally instead of crushing every word to one letter per line. */
.almanac-post__content .almanac-table-wrap > table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}
.almanac-post__content .almanac-table-wrap > table td,
.almanac-post__content .almanac-table-wrap > table th { overflow-wrap: break-word; }
/* Keep multi-column data tables readable on phones: give cells a floor so the
   table grows past the viewport (and scrolls) rather than squeezing columns to
   unreadable single-letter slivers. The text-heavy last column gets more. */
.almanac-post__content .almanac-table-wrap > table :is(th, td) { min-width: 5.5rem; }
.almanac-post__content .almanac-table-wrap > table :is(th, td):last-child { min-width: 11rem; }
/* Personality: a hand-drawn brand-yellow squiggle pinned under the dark header
   bar — keeps the warm accent that the (removed) floating shadow carried, now
   attached to the table instead of hovering behind it. Drawn per header cell;
   preserveAspectRatio:none stretches it edge-to-edge. (Cell styling — dark
   header bar, zebra, hover — lives in almanac-overrides.css §Tables.) */
.almanac-post__content .almanac-table-wrap > table thead th {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 7' preserveAspectRatio='none' fill='none' stroke='%23FFD700' stroke-width='2.6' stroke-linecap='butt'%3E%3Cpath d='M0 4C40 1 70 6 120 3 170 1 200 6 240 4'/%3E%3C/svg%3E"),
    linear-gradient(var(--almanac-fg-primary), var(--almanac-fg-primary)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left bottom, center !important;
  background-size: 100% 5px, 100% 100% !important;
}
@media (max-width: 640px) {
  .almanac-post__content .almanac-table-wrap { margin: 1.75rem 0; }
}

/* ===========================================================================
   Codes card — hand-drawn cohesion. A sketched pointer links each code to its
   rewards, and the code pill / copy / chips share one warm, drawn-by-hand
   language so the card reads as a single system, not stitched parts.
   =========================================================================== */
/* Hand-drawn pointer: code -> rewards (curves down from the code into the chips). */
.almanac-codes-rewards { position: relative; }
.almanac-codes-rewards::before {
  content: "";
  position: absolute;
  left: 0; top: -17px;
  width: 24px; height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 52' fill='none' stroke='%23b2935b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 2C7 16 7 30 15 37C19 40 25 41 32 41'/%3E%3Cpath d='M25 34L33 41L26 47'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}

/* One warm family: code pill, copy button and card share the same drawn outline
   weight, radius and ink, instead of mixing a techy chip with a system button. */
.almanac-post__content ul.codes-list li,
.almanac-post__content .is-style-almanac-codes li,
.almanac-codes li {
  background: var(--almanac-bg-paper);
  border: 1.5px solid var(--almanac-fg-primary);
  border-radius: 14px;
}
.almanac-post__content ul.codes-list li:hover,
.almanac-post__content .is-style-almanac-codes li:hover,
.almanac-codes li:hover { border-color: var(--almanac-yellow-deep); }
.almanac-post__content ul.codes-list code,
.almanac-post__content .is-style-almanac-codes code,
.almanac-codes code {
  background: var(--almanac-yellow);
  border: 1.5px solid var(--almanac-fg-primary);
  border-radius: 9px;
}
.almanac-codes-copy {
  border: 1.5px solid var(--almanac-fg-primary);
  color: var(--almanac-fg-primary);
  border-radius: 9px;
}

/* ===========================================================================
   HAND-DRAWN CONTENT SYSTEM  ·  static inline-SVG accents only (no webfont, no
   SVG filters) → CWV-safe: zero extra requests, no layout shift, cheap paint.
   Applied to meaning-carrying elements; body paragraphs stay clean.
   =========================================================================== */

/* Section headings stay clean — the hand-drawn energy lives in smaller, quieter
   accents (step boxes, list markers, links) rather than a loud heading underline. */

/* Unordered lists — hand-drawn blobs instead of bullets. */
.almanac-post__content ul { list-style: none; padding-left: 0; }
.almanac-post__content ul > li { position: relative; padding-left: 1.6em; }
.almanac-post__content ul > li::before {
  content: "";
  position: absolute; left: 0.1em; top: 0.46em;
  width: 0.72em; height: 0.72em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.6C9.8 1.4 12.5 3.7 12.2 6.6 11.9 9.5 9 12.1 6.1 11.5 3.5 11 1.5 8.4 1.9 5.6 2.2 3.3 4.3 1.8 7 1.6Z' fill='%23ffd34d' stroke='%23b2935b' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Ordered lists — hand-drawn ring around each number. */
.almanac-post__content ol { list-style: none; counter-reset: alm; padding-left: 0; }
.almanac-post__content ol > li {
  position: relative; counter-increment: alm;
  padding-left: 2.7em; min-height: 1.9em; margin-top: var(--almanac-space-sm);
}
.almanac-post__content ol > li::before {
  content: counter(alm);
  position: absolute; left: 0; top: -0.05em;
  width: 1.95em; height: 1.95em;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--almanac-font-display); font-weight: 700; font-size: 0.82em;
  color: var(--almanac-fg-primary);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none' stroke='%231a1612' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M24 4C34 3 41 13 40 23 39 33 28 41 18 39 9 37 3 27 6 17 8 9 16 5 25 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Don't apply prose list styling inside the codes UI. */
.almanac-post__content ul.codes-list,
.almanac-post__content .is-style-almanac-codes,
.almanac-post__content .almanac-codes ul { padding-left: 0 !important; }
/* Rewards keep a left gutter so the code→rewards connector arrow has room. */
.almanac-post__content .almanac-codes-rewards { padding-left: 26px; }
.almanac-post__content ul.codes-list > li,
.almanac-post__content .is-style-almanac-codes > li,
.almanac-post__content .almanac-codes li,
.almanac-post__content .almanac-codes-rewards li { padding-left: 13px; }
.almanac-post__content ul.codes-list > li::before,
.almanac-post__content .is-style-almanac-codes > li::before,
.almanac-post__content .almanac-codes li::before,
.almanac-post__content .almanac-codes-rewards li::before { content: none !important; }

/* Blockquote — hand-drawn marker stroke down the left. */
.almanac-post__content blockquote {
  border-left: 0;
  padding-left: 1.15rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 200' preserveAspectRatio='none' fill='none' stroke='%23d99e2b' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 2C2 40 8 70 5 110 2 150 8 180 5 198'/%3E%3C/svg%3E") no-repeat left top / 7px 100%;
}

/* Horizontal rule — hand-drawn wavy divider. */
.almanac-post__content hr {
  border: 0; height: 10px; background: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 10' preserveAspectRatio='none' fill='none' stroke='%23b2935b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M2 5C40 1 70 9 120 5 170 1 200 9 238 5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 100% 10px;
  margin-block: 1.75rem;
}

/* Callouts - clean solid border in the callout's accent colour (set per type in
   the colour-variant block above), with consistent 14px corners. */
.almanac-post__content .kg-callout-card {
  border-width: 2px;
  border-style: solid;
  border-radius: 14px;
}

/* Step boxes — a clean card consistent with the other content boxes (smooth
   14px border from the radius block below, per the "smooth like the rest" choice). */
.almanac-step {
  border: 1px solid var(--almanac-border);
  background: var(--almanac-bg-paper);
}
.almanac-step__num { position: relative; }
.almanac-step__num::after {
  content: "";
  position: absolute; inset: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48' fill='none' stroke='%231a1612' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M26 4C36 3 44 13 43 24 42 35 31 45 20 43 10 41 4 30 7 19 9 11 17 5 27 4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Inline code / kbd — a quiet hand-drawn outline instead of the flat 1px box,
   so terms like regedit or HKLM read as lightly marked-up notes everywhere. */
.almanac-post__content :not(pre) > code,
.almanac-post__content :not(pre) > kbd {
  border: 1.5px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23b2935b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4C40 2 54 6 76 4 85 4 86 6 86 15 88 39 84 54 86 75 86 85 84 86 75 86 51 88 36 84 14 86 5 86 4 84 4 75 2 51 6 36 4 14 4 6 6 4 16 4Z'/%3E%3C/svg%3E") 20 / 1.5px round;
  border-radius: 4px;
}

/* ===========================================================================
   "Quick answer" block — the branded TL;DR. A warm panel with a hand-drawn
   lightning mark and a marker-underlined label, so the single most useful
   sentence on the page carries real personality. (Server-wrapped in
   functions.php; CWV-safe — static inline SVGs, no JS, no extra requests.)
   =========================================================================== */
.almanac-post__content .almanac-quick-answer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 1.75rem 0;
  padding: 18px 20px;
  background: var(--almanac-yellow-soft);
  border: 3px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90' fill='none' stroke='%23E5BC00' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4C40 2 54 6 76 4 85 4 86 6 86 15 88 39 84 54 86 75 86 85 84 86 75 86 51 88 36 84 14 86 5 86 4 84 4 75 2 51 6 36 4 14 4 6 6 4 16 4Z'/%3E%3C/svg%3E") 18 / 3.2px round;
  border-radius: 7px;
}
/* Hand-drawn lightning bolt — "quick". */
.almanac-post__content .almanac-quick-answer::before {
  content: "";
  width: 30px; height: 30px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23FFD700' stroke='%231a1612' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M14 2.2 4.6 13.4C4 14.1 4.5 15 5.4 14.9L10.3 14.4 9.2 21.4C9 22.5 10.2 23 10.9 22.1L19.4 11.2C20 10.4 19.5 9.5 18.6 9.6L13.8 10.1 14.9 3.3C15.1 2.2 14.7 1.4 14 2.2Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.almanac-post__content .almanac-quick-answer__body { min-width: 0; }
.almanac-post__content .almanac-quick-answer__label {
  display: inline-block;
  font-family: var(--almanac-font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--almanac-fg-primary);
  margin-bottom: 4px;
  padding-bottom: 3px;
  /* marker underline, sized to the label */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none' fill='none' stroke='%23E5BC00' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M2 6C30 2 50 8 70 4 90 1 105 6 118 5'/%3E%3C/svg%3E") no-repeat left bottom / 100% 6px;
}
.almanac-post__content .almanac-quick-answer__text {
  margin: 0;
  line-height: 1.6;
  color: var(--almanac-fg-primary);
}
[data-almanac-theme="dark"] .almanac-post__content .almanac-quick-answer__label {
  color: var(--almanac-fg-primary);
}

/* ===========================================================================
   CORNER RADIUS — two tiers. Large content boxes get a generous 14px so they
   read as clearly rounded next to the tables/cards; small inline chips, list
   codes and buttons stay tight at 8px. Border STYLES are untouched here (only
   the radius). Pills and circles are shapes, not boxes, so they're excluded.
   =========================================================================== */
/* Large content boxes -> 14px */
.almanac-post__content .kg-callout-card,
.almanac-post__content .almanac-table-wrap,
.almanac-step,
.almanac-post__content .almanac-quick-answer,
.almanac-post__content .almanac-prefsrc-inline,
.almanac-post__content .kg-toggle-card,
.almanac-post__content .kg-bookmark-container {
  border-radius: 14px !important;
}
/* Small chips / list codes / inline code / buttons -> 8px */
.almanac-post__content ul.codes-list li,
.almanac-post__content .is-style-almanac-codes li,
.almanac-post__content .almanac-codes li,
.almanac-codes li,
.almanac-post__content ul.codes-list code,
.almanac-post__content .is-style-almanac-codes code,
.almanac-post__content .almanac-codes code,
.almanac-codes code,
.almanac-codes-copy,
.almanac-post__content .kg-btn,
.almanac-post__content :not(pre) > code,
.almanac-post__content :not(pre) > kbd {
  border-radius: var(--almanac-radius-md) !important; /* 8px — chips stay tight */
}
.almanac-post__content .wp-block-code,
.almanac-post__content pre {
  border-radius: 14px !important; /* match the rounded content boxes (tables, steps, callouts) */
}


/* ===========================================================================
   QUICK ANSWER — borrows the table's visual language (without being a table):
   a cream body card with a 2px ink frame and a full-bleed dark "ink" header bar
   carrying the uppercase "Quick answer" label, finished with a HAND-DRAWN wavy
   yellow underline beneath the header (the brand's hand-drawn vocabulary). Same
   token set as the content tables, so it adapts in light + dark mode the same
   way. Applies to the standalone <p> form AND any wrapping Ghost callout card.
   =========================================================================== */
.almanac-post__content p.almanac-quick-answer,
.almanac-post__content .kg-callout-card:has(.almanac-quick-answer) {
  display: block !important;
  margin: 1.75rem 0 !important;
  /* No top padding — the header bar is full-bleed to the top edge. */
  padding: 0 var(--almanac-space-lg) var(--almanac-space-lg) !important;
  background: var(--almanac-bg-paper) !important;
  border: 2px solid var(--almanac-fg-primary) !important;
  border-image: none !important;
  border-radius: var(--almanac-radius-lg) !important;
  box-shadow: var(--almanac-shadow-card) !important;
  color: var(--almanac-fg-primary) !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  overflow: hidden !important; /* clip the header bar to the rounded corners */
}
.almanac-post__content p.almanac-quick-answer::before { content: none !important; display: none !important; }

/* Ghost callout form: the card is the body; drop its emoji + inner-box styling
   so the .kg-callout-text becomes the padded body and its leading label bar. */
.almanac-post__content .kg-callout-card:has(.almanac-quick-answer) .kg-callout-emoji { display: none !important; }
.almanac-post__content .kg-callout-card:has(.almanac-quick-answer) p.almanac-quick-answer {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important; overflow: visible !important;
}
.almanac-post__content .kg-callout-card:has(.almanac-quick-answer) .kg-callout-text {
  display: block !important;
  background: none !important;
  border: 0 !important;
  border-image: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--almanac-fg-primary) !important;
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
}
.almanac-post__content .kg-callout-card:has(.almanac-quick-answer) .kg-callout-text::before {
  content: none !important; display: none !important;
}

/* Header bar — full-bleed dark strip with the uppercase label (table-th idiom),
   finished with the SAME hand-drawn brand-yellow line the content tables pin
   under their dark header bar (assets/css/ghost-cards.css §Tables — the
   240×7 stretched-wave SVG over a fg-primary fill, no-repeat, left bottom). */
.almanac-post__content .almanac-quick-answer__label {
  display: block !important;
  margin: 0 calc(-1 * var(--almanac-space-lg)) var(--almanac-space-md) !important;
  padding: 11px var(--almanac-space-lg) 13px !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 7' preserveAspectRatio='none' fill='none' stroke='%23FFD700' stroke-width='2.6' stroke-linecap='butt'%3E%3Cpath d='M0 4C40 1 70 6 120 3 170 1 200 6 240 4'/%3E%3C/svg%3E"),
    linear-gradient(var(--almanac-fg-primary), var(--almanac-fg-primary)) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: left bottom, center !important;
  background-size: 100% 5px, 100% 100% !important;
  color: var(--almanac-bg-paper) !important;
  font-family: var(--almanac-font-sans) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}