/* =========================================================
   Biscuits N Briskets — Kadence Theme Custom CSS
   Paste this into: Appearance > Customize > Additional CSS
   (or Appearance > Customize > Custom CSS, depending on
   your WordPress.com Customizer layout)

   BEFORE pasting this, set these in Customizer > Colors & Fonts
   > Colors first — Kadence uses these as global variables, and
   it's more reliable than overriding everything here:
     Base/Background color   -> #1F1B19  (charcoal)
     Primary Accent           -> #D9551B  (ember orange)
     Secondary/Alt Accent      -> #E8A23D  (mustard)
     Contrast/Text color      -> #ECE6DC  (warm smoke-white)
   Then set Typography:
     Headings  -> Oswald (Google Font, under Typography settings)
     Base/Body -> Inter
   ========================================================= */

:root {
  --bnb-char: #1F1B19;
  --bnb-ember: #D9551B;
  --bnb-mustard: #E8A23D;
  --bnb-smoke: #ECE6DC;
  --bnb-bark: #3A2E27;
  --bnb-ash: #8A8178;
}

/* ---- Global page background & text ---- */
/* Only the outer body is charcoal — content areas use a lighter
   "bark" surface so text/cards have contrast instead of everything
   blending into one flat dark mass. */
body {
  background-color: var(--bnb-char) !important;
  color: var(--bnb-smoke);
}

.content-area, .site-main, .entry-content {
  background-color: var(--bnb-bark) !important;
  padding: 32px;
  border-radius: 6px;
}
# Adding an Image Behind Your H1 Headline

## Easiest method: Cover block (built into WordPress, no plugin needed)

1. In the block editor, delete your current H1 text block (or just select it).
2. Click the **+** to add a new block, search for **Cover**, and add it.
3. Upload your hero image (the brisket close-up from Unsplash, or your
   own photo once you have one).
4. Inside the Cover block, you'll see a placeholder text area — type
   your headline there:
   **From the Backyard to Memphis in May**
5. Select that text and set its block type to **Heading → H1** using
   the block toolbar (the dropdown that currently says "Paragraph").
6. In the Cover block's right-hand settings panel:
   - **Overlay color**: set to your charcoal (#1F1B19)
   - **Opacity**: try 40–50% — this is what keeps white text readable
     over a busy photo without hiding the image entirely
   - **Minimum height**: 500–600px works well for a hero section
   - **Focal point**: drag the crosshair onto the most important part
     of the photo (e.g., the smoke ring) so it stays visible on mobile
/* What's Cookin' — uniform image height in Query Loop grid */
.wp-block-query .wp-block-post-featured-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center;
}
## Matching the design (paste into Additional CSS, append — don't replace existing)

```css
/* ---- Hero image overlay heading ---- */
.wp-block-cover .wp-block-cover__inner-container h1 {
  font-family: 'Oswald', sans-serif !important;
  color: #FFFFFF !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
```

That text-shadow line is what keeps the headline legible even over
lighter/busier parts of the photo — worth keeping even if you adjust
colors elsewhere.

## One thing to watch
Once you upload the real image, open it in the Cover block settings
and check the **Alt Text** field — describe the photo itself (e.g.
"Smoked brisket sliced, showing pink smoke ring") since the overlay
text is now doing the heading job, and alt text should describe the
image, not repeat the headline.

/* ---- Header ---- */
/* White header bar so the logo pops, with dark text/nav for contrast
   against the light background. */
.site-header,
.kadence-header-row-container,
.site-header.full-overlay-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid rgba(31, 27, 25, 0.08);
}

.site-header .main-navigation a,
.site-header .site-title a,
.site-title-area a {
  color: var(--bnb-char) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.site-header .main-navigation a:hover {
  color: var(--bnb-ember) !important;
}
.site-header .main-navigation .current-menu-item > a,
.site-header .main-navigation .current_page_item > a {
  color: #1F1B19 !important;
}
/* Nav links — dark charcoal on white header, ember on hover/active */
.site-header .main-navigation a {
  color: #1F1B19 !important;
}

.site-header .main-navigation a:hover,
.site-header .main-navigation .current-menu-item > a {
  color: #D9551B !important;
}
/* Hide site title text from homepage — logo image handles branding */
.home .site-title,
.home .site-description {
  display: none !important;
}
/* Hide site title text on homepage — logo handles branding */
.home .site-title {
  display: none !important;
}
/* ---- Headings use display type, ember for emphasis ---- */
h1, h2, h3, h4,
.entry-title, .entry-title a {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bnb-smoke);
}
h6 {
  color: var(--bnb-mustard) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
/* ---- Body text: bump brightness/size slightly for readability on dark ---- */
p, li, .entry-content {
  color: #F4F0E8;
  font-size: 1.05rem;
}

/* ---- Links & buttons ---- */
a {
  color: var(--bnb-mustard);
}

.kt-button, .wp-block-button__link, .kb-btn, button[type="submit"] {
  background-color: var(--bnb-ember) !important;
  color: var(--bnb-char) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  border-radius: 2px !important;
  border: none !important;
}

.kt-button:hover, .wp-block-button__link:hover, .kb-btn:hover {
  background-color: #c44915 !important;
}

/* ---- Cards / boxed content (recipe grid, service cards) ---- */
.kadence-column,
.wp-block-column,
.kt-blocks-info-box,
.entry-card,
article.post {
  background-color: var(--bnb-bark);
  border: 1px solid rgba(236, 230, 220, 0.08);
  border-radius: 4px;
}

/* ---- Footer ---- */
.site-footer, footer.site-footer-row-container {
  background-color: var(--bnb-char) !important;
  border-top: 1px solid rgba(236, 230, 220, 0.08);
  color: var(--bnb-ash);
}

.site-footer a {
  color: var(--bnb-ash);
}
.site-footer a:hover {
  color: var(--bnb-mustard);
}

/* ---- Stat-style text (use for recipe cook time/temp if added via HTML block) ---- */
.bnb-stat {
  font-family: 'JetBrains Mono', monospace;
  color: var(--bnb-mustard);
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

/* ---- Contact form fields (Jetpack/Crowdsignal form) ---- */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form select {
  background-color: var(--bnb-bark) !important;
  border: 1px solid rgba(236, 230, 220, 0.15) !important;
  color: var(--bnb-smoke) !important;
  border-radius: 2px !important;
}

.contact-form label {
  color: var(--bnb-mustard) !important;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* ---- Accessibility: visible keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--bnb-ember) !important;
  outline-offset: 2px;
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
.flrt-chips-wrap,
.flrt-selected-terms {
  display: none !important;
}
.flrt-filter-name {
  display: none !important;
}
.flrt-filter-widget-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}