/* Personalized greeting styles */
.personal-greeting {
  text-align: center;
  font-size: clamp(20px, 2vw, 30px); /* Increased font size */
  color: #0b0101;
  margin-bottom: 1.5rem;
  font-family: "Playfair Display", serif;
  letter-spacing: 0.04em;
  text-shadow: 0px 1px 8px rgba(0, 0, 0, 0.176);
  opacity: 1;
}


.top-banner {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: #450920;
}


/* Main navigation menu styles */
.main-menu {
  width: 100%;
  background-color: #450920;
  background: #450920;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: 0.5rem 0;
  position: sticky;
  top: 0;
  z-index: 10;
}


.main-menu ul {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu a {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  color: #b19fa6;
  text-decoration: none;
  letter-spacing: 0.08em;
  padding: 0.25em 0.5em;
  border-radius: 2px;
  transition: color 0.2s, background 0.2s;
}
.main-menu a:hover, .main-menu a:focus {
  color: #fff;
  background: #dbdadb;
}
/* Base reset and variables */
:root {
  --bg: #ffffff; /* Pure white background */
  --text: #ffffff;
  --text-muted: rgba(255,255,255,0.95);
  --shadow: 10px 10px 25px rgba(0,0,0,0.12), 10px 20px 60px rgba(0,0,0,0.08);
  --frame-border: #e8c4d4;
  --frame-shadow: 10px 6px 14px rgba(0,0,0,0.08), 10px 2px 4px rgba(0,0,0,0.06);
  --hero-img-top: url("assets/imgs/fors.jpg"); /*Background image for invitation*/
  --hero-img-middle: url("assets/imgs/middle.jpg"); /* Background image for invitation */
  --hero-img-bottom: url("assets/imgs/Logo.jpg"); /* Background image for invitation */
  --overlay-darken: rgba(216, 13, 13, 0.35);
  --maxw: 980px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  font-family: "Cormorant Garamond", serif;
  color: var(--text);
}

/* Center the framed card on the page */
.page_right {
  position: relative;
  /* min-height: 100vh; */
  top: 0;
  left: 0%;
  display: grid;
  place-items: center;
  padding: 1rem 1rem;
  width: 100%;
}

/* Center the framed card on the page */
.page_left {
  position: relative;
  /* min-height: 100vh; */
  top: 0;
  right: 0%;
  display: grid;
  place-items: center;
  padding: 1rem 1rem;
  width: 100%;
}

/* Fancy frame: subtle border, inner rim, and soft shadows - card invitation style */
.frame {
  position: relative;
  width: min(100%, var(--maxw));
  background: #ffffff; /* Pure white background */
  padding: clamp(15px, 2vw, 20px);
  border-radius: 20px;
  border: 0px solid #747273; /* Soft pink border for elegance */
  background-color: #eae2e2;
  background-image: url("assets/svgs/floral.png"); /* Light texture for paper-like feel */
  background-color: #28171730;
  background-image: linear-gradient(rgba(255, 255, 255, 0.306), rgba(255, 255, 255, 0.251)), url("assets/svgs/floral.png");
  background-blend-mode: normal;
  backdrop-filter: brightness(100) sepia(1) hue-rotate(90deg) saturate(1) opacity(0.9);

  box-shadow:
    0px 0px 100px rgba(0, 0, 0, 0.250),
    0px 0px 100px rgba(0, 0, 0, 0.250),
    inset 0 1px 0 rgba(240, 237, 237, 0.292); /* Subtle inner highlight */
}

/* Inner rim effect - double border like traditional invitations */
.frame::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 2vw, 4px);
  border-radius: 8px; /* Rounded edges for the inner border */
  border: 1px solid #40340eb6; /* Soft pink inner border */
  opacity: 0.7;
  pointer-events: none;
}


/* Optional decorative corner */
.corner.corner--tl {
  position: absolute;
  top: clamp(-10px, -5vw, -20px);
  left: clamp(-10px, -5vw, -20px);
  width: clamp(600px, 132vw, 720px);
  height: clamp(100px, 132vw, 500px);
  background: url("assets/svgs/32831.png") no-repeat top left / contain;
  opacity: .5;
  filter: drop-shadow(1px 3px 1px rgba(14, 1, 1, 0.8));
  pointer-events: none;
  transform: scaleY(-1); /* Flip vertically */
  z-index: 3; /* Ensure it appears above the image */
}

/* Bottom-right decorative corner - mirrored */
.corner.corner--br {
  position: absolute;
  bottom: clamp(-10px, -5vw, -20px);
  right: clamp(-10px, -5vw, -20px);
  width: clamp(600px, 132vw, 720px);
  height: clamp(100px, 132vw, 500px);
  background: url("assets/svgs/32831.png") no-repeat top left / contain;
  opacity: .5;
  pointer-events: none;
  filter: drop-shadow(1px 3px 1px rgba(14, 1, 1, 0.8));

  transform: scaleX(-1); /* Flip both horizontally and vertically */
  z-index: 3; /* Ensure it appears above the image */
}

.hero, .hero_top, .hero_middle, .hero_bottom {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: var(--overlay-darken);
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img-bottom) center / cover no-repeat;
  filter: brightness(.9) saturate(1); /* Darkened to improve contrast with bright text */
  z-index: 0; /* place the background behind overlay and content */
}


.hero_top::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img-top) center / cover no-repeat;
  filter: brightness(.9) saturate(1); /* Darkened to improve contrast with bright text */
  z-index: 0; /* place the background behind overlay and content */
}


