/* Shell-side visual overrides for the in-document icore-website theme.
 *
 * Loaded by renderPackageThemeInline() AFTER the theme's own stylesheet, so
 * these win on equal specificity without touching the theme bundle. Keep every
 * rule tightly scoped to a theme class — this file must never restyle the theme
 * broadly. Remove a rule to revert that tweak.
 *
 * `!important` is used only where the theme sets the property via an inline
 * style attribute (React style={{…}}), which nothing else can override.
 */

/* ── Header logo: reserve its box before the image loads (CLS) ─────────────────
 * The theme fixes height (42px desktop / 36px mobile, both !important) but
 * leaves width:auto -- so before the <img> has loaded (no HTML width/height
 * attrs either), the browser can't compute the auto width from a ratio it
 * doesn't have yet, and the box grows from ~0 to its real ~85px once the
 * image decodes. That width jump reflows the whole header row (nav, burger
 * button) sideways -- desktop Lighthouse: 0.10+ of a 0.45 total CLS traced
 * straight to "Media element lacking an explicit size" on this element.
 * aspect-ratio (logo's natural 520x256 px) lets the browser derive the width
 * from the theme's own fixed height immediately, with no image load needed. */
.new-header-logo-img {
  aspect-ratio: 520 / 256;
}

/* ── Homepage "Our Technology Stack & Platforms" ───────────────────────────────
 * The right panel stretches to the (taller) domains sidebar, leaving each tab
 * with 3 small icon cards top-aligned and ~280px of empty white below. Make the
 * cards + icons substantial and centre the row in the leftover space.        */
.tech-stack-section .tech-content-area.desktop-only .technologies-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 28px 0 auto;      /* sit just under the header; leftover space at foot */
  align-content: start;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card {
  padding: 40px 18px;
  gap: 18px;
  min-height: 210px;
  justify-content: center;
  border-radius: 16px;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-icon {
  width: 76px !important;
  height: 76px !important;
  border-radius: 16px;
  flex: 0 0 auto;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-icon img,
.tech-stack-section .tech-content-area.desktop-only .tech-card-icon svg {
  width: 48px !important;
  height: 48px !important;
}

.tech-stack-section .tech-content-area.desktop-only .tech-card-name {
  font-size: 16px;
  font-weight: 600;
}

/* Tablet / narrow accordion variant (.tech-content-area.mobile-only): a gentle
 * icon bump only — its 3-up grid gets tight below ~520px, so don't push it. */
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon {
  width: 54px !important;
  height: 54px !important;
}
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon img,
.tech-stack-section .tech-content-area.mobile-only .tech-card-icon svg {
  width: 36px !important;
  height: 36px !important;
}

/* ── Route placeholder: keep the footer below the fold while a page loads (CLS) ──
 * While a route's code chunk downloads, the theme renders a Suspense fallback
 * `div.min-h-[60vh]` (~494px on a phone) between header and footer, so the top
 * of the footer paints inside the first screen. When the page content replaces
 * the fallback, the whole footer jumps ~12,000px down: measured CLS 0.333 on
 * every blog post. A full-viewport placeholder starts the footer below the
 * fold, and movement entirely outside the viewport is not a layout shift. */
#root .App > div.min-h-\[60vh\] {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Skip layout/paint for below-the-fold blocks until they scroll near (TBT/LCP) ──
 * Service pages carry ~13 sections and a 1,800px footer; on a throttled phone
 * the browser spent 1.2-2.7 s in style & layout for content nobody can see yet,
 * delaying the hero's render. content-visibility:auto defers that work until
 * the block approaches the viewport; `contain-intrinsic-size: auto <h>` gives
 * the placeholder a height (and remembers the real one once rendered), so the
 * scrollbar and anchors stay stable. The first two sections (hero + the strip
 * under it) always render normally. */
#root .App > main > section:nth-of-type(n+3),
#root .App > section.icore-related,
#root .App > footer.footer-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ── Homepage pre-render (server.js injectPrerender) ──
 * The snapshot sits in #icore-prerender until main.js swaps in React's #root,
 * so it gets the theme's own #root rules. */
#icore-prerender {
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}