/* =========================================================
   style.css – Sticky header over flowers (alle sider like)
   ========================================================= */
:root{
  --bg:#F5F3ED;
  --accent:#F4B6B0;   /* hovedtittel (Parisienne) + aksent */
  --text:#6F4E38;     /* brødtekst / meny (Cormorant Garamond) */
  --rsvp:#C26B65;     /* RSVP-farge */
  --gold:#D4AF37;     /* ikke i bruk */
  --max-width:760px;

  --rail-top:160px;   /* startposisjon for blomster under header */
  --rail-bottom:24px;
}

/* ========== Reset/typografi ========== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Cormorant Garamond',serif; line-height:1.6; text-align:center;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }

/* ========== Ramme ========== */
.page-frame{ position:relative; min-height:100vh; }

/* ========== BLOMSTER (under sticky header, over innhold) ========== */
.flower-rail{
  position:absolute;
  top:var(--rail-top);
  bottom:var(--rail-bottom);
  width:120px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
  z-index:500; /* under header (1000), over innhold (10) */
}
.flower-rail img:first-child{
  margin-top:clamp(60px, 8vh, 120px);
}
.flower-rail.left  { left:  calc((100vw - var(--max-width)) / 4); }
.flower-rail.right { right: calc((100vw - var(--max-width)) / 4); }
.flower-rail img{ width:120px; height:auto; display:block; }

@media (max-width:768px){
  .flower-rail{ display:none; }
}

/* ========== STICKY HEADER (tittel + meny + nedtelling) ========== */
.sticky-header{
  position:sticky; top:0; z-index:1000;
  background:var(--bg);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.header-inner{ max-width:var(--max-width); margin:0 auto; padding:1rem 1rem .6rem; }

.main-title{
  font-family:'Parisienne',cursive; color:var(--accent);
  font-size:3rem; margin:.2rem 0; cursor:pointer;
}

/* NAV */
.nav-row{
  display:flex; gap:.6rem; align-items:center; justify-content:center;
  max-width:var(--max-width); margin:0 auto;
}
.nav-links{
  display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; justify-content:center;
  background:var(--bg);
}
.nav-btn{
  background:transparent; border:none; padding:.5rem .9rem;
  font-family:'Cormorant Garamond',serif; color:var(--text);
  font-size:1.05rem; font-weight:700; cursor:pointer; border-radius:6px;
  transition:color .2s ease, transform .15s ease;
}
.nav-btn:hover{ color:var(--rsvp); transform:translateY(-1px); }

/* Hamburgermeny-knapp */
.hamburger-btn{
  display:none; background:none; border:none; cursor:pointer; padding:.4rem;
  font-size:1.8rem; line-height:1; color:var(--text);
}

/* ========== INNHOLD ========== */
.container{
  max-width:var(--max-width); margin:1.6rem auto 2.4rem; padding:0 1rem;
  position:relative; z-index:10;
}
.page h2,.page h3,.page h4{ margin:1.4rem auto .8rem; }
.page h2::after{
  content:""; display:block; width:80px; height:2px; background:var(--accent);
  margin:.6rem auto 0; opacity:.6; border-radius:2px;
}

/* Bilder i blokk (standard) */
.image-block{ margin:1.2rem 0; }
.image-block img{ max-width:88%; height:auto; border-radius:6px; }
.caption{ font-style:italic; margin-top:.4rem }

/* Transport-boks */
.transport-box{ display:flex; gap:1rem; padding:1rem 0; align-items:stretch; justify-content:space-between; }
.transport-column{ flex:1; padding:0 .5rem; }
.transport-divider{ width:5px; background:rgba(111,78,56,.18); border-radius:3px; margin:0 .4rem; }
.transport-column h4{ margin-top:0; text-align:center }

/* RSVP-link */
.rsvp-link{
  color:var(--rsvp);
  font-weight:700;
  display:inline-block;
  /*margin-bottom:1.8rem; /* luft når den står over noe */
}

/* Footer */
.footer{ padding:1.2rem 1rem; position:relative; z-index:10; }

/* Login-kort */
.login-frame{
  max-width:420px; margin:6rem auto; background:rgba(255,255,255,.92);
  padding:1.6rem; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.login-frame input{ width:100%; padding:.7rem; border-radius:6px; border:1px solid rgba(0,0,0,.12); font-size:1rem; margin-top:.8rem }
.login-frame button{ margin-top:.8rem; padding:.6rem 1rem; background:var(--accent); border:none; color:#fff; border-radius:6px; cursor:pointer }
.login-error{ color:#c33; margin-top:.6rem; min-height:1.2rem }

/* ========== MOBIL ========== */
@media (max-width:900px){ .main-title{font-size:2.6rem} }
@media (max-width:768px){
  .hamburger-btn{ display:block; }
  .nav-row{ justify-content:space-between; align-items:flex-start; }
  .nav-links{
    display:none; flex-direction:column; gap:.2rem; width:100%; margin-top:.4rem;
    padding:.4rem 0; background:var(--bg); box-shadow:0 6px 12px rgba(0,0,0,.06);
  }
  .nav-links.open{ display:flex; }
  .container{ margin:1rem auto 1.6rem }
  .main-title{ font-size:2rem }
}
@media (max-width:420px){ .main-title{font-size:1.8rem} }

/* =========================================================
   ØNSKELISTE – rutenett og kort
   (disse definerer “malen” vi matcher på info-kortene)
   ========================================================= */
.gift-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  max-width: var(--max-width);
  margin: 1.2rem auto 0;
  padding: 0 .4rem;
}
.gift-card{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(194, 107, 101, .18);
  border-radius: 10px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  transition: border-color .3s ease, box-shadow .3s ease, transform .15s ease;
  min-height: 160px;
}
.gift-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  border-color: #F4B6B0;
  border-style: solid;
}
/* Dekor (kan brukes/ignoreres etter behov) */
.gift-card::before{
  content:"";
  position:absolute; top:-10px; right:-10px;
  width:120px; height:120px;
  background: url("images/blomstH2.png") no-repeat center / contain;
  opacity:.14; pointer-events:none; transform: rotate(6deg); z-index:0;
}
.gift-card.gift-card--alt::before{
  top:auto; right:auto; bottom:-10px; left:-10px;
  background: url("images/blomstV2.png") no-repeat center / contain;
  transform: rotate(-6deg);
}
.gift-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 42%, transparent 55%);
  transform: translateX(-120%) skewX(-18deg);
  transition: transform .6s ease; pointer-events:none; z-index:0;
}
.gift-card:hover::after{ transform: translateX(120%) skewX(-18deg); }

