/* ==========================================================================
   Joi+Blokes — shared components
   Depends on: tokens.css, base.css
   Used by both LP1 and LP2.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   Figma: 61px tall pill, 48px horizontal padding, 13px label.
   Primary  = --jb-button fill, cream label.
   Secondary= cream fill, ink label.
   -------------------------------------------------------------------------- */

.jb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jb-space-2);
  min-height: var(--jb-button-h);
  padding: 0 var(--jb-space-12);
  border: 1px solid transparent;
  border-radius: var(--jb-radius-pill);
  font-size: var(--jb-fs-xs);
  font-weight: var(--jb-fw-medium);
  line-height: 1;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--jb-duration) var(--jb-ease),
              color var(--jb-duration) var(--jb-ease),
              border-color var(--jb-duration) var(--jb-ease),
              transform var(--jb-duration) var(--jb-ease);
}

.jb-btn:hover { text-decoration: none; }
.jb-btn:active { transform: translateY(1px); }

.jb-btn--primary {
  background-color: var(--jb-button);
  border-color: var(--jb-button);
  color: var(--jb-cream);
}

.jb-btn--primary:hover {
  background-color: var(--jb-ink-deep);
  border-color: var(--jb-ink-deep);
  color: var(--jb-cream);
}

.jb-btn--secondary {
  background-color: var(--jb-cream);
  border-color: var(--jb-cream);
  color: var(--jb-ink);
}

.jb-btn--secondary:hover {
  background-color: var(--jb-white);
  border-color: var(--jb-white);
}

.jb-btn--outline {
  background-color: transparent;
  border-color: var(--jb-button);
  color: var(--jb-ink);
}

.jb-btn--outline:hover {
  background-color: var(--jb-button);
  color: var(--jb-cream);
}

.jb-btn--block { width: 100%; }
.jb-btn--small { min-height: var(--jb-button-h-small); padding-inline: var(--jb-space-8); }

.jb-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jb-space-4);
}

/* --------------------------------------------------------------------------
   Pills / badges
   Figma: "Step 1" badge 85x31; "FAQ" badge 58x34.
   -------------------------------------------------------------------------- */

.jb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 0 var(--jb-space-5);
  border-radius: var(--jb-radius-pill);
  background-color: var(--jb-white);
  font-size: var(--jb-fs-eyebrow);
  font-weight: var(--jb-fw-medium);
  line-height: 1;
  letter-spacing: var(--jb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jb-ink);
  white-space: nowrap;
}

.jb-pill--accent { background-color: var(--jb-accent-blue); }
.jb-pill--glass {
  background-color: var(--jb-badge-glass);
  color: var(--jb-on-dark);
  backdrop-filter: blur(8px);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.jb-card {
  background-color: var(--jb-white);
  border-radius: var(--jb-radius-card);
  padding: var(--jb-space-6);
}

.jb-card--muted { background-color: var(--jb-card-bg); }
.jb-card--cream { background-color: var(--jb-cream); }
.jb-card--flush { padding: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   Photo card with scrim panel
   Figma S2 (29:204) and S6 (29:409): 1091x485 rounded card, full-bleed photo,
   dark panel over the left 724px (≈66%) carrying the copy.
   -------------------------------------------------------------------------- */

.jb-photocard {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 485px;
  border-radius: var(--jb-radius-card);
  overflow: hidden;
  isolation: isolate;
  background-color: var(--jb-ink-deep);
}

.jb-photocard__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.jb-photocard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* The scrim. On desktop it fades out across the right edge of the panel so
   the photo reads through; on mobile it covers the full card. */
.jb-photocard__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(28, 29, 22, 0.72) 0%,
    rgba(28, 29, 22, 0.62) 38%,
    rgba(28, 29, 22, 0.34) 56%,
    rgba(28, 29, 22, 0) 72%
  );
}

.jb-photocard__body {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 470px;
  padding: var(--jb-space-10);
  color: var(--jb-on-dark);
}

.jb-photocard__body .jb-display,
.jb-photocard__body h1,
.jb-photocard__body h2 { color: var(--jb-on-dark); }

.jb-photocard__body .jb-lead { color: var(--jb-on-dark-muted); }

