/* ============================================================================
   secureflow-site-theme.css  —  INLINE integration overrides (no iframe).

   The SecureFlow viewer is mounted inline into  #secureflow-app-host > #app  in
   the SAME document as the site chrome. This stylesheet is loaded LAST (after
   css/style.css and the viewer's own bundled CSS) so its rules win.

   It does three jobs:
   1) Page-scroll model: the viewer ships html,body{height:100%;overflow:hidden}.
      For the catalog/home we restore the normal site scroll model, so the page
      scrolls as ONE document with the native scrollbar and a real footer, exactly
      like /aia/ and /about/.
   2) Case (detail) view: when a flow is open (html.sf-case, toggled by the inline
      controller in index.html) the viewer becomes a full-screen takeover and the
      site header/footer are hidden — the viewer keeps its native full-viewport
      layout (the mode it was designed for), so the diagram canvas sizes correctly.
   3) Visual alignment: hero / section-label / title / subtitle / stats / cards /
      container are aligned to the aidefendlabs.com design language.

   Everything that re-shapes the viewer layout is scoped to html:not(.sf-case)
   (home) or html.sf-case (case) so the two modes never fight. !important is used
   on layout overrides to beat the viewer's #id / [data-v] scoped rules.
   ============================================================================ */

/* ---- 1. Home page-scroll model -------------------------------------------- */
html, body {
  height: auto;
  min-height: 0;
  width: auto;
  overflow-x: clip;                 /* match the site (style.css sets overflow-x: clip) */
  overflow-y: visible;              /* ...only the Y axis scrolls (becomes the document scroll) */
  font-family: var(--font-sans);    /* match the site font fallback chain (viewer set Inter, sans-serif) */
}
body { background: var(--bg-primary); }

/* The viewer adds a decorative "↗" after external links (a[href^=https]::after). Keep it
   inside the viewer, but strip it from the real site nav/footer external links so the chrome
   matches /about/ exactly. Scoped to http(s) chrome links only, so the site's internal
   nav-link hover underline (.nav-links a:not(.btn)::after) is preserved. */
.nav a[href^="http"]::after,
.footer a[href^="http"]::after { content: none !important; display: none !important; }

/* Clear the fixed nav, mirroring .aia-page-main { padding-top: var(--nav-height) } */
#secureflow-app-host { padding-top: var(--nav-height); }

/* Let the catalog/home flow in the document (neutralise the viewer's full-viewport
   layout). Scoped to home so the case view is untouched. */
html:not(.sf-case) #app,
html:not(.sf-case) #main,
html:not(.sf-case) #app-body,
html:not(.sf-case) #app-body > .frame.center,
html:not(.sf-case) #secureflow-home {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}
html:not(.sf-case) #main { display: block !important; }
html:not(.sf-case) #app-body { display: block !important; }   /* neutralise inline gridLayout */
html:not(.sf-case) #app-body > .frame.center { display: block !important; }
/* The viewer stacks home/diagram as absolute layers inside .frame.center; in the
   inline home we need the home in normal flow so it gives the document its height. */
html:not(.sf-case) #secureflow-home { position: static !important; }

/* The catalog's search/filter bar is position:sticky;top:0 in the viewer. In the
   document scroll that would pin it UNDER the fixed nav; pin it just below instead. */
html:not(.sf-case) .secureflow-controls { top: var(--nav-height) !important; }

/* The viewer's floating "scroll to top" button is wired to the component element's own
   scroll (this.$el.scrollTop) — which is always 0 now that the DOCUMENT scrolls — so it
   never reveals and its click would scroll the wrong element. Hide it; the catalog now
   scrolls natively (wheel / scrollbar / keyboard), like every other site page. */
html:not(.sf-case) .secureflow-scroll-top { display: none !important; }
html:not(.sf-case) #app-body > .frame.right,
html:not(.sf-case) #app-body > .frame.bottom { display: none !important; }

/* ---- 2. Case (detail) view = full-screen takeover ------------------------- */
html.sf-case, html.sf-case body { height: 100%; overflow: hidden; }
html.sf-case .nav,
html.sf-case .footer { display: none !important; }
html.sf-case #secureflow-app-host {
  position: fixed;
  inset: 0;
  padding-top: 0;
  z-index: 40;
}

/* ---- 3. Visual alignment to the site -------------------------------------- */

/* Hero box -> match .aia-hero padding (64px top / 28px bottom). With the host
   padding-top (nav-height) this puts the section-label at the same Y as /aia/. */
.secureflow-home .secureflow-hero {
  padding: 64px 0 28px !important;
}

