/* Custom theme for SVA ry
   Colors: background #FDFBF5, text #18355C
   Font: Mona Sans (Google Fonts)
*/

:root{
  --bg: #FDFBF5;
  --text: #18355C;
  --text-60: color-mix(in srgb, var(--text) 60%, transparent);
  --brand: var(--text);
  --radius: 14px;
}

html, body{
  height: 100%;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: "Mona Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.navbar{
  background: var(--bg);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* Varmistus: toggler-ikoni näkyy teeman kanssa */
.navbar .navbar-toggler {
  border-color: color-mix(in srgb, var(--text) 25%, transparent);
}
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--text) 20%, transparent);
}

.navbar .navbar-brand,
.navbar .nav-link{
  color: var(--text);
  text-decoration: none;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  opacity: .75;
}

#hero .hero-logo{
  width: clamp(160px, 22vw, 220px);
}

h1,h2,h3,h4{
  color: var(--text);
  letter-spacing: -1.2px;
}

.lead{
  color: var(--text-60);
}

.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-color: #fff;
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 85%, #000 15%);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand) 85%, #000 15%);
  --bs-btn-focus-shadow-rgb: 24,53,92;
}

.form-control{
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  color: var(--text);
  border-radius: var(--radius);
  padding: .7rem .9rem;
}

.form-control:focus{
  border-color: color-mix(in srgb, var(--text) 45%, transparent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--text) 12%, transparent);
}

.form-select{
  background-color: #fff;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  color: var(--text);
  border-radius: var(--radius);
  padding: .7rem .9rem;
}
.form-select:focus{
  border-color: color-mix(in srgb, var(--text) 45%, transparent);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--text) 12%, transparent);
}

section{
  scroll-margin-top: 80px;
}

footer{
  border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
}

/* Small helpers */
a{
  color: var(--text);
}
a:hover{ opacity:.8; }

/* Responsive tweaks */
@media (min-width: 992px){
  #hero{ padding-top: 5rem; }
}


/* Lomakkeen leveys ja label-tyyli */
.form-narrow{ max-width: 640px; }
@media (min-width: 576px){
  .col-form-label{
    font-weight: 500;
    text-align: right;
    padding-right: 1rem;
  }
}