/* --------------------------------------------------------------------
   Fonts & Imports
---------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Alice&family=Cardo:ital@0;1&display=swap");

@font-face {
  font-family: "BrittanySignature";
  src: url("/fonts/BrittanySignature.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* --------------------------------------------------------------------
   Design Tokens – Mountains / Woodland Animals / Spring Palette
---------------------------------------------------------------------*/
:root {
  /* fonts */
  --font-heading: "Alice", serif;
  --font-body: "Cardo", serif;
  --font-script: "BrittanySignature", cursive;

  /* colour palette */
  /* a fresh woodland green as the primary brand colour */
  --clr-primary: #9BA181;
  /* a slightly deeper shade for hover / active states */
  --clr-primary-dark: #7B8067;
  /* forest‑floor accent greens */
  --clr-accent: #556B2F;          /* dark moss */
  --clr-accent-light: #C6D3B3;    /* young spring leaves */

  /* neutrals */
  --clr-neutral-0: #ffffff;
  --clr-neutral-50: #f8f8f8;
  --clr-neutral-100: #f4f6f1;     /* subtle green‑tinted off‑white */
  --clr-neutral-200: #e0e4dc;
  --clr-shadow: rgba(0, 0, 0, 0.1);

  /* other */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --transition: 0.3s ease;
}

/* --------------------------------------------------------------------
   Base Elements
---------------------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box;}
body {
  font-family: var(--font-body);
  line-height: 1.6;
  margin: 0;
  min-height: 100vh;
  background: var(--clr-neutral-100) url("/images/file.svg") no-repeat center/cover;
}

h1, h2, h3 { font-family: var(--font-heading); }

#main-content{display:block!important;}

/* Links -------------------------------------------------------------*/
a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--clr-primary-dark); }

/* --------------------------------------------------------------------
   Layout Helpers
---------------------------------------------------------------------*/
.container,
.content-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding-inline: 1rem;
}
.content-container{margin-block:2rem;}

/* --------------------------------------------------------------------
   Navigation
---------------------------------------------------------------------*/
.navbar {
  background: var(--clr-neutral-0);
  box-shadow: 0 2px 4px var(--clr-shadow);
  padding-block: 1em;
}

.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  font-size: 1.125rem;
}

