/* The two footer rules trade-show-guides.html cannot get any other way.
 *
 * The shared footer is built and styled by phase6b-public.js, which injects its own stylesheet
 * and covers almost everything with dark defaults. Two things it does NOT cover on a desktop
 * width live in styles.css instead - and this page deliberately loads no site stylesheet,
 * because styles.css carries the whole light design system and adding it here destroyed the
 * page's own layout once already.
 *
 * So the rules below are copied verbatim from styles.css rather than reinvented, which keeps the
 * legal row identical to every other page. Both are scoped under `footer` so nothing here can
 * reach the page above it.
 *
 * Without the first rule the row computes to display:block and renders "Privacy PolicyTerms"
 * with no separation, jammed into the bottom-left corner underneath the floating cookie button.
 */
footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.6;
}

/* styles.css writes these as var(--text-secondary) / var(--accent) with no fallback. This page
 * defines --accent but not --text-secondary, so the muted colour is given the same fallback
 * phase6b-public.js already uses for its own contact blocks, and the links stay legible. */
footer .footer-legal a,
footer .footer-legal .footer-legal-button {
  color: var(--text-secondary, #aeb8c7);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
footer .footer-legal a:hover,
footer .footer-legal a:focus-visible,
footer .footer-legal .footer-legal-button:hover,
footer .footer-legal .footer-legal-button:focus-visible {
  color: var(--accent, #ff6547);
  text-decoration: underline;
}

/* HEADER ALIGNMENT
 *
 * main.wrap on this page is a 1240px centred container - 100px in from each edge at 1440 - while
 * header.site-head pads a flat 48px. The top row therefore ended 32px to the right of every rule
 * and card beneath it. Matching the wrap's own arithmetic lines the two up at every width and
 * falls back to the original 48px once the viewport is narrower than the container.
 */
header.site-head {
  padding-left: max(48px, calc((100% - 1240px) / 2));
  padding-right: max(48px, calc((100% - 1240px) / 2));
}