/*
 * Globals
 */
h5, .h5 {
  font-size: 1.07rem;   /* your size */
  line-height: 1.3;    /* optional */
}

h2, .h2 {
  font-size: 2.25rem;   /* your size */
  line-height: 1.3;    /* optional */
}

h1 {
  font-size: 3.5rem;
  color:#fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}

.cover-container {
  max-width: 42em;
}

/* --- Mobile & tablet (default) --- */
/* Left column at least 60% of viewport height on small screens */
.left-col {
  position: relative;            /* keeps your bg carousel positioned */
  min-height: 60vh;              /* fallback */
  min-height: 60svh;             /* better on mobile browsers */
  min-height: 60dvh;             /* dynamic viewport unit */
}

/* First section on the right: at least 80% of viewport height */
.right-col .hero {
  min-height: 80vh;              /* fallback */
  min-height: 80svh;
  min-height: 80dvh;
}

/* --- Desktop (lg and up): keep your original behavior --- */
@media (min-width: 992px) {
  body { overflow: hidden; }                 /* right column scrolls independently */
  .left-col { height: 100vh; }               /* full-height left */
  .right-col { height: 100vh; overflow-y: auto; }

  /* If you want the first right section to go back to full height on desktop: */
  .right-col .hero { min-height: 100vh; }
}

.rsvp-button {
  color: rgba(121, 80, 9, 1);
  border-color: rgba(121, 80, 9, 1);
}

.rsvp-button:hover {
  background-color: rgba(121, 80, 9, 1);
  border-color: rgba(121, 80, 9, 1);
  color: #fff;
}


/*
 * Header
 */

.nav-masthead .nav-link {
  padding: .25rem 0;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  background-color: transparent;
  border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
  margin-left: 1rem;
}

.nav-masthead .active {
  color: #fff;
  border-bottom-color: #fff;
}

html, body { height: 100%; background-color: rgba(250, 248, 245, 1);}

.bg-carousel {
  position: absolute;
  inset: 0;                  /* fill the column */
  z-index: 0;                /* sit behind content */
}
.bg-carousel .carousel-item,
.bg-carousel .carousel-item img {
  height: 100%;
  width: 100%;
}
.bg-carousel .carousel-item img {
  object-fit: cover;         /* cover without distortion */
  object-position: center;  /* darken slightly for text contrast (tweak/remove as needed) */
}

/* Make the foreground content sit above the slider */
.left-content {
  position: relative;
  z-index: 1;
}

/* Optional: hide controls on extra-small if you want a clean hero */
@media (max-width: 575.98px) {
  .bg-carousel .carousel-control-prev,
  .bg-carousel .carousel-control-next,
  .bg-carousel .carousel-indicators { display: none; }
}

.alex-brush-regular {
  font-family: "Alex Brush", cursive;
  font-weight: 300;
  font-style: normal;
}

.text-golden {
  color: rgba(121, 80, 9, 1);
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}