.gift-card > *{ position: relative; z-index: 1; }
.gift-title{ margin:.1rem 0 .35rem; font-size:1.15rem; font-weight:700; }
.gift-text{ margin:0 0 .75rem; }
.gift-actions{ display:flex; justify-content:center; gap:.6rem; }
.btn{
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: .55rem .9rem;
  cursor: pointer;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
}
.btn:hover{ filter: brightness(0.96); }

/* Vis mer-boks */
.gift-physical{ margin-top: 1rem; }
.link-like{
  background:none; border:none; color:var(--rsvp); font-weight:700;
  cursor:pointer; text-decoration:none; padding:.25rem .5rem;
}
.gift-ideas{
  margin-top:.6rem; background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.06); border-radius:10px; padding:.8rem 1rem;
}
.gift-list{ list-style:none; padding:0; margin:0 0 .5rem; }
.gift-list li{ padding:.25rem 0; }
.gift-note{ font-style:italic; margin:0; }

/* Hjerteikon i ønskelisten → samme farge som hovedtittel */
.heart-icon{ color: var(--accent); }

/* =========================================================
   Scroll-effekter, “til toppen”-knapp
   ========================================================= */
.reveal { opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform: translateY(0); }

/* Dekorlinje under h2 */
.page h2::after{
  content:""; display:block; width:80px; height:2px;
  background:#F4B6B0; margin:.6rem auto 0; opacity:.6; border-radius:2px;
}

/* Til toppen-knapp (luksuriøs) */
.to-top{
  position: fixed; bottom:22px; right:22px;
  background: var(--accent, #F4B6B0); color:#fff;
  border: 1px solid #F5F3ED; border-radius:50%;
  width:56px; height:56px; font-size:1.4rem; cursor:pointer;
  opacity:0; pointer-events:none;
  transition: opacity .28s ease, transform .18s ease, box-shadow .18s ease;
  z-index:999;
  box-shadow: 0 8px 20px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.25);
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16), 0 0 0 2px #F5F3ED inset;
}
@media (max-width:768px){ .to-top{ bottom:72px; } }

/* =========================================================
   Nedtelling – generell + header
   ========================================================= */
