/* =======================================
   Navigaatio – pää- ja mobiilivalikko
   Jo Designs
======================================= */

/* ==== Menu === */
.main-navigation a {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #292929;
  transition: color 0.3s ease, background-color 0.3s ease;
  outline-offset: 3px;
  padding: 0.6em 1em;
  display: inline-block;
}

/* --- Hover- ja focus-tilat --- */
.main-navigation a:hover,
.main-navigation a:focus {
  color: #292929;
  background-color: #D8DCCF; /* vaalea sage hover-tausta */
  text-decoration: none;
}

/* --- Näkyvä focus-viiva näppäimistönavigointiin (WCAG) --- */
.main-navigation a:focus-visible {
  outline: 2px solid #b9955d; /* Golden ochre */
  background-color: #F5F3ED;
}

/* --- Aktiivinen sivu (esim. Palvelut) --- */
.main-navigation .current-menu-item > a {
  color: #b9955d; /* Golden ochre */
  background-color: transparent;
}

/* --- Estä Palvelut-linkin korostus alasivuilla --- */
.main-navigation .current-menu-parent > a {
  color: #292929;
}

/* --- Korosta vain aktiivinen alasivu kullalla --- */
.main-navigation .current-menu-parent .current-menu-item > a {
  color: #b9955d;
}

/* --- Estä hover-efekti aktiivisella linkillä --- */
.main-navigation .current-menu-item > a:hover,
.main-navigation .current-menu-parent .current-menu-item > a:hover {
  color: #b9955d;
  background-color: transparent;
}

/* --- Mobiilivalikko yhtenäiseksi --- */
@media (max-width: 768px) {
  /* --- Tausta ja perusasetukset --- */
  #mobile-navigation,
  .main-navigation.toggled ul {
    background-color: #f9f8f7; /* cream-tausta */
  }

  #mobile-navigation a {
    font-family: var(--font-body);
    color: #292929 !important;
    opacity: 1 !important;
    font-size: 1.05rem;
    font-weight: 500;
    display: block;
    padding: 0.55em 1.1em;
    background: transparent;
    transition: color 0.25s ease, background-color 0.25s ease;
    border-bottom: 1px solid rgba(183,197,166,0.35); /* hento sage brush -viiva */
  }

  /* --- Hover- ja focus-tilat --- */
  #mobile-navigation a:hover,
  #mobile-navigation a:focus {
    color: #b9955d;
    background-color: #EAE8E0;
  }

  /* --- Aktiivinen sivu kullalla --- */
  #mobile-navigation .current-menu-item > a,
  #mobile-navigation .current-menu-parent .current-menu-item > a {
    color: #b9955d;
    background: transparent;
  }

  /* --- Estä Palvelut-linkin korostus alasivuilla --- */
  #mobile-navigation .current-menu-parent > a {
    color: #292929;
  }

  #mobile-navigation a:focus-visible {
    outline: 2px solid #b9955d;
    background-color: #F5F3ED;
  }
}

@media (max-width: 768px) {
  .main-navigation {
    display: none;
  }

  .mobile-menu-toggle {
    display: block;
  }
}