/* ==========================================================================
   JanusKS theme for Bootstrap 5.3. Everything here restyles standard Bootstrap
   classes and elements, so replacing this one file changes the theme: the pages
   use Bootstrap markup and keep working. Colour, type and motion tokens (--jks-*)
   are in diagrams.css, so the diagrams stay self-contained.

   Design idea: Janus looks both ways. Observed history in JanusKS blue on one
   side of NOW, projected scenarios in JanusKS orange on the other. Surfaces are
   separated by tone, not lines, and corners are square.

   The only custom pieces left here are the mega menu and the scroll entrances.
   ========================================================================== */

:root {
  --bs-primary: #005581;
  --bs-primary-rgb: 0, 85, 129;
  --bs-secondary: #0C2C40;
  --bs-secondary-rgb: 12, 44, 64;
  --bs-warning: #F47B20;
  --bs-warning-rgb: 244, 123, 32;
  --bs-dark: #071E2C;
  --bs-dark-rgb: 7, 30, 44;
  --bs-primary-bg-subtle: #E1EEF5;
  --bs-primary-text-emphasis: #00466A;
  --bs-warning-text-emphasis: #A64C09;
  --bs-font-sans-serif: var(--jks-font-body);
  --bs-font-monospace: var(--jks-font-mono);
  --bs-body-font-family: var(--jks-font-body);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: #071E2C;
  --bs-body-color-rgb: 7, 30, 44;
  --bs-body-bg: #F4F7F9;
  --bs-body-bg-rgb: 244, 247, 249;
  --bs-emphasis-color: #071E2C;
  --bs-emphasis-color-rgb: 7, 30, 44;
  --bs-secondary-color: #45596A;
  --bs-tertiary-bg: #E6EEF3;
  --bs-tertiary-bg-rgb: 230, 238, 243;
  --bs-link-color: #005581;
  --bs-link-color-rgb: 0, 85, 129;
  --bs-link-hover-color: #00466A;
  --bs-link-hover-color-rgb: 0, 70, 106;
  --bs-border-color: #D6E0E7;
  --bs-border-radius: .25rem;
  color-scheme: light;
}
/* Dark bands: any element with data-bs-theme="dark" */
[data-bs-theme="dark"] {
  --bs-body-color: #E9F0F5;
  --bs-body-color-rgb: 233, 240, 245;
  --bs-body-bg: #071E2C;
  --bs-body-bg-rgb: 7, 30, 44;
  --bs-tertiary-bg: #0C2C40;
  --bs-tertiary-bg-rgb: 12, 44, 64;
  --bs-secondary-color: #A9BFCE;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-warning-text-emphasis: #F7A35F;
  --bs-link-color: #8FC0DF;
  --bs-link-color-rgb: 143, 192, 223;
  --bs-link-hover-color: #B7D8EC;
  --bs-link-hover-color-rgb: 183, 216, 236;
  --bs-primary-bg-subtle: #164461;
  --bs-primary-text-emphasis: #C6E0F0;
  --bs-border-color: #2A5570;
  color-scheme: dark;
}
/* The whole page in dark mode. The script in header.php sets data-bs-theme on <html> from the system setting. */
html[data-bs-theme="dark"] {
  --bs-body-bg: #0A2536;
  --bs-body-bg-rgb: 10, 37, 54;
  --bs-tertiary-bg: #0E3046;
  --bs-tertiary-bg-rgb: 14, 48, 70;
}
[data-bs-theme="dark"] .text-primary { color: var(--bs-link-color) !important; }

