/* ============================================================================
   Salma & Abdo — Wedding invitation
   ONE seamless, continuous vertical scroll: five full-bleed images stacked with
   zero gap, each with an absolutely-positioned live-text overlay. Text is sized
   in cqw and positioned in %, locked to a max-480px column, so it scales in
   lockstep with the art and lands identically at 360 / 390 / 480px.
   Two colours only: deep navy + cream. One font: Cormorant Garamond.
   ========================================================================== */

:root {
  --navy: #1B2A4A;
  --cream: #F5F0E8;
  --font: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;

  /* Soft haloes that keep text crisp over busy art (used sparingly) */
  --halo-light: 0 1px 2px rgba(245, 240, 232, 0.55), 0 0 10px rgba(245, 240, 232, 0.35);
  --halo-dark: 0 1px 3px rgba(18, 10, 14, 0.60), 0 0 12px rgba(18, 10, 14, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--navy);            /* surround on screens wider than the column */
  font-family: var(--font);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The whole invitation lives in this centred column and is the query container. */
.site {
  max-width: 480px;
  margin: 0 auto;
  background: #cfe0e6;                /* hero-sky tint; hides any pre-load flash */
  container-type: inline-size;
}

/* ---- Seamless sections: image defines the height, overlay holds the text ---- */
.screen {
  position: relative;
  width: 100%;
  display: block;
  margin: 0;
  line-height: 0;                     /* kill inline-image whitespace */
  overflow: hidden;                   /* clip scrims/decor to the section box */
}
.screen picture,
.screen img {
  display: block;
  width: 100%;
  height: auto;                       /* natural aspect ratio = section height */
  vertical-align: bottom;
}
/* Overlap each section 2px over the previous so sub-pixel rounding / stray edge
   rows can never leave a hairline seam between the stacked images. */
.screen + .screen { margin-top: -2px; }

.overlay {
  position: absolute;
  inset: 0;
  line-height: normal;                /* reset the wrapper's line-height:0 */
}

a { color: inherit; }

/* ---------------------------------------------------------------------------
   Shared type (all sizes in cqw so they track the column width)
   ------------------------------------------------------------------------- */
.names, .title, .sub, .detail, .dress, .script, .intro,
.parent, .kiss, .hotel__name, .places a, .btn { margin: 0; }

.names {                              /* hero couple */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.0;
  font-size: 2.2rem;
  font-size: 9.4cqw;
}
.title {                              /* section titles */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.02;
  font-size: 2rem;
  font-size: 8.8cqw;
}
.sub {                               /* RECOMMENDED HOTELS / SIGHTS / etc. */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  line-height: 1.1;
  font-size: 1.3rem;
  font-size: 5.6cqw;
}
.detail {                            /* venue / time caps lines */
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.32;
  font-size: 1.05rem;
  font-size: 4.4cqw;
}
.dress {                             /* "Black Tie" */
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  font-size: 1.15rem;
  font-size: 4.9cqw;
}
.script {                            /* italic "invite you…" / RSVP line */
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 0.95rem;
  font-size: 3.5cqw;
}
.intro {                             /* italic paragraphs */
  font-style: italic;
  font-weight: 400;
  line-height: 1.46;
  font-size: 0.85rem;
  font-size: 3.2cqw;
}
.intro--tight { line-height: 1.3; }

.parent {                            /* hero parents — bold + legibility-critical */
  font-weight: 700;
  line-height: 1.4;
  font-size: 0.8rem;
  font-size: 2.95cqw;
  text-shadow: var(--halo-light);
}
.kiss {                              /* "Kiss your little ones…" — legibility-critical */
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  font-size: 0.9rem;
  font-size: 3.4cqw;
  text-shadow: var(--halo-light);
}

/* Dark-artwork screens use cream text + a dark halo for crispness */
.screen--dark .overlay { color: var(--cream); }
.screen--dark .title,
.screen--dark .sub,
.screen--dark .intro,
.screen--dark .hotel__name,
.screen--dark .places a { text-shadow: var(--halo-dark); }

/* ---------------------------------------------------------------------------
   Buttons — navy pill, cream letter-spaced caps. Primary + smaller secondary.
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--font);
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--navy);
  color: var(--cream);
  border: 1px solid var(--navy);
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 0.7em 1.5em;
  font-size: 0.72rem;
  font-size: 2.75cqw;
  box-shadow: 0 0.4cqw 1.4cqw rgba(27, 42, 74, 0.30);
}
.btn--secondary {
  background: rgba(27, 42, 74, 0.85);
  border-color: var(--cream);
  font-weight: 500;
  letter-spacing: 0.14em;
  padding: 0.58em 1.2em;
  font-size: 0.66rem;
  font-size: 2.45cqw;
}
.btn.is-placeholder { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* ===========================================================================
   1. HERO
   ========================================================================= */
#hero .hero-parents {
  position: absolute;
  top: 25.5%;
  left: 0; right: 0;
  padding: 0 7%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6%;
  text-align: center;
}
#hero .hero-main {
  position: absolute;
  top: 31.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
}
#hero .names { margin-top: 0.08em; }
#hero .date { margin-top: 0.55em; font-weight: 600; text-transform: uppercase;
              letter-spacing: 0.14em; font-size: 3.5cqw; }
