/* ==========================================================================
   LifeSupport IT — Shared components
   Buttons, cards, glass panels, badges, forms, nav, icons, animations.
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  --btn-pad-y: .85rem; --btn-pad-x: 1.6rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--lsit-font-heading); font-size: var(--lsit-fs-sm); font-weight: var(--lsit-fw-semibold);
  line-height: 1; border: 1.5px solid transparent; border-radius: var(--lsit-radius-pill);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--lsit-dur) var(--lsit-ease), box-shadow var(--lsit-dur) var(--lsit-ease), background var(--lsit-dur) var(--lsit-ease), color var(--lsit-dur) var(--lsit-ease), border-color var(--lsit-dur) var(--lsit-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--lsit-grad-primary); color: #fff; box-shadow: var(--lsit-shadow-md); }
.btn--primary:hover { color: #fff; box-shadow: var(--lsit-shadow-lg); }
.btn--accent { background: var(--lsit-grad-accent); color: var(--lsit-navy); box-shadow: var(--lsit-shadow-md); }
.btn--accent:hover { color: var(--lsit-navy); box-shadow: var(--lsit-shadow-lg); }
.btn--outline { background: transparent; color: var(--lsit-primary); border-color: var(--lsit-border-strong); }
.btn--outline:hover { background: var(--lsit-soft); color: var(--lsit-secondary); border-color: var(--lsit-primary); }
.btn--ghost { background: transparent; color: var(--lsit-primary); }
.btn--ghost:hover { background: var(--lsit-soft); }
.btn--light { background: #fff; color: var(--lsit-primary); box-shadow: var(--lsit-shadow-sm); }
.btn--light:hover { color: var(--lsit-secondary); }
.btn--glass { background: var(--lsit-glass-bg-dark); color: #fff; border-color: var(--lsit-glass-border-dark); backdrop-filter: var(--lsit-glass-blur); -webkit-backdrop-filter: var(--lsit-glass-blur); }
.btn--glass:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn--sm { --btn-pad-y: .6rem; --btn-pad-x: 1.1rem; font-size: var(--lsit-fs-xs); }
.btn--lg { --btn-pad-y: 1.05rem; --btn-pad-x: 2rem; font-size: var(--lsit-fs-base); }
.btn--block { display: flex; width: 100%; }

/* ---- Glass panel ---- */
.glass {
  background: var(--lsit-glass-bg);
  border: 1px solid var(--lsit-glass-border);
  backdrop-filter: var(--lsit-glass-blur); -webkit-backdrop-filter: var(--lsit-glass-blur);
  border-radius: var(--lsit-radius-lg);
  box-shadow: var(--lsit-shadow-md);
}
.glass--strong { background: var(--lsit-glass-bg-strong); }
.glass--dark { background: var(--lsit-glass-bg-dark); border-color: var(--lsit-glass-border-dark); color: var(--lsit-text-on-dark); }
@supports not (backdrop-filter: blur(1px)) { .glass { background: var(--lsit-glass-bg-strong); } .glass--dark { background: var(--lsit-navy); } }

/* ---- Cards ---- */
.card {
  background: var(--lsit-white); border: 1px solid var(--lsit-border);
  border-radius: var(--lsit-radius-lg); padding: var(--lsit-space-6);
  box-shadow: var(--lsit-shadow-xs);
  transition: transform var(--lsit-dur) var(--lsit-ease), box-shadow var(--lsit-dur) var(--lsit-ease), border-color var(--lsit-dur) var(--lsit-ease);
}
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--lsit-shadow-lg); border-color: var(--lsit-border-strong); }
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: var(--lsit-space-5) var(--lsit-space-6) var(--lsit-space-6); }
.card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--lsit-soft); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lsit-dur-slow) var(--lsit-ease); }
.card--hover:hover .card__media img { transform: scale(1.05); }
.card__title { font-size: var(--lsit-fs-h4); margin-bottom: var(--lsit-space-2); }
.card__meta { display: flex; flex-wrap: wrap; gap: var(--lsit-space-3); font-size: var(--lsit-fs-xs); color: var(--lsit-text-muted); }
.card--dark { background: rgba(255,255,255,.06); border-color: var(--lsit-glass-border-dark); color: var(--lsit-text-on-dark); }

