/* =============================================================================
   servqore-brand.css — ServQore v2 "Warm Stone" shared brand layer
   Canonical design tokens (plan §6.3) + cross-surface components introduced by
   the 2026 rebrand: locale dropdown (§6.11) and dual-row industry marquee (§6.8.1).
   Loaded BEFORE style.css. Page-specific layout stays in style.css.
   When this file changes, sync vault/product/brand/tokens.json (plan §6.12).
   ============================================================================= */

:root {
  --sq-bg: #FAFAF9;          /* page background (stone-50) */
  --sq-bg-subtle: #F5F5F4;   /* alternating sections (stone-100) */
  --sq-bg-muted: #E7E5E4;    /* chrome bars, table headers (stone-200) */
  --sq-surface: #FFFCF8;     /* warm-white cards */
  --sq-surface-raised: #FFFFFF;
  --sq-border: #E7E5E4;
  --sq-border-strong: #D6D3D1;
  --sq-text: #1C1917;        /* stone-900 */
  --sq-text-muted: #57534E;  /* stone-600 */
  --sq-text-dim: #78716C;    /* stone-500 (kept AA-safe for small labels) */
  --sq-brand: #2455D4;
  --sq-brand-hover: #1E47B8;
  --sq-brand-subtle: #EFF6FF;
  --sq-accent: #00966A;      /* decorative mint: checks, icons */
  --sq-accent-cta: #006B4F;  /* primary CTA bg — ~5:1 on white (WCAG AA, D13) */
  --sq-accent-hover: #005A42;
  --sq-accent-subtle: #ECFDF5;
  --sq-focus-ring: #2455D4;
  --sq-shadow: 0 1px 3px rgba(28,25,23,.06), 0 8px 24px rgba(28,25,23,.07);
  --sq-shadow-lg: 0 4px 6px rgba(28,25,23,.06), 0 16px 40px rgba(28,25,23,.10);
}

/* Consistent keyboard focus across the brand */
:where(a, button, input, [role="option"]):focus-visible {
  outline: 2px solid var(--sq-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Locale selector (globe dropdown) ───────────────── */
.sq-locale { position: relative; display: inline-flex; }
.sq-locale-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 6px 10px;
  background: none; border: none; cursor: pointer;
  font: 500 13px/1 'DM Sans', sans-serif; color: var(--sq-text-muted);
  transition: color .2s;
}
.sq-locale-trigger:hover { color: var(--sq-text); }
.sq-locale-trigger svg { width: 16px; height: 16px; flex-shrink: 0; }
.sq-locale-code { letter-spacing: .04em; }
.sq-locale-trigger .chevron { font-size: 10px; color: var(--sq-text-dim); transition: transform .2s; }
.sq-locale.open .sq-locale-trigger .chevron { transform: rotate(180deg); }
.sq-locale-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background: var(--sq-surface-raised); border: 1px solid var(--sq-border);
  border-radius: 14px; box-shadow: var(--sq-shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 120;
}
.sq-locale.open .sq-locale-menu { opacity: 1; visibility: visible; transform: none; }
.sq-locale-item {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  padding: 11px 14px; border: none; border-radius: 9px; background: none;
  text-align: left; cursor: pointer; font: 500 15px/1.3 'DM Sans', sans-serif;
  color: var(--sq-text);
}
.sq-locale-item:hover { background: var(--sq-bg-subtle); }
.sq-locale-item.is-active .sq-locale-native { color: var(--sq-brand); font-weight: 600; }
.sq-locale-english { font-size: 13px; color: var(--sq-text-dim); }

/* Mobile drawer: locale sits on the left — anchor menu to left edge, not right */
.mobile-menu-bottom .sq-locale-menu,
.mobile-menu .sq-locale-menu {
  left: 0;
  right: auto;
  min-width: min(220px, calc(100vw - 2.5rem));
}

/* ── Dual-row industry marquee (plan §6.8.1) ───────────────────────────────── */
.sq-marquee { padding: 8px 0; }
.sq-marquee-row {
  overflow: hidden; position: relative;
}
.sq-marquee-row + .sq-marquee-row { margin-top: 10px; }
.sq-marquee-row::before, .sq-marquee-row::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.sq-marquee-row::before { left: 0; background: linear-gradient(to right, var(--sq-bg), transparent); }
.sq-marquee-row::after { right: 0; background: linear-gradient(to left, var(--sq-bg), transparent); }
.sq-marquee-track { display: flex; width: max-content; will-change: transform; }
.sq-marquee-segment { display: flex; flex-shrink: 0; }
.sq-marquee-track.is-animated.row-l { animation: sq-marquee-l var(--marquee-duration, 46s) linear infinite; animation-fill-mode: both; }
.sq-marquee-track.is-animated.row-r { animation: sq-marquee-r calc(var(--marquee-duration, 52s) + 8s) linear infinite; animation-fill-mode: both; }
.sq-marquee-row:hover .sq-marquee-track.is-animated,
.sq-marquee-row:focus-within .sq-marquee-track.is-animated { animation-play-state: paused; }
.marquee-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin: 0 6px;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: var(--sq-surface); border: 1px solid var(--sq-border);
  font: 500 13.5px/1.2 'DM Sans', sans-serif; color: var(--sq-text-muted);
}
.marquee-pill svg {
  width: 16px; height: 16px; color: var(--sq-brand); flex-shrink: 0;
  stroke: currentColor; fill: none;
}
@keyframes sq-marquee-l {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / var(--marquee-segments, 2))); }
}
@keyframes sq-marquee-r {
  from { transform: translateX(calc(-100% / var(--marquee-segments, 2))); }
  to { transform: translateX(0); }
}
/* Wide viewports: 6 pills cannot fill the row — use a static centered grid */
.sq-marquee.is-static .sq-marquee-row { overflow: visible; }
.sq-marquee.is-static .sq-marquee-row::before,
.sq-marquee.is-static .sq-marquee-row::after { display: none; }
.sq-marquee.is-static .sq-marquee-track {
  animation: none !important;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  max-width: min(100%, 960px);
  margin: 0 auto;
  gap: 10px;
}
.sq-marquee.is-static .sq-marquee-segment { display: contents; }
.sq-marquee.is-static .sq-marquee-segment ~ .sq-marquee-segment { display: none; }
.sq-marquee.is-static .marquee-pill { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .sq-marquee .sq-marquee-row { overflow: visible; }
  .sq-marquee .sq-marquee-row::before,
  .sq-marquee .sq-marquee-row::after { display: none; }
  .sq-marquee .sq-marquee-track {
    animation: none !important;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: min(100%, 960px);
    margin: 0 auto;
    gap: 10px;
  }
  .sq-marquee .sq-marquee-segment { display: contents; }
  .sq-marquee .sq-marquee-segment ~ .sq-marquee-segment { display: none; }
  .sq-marquee .marquee-pill { margin: 0; }
  .sq-locale-menu { transition: none; }
}