/* ==========================================================================
   C2I Website — Components Stylesheet
   Reusable UI component overrides and additions not covered in style.css.
   Includes: logo-strip placeholder variant, hero background binding,
   nav scroll state, footer brand, and partner placeholder boxes.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Hero — CSS custom property background binding
   The inline --hero-bg CSS variable on the <section> feeds the background-image
   so no inline styles are set directly on the element.
   -------------------------------------------------------------------------- */

.hero--image {
  background-image: var(--hero-bg, none);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}


/* --------------------------------------------------------------------------
   2. Navigation — scroll shadow state
   JS adds .nav--scrolled when page scrolls past 10px
   -------------------------------------------------------------------------- */

.nav--scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}


/* --------------------------------------------------------------------------
   3. Logo Strip — placeholder boxes
   Displayed in the Partners section until real logos are provided.
   -------------------------------------------------------------------------- */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder state — removed when real logo images are added */
.logo-strip__item--placeholder {
  width: 160px;
  height: 72px;
  background-color: var(--color-gray-light);
  border: 1px dashed var(--color-gray-mid);
  border-radius: var(--border-radius);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-mid);
  letter-spacing: 0.06em;
  transition: background-color var(--transition-fast);
}

.logo-strip__item--placeholder:hover {
  background-color: var(--color-off-white);
}

/* Real logo item (used once client provides assets) */
.logo-strip__item img {
  height: 48px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter var(--transition-fast), opacity var(--transition-fast);
}

.logo-strip__item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}


/* --------------------------------------------------------------------------
   4. Footer — brand column
   -------------------------------------------------------------------------- */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer__logo-link {
  display: inline-flex;
}

.footer__contact-item {
  margin-bottom: var(--space-2);
}

.footer__address {
  font-style: normal;
}


/* --------------------------------------------------------------------------
   5. Navigation active indicator — underline on active page
   aria-current="page" targets current nav link
   -------------------------------------------------------------------------- */

.nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.nav__mobile-link[aria-current="page"] {
  color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   6. Hamburger open state — JS toggles .is-open on button
   -------------------------------------------------------------------------- */

.nav__hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav__hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* --------------------------------------------------------------------------
   7. Fade-in on scroll — initial hidden state
   JS adds .is-visible to trigger the transition defined in style.css
   -------------------------------------------------------------------------- */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children of a fade-in parent */
.fade-in:nth-child(2) { transition-delay: 0.1s; }
.fade-in:nth-child(3) { transition-delay: 0.2s; }
.fade-in:nth-child(4) { transition-delay: 0.3s; }


/* --------------------------------------------------------------------------
   8. Section header spacing normalization
   -------------------------------------------------------------------------- */

.section-header {
  margin-bottom: var(--space-12);
}

.section-header .section-subtitle {
  margin-top: var(--space-3);
}


/* --------------------------------------------------------------------------
   9. Responsive — Logo strip wraps cleanly on mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .logo-strip__item--placeholder {
    width: 130px;
    height: 60px;
  }

}


/* --------------------------------------------------------------------------
   End of components.css
   ========================================================================== */