/* Bids for Business © 2025 | All rights reserved */
/* Digital Fingerprint: b4b-industries-css-secure-v1 */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Scroll progress */
#scroll-progress{position:fixed;top:0;left:0;height:4px;width:0;z-index:60;background:#2563eb;transition:width .2s}

/* Header link underline (match Post Job) */
a.nav-link{position:relative;text-decoration:none}
a.nav-link::after{content:"";position:absolute;width:0%;height:2px;bottom:0;left:0;background-color:#2563eb;transition:width .3s ease}
a.nav-link:hover::after{width:100%}

/* Navbar shrink (match How It Works / Post Job behavior) */
.navbar-scrolled{background:rgba(255,255,255,.95)}
#main-navbar{transition:padding 200ms ease}
#main-navbar.navbar-shrink{padding-top:.15rem !important;padding-bottom:.15rem !important}
@media (min-width:1024px){#main-navbar.navbar-shrink{padding-top:0 !important;padding-bottom:0 !important}}
.navbar-logo{transition:all .3s ease}
.navbar-logo.small{width:5rem !important}

/* Hamburger */
.hamburger span{display:block;height:2px;background:#2563eb;transition:all .3s ease}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px, -5px)}

/* Chips */
.chip{
  padding:.4rem .8rem;border:1px solid #cde; border-radius:9999px;
  background:#fff; color:#1d4ed8; font-weight:600; font-size:.9rem;
}
.chip.active,.chip:hover{background:#eff6ff}

/* Card grid — flip on hover (same feel as carousel cards) */
.industry-card{width:100%;height:320px;perspective:1000px}
.card-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .75s ease-in-out;will-change:transform;
}
/* Desktop hover flip */
@media (hover:hover) and (pointer:fine){
  .industry-card:hover .card-inner{transform:rotateY(180deg);backface-visibility:hidden}
}

/* Mobile: flip is controlled by JS via .is-flipped */
.industry-card.is-flipped .card-inner{transform:rotateY(180deg);}

/* iOS tap reliability */
.card-front, .card-back { -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.card-inner { -webkit-transform-style:preserve-3d; transform-style:preserve-3d; }
.card-back { pointer-events:auto; }
.card-front,.card-back{
  position:absolute;inset:0;border-radius:0.75rem;overflow:hidden;display:flex;
  justify-content:center;align-items:center;backface-visibility:hidden;transform-style:preserve-3d;
}
.card-front{background:#fff}
.card-back{
  background:#2563eb;color:#fff;padding:1.2rem;text-align:center;transform:rotateY(180deg) translateZ(0);
}
.card-back-content h3{font-size:1.25rem;font-weight:800;color:#fff}
.card-back-content p{font-size:1rem;line-height:1.6;font-weight:500;color:#fff}

.carousel-label{
  position:absolute;bottom:0;width:100%;
  background:rgba(0,0,0,.5);color:#fff;text-align:center;font-size:1rem;padding:.35rem;
}

/* Responsive */
@media (max-width:768px){
  .industry-card{height:260px}
  .card-back-content p{font-size:.85rem}
  .carousel-label{font-size:.9rem}
}
/* Mobile logo sizing + extra shrink on scroll */
@media (max-width:640px){
  /* Base (resting) mobile logo */
  #main-navbar .navbar-logo{
    width: 6rem !important;
    height: auto;
  }

  /* Shrink header AND logo when scrolled */
  #main-navbar.navbar-shrink{
    padding-top: 0 !important;     
    padding-bottom: 0 !important;
    min-height: 34px;             
  }
  #main-navbar.navbar-shrink .navbar-logo{
    width: 4rem !important;      
    height: auto;
    transform:none !important;
  }
}
/* Mobile strapline (shows only after scroll shrink) */
.mobile-strapline {
  font-size: 0.65rem;
  font-weight: 600;
  color: #2563eb;
  margin-left: 0.2rem;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

/* Default hidden on mobile */
@media (max-width: 768px) {
  .mobile-strapline { display: none; }
  #main-navbar.navbar-shrink .mobile-strapline {
    display: inline;
    opacity: 1;
  }
}
/* Extra tighten on scroll for mobile */
@media (max-width:640px){
  #main-navbar.navbar-shrink .mobile-strapline {
    margin-left: 0.2rem !important;  /* 👈 tweak this to taste: 0.2–0.3rem */
  }
}