/*!
 * WomenFirst — widget additions
 * -----------------------------------------------------------------
 * Small rules for markup the custom Elementor widgets can produce but
 * the approved static design never contained. Kept separate so
 * wf-core.css stays a faithful extraction of the approved build.
 *
 * Loads after wf-core.css and v11-mobile.css.
 */

/*
 * In the design the photo opens a team member's profile. A member added
 * without a photo would otherwise have no trigger at all, so the name
 * becomes the button — styled to be indistinguishable from the heading
 * it replaces, apart from the pointer and focus ring.
 */
.team-name-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

.team-name-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.team-name-button:focus-visible {
  outline: 2px solid #5d17eb;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Native Elementor headings and paragraphs inside design sections.

   Elementor applies a widget's custom class to its outer wrapper, not to the
   heading or paragraph inside it. So `.section-title` styles the wrapper while
   the real <h2> keeps Elementor's own defaults — which is why section headings
   came out in Elementor's blue at the wrong weight.

   Making the inner element inherit hands the design's styling back.
   --------------------------------------------------------------- */
.section-title .elementor-heading-title,
.eyebrow .elementor-heading-title {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  margin: 0;
}

.lead .elementor-widget-container,
.lead .elementor-widget-container > p {
  font: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0;
}

/* Elementor's container adds its own flow; the design controls its own gaps. */
.shell > .elementor-widget:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------
   The WordPress admin bar.

   The site header is absolutely positioned at the top of the page, so when
   an administrator is logged in the admin bar sits on top of it and clips
   the brand logo. Visitors never see this, but the site owner sees it
   constantly, which makes the site look broken to the person judging it.

   The bar is 32px on desktop and 46px on narrow screens.
   --------------------------------------------------------------- */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ---------------------------------------------------------------
   Elementor gives every container width:100%. Inside the design's
   horizontal flex rows that makes the first block fill the row and
   pushes the one beside it out of view, so grouping containers are
   sized to their content instead.

   Only .journey-head is affected: every other block of this shape
   is a grid, where the track already constrains the width.
   --------------------------------------------------------------- */
.journey-head > .e-con,
.journey-head > .elementor-element {
  /*
   * A horizontal flex row. Elementor makes every child full width, so the
   * second one wrapped onto its own line and the block stood 170px taller
   * than the design instead of sitting beside the heading.
   */
  width: auto;
}

/* These two are ordinary blocks in the design. As Elementor containers they
   default to flex, which stretches their children and collapses the margins
   between them differently. */
.intro-copy,
.story-main,
.story-visual,
.story-content,
.about-journey-head,
.founder-card,
.founder-card-copy,
.faq-aside,
.faq-groups {
  display: block;
}

/* The story photograph is positioned to fill its frame. Elementor wraps every
   widget in a positioned div of its own, which would become the photograph's
   reference box instead — and that wrapper has no height, so the picture
   collapsed to nothing while still reporting as loaded. Leaving the wrapper
   unpositioned hands the reference back to .story-visual. */
.story-visual > .elementor-element {
  position: static;
}

/* ---------------------------------------------------------------
   The design's layout wrappers, rebuilt as Elementor containers.

   Elementor gives every container 10px of padding. These wrappers
   are structural — their spacing belongs to the design stylesheet —
   so that default is removed. .founder-card, .founder-card-copy and
   .contact-form-intro are deliberately absent: the design sets their
   padding itself, and zeroing it here would flatten them.
   --------------------------------------------------------------- */
.intro-grid,
.intro-copy,
.journey-head,
.availability-head,
.story-grid,
.story-main,
.story-visual,
.story-content,
.about-journey-head,
.about-journey-grid,
.team-intro,
.faq-intro,
.faq-layout,
.faq-groups,
.faq-aside,
.contact-hub-head,
.contact-form-panel {
  padding: 0;
}

/* The design pads only the top of this one, so the other three sides
   still need Elementor's default taken off. */
.contact-response {
  padding: 35px 0 0;
}

/* ---------------------------------------------------------------
   Elementor's own spacing, removed where the design supplies its own.

   Every Elementor container carries `--gap: 20px`, applied between
   its children. The design controls all of its spacing with margins
   and padding, so that gap is purely additive: it showed up as about
   20px of extra height in every section, and 40px in each
   eyebrow-and-heading block. Across a page it read as "unnecessary
   spaces… no formatting".

   The variable is overridden rather than `gap` itself, so that a gap
   set deliberately on a container in Elementor still wins — Elementor
   writes that as a more specific rule.
   --------------------------------------------------------------- */
.e-con.shell,
.e-con.intro,
.e-con.journeys,
.e-con.availability,
.e-con.page-body,
.e-con.about-journey,
.e-con.team-section,
.e-con.faq-stage,
.e-con.contact-hub,
.e-con.contact-form-stage,
.e-con.intro-grid,
.e-con.intro-copy,
.e-con.journey-head,
.e-con.availability-head,
.e-con.story-grid,
.e-con.story-main,
.e-con.story-visual,
.e-con.story-content,
.e-con.about-journey-head,
.e-con.about-journey-grid,
.e-con.founder-card,
.e-con.founder-card-copy,
.e-con.team-intro,
.e-con.faq-intro,
.e-con.faq-layout,
.e-con.faq-aside,
.e-con.faq-groups,
.e-con.contact-hub-head,
.e-con.contact-form-panel,
.e-con.contact-form-intro,
.e-con.contact-response,
.e-con.wf-head-group {
  /*
   * Elementor reads the gap from `--gap` on a plain container and from
   * `--row-gap` / `--column-gap` on a full-width one, so all three are
   * cleared or the gap reappears through whichever was missed.
   *
   * `--widgets-spacing` is deliberately left alone. It looks like a fourth
   * name for the same thing, but Elementor also feeds it into each widget's
   * bottom margin — zeroing it wiped the 24px the design puts under the
   * contact panel's heading.
   */
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
}

/* The eyebrow-and-heading group is a plain <div> in the design. */
.wf-head-group {
  display: block;
  padding: 0;
}

/* ---------------------------------------------------------------
   The design spaces its FAQ groups with `.faq-group + .faq-group`.
   Rebuilt as widgets each group sits in its own wrapper, so they are
   no longer siblings and the rule stopped matching — leaving the
   column 140px shorter than the design. The same spacing is applied
   through the wrappers.
   --------------------------------------------------------------- */
.faq-groups > .elementor-element + .elementor-element {
  margin-top: 70px;
}

@media (max-width: 620px) {
  .faq-groups > .elementor-element + .elementor-element {
    margin-top: 52px;
  }
}

/* ---------------------------------------------------------------
   Elementor containers wrap their children by default. The design's
   horizontal rows do not: the second block is meant to shrink and sit
   beside the first, not drop onto a line of its own. Wrapping made the
   journeys header stand 170px taller than the design.
   --------------------------------------------------------------- */
.e-con.journey-head {
  /*
   * Elementor containers stack their children in a column. The design's row
   * runs across: heading on the left, the lead paragraph on the right. Left as
   * a column the two sat one above the other and the block stood 170px taller.
   */
  /*
   * Set through Elementor's own variables. Its layout rules are written as
   * `.e-con.e-flex { flex-direction: var(--flex-direction) }` — two classes,
   * which outranks a plain `.journey-head { flex-direction: row }` however
   * late it loads. Driving the variable works with that cascade instead of
   * against it, and still lets a deliberate change in the editor win.
   */
  --flex-direction: row;
  --flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/* ---------------------------------------------------------------
   In the design the "Prefer to call?" label and the number are the two
   children of .contact-response, stacked by its own flex rule. Rebuilt
   as a text widget they arrived inside a wrapper, so the panel had one
   child instead of two and lost 23px of height. `display: contents`
   removes the wrapper from layout without removing it from the page,
   so the two lines become the panel's children again.
   --------------------------------------------------------------- */
.contact-response > .elementor-element,
.contact-response .elementor-widget-container {
  display: contents;
}


/* ---------------------------------------------------------------
   Below 980px the design narrows the founder card to
   `min(440px, 100%)` and centres it. Overriding `width` directly
   here beat that rule and left the card full width on tablets, so
   Elementor's own width variable is set instead: it supplies the
   default, and the design's rule still wins where it applies.
   --------------------------------------------------------------- */
.e-con.founder-card {
  --width: auto;
}

/* ---------------------------------------------------------------
   Two blocks change how they lay out at narrower widths, and the
   corrections above were unconditional — so they overrode the
   design's own media queries and left the FAQ sidebar and the
   journeys header taller than they should be on tablets.

   The design's breakpoints are mirrored here rather than fought.
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  /* The journeys header stops being a row and simply stacks. */
  .e-con.journey-head {
    display: block;
  }
}

@media (min-width: 621px) and (max-width: 980px) {
  /* The FAQ sidebar puts its photograph beside the text. */
  .e-con.faq-aside {
    display: grid;
  }
}

/* ---------------------------------------------------------------
   In the design the lead paragraph is a direct child of the
   journeys header, so its lower margin collapses against the
   header's edge. Wrapped in a widget it no longer collapsed, and
   the block stood 17px taller. Removing the wrapper from layout
   restores the design's own structure — and on wider screens it
   also lets `.journey-head p.lead { max-width: 450px }` apply to
   the paragraph itself, exactly as the design intends.
   --------------------------------------------------------------- */
.journey-head > .elementor-widget-text-editor,
.journey-head > .elementor-widget-text-editor > .elementor-widget-container {
  display: contents;
}

/* ---------------------------------------------------------------
   Below 980px the journeys header becomes a plain block, and in
   the design its closing paragraph's lower margin collapses
   against the block's edge, adding no height. Wrapped in a widget
   it no longer collapses and the block stood 17px taller.

   Only this one block needs it: the other headers are grids, where
   margins never collapse — the design counts them there, and
   removing them made those blocks too short.

   Removing the trailing margin reproduces what the design actually
   renders, rather than fighting the collapsing rules.
   --------------------------------------------------------------- */
@media (max-width: 980px) {
  .journey-head p:last-child {
    margin-bottom: 0;
  }
}

/* ---------------------------------------------------------------
   In the design `.lead` is the paragraph itself. Rebuilt as a text
   widget the class lands on the widget's wrapper instead, so a rule
   written for the paragraph — `.contact-hub-head .lead { margin: 0 }`
   — styled the wrapper while the paragraph kept its own margins, and
   the block stood 33px taller than the design.

   Only the size and colour rules inherit through the wrapper; the
   margin has to be passed down explicitly.
   --------------------------------------------------------------- */
.contact-hub-head .lead p {
  margin: 0;
}

/* ---------------------------------------------------------------
   The design puts 24px under the contact panel's heading
   (`.contact-form-intro .section-title { margin: 27px 0 24px }`).
   As a widget the heading loses that lower margin — Elementor
   zeroes each widget's bottom margin with a rule of its own — and
   the panel came out 8px short once the paragraph's own 16px
   margin was all that remained.

   This is the only place the design gives a section title a
   margin, so one rule restores it.
   --------------------------------------------------------------- */
.contact-form-intro .elementor-widget.section-title {
  margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   CTA band: photograph to the screen edge.

   The approved design stops the photograph at the page gutter, so
   on wide screens a band of purple sits to its right — 48px at the
   design's own width, growing as the window widens. The site owner
   asked for the photograph to run to the edge instead.

   The left gutter is preserved exactly as `.shell` computes it, so
   the wording stays where the design puts it and only the picture
   extends. Controlled by a switch on the widget.
   --------------------------------------------------------------- */
.city-cta.has-visual.has-bleed {
  /*
   * `clip` rather than `hidden`: it trims the picture at the band's edge
   * without turning the band into a scroll container, so a vertical
   * scrollbar can never push the page sideways.
   */
  overflow-x: clip;
}

.city-cta.has-visual.has-bleed .cta-visual {
  /*
   * Only the picture moves. Widening the whole grid was the first attempt,
   * but it gave the heading more room, the wrapping changed, and the band
   * came out 37px shorter than the design — a visible change to text that
   * was not asked for. Pulling the picture out over the gutter leaves every
   * column, and so every line of type, exactly where the design put it.
   */
  margin-right: calc(-1 * max(48px, (100vw - var(--max)) / 2));
}

/*
 * The pull has to match the gutter it is pulling into, and the gutter
 * narrows as the screen does — `.shell` gives the page 48px of side margin
 * on a desktop, 24px below 980px and 18px below 620px.
 *
 * One fixed 48px overshot both of the smaller ones: the picture ran 24px
 * past the right edge on a tablet and was clipped, and on a phone the
 * centring pushed it right as well, leaving a strip of purple down the left
 * where the photograph should have been. That is what the site owner saw.
 */
@media (max-width: 980px) {
  .city-cta.has-visual.has-bleed .cta-visual {
    margin-right: -24px;
  }
}

/*
 * Below 620px the design stops putting the picture beside the wording and
 * stacks it underneath, centred and capped at 390px. That leaves purple down
 * both sides — 26px of it on a 442px phone, and 115px at 620px — and the site
 * owner reported the picture as "cutting from both the sides".
 *
 * So on a stacked layout it runs the full width of the screen instead, which
 * is the same thing it does beside the wording on a desktop.
 *
 * `50%` resolves against the grid area, and at this width that is the page
 * column — so `50% - 50vw` is exactly the side margin, whatever the design
 * makes it at any given size, with no number here to keep in step with it.
 * `stretch` because a centred item with an automatic width shrinks to fit
 * rather than filling the space the margins opened up.
 */
@media (max-width: 620px) {
  .city-cta.has-visual.has-bleed .cta-visual {
    justify-self: stretch;
    width: auto;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* ---------------------------------------------------------------
   Legal pages.

   The Privacy Policy and Terms are long documents rather than
   designed layouts, so they get one job: be readable. A single
   column at a comfortable measure, the design's own type, and
   enough air between sections to find your place again.
   --------------------------------------------------------------- */
.wf-legal {
  padding: clamp(120px, 12vw, 190px) 0 clamp(80px, 9vw, 130px);
}

.wf-legal .shell {
  max-width: 820px;
}

.wf-legal h1 {
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  margin: 0 0 14px;
}

.wf-legal .wf-legal-updated {
  color: #6b7280;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 52px;
}

.wf-legal h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  letter-spacing: -0.02em;
  margin: 56px 0 16px;
  padding-top: 26px;
  border-top: 1px solid #e5e7eb;
}

.wf-legal h3 {
  font-size: 1.08rem;
  margin: 32px 0 10px;
}

.wf-legal p,
.wf-legal li {
  color: #2e2e2e;
  font-size: 1.02rem;
  line-height: 1.8;
}

.wf-legal p {
  margin: 0 0 18px;
}

.wf-legal .wf-legal-lead {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: #1a1a1a;
}

.wf-legal ul,
.wf-legal ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.wf-legal li {
  margin-bottom: 9px;
}

.wf-legal a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The apps' permission table. Scrolls on its own rather than
   pushing the page sideways on a phone. */
.wf-legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 24px;
  display: block;
  overflow-x: auto;
}

.wf-legal-table th,
.wf-legal-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 16px 14px 0;
  text-align: left;
  vertical-align: top;
  font-size: 0.98rem;
  line-height: 1.7;
}

.wf-legal-table th {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #6b7280;
}

/* A visible note for the site owner, not for visitors. It is meant
   to be conspicuous so it cannot be published by accident. */
.wf-legal-note {
  background: #fef6e7;
  border-left: 3px solid #d97706;
  padding: 16px 20px;
  margin: 0 0 24px;
  font-size: 0.95rem;
}

/* The legal pages have no hero behind the header, so it gets the brand's
   dark bar of its own — same height, same type, just something to sit on. */
body.wf-legal-page .site-header {
  background: #0b0713;
}

/* ---------------------------------------------------------------
   Sticky header, offered as a switch on the Header & Footer tab.

   The design's header sits over the hero and scrolls away with it.
   Kept visible instead, it needs a background of its own — over a
   white section its white type would otherwise be invisible, which
   is exactly what happened on the legal pages.
   --------------------------------------------------------------- */
body.wf-sticky-header .site-header {
  position: fixed;
  background: #0b0713;
  transition: background 0.2s ease;
}

/* The header no longer takes part in the flow, so the first section
   needs the space it used to occupy. */
body.wf-sticky-header main > .elementor > *:first-child,
body.wf-sticky-header main > section:first-child {
  scroll-margin-top: 93px;
}

@media screen and (max-width: 782px) {
  body.wf-sticky-header.admin-bar .site-header {
    top: 46px;
  }
}

/* ---------------------------------------------------------------
   Keyboard use.

   Two faults found by tabbing through the site rather than by
   scanning it:

   1. The skip link stayed off-screen even when focused, so the
      first thing a keyboard user reached was invisible. It also
      depended on a WordPress core stylesheet that the performance
      work removes, so the theme now styles it itself.

   2. The focus ring was the browser's default near-black outline,
      which is invisible against the dark hero and footer.
   --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: #ffffff;
  color: #0b0713;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

/*
   Brought on screen the moment it is reached.

   The link also carries WordPress's `screen-reader-text` class, which
   clips it to a zero-sized rectangle. Moving it into view is not
   enough on its own — the clip has to be released too, or it sits in
   the corner at the right position and draws nothing.
*/
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: nowrap;
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

/*
   A ring that reads on both the white sections and the near-black
   ones: a purple line with a white line just outside it, so one of
   the two always contrasts with whatever is behind.

   :focus-visible rather than :focus, so it appears for keyboard use
   and not on every mouse click.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

/* On the dark sections the ring is inverted: white line inside,
   purple glow outside. */
.hero :focus-visible,
.site-header :focus-visible,
.footer :focus-visible,
.city-cta :focus-visible,
.ticker :focus-visible,
.safety-stage :focus-visible,
.quote-stage :focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(93, 23, 235, 0.85);
}

