/* Arpuro shared chrome styles. Namespaced under .arpuro-chrome so it
 * never bleeds into the host site. Uses CSS custom properties from
 * styles/tokens.css — that file must be loaded first (or tokens overridden
 * by the host).
 *
 * No Tailwind dependency. No Shadow DOM. Light DOM so content is
 * fully indexable by search and LLM crawlers.
 */

.arpuro-chrome,
.arpuro-chrome *,
.arpuro-chrome *::before,
.arpuro-chrome *::after {
  box-sizing: border-box;
}

.arpuro-chrome {
  font-family: var(--arpuro-font-sans, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--arpuro-ink, #0f172a);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.arpuro-chrome a { color: inherit; text-decoration: none; }
.arpuro-chrome button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
.arpuro-chrome ul { list-style: none; padding: 0; margin: 0; }
.arpuro-chrome svg { display: block; }

.arpuro-chrome__container {
  max-width: var(--arpuro-mw-content, 1280px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 3rem);
}

/* ──────────────────────────────────────────────────────────────────
   Header
   ────────────────────────────────────────────────────────────────── */

.arpuro-chrome__header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--arpuro-paper, #fff) 90%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--arpuro-line, #e2e8f0);
  transition: box-shadow .3s, background-color .3s;
}

/* Once the user scrolls past the threshold, intensify the visual a touch
 * so the header reads as elevated rather than just a flat strip. */
.arpuro-chrome__header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--arpuro-paper, #fff) 96%, transparent);
  box-shadow: var(--arpuro-shadow-1, 0 1px 2px rgba(15,23,42,0.04));
}

.arpuro-chrome__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}

.arpuro-chrome__logo-link { display: inline-flex; line-height: 0; }
.arpuro-chrome__logo-svg { display: block; height: auto; }
.arpuro-chrome__header .arpuro-chrome__logo-svg,
.arpuro-chrome__drawer-header .arpuro-chrome__logo-svg { width: 118px; }
.arpuro-chrome__footer-logo .arpuro-chrome__logo-svg { width: 140px; }

