/*
Theme Name: Twenty Twenty-Five Pixel
Theme URI: https://blog.creativebymelissa.com
Template: twentytwentyfive
Author: Creative by Melissa
Author URI: https://blog.creativebymelissa.com
Description: A cute pixel-style child theme of Twenty Twenty-Five — sky + eggplant palette with light gray cards, slate navy outlines, deep eggplant accents, mixed pixel typography (Pixelify Sans wordmark + nav, Jersey 15 headings, Silkscreen labels, DM Sans body), rounded corners, hard offset shadows, and custom pixel-art icons (moon, cat, sparkle, calendar, heart, page, arrow, comment).
Version: 0.38.8
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive-pixel
Tags: blog, child-theme, full-site-editing, two-columns, custom-colors, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ---------- PIXEL PLUS-SIGN BACKGROUND PATTERN ---------- */

body {
  background-color: #CDD8E0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%23DCE3E9'><rect x='9' y='6' width='3' height='3'/><rect x='6' y='9' width='3' height='3'/><rect x='9' y='9' width='3' height='3'/><rect x='12' y='9' width='3' height='3'/><rect x='9' y='12' width='3' height='3'/></g></svg>");
  background-attachment: fixed;
}

/* ---------- PIXEL TYPOGRAPHY ---------- */

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-post-title a,
.wp-block-query-title,
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3 {
  font-family: 'Jersey 15', monospace !important;
  letter-spacing: 0.01em;
  font-weight: 400;
}

/* Explicit heading sizes. Jersey 15 has compact letterforms (visible
   glyph height is much smaller than DM Sans body at the same px), so
   without these the default theme sizes leave h3 reading as smaller
   than paragraph text. Sizes are bumped above a typical scale to
   compensate for the pixel font's reduced cap height, and use clamp()
   for fluid responsiveness from mobile to desktop. */
h1 { font-size: clamp(2.75rem, 6vw, 4rem); line-height: 1.1; }
h2 { font-size: clamp(2.25rem, 4.5vw, 3rem); line-height: 1.1; }
h3 { font-size: clamp(1.85rem, 3.5vw, 2.5rem); line-height: 1.2; }
h4 { font-size: clamp(1.55rem, 2.75vw, 2.1rem); line-height: 1.2; }
h5 { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.3; }
h6 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); line-height: 1.3; }

/* Site title wrapper (h1/h2/etc rendered by the wp:site-title block) —
   sets the typographic context. Both the header and footer site title
   share this same block, so all rules here apply in both places. */
