@import url("../styles.css");

html {
  font-size: 17px;
}

.header-inner {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.mobile-note {
  font-size: 0.85rem;
  color: var(--colour-text-secondary);
  margin-top: 0.25rem;
}

.site-nav {
  width: 100%;
  display: none;
}

.site-nav.nav-open {
  display: block;
}

.site-nav ul {
  flex-direction: column;
  gap: 0.5rem;
}

.nav-toggle {
  display: inline-block;
}

.two-column {
  grid-template-columns: minmax(0, 1fr);
}

.insight-summary-content {
  grid-template-columns: 96px minmax(0, 1fr);
}

.insight-placeholder {
  width: 96px;
  height: 96px;
}

.contact-building {
  max-width: 120px;
}

.mobile-details {
  margin-top: 0.75rem;
}

.mobile-details summary {
  cursor: pointer;
  color: var(--colour-text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  margin-bottom: 0.5rem;
}

.mobile-details[open] summary {
  text-decoration-thickness: 2px;
}