/*
 * Conservative responsive safeguards.
 * This layer intentionally leaves the approved visual composition unchanged
 * and only prevents clipping, overlap and horizontal overflow.
 */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html,
body {
  max-width: 100%;
}

html {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html { overflow-x: clip; }
}

body {
  min-width: 0;
}

img {
  height: auto;
}

.header-inner,
.section-inner,
.location-layout,
.location-copy,
.location-card,
.story-teaser,
.story-teaser-copy,
.story-cta,
.gift-teaser,
.form-wrap,
.response-form,
.field,
.attendance-fields,
.detail-page-card,
.story-detail-inner,
.story-prose,
.story-gallery-layout,
.story-gallery-copy {
  min-width: 0;
}

.back-link {
  min-width: 0;
}

h1,
h2,
h3,
p,
address,
dt,
dd,
.back-link,
.field > span,
.field small,
.status,
.deadline,
.button,
.text-link {
  overflow-wrap: break-word;
  word-break: normal;
}

code,
.bank-details dd {
  overflow-wrap: anywhere;
}

.button,
.text-link,
.status,
.deadline {
  max-width: 100%;
  white-space: normal;
}

input,
select,
textarea {
  min-width: 0;
  max-width: 100%;
}

dialog {
  max-width: calc(100% - var(--safe-left) - var(--safe-right) - 16px);
  overflow: auto;
  overscroll-behavior: contain;
}

@supports (max-height: 100dvh) {
  dialog { max-height: calc(100dvh - 28px - var(--safe-top) - var(--safe-bottom)); }
}

/* Safe-area support has no visual effect on screens without a notch. */
@supports (padding: max(0px)) {
  .site-header {
    padding-top: var(--safe-top);
  }

  .skip-link {
    top: calc(8px + var(--safe-top));
    left: max(8px, var(--safe-left));
  }

  body[data-access] .header-inner {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
  }

  body[data-access] .mobile-menu {
    top: calc(72px + var(--safe-top));
    right: max(12px, var(--safe-right));
    bottom: max(12px, var(--safe-bottom));
    left: max(12px, var(--safe-left));
  }

  body:not([data-access]) .header-inner {
    padding-left: max(17px, var(--safe-left));
    padding-right: max(17px, var(--safe-right));
  }

  .story-article-intro,
  .story-prose-section,
  .story-gallery-section,
  .site-footer,
  .story-page-footer {
    padding-left: max(20px, var(--safe-left));
    padding-right: max(20px, var(--safe-right));
  }

  body[data-access] .hero,
  body[data-access] .closing {
    padding-left: max(18px, var(--safe-left));
    padding-right: max(18px, var(--safe-right));
  }

  body[data-access] .section {
    padding-left: max(18px, var(--safe-left));
    padding-right: max(18px, var(--safe-right));
  }

  .detail-page {
    padding-left: max(20px, var(--safe-left));
    padding-right: max(20px, var(--safe-right));
  }

  .site-footer {
    padding-bottom: max(26px, var(--safe-bottom));
  }

  .story-page-footer {
    padding-bottom: max(34px, var(--safe-bottom));
  }
}

