/* ===============================
   Global / Base
=================================*/
:root{
  --ink:#5a3a3a;
  --gold:#b8860b;
  --gold2:#a33a34;
  --red:#a33a34;
  --accent:#a33a34;
  --page:#fdf8f5;
}

@font-face {
    font-family: 'Naervik';
    src: url('font/Naervik/Naervik-ZpED3.otf') format('opentype');
}
@font-face {
    font-family: 'Chiesty';
    src: url('font/chiesty/Chiesty.otf') format('opentype');
}
@font-face {
    font-family: 'Swear';
    src: url('font/Swear/fonts/fonnts.com-Swear-Text-Light.otf') format('opentype');
}
@font-face {
    font-family: 'Garamond';
    src: url('font/Applegaramond/AppleGaramond.ttf') format('opentype');
}
@font-face {
    font-family: 'theipersonal';
    src: url('font/Thei_PersonalUse.otf') format('opentype');
}

html, body{
  margin:0;
  padding:0;
  background:var(--page);
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* Prevent navbar from spilling horizontally on small screens */
body { overflow-x: hidden; }
/* Safer viewport height on mobile browsers */
.hero-container{
  background-image:url('images/heropagebg1.png');
  background-size:cover;
  background-position:center;
  min-height:100vh;
  min-height:100svh; /* modern mobile safe */
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  position:relative;
}

/* ===============================
   Navbar
=================================*/
.navbar{
  padding:12px 16px;
  width:100%;
  box-sizing: border-box;
  max-width:100%;
  margin-inline:auto;
  display:flex;
  justify-content:flex-end;
  gap:3px;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(120%) blur(6px);
  z-index:10;
  overflow: hidden;
}
.navbar a{
  color:var(--ink);
  text-decoration:none;
  font-family:'Playfair Display', serif;
  font-size:clamp(11px, 2.6vw, 14px);
  letter-spacing:.06em;
  padding:0 8px;
  border-right:1px solid var(--gold);
}
.navbar a:last-child{ border-right:none; }

/* ===============================
   Hero
=================================*/

/* ---- Hero pop-up on scroll (simple + reliable) ---- */
/* cancel any previous keyframe animations on hero items */
/* Neutralize any previous keyframe animations on hero items */
.hero-content .logo,
.hero-content h1,
.hero-content .hashtag,
.hero-content .date,
.hero-content .divider {
  animation: none !important;
  will-change: transform, opacity;
  transform-origin: center;
}


/* initial (before reveal) */
.hero-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition:
    opacity 420ms ease-out,
    transform 420ms ease-out;
  will-change: opacity, transform;
}

/* revealed state */
.hero-reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* optional: stagger controlled via CSS var set in JS */
.hero-reveal {
  transition-delay: var(--stagger, 0ms);
}

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



/* For screens smaller than 768px */
@media (max-width: 768px) {
  .navbar {
    gap: 10px;  /* reduce spacing */
    font-size: 14px; /* smaller text */
  }
}

/* For very small screens like 320–400px */
@media (max-width: 400px) {
  .navbar {
    gap: 1px;
    font-size: 12px;
  }
}





