/* ---------------------------------------------------------------------------
   custom.css — the few things Tailwind's CDN build can't express inline.

   Colours are duplicated here as CSS variables because plain CSS can't read
   Tailwind's config. If you change a colour in includes/theme.php, change
   its twin below.
   ------------------------------------------------------------------------ */

:root {
  --forest:      #22352A;
  --forest-deep: #1A2A20;
  --sage:        #E7EDE5;
  --cream:       #FAF8F3;
  --sand:        #F2EFE7;
  --gold:        #C29B62;
  --gold-soft:   #DFC79E;
  --ink:         #23281F;
  --line:        #E2DDD1;
}

/* ---------------------------------------------------------------------------
   The hero curve.

   On large screens the hero photo is clipped by a wide ellipse anchored to
   the right edge, which produces the soft arc where the green panel meets
   the photograph. Below 1024px the photo simply sits above the text, so no
   clipping is applied.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .hero-photo {
    clip-path: ellipse(100% 128% at 100% 50%);
  }
}

/* ---------------------------------------------------------------------------
   Image placeholders.

   Shown wherever a photo file hasn't been added yet. Deliberately quiet —
   a dashed box that names the file you need to drop in.
   ------------------------------------------------------------------------ */
.img-placeholder {
  background-color: var(--sand);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(34, 53, 42, 0.035) 14px 28px
    );
  border: 1px dashed rgba(34, 53, 42, 0.22);
  color: var(--forest);
}

/* Inside the dark green hero the placeholder needs to invert. */
.bg-forest .img-placeholder,
.hero-photo .img-placeholder {
  background-color: rgba(250, 248, 243, 0.06);
  background-image:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      rgba(250, 248, 243, 0.05) 14px 28px
    );
  border-color: rgba(250, 248, 243, 0.28);
  color: var(--cream);
}

/* ---------------------------------------------------------------------------
   Small refinements
   ------------------------------------------------------------------------ */

/* Playfair's italic is only used for the handwritten-adjacent moments. */
.font-display { font-optical-sizing: auto; }

/* Stop long phone numbers and emails breaking the footer layout. */
address { overflow-wrap: anywhere; }

/* A visible focus ring everywhere, for keyboard users. */
:focus-visible {
  outline-color: var(--gold);
}

/* Lightbox opens as a flex row; the .hidden class wins until JS removes it. */
#lightbox:not(.hidden) { display: flex; }

/* ---------------------------------------------------------------------------
   Motion
   Gentle rise for sections as they scroll into view. Anyone who has asked
   their device to reduce motion sees the finished page immediately.
   ------------------------------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
}

.reveal.is-visible {
  animation: rise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}