@charset "UTF-8";
/**
 * Layout & design for KIBY destinasjonssider
 */
.icon-link > .bi {
  align-self: baseline;
}

/**
 * Typography 
 */
html, body {
  font: 16px/1.6 Tahoma, Geneva, Arial, sans-serif;
}

h1 {
  font-size: 2.44rem;
  line-height: 1.33em;
  padding-top: 0.333rem;
  margin-bottom: 0.333rem;
}

h2 {
  font-size: 1.94rem;
  line-height: 1.68em;
  padding-top: 0.484rem;
  margin-bottom: 0.355rem;
}

h3 {
  font-size: 1.56rem;
  line-height: 1.04em;
  padding-top: 0.2rem;
  margin-bottom: 0.84rem;
}

h4 {
  font-size: 1.25rem;
  line-height: 1.3em;
  padding-top: 0.3rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1rem;
  padding-top: 0.5rem;
  margin-bottom: 1.13rem;
}

hr {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

ul {
  margin-top: 0.5em;
}

a:link {
  color: #D27A00;
}
a:visited {
  color: #ae6500;
}
a:hover {
  color: #D27A00;
}

/**
 * Unique Layout Elements
 */
#pageheader {
  background-image: url("../images/bokeh.jpg");
  background-position: center;
  background-size: cover;
  background-blend-mode: luminosity;
}
#pageheader.blue {
  background-color: #00274c;
}
#pageheader.teal {
  background-color: #004c27;
}
#pageheader.tan {
  background-color: #4c2700;
}
#pageheader h1 {
  font-weight: bold;
}

#banner {
  line-height: 1.2;
  color: #36854A;
  max-width: 600px;
}

#slogan {
  background-image: linear-gradient(0deg, #36854A, #86ce98 95%, #36854A);
  color: var(--bs-light);
  letter-spacing: 0.15em;
}

#sidebar .coloredVertical {
  background-color: #bfd9f2;
  border: 1px solid #00274c;
  border-bottom-width: 3px;
  padding: 0 1em 0.5em;
  margin-bottom: 1em;
}
#sidebar .coloredVertical h2 {
  color: #00274c;
}

#pagefooter {
  background-color: #cccccc;
  color: #666666;
}
#pagefooter a {
  color: inherit;
}
#pagefooter .links {
  font-size: smaller;
}
#pagefooter .links a {
  padding: 0.3em;
}

#instructor {
  background-color: #36854A;
  color: var(--bs-light);
}

/**
 * Contact Form 
 */
form#contact {
  border: 1px dashed #91bee8;
}

/**
 * Events Agenda
 */
.venue {
  font-size: larger;
  font-weight: bold;
  background-color: #00274c;
  color: var(--bs-light);
}

.eventitem {
  background-color: #cee2f5;
}

.eventinfo {
  background-color: #ddebf8;
}
.eventinfo i[class*=bi-info-circle] {
  font-size: 2em;
  color: #D27A00;
  padding: 0.75rem 0.75rem 0.25rem;
}

.calendardate {
  text-transform: uppercase;
  text-align: center;
  background-color: #00274c;
  border: 2px solid #00274c;
  border-radius: 10%;
  max-width: 4em;
  min-width: 4em;
}
.calendardate .day {
  display: block;
  color: black;
  background-color: var(--bs-light);
  font-size: 2.3em;
  font-weight: bold;
  line-height: 1.1em;
}
.calendardate .month {
  display: block;
  color: var(--bs-light);
  font-size: smaller;
}
.calendardate .year {
  display: block;
  color: var(--bs-light);
  font-size: smaller;
}

/**
 * Footnotes
 * https://www.sitepoint.com/accessible-footnotes-css/
 */
main {
  counter-reset: footnotes;
}

footer.footnotes {
  color: var(--secondary);
  font-size: 80%;
  font-weight: 400;
  border-top: 1px solid var(--secondary);
  margin-top: 3rem;
  padding-top: 0.5rem;
}
footer.footnotes ol {
  padding-left: 20px;
}

[aria-describedby=footnote-label] {
  counter-increment: footnotes;
  text-decoration: none;
  color: inherit;
  cursor: default;
  outline: none;
}
[aria-describedby=footnote-label]::after {
  content: "[" counter(footnotes) "]";
  vertical-align: super;
  font-size: 0.5em;
  margin-left: 2px;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}
[aria-describedby=footnote-label]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

/**
 * Misc Custom Classes 
 */
.logo {
  height: 60px;
  max-height: 60px;
  margin-top: -10px;
}

.navbar {
  border-bottom: 1px solid #00274c;
}

header .btn {
  background-color: #00274c;
  color: white;
}
header .btn:hover {
  background-color: #003d77;
  color: white;
}

.contact {
  text-align: right;
}

.phone {
  font-size: 1rem;
  display: block;
}

.email {
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
  display: block;
}
.email a {
  color: #00274c;
  text-decoration: none;
}

a.more::after {
  content: "…";
}

/**
 * Dark Mode
 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
  div#wrapper {
    filter: invert(100%) hue-rotate(180deg);
  }
  html {
    background-color: black;
  }
  video, iframe {
    filter: invert(100%) hue-rotate(180deg);
  }
  img:not(img[src$=".svg"]) {
    filter: invert(100%) hue-rotate(180deg) brightness(1.2) contrast(0.8);
  }
  i, .icon {
    filter: invert(15%) hue-rotate(180deg);
  }
  li::marker {
    color: var(--bs-secondary-color);
  }
}
/**
 * Print
 */
@media print {
  p, figure {
    page-break-inside: avoid;
  }
  a[href^=http]::after {
    content: " [" attr(href) "] ";
    font-size: inherit;
  }
  .fixed-top {
    position: absolute;
  }
}