/* Figma: 213:348 (desktop), 214:1135 (mobile).

   Layout, colour and spacing live in module.html. What remains is the part a
   child cannot state about itself — where it sits in the grid — plus the
   artwork's offsets, interaction state and the icon boxes.

   The column switch is Tailwind's stock xl, 80rem/1280px, matching the tw:xl:
   utilities in module.html. The artwork has one switch of its own at its own
   width, read only by the offsets below. */

/* --- Chevron artwork ------------------------------------------------------ */

/* Anchored to the top right and clipped by the footer's own bounds. It hangs
   1.75rem past the right edge so the chevrons are cut mid-stroke rather than
   ending flush against it. */
.auxo-footer__pattern {
  top: 0;
  right: -1.75rem;
}

@media (width >= 80rem) {
  .auxo-footer__pattern {
    top: 1rem;
  }
}

/* The artwork is 556px wide. Once the viewport is narrower than that it can no
   longer hang off the right edge without pushing its chevron points off screen
   entirely, so it anchors left instead. The number is the artwork's own width,
   which is why it is written as one. */
@media (width < 556px) {
  .auxo-footer__pattern {
    right: auto;
    left: 0;
  }
}

/* --- Grid placement ------------------------------------------------------- */

/* Below the column breakpoint the columns are a grid so Ask Axel can sit
   beside the first column, level with the social row, while the remaining
   columns stack full width beneath it. A grid child cannot name its own row
   or column, so these stay in CSS. */
@media (width < 80rem) {
  /* Two tracks on the first row: the contact column taking the free space, and
     the button at its intrinsic width beside it. An auto-fit track list cannot
     do this job — it lays down as many tracks as the width allows, three or
     four at tablet widths, and the button then auto-places into one of them
     partway across the footer instead of against its right edge. */
  .auxo-footer__columns {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  /* Every column after the first spans whatever tracks the row ended up with. */
  .auxo-footer__column {
    grid-column: 1 / -1;
  }

  .auxo-footer__column:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  /* Beside the first column while both fit, wrapping beneath it when they do
     not. justify-self: end holds it against the footer's right edge on the
     shared row; on a row of its own that end is the left, so it reads as
     aligned either way. */
  .auxo-footer__axel {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    justify-self: end;
  }
}

/* Above it, the row is flex and the button is pushed to the far end. */
@media (width >= 80rem) {
  .auxo-footer__axel {
    margin-left: auto;
  }
}

/* A column whose "stack links" field is set keeps its single file at every
   width, rather than flowing across the row below the column breakpoint. The
   modifier has to outrank the base utilities on the same element, which a
   second utility class cannot do, so it lives here. */
@media (width < 80rem) {
  .auxo-footer__list--stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.5rem;
  }
}

/* --- Icons ---------------------------------------------------------------- */

/* Sized in markup: the text utility drives the drawn glyph, and w-[1em]
   squares its box so the narrow Facebook mark and the square Instagram one
   take the same width and the row's gaps stay even. Only the hover fade needs
   a selector here, since it reads the link's state. */
.auxo-footer__social-icon {
  transition: 0.2s ease-in-out opacity;
}

.auxo-footer__social-link:hover .auxo-footer__social-icon {
  opacity: 0.7;
}

/* --- Interaction state ---------------------------------------------------- */

a.auxo-footer__link:hover,
button.auxo-footer__link:hover
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3125rem;
}

/* Ring the footer's own links; .auxo-footer__axel keeps its inset ring. */
.auxo-footer__brand:focus-visible,
.auxo-footer__link:focus-visible,
.auxo-footer__social-link:focus-visible {
  outline: var(--auxo-focus-width) solid currentColor;
  outline-offset: var(--auxo-focus-width);
}

/* The theme transitions every property on <a>, which animates the ring
   outwards as it appears. Limit it to the colours that should fade. */
.auxo-footer a {
  transition-property: color, background-color, border-color;
}

/* Once the button and the contact column can no longer share a row, the pair
   collapses to a single column and the button takes its own row beneath the
   social links. The width is not a frame measurement: it is the column's 200px
   readable minimum, plus the button at its intrinsic width, plus the 1rem gap
   between them, plus the 1.25rem gutter either side. Below that the two cannot
   both fit, whatever the copy. */
@media (width < 26.5rem) {
  .auxo-footer__columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .auxo-footer__axel {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    justify-self: start;
  }
}

/* The label is nowrap so it stays on one line at every normal width. That makes
   the button as wide as its copy, which a long or translated label can push
   past the gutter on the narrowest phones. Capping it at its own grid area lets
   the label wrap at that last resort rather than overflow the footer. */
.auxo-footer__axel {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}