.nav-links a {
  color: var(--clr-primary);
  font-weight: 550;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav-links a:hover {
  border-color: var(--clr-neutral-200);
}
.nav-links a.active {
  font-weight: bold;
  border-color: var(--clr-primary);
}

/* --------------------------------------------------------------------
   Cards & Blocks
---------------------------------------------------------------------*/
.card,
.travel-card,
.welcome-card,
.info-card,
.accommodation-card {
  background: var(--clr-neutral-0);
  border: 1px solid var(--clr-neutral-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 4px var(--clr-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* --------------------------------------------------------------------
   Collapsible Sections
---------------------------------------------------------------------*/
.collapsible {
  width: 100%;
  border: none;
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  text-align: left;
  background: var(--clr-neutral-50);
  color: #333;
  cursor: pointer;
  transition: background var(--transition);
}
.collapsible:hover,
.collapsible.active { background: var(--clr-neutral-200); }

.collapsible::after {
  content: "\002B";
  float: right;
  margin-left: 0.5rem;
  font-weight: bold;
  color: #777;
}

.content {
  max-height: 0;
  overflow: hidden;
  background: var(--clr-neutral-0);
  padding-inline: 1rem;
  transition: max-height 0.2s ease-out;
}

.collapsible.active + .content { max-height: 999px; }

/* --------------------------------------------------------------------
   Countdown Banner
---------------------------------------------------------------------*/
.countdown-wrapper {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  background: rgba(255,255,255,0.8);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-align: center;
}

.countdown-container { display: flex; justify-content: center; gap: 1rem; }
.countdown-item   { display: flex; flex-direction: column; align-items: center; }
.countdown-number { font-size: 2rem; font-weight: 700; }
.countdown-label  { font-size: 0.8rem; text-transform: uppercase; }

/* --------------------------------------------------------------------
   Media Components
---------------------------------------------------------------------*/
.map-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin-top: 1rem;
}
.map-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px,1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px var(--clr-shadow);
}

/* --------------------------------------------------------------------
   Buttons
---------------------------------------------------------------------*/
.btn {
  display: inline-block;
  padding: 0.55rem 1.2rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  background: var(--clr-primary);
  color: var(--clr-neutral-0);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition);
}
.btn:hover:not([disabled]) {
  background: var(--clr-primary-dark);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn[disabled] {
  background: #c8ccc0;
  cursor: not-allowed;
}

/* Outline variant */
.btn--outline {
  background: var(--clr-neutral-0);
  color: var(--clr-primary);
  border: 2px solid var(--clr-primary);
}
.btn--outline:hover { background: #f0f4f0; }

/* Like button */
#like-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--clr-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
#like-btn:hover { color: var(--clr-primary-dark); }

/* Dropzone */
#photo-dropzone {
  border: 2px dashed var(--clr-primary);
  border-radius: var(--radius-lg);
  padding: 2rem 1rem;
  text-align: center;
  color: var(--clr-primary-dark);
  margin-bottom: 1.5rem;
  transition: background var(--transition);
}
#photo-dropzone.dz-drag-hover { background: #fafdfb; }
.dz-upload { background: var(--clr-primary) !important; }

/* Checkbox overlay on gallery thumbs */
.photo-item input[type="checkbox"] {
  appearance: none;
  width: 20px; height: 20px;
  border: 2px solid var(--clr-neutral-0);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.75);
}
.photo-item input[type="checkbox"]:checked {
  background: var(--clr-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath fill='%23fff' d='M1 5l3.2 3.3L11 1'/%3E%3C/svg%3E") center/12px 10px no-repeat;
  border-color: var(--clr-primary);
}

/* Comments */
#comment-input {
  width: 100%;
  border: 1px solid var(--clr-neutral-200);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  resize: vertical;
}
#comment-input:focus { border-color: var(--clr-primary); outline: none; }
#comments-list p {
  background: var(--clr-neutral-50);
  margin: 0.25rem 0;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}

/* Toast / Spinner */
.notif, #loading-spinner { font-family: var(--font-heading); color: var(--clr-primary-dark); }

