/* ============================================================================
   Powerhouse Plumbers — per-tenant theme override (Direction A: industrial).
   Loaded AFTER site.css and ONLY on this tenant's pages (base.html injects it
   from `theme.css` in the tenant YAML). Other tenants are untouched.
   ============================================================================ */

/* Typography: Oswald (condensed, industrial) for display, Inter for body.
   Fonts are loaded via `theme.google_fonts` in the tenant YAML. */
:root {
  --display: 'Oswald', 'Inter Tight', system-ui, sans-serif;
  --sans: 'Inter', -apple-system, system-ui, sans-serif;
}

/* Uppercase display headings across the marketing UI for the bold, trades feel.
   Long-form article prose (.post-body) is exempted below to stay readable. */
h1, h2, h3,
.logo-text,
.form-title,
.service-card h3,
.process-step h3,
.post-cta h3,
footer h4,
.post-cat, .post-cat-badge {
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Oswald has no real italic — the heading accent should read as color, not slant. */
.ital { font-style: normal; color: var(--forest); }

/* Keep blog-article headings in title case (uppercase H2 sentences shout). */
.post-body h2,
.post-body h3 {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Logo: black mascot mark + horizontal wordmark with red slogan line ----
   Lockup reads:  [mascot]  POWERHOUSE PLUMBERS
                           Twice the Plumber, Half the Price   (red)        */
.logo { align-items: center; gap: 13px; }

/* Mascot PNG is near-square, not the 36x36 SVG — size by height, keep ratio. */
.logo .logo-mark {
  width: auto;
  height: 50px;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 700;
  white-space: nowrap;            /* keep "POWERHOUSE PLUMBERS" on one line */
}
/* Second line: the slogan, in the brand red, sentence case (not uppercase). */
.logo-text em {
  display: block;
  font-style: normal;
  font-weight: 600;
  font-size: 0.54em;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent);
  margin-top: 5px;
}

@media (max-width: 600px) {
  .logo .logo-mark { height: 42px; }
  .logo-text { font-size: 18px; }  /* shrink wordmark so the lockup fits */
}