/*
  ============================================================
  GEPVOLT CTA Buttons
  ============================================================
  Class structure:
    .gp-btn              Base (all buttons)
    .gp-btn-primary           Filled green -- main CTA, max. 1x per section
    .gp-btn-secondary         White outline/text -- side action (on coloured/dark heroes)
    .gp-btn-secondary--dark   Green outline -- side action on light backgrounds
    .gp-btn-tertiary          White text link with arrow -- subtle CTAs, cards
    .gp-btn-tertiary--dark    Green text link with arrow -- subtle CTAs on light backgrounds
    .gp-link                  Body-text links -- e.g. GDPR notices

  Tracking attributes (optional, for CTA tracking via GTM):
    data-gp-cta="slug"
    data-gp-cta-hierarchy="primary|secondary|tertiary"
    data-gp-cta-location="hero|mid_page|footer|nav"
  ============================================================
*/

/* Button-specific spacing tokens */
:root {
  --gp-btn-fs:        0.875rem;
  --gp-btn-py:        0.875rem;
  --gp-btn-px:        2.25rem;
  --gp-btn-gap:       var(--gp-space-s);
  --gp-btn-group-gap: 0.75rem;
  /* Single source of truth for the gap between preceding content and a CTA.
     Used by the systemic spacing rule below; one token = one value site-wide. */
  --gp-cta-spacing:   var(--gp-space-l); /* 2rem */
}

/* ===== Systemic CTA spacing =====
   The gap between body copy and the call to action below it used to be a per-
   block inline margin-top (8px / 16px / 20px / 24px / 32px -- inconsistent and
   too tight in places). It is now one token applied here, so every CTA sits at
   the same rhythm and new CTAs need no inline spacing at all.

   - `* + ` only adds the gap when a sibling actually precedes the CTA, so a CTA
     that is the first child of its container (e.g. the footer contact column)
     gets nothing extra.
   - Matches both the .gp-btn-group wrapper and a bare <p> that holds a single
     .gp-btn (the two markup shapes used across the patterns).
   - Component-owned CTA wrappers that manage their own rhythm are excluded so
     this rule never fights them. */
* + .gp-btn-group,
* + :where(p):has( > .gp-btn):not(.gp-product__cta):not(.gp-press-contact-card__cta) {
  margin-top: var(--gp-cta-spacing);
}

/* ===== Base ===== */
.gp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-btn-gap);
  min-height: var(--gp-touch);
  padding: var(--gp-btn-py) var(--gp-btn-px);
  border: 2px solid transparent;
  border-radius: var(--gp-radius-lg);
  font: 700 var(--gp-btn-fs)/1 var(--gp-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  cursor: pointer;
  transition: var(--gp-trans-btn);
  white-space: nowrap;
  box-sizing: border-box;
  appearance: none;
}

.gp-btn:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* ===== Button-Group ===== */
.gp-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-btn-group-gap);
}

.gp-btn-group--center {
  justify-content: center;
}

/* ===== Primary (filled green) ===== */
.gp-btn-primary {
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
  border-color: transparent;
}

.gp-btn-primary:hover  { background: var(--gp-green-hover); }
.gp-btn-primary:active { background: var(--gp-green-dark); }
.gp-btn-primary:focus-visible { outline-color: var(--gp-green); }

/* ===== Secondary (white outline -- side action) =====
   Per concept (Buttons 2.0): always white outline + white text. Secondary CTAs
   sit on coloured/dark hero sections; if a side action is ever needed on a light
   background it gets its own class, not this one. */
.gp-btn-secondary {
  background: transparent;
  color: var(--gp-text-on-dark);
  border-color: var(--gp-text-on-dark);
}

.gp-btn-secondary:hover  { background: rgba(255, 255, 255, 0.15); }
.gp-btn-secondary:active { background: rgba(255, 255, 255, 0.25); }
.gp-btn-secondary:focus-visible { outline-color: var(--gp-text-on-dark); }