/* Someone who has asked for less motion should not be given a
   transition on the focus ring either. */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   The header and footer, when built on the Elementor canvas.

   Elementor's free edition has no header builder, so these are
   assembled from the WomenFirst widgets instead.

   Kept as small as it can be. The header's height, the footer's
   column counts and its gaps all change at three breakpoints in the
   design's own stylesheet, and copying those numbers here would mean
   maintaining them twice and watching them drift — so they are left
   alone, and the design's rules govern as they always did. Only two
   things have to be answered: `display`, which Elementor sets with
   two classes, and container padding, which it sets with logical
   longhands from a stylesheet that loads later.
   --------------------------------------------------------------- */

/* Three classes, to beat the `.e-con.shell { display: block }` reset
   that the page wrappers rely on. Without it the logo and the menu
   stack on top of each other. */
.e-con.shell.nav {
  display: flex;
}

.e-con.footer-top {
  display: grid;
}

.e-con.footer {
  display: block;
}

/*
 * Elementor gives every widget a bottom margin of `--widgets-spacing`, which
 * is right on a page — the design's sections do not carry their own — but
 * wrong here: the header and footer space themselves, and the extra margin
 * added 48px to the footer and pushed the store badges away from the logo.
 */
.e-con.site-header,
.e-con.site-header .e-con,
.e-con.footer,
.e-con.footer .e-con {
  --widgets-spacing: 0px;
}

