@charset "UTF-8";
/**
 * Trøndelag fylkeskommune — custom theme
 *
 * Visual language taken from https://www.trondelagfylke.no/
 *   - Oswald (condensed) for headings, Muli for body text — both self-hosted
 *   - Signature yellow #fade29 used for CTAs, the header rule and the "/" motif
 *   - Deep petrol #003f51 for headings and the footer, warm sand tones for surfaces
 *   - Square corners throughout; their design system uses no border radius
 *
 * Note: their brand teal #008a93 only reaches 4.15:1 on white, which fails WCAG
 * AA for body-size text. We use #00757d (5.47:1) instead — visually near
 * identical, but compliant. Bergen is the canonical WCAG project, and this site
 * is public sector, so contrast is verified rather than eyeballed.
 */
/**
 * Customer Theme Base
 *
 * Import this file in your customer style.scss after defining your brand colors.
 * This automatically applies your colors to Bootstrap and CompanyCast components.
 *
 * Required variables:
 *   $primary-color: Your main brand color (hex)
 *
 * Optional variables (with Bootstrap defaults):
 *   $secondary-color: Secondary buttons/badges (default: #6c757d)
 *   $success-color: Success messages/alerts (default: #198754)
 *   $info-color: Info messages/alerts (default: #0dcaf0)
 *   $warning-color: Warning messages/alerts (default: #ffc107)
 *   $danger-color: Danger/error messages, live indicators (default: #dc3545)
 *   $light-color: Light backgrounds/borders (default: #f8f9fa)
 *   $dark-color: Dark text/backgrounds (default: #212529)
 *   $font-sans-serif: Sans-serif font stack (default: system fonts)
 *   $font-monospace: Monospace font stack (default: system monospace fonts)
 *   $body-font-size: Base font size (default: 1rem)
 *   $body-line-height: Base line height (default: 1.5)
 *   $body-color: Default text color (default: #212529)
 *   $body-bg: Default background color (default: #fff)
 *   $border-radius: Default border radius (default: 0.375rem)
 *   $border-color: Default border color (default: #dee2e6)
 *
 * Usage:
 *   $primary-color: #3b65a3;
 *   $danger-color: #d7272d;
 *   @import '../../../app/assets/customer-site/customer-theme-base';
 */
:root {
  --bs-primary: #00757d;
  --bs-primary-rgb: 0, 117, 125;
  --bs-secondary: #4a4a4a;
  --bs-secondary-rgb: 74, 74, 74;
  --bs-success: #198754;
  --bs-success-rgb: 25, 135, 84;
  --bs-info: #0dcaf0;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning: #ffc107;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger: #db3b19;
  --bs-danger-rgb: 219, 59, 25;
  --bs-light: #f8f9fa;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark: #212529;
  --bs-dark-rgb: 33, 37, 41;
  --bs-link-color: #00757d;
  --bs-link-hover-color: #00454a;
  --bs-font-sans-serif: Muli, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.5;
  --bs-body-color: #4a4a4a;
  --bs-body-bg: #fff;
  --bs-border-radius: 0;
  --bs-border-color: #cdc9af;
  --link-color: #00757d;
  --link-hover-color: #00757d;
  --link-focus-color: #00757d;
  --primary-color: #00757d;
  --primary-hover-color: #00757d;
  --focus-outline-color: #00757d;
}

a:hover {
  text-decoration: underline;
}

.btn-primary {
  --bs-btn-bg: #00757d;
  --bs-btn-border-color: #00757d;
  --bs-btn-hover-bg: #00454a;
  --bs-btn-hover-border-color: #00454a;
  --bs-btn-active-bg: #002d31;
  --bs-btn-active-border-color: #002d31;
  --bs-btn-disabled-bg: #00757d;
  --bs-btn-disabled-border-color: #00757d;
}

.btn-secondary {
  --bs-btn-bg: #4a4a4a;
  --bs-btn-border-color: #4a4a4a;
  --bs-btn-hover-bg: #313131;
  --bs-btn-hover-border-color: #313131;
  --bs-btn-active-bg: #242424;
  --bs-btn-active-border-color: #242424;
}

.btn-success {
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-bg: #115c39;
  --bs-btn-hover-border-color: #115c39;
  --bs-btn-active-bg: #0d462c;
  --bs-btn-active-border-color: #0d462c;
}

