/* =============================================
   FOOTER — COCLA
   Clean / Compact / Chantier-Inspired
   COCLA Colours Preserved
   ============================================= */

.footer {
  background-color: var(--deep-space-blue);
  color: var(--vanilla-custard);
  padding: 3.5rem 0 0;
  margin: 0;
  border-radius: 0;
  position: relative;
  z-index: 3;
  font-family: 'Raleway', sans-serif;
}


/* =============================================
   MAIN FOOTER GRID
   ============================================= */

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;

  width: 90%;
  max-width: 1200px;

  margin: 0 auto;
  padding: 0 0 2.5rem;

  border-bottom: 1px solid rgba(234, 226, 183, 0.14);

  box-sizing: border-box;
}


/* =============================================
   BRAND
   ============================================= */

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}


/* =============================================
   LOGO
   ============================================= */

.footer__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;

  text-decoration: none;

  font-family: 'Raleway', sans-serif;
}


/* Actual logo image */

.footer__logo-image {
    width: 86px;
    height: 86px;

    max-width: 86px;
    max-height: 86px;

    min-width: 0;
    min-height: 0;

    display: block;

    object-fit: contain;
    object-position: left center;

    flex: 0 0 86px;
}


/* If placeholder is still used somewhere */

.footer__logo-placeholder {
  width: 72px;
  height: 72px;

  flex-shrink: 0;

  background-color: var(--vanilla-custard);

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Raleway', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;

  color: var(--deep-space-blue);

  box-sizing: border-box;
}


/* =============================================
   CORPORATION NAME
   ============================================= */

.footer__logo-name {
  font-family: 'Raleway', sans-serif;

  font-size: 1rem;
  line-height: 1.3;

  font-weight: 700;

  color: var(--sunflower-gold);

  letter-spacing: 0;

  max-width: 230px;
}

.footer__logo-name span {
  font-family: 'Raleway', sans-serif;
  color: var(--sunflower-gold);
}


/* =============================================
   TAGLINE
   ============================================= */

.footer__tagline {
  font-family: 'Raleway', sans-serif;

  font-size: 0.9rem;
  line-height: 1.55;

  font-weight: 400;

  color: rgba(234, 226, 183, 0.78);

  max-width: 300px;

  margin: 0;
}


/* =============================================
   FOOTER COLUMNS
   ============================================= */

.footer__col-title {
  font-family: 'Raleway', sans-serif;

  font-size: 0.72rem;
  line-height: 1.4;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--sunflower-gold);

  margin: 0 0 1rem;
}


/* =============================================
   FOOTER LINKS
   ============================================= */

.footer__links {
  display: flex;
  flex-direction: column;

  gap: 0.45rem;

  margin: 0;
  padding: 0;
}

.footer__link {
  font-family: 'Raleway', sans-serif;

  font-size: 0.9rem;
  line-height: 1.45;

  font-weight: 400;

  color: rgba(234, 226, 183, 0.78);

  text-decoration: none;

  display: inline-flex;
  align-items: center;

  transition: var(--transition-smooth);
}

.footer__link:hover {
  color: var(--vanilla-custard);
  transform: translateX(3px);
}


/* =============================================
   CONTACT
   ============================================= */

.footer__contact-item {
  margin: 0 0 0.8rem;
}

.footer__contact-item:last-child {
  margin-bottom: 0;
}

.footer__contact-label {
  font-family: 'Raleway', sans-serif;

  font-size: 0.65rem;
  line-height: 1.3;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--sunflower-gold);

  display: block;

  margin: 0 0 0.2rem;
}

.footer__contact-value {
  font-family: 'Raleway', sans-serif;

  font-size: 0.9rem;
  line-height: 1.5;

  font-weight: 400;

  color: var(--vanilla-custard);

  margin: 0;
}

.footer__contact-value a {
  font-family: 'Raleway', sans-serif;

  color: var(--vanilla-custard);

  text-decoration: none;

  transition: var(--transition-smooth);
}

.footer__contact-value a:hover {
  color: var(--sunflower-gold);
}


/* =============================================
   BOTTOM BAR
   ============================================= */

.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 90%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 1.2rem 0;

  box-sizing: border-box;
}

.footer__copyright {
  font-family: 'Raleway', sans-serif;

  font-size: 0.72rem;
  line-height: 1.4;

  font-weight: 400;

  color: rgba(234, 226, 183, 0.45);

  margin: 0;
}


/* =============================================
   BOTTOM LINKS
   ============================================= */

.footer__bottom-links {
  display: flex;
  align-items: center;

  gap: 1.4rem;
}

.footer__bottom-link {
  font-family: 'Raleway', sans-serif;

  font-size: 0.72rem;
  line-height: 1.4;

  font-weight: 400;

  color: rgba(234, 226, 183, 0.45);

  text-decoration: none;

  transition: var(--transition-smooth);
}

.footer__bottom-link:hover {
  color: var(--sunflower-gold);
}


/* =============================================
   TABLET
   ============================================= */

@media (max-width: 900px) {

  .footer {
    padding-top: 3rem;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer__brand {
    grid-column: 1 / -1;
  }
}


/* =============================================
   MOBILE
   ============================================= */

@media (max-width: 520px) {

  .footer {
    padding-top: 2.75rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;

    gap: 1.75rem;

    padding-bottom: 2.25rem;
  }

  .footer__brand {
    grid-column: auto;
  }

  .footer__logo img,
  .footer__logo-placeholder {
    width: 64px;
    height: 64px;
  }

  .footer__logo-name {
    font-size: 0.95rem;f
  }

  .footer__tagline {
    max-width: 100%;
  }

  .footer__bottom {
    flex-direction: column;

    gap: 0.75rem;

    text-align: center;

    padding: 1.25rem 0;
  }

  .footer__bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
  }
}