/* =============================================================
   WEDDING SITE — shared stylesheet
   Edit palette + fonts here once; every page updates.
   ============================================================= */
:root{
  --plaster:   #F7F3EC;   /* background — whitewashed wall */
  --plaster-2: #EFE9DE;   /* subtle section band */
  --ink:       #2C3237;   /* soft charcoal text */
  --ink-soft:  #5B6167;   /* muted body text */
  --aegean:    #2F5D6B;   /* deep sea accent */
  --aegean-dk: #24484F;
  --brass:     #B08D57;   /* warm metallic detail */
  --line:      #D8CFC0;   /* hairline dividers */

  --display: "EB Garamond", Georgia, serif;
  --util:    "Alegreya Sans", "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--plaster);
  color:var(--ink);
  font-family:var(--util);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }

.eyebrow{
  font-family:var(--util); font-weight:400;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--brass);
}

/* ---------------- NAV ---------------- */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(247,243,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:1320px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:2rem;
  padding:.85rem 1.5rem;
}
.monogram{
  font-family:var(--display); font-size:1.5rem; font-weight:500;
  letter-spacing:.05em; text-decoration:none;
}
/* 12 items — sized to sit on one line on a laptop, wrapping only when it must */
.nav-links{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem 1.05rem; list-style:none;
  font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.nav-links a{ text-decoration:none; color:var(--ink-soft); transition:color .2s; }
.nav-links a:hover,
.nav-links a.active{ color:var(--aegean); }
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  font-family:var(--util); font-size:.86rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink);
  margin-left:auto;
}

