/* ==========================================================================
   Buttons - the whole site's button system, ported from the static site
   (tomcamau/css/base.css) and extended for the WordPress-only surfaces.

   Loaded after typography.css and before the section sheets, so any page can
   override a variant without touching this file. Every value comes from
   tokens.css.

   Structure: .btn (shape + motion, no colour) + one colour variant.
     .btn--primary    filled blue      - main call to action
     .btn--secondary  filled white     - the quieter half of a pair
     .btn--ghost      outlined blue    - low emphasis, no fill (404, forms)
     .btn--deep       deep blue block  - conference cards, square-ish corners
     .btn--solid      brand blue block - "Đăng ký" on a tour in the popup
     .btn--pill-icon  "Xem tất cả"     - label left, round arrow icon right
     .btn--detail     "Xem chi tiết"   - small pill inside a news card
     .btn--soft       "Xem thêm"       - quiet grey block, 6px corners
     .btn--glow       "Mua gian hàng"  - glowing pill, booth map plan section
   Modifiers: .btn--block (full width), .btn--sm (compact), .btn--lg (form
   submits and other primary page actions).
   Context: neither variant changes colour anywhere. On a photo or the blue
   header bar --primary picks up a white ring so it separates from the ground
   and from the white --secondary beside it; that is the only contextual rule.
   ========================================================================== */

/* --- Base ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 45px;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
  border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

/* --- Colour variants ------------------------------------------------------ */
.btn--primary {
  background: var(--c-primary);
  border-color: var(--c-on-dark-faint);
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
}

.btn--primary:hover {
  background: var(--c-primary-hover);
}

/* Over a photo or a coloured bar the filled pill needs an edge to separate it
   from what is behind - that ring is also the only thing telling it apart from
   the white --secondary sitting next to it on the blue header. On a plain light
   page it must not have one, or the translucent white ring haloes the button. */
.hero .btn--primary,
.on-dark .btn--primary {
  border-color: var(--c-border-on-dark);
}

/* Figma node 5507:376. A white fill, not an outline - the 2px ring is only
   there to hold an edge against a photo or a coloured bar. */
.btn--secondary {
  min-width: 160px;
  background: var(--c-surface);
  border-color: var(--c-border-light);
  color: var(--c-ink-pure);
}

.btn--secondary:hover {
  background: var(--c-btn-light-hover);
}

.btn--ghost {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
  font-weight: var(--fw-medium);
}

.btn--ghost:hover {
  background: var(--c-primary);
  color: var(--c-on-dark);
}

/* Grey pill for a button whose link is not ready yet (Figma 6718:405). Not a
   link, so no hover and no pointer. */
.btn.btn--inactive {
  background: var(--c-btn-inactive);
  border-color: var(--c-on-dark-faint);
  color: var(--c-on-dark);
  font-weight: var(--fw-medium);
  cursor: default;
  opacity: 1; /* the grey is the design, not the generic disabled fade */
}

.btn--inactive:hover {
  transform: none;
}

/* Deep blue block - conference cards (media.html). Square-ish, not a pill. */
.btn--deep {
  min-height: 44px;
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  border-color: var(--c-border-card);
  background: var(--c-primary-deep);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-on-deep);
}

.btn--deep:hover {
  background: var(--c-primary-deep-hover);
}

/* Brand blue block (Figma 6345:1074, "Đăng ký" on a tour in the popup):
   --deep's shape and type in --primary's colour, large label, a thin white
   ring to hold its edge on a photo. */
.btn--solid {
  min-height: 0;
  padding: 8px 20px;
  border-width: 1px;
  border-color: var(--c-btn-solid-border);
  border-radius: var(--radius-sm);
  background: var(--c-primary);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-on-deep);
}

.btn--solid:hover {
  background: var(--c-primary-hover);
}

/* "Xem tất cả": label on the left, round arrow icon flush to the right edge. */
.btn--pill-icon {
  padding: 6px 6px 6px 24px;
  background: var(--c-primary);
  border-color: transparent;
  color: var(--c-on-dark);
}

