/* =======================================
   Napit ja CTA-kontit
   Jo Designs
======================================= */

/* =======================================
   NAPIT – Jo Designs
======================================= */
/* Perustyyli kaikille napeille */
.btn,
.jo-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: clamp(0.85rem, 1vw + 0.6rem, 1rem);
  padding: clamp(0.6rem, 1vw + 0.4rem, 0.9rem) clamp(1.2rem, 1.8vw + 0.5rem, 1.8rem);
  border: none;
  border-radius: 0;
  cursor: pointer;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn:hover,
.jo-btn:hover{
  color: #fff;
  text-decoration: none;
	transition: all 0.3s;
}

.btn:focus-visible,
.jo-btn:focus-visible {
  outline: 2px solid #b9955d; /* Golden ochre focus */
  outline-offset: 3px;
}

/* --- Värivariaatiot --- */
.btn--rose,
.jo-btn--rose {
  background-color: #B67861; /* Canyon rose */
}
.btn--rose:hover,
.jo-btn--rose:hover {
  background-color: #9F5F4C;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* Sage - ghost */
.btn--sage,
.jo-btn--sage {
 background-color: var(--sage-brush);
  border: 1.5px solid var(--sage-brush);
  color: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.btn--sage:hover,
.jo-btn--sage:hover {
  background-color: #8A8E74;
  border-color: #8A8E74;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(158, 161, 132, 0.2);
}

/* Golden ochre */
.btn--ochre,
.jo-btn--ochre {
  background-color: #A7844E;
}

.btn--ochre:hover,
.jo-btn--ochre:hover {
  background-color: #946F3C;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* Rose gold - ghost */
.btn--roseg,
.jo-btn--roseg {
  background-color: var(--rose-gold);
  border: 1.5px solid var(--rose-gold);
  color: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.btn--roseg:hover,
.jo-btn--roseg:hover {
  background-color: var(--rose-gold);
  border-color: var(--rose-gold);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(183, 110, 121, 0.2);
}

/* --- Fokus-tila saavutettavuuteen --- */
a:focus-visible,
.btn:focus-visible,
.jo-btn:focus-visible {
  outline: clamp(2px, 0.25vw, 3px) solid var(--color-accent);
  outline-offset: clamp(2px, 0.3vw, 4px);
  border-radius: 0; 
  box-shadow: 0 0 0 clamp(2px, 0.3vw, 4px) rgba(185, 149, 93, 0.4); /* Golden ochre hehku */
}

/* --- Custom pastelli (esim. korttinapit) --- */
.button-custom {
  background-color: var(--canyon-rose-light);
  color: var(--muted-brown);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: clamp(0.7rem, 1vw + 0.5rem, 1.1rem) clamp(1.2rem, 1.5vw + 0.8rem, 1.8rem);
  font-size: clamp(0.9rem, 1vw + 0.4rem, 1rem);
  border: 1px solid var(--canyon-rose);
  border-radius: 2px;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
}

.button-custom:hover {
  background-color: var(--canyon-rose);
  border-color: var(--rose-gold);
  color: var(--muted-brown);
  box-shadow: 0 4px 12px rgba(233, 217, 209, 0.4);
  transform: none;
  cursor: pointer;
	text-decoration: none;
}

/* --- CTA-kontit (hero, osiot, footer jne.) --- */
.cta-buttons,
.cta-final__buttons {
  display: flex;
  justify-content: center;
  gap: clamp(0.6rem, 1.5vw, 1.2rem);
  flex-wrap: wrap;
  margin-top: clamp(1.6rem, 2.5vw, 2.2rem);
  margin-bottom: clamp(1.8rem, 3vw, 3rem);
}

.cta-buttons--compact {
  gap: clamp(0.4rem, 1vw, 0.8rem);
  margin-top: clamp(1rem, 1.5vw, 1.5rem);
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
}

@media (max-width: 600px) {
  .cta-buttons {
    flex-direction: column;
    align-items: center; 
    gap: 0.8rem;
    margin-top: 1.5rem;
  }

  .cta-buttons .btn,
  .cta-buttons .jo-btn,
  .cta-buttons .button-custom {
    max-width: 260px; 
    text-align: center;
    white-space: normal;
    line-height: 1.4;
  }
}