/* =============================================================================
   TWMC BUTTONS — Missions
   -----------------------------------------------------------------------------
   One button geometry, colour as the only variable.

   GEOMETRY follows .twmc26-btn-ghost / -primary / -maroon in css/twmc26-styles.css
   exactly: 44px min-height, 10px/18px padding, 14px/600, 999px radius, 1px
   border, and a translateY(-2px) hover on a .3s cubic-bezier(0.16,1,0.3,1)
   curve. COLOUR follows the Missions branding already in use on these pages.

   ONE DELIBERATE ADDITION: `line-height: 1.5` is declared here. The twmc26
   classes do not declare it, so they inherit whatever the host page's body is —
   which is why .twmc26-btn-ghost measures 44px on one page and 45.8px on
   another. A button system cannot have a height that depends on where you put
   it. Worth pushing the same one-line fix back into twmc26-styles.css.

   -----------------------------------------------------------------------------
   USING IT

   New markup:      class="twmc-btn twmc-btn--green"
   Existing markup: nothing to change. Every legacy Missions class is listed as
                    an alias on the rules below, so .btn-missiontrip-lg and
                    friends pick up the system automatically.

   The aliases are a migration shim, not the design. Once markup is moved to
   .twmc-btn, delete the alias selectors — they are marked ALIAS throughout.

   -----------------------------------------------------------------------------
   ORDER MATTERS. Link this AFTER the site stylesheets and make sure the page's
   own <style> block no longer defines these classes, or the local copy wins and
   this file does nothing. Local definitions have been removed from:
   globalmissions.html, globalmissions-honduras-mens-trip.html,
   applying-for-support.html, mis-missionsmonth-2026.html.

   Still carrying their own copies (not yet migrated):
   globalmissions-past-trips.html, mission-trip-training.html
   ============================================================================= */

:root {
  --twmcbtn-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  --twmcbtn-green:       #6A8A6F;
  --twmcbtn-green-dark:  #4f6b54;
  --twmcbtn-green-soft:  rgba(106, 138, 111, .2);
  --twmcbtn-green-faint: rgba(106, 138, 111, .12);

  --twmcbtn-gold:        #B98B4E;
  --twmcbtn-gold-dark:   #a5793f;
  --twmcbtn-gold-soft:   rgba(185, 139, 78, .18);

  --twmcbtn-rule:        #DED6C4;
  --twmcbtn-off-bg:      #ccc;
  --twmcbtn-off-fg:      #666;
}

/* ---------------------------------------------------------------------------
   1. GEOMETRY — every button, no exceptions
   --------------------------------------------------------------------------- */
.twmc-btn,
.btn-missiontrip-lg,        /* ALIAS */
.btn-missiontrip,           /* ALIAS */
.btn-missiontrip-outline,   /* ALIAS */
.btn-mm-oncolor,            /* ALIAS */
.btn-mm-oncolor-lg,         /* ALIAS */
.cx-btn,                    /* ALIAS */
/* These two normally ride along with .btn-missiontrip-lg, but
   globalmissions-past-trips.html uses --closed on its own, so they need the
   geometry in their own right. Deliberately NOT in the hover list below —
   an unavailable button does not lift. */
.btn-missiontrip-lg--closed, /* ALIAS */
.btn-missiontrip-lg--soon {  /* ALIAS */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .2px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: all .3s var(--twmcbtn-ease);
}

