/* Keep focus readable on phones and tablets without limiting the user's zoom. */
html {
  scroll-padding-top: calc(var(--header-height, 120px) + 12px);
}
main:focus { outline: none; }

.region-control select,
.intro-copy .region-control select {
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  text-align-last: center;
  padding-inline: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23081b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 3px center;
  background-size: 12px;
}

input:not([type="hidden"]), select, textarea, .date-button {
  scroll-margin-bottom: calc(var(--bottom-navigation-height, 56px) + env(safe-area-inset-bottom, 0px) + 20px);
}

@media (max-width: 1000px), (any-pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    /* Override the compact search and region styles, including their variants. */
    font-size: 16px !important;
    min-width: 0;
  }

  .search {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 1000px), (any-pointer: coarse) {
  .header-actions .region-control select { max-width: calc(100% - 25px); width: auto; }
  .intro-copy .region-control { padding-inline: 6px; }
}

@media (max-width: 360px) {
  .intro-row { grid-template-columns: minmax(0, 1fr) minmax(184px, 1.6fr); }
}