/* Keep the original desktop presentation; adapt content at phone/tablet widths. */
.menu-toggle[hidden] { display: none; }

@media (max-width: 767px) {
  body { font-size: 16px; overflow-wrap: anywhere; }
  body *, body *::before, body *::after { box-sizing: border-box; }
  /* Flex children and form controls must be allowed to shrink to their container. */
  div, section, article, main, nav, form, label { min-width: 0; }
  .mobile-readable { font-size: 16px !important; }
  a, button, input:not([type="hidden"]), select, textarea, summary {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
  }
  a { display: inline-block; align-content: center; }
  button, input, select, textarea { font-size: 16px !important; }
  input, select, textarea { width: 100%; }
  img, video, iframe, embed, object { max-width: 100%; }
  img:not([style*="object-fit"]), video { height: auto; }
  iframe, embed, object { width: 100%; }
  iframe { aspect-ratio: 16 / 9; height: auto; }
  .responsive-grid { grid-template-columns: minmax(0, 1fr) !important; }

  .menu-toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1px solid #F2C48F;
    border-radius: 999px;
    background: #FFFFFF;
    color: #0B2545;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  #main-navigation { flex-basis: 100%; align-items: stretch !important; }
  #main-navigation[data-collapsed="true"] { display: none !important; }
  #main-navigation[data-collapsed="false"] { display: flex !important; flex-direction: column; }
  #main-navigation a { padding: 12px 16px !important; }
  :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid #C2410C;
    outline-offset: 3px;
  }

  /* Replace the dense circular diagram with readable, tappable cards. */
  .neighbourhood-map {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    aspect-ratio: auto !important;
  }
  .neighbourhood-map > div:first-child {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    grid-column: 1 / -1;
  }
  .neighbourhood-map > div:first-child > div:first-child {
    width: auto !important;
    height: auto !important;
    font-size: 64px !important;
  }
  .neighbourhood-map > div:first-child > div:last-child {
    font-size: 20px !important;
  }
  .neighbourhood-map figure {
    position: static !important;
    transform: none !important;
    width: auto !important;
  }
  .neighbourhood-map figure span {
    position: static !important;
    width: auto !important;
    font-size: 16px !important;
  }
}