/* ---------------- HERO (home) ---------------- */
.hero{
  position:relative; min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:4rem 1.5rem; color:#fff;
  background-image:linear-gradient(rgba(20,32,36,.32),rgba(20,32,36,.42)),
    url("images/frontlineimage.jpeg");
  background-size:cover; background-position:center;
}
.hero .eyebrow{ color:#F0E6D2; }
.hero h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(3.2rem,9vw,7rem); line-height:1; letter-spacing:.01em;
  margin:.6rem 0 1.1rem;
}
.hero h1 .amp{ font-style:italic; margin:0 .12em; color:#F0E6D2; }
.hero .meta{ font-size:.95rem; letter-spacing:.28em; text-transform:uppercase; font-weight:400; }
.hero .divider{ width:1px; height:44px; background:rgba(255,255,255,.6); margin:1.6rem auto; }

/* ---------------- PAGE HERO (interior pages) ---------------- */
.page-hero{
  position:relative; min-height:42vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:3rem 1.5rem; color:#fff;
  background-image:linear-gradient(rgba(20,32,36,.38),rgba(20,32,36,.5)),
    url("images/old-town.jpg");
  background-size:cover; background-position:center;
}
.page-hero h1{
  font-family:var(--display); font-weight:300;
  font-size:clamp(2.4rem,6vw,4rem); line-height:1; margin-top:.5rem;
}
.page-hero .eyebrow{ color:#F0E6D2; }

/* per-page hero photos — add one of these next to .page-hero */
.page-hero.h-church{    background-image:linear-gradient(rgba(20,32,36,.38),rgba(20,32,36,.5)), url("images/church.jpg"); }
.page-hero.h-vento{     background-image:linear-gradient(rgba(20,32,36,.38),rgba(20,32,36,.5)), url("images/vento.jpg"); }
.page-hero.h-kallithea{ background-image:linear-gradient(rgba(20,32,36,.38),rgba(20,32,36,.5)), url("images/frontlineimage.jpeg"); }
.page-hero.h-lindos{    background-image:linear-gradient(rgba(20,32,36,.38),rgba(20,32,36,.5)), url("images/lindos.jpg"); }

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-block; font-family:var(--util); font-weight:400;
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  padding:.9rem 2.4rem; border:1px solid currentColor; text-decoration:none;
  transition:background .25s,color .25s;
}
.hero .btn{ color:#fff; }
.hero .btn:hover{ background:#fff; color:var(--aegean-dk); }
.btn.dark{ color:#EAF0F0; margin-top:2.4rem; }
.btn.dark:hover{ background:#EAF0F0; color:var(--aegean-dk); }
.btn.solid{ background:var(--aegean); color:#fff; border-color:var(--aegean); }
.btn.solid:hover{ background:var(--aegean-dk); border-color:var(--aegean-dk); }

/* ---------------- SECTIONS ---------------- */
section{ padding:5.5rem 1.5rem; }
.wrap{ max-width:760px; margin:0 auto; text-align:center; }
.band{ background:var(--plaster-2); }
h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,4.5vw,3rem); line-height:1.1; margin:.5rem 0 1.4rem;
}
.rule{ width:56px; height:1px; background:var(--brass); margin:1.4rem auto; }
.lead{ font-size:1.08rem; color:var(--ink-soft); }

/* detail row (time / dress code etc.) */
.detail-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:2.5rem; margin-top:2.4rem; }
.detail{ min-width:160px; }
.detail .k{ font-family:var(--display); font-size:1.6rem; color:var(--aegean); }
.detail .v{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:.3rem; }

/* countdown */
.countdown{ display:flex; justify-content:center; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.cd-unit .n{ font-family:var(--display); font-size:2.6rem; color:var(--aegean); line-height:1; }
.cd-unit .l{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:.4rem; }

/* ---------------- FAQ / INFO ---------------- */
.faq{ max-width:720px; margin:2rem auto 0; text-align:left; }
.faq-item{ border-bottom:1px solid var(--line); padding:1.4rem 0; }
.faq-item h3{ font-family:var(--display); font-weight:500; font-size:1.35rem; color:var(--aegean); }
.faq-item p{ color:var(--ink-soft); margin-top:.4rem; }

/* ---------------- INLINE CONTENT PHOTO ---------------- */
.content-photo{ margin:2.2rem 0; }
.content-photo img{ width:100%; height:auto; display:block; }
.content-photo figcaption{
  font-size:.68rem; letter-spacing:.1em; color:var(--ink-soft);
  margin-top:.5rem; text-align:right;
}

/* ---------------- PROSE (long-form copy inside a centred wrap) ---------------- */
.prose{ max-width:680px; margin:1.6rem auto 0; text-align:left; color:var(--ink-soft); }
.prose p + p{ margin-top:1rem; }
.prose strong{ color:var(--ink); font-weight:500; }
.prose a{ color:var(--aegean); text-underline-offset:.2em; }

/* small "see it on the map" link */
.maplink{
  display:inline-block; margin-top:1.6rem;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--aegean); text-decoration:none; border-bottom:1px solid var(--brass);
  padding-bottom:.25rem; transition:color .2s,border-color .2s;
}
.maplink:hover{ color:var(--aegean-dk); border-color:var(--aegean); }

/* a soft aside — "details to follow" and similar */
.note{
  border-left:2px solid var(--brass); background:var(--plaster);
  padding:.9rem 1.2rem; margin:1.8rem auto 0; max-width:560px;
  text-align:left; font-size:.92rem; color:var(--ink-soft);
}

/* bank details (gifts section) */
.bank{ max-width:560px; margin:2.2rem auto 0; text-align:left; border-top:1px solid var(--line); }
.bank div{ display:flex; flex-wrap:wrap; gap:.3rem 1.2rem; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--line); }
.bank dt{ font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.bank dd{ margin:0; color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; word-break:break-word; }

/* ---------------- LINK LIST (salons, simple linked entries) ---------------- */
.link-list{ list-style:none; max-width:640px; margin:2.2rem auto 0; text-align:left; }
.link-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--line); padding:1rem 0;
}
.link-list a{
  font-family:var(--display); font-size:1.25rem; color:var(--aegean);
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s;
}
.link-list a:hover{ border-color:var(--brass); }
.link-list .tag{
  flex:none; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); text-align:right;
}

/* ---------------- DINE LIST (restaurants & bars) ---------------- */
.dine-list{ list-style:none; max-width:720px; margin:2.2rem auto 0; text-align:left; }
.dine-list li{
  display:grid; grid-template-columns:1fr auto; gap:.15rem 1rem;
  border-bottom:1px solid var(--line); padding:1.1rem 0;
}
.dine-list .n{ font-family:var(--display); font-size:1.3rem; color:var(--ink); }
.dine-list .tag{
  grid-column:2; grid-row:1; align-self:baseline;
  font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass); text-align:right; white-space:nowrap;
}
.dine-list .d{ grid-column:1 / -1; font-size:.95rem; color:var(--ink-soft); }
.dine-list.compact li{ padding:.7rem 0; }

/* ---------------- EXCURSIONS (boat trips) ---------------- */
.excursion + .excursion{ margin-top:3.5rem; padding-top:3.5rem; border-top:1px solid var(--line); }
.excursion h3{
  font-family:var(--display); font-weight:400; font-size:2rem;
  color:var(--aegean); margin-top:1.4rem;
}

