/* ============================================================
   overrides.css — layered AFTER the Vite bundle (index-*.css).
   Hand-maintained: the app's source is not in this repo, so
   fixes live here rather than in the compiled bundle.
   ============================================================ */

/* --- Fix: position utilities defeated by .hover-elevate -----
   The design-system class

       .hover-elevate:not(.no-default-hover-elevate) { position: relative }

   has specificity (0,2,0) and sits at char ~49485 of the bundle.
   Tailwind's .absolute { position: absolute } is (0,1,0) at ~5732.
   So ANY element using both classes silently loses its intended
   positioning and drops into normal flow.

   On the home hero this put the scroll-cue <button> into the
   section's flex row as a second 48px item: the hero shrank from
   390px to 342px and every child shifted 24px left, producing a
   24px/72px left/right gutter instead of 24/24. The button itself
   was pushed off-screen to left:513.

   These selectors are also (0,2,0) but load later, so they win.  */
.absolute.hover-elevate,
.absolute.hover-elevate-2,
.absolute.active-elevate,
.absolute.active-elevate-2 { position: absolute; }

.fixed.hover-elevate,
.fixed.hover-elevate-2,
.fixed.active-elevate,
.fixed.active-elevate-2 { position: fixed; }

.sticky.hover-elevate,
.sticky.hover-elevate-2,
.sticky.active-elevate,
.sticky.active-elevate-2 { position: sticky; }


/* --- Fix: anchor links land under the fixed header ----------
   <nav> is position:fixed and 92px tall on mobile / 88px on
   desktop, but every anchor target has scroll-margin-top:0, so
   jumping to a section puts its heading behind the header.
   scroll-margin-top is honoured by both native hash navigation
   and element.scrollIntoView().                                */
:root { --header-h: 92px; }
@media (min-width: 640px) { :root { --header-h: 88px; } }

#hero, #about, #experience, #services, #product-studio,
#research, #why-olive, #testimonials, #contact {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* --- Fix: logo marquee cards wider than the mobile viewport --
   Logos are `max-w-full max-h-[80px] object-contain`. A 3575x510
   wordmark capped to 80px tall computes to 561px wide; because
   the card is flex-shrink-0 with no width, the card is sized BY
   the image (up to 627px) inside a 358px window — so those logos
   can never be fully visible. Capping the card makes the image's
   own max-w-full meaningful again and object-contain scales it. */
@media (max-width: 767px) {
  .animate-scroll > * { max-width: 58vw; }
  .animate-scroll     { gap: 2rem; animation-duration: 20s; }
}

/* Respect reduced-motion: stop the marquee, but keep the logos
   reachable by making the clipping wrapper scrollable.          */
@media (prefers-reduced-motion: reduce) {
  .animate-scroll { animation: none; }
  div:has(> .animate-scroll) { overflow-x: auto; }
}


/* --- Testimonials: show only Whitney L. (temporary) ----------
   The carousel is static (no auto-advance) and initialises on
   Whitney L., so hiding its 3 dots and 2 arrows pins it there.
   Remove this block to restore all three testimonials.          */
#testimonials button { display: none; }


/* --- Fix: mobile menu overlaps the logo on short viewports ---
   The menu panel is `absolute inset-0 flex items-center justify-center`,
   i.e. its 616px item list is centred in the FULL viewport while <nav>
   (z-50, 92px) floats above it. Whenever the viewport is shorter than
   ~810px — which is every real iOS Safari window, since browser chrome
   eats ~150px — the centred list rises behind the header and its first
   item lands on the wordmark. Measured: 750px->9px overlap, 664px->52px,
   620px->74px, 580px->-18px top (first item unreachable).

   Anchor the list below the header and let it scroll instead of centring
   it against a box it doesn't fit in.                                   */
@media (max-width: 1023px) {
  .fixed.inset-0.z-40 > .absolute.inset-0.flex {
    align-items: flex-start;
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}