/* -----------------------------------------
   🌸 GLOBAL BASE STYLES
----------------------------------------- */

/* Page-wide defaults */

a {
  color: #ce4f81; 
  text-decoration: underline;
}

a:hover {
  color: #ce4f81;
  text-decoration: underline;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Dosis', sans-serif; /* Main text font */
  color: #632543;                   /* Main text color */
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Global heading, navbar, button, and menu title font */
h1, h2, h3, h4, h5, h6,
.navbar,
.navbar-nav .nav-link,
.btn-link,
form button[type="submit"],
.menu-list h3 {
  font-family: 'Lobster Two', cursive; /* Accent font */
}

/* Anchor scroll offset (so titles aren’t hidden under navbar) */
:target {
  scroll-margin-top: 50px;
}


/* -----------------------------------------
   🌸 BACKGROUND MEDIA
----------------------------------------- */

/* Desktop background video */
.background-video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  
  z-index: -1; /* Behind all content */
}
.background-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile background image (hidden by default) */
.mobile-background-image {
  display: none;
}
.mobile-background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* -----------------------------------------
   🌸 NAVBAR
----------------------------------------- */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: #fdd3e3; 
  padding: 1.3rem 0;
}
.navbar-brand {
  display: none;
}

/* Center nav links */
.navbar-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
}
.navbar-nav .nav-link {
  color: #772a50;
  font-size: 1.1rem;
  text-decoration: none;
  transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover {
  color: #ce4f81;
}
.navbar-nav .nav-link.active {
  color: #ce4f81 !important;
  font-weight: 600;
}


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

.nav-button {
  text-align: center;
  margin: 3rem 0;
}
.btn-link {
  display: inline-block;
  padding: 14px 28px;
  background-color: #ce4f81;
  color: #fff;
  text-decoration: none;
  border-radius: 25px;
  font-size: 18px;
  transition: background-color 0.2s ease;
}
.btn-link:hover {
  background-color: #a8486d;
  color: #ffffff !important; /* no blue hover */
}


/* -----------------------------------------
   🌸 MENU LIST
----------------------------------------- */

.menu-list h3 {
  font-weight: 600;
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.6rem;
  color: #b25c7d;
}
.menu-list p {
  display: flex;
  align-items: center;
  font-size: 1.1rem;
  margin-right: 1rem;
}
.menu-list .item {
  white-space: nowrap;
}
.menu-list .dots {
  flex: 1;
  border-bottom: 1px dotted #e5a6c5;
  margin: 0 8px;
}
.menu-list .price {
  white-space: nowrap;
}


/* -----------------------------------------
   🌸 FORMS
----------------------------------------- */

form {
  max-width: 500px;
  margin: 0 auto;
}
form h1, form h2, form h3 {
  margin-bottom: 1rem;
}
form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 500;
  color: #772a50;
}
form input,
form select,
form textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1.2rem;
  border: 1px solid #e6a9c0;
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
}
form button[type="submit"] {
  background-color: #ce4f81;
  color: #fff;
  border: none;
  padding: 0.8rem 1.4rem;
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  width: 100%;
}
form button[type="submit"]:hover {
  background-color: #a8486d;
}


/* -----------------------------------------
   🌸 UTILITIES
----------------------------------------- */

.spacer-small {
  height: 0.3rem;
}


/* -----------------------------------------
   🌸 MEDIA QUERIES
----------------------------------------- */

/* Phones */
@media (max-width: 768px) {
  /* hide video, show background image */
  .background-video-container { display: none; }
  .mobile-background-image {
    display: block;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    overflow: hidden;
  }

  body {
    background-color: #ffd9e5; /* fallback */
    padding-top: 80px !important; /* offset for navbar */
  }
  .navbar { width: 100%; }

  /* readable text blocks */
  .content-overlay,
  .menu-list,
  form,
  section,
  p {
    background: #ffd9e5;
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }

  /* menu tweaks */
  .menu-list { padding: 0 1rem; }

  .menu-list p {
    display: block;       /* stack vertically */
    margin: 0.8rem 0;     /* spacing between items */
    font-size: 1.1rem;
  }

  .menu-list .item {
    display: block;       /* first line = item name */
    margin-bottom: 0.2rem;
  }

  .menu-list .dots {
    display: inline-block;
    width: 75%;           /* dotted line width — adjust to taste */
    border-bottom: 1px dotted #e5a6c5;
    margin-right: 0.5rem;
  }

  .menu-list .price {
    display: inline-block;
    float: right;         /* keep price at end of line */
  }

  .menu-list h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    font-size: 1.4rem;
  }
}

/* Tablet and smaller */
@media (max-width: 992px) {
  .navbar-nav {
    position: static;
    transform: none;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    background-color: #ffd9e5;
    width: 100%;
  }
  .navbar-collapse {
    background-color: #ffd6e8;
    border: 1px solid #b25c7d;
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1rem;
  }
  .navbar-nav .nav-link {
    text-align: center;
    font-size: 1.3rem;
    display: block;
  }
}

/* Centered social icon */
.social-center {
  text-align: center;
  margin: 2rem 0;
}

.social-heading {
  margin-bottom: 0.6rem;   /* space between text & logo */
  font-size: 1.4rem;
  color: #632543;
}

.social-link i {
  font-size: 2rem;   /* smaller logo size */
  color: #ce4f81;    /* match your theme */
  transition: color 0.3s ease;
}

.social-link i:hover {
  color: #a8486d;    /* darker on hover */
}

/* Remove anchor link icons from headings */
.anchorjs-link {
  display: none !important;
}

/* Gallery container */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem 0;
}


/* Polaroid card (straight, no rotation) */
.polaroid {
  background: #fff8f9;
  padding: 0.8rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(119, 42, 80, 0.2);
  max-width: 220px;
  text-align: center;
  transition: transform 0.2s ease;
}


.polaroid:hover {
  transform: translateY(-5px); /* little hover lift */
}

/* Images & videos inside */
.polaroid img,
.polaroid video {
  width: 100%;
  border-radius: 4px;
  display: block;
}

/* Captions */
.polaroid .caption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #632543;
  font-weight: 500;
}

.site-footer {
  text-align: center;
  background: none; /* keep transparent, or pick a soft pink if you prefer */
  font-family: 'Lobster Two', cursive;
  font-size: 1rem;
  color: #9f657e; /* matches your main accent color */
}

.site-footer a:hover {
  color: #ce4f81;          /* soft pink highlight on hover */
  text-decoration: underline;
}