@media (max-width: 767px) {
  .jb-photocard {
    min-height: 0;
    align-items: flex-end;
    aspect-ratio: 430 / 493;
  }
  .jb-photocard__scrim {
    background: linear-gradient(
      180deg,
      rgba(28, 29, 22, 0.30) 0%,
      rgba(28, 29, 22, 0.55) 45%,
      rgba(28, 29, 22, 0.86) 100%
    );
  }
  .jb-photocard__body {
    max-width: none;
    padding: var(--jb-space-6);
  }
}

/* Trust-badge cluster sitting inside the scrim (Figma 29:218, 241x96). */
.jb-trustbadges {
  display: flex;
  align-items: center;
  gap: var(--jb-space-4);
  width: fit-content;
  padding: var(--jb-space-4);
  border-radius: var(--jb-radius-md);
  background-color: var(--jb-badge-glass);
  backdrop-filter: blur(8px);
}

.jb-trustbadges img { height: 64px; width: auto; }

@media (max-width: 767px) {
  .jb-trustbadges { gap: var(--jb-space-3); padding: var(--jb-space-3); }
  .jb-trustbadges img { height: 48px; }
}

/* --------------------------------------------------------------------------
   Form controls
   Figma S4: 11px label, 46px input, 24px column gap.
   -------------------------------------------------------------------------- */

.jb-field { display: block; }

.jb-field__label {
  display: block;
  margin-bottom: var(--jb-space-3);
  font-size: var(--jb-fs-eyebrow);
  font-weight: var(--jb-fw-medium);
  line-height: 1.55;
  letter-spacing: var(--jb-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--jb-text-muted);
}

.jb-input {
  width: 100%;
  height: var(--jb-control-h);
  padding: 0 var(--jb-space-4);
  border: 1px solid var(--jb-hairline);
  border-radius: var(--jb-radius-sm);
  background-color: var(--jb-white);
  font-size: var(--jb-fs-body);
  line-height: 1.55;
  color: var(--jb-ink);
  transition: border-color var(--jb-duration) var(--jb-ease);
  /* Hide spinners — the fields are numeric but typed, per the design. */
  -moz-appearance: textfield;
}

.jb-input::-webkit-outer-spin-button,
.jb-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jb-input:hover { border-color: rgba(0, 0, 0, 0.28); }
.jb-input:focus { border-color: var(--jb-button); outline: none; }

.jb-input[aria-invalid="true"] { border-color: #b23b3b; }

.jb-field__error {
  display: none;
  margin-top: var(--jb-space-2);
  font-size: var(--jb-fs-eyebrow);
  line-height: 1.55;
  color: #b23b3b;
}

.jb-field__error.is-visible { display: block; }

.jb-field-grid {
  display: grid;
  gap: var(--jb-space-6);
  grid-template-columns: 1fr 1fr;
}

/* Feet and inches stay side by side down to the 430px Figma mobile frame,
   where the design keeps them paired (29:804). They only stack on very
   narrow viewports. */
@media (max-width: 359px) {
  .jb-field-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Accordion (FAQ)
   Figma S11: 1025px column, open item 125px, closed items 80px, 24px gap.
   Built on <details> so it works with JS disabled; the JS layer only adds
   single-open behaviour and animated height.
   -------------------------------------------------------------------------- */

.jb-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--jb-space-6);
}

.jb-accordion__item {
  border-radius: var(--jb-radius-md);
  background-color: var(--jb-white);
  overflow: hidden;
}

.jb-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--jb-space-4);
  min-height: 80px;
  padding: var(--jb-space-5) var(--jb-space-6);
  font-size: var(--jb-fs-h3);
  font-weight: var(--jb-fw-medium);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.jb-accordion__summary::-webkit-details-marker { display: none; }

.jb-accordion__icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  transition: transform var(--jb-duration) var(--jb-ease);
}

.jb-accordion__item[open] .jb-accordion__icon { transform: rotate(45deg); }

.jb-accordion__panel {
  padding: 0 var(--jb-space-6) var(--jb-space-6);
  font-size: var(--jb-fs-body);
  line-height: var(--jb-lh-body);
  color: var(--jb-text-muted);
  max-width: 78ch;
}

@media (max-width: 767px) {
  .jb-accordion { gap: var(--jb-space-3); }
  .jb-accordion__summary {
    min-height: 64px;
    padding: var(--jb-space-4) var(--jb-space-5);
    font-size: var(--jb-fs-body);
  }
  .jb-accordion__panel { padding: 0 var(--jb-space-5) var(--jb-space-5); }
}

