/* ============================================================================
   skiber-v2-overrides.css — DELIBERATE deltas from the legacy oracle.
   Every rule here is an intentional improvement (Drew 2026-07-15); anything
   not in this file must match rendered/ byte-for-byte. Keep this file small.
   ============================================================================ */

/* 1. First view fills the viewport (Drew: "make that first view kind of 100vh").
      Desktop only — mobile hero already fills naturally. svh avoids the iOS
      URL-bar jump; vh fallback for older engines. */
@media (min-width: 1024px) {
  .cards-container #card1 .homepage-hero-wrap {
    /* TRUE full viewport (Drew 2026-07-20: "I want the 100% viewport").
       The previous rule subtracted 110px for the header and so only ever filled
       88-90%. That subtraction was wrong twice over: the header is
       `position: fixed` (138px), so it OVERLAYS the hero and takes no flow
       space at all — there is nothing to subtract. svh avoids the iOS URL-bar
       jump; vh is the fallback. */
    height: 100vh;
    height: 100svh;
  }
}
/* The hero internals (hp_title bottom:250px; results column top:0/bottom:0;
   profile image 929px tall anchored bottom:0) are absolute-positioned against a
   canvas designed at exactly 1075px. A shorter box clips them, so the whole
   composition is scaled to fit rather than reflowed — that preserves the
   original design exactly instead of re-interpreting it.
   CONTINUOUS scale (--hero-scale = min(1, innerHeight / 1075), set in
   SkiberBase) replaces the previous four hard-coded zoom steps
   (0.95/0.82/0.72/0.62). The steps were both coarse and unpredictable: at a
   900px-tall viewport they applied 0.72, rendering every hero font at 72% of
   its designed size. Continuous scale means the composition fills the viewport
   exactly at any height, and renders at FULL designed size on any screen
   >= 1075px tall (capped at 1 — never upscale past the design). */
@media (min-width: 1024px) {
  .cards-container #card1 .homepage-hero-content {
    zoom: var(--hero-scale, 1);
  }
}

/* 2. Type rendering: the legacy site never set smoothing; on dark backgrounds
      the default subpixel AA makes League Gothic look crusty at display sizes. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. Keyboard a11y: visible focus ring in the brand gold. The legacy theme
      suppressed outlines entirely (a real ADA exposure on a PI firm's site). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #e2a72e;
  outline-offset: 2px;
}

/* 4. Brand-consistent text selection (default blue clashes with the palette). */
::selection {
  background: #e2a72e;
  color: #1d1a14;
}

/* 5. "Recent Results 2025" — SVG artwork rebuilt as REAL TEXT (Drew 2026-07-20).
      The legacy cards were baked sprites with the amounts and case types drawn
      as outlined paths: the artboards disagreed (286x136 / 315x136 / 315x119) so
      identical nominal type rendered at different sizes, and the results were
      invisible to screen readers, Google and AI answer engines, and could never
      be translated for the Spanish site.
      NO CSS IS NEEDED HERE. The markup emits the theme's own classes
      (span / span.million / span.text) which main.min.css already styles. A
      first pass added a parallel .cr-* system and MILLION rendered WHITE,
      because `.case_result span{color:#fff}` (0,4,1) outranked `.cr-unit`
      (0,1,0). Use the design system's classes; do not reintroduce a parallel one. */

/* 6. Homepage hero "You deserve straight answers…" panel (Drew 2026-07-21).
      The legacy panel indented its copy 70px past the H1, let the line wrap to a
      lonely "neighbor." 4th line, and packed the Google-reviews badge hard up
      against the vertical divider on the right. Three fixes, desktop only
      (the <=1200px stack already reflows this panel to a centered column):
        - padding-left 70px -> 15px so the copy's left edge lines up with the H1
          and the "FROM I-95…" display type directly above it;
        - font-size 28px -> 22px, which collapses the copy to a clean 3 lines;
        - justify-content space-between + padding-right 56px so the reviews badge
          sits at the right with real clearance from the divider, not on it. */
@media (min-width: 1024px) {
  .homepage-hero-wrap .homepage-hero-content .description {
    padding-left: 15px;
    padding-right: 56px;
    justify-content: space-between;
    gap: 40px;
  }
  .homepage-hero-wrap .homepage-hero-content .description span {
    font-size: 22px;
    line-height: 145%;
    max-width: 58ch;
    flex: 1 1 auto;
  }
  .homepage-hero-content .g-reviews {
    flex: 0 0 auto;
  }
}

/* 7. Recent Results "$" — top-align to the number (Drew 2026-07-21).
      The amounts render as `<span><sup>$</sup>19 <span class="million">…`. The
      bare <sup> inherits the UA default `vertical-align: super`, which floats the
      dollar sign comically high above the League Gothic numeral. The baked SVG on
      live drew a small "$" whose top sits at the numeral's cap height — restore
      that: shrink to 0.44em and top-align to the number instead of super. */
.homepage-hero-content .cases_section .case_result sup {
  font-size: 0.44em;
  vertical-align: top;
  top: 0;
  line-height: 1;
  position: static;
  margin-right: 2px;
}

/* 8. MOBILE / TABLET hero polish (Drew 2026-07-21, post-launch).
   8a. Header (<=992): move the EN/ES flags inline, just left of the hamburger, and
       slim the top bar. Legacy put .lang-codes position:absolute top-right on its own
       bar; here the logo takes the left (margin-right:auto) and flags+burger group right. */
@media (max-width: 992px) {
  .header-main { padding-top: 14px !important; }
  .header-main-wrap .container .header-main { justify-content: flex-start !important; }
  .header-logotype { order: 1; margin-right: auto; }
  .header-main-wrap .lang-codes {
    order: 2; position: static !important; top: auto !important; right: auto !important;
    flex-direction: row; align-items: center;
  }
  .header-cta { order: 3; }
  header.header button.burger { order: 4; margin-left: 14px; }
  .header-main-wrap .lang-codes-label { display: none; }
}
/* 8b. Tablet band (577-1200): legacy hides the hp_title CTA (display:none), so the
   "Get a Free Consultation" button vanished in that range. Restore it — and it also
   pushes Michael's photo down so the headline clears his face. */
@media (min-width: 577px) and (max-width: 1200px) {
  .homepage-hero-wrap .homepage-hero-content .hp_title a { display: block !important; margin: 18px auto 0; }
}
/* 8c. Hero fills the viewport on mobile/tablet; the "You deserve…" panel gets bottom
   breathing room so it isn't flush against the bottom of the hero graphic. */
@media (max-width: 1200px) {
  .homepage-hero-wrap { min-height: 100vh; min-height: 100svh; }
  .homepage-hero-wrap .homepage-hero-content .description { padding-bottom: 44px; }
}
/* 8d. Google-reviews badge glow. Desktop: soft WHITE (the badge sits in the dark
   "You deserve…" box). Mobile/tablet: BLACK — there the badge overlaps Michael's
   white shirt/collar, where a white glow disappears (Drew 2026-07-21). */
.homepage-hero-content .g-reviews {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.95)) drop-shadow(0 0 9px rgba(255,255,255,0.55));
}
@media (max-width: 1200px) {
  .homepage-hero-content .g-reviews {
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.95)) drop-shadow(0 0 7px rgba(0,0,0,0.7));
  }
}