:root {
  --gold: #d4af37;
  --navy: #000080;
}

body {
  font-family: "EB Garamond", serif;
  scroll-behavior: smooth;
}

.script-font {
  font-family: "Alex Brush", cursive;
}

.bg-champagne {
  background-color: #f7f3e9;
}

.gold-text {
  color: var(--gold);
}

.gold-border {
  border-color: var(--gold);
}

.gold-bg {
  background-color: var(--gold);
}

.navy-text {
  color: var(--navy);
}

.navy-bg {
  background-color: var(--navy);
}

.bow-tie {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cpath d='M50,25 C50,25 40,10 25,10 C10,10 0,25 0,25 C0,25 10,40 25,40 C40,40 50,25 50,25 Z M50,25 C50,25 60,40 75,40 C90,40 100,25 100,25 C100,25 90,10 75,10 C60,10 50,25 50,25 Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 30px;
  width: 60px;
  display: inline-block;
}

.section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-title {
  position: relative;
  margin-bottom: 3rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: var(--gold);
}

.timeline-item {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 2rem;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--gold);
}

.timeline-item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 20px;
  width: 2px;
  height: calc(100% + 10px);
  background-color: var(--gold);
}

.timeline-item:last-child::after {
  display: none;
}

/* Custom navbar styling for mobile toggling */
.navbar-toggler {
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .navbar-collapse.show {
    max-height: 300px;
  }
}

/* Gallery styling */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 1rem;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

input,
select,
textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0.5rem;
  width: 100%;
  font-family: "EB Garamond", serif;
}

/* Updated primary button styling */
button.primary,
a.primary {
  background-color: var(--gold);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button.primary:hover,
a.primary:hover {
  background-color: #c19b2b; /* Slightly darker gold for hover */
}

/* Fixed height main image container */
.main-image-container {
  height: 500px;
  position: relative;
  background-color: #f5f5f5;
}

#mainImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* This keeps the aspect ratio intact */
}

/* Hide scrollbar for thumbnail strip */
#thumbnailStrip::-webkit-scrollbar {
  display: none;
}

#thumbnailStrip {
  -ms-overflow-style: none;
  scrollbar-width: none;
  height: 70px; /* Fixed height for thumbnails row */
}

/* Thumbnail styling with fixed dimensions */
.thumbnail {
  width: 80px;
  height: 60px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.2s ease;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gray overlay for inactive thumbnails */
.thumbnail:not(.active)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.6);
  transition: background 0.2s ease;
}

.thumbnail.active {
  border-color: #d4af37;
}

.thumbnail:hover:not(.active)::after {
  background: rgba(255, 255, 255, 0.3);
}

/* Radio button card styling */
.radio-card {
  border: 2px solid #e5e7eb;
  background-color: white;
  transition: all 0.3s ease;
}

/* When the radio is checked, style its associated card */
input[type="radio"]:checked + .radio-card {
  border-color: var(--gold);
  background-color: #f7f3e9;
}

/* Hover state for the card */
.radio-card:hover {
  border-color: var(--gold);
}