/*
 * The menu button has to sit above the full-screen menu it opens. Both are
 * inside one widget wrapper, which becomes their stacking context, so the
 * z-index the design gives the button no longer reaches past it.
 */
@media (max-width: 980px) {
  .e-con.shell.nav .elementor-widget-wf_nav_menu {
    position: relative;
    z-index: 60;
  }
}

/*
 * Padding is the one thing that has to be restated.
 *
 * Elementor sets container padding with the logical longhands
 * (`padding-block-start` and friends), from a per-site stylesheet it writes
 * into uploads/ and loads after the theme's. So its 10px default beats
 * `.footer { padding: 92px 0 30px }` whatever the specificity — a longhand
 * always wins over a shorthand that came earlier. Restating it here, in a
 * sheet that loads later still, hands it back.
 *
 * The numbers are the design's own, taken from the declarations that actually
 * win. The stylesheet carries several `.footer` padding rules from successive
 * versions of the design; the last unconditional one governs, which is why
 * these read 92/72 rather than the 100/80 higher up the file.
 *
 * Duplicated values are a liability, so they are guarded: the comparison in
 * tests/specs/wordpress-header-footer.spec.js photographs the header and the
 * footer with and without these templates, on three pages at three widths,
 * and fails the moment the two stop matching.
 */
