/*
 * Trucker Path repository-wide website foundations.
 *
 * Brand colors continue to resolve through the production --tpl-* variables in
 * /assets/locations/locations.css. This file owns neutral layout, typography
 * roles and form primitives shared by code-owned website surfaces.
 */

:root {
  --tp-site-content-max: var(--tpl-maxw);
  --tp-site-gutter: 24px;
  --tp-site-gutter-mobile: 20px;
  --tp-site-reading-max: 62ch;
  --tp-site-section-space: 104px;
  --tp-site-section-space-mobile: 72px;
  --tp-site-surface-radius-large: 20px;

  --tp-type-heading-1-size: 53px;
  --tp-type-heading-1-line: 1.25;
  --tp-type-heading-1-weight: 700;
  --tp-type-heading-1-tracking: -1px;

  --tp-type-heading-2-size: 48px;
  --tp-type-heading-2-line: 1.3;
  --tp-type-heading-2-weight: 700;
  --tp-type-heading-2-tracking: -1.5px;

  --tp-type-heading-3-size: 40px;
  --tp-type-heading-3-line: 1.25;
  --tp-type-heading-3-weight: 700;

  --tp-type-heading-4-size: 30px;
  --tp-type-heading-4-line: 1.3;
  --tp-type-heading-4-weight: 600;

  --tp-type-heading-5-size: 22px;
  --tp-type-heading-5-line: 1.4;
  --tp-type-heading-5-weight: 600;

  --tp-type-overline-size: 18px;
  --tp-type-overline-line: 30px;
  --tp-type-overline-weight: 600;

  --tp-type-body-large-size: 18px;
  --tp-type-body-large-line: 1.5;
  --tp-type-body-size: 16px;
  --tp-type-body-line: 1.6;
  --tp-type-body-small-size: 14px;
  --tp-type-body-small-line: 20px;
  --tp-type-caption-size: 12px;
  --tp-type-caption-line: 1.4;

  --tp-type-metric-family: "Outfit", "Poppins", "Poppins Placeholder", sans-serif;
  --tp-type-display-price-size: 44px;
  --tp-type-display-price-line: 1.2;
  --tp-type-display-price-weight: 700;
}

.tp-site-container {
  width: 100%;
  max-width: calc(var(--tp-site-content-max) + (var(--tp-site-gutter) * 2));
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--tp-site-gutter);
  padding-left: var(--tp-site-gutter);
  box-sizing: border-box;
}

.tp-site-reading-width {
  max-width: var(--tp-site-reading-max);
}

.tp-site-type-heading-1,
.tp-site-type-heading-2,
.tp-site-type-heading-3,
.tp-site-type-heading-4,
.tp-site-type-heading-5,
.tp-site-type-overline,
.tp-site-type-body-large,
.tp-site-type-body,
.tp-site-type-body-small,
.tp-site-type-caption {
  font-family: var(--tpl-font-body);
}

.tp-site-type-heading-1 {
  color: var(--tpl-ink);
  font-size: var(--tp-type-heading-1-size);
  font-weight: var(--tp-type-heading-1-weight);
  letter-spacing: var(--tp-type-heading-1-tracking);
  line-height: var(--tp-type-heading-1-line);
}

.tp-site-type-heading-2 {
  color: var(--tpl-ink);
  font-size: var(--tp-type-heading-2-size);
  font-weight: var(--tp-type-heading-2-weight);
  letter-spacing: var(--tp-type-heading-2-tracking);
  line-height: var(--tp-type-heading-2-line);
}

.tp-site-type-heading-3 {
  color: var(--tpl-ink);
  font-size: var(--tp-type-heading-3-size);
  font-weight: var(--tp-type-heading-3-weight);
  line-height: var(--tp-type-heading-3-line);
}

.tp-site-type-heading-4 {
  color: var(--tpl-ink);
  font-size: var(--tp-type-heading-4-size);
  font-weight: var(--tp-type-heading-4-weight);
  line-height: var(--tp-type-heading-4-line);
}

.tp-site-type-heading-5 {
  color: var(--tpl-ink);
  font-size: var(--tp-type-heading-5-size);
  font-weight: var(--tp-type-heading-5-weight);
  line-height: var(--tp-type-heading-5-line);
}

/*
 * Named marketing treatment for a primary heading on a dark surface.
 * The solid white color remains the fallback when text clipping is unavailable.
 */