.wp-block-site-title {
  font-family: 'Pixelify Sans', monospace !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

body,
p,
li,
.wp-block-post-content,
.wp-block-post-excerpt {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ---------- FRONT PAGE ---------- */

body.home .wp-block-post-title,
body.page-id-16 .wp-block-post-title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.home .wp-site-blocks > main.wp-block-group,
body.page-id-16 .wp-site-blocks > main.wp-block-group {
  margin-top: 0 !important;
}

body.home .wp-site-blocks > main.wp-block-group > .wp-block-group:first-child,
body.page-id-16 .wp-site-blocks > main.wp-block-group > .wp-block-group:first-child {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

body.home .wp-block-html:has(svg.pixel-logo),
body.page-id-16 .wp-block-html:has(svg.pixel-logo) {
  background: #EFF1F4;
  border: 3px solid #3A4A5C;
  border-radius: 12px;
  box-shadow: 6px 6px 0 0 #EFF1F4;
  padding: clamp(1.5rem, 4vw, 3rem);
  margin: 1rem auto 2rem !important;
  max-width: min(720px, calc(100% - 2rem));
  box-sizing: border-box;
}

body.home .wp-block-html svg.pixel-logo,
body.page-id-16 .wp-block-html svg.pixel-logo {
  display: block;
  margin: 0 auto;
}

/* ---------- HEADER & FOOTER PADDING ---------- */

header.wp-block-template-part,
footer.wp-block-template-part {
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

/* Sticky site title header — pins to the top of the viewport while the
   rest of the page scrolls. Same plus-sign pattern as the body, both
   with background-attachment: fixed so they're anchored to the
   viewport and align perfectly: the header's pattern picks up exactly
   where the body's leaves off, no visible seam. No separator at all
   (we tried a cream offset shadow and a dashed eggplant border; both
   read as too much visual weight for the floating header). The
   .is-scrolled class is still toggled by the JS in functions.php
   (kept for potential future use) but renders as a no-op visually. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #CDD8E0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%23DCE3E9'><rect x='9' y='6' width='3' height='3'/><rect x='6' y='9' width='3' height='3'/><rect x='9' y='9' width='3' height='3'/><rect x='12' y='9' width='3' height='3'/></g></svg>");
  background-attachment: fixed;
}

/* ---------- ROUNDED CORNERS ---------- */

.wp-block-button__link,
.wp-block-image img,
.wp-block-cover,
.wp-block-pullquote,
.wp-block-quote,
.wp-block-search__input,
.wp-block-search__button,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
.wp-block-latest-posts__list > li {
  border-radius: 12px !important;
}

/* ---------- PIXEL BUTTONS ---------- */

.wp-block-button__link,
.wp-block-search__button,
button:not(.components-button):not([class*="editor-"]):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close),
input[type="submit"] {
  font-family: 'Silkscreen', 'Jersey 15', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B4A7A !important;
  background-color: #EFF1F4 !important;
  border: 3px solid #3A4A5C !important;
  border-radius: 12px;
  box-shadow: 5px 5px 0 0 #EFF1F4;
  padding: 0.7em 1.4em;
  transition: transform 0.06s ease, box-shadow 0.06s ease, color 0.1s ease;
}

.wp-block-button__link:hover,
.wp-block-search__button:hover,
input[type="submit"]:hover,
button:not(.components-button):not([class*="editor-"]):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close):hover {
  color: #3A4A5C !important;
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 0 #EFF1F4;
}

.wp-block-button__link:active,
.wp-block-search__button:active,
input[type="submit"]:active {
  transform: translate(5px, 5px);
  box-shadow: 0 0 0 0 #EFF1F4;
}

/* ---------- PIXEL SEPARATORS ---------- */

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: none !important;
  height: 6px !important;
  width: 200px;
  margin: 2.5em auto;
  background-image: linear-gradient(
    to right,
    var(--wp--preset--color--charcoal, #1F1F1F) 50%,
    transparent 50%
  );
  background-size: 12px 6px;
  background-repeat: repeat-x;
  opacity: 1;
}

.wp-block-separator.is-style-dots {
  font-size: 1.5em;
}
.wp-block-separator.is-style-dots::before {
  font-family: 'Silkscreen', monospace;
  letter-spacing: 0.5em;
  color: #6B4A7A;
  content: '■  ■  ■';
}

hr:not(.wp-block-separator) {
  border: none;
  height: 6px;
  background-image: linear-gradient(
    to right,
    var(--wp--preset--color--charcoal, #1F1F1F) 50%,
    transparent 50%
  );
  background-size: 12px 6px;
  background-repeat: repeat-x;
  margin: 2em 0;
}

/* ---------- IMAGES & CARDS ---------- */

.wp-block-image img {
  border: 3px solid #3A4A5C;
  border-radius: 12px;
  box-shadow: 6px 6px 0 0 #EFF1F4;
}

.wp-block-cover {
  border: 3px solid #3A4A5C;
  border-radius: 12px;
}

/* ---------- POST, PAGE, ARCHIVE & SEARCH CARDS ---------- */

body.single .wp-site-blocks > main.wp-block-group,
body.page:not(.home) .wp-site-blocks > main.wp-block-group,
body.archive .wp-site-blocks > main.wp-block-group,
body.search .wp-site-blocks > main.wp-block-group,
body.blog .wp-site-blocks > main.wp-block-group {
  background: #EFF1F4;
  border: 3px solid #3A4A5C;
  border-radius: 12px;
  box-shadow: 6px 6px 0 0 #EFF1F4;
  padding: clamp(1rem, 2.5vw, 1.5rem) !important;
  margin: 2rem auto !important;
  max-width: min(960px, calc(100% - 2rem));
  box-sizing: border-box;
}

body.single .wp-site-blocks > main.wp-block-group .alignfull,
body.page:not(.home) .wp-site-blocks > main.wp-block-group .alignfull,
body.archive .wp-site-blocks > main.wp-block-group .alignfull,
body.search .wp-site-blocks > main.wp-block-group .alignfull,
body.blog .wp-site-blocks > main.wp-block-group .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: auto !important;
}

body.single .wp-site-blocks > main.wp-block-group > .has-global-padding,
body.page:not(.home) .wp-site-blocks > main.wp-block-group > .has-global-padding,
body.archive .wp-site-blocks > main.wp-block-group > .has-global-padding,
body.search .wp-site-blocks > main.wp-block-group > .has-global-padding,
body.blog .wp-site-blocks > main.wp-block-group > .has-global-padding,
body.single .wp-site-blocks > main.wp-block-group > .wp-block-post-content,
body.page:not(.home) .wp-site-blocks > main.wp-block-group > .wp-block-post-content,
body.archive .wp-site-blocks > main.wp-block-group > .wp-block-post-content,
body.search .wp-site-blocks > main.wp-block-group > .wp-block-post-content,
body.blog .wp-site-blocks > main.wp-block-group > .wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- LATEST POSTS LIST ---------- */

.wp-block-latest-posts__list {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0;
}
.wp-block-latest-posts__list > li {
  padding: 1em 1.25em;
  margin-bottom: 1.25em !important;
  background: #EFF1F4;
  border: 3px solid #3A4A5C;
  border-radius: 12px;
  box-shadow: 5px 5px 0 0 #EFF1F4;
  position: relative;
}
.wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title {
  display: block;
  font-family: 'Jersey 15', monospace !important;
  font-size: 1.4em;
  font-weight: 400;
  text-decoration: none;
  color: #6B4A7A;
  transition: color 0.1s ease;
}
.wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title:hover,
.wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title:focus {
  color: #3A4A5C;
}
.wp-block-latest-posts__list > li > a.wp-block-latest-posts__post-title::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.5em;
  background-color: #6B4A7A;
  -webkit-mask: url('assets/icons/page.svg') center/contain no-repeat;
          mask: url('assets/icons/page.svg') center/contain no-repeat;
  vertical-align: -0.1em;
}
.wp-block-latest-posts__post-date {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.7em;
  color: #3A4A5C;
  margin-top: 0.4em;
  margin-right: 1.25em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.wp-block-latest-posts__post-date::before {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  background-color: currentColor;
  -webkit-mask: url('assets/icons/calendar.svg') center/contain no-repeat;
          mask: url('assets/icons/calendar.svg') center/contain no-repeat;
  vertical-align: -0.2em;
}
.pixel-comment-count {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.7em;
  color: #3A4A5C;
  margin-top: 0.4em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: color 0.1s ease;
}
.pixel-comment-count:hover,
.pixel-comment-count:focus {
  color: #6B4A7A;
}
.pixel-comment-count::before {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  background-color: currentColor;
  -webkit-mask: url('assets/icons/comment.svg') center/contain no-repeat;
          mask: url('assets/icons/comment.svg') center/contain no-repeat;
  vertical-align: -0.2em;
}
.wp-block-latest-posts__post-excerpt {
  font-size: 0.95em;
  margin-top: 0.5em;
  color: var(--wp--preset--color--charcoal, #1F1F1F);
}

/* ---------- CATEGORIES BLOCK (pill buttons) ---------- */

.wp-block-categories {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

ul.wp-block-categories,
ul.wp-block-categories-list {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.75em;
  margin: 0;
}

ul.wp-block-categories > li,
ul.wp-block-categories-list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.wp-block-categories li a,
ul.wp-block-categories-list li a {
  display: inline-block;
  font-family: 'Silkscreen', monospace;
  font-weight: 700;
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--wp--preset--color--charcoal, #1F1F1F);
  background: #EFF1F4;
  border: 3px solid #3A4A5C;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 #EFF1F4;
  padding: 0.5em 1em;
  transition: transform 0.06s ease, box-shadow 0.06s ease, color 0.1s ease;
}

ul.wp-block-categories li a:hover,
ul.wp-block-categories-list li a:hover,
ul.wp-block-categories li a:focus,
ul.wp-block-categories-list li a:focus {
  color: #6B4A7A;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #EFF1F4;
}

/* ---------- STICKY CATEGORIES SIDEBAR (desktop) ---------- */

.pixel-sidebar {
  display: none;
}

@media (min-width: 1100px) {
  .pixel-sidebar {
    display: block;
    position: fixed;
    top: 7.5rem;
    left: clamp(1.5rem, 2vw, 2.5rem);
    width: 220px;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    z-index: 5;
    background: #EFF1F4;
    border: 3px solid #3A4A5C;
    border-radius: 12px;
    box-shadow: 5px 5px 0 0 #EFF1F4;
    padding: 1.1em 1em 1em;
    margin: 0;
  }

  .pixel-sidebar__heading {
    font-family: 'Silkscreen', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: #6B4A7A;
  }

  .pixel-sidebar__heading--calendar {
    margin-top: 1.25em;
    padding-top: 1em;
    border-top: 2px dashed #CDD8E0;
  }

  .pixel-sidebar__list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .pixel-sidebar__item {
    margin: 0;
    padding: 0;
    border-bottom: 2px dashed #CDD8E0;
  }

  .pixel-sidebar__item:last-child {
    border-bottom: none;
  }

  .pixel-sidebar__item a {
    display: block;
    font-family: 'Jersey 15', monospace;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--wp--preset--color--charcoal, #1F1F1F);
    text-decoration: none;
    padding: 0.45em 0;
    position: relative;
    transition: color 0.1s ease, padding-left 0.1s ease;
  }

  .pixel-sidebar__item a::before {
    content: '▸';
    position: absolute;
    left: 0;
    opacity: 0;
    color: #6B4A7A;
    transition: opacity 0.1s ease;
  }

  .pixel-sidebar__item a:hover,
  .pixel-sidebar__item a:focus {
    color: #6B4A7A;
    padding-left: 1.2em;
  }

  .pixel-sidebar__item a:hover::before,
  .pixel-sidebar__item a:focus::before {
    opacity: 1;
  }

  .pixel-sidebar__item.is-current a {
    color: #6B4A7A;
    padding-left: 1.2em;
    font-weight: 400;
  }

  .pixel-sidebar__item.is-current a::before {
    opacity: 1;
  }

  /* ----- Activity Calendar ----- */

  .pixel-sidebar__calendar-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4em;
    font-family: 'Silkscreen', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: #3A4A5C;
    margin-bottom: 0.7em;
    text-transform: uppercase;
  }

  .pixel-sidebar__calendar-month-label {
    flex: 1;
    text-align: center;
  }

  .pixel-sidebar__calendar-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    font-family: 'Pixelify Sans', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    color: #6B4A7A;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.1s ease, color 0.1s ease;
    flex-shrink: 0;
  }

  .pixel-sidebar__calendar-nav:hover,
  .pixel-sidebar__calendar-nav:focus {
    background: #6B4A7A;
    color: #FFFFFF;
  }

  .pixel-sidebar__calendar-nav--disabled,
  .pixel-sidebar__calendar-nav--disabled:hover,
  .pixel-sidebar__calendar-nav--disabled:focus {
    color: #CDD8E0;
    background: transparent;
    cursor: default;
  }

  .pixel-sidebar__calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
  }

  .pixel-sidebar__calendar-weekday {
    font-family: 'Silkscreen', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
    color: #6B4A7A;
    padding: 0.3em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .pixel-sidebar__calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    font-family: 'Pixelify Sans', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    color: #3A4A5C;
    text-decoration: none;
    position: relative;
    border-radius: 3px;
  }

  .pixel-sidebar__calendar-day-num {
    line-height: 1;
  }

  .pixel-sidebar__calendar-day--pad {
    color: transparent;
  }

  .pixel-sidebar__calendar-day--has-posts {
    background: #6B4A7A;
    color: #FFFFFF;
    font-weight: 600;
    transition: background 0.1s ease, transform 0.06s ease;
  }

  .pixel-sidebar__calendar-day--has-posts:hover,
  .pixel-sidebar__calendar-day--has-posts:focus {
    background: #3A4A5C;
    color: #FFFFFF;
  }

  .pixel-sidebar__calendar-day--today {
    outline: 2px solid #6B4A7A;
    outline-offset: -2px;
  }

  .pixel-sidebar__calendar-day--today.pixel-sidebar__calendar-day--has-posts {
    outline-color: #E0BB72;
  }

  .pixel-sidebar__calendar-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #E0BB72;
    color: #1F1F1F;
    font-family: 'Silkscreen', monospace;
    font-size: 0.5rem;
    font-weight: 700;
    min-width: 1em;
    height: 1em;
    padding: 0 0.2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #3A4A5C;
    line-height: 1;
  }
}

