/* One document and one navigation tree at every viewport. */
:root { --hub-header-offset: var(--hub-header-height); --hub-admin-offset: 0px; }
.hub-container { width: min(calc(100% - 2 * var(--hub-page-gutter)), var(--hub-container-max)); margin-inline: auto; }
.site-header { flex-shrink: 0; background: var(--hub-color-surface); border-bottom: 1px solid var(--hub-color-border); }
.hub-header-inner { display: flex; align-items: center; gap: var(--hub-space-4); min-height: var(--hub-header-height); padding-block: var(--hub-space-3); }
.hub-branding { display: flex; align-items: center; gap: var(--hub-space-3); min-width: 0; flex-shrink: 1; }
.hub-brand { display: grid; gap: var(--hub-space-1); color: var(--hub-color-text); text-decoration: none; line-height: 1.25; min-width: 0; }
.hub-site-name { font-size: var(--hub-text-lg); font-weight: var(--hub-weight-bold); overflow-wrap: anywhere; }
.hub-site-description { color: var(--hub-color-text-muted); font-size: var(--hub-text-xs); }
.custom-logo-link { flex: 0 0 auto; }
.custom-logo { display: block; width: auto; max-width: 150px; max-height: 74px; }
.hub-site-navigation { margin-inline-start: auto; }
.hub-primary-menu, .hub-primary-menu .sub-menu { list-style: none; margin: 0; padding: 0; }
.hub-primary-menu { display: flex; align-items: center; justify-content: flex-end; gap: var(--hub-space-1); flex-wrap: wrap; }
.hub-primary-menu > li { position: relative; display: flex; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.hub-primary-menu a { display: flex; align-items: center; min-width: 0; min-height: var(--hub-control-min); padding: var(--hub-space-2) var(--hub-space-3); border-radius: var(--hub-radius-sm); color: var(--hub-color-text); text-decoration: none; font-size: var(--hub-text-sm); font-weight: var(--hub-weight-medium); overflow-wrap: anywhere; }
.hub-primary-menu a:hover { background: var(--hub-color-surface-muted); color: var(--hub-color-link); }
.hub-primary-menu :is(.current-menu-item, .current-menu-ancestor) > a { background: var(--hub-color-info-soft); color: var(--hub-color-link); }
.hub-primary-menu .sub-menu { flex-basis: 100%; padding-inline-start: var(--hub-space-3); }
.hub-submenu-toggle svg { transition: transform var(--hub-motion-fast) var(--hub-ease); }
.hub-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.hub-icon-button.hub-menu-toggle { display: none; }
.hub-search-toggle, .hub-search-fallback { flex: 0 0 auto; }
.hub-content-layout { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) var(--hub-sidebar-width); gap: var(--hub-layout-gap); align-items: start; padding-block: var(--hub-page-padding); }
.hub-content-layout.hub-layout--full { grid-template-columns: minmax(0, 1fr); }
.hub-main-column { min-width: 0; padding: var(--hub-space-8); background: var(--hub-color-surface); border: 1px solid var(--hub-color-border); border-radius: var(--hub-radius-md); }
.hub-layout--full .hub-main-column { width: min(100%, calc(var(--hub-reading-max) + var(--hub-space-16))); margin-inline: auto; }
.hub-sidebar { min-width: 0; }
.hub-sidebar-inner { display: grid; gap: var(--hub-space-5); }
.hub-sidebar-panel { min-width: 0; padding: var(--hub-space-5); background: var(--hub-color-surface); border: 1px solid var(--hub-color-border); border-radius: var(--hub-radius-md); }
.hub-sidebar-panel ul, .hub-sidebar-panel ol { margin: 0; padding-inline-start: var(--hub-space-5); }
.hub-sidebar-panel li + li { margin-block-start: var(--hub-space-2); }
.hub-sidebar-panel a { display: inline-block; padding-block: var(--hub-space-1); font-size: var(--hub-text-sm); }
.hub-panel-title { font-weight: var(--hub-weight-semibold); font-size: var(--hub-text-sm); margin-bottom: var(--hub-space-3); }
.site-footer { --hub-color-focus: var(--hub-color-focus-inverse); flex-shrink: 0; background: var(--hub-color-footer); color: var(--hub-color-footer-text); }
.hub-footer-inner { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--hub-space-6) var(--hub-space-8); padding-block: var(--hub-space-10); }
.hub-footer-branding { flex: 1 1 14rem; max-width: 30rem; }
.hub-footer-name { display: inline-block; color: var(--hub-color-footer-text); text-decoration: none; font-size: var(--hub-text-lg); font-weight: var(--hub-weight-semibold); margin-bottom: var(--hub-space-2); }
.hub-footer-branding p { color: var(--hub-color-footer-muted); font-size: var(--hub-text-sm); }
.site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--hub-space-1) var(--hub-space-4); padding: 0; margin: 0; list-style: none; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: var(--hub-control-min); color: var(--hub-color-footer-text); font-size: var(--hub-text-sm); }
.site-footer a:hover { color: var(--hub-color-accent); }
.hub-copyright { flex-basis: 100%; padding-top: var(--hub-space-5); border-top: 1px solid #45494f; color: var(--hub-color-footer-muted); font-size: var(--hub-text-xs); }
@media (min-width: 64rem) {
    html { scroll-padding-top: calc(var(--hub-header-offset) + var(--hub-admin-offset) + var(--hub-scroll-offset)); }
    .site-header { position: sticky; top: var(--hub-admin-offset); z-index: var(--hub-layer-header); }
    .hub-sidebar { position: sticky; top: calc(var(--hub-header-offset) + var(--hub-admin-offset) + var(--hub-scroll-offset)); }
    .hub-sidebar-inner { max-height: calc(100dvh - var(--hub-header-offset) - var(--hub-admin-offset) - 2 * var(--hub-scroll-offset)); overflow-y: auto; padding: var(--hub-space-1); margin: calc(-1 * var(--hub-space-1)); }
    .hub-js .hub-primary-menu .sub-menu { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 1; width: max-content; min-width: 14rem; max-width: 19rem; padding: var(--hub-space-2); background: var(--hub-color-surface); border: 1px solid var(--hub-color-border); border-radius: var(--hub-radius-md); box-shadow: var(--hub-shadow-md); }
    .hub-js .hub-primary-menu .sub-menu li { display: flex; flex-wrap: wrap; align-items: center; }
    .hub-js .hub-primary-menu .sub-menu li > a { flex: 1 1 0%; min-width: 0; }
    .hub-js .hub-primary-menu > li:nth-last-child(-n+2) > .sub-menu { inset-inline-start: auto; inset-inline-end: 0; }
    .hub-js .hub-primary-menu .sub-menu .sub-menu { position: static; width: 100%; min-width: 0; max-width: none; padding-block: 0; border: 0; border-inline-start: 2px solid var(--hub-color-border); border-radius: 0; box-shadow: none; }
}
@media (max-width: 63.99rem) {
    html { scroll-padding-top: calc(var(--hub-admin-offset) + var(--hub-scroll-offset)); }
    .hub-content-layout { grid-template-columns: minmax(0, 1fr); }
    .hub-sidebar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hub-header-inner { flex-wrap: wrap; }
    .hub-branding { flex: 1 1 0%; }
    .hub-js .hub-menu-toggle { display: inline-grid; flex: 0 0 auto; }
    .hub-site-navigation { order: 5; width: 100%; margin-inline-start: 0; border-top: 1px solid var(--hub-color-border); padding-top: var(--hub-space-2); }
    .hub-primary-menu { align-items: stretch; flex-direction: column; }
    .hub-primary-menu > li > a { flex: 1 1 0%; }
    .hub-primary-menu .sub-menu { width: 100%; }
}
/* A shallow desktop viewport needs room to read instead of two sticky panels. */
@media (min-width: 64rem) and (max-height: 32rem) {
    html { scroll-padding-top: calc(var(--hub-admin-offset) + var(--hub-scroll-offset)); }
    .site-header, .hub-sidebar { position: static; }
    .hub-sidebar-inner { max-height: none; overflow: visible; }
}
@media (max-width: 39.99rem) {
    .hub-main-column { padding: var(--hub-space-5); }
    .hub-content-layout { gap: var(--hub-space-5); }
    .hub-sidebar-inner { grid-template-columns: minmax(0, 1fr); }
    .custom-logo { max-width: 100px; max-height: 50px; }
    .hub-site-name { font-size: var(--hub-text-base); }
    .hub-site-description { display: none; }
    .hub-header-inner { gap: var(--hub-space-2); }
    .hub-footer-inner { flex-direction: column; }
    .hub-footer-branding { flex-basis: auto; }
    .hub-copyright { width: 100%; }
}