/* Backyard BBQ-R public-page visual layer, adapted from the approved homepage draft.
   Page-specific layouts and data bindings remain in their original stylesheets. */
@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600;700;800;900&display=swap');

:root {
  --draft-night: #0F1A2B;
  --draft-deep: #091322;
  --draft-card: #162035;
  --draft-ember: #CC5500;
  --draft-amber: #C9943A;
  --draft-cream: #EDE0D0;
  --draft-muted: #A89580;
  --draft-line: rgba(201,148,58,.18);
  --draft-sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --draft-serif: 'Bitter', Georgia, serif;
}

body {
  background-color: var(--draft-night);
  color: var(--draft-cream);
  font-family: var(--draft-sans);
}

header {
  background: rgba(15,26,43,.96);
  border-bottom: 1px solid var(--draft-line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,#CC5500,#C9943A 30%,#E3BC6A 50%,#C9943A 70%,#CC5500);
  pointer-events: none;
}

.logo-badge-name,
.brand strong {
  font-family: var(--draft-serif);
  font-weight: 800;
  color: var(--draft-cream);
}

.logo-badge-sub,
.brand span {
  color: var(--draft-amber);
}

.nav-links a,
header .nav a:not(.brand),
header .links a {
  font-family: var(--draft-sans);
  font-weight: 600;
  color: var(--draft-muted);
}

.nav-links a:hover,
.nav-links a:focus-visible,
header .nav a:not(.brand):hover,
header .links a:hover {
  color: var(--draft-cream);
}

.nav-links a.active,
.nav-links a[aria-current='page'],
header .nav a.active,
header .links a[aria-current='page'] {
  color: var(--draft-amber);
}

.mobile-menu,
header .mobile-nav div {
  background: var(--draft-deep);
  border-color: var(--draft-line);
}

.mobile-menu a:hover,
header .mobile-nav a:hover {
  color: var(--draft-cream);
  background: rgba(201,148,58,.1);
}

h1,
.sec-title,
.section-title,
.hero h1,
.page-title {
  font-family: var(--draft-serif);
  letter-spacing: -.015em;
}

.btn,
button {
  font-family: var(--draft-sans);
}

.btn-primary,
.nav-cta-desktop,
.nav-cta-desk {
  background: linear-gradient(180deg,#e06010,var(--draft-ember));
  color: #fff;
}

footer {
  border-top-color: var(--draft-line);
}

/* Small accent links need the lighter brand amber for readable contrast. */
.video-ctas-note a,
.newsletter-note a {
  color: var(--draft-amber) !important;
}

#recipe-tabs { scroll-margin-top: 88px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--draft-amber);
  outline-offset: 3px;
}

@media (min-width: 1501px) {
  .nav-inner { max-width: 1440px; }
  .nav-links { display: flex; gap: 2px; }
  .nav-links a { padding: 10px 8px; font-size: .9rem; }
  .nav-cta-desk,
  .nav-cta-desktop { display: inline-flex; }
  .hamburger { display: none; }
}

@media (max-width: 1500px) {
  .nav-links,
  .nav-cta-desk,
  .nav-cta-desktop { display: none; }
  .hamburger { display: block; }
}

@media (max-width: 760px) {
  /* Keep the promise visible without pushing the actual content below the fold. */
  .video-value-row,
  .recipe-value-row,
  .v2-benefits,
  .nl-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
  }

  .video-value-row > *,
  .recipe-value-row > *,
  .v2-benefits > div,
  .nl-proof > div {
    width: auto;
    padding: 8px 11px;
    border-radius: 999px;
  }

  .video-value-row strong,
  .recipe-value-row strong,
  .v2-benefits strong,
  .nl-proof strong { margin: 0; font-size: .78rem; }

  .video-value-row span,
  .recipe-value-row span,
  .v2-benefits span,
  .nl-proof span { display: none; }
}

@media (max-width: 700px) {
  #hero .hero-inner { padding-top: 40px; padding-bottom: 38px; }
  #hero .hero-signs { padding-top: 4px; gap: 0; }
  #hero .hero-signs .sign:nth-child(n+2) { display: none; }
  #hero .hero-signs .sign { max-width: 238px; }
}

@media print {
  header::before { display: none; }
}