/* Page container -> match site .container (max-width 1200 + 24px side padding) so
   the hero / controls / cards line up with the site nav and /aia/. */
.secureflow-home .secureflow-container {
  width: auto !important;
  max-width: 1200px !important;
  padding: 0 24px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Section-label pill -> site .section-label (0.75rem / weight 500). */
.secureflow-home .section-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.secureflow-home .section-label::before {
  box-shadow: 0 0 8px #06d6a0 !important;
}
/* /aia/ shrinks .section-label to 0.65rem at <=768px; match it on mobile. */
@media (max-width: 768px) {
  .secureflow-home .section-label { font-size: 0.65rem !important; }
}

/* Gradient text accent -> site --accent-gradient (#3b82f6 -> #06d6a0). */
.secureflow-home .text-gradient {
  background: linear-gradient(135deg, #3b82f6, #06d6a0) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* Hero title -> site .aia-hero-title (h1): weight 700, line-height 1.15, letter-spacing
   -0.03em (== /aia/ -1.92px at 64px). */
.secureflow-home .secureflow-hero-title {
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
}

/* Hero subtitle -> site .aia-hero-subtitle (1.05rem, max-width 960px). */
.secureflow-home .secureflow-hero-subtitle {
  font-size: 1.05rem !important;
  max-width: 960px !important;
}

/* Stat numbers -> site .aia-stat-number (size + letter-spacing); gradient already
   matches (#60a5fa -> #06d6a0). */
.secureflow-home .secureflow-stat-number {
  font-size: clamp(2.7rem, 5vw, 4.2rem) !important;
  letter-spacing: -0.04em !important;
}
/* The site's .stats-row{justify-content:center} leaks onto the viewer's stats row
   (shared class). The hero wants them LEFT-aligned under the title, like .aia-hero-stats. */
.secureflow-home .secureflow-hero-stats {
  gap: 36px !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
.secureflow-home .secureflow-hero-stats .stat-item { min-width: auto !important; }  /* content width, like /aia/ */
/* Stat label -> site .stat-label (as /aia/ resolves it). The viewer's .stat-label[data-v]
   overrides the site base to 9pt/600/.01em/margin-top:8px; restore the site values so the
   number+label pair reads identically to /aia/. */
.secureflow-home .secureflow-hero-stats .stat-label {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  margin-top: 0 !important;
}
/* Narrow screens: keep BOTH stats on a SINGLE row by letting the number and label fonts
   shrink with the viewport (and the long label wrap inside its own column), instead of
   dropping to two rows. Desktop (>768px) keeps the exact /aia/ sizing. */
@media (max-width: 768px) {
  .secureflow-home .secureflow-hero-stats {
    flex-direction: row !important;   /* site .stats-row goes column <=480px; keep it a row */
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: clamp(14px, 4vw, 36px) !important;
  }
  .secureflow-home .secureflow-hero-stats .stat-item {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
  .secureflow-home .secureflow-hero-stats .secureflow-stat-number {
    font-size: clamp(1.4rem, 7.5vw, 2.7rem) !important;
  }
  .secureflow-home .secureflow-hero-stats .stat-label {
    font-size: clamp(0.6rem, 2.4vw, 0.82rem) !important;
  }
}

/* Catalog cards -> match site .aia-grid / .aia-brief-card spacing + title type.
   (Card surface keeps the viewer's dark-glass style — same design family — only the
   site's bespoke animated gradient border is intentionally not copied.) */
.secureflow-home .flow-grid { gap: 18px !important; }
.secureflow-home .flow-card { padding: 22px !important; gap: 16px !important; }
.secureflow-home .flow-card h2 {
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

/* The PNG-export menu item "AIDEFEND SecureFlow Details" wraps to two lines on narrow
   screens (the viewer sets the item to white-space:normal). Keep each item on ONE line;
   the menu is fixed-positioned with max-width:calc(100vw - 24px), so it just grows a touch
   to fit rather than wrapping. Nothing else changes (desktop already fit on one line). */
.png-dropdown-menu button { white-space: nowrap !important; }

/* ---- 4. Print: drop the site chrome; the viewer prints natively ----------- */
@media print {
  .nav, .footer { display: none !important; }
  /* In a case view, html.sf-case keeps overflow:hidden + a fixed full-screen host, which
     would clamp the printed defense brief to a single page. Release them so the viewer's
     own @media print rules can let the brief flow and paginate. */
  html.sf-case, html.sf-case body { height: auto !important; overflow: visible !important; }
  html.sf-case #secureflow-app-host { position: static !important; inset: auto !important; }
}