/* Phone-only responsive presentation. Desktop rules remain in the approved stylesheet. */
.menu-toggle {
  display: none;
}

.donation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.donation-choice-sections {
  display: grid;
  gap: 24px;
  margin-top: 30px;
}

.donation-choice-group {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.donation-choice-group h2 {
  margin: 0 0 6px;
  color: inherit;
  font-size: 26px;
}

.donation-choice-group p {
  margin: 0;
}

.donation-choice-group .donation-options {
  margin-top: 18px;
}

.donation-options .button {
  min-width: 112px;
  min-height: 52px;
  justify-content: center;
  text-align: center;
}

@media (max-width: 767px) {
  .donation-choice-sections {
    gap: 18px;
    margin-top: 24px;
  }

  .donation-choice-group {
    padding: 20px 16px;
  }

  .donation-choice-group h2 {
    font-size: 24px;
  }

  .donation-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .donation-options .button {
    width: 100%;
    min-width: 0;
  }

  .donation-options .custom-amount {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    font-size: 17px;
  }

  main,
  header,
  section,
  footer,
  article,
  figure,
  div {
    min-width: 0;
    max-width: 100%;
  }

  img,
  picture,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }

  img,
  picture img {
    height: auto;
  }

  .content-width {
    width: 100%;
    padding-inline: 18px;
  }

  .site-header,
  .interior-header {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-items: stretch;
    gap: 10px 14px;
    min-height: 0;
    padding: 10px 16px 14px;
  }

  .brand {
    align-self: center;
  }

  .brand img,
  .interior-header .brand img {
    width: min(230px, 100%);
    height: auto;
  }

  .menu-toggle {
    display: block;
    color: var(--olive-dark);
    background: transparent;
    border: 2px solid var(--olive);
    border-radius: 8px;
    align-self: center;
    justify-self: end;
    width: 48px;
    height: 48px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 29px;
    line-height: 1;
    cursor: pointer;
  }

  .site-header > nav,
  .interior-header > nav {
    display: none;
    grid-area: 2 / 1 / 3 / -1;
    width: 100%;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    background: var(--paper);
    border-top: 1px solid #ded0bb;
    gap: 0;
    padding: 6px 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
  }

  .site-header.menu-open > nav,
  .interior-header.menu-open > nav {
    display: block;
  }

  .site-header nav > a,
  .site-header .nav-group,
  .site-header .nav-group > a,
  .interior-header nav > a,
  .interior-header .nav-group,
  .interior-header .nav-group > a {
    display: block;
    width: 100%;
    min-height: 0;
  }

  .site-header nav > a,
  .site-header .nav-group > a,
  .interior-header nav > a,
  .interior-header .nav-group > a {
    padding: 12px 6px;
  }

  .site-header .dropdown,
  .interior-header .dropdown {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    width: 100%;
    padding: 0 0 6px 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-header .dropdown a,
  .interior-header .dropdown a {
    padding: 9px 8px;
    font-size: 15px;
  }

  .site-header > .donate,
  .interior-header > .donate {
    display: inline-flex;
    grid-area: 3 / 1 / 4 / -1;
    width: 100%;
    min-height: 52px;
    margin-top: 2px;
    font-size: 18px;
  }

  .hero {
    width: 100%;
    max-width: 100%;
  }

  .hero > img:first-child {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1024 / 415;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .hero > .hero-house-overlay {
    width: 42%;
    height: 100%;
    right: 0;
    object-fit: contain;
    transform: none;
  }

  .flagship,
  .values,
  .photo-strip,
  .section-heading,
  .component-grid,
  .daniel-section,
  .mission-section,
  .story-card,
  .partnership-inner,
  .campaign-inner,
  .footer-grid,
  .interior-hero-grid,
  .interior-content,
  .leadership-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .flagship {
    gap: 30px;
    padding-block: 40px 30px;
  }

  .flagship h1 {
    font-size: clamp(40px, 12vw, 50px);
  }

  .flagship-copy > p:not(.eyebrow):not(.tagline),
  .daniel-section p,
  .partnership-inner p,
  .campaign-inner p:not(.eyebrow),
  .interior-content p,
  .interior-content li,
  .interior-hero p:not(.eyebrow) {
    font-size: 17px;
    line-height: 1.6;
  }

  .hospital,
  .daniel-portrait img,
  .partnership-photo img,
  .interior-hero img,
  .leadership-grid img,
  .story-photos img,
  .story-photos .historical-photo img,
  .photo-slot > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .values {
    padding: 8px 18px;
  }

  .values article {
    min-height: 0;
    padding: 22px 8px;
  }

  .value-icon,
  .value-icon svg {
    width: 56px;
    height: 56px;
  }

  .value-icon svg {
    width: 28px;
    height: 28px;
  }

  .values h2 {
    font-size: 20px;
  }

  .values p {
    max-width: 300px;
    font-size: 16px;
  }

  .photo-strip {
    gap: 14px;
    overflow: visible;
    padding-bottom: 0;
  }

  .photo-slot figcaption {
    font-size: 15px;
  }

  .section-heading h2,
  .daniel-section h2,
  .partnership-inner h2,
  .campaign-inner h2 {
    font-size: clamp(34px, 9.5vw, 43px);
  }

  .section-heading > p:last-child {
    font-size: 17px;
  }

  .component-grid article {
    padding: 25px 4px;
  }

  .component-grid h3 {
    font-size: 24px;
  }

  .component-grid p {
    font-size: 16px;
  }

  .daniel-section {
    gap: 28px;
    padding-block: 48px;
  }

  .mission-section {
    width: 100%;
    gap: 24px;
    padding: 36px 18px;
  }

  .mission-section h2,
  .story-card h2,
  .interior-content h2 {
    font-size: clamp(28px, 8vw, 35px);
  }

  .mission-section p {
    font-size: 17px;
    line-height: 1.6;
  }

  .story-card {
    padding: 20px 16px;
  }

  .campaign-amount {
    width: 100%;
    padding: 25px 16px;
  }

  .campaign-amount strong {
    font-size: clamp(38px, 12vw, 48px);
  }

  .support-band {
    width: 100%;
    padding: 28px 18px;
  }

  .support-band h2 {
    font-size: 28px;
  }

  .support-band .button,
  .proposal-actions .button {
    width: 100%;
    min-height: 52px;
  }

  .footer-grid {
    padding-block: 42px 32px;
  }

  .interior-hero {
    padding-block: 44px;
  }

  .interior-hero h1 {
    overflow-wrap: anywhere;
    font-size: clamp(38px, 11vw, 48px);
  }

  .interior-content article {
    padding: 24px 18px;
  }

  .proposal-actions {
    width: 100%;
    gap: 14px;
  }

  table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}