/* ===== Secondary on light backgrounds (green outline) =====
   The light-surface counterpart to .gp-btn-secondary (white outline, dark-only),
   exactly the class the secondary comment above anticipated. Same secondary
   weight -- a side action that reads clearly without competing with the filled
   primary -- but with a brand-green outline so it works on white/grey sections,
   and it fills green on hover for a strong affordance. Mirror of how
   .gp-btn-tertiary--dark adapts the tertiary link to light surfaces.
   Text uses --gp-green-dark for an AA-passing label; the bright --gp-green
   border is decorative and shares the deferred green-on-light contrast point
   (see green-contrast memo), resolved on hover by the solid green fill. */
.gp-btn-secondary--dark {
  background: transparent;
  color: var(--gp-green-dark);
  border-color: var(--gp-green);
}

.gp-btn-secondary--dark:hover {
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
}

.gp-btn-secondary--dark:active {
  background: var(--gp-green-dark);
  border-color: var(--gp-green-dark);
  color: var(--gp-text-on-dark);
}

.gp-btn-secondary--dark:focus-visible { outline-color: var(--gp-focus-color-light); }

/* ===== Tertiary (text link with arrow -- white, no fill/outline) =====
   Per concept (Buttons 2.0): white text + arrow, no background, no border. */
.gp-btn-tertiary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--gp-touch);
  padding: 0.375rem 0;
  background: none;
  border: none;
  color: var(--gp-text-on-dark);
  font: 700 var(--gp-btn-fs)/1 var(--gp-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: color var(--gp-trans-fast), gap var(--gp-trans-fast);
  cursor: pointer;
}

.gp-btn-tertiary::after {
  content: '\2192';
  font-weight: 700;
  transition: transform var(--gp-trans-fast);
}

.gp-btn-tertiary:hover  { color: var(--gp-green-hover); gap: 0.625rem; }
.gp-btn-tertiary:active { color: var(--gp-green); }

.gp-btn-tertiary:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

/* Tertiary on light backgrounds: brand green text + arrow, matching the
   home solution-tile CTA (.gp-tile__cta) for visual consistency. Uses the
   bright --gp-green by design decision; note this shares the deferred WCAG
   contrast point of the green-on-light tiles (see green-contrast memo). */
.gp-btn-tertiary--dark {
  color: var(--gp-green);
}

/* Match the home solution-tile CTA hover exactly: darken + slide the arrow
   right (instead of the base tertiary's gap-widen). */
.gp-btn-tertiary--dark:hover,
.gp-btn-tertiary--dark:focus-visible {
  color: var(--gp-green-dark);
  gap: 0.375rem;
}

.gp-btn-tertiary--dark:hover::after,
.gp-btn-tertiary--dark:focus-visible::after {
  transform: translateX(0.25rem);
}

.gp-btn-tertiary--dark:active { color: var(--gp-green-dark); }

/* Tertiary on light surfaces needs the AA-passing focus indicator. */
.gp-btn-tertiary--dark:focus-visible { outline-color: var(--gp-focus-color-light); }

/* ===== Body-text links ===== */
.gp-link {
  color: var(--gp-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--gp-trans-fast);
}

.gp-link:hover  { color: var(--gp-green-dark); }

.gp-link:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color-light);
  outline-offset: 2px;
  border-radius: var(--gp-radius-sm);
}

.gp-on-dark .gp-link {
  color: rgba(255, 255, 255, 0.92);
}

.gp-on-dark .gp-link:hover {
  color: var(--gp-green-hover);
}

/* ===== Mobile: full-width buttons below 640px ===== */
@media (max-width: 639px) {
  .gp-btn-primary,
  .gp-btn-secondary,
  .gp-btn-secondary--dark {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    hyphens: auto;
  }
}

/* ===== Disabled State ===== */
.gp-btn:disabled,
.gp-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}