/* ==========================================================================
   Hoffman Legal — Modern Polish Pass
   Shared styles for sticky CTA, back-to-top, progress bar, scroll reveal, FAQ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reading-progress bar (top of page, fills as you scroll)
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg,
    rgba(191, 155, 107, 0.7),
    var(--primary));
  z-index: 101;
  pointer-events: none;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(191, 155, 107, 0.4);
}

/* --------------------------------------------------------------------------
   Scroll-reveal: elements fade + translate in when they enter viewport
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal][data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .read-progress { transition: none; }
}

/* --------------------------------------------------------------------------
   Back-to-top button (bottom-right, above chatbot)
   -------------------------------------------------------------------------- */
.back-to-top {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  z-index: 99;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.85);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(191, 155, 107, 0.4);
  color: var(--primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* Nudge it up a bit higher on mobile so it clears the sticky CTA bar */
@media (max-width: 767px) {
  .back-to-top {
    bottom: 5.5rem;
    right: 1rem;
  }
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA bar (phone + consult, thumb zone)
   -------------------------------------------------------------------------- */
.mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 98;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: rgba(17, 24, 39, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(191, 155, 107, 0.3);
  transform: translateY(100%);
  transition: transform 0.35s ease;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35);
}

.mobile-cta-bar.is-visible {
  transform: translateY(0);
}

/* While the mobile menu overlay is open, slide the CTA bar back out of the
   way so it doesn't stack on top of the menu's own Free Consultation button.
   The menu already has a phone + consult CTA near the top, so users still
   have a clear path while the menu is visible. */
body.menu-open .mobile-cta-bar {
  transform: translateY(100%);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-cta-bar { transition: none; }
}

.mobile-cta-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: background 0.2s, color 0.2s;
}

.mobile-cta-bar .mcb-call {
  color: var(--primary);
  border-right: 1px solid rgba(191, 155, 107, 0.25);
}

.mobile-cta-bar .mcb-call:hover,
.mobile-cta-bar .mcb-call:active {
  background: rgba(191, 155, 107, 0.12);
}

.mobile-cta-bar .mcb-consult {
  background: var(--primary);
  color: var(--primary-foreground);
}

.mobile-cta-bar .mcb-consult:hover,
.mobile-cta-bar .mcb-consult:active {
  background: var(--foreground);
  color: var(--background);
}

.mobile-cta-bar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Only surface on mobile */
@media (max-width: 1023px) {
  .mobile-cta-bar {
    display: grid;
  }
  /* Make sure the chatbot button doesn't collide with the CTA bar */
  body.has-mobile-cta .chatbot-toggle {
    bottom: 4.5rem;
  }
  /* Give the page a little room so the bar never covers footer content */
  body.has-mobile-cta {
    padding-bottom: 3.5rem;
  }
}

/* --------------------------------------------------------------------------
   FAQ accordion (used on service pages)
   -------------------------------------------------------------------------- */
.faq-section {
  margin-top: 2rem;
}

.faq-section > h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.faq-section > p.faq-lede {
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: rgba(17, 24, 39, 0.4);
  border: 1px solid var(--border);
  border-left: 3px solid rgba(191, 155, 107, 0.4);
  transition: border-color 0.3s, background 0.3s;
}

.faq-item[open] {
  border-left-color: var(--primary);
  background: rgba(17, 24, 39, 0.6);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--foreground);
  transition: color 0.2s;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary:hover {
  color: var(--primary);
}

.faq-item summary::after {
  content: '';
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  margin-right: 4px;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
  margin-right: 0;
  margin-top: 6px;
}

.faq-item > div {
  padding: 0 1.25rem 1.15rem;
  color: rgba(248, 250, 252, 0.85);
  line-height: 1.75;
  font-size: 0.95rem;
}

.faq-item > div p + p {
  margin-top: 0.75rem;
}

/* Small tweak so FAQ on service pages blends with the content-card look */
.service-main .faq-section {
  background: rgba(17, 24, 39, 0.3);
  border: 1px solid var(--border);
  padding: 2rem 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 768px) {
  .service-main .faq-section {
    padding: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Focus-visible rings (accessibility polish that ships with this pass)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}