/* ==========================================================================
   SITE CHROME (shared): identical in the www and blog repos. Change both together.
     www:  src/styles/50-chrome.css      blog: src/assets/css/chrome.css
   Header (dark / light glass, switches with the section beneath it), products
   mega menu, mobile menu and footer. Self-contained: it relies on nothing from
   either site's own stylesheet except a box-sizing reset.
   Markup: partials/chrome-header.njk, chrome-footer.njk. Behaviour: chrome.js.
   ========================================================================== */

:root {
  --chrome-h: 72px;
  --chrome-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chrome-ink: #0a0a0b;
  --chrome-dark: #1a1b20;
  --chrome-footer-bg: #131418;
  --chrome-muted: #6b6d74;
  --chrome-line: rgba(10, 10, 11, 0.08);
  --chrome-line-dark: rgba(255, 255, 255, 0.1);
  --chrome-blue: #175bff;
  --chrome-max: 1440px;
  --chrome-gutter: clamp(20px, 4vw, 48px);
  --chrome-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 992px) {
  :root {
    --chrome-h: 80px;
  }
}

html {
  scroll-padding-top: calc(var(--chrome-h) + 16px);
}

/* Header ------------------------------------------------------------------ */
.site-header {
  --ch-fg: #fff;
  --ch-fg-soft: rgba(255, 255, 255, 0.78);
  --ch-hover: rgba(255, 255, 255, 0.09);
  --ch-cta-bg: #fff;
  --ch-cta-fg: var(--chrome-ink);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--chrome-h);
  border-bottom: 1px solid var(--chrome-line-dark);
  background: rgba(26, 27, 32, 0.97);
  color: var(--ch-fg);
  font-family: var(--chrome-font);
  transition: background-color 0.35s var(--chrome-ease), border-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease);
}

.site-header[data-theme="light"] {
  --ch-fg: var(--chrome-ink);
  --ch-fg-soft: #3a3b41;
  --ch-hover: rgba(10, 10, 11, 0.06);
  --ch-cta-bg: var(--chrome-ink);
  --ch-cta-fg: #fff;
  border-bottom-color: var(--chrome-line);
  background: rgba(255, 255, 255, 0.96);
}

/* The header floats over the top of the page, like frosted glass laid on the first
   section: it takes no layout space, and the first section extends up behind it (a
   transparent top border the section's own background paints into). Its content still
   starts below the header. */
.site-header {
  margin-bottom: calc(var(--chrome-h) * -1);
}

.site-header ~ main > :first-child {
  border-top: var(--chrome-h) solid transparent;
  background-origin: border-box;
}

/* Frosted glass where the browser supports it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(22, 23, 28, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }

  .site-header[data-theme="light"] {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 100%;
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

/* Logo: both versions are stacked and cross-fade with the theme */
.site-header__logo {
  position: relative;
  flex: none;
  align-self: center;
  width: 148px;
  height: 37px;
}

.site-header__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: opacity 0.35s var(--chrome-ease);
}

.site-header__logo-img--light-bg,
.site-header[data-theme="light"] .site-header__logo-img--dark-bg {
  opacity: 0;
}

.site-header[data-theme="light"] .site-header__logo-img--light-bg {
  opacity: 1;
}

/* Navigation links */
.site-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-inline: auto;
}

.site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav > .site-nav__link {
  align-self: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-fg-soft);
  font: 500 15px/1.2 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] {
  background: var(--ch-hover);
  color: var(--ch-fg);
}

.site-nav__link[aria-current="page"] {
  color: var(--ch-fg);
  background: var(--ch-hover);
}

.site-nav__chevron {
  opacity: 0.7;
  transition: transform 0.25s var(--chrome-ease);
}

.site-nav__link[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-nav ~ .site-header__actions {
  margin-left: 0;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ch-cta-bg);
  color: var(--ch-cta-fg);
  font: 500 15px/1 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease), transform 0.18s var(--chrome-ease), box-shadow 0.18s;
}

.site-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 10, 11, 0.22);
}

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ch-fg);
  cursor: pointer;
}

.site-header__burger:hover {
  background: var(--ch-hover);
}

.site-header__burger svg {
  display: block;
}

.site-header__burger-close,
.site-header__burger[aria-expanded="true"] .site-header__burger-open {
  display: none;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-close {
  display: block;
}

.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Products mega menu ---------------------------------------------------------
   Opens 10px below the header. ::before is an invisible bridge over that gap and
   the lower part of the header, so the pointer can travel from "Products" to any
   item (even diagonally, across the other links) without the menu closing. */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(1080px, calc(100vw - var(--chrome-gutter) * 2));
  padding: 10px;
  border: 1px solid rgba(10, 10, 11, 0.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(10, 10, 11, 0.18), 0 4px 14px rgba(10, 10, 11, 0.06);
  color: #45464d;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s var(--chrome-ease), transform 0.2s var(--chrome-ease), visibility 0s linear 0.2s;
}

.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
}

.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.2fr);
  gap: 10px;
}