.btn--pill-icon:hover {
  background: var(--c-primary-hover);
}

.btn--pill-icon img {
  width: 40px;
  height: 40px;
}

/* "Xem chi tiết" inside a news card: small pill, arrow rotated 45deg. */
.btn--detail {
  gap: var(--space-3xs);
  min-height: 40px;
  padding: 6px 6px 6px 12px;
  background: var(--c-primary);
  border-color: transparent;
  font-family: var(--font-num);
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  color: var(--c-on-dark);
  font-variation-settings: "wdth" 100;
}

.btn--detail:hover {
  background: var(--c-primary-hover);
}

.btn--detail img {
  width: 13px;
  height: 14px;
  transform: rotate(45deg);
}

/* "Xem thêm" under an article list. The only button in the set that is not a
   pill: the design gives it a 6px radius, a flat grey wash and no border, so
   the border-width is zeroed rather than left transparent - 2px of transparent
   border would push it past the design's 36px. */
.btn--soft {
  gap: var(--space-3xs);
  min-height: 36px;
  min-width: 0;
  padding: 8px 16px;
  border-width: 0;
  border-radius: var(--radius-xs);
  background: var(--c-fill-muted);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-org);
  color: var(--c-ink-steel);
}

.btn--soft:hover {
  background: var(--c-fill-muted-hover);
}

.btn--soft img {
  width: 20px;
  height: 20px;
}

/* "Mua gian hàng" (Figma node 7143:19669, booth map page): floats over the
   illustrated plan, so it needs its own glow to separate from a busy picture
   rather than the header's white ring. Border is 1px, not the base's 2px -
   the design's ring is thin, not a --primary-style halo. */
.btn--glow {
  padding: 10px 18px 8px;
  border-width: 1px;
  border-color: var(--c-btn-glow-border);
  border-radius: var(--radius-pill);
  background: var(--c-btn-glow-bg);
  box-shadow: var(--shadow-btn-glow);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-org);
  color: var(--c-on-dark);
}

.btn--glow:hover {
  background: var(--c-btn-glow-hover);
}

/* --- Size / width modifiers ----------------------------------------------- */
.btn--block {
  width: 100%;
  min-width: 0;
}

.btn--sm {
  min-height: 36px;
  min-width: 0;
  padding: 6px 16px;
  font-size: var(--fs-sm);
}

/* Form submits and other primary page actions. Size only - the family stays
   whatever the variant set, so --lg composes with any of them. */
.btn--lg {
  min-height: 48px;
  min-width: 0;
  padding: 12px 24px;
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-org);
}

/* A block button already spans its container, so its horizontal padding does
   nothing for the hit area and only squeezes the label. Drop it to the
   minimum, last, so it also wins over --lg: the hotel cards go two-up on a
   phone and "Đặt chỗ ngay" at --lg's 36px would spill out of one. */
.btn--block {
  padding-inline: var(--space-sm);
}

/* Narrow screens: shrink the secondary button so both fit on one row. */
@media (max-width: 479px) {
  .btn--secondary {
    min-width: 0;
    padding-inline: 20px;
  }
}

/* --- Back pill ------------------------------------------------------------
   "< Quay lại" above the registration forms. Not a .btn variant: it is a
   navigation affordance, smaller and lighter than any call to action. */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  align-self: flex-start;
  padding: 6px 8px;
  border: 1px solid var(--c-border-card);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-float);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--c-field-text);
  transition: background-color var(--dur) var(--ease);
}

.back-pill:hover {
  background: var(--c-btn-pill-hover);
}

.back-pill img {
  width: 20px;
  height: 20px;
}

/* --- Round arrow icon -----------------------------------------------------
   Sits inside .btn--pill-icon and on its own next to "Xem tất cả" links. */
.arrow-icon {
  width: 40px;
  height: 40px;
  flex: none;
  transition: transform var(--dur) var(--ease);
}

a:hover .arrow-icon {
  transform: translate(2px, -2px);
}