/* Site-specific overrides for ALDHEM */

/* Brand palette: deep blue + vivid orange */
:root {
  --primary-color: #004771;
  --accent-color: #F97316;
  --divider-color: #00477130;
  --overlay-color: rgba(0, 71, 113, 0.7);
}

/* Constrain logo size in header */
header.main-header .navbar-brand img {
  height: 56px;
  width: auto;
  display: block;
}

/* LinkedIn pill in the white strip above the header, top-right */
.topbar-social {
  position: absolute;
  top: 8px;
  right: 56px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 13px;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.topbar-social:hover {
  background: var(--accent-color);
  color: var(--white-color);
  transform: translateY(-1px);
}

/* Trigger the mobile (hamburger) view at ≤1499px (custom breakpoint above
   Bootstrap's xl). Overrides Bootstrap's navbar-expand-xl which would
   otherwise force the desktop menu visible at ≥1200px. */
@media only screen and (max-width: 1499px) {
  header.main-header {
    margin: 0;
    border-bottom: 0;
  }

  /* Sticky variant uses a different divider colour — also remove it */
  header.main-header .header-sticky.active {
    border-bottom: 0;
  }

  .navbar {
    padding: 20px 0;
  }

  /* Outranks Bootstrap's `.navbar-expand-xl .navbar-collapse { display: flex !important }` */
  header.main-header .navbar-collapse.main-menu {
    display: none !important;
  }

  .navbar-toggle,
  .responsive-menu {
    display: block;
  }

  /* Hero + light bg sections still had desktop side margins/radius in this range,
     which exposed white body strips. Match the full-bleed style used on mobile. */
  .hero.bg-section {
    margin: 0;
    margin-top: -103px;
    border-radius: 0;
  }

  .light-bg-section {
    margin: 0;
  }

  /* White strip above the header is gone — park the LinkedIn pill next to the burger */
  .topbar-social {
    top: 30px;
    right: 70px;
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
}

/* Constrain logo size in footer */
.about-footer .footer-logo img {
  height: 64px;
  width: auto;
  display: block;
}

/* Project cards: hide title and overlay until hover */
.project-item .project-body {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}

.project-item:hover .project-body {
  opacity: 1;
  transform: translateY(0);
}

.project-item .project-image a::before {
  opacity: 0;
}

.project-item:hover .project-image a::before {
  opacity: 1;
}

/* Touch devices: hover doesn't exist, so reveal text + overlays permanently. */
@media (hover: none) {
  /* Service cards */
  .service-body {
    transform: translateY(0) !important;
    bottom: 20px !important;
  }

  .service-content {
    opacity: 1 !important;
  }

  /* Project cards */
  .project-item .project-body {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .project-item .project-image a::before {
    opacity: 1 !important;
  }
}

/* Testimonials: align cards to equal height */
.our-testimonial .swiper-wrapper {
  align-items: stretch;
}

.our-testimonial .swiper-slide {
  height: auto;
  display: flex;
}

.our-testimonial .testimonial-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.our-testimonial .testimonial-header {
  flex: 1 0 auto;
}

/* Keep the about-section phone number on a single line */
.about-support-content {
  width: auto;
}

.about-support-content h3 {
  white-space: nowrap;
}

/* Contact section: restore bottom padding, white links, orange icons */
.contact-sidebar {
  padding-bottom: 40px;
}

.contact-info-content h3 a:not(.btn-default) {
  color: var(--white-color);
}

.contact-info-content h3 a:not(.btn-default):hover {
  color: var(--accent-color);
}

.contact-info .icon-box img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(63%) saturate(2999%) hue-rotate(355deg) brightness(101%) contrast(96%);
}

/* Footer "Contactez-nous" block: white text incl. links, orange icons */
.footer-contact-box .footer-info-box a,
.footer-contact-box .footer-info-box p {
  color: var(--white-color);
}

.footer-contact-box .footer-info-box a:hover {
  color: var(--accent-color);
}

.footer-contact-box .footer-info-box .icon-box img {
  /* Recolor monochrome PNG icons to the brand orange #F97316 */
  filter: brightness(0) saturate(100%) invert(54%) sepia(63%) saturate(2999%) hue-rotate(355deg) brightness(101%) contrast(96%);
}

/* Magic cursor: brand orange instead of yellow/white */
.cb-cursor:before {
  background: var(--accent-color);
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion,
  .cb-cursor.-opaque {
    mix-blend-mode: normal;
  }

  .cb-cursor.-exclusion:before,
  .cb-cursor.-opaque:before {
    background: var(--accent-color);
  }
}