/* Sitewide overrides: force white lettering and arrow icons */
/* Updated: CPI Logo sizing fixes - 2025-10-13 */

/* Bebas Neue font (self-hosted). Drop files in /public/assets/fonts/bebas-neue/ */
@font-face {
  font-family: "Bebas Neue";
  src:
    url("/assets/fonts/bebas-neue/BebasNeue-Regular.woff2") format("woff2"),
    url("/assets/fonts/bebas-neue/BebasNeue-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Utility class to apply Bebas Neue */
.font-bebas {
  font-family: "Bebas Neue", sans-serif !important;
}

/* Global typography override (apply Bebas Neue everywhere) */
html,
body {
  font-family: "Bebas Neue", sans-serif !important;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
li,
label,
input,
textarea,
select,
button,
small,
strong,
em {
  font-family: "Bebas Neue", sans-serif !important;
}

/* Preserve Font Awesome icon fonts */
.fa,
.fa-solid,
.fa-regular,
.fa-brands,
[class^="fa-"],
[class*=" fa-"] {
  font-family: "Font Awesome 6 Free" !important;
}
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
}

/* Buttons */
.theme-btn,
.theme-btn:hover,
.theme-btn:focus {
  color: #fff !important;
}
.theme-btn i,
.theme-btn:hover i,
.theme-btn:focus i {
  color: #fff !important;
}
.theme-btn svg,
.theme-btn:hover svg,
.theme-btn:focus svg {
  fill: #fff !important;
}

/* CTA Section - Override button hover to black background */
.cta-section .cta-data .theme-btn:hover {
  background-color: #000 !important;
  color: #fff !important;
}
.cta-section .cta-data .theme-btn:hover i {
  color: #fff !important;
}

/* Header extras button variant */
.desktop-nav .nav-bar .extras .theme-btn,
.desktop-nav .nav-bar .extras .theme-btn:hover,
.desktop-nav .nav-bar .extras .theme-btn:focus {
  color: #fff !important;
}
.desktop-nav .nav-bar .extras .theme-btn svg,
.desktop-nav .nav-bar .extras .theme-btn:hover svg,
.desktop-nav .nav-bar .extras .theme-btn:focus svg {
  fill: #fff !important;
}

/* Arrows in sliders/carousels and CTAs */
.owl-nav button i,
.featured-slider-one .owl-nav button i,
.team-style-one .team-slider-nav button i,
.project-completed .prj-slider-nav button i,
.cta-section .theme-btn i,
.footer-style-one .theme-btn i {
  color: #fff !important;
}

/* Ensure the button text/glyph itself is white (some sliders render arrows as button text) */
.owl-nav button,
.team-style-one .team-slider-nav button,
.project-completed .prj-slider-nav button {
  color: #fff !important;
}

/* Fix CTA image overlapping into left column */
.cta-section .cta-data figure img {
  margin-left: 0 !important;
  width: 100% !important;
  height: auto !important;
}
.cta-section .cta-data figure {
  position: relative;
}
.cta-section {
  overflow: visible !important; /* allow blue shape to extend vertically */
}
.cta-section .cta-data figure:before {
  left: 50% !important; /* center the skew background so it doesn't intrude */
  width: 550px !important; /* match contact form width for prominent display */
  height: 120% !important; /* extend vertically beyond section boundaries */
  bottom: -10% !important; /* push down to extend below */
  /* Extended blue background - reapplied */
}

/* Accordion headers (blue bars) */
.core-features .accordion-button,
.acc2 .accordion-item button,
.core-features button.accordion-button span {
  color: #fff !important;
}

/* Navigation hover states - white text on all pages */
.desktop-nav .nav-bar ul > li:hover > a,
.desktop-nav .nav-bar ul > li.menu-item-has-children:hover > a,
.desktop-nav .nav-bar ul > li > a:hover,
.mobile-nav ul > li:hover > a,
.mobile-nav ul > li.menu-item-has-children:hover > a,
.mobile-nav ul > li > a:hover {
  color: #fff !important;
}

/* Sub-menu hover states */
.desktop-nav ul.sub-menu li a:hover,
.mobile-nav ul.sub-menu li a:hover {
  color: #fff !important;
}

/* CPI Logo sizing - more specific and force proper dimensions */
.header-logo figure img,
.header-logo img,
.res-log img,
.mobile-nav .res-log img {
  max-width: 155px !important;
  width: 155px !important;
  height: auto !important;
  max-height: 57px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Ensure the logo containers don't break layout */
.header-logo figure,
.res-log {
  width: 155px !important;
  max-width: 155px !important;
  height: 57px !important;
  max-height: 57px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Service pages - specific section hover states */

/* Quality Assurance Process - Contract Manufacturing */
.service-detail-first .innovation ul li:hover p,
.service-detail-first .innovation ul li:hover i {
  color: #fff !important;
}

/* Industries Served - Contract Labor */
.service-detail-first .innovation ul li:hover p,
.service-detail-first .innovation ul li:hover i {
  color: #fff !important;
}

/* Component Specialization - Machining */
.service-detail-first .innovation ul li:hover p,
.service-detail-first .innovation ul li:hover i {
  color: #fff !important;
}

/* Ensure all innovation/checklist items have white text on hover */
.service-detail-first .innovation ul li:hover {
  color: #fff !important;
}
.service-detail-first .innovation ul li:hover * {
  color: #fff !important;
}

/* History cards (About Style Two) - make the round button arrow white */
.history-style-one .history-data a i {
  color: #fff !important;
}

/* Make restored card-arrow look like the original circular CTA */
.history-style-one .history-data .card-arrow {
  position: absolute;
  bottom: 45px;
  left: 50px;
  width: 95px;
  height: 95px;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #02499b; /* matches themed blue */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease;
  z-index: 2;
}
.history-style-one .history-data .card-arrow i {
  font-size: 30px;
  transform: rotate(45deg);
  color: #fff;
  transition: transform 0.25s ease;
}
.history-style-one .history-data:hover .card-arrow {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.history-style-one .history-data:hover .card-arrow i {
  transform: rotate(45deg) translate(0, -5px);
}

/* Navbar theme toggle icon (replace missing sun.png image) */
.desktop-nav .nav-bar .extras #theme-icon,
.mobile-nav .nav-bar .extras #theme-icon,
#theme-icon {
  font-size: 20px !important;
  color: #fff !important;
  display: inline-block !important;
}

/* Space nav extras and align center */
.desktop-nav .nav-bar .extras {
  display: flex !important;
  align-items: center !important;
  gap: 35px !important; /* spacing between hamburger and CTA */
  margin-left: 40px !important; /* spacing between contact link and extras */
}

/* Related Services h3 styling */
.related-services .related-service-item h3,
.related-services .related-service-item h3 a {
  color: #000 !important;
}

/* Tighten nav item padding to prevent wrap/overlap on narrower widths */
.desktop-nav .nav-bar > ul > li {
  padding: 28px 0 !important;
}
.desktop-nav .nav-bar > ul > li > a {
  margin: 0 12px !important;
}

/* Ensure dropdown caret uses SVG only; suppress stray before content on anchors */
.desktop-nav .nav-bar > ul > li > a:before {
  display: inline-block;
}
.desktop-nav .nav-bar > ul > li > a:after {
  content: none !important;
}

/* Contact accordion contrast: black when collapsed, white when expanded */
/* Use higher specificity to beat theme rule `.acc2 .accordion-item button { color: #fff !important; }` */
.acc2 .accordion-item button,
.acc2 .accordion-button,
.acc2 .accordion-item .accordion-button,
.acc2 .accordion-item button.collapsed,
.acc2 .accordion-button.collapsed {
  color: #000 !important;
}
.acc2 .accordion-item .accordion-button:not(.collapsed),
.acc2 .accordion-button:not(.collapsed) {
  color: #fff !important;
}

/* Match index FAQ blue for expanded state across service pages */
.acc2 .accordion-button:not(.collapsed) {
  background-color: #02499b !important;
  border-color: #02499b !important;
}
.acc2 .accordion-button:focus {
  border-color: #02499b !important;
  box-shadow: none !important;
}

/* Hide desktop hamburger menu on desktop screens */
@media (min-width: 1201px) {
  .desktop-nav .nav-bar .extras #desktop-menu {
    display: none !important;
  }
}

/* Reduce manufacturing capabilities section height without breaking carousel */
.project-completed {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* Remove blue stripe overlays from project carousel images */
.project-completed .proj-image figure:before,
.project-completed .proj-image figure:after {
  display: none !important;
}

/* Ensure black background in hero (featured-section-three) extends beneath bottom caption */
.featured-section-three {
  height: auto !important; /* allow section to grow with content */
  padding-bottom: 60px !important; /* add room for the bottom line of text */
}

/* Our Capabilities ticker visuals */
.about-how-it-works .capabilities-ticker {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background-color: #012f65;
  aspect-ratio: 13 / 4.6;
  min-height: 320px;
  margin-bottom: 40px;
}

.about-how-it-works .capabilities-track {
  display: flex;
  height: 100%;
  width: 100%;
  transform: translateX(0);
  transition: transform 1.15s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: transform;
}

.about-how-it-works .capability-slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  opacity: 0;
  transition: opacity 1.05s ease-in-out;
}

.about-how-it-works .capability-slide.is-active {
  opacity: 1;
}

.about-how-it-works .capability-slide picture,
.about-how-it-works .capability-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.about-how-it-works .capability-card {
  background-color: #ffffff !important;
  border: 1px solid rgba(2, 73, 155, 0.12) !important;
  color: #0a0a0a !important;
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    color 0.65s ease,
    background-color 0.65s ease,
    border-color 0.65s ease;
  cursor: pointer;
}

.about-how-it-works .capability-card h3,
.about-how-it-works .capability-card p {
  color: inherit !important;
}

.about-how-it-works .capability-card .y-box {
  background-color: #02499b;
  color: #fff !important;
  border-radius: 16px;
  box-shadow: none !important;
  transition:
    background-color 0.45s ease,
    color 0.45s ease;
}

.about-how-it-works .capability-card.is-active,
.about-how-it-works .capability-card:hover,
.about-how-it-works .capability-card:focus-within {
  background-color: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.about-how-it-works .capability-card.is-active h3,
.about-how-it-works .capability-card.is-active p,
.about-how-it-works .capability-card:hover h3,
.about-how-it-works .capability-card:hover p,
.about-how-it-works .capability-card:focus-within h3,
.about-how-it-works .capability-card:focus-within p {
  color: #ffffff !important;
}

.about-how-it-works .capability-card:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* Where We Work section - ensure location data text is white and properly sized */
.where-we-work .first .tab-data .map-pin .location .data p {
  color: #fff !important;
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

@media (max-width: 767.98px) {
  .about-how-it-works .capabilities-ticker {
    aspect-ratio: auto;
    min-height: 240px;
  }

  .about-how-it-works .capability-card {
    margin-bottom: 20px;
    transform: none !important;
  }
}