/* Avakode Hub: header and footer, on EVERY page (hub pages and the parent's cabinet / docs / pricing pages).
   Everything is under .hub-chrome / .hub-* so the parent's generic rules cannot reach it and it reaches nothing else.
   No glass, no shadows (only focus outlines), hairlines only, one motion curve: var(--ease). */

.hub-chrome {
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.hub-chrome *,
.hub-chrome *::before,
.hub-chrome *::after { box-sizing: inherit; }
.hub-chrome a { color: inherit; text-decoration: none; }
.hub-chrome ul { list-style: none; margin: 0; padding: 0; }
:where(.hub-chrome) button { font: inherit; color: inherit; } /* :where(): zero specificity, so the component classes below set their own font */
.hub-chrome :focus-visible,
.hub-cc :focus-visible,
.hub-skip:focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 3px; border-radius: 4px; }

.hub-wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; }

/* skip link: first child of the (sticky) header, so it is positioned against the header and shares its tokens */
.hub-skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 10px 16px; border-radius: 999px; background: var(--signal-fill); color: #fff;
  font: 600 14px/1.2 var(--text);
  transition: top .4s var(--ease);
}
.hub-chrome .hub-skip { color: #fff; } /* .hub-chrome a { color: inherit } is more specific than .hub-skip */
.hub-skip:focus { top: 12px; }
#hub-content { outline: none; } /* the skip target on the parent's pages: an empty anchor, not a control */
#main, #hub-content { scroll-margin-top: var(--hub-bar, 72px); } /* the jump lands under the sticky bar, not behind it */

/* buttons: pills, the icon in its own circle, one primary per screen */
.hub-btn {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; cursor: pointer;
  padding: 12px 14px 12px 20px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: var(--fg);
  font: 600 15px/1.2 var(--text);
  transition: transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.hub-chrome .hub-btn,
.hub-cc .hub-btn { color: var(--fg); }
.hub-btn:hover { border-color: rgba(169,139,255,.5); }
.hub-btn:active { transform: scale(.98); }
.hub-btn--pri,
body.hub-page .hub-btn--pri,
.hub-chrome .hub-btn--pri,
.hub-cc .hub-btn--pri { background: var(--signal-fill); border-color: transparent; color: #fff; }
.hub-btn--pri:hover,
body.hub-page .hub-btn--pri:hover,
.hub-chrome .hub-btn--pri:hover,
.hub-cc .hub-btn--pri:hover { background: var(--signal-hot); border-color: transparent; color: var(--bg); }
.hub-btn--sm { padding: 8px 10px 8px 14px; font-size: 13.5px; gap: 8px; }
.hub-cc .hub-btn--sm:not(.hub-btn--pri) { padding-right: 14px; }
.hub-btn__ico {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); font-style: normal; font-size: 13px; line-height: 1;
  transition: transform .5s var(--ease), background .5s var(--ease);
}
.hub-btn--sm .hub-btn__ico { width: 22px; height: 22px; font-size: 11px; }
.hub-btn:hover .hub-btn__ico { transform: translate(2px, -1px); }
.hub-btn--pri:hover .hub-btn__ico { background: rgba(7,6,11,.12); }

/* header: a hairline bar, no blur */
.hub-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
/* WP admin bar: 32 px (46 px up to 782 px). Up to 600 px the bar is absolute and scrolls away, so the sticky header goes back to 0. */
body.admin-bar .hub-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .hub-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .hub-header { top: 0; } }
.hub-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--hub-bar); }
/* The logo is one thing in the header and in the footer (owner 16.10; template-parts/logo.php): the sizes and the gap are
   on the logo itself, never per place, so the two cannot drift apart. */
.hub-logo { display: inline-flex; align-items: center; flex: none; gap: 14px; border-radius: 4px; }
/* owner 16.10: the mark 50 px high, the word at 0.6 px a unit (its letters about 26 px high); the bar grows with it (--hub-bar) */
.hub-logo__mark { display: block; height: 50px; width: auto; }
.hub-logo__word { display: block; height: 32.4px; width: auto; }
@media (max-width: 480px) {
  .hub-logo { gap: 10px; }
  .hub-logo__mark { height: 40px; }
  .hub-logo__word { height: 27px; }
}
/* the cursor of the wordmark, in the header and in the footer, blinks like a terminal cursor, hard on and off, without end
   (owner 16.10); steady with reduced motion (and with ?static=1, hub.css) */
.hub-logo .hub-cursor { animation: hub-blink 1.06s var(--ease) infinite; }
@keyframes hub-blink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }

