:root {
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F7FA;
  --color-bg-dark: #370606;
  --color-heading: #2E1919;
  --color-body: #4D3D3D;
  --color-heading-alt: #F6F4F4;
  --color-body-alt: #D6CDCD;
  --color-border: #E3E8EF;
  --color-border-light: #EDF1F5;
  --color-accent: #D41111;
  --color-accent-hover: #AE0E0E;
  --color-secondary: #CC8033;
  --color-on-accent: #FFFFFF;
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Source Sans 3', sans-serif;
}

/* ---------------------------------------------------------------------------
   Per-site dark header surface - 2026-09-15, THIS TENANT ONLY.

   Top View supplied a white-and-red logo on transparency, drawn for a dark
   bar. On the Bold look default white nav (.nav-bar background:
   var(--ocf-bg)) the white words "View" and "Roofing and Restoration"
   disappeared and only "Top" + the roof mark were visible.

   Fix without touching the shared theme and without altering the logo file:
   re-point the theme OWN surface tokens, inside the .nav-bar subtree only,
   at the dark-surface values this site has already derived for its footer
   (--ocf-footer-*, set in header.php bridge / bold.css) plus the theme own
   --ocf-dark-border* pair. Every header rule already reads var(--ocf-bg) /
   var(--ocf-heading) / var(--ocf-border-light), so redefining those custom
   properties on .nav-bar repaints the whole header - bar, nav links, phone,
   dropdown panels, the mobile drawer and the sticky (.is-condensed) state -
   with no !important, no new selectors and no new colours. Header and footer
   bars now read as the same surface.

   The footer already renders on that dark surface, so the footer copy of the
   same logo needed no change.
   --------------------------------------------------------------------------- */
.nav-bar,
.nav-bar.is-condensed {
  --ocf-bg: var(--ocf-footer-bg);
  --ocf-bg-alt: color-mix(in srgb, var(--ocf-footer-bg) 88%, #FFFFFF);
  --ocf-heading: var(--ocf-footer-heading);
  --ocf-body: var(--ocf-footer-body);
  --ocf-border: var(--ocf-dark-border);
  --ocf-border-light: var(--ocf-dark-border-light);
}

/* Hover state only: the look tints links with --ocf-primary (#D41111), which
   is unreadable on the dark bar. Lightened brand red keeps the brand cue and
   the contrast. --ocf-primary itself is left alone so the "Get a quote"
   button stays full brand red. */
.nav-bar .nav-link:hover,
.nav-bar .nav-dropdown-trigger:hover,
.nav-bar .dropdown-item:hover,
.nav-bar .mobile-link:hover {
  color: color-mix(in srgb, var(--ocf-primary) 50%, #FFFFFF);
}
