/********** base.css — Mega Fresh Carolina **********/
/* Consolidates: utilities, spinner, page-header, section helpers */

/* ── Global Reset / Box ── */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* ── Smooth Scroll ── */
html { scroll-behavior: smooth; }

/* ── Loading Spinner ── */
#spinner {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 99999;
}
#spinner.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Page Header (photo + red overlay banner under navbar) ── */
.page-header {
  background:
    linear-gradient(to bottom, rgba(160,0,0,0.78) 0%, rgba(204,0,0,0.72) 100%),
    url('../img/carousel-1.jpg') center/cover no-repeat;
  padding: 90px 0 50px;
  position: relative;
  overflow: hidden;
}
.page-header::before { content: none; }
.page-header h1 { color: #fff; }
.page-header .breadcrumb-item a,
.page-header .breadcrumb-item { color: rgba(255,255,255,0.8); }
.page-header .breadcrumb-item.active { color: #fff; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6); }

/* ── Section Helpers ── */
.section-py    { padding-top: var(--section-py);    padding-bottom: var(--section-py); }
.section-py-sm { padding-top: var(--section-py-sm); padding-bottom: var(--section-py-sm); }

/* ── Global wallpaper — white overlay for light sections ── */
section,
.features-strip,
footer.footer {
  background:
    linear-gradient(rgba(255,255,255,0.65), rgba(255,255,255,0.65)),
    url('../img/wallpaper.png') repeat fixed;
  background-size: auto, 280px auto;
  position: relative;
}
/* Ensure content sits above background */
section > *,
.features-strip > *,
footer.footer > * {
  position: relative;
  z-index: 1;
}

.bg-icon {
  background-image: url('../img/bg-icon.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ── Section Header Divider ── */
.section-header {
  position: relative;
  padding-bottom: 12px;
}
.section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--primary);
  border-radius: 2px;
  margin: 12px 0 0;
}
/* Center the divider bar when section-header is inside a text-center context */
.text-center .section-header::after,
.section-header.text-center::after,
.section-header.mx-auto::after {
  margin-left: auto;
  margin-right: auto;
}

/* ── Utility spacing ── */
.py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }

/* ── Back to Top ── */
.back-to-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
  z-index: 9999;
  background: var(--primary);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: var(--shadow-card);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover { background: var(--primary-dark); transform: translateY(-4px); }

/* ── Scroll-reveal animation base ── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.25s; }
.animate-delay-3 { transition-delay: 0.4s; }
.animate-delay-4 { transition-delay: 0.55s; }