/* ========== FOOTER ========== */
.site-footer {
  display: flex;
  /* was flex-end: now two groups share the row (.signal on the far left,
     .footer-right on the far right) instead of just .rights alone, so the
     row needs to spread them to opposite ends rather than pack everything
     right. .footer-right ends up in exactly the same place .rights used to
     occupy on its own, so the existing right-edge alignment is unaffected. */
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  padding-top: 20px;
}

/* Left footer element: Rodeo Clip logo alone, now wrapped in a link to
   rodeoclip.com - the <a> carries layout (it's the actual flex item in
   .site-footer now), the <img> carries the visual opacity/hover fade. */
.rc-logo-link {
  display: block;
  flex-shrink: 0;
}

/* No separate caption text - the "RODEO / CLIP" wordmark is already baked
   into the artwork itself (confirmed against reference/footer_guides_01.png).
   Source art is solid white on transparent - resting opacity 0.55 matches
   --muted's own alpha (rgba(255,255,255,0.55)) exactly, so it blends
   against the background video the same way the rest of the footer
   already does, rather than a flat/inverted gray that would look
   inconsistent against lighter parts of the background. Hover brightens
   to full opacity, matching the header nav/socials' own brighten-on-hover
   convention (color: var(--muted) -> #fff).
   height 58px: matches the reference's rendered logo ink-height (~58px)
   divided by the source PNG's own ink-to-canvas fill ratio (0.88). */
.rc-logo {
  display: block;
  height: 58px;
  width: auto;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.rc-logo-link:hover .rc-logo {
  opacity: 1;
}

/* Right footer element: globe + sparkle + two-line caption, vertically
   centered against .rc-logo via .site-footer's own align-items. */
.footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.globe-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Source art is solid brand-orange on transparent - brightness(0) invert(1)
   flattens it to a solid white silhouette (respecting the alpha channel),
   then opacity 0.55 matches --muted's own alpha exactly, same technique
   as .rc-logo above, so it reads as the same muted gray as the rest of
   the block instead of standing out in color. */
.claude-logo {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
  opacity: 0.55;
}

.footer-meta-text {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (min-width: 768px) {
  .footer-meta-text { font-size: 10px; }
  .rc-logo { height: 65px; }
  .globe-icon { width: 26px; height: 26px; }
  .claude-logo { width: 26px; height: 26px; }

  /* header is position:fixed, so it's anchored to the true viewport edge;
     .site-footer lives in the normal-flow, scrollable body, which is
     narrower than the true viewport by its own scrollbar's reserved
     width (~15-17px on Windows) - without this, the globe icon lands
     that much short of where "YT" ends in the header. Desktop-only:
     mobile/touch scrollbars don't reserve layout width, so this would
     misalign the footer there instead of compensating for anything.
     justify-content: flex-start (overrides the base rule's
     space-between) - .footer-meta is no longer flush against the
     container's right edge, it's pinned to an explicit left position
     below (margin-left, anchored to the Brands columns), so the base
     rule's push-to-the-far-end behavior would just add unwanted extra
     gap on top of that margin. */
  .site-footer {
    margin-right: -15px;
    justify-content: flex-start;
  }

  /* .rc-logo-link's and .footer-meta's margin-left are NOT set here as
     fixed px values on purpose - both target positions ("— 002 BRANDS &
     ORGANIZATIONS" and the ORVEDA column) live inside a 100vw-relative
     CSS Grid (--col above is a function of 100vw), so their actual pixel
     position changes with viewport width. A hardcoded margin here would
     only ever match at the one exact viewport width it was measured at.
     Instead, js/footer-align.js measures both live via
     getBoundingClientRect() and sets these two margins directly,
     recomputed on resize - see that file's own sync logic. */
}