.e-con.site-header,
.e-con.shell.nav,
.e-con.footer .e-con.shell {
  padding: 0;
}

.e-con.footer {
  padding: 92px 0 30px;
}

.e-con.footer-top {
  padding: 0 0 72px;
}

/*
 * Only one breakpoint, not two. The stylesheet does carry a set of smaller
 * footer paddings under `max-width: 980px`, but they belong to an earlier
 * version of the design and a later unconditional rule overrides them — so at
 * 768px the footer keeps its full padding. Copying that 980px block made the
 * footer 69px shorter than the built-in one on a tablet.
 */
@media (max-width: 620px) {
  .e-con.footer {
    padding-top: 62px;
  }

  .e-con.footer-top {
    padding-bottom: 44px;
  }
}

/*
 * The footer's bottom line, when its parts come from the settings.
 *
 * Words and a picture sit on one line, in that order, and never wrap onto two
 * — an owner who put a badge beside their credit line found it stacked above
 * the words and reasonably said the site had put it somewhere else.
 */
.footer-bottom .footer-slot {
  display: inline-flex;
  align-items: center;
  /* Centred in its column, so a part with a picture in it does not sit
     higher than the two beside it. */
  align-self: center;
  /*
   * The design's own spacing, to the character: .footer-copyright is laid out
   * as a row with `gap: 0.5em`. A flat 10px was here instead — sixty per cent
   * wider than the design at this type size — and it is what made the bars
   * around Privacy and Terms, the space before the maple leaf and the gap after
   * the badge all look loose and unconsidered.
   *
   * The box on the Footer tab overrides this, in pixels, per part.
   */
  gap: var(--footer-slot-gap, 0.5em);
  flex-wrap: nowrap;
  white-space: nowrap;
}