.mega__intro {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(232, 87, 126, 0.12), transparent 60%),
    radial-gradient(120% 90% at 0% 0%, rgba(143, 92, 245, 0.14), transparent 60%),
    #f7f7fa;
}

.mega__heading {
  margin: 0 0 12px;
  color: var(--chrome-ink);
  font: 500 20px/1.3 var(--chrome-font);
  letter-spacing: -0.01em;
}

.mega__text {
  margin: 0 0 20px;
  font: 400 14px/1.6 var(--chrome-font);
  color: var(--chrome-muted);
}

.mega__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--chrome-blue);
  font: 500 14px/1.4 var(--chrome-font);
  text-decoration: none;
}

.mega__link svg {
  transition: transform 0.18s var(--chrome-ease);
}

.mega__link:hover svg {
  transform: translateX(3px);
}

.mega__products {
  padding: 16px 8px 8px;
}

.mega__group {
  margin: 0 0 8px 12px;
  color: var(--chrome-muted);
  font: 600 11px/1.4 var(--chrome-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__grid li {
  margin: 0;
}

.mega__item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.mega__item:hover,
.mega__item:focus-visible,
.mega__item[aria-current="page"] {
  background: #f4f5f8;
}

.mega__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f2f7;
  transition: background-color 0.15s, transform 0.15s var(--chrome-ease);
}

.mega__item:hover .mega__icon {
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(10, 10, 11, 0.08);
}

.mega__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.mega__item-name {
  display: block;
  color: var(--chrome-ink);
  font: 600 15px/1.35 var(--chrome-font);
}

.mega__item-text {
  display: block;
  margin-top: 2px;
  color: var(--chrome-muted);
  font: 400 13px/1.45 var(--chrome-font);
}

/* Mobile menu ------------------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: var(--chrome-h) 0 0 0;
  z-index: 99;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--chrome-gutter) 40px;
  background: var(--chrome-dark);
  color: #fff;
  font-family: var(--chrome-font);
  animation: chrome-menu-in 0.25s var(--chrome-ease);
}

.mobile-menu[hidden] {
  display: none;
}

@keyframes chrome-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mobile-menu__nav {
  max-width: 640px;
  margin-inline: auto;
}

.mobile-menu__link,
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--chrome-line-dark);
  background: none;
  color: #fff;
  font: 500 19px/1.3 var(--chrome-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-menu__toggle svg {
  opacity: 0.7;
  transition: transform 0.25s var(--chrome-ease);
}

.mobile-menu__toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.mobile-menu__sub {
  margin: 0;
  padding: 6px 0 14px;
  list-style: none;
  border-bottom: 1px solid var(--chrome-line-dark);
}

.mobile-menu__sub[hidden] {
  display: none;
}

.mobile-menu__sub li {
  margin: 0;
}

.mobile-menu__sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font: 400 16px/1.4 var(--chrome-font);
  text-decoration: none;
}

.mobile-menu__sub a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.mobile-menu__sub img {
  width: 20px;
  height: 20px;
  padding: 6px;
  box-sizing: content-box;
  border-radius: 8px;
  background: #fff;
}

.mobile-menu__actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.mobile-menu__cta,
.mobile-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  font: 500 16px/1 var(--chrome-font);
  text-decoration: none;
}

.mobile-menu__cta {
  background: #fff;
  color: var(--chrome-ink);
}

.mobile-menu__login {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

body.menu-open {
  overflow: hidden;
}

/* Header responsiveness */
@media (max-width: 1180px) {
  .site-nav__link {
    padding-inline: 10px;
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .site-nav,
  .site-header__login {
    display: none;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-header__burger {
    display: inline-flex;
  }
}

@media (max-width: 479px) {
  .site-header__inner {
    gap: 8px;
  }

  .site-header__cta {
    display: none;
  }

  .site-header--minimal .site-header__cta {
    display: inline-flex;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  .site-header__logo {
    width: 128px;
    height: 32px;
  }
}

/* Footer ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 28px;
  background: var(--chrome-footer-bg);
  color: rgba(255, 255, 255, 0.62);
  font: 400 15px/1.5 var(--chrome-font);
}

/* Brand-gradient hairline across the top */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #8f5cf5 30%, #e8577e 55%, #f5a142 75%, transparent 95%);
  opacity: 0.7;
}

.site-footer__inner {
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 64px;
}

.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  display: block;
  width: 148px;
  height: auto;
}

.site-footer__tagline {
  max-width: 300px;
  margin: 18px 0 24px;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.site-footer__social a:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px clamp(40px, 6vw, 96px);
}

.site-footer__heading {
  margin: 0 0 18px;
  color: #fff;
  font: 600 14px/1.4 var(--chrome-font);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin: 0;
}

.site-footer__list li + li {
  margin-top: 11px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__list a:hover,
.site-footer__legal a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--chrome-line-dark);
  font-size: 13px;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal li {
  margin: 0;
}

.site-footer--minimal {
  padding-top: 8px;
}

.site-footer--minimal .site-footer__bottom {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .mega,
  .mobile-menu {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .mobile-menu {
    display: none !important;
  }
}