/* ----- Core helpers/colors you already use ----- */
:root{
  --overlay-1: rgba(0,0,0,.35);
  --overlay-2: rgba(0,0,0,.35);
  --overlay-3: rgba(0,0,0,.35);
  --overlay-4: rgba(0,0,0,.35);
}

@font-face {
  font-family: 'Glow Better';
  src: url('../fonts/glowbetter.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.cream { background-color: #f5f5e9 !important; }
.orange { color: #F86118 !important; }
.orangebg { background-color:  #F86118 !important; }
.olive  { color: #8A944A !important; }
.glowbetter { font-family: 'Glow Better', sans-serif; }
.olivebg  { background-color: #8a944a !important; }
.creamc { color: #f5f5e9 !important; }
.sunshine { color: #FFD700 !important; } /* gold */
.heather { color:L #424649 !important; } /* dark grey */
.olivelink { color: #f86118 !important; }

/* --- Navbar base --- */
.navbar {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

/* Link colours + font (anchor itself no longer scales) */
.navbar .nav-link {
  font-size: 1.5rem;
  margin: 7px;
  letter-spacing: .02em;
  font-family: 'Glow Better', sans-serif;
  display: inline-block;
  transition: color .15s ease;
}

/* Scale ONLY the inner label for crisp text */
.navbar .nav-link .nav-label {
  display: inline-block;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, color;
  transition: transform .14s ease, color .14s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: #F86118 !important;       /* olive */
}
.navbar .nav-link:hover .nav-label,
.navbar .nav-link:focus-visible .nav-label {
  transform: scale(1.10);
}
.navbar .nav-link:active .nav-label {
  transform: scale(1.18);
}

/* AFTERCARE: olive by default, hover → orange (inverse) */
.navbar .nav-link.olive { color: #f5f5e9; }
.navbar .nav-link.olive:hover,
.navbar .nav-link.olive:focus-visible { color: #F86118 !important; }

/* Brand image (base size) */
.navbar-brand img {
  height: 100px;
  width: auto;
}

/* === Logo hover/click growth (radial/center) === */
.navbar-brand {
  display: inline-flex;
  align-items: center;
}
.navbar-brand img {
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  transform-origin: center center;   /* <— radial growth */
  will-change: transform;
}
.navbar-brand:hover img,
.navbar-brand:focus-visible img {
  transform: scale(1.10);
}
.navbar-brand:active img {
  transform: scale(1.18);
}
@media (max-width: 991.98px) {
  .navbar-brand:hover img,
  .navbar-brand:focus-visible img { transform: scale(1.06); }
  .navbar-brand:active img { transform: scale(1.10); }
}

/* Subtle cream glow for AFTERCARE */
.navbar .nav-link.aftercare-glow .nav-label {
  text-shadow:
    0 0 4px rgba(245, 245, 233, 0.9),
    0 0 10px rgba(245, 245, 233, 0.65);
  transition: text-shadow .15s ease;
}

.navbar .nav-link.aftercare-glow:hover .nav-label,
.navbar .nav-link.aftercare-glow:focus-visible .nav-label {
  text-shadow:
    0 0 5px rgba(245, 245, 233, 1),
    0 0 14px rgba(245, 245, 233, 0.75);
}

.navbar .nav-link.aftercare-glow:active .nav-label {
  text-shadow:
    0 0 6px rgba(245, 245, 233, 1),
    0 0 18px rgba(245, 245, 233, 0.85);
}


/* --- Animated burger → cross --- */
.custom-toggler {
  position: relative;
  width: 32px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none !important;

  /* grow the whole button */
  transform: scale(1);
  transform-origin: center center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.custom-toggler:focus { outline: none; }

.navbar .custom-toggler:hover,
.navbar .custom-toggler:focus-visible {
  transform: scale(1.28) !important;
}
.navbar .custom-toggler:active {
  transform: scale(1.38) !important;
}
.navbar .custom-toggler.is-open {
  transform: scale(1.22) !important;
}

.custom-toggler .bar {
  position: absolute;
  left: 0; right: 0;
  height: 3px;
  background: #f5f5e9;;             /* orange when closed */
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s ease, opacity .18s ease, background-color .25s ease;
}
.custom-toggler .bar:nth-child(1) { top: 0; }
.custom-toggler .bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.custom-toggler .bar:nth-child(3) { bottom: 0; }

/* Open state → neat olive cross */
.custom-toggler.is-open .bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
  background: #F86118;
}
.custom-toggler.is-open .bar:nth-child(2) { opacity: 0; }
.custom-toggler.is-open .bar:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
  background: #F86118
}

/* --- Collapsed menu alignment & stagger --- */

/* Desktop/default: visible immediately */
#mainNav .nav-item {
  opacity: 1;
  transform: none;
}

/* Mobile (≤991.98px): right-align + staggered reveal when opened */
@media (max-width: 991.98px) {
  #mainNav { text-align: right; }
  #mainNav .navbar-nav { align-items: flex-end; }

  #mainNav .nav-item {
    opacity: 0;
    transform: translateX(20px);
    transition: transform .35s ease, opacity .35s ease;
  }
  #mainNav.show .nav-item {
    opacity: 1;
    transform: translateX(0);
  }
  #mainNav.show .nav-item:nth-child(1) { transition-delay: .00s; }
  #mainNav.show .nav-item:nth-child(2) { transition-delay: .06s; }
  #mainNav.show .nav-item:nth-child(3) { transition-delay: .12s; }
  #mainNav.show .nav-item:nth-child(4) { transition-delay: .18s; }

  /* Tighten vertical rhythm in the collapsed list */
  #mainNav .nav-link {
    line-height: 0.7;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  /* Slightly smaller growth on mobile so it doesn't crowd */
  #mainNav .nav-link:hover .nav-label,
  #mainNav .nav-link:focus-visible .nav-label { transform: scale(1.06); }
  #mainNav .nav-link:active .nav-label { transform: scale(1.10); }
}

/* ===== HERO CAROUSEL (replaces previous global .carousel rules) ===== */
.hero-carousel{
  --carousel-gutter: clamp(8px, 2.2vw, 24px);
  --carousel-radius: 18px;
  width: calc(100% - (var(--carousel-gutter) * 2));
  margin-inline: var(--carousel-gutter);
  border-radius: var(--carousel-radius);
  overflow: hidden;                 /* keeps images + arrows inside the radius */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  position: relative;               /* ensure controls position inside frame */
}

/* Height/fit limited to the hero only (no longer global) */
.hero-carousel .carousel-item,
.hero-carousel .carousel-item > img {
  height: 70vh;
  min-height: 420px;
  object-fit: cover;
}
.hero-carousel .carousel-item > img {
  width: 100%;
  display: block;
  border-radius: inherit;
}

/* Centered caption helper */
.carousel-caption-centered {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1.5rem;
}
.carousel-caption-box {
  max-width: 720px;
  color: #fff;
  padding: .85rem 1.2rem;
  border-radius: 12px;
}
.carousel-caption-box h2 {
  margin-left:1rem;
  line-height: 0.75;
  font-size: 3rem;
  letter-spacing: .08em;
  font-weight: 700;
}
.carousel-caption-box p {
  margin: .75rem;
}

/* Per-slide caption overlays */
.caption--flash{ background: rgba(138, 148, 74, 0.600); color:#fff; }
/* Closest valid hex to requested #f5f5e is #F5F5E6 */
.caption--tattoo{background: rgba(248, 99, 24, 0.300); color:#fff; }
.caption--toothgems{ background: rgba(248,97,24,.300); color:#fff; }
.caption--laser{ background: rgba(138,148,74,.300); color:#fff; }

/* Indicators kept inside the rounded frame */
.hero-carousel .carousel-indicators{ margin-bottom:.75rem; }

/* Controls INSIDE the rounded frame */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next{
  width:48px; height:48px;
  top:50%; transform:translateY(-50%);
  opacity:1;
  background: rgba(0,0,0,.35);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.hero-carousel .carousel-control-prev{ left:10px; }
.hero-carousel .carousel-control-next{ right:10px; }
.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover{ background: rgba(0,0,0,.5); }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{
  width:1.25rem; height:1.25rem; background-size:1.25rem 1.25rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Solid per-slide button classes */
.tattoobtn{ background:#222; color:#fff; border:none; }
.tattoobtn:hover{ background:#000; color:#fff; }

.flashbtn{ background:#111; color:#fff; border:none; }
.flashbtn:hover{ background:#000; color:#fff; }

.toothgemsbtn{ background:#8A944A; color:#fff; border:none; }
.toothgemsbtn:hover{ background:#76823F; color:#fff; }

.laserbtn{ background:#F86118; color:#fff; border:none; }
.laserbtn:hover{ background:#e25715; color:#fff; }

/* --- Card overlay hover effect --- */
.card { position: relative; overflow: hidden; border: none; }

/* Force card image containers to be square */
.card-img-top {
  aspect-ratio: 1 / 1;   /* keeps it square */
  width: 100%;
  height: auto;
  object-fit: cover;     /* crop the image instead of stretching */
  transition: transform 280ms ease, filter 280ms ease;
  display: block;
}
.card:hover .card-img-top {
  transform: scale(1.04);
  filter: brightness(0.85);
}

/* The overlay panel */
.card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 140, 0, 0.55); /* semi-transparent orange */
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none; /* keep whole card clickable */
}

/* Show overlay on hover/focus */
.card:hover .card-overlay,
.card:focus-within .card-overlay { opacity: 1; }

/* Overlay text */
.card-overlay .overlay-text {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #111;
  text-shadow:
    0 0 6px rgba(255,255,255,0.7),
    0 0 16px rgba(255,200,120,0.9),
    0 0 26px rgba(255,160,60,0.8);
}

/* Optional: tidy card body spacing */
.card-body { padding: 0.9rem 1rem 1.2rem; }

/* ----- About / Footer (unchanged from your setup) ----- */
.avatar-circle{ 
  max-width:400px; 
  max-width:400px; max-width:80%; 
  border-radius:50%; 
  overflow:hidden; 
  margin:0 auto; 
  box-shadow:0 10px 30px rgba(0,0,0,.15); }

.avatar-circle img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; }

footer{ background:#e36a32; color:#fff; padding:2.5rem 0 1.25rem; }
footer a{ color:#f5f5e9; text-decoration:none; }
footer a:hover{ color:#424649; }
.footer-small{ font-size:.8rem; opacity:.8; margin-top:.75rem; }

/* Footer icons – scale up on hover/click */
footer .footer-socials a {
  display: inline-flex;
  align-items: center;
  transition: transform .15s ease, color .15s ease;
  will-change: transform;
}
footer .footer-socials a:hover,
footer .footer-socials a:focus-visible { transform: scale(1.18); }
footer .footer-socials a:active { transform: scale(1.26); }

/* ----- Media Queries ----- */
@media (min-width:768px){
  .navbar-brand img{ height:130px; width:auto; }

  .carousel-caption-box h2 {
  font-size: 7rem;
}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .custom-toggler,
  .navbar .nav-link .nav-label,
  footer .footer-socials a {
    transition: none;
  }
}

/* ==== Hero carousel responsive height override ==== */
.hero-carousel,
.hero-carousel .carousel-item,
.hero-carousel .carousel-item > img {
  /* Scales with width, but never too tall/short */
  height: clamp(300px, 42vw, 68vh);
  min-height: 280px;
  max-height: 800px;
  object-fit: cover;
  object-position: center;
}

/* Tweak steps for smaller breakpoints */
@media (max-width: 992px) {
  .hero-carousel,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-item > img {
    height: clamp(260px, 54vw, 56vh);
    min-height: 260px;
  }
}

@media (max-width: 768px) {
  .hero-carousel,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-item > img {
    height: clamp(240px, 58vw, 50vh);
    min-height: 220px;
  }
}

@media (max-width: 576px) {
  .hero-carousel,
  .hero-carousel .carousel-item,
  .hero-carousel .carousel-item > img {
    height: clamp(220px, 64vw, 46vh);
    min-height: 200px;
  }

  .tgtitle {
    font-size: 1.75rem;
  }
}