/* --------------------------------------------------------------------
   Timeline
---------------------------------------------------------------------*/
.timeline {
  position: relative;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--clr-accent-light);
}
.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.timeline-item:last-child { margin-bottom: 0; }
.bullet {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--clr-accent-light);
  margin-top: 4px;
}
.time   { font-weight: 700; color: var(--clr-accent); }
.event  { margin-top: 0.25rem; color: #333; }

/* --------------------------------------------------------------------
   Menus & Grids
---------------------------------------------------------------------*/
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.menu-item {
  background: var(--clr-neutral-100);
  border-radius: var(--radius-md);
  padding: 1rem;
  text-align: center;
}
.menu-item h3 { color: var(--clr-accent); margin-bottom: 0.5rem; }
.menu-item p  { color: #333; font-size: 0.95rem; }

/* --------------------------------------------------------------------
   Forms
---------------------------------------------------------------------*/
#password-form {
  max-width: 50em;
  margin: 10em auto;
  text-align: center;
  background: var(--clr-neutral-0);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 10px var(--clr-shadow);
}
#password-form h1 {
  margin-bottom: 1.5rem;
  font-size: 3rem;
  font-family: var(--font-script);
  color: #333;
}
#password-input {
  width: 100%;
  border: 1px solid var(--clr-neutral-200);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-size: 1rem;
  transition: border-color var(--transition);
}
#password-input:focus { border-color: var(--clr-primary); outline: none; }
#password-form button {
  width: 100%;
  background: var(--clr-primary);
  color: var(--clr-neutral-0);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition);
}
#password-form button:hover { background: var(--clr-primary-dark); }
.error-message { display: none; color: #ff0000; margin-top: 1rem; font-size: 0.9rem; }

/* --------------------------------------------------------------------
   Utilities & Overrides
---------------------------------------------------------------------*/
button { cursor: pointer; }
.modal-overlay { z-index: 1000; }

/* --------------------------------------------------------------------
   Responsive
---------------------------------------------------------------------*/
@media (max-width: 768px) {
  .nav-links { flex-direction: column; align-items: center; }
  .countdown-container { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .btn { font-size: 0.9rem; padding: 0.5rem 1rem; }
}

/* quick compatibility shims */
.navbar-container {             /* make it act like .container */
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

.countdown-section {            /* mimic the old behaviour */
  text-align: center;
  margin: 2rem 0;
}

.couple-picture img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.overlay-container {
  max-width: 800px;
  margin: 0 auto;
}

/* --------------------------------------------------------------------
   Hero Message – invitation header
---------------------------------------------------------------------*/
.hero-message{
  text-align:center;
  margin-block:3rem 2rem;
}

.script{font-family:var(--font-script);}

.script--xl{font-size:clamp(2.5rem,8vw,4.5rem);line-height:1.1;margin-bottom: 5rem;}
.script--lg{font-size:clamp(1.75rem,6vw,3rem);margin-block:0.5rem;margin-bottom: 5rem;}

.ampersand{
  font-family:var(--font-script);
  display:block;
  font-size:clamp(2rem,7vw,3.5rem);
  margin-block:0.25rem;
}

.invite-text{
  font-family:var(--font-heading);
  font-size:1rem;
  color:#333;
  margin-block:1rem;
  margin-bottom: 5rem;
}

.venue{
  font-size:1.2rem;
  color:#333;
  margin-top:0.75rem;
}

/* --------------------------------------------------------------------
   Footer illustration (badger photo)
---------------------------------------------------------------------*/
.footer-illustration{
  max-width: 800px;          /* matches .container */
  margin: 3rem auto 2rem;    /* space above & below */
  text-align: center;
}
.footer-illustration img{
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 8px var(--clr-shadow);
}

body{
  /* leave room so text never sits under the image */
  padding-bottom: clamp(160px, 25vh, 300px);
}

.floating-badger{
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 30vw, 450px);   /* scales with viewport */
  height: auto;
  pointer-events: none;               /* clicks pass through */
  z-index: -1;                        /* stays behind everything */
  /* Remove all framing */
  border: none;
  border-radius: 0;
  box-shadow: none;
}


/* --------------------------------------------------------------------
   Responsive tweaks – scales headings, gaps and footer graphic
---------------------------------------------------------------------*/

/* 1 ▸ Let the main container grow wider on large screens but stay fluid */
.container,
.content-container{
  /* Turns into 90 vw until it hits 1000 px, so 5‑column menus breathe */
  max-width: min(1000px, 90vw);
  /* Side padding grows from 1 rem on mobiles to 2 rem on big screens */
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* 2 ▸ Headings & invitation text: smaller on phones, same on desktop */
:root{ --space-lg: clamp(1.25rem, 4vw, 3rem); }   /* smart “gap” token */

.script--xl{
  font-size: clamp(2.25rem, 10vw, 4.5rem);  /* was 2.5–4.5 rem */
  margin-bottom: var(--space-lg);            /* was fixed 5 rem */
}
.script--lg{
  font-size: clamp(1.5rem, 7vw, 3rem);       /* was 1.75–3 rem */
  margin-bottom: var(--space-lg);
}
.invite-text{ margin-bottom: var(--space-lg); }

/* 3 ▸ Badger footer: shrink or hide on small screens, free up space */
@media (max-width: 600px){
  body{ padding-bottom: clamp(120px, 28vw, 200px); }  /* less bottom gap */
  .floating-badger{ width: clamp(180px, 60vw, 260px); }
}
@media (max-width: 480px){
  .floating-badger{ display: none; }   /* disappear on very narrow phones */
}
/* Use flex so we can fix column widths. */
.timeline-item {
  display: flex;
  align-items: baseline;
  margin-bottom: 1rem;
}

/* Bullet sits in the first column, centered */
.timeline-item .bullet {
  justify-self: center;
  align-self: center;
}

/* Fix the time width so all event text starts in the same place. */
.timeline-item .time {
  width: 6rem;
  text-align: left;
  white-space: nowrap;
  margin-right: 1rem;
}

/* Allow the event text to fill remaining space. */
.timeline-item .event {
  flex: 1;
  text-align: left;
}

/* Remove the extra container layout so time & event align properly. */
.timeline-item .details {
  display: contents;
}

/* ──────────────────────────────────────────────────────────────
   RSVP CARD
   (wraps the entire <form>)
──────────────────────────────────────────────────────────────── */
.info-card.rsvp-card {
  max-width: 40rem;                 /* keeps it nicely centred */
  margin-inline: auto;
  background: #fff;
  padding: 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ──────────────────────────────────────────────────────────────
   FORM LAYOUT
──────────────────────────────────────────────────────────────── */
.rsvp-card form {
  display: grid;
  gap: 1.75rem;                     /* vertical rhythm */
}

/* ──────────────────────────────────────────────────────────────
   GUEST FIELDSET
──────────────────────────────────────────────────────────────── */
.guest {
  position: relative;               /* so the “×” sits top-right */
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  padding: 1rem 1rem 1.25rem;
}

.guest legend {
  padding: 0 0.5rem;
  font-weight: 600;
  font-size: 1.125rem;
}

/* ──────────────────────────────────────────────────────────────
   FORM FIELDS
──────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: .5rem; 
}

.field label { font-weight: 500; }

.field input,
.field select,
.field textarea {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  background: #fafafa;
  transition: border-color .2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: #777;
  background: #fff;
}

/* ──────────────────────────────────────────────────────────────
   BUTTONS
──────────────────────────────────────────────────────────────── */
#add-guest,
.submit-btn,
.remove-guest {
  font: inherit;
  cursor: pointer;
}

/* “Add guest” */
#add-guest {
  width: max-content;
  border: 2px dashed #999;
  background: transparent;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  transition: background .2s;
}
#add-guest:hover:not(:disabled) { background: #f5f5f5; }
#add-guest:disabled            { opacity: .4; cursor: not-allowed; }

/* “Submit” */
.submit-btn {
  align-self: start;               /* keeps it left-aligned under the form */
  color: #fff;
  background: #9BA181;             /* slate-ish */
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 600;
  transition: background .2s;
}
.submit-btn:hover { background: #7B8067; }

/* “×” remove-guest */
.remove-guest {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  width: 1.75rem; height: 1.75rem;
  border: 0;
  border-radius: 50%;
  background: #9BA181;
  line-height: 1;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
  color: #fff;
}
.remove-guest:hover { background: #7B8067; }

/* ──────────────────────────────────────────────────────────────
   STATUS MESSAGE (“Thank you…” / error)
──────────────────────────────────────────────────────────────── */
.notif {
  margin-top: 1rem;
  font-weight: 600;
}

/* ──────────────────────────────────────────────────────────────
   RESPONSIVE TWEAKS
──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .guest legend { font-size: 1rem; }
  .submit-btn   { width: 100%; text-align: center; }
}

/* keep checkbox rows neatly aligned with other inputs */
.field input[type="checkbox"]{
  accent-color: var(--clr-primary);      /* brand green tick */
  width: 1.1rem; height: 1.1rem;         /* same visual weight as text fields */
  margin-right: 0.4rem;
  margin-bottom: .5rem;
  margin-top: .5rem;
}
.field label{
  display: flex;
  align-items: center;
  font-family: var(--font-heading);
}