/* Toolspot4u Child Theme — Buttons Component
   All button variants from the Paper & Ember design system. */

/* ── Primary button (.btn) ───────────────────────────────────────────────── */

.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--ember);
  color:           #fff;
  font-family:     var(--body);
  font-weight:     600;
  font-size:       1rem;
  padding:         14px 26px;
  border-radius:   var(--r-lg);
  border:          0;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background var(--dur-std),
                   transform var(--dur-std),
                   box-shadow var(--dur-std);
  transition-timing-function: var(--ease-out);
  position:        relative;
  overflow:        hidden;
}
.btn:hover {
  background:  var(--ember-deep);
  transform:   translateY(-3px);
  box-shadow:  var(--shadow-ember);
}
.btn:active    { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* Small variant */
.btn.small {
  padding:   10px 20px;
  font-size: 0.9rem;
}

/* Dark / ink variant (e.g. "Get access" nav CTA) */
.btn.dark {
  background: var(--ink);
  color:      var(--paper);
}
.btn.dark:hover {
  background:  #111;
  box-shadow:  var(--shadow-ink);
  transform:   translateY(-3px);
}

/* Ghost / underline variant */
.btn-ghost {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--body);
  font-weight:     600;
  font-size:       inherit;
  color:           var(--ink);
  text-decoration: none;
  border-bottom:   2px solid var(--ember);
  padding-bottom:  2px;
  transition:      color var(--dur-std), border-color var(--dur-std);
}
.btn-ghost:hover { color: var(--ember-deep); border-color: var(--ember-deep); }

/* Outline variant */
.btn-outline {
  display:       inline-flex;
  align-items:   center;
  gap:           10px;
  background:    transparent;
  color:         var(--ink);
  border:        1.5px solid var(--ink-30);
  padding:       13px 25px;
  border-radius: var(--r-lg);
  font-family:   var(--body);
  font-weight:   600;
  font-size:     1rem;
  cursor:        pointer;
  transition:    border-color var(--dur-std), color var(--dur-std), background var(--dur-std);
  text-decoration: none;
}
.btn-outline:hover {
  border-color: var(--ink);
  background:   var(--linen);
}

/* ── Label blur-swap animation (Trendora signature — applied in motion.js) ──
   The JS wraps link button text in <span class="sw"><i class="a">…</i><i class="b">…</i></span>
   CSS drives the transition. */

.btn .sw {
  position: relative;
  display:  inline-block;
  overflow: hidden;
}
.btn .sw i {
  font-style:  normal;
  display:     block;
  transition:  transform 0.32s var(--ease-out),
               filter 0.32s var(--ease-out),
               opacity 0.32s;
}
.btn .sw i.b {
  position:  absolute;
  inset:     0;
  transform: translateY(135%);
  filter:    blur(4px);
  opacity:   0;
}
.btn:hover .sw i.a {
  transform: translateY(-135%);
  filter:    blur(4px);
  opacity:   0;
}
.btn:hover .sw i.b {
  transform: translateY(0);
  filter:    blur(0);
  opacity:   1;
}

/* ── Read-article button (icard hover overlay) ───────────────────────────── */

.read-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      rgba(242,239,233,.92);
  backdrop-filter: blur(14px);
  color:           var(--ink);
  border:          1px solid rgba(29,27,22,.1);
  border-radius:   var(--r-pill);
  padding:         10px 22px;
  font-weight:     600;
  font-size:       0.88rem;
  cursor:          pointer;
  transform:       translateY(6px);
  transition:      transform 0.3s var(--ease-out), background 0.2s;
  text-decoration: none;
}
.icard:hover .read-btn { transform: translateY(0); }
.read-btn svg { flex: 0 0 auto; color: var(--ember); }

/* ── OAuth button (auth page "Continue with Google") ────────────────────── */

.btn-oauth {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  width:           100%;
  background:      #fff;
  color:           var(--ink);
  border:          1.5px solid var(--ink-30);
  border-radius:   var(--r-md);
  height:          var(--f-h);
  font-family:     var(--body);
  font-weight:     600;
  font-size:       0.95rem;
  cursor:          pointer;
  transition:      border-color var(--dur-std), box-shadow var(--dur-std);
  text-decoration: none;
}
.btn-oauth:hover {
  border-color: var(--ink-60);
  box-shadow:   var(--shadow-sm);
}
.btn-oauth svg { flex: 0 0 auto; }

/* ── Disabled state (all buttons) ────────────────────────────────────────── */

.btn:disabled,
.btn-outline:disabled,
.btn-oauth:disabled {
  opacity:        0.45;
  cursor:         not-allowed;
  pointer-events: none;
  transform:      none !important;
  box-shadow:     none !important;
}

/* ── Loading state (.btn--loading) ──────────────────────────────────────── */

.btn--loading {
  pointer-events: none;
  opacity:        0.75;
}
.btn--loading::after {
  content:       '';
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     btn-spin 0.6s linear infinite;
  margin-left:   8px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }