/* Mobile hardening for phones, tablets, iOS Safari, and touch input. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-wrap: break-word;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.split-grid > *,
.gaza-grid > *,
.donate-grid > *,
.contact-grid > *,
.footer-grid > *,
.partner-card > *,
.royal-card > * {
  min-width: 0;
}

.bank-detail dd,
.contact-info p,
.footer-grid p {
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .main-nav {
    height: 100vh;
    height: 100dvh;
    padding-bottom: max(35px, env(safe-area-inset-bottom));
  }

  .main-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .site-header {
    padding-top: max(14px, env(safe-area-inset-top));
    padding-inline-start: max(12px, env(safe-area-inset-left));
    padding-inline-end: max(12px, env(safe-area-inset-right));
  }

  .lang-switch,
  .menu-toggle {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 8px;
  }

  .header-actions {
    gap: 6px;
  }

  .hero-content {
    padding-top: max(126px, calc(env(safe-area-inset-top) + 112px));
    padding-bottom: max(60px, env(safe-area-inset-bottom));
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 54px);
    line-height: 1.06;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  .socials a,
  .partners-arrow,
  .project-carousel-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .project-gallery-shell {
    height: 100vh;
    height: 100dvh;
  }

  .project-gallery-topbar {
    padding-top: max(11px, env(safe-area-inset-top));
  }

  .project-gallery-nav {
    width: 44px;
    min-width: 44px;
  }

  .project-gallery-thumbs {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .site-header {
    grid-template-columns: 80px minmax(94px, 1fr) 100px;
  }

  .header-logo-campaign {
    width: 80px;
  }

  .header-logo-jhco {
    width: 100px;
  }

  .hero-content {
    padding-inline: 14px;
  }

  .hero h1 {
    font-size: 40px;
  }

  .contact-form,
  .donation-form {
    padding: 24px;
  }

  .partner-logo.partnership-logo {
    width: 100%;
    max-width: 280px;
  }

  .project-gallery-stage {
    padding-inline: 50px;
  }
}

@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .hero-content {
    padding-top: max(96px, calc(env(safe-area-inset-top) + 82px));
    padding-bottom: 34px;
  }

  .hero h1 {
    font-size: clamp(38px, 9vw, 54px);
  }

  .hero p {
    margin-block: 16px 20px;
    line-height: 1.65;
  }
}

@media (hover: none) and (pointer: coarse) {
  .btn:hover,
  .glass-card:hover,
  .impact-card:hover,
  .project-card:hover img,
  .header-logo:hover,
  .socials a:hover {
    transform: none;
  }
}