/* ==========================================================================
   Spectrum IT Hub — footer
   --------------------------------------------------------------------------
   Brand + Quick links + Legal + (socials / Careers), then the particle
   wordmark, then a scrolling certifications strip, then the copyright.

   The certifications used to wrap onto two rows at narrow widths and sat there
   inertly. They now scroll as a marquee: two identical groups inside one track,
   so translating the track by exactly -50% lands group 2 where group 1 started
   and the loop has no seam. The gap between the groups has to match the gap
   inside them or the seam shows as a stutter — hence the same `gap` on both.

   The strip pauses on hover so a name can actually be read, and the edges are
   masked so items fade rather than being guillotined by the container.
   ========================================================================== */

.ftr-marquee {
  overflow: hidden;
  padding: 30px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ftr-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: ftrMarquee 46s linear infinite;
}

.ftr-marquee-group {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

.ftr-marquee:hover .ftr-marquee-track,
.ftr-marquee:focus-within .ftr-marquee-track {
  animation-play-state: paused;
}

@keyframes ftrMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Off-screen gating --------------------------------------------------
   The marquee and the sweep lines are `infinite`, so without this they run
   the entire time a visitor is at the top of the page looking at the hero —
   the globe and the footer competing for the same frame budget, for an
   animation nobody can see. social-flip.js sets data-anim on <footer> from an
   IntersectionObserver.

   `will-change` is applied here rather than on the base rule for the same
   reason: the marquee track is `width: max-content`, so promoting it pins a
   very wide composited layer in memory for the whole session. It only needs
   promoting while it is actually moving.

   No data-anim attribute at all (JS not yet run, or disabled) leaves both
   animations running, so the footer degrades to its previous behaviour rather
   than to a dead one. */
footer[data-anim="off"] .ftr-marquee-track,
footer[data-anim="off"] .flipsocial-lines i {
  animation-play-state: paused;
}

footer[data-anim="on"] .ftr-marquee-track {
  will-change: transform;
}


/* --- Certification plaques -----------------------------------------------
   The old chips were grey text inside a grey hairline — legible, but with no
   relationship to the palette, and washed out against the footer.

   These use the site's glass recipe instead: a gradient over the surface, a
   bright inset line along the top edge, and a gold hairline rather than a
   white one. The mark is a gold rosette, which reads as "certified" without
   reusing the shield the hero tiles already use for Trust & Security. The
   label is off-white rather than mid-grey so the names can actually be read at
   10.5px while moving.

   Hovering lifts a plaque and warms its edge — the marquee pauses on hover
   anyway, so it is a usable moment rather than a decorative one. */
.cert-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 15px;
  white-space: nowrap;
  color: #E8B547;
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.014) 58%,
      rgba(255, 255, 255, 0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px rgba(232, 181, 71, 0.22);
  transition: box-shadow 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.cert-chip svg { flex: 0 0 auto; }

.cert-chip span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E7E4DE;
}

.cert-chip:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(232, 181, 71, 0.6),
    0 12px 28px -16px rgba(232, 181, 71, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .cert-chip { transition: none; }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .ftr-cols {
    grid-template-columns: 1.4fr 1fr 1.15fr !important;
    gap: 44px !important;
  }
  /* The actions block drops onto its own row and re-aligns left, or it would
     hang off the end of a three-column grid. */
  .ftr-actions {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
  }
}

