/**
 * Ad-hoc overrides, loaded after the parent's bundle (priority 200).
 *
 * Prefer changing the palette in src/scss/_settings.dubai.scss over adding
 * rules here -- the palette flows through every ALPS component automatically,
 * while rules here have to be maintained by hand against upstream markup.
 */

/* ---------------------------------------------------------------------------
   Full-screen overlay hero: centre the text

   Companion to the `full_overlay` branch in the child's page-header-hero
   template. The template drops the parent's narrow grid widths off the <h1>;
   these three rules handle what class swaps cannot reach.
   --------------------------------------------------------------------------- */

/* `.c-block__group` sets justify-content:flex-end at the same specificity as
   the `u-flex--justify-center` utility ALPS puts on it, so source order alone
   decided the vertical position. Pin it, and centre horizontally too. */
.c-media-block.c-block__full .dcc-hero--centered {
  justify-content: center;
  align-items: center;
}

/* Keep the heading from running the full width of a wide viewport. */
.c-media-block.c-block__full .dcc-hero--centered .dcc-hero__text {
  max-width: 60rem;
  margin-left: auto;
  margin-right: auto;
}

/* `.c-block__meta` (the hero kicker) is display:flex with
   justify-content:flex-start, so text-align cannot centre its children.
   Narrower than the heading above it: the kicker is set uppercase and bold, so
   it needs a shorter measure to stay readable across more than one line. */
.c-media-block.c-block__full .dcc-hero--centered .c-block__meta {
  justify-content: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Sentence case, not caps. The uppercase comes from two places: `.c-block__meta`
   sets text-transform, and the span itself carries the `u-text-transform--upper`
   utility -- so the span has to be targeted directly to outrank it. */
.c-media-block.c-block__full .dcc-hero--centered .c-block__meta,
.c-media-block.c-block__full .dcc-hero--centered .c-block__meta .c-block__category {
  text-transform: none;
}

/* `.c-block__category` carries a right padding meant for a row of meta items
   sitting next to each other; on a single centred line it just shifts the text
   off-centre. */
.c-media-block.c-block__full .dcc-hero--centered .c-block__meta .c-block__category {
  padding-right: 0;
}

/* Hero CTA button.

   ALPS styles `.o-button--outline` with the palette's base colour for both text
   and border on a transparent background. Over a dark hero photograph that is
   almost no contrast, and the hover rule fills the background -- so the button
   reads as "invisible until you hover". Inside the full-screen hero, where the
   heading is already white, the CTA should be white too, inverting to a solid
   fill on hover and keyboard focus. */
.c-media-block.c-block__full .c-block__button.o-button--outline {
  color: #fff;
  border-color: #fff;
  background-color: transparent;
}

.c-media-block.c-block__full .c-block__button.o-button--outline svg path {
  fill: #fff;
}

.c-media-block.c-block__full .c-block__button.o-button--outline:hover,
.c-media-block.c-block__full .c-block__button.o-button--outline:focus {
  background-color: #fff;
  color: #34343c; /* palette: darker */
  border-color: #fff;
}

.c-media-block.c-block__full .c-block__button.o-button--outline:hover svg path,
.c-media-block.c-block__full .c-block__button.o-button--outline:focus svg path {
  fill: #34343c;
}