/* ==========================================================================
   components.css — reusable pieces. No section-specific positioning here.
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Figma: pl 22.19 / pr 7.4 / py 7.4, gap 11.1, icon leaf 18.491 inside a
   12.944 padded circle => 44.38 circle => 59.17 total height. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11.1px;
  padding: 7.4px 7.4px 7.4px 22.19px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--ff-head);
  font-size: var(--fs-btn);
  font-weight: var(--fw-bold);
  line-height: var(--lh-btn);
  color: var(--c-white);
  white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--grad {
  background-image: var(--grad-cta);
}

.btn--grad:hover {
  box-shadow: 0 8px 24px rgba(0, 250, 203, 0.28);
}

/* Outline variant — the phone button. Fixed 215x59 in Figma; padding-based
   here so a longer number does not clip. */
.btn--outline {
  padding: 0 7.4px 0 17px;
  height: var(--h-btn);
  background: transparent;
  border: 2px solid var(--c-white);
  font-family: var(--ff-body);
  font-weight: var(--fw-reg);
  gap: 14px;
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* White circle carrying the arrow / phone glyph */
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44.38px;
  height: 44.38px;
  padding: 12.944px;
  background: var(--c-white);
  border-radius: var(--r-pill);
}

.btn__icon img,
.btn__icon svg {
  width: 18.491px;
  height: 18.491px;
  flex: none;
}

/* The phone button stacks a call glyph beside the arrow circle */
.btn__glyph {
  width: 18px;
  height: 18px;
  flex: none;
}

/* --- Primary navigation ---------------------------------------------------
   The pill is fit-content: it takes the width of its labels plus padding,
   so it can never be narrower than the text inside it. Labels are nowrap —
   "About Us" and "Service Areas" must never break onto two lines. Size and
   spacing come from tokens that step down at 1400 / 1280 (variables.css). */

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  height: var(--h-navpill);
  padding: 0 var(--pad-navpill);
  background: var(--c-surface);
  border-radius: var(--r-pill);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.nav__item {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--s-1);
}

.nav__link {
  font-family: var(--ff-head);
  font-size: var(--fs-nav);
  font-weight: var(--fw-med);
  line-height: 1.2;
  color: var(--c-black);
  white-space: nowrap;
  transition: color var(--t-fast) var(--e-soft);
}

.nav__link:hover { color: var(--c-accent); }

.nav__item--active .nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--w-navchip);
  padding: 10px 18px;
  background: var(--c-accent);
  border-radius: var(--r-chip);
  box-shadow: var(--shadow-pill);
  color: var(--c-white);
  font-weight: var(--fw-sem);
}

.nav__item--active .nav__link:hover { color: var(--c-white); }

.nav__caret {
  width: 14px;
  height: 14px;
  flex: none;
  transform: rotate(-90deg);
  transition: transform var(--t-fast) var(--e-soft);
}

.nav__item.is-open .nav__caret { transform: rotate(90deg); }

/* --- Mobile nav toggle ---------------------------------------------------- */

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--c-surface);
  border: 0;
  border-radius: var(--r-pill);
}

.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--c-ink);
  transition: transform var(--t-fast) var(--e-soft),
              opacity var(--t-fast) var(--e-soft);
}

.nav-toggle__bar::before { transform: translateY(-6px); }
.nav-toggle__bar::after  { transform: translateY(4px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bar          { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before  { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after   { transform: rotate(-45deg) translateY(-1px); }

/* --- Form fields ----------------------------------------------------------
   Underline-only fields. Figma: 20.6px placeholder, #888, 1.15px #d9d9d9
   rule, 497px wide inside a 543px card (=> 23px inner padding). */

.field {
  position: relative;
  display: block;
  width: 100%;
}

.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 0 0 var(--s-3);
  background: transparent;
  border: 0;
  border-bottom: 1.15px solid var(--c-rule);
  border-radius: 0;
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-field);
  line-height: var(--lh-field);
  transition: border-color var(--t-fast) var(--e-soft);
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--c-muted); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  border-bottom-color: var(--c-accent);
  outline: none;
}

.field__textarea {
  min-height: 92px;
  resize: vertical;
}

/* Native select needs the arrow suppressed so the Figma caret can sit on top */
.field__select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--c-muted);
  cursor: pointer;
}

.field__select:valid { color: var(--c-ink); }

.field__caret {
  position: absolute;
  right: 0;
  top: 12px;
  width: 20.62px;
  height: 20.62px;
  pointer-events: none;
}

/* --- Rating cluster ------------------------------------------------------- */

.rating {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}

.rating__avatars {
  display: flex;
  align-items: center;
}

.rating__avatar {
  width: 68.83px;
  height: 68.83px;
  flex: none;
  border-radius: var(--r-pill);
  object-fit: cover;
}

/* Figma overlaps each avatar by ~21px */
.rating__avatar + .rating__avatar { margin-left: -21.4px; }

.rating__stars {
  display: flex;
  align-items: center;
}

.rating__star {
  width: 39.05px;
  height: 39.05px;
  flex: none;
}

.rating__score {
  font-family: var(--ff-head);
  font-size: var(--fs-rating);
  font-weight: var(--fw-sem);
  line-height: var(--lh-rating);
  color: var(--c-white);
}