/* ============================================================
   LinkFinite mobile-first layer — app.css
   Loaded AFTER each page's inline styles; overrides for
   fluid layout, thumb-zone nav, app-like feel, PWA readiness.
   Palette: paper #F7FAFD · ink #0B1F3F · royal #1553A8 ·
   navy #0A2559 · sky #29ABE2 · slate #46608A · line #D6E4F2
   ============================================================ */

:root {
  --lf-royal: #1553A8;
  --lf-navy: #0A2559;
  --lf-sky: #29ABE2;
  --lf-ink: #0B1F3F;
  --lf-paper: #F7FAFD;
  --lf-line: #D6E4F2;
  --lf-slate: #46608A;
  --lf-ease: cubic-bezier(.2, .8, .2, 1);
  --lf-tabbar-h: 62px;
  --lf-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ---- Global guards: zero horizontal scroll, fluid media ---- */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe, table, pre { max-width: 100%; }

/* ---- App-like feel: kill native tap flash, control selection ---- */
* { -webkit-tap-highlight-color: transparent; }
a, button, nav, .btn, .chip, .lf-tabbar, label, summary {
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
p, li, h1, h2, h3, h4, blockquote, td, dd, figcaption {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- Comfortable tap targets everywhere (48px rule) ---- */
.btn, button, [role="button"], input[type="submit"] {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
input, select, textarea {
  min-height: 48px;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}
textarea { min-height: 96px; }
.chip, .chips button, #industryChips button, #sizeChips button {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---- Haptic-like micro-interactions (GPU-accelerated) ---- */
.btn, button, .chip, .more, .lf-tab {
  transition: transform .16s var(--lf-ease), box-shadow .16s var(--lf-ease),
              background-color .16s var(--lf-ease), color .16s var(--lf-ease);
  will-change: transform;
}
.btn:active, button:active, .chip:active, .lf-tab:active { transform: scale(.96); }
input:focus-visible, textarea:focus-visible, select:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--lf-sky);
  outline-offset: 2px;
  border-radius: 6px;
}
input:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(41, 171, 226, .25);
}

/* ---- Fluid typography: adapts 320px → 4K without breakpoints ---- */
h1 { font-size: clamp(1.85rem, 1.2rem + 3.2vw, 3.4rem) !important; line-height: 1.12; }
h2 { font-size: clamp(1.45rem, 1.05rem + 1.8vw, 2.2rem) !important; line-height: 1.2; }
h3 { font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem) !important; }
.wrap { padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }

/* ---- Very large screens: keep measure readable ---- */
@media (min-width: 1800px) {
  .wrap { max-width: 1320px; margin-left: auto; margin-right: auto; }
}

/* ============================================================
   Bottom tab bar — thumb-zone navigation (mobile only)
   Injected by app.js as <nav class="lf-tabbar">
   ============================================================ */
.lf-tabbar {
  position: fixed !important;
  z-index: 999;
  /* inset: top auto is CRITICAL — the pages' own `nav{top:0}` rule would
     otherwise stretch this bar to cover the whole viewport. */
  inset: auto 0 0 0;
  top: auto !important;
  bottom: 0 !important;
  height: auto !important;
  display: none;
  background: rgba(10, 37, 89, .92); /* navy-deep, frosted */
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-top: 1px solid rgba(41, 171, 226, .35);
  border-bottom: 0;
  padding-bottom: var(--lf-safe-b);
  transform: translateZ(0); /* promote to its own GPU layer */
  /* iOS: Safari's toolbar collapse changes the safe-area inset while
     scrolling; animate the reseat so it glides instead of jumping. */
  transition: padding-bottom .3s var(--lf-ease);
}
.lf-tabbar-inner {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
}
.lf-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--lf-tabbar-h);
  min-width: 48px;
  padding: 8px 2px;
  color: #B9CDE8;
  text-decoration: none;
  font: 500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lf-tab svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s var(--lf-ease);
}
.lf-tab[aria-current="true"] { color: #FFFFFF; }
.lf-tab[aria-current="true"] svg { stroke: var(--lf-sky); transform: translateY(-1px); }
.lf-tab--cta svg { stroke: var(--lf-sky); }

@media (max-width: 900px) {
  .lf-tabbar { display: block; }
  body { padding-bottom: calc(var(--lf-tabbar-h) + var(--lf-safe-b) + 8px); }
  footer { padding-bottom: 12px; }

  /* Top bar slims down; tab bar owns navigation */
  section { scroll-margin-top: 72px; }
  [id] { scroll-margin-top: 72px; }

  /* Full-width primary actions feel native on phones */
  .hero .btn, .contact-grid .btn, form .btn { width: 100%; }

  /* Cards and grids breathe on small screens */
  .hero-grid, .assess-grid, .contact-grid,
  .premium-grid, .why-grid, .svc-grid { gap: 18px; }
}

/* ---- Page-enter transition (app-like, GPU-accelerated) ---- */
@media (prefers-reduced-motion: no-preference) {
  body { animation: lf-page-in .35s var(--lf-ease); }
  @keyframes lf-page-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .lf-tab svg, .btn, button, .chip { transition: none; }
}