/* --------------------------------------------------------------------------
   Carousel
   Figma S7 (image cards) and S8 (testimonials): a track that overflows the
   container with dot indicators and a prev/next pair. Scroll-snap does the
   work; JS only wires the controls and the active dot.
   -------------------------------------------------------------------------- */

.jb-carousel { position: relative; }

.jb-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed to the viewport edge so the next card peeks, as in the design. */
  margin-inline: calc(var(--jb-gutter-mobile) * -1);
  padding-inline: var(--jb-gutter-mobile);
}

.jb-carousel__viewport::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .jb-carousel__viewport { scroll-behavior: auto; }
}

.jb-carousel__track {
  display: flex;
  gap: var(--jb-space-6);
}

.jb-carousel__slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.jb-carousel__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--jb-space-5);
  margin-top: var(--jb-space-8);
}

.jb-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--jb-space-3);
}

.jb-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--jb-gray-1);
  opacity: 0.4;
  cursor: pointer;
  transition: opacity var(--jb-duration) var(--jb-ease),
              background-color var(--jb-duration) var(--jb-ease);
}

.jb-carousel__dot[aria-current="true"] {
  opacity: 1;
  background-color: var(--jb-button);
}

.jb-carousel__arrows {
  display: flex;
  align-items: center;
  gap: var(--jb-space-2);
}

.jb-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--jb-hairline);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--jb-duration) var(--jb-ease),
              border-color var(--jb-duration) var(--jb-ease);
}

.jb-carousel__arrow:hover {
  background-color: var(--jb-button);
  border-color: var(--jb-button);
  color: var(--jb-cream);
}

.jb-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.jb-carousel__arrow:disabled:hover {
  background-color: transparent;
  border-color: var(--jb-hairline);
  color: inherit;
}

.jb-carousel__arrow svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Star rating
   -------------------------------------------------------------------------- */

.jb-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--jb-ink); }
.jb-stars svg { width: 18px; height: 18px; }

.jb-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--jb-space-3);
  font-size: var(--jb-fs-small);
  line-height: 1.55;
}

.jb-rating__score { font-weight: var(--jb-fw-medium); font-size: var(--jb-fs-body); line-height: 1.55; }
.jb-rating__count { color: var(--jb-text-muted); }

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.jb-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background-color: var(--jb-hairline);
}

/* ==========================================================================
   Theme-collision guard (added 2026-08-21, found on dev5)
   --------------------------------------------------------------------------
   The WordPress theme's main.css declares:
       a, a:link, a:visited, a:active { color: var(--color-dark-gray); }
   That selector has specificity (0,1,1) and beats our (0,1,0) .jb-btn--*
   rules, so on WP every button anchor took the theme's #363636 - which is
   the same value as the primary button's background, rendering the label
   invisible. Re-assert the button colours with anchor + :link/:visited so
   they outrank the theme in both directions. Harmless off-WP.
   ========================================================================== */
.jb-lp a.jb-btn--primary,
.jb-lp a.jb-btn--primary:link,
.jb-lp a.jb-btn--primary:visited,
.jb-lp a.jb-btn--primary:hover {
  color: var(--jb-cream);
}

.jb-lp a.jb-btn--secondary,
.jb-lp a.jb-btn--secondary:link,
.jb-lp a.jb-btn--secondary:visited,
.jb-lp a.jb-btn--secondary:hover {
  color: var(--jb-ink);
}

.jb-lp a.jb-btn--outline,
.jb-lp a.jb-btn--outline:link,
.jb-lp a.jb-btn--outline:visited {
  color: var(--jb-ink);
}

.jb-lp a.jb-btn--outline:hover {
  color: var(--jb-cream);
}

/* The theme injects .global-promo-banner as position:absolute at the top of
   <body>, so it overlays the first element instead of pushing it down - our
   logo rendered clipped underneath it. 32px matches the theme's own
   clearance rule (assets/css/checkout.css). :has() scopes this to WordPress;
   off-WP the banner does not exist and the rule never applies. */
body:has(.global-promo-banner) .lp1-header,
body:has(.global-promo-banner) .quiz-header { padding-top: 52px; }