/* Background photo */
.hero_middle::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img-middle) center / cover no-repeat;
  filter: brightness(.9) saturate(1); /* Darkened to improve contrast with bright text */
  z-index: 0; /* place the background behind overlay and content */
}

/* Background photo */
.hero_bottom::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img-bottom) center / cover no-repeat;
  filter: brightness(.9) saturate(1); /* Darkened to improve contrast with bright text */
  z-index: 0; /* place the background behind overlay and content */
}


/* Dim overlay to improve text contrast - enhanced for card invitation look */
.hero::after, .hero_top::after, .hero_middle::after, .hero_bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.45) 35%,
      rgba(0,0,0,0.55) 100%
  );
  z-index: 1; /* ensure gradient sits above the image but below text */
}

/* Overlay content */
.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(16px, 3vw, 36px);
  z-index: 2; /* make sure overlay content (text) sits above the dark gradient */
}




/* Typography */
.kicker {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  letter-spacing: 0.35em;
  font-size: clamp(6px, 1.8vw, 16px);
  text-transform: uppercase;
  color: #ffffff;
  opacity: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;      /* Prevents text from wrapping to multiple lines */
  overflow: hidden;         /* Hides overflow if text is too long */
  text-overflow: ellipsis;  /* Adds ellipsis if text overflows */
}
.names {
  position: absolute;
  top: 25%%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  font-size: clamp(30px, 10vw, 96px);
  letter-spacing: 0.1em;
  line-height: 1.08;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;      /* Prevents text from wrapping to multiple lines */
  overflow: hidden;         /* Hides overflow if text is too long */
  text-overflow: ellipsis;  /* Adds ellipsis if text overflows */
}

.details {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(14px, 2.4vw, 24px);
  letter-spacing: 0.12em;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;      /* Prevents text from wrapping to multiple lines */

}



/* Typography */
.kickerarabic {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  letter-spacing: 0; /* Reduced for Arabic */
  font-size: clamp(14px, 2.4vw, 24px);
  color: #ffffff;
  opacity: 1;
  font-family: "Noto Naskh Arabic", serif !important;
  font-weight: 500;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.namesarabic {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: "Noto Naskh Arabic", serif !important;
  font-weight: 600;
  font-size: clamp(6px, 1.8vw, 16px);
  letter-spacing: 0 !important;
  line-height: 10 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detailsarabic {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: clamp(14px, 2.4vw, 24px);
  letter-spacing: 0 !important;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  font-family: "Noto Naskh Arabic", serif !important;
  font-weight: 400;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




/* Typography */
.kickerfrench {
  margin: -20% 0 0; /* Adjusted margin to lower the text as a percentage of its frame */
  letter-spacing: 0.35em;
  font-size: clamp(6px, 1.8vw, 16px);
  text-transform: uppercase;
  color: #ffffff;
  opacity: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}



.names {
  margin: 10% 0 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(30px, 10vw, 96px); /* Increased font size */
  letter-spacing: 0.1em;
  line-height: 1.08;
  /* Make the names fully bright and clearly visible */
  color: #ffffff !important; /* ensure names are bright on the hero image */
  opacity: 1 !important;
  font-weight: 600; /* slightly bolder for better contrast */
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}


.namesarabic {
  margin: 0 0 0; /* Adjusted margin to lower the text */
  font-family: "Beiruti", serif;
  font-weight: 400;
  font-size: clamp(30px, 10vw, 96px); /* Increased font size */
  letter-spacing: 0.1em;
  line-height: 1.08;
  /* Make the names fully bright and clearly visible */
  color: #ffffff !important; /* ensure names are bright on the hero image */
  opacity: 1 !important;
  font-weight: 600; /* slightly bolder for better contrast */
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}

.namesfrench {
  margin: 0 0 0; /* Adjusted margin to lower the text */
  font-family:"Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(30px, 10vw, 96px); /* Increased font size */
  letter-spacing: 0.1em;
  line-height: 1.08;
  /* Make the names fully bright and clearly visible */
  color: #ffffff !important; /* ensure names are bright on the hero image */
  opacity: 1 !important;
  font-weight: 600; /* slightly bolder for better contrast */
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}




.dot {
  display: inline-block;
  padding: 0 0.2em;
  transform: translateY(-0.08em);
  color: #ffffff; /* ensure the dot matches the text color */
  font-size: clamp(20px, 6vw, 70px); /* Increased font size */
  opacity: 1; /* ensure the dot isn't dimmed */
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);

}

.details {
  margin: 10% 0 0;
  font-size: clamp(14px, 2.4vw, 24px);
  letter-spacing: 0.12em;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}


.detailsarabic {
  margin: clamp(14px, 2.2vw, 20px) 0 0;
  font-size: clamp(14px, 2.4vw, 24px);
  letter-spacing: 0.12em;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  font-family: "Beiruti", serif;
  font-weight: 400;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}

.detailsfrench{
  margin: 5% 0 0;
  font-size: clamp(14px, 2.4vw, 24px);
  letter-spacing: 0.12em;
  text-transform: none;
  color: #ffffff;
  opacity: 1;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  text-shadow: 0px 4px 8px rgba(0,0,0,0.8);
}

.footer {
    text-align: center;
    padding: 1rem;
    background-color: #450920;
    color: #ffead0;
}


/* Responsive tweaks */
@media (max-width: 640px) {
  .corner.corner--tl, .corner.corner--br {
    width: clamp(300px, 66vw, 360px);
    height: clamp(50px, 66vw, 250px);
  }
  .names, .name {
    letter-spacing: 0.03em;
  }
  .hero_top, .hero_middle, .hero_bottom {
    aspect-ratio: 2 / 3; /* Switch to portrait mode */
  }
}