/* ==========================================================
   BUTTONS — Afghan Community (TOKENS ONLY)
   - Colors must come from tokens.css
   - Layers: components + utilities
========================================================== */


  .btn,
  .btn-primary,
  .btn-gold,
  .btn-outline,
  .btn-secondary,
  .btn-urgent,
  .btn-hot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 28px;
    border-radius:var(--radius-pill);

    font-family:var(--font-title);
    font-weight:600;
    font-size:16px;
    line-height:1;

    cursor:pointer;
    text-decoration:none;
    border:2px solid transparent;

    color:var(--color-dark);

    transition:
      transform var(--anim-speed-fast) var(--anim-ease),
      background var(--anim-speed-fast) var(--anim-ease),
      border-color var(--anim-speed-fast) var(--anim-ease),
      box-shadow var(--anim-speed-fast) var(--anim-ease);

    box-shadow:var(--shadow-soft);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }

  /* Focus (LOCKED: interactions = turquoise) */
  .btn:focus-visible,
  .btn-primary:focus-visible,
  .btn-gold:focus-visible,
  .btn-outline:focus-visible,
  .btn-secondary:focus-visible,
  .btn-urgent:focus-visible,
  .btn-hot:focus-visible{
    outline:3px solid var(--color-focus);
    outline-offset:4px;
  }

  /* Disabled (NO opacity) */
  .btn[aria-disabled="true"],
  .btn-primary[aria-disabled="true"],
  .btn-gold[aria-disabled="true"],
  .btn-outline[aria-disabled="true"],
  .btn-secondary[aria-disabled="true"],
  .btn-urgent[aria-disabled="true"],
  .btn-hot[aria-disabled="true"]{
    background:var(--color-bg);
    color:var(--color-dark);
    border-color:var(--color-dark);
    cursor:not-allowed;
    pointer-events:none;
    transform:none;
    box-shadow:none;
  }

  .btn-small{
    padding:12px 24px;
    font-size:16px;
    border-radius:var(--radius-pill);
  }

  /* Arrow stays static (ONE animation system = LIFT only) */
  .btn-arrow{
    display:inline-block;
    margin-left:6px;
    transform:none;
  }

  /* ======================================================
     HOVER READABILITY FIX (CRITICAL)
     - Prevent global a:hover from changing button text color
     - Keep text always readable (black) on colored buttons
     ====================================================== */
  .btn:hover,
  .btn-primary:hover,
  .btn-gold:hover,
  .btn-outline:hover,
  .btn-secondary:hover,
  .btn-urgent:hover,
  .btn-hot:hover{
    color:var(--color-dark)!important;
    text-decoration:none!important;
  }

  /* ======================================================
     COLOR SYSTEM (LOCKED)
     Primary CTA = ORANGE
     Secondary = TURQUOISE
     Outline = transparent + turquoise border
     Urgent = PINK (rare)
     ====================================================== */

  /* PRIMARY CTA (orange fill) */
  .btn-primary,
  .btn.primary{
    background:var(--color-gold);
    border-color:var(--color-gold);
  }
  .btn-primary:hover,
  .btn.primary:hover{
    background:color-mix(in srgb, var(--color-gold) 86%, #000);
    border-color:color-mix(in srgb, var(--color-gold) 86%, #000);
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
  }

  /* LEGACY (MAPPING UPDATE):
     Your templates use .btn-gold as the “second button”.
     We now map .btn-gold to SECONDARY (turquoise) so:
     First = orange (.btn-primary / .btn.primary)
     Second = turquoise (.btn-gold / .btn-secondary / .btn.secondary)
  */
  .btn-secondary,
  .btn.secondary,
  .btn-gold{
    background:var(--color-primary);
    border-color:var(--color-primary);
  }
  .btn-secondary:hover,
  .btn.secondary:hover,
  .btn-gold:hover{
    background:color-mix(in srgb, var(--color-primary) 86%, #000);
    border-color:color-mix(in srgb, var(--color-primary) 86%, #000);
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
  }

  /* OUTLINE */
  .btn-outline{
    background:transparent;
    border-color:var(--color-primary);
    box-shadow:none;
  }
  .btn-outline:hover{
    background:var(--color-primary);
    border-color:var(--color-primary);
    color:var(--color-dark)!important;
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
  }

  /* URGENT */
  .btn-urgent,
  .btn-hot{
    background:var(--color-hot);
    border-color:var(--color-hot);
  }
  .btn-urgent:hover,
  .btn-hot:hover{
    background:color-mix(in srgb, var(--color-hot) 86%, #000);
    border-color:color-mix(in srgb, var(--color-hot) 86%, #000);
    color:var(--color-dark)!important;
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
  }


  /* MAIN CONTENT ONLY: force black button text so WP styles don’t override */
  .site-main .btn,
  .site-main .btn-primary,
  .site-main .btn-gold,
  .site-main .btn-outline,
  .site-main .btn-secondary,
  .site-main .btn-urgent,
  .site-main .btn-hot{
    color:var(--color-dark)!important;
    text-decoration:none!important;
  }

  .site-main .btn *,
  .site-main .btn-primary *,
  .site-main .btn-gold *,
  .site-main .btn-outline *,
  .site-main .btn-secondary *,
  .site-main .btn-urgent *,
  .site-main .btn-hot *{
    color:inherit!important;
  }

  /* ALSO lock hover text in main content (beats global a:hover rules) */
  .site-main .btn:hover,
  .site-main .btn-primary:hover,
  .site-main .btn-gold:hover,
  .site-main .btn-outline:hover,
  .site-main .btn-secondary:hover,
  .site-main .btn-urgent:hover,
  .site-main .btn-hot:hover{
    color:var(--color-dark)!important;
    text-decoration:none!important;
  }

  /* DO NOT force black inside header/footer (they have dark backgrounds) */
  .site-header .btn,
  .site-header .btn-primary,
  .site-header .btn-gold,
  .site-header .btn-outline,
  .site-header .btn-secondary,
  .site-footer .btn,
  .site-footer .btn-primary,
  .site-footer .btn-gold,
  .site-footer .btn-outline,
  .site-footer .btn-secondary{
    color:inherit!important;
  }

  /* WordPress default buttons (scope to main content) */
  .site-main .wp-block-button__link,
  .site-main button,
  .site-main input[type="submit"],
  .site-main input[type="button"],
  .site-main input[type="reset"]{
    color:var(--color-dark)!important;
  }


/* CF7: disable ONLY while submitting (prevents double submissions)
   Do NOT block user from clicking to trigger validation. */
.wpcf7 form.is-submitting .wpcf7-submit,
.wpcf7 form.submitting .wpcf7-submit {
  opacity: .65 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}