/* ============================================================
   ROBOHEARTBEAT — FULL PALETTE CSS
   Paste into Appearance → Customize → Additional CSS
   Replaces ALL previous CSS — this is the complete set.

   PALETTE SUMMARY
   ───────────────────────────────────────────
   Background .......... #FAF7F2  Warm White
   Nav / Footer bg ..... #2E2118  Dark Espresso
   Primary accent ...... #D4756E  Dusty Rose
   Secondary accent .... #D4A853  Aged Amber
   Tertiary accent ..... #5DB87A  EVE Green
   Support accent ...... #5B9BD5  Scanner Blue
   Dark text ........... #5A3E28  Walnut Brown
   Light text/links .... #E8D9C4  Parchment
   ───────────────────────────────────────────
   ============================================================ */


/* ── SITE BACKGROUND ─────────────────────────────────────── */

body {
  background-color: #FAF7F2 !important;
}


/* ── HEADER ──────────────────────────────────────────────── */

/* Full header bar — dark espresso edge to edge */
.wp-block-template-part[class*="header"],
header.wp-block-template-part,
#masthead,
.site-header,
header[class*="site"],
.wp-site-blocks > header,
header {
  background-color: #2E2118 !important;
  width: 100% !important;
}

/* Inner header group/row */
header .wp-block-group,
header .wp-block-columns,
#masthead .wp-block-group {
  background-color: #2E2118 !important;
}

/* Site title — dusty rose, Pixelify Sans, no background box */
.wp-block-site-title,
.wp-block-site-title a,
.site-title,
.site-title a,
header .wp-block-site-title,
header .wp-block-site-title a {
  background-color: transparent !important;
  color: #D4756E !important;
  font-family: 'Pixelify Sans', monospace !important;
  font-size: 1.2rem !important;
  text-decoration: none !important;
}

