/* ==========================================================================
   custom.css — small layer kept on top of style.css
   Covers what the reference does with inline styles and runtime state,
   so it works with both the bundled style.css and the synced live CSS.
   ========================================================================== */

/* next/image "fill" images (the reference sets these inline) */
.img-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

/* Elements hidden by script stay hidden even when a display class (e.g. grid) is set */
[hidden] { display: none !important; }

/* Broken or not-yet-downloaded image: hide the browser's broken icon */
img.is-missing { visibility: hidden; }

/* Hero entrance delays (inline animation-delay on the reference) */
.hero-entrance[data-delay="50"]  { animation-delay: 50ms; }
.hero-entrance[data-delay="100"] { animation-delay: 100ms; }
.hero-entrance[data-delay="200"] { animation-delay: 200ms; }
.hero-entrance[data-delay="300"] { animation-delay: 300ms; }
.hero-entrance[data-delay="400"] { animation-delay: 400ms; }

/* Reveal delays (inline transition-delay on the reference) */
.reveal[data-delay="0"]   { transition-delay: 0ms; }
.reveal[data-delay="70"]  { transition-delay: 70ms; }
.reveal[data-delay="140"] { transition-delay: 140ms; }
.reveal[data-delay="80"]  { transition-delay: 80ms; }
.reveal[data-delay="90"]  { transition-delay: 90ms; }
.reveal[data-delay="100"] { transition-delay: 100ms; }
.reveal[data-delay="150"] { transition-delay: 150ms; }
.reveal[data-delay="160"] { transition-delay: 160ms; }
.reveal[data-delay="180"] { transition-delay: 180ms; }
.reveal[data-delay="200"] { transition-delay: 200ms; }

/* Reveal visible state (set by main.js) */
.reveal.is-visible,
.reveal.reveal-visible {
  opacity: 1 !important;
  transform: none !important;
}
/* Without JavaScript, show everything */
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}
/* A revealed card keeps its hover lift */
.reveal.is-visible.hover\:-translate-y-1:hover { transform: translateY(-0.25rem) !important; }

/* Sticky header shadow once the page is scrolled */
#site-header.is-scrolled {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Mobile menu open state */
#mobile-menu.is-open { grid-template-rows: 1fr; }
#mobile-menu.is-open .mobile-menu-list {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  opacity: 1;
}
#mobile-menu:not(.is-open) .mobile-menu-list { visibility: hidden; }

/* Form validation states */
.is-invalid { border-color: #dc2626 !important; }
.form-status.is-error {
  background: rgb(220 38 38 / 0.08);
  color: #b91c1c;
}

@media (prefers-reduced-motion: reduce) {
  .hero-entrance { animation: none; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Deliberate deviation from the reference: below 480px the reference's
   no-wrap language button pushes the menu button off-screen (the page
   scrolls sideways at 320-375px). Delete this block for a strict 1:1 copy.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  #lang-toggle {
    max-width: 9.5rem;
    white-space: normal;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }
}
@media (max-width: 359px) {
  #lang-toggle { max-width: 7.75rem; padding-inline: 0.5rem; }
  #menu-toggle { padding: 0.375rem; }
}


/* Honouring Friendship: 2 cards on the first row, third centred below,
   each card exactly as wide as in the original 3-column layout */
   @media (min-width: 640px) {
    .tribute-grid {
      grid-template-columns: repeat(2, calc((100% - 3rem) / 3));
      justify-content: center;
    }
    .tribute-grid > :nth-child(3) {
      grid-column: 1 / -1;
      justify-self: center;
      width: calc((100% - 1.5rem) / 2);
    }
  }