/* ── Help-centre header: brand logo (light/dark) + no duplicated name ───────
*
* TWO PROBLEMS THIS SOLVES
*
* 1. ActiveStorage serves SVG as `application/octet-stream`, not `image/svg+xml`
* — Rails does this deliberately (ActiveStorage.content_types_to_serve_as_binary)
* because an SVG can carry script. A browser will not render an ![]()
from
* octet-stream, so the attached logo showed as a BROKEN IMAGE. Rather than
* weaken that setting globally, the rendered image is replaced from CSS with
* an SVG served by nginx with a correct content type.
*
* The portal logo attachment is still REQUIRED: the header only emits an
* ![]()
at all when `@portal.logo.present?`, and it also decides the
* neighbouring 's classes. We keep the attachment and override what it
* paints.
*
* 2. Chatwoot's Portal has a SINGLE logo attachment and renders one ![]()
in both
* themes. Our logos are two files — -black.svg (dark text) and
* -white.svg (white text) — because neither reads on both a white and
* a near-black header. The main site toggles two ![]()
elements from JS;
* there is only one here, so `content: url()` does the swap instead.
*
* Both files are served per-brand from the SAME relative path: the vhost aliases
* /brand-assets/logo-*.svg through $hc_portal, so one stylesheet serves all four
* brands.
*
* SELECTOR NOTES
* - `` carries NO dark class server-side; Chatwoot's theme script adds it
* at runtime, so nothing here may depend on server-rendered markup.
* - `img[src*="/rails/active_storage/"]` is the logo — the only ActiveStorage
* image in the header. Chosen over the Tailwind utilities (`w-auto h-10 …`),
* which are styling and can change on any release.
* - The header renders the logo TWICE (desktop bar + mobile menu), hence the
* unscoped selector.
*/
img[src*="/rails/active_storage/"] {
content: url("/brand-assets/logo-black.svg");
}
.dark img[src*="/rails/active_storage/"] {
content: url("/brand-assets/logo-white.svg");
}
/* The wordmark already reads "", so the adjacent " Help Center"
* text repeats it. Markup is:
* ![]()
Wizflights Help Center
* so the adjacent-sibling selector targets exactly that span and nothing else.
* The mobile copy is already `hidden` when a logo is attached. */
img[src*="/rails/active_storage/"] + span {
display: none;
}