@media (min-width: 1500px) {
  .pixel-sidebar {
    left: 3rem;
    width: 240px;
  }
}

/* ---------- HIDE HEADER NAVIGATION ON DESKTOP ---------- */

@media (min-width: 1100px) {
  header.wp-block-template-part .wp-block-navigation {
    display: none !important;
  }
}

/* ---------- LINKS ---------- */

a {
  color: #6B4A7A;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.1s ease;
}

a:hover,
a:focus {
  color: #3A4A5C;
}

/* Header tablet inline nav (below 1100px) — Pixelify Sans, mixed case
   for cleaner readability. Fits with the site title wordmark which
   also uses Pixelify Sans. */
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content {
  color: #6B4A7A;
  font-family: 'Pixelify Sans', monospace;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.wp-block-navigation:not(.is-menu-open) .wp-block-navigation-item__content:focus {
  color: #3A4A5C;
}
.wp-block-navigation:not(.is-menu-open) .current-menu-item .wp-block-navigation-item__content {
  color: #6B4A7A;
}

/* ---------- BLOCKQUOTES ---------- */

.wp-block-quote,
.wp-block-pullquote {
  border-left: 4px solid #6B4A7A !important;
  padding-left: 1.25em;
  font-style: normal;
  background: transparent;
}

/* ---------- CODE ---------- */

code, pre, kbd, samp {
  font-family: 'Silkscreen', 'Courier New', monospace !important;
  background: #DEE4EA;
  padding: 0.1em 0.35em;
  border: 2px solid #3A4A5C;
  border-radius: 8px;
}

pre {
  padding: 1em;
  border-radius: 12px;
  box-shadow: 4px 4px 0 0 #EFF1F4;
  overflow-x: auto;
}
pre code {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

/* ---------- SITE TITLE WORDMARK ---------- */

/* Visual swap: keep "Creative by Melissa" as the link's accessible
   text (good for screen readers and SEO) but display "cbm blog" with
   the moon icon as the visible wordmark. The link text gets
   font-size: 0 so the actual text node collapses, while ::before
   (moon) and ::after (cbm blog) restore their own font-size to render
   at full size. Lowercase reads cleaner — Pixelify Sans's capital C
   can otherwise look like a capital O at this size. Applies to both
   header and footer site-title blocks; the browser tab title and the
   "© 2026 Creative by Melissa" copyright line are untouched. */
.wp-block-site-title a {
  color: var(--wp--preset--color--charcoal, #1F1F1F);
  text-decoration: none;
  font-size: 0 !important;
  letter-spacing: 0;
  line-height: 1.3;
}

.wp-block-site-title a::before {
  content: '';
  display: inline-block;
  font-size: 1.5rem;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  background-color: #6B4A7A;
  -webkit-mask: url('assets/icons/moon.svg') center/contain no-repeat;
          mask: url('assets/icons/moon.svg') center/contain no-repeat;
  vertical-align: -0.05em;
}

.wp-block-site-title a::after {
  content: 'cbm blog';
  font-family: 'Pixelify Sans', monospace;
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--charcoal, #1F1F1F);
}

/* ---------- PIXEL ICONS (utility classes) ---------- */

.pixel-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  vertical-align: -0.15em;
}
.pixel-icon--moon     { -webkit-mask-image: url('assets/icons/moon.svg');        mask-image: url('assets/icons/moon.svg'); }
.pixel-icon--cat      { -webkit-mask-image: url('assets/icons/cat.svg');         mask-image: url('assets/icons/cat.svg'); }
.pixel-icon--sparkle  { -webkit-mask-image: url('assets/icons/sparkle.svg');     mask-image: url('assets/icons/sparkle.svg'); }
.pixel-icon--calendar { -webkit-mask-image: url('assets/icons/calendar.svg');    mask-image: url('assets/icons/calendar.svg'); }
.pixel-icon--heart    { -webkit-mask-image: url('assets/icons/heart.svg');       mask-image: url('assets/icons/heart.svg'); }
.pixel-icon--page     { -webkit-mask-image: url('assets/icons/page.svg');        mask-image: url('assets/icons/page.svg'); }
.pixel-icon--arrow    { -webkit-mask-image: url('assets/icons/arrow-right.svg'); mask-image: url('assets/icons/arrow-right.svg'); }
.pixel-icon--comment  { -webkit-mask-image: url('assets/icons/comment.svg');     mask-image: url('assets/icons/comment.svg'); }

.wp-block-read-more::after,
.wp-block-latest-posts__post-excerpt + a::after {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 0.35em;
  background-color: currentColor;
  -webkit-mask: url('assets/icons/arrow-right.svg') center/contain no-repeat;
          mask: url('assets/icons/arrow-right.svg') center/contain no-repeat;
  vertical-align: -0.15em;
}

.wp-block-post-date,
.wp-block-post-date a,
time.wp-block-post-date {
  font-family: 'Silkscreen', monospace !important;
  font-size: 0.85em;
  color: #3A4A5C;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.wp-block-post-date::before,
time.wp-block-post-date::before {
  content: '';
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.4em;
  background-color: currentColor;
  -webkit-mask: url('assets/icons/calendar.svg') center/contain no-repeat;
          mask: url('assets/icons/calendar.svg') center/contain no-repeat;
  vertical-align: -0.2em;
}

/* ---------- COMMENT AVATAR (themed pixel circle) ---------- */

/* Replaces the default Gravatar/initial avatars with a consistent
   pixel-styled circle. The get_avatar filter in functions.php emits
   a <span class="pixel-avatar"> with CSS variables --pa-size, --pa-bg,
   and --pa-fg already set per author, so layout/color "just works"
   wherever WordPress renders an avatar (comment list, recent comments
   widget, author bios). Letter is set in Jersey 15 (same as post
   titles) for clean, legible letterforms. */
.pixel-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pa-size, 48px);
  height: var(--pa-size, 48px);
  background: var(--pa-bg, #6B4A7A);
  color: var(--pa-fg, #FFFFFF);
  border: 2px solid #3A4A5C;
  border-radius: 50%;
  font-family: 'Jersey 15', monospace;
  font-weight: 400;
  font-size: calc(var(--pa-size, 48px) * 0.65);
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  flex-shrink: 0;
  text-transform: uppercase;
  user-select: none;
  box-sizing: border-box;
}

/* ---------- BURGER MENU / MOBILE NAV ---------- */

.wp-block-navigation__responsive-container-open {
  background: #EFF1F4 !important;
  border: 3px solid #3A4A5C !important;
  border-radius: 12px !important;
  padding: 0.45em 0.55em !important;
  box-shadow: 4px 4px 0 0 #EFF1F4;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #EFF1F4;
}
.wp-block-navigation__responsive-container-open svg {
  fill: var(--wp--preset--color--charcoal, #1F1F1F) !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background-color: #EFF1F4 !important;
  background-image: radial-gradient(
    #CDD8E0 1.5px,
    transparent 1.5px
  ) !important;
  background-size: 28px 28px !important;
  padding: 4.5em 1.5em 2em !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  align-items: stretch !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content::before {
  content: '— MENU —';
  display: block;
  font-family: 'Silkscreen', monospace;
  font-size: 0.85rem;
  letter-spacing: 0.25em;
  color: #6B4A7A;
  text-align: center;
  margin-bottom: 1.5em;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__container {
  gap: 0 !important;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item {
  width: 100%;
  border-bottom: 3px dashed #6B4A7A;
  padding: 0.5em 0;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item:last-child {
  border-bottom: none;
}

/* Burger menu items — Pixelify Sans 600, mixed case for cleaner read.
   Larger size since this is a fullscreen mobile menu. */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--wp--preset--color--charcoal, #1F1F1F) !important;
  text-decoration: none !important;
  display: block;
  padding: 0.45em 0 0.45em 0;
  position: relative;
  transition: color 0.1s ease, padding-left 0.1s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus {
  color: #6B4A7A !important;
  padding-left: 1.5em;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content::before {
  content: '▸';
  position: absolute;
  left: 0;
  opacity: 0;
  color: #6B4A7A;
  transition: opacity 0.1s ease;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:hover::before,
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content:focus::before {
  opacity: 1;
}

.wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item .wp-block-navigation-item__content {
  color: #6B4A7A !important;
  padding-left: 1.5em;
}
.wp-block-navigation__responsive-container.is-menu-open
  .current-menu-item .wp-block-navigation-item__content::before {
  opacity: 1;
}

.wp-block-navigation__responsive-container-close {
  background: #EFF1F4 !important;
  border: 3px solid #3A4A5C !important;
  border-radius: 12px !important;
  padding: 0.45em 0.55em !important;
  box-shadow: 4px 4px 0 0 #EFF1F4;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
  top: 1.25em !important;
  right: 1.25em !important;
}
.wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation__responsive-container-close:focus {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #EFF1F4;
}
.wp-block-navigation__responsive-container-close svg {
  fill: var(--wp--preset--color--charcoal, #1F1F1F) !important;
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container {
  background: transparent !important;
  border: none !important;
  padding-left: 1.25em !important;
  box-shadow: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 1rem !important;
}