/* =============================================
   SUITE HUB CUSTOM FONTS v21
   Global design system — Inter typeface family
   ============================================= */

/* === [1] SCROLLBAR GUTTER === */
html {
  scrollbar-gutter: stable;
}

/* === [2] FONT FACES === */
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === [3] PAGE TITLES === */
h1.bebas-title,
h1.bebas-title-mixed,
h1.page-title {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 0;
}

/* === [4] SECTION TITLES === */
.option-section-title,
.quote-option-title,
h2 {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #111;
  margin-top: 0;
  margin-bottom: 18px;
}

/* === [5] BACK LINK === */
a.back-link {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #555 !important;
  text-decoration: underline !important;
}

a.back-link:hover {
  color: #333 !important;
  text-decoration: underline !important;
}

/* === [6] BREADCRUMB === */
.sh-breadcrumb-wrap {
  margin: 0;
  padding: 0;
}

.sh-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.sh-breadcrumb a,
.sh-breadcrumb span {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: #555 !important;
}

.sh-breadcrumb a {
  text-decoration: underline !important;
}

.sh-breadcrumb a:hover {
  color: #333 !important;
  text-decoration: underline !important;
}

.sh-breadcrumb span {
  text-decoration: none !important;
}

.sh-breadcrumb-sep {
  color: #888 !important;
}

/* === [7] BODY TEXT === */
.container,
.option-richtext,
.option-feature-list li,
.option-address,
.pricing-table th,
.pricing-table td,
p,
li,
span,
div,
.quote-option-meta p,
.quote-option-location-line,
.quote-list-empty p {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* === [8] SMALL TEXT (pills, card detail lines) === */
.pill,
.pill span,
.quote-option-cost-line,
.quote-option-cost-line div,
.quote-option-cost-line span,
.quote-option-cost-line strong,
.opportunities-meta-line,
.opportunities-meta-line span,
.opportunities-meta-line strong {
  font-size: 13px !important;
}

/* === [9] HELPER / EXPLAINER TEXT (italic) === */
.option-muted,
.helper-text,
.explainer-text,
.option-helper,
.field-helper {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-style: italic !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #555;
}

/* === [10] BUTTONS === */
.quote-option-btn,
.quote-map-toggle-btn,
button,
.btn {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* === [11] PILLS === */

/* Base pill — applies to all variants */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1.2;
}

/* Status pills — no icon */
.pill-open {
  background: #d4edda;
  color: #155724;
}

.pill-neutral {
  background: #f1f1f1;
  color: #555;
}

.pill-warning {
  background: #fff3cd;
  color: #856404;
}

/* Match/mismatch pills — used with ✓ / ✕ icon in JS */
.pill-match {
  background: #e8f7ec;
  color: #1f7a36;
  border: 1px solid #b8e2c2;
}

.pill-mismatch {
  background: #fdecec;
  color: #b42318;
  border: 1px solid #f5c2c0;
}

/* Descriptor pills — no icon, used for distance, pricing notes */
.pill-distance {
  background: #f7f5f2;
  color: #555;
}

.pill-negotiated {
  background: #f7f5f2;
  color: #555;
}

/* === [12] WHITE HEADER SECTION === */
.white-header-container {
  max-width: 1320px;
  margin: 24px auto 0 auto;
  padding: 0 20px;
}

.white-header-breadcrumb-area {
  min-height: 28px;
  margin-bottom: 8px;
}

.white-header-title-block {
  margin: 0;
}

.white-header-title {
  margin: 0 0 8px 0;
}

.white-header-pretitle {
  margin: 0 0 0 0;
  line-height: 1.5;
  color: #555;
}

.white-header-grey-divider-spacer {
  height: 48px;
}

/* === [13] MOBILE === */
@media (max-width: 900px) {
  h1.bebas-title,
  h1.bebas-title-mixed,
  h1.page-title {
    font-size: 22px !important;
  }

  .option-section-title,
  .quote-option-title,
  h2 {
    font-size: 17px !important;
  }

  .sh-breadcrumb a,
  .sh-breadcrumb span {
    font-size: 12px !important;
  }

  .container,
  .option-richtext,
  .option-feature-list li,
  .option-address,
  .pricing-table th,
  .pricing-table td,
  p,
  li,
  span,
  div,
  .quote-option-meta p,
  .quote-option-location-line,
  .quote-list-empty p {
    font-size: 13px !important;
  }

  .pill,
  .pill span,
  .quote-option-cost-line,
  .quote-option-cost-line div,
  .quote-option-cost-line span,
  .quote-option-cost-line strong,
  .opportunities-meta-line,
  .opportunities-meta-line span,
  .opportunities-meta-line strong {
    font-size: 12px !important;
  }

  .option-muted,
  .helper-text,
  .explainer-text,
  .option-helper,
  .field-helper {
    font-size: 12px !important;
  }

  .quote-option-btn,
  .quote-map-toggle-btn,
  button,
  .btn {
    font-size: 13px !important;
  }

  .white-header-container {
    margin-top: 16px;
  }

  .white-header-breadcrumb-area {
    min-height: 24px;
  }

  .white-header-grey-divider-spacer {
    height: 36px;
  }

  a.back-link {
    font-size: 12px !important;
  }
}