/*
 * Left at the left, middle in the middle, right at the right — the same three
 * positions the design uses for its own bottom line, so a part filled in from
 * the panel lands where the one it replaces was.
 */
.footer-bottom .footer-slot--left {
  justify-self: start;
}

.footer-bottom .footer-slot--center {
  justify-self: center;
}

.footer-bottom .footer-slot--right {
  justify-self: end;
}

/*
 * No colour of our own unless one was chosen.
 *
 * This used to fall back to white, which quietly overrode the colour the
 * design gives footer links — and white against the grey around it is a
 * contrast of 2.34:1, which an automated accessibility check flagged as a link
 * you cannot pick out except by colour. A colour set on the Footer tab is
 * applied on the link itself instead, so nothing is overridden until somebody
 * actually asks for it.
 */

/*
 * Only where a colour was actually chosen.
 *
 * A plain `.footer-slot a { color: ... }` was here once with white as its
 * fallback, and it overrode the colour the design gives footer links on every
 * site including ones that had never opened the Footer tab — which cost the
 * copyright line its accessibility. The attribute selector means this rule
 * does not exist until somebody picks a colour.
 */
.footer-bottom .footer-slot[style*="--footer-slot-link"] a {
  color: var(--footer-slot-link);
}

.footer-bottom .footer-slot__image {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
}