@media (max-width: 760px) {
  .ftr-cols {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    padding: 64px 20px 48px !important;
  }
  .ftr-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .ftr-close {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The footer used to stop at the 760px step, so below 520 it sat at a 20px
   gutter while the page body had already moved to 16px — a visible 4px step
   between the last section and the footer, on all 17 pages. This completes the
   ladder so the footer shares the site's single content edge: 28 / 20 / 16. */
@media (max-width: 520px) {
  .ftr-cols {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .ftr-close {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* --- Reduced motion ------------------------------------------------------
   No crawl, and the strip becomes manually scrollable so nothing is unreachable. */
@media (prefers-reduced-motion: reduce) {
  .ftr-marquee { overflow-x: auto; }
  .ftr-marquee-track { animation: none; }
  .ftr-marquee-group:last-child { display: none; }
}

/* ==========================================================================
   Reach-us flip tiles
   --------------------------------------------------------------------------
   Letters on the front, icons on the back. The row flips together on hover
   with a per-tile delay, after the framer-motion component at
   vengenceui.com/components/social-flip-button — rebuilt in plain CSS 3D,
   since this site has no build step and no animation library.

   The two sweeping lines sit in their own clipped layer rather than on the
   container: the container cannot be `overflow: hidden` because the tooltips
   have to escape it.

   Square corners throughout, unlike the original, to match the rest of the site.
   ========================================================================== */

.flipsocial {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: rgba(6, 7, 10, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flipsocial-lines {
  position: absolute;
  inset: -1px;
  overflow: hidden;
  pointer-events: none;
}

.flipsocial-lines i {
  position: absolute;
  left: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 71, 0.7), transparent);
}

.flipsocial-lines i:first-child  { top: 0;    animation: flipsocialSweepR 2.8s linear infinite; }
.flipsocial-lines i:last-child   { bottom: 0; animation: flipsocialSweepL 2.8s linear infinite; }

@keyframes flipsocialSweepR { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes flipsocialSweepL { from { transform: translateX(100%); }  to { transform: translateX(-100%); } }

.flipsocial-tile {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  perspective: 1000px;
}

.flipsocial-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.flipsocial-front,
.flipsocial-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* Red outline, the same hue as the Careers button beneath it, held a little
   under full strength so seven small boxes of solid #D32027 do not shout over
   the gold sweep on the container. */
.flipsocial-front {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(211, 32, 39, 0.62),
              inset 0 1px 0 rgba(255, 255, 255, 0.12);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: #F7F6F3;
}

/* Gold face with dark glyph — the same pairing the Services menu and the Core
   Strength grid use for their hover state. */
.flipsocial-back {
  background: #E8B547;
  color: #14110A;
  transform: rotateY(180deg);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 160, 0.9);
}

.flipsocial:hover .flipsocial-inner,
.flipsocial-tile:focus-visible .flipsocial-inner,
.flipsocial-tile[data-flipped] .flipsocial-inner {
  transform: rotateY(180deg);
}

/* Stagger. The sweeping-lines layer is child 1, so the tiles start at 2. */
.flipsocial-tile:nth-child(2) .flipsocial-inner { transition-delay:   0ms; }
.flipsocial-tile:nth-child(3) .flipsocial-inner { transition-delay:  60ms; }
.flipsocial-tile:nth-child(4) .flipsocial-inner { transition-delay: 120ms; }
.flipsocial-tile:nth-child(5) .flipsocial-inner { transition-delay: 180ms; }
.flipsocial-tile:nth-child(6) .flipsocial-inner { transition-delay: 240ms; }
.flipsocial-tile:nth-child(7) .flipsocial-inner { transition-delay: 300ms; }
.flipsocial-tile:nth-child(8) .flipsocial-inner { transition-delay: 360ms; }

/* --- Tooltip -------------------------------------------------------------
   Pseudo-elements rather than nodes, so the label costs no markup and cannot
   be picked up by a pointer. */
.flipsocial-tile::after,
.flipsocial-tile::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.flipsocial-tile::after {
  content: attr(data-label);
  bottom: calc(100% + 14px);
  transform: translate(-50%, 6px) scale(0.92);
  background: #0B0C10;
  border: 1px solid rgba(232, 181, 71, 0.38);
  padding: 7px 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F7F6F3;
  white-space: nowrap;
}

.flipsocial-tile::before {
  content: "";
  bottom: calc(100% + 9px);
  width: 8px;
  height: 8px;
  background: #0B0C10;
  border-right: 1px solid rgba(232, 181, 71, 0.38);
  border-bottom: 1px solid rgba(232, 181, 71, 0.38);
  transform: translate(-50%, 6px) rotate(45deg);
}

.flipsocial-tile:hover::after,
.flipsocial-tile:focus-visible::after,
.flipsocial-tile[data-flipped]::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

.flipsocial-tile:hover::before,
.flipsocial-tile:focus-visible::before,
.flipsocial-tile[data-flipped]::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }


/* --- Matching the two controls ------------------------------------------
   The tile row and the Careers button share a column and should read as a
   pair. Both stretch to the column, which takes its width from whichever is
   naturally wider (the seven tiles), so the button grows to meet them rather
   than either being pinned to a guessed fixed width. */
.ftr-actions > .flipsocial,
.ftr-actions > .ftr-careers {
  width: 100%;
  box-sizing: border-box;
  justify-content: center;
}

/* --- Touch ---------------------------------------------------------------
   No hover to flip with, so social-flip.js turns the first tap into a flip and
   lets the second follow the link. The hover rule is switched off here so a
   lingering emulated hover cannot fight the tapped state. */
@media (hover: none) {
  .flipsocial:hover .flipsocial-inner { transform: none; }
  .flipsocial-tile[data-flipped] .flipsocial-inner { transform: rotateY(180deg); }

  /* Auto-reveal. Without hover the flip would never be seen, so social-flip.js
     puts `data-auto` on the container for as long as the row is on screen, and
     takes it off when the row scrolls out. The cascade and the 60ms stagger
     are the same ones the desktop hover uses; nothing here is timed, the state
     simply follows visibility.

     This drives the flip ONLY. The tooltip stays on `:hover`/`:focus-visible`/
     `[data-flipped]` above, because seven labels raised at once would stack on
     top of each other on a 375px row — a tap still labels a single tile. */
  .flipsocial[data-auto] .flipsocial-inner { transform: rotateY(180deg); }
}

/* Seven tiles at 40px plus gaps overflow a 375px screen once the footer's own
   padding is taken off, so they come down rather than wrap. */
@media (max-width: 760px) {
  .flipsocial { gap: 6px; padding: 10px; }
  .flipsocial-tile { width: 34px; height: 34px; }
  .flipsocial-front { font-size: 14px; }
  .flipsocial-back svg { width: 15px; height: 15px; }
}

@media (max-width: 380px) {
  .flipsocial { gap: 4px; padding: 8px; }
  .flipsocial-tile { width: 31px; height: 31px; }
}

@media (prefers-reduced-motion: reduce) {
  .flipsocial-lines i { animation: none; }
  .flipsocial-inner { transition: none; }
  .flipsocial-tile::after, .flipsocial-tile::before { transition: none; }
}

/* ==========================================================================
   Legal pages — Disclaimer / Privacy Policy / Terms and Conditions
   --------------------------------------------------------------------------
   Only the bits that need to respond to width, plus the accordion transition.
   Section bodies animate on max-height because `auto` does not animate; each
   section carries its own cap, computed from its content, so short sections do
   not snap open and long ones are not clipped.
   ========================================================================== */

.legal-body {
  transition: max-height 420ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease;
}

@media (max-width: 1100px) {
  .legal-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .legal-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 760px) {
  .legal-grid-4,
  .legal-grid-3,
  .legal-meta { grid-template-columns: 1fr !important; gap: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .legal-body { transition: none; }
}