.btn-info {
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-bg: #0aa1c0;
  --bs-btn-hover-border-color: #0aa1c0;
  --bs-btn-active-bg: #098da7;
  --bs-btn-active-border-color: #098da7;
}

.btn-warning {
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-bg: #d39e00;
  --bs-btn-hover-border-color: #d39e00;
  --bs-btn-active-bg: #ba8b00;
  --bs-btn-active-border-color: #ba8b00;
}

.btn-danger {
  --bs-btn-bg: #db3b19;
  --bs-btn-border-color: #db3b19;
  --bs-btn-hover-bg: #ad2f14;
  --bs-btn-hover-border-color: #ad2f14;
  --bs-btn-active-bg: #962911;
  --bs-btn-active-border-color: #962911;
}

.navbar {
  border-bottom-color: #00757d !important;
}

.badge.bg-primary {
  background-color: #00757d !important;
}

.badge.bg-secondary {
  background-color: #4a4a4a !important;
}

.badge.bg-success {
  background-color: #198754 !important;
}

.badge.bg-info {
  background-color: #0dcaf0 !important;
}

.badge.bg-warning {
  background-color: #ffc107 !important;
}

.badge.bg-danger {
  background-color: #db3b19 !important;
}

.archive-card.has-live-webcast {
  border-left-color: #db3b19 !important;
}
.archive-card.has-webcast-today {
  border-left-color: #00757d !important;
}

a:focus,
button:focus,
.btn:focus {
  outline-color: #00757d !important;
}

.chapter-item:hover .chapter-timestamp {
  background-color: #00757d !important;
}

.share-chapter-badge-btn:hover,
.share-chapter-badge-btn:focus {
  background-color: #00757d !important;
}

@font-face {
  font-family: "Oswald";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/oswaldregular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/oswaldmedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/oswaldsemibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/oswaldbold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/muliregular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/muliregularitalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/mulisemibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Muli";
  src: url("/files/customers/trondelag-fylkeskommune/fonts/mulibold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
body {
  background-color: #fff;
  font-family: "Muli", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-weight: 500;
  color: #003f51;
  letter-spacing: 0.01em;
}

main#main-content h2:not(.visually-hidden),
#archives-heading {
  display: flex;
  align-items: center;
  font-size: clamp(1.9rem, calc(1.4rem + 1.6vw), 2.75rem);
  font-weight: 600;
  margin-bottom: 1.75rem;
}
main#main-content h2:not(.visually-hidden)::before,
#archives-heading::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.2em;
  height: 1.05em;
  margin-right: 0.4em;
  background-color: #fade29;
  transform: skewX(-18deg);
  vertical-align: -0.08em;
}

#site-header {
  background-color: #fff;
  border-bottom: 6px solid #fade29;
}

#navbar-primary {
  background-color: #fff;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 0 !important;
}
#navbar-primary .navbar-brand {
  padding: 0;
  margin-right: 2rem;
}
#navbar-primary .navbar-brand-logo {
  height: 58px;
  width: auto;
  max-width: 100%;
}
#navbar-primary .nav-link {
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #003f51;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
#navbar-primary .nav-link:hover, #navbar-primary .nav-link:focus {
  color: #00757d;
  text-decoration: none;
  box-shadow: inset 0 -4px 0 0 #fade29;
}
#navbar-primary .navbar-nav > .nav-item + .nav-item::before {
  content: "";
  display: none;
  width: 2px;
  height: 1.15em;
  margin: 0 0.15rem;
  background-color: #e9d016;
  transform: skewX(-18deg);
  align-self: center;
}
@media (min-width: 992px) {
  #navbar-primary .navbar-nav > .nav-item + .nav-item::before {
    display: block;
  }
  #navbar-primary .navbar-nav > .nav-item {
    display: flex;
    align-items: center;
  }
}
#navbar-primary .dropdown-menu {
  border-radius: 0;
  border: 1px solid #cdc9af;
  border-top: 3px solid #fade29;
  box-shadow: 0 6px 18px rgba(0, 63, 81, 0.12);
}
#navbar-primary .dropdown-menu .dropdown-item {
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-weight: 400;
  color: #003f51;
}
#navbar-primary .dropdown-menu .dropdown-item:hover, #navbar-primary .dropdown-menu .dropdown-item:focus {
  background-color: #ebe9df;
  color: #003f51;
}
#navbar-primary .navbar-toggler {
  border-color: #cdc9af;
  border-radius: 0;
}

