/* ============================================================
   Axiologik site chrome — shared across every page.
   Base theme + navbar + footer behaviour. Page-specific styles
   live in per-page stylesheets (e.g. home.css).
   ============================================================ */

body { margin: 0; background: var(--ax-ink); color: #fff; font-family: var(--font-text); }
a { color: var(--ax-turquoise); text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Accessibility helpers ---------- */
/* Skip link — visually hidden until focused, then pinned top-left. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ax-turquoise); color: var(--ax-black);
  font-family: var(--font-text); font-size: 14px; font-weight: 500;
  padding: 10px 18px; border-radius: 8px;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* Visible keyboard focus indicator for every interactive element.
   Turquoise on dark, darkened turquoise on light contexts. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--ax-turquoise);
  outline-offset: 3px;
  border-radius: 4px;
}
.hp-section--light :focus-visible,
.hp-section--light.hp-section :focus-visible { outline-color: var(--ax-turquoise-ink); }

/* ---------- Nav (dark, with mega-dropdowns) ---------- */
.site-nav { position: relative; z-index: 20; display: flex; align-items: center; gap: 26px; height: 78px; padding: 0 clamp(24px, 4vw, 56px); }
.site-nav__brand { display: inline-flex; }
.site-nav__logo { height: 22px; width: auto; display: block; }
.site-nav__menu { display: flex; gap: 28px; margin-left: auto; align-items: center; font-family: 'IBM Plex Mono', monospace; }
.site-nav__top { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .08em; }
.site-nav__top:hover { color: #fff; }
.site-nav__cta { font-family: var(--font-text); margin-left: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ax-black); background: var(--ax-turquoise); border-radius: 999px; padding: 11px 22px; box-shadow: none; }

/* Hamburger toggle — hidden on desktop, shown at the mobile breakpoint. */
.site-nav__toggle {
  display: none; margin-left: auto;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(26,206,188,.4);
  border-radius: 8px; color: #fff; cursor: pointer;
}
.site-nav__toggle svg { width: 22px; height: 22px; display: block; }
.site-nav__toggle .icon-close { display: none; }
.site-nav[data-open="true"] .site-nav__toggle .icon-open { display: none; }
.site-nav[data-open="true"] .site-nav__toggle .icon-close { display: block; }

.nav-item { position: relative; display: flex; align-items: center; height: 78px; }
.nav-panel { position: absolute; top: 100%; left: -28px; z-index: 20; opacity: 0; visibility: hidden; transform: translateY(-8px);
      transition: opacity .22s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
      background: rgba(6,26,33,.97); border: 1px solid rgba(26,206,188,.24); border-radius: 10px;
      box-shadow: 0 24px 60px rgba(0,0,0,.55); padding: 28px 32px; }
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-cols { display: grid; gap: 34px; }
.nav-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--ax-turquoise); margin-bottom: 14px; }
.nav-link { display: block; font-family: var(--font-text); font-size: 14px; line-height: 1.35; color: rgba(255,255,255,.78);
      padding: 7px 0; white-space: nowrap; transition: color .18s ease, transform .18s ease; }
.nav-link:hover { color: var(--ax-turquoise); transform: translateX(5px); }
.nav-all { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 18px;
      border-top: 1px solid rgba(26,206,188,.18); font-size: 13px; font-weight: 500; color: #fff; }
.nav-all:hover { color: var(--ax-turquoise); }
@media (prefers-reduced-motion: reduce) { .nav-panel { transition: none; } .nav-link:hover { transform: none; } }

@media (max-width: 860px) {
  .site-nav { padding: 0 24px; }
  .site-nav__toggle { display: inline-flex; }

  /* Menu becomes a full-width dropdown panel, toggled by the hamburger. */
  .site-nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 12px 24px 24px;
    background: #061A21; border-top: 1px solid rgba(26,206,188,.24);
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    max-height: calc(100vh - 78px); overflow-y: auto;
  }
  .site-nav[data-open="true"] .site-nav__menu { display: flex; }

  .site-nav__menu > .nav-item,
  .site-nav__top { height: auto; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-nav__top { font-size: 14px; }
  .nav-item { flex-direction: column; align-items: stretch; }

  /* Collapse the hover mega-panels into inline, always-open sub-lists. */
  .nav-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 8px 0 4px 12px; margin-top: 10px;
  }
  .nav-cols { grid-template-columns: 1fr !important; gap: 18px; }
  .nav-link { white-space: normal; }
  .nav-all { margin-top: 14px; }
  .site-nav__cta { margin: 18px 0 0; justify-content: center; padding: 13px 22px; }
}

/* ---------- Subscribe / newsletter status (shared) ---------- */
/* Inline feedback for the HubSpot-wired sign-up forms (see subscribe.js).
   Sits inside each subscribe form regardless of page prefix. */
.hs-status {
  font-family: var(--font-text); font-size: 13.5px; line-height: 1.55;
  color: var(--ax-turquoise); background: rgba(26,206,188,.08);
  border: 1px solid rgba(26,206,188,.3); border-radius: 8px;
  padding: 12px 15px; margin: 14px 0 0;
  /* The subscribe forms are flex rows — take a full-width line of our own. */
  flex-basis: 100%; width: 100%; box-sizing: border-box;
}
.hs-status[hidden] { display: none; }
.hs-status--err { color: #ffb4a8; background: rgba(255,120,100,.08); border-color: rgba(255,120,100,.4); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ax-ink); color: #fff; padding: 72px clamp(24px, 4vw, 56px) 40px; border-top: 1px solid rgba(26,206,188,.2); }
.site-footer__inner { max-width: 1560px; margin: 0 auto 0 6vw; }
.site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 48px; }
.site-footer__logo { height: 26px; }
.site-footer__h { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .16em; color: var(--ax-turquoise); margin-bottom: 16px; }
.site-footer__addr { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0; }
.site-footer__contact { display: flex; flex-direction: column; gap: 10px; }
.site-footer__contact a { font-size: 13px; color: rgba(255,255,255,.72); }
.site-footer__link { display: block; font-size: 13px; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.site-footer__link:hover { color: var(--ax-turquoise); }
.site-footer__bottom { display: flex; align-items: center; gap: 24px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 26px; flex-wrap: wrap; }
.site-footer__copy { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,.4); }
.site-footer__badges { display: flex; align-items: center; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.site-footer__badges img { height: 44px; }
.site-footer__badge-img { border-radius: 4px; }
.site-footer__cert { border: 1px solid rgba(26,206,188,.3); border-radius: 4px; padding: 6px 10px; font-size: 10.5px; color: rgba(255,255,255,.65); font-family: 'IBM Plex Mono', monospace; }

@media (max-width: 860px) {
  .site-footer__inner { margin: 0 auto; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer__badges { margin-left: 0; }
}
@media (max-width: 520px) {
  .site-footer__top { grid-template-columns: 1fr; }
}