/*** Topbar ***/
.topbar-nowrap {
  white-space: nowrap;
}

@media (max-width: 991px) {
  .topbar-nowrap {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.25rem;
  }
}

.navbar h2 {
  background-color: transparent !important;
}

/* spinner.css */
/* Spinning logo animation - Carterton Golf Club site */

.logo-spin-container {
  perspective: 800px;
  width: 50px;
  height: 50px;
  position: relative;
}

.logo-spin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: logo-spin 6s linear infinite;
}

.logo-spin img {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.logo-spin img.back {
  transform: rotateY(180deg);
}

@keyframes logo-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

/* ✅ Base: reset all previous constraints */
#header-carousel,
#header-carousel .carousel-inner,
#header-carousel .carousel-item {
    height: auto;
    min-height: 0;
}

/* ✅ Mixed media support */
#header-carousel img,
#header-carousel video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* Slide 1: first image */
#header-carousel img[src*="over_bottom_nine.jpg"] {
    object-position: center top; /* crop from top */
}

/* Slide 2: front12.jpg */
#header-carousel img[src*="front12.jpg"] {
    object-position: center 90%; /* default center */
}

/* Slide 3: tararua8.jpg */
#header-carousel img[src*="tararua8.jpg"] {
    object-position: center 90%; /* slightly higher focus */
}

/* Optional: smooth slide transition */
#header-carousel .carousel-item {
    transition: transform 0.6s ease, opacity 0.6s ease;
}
/* ✅ Fullscreen hero on desktop */
@media (min-width: 992px) {
    #header-carousel,
    #header-carousel .carousel-inner,
    #header-carousel .carousel-item {
        height: 850vh;
    }
}

/* ✅ Smarter behavior for tablets */
@media (min-width: 576px) and (max-width: 991px) {
    .carousel-item {
        aspect-ratio: 16 / 9;
    }
}

/* ✅ Narrow screens: enforce stable height */
@media (max-width: 575px) {
    .carousel-item {
        aspect-ratio: 4 / 3; /* Taller aspect for phone screens */
    }
    #header-carousel .carousel-caption h1 {
        font-size: 1.25rem;
        line-height: 1.25;
        margin-bottom: 0.5rem;
    }
}