/* PDFlyHQ — tools/compress-pdf/layout.css
   Tool shell only — step wrapper, transitions, breadcrumb, tool header.
   Copy as-is for future tools. Self-contained: relies only on
   base/variables.css tokens, never on home/layout.css.

   The "seo-section" look (How It Works / Features / FAQ / Related Tools)
   used to live here, but those four partials are byte-identical across
   every one of the 50 tools (Ground Rule 10) — duplicating their CSS into
   50 copies of this file would be exactly the copy-paste drift Ground
   Rule 10 exists to prevent. That styling now lives in
   wwwroot/css/components/{how-it-works,features,faq,related-tools}.css,
   loaded globally via _GlobalCss.cshtml. This file keeps only what's
   genuinely specific to the tool shell itself.

   NOTE: @keyframes page-in and step-in are defined here for now.
   If a second non-tool context ever needs an entrance animation, move
   both to base/animations.css and @import from there. */


/* ── Tool shell ── */
/* top padding is intentional — unlike home/.home (which uses 0 and lets
   the hero section own its own top spacing), the tool shell has no hero
   block, so the padding lives here instead.
   max-width: 1200px applied here so the header, panel, and all SEO sections
   share one consistent column — no need for per-child max-width overrides. */
.tool-app {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4) var(--space-16);
}


/* ── Tool header ── */
/* Subtle one-time entrance on page load — header first, panel a beat later.
   Respects prefers-reduced-motion via the global override in reset.css. */
.tool-header {
  margin-bottom: var(--space-6);
  animation: page-in 500ms var(--ease-out);
}

/* page-in: used by .tool-header (instant) and .tool-steps-wrap (80ms delay).
   step-in: used per .tool-step on show — slightly larger Y shift (8px vs 6px)
   to give the panel swap more presence than the initial page load. Kept as a
   separate keyframe rather than a shared one so each can be tuned independently
   without affecting the other. */
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* .breadcrumb lives in components/breadcrumb.css — shared globally. */

.tool-header h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
}
@media (min-width: 768px) {
  .tool-header h1 { font-size: var(--text-3xl); }
}
/* Matches home's 1024px hero title breakpoint — keeps the tool H1 visually
   on par with the hero heading on wide screens. */
@media (min-width: 1024px) {
  .tool-header h1 { font-size: 44px; }
}


/* Category chip — optimize = cyan, matches this tool's home-grid card.
   letter-spacing and background opacity aligned with home's .section__eyebrow
   (0.08em / 10%) to keep eyebrow components visually consistent site-wide. */
.tool-eyebrow {
  display: inline-block;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-cat-optimize);
  background: color-mix(in srgb, var(--color-cat-optimize) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}


/* Subtitle under H1 */
.tool-header__content > p {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--color-text-secondary);
  max-width: 56ch;
}


/* Inline privacy reassurance under the title */
.tool-privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-success-600);
  background: color-mix(in srgb, var(--color-success-500) 12%, transparent);
  border-radius: var(--radius-full);
}
/* Dark mode: override both text AND icon color together — the SVG inherits
   currentColor, so setting it only on the parent is sufficient, but being
   explicit here prevents a future refactor from accidentally splitting them. */
:root[data-theme="dark"] .tool-privacy {
  color: var(--color-success-500);
}

/* Without an explicit size, reset.css's blanket `svg { max-width: 100% }`
   isn't enough to stop this icon growing to fill .tool-privacy's own
   auto-sized width — there's no fixed-width ancestor to cap it against,
   so it renders at the browser's SVG intrinsic default instead of the
   16px icon it's meant to be. */
.tool-privacy svg {
  flex: none;
  width: 16px;
  height: 16px;
}


/* ── Step container ── */
.tool-steps-wrap {
  margin-bottom: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  animation: page-in 500ms var(--ease-out) 80ms both;
}
@media (min-width: 640px) {
  .tool-steps-wrap { padding: var(--space-8); }
}

.tool-step {
  animation: step-in var(--duration-slower) var(--ease-out);
}
.tool-step.hidden { display: none; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}