/* ==========================================================================
   components.css — the component library (POOL-SITE-BUILD-PLAN §4.6)
   BEM-ish naming. Depends on tokens.css. Load after layout.css.

   Roster: .btn (primary/secondary/ghost/call) · .card · .plan-card (.is-featured)
   · .service-card · .testimonial · .badge · .faq-accordion · .breadcrumbs
   · .form-field (+ error) · .step-indicator · .before-after · .area-chip
   Touch targets ≥ 44×44px throughout (§4.6).
   ========================================================================== */

/* ==========================================================================
   Buttons — the ONLY place --sun appears (§4.2 accent discipline)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: var(--s3) var(--s6);
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-body);
  line-height: 1; text-align: center; white-space: nowrap;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  cursor: pointer; user-select: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; }
/* "Call <span>(number)</span>" is a bare text node + span, so the flex gap lands
   between the word and the number as a too-wide space. Collapse the gap for those
   buttons and restore a natural word-space via the span's margin. Icon buttons
   (svg + text, no phone span) keep the gap. */
.btn:has([data-phone-label]) { gap: 0; }
.btn [data-phone-label] { margin-inline-start: 0.28em; }

/* Primary — amber fill, white text. The one CTA that earns the accent. */
.btn--primary { background: var(--sun); color: var(--on-sun); }
.btn--primary:hover { background: var(--sun-hover); }

/* Secondary — outline in deep water, for the "Call" secondary action */
.btn--secondary { background: transparent; color: var(--deep); border-color: var(--deep); }
.btn--secondary:hover { background: var(--deep); color: var(--on-deep); }

/* Call — same weight as secondary but reads as a phone action */
.btn--call { background: var(--paper); color: var(--deep); border-color: var(--line); }
.btn--call:hover { background: var(--sand); border-color: var(--shallow); }

/* Ghost — low-emphasis inline action */
.btn--ghost { background: transparent; color: var(--water); border-color: transparent; }
.btn--ghost:hover { background: color-mix(in srgb, var(--shallow) 35%, transparent); }

/* Glass — outline action for use over photos (e.g. the hero). Deep-tinted so it
   stays legible over bright water, not just dark areas. */
.btn--glass {
  background: color-mix(in srgb, var(--deep) 42%, transparent);
  color: var(--on-deep);
  border-color: color-mix(in srgb, var(--on-deep) 60%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.btn--glass:hover { background: var(--paper); color: var(--deep); border-color: var(--paper); }

.btn--lg { min-height: 52px; padding: var(--s4) var(--s8); font-size: 1.125rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Card — base surface
   ========================================================================== */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
}

/* Service card (§5.1 #4) — icon, name, one-sentence benefit, Learn more → */
.service-card { display: flex; flex-direction: column; gap: var(--s3); height: 100%; }
.service-card__icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--shallow) 40%, transparent);
  color: var(--water);
}
.service-card__icon svg { width: 26px; height: 26px; }
.service-card h3 { color: var(--deep); }
.service-card__more { margin-top: auto; font-weight: 600; color: var(--water); }

/* Plan card (§5.3) — three tiers, middle featured */
.plan-card { display: flex; flex-direction: column; gap: var(--s4); position: relative; height: 100%; }
.plan-card__name { font-family: var(--font-display); font-weight: 600; color: var(--deep); font-size: var(--t-h3); }
.plan-card__price { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h2); color: var(--deep); }
.plan-card__price span { font-family: var(--font-body); font-size: var(--t-small); font-weight: 400; color: var(--ink-muted); }
.plan-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.plan-card__features li { display: flex; gap: var(--s2); margin: 0; }  /* margin:0 cancels base.css `li + li` — the list spaces itself with gap */
.plan-card__features li::before { content: "✓"; color: var(--success); font-weight: 700; }
.plan-card .btn { margin-top: auto; }
.plan-card.is-featured {
  border-color: var(--sun);
  box-shadow: var(--shadow-md);
}
.plan-card__badge {
  position: absolute; top: calc(-1 * var(--s3)); left: 50%; transform: translateX(-50%);
  background: var(--sun); color: var(--on-sun);
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s1) var(--s3); border-radius: var(--radius-pill);
}

/* Testimonial (§5.1 #8) */
.testimonial { display: flex; flex-direction: column; gap: var(--s4); }
.testimonial__quote { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 500; color: var(--deep); line-height: 1.35; }
.testimonial__cite { font-style: normal; font-size: var(--t-small); color: var(--ink-muted); }
.testimonial__cite strong { color: var(--ink); font-weight: 600; }

/* Badge — trust / credential chips (§5.1 #3) */
.badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3); min-height: 32px;
  background: color-mix(in srgb, var(--shallow) 30%, transparent);
  color: var(--deep); font-size: var(--t-small); font-weight: 600;
  border-radius: var(--radius-pill); border: 1px solid var(--shallow);
}
.badge svg { width: 16px; height: 16px; color: var(--water); }

/* Area chip — city links (§3, §5.4) */
.area-chip {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: var(--s2) var(--s4);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-pill); color: var(--deep); font-weight: 500;
}
.area-chip:hover { text-decoration: none; border-color: var(--water); background: var(--sand); }

/* ==========================================================================
   Lightbox — full-size photo viewer with prev/next (gallery.js)
   ========================================================================== */
