/* Universal App Footer */
:root {
  --app-footer-height: 56px;
}

.app-footer {
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  color: #0f172a;
  font-family: 'Montserrat', sans-serif;
}

.app-footer__inner {
  /* Literal, not var(--app-footer-height): that variable is the
     consumer-facing contract (marketing_ideas.css sidebar,
     conopsys.css feedback button, etc.) describing this footer's real
     rendered height, including the mobile bump below. Reading it back
     here would be circular -- bumping the variable for mobile
     consumers would also inflate this min-height, which would in turn
     require bumping the variable again. Keep this literal so the two
     stay decoupled: this rule reflects the footer's own actual layout,
     the variable reflects that layout to outside consumers. */
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  padding: 0 1.5rem;
  margin: 0 auto;
}

.app-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  font-weight: 600;
}

.app-footer__brand:focus-visible,
.app-footer__link:focus-visible {
  outline: 2px solid #051c2c;
  outline-offset: 3px;
  border-radius: 6px;
}

.app-footer__logo {
  height: 28px;
  width: auto;
}

.app-footer__brand-name {
  font-size: 0.95rem;
  white-space: nowrap;
}

.app-footer__right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.app-footer__environment {
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 600;
}

.app-footer__links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.app-footer__link {
  color: #0f172a;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.app-footer__link:hover {
  color: #051c2c;
}

.app-footer__link:active {
  color: #97d700;
}

/* App shell variant */
.app-shell .app-footer {
  background: var(--shell-light-bg);
  border-top: 1px solid var(--shell-border);
}

/* App shell footer variant - ensures proper layout in flex containers */
.app-shell-footer {
  width: 100%;
  flex-shrink: 0;
  display: block;
  box-sizing: border-box;
}

.app-shell .app-footer__inner {
  max-width: none;
  padding: 0 1.5rem;
}

@media (max-width: 640px) {
  .app-footer__inner {
    padding: 0 1rem;
    align-items: flex-start;
    flex-direction: column;
  }

  .app-footer__brand-name {
    font-size: 0.9rem;
  }

  /* .app-footer__right holds the optional environment badge (dev/staging
     only) plus the footer links nav, side by side with flex-wrap: wrap as a
     safety net. Down to 640px that combination comfortably fits on one
     line, but the badge + 3 links' combined width can exceed the viewport
     below ~344px, and flex-wrap's fallback then splits them onto two lines
     -- badge above, links below -- adding a 3rd row to the footer (~111px
     measured via headless Chrome/Playwright against the real footer
     markup, vs. the 72px --app-footer-height override above). Rather than
     chase that with a second height override at yet another breakpoint,
     tighten the horizontal footprint of the badge and links right here so
     the existing wrap safety net never actually triggers: reduced gaps and
     badge padding/font-size keep the combined content narrower than the
     smallest supported viewport (320px minus padding), so this row stays a
     single line and the footer stays flat at the height above across the
     entire 320-640px range, badge or no badge. See #13592. */
  .app-footer__right {
    gap: 0.5rem;
  }

  .app-footer__environment {
    padding: 0.25rem 0.45rem;
    font-size: 0.7rem;
  }

  .app-footer__links {
    gap: 0.625rem;
  }

  /* At this breakpoint .app-footer__inner switches from a single row to a
     stacked column (brand row + links row), which renders taller than the
     56px --app-footer-height set above. Override it here, in the same
     :root every consumer already reads through var(--app-footer-height,
     ...), so every current and future consumer (marketing_ideas.css's
     sidebar max-height calc, conopsys.css's fixed feedback button offset)
     benefits automatically instead of each one needing its own duplicate
     breakpoint override. Measured via headless Chrome against the
     production footer markup (brand + up to 3 links, optional environment
     badge in non-production environments): ~57-59px with no environment
     badge, ~63-71px with one, holding across 350-640px. Rounded up to 72px
     for margin. Below ~348px with the badge present, the footer can wrap to
     a third row (~89-92px) -- that residual edge case is tracked
     separately (see #13592) since it's a deeper footer-content wrapping
     issue, not this stale-variable bug. */
  :root {
    --app-footer-height: 72px;
  }
}