/* ---------- Type ---------- */
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--jks-font-display); font-weight: 600; letter-spacing: -0.02em; text-wrap: balance;
}
h1 { font-size: var(--jks-size-display); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--jks-size-h2); line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: var(--jks-size-h3); line-height: 1.2; }
.h5 { font-size: 1.25rem; }
.h6 { font-size: var(--jks-size-small); letter-spacing: 0; }
p { max-width: 65ch; }
.lead { font-size: var(--jks-size-lead); font-weight: 400; line-height: 1.45; }
[data-bs-theme="dark"] .lead { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .lead strong { color: #fff; font-weight: 600; }
.text-bg-primary .lead { color: #D5E6F0; }
.small { font-size: var(--jks-size-small); }
.display-4, .display-5 { font-weight: 600; letter-spacing: -0.035em; }
.display-4 { font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.02; }
.display-5 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.06; }
:focus-visible { outline: 2px solid var(--jks-orange); outline-offset: 3px; }
[id] { scroll-margin-top: 7rem; }

/* Chinese, Japanese and Korean: no tight heading spacing, and more room between lines */
:root:lang(ja), :root:lang(ko), :root:lang(zh) { --bs-body-line-height: 1.8; }
:lang(ja) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5),
:lang(ko) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5),
:lang(zh) :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .h6, .display-4, .display-5) { letter-spacing: 0; line-height: 1.35; }
:lang(ja), :lang(zh) { line-break: strict; }
:lang(ko) { word-break: keep-all; }

/* ---------- Layout ---------- */
.container {
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 992px) {
  .container { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
/* The largest spacing step is generous and scales with the screen */
.py-5 { padding-block: clamp(5rem, 11vw, 10rem) !important; }
section > .container.py-5 { padding-block: clamp(3rem, 6vw, 5.5rem) !important; }
.text-bg-primary > .container.py-5 { padding-block: clamp(4rem, 7vw, 6.5rem) !important; }
.mb-5 { margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important; }

/* Long-form page columns */
article { min-width: 0; }
article h2 { margin-top: clamp(4rem, 7vw, 6rem); margin-bottom: 1.25rem; font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
article h2:first-child { margin-top: 0; }
article > section + section { margin-top: clamp(4rem, 7vw, 6rem); }

/* ---------- Buttons: square-cornered, flat ---------- */
.btn {
  --bs-btn-font-family: var(--jks-font-display); --bs-btn-font-weight: 600; --bs-btn-border-radius: 0;
  --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: .85rem;
  transition: background-color .2s var(--jks-ease), color .2s var(--jks-ease), transform .15s var(--jks-ease);
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: var(--jks-blue); --bs-btn-border-color: var(--jks-blue);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-blue-dark); --bs-btn-hover-border-color: var(--jks-blue-dark);
  --bs-btn-active-bg: #003A58; --bs-btn-active-border-color: #003A58; --bs-btn-active-color: #fff;
}
.text-bg-primary .btn-primary {
  --bs-btn-bg: var(--jks-blue-dark); --bs-btn-border-color: var(--jks-blue-dark);
  --bs-btn-hover-bg: #003A58; --bs-btn-hover-border-color: #003A58;
}
.btn-warning {
  --bs-btn-color: var(--jks-ink); --bs-btn-bg: var(--jks-orange); --bs-btn-border-color: var(--jks-orange);
  --bs-btn-hover-color: var(--jks-ink); --bs-btn-hover-bg: #F68C3B; --bs-btn-hover-border-color: #F68C3B;
  --bs-btn-active-bg: #DB6A14; --bs-btn-active-border-color: #DB6A14; --bs-btn-active-color: var(--jks-ink);
}
.btn-secondary {
  --bs-btn-color: var(--jks-on-dark); --bs-btn-bg: var(--jks-ink-2); --bs-btn-border-color: var(--jks-ink-2);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-ink-3); --bs-btn-hover-border-color: var(--jks-ink-3);
  --bs-btn-active-bg: var(--jks-ink-3); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--jks-ink-3);
}
.bg-body-tertiary .btn-secondary {
  --bs-btn-bg: var(--jks-ink-3); --bs-btn-border-color: var(--jks-ink-3);
  --bs-btn-hover-bg: #1A4A68; --bs-btn-hover-border-color: #1A4A68;
}
.btn-outline-light {
  --bs-btn-color: var(--jks-on-dark); --bs-btn-bg: transparent; --bs-btn-border-color: var(--jks-ink-3);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--jks-ink-2); --bs-btn-hover-border-color: var(--jks-ink-3);
  --bs-btn-active-bg: var(--jks-ink-2); --bs-btn-active-color: #fff; --bs-btn-active-border-color: var(--jks-ink-3);
  --bs-btn-border-width: 2px;
}
.btn-light {
  --bs-btn-color: var(--jks-blue); --bs-btn-bg: #fff; --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--jks-ink); --bs-btn-hover-bg: var(--jks-blue-soft); --bs-btn-hover-border-color: var(--jks-blue-soft);
  --bs-btn-active-bg: var(--jks-blue-soft); --bs-btn-active-color: var(--jks-ink); --bs-btn-active-border-color: var(--jks-blue-soft);
}
/* Links with a chevron: Bootstrap's icon-link, with a chevron instead of an SVG icon */
.icon-link { display: inline; font-family: var(--jks-font-display); font-weight: 600; }
.icon-link::after {
  content: "\203A"; display: inline-block; margin-left: .4em; font-size: 1.2em; line-height: 0;
  transition: transform .2s var(--jks-ease);
}
a:hover .icon-link::after { transform: translateX(3px); }