.countdown{
  margin:1.2rem auto 1.6rem; max-width:var(--max-width); text-align:center;
}
.countdown-title{ margin:.2rem 0 .6rem; }
.countdown-wrap{
  display:inline-grid; grid-template-columns:repeat(3,auto);
  gap:14px 22px; align-items:end; justify-items:center; margin-inline:auto;
}
.cd-item{ min-width:140px; text-align:center; }
.cd-number{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1; color:var(--text,#6F4E38);
}
.cd-label{ display:block; margin-top:.25rem; font-size:1rem; letter-spacing:.02em; opacity:.85; }
@media (max-width:600px){
  .cd-item{ min-width:110px; }
  .cd-number{ font-size:clamp(2rem, 7vw, 2.8rem); }
}

/* Meldinger ved/etter dato */
.wedding-day-message{
  font-family:'Cormorant Garamond',serif; font-size:2.2rem; font-weight:700;
  text-align:center; color:var(--accent); margin:2rem 0; animation:fadeIn 10s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.countdown-message{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:clamp(1.6rem, 3.6vw, 2.2rem); color:var(--accent,#F4B6B0);
  text-align:center; margin:1.2rem 0 1.6rem; animation:cdFade .9s ease both; letter-spacing:.01em;
}
@keyframes cdFade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

/* Elegant typografi + animasjon ved tallskifte (brukes av JS .tick) */
.cd-value,
.cd-number{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.cd-value.tick,
.cd-number.tick{ animation: cdLift 1.2s ease; }
@keyframes cdLift{
  0%{ transform:translateY(6px); opacity:0; }
  50%{ opacity:1; }
  100%{ transform:translateY(0); opacity:1; }
}

/* Kompakt header-variant */
.header-countdown{ text-align:center; margin:.35rem auto .5rem; }
.header-countdown .countdown-wrap{
  display:inline-grid; grid-template-columns:repeat(3,auto);
  gap:4px 0px; align-items:end; justify-items:center;
}
.header-countdown .cd-item{ text-align:center; }
.header-countdown .cd-value{
  font-family:'Cormorant Garamond',serif; font-weight:700;
  font-size:2.0rem; line-height:1; letter-spacing:.4px; color:var(--accent);
}
.header-countdown .cd-label{ font-size:.85rem; opacity:.85; margin-top:0; }
@media (max-width:420px){
  .header-countdown .cd-value{ font-size:1.38rem; }
  .header-countdown .countdown-wrap{ gap:2px 6px; }
}

/* =========================================================
   Forside – bilder side om side + kompakte info-kort
   ========================================================= */
/* Bilder side om side */
.image-row{
  display:flex; gap:1.5rem; justify-content:center; align-items:flex-start; margin:2rem 0; flex-wrap:wrap;
}
.image-row figure{ flex:1 1 0; max-width:48%; text-align:center; }
.image-row img{ width:100%; height:auto; border-radius:6px; }
.image-row figcaption{ font-size:.9rem; margin-top:.4rem; color:#555; }
@media (max-width:768px){
  .image-row{ flex-direction:column; gap:1rem; }
  .image-row figure{ max-width:100%; }
}

/* Tre kompakte info-kort – MATCHER gift-card i border/skygge */
.info-cards{
  display:flex; justify-content:center; gap:1rem;
  margin:1.5rem 0 2rem; flex-wrap:wrap;
}
.info-card{
  flex:1 1 160px; max-width:200px;
  background:rgba(255,255,255,.88);
  padding:.8rem .6rem;
  border:1px solid rgba(194, 107, 101, .18);      /* samme som gift-card */
  border-radius:6px;                                /* sett 10px for 100% match */
  text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.04);           /* samme som gift-card */
  transition: transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  min-height:150px;
}
.info-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:#F4B6B0;
  border-style:solid;
}
.info-card h3{
  margin:0 0 .4rem;
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-weight:700;
  display:inline-block; padding-bottom:.15rem;
  border-bottom:2px solid #F4B6B0;                /* rosa strek inni kortet */
}
.info-content{ font-size:.85rem; line-height:1.3; }
.info-time{ font-weight:bold; }
.info-place{ font-style:italic; }

/* litt pene spacing på romtypene i "overnatting" */
.room-prices {
  margin: 1rem 0;
  font-size: 1.05rem;
  letter-spacing: 0.3px;
  text-align: center;
}

.room-prices .divider {
  color: #F4B6B0;   /* samme rosafarge som overskriftene */
  margin: 0 0.7rem; /* litt luft rundt streken */
  font-weight: 700;
}