/* Nav links — warm white on dark espresso */
header .wp-block-navigation a,
header .wp-block-navigation-item a,
header nav a,
.wp-block-navigation .wp-block-navigation-item a {
  color: #FAF7F2 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* Nav links hover — aged amber */
header .wp-block-navigation a:hover,
header .wp-block-navigation-item a:hover,
header nav a:hover {
  color: #D4A853 !important;
}

/* Nav bar itself — no rogue background */
.wp-block-navigation,
.wp-block-navigation__container,
.wp-block-navigation-item {
  background-color: transparent !important;
}


/* ── CONTENT AREA ────────────────────────────────────────── */

/* Page / post content background */
.wp-block-group,
.entry-content,
.site-main {
  background-color: #FAF7F2;
}

/* Headings — walnut brown */
h1, h2, h3, h4, h5, h6 {
  color: #5A3E28;
}

/* Body links — dusty rose */
a {
  color: #D4756E;
}
a:hover {
  color: #B05550;
}


/* ── FOOTER ──────────────────────────────────────────────── */

/* Full footer — dark espresso, overriding old teal */
.wp-block-template-part[class*="footer"],
footer.wp-block-template-part,
#colophon,
.site-footer,
footer[class*="site"],
.wp-site-blocks > footer,
footer {
  background-color: #2E2118 !important;
  color: #E8D9C4 !important;
  width: 100% !important;
}

/* All groups/columns inside footer — transparent so no patches */
footer .wp-block-group,
footer .wp-block-columns,
footer .wp-block-column,
footer .wp-block-navigation,
footer .wp-block-navigation__container,
footer .widget,
footer [class*="widget"] {
  background-color: transparent !important;
  color: #E8D9C4 !important;
}

/* Footer headings — aged amber */
footer h1, footer h2, footer h3,
footer h4, footer h5, footer h6 {
  color: #D4A853 !important;
}

/* Footer links */
footer a,
footer .wp-block-navigation a,
footer .wp-block-navigation-item a {
  color: #E8D9C4 !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

footer a:hover,
footer .wp-block-navigation a:hover,
footer .wp-block-navigation-item a:hover {
  color: #D4A853 !important;
  text-decoration: underline !important;
}

/* Footer body text */
footer p,
footer li,
footer span {
  color: #E8D9C4 !important;
}

/* Strip any remaining inner background boxes */
footer .wp-block-group__inner-container,
footer .wp-block-widget-area,
footer [style*="background"] {
  background-color: transparent !important;
}


/* ── GLOBAL SAFETY NET ───────────────────────────────────── */

/* Kill any rogue teal from the original theme */
[style*="background-color: #0f6e56"],
[style*="background-color:#0f6e56"],
[style*="background-color: teal"],
[style*="background-color: rgb(15, 110, 86)"] {
  background-color: #2E2118 !important;
}

/* ============================================================
   ROBOHEARTBEAT — IMAGE BORDER TREATMENT
   Add this to Appearance → Customize → Additional CSS
   below your existing palette CSS.

   TWO PARTS:
   1. .rhb-frame — a class you manually add to individual
      images on the about page, homepage, etc.
   2. Automatic treatment on all blog post featured images
      in the Latest Posts widget on the homepage.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   PART 1 — MANUAL CLASS
   Add class="rhb-frame" to any individual image block
   in the WordPress editor (under Advanced → CSS class)
   ══════════════════════════════════════════════════════════ */

/* Wrapper approach — the class goes on the image's
   figure or div container in the block editor */
.rhb-frame {
  position: relative;
  display: inline-block;
  line-height: 0; /* removes gap under inline images */
}

/* Amber border + soft offset shadow */
.rhb-frame img,
.rhb-frame figure img,
figure.rhb-frame img {
  border: 2.5px solid #D4A853 !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0 rgba(212, 168, 83, 0.35) !important;
  display: block;
}

/* Blue corner bracket accents via pseudo-elements on the figure */
.rhb-frame::before,
.rhb-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 2;
  pointer-events: none;
}

/* Top-left bracket */
.rhb-frame::before {
  top: -3px;
  left: -3px;
  border-top: 3px solid #5B9BD5;
  border-left: 3px solid #5B9BD5;
}

/* Top-right bracket */
.rhb-frame::after {
  top: -3px;
  right: -3px;
  border-top: 3px solid #5B9BD5;
  border-right: 3px solid #5B9BD5;
}

/* Bottom brackets — on a child span WordPress adds,
   or we approximate with box-shadow trick on the img */
.rhb-frame img {
  box-shadow:
    4px 4px 0 rgba(212, 168, 83, 0.35),
    /* bottom-left blue bracket */
    -3px 0 0 0 transparent,
    /* these catch the bottom corners via outline offset */
    0 0 0 0 transparent !important;
}

/* Simpler alternative for bottom corners —
   use an inset on a wrapper with padding */
figure.wp-block-image.rhb-frame {
  padding: 3px;
  outline: 2.5px solid #D4A853;
  outline-offset: 0px;
  border-radius: 3px;
  box-shadow: 4px 4px 0 rgba(212, 168, 83, 0.35);
  background: transparent;
  position: relative;
}

figure.wp-block-image.rhb-frame img {
  border: none !important;
  box-shadow: none !important;
  border-radius: 2px !important;
  display: block;
  width: 100%;
}

/* All four corners via a single pseudo on figure */
figure.wp-block-image.rhb-frame::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 3px solid transparent;
  border-image: none;
  pointer-events: none;
  z-index: 2;
  /* top-left and bottom-right blue corners */
  background:
    linear-gradient(#5B9BD5, #5B9BD5) top left / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top left / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top right / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top right / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom left / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom left / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom right / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom right / 3px 14px no-repeat;
}


/* ══════════════════════════════════════════════════════════
   PART 2 — BLOG POST FEATURED IMAGES (automatic)
   Targets figure.post-thumbnail — the actual class
   your theme outputs on the homepage post grid.
   ══════════════════════════════════════════════════════════ */

/* Make sure the figure can contain the bracket pseudo-elements */
figure.post-thumbnail {
  position: relative;
  display: block;
  line-height: 0;
  margin: 0;
}

/* Amber border + soft offset shadow on the image */
figure.post-thumbnail img {
  border: 2.5px solid #D4A853 !important;
  border-radius: 3px !important;
  box-shadow: 4px 4px 0 rgba(212, 168, 83, 0.35) !important;
  display: block;
  width: 100%;
}

/* Make sure the link wrapper doesn't clip the brackets */
figure.post-thumbnail a {
  display: block;
  line-height: 0;
  overflow: visible !important;
}

/* All four blue corner brackets via a single pseudo-element */
figure.post-thumbnail::before {
  content: '';
  position: absolute;
  inset: -5px;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(#5B9BD5, #5B9BD5) top left    / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top left    / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top right   / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) top right   / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom left  / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom left  / 3px 14px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom right / 14px 3px no-repeat,
    linear-gradient(#5B9BD5, #5B9BD5) bottom right / 3px 14px no-repeat;
}


.swiper-navigation-icon {
  display: none;
}

.wp-block-navigation .wp-block-navigation-item {
	font-family: var(--wp--preset--font-family--pixelify-sans);
}