/* Keep product-card content aligned when titles and copy have different lengths. */
/* Keep the footer logo at the left edge on narrow screens. */
@media (max-width: 767px) {
  footer > div:first-of-type > div:first-child > img {
    align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }
}

/* Lift the brand navy slightly so the blue logo remains distinct on dark panels. */
[class~="bg-[#0A2035]"] {
  background-color: #0C2136 !important;
}

:root {
  --color-primary: #0C2136;
}

/* Keep the supply-flow step numbers legible even with the global navy override. */
.timeline-step-number {
  background-color: #f1f5f9 !important;
  color: #0C2136 !important;
}

/* Keep home cards on one horizontal row while exposing three/four at desktop size. */
.home-services-grid,
.home-products-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}

.home-services-grid::-webkit-scrollbar,
.home-products-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.home-drag-scroll {
  cursor: grab;
  user-select: none;
}

.home-drag-scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.home-scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  color: #64748b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Keep the terminal directory in one draggable row, with five hubs visible on desktop. */
.map-directory-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}

.map-directory-grid::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.map-directory-grid::after {
  content: "";
  flex: 0 0 calc(18% - 0.625rem);
}

.map-directory-grid > button {
  flex: 0 0 82%;
  min-width: 0;
  scroll-snap-align: start;
}

/* Hub tooltips follow their marker, but counter-scale so zoom never changes their size. */
.map-hub-tooltip {
  width: max-content;
  min-width: 210px;
  max-width: min(270px, 78vw);
  white-space: normal !important;
  padding: 0.75rem 1rem !important;
  gap: 0.3rem !important;
  text-align: center;
  scale: var(--map-inverse-scale, 1);
  transform-origin: bottom center;
}

.map-hub-tooltip > span:first-child {
  font-size: 13px !important;
  line-height: 1.3;
}

.map-hub-tooltip > span:nth-child(2) {
  font-size: 12px !important;
}

.map-hub-tooltip > span:nth-child(3) {
  font-size: 10px !important;
  line-height: 1.35;
}

@media (min-width: 640px) {
  .map-directory-grid > button {
    flex-basis: calc((100% - 0.5rem) / 2);
  }

  .map-directory-grid::after {
    flex-basis: calc(50% + 0.25rem);
  }
}

@media (min-width: 1024px) {
  .map-directory-grid > button {
    flex-basis: calc((100% - 2.5rem) / 5);
  }

  .map-directory-grid::after {
    flex-basis: calc(80% + 0.5rem);
  }
}

.home-scroll-arrow {
  color: #DD1F29;
  animation: home-scroll-cue 1.2s ease-in-out infinite alternate;
}

.home-scroll-arrow:last-child {
  animation-direction: alternate-reverse;
}

@keyframes home-scroll-cue {
  from { transform: translateX(-3px); opacity: 0.55; }
  to { transform: translateX(3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-arrow { animation: none; }
}

.home-services-grid > .density-card,
.home-products-grid > .density-card {
  flex: 0 0 88%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .home-services-grid > .density-card,
  .home-products-grid > .density-card {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (min-width: 1024px) {
  .home-services-grid > .density-card {
    flex-basis: calc((100% - 2.5rem) / 3);
  }

  .home-products-grid > .density-card {
    flex-basis: calc((100% - 3rem) / 4);
  }
}

@media (min-width: 768px) {
  .catalog-product-grid > .density-card {
    height: 100%;
  }

  .catalog-product-grid > .density-card > .p-4 {
    padding: 0.875rem;
    justify-content: flex-start;
    gap: 0.75rem;
  }

  .catalog-product-grid > .density-card > .p-4 > div:first-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
  }

  .catalog-product-grid > .density-card > .p-4 > div:first-child > button {
    margin: 0;
  }

  .catalog-product-grid > .density-card > .p-4 > div:first-child > .font-mono {
    align-items: flex-start;
    min-height: 0;
    margin: 0;
  }

  .catalog-product-grid > .density-card > .p-4 > div:first-child > p {
    min-height: 3.375rem;
    margin: 0;
  }

  .catalog-product-grid > .density-card > .p-4 > div:first-child > .bg-slate-50\/70 {
    box-sizing: border-box;
    height: auto;
    min-height: 0;
    margin: 0;
  }
}