.footer-bottom .footer-slot__image-link {
  display: inline-flex;
  align-items: center;
}

/* On a phone the three parts stack, so each may use the width it needs. */
@media (max-width: 860px) {
  .footer-bottom .footer-slot {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/*
 * Cities you can press.
 *
 * The blocks under "Where we operate" and the strip on the contact page each
 * name a city that now has a page of its own, and neither did anything when
 * pressed. The card is the target now, not just the three words in it — a
 * block that looks pressable and only responds in one corner is worse than one
 * that does nothing at all, because people try twice and then give up.
 *
 * The design's own .city-item rules do the layout; these only add the parts an
 * anchor needs — the colour it would otherwise inherit from a link, and a hint
 * that it can be pressed.
 */
.city-list .city-item--link {
  display: block;
  color: inherit;
  text-decoration: none;
  /*
   * Inherited, not the anchor's own. A link brings its own line height and
   * font metrics, which made each card four pixels taller than the design —
   * caught by the comparison against the approved files, not by eye.
   */
  font: inherit;
  line-height: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.city-list .city-item--link:hover,
.city-list .city-item--link:focus-visible {
  background: rgba(93, 23, 235, 0.05);
}

.city-list .city-item--link:focus-visible {
  outline: 2px solid var(--brand, #5d17eb);
  outline-offset: -2px;
}

/*
 * The arrow appears on hover, the way the design's other links behave. It is
 * taken out of the flow: the glyph comes from a fallback font whose taller
 * metrics grew the heading's line box by a pixel, and four stacked cards on a
 * phone put the whole section four pixels below the approved design. Absolute
 * positioning means the arrow cannot affect the card's height at all.
 */
.city-list .city-item--link h3 {
  position: relative;
  padding-right: 22px;
}

.city-list .city-item--link h3::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.city-list .city-item--link:hover h3::after,
.city-list .city-item--link:focus-visible h3::after {
  opacity: 1;
}

/* The contact page's strip: the same idea, in one line. */
/*
 * The strip on the contact page is a grid, and its items are the city names.
 * Wrapping each name in a link made the link the grid item, with its own line
 * height — three to six pixels taller than the design depending on the width.
 * display:contents lets the name stay the grid item and the link stay a link.
 */
.contact-cities a {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.contact-cities a strong {
  cursor: pointer;
  transition: color 0.2s ease;
}

.contact-cities a:hover strong,
.contact-cities a:focus-visible strong {
  color: var(--brand, #5d17eb);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/*
 * The footer's brand column: circles and buttons on the left, cities beside.
 *
 * The cities block must begin level with the social circles and end level with
 * the download buttons. Two attempts got close and neither was exact, both for
 * the same reason: whichever way the two were set side by side, the cities
 * were a couple of pixels taller, so the cities set the height and the badges
 * stretched to them — the opposite of what was asked for.
 *
 * So the cities are taken out of the height calculation altogether. The badges
 * alone decide how tall this block is; the cities are pinned to the top of the
 * circles and the bottom of the buttons. Nothing here is a measured pixel
 * except the 26px, which is the design's own margin above the circles.
 */
/*
 * The cities as footer links.
 *
 * The block that sat beside the badges is gone: it took three releases to line
 * up where it was asked to, and by then it was still a column wedged into the
 * gap between two badges, belonging to nothing around it. Removed at the
 * owner's word, and they were right to call it.
 *
 * The markup and these styles remain, for whichever footer layout is chosen to
 * carry the cities properly.
 */
/*
 * The cities, along the row the download buttons sit on.
 *
 * The four link columns are shorter than the brand column beside them, which
 * leaves the right-hand half of that row empty. The band goes there: it starts
 * where the link columns start, runs to the edge of the footer, and carries a
 * heading in the same style as the columns above it.
 *
 * A row of its own in the same grid, spanning every column except the brand's.
 * Nothing is positioned by measurement, so nothing here goes stale when a badge
 * changes size or a fifth city is added - the two mistakes the earlier version
 * of this made, in that order.
 */
.footer .footer-top > .footer-cities-band {
  grid-column: 2 / -1;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 30px;
  /*
   * A floor, not a position. Aligning to the end of the row lines up the foot
   * of the band, margin included, so this only decides how close it may come
   * to the columns above when there is not room to line up at all.
   */
  margin-top: 22px;
}

/*
 * Level with the download buttons.
 *
 * Left to itself the band drops into a row of its own beneath the longest link
 * column, which put it a good deal lower than the buttons it was asked to sit
 * with. Instead the brand column is told to span both rows, the second row is
 * given whatever height is left over, and the band is set to the bottom of it.
 * Its foot then lands on the brand column's foot, which is the bottom of the
 * download buttons - stated as a relationship between the two, so it holds
 * whatever either of them contains.
 */
@media (min-width: 981px) {
  .footer .footer-top {
    grid-template-rows: auto 1fr;
    /*
     * The gap between the columns and the band, only. The design puts 64px
     * between rows, and 64px of it sat between the link columns and the band -
     * enough on its own to push the band below the download buttons however
     * the rest was arranged. The gap between the columns themselves is a
     * separate property and is untouched.
     */
    row-gap: 0;
  }

  .footer .footer-top > .footer-brand {
    grid-row: 1 / -1;
  }

  .footer .footer-top > .footer-cities-band {
    grid-row: 2;
    align-self: end;
  }
}

.footer .footer-cities-band h4 {
  margin: 0;
}

.footer .footer-cities-band ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .footer-cities-band li {
  margin: 0;
  padding: 0;
}

.footer-cities-band a {
  text-decoration: none;
  transition: color 0.2s ease;
}

/*
 * On a phone the footer is one column and the band is simply the last thing in
 * it, with the cities wrapping as they need to.
 */
@media (max-width: 980px) {
  .footer .footer-top > .footer-cities-band {
    grid-column: 1 / -1;
  }
}


/*
 * The bottom line, once it stacks.
 *
 * Below the width where the three parts fit side by side they drop under each
 * other — and each was centred inside its own cell, so on a phone they began
 * at three different places: 16px, 25px and 209px from the left. Nothing lined
 * up with anything, including the four columns of links directly above.
 *
 * Stacked, they share the left edge with the rest of the footer. Side by side,
 * the design's own left-middle-right arrangement is untouched.
 */
@media (max-width: 860px) {
  .footer-bottom {
    /*
     * One column, not three that wrap.
     *
     * The design stacks these below 620px, which left a gap: between 620 and
     * 900 the three parts stayed side by side and wrapped, so two sat on one
     * row and the third dropped underneath at a completely different indent.
     * A tablet showed the worst of it.
     */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    row-gap: 10px;
  }

  .footer-bottom .footer-slot {
    justify-content: flex-start;
    text-align: left;
    width: 100%;
  }
}