body.has-lightbox { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s2); padding: clamp(var(--s3), 4vw, var(--s8));
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--deep) 92%, black); }
.lightbox__figure { position: relative; z-index: 1; margin: 0; text-align: center; justify-self: center; max-width: 100%; }
.lightbox__img {
  display: block; max-width: 100%; max-height: 82vh; width: auto; height: auto;
  margin: 0 auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg, 0 20px 60px rgba(0,0,0,.5));
  background: var(--sand);
}
.lightbox__caption { position: relative; z-index: 1; margin-top: var(--s3); color: var(--on-deep); font-size: var(--t-small); }
.lightbox__counter { position: absolute; z-index: 1; bottom: var(--s3); left: 50%; transform: translateX(-50%); margin: 0; color: color-mix(in srgb, var(--on-deep) 70%, transparent); font-size: var(--t-micro); letter-spacing: .04em; }
.lightbox__btn {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 48px; height: 48px; flex: 0 0 auto; border: none; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--on-deep) 12%, transparent); color: var(--on-deep);
  cursor: pointer; transition: background var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: color-mix(in srgb, var(--on-deep) 24%, transparent); }
.lightbox__btn:focus-visible { outline: 3px solid var(--shallow); outline-offset: 2px; }
.lightbox__close { position: absolute; top: var(--s4); right: var(--s4); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox:not([hidden]) .lightbox__img { animation: lb-fade var(--dur) var(--ease); }
  @keyframes lb-fade { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   FAQ accordion — native <details>, styled (§4.6)
   ========================================================================== */
.faq-accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--paper); }
.faq-accordion details + details { border-top: 1px solid var(--line); }
.faq-accordion summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s6); min-height: var(--tap);
  font-weight: 600; color: var(--deep); cursor: pointer; list-style: none;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary::after { content: "+"; font-size: 1.4em; color: var(--water); transition: transform var(--dur) var(--ease); }
.faq-accordion details[open] summary::after { transform: rotate(45deg); }
.faq-accordion__body { padding: 0 var(--s6) var(--s4); color: var(--ink); }

/* ==========================================================================
   Breadcrumbs (§8.1 — visible + BreadcrumbList schema)
   ========================================================================== */
/* Top padding clears the sticky header's wave overhang so breadcrumbs are
   never hidden under it (they sit first in <main>, right below the navbar). */
.breadcrumbs { font-size: var(--t-small); color: var(--ink-muted); padding-block: var(--s6); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; gap: var(--s2); align-items: center; margin: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--line); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ==========================================================================
   Form field (+ error state) (§6, §9 — real labels)
   ========================================================================== */
.form-field { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.form-field__label { font-weight: 600; color: var(--deep); }
.form-field__label .req { color: var(--danger); }
.form-field__hint { font-size: var(--t-small); color: var(--ink-muted); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: var(--tap); padding: var(--s3) var(--s4);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none; border-color: var(--water);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--water) 22%, transparent);
}
.form-field textarea { min-height: calc(var(--tap) * 2); resize: vertical; }
.form-field__error { display: none; font-size: var(--t-small); color: var(--danger); font-weight: 500; }
.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea { border-color: var(--danger); }
.form-field.is-invalid .form-field__error { display: block; }

/* Honeypot — off-screen, never focusable by real users (§6) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Step indicator — quote wizard (§6)
   ========================================================================== */
/* wrap: with inline labels this row is wider than a 320px screen. The quote
   wizard's stepper must NOT wrap (its progress rail is one absolutely-positioned
   row) — it sets flex-wrap: nowrap explicitly. */
.step-indicator { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); list-style: none; padding: 0; margin: 0; }
.step-indicator li { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-small); color: var(--ink-muted); margin: 0; }
.step-indicator__dot {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill);
  background: var(--paper); border: 2px solid var(--line); color: var(--ink-muted); font-weight: 700; font-size: var(--t-micro);
}
.step-indicator [aria-current="step"] .step-indicator__dot { border-color: var(--sun); color: var(--sun); }
.step-indicator .is-done .step-indicator__dot { background: var(--water); border-color: var(--water); color: var(--on-water); }

/* ==========================================================================
   Before/after comparison slider (§4.6, §5.1 #5) — draggable
   ========================================================================== */
.before-after {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  aspect-ratio: 3 / 2; user-select: none; touch-action: pan-y;
}
.before-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before-after__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
/* Optional reveal wrapper: moves the wipe clip off the <img> so the image can be
   independently zoomed (transform: scale) to match a differently-framed pair
   without desyncing the seam. Used where two source photos differ in zoom. */
.before-after__reveal { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.before-after__reveal .before-after__after { clip-path: none; }
.before-after__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.before-after__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 2px; background: var(--paper);
  box-shadow: var(--shadow-md); pointer-events: none; transform: translateX(-1px);
}
.before-after__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--paper); box-shadow: var(--shadow-md);
}
.before-after__label {
  position: absolute; bottom: var(--s3); padding: var(--s1) var(--s3);
  font-size: var(--t-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(11, 61, 79, .72); color: var(--on-deep); border-radius: var(--radius-pill);
}
.before-after__label--before { left: var(--s3); }
.before-after__label--after { right: var(--s3); }

/* ==========================================================================
   Image placeholder — labeled gray box, correct aspect (§12 convention)
   ========================================================================== */
.img-placeholder {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(45deg, var(--line) 0 10px, color-mix(in srgb, var(--line) 60%, var(--paper)) 10px 20px);
  color: var(--ink-muted); font-size: var(--t-small); font-weight: 600;
  border-radius: var(--radius-lg); padding: var(--s6);
}