@media(max-width:760px){
  .hero{
    min-height:0!important;
    padding:300px 16px 28px!important;
    background:#082b20 url('./assets/hero-rescue-flower.webp') 58% top/auto 300px no-repeat!important;
  }
  .hero-copy{
    margin:0!important;
    padding:20px 18px!important;
    background:#082b20!important;
    border-radius:0 0 20px 20px!important;
  }
}

/* Keep long forms fully reachable inside the modal on desktop and mobile. */
.modal.open{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}
.modal.open .modal-card{
  flex:0 0 auto;
  margin:auto 0;
  max-height:none!important;
}
@media(max-width:760px){
  .modal{
    padding:12px!important;
  }
  .modal.open .modal-card{
    width:100%;
    padding:30px 20px 24px;
    border-radius:20px;
  }
}


/* Adoption privacy consent: keep the checkbox beside the text and make the policy link easy to use. */
.adoption-privacy{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  cursor:default!important;
}
.adoption-privacy>input{
  flex:0 0 auto!important;
  width:18px!important;
  height:18px!important;
  margin:3px 0 0!important;
  accent-color:#1a4a2e;
  cursor:pointer;
}
.adoption-privacy>span{
  display:block!important;
  min-width:0;
  line-height:1.5;
}
.adoption-privacy a{
  color:#0b5d3b!important;
  font-weight:800;
  text-decoration:underline!important;
  text-underline-offset:2px;
  cursor:pointer;
}
/* Use the existing menu on tablets before the desktop links push Donate out. */
@media (min-width: 761px) and (max-width: 1279px) {
  header > nav { display: none; }
  header > .menu { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--forest); }
  header > .menu span { font-size: 1.5rem; }
  header > .donate-top { margin-left: auto; flex-shrink: 0; }
  header > nav.open {
    display: flex;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    margin: 0;
    padding: 22px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: inherit;
  }
}