/* Home hero — where the classic design puts its search field.
 *
 * What the field looks like is no longer here: it is the same field the other four designs draw,
 * and it is drawn once in hero-search.css. This file holds the one thing that is classic's own —
 * where the field sits in the column — because that is a fact about the arrangement around it
 * rather than about the field.
 *
 * The legacy stylesheet centres the bar with `margin: 0 auto`, which it could do harmlessly while
 * the bar was an inline-block sized by its contents. As a block of its own width that centring pulls
 * it off the column: the heading sits flush at the reading edge and the field would not.
 */

/* Logical, so it follows the language rather than a side. */
.homepageHero .searchBar { margin-inline: 0 auto; }

/* The centred arrangement is the one place the field belongs in the middle, because its heading is
   there too. */
.homepageHero2 .searchBar { margin-inline: auto; }

/* A classic hero with no image of its own.

   The legacy stylesheet paints one on .homepageHero1/2/3 regardless, so a page that had
   chosen nothing still showed a picture — and it read as a default nobody had set. Black
   instead, and the gradient goes with it: that exists to lift text off a photograph and has
   nothing to lift it off here. The ink is stated because layout 3 is written in near-black
   for its own light background, which would leave it unreadable on this one.

   Same specificity as the rules being answered; this sheet loads after them. */
.homepageHero--noImage .bgImage { background: var(--cil-black); }
.homepageHero--noImage .bgImage .gradient { background: none; }
.homepageHero--noImage,
.homepageHero--noImage .content { color: var(--cil-white); }