/*
Theme Name: Kontio Motors Bootstrap
Theme URI: https://dev.kontiomotors.fi/
Author: Kontio Motors
Description: Moderni ja responsiivinen Bootstrap 5 -teema Kontio Motorsille.
Version: 1.0.0
Text Domain: kontio-bootstrap
*/

:root {
  --kontio-dark: #101512;
  --kontio-surface: #18201b;
  --kontio-green: #137181;
  --kontio-green-dark: #137181;
  --kontio-light: #f4f6f2;
  --kontio-muted: #667068;
}

html { scroll-behavior: smooth; }
body {
  color: var(--kontio-dark);
  background: #fff;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--kontio-green-dark); }
a:hover { color: #477315; }
.site-main { min-height: 55vh; }
.navbar-brand { font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }
.navbar-brand span { color: var(--kontio-green); }
.navbar .nav-link {
  color: var(--kontio-green);
  font-weight: 600;
  padding-inline: .85rem !important;
  position: relative;
}

.navbar .nav-link::after {
  position: absolute;
  right: 0.85rem;
  bottom: 0.25rem;
  left: 0.85rem;
  height: 2px;
  background-color: #ee7e29;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 250ms ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}


.navbar .nav-link:hover,
.navbar .current-menu-item > .nav-link { color: --kontio-green; }
.hero {
  position: relative;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: #fff;

  background-color: var(--kontio-dark);
  background-image:
      radial-gradient(
          circle at 85% 20%,
          rgba(140, 198, 63, 0.25),
          transparent 32%
      ),
      linear-gradient(
          120deg,
          rgba(16, 21, 18, 0.9),
          rgba(24, 32, 27, 0.65)
      ),
      var(--hero-image, none);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero::after {
  position: absolute;
  right: -8rem;
  bottom: -12rem;
  width: 38rem;
  height: 38rem;
  border: 5rem solid rgba(140,198,63,.1);
  border-radius: 50%;
  content: "";
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 900px; font-weight: 900; letter-spacing: -.045em; }
.hero .lead { max-width: 670px; color: rgba(255,255,255,.76); }
.eyebrow {
  color: var(--kontio-green);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.btn-kontio {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--kontio-green);
  --bs-btn-border-color: var(--kontio-green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--kontio-green-dark);
  --bs-btn-hover-border-color: var(--kontio-green-dark);
  font-weight: 700;
}
.section-space { padding-block: clamp(4rem, 7vw, 7rem); }
.feature-card {
  height: 100%;
  padding: 2rem;
  border: 1px solid #e6ebe4;
  border-radius: 1rem;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 1rem 3rem rgba(16,21,18,.1); }
.feature-number { color: var(--kontio-green); font-size: 2.5rem; font-weight: 900; line-height: 1; }
.bg-kontio-dark { background: var(--kontio-dark); }
.content-wrap { max-width: 840px; }
.entry-content img { max-width: 100%; height: auto; border-radius: .75rem; }
.entry-content > * + * { margin-top: 1.25rem; }
.post-card { overflow: hidden; border: 1px solid #e6ebe4; border-radius: 1rem; }
.post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.product-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border: 1px solid #e3e8e1;
  border-radius: 1.1rem;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.product-card:hover { transform: translateY(-5px); box-shadow: 0 1.25rem 3rem rgba(16,21,18,.12); }
.product-card__image {
  display: block;
  overflow: hidden;
  aspect-ratio: 3/2;
  background: var(--kontio-light);
}
.product-card__image img {
  display: block;
  width: 100%;
  height: 100% !important;
  max-width: none;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover;
  transition: transform .3s ease;
}
.product-card:hover .product-card__image img { transform: scale(1.035); }
.product-card__body { display: flex; flex-direction: column; min-height: 13rem; padding: 1.5rem; }
.product-hero { padding-block: clamp(3.5rem, 7vw, 6.5rem); background: var(--kontio-light); }
.product-hero__image {
  overflow: hidden;
  aspect-ratio: 3/2;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 1.5rem 4rem rgba(16,21,18,.1);
}
.product-hero__image img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transform: scale(1.01);
}
.product-specs {
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 1rem;
  color: #fff;
  background: var(--kontio-surface);
}
.product-specs ul { margin-bottom: 0; padding-left: 1.15rem; }
.product-specs li + li { margin-top: .65rem; }
.product-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: .9rem; background: var(--kontio-light); }
.product-video { overflow: hidden; border-radius: 1rem; }
.product-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; }
.product-cta { border-radius: 1.2rem; background: var(--kontio-dark); }
.page-header { padding-block: 5rem 3rem; background: var(--kontio-light); }
.site-footer { color: rgba(255,255,255,.65); background: var(--kontio-dark); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--kontio-green); }
.widget ul { padding-left: 0; list-style: none; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 991.98px) {
  .navbar-collapse { padding-block: 1rem; }
  .hero { min-height: 64vh; }
}