@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  --primary-color: #032326;
  --secondary-color: #0a6d76;
  --default-font-family: "Roboto", system-ui, sans-serif;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  line-height: 1.5;
  font-family: var(--default-font-family);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #f7f8f1;
  color: #000000;
}

/* Prevent horizontal overflow on all viewports */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ── Search box — pill border on both sides ──────────────────────────────
   Bootstrap's .input-group strips inner border-radius at the join edge.
   Override so the icon span and input together form a single rounded pill. */
.input-group:has(.hero-input) {
  border-radius: 6px;
  overflow: hidden;
  border: none;
}
.input-group:has(.hero-input) .input-group-text {
  border-radius: 6px 0 0 6px !important;
  border: none !important;
}
.input-group:has(.hero-input) .hero-input {
  border-radius: 0 6px 6px 0 !important;
  border: none !important;
}

/* Join / Sign In — match the search bar height via vertical padding only,
   no flex-stretch so the header row stays unaffected */
.navbarBg .btn-join {
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

/* Box-sizing baseline — prevents padding from breaking widths */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Images never overflow their container */
img {
  max-width: 100%;
  height: auto;
}

/* Logo — sized via CSS so it's consistent everywhere */
.site-logo {
  max-height: 44px;
  width: auto;
  display: block;
}

@media (max-width: 767.98px) {
  .site-logo { max-height: 34px; }
}

/* ============================================================
   MOBILE RESPONSIVE — global overrides
   (loaded last so these win without needing !important everywhere)
   ============================================================ */

@media (max-width: 991.98px) {
  /* Reduce base font size by ~2px (16px → 14px) so all rem/em values
     scale down proportionally across the whole page */
  html {
    font-size: 14px;
  }

  /* Hide summary blocks — too detailed for small screens */
  .summary {
    display: none !important;
  }

  /* Catch any remaining fixed-width elements that cause horizontal scroll */
  .inputForm,
  .sudsLogin,
  .newVendorWrapper p,
  .vendorPortalWrapper p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Footer ────────────────────────────────────────────────────────── */
  .footerContent {
    flex-direction: column !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .footerContent .row {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }
  .footerLinks {
    flex-wrap: wrap !important;
    gap: 1.5rem !important;
    justify-content: flex-start !important;
  }
  .footerLinks .footerInfo {
    min-width: 42% !important;
    flex: 1 1 42% !important;
    padding-left: 0 !important;
    padding-right: 0.5rem !important;
  }
  .footerBg .container.border-left-right-white {
    border-left: none !important;
    border-right: none !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── departmentsBlock rightCol ────────────────────────────────────── */
  .departmentsBlock.rightCol,
  .departmentsBlock.rightColItem,
  .vendorPortalHeader .rightCol,
  .departmentsWrapper .businessDescription,
  .departmentsWrapper .resourceCardWrapper {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    overflow: visible !important;
  }

  /* ── latestResourcesSection ──────────────────────────────────────── */
  .latestResourcesSection .resourceCards {
    flex-direction: column !important;
  }
  .latestResourcesSection .resourceItem,
  .latestResourcesSection a.resourceItem {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Mobile nav: hide the standalone button, left-align menu items ── */
  #mobile-login {
    display: none !important;
  }
  /* Search bar moved into nav row — hide the stacked version in header */
  #mobile-search {
    display: none !important;
  }
  /* Hide the inline search when the sandwich menu is open OR animating */
  .navbar:has(#navbarNav.show) #nav-mobile-search,
  .navbar:has(#navbarNav.collapsing) #nav-mobile-search {
    display: none !important;
  }
  #nav-mobile-search {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #nav-mobile-search form,
  #nav-mobile-search .input-group,
  #nav-mobile-search .input-group-lg {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    display: flex !important;
  }
  #nav-mobile-search .input-group-text {
    flex-shrink: 0 !important;
  }
  #nav-mobile-search input,
  #nav-mobile-search input[type="text"],
  #nav-mobile-search input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 0 !important; /* forces flex to control the width */
  }
  /* More breathing room between logo and search bar on mobile */
  .navbarBg .d-md-none.flex-column {
    gap: 1.25rem !important;
  }
  #navbarNav .nav-link,
  #navbarNav ul li a,
  #navbarNav .dropdown-item,
  #navbarNav li {
    text-align: left !important;
  }
  /* Button inside sandwich menu — full width on mobile */
  #navbarNav .d-lg-none .btn-join {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── Login page mobile fix ───────────────────────────────────────────────
   loginWrapper uses float-based columns; override to single column stack. */
