/* Shared reflow rules. Load after page styles so every page starts with the same layout. */
html { max-width: 100%; }
body { min-width: 0; overflow-wrap: break-word; overflow-wrap: anywhere; }
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe { max-width: 100%; }
.hero-photo.hero-illustration { width: 100%; align-self: center; }

/* Allow intrinsic content, long addresses and translated labels to shrink in grids. */
.hero-grid > *, .split > *, .learning-grid > *, .community-intro > *,
.footer-grid > *, .principle-grid > *, .gallery-showcase > *, .gallery-card > *,
.card-grid > *, .form-grid > *, .button-row > *, .callout > *, .call-to-quiz > * {
  min-width: 0;
}
.button, .text-link, .topic-nav a, .service-button { max-width: 100%; white-space: normal; }
.button { text-align: center; }
.topic-nav a { overflow-wrap: anywhere; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.field input[type="checkbox"] { flex: 0 0 1.35rem; }
.field .consent-label { display: flex; align-items: flex-start; line-height: 1.45; }
.footer-connect { flex-wrap: wrap; }
.footer-connect > a { flex-shrink: 0; }
.footer-connect a { display: inline-flex; align-items: center; min-height: 44px; }

/* Preserve each pathway's brand colour and keep focus rings outside its container. */
.pathways, .callout { overflow: visible; }
.card-grid.three { align-items: stretch; }
.card-link { display: flex; flex-direction: column; min-width: 0; padding: 0; overflow: hidden; text-decoration: none; }
.card-link .card-map { display: block; width: 100%; height: auto; margin: 0; flex: none; object-fit: cover; object-position: center; background: var(--cream); }
.card-quiz .card-map, .card-connect .card-map { aspect-ratio: 1 / 1; }
.card-learn .card-map { aspect-ratio: 3 / 2; }
.card-link .card-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: .85rem; padding: clamp(1.35rem, 3vw, 2rem); min-width: 0; }
.card-link .card-title { display: block; max-width: 100%; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; font-weight: 850; letter-spacing: -.035em; color: inherit; }
.card-link .text-link { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.35; }

/* Navigation stays usable if scripts fail, then becomes a disclosure on compact screens. */
.nav { flex-wrap: wrap; }
.brand { min-width: 0; }
.brand span { min-width: 0; }
.nav-toggle { display: none; flex: none; }
.nav-list { flex-wrap: wrap; align-items: center; justify-content: flex-end; min-width: 0; }
.nav-list > li { min-width: 0; max-width: 100%; }
.nav-list a { white-space: normal; }
.translation-panel {
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  max-height: calc(var(--menu-max-height, 80vh) - 1rem);
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
.translation-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 70rem) {
  .site-header:not(.nav-ready) { position: static; }
  .nav { gap: .75rem; min-height: 4.25rem; padding-block: .5rem; }
  .brand { flex: 1; gap: .55rem; }
  .brand span { display: inline; max-width: none; font-size: 1rem; line-height: 1.25; }
  .brand-logo { width: 2.5rem; height: 2.5rem; }
  .nav-ready .nav-toggle { display: block; }
  .nav-list {
    display: flex;
    position: static;
    flex-basis: 100%;
    justify-content: flex-start;
    max-height: none;
    margin: 0;
    padding: .5rem;
    background: var(--blue-dark);
    border-bottom: 1px solid rgba(255,255,255,.2);
  }
  .nav-ready .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 4.25rem);
    max-height: calc(100dvh - 4.25rem);
    max-height: var(--menu-max-height, calc(100vh - 4.25rem));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding: .5rem max(.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    box-shadow: var(--shadow);
  }
  .nav-ready .nav-list.open { display: block; }
  .nav-list a { padding: .8rem .6rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.16); }
  .translate-menu { display: block; }
  .translate-toggle { width: 100%; justify-content: flex-start; margin-top: .5rem; }
  .translation-panel { position: static; width: 100%; max-height: none; margin-top: .5rem; box-shadow: none; overflow: visible; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Two cards per row on tablets; the existing illustration remains above the hero copy. */
  .card-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-photo.hero-illustration { min-height: 0; aspect-ratio: auto; }
  .hero-photo.hero-illustration img { position: static; inset: auto; display: block; width: 100%; height: auto; }
  .gallery-showcase { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 760px) {
  .container, .hero-grid { width: calc(100% - 2rem); }
  .hero { padding: 0; }
  .hero-grid { gap: 1.5rem; padding-block: 2rem; }
  .hero-photo { border-radius: 1.25rem; }
  .pathways { padding-inline: 0; }
  .card-grid.three { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .card-link { width: 100%; border-radius: 1.25rem; }
  .card-link .card-content { padding: 1.35rem 1.25rem 1.5rem; }
  .card-link .card-title { font-size: clamp(2rem, 10vw, 2.75rem); }
  .card-link .text-link { font-size: 1rem; }
  .card-learn .card-map { aspect-ratio: 16 / 10; }
  .card-quiz .card-map, .card-connect .card-map { aspect-ratio: 16 / 11; }
  .section { padding: 3.25rem 0; }
  .callout { width: calc(100% - 2rem); margin-block: 3rem; padding: 1.5rem; }
  .topic-links a { padding: 1rem .15rem; }
  .prose { max-width: 100%; }
  .prose h2 { font-size: clamp(1.7rem, 8vw, 2.15rem); }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .footer-connect { flex-direction: row; }
  .contact-qr { margin-inline: 0; }
  .local-gallery { max-width: 100%; margin-inline: 0; padding: .5rem .5rem 1rem; scroll-padding-inline: .5rem; scroll-snap-type: x proximity; }
  .local-gallery-item, .local-gallery-feature { flex-basis: 88%; min-width: 0; }
  .gallery-photo figcaption, .local-gallery-item figcaption { position: static; border-radius: 0; padding: .7rem .85rem; font-size: .875rem; }
}

@media (max-width: 430px) {
  h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); }
  h2 { font-size: clamp(1.75rem, 9vw, 2.35rem); }
  .brand span { font-size: .9375rem; }
  .card-link .card-content { padding: 1.2rem 1.1rem 1.35rem; }
  .card-link .card-title { font-size: clamp(1.85rem, 10vw, 2.45rem); }
  .card-quiz .card-map, .card-connect .card-map { aspect-ratio: 4 / 3; }
  .translation-options { grid-template-columns: minmax(0, 1fr); }
  .page-jump-nav { grid-template-columns: minmax(0, 1fr); }
}

/* Leave content space on phones in landscape; the open menu still scrolls on its own. */
@media (max-height: 32rem) and (max-width: 70rem) {
  .site-header { position: relative; }
}
@media (hover: none) {
  .card:hover, .echo-coverage-link:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover, .echo-coverage-link:hover { transform: none; }
  .local-gallery { scroll-behavior: auto; scroll-snap-type: none; }
}
@media (forced-colors: active) {
  .card-link, .translate-toggle, .translation-panel { border: 1px solid ButtonText; }
}