/* =========================================================
   Carpet.alpin.group — Custom Styles
   Brand Blue: #004A7F
   Notes:
   - Tailwind CDN is used for most layout/spacing.
   - This file adds the hero background, sticky nav, mobile bar,
     and overrides Tailwind "blue" utilities to match brand.
========================================================= */

:root{
  --brand: #004A7F;
  --brand-hover: #003b66;
  --brand-deep: #003055;         /* for dark sections if needed */
  --brand-light: rgba(0, 74, 127, 0.12);
}

body{
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Hero background image + dark overlay */
.hero-gradient{
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
    url('/assets/img/photo-1504151864552-57020b6b876b.avif')
    center/cover no-repeat;
}

/* Sticky navigation */
.sticky-nav{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.92);
}

/* Mobile bottom action bar */
.mobile-action-bar{
  display: none;
}
@media (max-width: 768px){
  .mobile-action-bar{
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 100;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.10);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* prevent mobile bar covering content */
  body{ padding-bottom: 76px; }
}

/* iPhone touch feedback */
.service-card:active{
  transform: scale(0.98);
}

/* =========================================================
   BRAND COLOR OVERRIDES FOR TAILWIND "BLUE" CLASSES
   (So you don't need to replace every class in HTML)
========================================================= */

/* Background blues */
.bg-blue-600,
.bg-blue-700,
.bg-blue-800{
  background-color: var(--brand) !important;
}
.bg-blue-900{
  background-color: var(--brand-deep) !important;
}

/* Hover background blues */
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-800:hover{
  background-color: var(--brand-hover) !important;
}

/* Text blues */
.text-blue-600,
.text-blue-700,
.text-blue-800{
  color: var(--brand) !important;
}

/* Special case: Tailwind text-blue-900 used on light button */
.text-blue-900{
  color: #06243a !important;
}

/* Border blues */
.border-blue-600,
.border-blue-700,
.border-blue-800{
  border-color: var(--brand) !important;
}

/* Light blue background utility (used in service icon circles) */
.bg-blue-100{
  background-color: var(--brand-light) !important;
}

/* When service icon circle becomes blue on hover */
.group-hover\:bg-blue-600{
  background-color: var(--brand) !important;
}
.group-hover\:text-white{
  color: #fff !important;
}

/* Optional: links with hover text-blue-600 */
.hover\:text-blue-600:hover{
  color: var(--brand) !important;
}