/* ============================================================================
   WNM_HOST LAMBO — Component primitives
   components.css  (depends on colors_and_type.css)
   ============================================================================ */

/* ---- BUTTONS — zero radius, sharp rectangles ---------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); border-radius: 0; border: 0; cursor: pointer;
  text-transform: uppercase; transition: background-color .2s ease, opacity .2s ease, color .2s ease;
  text-decoration: none; white-space: nowrap;
}

/* Gold Accent CTA — primary action ONLY */
.btn-accent {
  background: var(--gold); color: var(--black);
  font-size: var(--size-btn); font-weight: 400; padding: 24px 40px; line-height: 1.5;
  letter-spacing: .2px;
}
.btn-accent:hover { background: var(--gold-dark); }
.btn-accent:active { background: var(--gold-dark); }

/* Transparent Ghost — secondary on dark */
.btn-ghost {
  background: transparent; color: var(--white);
  border: 1px solid var(--border-ghost); opacity: .5;
  font-size: var(--size-btn-std); font-weight: 300; padding: 16px 32px; letter-spacing: .2px;
}
.btn-ghost:hover { background: var(--teal-action); color: #fff; opacity: .85; border-color: transparent; }
.btn-ghost:focus-visible { background: var(--teal-action); border-color: #000; outline: 2px solid #000; }

/* White Filled — light-mode primary on dark sections */
.btn-white { background: var(--white); color: var(--surface-1); font-size: var(--size-btn-std); font-weight: 500; padding: 16px 32px; letter-spacing:.2px; }
.btn-white:hover { background: var(--surface-mist); }

/* Gray Neutral — subtle/tertiary */
.btn-gray { background: var(--steel); color: var(--surface-1); font-size: var(--size-btn-std); font-weight:500; padding: 14px 24px; letter-spacing:.2px; }
.btn-gray:hover { background: #b0b0b0; }

.btn-sm { font-size: var(--size-btn-sm); padding: 10px 20px; }

/* ---- BADGE / TAG -------------------------------------------------------- */
.lt-badge {
  display: inline-flex; align-items: center; background: var(--steel); color: #fff;
  padding: 6px 8px; font-size: var(--size-micro); letter-spacing: .5px; text-transform: uppercase;
  border-radius: 2px; font-family: var(--font-ui); font-weight: 500;
}
.lt-badge.gold { background: var(--gold); color: #000; }
.lt-badge.outline { background: transparent; color: #fff; border: 1px solid var(--border-ghost); }

/* ---- CARD --------------------------------------------------------------- */
.lt-card {
  background: var(--surface-1); border-radius: 0; border-bottom: 1px solid var(--border-divider);
  color: var(--fg1); overflow: hidden;
}

/* ---- HAIRLINE DIVIDER --------------------------------------------------- */
.lt-divider { height: 1px; background: var(--border-divider); border: 0; width: 100%; }

/* ---- LINK --------------------------------------------------------------- */
.lt-link { color: var(--white); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease; }
.lt-link:hover { color: var(--link-blue); }

/* ---- TOGGLE SWITCH — the sole rounded element --------------------------- */
.lt-switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.lt-switch input { display:none; }
.lt-switch .track { position:absolute; inset:0; background: transparent; border:1px solid #DDDDDD; border-radius: 20px; transition: background .2s, border-color .2s; }
.lt-switch .thumb { position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition: transform .2s; }
.lt-switch input:checked + .track { background: var(--gold); border-color: var(--gold); }
.lt-switch input:checked + .track + .thumb { transform: translateX(20px); background:#000; }

/* ---- PROGRESS BAR (hero horizon line) ----------------------------------- */
.lt-progress { width: 100%; height: 2px; background: rgba(255,255,255,.25); }
.lt-progress > i { display:block; height:100%; background:#fff; }