/* Phones: preserve the composition while allowing content to size naturally. */
@media (max-width: 719px) {
  body[data-access] .hero,
  body[data-access] .section,
  body[data-access] .closing {
    padding-left: max(clamp(18px, 4vw, 22px), var(--safe-left));
    padding-right: max(clamp(18px, 4vw, 22px), var(--safe-right));
  }

  .hero h1 {
    max-width: 100%;
    white-space: normal;
    text-wrap: balance;
  }

  .hero-meta,
  .hero .scroll-link {
    max-width: 100%;
  }

  .hero .scroll-link {
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .location-layout,
  .story-teaser,
  .response-form,
  .attendance-fields {
    min-width: 0;
    max-width: 100%;
  }

  .ceremony-visual,
  .reception-visual {
    max-width: 100%;
  }

  .ceremony-visual img {
    display: block;
    width: min(100%, 465px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
  }

  .reception-visual img {
    display: block;
    width: min(100%, 610px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
  }

  .childhood-collage {
    height: clamp(270px, 74vw, 430px);
    max-width: 100%;
  }

  .childhood-photo {
    max-width: 68%;
  }

  .rsvp-section .section-head,
  .response-form,
  .privacy-note {
    max-width: 100%;
  }

  .mobile-menu {
    max-width: calc(100% - var(--safe-left) - var(--safe-right));
  }
}

/* The smallest supported phones need a little more flexibility in the header. */
@media (max-width: 359px) {
  body[data-access] .header-inner {
    gap: 6px;
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
  }

  body[data-access] .brand {
    padding-right: 10px;
    padding-left: 10px;
  }

  .hero h1 {
    font-size: clamp(20px, 6.8vw, 24px);
  }

  /* Let the return link use its own row instead of clipping. */
  body:not([data-access]) .header-inner {
    min-height: 72px;
    flex-wrap: wrap;
    gap: 4px 10px;
    padding-top: max(8px, var(--safe-top));
    padding-right: max(13px, var(--safe-right));
    padding-bottom: 8px;
    padding-left: max(13px, var(--safe-left));
  }

  body:not([data-access]) .brand {
    margin-right: 0;
  }

  body:not([data-access]) .language-switch {
    flex: 0 0 auto;
    margin-left: auto;
  }

  body:not([data-access]) .back-link {
    order: 3;
    flex: 1 0 100%;
    white-space: normal;
  }
}

@media (max-width: 479px) {
  body:not([data-access]) .header-inner {
    padding-right: max(13px, var(--safe-right));
    padding-left: max(13px, var(--safe-left));
  }

  .dialog-inner {
    padding: clamp(18px, 5vw, 25px);
  }

  .dialog-head h2 {
    font-size: clamp(27px, 9vw, 35px);
  }
}

@media (min-width: 720px) {
  @supports (padding: max(0px)) {
    body[data-access] .header-inner {
      padding-left: max(24px, var(--safe-left));
      padding-right: max(24px, var(--safe-right));
    }

    body[data-access] .section {
      padding-left: max(32px, var(--safe-left));
      padding-right: max(32px, var(--safe-right));
    }

    body:not([data-access]) .header-inner {
      padding-left: max(33px, var(--safe-left));
      padding-right: max(33px, var(--safe-right));
    }

    .detail-page {
      padding-left: max(32px, var(--safe-left));
      padding-right: max(32px, var(--safe-right));
    }
  }
}

/* Tablet widths: keep the approved two-column layout but contain its illustration. */
@media (min-width: 720px) and (max-width: 1023px) {
  body[data-access] .reception-visual img {
    width: min(100%, 610px);
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Desktop values remain the approved values; only safe-area padding can exceed them. */
@media (min-width: 1200px) {
  @supports (padding: max(0px)) {
    body[data-access] .header-inner {
      padding-left: max(34px, var(--safe-left));
      padding-right: max(34px, var(--safe-right));
    }
  }
}

/* Short landscape screens keep overlays usable without changing the page composition. */
@media (orientation: landscape) and (max-height: 500px) {
  .mobile-menu {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  dialog {
    max-height: calc(100dvh - 16px - var(--safe-top) - var(--safe-bottom));
  }
}

/* On narrow phones, keep the childhood collage airy and prevent photo overlap. */
@media (max-width: 479px) {
  .childhood-collage {
    width: 100%;
    height: clamp(370px, 112vw, 420px);
    min-height: 370px;
  }

  .childhood-photo.primary-photo {
    width: 44%;
    max-width: none;
    border-width: 5px;
  }

  .childhood-photo.primary-photo.childhood-photo-one {
    top: 26%;
    left: 1%;
    transform: rotate(-2.5deg);
  }

  .childhood-photo.primary-photo.childhood-photo-two {
    top: 30%;
    right: 1%;
    bottom: auto;
    transform: rotate(2.5deg);
  }

  .childhood-photo.extra-photo {
    width: 16%;
    max-width: none;
    border-width: 3px;
  }

  .childhood-photo-three { top: 1%; left: 1%; transform: rotate(-4deg); }
  .childhood-photo-four { top: 1%; left: 42%; transform: rotate(3deg); }
  .childhood-photo-five { top: 1%; right: 1%; transform: rotate(4deg); }
  .childhood-photo-six { right: 22%; bottom: 1%; transform: rotate(-3deg); }
  .childhood-photo-seven { bottom: 1%; left: 22%; transform: rotate(3deg); }
}

/* Keep childhood images free of inset white frames on every breakpoint. */
.childhood-photo { border-width: 0; }
.childhood-photo::after { display: none; }

/* Slightly larger primary action links for easier tapping on phones. */
.button {
  min-height: 54px;
  padding: 13px 21px;
  font-size: 12px;
}
.ceremony-section .button,
.ceremony-section .button.secondary,
.reception-section .button {
  min-height: 54px;
  padding: 13px 8px 11px;
  font-size: 11px;
}