.hub-menu-toggle { display: none; }
.hub-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.hub-nav__list { display: flex; align-items: center; gap: 24px; }
.hub-nav__item { position: relative; }
.hub-nav__link {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 0;
  border: 0; background: none; cursor: pointer;
  font: 400 14.5px/1.4 var(--text); color: var(--fg-2);
  transition: color .4s var(--ease);
}
.hub-chrome .hub-nav__link { color: var(--fg-2); }
.hub-nav__link:hover,
.hub-chrome .hub-nav__link:hover,
.hub-nav__item.is-open > .hub-nav__link { color: var(--fg); }
.hub-nav__caret {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .4s var(--ease);
}
.hub-nav__item.is-open > .hub-nav__link .hub-nav__caret { transform: rotate(-135deg); margin-top: 3px; }
.hub-nav__sub {
  position: absolute; left: -14px; top: calc(100% + 8px); z-index: 2; min-width: 220px; padding: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility 0s var(--ease) .4s;
}
.hub-nav__item.is-open > .hub-nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
html:not(.hub-js) .hub-nav__item--drop:hover > .hub-nav__sub,
html:not(.hub-js) .hub-nav__item--drop:focus-within > .hub-nav__sub { opacity: 1; visibility: visible; transform: none; }
.hub-nav__sublink {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: 14.5px; color: var(--fg-2);
  transition: color .4s var(--ease), background .4s var(--ease);
}
.hub-chrome .hub-nav__sublink { color: var(--fg-2); }
.hub-nav__sublink:hover,
.hub-chrome .hub-nav__sublink:hover { color: var(--fg); background: rgba(255,255,255,.05); }
/* the group title is the burger panel's heading for the families (narrow screens only; the wide menu has the button) */
.hub-nav__group { display: none; }
/* the page of a family: its item in the list is marked (aria-current), the Products button reads as current too: brighter, with a hairline of the signal color under it */
.hub-nav__item.is-current > .hub-nav__link { color: var(--fg); padding-bottom: 7px; border-bottom: 1px solid var(--signal); }
.hub-chrome .hub-nav__sublink[aria-current="page"] { color: var(--fg); background: rgba(255,255,255,.05); padding-left: 10px; border-left: 2px solid var(--signal); }
.hub-nav__actions { display: flex; align-items: center; gap: 14px; }
.hub-nav__logout { font-size: 13.5px; color: var(--fg-2); transition: color .4s var(--ease); }
.hub-nav__logout[hidden] { display: none; }
.hub-chrome .hub-nav__logout:hover { color: var(--fg); }

/* footer */
.hub-footer { border-top: 1px solid var(--line); padding: 64px 0 36px; color: var(--fg-2); font-size: 14px; }
.hub-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 32px; }
.hub-footer__tag { margin: 14px 0 0; color: var(--muted); font: 500 12px/1.6 var(--mono); letter-spacing: .04em; }
.hub-footer .hub-footer__col h2 {
  margin: 0 0 12px; font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.hub-footer__col ul { display: grid; gap: 6px; }
.hub-footer__col a { transition: color .4s var(--ease); }
.hub-chrome .hub-footer__col a:hover { color: var(--fg); }
.hub-footer__bottom {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font: 12px/1.6 var(--mono);
}

/* consent banner (strict opt-in; behaviour: window.forgeConsent, hub.js on hub pages, forge.js on the parent's pages) */
.hub-cc {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90;
  max-width: 760px; margin-inline: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); color: var(--fg-2);
  font: 400 14px/1.5 var(--text);
}
.hub-cc[hidden] { display: none; }
.hub-cc__inner { display: flex; align-items: center; gap: 18px; padding: 16px 18px; }
.hub-cc__text { margin: 0; flex: 1 1 auto; }
.hub-cc__text a { color: var(--signal-hot); text-decoration: underline; text-underline-offset: 3px; }
.hub-cc__actions { display: flex; gap: 8px; flex: none; }

