/* ==========================================================================
   Buttons — .btn base, .btn--dark, .btn--light, .btn--contact
   ========================================================================== */

/* ── Base ──────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 12px 24px 12px 8px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.btn__label {
  line-height: 1;
  transition: transform 0.3s ease-out;
}

/* ── Circle container ──────────────────────────────────────────────────────── */
.btn--dark,
.btn--light { gap: 0; position: relative; }

.btn__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease-out;
}

/* ── Dot (default visible) ─────────────────────────────────────────────────── */
.btn__dot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-out;
}
/* (No svg descendant sizing — dragster_svg() puts the class on the <svg>
   itself; the dot renders at its native 8px, per Figma.) */

/* ── Arrow (default hidden) ────────────────────────────────────────────────── */
.btn__arrow-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ── One component, two modes ────────────────────────────────────────────────
   A button is ONE component. The mode (--dark starts dark, --light starts
   white) only sets the RESTING colours, via three custom properties. Every
   interaction state — hover, press, keyboard focus — is IDENTICAL in both
   modes: blue surface, solid white circle, dark arrow, label shift.
   Contexts (light header, open drawer, …) flip a button's mode by overriding
   the three variables — never by restyling the internals. */
.btn--dark  { --btn-bg: var(--btn-dark); --btn-fg: #fff; --btn-icon: #fff; }
.btn--light { --btn-bg: #fff;            --btn-fg: #000; --btn-icon: #000; }

.btn--dark,
.btn--light { background-color: var(--btn-bg); color: var(--btn-fg); }

.btn--dark  .btn__dot-icon,
.btn--light .btn__dot-icon,
.btn--dark  .btn__arrow-icon,
.btn--light .btn__arrow-icon { color: var(--btn-icon); }

/* ── Interactions — the same in both modes ─────────────────────────────────── */
.btn--dark:hover,  .btn--dark:active,  .btn--dark:focus-visible,
.btn--light:hover, .btn--light:active, .btn--light:focus-visible {
  background-color: var(--dragster-blue);
  color: #fff;
}

.btn--dark:hover  .btn__dot-icon,  .btn--dark:active  .btn__dot-icon,
.btn--light:hover .btn__dot-icon,  .btn--light:active .btn__dot-icon { opacity: 0; }

.btn--dark:hover  .btn__arrow-icon,  .btn--dark:active  .btn__arrow-icon,
.btn--light:hover .btn__arrow-icon,  .btn--light:active .btn__arrow-icon {
  opacity: 1;
  transform: scale(1);
  color: #1C1B1F;
}

.btn--dark:hover  .btn__label,  .btn--dark:active  .btn__label,
.btn--light:hover .btn__label,  .btn--light:active .btn__label { transform: translateX(8px); }

/* ── Contact button ────────────────────────────────────────────────────────── */
.btn--contact {
  position: relative;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--btn-light);
  color: var(--btn-dark);
}
.btn--contact .btn__label {
  position: relative;
  z-index: 1;
  color: var(--btn-dark);
  transition: none;
}
.btn__fill {
  position: absolute;
  inset: 0;
  background: var(--dragster-blue);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.35s ease;
  z-index: 2;
}
/* dragster_svg() puts the class on the <svg> itself — no descendant selector */
.btn__mail-icon { width: 18px; height: 18px; color: #fff; }
.btn--contact:hover .btn__fill { transform: translateX(0); }

/* The hover/press circle is ALWAYS solid white — in every header state
   (dark, light, glass, drawer open) and on touch presses. Contexts flip only
   the --btn-* variables, so nothing outranks this rule. */
.btn--dark:hover .btn__circle,
.btn--dark:active .btn__circle,
.btn--dark:focus-visible .btn__circle,
.btn--light:hover .btn__circle,
.btn--light:active .btn__circle,
.btn--light:focus-visible .btn__circle {
  background: #fff;
}