/* Account/email dropdown nav - Full width bar */
.topnav.account-nav {
  background-color: #7e57a8; /* Keep it purple as per user image, or maybe they want it to be the ribbon? */
  /* Wait, if I make it black, it might look too different from the image they sent which shows purple. */
  /* The image shows a purple bar. Maybe they want the ribbon to be purple? */
  /* But they said "containing our original navbar". */
  /* If the original navbar was purple, and the ribbon is purple, they merge. */
  /* Let's stick to purple ribbon for now, but make the button distinct if needed. */
  /* Actually, if the user says "original drop down button should not be the main navbar", */
  /* and the image shows a purple bar with rounded corners... */
  /* Maybe they want the ribbon to be full width (no corners) and the button to be... something else? */
  /* Let's try making the ribbon full width first. */
  
  background-color: #7e57a8;
  padding: 0.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  width: 100vw; /* Force full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0 !important; /* Ensure no rounded corners */
  z-index: 10002;
  overflow: visible;
  box-sizing: border-box;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  padding-left: max(2rem, calc(50vw - 500px)); /* Align with content if possible, or just padding */
}

.hero-contact-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10001;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.hero-contact-overlay a {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s;
}

.hero-contact-overlay a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .hero-contact-overlay {
    display: none;
  }
  
  .nav-left {
    display: none;
  }
}

.account-dropdown {
  padding-right: max(2rem, calc(50vw - 500px));
}

/* Style the button to look like a distinct element if desired, 
   but for now just ensure the ribbon is correct. 
   The user said "original drop down button should not be the main navbar".
   This might mean they want the button to look like a button.
*/
.account-button {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  background: rgba(255, 255, 255, 0.15); /* Slight background to distinguish it */
  color: white;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 0.4rem 1.35rem;
  font-size: 1.09rem;
  cursor: pointer;
  font-weight: 500;
  min-width: 180px;
  justify-content: center;
  transition: background 0.2s;
}

.account-button:hover {
  background: rgba(255, 255, 255, 0.25);
}



/* Hide footer on desktop */
@media (min-width: 769px) {
  .site-footer {
    display: none !important;
  }
  #footer-container {
    display: none;
  }
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .topnav.account-nav {
    justify-content: center;
    padding: 0.5rem 1rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    left: auto;
    right: auto;
    margin: 0.25rem auto 0.65rem;
    border-radius: 9px;
    background-color: #7e57a8f5;
  }
  
  .nav-left {
    display: none;
  }
  
  /* Ensure footer is visible on mobile */
  .site-footer {
    display: block !important;
  }
  #footer-container {
    display: block;
  }
  
  .account-button {
    background: transparent;
    border: none;
    padding: 0.4rem 1.35rem;
  }
  
  .account-dropdown {
    padding-right: 0;
  }
}

.account-dropdown {
  position: relative;
}



.account-button .account-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.promotion-badge-icon {
  font-size: 1rem;
  line-height: 1;
}

.account-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.account-menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.46rem;
  background: #663399;
  border-radius: 13.8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  width: 100%;
  padding: 0.4rem 0;
  display: none;
  z-index: 10003;
}

.account-menu a,
.account-menu .logout-button {
  display: block;
  width: calc(100% - 0.8rem);
  text-align: center;
  padding: 0.52rem 1.35rem;
  border: none;
  background: transparent;
  font-size: 1.09rem;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}

.account-menu a:hover,
.account-menu .logout-button:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.account-menu .nav-highlight {
  font-weight: 700;
  color: #2D3748;
  background: linear-gradient(90deg, #FFD700 0%, #FFE98A 100%);
  border: 2px solid rgba(255, 215, 0, 0.9);
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.35);
}

.account-menu .nav-highlight:hover,
.account-menu .nav-highlight:focus {
  color: #2D3748;
  background: linear-gradient(90deg, #FFE98A 0%, #FFD700 100%);
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.45);
}

.account-menu hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0.2rem 0.5rem 0.25rem;
}

.account-dropdown.open .account-menu {
  display: block;
}

.account-dropdown {
  position: relative;
}

