/* Small overrides for the mirrored nitro-min-* bundles. They live here rather
   than in the bundles themselves, because those are regenerated whenever the
   upstream CSS is re-downloaded.

   The "Part of Thermo Fisher Scientific" lockup is ~3.09:1, not the ~6.9:1 of
   the logo it replaced. clario.com ships these two rules alongside it so the
   `height` attribute on each <img> stops squashing the taller artwork. */

#site-header nav .main-logo img {
    height: auto;
}

.footer .footer-header .container .footer-logo img {
    height: auto;
}

/* The holder added around the desktop nav widgets exists only to keep the theme
   script from deleting them (see the note in index.html), so it takes no part in
   layout. */
.clario-nav .desktop-widgets-holder {
    display: contents;
}

@media (max-width: 767.98px) {
    /* The text column is `col-10` while the image beside it runs full width, so the
       copy sat 30px inside the artwork it belongs to. */
    .clario-cta .clario-cta-content,
    .clario-cta .clario-cta-action {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* The footer-bottom band sets the copyright beside the ICP filing. The copyright
   keeps clario.com's own treatment — the <span> in the markup is what earns it
   #e9e9e9 and the 30px that, with the li's own 30px, holds the 60px clear space
   upstream puts between it and the links that follow.

   What differs here is that the filing is a single item three times the length of
   the copyright, so at a shared size it reads as the louder of the two. Dropping
   it a size and a shade settles the ranking without breaking the row.
   (rgba(233,233,233,.72) over the footer's #4b0f41 is 6.5:1.) */
/* The type goes on the li, not on the link. A link is inline, so its own
   line-height cannot size the line box it sits in — that comes from the strut of
   its containing block, which inherits the body's 17px/22px. Left there, the
   filing keeps a 22px line box and sits on the copyright's baseline, which at two
   different sizes puts its centre visibly below the copyright's. Sizing the li
   gives the filing a line box of its own to be centred in. */
.footer .footer-bottom .widget_nav_menu li {
    font-size: 14px;
    line-height: 20px;
}

.footer .footer-bottom .widget_nav_menu a {
    color: rgba(233, 233, 233, .72);
}

.footer .footer-bottom .widget_nav_menu a:hover,
.footer .footer-bottom .widget_nav_menu a:focus-visible {
    color: #e9e9e9;
}

@media (min-width: 768px) {
    /* Two sizes on one row read as level when their boxes are concentric, not when
       they share a baseline: the smaller of the two then hangs below the larger.
       Only meaningful together with the li sizing above, which is what gives the
       filing a box smaller than the row to be centred within. */
    .footer .footer-bottom ul {
        align-items: center;
    }
}

@media (max-width: 767.98px) {
    /* The bundles give this `order: 2` once the band stacks, which puts the
       copyright below the filing and reverses the row's reading order. Same
       selector, so this has to match their specificity to win; their 20px was
       spacing the copyright off the list it used to follow. */
    .footer .footer-bottom ul .widget_block {
        order: 0;
        margin-top: 0;
    }

    .footer .footer-bottom ul {
        gap: 6px;
    }
}