/* ================================================================
   nonodon-hub.css  (www.nonodon.com: header that slides up out of the
                     way while you scroll down and comes back when you
                     scroll up, plus phone-width fixes for the hub page)
   REV 0.1  |  20261102  |  Nonodon LLC
   Loads after assets/styles.css. Works with nonodon-hub.js; without the
   script the header is the ordinary full header and the page still
   gets the phone-width fixes.
   Widths: 780px and up = full header (Apps, Services, About, Dark mode,
           Contact in one row).
           Under 780px = slim row (logo, Contact, Menu); the links and
           Dark mode open under Menu. Under 420px Menu shows its icon only.
   ================================================================ */
html{scroll-padding-top:84px}
.site-header.js-head{position:sticky;top:0;z-index:60;transition:transform .28s ease,opacity .28s ease;will-change:transform}
.site-header.js-head.is-up{transform:translateY(calc(-100% - 4px));opacity:0;pointer-events:none}
.hub-head-tools{display:none}
.site-header .hub-menu{display:none}

@media (max-width:779.98px){
  .site-header.js-head .wrap{flex-wrap:nowrap;gap:12px;padding-top:12px;padding-bottom:12px;position:static}
  .site-header.js-head .brand{min-width:0;flex:0 1 auto}
  .site-header.js-head .brand-logo{height:30px}
  .site-header.js-head .hub-head-tools{display:flex;align-items:center;gap:10px;margin-left:auto;flex:none}
  .site-header.js-head .hub-head-cta{padding:10px 16px;font-size:15px;white-space:nowrap}
  .site-header.js-head .hub-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
    font:600 15px/1 var(--sans);color:var(--on-black);background:transparent;
    border:1px solid var(--brand-grey);border-radius:6px;cursor:pointer}
  .site-header.js-head .hub-menu:hover{border-color:var(--accent)}
  .site-header.js-head .hub-menu svg{display:block}
  .site-header.js-head .hub-menu .hub-menu-x{display:none}
  .site-header.js-head.is-open .hub-menu .hub-menu-bars{display:none}
  .site-header.js-head.is-open .hub-menu .hub-menu-x{display:block}
  /* the link list, opened by Menu */
  .site-header.js-head .nav{display:none;position:absolute;left:0;right:0;top:calc(100% + 1px);
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:4px 24px 18px;background:var(--black);
    border-bottom:1px solid #2E2C2B;max-height:calc(100vh - 80px);overflow:auto}
  .site-header.js-head.is-open .nav{display:flex}
  .site-header.js-head .nav>a{display:flex;align-items:center;min-height:48px;font-size:17px;border-bottom:1px solid #2E2C2B}
  .site-header.js-head .nav>.theme-toggle{align-self:flex-start;margin-top:14px;min-height:44px;font-size:15px}
  .site-header.js-head .nav>.btn{display:none}
}
@media (max-width:640px){
  .site-header.js-head .wrap{padding-left:16px;padding-right:16px}
  .site-header.js-head .nav{padding-left:16px;padding-right:16px}
  .site-header.js-head .brand-logo{height:26px}
}
@media (max-width:419.98px){
  .site-header.js-head .hub-menu{padding:0 11px}
  .site-header.js-head .hub-menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .site-header.js-head .hub-head-cta{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){
  .site-header.js-head{transition:none}
}

/* Phone-width fixes: nothing may be wider than the screen */
.grid-2,.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.svc-band .wrap{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.product-top{flex-wrap:wrap}
@media (max-width:640px){
  .hub-hero{padding-top:56px;padding-bottom:40px}
  .hub-hero h1{font-size:clamp(32px,8.5vw,38px)}
  .tile{padding:24px;min-height:0}
  .tile-app .name{font-size:24px}
  .svc-band .wrap{gap:40px;padding-top:56px;padding-bottom:56px}
  .about-strip{padding-top:56px;padding-bottom:56px}
  .about-strip p{font-size:20px}
  .form{padding:20px}
  .site-footer .wrap{flex-direction:column}
}