/* Consistent, comfortable hit areas across the compact site header. */
.site-header {
  height: 62px;
}
.site-header .brand {
  min-width: 44px;
  min-height: 44px;
}
.site-header .brand img {
  width: 42px;
  height: 42px;
}
.site-header .nav-link {
  font-size: 12px;
}
.site-header .language-toggle,
.site-header .header-cta {
  min-height: 44px;
}

/* The homepage's late .site-header .main-nav rule otherwise forces a
   45px dropdown, leaving its last links on top of the hero. */
@media (max-width: 900px) {
  .site-header {
    height: 56px;
  }
  #home .site-header .main-nav {
    top: 100%;
    height: auto;
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    background: #f7faff;
    box-shadow: 0 18px 30px rgba(20, 67, 122, .14);
  }
  #home .site-header .nav-link {
    height: auto;
    min-height: 48px;
  }
  #home .site-header .menu-toggle {
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  #home .site-header .menu-toggle span {
    margin: 3px 0;
  }
  .site-header .header-cta {
    min-width: 44px;
    min-height: 44px;
  }
  .hero.source-hero,
  .source-intro {
    min-height: max(620px, calc(100svh - 56px));
  }
}

@media (max-width: 800px) {
  /* Information pages use a two-row header, so the navigation has its own
     measured space above the breadcrumb at phone and tablet widths. */
  body:is(.services-page,.about-page) > .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: auto;
    min-height: 0;
    gap: 0 10px;
    padding: 7px 16px 0;
  }
  body:is(.services-page,.about-page) > .site-header .brand { grid-column: 1; grid-row: 1; }
  body:is(.services-page,.about-page) > .site-header .header-actions { grid-column: 2; grid-row: 1; justify-self: end; }
  body:is(.services-page,.about-page) > .site-header .nav {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    padding: 0;
  }
  body:is(.services-page,.about-page) > .site-header .nav a {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 1px;
    font-size: 10px;
  }
  /* The social page has the same collapsible menu as the homepage. */
  body > .site-header .main-nav {
    top: 100%;
    height: auto;
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    background: #f7faff;
    box-shadow: 0 18px 30px rgba(20, 67, 122, .14);
  }
  body > .site-header .nav-link { height: auto; min-height: 48px; }
  body > .site-header .menu-toggle {
    display: grid;
    place-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
}

@media (max-width: 560px) {
  /* Let both language variants wrap on narrow and large-text screens. */
  .source-title,
  .source-title > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .source-film-toolbar {
    width: min(340px, calc(100% - 28px));
    max-width: none;
    min-height: 58px;
    padding: 5px 8px;
    font-size: 11px;
  }
  .source-film-time {
    font-size: 10px;
  }
}

.source-film-actions button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}
.source-film-actions svg {
  width: 18px;
  height: 18px;
}
.contact-page .contact-social-button {
  min-height: 44px;
  padding-block: 7px;
}
.contact-qr-close {
  width: 44px;
  height: 44px;
}
.hero-actions .button-primary,
.hero-actions .button-outline,
.related a {
  min-height: 44px;
}
.related a {
  display: inline-flex;
  align-items: center;
}
#graphic-content .phone-next,
#approach .approach-arrow {
  width: 44px;
  height: 44px;
}