/* The site footer's layout — hand-written, shared by every page that carries `#footer`.

   Nicepage draws the footer as four stacked `<p>` blocks pulled into three apparent columns with
   negative top margins and fixed left/right margins (`.u-footer .u-text-1..4` in nicepage.css).
   Those numbers only hold for the exact strings the export was made from. The legal line sits in
   a ~92px slot, so once it read "Privacy · Terms · Support" it either wrapped under ABOUT or, once
   widened to fit on one line, ran across CONTACT US.

   So the geometry is replaced outright rather than nudged: an explicit grid above 767px, a plain
   column below it. The columns size themselves from their content, so new link text cannot push a
   block on top of its neighbour again.

   Kept in one file, linked by every footer page, because the previous fix lived in each page's own
   stylesheet and a later correction reached only one of them. Keyed on `#footer`, which outranks
   nicepage.css's `.u-footer` rules, and named outside the `u-*` namespace, so a Nicepage re-export
   can neither collide with it nor silently revert it. A re-export does rewrite each page's
   `<head>`, so re-add the `<link>` to this file afterwards. */

#footer .u-group-elements-1 {
  display: grid;
  grid-template-columns: 140px 250px minmax(300px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 30px;
  width: min(900px, calc(100% - 112px));
  min-height: 86px;
  margin: 49px auto 49px 56px;
}

/* `.u-clearfix` on the same div gives it `:before`/`:after` with `content: ""`. In a grid or flex
   container those become items of their own and take a slot each; they have no business here. */
#footer .u-group-elements-1:before,
#footer .u-group-elements-1:after {
  display: none;
}

#footer .u-text-1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

#footer .u-text-4 {
  grid-column: 2;
  grid-row: 1;
}

#footer .u-text-3 {
  grid-column: 2;
  grid-row: 2;
  white-space: nowrap;
}

#footer .u-text-2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}

#footer .u-text-1,
#footer .u-text-2,
#footer .u-text-3,
#footer .u-text-4 {
  width: auto;
  margin: 0;
}

@media (max-width: 991px) {
  #footer .u-group-elements-1 {
    grid-template-columns: 120px 220px minmax(300px, 1fr);
    column-gap: 20px;
    width: 100%;
    margin-left: 0;
  }
}

/* Below 767px there is no room for three columns; stack them in reading order instead. */
@media (max-width: 767px) {
  #footer .u-group-elements-1 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto;
    min-height: 235px;
    margin: 74px 0 32px;
  }

  #footer .u-text-1 { order: 1; }
  #footer .u-text-4 { order: 2; }
  #footer .u-text-3 { order: 3; }
  #footer .u-text-2 { order: 4; }
}