/* CAIRO | EGYPT — a touch larger, tighter tracking + halo so it reads clearly */
#hero .place { margin-top: 0.45em; font-weight: 600; text-transform: uppercase;
               letter-spacing: 0.2em; font-size: 3.45cqw; text-shadow: var(--halo-light); }

/* ===========================================================================
   2. THE CELEBRATION  (content rides the upper, lighter half)
   ========================================================================= */
#celebration .cel-top {
  position: absolute;
  top: 3.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 92%;
  text-align: center;
  isolation: isolate;               /* contain the scrim below */
}
/* Soft cream glow lifts the navy text off the busy palm-tree artwork behind it */
#celebration .cel-top::before {
  content: "";
  position: absolute;
  inset: -4% -6% -8% -6%;
  z-index: -1;
  background: radial-gradient(ellipse 76% 60% at 50% 34%,
              rgba(245, 240, 232, 0.55) 0%,
              rgba(245, 240, 232, 0.32) 44%,
              rgba(245, 240, 232, 0) 72%);
  pointer-events: none;
}
#celebration .title,
#celebration .detail,
#celebration .dress,
#celebration .kiss { text-shadow: var(--halo-light); }
#celebration .title { margin-bottom: 0.8em; }
#celebration .detail { margin-bottom: 0.3em; }
#celebration .dress { margin-top: 0.55em; }
#celebration .btn { margin-top: 1.05em; }
#celebration .kiss { margin-top: 1.05em; }

/* ===========================================================================
   3. CAIRO GUIDE  (content rides the central dark olive panel)
   ========================================================================= */
#cairo-guide .cairo-top {
  position: absolute;
  top: 3.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;                       /* stay inside the central green panel */
  text-align: center;
}
#cairo-guide .c-group + .c-group { margin-top: 4.5cqw; }
#cairo-guide .title { margin-bottom: 0.3em; }
#cairo-guide .intro { margin: 0 auto; max-width: 30ch; }
#cairo-guide .sub { margin-bottom: 0.7em; font-size: 4.8cqw; letter-spacing: 0.04em; }

.hotel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1cqw;
  margin-bottom: 2.8cqw;
}
.hotel:last-of-type { margin-bottom: 0; }
.hotel__name { font-style: italic; font-weight: 500; line-height: 1.25;
               font-size: 3.2cqw; margin-bottom: 0.8cqw; }
.hotel__tag { display: block; font-size: 0.82em; opacity: 0.92; }
.hotel .btn { margin: 0; }

#cairo-guide #transportAction:not(:empty) { margin-top: 0.8em; }

/* ===========================================================================
   4. OUT & ABOUT  (the most content — compact, centred, over the maroon)
   ========================================================================= */
#out-and-about .out-top {
  position: absolute;
  top: 19%;                          /* title sits well into the deep-red area */
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  text-align: center;
}
#out-and-about .title { margin-bottom: 0.4em; }
#out-and-about .intro { margin: 0 auto 0.45em; max-width: 40ch; line-height: 1.32; font-size: 3.0cqw; }
#out-and-about .intro--tight { margin-bottom: 0.3em; }
#out-and-about .sub { margin-top: 0.6em; margin-bottom: 0.25em; }

.places { list-style: none; margin: 0; padding: 0; }
.places li { margin: 0; }
.places a {
  display: inline-block;
  text-decoration: none;
  font-style: italic;
  font-weight: 500;
  line-height: 1.18;
  padding: 0.38cqw 1cqw;
  font-size: 3.05cqw;
}

/* ===========================================================================
   5. RSVP
   ========================================================================= */
#rsvp .rsvp-main {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
  color: var(--navy);
}
#rsvp .title { letter-spacing: 0.05em; }
#rsvp .script { margin-top: 0.7em; }
#rsvp .btn { margin-top: 1.1em; }
#rsvp .rsvp-pending { margin-top: 0.6em; font-style: italic; font-size: 2.6cqw; opacity: 0.8; }

/* ---------------------------------------------------------------------------
   Accessibility
   ------------------------------------------------------------------------- */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 6px;
}
.screen--dark a:focus-visible { outline-color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}