/*
 * Site footer alignment.
 *
 * Loaded last, after wp-block-supports.css and the other hand-written sheets,
 * for the same reason header.css is: style.css is a verbatim copy of the live
 * theme and is not edited here, so a correction to it goes in a later file.
 *
 * WHAT THIS CHANGES, AND WHY
 *
 * Nothing under a footer column heading lined up with the heading, and inside
 * the Contact column nothing lined up with anything else. Measured at 1440px
 * before this file existed, taking each column's own left edge as zero:
 *
 *     Quick Links / Legal   heading 0    link text +18
 *     Contact               heading 0    phone/email text +40
 *                                        address text     +20
 *                                        ABN text           0
 *                                        My Account label +58
 *
 * Two causes, both in the theme.
 *
 * 1. `.footer-nav a::before` is the arrow that slides in on hover. It is hidden
 *    with `opacity: 0`, which paints nothing but still takes part in layout, so
 *    every link in the footer sat one arrow-plus-gap to the right of its own
 *    heading, permanently. It is taken out of flow here and hung in the grid
 *    gutter instead, so it still slides in on hover and the link text now
 *    starts at the column edge.
 *
 * 2. The Contact column mixes rows that have a leading icon with rows that do
 *    not, and the icons themselves did not agree on a width. The phone and
 *    envelope sit inside an `<a>` (so they also carried the phantom arrow), the
 *    location pin sits directly in its `<li>`, and the ABN line has no icon at
 *    all — four different indents in one column. The icons are given one fixed
 *    width here and the icon-less line is padded to match, so the icons form a
 *    gutter and every line of text starts on the same vertical.
 *
 * The My Account button is excluded from the arrow: it is a button, not a nav
 * link, and the arrow was only ever adding dead space inside its border.
 */

#site-footer {
  /* Icon box + the flex gap after it. Every Contact row's text starts here. */
  --footer-icon-gutter: calc(14px + var(--space-2));
}

/* ---- The hover arrow, out of flow --------------------------------------- */

.footer-nav a {
  position: relative;
}

/*
 * -1.15em of var(--text-xs) is about 14px, so the arrow occupies the gutter
 * immediately left of the column and stops just short of the text. The grid gap
 * is 3rem at desktop and 2rem below 1024px, and the single-column layout still
 * has the container's 1.5rem of padding-inline, so it never leaves the page.
 */
.footer-nav a::before {
  position: absolute;
  left: -1.15em;
  top: 50%;
  line-height: 1;
  transform: translate(-6px, -50%);
}

/* Re-stated because the theme's hover rule sets transform on one axis only,
   which would drop the vertical centring above. */
.footer-nav a:hover::before {
  transform: translate(0, -50%);
}

.footer-nav a.btn-portal::before {
  content: none;
}

/* ---- The Contact column's icon gutter ----------------------------------- */

/*
 * Font Awesome sizes a glyph by its own advance width, so the pin was narrower
 * than the phone and the envelope. Pinning all three to the 14px the markup
 * already asks for makes the three rows agree.
 */
.footer-nav > li > i,
.footer-nav > li > a:not(.btn-portal) > i {
  flex: 0 0 14px;
  width: 14px;
  text-align: left;
}

/*
 * The ABN line: the only row in the footer with neither a link nor an icon, so
 * the only one that would otherwise start hard against the column edge while
 * the rows above it start after their icon.
 */
.footer-nav > li:not(:has(a)):not(:has(i)) {
  padding-left: var(--footer-icon-gutter);
}