/* Shared Klar foundation. Activated only on pages carrying site-design. */
@font-face {
    font-family: 'OSC Catalog';
    src: url('../../fonts/opensans-regular-webfont.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'OSC Catalog';
    src: url('../../fonts/opensans-bold-webfont.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'OSC Catalog';
    src: url('../../fonts/opensans-semibold-webfont.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'OSC Catalog';
    src: url('../../fonts/opensans-medium-webfont.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}
.site-design {
    --site-weight-emphasis: 500;
    --catalog-ink: #182b43;
    --catalog-blue: #174d95;
    --catalog-navy: #112d55;
    --catalog-muted: #53677e;
    --catalog-line: #d9e1eb;
    --catalog-background: #f4f6f9;
    background: var(--catalog-background);
    color: var(--catalog-ink);
    font: 16px/1.65 'OSC Catalog', 'Open Sans', sans-serif;
}
.site-design .has-background-light { background: var(--catalog-background) !important; }
.site-design .header, .site-design #langbar, .site-design #footer { background: var(--catalog-blue) !important; }
.site-design #mainnav { border-bottom: 1px solid var(--catalog-line); }
.site-design #mainnav > .container, .site-design .header > .container { max-width: 1100px; }
.site-design #mainnav .navbar-item, .site-design #mainnav .navbar-link a { color: var(--catalog-ink); font-size: 14px; }
.site-design #mainnav .active { color: var(--catalog-blue); }

.site-design a:focus-visible, .site-design button:focus-visible, .site-design summary:focus-visible { outline: 3px solid #174d95; outline-offset: 3px; }

.site-design {
    --site-radius: 7px;
    --site-shadow: 0 3px 8px #112d5503;
    --site-reading-size: 16px;
    --site-reading-line-height: 1.8;
}
.site-design .site-card { background: white; border: 1px solid var(--catalog-line); border-radius: var(--site-radius); box-shadow: var(--site-shadow); }
.site-design .site-button { font-family: inherit; font-size: 14px; font-weight: var(--site-weight-emphasis); line-height: 1.5; padding: 11px 18px; min-height: 44px; height: auto; white-space: normal; border-radius: 5px; background: var(--catalog-blue) !important; border-color: var(--catalog-blue); color: white !important; }
.site-design .site-reading { font-size: var(--site-reading-size); line-height: var(--site-reading-line-height); color: var(--catalog-muted); overflow-wrap: anywhere; }

/* Keep translated desktop navigation within intermediate screen widths. */
@media (min-width: 1024px) and (max-width: 1215px) {
    .site-design #mainnav .navbar-link { padding-left: .55rem; padding-right: .55rem; }
    .site-design #mainnav .navbar-end > .navbar-item:not(.has-dropdown) { padding-left: 0; padding-right: 0; }
}

/* Opt-in form styling for additional page families. */
.site-design .site-form .input, .site-design .site-form select, .site-design .site-form .textarea {
    background: white; border: 1px solid #d4dce7; border-radius: 5px; box-shadow: none;
    font-family: inherit; font-size: 14px; color: var(--catalog-muted); min-height: 44px;
}
.site-design .site-form .input::placeholder, .site-design .site-form .textarea::placeholder { color: #61748a; opacity: 1; }
.site-design .site-form .checkbox { font-size: 13px; line-height: 1.7; color: var(--catalog-muted); }
.site-design .site-form :is(input,select,textarea):focus-visible { outline: 2px solid var(--catalog-blue); outline-offset: 2px; }
@media (max-width: 768px) {
    .site-design .site-form .input, .site-design .site-form select, .site-design .site-form .textarea { font-size: 16px; }
}

/* Keep headings and emphasis light across all Klar pages. */
.site-design :is(h1,h2,h3,h4,h5,h6,.title,.heading,strong,b) { font-weight: var(--site-weight-emphasis); }
.site-design .has-text-weight-bold,
.site-design .has-text-weight-semibold { font-weight: var(--site-weight-emphasis) !important; }

/* Editorial category followed by the article's publication date. */
.site-design .news-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 12px; }
.site-design .news-category { color: #b38300; font-size: 12px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.site-design .news-published { color: var(--catalog-muted); font-size: 13px; line-height: 1.6; }
.home-page .news-home .news-meta { margin-top: 20px; }
.home-page .news-home .news-meta + .title { margin-top: 0; }