/* ============================================================================
   custom.css — static-only helpers that replace React runtime behavior.
   Loaded AFTER site.css so it can layer small vanilla additions on top.
   (site.css is generated by scripts/build-css.sh; keep hand-written rules here.)
   ============================================================================ */

/* --- CustomTitle responsive SVG banner (replaces JS width switching) --------
   The React CustomTitle swapped between 3 SVGs at <480 / <768 / else.
   We render all three and reveal one per breakpoint via CSS. */
.svg-container .ct-medium,
.svg-container .ct-small {
  display: none;
}
@media (max-width: 767px) {
  .svg-container .ct-large { display: none; }
  .svg-container .ct-medium { display: block; }
}
@media (max-width: 479px) {
  .svg-container .ct-medium { display: none; }
  .svg-container .ct-small { display: block; }
}

/* --- antd base parity ------------------------------------------------------
   antd injected these base styles at runtime; component SCSS only *overrides*
   them (e.g. .ant-btn-variant-outlined hover, .ant-card-body padding). We
   removed antd, so reproduce the v5 defaults for the Button/Card we use.
   Component SCSS (already in site.css) still layers on top of these. */
.ant-btn {
  outline: none;
  position: relative;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  height: 32px;
  padding: 4px 15px;
  border-radius: 6px;
  border: 1px solid #d9d9d9;
  background: #ffffff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02);
}
.ant-btn > span {
  display: inline-block;
}
.ant-btn:hover {
  color: #4096ff;
  border-color: #4096ff;
}
.ant-btn:active {
  color: #0958d9;
  border-color: #0958d9;
}

.ant-card {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  background: #ffffff;
  border-radius: 8px;
}
.ant-card-cover > * {
  display: block;
  width: 100%;
}
.ant-card-cover img {
  border-radius: 8px 8px 0 0;
}
.ant-card-body {
  padding: 24px;
}
.ant-card-body::before,
.ant-card-body::after {
  content: "";
  display: table;
}
.ant-card-body::after {
  clear: both;
}

/* antd Input base (careers form). Component SCSS targets
   .ant-input-outlined (with the dev-hash class) for border/radius/bg. */
.ant-input {
  box-sizing: border-box;
  margin: 0;
  padding: 4px 11px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  background-color: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
  width: 100%;
}
.ant-input-lg {
  padding: 7px 11px;
  font-size: 16px;
  border-radius: 8px;
}
.ant-input::placeholder {
  color: rgba(0, 0, 0, 0.25);
}
.ant-input:focus,
.ant-input:hover {
  border-color: #4096ff;
  outline: none;
}

/* antd Form / Form.Item base */
.ant-form-item {
  box-sizing: border-box;
  margin: 0 0 24px;
}
.ant-form-item:last-child {
  margin-bottom: 0;
}

/* antd Divider base (careers Work/Life dividers). Component SCSS sets
   height/colour/width on .ant-divider-horizontal. */
.ant-divider {
  box-sizing: border-box;
  margin: 0;
  border-block-start: 1px solid rgba(5, 5, 5, 0.06);
}

/* --- Vanilla multi-item slider (Phase 5) -----------------------------------
   Replaces react-slick (CustomerCarousel), swiper (CustomCard mobile) and the
   antd Carousel (home logos, facility rows, careers "Co-worker Speak").
   js/main.js injects .vslider__viewport / __track / __arrow / __dots and steps
   the track with a pixel transform. These rules only lay out that scaffold;
   the slides themselves keep their original classes so the look is unchanged. */
.vslider__viewport {
  overflow: hidden;
  width: 100%;
}
.vslider__track {
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}
.vslider__slide {
  flex: 0 0 auto;
  box-sizing: border-box;
}
/* Injected prev/next arrows (home + customer carousels). The facility carousel
   keeps its own .carousel-btn markup and is not given these. */
.vslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #0e375d;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.vslider__arrow:hover { opacity: 0.75; }
.vslider__arrow--prev { left: 5px; }
.vslider__arrow--next { right: 5px; }
.vslider__arrow[disabled] { opacity: 0.25; cursor: default; }
/* Pagination dots (home, careers, card carousels) */
.vslider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.vslider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(14, 55, 93, 0.25);
  cursor: pointer;
}
.vslider__dot.is-active { background: #0e375d; }

/* Careers "Co-worker Speak": before JS runs, show only the first slide so the
   page never flashes all slides stacked. Once initialised the slider lays the
   slides side by side in its track (main.js clears this via inline display). */
[data-speak-carousel]:not(.vslider--ready) .carousel-slide:not(:first-child) {
  display: none;
}

/* it-solutions cards: the mobile carousel injected from the grid. Hidden on
   desktop (the static .card-container grid shows there); shown <=1024 where the
   grid is display:none. */
[data-card-carousel] { display: none; }
@media (max-width: 1024px) {
  [data-card-carousel] { display: block; }
}

/* --- Holisol Hyperlocal process (replaces the React responsive DOM split) ---
   React rendered EITHER the desktop right-side panel OR per-item mobile
   accordion content, never both. We render both and gate the mobile-only
   accordion content on desktop. (The component SCSS already hides
   .right-side-container and toggles .mobile-content/.show at <=768px.) */
@media (min-width: 769px) {
  .holisol-container .mobile-content { display: none; }
  /* arrows are a mobile-only affordance in the React source */
  .holisol-container .holisol-btn .arrow { display: none; }
}
@media (max-width: 768px) {
  /* on mobile the expanded (active) item hides its arrow */
  .holisol-container .holisol-btn.active .arrow { display: none; }
}