.tp-site-type-gradient-on-dark {
  display: inline-block;
  color: var(--tpl-white);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .tp-site-type-gradient-on-dark {
    background-image: linear-gradient(96deg, var(--tpl-white) 0%, var(--tpl-on-dark-secondary) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.tp-site-type-overline {
  color: var(--tpl-blue-strong);
  font-size: var(--tp-type-overline-size);
  font-weight: var(--tp-type-overline-weight);
  line-height: var(--tp-type-overline-line);
  text-transform: none;
}

.tp-site-type-body-large {
  color: var(--tpl-ink-muted);
  font-size: var(--tp-type-body-large-size);
  font-weight: 400;
  line-height: var(--tp-type-body-large-line);
}

.tp-site-type-body {
  color: var(--tpl-ink-muted);
  font-size: var(--tp-type-body-size);
  font-weight: 400;
  line-height: var(--tp-type-body-line);
}

.tp-site-type-body-small {
  color: var(--tpl-ink-soft);
  font-size: var(--tp-type-body-small-size);
  font-weight: 400;
  line-height: var(--tp-type-body-small-line);
}

.tp-site-type-caption {
  color: var(--tpl-ink-soft);
  font-size: var(--tp-type-caption-size);
  font-weight: 400;
  line-height: var(--tp-type-caption-line);
}

/*
 * Large standalone prices and proof metrics use Outfit for a more distinct,
 * numeric display voice. Inline numbers, dates, steps and body copy remain in
 * the surrounding Poppins role.
 */
.tp-site-type-metric {
  font-family: var(--tp-type-metric-family);
  font-variant-numeric: lining-nums tabular-nums;
}

/*
 * Repository-wide semantic icon foundation. Geometry is registered in the
 * shared Blade component; size and color stay explicit at each use site.
 */
.tp-site-icon {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}

.tp-site-icon_source-framer {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.tp-site-icon_source-material-symbols {
  fill: currentColor;
  stroke: none;
}

.tp-site-icon path {
  vector-effect: non-scaling-stroke;
}

.tp-site-icon_size-sm {
  width: 16px;
  height: 16px;
}

.tp-site-icon_size-md {
  width: 20px;
  height: 20px;
}

.tp-site-icon_size-lg {
  width: 24px;
  height: 24px;
}

.tp-site-chrome .tp-site-button_component {
  box-sizing: border-box;
}

.tp-site-chrome .tp-site-button_component .tp-site-button__icon {
  color: currentColor;
  stroke: currentColor;
}

.tp-site-chrome .tp-site-button_component .tp-site-button__icon path {
  color: inherit;
  stroke: currentColor;
}

.tp-site-chrome .tp-site-button_size-landing {
  height: 48px;
  min-height: 48px;
  padding-right: 16px;
  padding-left: 16px;
  font-size: 16px;
}

.tp-site-chrome .tp-site-button_variant-secondary,
.tp-site-chrome .tp-site-button_variant-secondary:visited {
  border: 1px solid var(--tpl-line);
  background: transparent;
  color: var(--tpl-ink);
}

.tp-site-chrome .tp-site-button_variant-secondary:hover,
.tp-site-chrome .tp-site-button_variant-secondary:focus-visible {
  border-color: var(--tpl-blue);
  background: var(--tpl-blue-wash);
  color: var(--tpl-blue-strong);
}

.tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary,
.tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary:visited {
  min-width: 104px;
  padding-right: 12px;
  padding-left: 12px;
  gap: 7px;
  background: var(--tpl-white);
  color: var(--tpl-ink);
  text-transform: none;
}

.tp-site-chrome .tp-site-button_context-pagination .tp-site-button__icon {
  width: 18px;
  height: 18px;
}

.tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary:hover,
.tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary:focus-visible {
  border-color: var(--tpl-blue);
  background: var(--tpl-white);
  box-shadow: none;
  color: var(--tpl-blue);
}

.tp-site-chrome .tp-site-button_surface-dark.tp-site-button_variant-secondary,
.tp-site-chrome .tp-site-button_surface-dark.tp-site-button_variant-secondary:visited {
  border-color: var(--tpl-on-dark-border);
  background: transparent;
  color: var(--tpl-white);
}

.tp-site-chrome .tp-site-button_surface-dark.tp-site-button_variant-secondary:hover,
.tp-site-chrome .tp-site-button_surface-dark.tp-site-button_variant-secondary:focus-visible {
  border-color: var(--tpl-on-dark-border-hover);
  background: var(--tpl-on-dark-surface);
  color: var(--tpl-white);
}

.tp-site-chrome .tp-site-button_component:focus-visible {
  outline: 2px solid var(--tpl-blue);
  outline-offset: 3px;
}

.tp-site-chrome .tp-site-button_surface-dark:focus-visible {
  outline-color: var(--tpl-blue-bright);
}

.tp-site-chrome button.tp-site-button_component:disabled {
  border-color: var(--tpl-line);
  background: var(--tpl-surface);
  color: var(--tpl-ink-faint);
  cursor: not-allowed;
}

.tp-site-chrome .tp-site-link,
.tp-site-chrome .tp-site-link:visited {
  color: var(--tpl-link);
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--tpl-link-transition),
    text-decoration-color var(--tpl-link-transition);
}

.tp-site-chrome .tp-site-link:hover {
  color: var(--tpl-blue-strong);
  text-decoration-color: currentColor;
}

.tp-site-chrome .tp-site-link:focus-visible {
  color: var(--tpl-blue-strong);
  text-decoration-color: currentColor;
  outline: 2px solid var(--tpl-blue);
  outline-offset: 2px;
}

.tp-site-field {
  display: grid;
  min-width: 0;
  gap: 8px;
  font-family: var(--tpl-font-body);
}

.tp-site-field__label {
  color: var(--tpl-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.tp-site-input,
.tp-site-select {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius-sm);
  background: var(--tpl-white);
  color: var(--tpl-ink);
  font-family: var(--tpl-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  transition: border-color var(--tpl-link-transition), box-shadow var(--tpl-link-transition);
}

.tp-site-input::placeholder {
  color: var(--tpl-ink-faint);
}

.tp-site-select {
  padding-right: 40px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='m5 7 4 4 4-4' fill='none' stroke='%23868f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
}

.tp-site-input:focus,
.tp-site-select:focus {
  border-color: var(--tpl-blue);
  box-shadow: 0 0 0 3px var(--tpl-blue-wash);
  outline: 2px solid transparent;
}

.tp-site-input[disabled],
.tp-site-select[disabled] {
  background: var(--tpl-surface);
  color: var(--tpl-ink-soft);
  cursor: not-allowed;
}

.tp-site-field_is-error .tp-site-input,
.tp-site-field_is-error .tp-site-select {
  border-color: var(--tpl-warn);
}

.tp-site-field__message {
  margin: 0;
  color: var(--tpl-ink-soft);
  font-size: 12px;
  line-height: 17px;
}

.tp-site-field_is-error .tp-site-field__message {
  color: var(--tpl-warn);
}

.tp-site-checkbox {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  color: var(--tpl-ink-muted);
  cursor: pointer;
  font-family: var(--tpl-font-body);
  font-size: 14px;
  line-height: 20px;
}

.tp-site-checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.tp-site-checkbox__mark {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid var(--tpl-line);
  border-radius: var(--tpl-radius-sm);
  background: var(--tpl-white);
  flex: 0 0 auto;
  transition: background-color var(--tpl-link-transition), border-color var(--tpl-link-transition);
}

.tp-site-checkbox input:focus-visible + .tp-site-checkbox__mark {
  box-shadow: 0 0 0 3px var(--tpl-blue-wash);
  outline: 2px solid var(--tpl-blue);
  outline-offset: 1px;
}

.tp-site-checkbox input:checked + .tp-site-checkbox__mark {
  border-color: var(--tpl-blue);
  background: var(--tpl-blue);
}

.tp-site-checkbox input:checked + .tp-site-checkbox__mark::after {
  position: absolute;
  top: 2px;
  left: 5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--tpl-white);
  border-bottom: 2px solid var(--tpl-white);
  content: "";
  transform: rotate(45deg);
}

@media screen and (max-width: 1199px) {
  :root {
    --tp-type-heading-1-size: 44px;
    --tp-type-heading-2-size: 42px;
    --tp-type-heading-3-size: 28px;
    --tp-type-heading-4-size: 22px;
    --tp-type-overline-size: 16px;
    --tp-type-body-size: 14px;
    --tp-type-body-line: 20px;
    --tp-type-body-small-size: 13px;
  }
}

@media screen and (max-width: 809px) {
  :root {
    --tp-site-gutter: var(--tp-site-gutter-mobile);
    --tp-type-heading-1-size: 36px;
    --tp-type-heading-2-size: 34px;
    --tp-type-heading-3-size: 28px;
    --tp-type-heading-3-line: 1.3;
    --tp-type-heading-4-size: 24px;
    --tp-type-heading-5-size: 20px;
    --tp-type-overline-size: 14px;
    --tp-type-body-large-size: 16px;
    --tp-type-body-size: 14px;
    --tp-type-body-line: 1.5;
    --tp-type-body-small-size: 14px;
    --tp-type-display-price-size: 40px;
  }
}

@media screen and (max-width: 743px) {
  .tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding-right: 5px;
    padding-left: 5px;
    gap: 0;
    font-size: 13px;
  }
}

@media screen and (max-width: 359px) {
  .tp-site-chrome .tp-site-button_context-pagination.tp-site-button_variant-secondary {
    width: 28px;
    min-width: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-site-button_component,
  .tp-site-link,
  .tp-site-input,
  .tp-site-select,
  .tp-site-checkbox__mark {
    transition: none;
  }
}