/**
 * AIFO universal CTA buttons (V2 pages).
 *
 * Usage:
 *   <a href="#" class="aifo-btn aifo-btn--primary aifo-btn--arrow">Join AIFO</a>
 *   <a href="#" class="aifo-btn aifo-btn--outline">Begin Learning</a>
 *
 * Modifiers:
 *   --primary / --outline   visual style
 *   --arrow                 right arrow (design default for primary CTAs)
 *   --sm                    smaller padding
 *
 * Arrow is optional — only add --arrow when the design shows it.
 */

:root {
  --aifo-btn-primary: #f98715;
  --aifo-btn-primary-hover: #f9a215;
  --aifo-btn-text: #f9f9f9;
  --aifo-btn-radius: 10px;
  --aifo-btn-gap: 8px;
}

.aifo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--aifo-btn-gap);
  border: none;
  border-radius: var(--aifo-btn-radius);
  padding: 16px 32px;
  min-height: 52px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.16px;
  line-height: 1;
  color: var(--aifo-btn-text);
  background: var(--aifo-btn-primary);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.aifo-btn:hover,
.aifo-btn:focus-visible {
  background: var(--aifo-btn-primary-hover);
  box-shadow:
    inset 0 5px 10px rgba(249, 135, 21, 0.6),
    0 5px 10px rgba(249, 135, 21, 0.6);
  color: var(--aifo-btn-text);
  text-decoration: none;
}

.aifo-btn--primary {
  /* default .aifo-btn appearance */
}

.aifo-btn--outline {
  background: rgba(15, 15, 15, 0.5);
  border: 0.657px solid #666;
  box-shadow: none;
}

.aifo-btn--outline:hover,
.aifo-btn--outline:focus-visible {
  background: rgba(249, 135, 21, 0.08);
  border-color: var(--aifo-btn-primary);
  box-shadow: none;
  color: var(--aifo-btn-text);
}

.aifo-btn--sm {
  padding: 12px 24px;
  min-height: 44px;
  font-size: 14px;
}

/* Right arrow — same stroke as home-hero-carousel / Figma */
.aifo-btn--arrow::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
  mask: url("../images/icons/arrow-right.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.aifo-btn--arrow:hover::after,
.aifo-btn--arrow:focus-visible::after {
  transform: translateX(3px);
}

/* Optional: explicit child icon (when ::after is not enough, e.g. <button> quirks) */
.aifo-btn__arrow {
  display: inline-flex;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.aifo-btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aifo-btn:hover .aifo-btn__arrow,
.aifo-btn:focus-visible .aifo-btn__arrow {
  transform: translateX(3px);
}

.aifo-btn--arrow:has(.aifo-btn__arrow)::after {
  content: none;
}