/**
 * Footer — accessibility and responsive behaviour.
 *
 * Loaded after base.css. Everything is nested under .pl-foot, a class only the
 * footer carries. The names it uses are generic (.footer, .footer-section,
 * .footer-container) and .footer in particular is also styled by
 * insights_homepage.css, auth_page.css, google_ads.css and email.css, so
 * editing base.css would reach pages that have nothing to do with this.
 *
 * Desktop above 1240px is meant to look untouched. The only rules outside the
 * media queries are resets for elements whose tag changed for accessibility,
 * and :focus-visible, which a mouse never triggers.
 *
 * @author Murtaza Lightwala
 * @date   3rd September 2026
 *
 * Edit log:
 *   30 Oct 2026 - Colours use theme.css variables.
 */

/* --- Parity resets ---------------------------------------------------------
   The three modal triggers were <a href="#id"> acting as buttons. They are
   real buttons now, so the anchor's appearance has to be restored. Bootstrap's
   reboot already gives buttons font:inherit, so this is mostly chrome. */

.pl-foot .footer-section ul li button {
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--pl-color-text-inverse);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* --- Focus -----------------------------------------------------------------
   There was no focus indicator anywhere in the footer. :focus-visible ignores
   mouse clicks, so a mouse user sees no difference. */

.pl-foot :focus-visible {
  outline: 2px solid #45dae3;
  outline-offset: 2px;
  border-radius: 4px;
}

/* The phone and email are real mailto:/tel: links now instead of plain text, so
   without this they would arrive as default blue underlined anchors. */
.pl-foot .footer-p a {
  text-decoration: none;
  color: var(--pl-color-text-inverse);
}

/* --- Responsive ------------------------------------------------------------
   base.css has no footer rule in any media query, so the five sections keep
   their content widths (250 / 118 / 146 / 369 / 185 = 1068px) at every size and
   simply wrap where they land. That stranded one section alone on a second row,
   and by 500px it was a 2/1/1/1 staircase four rows deep.

   A grid replaces the guesswork: fixed column counts, so no orphans. Nothing
   here applies above 1240px, which is why the full desktop bar cannot move. */

@media screen and (max-width: 1240px) {
  .pl-foot .footer-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 32px;
    max-width: 1000px;
  }

  /* minmax(0,1fr) lets Insights, the widest column at 369px because of its long
     link text, shrink rather than force the track open. */

  /* Flush left. base.css indents .footer-p by 2rem and the two legal links
     carry the same indent inline, so the logo sat 32px left of everything
     beneath it and nothing lined up with the second row. */
  .pl-foot .footer-p {
    padding-left: 0;
  }

  .pl-foot .footer-section ul li a {
    padding-left: 0 !important;
  }

  /* The lists were too airy once the columns stacked. */
  .pl-foot .footer-section ul li {
    margin-bottom: 2px;
  }

  .pl-foot .footer-section h4 {
    margin-bottom: 12px;
  }

  .pl-foot .logo-with-text {
    margin-bottom: 0.5rem;
  }
}

@media screen and (max-width: 768px) {
  .pl-foot .footer-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 620px;
  }

  /* Bigger hit targets, but padding rather than margin so the rhythm stays
     tight. base.css gives these links none, leaving a ~22px tap area. */
  .pl-foot .footer-section ul li a,
  .pl-foot .footer-section ul li button {
    display: inline-block;
    padding: 8px 0;
  }

  .pl-foot .footer-section ul li {
    margin-bottom: 0;
  }

  .pl-foot a,
  .pl-foot button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(69, 218, 227, 0.25);
  }
}

@media screen and (max-width: 440px) {
  .pl-foot .footer-container {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }

  /* Deliberately not centred: the logo stays on the left edge so it lines up
     with every column below it. */
  .pl-foot {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}