/* Clindo brand logo (icon + wordmark, one SVG). Loaded after the vendor theme CSS.

   clindo-mark.svg is inlined into the page (not <img src>) with
   fill="currentColor" on its path, so its color follows the CSS `color`
   set here. That lets the same file recolor per background instead of
   needing separate pre-colored image files, as the old light/dark logo
   swap did. */

.brand-logo {
    display: inline-flex;
    align-items: center;
}

.brand-logo svg {
    height: 50px;
    width: auto;
    display: block;
}

/* Light variant: white mark, for the transparent hero navbar. */
.brand-logo--light {
    color: #fff;
}

/* Dark variant: brand-purple mark, for the solid/scrolled navbar and the
   (always light-background) footer. */
.brand-logo--dark {
    color: #8359fb;
}

/* Reuse the existing light-logo/dark-logo scroll-state toggle: main.js adds
   .navbar-faded to .navbar-wrapper once the page scrolls past the hero
   (swapping the transparent navbar for a solid white one), exactly the
   trigger the old <img class="light-logo">/<img class="dark-logo"> pair
   relied on. */
.navbar-brand .brand-logo--light {
    display: flex;
}

.navbar-brand .brand-logo--dark {
    display: none;
}

.navbar-wrapper.navbar-faded .brand-logo--light {
    display: none;
}

.navbar-wrapper.navbar-faded .brand-logo--dark {
    display: flex;
}

.footer-logo.brand-logo {
    padding: 10px 0;
}

/* Subsetted icon font.

   app.css ships the full Iconsmind family: 2,086 glyphs, 1.15MB, of which this
   site uses 43. This @font-face redeclares the same `iconsmind` family from a
   subset containing only those 43 (10KB woff2), and because brand.css is
   loaded after app.css, this declaration wins.

   If you add a new `im-icon-*` to the markup you MUST regenerate the subset,
   or the glyph will render blank. See docs/icon-font.md. */
@font-face {
    font-family: iconsmind;
    src: url(../fonts/iconsmind-subset.woff2) format('woff2'),
         url(../fonts/iconsmind-subset.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* Language switcher flag. The SVG is inlined into the page (like the brand
   mark) rather than used as an emoji, which Windows browsers render as the
   country's two letters instead of a flag. */
.lang-switch .lang-flag {
    display: inline-flex;
    align-items: center;
}

.lang-switch .lang-flag svg {
    width: 26px;
    height: auto;
    display: block;
    border-radius: 3px;
    /* A white flag edge disappears against the navbar; the hairline keeps the
       shape readable on both the transparent hero and the scrolled white bar. */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}