/* --------------------------------------------- */
/* GLOBAL CSS — Alice & Ben Wedding Website      */
/* Elegant, minimal, modern, pastel theme        */
/* --------------------------------------------- */

/* --------------------------------------------- */
/* FONT IMPORTS */
/* --------------------------------------------- */

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

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

/* --------------------------------------------- */
/* CSS RESET */
/* --------------------------------------------- */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;

    /* Warm cream background with subtle vertical gradient */
    background: linear-gradient(to bottom, #fdf8f1 0%, #fdf6ed 100%);


    color: #1a1a1a;
    font-family: "Alice", serif;
}


/* --------------------------------------------- */
/* COLOUR PALETTE (matching captcha theme) */
/* --------------------------------------------- */

:root {
    --pastel-pink: #FFB3C1;
    --pastel-peach: #FFD4E5;
    --pastel-lilac: #E8D5F2;
    --pastel-blue: #D4E8FF;
    --pastel-cream: #FFF4D0;
    --pastel-green:  #DFF5D1;   /* soft mint green */
    --pastel-yellow: #FFF7C2;   /* gentle butter yellow */

    --text-dark: #1a1a1a;
    --text-light: #666;
    --border-light: #e8e8e8;

    --shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
}

/* Prevent visual scroll restoration flashes during page load on mobile */
.no-scroll-on-load, .no-scroll-on-load body {
  height: 100vh !important;
  overflow: hidden !important;
  touch-action: none !important;
}

/* --------------------------------------------- */
/* TYPOGRAPHY */
/* --------------------------------------------- */

h1, h2, h3, h4 {
    font-family: "Alice", serif;
    font-weight: normal;
    color: var(--text-dark);
}

p {
    line-height: 1.6;
    color: var(--text-light);
    font-size: 1rem;
}

/* Handwritten headings */
.handwritten {
    font-family: "Alex Brush", cursive;
    font-size: 2.8rem;
    color: var(--text-dark);
}

/* --------------------------------------------- */
/* SECTION SPACING */
/* --------------------------------------------- */

section {
    width: 100%;
    padding: 60px 20px;
}

@media (min-width: 768px) {
    section {
        padding: 100px 40px;
    }
}

/* --------------------------------------------- */
/* UTILITY CLASSES */
/* --------------------------------------------- */

.center {
    text-align: center;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

.rounded {
    border-radius: 12px;
}

.pastel-border {
    border: 2px solid var(--pastel-blue);
}

/* --------------------------------------------- */
/* BUTTONS */
/* --------------------------------------------- */

.btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin: 10px 0;
    border-radius: 12px;
    border: 2px solid var(--pastel-lilac);
    background: #fff;
    font-family: "Alice", serif;
    font-size: 1.1rem;
    text-align: center;
    color: var(--text-dark);
    transition: all 0.25s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-soft);
}

/* --------------------------------------------- */
/* IMAGE STYLING */
/* --------------------------------------------- */

img {
    max-width: 100%;
    display: block;
}

/* --------------------------------------------- */
/* GLOBAL ANIMATIONS */
/* --------------------------------------------- */

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
  /* use --delay custom property for staggered reveals */
  transition-delay: var(--delay, 0s);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}


/* --------------------------------------------- */
/* FOOTER */
/* --------------------------------------------- */

.site-footer {
  margin-top: 10px;
  padding: 5px 5px;
  text-align: center;
  font-family: "Alice", serif;
  color: #000;
  background: #fffdf8; /* soft cream like your site */
  border-top: 1px solid #e8e2d9;
  opacity: 0;
  transform: translateY(10px);
  animation: footerFade 0.6s ease forwards;
}

.footer-inner p {
  margin: 2px 0;
  font-size: 0.95rem;
}

.footer-heart {
  font-size: 1.2rem;
  margin-top: 6px;
}

.footer-credit {
  margin-top: 2px;
  font-size: 0.75rem;
  color: #999;
}

@keyframes footerFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 5px 5px;
  }

  .footer-inner p {
    font-size: 1rem;
  }

  .footer-credit {
    font-size: 0.8rem;
  }
}

.footer-heart-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-top: 0px;
}