@charset "UTF-8";

/* ================================================
   PICHLMAYR – Component Library
   Global reusable UI elements
   ================================================ */


/* ================================================
   DOWNLOAD BUTTON
   Usage:
   <a href="file.pdf" class="download-link" download>
     <span class="download-icon"><i class="bi bi-download"></i></span>
     <span>Download (PDF)</span>
   </a>
   ================================================ */

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--pm-green);
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.1rem;
  font-weight: 300;
  font-style: italic;
  transition: background 0.25s ease, transform 0.15s ease;
}

.download-link:hover {
  background: #6a9337;
  transform: translateY(-1px);
  color: #fff;
}

.download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
}

.download-link:hover .download-icon i {
  animation: downloadBounce 0.6s ease;
}

@keyframes downloadBounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(3px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}


/* ================================================
   PILL BUTTON
   Usage:
   <a href="#" class="pm-pill-btn">Label</a>
   <button class="pm-pill-btn">Label</button>
   ================================================ */

.pm-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  background: var(--pm-green);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.pm-pill-btn:hover,
.pm-pill-btn:focus-visible {
  background: var(--pm-orange);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, .15);
  text-decoration: none;
}

.pm-pill-btn:focus-visible {
  outline: none;
  box-shadow: 0 6px 15px rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 5px var(--pm-green);
}

.pm-pill-btn--orange {
  background: var(--pm-orange);
}

.pm-pill-btn--orange:hover,
.pm-pill-btn--orange:focus-visible {
  background: var(--pm-green);
}