@import url('./hub-brand.css');
/* Shared Hub navigation. Page data and content styles remain with each page. */
#hub-shell {
  --hub-teal: var(--minc-turquoise);
  --hub-teal-dark: var(--minc-link);
  --hub-teal-tint: var(--minc-soft);
  --hub-ink: var(--minc-ink);
  --hub-muted: var(--minc-muted);
  --hub-line: var(--minc-line);
  position: sticky;
  top: 0;
  z-index: 10;
  color: var(--hub-ink);
  font: 400 15px/1.3 'Mulish', sans-serif;
}
#hub-shell .hub-top {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--minc-paper);
  border-bottom: .5px solid var(--hub-line);
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
}
#hub-shell h1 { flex: 1; min-width: 0; margin: 0; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hub-shell,#hub-shell *{box-sizing:border-box}
#hub-shell .hub-brand-lockup{display:flex;align-items:center;gap:15px;flex:none}
#hub-shell .hub-logo{display:block;position:relative;width:130px;height:32px;overflow:hidden;flex:none;background:#fff;border-radius:2px}
#hub-shell .hub-logo img{position:absolute;width:152px;height:152px;max-width:none;left:-9.5px;top:-59px}
#hub-shell .hub-product{font-size:14px;font-weight:700;border-left:1px solid var(--hub-line);padding-left:15px;color:var(--hub-muted)}
#hub-shell .hub-date { color: var(--hub-muted); font-size: 11px; white-space: nowrap; }
#hub-shell .hub-search, #hub-shell .hub-avatar { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%; color: var(--hub-muted); text-decoration: none; }
#hub-shell .hub-search svg, #hub-shell .hub-avatar svg { width: 20px; height: 20px; }
#hub-shell .hub-avatar { background: var(--hub-teal-tint); color: var(--hub-teal-dark); font-size: 12px; font-weight: 800; }
#hub-shell .hub-search:hover { background: var(--hub-teal-tint); color: var(--hub-teal-dark); }
#hub-shell a:focus-visible { outline: 3px solid var(--hub-teal-dark); outline-offset: 2px; }
#hub-shell .hub-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  background: var(--minc-paper);
  border-top: .5px solid var(--hub-line);
  padding: 6px max(4px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
}
#hub-shell .hub-nav a { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 50px; padding: 3px 2px 8px; text-align: center; text-decoration: none; color: var(--hub-muted); font-size: 11.5px; }
#hub-shell .hub-nav a[hidden] { display: none; }
#hub-shell .hub-nav svg { width: 24px; height: 24px; flex: none; }
#hub-shell .hub-nav a[aria-current=page] { color: var(--hub-teal-dark); font-weight: 700; }
#hub-shell .hub-nav a[aria-current=page]::after { position: absolute; bottom: 1px; content: ''; width: 18px; height: 3px; border-radius: 2px; background: var(--hub-teal); }
body.hub-page > main, body.hub-page > #app > main { min-width: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 560px) { #hub-shell .hub-date,#hub-shell .hub-product { display: none; } #hub-shell h1{font-size:15px} #hub-shell .hub-top{gap:8px} #hub-shell .hub-search,#hub-shell .hub-avatar{width:38px;height:38px} }
@media (max-width: 359px) { #hub-shell .hub-nav a { font-size: 11px; } }
@media (max-width: 899px) {
  body.hub-page > main, body.hub-page > #app > main { padding-left: max(15px, env(safe-area-inset-left, 0px)); padding-right: max(15px, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 900px) {
  #hub-shell .hub-top { padding-left:24px;gap:22px; }
  #hub-shell .hub-nav { top:calc(65px + env(safe-area-inset-top, 0px)); right:auto; width:calc(180px + env(safe-area-inset-left, 0px)); flex-direction:column; gap:4px; overflow-y:auto; border-top:0; border-right:.5px solid var(--hub-line); padding:20px 10px max(16px, env(safe-area-inset-bottom, 0px)) calc(10px + env(safe-area-inset-left, 0px)); }
  #hub-shell .hub-nav a { flex: 0 0 auto; flex-direction: row; justify-content: flex-start; min-height: 44px; gap: 9px; padding: 9px 12px; border-radius: 8px; font-size: 14px; text-align: left; }
  #hub-shell .hub-nav svg { width: 18px; height: 18px; }
  #hub-shell .hub-nav a[aria-current=page] { background: var(--hub-teal-tint); }
  #hub-shell .hub-nav a[aria-current=page]::after { display: none; }
  body.hub-page > main, body.hub-page > #app > main { margin-left: calc(180px + env(safe-area-inset-left, 0px)); padding-bottom: max(32px, env(safe-area-inset-bottom, 0px)); }
}