/* Shared button system — Life Expeditions
   Solid / glass / invert CTAs, form submits, menu hamburger.
   Uses page tokens when present; falls back to brand defaults. */

:root{
  --btn-radius:999px;
  --btn-pad-y:14px;
  --btn-pad-x:26px;
  --btn-font-size:14px;
  --btn-font-weight:600;
  --btn-transition:0.3s ease;
}

/* ---------- Base CTA ---------- */

.btn,
.button,
.support-button,
.section-button,
.card-button,
.gallery-button,
.expedition-hero-button,
.home-button,
.button-primary,
.button-glass{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  min-height:48px;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border:0;
  border-radius:var(--btn-radius);
  text-decoration:none;
  font:inherit;
  font-size:var(--btn-font-size);
  font-weight:var(--btn-font-weight);
  letter-spacing:0.3px;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--btn-transition), color var(--btn-transition), border-color var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition);
}

/* External arrow — skip when markup already has one, or for invert home */
.btn::after,
.button::after,
.support-button::after,
.section-button::after,
.card-button::after,
.gallery-button::after,
.expedition-hero-button::after,
.button-primary::after{
  content:"↗";
  margin-left:10px;
  font-size:17px;
  transition:transform var(--btn-transition);
}

.btn:hover,
.button:hover,
.support-button:hover,
.section-button:hover,
.card-button:hover,
.gallery-button:hover,
.expedition-hero-button:hover,
.home-button:hover,
.button-primary:hover,
.button-glass:hover{
  transform:translateY(-2px);
}

.btn:hover::after,
.button:hover::after,
.support-button:hover::after,
.section-button:hover::after,
.card-button:hover::after,
.gallery-button:hover::after,
.expedition-hero-button:hover::after,
.button-primary:hover::after{
  transform:translate(3px,-3px);
}

.btn:focus-visible,
.button:focus-visible,
.support-button:focus-visible,
.section-button:focus-visible,
.card-button:focus-visible,
.gallery-button:focus-visible,
.expedition-hero-button:focus-visible,
.home-button:focus-visible,
.button-primary:focus-visible,
.button-glass:focus-visible,
.contact-form button:focus-visible,
.newsletter-form button:focus-visible{
  outline:3px solid var(--color-primary-light, #bfe7ff);
  outline-offset:3px;
}

/* ---------- Solid primary ---------- */

.btn,
.button,
.support-button,
.section-button,
.card-button,
.button-primary{
  background:var(--color-primary, #5A8DB8);
  color:var(--color-white, #ffffff);
}

.btn:hover,
.button:hover,
.support-button:hover,
.section-button:hover,
.card-button:hover,
.button-primary:hover{
  background:var(--color-primary-dark, #497da9);
  color:var(--color-white, #ffffff);
}

/* ---------- Glass (over imagery) ---------- */

.gallery-button,
.expedition-hero-button,
.button-glass{
  background:rgba(255,255,255,0.14);
  color:var(--color-white, #ffffff);
  border:1px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(4px);
  font-weight:700;
}

.gallery-button:hover,
.expedition-hero-button:hover,
.button-glass:hover{
  background:var(--color-white, #ffffff);
  color:var(--color-primary, #5A8DB8);
}

/* ---------- Invert (dark backgrounds) ---------- */

.home-button,
.btn-invert{
  background:var(--color-white, #ffffff);
  color:var(--color-primary, #5A8DB8);
  font-weight:700;
}

.home-button:hover,
.btn-invert:hover{
  background:var(--color-primary-light, #bfe7ff);
  color:var(--color-primary, #5A8DB8);
}

.home-button::after,
.btn-invert::after{
  content:"↗";
  margin-left:10px;
  font-size:17px;
  transition:transform var(--btn-transition);
}

.home-button:hover::after,
.btn-invert:hover::after{
  transform:translate(3px,-3px);
}

/* ---------- Layout aliases (margins only) ---------- */

.section-button{
  margin-top:30px;
}

.card-button{
  margin-top:32px;
}

/* ---------- Form submits — same pill language ---------- */

.contact-form button,
.newsletter-form button{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:var(--btn-pad-y) var(--btn-pad-x);
  border-radius:var(--btn-radius);
  font:inherit;
  font-size:15px;
  font-weight:700;
  letter-spacing:0.2px;
  cursor:pointer;
  transition:background var(--btn-transition), color var(--btn-transition), border-color var(--btn-transition), transform var(--btn-transition);
}

.contact-form button{
  width:100%;
  margin-top:8px;
  border:0;
  background:var(--color-primary, #5A8DB8);
  color:var(--color-white, #ffffff);
}

.contact-form button:hover{
  background:var(--color-primary-dark, #497da9);
  transform:translateY(-2px);
}

.contact-form button span{
  font-size:18px;
  line-height:1;
  transition:transform var(--btn-transition);
}

.contact-form button:hover span{
  transform:translateX(3px);
}

.newsletter-form button{
  flex-shrink:0;
  border:1px solid rgba(255,255,255,0.55);
  background:transparent;
  color:#fff;
}

.newsletter-form button:hover{
  background:#fff;
  color:var(--color-primary, #5A8DB8);
  transform:translateY(-2px);
}

/* ---------- Hamburger ---------- */

.menu-button{
  width:46px;
  height:46px;
  border:0;
  background:white;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  cursor:pointer;
  position:relative;
  z-index:1002;
  padding:0;
}

.menu-button span{
  width:30px;
  height:2.5px;
  background:#111;
  display:block;
  transition:transform .3s ease, opacity .2s ease;
}

.menu-button.is-open span:nth-child(1){ transform:translateY(8.5px) rotate(45deg); }
.menu-button.is-open span:nth-child(2){ opacity:0; }
.menu-button.is-open span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg); }