/*
 * ui-fixes.css  v1
 * Addresses three scored issues from the UI audit:
 *   1. CTA button contrast (was ~2.1:1, needs ≥ 4.5:1)
 *   2. Inconsistent section spacing on the homepage
 *   3. Weak / invisible interaction feedback on buttons & cards
 * Loaded after styles.css so cascade wins without !important where possible.
 */


/* =============================================
   TASK 1 — CTA BUTTON CONTRAST
   #fff on amber #f59e0b  ≈ 2.1:1  (WCAG fail)
   --text-on-accent (#0c0a08) on amber ≈ 9.1:1  (WCAG AAA pass)
   ============================================= */

.btn-primary {
  color: var(--text-on-accent);
}

/* Keep icons inside the button dark to match */
.btn-primary i,
.btn-primary svg {
  color: var(--text-on-accent);
}

/* Light-mode: amber text on dark btn-secondary already fine;
   no change needed there. */


/* =============================================
   TASK 2 — CONSISTENT SECTION SPACING
   Introduce a single --section-v-pad token and
   apply it to every homepage content section.
   Base styles.css uses 100px on the generic
   .section-container; FAQ section overrides to
   56px; other sections vary. Normalise to 88px.
   ============================================= */

:root {
  --section-v-pad:    88px;
  --section-v-pad-sm: 56px;
}

/* Target homepage sections specifically via their
   parent selectors so other pages are unaffected. */
.services-teaser--home  > .section-container,
.home-steps             > .section-container,
.about                  > .section-container,
.trust-block--reviews   > .section-container,
.home-faq-teaser        > .section-container,
.market-teaser          > .section-container {
  padding-top:    var(--section-v-pad);
  padding-bottom: var(--section-v-pad);
}

/* Tighten section header bottom gap to match
   the narrower vertical rhythm (was 64px). */
.services-teaser--home .section-header,
.home-steps .section-header,
.about .section-header,
.trust-block--reviews .section-header,
.home-faq-teaser .section-header,
.market-teaser .section-header {
  margin-bottom: 48px;
}

@media (max-width: 768px) {
  .services-teaser--home  > .section-container,
  .home-steps             > .section-container,
  .about                  > .section-container,
  .trust-block--reviews   > .section-container,
  .home-faq-teaser        > .section-container,
  .market-teaser          > .section-container {
    padding-top:    var(--section-v-pad-sm);
    padding-bottom: var(--section-v-pad-sm);
  }
}


/* =============================================
   TASK 3 — INTERACTION FEEDBACK
   Primary button hover was opacity:0.94 only —
   imperceptible. Secondary hover had no lift.
   Adding subtle translateY lift on hover and a
   scale-down press on active for clear affordance.
   ============================================= */

/* --- Primary button --- */
.btn-primary {
  transition:
    opacity      var(--transition),
    background   var(--transition),
    filter       0.18s ease,
    transform    0.18s ease;
}

.btn-primary:hover {
  opacity:   1;
  transform: translateY(-2px);
  filter:    brightness(1.08);
}

.btn-primary:active {
  opacity:    1;
  transform:  translateY(0) scale(0.97);
  filter:     brightness(0.95);
  transition:
    opacity   0.08s ease,
    transform 0.08s ease,
    filter    0.08s ease;
}

/* --- Secondary button --- */
.btn-secondary {
  transition:
    background    var(--transition),
    border-color  var(--transition),
    opacity       var(--transition),
    transform     0.18s ease;
}

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

.btn-secondary:active {
  transform:  translateY(0) scale(0.97);
  transition:
    background   0.08s ease,
    border-color 0.08s ease,
    transform    0.08s ease;
}

/* --- Nav CTA (Sign In) --- */
.btn-nav-cta {
  transition:
    border-color var(--transition),
    background   var(--transition),
    color        var(--transition),
    transform    0.18s ease;
}

.btn-nav-cta:hover {
  transform: translateY(-1px);
}

.btn-nav-cta:active {
  transform: scale(0.97);
}

/* --- Service panel cards (homepage teaser) --- */
/* --- Service panels (homepage): background only, no lift --- */
.page-home .svc-panel--teaser {
  transition:
    border-color var(--transition),
    background   var(--transition);
}

.page-home .svc-panel--teaser:hover {
  transform: none;
}

.page-home .svc-panel--teaser:active {
  transform: none;
}

.svc-panel--teaser {
  transition:
    border-color var(--transition),
    background   var(--transition),
    transform    0.2s ease;
}

.svc-panel--teaser:hover {
  transform: translateY(-3px);
}

.svc-panel--teaser:active {
  transform: translateY(-1px);
}

/* --- FAQ items (homepage) --- */
.home-faq-teaser .faq-item {
  transition:
    border-color 0.2s ease,
    background   0.2s ease,
    transform    0.15s ease;
}

.home-faq-teaser .faq-item:hover {
  transform: translateX(4px);
}


/* =============================================
   ACCESSIBILITY — honour reduced-motion pref
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-nav-cta,
  .svc-panel--teaser,
  .home-faq-teaser .faq-item {
    transform:  none !important;
    filter:     none !important;
    transition:
      opacity      var(--transition),
      background   var(--transition),
      border-color var(--transition) !important;
  }
}