.al-shell, .al-shell *,
.al-footer, .al-footer * { box-sizing: border-box; }

.al-wrap {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 .75rem;
}
@media (min-width: 576px)  { .al-wrap { max-width: 540px; } }
@media (min-width: 768px)  { .al-wrap { max-width: 720px; } }
@media (min-width: 992px)  { .al-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .al-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .al-wrap { max-width: 1320px; } }

.al-shell {
  position: relative;
  z-index: 1020;
  background: var(--al-surface);
  border-bottom: 1px solid var(--al-100);
  font-family: var(--al-sans);
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--al-900);
}

.al-shell-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  min-height: 4rem;
}

.al-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--al-900);
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.al-brand:hover { color: var(--al-green-800); text-decoration: none; }
.al-mark { display: block; flex: 0 0 auto; }

.al-burger {
  display: none;
  margin-left: auto;
  padding: .5rem;
  border: 1px solid var(--al-100);
  border-radius: var(--al-radius);
  background: var(--al-surface);
  color: var(--al-900);
  cursor: pointer;
  line-height: 0;
}
.al-burger:hover { border-color: var(--al-green-800); color: var(--al-green-800); }

.al-nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 1.5rem;
}

.al-nav-list,
.al-nav-side,
.al-dd-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.al-nav-list { display: flex; align-items: center; gap: .25rem; }
.al-nav-side { display: flex; align-items: center; gap: .25rem; margin-left: auto; }

.al-nav-a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .45rem .7rem;
  border-radius: var(--al-radius);
  color: var(--al-700);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color var(--al-fast) var(--al-ease),
    background-color var(--al-fast) var(--al-ease);
}
.al-nav-a:hover,
.al-nav-a:focus-visible { background: var(--al-green-50); color: var(--al-green-900); text-decoration: none; }

.al-nav-a[aria-current="page"] {
  color: var(--al-green-800);
  box-shadow: inset 0 -2px 0 var(--al-green-800);
  border-radius: var(--al-radius) var(--al-radius) 0 0;
}

.al-nav-login {
  border: 1px solid var(--al-green-800);
  color: var(--al-green-800);
  font-weight: 500;
}
.al-nav-login:hover,
.al-nav-login:focus-visible { background: var(--al-green-800); color: var(--al-on-accent); }

.al-nav-admin { color: var(--al-danger); }
.al-nav-badge { padding-left: .35rem; padding-right: .35rem; }

.al-badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: var(--al-radius-pill);
  background: var(--al-100);
  color: var(--al-800);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.al-badge-on { background: var(--al-green-800); color: var(--al-on-accent); }

.al-dd { position: relative; }
.al-dd > summary { list-style: none; }
.al-dd > summary::-webkit-details-marker { display: none; }
.al-caret { flex: 0 0 auto; opacity: .6; transition: transform var(--al-fast) var(--al-ease); }
.al-dd[open] > summary .al-caret { transform: rotate(180deg); }

.al-dd-list {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  z-index: 30;
  min-width: 13rem;
  padding: .35rem 0;
  background: var(--al-surface);
  border: 1px solid var(--al-100);
  border-radius: var(--al-radius);
  box-shadow: var(--al-shadow);
}
.al-dd-end { left: auto; right: 0; }
.al-dd-a {
  display: block;
  padding: .45rem .9rem;
  color: var(--al-900);
  text-decoration: none;
  white-space: nowrap;
}
.al-dd-a:hover,
.al-dd-a:focus-visible { background: var(--al-green-50); color: var(--al-green-900); text-decoration: none; }
.al-dd-a[aria-current="true"] { color: var(--al-green-800); font-weight: 600; }

.al-lang-code { text-transform: uppercase; font-size: .875rem; letter-spacing: .04em; }

.al-theme {
  border: 0;
  background: transparent;
  font: inherit;
}
.al-theme .al-sun { display: none; }
[data-bs-theme="dark"] .al-theme .al-sun { display: block; }
[data-bs-theme="dark"] .al-theme .al-moon { display: none; }

@media (max-width: 991px) {
  .al-burger { display: inline-flex; }
  .al-nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
    padding: .5rem 0 1rem;
    border-top: 1px solid var(--al-100);
  }
  .al-shell.al-open .al-nav { display: flex; }
  .al-nav-list,
  .al-nav-side { flex-direction: column; align-items: stretch; margin-left: 0; }
  .al-nav-item { width: 100%; }
  .al-nav-a { width: 100%; justify-content: space-between; white-space: normal; }
  .al-nav-a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--al-green-800); border-radius: var(--al-radius); }
  .al-dd-list {
    position: static;
    min-width: 0;
    margin: 0 0 .25rem .75rem;
    padding: 0;
    border: 0;
    border-left: 2px solid var(--al-100);
    border-radius: 0;
    box-shadow: none;
  }
  .al-dd-a { white-space: normal; }
  .al-nav-login { justify-content: center; margin-top: .5rem; }
}

.al-footer {
  margin-top: 3rem;
  padding: 2.5rem 0 1.5rem;
  background: var(--al-ink);
  color: var(--al-on-ink-text);
  font-family: var(--al-sans);
  font-size: .9375rem;
  line-height: 1.5;
}

.al-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1.5rem 2rem;
}

.al-footer-h {
  margin: 0 0 .75rem;
  color: var(--al-on-ink);
  font-weight: 600;
}

.al-footer-list { margin: 0; padding: 0; list-style: none; }
.al-footer-list li { margin-bottom: .4rem; }
.al-footer a { color: var(--al-on-ink-link); text-decoration: none; }
.al-footer a:hover,
.al-footer a:focus-visible { color: var(--al-on-ink); text-decoration: underline; }

.al-footer-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--al-on-ink-line);
}
.al-footer .al-brand-light { color: var(--al-on-ink); }
.al-footer .al-brand-light:hover { color: var(--al-on-ink-link); text-decoration: none; }
.al-footer .al-social { display: inline-flex; color: var(--al-on-ink-muted); }
.al-footer .al-social:hover { color: var(--al-on-ink); }
.al-copy { margin: 0 0 0 auto; color: var(--al-on-ink-muted); font-size: .875rem; }

@media (max-width: 575px) {
  .al-copy { margin-left: 0; flex: 1 1 100%; }
}