/* ---------- Header and menus ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 1040; background: var(--jks-surface); }
header.sticky-top { top: env(safe-area-inset-top, 0px); z-index: 1030; background: var(--jks-surface); }
.navbar { --bs-navbar-padding-y: .75rem; --bs-navbar-nav-link-padding-x: .85rem; }
.navbar-brand { padding: 0; margin: 0; flex: none; }
.navbar-brand img { height: 44px; width: auto; display: block; }
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar { --bs-navbar-nav-link-padding-x: .55rem; }
}
@media (min-width: 1200px) {
  .navbar-brand img { height: 48px; }
}
.navbar .nav-link { font-family: var(--jks-font-display); font-weight: 500; font-size: .875rem; color: var(--jks-text); }
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.show, .navbar .nav-link.active { color: var(--jks-accent); }
.navbar .nav-link.active { font-weight: 700; }
/* A down chevron in place of Bootstrap's triangle; it flips while the menu is open */
.navbar .dropdown-toggle::after {
  width: .46em; height: .46em; margin-left: .45em; vertical-align: .16em;
  border: 0; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg); transition: transform .2s var(--jks-ease);
}
.navbar .dropdown-toggle.show::after { transform: translateY(.14em) rotate(-135deg); }
.navbar-toggler { border: 0; background: var(--jks-ground); border-radius: 0; padding: .55rem .7rem; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23071E2C' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E9F0F5' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.dropdown-menu { --bs-dropdown-border-radius: 0; --bs-dropdown-border-width: 0; }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--jks-ink-3); --bs-dropdown-link-hover-bg: var(--jks-ink); --bs-dropdown-link-active-bg: var(--jks-blue); }
.navbar .dropdown-menu {
  --bs-dropdown-bg: var(--jks-surface); --bs-dropdown-link-color: var(--jks-text); --bs-dropdown-link-hover-color: var(--jks-text);
  --bs-dropdown-link-hover-bg: var(--jks-surface-hover); --bs-dropdown-link-active-bg: var(--jks-blue);
  --bs-dropdown-spacer: .75rem;
  padding: 1.25rem; box-shadow: 0 24px 48px -24px rgba(7, 30, 44, .45);
}
.navbar .dropdown-item { font-size: var(--jks-size-small); padding: .5rem .75rem; }
/* Mega menu: Bootstrap has no multi-column menu, so this lays out a standard dropdown-menu */
.jks-mega { min-width: min(580px, 92vw); }
.jks-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem; }
.jks-mega-intro { font-size: var(--jks-size-small); color: var(--jks-text-mute); padding: 0 .75rem 1rem; margin: 0; }
.jks-mega .dropdown-item { padding: .6rem .75rem; white-space: normal; }
.jks-mega .dropdown-item strong { display: block; font-family: var(--jks-font-display); font-weight: 600; font-size: 1rem; }
.jks-mega .dropdown-item span { display: block; font-size: var(--jks-size-small); color: var(--jks-text-mute); line-height: 1.35; }
.jks-mega .dropdown-item:active span { color: #fff; }
@media (max-width: 991.98px) {
  .navbar-collapse { padding-block: 1rem; }
  .navbar .dropdown-menu { --bs-dropdown-spacer: 0; box-shadow: none; background: var(--jks-ground); }
  .jks-mega { min-width: 0; }
  .jks-mega-grid { grid-template-columns: 1fr; }
}
/* Breadcrumbs sit on dark page headers */
.breadcrumb { --bs-breadcrumb-font-size: var(--jks-size-small); --bs-breadcrumb-item-active-color: var(--bs-body-color); }
.breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
/* Side menu */
aside .sticky-top { top: calc(env(safe-area-inset-top, 0px) + 6rem); z-index: 1; }
aside .nav {
  --bs-nav-link-padding-x: 1rem; --bs-nav-link-padding-y: .5rem; --bs-nav-link-font-size: var(--jks-size-small);
  --bs-nav-link-color: var(--jks-text-mute); --bs-nav-link-hover-color: var(--jks-text);
}
aside .nav-link { box-shadow: inset 3px 0 0 var(--bs-tertiary-bg); transition: color .2s, box-shadow .2s; }
aside .nav-link:hover { box-shadow: inset 3px 0 0 var(--jks-surface-hover); }
aside .nav-link.active { color: var(--jks-text); font-weight: 600; box-shadow: inset 3px 0 0 var(--jks-accent); }

/* ---------- Cards, lists, callouts, badges ---------- */
.card {
  --bs-card-bg: var(--jks-surface); --bs-card-border-width: 0; --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0;
  --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.6rem; --bs-card-title-spacer-y: .5rem;
  transition: background-color .2s var(--jks-ease);
}
a.card:hover { --bs-card-bg: var(--jks-surface-hover); color: var(--bs-body-color); }
.card .card-text { margin-bottom: 0; }
.text-bg-primary p { color: #D5E6F0; }
a.card.text-bg-primary:hover { background-color: var(--jks-blue-dark) !important; color: #fff !important; }
.list-group {
  --bs-list-group-bg: var(--jks-surface); --bs-list-group-color: var(--jks-text); --bs-list-group-border-width: 0; --bs-list-group-border-radius: 0;
  --bs-list-group-item-padding-x: 1.5rem; --bs-list-group-item-padding-y: 1.25rem;
  gap: 2px;
}
.list-group .h5, a.card .h5, dt.h5 { font-size: 1.1875rem; }
.alert { --bs-alert-padding-x: 1.75rem; --bs-alert-padding-y: 1.6rem; --bs-alert-margin-bottom: 2rem; --bs-alert-border-radius: 0; --bs-alert-border-color: transparent; margin-top: 2rem; }
.alert-primary { --bs-alert-color: var(--jks-text); }
.alert-primary strong { color: var(--jks-accent); }
.badge { --bs-badge-font-size: .8125rem; --bs-badge-font-weight: 600; --bs-badge-padding-x: .55rem; --bs-badge-padding-y: .3rem; --bs-badge-border-radius: 0; line-height: 1.4; white-space: normal; text-align: left; }
.blockquote p { font-family: var(--jks-font-display); font-weight: 500; font-size: var(--jks-size-lead); line-height: 1.45; margin: 0; }
.blockquote p::before { content: "\201C"; color: var(--jks-accent); }
.blockquote p::after { content: "\201D"; color: var(--jks-accent); }
.blockquote + figcaption strong { color: var(--jks-accent); font-weight: 600; }
a.link-body-emphasis h3 { transition: color .2s; }
a.link-body-emphasis:hover h3 { color: var(--jks-accent); }

.form-control { border-radius: 0; }
.list-group-numbered > .list-group-item { display: flex; }
.list-group-numbered > .list-group-item::before { font-family: var(--jks-font-display); font-weight: 600; color: var(--jks-accent); margin-right: .5rem; }
.toast { --bs-toast-border-radius: 0; --bs-toast-border-width: 0; --bs-toast-max-width: 24rem; --bs-toast-bg: var(--jks-surface); --bs-toast-color: var(--jks-text); --bs-toast-font-size: var(--jks-size-small); --bs-toast-padding-x: 1.25rem; --bs-toast-padding-y: 1.25rem; box-shadow: 0 24px 48px -24px rgba(7, 30, 44, .45); }

/* Tabs: on dark bands the active tab joins the panel below it */
.nav-tabs { --bs-nav-tabs-border-radius: 0; --bs-nav-link-font-size: var(--jks-size-small); --bs-nav-link-font-weight: 500; }
.nav-tabs .nav-link { font-family: var(--jks-font-display); }
[data-bs-theme="dark"] .nav-tabs {
  --bs-nav-tabs-border-color: var(--jks-graph-edge); --bs-nav-tabs-border-width: 2px;
  --bs-nav-link-color: var(--jks-on-dark); --bs-nav-link-hover-color: #fff; --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: #fff; --bs-nav-tabs-link-active-bg: var(--jks-graph-future);
  --bs-nav-tabs-link-active-border-color: var(--jks-graph-edge) var(--jks-graph-edge) var(--jks-graph-future);
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--jks-orange); }
@media (max-width: 575.98px) {
  .nav-tabs { --bs-nav-link-padding-x: .6rem; --bs-nav-link-font-size: .8125rem; flex-wrap: nowrap; }
  .nav-tabs .nav-link { white-space: nowrap; }
}

/* ---------- Tables ---------- */
.table { --bs-table-bg: var(--jks-surface); --bs-table-color: var(--jks-text); --bs-table-border-color: var(--jks-ground); margin: 0; font-size: var(--jks-size-small); }
.table > :not(caption) > * > * { padding: 1.1rem; border-bottom-width: 2px; vertical-align: top; }
.table thead th { background: var(--jks-ground); font-family: var(--jks-font-display); font-weight: 600; font-size: .9375rem; color: var(--jks-text); box-shadow: inset 0 -3px 0 var(--jks-accent); border-bottom: 0; padding-block: .8rem; }
.table thead th.text-bg-primary { box-shadow: inset 0 -3px 0 var(--jks-orange); }
.table tbody th { font-family: var(--jks-font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; width: 27%; }
.table:has(thead th:nth-child(4)) tbody th { width: 21%; }
.table-primary { --bs-table-bg: var(--jks-surface-hover); --bs-table-color: var(--jks-text); --bs-table-border-color: var(--jks-ground); }
/* Phones: each row becomes a card, with the column name from data-label */
@media (max-width: 767.98px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table th, .table td { display: block; width: 100%; }
  .table tbody tr { margin-bottom: .75rem; background: var(--jks-surface); }
  .table > :not(caption) > * > * { border-bottom: 0; padding: .35rem 1.1rem; }
  .table tbody th { width: 100% !important; padding-top: 1.1rem; }
  .table tbody td:last-child { padding-bottom: 1.1rem; }
  .table td::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 400; color: var(--jks-text-mute); margin: .35rem 0; }
}

/* ---------- Footer ---------- */
footer a { color: var(--bs-body-color); text-decoration: none; transition: color .2s; }
footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer a.btn:hover { text-decoration: none; }
footer .btn-link { --bs-btn-font-family: var(--jks-font-body); --bs-btn-font-weight: 400; --bs-btn-font-size: var(--jks-size-small); --bs-btn-color: var(--bs-body-color); --bs-btn-hover-color: #fff; text-decoration: none; }
footer .btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
footer .pt-5 { padding-top: clamp(4rem, 7vw, 6rem) !important; }
/* Wide screens: the logo's lettering sits on the first heading's baseline, and the text below starts level with the first links */
@media (min-width: 1200px) {
  footer .col-xl-3 > a { height: 74px; margin-top: -22px; }
}

/* ---------- Scroll entrances: no Bootstrap equivalent; pages show normally without them ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.jks-anim [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--jks-ease), transform .7s var(--jks-ease); }
  html.jks-anim [data-reveal] > :nth-child(2) { transition-delay: .08s; }
  html.jks-anim [data-reveal] > :nth-child(3) { transition-delay: .16s; }
  html.jks-anim [data-reveal] > :nth-child(4) { transition-delay: .24s; }
  html.jks-anim [data-reveal] > :nth-child(n+5) { transition-delay: .32s; }
  html.jks-anim [data-reveal].is-in > * { opacity: 1; transform: none; }
  /* Jump links: allow for the 24px the content slides up after the page has scrolled to it */
  html.jks-anim [data-reveal]:not(.is-in) [id] { scroll-margin-top: calc(7rem + 24px); }
}