/* Article + site shell — keeps original Brothers Pizza pages untouched */
:root {
  --bp-red: #b91c1c;
  --bp-ink: #1f2937;
  --bp-muted: #6b7280;
  --bp-line: #e5e7eb;
  --bp-bg: #ffffff;
  --bp-paper: #fafafa;
  --bp-link: #b91c1c;
  --bp-link-hover: #7f1d1d;
  --bp-radius: 6px;
  --bp-max: 760px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--bp-ink);
  background: var(--bp-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bp-link); text-decoration: none; }
a:hover { color: var(--bp-link-hover); text-decoration: underline; }

/* Header — branded with logo, sticky-friendly, mobile-responsive */
header.site-header {
  background: #ffffff;
  border-bottom: 1px solid var(--bp-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 10;
}
.site-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}
.site-logo:hover { opacity: 0.85; text-decoration: none; }
.site-logo img {
  height: 64px;
  width: auto;
  max-width: 220px;
  display: block;
}
.site-nav {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  font-size: 0.975rem;
  font-weight: 600;
}
.site-nav a {
  color: var(--bp-ink);
  text-decoration: none;
  position: relative;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}
.site-nav a:hover {
  color: var(--bp-red);
  text-decoration: none;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--bp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.18s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }

/* Mobile: stack logo above the nav so neither shrinks awkwardly */
@media (max-width: 720px) {
  .site-header-inner {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
  }
  .site-logo img { height: 52px; }
  .site-nav {
    gap: 1.25rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Breadcrumb */
nav.breadcrumb {
  max-width: var(--bp-max);
  margin: 1.5rem auto 0;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  color: var(--bp-muted);
}
nav.breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
nav.breadcrumb li:not(:last-child)::after {
  content: " ›";
  margin-left: 0.5rem;
  color: var(--bp-line);
}
nav.breadcrumb a { color: var(--bp-muted); }

/* Article body */
article {
  max-width: var(--bp-max);
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.article-header h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.byline {
  color: var(--bp-muted);
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 2rem;
}
.byline a { color: var(--bp-ink); font-weight: 600; }

/* Featured image (1200x630 OG, also shown on the page) */
figure.featured-image {
  margin: 1.5rem 0 2.25rem;
  padding: 0;
}
figure.featured-image img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: var(--bp-radius);
  border: 1px solid var(--bp-line);
}

.article-body { font-size: 1.0625rem; }
.article-body h2 {
  font-size: 1.65rem;
  margin: 2.5rem 0 0.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.article-body h3 {
  font-size: 1.25rem;
  margin: 2rem 0 0.5rem;
  font-weight: 700;
}
.article-body p { margin: 0 0 1rem; }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0 0 1rem; }
.article-body li { margin-bottom: 0.4rem; }
.article-body strong { color: var(--bp-ink); }
.article-body p.numbered {
  padding-left: 1.25rem;
  position: relative;
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--bp-line);
  margin: 2.5rem 0;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}
.article-body th, .article-body td {
  border: 1px solid var(--bp-line);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--bp-paper);
  font-weight: 700;
}

/* FAQ */
section.faq {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bp-line);
}
section.faq h2 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
}
section.faq dl { margin: 0; }
section.faq dt {
  font-weight: 700;
  margin-top: 1.25rem;
  font-size: 1.05rem;
}
section.faq dd {
  margin: 0.25rem 0 0 0;
  color: #374151;
}

/* Related reading */
section.related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--bp-line);
}
section.related h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}
section.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1rem;
}
section.related a {
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bp-line);
}

/* ---- Ad slots (monetization-ready) -------------------------------------- */
/*
   These are scaffolded ad slots. They're hidden by default so the page looks
   clean while you're getting traffic. When you sign up with an ad network
   (Mediavine, Raptive, Ezoic, AdSense, etc.):
     1. Paste the network's <script> tag in article.html before </head>
     2. Set --ads-enabled: 1 on :root  OR  add class="enabled" to each slot.
   The slots reserve their height so layout doesn't shift (CLS = 0).
*/
:root {
  --ads-enabled: 0;
  --ad-min-height: 280px;
}

.ad-slot {
  display: none;
  max-width: var(--bp-max);
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  text-align: center;
  min-height: var(--ad-min-height);
  color: var(--bp-muted);
  font-size: 0.75rem;
}
.ad-slot::before {
  content: "Advertisement";
  display: block;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
  color: var(--bp-muted);
}
.ad-slot.enabled,
:root[style*="--ads-enabled: 1"] .ad-slot {
  display: block;
}

.ad-slot-top { margin-top: 0.75rem; }
.ad-slot-mid { margin: 2.5rem auto; }
.ad-slot-bottom { margin-bottom: 2rem; }

/* Footer */
body > footer {
  border-top: 1px solid var(--bp-line);
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--bp-muted);
  font-size: 0.875rem;
}

/* Mobile */
@media (max-width: 600px) {
  body > header { padding: 0.75rem 1rem; }
  body > header nav { gap: 0.85rem; font-size: 0.9rem; flex-wrap: wrap; }
  .article-header h1 { font-size: 1.75rem; }
  article { padding: 1.5rem 1rem 3rem; }
}