/* aps-premium-buttons.css
   APS Premium Button Hover Standard
   Reference: .apshv-btn-a (View Study Areas, Power System Studies hero)
   Easing  : cubic-bezier(.22, 1, .36, 1) — APS standard
   Lift     : translateY(-4px)
   Duration : 0.28 s
   Touch    : all hover rules gated behind @media (hover: hover) — no sticky
              states on phones/tablets
*/

/* ── Token ─────────────────────────────────────────────────────────── */
:root { --aps-btn-ease: cubic-bezier(.22, 1, .36, 1); }


/* ══════════════════════════════════════════════════════════════════════
   0. SHAPE & COLOUR ALIGNMENT
   Reference: .apshv-btn-a (View Study Areas hero button)
     border-radius : 10px
     gradient      : #0070e0 → #1e3251 (135deg)
     resting shadow: 0 4px 20px rgba(0,112,224,0.30)
   "Contact APS" variants are excluded — they keep their ghost style.
══════════════════════════════════════════════════════════════════════ */

.aps-btn-primary,
.aps-cta-btn-main,
.aps-nw-btn,
.aps-study-btn,
.aps-ju-btn.aps-ju-btn-dark,
.aps-ju-btn-1.aps-ju-btn-primary {
  border-radius: 10px;
  background-image: linear-gradient(135deg, #0070e0 0%, #1e3251 100%);
  box-shadow: 0 4px 20px rgba(0, 112, 224, 0.30);
}


/* ══════════════════════════════════════════════════════════════════════
   1. PRIMARY / GRADIENT CTA BUTTONS
   Covers: .aps-btn-primary  .aps-cta-btn-main  .aps-nw-btn  .aps-study-btn
   On hover a brighter gradient (#449afd → #0070e0) fades in via ::before,
   the button lifts, and a soft blue glow appears.
══════════════════════════════════════════════════════════════════════ */

.aps-btn-primary,
.aps-cta-btn-main,
.aps-nw-btn,
.aps-study-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .28s var(--aps-btn-ease),
    box-shadow .28s var(--aps-btn-ease);
}

/* Hover gradient layer — fades in over the base gradient */
.aps-btn-primary::before,
.aps-cta-btn-main::before,
.aps-nw-btn::before,
.aps-study-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #449afd 0%, #0070e0 100%);
  opacity: 0;
  transition: opacity .28s var(--aps-btn-ease);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  .aps-btn-primary:hover::before,
  .aps-cta-btn-main:hover::before,
  .aps-nw-btn:hover::before {
    opacity: 1;
  }

  .aps-btn-primary:hover,
  .aps-cta-btn-main:hover,
  .aps-nw-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 112, 224, 0.42);
  }

  /* .aps-study-btn sits on a light card — slightly tighter glow */
  .aps-study-btn:hover::before {
    opacity: 1;
  }
  .aps-study-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 48, 135, 0.36);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   2. GHOST / TRANSPARENT SECONDARY BUTTONS
   Covers: .aps-btn-ghost
   On hover: light blue tint, APS light-blue border, subtle glow, lift.
══════════════════════════════════════════════════════════════════════ */

.aps-btn-ghost {
  transition:
    transform .28s var(--aps-btn-ease),
    box-shadow .28s var(--aps-btn-ease),
    background-color .24s var(--aps-btn-ease),
    border-color .24s var(--aps-btn-ease),
    color .22s;
}

@media (hover: hover) {
  .aps-btn-ghost:hover {
    color: #ffffff;
    background-color: rgba(68, 154, 253, 0.14);
    border-color: rgba(68, 154, 253, 0.60);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(68, 154, 253, 0.22);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   3. JOIN US PAGE BUTTONS
   Covers: .aps-ju-btn-1 (hero section) and .aps-ju-btn (CTA section)
══════════════════════════════════════════════════════════════════════ */

.aps-ju-btn,
.aps-ju-btn-1 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform .28s var(--aps-btn-ease),
    box-shadow .28s var(--aps-btn-ease),
    background-color .24s var(--aps-btn-ease),
    border-color .24s var(--aps-btn-ease),
    color .22s;
}

/* Gradient fade layer for filled dark variants */
.aps-ju-btn.aps-ju-btn-dark::before,
.aps-ju-btn-1.aps-ju-btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(135deg, #449afd 0%, #0070e0 100%);
  opacity: 0;
  transition: opacity .28s var(--aps-btn-ease);
  pointer-events: none;
  z-index: -1;
}

@media (hover: hover) {
  /* Dark filled — Submit Application (CTA section) */
  .aps-ju-btn.aps-ju-btn-dark:hover::before {
    opacity: 1;
  }
  .aps-ju-btn.aps-ju-btn-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 112, 224, 0.40);
  }

  /* Primary gradient — Submit Application (hero section) */
  .aps-ju-btn-1.aps-ju-btn-primary:hover::before {
    opacity: 1;
  }
  .aps-ju-btn-1.aps-ju-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 112, 224, 0.40);
  }

  /* Outline — Contact APS (CTA section) */
  .aps-ju-btn.aps-ju-btn-outline:hover {
    border-color: #449afd;
    color: #0070e0;
    background-color: rgba(68, 154, 253, 0.06);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(68, 154, 253, 0.18);
  }

  /* Ghost — Why Join APS (hero section) */
  .aps-ju-btn-1.aps-ju-btn-ghost:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.50);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.10);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   4. CROSS-SERVICE CTA BUTTONS
   .aps-sv-btn and .aps-bn-btn are page-specific inline styles in
   power-system-studies.html — hover values updated there directly.
   No overrides needed here.
══════════════════════════════════════════════════════════════════════ */