/*
 * Explorer One mobile footer refinement. Loaded only by header-explorer-one.php (Explorer One
 * public pages). CSS-only: the shared footer markup is unchanged. Everything is scoped to
 * body.academy-explorer-one-page AND to below 48rem, so the desktop footer and every other
 * Academy page are untouched. Adds a compact two-column layout plus the reference section icons.
 */

@media (max-width: 47.99rem) {
  /* Intro (brand + tagline) and copyright stay full-width (siblings of __columns). */

  /* Two columns: Academy (top-left), Support (below-left), Products (full right column). */
  body.academy-explorer-one-page .academy-site-footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.5rem;
    row-gap: 1.75rem;
    align-items: start;
  }
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(1) { grid-column: 1; grid-row: 1; } /* Academy */
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; } /* Products */
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(3) { grid-column: 1; grid-row: 2; } /* Support */

  /* Section heading icon: a tinted tile (::before) with the brand-blue glyph over it (::after),
     drawn with a mask so it works in every current browser. Reference glyphs per section. */
  body.academy-explorer-one-page .academy-site-footer__columns h2 {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 1.75rem;
    padding-left: 2.25rem;
  }
  body.academy-explorer-one-page .academy-site-footer__columns h2::before,
  body.academy-explorer-one-page .academy-site-footer__columns h2::after {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 1.75rem; height: 1.75rem;
    transform: translateY(-50%);
    pointer-events: none;
  }
  body.academy-explorer-one-page .academy-site-footer__columns h2::before {
    border-radius: 8px;
    background: rgba(13, 68, 232, 0.10);
  }
  body.academy-explorer-one-page .academy-site-footer__columns h2::after {
    background: #0d44e8;
    -webkit-mask: var(--eo-foot-ico) center / 1.05rem no-repeat;
    mask: var(--eo-foot-ico) center / 1.05rem no-repeat;
  }

  /* Academy = graduation cap */
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(1) h2 {
    --eo-foot-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 8.5 12 13l9.5-4.5L12 4Z'/%3E%3Cpath d='M6 10.5V15c0 1.2 2.7 2.5 6 2.5s6-1.3 6-2.5v-4.5'/%3E%3Cpath d='M21.5 8.5v4'/%3E%3C/svg%3E");
  }
  /* Products = layers */
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(2) h2 {
    --eo-foot-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 7.5 12 12l9-4.5L12 3Z'/%3E%3Cpath d='M3 12l9 4.5L21 12'/%3E%3Cpath d='M3 16.5 12 21l9-4.5'/%3E%3C/svg%3E");
  }
  /* Support = headset */
  body.academy-explorer-one-page .academy-site-footer__columns > nav:nth-child(3) h2 {
    --eo-foot-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 16 0'/%3E%3Crect x='3' y='12' width='4' height='7' rx='1.5'/%3E%3Crect x='17' y='12' width='4' height='7' rx='1.5'/%3E%3C/svg%3E");
  }

  @media (forced-colors: active) {
    body.academy-explorer-one-page .academy-site-footer__columns h2::after { background: CanvasText; }
  }
}