/* ==========================================
   SHIV DIAMOND – Animation & Utility CSS
   Extra polish layer
   ========================================== */

/* === PAGE TRANSITION === */
body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* === NAV HAMBURGER ACTIVE STATE === */
.nav__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-8px);
}
.nav__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* === HOVER UNDERLINE LINKS === */
a.underline-link {
  color: var(--gold);
  text-decoration: none;
  position: relative;
}
a.underline-link::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width 0.3s ease;
}
a.underline-link:hover::after { width: 100%; }

/* === SECTION DIVIDER === */
.section-divider {
  width: 60px;
  height: 1px;
  background: var(--gold);
  margin: 2rem 0;
}
.section-divider--center { margin: 2rem auto; }

/* === GOLD TEXT === */
.text-gold { color: var(--gold); }
.text-warm { color: var(--warm-gray); }

/* === FADE IN STAGGER FOR CARDS === */
.card-grid .card:nth-child(1) { --delay: 0s; }
.card-grid .card:nth-child(2) { --delay: 0.08s; }
.card-grid .card:nth-child(3) { --delay: 0.16s; }
.card-grid .card:nth-child(4) { --delay: 0.24s; }
.card-grid .card:nth-child(5) { --delay: 0.32s; }
.card-grid .card:nth-child(6) { --delay: 0.40s; }

/* === STICKY BREADCRUMB === */
.breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--warm-gray);
  margin-bottom: 3rem;
}
.breadcrumb a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}
.breadcrumb a:hover { color: var(--gold-dark); }
.breadcrumb span { color: var(--warm-gray); }

/* === FLOATING ACTION BUTTON (WhatsApp / Contact) === */
.fab-contact {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 900;
  width: 52px;
  height: 52px;
  background: var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(201,169,110,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.2rem;
  color: white;
  animation: pulse-glow 3s ease-in-out infinite;
}
.fab-contact:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px rgba(201,169,110,0.6);
}

/* === BACK TO TOP === */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 5.5rem;
  z-index: 900;
  width: 44px;
  height: 44px;
  background: rgba(26, 24, 20, 0.85);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--gold);
  font-size: 1rem;
}
.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--charcoal); }

/* === LOADING SHIMMER === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shimmer {
  background: linear-gradient(90deg, var(--cream) 25%, var(--ivory) 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* === DIAMOND BULLET LIST === */
ul.diamond-list {
  list-style: none;
  padding: 0;
}
ul.diamond-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--warm-gray);
  line-height: 1.7;
}
ul.diamond-list li::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 0.5rem;
  top: 0.5rem;
}

/* === QUOTE BLOCK === */
.pull-quote {
  border-left: 2px solid var(--gold);
  padding: 1.5rem 2rem;
  margin: 3rem 0;
  background: var(--cream);
}
.pull-quote p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  font-style: italic;
  color: var(--charcoal);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}
.pull-quote cite {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* === MOBILE NAV OVERLAY === */
@media (max-width: 768px) {
  .nav__links.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
  }

  .fab-contact {
    bottom: 1.2rem;
    right: 1.2rem;
    width: 46px;
    height: 46px;
  }

  .back-to-top {
    display: none;
  }
}

/* === PRINT STYLES === */
@media print {
  .nav, .fab-contact, .back-to-top, footer { display: none !important; }
  body { color: #000; background: #fff; }
  .page-hero { min-height: auto; padding: 2rem 0; }
  .page-hero h1 { color: #000; font-size: 2.5rem; }
}

/* ==========================================
   IMAGE SLOT SYSTEM
   Applied by site-config.js when images
   are assigned via Admin Dashboard
   ========================================== */

/* Visual placeholder fills with image when assigned */
[data-img-slot] {
  position: relative;
  transition: background 0.4s ease;
}

/* When an image is applied, hide the fallback icon */
[data-img-slot].has-image .sd-img-fallback,
[data-img-slot].has-image .vision__diamond-icon,
[data-img-slot].has-image .placeholder-icon {
  display: none !important;
}

/* Full-cover image inside visual-placeholder */
.visual-placeholder[data-img-slot].has-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Gallery items with assigned images */
.gallery-item[data-img-slot].has-image .gallery-item__inner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-size: 0;
  color: transparent;
}

/* Team avatars with assigned photos */
.team-card__avatar[data-img-slot].has-image {
  background-size: cover;
  background-position: center;
  font-size: 0;
  color: transparent;
}

/* Hero background overlay when image assigned */
.hero__bg[data-img-slot].has-image {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Eco override image */
.eco-image-override.active {
  display: block !important;
}
.eco-image-override.active + .windmill-illustration {
  display: none;
}

/* Diamond cluster / craftsmanship with image */
.diamond-cluster[data-img-slot].has-image,
.craftsmanship-visual[data-img-slot].has-image {
  background-size: cover;
  background-position: center;
}
.diamond-cluster[data-img-slot].has-image > *,
.craftsmanship-visual[data-img-slot].has-image .process-steps {
  opacity: 0.1;
}