/* narrow screens: the menu is a full-screen panel under the bar */
@media (max-width: 960px) {
  .hub-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-footer__brand { grid-column: 1 / -1; }
  .hub-cc__inner { flex-direction: column; align-items: stretch; }
  .hub-cc__actions { justify-content: flex-end; }

  html.hub-js .hub-menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer;
    font: 500 13.5px/1 var(--text); color: var(--fg);
    transition: border-color .5s var(--ease);
  }
  html.hub-js .hub-menu-toggle:hover { border-color: rgba(169,139,255,.5); }
  .hub-menu-toggle__bars { position: relative; width: 14px; height: 8px; }
  .hub-menu-toggle__bars i { position: absolute; left: 0; width: 14px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
  .hub-menu-toggle__bars i:first-child { top: 0; }
  .hub-menu-toggle__bars i:last-child { top: 6.5px; }
  .hub-menu-toggle[aria-expanded="true"] .hub-menu-toggle__bars i:first-child { top: 3.25px; transform: rotate(45deg); }
  .hub-menu-toggle[aria-expanded="true"] .hub-menu-toggle__bars i:last-child { top: 3.25px; transform: rotate(-45deg); }

  html:not(.hub-js) .hub-header__bar { flex-wrap: wrap; height: auto; padding: 12px 0; }
  html:not(.hub-js) .hub-nav { flex-direction: column; align-items: flex-start; width: 100%; gap: 12px 20px; }
  html:not(.hub-js) .hub-nav__list { flex-wrap: wrap; gap: 4px 20px; }

  html.hub-js .hub-nav {
    position: fixed; left: 0; right: 0; top: var(--hub-bar); bottom: 0; z-index: 49;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 28px;
    margin: 0; padding: 12px 16px 32px; overflow-y: auto;
    background: var(--bg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s var(--ease) .5s;
  }
  html.hub-js .hub-nav.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  html.hub-menu-open { overflow: hidden; }
  .hub-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hub-nav__item { border-bottom: 1px solid var(--line); }
  .hub-nav__link { width: 100%; justify-content: space-between; padding: 16px 0; font: 500 26px/1.1 var(--display); letter-spacing: -.02em; color: var(--fg); }
  .hub-chrome .hub-nav__link { color: var(--fg); }
  /* Products here is a heading of a group, not a button (the families are four ordinary rows under it, no second tap): the
     button is off (it is also gone for a screen reader), the title takes its place, the list is always open and its links
     look like the other rows of the panel; each row has its own hairline, so the group item has none */
  .hub-nav__drop-toggle { display: none; }
  .hub-nav__group {
    display: block; padding: 4px 0 8px;
    font: 500 11px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .hub-nav__item--drop { border-bottom: 0; }
  .hub-nav__sub {
    position: static; display: block; min-width: 0; padding: 0;
    border: 0; border-radius: 0; background: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .hub-nav__sub > li { border-top: 1px solid var(--line); }
  .hub-nav__sublink { padding: 16px 0; border-radius: 0; font: 500 26px/1.1 var(--display); letter-spacing: -.02em; }
  .hub-chrome .hub-nav__sublink { color: var(--fg); }
  .hub-chrome .hub-nav__sublink:hover { background: none; }
  .hub-chrome .hub-nav__sublink[aria-current="page"] { color: var(--signal-hot); background: none; padding-left: 0; border-left: 0; }
  .hub-nav__actions { justify-content: space-between; }
  .hub-nav__actions .hub-btn { padding: 14px 16px 14px 22px; font-size: 16px; }
}

/* a short window (a small phone, a landscape phone): the panel is the same list, set tighter, so the whole menu (the group
   of four families, About, the button) fits without a scroll (visual audit 5.7: 360×740 needed 682 px and had 668) */
@media (max-width: 960px) and (max-height: 760px) {
  html.hub-js .hub-nav { gap: 16px; padding-top: 4px; padding-bottom: 20px; }
  .hub-nav__link { padding: 10px 0; font-size: 22px; }
  .hub-nav__group { padding: 0 0 6px; }
  .hub-nav__sublink { padding: 10px 0; font-size: 22px; }
  .hub-nav__actions .hub-btn { padding: 11px 14px 11px 20px; font-size: 15px; }
}

/* the full-screen panel starts under the bar, which starts under the WP admin bar (32 px; 46 px up to 782 px and kept there up to 600 px) */
@media (max-width: 960px) { html.hub-js body.admin-bar .hub-nav { top: calc(var(--hub-bar) + 32px); } }
@media (max-width: 782px) { html.hub-js body.admin-bar .hub-nav { top: calc(var(--hub-bar) + 46px); } }

@media (max-width: 520px) {
  .hub-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-logo .hub-cursor { animation: none; }
  .hub-btn, .hub-btn__ico, .hub-nav__link, .hub-nav__caret, .hub-nav__sub, .hub-nav__sublink, .hub-skip,
  .hub-menu-toggle__bars i, .hub-nav, html.hub-js .hub-nav { transition: none; } /* html.hub-js .hub-nav: the burger panel's own rule is more specific than .hub-nav */
}