/*
Theme Name: Kiinnikepaja Ollie
Template: ollie
Version: 1.0.0
*/

/* HERO overlay video/hero-lohkon päälle */
.kp-hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(10px, 4vw, 16px);
  z-index: 5;
}

/* “Glass”/kortti + tumma tausta videon yli */
.kp-hero-card{
  max-width: 960px;
  width: 100%;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 18px;

  /* teeman fontit */
  font-family: inherit;

  /* teeman värit (WP preset variables) */
  color: var(--wp--preset--color--brand-white, #fff);

  /* varmistaa luettavuuden videon päällä */
  background-color: rgba(22, 22, 21, 0.62);
  background-color: var(--kp-hero-card-bg, rgba(22, 22, 21, 0.62));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow: 0 16px 50px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}

.kp-hero-eyebrow{
  margin: 0 0 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .9;
}

.kp-hero-title{
  margin: 0 0 12px;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.15;
  font-weight: 700;
}

.kp-hero-lead{
  margin: 0 0 18px;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.5;
  max-width: 70ch;
}

.kp-hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.kp-hero-btn{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;

  background: var(--wp--preset--color--brand-orange, #FC532B);
  color: var(--wp--preset--color--brand-white, #fff);
}

.kp-hero-link{
  text-decoration: none;
  font-weight: 700;
  color: var(--wp--preset--color--brand-white, #fff);
  opacity: .95;
}

.kp-hero-link:hover{ text-decoration: underline; }

/* tärkeä: overlay toimii vain jos vanhempi on position:relative */
.wp-block-cover,
.wp-block-group,
.wp-block-media-text{
  position: relative;
}

.kp-badge-orange{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;

  background: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-white);
}

.kp-btn-orange{
  background: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-white);
}

.kp-btn-orange:hover{
  filter: brightness(1.05);
}

/* vaihtoehtoinen "kevyt" nappi */
.kp-btn-outline{
  background: transparent;
  border: 2px solid var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-orange);
}

.kp-btn-outline:hover{
  background: var(--wp--preset--color--brand-orange);
  color: var(--wp--preset--color--brand-white);
}

.kp-accent{
  color: var(--wp--preset--color--brand-orange);
}