.twmc-btn:hover,            .twmc-btn:focus,
.btn-missiontrip-lg:hover,  .btn-missiontrip-lg:focus,
.btn-missiontrip:hover,     .btn-missiontrip:focus,
.btn-missiontrip-outline:hover, .btn-missiontrip-outline:focus,
.btn-mm-oncolor:hover,      .btn-mm-oncolor:focus,
.btn-mm-oncolor-lg:hover,   .btn-mm-oncolor-lg:focus,
.cx-btn:hover,              .cx-btn:focus {
  transform: translateY(-2px);
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
   2. COLOUR VARIANTS
   --------------------------------------------------------------------------- */

/* Green — the Missions default */
.twmc-btn--green,
.btn-missiontrip-lg,        /* ALIAS */
.btn-missiontrip,           /* ALIAS */
.cx-btn {                   /* ALIAS */
  background-color: var(--twmcbtn-green);
  border-color: var(--twmcbtn-green);
  color: #fff;
}
.twmc-btn--green:hover, .twmc-btn--green:focus,
.btn-missiontrip-lg:hover, .btn-missiontrip-lg:focus,
.btn-missiontrip:hover, .btn-missiontrip:focus,
.cx-btn:hover, .cx-btn:focus {
  background-color: var(--twmcbtn-green-soft);
  border-color: var(--twmcbtn-green);
  color: var(--twmcbtn-green);
}

/* Gold — campaign accent */
.twmc-btn--gold,
.btn-missiontrip-lg--gold { /* ALIAS */
  background-color: var(--twmcbtn-gold);
  border-color: var(--twmcbtn-gold);
  color: #fff;
}
.twmc-btn--gold:hover, .twmc-btn--gold:focus,
.btn-missiontrip-lg--gold:hover, .btn-missiontrip-lg--gold:focus {
  background-color: var(--twmcbtn-gold-soft);
  border-color: var(--twmcbtn-gold);
  color: var(--twmcbtn-gold);
}

/* Ghost — for dark imagery. Mirrors .twmc26-btn-ghost, including the blur. */
.twmc-btn--ghost,
.btn-missiontrip-outline {  /* ALIAS */
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .32);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.twmc-btn--ghost:hover, .twmc-btn--ghost:focus,
.btn-missiontrip-outline:hover, .btn-missiontrip-outline:focus {
  background: rgba(255, 255, 255, .18);
  border-color: #fff;
  color: #fff;
}

/* White — a solid button sitting on a coloured band (the gold Give band).
   Text picks up the band's own darker tone rather than a neutral. */
.twmc-btn--white,
.btn-mm-oncolor,            /* ALIAS */
.btn-mm-oncolor-lg {        /* ALIAS */
  background-color: #fff;
  border-color: #fff;
  color: var(--twmcbtn-gold-dark);
}
.twmc-btn--white:hover, .twmc-btn--white:focus,
.btn-mm-oncolor:hover, .btn-mm-oncolor:focus,
.btn-mm-oncolor-lg:hover, .btn-mm-oncolor-lg:focus {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}

/* Outline — quiet secondary on a light background */
.twmc-btn--outline,
.btn-missiontrip-lg--ghost { /* ALIAS */
  background-color: transparent;
  border-color: var(--twmcbtn-green);
  color: var(--twmcbtn-green);
}
.twmc-btn--outline:hover, .twmc-btn--outline:focus,
.btn-missiontrip-lg--ghost:hover, .btn-missiontrip-lg--ghost:focus {
  background-color: var(--twmcbtn-green-faint);
  border-color: var(--twmcbtn-green);
  color: var(--twmcbtn-green-dark);
}

/* Unavailable — "Coming Soon" / "Trip Closed".
   No lift: a button you cannot press should not answer the mouse. */
.twmc-btn--off,
.twmc-btn--off:hover,
.twmc-btn--off:focus,
.btn-missiontrip-lg--soon,          /* ALIAS */
.btn-missiontrip-lg--soon:hover,
.btn-missiontrip-lg--soon:focus,
.btn-missiontrip-lg--closed,        /* ALIAS */
.btn-missiontrip-lg--closed:hover,
.btn-missiontrip-lg--closed:focus {
  background-color: var(--twmcbtn-off-bg);
  border-color: var(--twmcbtn-off-bg);
  color: var(--twmcbtn-off-fg);
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   3. PILL — a link, not a button: icon + label, lighter weight.
   Same 44px height and the same hover, so it sits in the system.
   --------------------------------------------------------------------------- */
.twmc-pill,
.mm-pill {                  /* ALIAS */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 10px 18px;
  background-color: #fff;
  border: 1px solid var(--twmcbtn-rule);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .2px;
  color: var(--twmcbtn-green-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: all .3s var(--twmcbtn-ease);
}
.twmc-pill i,
.mm-pill i { color: var(--twmcbtn-gold); }

.twmc-pill:hover, .twmc-pill:focus,
.mm-pill:hover, .mm-pill:focus {
  border-color: var(--twmcbtn-green);
  color: #2F4A34;
  transform: translateY(-2px);
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

/* On a coloured band.
   The pill itself is IDENTICAL to the one above — same white fill, same warm
   border, same gold icon. An earlier version gave this variant a green icon and
   a white border, on the theory that gold would disappear into a gold band; but
   the icon sits inside a white pill, so it never touches the band, and the two
   pill rows on Missions Month ended up visibly different for no reason.
   All this modifier now carries is a deeper hover shadow, which a saturated
   background needs to register at all. */
.twmc-pill--oncolor:hover, .twmc-pill--oncolor:focus,
.mm-pill--oncolor:hover, .mm-pill--oncolor:focus {   /* ALIAS */
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}

/* ---------------------------------------------------------------------------
   4. main.css:152 declares  ul > li { margin-left: 1.5rem !important }
   Any button/pill row built as a <ul> needs this or the items indent 24px.
   --------------------------------------------------------------------------- */
ul.twmc-btn-row > li { margin-left: 0 !important; }

/* ---------------------------------------------------------------------------
   5. LARGE — one primary call to action per screen
   ---------------------------------------------------------------------------
   The system deliberately has ONE button size, so everything sits level. This
   is the single exception, and it exists for a reason: on the gold Give band
   the pledge button and the three "other ways to give" pills were all 44px
   white shapes, so nothing said which one was the point. Rank has to come from
   somewhere, and colour was already spent — the band is gold, the buttons are
   white.

   Use it on ONE button per screen. A page with two large buttons has no
   primary action, just two loud ones.

   56px against the standard 44px is a 27% step: obvious at a glance, without
   turning into a slab. Type goes up with it (16px, not 14px) — scaling the box
   alone reads as a stretched button rather than a bigger one.
   --------------------------------------------------------------------------- */
.twmc-btn--lg,
.btn-mm-oncolor-lg {        /* ALIAS */
  min-height: 56px;
  padding: 15px 32px;
  font-size: 16px;
}