/*
 * Solocal-specific interface overrides.
 *
 * Loaded last (after every base/page <style> block), so plain selectors here
 * win the cascade without needing !important. Keep rules scoped as tightly
 * as you can — a class/id, not a bare tag — so they don't leak onto elements
 * this file wasn't meant to touch.
 *
 * CSS custom properties already available on every /app/* page
 * (defined in templates/app/base.html.twig):
 *   --mobile-primary        brand color            (APP_BRAND_COLOR — #ffde07)
 *   --mobile-primary-light  brand color, dark shade (APP_BRAND_COLOR_DARK — #e6c700)
 *   --mobile-on-brand       text/icon color for content on --mobile-primary (APP_BRAND_TEXT_COLOR — #0A68F1)
 *   --mobile-accent         WhatsApp green — not brand-driven, leave alone
 *   --mobile-text-dark / --mobile-text-muted / --mobile-card-bg / --mobile-bg / --mobile-border
 *
 * ...and on every /admin/* + /wa_management/* page
 * (templates/admin/base.html.twig):
 *   --green-dk / --blue     brand color (both, historically two names for the same value)
 *   --on-brand              text/icon color for content on --blue / --green-dk
 *   --green                 WhatsApp green — not brand-driven, leave alone
 *
 * ...and on the login/auth pages (security/*, registration/*, error pages):
 *   --auth-primary / --auth-on-brand
 *
 * Pages are scoped via <body class="page-{{ app.current_route }}">, set in
 * templates/app/base.html.twig — e.g. the dashboard route (app_dashboard)
 * gives <body class="page-app_dashboard">.
 */

/* Dashboard (/app/) header: force the back arrow, title and hamburger icon to
   white while the nav menu is CLOSED — on this page the header sits over a
   hero photo (see dashboard.html.twig's own #main-header override) where the
   normal on-brand blue reads poorly. Reverts to the normal blue the moment
   the menu opens (#hamburger-btn's aria-expanded flips to "true" live, no JS
   needed here) and is not scoped to any other /app/* page.
   Mobile-only (max-width: 480px), matching dashboard.html.twig's own breakpoint
   for the transparent-header-over-photo treatment itself — on desktop the header
   stays a solid brand-color bar (never transparent/over the photo), so white
   text never applied there; keep the normal on-brand blue on desktop. */
@media (max-width: 480px) {
    body.page-app_dashboard #main-header:has(#hamburger-btn[aria-expanded="false"]) .back-button,
    body.page-app_dashboard #main-header:has(#hamburger-btn[aria-expanded="false"]) h1 {
        color: #fff;
    }
    body.page-app_dashboard #main-header:has(#hamburger-btn[aria-expanded="false"]) .hamburger-line {
        background: #fff;
    }
}

/* Brand display font: Dufi's "More Sugar" (loaded by the base templates) doesn't apply here —
   Solocal uses Poppins instead, on the same two elements that use the display font elsewhere
   (mobile header title, admin sidebar brand name). Medium (500), not Regular — Regular read
   too light/thin for a display font at this size. */
@font-face {
    font-family: 'Poppins';
    src: url('/brands/solocal/fonts/Poppins-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.mobile-header h1,
#sidebar .sidebar-brand .brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}