/* ---------------- BUS SCHEDULE ---------------- */
.schedule{ max-width:680px; margin:2rem auto 0; text-align:left; }
.schedule .day{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin:2.4rem 0 .4rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}
.schedule .day:first-child{ margin-top:0; }
.schedule .leg{ display:flex; gap:1.4rem; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.schedule .time{
  flex:none; width:4.5rem; font-family:var(--display); font-size:1.5rem;
  color:var(--aegean); line-height:1.2;
}
.schedule .what{ color:var(--ink-soft); font-size:.98rem; }
.schedule .what strong{ color:var(--ink); font-weight:500; }

/* ---------------- BUS REGISTRATION FORM ---------------- */
.form{ max-width:640px; margin:2.4rem auto 0; text-align:left; }
.form .field{ margin-top:1.5rem; }
.form .lbl{
  display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); margin-bottom:.5rem;
}
.form .lbl .opt{ color:var(--ink-soft); letter-spacing:.12em; }
.form input[type=text],
.form input[type=tel],
.form input[type=email],
.form input[type=number],
.form textarea{
  width:100%; font-family:var(--util); font-weight:300; font-size:1rem;
  color:var(--ink); background:var(--plaster);
  border:1px solid var(--line); border-radius:0; padding:.8rem .9rem;
  transition:border-color .2s; -webkit-appearance:none; appearance:none;
}
.form input:focus,
.form textarea:focus{ outline:none; border-color:var(--aegean); }
.form textarea{ min-height:6rem; resize:vertical; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }

/* the route checklist — mirrors .schedule so the two read as one thing */
.form fieldset{ border:0; margin-top:2.4rem; }
.form legend{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--brass); padding-bottom:.6rem; border-bottom:1px solid var(--line); width:100%;
}
.form .check{
  display:flex; align-items:flex-start; gap:1rem;
  padding:.9rem 0; border-bottom:1px solid var(--line);
  color:var(--ink-soft); font-size:.96rem; cursor:pointer;
}
/* "select all" — only useful with JS, so it stays hidden without it */
.form .check-all{ display:none; }
.js .form .check-all{ display:flex; align-items:center; }
.form .check-all span{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--aegean);
}
.form .check.check-all input{ margin-top:0; }
.form .check input{ flex:none; margin-top:.4rem; width:1rem; height:1rem; accent-color:var(--aegean); }
.form .check .t{
  flex:none; width:3.4rem; font-family:var(--display); font-size:1.25rem;
  color:var(--aegean); line-height:1.3;
}
.form .check strong{ color:var(--ink); font-weight:500; }
.form .actions{ margin-top:2.4rem; text-align:center; }
.form button.btn{ cursor:pointer; font-family:var(--util); }

@media (max-width:560px){
  .form .row{ grid-template-columns:1fr; gap:0; }
  .form .check .t{ width:2.9rem; font-size:1.1rem; }
}

/* ---------------- FOOTER ---------------- */
footer{ background:var(--aegean-dk); color:#EAF0F0; text-align:center; padding:4rem 1.5rem 3rem; }
footer .monogram{ font-size:2rem; color:#fff; }
footer .fdate{ font-family:var(--util); letter-spacing:.3em; font-size:.8rem; margin-top:.6rem; color:#B9CBCE; }
footer .fcontact{
  display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem;
}
footer .fcontact .btn.dark{ margin-top:0; }
footer .flinks{
  list-style:none; display:flex; flex-wrap:wrap; gap:1.4rem; justify-content:center;
  margin:2rem 0 0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
}
footer .flinks a{ color:#B9CBCE; text-decoration:none; transition:color .2s; }
footer .flinks a:hover{ color:#fff; }

/* fade-in — site.js adds .in as each block scrolls into view.
   Blocks are visible by default; the animation is armed only once the inline
   head script has confirmed JS, so with JS off nothing is ever hidden. */
.js .fade{ opacity:0; transform:translateY(14px); transition:opacity 1s ease, transform 1s ease; }
.js .fade.in{ opacity:1; transform:none; }

/* ---------------- MOBILE ---------------- */
@media (max-width:820px){
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--plaster);
    border-bottom:1px solid var(--line); padding:.5rem 0;
    text-align:center;
  }
  .nav-links.open{ display:flex; }
  .nav-links li{ padding:.35rem 1.5rem; }
  .nav-toggle{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .js .fade{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}