/* =====================================
Typography */
   :root{
  --font-sans: "Fira Sans Condensed", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", Times, serif;
}


body { font-family: var(--font-sans); }

/* Headings*/
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); }
h1, h2 { font-weight: 400; }

  /*Extra typography classes*/ 
.sans { font-family: var(--font-sans);}  
.serif { font-family: var(--font-serif);}  
   
/*html {
  scroll-padding-top: 6em; 
}
*/

/* Skip-link */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 999;
  background: #333333;
  color: #f4f4f4;
  padding: .5rem 1rem;
  border-radius: .25rem;
}

/* =====================================
   3. Scrollbar (vain WebKit-selaimet)
   ===================================== */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: #137752;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f55;  /* hover-light-redin sävy */
}

/* Back-to-top button */
#UpBtn {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
/*#UpBtn:focus {
  outline: 2px solid #5f5; /* kontrastinen fokus
}*/

.arrow-button {
  width: 3rem;
  height: 3rem;
  cursor: pointer;
}
  
/*Smooth scroll*/
html {
  scroll-behavior: smooth;
  scroll-padding-top: 4em;
}




/*Mobile menu*/

.menu-toggle {
	width: 2rem;
	height: 2rem;
	transition: transform 0.5s ease;
	z-index: 1;
	cursor: pointer;
}

.menu a {
    display: block;
}

.menu.active {
    display: block;
}

.menu-toggle:focus-visible {
    outline: 0.2rem solid #FF725C;
	outline-offset: 0.2rem;
}


.menu-toggle .slice {
  display: block;
  width: 100%;
  height: 0.125rem;
  background-color: #333333;
  transition: all 0.5s ease;
}

.menu-toggle .slice:not(:first-child) {
  margin-top: 0.60rem;
}

button[aria-expanded=true] .slice:nth-child(1) {
  transform: translateY(0.75rem) rotate(45deg);
  background-color: #137752;
}

button[aria-expanded=true] .slice:nth-child(2) {
  opacity: 0;
}

button[aria-expanded=true] .slice:nth-child(3) {
  transform: translateY(-0.75rem) rotate(-45deg);
  background-color: #137752;
}

/*Material Symbols*/

.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 24
}