/* # Tactis Header

Layout fixes for the header widget area, which holds the social icons and the
WPML language switcher.

Background: the theme hides `.header-widget-area` below the `md` breakpoint and
lays it out as a plain block above it, which stacks the two widgets vertically.
The site needs it visible at every width and on a single line, and that was
being done with an unscoped rule in Appearance > Customize > Additional CSS:

    .header-widget-area { display: inline-flex; }

That rule is what this file replaces. Because it carried no breakpoint, it also
forced the block onto small phones, where the header row does not fit: at 390px
the row needs 344px of the 343.2px available, so the widget area wraps onto a
second line and spills out of the fixed-height header. At 393px it fits, which
is why an iPhone 15 looked fine and an iPhone 12 did not.

The Customizer rule should be deleted so there is a single source of truth, but
it is not a prerequisite: Additional CSS is printed after the theme stylesheets
and so still wins on `display`, yet `.header-widget-area` is a flex item, whose
display value is blockified - `inline-flex` and `flex` render identically there.
The sizing rules below do not collide with it either way.

- Header Widget Area
- Small Screens
*/
/* ## Header Widget Area
--------------------------------------------- */
.header-widget-area {
  display: flex;
  align-items: center;
}

/* ## Small Screens
--------------------------------------------- */
@media (max-width: 895px) {
  .header-widget-area {
    margin-right: 0;
  }
  .header-widget-area .wpml-ls-legacy-list-horizontal {
    padding-right: 0;
    padding-left: 0;
  }
}
@media (max-width: 400px) {
  .title-area {
    width: 12rem;
  }
  .title-area img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 340px) {
  .title-area {
    width: 10.5rem;
  }
}

/*# sourceMappingURL=header.css.map */