.hero-container{
  min-height: 100svh;                 /* full screen height, safe on mobiles */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.hero-content{
  width: min(900px, 92vw);
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;        /* 👈 push to top */
  gap: clamp(8px, 1.8vw, 18px);

  padding-top: clamp(20px, 4vh, 20px); /* top spacing so texts are visible */
  padding-inline: 16px;
  padding-bottom: 100px;              /* room for swipe indicator */
  box-sizing: border-box;
  text-align: center;
}

.logo{ width: clamp(100px, 20vw, 150px); }

h1{
    font-family: "Naervik";
  font-size: clamp(35px, 7vw, 48px);
  line-height: 1.1;
  margin: 0;
  color: var(--gold);
  font-weight: lighter;
}

.hashtag{
  font-size: clamp(16px, 5.8vw, 24px);
  color: #b22222;
  margin: 0;
}

.date{  
 font-family: "Swear";
  font-size: clamp(22px, 7.8vw, 36px);
  margin: 0;
  color: var(--red);
}
.date .month-year{
  font-size: clamp(12px, 3.6vw, 16px);
}

.divider{ width: clamp(72px, 14vw, 100px); margin-top: 12px; }

.swipe-indicator{
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}


/* Smaller swipe indicator */
.swipe-image{
  width: clamp(26px, 12vw, 80px);  /* scales between 24px and 36px */
  height: auto;
}

/* Default styling stays same for larger screens */

/* Scale hero contents if screen height < 720px */
@media screen and (max-height: 720px) {
  .hero-content {
    transform: scale(0.85); /* shrink to 85% */
    transform-origin: top center; /* keep position consistent */
  }
}

/* Even smaller screens (e.g. very short mobiles) */
@media screen and (max-height: 600px) {
  .hero-content {
    transform: scale(0.75); /* shrink more */
  }
}
/* --- HERO: scale down when the screen is short (prevents overlap) --- */
.hero-content { will-change: transform; transform-origin: top center; }

/* < 720px tall */
@media (max-height: 720px){
  .hero-content { transform: scale(0.90); }
}
/* < 640px tall */
@media (max-height: 640px){
  .hero-content { transform: scale(0.82); }
}
/* < 560px tall */
@media (max-height: 560px){
  .hero-content { transform: scale(0.75); }
}

/* --- HERO: keep title on ONE line on very narrow phones --- */
h1{
  white-space: nowrap;             /* never wrap */
  letter-spacing: 0.02em;          /* tighten slightly */
}

/* Narrowest phones: gently shrink all hero typography so it fits */
@media (max-width: 340px){
  .logo{ width: 88px; }            /* slightly smaller logo */
  h1{ font-size: clamp(22px, 8.2vw, 32px); }
  .hashtag{ font-size: clamp(13px, 4.2vw, 18px); }
  .date{ font-size: clamp(18px, 5.8vw, 26px); }
  .date .month-year{ font-size: clamp(11px, 3.4vw, 14px); }
  .divider{ width: 72px; }

  /* add a touch more top padding so text breathes */
  .hero-content{ padding-top: 52px; }
}

/* Ultra-narrow fallback (really tiny devices) */
@media (max-width: 300px){
  h1{ font-size: 20px; }
  .hashtag{ font-size: 12px; }
  .date{ font-size: 16px; }
}



/* ===============================
   Wardrobe
=================================*/
.wardrobe-section{
  padding: clamp(28px,6vw,50px) 16px;
  background-image:url('images/secondpageimages/backgroundimage.png');
  background-size:cover;
  background-position:center;
}
.container{
  width:min(900px, 92vw);
  margin-inline:auto;
  text-align:center;
}
.wedding-ready{
  font-size:clamp(16px,4.8vw,20px);
  color:var(--red);
}
.countdown{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(6px,2vw,10px);
  font-size:clamp(24px,8vw,48px);
  color:var(--red);
  font-family:'Naerviki';
  margin:clamp(10px,4vw,20px) 0;
}
.countdown .label{
  font-size:clamp(10px,3vw,14px);
}

.wardrobe-guide{ padding-top:clamp(24px,6vw,50px); }
.wardrobe-guide h2{
  font-family:'Chiesty';
  font-weight:300;
  color:var(--accent);
  margin:0;
  line-height:1.05;
  font-size:clamp(32px,16vw,60px); /* bigger but fluid */
}
.guidewad{
  color:#000!important;
  letter-spacing:.6em;
  margin:.2em 0 .4em;
  font-size:clamp(14px,5.5vw,24px);
}
.color-palette{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:clamp(10px,3.5vw,20px) 0;
}
.color-palette span{ width:18px; height:18px; border-radius:50%; }
.color-palette span:nth-child(1){background:#8f9a6d;}
.color-palette span:nth-child(2){background:#f4a261;}
.color-palette span:nth-child(3){background:#e76f51;}
.color-palette span:nth-child(4){background:#d9534f;}
.color-palette span:nth-child(5){background:#b22222;}

.wardrobe-guide h3{
  font-family:'Playfair Display';
  color:var(--red);
  font-size:clamp(16px,5vw,22px);
  margin:.4em 0 .2em;
}
.wardrobe-guide p{
  font-size:clamp(14px,3.8vw,16px);
  max-width:52ch;
  margin:8px auto;
  text-wrap:balance;      /* nicer line breaks */
  overflow-wrap:break-word;
}
.wardrobe-guide img{
  width:100%;
  height:auto;
  margin-top:16px;
  border-radius:15px;
}

/* ===============================
   Events (final redesign)
=================================*/
/* --- EVENTS: robust, equal rows, consistent image size --- */

/* ==== EVENTS: reel-size background, fully responsive ==== */
.events-section{
  position: relative;
  overflow: hidden;      /* hide any tiny overflow from rotations */
  z-index: 0;            /* create a new stacking context */
}

/* Background image layer */
.events-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/bgimage.png"); /* ← replace with your file */
  background-position: center top;  /* keep important top area visible */
  background-repeat: no-repeat;
  background-size: contain;           /* fill section on most screens */
  z-index: -2;
  pointer-events: none;
}

/* Soft fade for readability (tweak the rgba if you want less/more) */
.events-section::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(253,248,245,0.95) 0%,
    rgba(253,248,245,0.00) 12%,
    rgba(253,248,245,0.00) 88%,
    rgba(253,248,245,0.95) 100%
  );
  z-index: -1;
  pointer-events: none;
}

/* Extra-tall phones (≈ 9:16 and taller): show the whole reel */
@media (max-aspect-ratio: 9/16){
  .events-section::before{
    background-size: contain;       /* fit entire reel */
    background-color: #fdf8f5;      /* fill side gaps with page color */
    background-position: center top;
  }
}



/* Use flex (more reliable on small phones than grid) */
.events-section .event-card{
  display: flex;
  align-items: center;              /* vertical center */
  justify-content: center;
  gap: clamp(2px, 0vw, 40px);
  margin-bottom: clamp(40px, 6vw, 64px);
  flex-wrap: nowrap;                /* keep in one row */
}

/* 40% image | 60% text */
.events-section .event-card img{
  flex: 0 0 40%;
  max-width: 45%;
  width: 100%;

  /* uniform size */
  aspect-ratio: 0 / 1;
  object-fit: contain;              /* show whole art */
  padding: 8px;
  box-sizing: border-box;
  border-radius: 18px;
  transform-origin: center;
}
.events-section .event-card .event-details{
  flex: 0 0 60%;
  max-width: 60%;
  min-width: 0;                     /* allow wrapping */
  text-align: center;
  padding-inline: clamp(6px, 2vw, 12px); /* extra breathing room */
  margin: 0 auto;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Top card: image right, text left */
.events-section .container .event-card:nth-of-type(1) .event-details{ order: 1; }
.events-section .container .event-card:nth-of-type(1) img{ order: 2; transform: rotate(-5deg) scale(1.04); }

/* Bottom card: image left, text right */
.events-section .container .event-card:nth-of-type(2) .event-details{ order: 2; }
.events-section .container .event-card:nth-of-type(2) img{ order: 1; transform: rotate(5deg) scale(1.04); }

/* Type scale (kept fluid, slightly wider text line-length) */
.events-section .event-details{
  max-width: 42ch;
}
.events-section .event-details h2{
  font-family: 'Chiesty';
  font-weight: 300;
  color: var(--accent);
  margin: 0;
  line-height: 1;
  font-size: clamp(22px, 8.5vw, 44px);
}
.events-section .event-details .event-subtitle{
  font-family: 'Garamond';
  font-weight:500;
  color: var(--accent);
  letter-spacing: .1em;
  margin: .4em 0;
  font-size: clamp(13px, 4.2vw, 18px);
}
.events-section .event-details p{
  font-size: clamp(13px, 4vw, 18px);
  font-weight: bold;
  color: rgb(16, 16, 16);
}

/* Tablet & up: allow 50/50 if you like; keep alignment solid */
@media (min-width: 700px){
  .events-section .event-card img   { flex-basis: 50%; max-width: 50%; }
  .events-section .event-card .event-details { flex-basis: 50%; max-width: 50%; }
  .events-section .event-details{ max-width: 46ch; }
}
/* --- Date Header Styling --- */
.event-date-header{
  font-family: 'Naerviki';
  font-size: clamp(24px, 4vw, 36px);  /* bigger than before */
  color: var(--ink);
  margin: 0 auto clamp(24px, 4vw, 40px);
  position: relative;
  display: inline-block;
  padding: 6px 0;                   /* spacing for lines */
  font-weight: normal;
}

/* Golden line above and below */
.event-date-header::before,
.event-date-header::after{
  content: '';
  position: absolute;
  left: -4px;                       /* extend line outward */
  right: -4px;
  height: 1px;
  background-color: var(--gold2);
}

.event-date-header::before{ top: 0; }
.event-date-header::after { bottom: 0; }





.events-section .event-details {
  text-align: center;
}

.events-section .event-details h2 {
  font-size: 2.1rem;
  margin-bottom: 0.3rem;
}

.events-section .event-details .event-subtitle,
.events-section .event-details p {
  max-width: 76%; /* narrower than header */
  margin: 0.2rem auto; /* center under header */
  font-size: 1rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.joyh2{
  font-size: 2.4rem !important;
}





/* ===============================
   RSVP (unchanged except sizing tweaks)
=================================*/
.rsvp-section{
  padding: 50px 20px;
  background-image:url('images/fifthsectionimages/background_image.png');
  background-size:cover;
  background-position:center;
}
.rsvp-form-container{ position:relative; padding:2px; }
.rsvp-form-container::before,
.rsvp-form-container::after{
  content:'';
  position:absolute; left:0; right:0; height:50px;
  background-repeat:no-repeat; background-size:100% auto;
}
.rsvp-form-container::before{ top:0;    background-image:url('images/fifthsectionimages/topborder.png'); }
.rsvp-form-container::after { bottom:0; background-image:url('images/fifthsectionimages/bottomborder.png'); }
.rsvp-form{
  max-width:500px; margin:0 auto; padding:40px; text-align:center;
  border-left:1px solid var(--gold); border-right:1px solid var(--gold);
}
.rsvp-form h2{
  font-family:'Playfair Display'; color:var(--red);
  font-size:clamp(18px,4.5vw,24px); margin-bottom:24px;
}
.rsvp-form form{ display:flex; flex-direction:column; text-align:left; }
.rsvp-form label{ font-size:clamp(14px,3.8vw,16px); margin-bottom:8px; }
.rsvp-form input[type="text"]{
  border:none; border-bottom:1px solid var(--gold); background:transparent;
  padding:6px; margin-bottom:20px; font-family:'Cormorant Garamond';
  font-size:clamp(14px,3.8vw,16px);
}
.rsvp-form .radio-group{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.rsvp-form button{
  background:var(--red); color:#fff; border:none; padding:14px;
  font-family:'Playfair Display'; font-size:clamp(14px,3.8vw,16px);
  cursor:pointer; margin-top:18px; border-radius:6px;
}

/* ===============================
   Venue (your new section)
=================================*/
.venue-section{
  /* Replace bg if needed */
  background:url('/images/bgimage.png') center/cover no-repeat;
  min-height:48vh;
  display:flex; align-items:center; justify-content:center;
  padding:56px 16px; color:var(--ink);
}
.venue-wrap{ width:min(720px, 92vw); text-align:center; }
.venue-title{
  display:flex; align-items:center; gap:12px; margin:0 clamp(24px,10vw,90px) 16px;
}
.venue-title .title-text{
  font-family:'Playfair Display'; font-weight:700; letter-spacing:1px;
  color:var(--red); text-transform:uppercase; font-size:clamp(14px,3.4vw,18px);
}
.venue-title .line{ flex:1 1 auto; height:1px; background:var(--gold); position:relative; }
.venue-title .line:first-child::after,
.venue-title .line:last-child::after{
  content:""; position:absolute; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--gold); transform:translateY(-50%);
}
.venue-title .line:first-child::after{ right:-8px; }
.venue-title .line:last-child::after { left:-8px; }

.venue-name{
  font-family:'Garamond'; font-weight:500;
  margin:0 0 16px; line-height:1.25; font-size:clamp(18px,4.2vw,24px);
}
.venue-divider{
  height:1.3px; width:clamp(160px,40vw,220px); background:var(--gold);
  margin:10px auto 60px;
}
.venue-note{
  font-family:'Cormorant Garamond'; margin:0 0 8px; line-height:1.4;
  font-size:clamp(14px,3.6vw,16px); font-weight:700;
}
.venue-signoff{
  font-family:'theipersonal'; color:var(--red); margin:6px 0 0; line-height:1.1;
  font-size:clamp(28px,10vw,44px);
}

/* ===============================
   Animations + helpers
=================================*/
@keyframes scale-in{ from{transform:scale(.9); opacity:0} to{transform:scale(1); opacity:1} }
@keyframes fade-in-up{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }
@keyframes swipe-up-down{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}

/* Reveal-on-scroll utility (if you’re using it) */
.hidden{ opacity:0; transform:translateY(14px) scale(.98); transition:all .6s ease-out; }
.visible{ opacity:1; transform:none; }
/* Make bottom venue texts look tappable */
.venue-note,
.venue-signoff {
  cursor: pointer;       /* optional: remove if you don't want underline */
  text-underline-offset: 3px;
}

/* ===== Venue: Map card ===== */
.venue-map{
  margin-top: clamp(24px, 5vw, 40px);
  text-align: center;
}













/* ===== Venue: Map icon button ===== */
.venue-actions{
  margin-top: clamp(14px, 3.5vw, 22px);
  display: flex;
  justify-content: center;
}

.venue-map-link{
  --btnPad: clamp(10px, 2.8vw, 14px);
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 2vw, 10px);
  padding: var(--btnPad) clamp(14px, 4vw, 20px);
  border: 1.8px solid var(--gold, #b8860b);
  border-radius: 999px;                         /* pill */
  background: #fff;
  color: var(--red, #b22222);
  text-decoration: none;                        /* no underline */
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(13px, 3.6vw, 16px);
  box-shadow: 0 6px 16px rgba(184,134,11,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  will-change: transform;
}

.venue-map-link .pin{
  width: clamp(18px, 4.8vw, 22px);
  height: auto;
  fill: currentColor;                            /* matches text color */
}

.venue-map-link:hover,
.venue-map-link:focus-visible{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(184,134,11,.18);
  outline: none;
  background: #fffdf8;
}

.venue-map-link:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(184,134,11,.12);
}

/* Small phones: keep it compact */
@media (max-width: 360px){
  .venue-map-link { padding: 9px 14px; }
}