.elementor-308 .elementor-element.elementor-element-15c885f3{--display:flex;--min-height:100px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;box-shadow:0px 0px 10px 0px #000000;--margin-top:0%;--margin-bottom:0%;--margin-left:0%;--margin-right:0%;--padding-top:0%;--padding-bottom:0%;--padding-left:0%;--padding-right:0%;--z-index:95;}.elementor-308 .elementor-element.elementor-element-15c885f3:not(.elementor-motion-effects-element-type-background), .elementor-308 .elementor-element.elementor-element-15c885f3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-308 .elementor-element.elementor-element-15c885f3.e-con{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-308 .elementor-element.elementor-element-a866bd1.elementor-element{--align-self:center;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:1024px){.elementor-308 .elementor-element.elementor-element-15c885f3{--min-height:85px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--padding-top:0%;--padding-bottom:0%;--padding-left:5%;--padding-right:5%;}}@media(max-width:767px){.elementor-308 .elementor-element.elementor-element-15c885f3{--min-height:65px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-around;--border-radius:1px 1px 1px 1px;}.elementor-308 .elementor-element.elementor-element-e62cd90.elementor-element{--order:-99999 /* order start hack */;--flex-grow:0;--flex-shrink:1;}.elementor-308 .elementor-element.elementor-element-a866bd1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 30px;}.elementor-308 .elementor-element.elementor-element-a866bd1.elementor-element{--align-self:center;--order:99999 /* order end hack */;--flex-grow:0;--flex-shrink:1;}}/* Start custom CSS for container, class: .elementor-element-15c885f3 */<nav class="kirsi-menu" aria-label="Päävalikko">
  <button class="kirsi-menu-toggle" aria-label="Avaa valikko">
    <span></span>
    <span></span>
    <span></span>
  </button>

  <ul>
    <li class="active"><a href="#">Etusivu</a></li>
    <li><a href="#">Kirjat</a></li>
    <li><a href="#">Tekstit</a></li>
    <li><a href="#">Yhteys</a></li>
  </ul>
</nav>

<style>
/* ================================
   KIRSI – ELEGANT HAMBURGER MENU
   ================================ */

.kirsi-menu {
  position: relative;
}

/* ===== HAMBURGER BUTTON ===== */
.kirsi-menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  padding: 10px 9px;
  cursor: pointer;
}

/* LINES */
.kirsi-menu-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #1F2933;
  margin: 4px 0;
  transition: all 0.25s ease;
}

/* ===== MENU BASE ===== */
.kirsi-menu ul {
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* LINKS */
.kirsi-menu a {
  font-family: "Inter", sans-serif;
  font-size: 14.5px;
  color: #4B5563;
  text-decoration: none;
  padding: 8px 4px;
  position: relative;
}

/* ACTIVE */
.kirsi-menu .active a {
  font-weight: 500;
  color: #1F2933;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .kirsi-menu-toggle {
    display: block;
  }

  .kirsi-menu ul {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    background: #F4F1EE;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    padding: 16px 20px;
    flex-direction: column;
    gap: 14px;
    min-width: 180px;
  }

  .kirsi-menu.open ul {
    display: flex;
  }

  .kirsi-menu a {
    font-size: 15px;
    padding: 6px 0;
  }
}
</style>

<script>
  const toggle = document.querySelector('.kirsi-menu-toggle');
  const menu = document.querySelector('.kirsi-menu');

  toggle.addEventListener('click', () => {
    menu.classList.toggle('open');
  });
</script>/* End custom CSS */