.arpuro-chrome__nav {
  display: none;
  align-items: center;
  gap: 1.5rem;
  font-size: .875rem;
  color: var(--arpuro-muted, #64748b);
}

@media (min-width: 1024px) {
  .arpuro-chrome__nav { display: flex; }
  .arpuro-chrome__hamburger { display: none !important; }
}

.arpuro-chrome__nav-item { position: relative; }

.arpuro-chrome__nav-button,
.arpuro-chrome__nav-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem 0;
  color: var(--arpuro-muted, #64748b);
  transition: color .15s;
}

.arpuro-chrome__nav-button:hover,
.arpuro-chrome__nav-link:hover,
.arpuro-chrome__nav-item[data-open="true"] .arpuro-chrome__nav-button {
  color: var(--arpuro-ink, #0f172a);
}

.arpuro-chrome__nav-link[aria-current="page"] {
  color: var(--arpuro-ink, #0f172a);
  font-weight: 500;
}

.arpuro-chrome__chevron { width: .875rem; height: .875rem; }

.arpuro-chrome__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: .5rem;
  min-width: 18rem;
  background: var(--arpuro-paper, #fff);
  border: 1px solid var(--arpuro-line, #e2e8f0);
  border-radius: .5rem;
  box-shadow: var(--arpuro-shadow-2, 0 6px 24px -8px rgba(15,23,42,0.12));
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}

.arpuro-chrome__nav-item[data-open="true"] .arpuro-chrome__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.arpuro-chrome__menu-item {
  display: flex;
  flex-direction: column;
  padding: .75rem 1rem;
  transition: background-color .12s;
}

.arpuro-chrome__menu-item:hover { background: var(--arpuro-paper-2, #f8fafc); }

.arpuro-chrome__menu-title {
  font-size: .875rem;
  font-weight: 500;
  color: var(--arpuro-ink, #0f172a);
}

.arpuro-chrome__menu-desc {
  font-size: .75rem;
  color: var(--arpuro-muted, #64748b);
  margin-top: .125rem;
}

/* ─── Header actions (right side) ─── */

.arpuro-chrome__actions {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.arpuro-chrome__signin {
  display: none;
  padding: .375rem .75rem;
  border-radius: .375rem;
  font-size: .875rem;
  color: var(--arpuro-muted, #64748b);
  transition: color .15s, background-color .15s;
}

.arpuro-chrome__signin:hover {
  color: var(--arpuro-ink, #0f172a);
  background: var(--arpuro-paper-sunken, #f1f5f9);
}

@media (min-width: 768px) {
  .arpuro-chrome__signin { display: inline-flex; }
}

.arpuro-chrome__cta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  background: var(--arpuro-primary, #1d4ed8);
  color: var(--arpuro-primary-fg, #fff);
  border-radius: .375rem;
  font-size: .875rem;
  font-weight: 500;
  transition: background-color .15s;
}

/* Higher-specificity color rule so it wins over `.arpuro-chrome a { color: inherit }`. */
.arpuro-chrome a.arpuro-chrome__cta,
.arpuro-chrome a.arpuro-chrome__cta:visited,
.arpuro-chrome a.arpuro-chrome__cta:hover { color: var(--arpuro-primary-fg, #fff); }
.arpuro-chrome__cta:hover { background: var(--arpuro-primary-hover, #1e40af); }

.arpuro-chrome__cta--full {
  width: 100%;
  justify-content: center;
  padding: .625rem 1rem;
}

.arpuro-chrome__cta-arrow { width: .875rem; height: .875rem; }

.arpuro-chrome__hamburger {
  margin-left: .25rem;
  padding: .5rem;
  color: var(--arpuro-ink-3, #334155);
  transition: color .15s;
}

.arpuro-chrome__hamburger:hover { color: var(--arpuro-ink, #0f172a); }
.arpuro-chrome__hamburger svg { width: 1.5rem; height: 1.5rem; }

/* Slots are flex items in the actions row; using inline-flex internally
 * keeps the consumer-rendered widget aligned with the sibling Sign in
 * link and the CTA button regardless of how many wrapping elements the
 * host framework adds. */
.arpuro-chrome__slot-lang,
.arpuro-chrome__slot-cart,
.arpuro-chrome__slot-lang-mobile {
  display: inline-flex;
  align-items: center;
}

.arpuro-chrome__slot-lang:empty,
.arpuro-chrome__slot-cart:empty,
.arpuro-chrome__slot-lang-mobile:empty { display: none; }

@media (max-width: 767.98px) {
  .arpuro-chrome__slot-lang { display: none; }
}

/* ─── Language fallback (rendered when no consumer fills the slot) ───
 * Sits adjacent to .arpuro-chrome__slot-lang; CSS hides it the moment
 * the slot gets children. chrome.js reads document.documentElement.lang
 * to drive the code text and toggles the inline notice popover. */
.arpuro-chrome__lang-fallback { position: relative; display: inline-flex; }

.arpuro-chrome__slot-lang:not(:empty) + .arpuro-chrome__lang-fallback,
.arpuro-chrome__slot-lang-mobile:not(:empty) + .arpuro-chrome__lang-fallback { display: none; }

@media (max-width: 767.98px) {
  .arpuro-chrome__lang-fallback:not(.arpuro-chrome__lang-fallback--drawer) { display: none; }
}

/* ─── Language selector (filled into the slot by each consumer) ───
 * Match the Sign-in link rhythm (font, padding, hover) so the
 * trigger button sits on the same baseline as its flex-row siblings.
 */
.arpuro-chrome__lang { position: relative; }

.arpuro-chrome__lang-button {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: .375rem;
  font-size: .875rem;
  line-height: 1.25rem;
  color: var(--arpuro-muted, #64748b);
  transition: color .15s, background-color .15s;
}

.arpuro-chrome__lang-button:hover,
.arpuro-chrome__lang[data-open="true"] .arpuro-chrome__lang-button {
  color: var(--arpuro-ink, #0f172a);
  background: var(--arpuro-paper-sunken, #f1f5f9);
}

.arpuro-chrome__lang-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

.arpuro-chrome__lang-code {
  font-family: var(--arpuro-font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.arpuro-chrome__lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: .5rem;
  width: 16rem;
  background: var(--arpuro-paper, #fff);
  border: 1px solid var(--arpuro-line, #e2e8f0);
  border-radius: .5rem;
  box-shadow: var(--arpuro-shadow-2, 0 6px 24px -8px rgba(15,23,42,0.12));
  overflow: hidden;
  padding-block: .25rem;
  z-index: 50;
}

.arpuro-chrome__lang-menu--align-left  { right: auto; left: 0; }
.arpuro-chrome__lang-menu--pos-top {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: .5rem;
}

.arpuro-chrome__lang-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .875rem;
  font-size: .875rem;
  text-align: left;
  color: var(--arpuro-ink-2, #1e293b);
  transition: background-color .12s;
}

.arpuro-chrome__lang-item:hover,
.arpuro-chrome__lang-item[aria-current="true"] {
  background: var(--arpuro-paper-2, #f8fafc);
}

.arpuro-chrome__lang-item[data-pre-release="true"] {
  color: var(--arpuro-muted-2, #94a3b8);
}

.arpuro-chrome__lang-item-main {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-width: 0;
}

.arpuro-chrome__lang-item-flag {
  font-size: 1rem;
  line-height: 1;
}

.arpuro-chrome__lang-item[data-pre-release="true"] .arpuro-chrome__lang-item-flag {
  opacity: .5;
}

.arpuro-chrome__lang-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arpuro-chrome__lang-item-tag {
  font-family: var(--arpuro-font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: .625rem;
  font-style: italic;
  color: var(--arpuro-muted-2, #94a3b8);
  flex-shrink: 0;
}

.arpuro-chrome__lang-item-check {
  width: .875rem;
  height: .875rem;
  flex-shrink: 0;
  color: var(--arpuro-muted, #64748b);
}

/* Compact notice variant of the dropdown — no item list, just a paragraph
 * of explanatory copy. Used by the fallback to tell visitors why there's
 * no locale switcher on the current site (blog, shop). */
.arpuro-chrome__lang-menu--notice {
  width: 14rem;
  padding: .75rem 1rem;
}

.arpuro-chrome__lang-menu--notice[hidden] { display: none; }

.arpuro-chrome__lang-notice {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--arpuro-ink-2, #1e293b);
}

/* ──────────────────────────────────────────────────────────────────
   Mobile drawer
   ────────────────────────────────────────────────────────────────── */

.arpuro-chrome__drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

.arpuro-chrome__drawer[hidden] { display: none; }

/* While the drawer is open, hide the consent banner — it lives at
 * z-index: 2147483640 and would otherwise sit on top of the drawer's
 * footer (Sign in / language selector / Book a demo) on mobile. The
 * banner is restored when the drawer closes. chrome.js toggles
 * body[data-arpuro-drawer-open] in lockstep with the drawer state. */
body[data-arpuro-drawer-open="true"] #arpuro-consent-banner {
  display: none;
}

.arpuro-chrome__drawer-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--arpuro-ink, #0f172a) 40%, transparent);
  backdrop-filter: blur(4px);
  cursor: default;
}

.arpuro-chrome__drawer-panel {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 24rem;
  background: var(--arpuro-paper, #fff);
  box-shadow: var(--arpuro-shadow-2, 0 6px 24px -8px rgba(15,23,42,0.12));
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}

.arpuro-chrome__drawer[data-open="true"] .arpuro-chrome__drawer-panel { transform: translateX(0); }

.arpuro-chrome__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 4rem;
  border-bottom: 1px solid var(--arpuro-line, #e2e8f0);
}

.arpuro-chrome__drawer-close {
  padding: .5rem;
  margin-right: -.5rem;
  color: var(--arpuro-muted, #64748b);
}

.arpuro-chrome__drawer-close:hover { color: var(--arpuro-ink, #0f172a); }
.arpuro-chrome__drawer-close svg { width: 1.5rem; height: 1.5rem; }

.arpuro-chrome__drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
}

.arpuro-chrome__drawer-eyebrow {
  font-family: var(--arpuro-font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--arpuro-muted, #64748b);
  margin-bottom: .75rem;
}

.arpuro-chrome__drawer-list { margin-bottom: 1.75rem; }
.arpuro-chrome__drawer-list a {
  display: block;
  padding: .5rem 0;
  color: var(--arpuro-ink-2, #1e293b);
  transition: color .12s;
}

.arpuro-chrome__drawer-list a:hover,
.arpuro-chrome__drawer-list a[aria-current="page"] { color: var(--arpuro-ink, #0f172a); }
.arpuro-chrome__drawer-list a[aria-current="page"] { font-weight: 500; }

.arpuro-chrome__drawer-list--primary {
  border-top: 1px solid var(--arpuro-line, #e2e8f0);
  padding-top: 1.25rem;
}

.arpuro-chrome__drawer-list--primary a {
  color: var(--arpuro-ink, #0f172a);
  font-weight: 500;
}

.arpuro-chrome__drawer-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--arpuro-line, #e2e8f0);
  display: grid;
  gap: .75rem;
}

.arpuro-chrome__drawer-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ──────────────────────────────────────────────────────────────────
   Footer
   ────────────────────────────────────────────────────────────────── */

.arpuro-chrome__footer {
  background: var(--arpuro-paper-sunken, #f1f5f9);
  padding-block: 4rem;
}

.arpuro-chrome__footer-grid {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .arpuro-chrome__footer-grid {
    grid-template-columns: 5fr 7fr;
  }
}

.arpuro-chrome__footer-logo { margin-bottom: 1.25rem; }

.arpuro-chrome__footer-tagline {
  font-size: .875rem;
  color: var(--arpuro-muted, #64748b);
  max-width: 24rem;
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

.arpuro-chrome__footer-address {
  font-style: normal;
  font-size: .75rem;
  color: var(--arpuro-muted-2, #94a3b8);
  line-height: 1.6;
}

.arpuro-chrome__footer-address a:hover { color: var(--arpuro-ink, #0f172a); }

.arpuro-chrome__footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  font-size: .875rem;
}

@media (min-width: 640px) {
  .arpuro-chrome__footer-cols { grid-template-columns: repeat(4, 1fr); }
}

.arpuro-chrome__footer-eyebrow {
  font-family: var(--arpuro-font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--arpuro-muted, #64748b);
  margin-bottom: 1rem;
}

.arpuro-chrome__footer-cols ul li { margin-bottom: .75rem; }
.arpuro-chrome__footer-cols a,
.arpuro-chrome__footer-cols button {
  color: var(--arpuro-muted, #64748b);
  text-align: left;
  transition: color .12s;
}

.arpuro-chrome__footer-cols a:hover,
.arpuro-chrome__footer-cols button:hover { color: var(--arpuro-ink, #0f172a); }

.arpuro-chrome__footer-bottom {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--arpuro-line-strong, #cbd5e1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: .75rem;
  color: var(--arpuro-muted-2, #94a3b8);
}

@media (min-width: 640px) {
  .arpuro-chrome__footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Machine-readable feeds (Sitemap / RSS / llms.txt). Static markup so the
 * links are crawlable and visible without JavaScript enabled. */
.arpuro-chrome__footer-feeds {
  display: flex;
  gap: 1.5rem;
  font-family: var(--arpuro-font-mono, "Geist Mono", ui-monospace, monospace);
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.arpuro-chrome__footer-feeds a {
  color: var(--arpuro-muted-2, #94a3b8);
  border-bottom: 1px dotted currentColor;
  padding-bottom: 1px;
  transition: color .12s;
}

.arpuro-chrome__footer-feeds a:hover { color: var(--arpuro-ink, #0f172a); }

/* ──────────────────────────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .arpuro-chrome *,
  .arpuro-chrome *::before,
  .arpuro-chrome *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}