.product-name {
  font-size: 3rem;
  font-weight: bold;
  font-family: 'Coustard', Georgia, serif;
  text-align: center;
  margin-bottom: 0.2rem;
  margin-top: 0.8rem;
}
.service-description-box {
  background: #f8fafd;
  border: 2px solid #e6ecf5;
  border-radius: 16px;
  padding: 1.1rem 1.5rem 1.2rem 1.5rem;
  margin: 0 auto 0.7rem auto;
  max-width: 98vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.book-today-container {
  margin-bottom: 0;
}
/* Center Book Today / Details buttons in their tile.
   Desktop: row (buttons side-by-side). Mobile: stacked column. */
.book-today-container {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1.2rem;
  flex-direction: row;
}

.book-action-group {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.book-action {
  display: flex;
  text-decoration: none;
}

/* Ensure buttons inside the container don't expand to full width
   and keep a compact size (padding controls visual width). */
.book-today-container .nav-btn {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding: 0.5rem 1.2rem;
}

/* Secondary 'Details' button styling (keeps visual contrast). */
.nav-btn.details {
  background: transparent;
  color: var(--brand-purple);
  border: 2px solid var(--brand-purple);
  box-shadow: none;
}
.nav-btn.details:hover, .nav-btn.details:focus {
  background: var(--light-purple-bg);
  color: var(--brand-purple);
}

.alt-book-cta {
  background: white;
  color: var(--brand-purple);
  border: 2px solid var(--brand-purple);
  box-shadow: none;
}

.alt-book-cta:hover {
  background: var(--light-purple-bg);
  color: #54297a;
}

.booking-cta {
  margin: 1.2rem auto 1rem;
  text-align: center;
  max-width: 820px;
  background: #f8fafd;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  padding: 1rem 1.5rem;
}

.booking-cta p {
  margin: 0 0 0.8rem 0;
  font-size: 1.05rem;
  color: #333;
}

.auth-hidden {
  display: none !important;
}
/* Gold box link for first visit */
.gold-box-link {
  text-decoration: none;
  width: 100%;
  display: flex;
  justify-content: center; /* Center gold box horizontally */
  margin: 0.5rem 0 0.5rem 0;
}
.gold-box {
  background: linear-gradient(90deg, #FFD700 60%, #FFF8DC 100%);
  color: #4B2E83;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1rem 2.5rem;
  border: 2px solid #FFD700;
  transition: box-shadow 0.2s, background 0.2s;
  cursor: pointer;
  text-align: center;
  min-width: 220px;
  max-width: 420px;
  width: 100%;
}
.gold-box:hover {
  background: linear-gradient(90deg, #FFF8DC 60%, #FFD700 100%);
  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
}
@media (max-width: 900px) {
  .gold-box {
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
    min-width: 0;
    max-width: 88vw;
  }
  .gold-box-link {
    justify-content: center;
  }
}
/* Home hero section layout */
.home-hero-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertically center both columns */
  justify-content: center;
  gap: 0;
  margin: 2.5rem auto 1.5rem auto;
  width: 100%;
  max-width: 1100px;
  min-height: 340px;
  box-sizing: border-box;
}
@media (min-width: 900px) {
  .home-hero-row {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
    margin-top: 1.5rem;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
    justify-content: center;
  }
  .home-btn-row {
    flex: 2 1 350px;
    max-width: 500px;
    margin: 0;
  }
}
/* Home page button column, thin and tight */
.home-btn-row {
  display: block;
  margin: 2rem 0 1.5rem 0;
  width: 100%;
  max-width: 400px;
    width: 50vw;
    max-width: 50vw;
  margin-right: auto;
}
/* Make Book Today buttons auto width, centered, with horizontal padding */
.nav-btn.book-today {
  display: inline-block;
  width: auto;
  min-width: 0;
  padding: 0.5rem 2.2rem;
  margin: 0.4rem auto;
}
/* Home page navigation buttons */
.nav-btn {
  background: #663399;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  border: none;
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  margin: 0.25rem 0;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(102,51,153,0.10);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}
.nav-btn:hover, .nav-btn:focus {
  background: #54297a;
  box-shadow: 0 4px 16px rgba(102,51,153,0.18);
  transform: translateY(-2px) scale(1.03);
  outline: none;
}
/* Make the pet carousel card fill the width of the carousel and match business card styling */
.pet-slide .box {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  box-sizing: border-box;
  /* Match business card styling */
  background: var(--pet-bg, #7e57a8);
  box-shadow: 0 4px 20px rgba(102, 51, 153, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 0 1.5rem 0;
}


/* Ensure all topnav links are white on small screens (override order/precedence).
   This keeps the mobile header consistent: All Services, About Me, Gallery, etc. */
@media(max-width: 600px){
  .topnav a,
  .topnav .dropbtn {
    color: #ffffff;
  }
}


/* About Page Pet Carousel Image and Name Styling */
.pet-slide .pet-pic {
  /* expose a variable for consistent sizing with the decorative bone */
  --pet-pic-size: 180px;
  width: var(--pet-pic-size);
  height: var(--pet-pic-size);
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--brand-purple, #663399);
  box-shadow: 0 2px 12px rgba(102,51,153,0.10);
  margin: 1.5rem auto 1rem auto;
  display: block;
  background: #fff;
}

/* Fresh, minimal decorative bone implementation
   - Markup: wrap the circular image in a `.pet-bone` container.
   - Asset: place `bone.webp` at the site root (served as `/bone.webp`).
   - The pseudo-element lives inside `.pet-bone::before` so it's sized
     relative to the image wrapper and easy to control. */
/* Decorative bone removed — stripped for now. */
.pet-slide .pet-name {
  color: #fff;
  background: var(--brand-purple, #663399);
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-family: 'Coustard', serif;
  font-size: 1.5rem;
  margin: 0 auto 0.5rem auto;
  box-shadow: 0 1px 6px rgba(102,51,153,0.08);
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .pet-slide .pet-pic {
    width: 120px;
    height: 120px;
    margin: 1rem auto 0.5rem auto;
  }
  .pet-slide .pet-name {
    font-size: 1.1rem;
    padding: 0.4rem 1rem;
  }
}
/* Pet Carousel Styles */
.pet-carousel-container {
  position: relative;
  /* Match business card width */
  width: 100%;
  max-width: 900px;
  margin: 2rem auto;
  background: transparent;
  overflow-x: hidden;
  box-sizing: border-box;
}
.pet-carousel {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 340px;
  width: 100%;
  max-width: 100%;
  justify-content: center;
}
.pet-slide {
  min-width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  transition: opacity 0.4s, transform 0.4s;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}
.pet-carousel {
  display: flex;
  overflow: hidden;
  position: relative;
  min-height: 340px;
}
.pet-slide {
  min-width: 100%;
  transition: opacity 0.4s, transform 0.4s;
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pet-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  position: relative;
}
.pet-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--brand-purple, #663399);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 2;
  opacity: 0.85;
  transition: background 0.2s, opacity 0.2s;
}
.pet-carousel-arrow.left { left: 0.5rem; }
.pet-carousel-arrow.right { right: 0.5rem; }
.pet-carousel-arrow:hover { background: var(--hover-purple, #8A5AA8); opacity: 1; }
.pet-carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  gap: 0.5rem;
}
.pet-dot {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  transition: background 0.2s;
  cursor: pointer;
  }
  /* Legacy topnav styles - not used with account-nav */
:root {
  --brand-purple: #663399;
  --hover-purple: #8A5AA8;
  --nav-bg: #f4f4f7;
  --dropdown-bg: #efeff2;
  --text-gray: #2D3748;
  --light-purple-bg: #F5F2FF;
  --content-bg: #EDF2F7;
}

* {
  box-sizing: border-box;
}

/* Hero banner: no internal padding, full-bleed image. The image shows at
   its full aspect ratio on desktop and only scales down on narrow viewports. */
.hero-banner {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
  /* Give the hero a responsive height so the image can crop horizontally
     as the viewport narrows. clamp(min, preferred, max) keeps the height
     reasonable across devices. */
  height: clamp(260px, 28vh, 420px);
  position: relative;
  z-index: 10000; /* Below navigation which is 10002 */
}
.hero-banner img {
  display: block;
  width: 100%;
  height: 100%;          /* fill the hero container so object-fit can crop */
  object-fit: cover;     /* crop left/right responsively to always fill width */
  object-position: center;
}

/* On very small screens, reduce the hero height further to keep the header
   compact while still filling the width. */
@media (max-width: 600px) {
  .hero-banner {
    height: clamp(160px, 26vh, 260px);
  }
}

/* Reduce excess vertical spacing on narrow viewports (fix thin white band
   above/below the purple nav shown on some phones). Tweak values if you
   prefer slightly more/less spacing. */
@media (max-width: 900px) {
  .hero-banner { margin-bottom: 0; }
  /* The site uses a fixed topnav on mobile; keep content pushed down only
     as far as the nav height to avoid a large white gap. */
  .content { padding-top: 52px; }
  /* Remove the default h1 top margin which can produce an extra white bar */
  .content > h1 { margin-top: 0.2rem; margin-bottom: 0.8rem; }
}

/* Ensure page content is pushed below the fixed navbar on all devices */
.content {
  padding-top: 64px; /* matches nav height + comfortable spacing; adjust if needed */
  max-width: 1000px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem;
  background-color: #ffffff;
  /* Add subtle shadow to create depth on desktop */
  box-shadow: 0 0 40px rgba(102, 51, 153, 0.06);
  min-height: 100vh;
}

/* Better spacing for main heading in constrained layout */
.content > h1 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding-left: 0;
  padding-right: 0;
}

.content > h3 {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

/* Remove box-shadow on mobile for seamless look */
@media (max-width: 899px) {
  .content {
    box-shadow: none;
    background-color: transparent;
  }
  
  .content > h3 {
    padding-left: 20px;
  }
}

@media (max-width: 768px) {
  .content {
    padding-top: 1.5rem;
  }
}

html{
scroll-behavior: smooth;
}

.card {
  /* Initial off-screen position (e.g., from the right) */
  transform: translateX(100vw); /* 100vw pushes it completely off the viewport */
  transition: transform 1s ease-out; /* Customize duration and easing */

  /* Other card styles */

  background-color: #663399;
  color: white;
  position: relative; /* or relative, depending on your layout */
  right: 0; /* Adjust as needed */
  padding: 5px;
  border-radius: 8px;
}
.card.slide-in {
  transform: translateX(0); /* Bring it to its original position */
}

.card a{
  color:#f2f2f2;
}

/* Fixed heading that overlays on top of slideshow */
.fixed-heading {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: rgba(102, 51, 153, 0.85);
  color: white;
  padding: 20px 30px;
  border-radius: 8px;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.fixed-heading h1 {
  font-family: 'Coustard', Georgia, serif;
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.fixed-heading p {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  margin: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: 0;
  height: 200px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}

/* Slides container for dynamic slides */
.slides-container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Individual slides */
.slide {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

img {vertical-align: middle;}

/* Mobile responsiveness for carousel */
@media(max-width: 600px) {
  /* Fix horizontal cropping on small screens by avoiding 100vw and
     canceling centering transforms that push elements off-canvas. */
  html, body { overflow-x: hidden; }

  /* Replace full-viewport widths and translated centering with
     fluid 100% widths so components fit the device viewport. */
  .pet-slide .box,
  .pet-carousel-container,
  .pet-carousel,
  .pet-slide {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    transform: none;
    position: relative;
  }

  /* Additional mobile adjustments to avoid clipping and allow room for
     rounded corners/shadows. Use container padding rather than 100vw so
     the card doesn't overflow the viewport on some browsers. */
  .pet-carousel-container {
    padding: 0 12px;
    box-sizing: border-box;
    left: 0;
    transform: none;
  }

  .pet-slide .box {
    /* Keep the slide card fully inside the padded container */
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Make carousel height adaptive on mobile */
  .pet-carousel {
    min-height: auto;
  }

  /* Tweak arrows so they sit inside the visible card and don't get clipped */
  .pet-carousel-arrow {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }
  .pet-carousel-arrow.left { left: 8px; }
  .pet-carousel-arrow.right { right: 8px; }

  /* Make any image-based heading/icon scale down to avoid overflow */
  .product-name, .pet-slide .pet-pic, .profile-picture img {
    max-width: 90%;
    box-sizing: border-box;
  }

  /* Prevent horizontal overflow introduced by 100vw-based components */
  .header {
    position: relative;
    height: 150px;
  }
  
  .fixed-heading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 16px;
    width: 85%;
    max-width: 280px;
    margin: 0;
  }
  
  .fixed-heading h1 {
    font-size: 1.6rem;
    margin: 0 0 6px 0;
  }
  
  .fixed-heading p {
    font-size: 0.9rem;
    margin: 0;
  }
  
  .slideshow-container {
    height: 150px;
  }
  
  .slide img {
    height: 100%;

  }
  
  /* Mobile product box adjustments */
  .clicker {
    padding: 10px;
    gap: 10px;
  }
  
  .box .clicker .product-name,
  .box .clicker .pricing p {
    font-size: 1rem;
  }
  
  .box .clicker .product-name {
    white-space: nowrap;
  }
  
  .box .clicker .pricing p {
    margin: 0;
  }
  
  /* Adjust product content layout for mobile */
  .product-content {
    grid-template-columns: 2fr 1fr;
    gap: 6px;
    align-items: center;
  }
  
  .box .clicker .product-name {
    text-align: left;
  }
  
  .pricing {
    text-align: right;
  }
  
  /* Reduce container padding on mobile */
  .flexbox {
    padding: 5px;
  }

  /* Mobile tweaks: reduce space above product title and center the price */
  .product-name {
    margin: 6px 0 4px 0; /* tighter spacing above/below title on small screens */
    padding-top: 0;
    text-align: center;
    font-size: 1.6rem; /* scale title for mobile so it doesn't overflow */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  /* Place pricing on its own line and center it for mobile */
  .product-description .pricing {
    grid-column: 1; /* span full width in the stacked mobile layout */
    text-align: center;
    margin: 0.4rem 0 0.6rem 0;
  }

  .pricing p { margin: 0; }

  /* Scope the inline pricing + caption styling to mobile only so desktop
     layout remains unaffected. This handles the case where the markup uses
     a sibling <em> after the .pricing element (as in walking.html). */
  .product-description {
    text-align: center;
  }
  .product-description > p:first-of-type,
  .product-description > p:last-of-type {
    text-align: left; /* keep description and the neighborhood line left-aligned */
  }
  .product-description .pricing {
    display: inline-block; /* allow the following <em> to sit inline */
    vertical-align: middle;
    margin: 0;
  }
  .product-description .pricing + em {
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
    color: #55626a;
    font-style: italic;
    font-size: 0.95rem;
  }
  
  /* Ensure boxes don't exceed screen width */
  .box {
    max-width: 100%;
    overflow: hidden;
  }

  /* Mobile: ensure navbar text is white so it remains readable on top of
     the brand-colored header background. This overrides the global/desktop
     rules only for small screens. */
  .topnav a,
  .topnav .dropbtn {
    color: #ffffff;
  }

  /* Make dropdown menu items purple on the grey dropdown background so
     they remain readable on mobile (override the white color above). */
  .topnav .dropdown-content a {
    color: var(--brand-purple);
  }
  .topnav .dropdown-content a:hover,
  .topnav .dropdown-content a:focus {
    background: var(--brand-purple);
    color: #fff;
  }
}

/* Very small mobile screens */
@media(max-width: 400px) {
  .fixed-heading {
    padding: 10px 12px;
    width: 90%;
    max-width: 240px;
  }
  
  .fixed-heading h1 {
    font-size: 1.4rem;
    margin: 0 0 4px 0;
  }
  
  .fixed-heading p {
    font-size: 0.8rem;
  }
  
  /* Very small screen product adjustments */
  .clicker {
    padding: 6px;
    gap: 6px;
  }
  
  .box .clicker .product-name,
  .box .clicker .pricing p {
    font-size: 0.9rem;
  }
  
  /* Very small screen content adjustments */
  .product-content {
    gap: 5px;
  }
}

body {
  /* Remove default page inset so edge-to-edge hero images can reach
     the viewport edges. Previously set to 3px which created a visible
     white border around the hero banner. */
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Subtle gradient background for desktop side margins */
  background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%);
  color: #2D3748;
  /* Add subtle decorative pattern to background (only visible in margins on desktop) */
  position: relative;
}

/* Add decorative paw print pattern to body background on desktop only */
@media (min-width: 900px) {
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.03;
    z-index: -1;
    background-image: 
      radial-gradient(circle at 20% 20%, rgba(102, 51, 153, 0.4) 2px, transparent 2px),
      radial-gradient(circle at 22% 18%, rgba(102, 51, 153, 0.3) 1.5px, transparent 1.5px),
      radial-gradient(circle at 18% 18%, rgba(102, 51, 153, 0.3) 1.5px, transparent 1.5px),
      radial-gradient(circle at 20% 16%, rgba(102, 51, 153, 0.3) 1.5px, transparent 1.5px),
      radial-gradient(circle at 22% 16%, rgba(102, 51, 153, 0.3) 1.5px, transparent 1.5px);
    background-size: 200px 200px;
    background-position: 0 0, 10px 10px;
    pointer-events: none;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Coustard', Georgia, serif;
  font-weight: 400;
  text-align: center;
}

h2 {
  text-align: center;
  color: #2D3748;
}
/* Style the top navigation bar */
.topnav {
  overflow: visible; /* allow dropdowns to extend outside */
  /* Use the neutral navbar background by default so the nav matches
     the page chrome on mobile and desktop; accents (hover/active)
     will use the brand purple. */
  background-color: var(--nav-bg, #f4f4f7);
  position: relative; /* ensure absolute dropdowns are positioned relative to the nav */
  z-index: 10;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: var(--brand-purple);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover,
.topnav a:focus-visible {
  background-color: var(--hover-purple);
  color: #fff;
}

/* Remove persistent highlight for mouse interactions: only show focus styles for keyboard users
   (use :focus-visible). Also ensure active state doesn't leave a background on sibling links. */
.topnav a:focus {
  outline: none;
  background-color: transparent;
}
.topnav a:active { background-color: transparent; }

/* Default nav link/button backgrounds should be transparent so only hovered/active
   items show a highlight. This prevents links like "Gallery" from appearing highlighted
   when they're not being interacted with. */
.topnav a, .dropbtn { background-color: transparent; color: var(--brand-purple); }

/* Dropdown inside topnav */
.dropdown{position:relative; display:inline-block}
.dropbtn{
  background-color:transparent;
  color:var(--brand-purple);
  padding:14px 16px;
  font-size:16px;
  border:none;
  cursor:pointer;
  display:block;
}
.dropbtn:focus{outline:none}
.dropdown-content{
  display:none;
  position:absolute;
  background-color:var(--dropdown-bg);
  min-width:200px;
  box-shadow:0 8px 16px rgba(0,0,0,0.2);
  left:50%;
  transform:translateX(-50%);
  top:calc(100% + 6px); /* place slightly below the button */
  z-index:1000;
}
.dropdown-content a{color:var(--brand-purple); padding:12px 16px; text-decoration:none; display:block}
.dropdown-content a:hover{background:var(--brand-purple); color:#fff}
.dropdown.open .dropdown-content{display:block}
.dropdown.open .dropbtn{background-color:var(--brand-purple); color:#fff}

/* Small-screen: keep nav items visible side-by-side where possible
   Use flexbox with wrapping so Home's button doesn't consume the full width */
@media(max-width:600px){
  .topnav{
    display:flex;
    gap:8px;
    align-items:center;
    padding:8px;
    flex-wrap:wrap;
    position:relative; /* ensure dropdown absolute positions below nav */
  }
  .topnav a, .dropdown{float:none; display:inline-flex; align-items:center}
  .dropdown{display:inline-flex}
  .dropbtn{display:inline-block; width:auto; text-align:left; padding:10px 12px}
  /* Place the dropdown panel below the entire nav on mobile so it doesn't overlap nav items */
  .dropbtn{display:inline-block; width:auto; text-align:left; padding:12px 14px}
  /* Place the dropdown panel below the entire nav on mobile so it doesn't overlap nav items.
     Use max-height/opacity/transform for a smooth slide-down animation and ensure touch targets
     are larger for easier tapping. */
  .dropdown-content{
    position:absolute; /* positioned relative to .topnav (which is relative) */
    left:0;
    right:0;
    top:100%;
    width:100%;
    box-sizing: border-box;
    transform: none; /* cancel the desktop centering transform so it doesn't shift off-screen */
    box-shadow:0 8px 16px rgba(0,0,0,0.15);
  background:var(--dropdown-bg);
    z-index:1000;
    display: block; /* allow animation via max-height */
    max-height: 0; /* collapsed by default */
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform-origin: top center;
    transform: translateY(-6px);
    transition: max-height 300ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease, transform 260ms ease;
  }
  /* When the dropdown is open on mobile, expand with a slide-down feel */
  .dropdown.open .dropdown-content{
    max-height: 420px; /* enough to show a few menu items; safe upper bound */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Increase tappable area for menu links */
  .dropdown-content a{padding:14px 16px}
}

/* On desktop, allow hover to open the menu (keeps keyboard click behavior too) */
@media(min-width:900px){
  .dropdown:hover .dropdown-content,
  .dropdown:focus-within .dropdown-content,
  .dropdown.open .dropdown-content{display:block}
  .dropdown:hover .dropbtn,
  .dropdown.open .dropbtn{background-color:var(--brand-purple); color:#fff}

  /* Nudge desktop dropdown panel slightly to the right so its options
     don't get visually clipped against the left edge in some layouts. */
  .topnav .dropdown .dropdown-content {
    /* shift the panel further to the right from centered under the button
       so menu items aren't tight against the left edge */
    left: calc(50% + 28px);
    /* keep the centering transform in place */
    transform: translateX(-50%);
  }
}
.clicker {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  color: white;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
  outline: none;
  transition: background-color 0.3s ease;
}

.product-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
}

/* Desktop: reset content padding and remove sidebar constraints */
@media (min-width: 900px) {
  /* Content padding - no sidebar offset needed */
  .content {
    padding-top: 1rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Remove sidebar width constraints */
  .home-hero-row, .pet-carousel-container, .service-section, .content > .box {
    max-width: 100%;
  }
}

/* Right sidebar removed - using top navigation instead */

/* Ensure Calendly badge sits above navigation */
@media (min-width: 900px) {
  .calendly-badge,
  .calendly-badge-widget,
  a.calendly-badge,
  .calendly-badge-content {
    z-index: 10002 !important;
  }
}

/* Make service tiles expand to fill the content area */
@media (min-width: 900px) {
  .service-section,
  .service-section .service-description-box,
  .content > .box,
  .content > .box .service-description-box {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  .service-description-box {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

/* Meet My Pets carousel desktop styles */
@media (min-width: 900px) {
  .pet-carousel-container {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    box-sizing: border-box;
  }
  
  .pet-carousel,
  .pet-slide {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
  }
  
  .pet-slide .box {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .pet-carousel-arrow.left { left: 12px; }
  .pet-carousel-arrow.right { right: 12px; }
}

/* Right sidebar carousel removed - using top navigation layout */

/* Mobile: show Meet My Pets as stacked vertical tiles instead of a
   horizontal carousel. Hides carousel controls and indicators on
   narrow screens so the layout is simpler and avoids centering issues. */
@media (max-width: 900px) {
  .pet-carousel {
    display: block;
    overflow: visible;
    padding: 0 12px; /* small page padding preserved */
    box-sizing: border-box;
  }

  .pet-slide {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: auto;
    box-sizing: border-box;
    margin: 0 0 1rem 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    scroll-snap-align: none;
  }

  /* Inner card inset so rounded corners are visible and content doesn't
     touch the viewport edge. Match business card mobile width. */
  .pet-slide .box {
    width: 100%;
    max-width: 95vw;
    padding: 1.25rem 1rem;
    border-radius: 12px;
    box-sizing: border-box;
    margin: 0 auto;
  }

  /* Hide arrows and indicators on mobile when using vertical layout */
  .pet-carousel-arrow { display: none; }
  .pet-carousel-indicators { display: none; }
}

.box:hover {
  /* Subtle elevation on hover instead of a heavy purple fill */
  box-shadow: 0 6px 18px rgba(102,51,153,0.06);
}


.hidden-box {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
     padding: 0 2rem;
     background: var(--content-bg);
     border-radius: 0 0 16px 16px;
     box-shadow: 0 2px 8px rgba(102, 51, 153, 0.08);
     opacity: 0;
     pointer-events: none;
}

.hidden-box.open {
     max-height: 800px;
     padding: 2rem;
     opacity: 1;
     pointer-events: auto;
}


.box {
  /* Make the box look like a light card with a subtle purple border */
  display: block;
  background: transparent;
  border: 1px solid rgba(102,51,153,0.14);
  border-radius: 10px;
  margin-bottom: 1rem;
}

.box > div {
  /* inner container (the visible card area) */
  background-color: #ffffff;
  color: #2D3748;
  padding: 0;
  border-radius: 8px;
}

.box .clicker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  box-sizing: border-box;
  background: transparent; /* inner >div provides white background */
}

.box .clicker:hover {
  background: var(--light-purple-bg);
}

/* Service header with price in top right */
.service-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.4rem;
  position: relative;
}

.box .product-name {
  text-align: center;
  display: block;
  margin: 0;
  color: var(--brand-purple);
  font-size: 1.4rem;
  line-height: 1.05;
  flex: 1;
}

/* Position price absolutely on desktop to allow name to center */
@media (min-width: 769px) {
  .service-header {
    justify-content: center;
  }
  
  .service-price {
    position: absolute;
    right: 0;
    top: 0;
  }
}

/* Price styling */
.service-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--brand-purple);
  white-space: nowrap;
  text-align: right;
  line-height: 1;
}

.service-price .price-unit,
.pricing .price-unit {
  font-size: 0.9rem;
  font-weight: normal;
  color: #666;
  margin-left: 0.2rem;
}

.promotion-price-active {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.promotion-price-active .price-current,
.promotion-price-active .price-original {
  display: block;
}

.promotion-price-active .price-current .price-amount {
  font-size: 1.8rem;
  color: var(--brand-purple);
}

.promotion-price-active .price-current .price-unit {
  font-size: 0.9rem;
}

.promotion-price-active .price-original {
  color: #b7b7b7;
  font-size: 1rem;
  margin-top: 0.25rem;
  font-weight: 500;
}

.promotion-price-active .price-original .price-unit {
  color: inherit;
  font-size: 0.9rem;
}

.promotion-price-active .price-original .price-amount {
  color: inherit;
  text-decoration: line-through;
  font-size: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .service-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2.5vw, 1rem);
  }
  
  .box .product-name {
    text-align: left;
    font-size: 1.2rem;
    flex: 1 1 60%;
  }
  
  .service-price {
    text-align: right;
    font-size: 1.4rem;
    flex: 0 0 auto;
    margin-left: auto;
  }
}

.product-description {
  margin-bottom: 5px;
  grid-column: 1 / span 2;
  grid-row: 2;
  font-size: 18px;
  width: 100%;
}
  .pricing {
    margin-bottom: 5px;
    grid-column: 2;
    grid-row: 1;
  }
  .pricing p {
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: var(--brand-purple);
    margin: 0;
  }

  /* Arrange the pricing and the following small-caption (e.g. "(per 30mins)")
     on the same centered row while keeping the other list items on their
     own line. We use a wrapping flex layout and specific sibling selectors
     so the markup doesn't need to change. Applies to mobile and desktop. */
  .product-description ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
  }

  /* The pricing block stays its natural size */
  .product-description .pricing {
    flex: 0 0 auto;
    order: 1;
  }

  /* The list item immediately after .pricing (the per-30mins note)
     will sit inline with the price */
  .product-description .pricing + li {
    flex: 0 0 auto;
    order: 2;
    margin: 0;
    color: #55626a; /* subtle gray for the small caption */
    font-style: italic;
    font-size: 0.95rem;
  }

  /* Any subsequent list items should break to the next line and be centered */
  .product-description .pricing + li + li {
    order: 3;
    flex: 0 0 100%;
    text-align: center;
    margin-top: 0.4rem;
  }
 

.calendly {
  grid-column: 1 / span 2;
  grid-row: 3;
  padding-bottom: 5px;
  padding-left: 0%;
  align-items: center;
}

.calendly a {
  text-decoration: none;
}

.product-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 26px;
  font-weight: bold;
  font-family: 'Coustard', Georgia, serif;
  text-align: center;
}

/* Business Card Layout for About Page */
.business-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(102, 51, 153, 0.12);
  overflow: hidden;
  max-width: 900px;
  margin: 2rem auto;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.business-card-photo {
  flex: 0 0 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0d6f5 0%, #f8f6fc 100%);
  padding: 2rem;
}

.business-card-photo img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--brand-purple);
  box-shadow: 0 4px 16px rgba(102, 51, 153, 0.15);
}

.business-card-content {
  flex: 1;
  padding: 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.business-card-title {
  color: var(--brand-purple);
  font-family: 'Coustard', Georgia, serif;
  font-size: 2.2rem;
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.business-card-section {
  margin-bottom: 1rem;
}

.business-card-section h3 {
  color: var(--brand-purple);
  font-family: 'Coustard', Georgia, serif;
  font-size: 1.3rem;
  margin: 0 0 0.75rem 0;
  text-align: left;
}

.business-card-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.business-card-section ul li {
  color: #2D3748;
  font-size: 1.05rem;
  line-height: 1.8;
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.4rem;
}

.business-card-section ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--brand-purple);
  font-weight: bold;
  font-size: 1.1rem;
}

/* Desktop: Ensure business card maintains 900px width */
@media (min-width: 900px) {
  .business-card {
    max-width: 900px !important;
    width: 100%;
    margin: 2rem auto;
  }
}

/* Mobile: Vertical business card layout */
@media (max-width: 900px) {
  .business-card {
    flex-direction: column;
    max-width: 95vw;
    margin: 1.5rem auto;
  }

  .business-card-photo {
    flex: 0 0 auto;
    padding: 2.5rem 2rem 2rem 2rem;
  }

  .business-card-photo img {
    width: 160px;
    height: 160px;
  }

  .business-card-content {
    padding: 2rem 1.5rem 2.5rem 1.5rem;
    gap: 1.25rem;
  }

  .business-card-title {
    font-size: 1.8rem;
    text-align: center;
  }

  .business-card-section h3 {
    font-size: 1.2rem;
    text-align: center;
  }

  .business-card-section ul li {
    font-size: 1rem;
    text-align: left;
  }
}

/* #about-pets{

} */

.pet-name{
grid-column: 1;
grid-row: 3 / span 1;


}

.pet-pic{
grid-column:1;
grid-row: 1 / span 2;
height: 150px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

.pet-breed{
grid-column: 1;
grid-row: 4 / span 1;

}

.pet-blurb{
grid-column: 1;
grid-row: 5 / span 3;

}
.left-right-flexbox{

  display: flex;
  background-color: #EDF2F7;
  flex-direction: row;
  padding: 3px;
  border-radius: 8px;
}

.flexbox {
  display: flex;
  background-color: #EDF2F7;
  flex-direction: column;
  padding: 3px;
  border-radius: 8px;
}

.flexbox div {
  background-color: #ffffff;
  margin: 3px;
  padding: 3px;
  color: #2D3748;
  border-radius: 4px;
}

.header {
  position: relative;
  background-color: #F5F2FF;
  padding: 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Coustard', Georgia, serif;
  color: #663399;
  border: 3px solid #663399;
}


.button-22 {
  align-items: center;
  appearance: button;
  background-color: #38A169;
  border-radius: 8px;
  border-color: #38A169;
  border-width: 3px;
  box-shadow: rgba(255, 255, 255, 0.26) 0 1px 2px inset;
  /* width:140px; */
  color: #ffffff;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 100%;
  line-height: 1.15;
  position: relative;
    left: 50%;
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  margin: 0;
  padding: 10px 21px;
  text-align: center;
  text-transform: none;
  transition: all .13s ease-in-out;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-22:active {
  background-color: #2F855A;
}

.button-22:hover {
  background-color: #2F855A;
  border-color: #2F855A;
  border-width: 3px;
  color: #ffffff;
}
.meet-pets{
  text-align: center;
}
@media (max-width: 900px) {
  .home-hero-row {
    flex-direction: column;
    align-items: center;
    max-width: 88vw;
    width: 100%;
  }
  .home-btn-row {
    max-width: 88vw;
    width: 100%;
    margin: 0 auto 1.5rem auto;
  }
}

/* Keep buttons side-by-side for most mobile widths; only stack on very small screens */
@media (max-width: 380px) {
  .book-today-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  .book-today-container .nav-btn {
    margin: 0 auto;
  }
}
.fixed-heading h1 {
  font-size: 2.8rem;
}

.fixed-heading p {
  font-size: 1.3rem;
}

.slide img {
  height: 100%;
}

.text-overlay h1 {
  font-size: 3.5rem;
}

.text-overlay p {
  font-size: 1.5rem;
}

.text-overlay {
  padding: 30px 50px;
}

/* --- Home hero section layout --- */
.home-hero-row {
  display: flex;
  flex-direction: row;
  align-items: center; /* Vertically center both columns */
  justify-content: center;
  gap: 0;
  margin: 2.5rem auto 1.5rem auto;
  width: 100%;
  max-width: 1100px;
  min-height: 340px;
  box-sizing: border-box;
}
.home-hero-actions-col {
  flex: 0 0 50%;
  max-width: 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2.2rem;
  box-sizing: border-box;
  height: auto;
  padding-left: 2vw;
}
.home-hero-actions-col .cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
}
.gold-box-link {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
}
.gold-box {
  width: 100%;
  max-width: 420px;
  font-size: 1.25rem;
  font-weight: 700;
}
.home-btn-row {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.home-btn-row .nav-btn {
  width: 100%;
  max-width: 420px;
  font-size: 1.25rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(102,51,153,0.13);
  border: 2px solid #54297a;
}
@media (max-width: 900px) {
  .home-hero-row {
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
    min-height: unset;
    margin: 1.2rem 0 1rem 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
}
/* --- End home hero section layout --- */

/* Force white text and purple header ONLY on small screens where the
   top nav is rendered as a horizontal purple bar. On desktop the nav
   is a left side-panel with its own light styling, so we scope these
   overrides to narrow viewports to avoid conflicting with the side-nav. */
/* Mobile-specific color tweaks: ensure the dropdown panel matches the
   light site chrome while keeping brand accents for hover/active states. */
.topnav .dropdown .dropdown-content {
  background: var(--dropdown-bg);
}
.topnav .dropdown .dropdown-content a {
  color: var(--brand-purple);
}
.topnav .dropdown .dropdown-content a:hover,
.topnav .dropdown .dropdown-content a:focus {
  background: var(--brand-purple);
  color: #fff;
}

/* Gold special slide styles (single consolidated definition) */
.gold-slide {
  /* light purple variant chosen as the consolidated default */
  background: #e0d6f5;
  box-shadow: 0 1px 6px rgba(102,51,153,0.10);
  border: none;
}
.gold-photo {
  background: #FFD700;
  color: #fff700;
}
.gold-quote {
  color: #4B2E83;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.gold-btn {
  background: #FFD700;
  color: #4B2E83;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(255,215,0,0.10);
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                    */
/* -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  min-height: 300px;
  width: 100%;
  overflow: hidden;
  color: #fff;
  font-family: 'Montserrat', Arial, sans-serif;
  background: #111;
}

.site-footer__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(7px) brightness(0.85);
  opacity: 0.85;
  pointer-events: none;
}

@media (max-width: 768px) {
  .site-footer__video {
    display: none;
  }
  .site-footer {
    background: #663399; /* Fallback to brand purple or whatever color is desired */
  }
}

.site-footer__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: rgba(5, 5, 5, 0.55);
  padding: clamp(1.75rem, 4vw, 3rem);
}

.site-footer__content {
  max-width: 760px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.site-footer__overlay h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin: 0;
  font-weight: 600;
  color: #fff;
}

.site-footer__contact {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  line-height: 1.6;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: 1rem;
  justify-content: center;
}

.site-footer__links a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.site-footer__links a:hover,
.site-footer__links a:focus {
  text-decoration: none;
  color: #ffd36b;
}

@media (max-width: 600px) {
  .site-footer {
    min-height: 260px;
  }

  .site-footer__links {
    flex-direction: column;
    gap: 0.8rem;
  }
}
.gold-btn:hover, .gold-btn:focus {
  background: #FFE066;
  color: #4B2E83;
}

/* === Force purple navbar everywhere (desktop + mobile) ===
   This block restores the purple header and readable dropdowns on all
   screen sizes. It is intentionally placed near the end so it wins
   over earlier, more specific rules where appropriate. */
.topnav {
  background-color: var(--brand-purple);
}
.topnav a,
.topnav .dropbtn {
  color: #fff;
  background-color: transparent;
}
.topnav .dropdown .dropdown-content {
  background: #54297a; /* slightly darker purple for panel */
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.topnav .dropdown .dropdown-content a {
  color: #fff;
}
.topnav .dropdown .dropdown-content a:hover,
.topnav .dropdown .dropdown-content a:focus {
  background: #FFD700;
  color: #4B2E83;
}

@media (min-width: 900px) {
  /* Desktop top nav styling already defined above */
  .topnav {
    background-color: var(--brand-purple);
  }
  .topnav a, .topnav .dropbtn { color: #fff; }
  .topnav .dropdown .dropdown-content { background: #54297a; }
  .topnav .dropdown .dropdown-content a:hover,
  .topnav .dropdown .dropdown-content a:focus {
    background: #FFD700;
    color: #4B2E83;
  }
}

/* Profile incomplete styles removed per user request */
/* .profile-incomplete {
  animation: glow-gold 0.8s ease-in-out infinite alternate;
  border: 2px solid #FFD700 !important;
}

@keyframes glow-gold {
  from {
    box-shadow: 0 0 5px #FFD700, inset 0 0 5px rgba(255, 215, 0, 0.2);
    border-color: #FFD700;
  }
  to {
    box-shadow: 0 0 20px #FFD700, 0 0 35px #FFA500, inset 0 0 10px rgba(255, 215, 0, 0.6);
    border-color: #FFF8DC;
  }
} */

.profile-tooltip {
  position: fixed;
  z-index: 10005;
  background-color: #333;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.9rem;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  max-width: 220px;
  text-align: center;
  line-height: 1.4;
}

.account-button {
  color: white !important;
}