/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Regular.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Plus_Jakarta_Sans/static/PlusJakartaSans-Bold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* bricolage-grotesque-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/** 
 * Fonttimäärittely ja järjestys
 * Ensisijaisina Adoben Freigt Sans Pro ja Halyard Micro. 
 * leipäteksti 
 * font-family: "Freight Sans Pro", "Inter", sans-serif;
 * font-weight: 400; (strong: 700);
 * otsikot
 * font-family: "Halyard Micro", "Bricolage Grotesque", sans-serif;
 * font-weight: 700; (tai Bricolagessa myös 800)
 * kursiivi otsikko
 * font-family: "Halyard micro dollar", "Bricolage Grotesque", sans-serif;
 * font-weight: 700;
 * font-style: italic;
 */


/**
 * Värimäärittelyt
 * */

/* Kuke 2022 */
$mokkamarenki:#f2f2f2; // harmaa
$linkkimeri:#006579; // merensininen
$marraskuu:#97b9d3; // harmaansininen
$unimaailma:#6199bc; // sininen
$ylioppilas:#8484d1; // violetti
$vaellushousut:#6e8e2f; // vihrea
$tikkari:#e87c5b; // lohi

/* EVL 2024 */
$mokkamarenki:#f2f2f2;
$linkkimeri:#112077;
$kyntopelto:#554728;
$marraskuu:#97b9d3; // harmaansininen
$unimaailma:#4daae6;
$unimaailma:#1d36c6;
$ylioppilas:#942e75;
$vaellushousut:#3f841f;
$tikkari:#c24700;

/* salva */
$green:#25835c;
$lightgreen:#c7eae2;
$dark:#2c2c2c;
$medium:#575757;
$light:#f6fcf9;
$blue:#0563c1;
$luumu:#3b1c32;

/* yleiset */
$black:#000000;
$white:#f5f5f5;
$medium:#555555;
$turkoosi:#003f44;
$turkoosiLight:#00595b;
$blue-50:#00373b;
$beige:#f9eac2;
$white:#ffffff;
$lightfont:#fff4e8;

/* Laskentavakka */
$pinkki:#ffd6e0;
$sininen:#1c2d58;
$harmaa:#f5efec;

$red:#86360D;
/*$yellow:#f7edd7; /* rgba 247,237,215 */
$yellow:#fff4e8;
$oranssi:#ff9b73;
$lohi:#f4a57a;


/* HKK */
$musta:#000000;
$vaaleansininen:#64d0ff;
$pinkkitint:#dc83d5;
$punainen:#ff5f7b;
$keltainen:#ff9f58;

/** 
 * Fonttimäärittely ja järjestys
 * Ensisijaisina Adoben Freigt Sans Pro ja Halyard Micro. 
 * leipäteksti 
 * font-family: "Freight Sans Pro", "Inter", sans-serif;
 * font-weight: 400; (strong: 700);
 * otsikot
 * font-family: "Halyard Micro", "Bricolage Grotesque", sans-serif;
 * font-weight: 700; (tai Bricolagessa myös 800)
 * kursiivi otsikko
 * font-family: "Halyard micro dollar", "Bricolage Grotesque", sans-serif;
 * font-weight: 700;
 * font-style: italic;
 */


body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: $black;
  font-size: 18px;
  font-weight: 400;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  color: $sininen;
  i,
  em {
    font-style: italic;
  }
  b,
  strong {
    font-weight: 800;
  }
}
h1, .h1 {
  font-size: 1.7rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  &.h2 {
    border-bottom: 0;
  }
  @media(max-width: 768px) {
    font-size: 1.7rem;
  }
}
h2, .h2 {
  font-size: 1.7rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
p {
  line-height: 1.5em;
  padding-bottom: 1rem;
}
a {
  &:focus {
    outline: 2px solid $sininen;
  }
  &.ei-alleviivausta {
    text-decoration: none !important;
  }
}
strong {
  font-weight: 700;
}

.layout-container a {
  color: $black;
  text-decoration: none;
  font-weight: 500;
  &:hover {
    color: $sininen;
    text-decoration: none;
  }
}
.layout-container,
.layout-container article {
  h2 a {
    text-decoration: none;
    font-weight: 700;
  }
  h3 a {
    color: $green;
    font-weight: 700;
  }
}
.contextual-links {
  &,
  a,
  li {
    background-color: $lohi !important;
  }
  &,
  a {
    color: $turkoosi !important;
    font-weight: normal;
  }
  a:hover {
    background-color: $yellow !important;
    color: $black !important;
  }
  a:hover,
  a:focus {
    outline: 2px solid $turkoosi !important;
  }
  border: 1px solid $black !important;
  border-radius: 0px !important;
}

img, 
iframe {
  max-width: 100%;
}
img {
  height: auto;
}

.icon-some,
.icon-facebook,
.icon-instagram,
.icon-youtube {
  fill: $yellow;
  height: 30px;
}

a.fill-light path {
  color: $light;
}


.user-login-form,
.user-pass {
  padding: 0 5rem 5rem 5rem;
}
hr {
  color: $linkkimeri;
  padding-bottom: 2rem;
  margin-top: 4rem;
}

.link-internal,
.link-external {
  padding-left: 1.5rem;
  position: relative;
  &::before {
    width: 1rem;
    height: 1rem;
    left: 0rem;
    color: $linkkimeri;
    position: absolute;
  }
}
.link-internal {
  &::before {
    content: '>';
  }
}
.link-external {
  &::before {
    content: '⧉';
  }
}
.vertical-align-top {
  td {
    vertical-align: top;
  }
}

.kuvituskuvat {
  img {
    padding-bottom: 10px;
  }
}

.kuvituskuva {
  padding-bottom: 1rem;
}

figcaption {
  font-style: italic;
}

.placeholder {
  background-color: $white !important;
}

/* Webform */
.form-item-zipcode,
.form-item-state {
  display: none;
}

/* Add2any */
.a2a_kit a {
  margin: 25px 0;
}

/* Drupal messages */
.messages__wrapper {
  padding: 1rem;
  background-color: $lightgreen;
  text-align: center;
  margin: 2rem 0rem;
}


/* General padding, bootstrap override
 - Bootstrap rule is this:
 padding-right: calc(var(--bs-gutter-x)* .5);
 padding-left: calc(var(--bs-gutter-x)* .5);
 */
.row>* {
  padding-right: calc(var(--bs-gutter-x)* 1);
  padding-left: calc(var(--bs-gutter-x)* 1);
}

/**
 * Import all other files
 * */
@import '_buttons';
@import '_header';
@import '_navigation';
@import '_customblocks';
@import '_etusivu';
@import '_content';
@import '_footer';