/* ============================================================
   Site footer — on every page.

   The home page's group footer, promoted to the site's. Markup in
   template-parts/site-footer.php, data in inc/solaris-footer.php.

   Values are the Solaris Design System tokens, loaded alongside this sheet on
   every page. Everything is scoped under .sol-footer, and the scope carries its
   own resets, because the footer lands on designed pages and Elementor pages
   alike and cannot lean on either one's element defaults.
   ============================================================ */

/* ---- Scope ------------------------------------------------- */

.sol-footer {
  /* The content column is 1280px with 32px gutters OUTSIDE it, the same
     wrapper every designed page uses, so the footer's column lines up with
     the page above it. */
  --wrap: calc(var(--layout-max-width) + 2 * var(--layout-gutter));

  background: var(--color-surface-default);
  color: var(--color-text-secondary);
  font: var(--type-body-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sol-footer *,
.sol-footer *::before,
.sol-footer *::after { box-sizing: border-box; }

/* In :where() so they weigh nothing of their own. They still outrank
   Bootstrap's reboot, which the site loads on every page, and never the
   component classes below. */
.sol-footer :where(p) { margin: 0; }
.sol-footer :where(img) { max-width: 100%; display: block; }
.sol-footer :where(a) { text-decoration: none; }

/* One ring, and never a browser default outline sitting beside it. */
.sol-footer :where(a):focus-visible { outline: 0; box-shadow: var(--elevation-focus); }

.sol-footer__wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
}

/* ---- Disclaimer -------------------------------------------- */

/* Capping the measure matters: unconstrained across the 1280px column this
   disclaimer sets a 160-character line. */
/* No top pad. The gap above the footer is the closing section's own 112, and
   the footer carries none of its own. CA-1.6. */
.sol-footer__disclaimer {
  padding-bottom: var(--space-600);
}

.sol-footer__disclaimer p {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
  max-width: 68ch;
  margin: 0 auto;
  text-align: center;
}

/* ---- Panel ------------------------------------------------- */

/* Square corners, unlike every other grey panel on the site. The footer block
   is the bottom of the document and a radius here would leave it floating.

   Three items in named areas rather than two columns with one of them nested:
   the lockup top-left, the link columns filling the right across both rows,
   the legal links bottom-left. The 1fr on the first row is what pushes the
   legal row down to sit level with the bottom of the tallest link column, and
   the grid's own 48px gap is the minimum space above it. See the note in
   template-parts/site-footer.php for why this is not one nested column. */
.sol-footer__panel {
  background: var(--color-surface-offset);
  padding: var(--space-700);
  display: grid;
  grid-template-columns: minmax(min(260px, 100%), 1fr) 2.2fr;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "brand cols"
    "legal cols";
  gap: var(--space-700);
}

.sol-footer__logo { grid-area: brand; display: block; align-self: start; }
.sol-footer__logo img { width: 168px; height: auto; }

.sol-footer__legal {
  grid-area: legal;
  align-self: end;
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-500);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-600);
}

.sol-footer__cols {
  grid-area: cols;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-600);
}

.sol-footer__col { display: flex; flex-direction: column; gap: var(--space-100); }

.sol-footer__heading {
  font: var(--type-item-base);
  letter-spacing: var(--type-item-base-tracking);
  color: var(--color-text-primary);
  margin-bottom: var(--space-200);
}

/* 44px minimum on every footer link, which is the whole reason they are flex
   rows rather than plain inline anchors: at body/sm a link's own line box is
   21px and two of them stacked are a coin toss on a phone. */
.sol-footer__legal a,
.sol-footer__col a,
.sol-footer__social a {
  display: flex;
  align-items: center;
  min-height: var(--target-min);
  font: var(--type-body-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--motion-duration-fast) var(--motion-ease);
}

.sol-footer__legal a:hover,
.sol-footer__col a:hover,
.sol-footer__social a:hover { color: var(--color-text-primary); }

/* The reader's own page, at full ink. Keyed on aria-current itself, so the
   screen-reader fact and the colour cannot drift apart. CA-9.8. */
.sol-footer__col a[aria-current="page"] { color: var(--color-text-primary); }

/* ---- Copyright row ----------------------------------------- */

.sol-footer__copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-600);
  padding-top: var(--space-500);
  padding-bottom: var(--space-700);
}

.sol-footer__copyright p {
  font: var(--type-body-sm);
  color: var(--color-text-muted);
}

.sol-footer__copyright strong { color: var(--color-text-secondary); }

.sol-footer__social { display: flex; gap: var(--space-500); }

/* ============================================================
   Responsive
   ============================================================ */

/* ---- 960px: the panel stacks -------------------------------
   Earlier than the 720px the handoff gives it, and measured rather than
   guessed. The panel splits 1 : 2.2 with a 48px gap, so the three link
   columns only ever get 69% of what is left — which is 517px at a 960px
   viewport and 385px at 768. Three columns inside 385px is 107px each, and
   "Roles You Can Hire" then sets over three lines while the lockup beside it
   sits in a column twice as wide as it needs.

   Stacked, the same three columns get the full width and the lockup gets a
   row of its own. The link columns stay at three until the phone breakpoint
   below takes them to two. */
@media (max-width: 959.98px) {
  .sol-footer__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "brand" "cols" "legal";
  }
}

/* ---- 720px: phone ------------------------------------------ */
@media (max-width: 720px) {

  /* Already single-column from 960px up; here it is only the padding, which
     has the same measure problem the home page's cards do. */
  .sol-footer__panel {
    padding: var(--space-600) var(--space-500);
    gap: var(--space-600);
  }

  /* Two link columns, which leaves "More Info" alone on the second row. That
     is the better of the two bad options: three columns single-file makes the
     footer 1,400px tall on a phone, which is a third of a whole document
     spent on links nobody scrolled down for. The gap comes in a step to buy
     back the width that "Roles You Can Hire" needs. */
  .sol-footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-500);
  }

  .sol-footer__copyright {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-400);
  }

}

@media (prefers-reduced-motion: reduce) {
  .sol-footer *,
  .sol-footer *::before,
  .sol-footer *::after {
    transition: none !important;
    animation: none !important;
  }
}