@media (max-width: 991.98px) {
  .loginWrapper {
    display: flex !important;
    flex-direction: column !important;
  }
  .loginWrapper .leftCol,
  .loginWrapper .rightCol {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .loginWrapper .rightCol {
    margin-top: 2rem !important;
  }
  /* Fix the hardcoded 300px inputs inside the login form */
  .loginWrapper input.form-control,
  .loginWrapper .form-check {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Categories page mobile fix ─────────────────────────────────────────
   .departmentHeader has hardcoded width:500px height:500px — causes
   overflow and a huge whitespace gap on mobile. Stack columns, auto height. */
@media (max-width: 991.98px) {
  .categoriesWrapper {
    display: flex !important;
    flex-direction: column !important;
  }
  .categoriesWrapper .departmentHeader {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  .categoriesWrapper .categoriesBlock {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-top: 1.5rem !important;
    box-sizing: border-box !important;
  }
}

/* ── Product/Vendor summary cards mobile fix ────────────────────────────
   .productSummary has margin:20px on all sides — on mobile this pushes
   cards right and causes apparent overflow. Reset to vertical-only margin. */
@media (max-width: 991.98px) {
  .free .productSummary,
  .premium .productSummary,
  .productSummary,
  .free .vendorSummary,
  .premium .vendorSummary,
  .vendorSummary {
    margin: 0 0 1rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Product page mobile fix ─────────────────────────────────────────────
   1. productWrapper uses float-based leftCol/rightCol — no clearfix causes
      the wrapper to collapse, creating the visual "line" splitting the page.
   2. featureSet/featureSets inside rightCol get clipped at 45% width.
   3. robot1/reminder have hardcoded width:500px causing overflow. */
@media (max-width: 991.98px) {
  .productWrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .productWrapper .header {
    width: 100% !important;
    float: none !important;
    margin-bottom: 1rem !important;
  }
  .productWrapper .leftCol,
  .productWrapper .rightCol {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .productWrapper .rightCol {
    margin-top: 1.5rem !important;
  }
  /* Hide "Analysis on right >" button — not relevant on mobile */
  .pseudoButton.catlink {
    display: none !important;
  }
  /* featureSets and featureSet cards — full width, no clipping */
  .featureSets,
  .featureSet,
  .featureSet.rightColItem,
  .collapse-section.featureSet {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* robot1 and reminder — strip hardcoded 500px width, add breathing room */
  .robot1,
  .reminder {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  .robot1 {
    margin-top: 2rem !important;
  }
}

/* ── Desktop header: search width + button height alignment ─────────────
   At md+ the header row is: [logo] [flex-grow-1 search] [flex-shrink-0 button]
   flex-grow-1 makes the search fill all remaining space — cap it and nudge
   it right so it sits flush next to the button. */
@media (min-width: 768px) {
  /* Constrain search to ~40% of row width and push it to the right */
  .navbarBg .d-md-flex > .flex-grow-1 {
    flex-grow: 0 !important;
    width: 40% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Match button height exactly to input-group-lg (~48px):
     set an explicit height and remove conflicting padding override */
  .navbarBg .d-md-flex > .flex-shrink-0 .btn-join {
    height: 36.7px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}

/* ── Vendor page mobile fix ──────────────────────────────────────────────
   vendorWrapper uses float-based leftCol/rightCol — same pattern as
   productWrapper. The "Is this your Company" button bleeds off-screen
   because rightCol is 45% wide and floated right. */
@media (max-width: 991.98px) {
  .vendorWrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
  }
  /* Fix overview text being cut off */
  .vendorWrapper .header,
  .vendorWrapper .header .overview {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
  }
  /* Push userLink button to bottom of the left column content */
  .vendorWrapper .userLink {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: 1rem !important;
    padding-top: 0 !important;
    order: 3 !important;
  }
  .vendorWrapper .userLink .btn,
  .vendorWrapper .userLink a.btn,
  .vendorWrapper .userLink .button,
  .vendorWrapper .userLink a.button,
  .vendorWrapper .userLink span.button {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .vendorWrapper .logo {
    order: 1 !important;
    float: none !important;
    width: 100% !important;
  }
  .vendorWrapper .leftCol,
  .vendorWrapper .rightCol {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    order: 4 !important;
  }
  .vendorWrapper .rightCol {
    margin-top: 1.5rem !important;
    order: 5 !important;
  }
}
/* ── Vendor page mobile fix ──────────────────────────────────────────────
   The button is a <span class="button"> or <a class="button"> — NOT .btn.
   It sits between header and leftCol in the DOM. */
@media (max-width: 991.98px) {
  .vendorWrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    overflow: visible !important;
  }
  .vendorWrapper .header,
  .vendorWrapper .header .overview {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
  }
  .vendorWrapper .overview {
    margin-bottom: 0 !important;
  }
  .vendorWrapper .logo {
    float: none !important;
    width: 100% !important;
  }
  .vendorWrapper .userLink {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 0 0 1.5rem 0 !important;
    display: block !important;
  }
  /* Target the actual button class used in subs.js.
     .button is display:inline-block by default — must force block + full width */
  .vendorWrapper .userLink .button,
  .vendorWrapper .userLink a.button,
  .vendorWrapper .userLink span.button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 !important;
    float: none !important;
  }
  .vendorWrapper .leftCol,
  .vendorWrapper .rightCol {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  .vendorWrapper .rightCol {
    margin-top: 1.5rem !important;
  }
}

/* ============================================
   Hero video
   ============================================ */
.hero-video-wrapper {
  display: none;
}

@media (min-width: 992px) {
  .hero .hero-content {
    width: 55%;
  }

  .hero-video-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    z-index: 3;
    padding: 1.5rem;
  }

  .hero-video-wrapper video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    object-fit: cover;
  }
}

/* Smaller laptops */
@media (min-width: 992px) and (max-width: 1199px) {
  .hero-video-wrapper {
    width: 40%;
    padding: 3rem;
  }

  .hero .hero-content {
    width: 58%;
  }

  .hero-title {
    font-size: 2.8rem !important;
  }
}

/* Medium laptops */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-video-wrapper {
    width: 42%;
    padding: 3.5rem;
  }

  .hero .hero-content {
    width: 55%;
  }
}

/* ==========================================================================
   Sponsored Listing Block
   Sits between the category description and "Products in this category".
   Layout mirrors the Caxton example: logo left, text right.
   ========================================================================== */

/* ==========================================================================
   Sponsored Listing Block
   Sits between the category description and "Products in this category".
   Layout mirrors the Caxton example: logo left, text right.
   ========================================================================== */

/* ==========================================================================
   Sponsored Listing Block
   Sits between the category description and "Products in this category".
   Layout mirrors the Caxton example: logo left, text right.
   ========================================================================== */

/* ==========================================================================
   Partner Highlight Block
   Sits between the category description and "Products in this category".
   Layout: logo left, text right.
   ========================================================================== */

.partnerHighlight {
  margin: 1.5rem 0 1rem;
}

.partnerCard {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

/* --- Logo column --------------------------------------------------------- */
.partnerCard .cardImage {
  flex-shrink: 0;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partnerCard .cardImage img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

/* --- Text column --------------------------------------------------------- */
.partnerCard .cardBody {
  flex: 1;
  min-width: 0;
  text-align: left !important;
}

.partnerCard .cardTitle {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  line-height: 1.4;
}

.partnerCard .cardText {
  margin: 0 0 0.4rem;
  font-size: 0.925rem;
  line-height: 1.5;
  color: #333;
}

.partnerCard .cardAction {
  margin: 0;
  font-size: 0.9rem;
}

.partnerCard .cardAction a {
  color: #0077b5;
  text-decoration: underline;
}

/* --- Stack on small screens ---------------------------------------------- */
@media (max-width: 600px) {
  .partnerCard {
    flex-direction: column;
    align-items: flex-start;
  }

  .partnerCard .cardImage {
    width: 120px;
    align-self: center;
  }

  .partnerCard .cardBody {
    text-align: left !important;
    width: 100%;
  }
}