/* ---- Icon ---- */
.icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-box {
  width: 56px; height: 56px; display: inline-grid; place-items: center;
  border-radius: var(--lsit-radius-md); background: var(--lsit-soft); color: var(--lsit-primary);
  margin-bottom: var(--lsit-space-4);
}
.icon-box .icon { width: 28px; height: 28px; }
.icon-box--grad { background: var(--lsit-grad-primary); color: #fff; box-shadow: var(--lsit-shadow-md); }

/* ---- Badge / chip ---- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .75rem; border-radius: var(--lsit-radius-pill); font-size: var(--lsit-fs-xs); font-weight: var(--lsit-fw-semibold); background: var(--lsit-soft); color: var(--lsit-primary); }
.badge--success { background: #E3F8EE; color: #0B7A48; }
.badge--warning { background: #FEF0DB; color: #A35B00; }
.badge--danger { background: #FDE7E5; color: #B42318; }

/* ---- Forms ---- */
.field { display: grid; gap: var(--lsit-space-2); margin-bottom: var(--lsit-space-4); }
.field label { font-size: var(--lsit-fs-sm); font-weight: var(--lsit-fw-medium); color: var(--lsit-navy); }
.input, .select, .textarea, .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=password], .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; font: inherit; color: var(--lsit-text);
  background: #fff; border: 1.5px solid var(--lsit-border); border-radius: var(--lsit-radius-md);
  transition: border-color var(--lsit-dur-fast) var(--lsit-ease), box-shadow var(--lsit-dur-fast) var(--lsit-ease);
}
.input:focus, .select:focus, .textarea:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lsit-primary); box-shadow: var(--lsit-shadow-glow);
}
.textarea, .field textarea { min-height: 140px; resize: vertical; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--lsit-danger); }
.field__hint { font-size: var(--lsit-fs-xs); color: var(--lsit-text-muted); }
.field__error { font-size: var(--lsit-fs-xs); color: var(--lsit-danger); }

/* ---- Navigation links (used by header/footer) ---- */
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--lsit-space-2); }
.nav-list a {
  position: relative; display: inline-block; padding: .55rem .9rem;
  font-family: var(--lsit-font-heading); font-size: var(--lsit-fs-sm); font-weight: var(--lsit-fw-medium);
  color: var(--lsit-navy); border-radius: var(--lsit-radius-pill);
  transition: background var(--lsit-dur-fast) var(--lsit-ease), color var(--lsit-dur-fast) var(--lsit-ease);
}
.nav-list a:hover, .nav-list .current-menu-item > a, .nav-list .current_page_item > a { background: var(--lsit-soft); color: var(--lsit-primary); }

/* ---- Stat / divider / misc ---- */
.stat { text-align: center; }
.stat__num { font-family: var(--lsit-font-heading); font-size: var(--lsit-fs-h2); font-weight: var(--lsit-fw-bold); background: var(--lsit-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.stat__label { font-size: var(--lsit-fs-sm); color: var(--lsit-text-muted); }
.divider { height: 1px; border: 0; background: var(--lsit-border); margin: var(--lsit-space-6) 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; z-index: 0; }
.blob--blue { background: var(--lsit-accent); }
.blob--indigo { background: var(--lsit-secondary); }

/* ---- Animation: reveal on scroll (JS adds .is-visible) ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--lsit-dur-slow) var(--lsit-ease), transform var(--lsit-dur-slow) var(--lsit-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@keyframes lsit-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: lsit-float 6s ease-in-out infinite; }