/* Initial BSK design tokens, derived from the approved web logo. */
:root {
  --bsk-color-blue: #084c84;
  --bsk-color-yellow: #fff200;
  --bsk-color-text: #231f20;
  --bsk-color-text-on-blue: #ffffff;
  --bsk-color-background: #ffffff;
  --bsk-color-surface: #f9f9f0;
  --bsk-color-focus: #fff200;
}

/* Keep Cassiopeia's header structure and responsive navigation behavior. */
.container-header {
  background-color: var(--bsk-color-blue);
  background-image: none;
  border-bottom: 0.25rem solid var(--bsk-color-yellow);
}

.container-header .navbar-brand img {
  width: auto;
  height: auto;
  min-width: 0;
  max-width: 100%;
  max-height: clamp(6rem, 12vw, 10rem);
}

.container-header .navbar-brand,
.container-header .mod-menu {
  color: var(--bsk-color-text-on-blue);
}

.container-header a:focus-visible,
.container-header button:focus-visible {
  outline: 0.1875rem solid var(--bsk-color-focus);
  outline-offset: 0.1875rem;
}

/* Homepage shortcuts: scoped through the Menu module's project-owned class. */
.bsk-home-shortcuts .mod-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bsk-home-shortcuts .mod-menu > li {
  display: flex;
  margin: 0;
}

.bsk-home-shortcuts .mod-menu > li > a {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 1.25rem;
  color: var(--bsk-color-blue);
  font-weight: 700;
  text-decoration: none;
  background: var(--bsk-color-surface);
  border: 0.125rem solid var(--bsk-color-blue);
  border-radius: 0.5rem;
  box-shadow: 0.25rem 0.25rem 0 var(--bsk-color-yellow);
}

.bsk-home-shortcuts .mod-menu > li > a:hover {
  color: var(--bsk-color-text-on-blue);
  background: var(--bsk-color-blue);
}

.bsk-home-shortcuts .mod-menu > li > a:focus-visible {
  color: var(--bsk-color-text-on-blue);
  background: var(--bsk-color-blue);
  outline: 0.1875rem solid var(--bsk-color-focus);
  outline-offset: 0.1875rem;
  box-shadow: 0 0 0 0.125rem var(--bsk-color-blue);
}