#navbar-secondary {
  background-color: #f5f4ef;
  border-top: 1px solid #cdc9af;
}
#navbar-secondary .form-control {
  border-radius: 0;
  border-color: #cdc9af;
}
#navbar-secondary .form-control:focus {
  border-color: #00757d;
  box-shadow: 0 0 0 0.2rem rgba(0, 117, 125, 0.2);
}
#navbar-secondary .btn {
  border-radius: 0;
}
#navbar-secondary .input-group .btn-outline-secondary {
  background-color: #fade29;
  border-color: #e9d016;
  color: #003f51;
}
#navbar-secondary .input-group .btn-outline-secondary:hover, #navbar-secondary .input-group .btn-outline-secondary:focus {
  background-color: #e9d016;
  color: #003f51;
}
#navbar-secondary #languageDropdown {
  border-color: #cdc9af;
  color: #003f51;
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#navbar-secondary #languageDropdown:hover, #navbar-secondary #languageDropdown:focus {
  background-color: #fade29;
  border-color: #e9d016;
  color: #003f51;
}

.archive-cards-grid {
  row-gap: 1.5rem;
}

.archive-card {
  border: 1px solid #cdc9af;
  border-radius: 0;
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.archive-card .card-header {
  background-color: #ebe9df;
  border-bottom: 1px solid #cdc9af;
  padding: 0.9rem 1.1rem;
}
.archive-card .card-header .h5 {
  display: flex;
  align-items: center;
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: #003f51;
}
.archive-card .card-header .h5::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.19em;
  height: 1em;
  margin-right: 0.45em;
  background-color: #fade29;
  transform: skewX(-18deg);
  vertical-align: -0.08em;
}
.archive-card .card-body {
  padding: 1.1rem;
}
.archive-card:hover {
  box-shadow: 0 6px 20px rgba(0, 63, 81, 0.13);
  transform: translateY(-2px);
}
.archive-card.has-webcast-today {
  border-left: 5px solid #fade29 !important;
}
.archive-card.has-live-webcast {
  border-left: 5px solid #db3b19 !important;
}

.badge.badge-count {
  background-color: #fade29 !important;
  color: #003f51 !important;
  border-radius: 0;
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  padding: 0.3em 0.6em;
  min-width: 2em;
}

.recent-webcasts-list li {
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid #ebe9df;
}
.recent-webcasts-list li:last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.webcast-title-link {
  color: #003f51;
  font-weight: 600;
  text-decoration: none;
}
.webcast-title-link:hover, .webcast-title-link:focus {
  color: #00757d;
  text-decoration: underline;
}

.text-secondary.small {
  color: #5f5d52 !important;
}

.fa-calendar,
.far.fa-calendar {
  color: #00757d;
}

.btn {
  border-radius: 0;
  font-family: "Oswald", "Muli", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.btn-primary {
  --bs-btn-bg: #fade29;
  --bs-btn-border-color: #e9d016;
  --bs-btn-color: #003f51;
  --bs-btn-hover-bg: #e9d016;
  --bs-btn-hover-border-color: #003f51;
  --bs-btn-hover-color: #003f51;
  --bs-btn-active-bg: #e9d016;
  --bs-btn-active-border-color: #003f51;
  --bs-btn-active-color: #003f51;
  --bs-btn-disabled-bg: #fade29;
  --bs-btn-disabled-border-color: #e9d016;
  --bs-btn-disabled-color: #003f51;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:disabled,
.btn-primary.disabled {
  color: #003f51 !important;
}

#site-footer {
  background-color: #003f51;
  border-top: 6px solid #fade29;
  color: #fff;
  margin-top: 3.5rem;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}
#site-footer p,
#site-footer .text-secondary {
  color: #fff !important;
}
#site-footer a,
#site-footer .footer-link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
#site-footer a:hover, #site-footer a:focus,
#site-footer .footer-link:hover,
#site-footer .footer-link:focus {
  color: #fade29;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #003f51;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(250, 226, 41, 0.55);
}

.skip-link:focus {
  background-color: #fade29;
  color: #003f51;
  outline: 3px solid #003f51;
}

.modal-content {
  border-radius: 0;
  border: 1px solid #cdc9af;
  border-top: 6px solid #fade29;
}

.modal-header {
  background-color: #f5f4ef;
  border-bottom: 1px solid #cdc9af;
}

kbd {
  background-color: #003f51;
  border-radius: 0;
}