/* =========================================================================
   AIDiveForge — Unified Button System
   Base class + 10 semantic type variants + orthogonal modifiers.
   Tokens are defined in aidiveforge-2026.css (:root + html[data-theme=*]).
   Every button on the site should route through the PHP helper `adf_btn()`
   which renders the correct class combination.
   ========================================================================= */

/* ----------------------------------------------------------------
   Base rule — consumed by every .adf-btn variant.
   ---------------------------------------------------------------- */
.adf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--adf-btn-min-h-md);
  padding: var(--adf-btn-pad-md);
  font-family: var(--font-display);
  font-weight: var(--adf-btn-font-weight);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: -0.01em;
  border: 1px solid var(--adf-btn-bd, transparent);
  border-radius: var(--adf-btn-radius);
  background: var(--adf-btn-bg, transparent);
  color: var(--adf-btn-fg, inherit);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition:
    background    var(--adf-btn-transition),
    color         var(--adf-btn-transition),
    border-color  var(--adf-btn-transition),
    transform     var(--adf-btn-transition),
    box-shadow    var(--adf-btn-transition);
}

.adf-btn:hover,
.adf-btn:focus-visible {
  background:   var(--adf-btn-bg-h, var(--adf-btn-bg));
  color:        var(--adf-btn-fg-h, var(--adf-btn-fg));
  border-color: var(--adf-btn-bd-h, var(--adf-btn-bd));
  transform:    var(--adf-btn-lift);
  box-shadow:   var(--adf-btn-shadow-hover);
}
.adf-btn:focus-visible {
  outline: none;
  box-shadow: var(--adf-btn-shadow-hover), var(--adf-btn-focus-ring);
}
.adf-btn:active {
  transform: translateY(0);
}
.adf-btn[aria-disabled="true"],
.adf-btn:disabled {
  opacity: var(--adf-btn-disabled-opacity);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.adf-btn[aria-disabled="true"]:hover,
.adf-btn:disabled:hover {
  background:   var(--adf-btn-bg, transparent);
  color:        var(--adf-btn-fg, inherit);
  border-color: var(--adf-btn-bd, transparent);
}

/* ----------------------------------------------------------------
   Size modifiers
   ---------------------------------------------------------------- */
.adf-btn--sm { min-height: var(--adf-btn-min-h-sm); padding: var(--adf-btn-pad-sm); font-size: var(--text-xs); }
.adf-btn--lg { min-height: var(--adf-btn-min-h-lg); padding: var(--adf-btn-pad-lg); font-size: var(--text-base); }

/* ----------------------------------------------------------------
   Shape / width modifiers
   ---------------------------------------------------------------- */
.adf-btn--pill { border-radius: var(--adf-btn-radius-pill); }
.adf-btn--full { display: flex; width: 100%; }

/* ----------------------------------------------------------------
   Per-type variants — token overrides only, no direct styling.
   ---------------------------------------------------------------- */

.adf-btn--cta {
  --adf-btn-bg:    var(--adf-btn-cta-bg);
  --adf-btn-fg:    var(--adf-btn-cta-fg);
  --adf-btn-bd:    var(--adf-btn-cta-bd);
  --adf-btn-bg-h:  var(--adf-btn-cta-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-cta-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-cta-bd-h);
  font-weight: var(--adf-btn-font-weight-cta);
}

.adf-btn--primary {
  --adf-btn-bg:    var(--adf-btn-primary-bg);
  --adf-btn-fg:    var(--adf-btn-primary-fg);
  --adf-btn-bd:    var(--adf-btn-primary-bd);
  --adf-btn-bg-h:  var(--adf-btn-primary-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-primary-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-primary-bd-h);
}

.adf-btn--secondary {
  --adf-btn-bg:    var(--adf-btn-secondary-bg);
  --adf-btn-fg:    var(--adf-btn-secondary-fg);
  --adf-btn-bd:    var(--adf-btn-secondary-bd);
  --adf-btn-bg-h:  var(--adf-btn-secondary-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-secondary-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-secondary-bd-h);
}

.adf-btn--ghost {
  --adf-btn-bg:    var(--adf-btn-ghost-bg);
  --adf-btn-fg:    var(--adf-btn-ghost-fg);
  --adf-btn-bd:    var(--adf-btn-ghost-bd);
  --adf-btn-bg-h:  var(--adf-btn-ghost-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-ghost-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-ghost-bd-h);
}

.adf-btn--nav {
  --adf-btn-bg:    var(--adf-btn-nav-bg);
  --adf-btn-fg:    var(--adf-btn-nav-fg);
  --adf-btn-bd:    var(--adf-btn-nav-bd);
  --adf-btn-bg-h:  var(--adf-btn-nav-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-nav-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-nav-bd-h);
  min-height: var(--adf-btn-min-h-sm);
}
.adf-btn--nav:hover,
.adf-btn--nav:focus-visible { transform: none; }

.adf-btn--account {
  --adf-btn-bg:    var(--adf-btn-account-bg);
  --adf-btn-fg:    var(--adf-btn-account-fg);
  --adf-btn-bd:    var(--adf-btn-account-bd);
  --adf-btn-bg-h:  var(--adf-btn-account-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-account-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-account-bd-h);
}

.adf-btn--follow {
  --adf-btn-bg:    var(--adf-btn-follow-bg);
  --adf-btn-fg:    var(--adf-btn-follow-fg);
  --adf-btn-bd:    var(--adf-btn-follow-bd);
  --adf-btn-bg-h:  var(--adf-btn-follow-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-follow-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-follow-bd-h);
}
.adf-btn--follow.is-following {
  --adf-btn-bg: var(--adf-link-wash-15);
  --adf-btn-fg: var(--adf-link);
  --adf-btn-bd: var(--adf-link-wash-45);
}

.adf-btn--inline {
  --adf-btn-bg:    var(--adf-btn-inline-bg);
  --adf-btn-fg:    var(--adf-btn-inline-fg);
  --adf-btn-bd:    var(--adf-btn-inline-bd);
  --adf-btn-bg-h:  var(--adf-btn-inline-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-inline-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-inline-bd-h);
  min-height: auto;
  padding: 0;
}
.adf-btn--inline:hover,
.adf-btn--inline:focus-visible { transform: none; box-shadow: none; }

.adf-btn--danger {
  --adf-btn-bg:    var(--adf-btn-danger-bg);
  --adf-btn-fg:    var(--adf-btn-danger-fg);
  --adf-btn-bd:    var(--adf-btn-danger-bd);
  --adf-btn-bg-h:  var(--adf-btn-danger-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-danger-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-danger-bd-h);
}

.adf-btn--icon {
  --adf-btn-bg:    var(--adf-btn-icon-bg);
  --adf-btn-fg:    var(--adf-btn-icon-fg);
  --adf-btn-bd:    var(--adf-btn-icon-bd);
  --adf-btn-bg-h:  var(--adf-btn-icon-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-icon-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-icon-bd-h);
  width: var(--adf-btn-min-h-md);
  padding: 0;
}
.adf-btn--icon.adf-btn--sm { width: var(--adf-btn-min-h-sm); }
.adf-btn--icon.adf-btn--lg { width: var(--adf-btn-min-h-lg); }

/* ----------------------------------------------------------------
   Motion modifiers — opt-in per type via the helper.
   ---------------------------------------------------------------- */

.adf-btn--no-lift:hover,
.adf-btn--no-lift:focus-visible { transform: none; }

/* Diagonal shine sweep on hover — used by CTA. */
.adf-btn--shine { position: relative; overflow: hidden; }
.adf-btn--shine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent 0%, var(--adf-btn-shine-color) 50%, transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.adf-btn--shine:hover::before,
.adf-btn--shine:focus-visible::before { left: 120%; }

/* Arrow slides up-right on hover — used by CTA / "Visit" affordance. */
.adf-btn--arrow-slide .adf-btn__arrow { transition: transform var(--adf-btn-transition); }
.adf-btn--arrow-slide:hover .adf-btn__arrow,
.adf-btn--arrow-slide:focus-visible .adf-btn__arrow { transform: translate(3px, -3px); }

/* Icon rotates + scales slightly on hover — used by icon buttons that rely on motion for affordance. */
.adf-btn--spin-hover svg { transition: transform var(--adf-btn-transition); }
.adf-btn--spin-hover:hover svg,
.adf-btn--spin-hover:focus-visible svg { transform: rotate(12deg) scale(1.08); }

/* ----------------------------------------------------------------
   Loading state
   ---------------------------------------------------------------- */
.adf-btn--loading {
  pointer-events: none;
  cursor: wait;
}
.adf-btn--loading .adf-btn__icon { display: none; }
.adf-btn__spinner {
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: adf-btn-spin 0.7s linear infinite;
  display: inline-block;
  vertical-align: -0.15em;
}
@keyframes adf-btn-spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------
   Button group — connected buttons with shared borders.
   ---------------------------------------------------------------- */
.adf-btn-group {
  display: inline-flex;
  isolation: isolate;
}
.adf-btn-group > .adf-btn { border-radius: 0; }
.adf-btn-group > .adf-btn:first-child {
  border-top-left-radius: var(--adf-btn-radius);
  border-bottom-left-radius: var(--adf-btn-radius);
}
.adf-btn-group > .adf-btn:last-child {
  border-top-right-radius: var(--adf-btn-radius);
  border-bottom-right-radius: var(--adf-btn-radius);
}
.adf-btn-group > .adf-btn:not(:first-child) { margin-left: -1px; }
.adf-btn-group > .adf-btn:hover,
.adf-btn-group > .adf-btn:focus-visible,
.adf-btn-group > .adf-btn[aria-pressed="true"] { z-index: 1; }

/* ----------------------------------------------------------------
   HivePress aliasing — plugin-owned classes inherit .adf-btn chrome
   + primary variant tokens. The old hivepress-dark.css override block
   can be removed once all HP button rendering is verified.
   ---------------------------------------------------------------- */
.hp-form__button,
.hp-button,
button.hp-listing__action {
  --adf-btn-bg:    var(--adf-btn-primary-bg);
  --adf-btn-fg:    var(--adf-btn-primary-fg);
  --adf-btn-bd:    var(--adf-btn-primary-bd);
  --adf-btn-bg-h:  var(--adf-btn-primary-bg-h);
  --adf-btn-fg-h:  var(--adf-btn-primary-fg-h);
  --adf-btn-bd-h:  var(--adf-btn-primary-bd-h);
}

/* =========================================================================
   Component hooks — hook legacy class names into the variant token system
   for call sites that need bespoke design behavior the default variants
   don't replicate. Every selector below is of the form
   `.adf-btn.<legacy-class>` so specificity wins cleanly over the variant.
   ========================================================================= */

/* -- Favorite heart: red hover + --active + --pulse animation ----------- */
.adf-btn.adf-fav-btn {
  --adf-btn-bg:    var(--adf-hairline-soft);
  --adf-btn-fg:    #aaa;
  --adf-btn-bd:    var(--adf-neutral-wash-10);
  --adf-btn-bg-h:  rgba(248, 113, 113, 0.08);
  --adf-btn-fg-h:  #f87171;
  --adf-btn-bd-h:  rgba(248, 113, 113, 0.3);
  min-height: auto;
  width: auto;
  padding: 0.45rem 0.85rem;
  gap: 0.4rem;
  font-size: 0.85rem;
  border-radius: 8px;
  margin-top: 0.4rem;
}
.adf-btn.adf-fav-btn.adf-fav-btn--active {
  --adf-btn-bg:   rgba(248, 113, 113, 0.12);
  --adf-btn-fg:   #f87171;
  --adf-btn-bd:   rgba(248, 113, 113, 0.4);
}
.adf-btn.adf-fav-btn svg { transition: transform 0.2s; }
.adf-btn.adf-fav-btn:hover svg,
.adf-btn.adf-fav-btn.adf-fav-btn--active svg { transform: scale(1.1); }
.adf-btn.adf-fav-btn .adf-fav-btn__count {
  font-size: 0.78rem;
  color: inherit;
  opacity: 0.8;
}
.adf-btn.adf-fav-btn--pulse { animation: adf-fav-pulse 0.5s ease; }
@keyframes adf-fav-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* -- Share strip: 42×42 + per-platform brand colors --------------------- */
.adf-btn.adf-share-btn {
  width: 42px;
  height: 42px;
  min-height: auto;
  border-radius: 10px;
  padding: 0;
  gap: 0;
  --adf-btn-bg:   var(--adf-hairline-soft);
  --adf-btn-bd:   var(--adf-hairline);
}
.adf-btn.adf-share-btn svg { width: 18px; height: 18px; }

/* Resting — per-platform brand color as fg + tinted border. */
.adf-btn.adf-share-btn--x    { --adf-btn-fg: var(--adf-page-fg); --adf-btn-bd: var(--adf-neutral-wash-15); }
.adf-btn.adf-share-btn--fb   { --adf-btn-fg: #1877f2; --adf-btn-bd: rgba(24,119,242,0.25); }
.adf-btn.adf-share-btn--li   { --adf-btn-fg: #0a66c2; --adf-btn-bd: rgba(10,102,194,0.25); }
.adf-btn.adf-share-btn--rd   { --adf-btn-fg: #ff4500; --adf-btn-bd: rgba(255,69,0,0.25); }
.adf-btn.adf-share-btn--hn   { --adf-btn-fg: #ff6600; --adf-btn-bd: rgba(255,102,0,0.25); }
.adf-btn.adf-share-btn--wa   { --adf-btn-fg: #25d366; --adf-btn-bd: rgba(37,211,102,0.25); }
.adf-btn.adf-share-btn--th   { --adf-btn-fg: #e0e0e0; --adf-btn-bd: rgba(224,224,224,0.15); }
.adf-btn.adf-share-btn--em   { --adf-btn-fg: var(--adf-link);   --adf-btn-bd: var(--adf-link-wash-25); }
.adf-btn.adf-share-btn--copy { --adf-btn-fg: var(--adf-purple); --adf-btn-bd: rgba(168,85,247,0.25); }

/* Hover — fill with brand color, text flips to page-fg. */
.adf-btn.adf-share-btn--x:hover    { --adf-btn-bg-h: var(--adf-page-bg); --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: var(--adf-page-fg); }
.adf-btn.adf-share-btn--fb:hover   { --adf-btn-bg-h: #1877f2; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #1877f2; }
.adf-btn.adf-share-btn--li:hover   { --adf-btn-bg-h: #0a66c2; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #0a66c2; }
.adf-btn.adf-share-btn--rd:hover   { --adf-btn-bg-h: #ff4500; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #ff4500; }
.adf-btn.adf-share-btn--hn:hover   { --adf-btn-bg-h: #ff6600; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #ff6600; }
.adf-btn.adf-share-btn--wa:hover   { --adf-btn-bg-h: #25d366; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #25d366; }
.adf-btn.adf-share-btn--th:hover   { --adf-btn-bg-h: #6b6b6b; --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: #6b6b6b; }
.adf-btn.adf-share-btn--em:hover   { --adf-btn-bg-h: var(--adf-link);   --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: var(--adf-link); }
.adf-btn.adf-share-btn--copy:hover { --adf-btn-bg-h: var(--adf-purple); --adf-btn-fg-h: var(--adf-page-fg); --adf-btn-bd-h: var(--adf-purple); }

/* Share strip uses a dramatic lift to match the original design */
.adf-btn.adf-share-btn:hover,
.adf-btn.adf-share-btn:focus-visible { transform: translateY(-3px) scale(1.05); }
.adf-btn.adf-share-btn:active        { transform: translateY(-1px) scale(1.02); }

/* -- Header nav: cyan-legacy halo + purple --accent + round --user ------ */
.adf-btn.adf-header-nav__btn:hover,
.adf-btn.adf-header-nav__btn:focus-visible {
  box-shadow:
    0 6px 18px var(--adf-cyan-legacy-wash-22),
    0 0 0 3px var(--adf-cyan-legacy-wash-10);
}

.adf-btn.adf-header-nav__btn--accent {
  --adf-btn-bg:    rgba(168, 85, 247, 0.10);
  --adf-btn-fg:    var(--adf-page-fg);
  --adf-btn-bd:    rgba(168, 85, 247, 0.45);
  --adf-btn-bg-h:  rgba(168, 85, 247, 0.20);
  --adf-btn-fg-h:  var(--adf-page-fg);
  --adf-btn-bd-h:  var(--adf-purple);
}
.adf-btn.adf-header-nav__btn--accent:hover,
.adf-btn.adf-header-nav__btn--accent:focus-visible {
  box-shadow:
    0 6px 18px rgba(168, 85, 247, 0.28),
    0 0 0 3px rgba(168, 85, 247, 0.14);
}

.adf-btn.adf-header-nav__btn--user {
  --adf-btn-bg:    var(--adf-cyan-legacy-wash-10);
  --adf-btn-fg:    var(--adf-page-fg);
  --adf-btn-bd:    var(--adf-cyan-legacy-wash-45);
  --adf-btn-bg-h:  var(--adf-cyan-legacy-wash-20);
  --adf-btn-fg-h:  var(--adf-page-fg);
  --adf-btn-bd-h:  var(--adf-cyan-legacy-wash-45);
  width: 36px;
  padding: 0;
  font-weight: 800;
  text-transform: uppercase;
}

/* Header nav primary + secondary + ghost + icon — token override-only:
   cyan-legacy wash instead of --adf-link wash to match the header aesthetic. */
.adf-btn.adf-header-nav__btn--primary,
.adf-btn.adf-header-nav__btn--secondary {
  --adf-btn-bg:    var(--adf-cyan-legacy-wash-10);
  --adf-btn-fg:    var(--adf-page-fg);
  --adf-btn-bd:    var(--adf-cyan-legacy-wash-45);
  --adf-btn-bg-h:  var(--adf-cyan-legacy-wash-20);
  --adf-btn-fg-h:  var(--adf-page-fg);
  --adf-btn-bd-h:  var(--adf-cyan-legacy);
}

/* ----------------------------------------------------------------
   Reduced-motion respect
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .adf-btn { transition: none; }
  .adf-btn:hover, .adf-btn:focus-visible { transform: none; }
  .adf-btn--shine::before { display: none; }
  .adf-btn--arrow-slide:hover .adf-btn__arrow,
  .adf-btn--spin-hover:hover svg { transform: none; }
  .adf-btn__spinner { animation: none; }
}