/* ============================================================================
   Zipify 2026 — shared blog vocabulary. Requires tokens.css + theme.css.
   ============================================================================

   Ported from zipify-refresh's `assets/redesign/css/components.css`, reduced to
   the components the blog surfaces actually use: buttons, badges, the form
   input, the icon/step containers and the page wrapper. The rest of that file
   (cards, stat blocks, pill-dark, surface-dark, quote-card) belonged to the
   Academy and sales pages and has no caller here.

   `blog-index.css` and `blog-article.css` both depend on this handle, the same
   way `zp-pages` depends on `zp-home` — the vocabulary is shared between the
   index and the article, so it is defined once rather than twice.

   Two rules from the source are deliberately absent:
     * the legacy `body.zip-redesign a.btn` collision block, which re-asserted
       the design system over sm-style.css's `.btn:link` (specificity 0,2,0).
       That stylesheet does not exist in this theme, so there is nothing to
       out-specify.
     * the top-of-file element reset (`*`, `body`, `img`, `a`), which theme.css
       already provides for every surface.
*/

/* Page ground. Scoped to the body class rather than a bare `body` selector so
   this file cannot repaint a non-blog surface if it is ever loaded more widely. */
body.zp-blog { background: var(--ink-050); color: var(--ink-900); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-8); }

/* ===================== BUTTONS ===================== */
/* Qualified with the element (`a.btn` / `button.btn`) for the same reason
   theme.css qualifies `button.zp-btn`: hello-elementor's reset.css targets
   `[type=button],button` at specificity (0,1,0) and loads after us, so a bare
   `.btn` would lose every tie on <button> CTAs. See assets/css/reset.css. */
a.btn, button.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: auto; height: auto; line-height: 1.1;
  padding: 14px 28px; border: none; border-radius: 15px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: var(--ls-button); text-transform: uppercase;
  cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
a.btn:hover, button.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
a.btn:active, button.btn:active { transform: translateY(0) scale(.98); filter: brightness(.93); }
a.btn--sm, button.btn--sm { padding: 10px 18px; font-size: 13px; }
a.btn--lg, button.btn--lg { padding: 18px 36px; font-size: 16px; }
a.btn--xl, button.btn--xl { padding: 22px 42px; font-size: 17px; }

/* Primary — OCU orange→pink gradient with inner highlight ring */
a.btn--primary, button.btn--primary {
  background: var(--grad-ocu);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08);
}
a.btn--primary:hover, button.btn--primary:hover { filter: brightness(1.07); color: #fff; }
/* Secondary — outlined ghost on dark */
a.btn--secondary, button.btn--secondary {
  background: rgba(255,255,255,.04);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
}
a.btn--secondary:hover, button.btn--secondary:hover {
  background: rgba(255,255,255,.09); filter: none; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.42);
}
/* Secondary — outlined on light */
a.btn--secondary-light, button.btn--secondary-light {
  background: transparent; color: var(--ink-900); box-shadow: inset 0 0 0 1.5px var(--ink-300);
}
a.btn--secondary-light:hover, button.btn--secondary-light:hover {
  box-shadow: inset 0 0 0 1.5px var(--ink-700); filter: none; color: var(--ink-900);
}
a.btn:focus-visible, button.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* On mobile, CTA buttons stretch full-width. CTA rows use flex-wrap, so each
   full-width button naturally drops to its own line. */
@media (max-width: 560px) {
  a.btn, button.btn { width: 100%; }
}

/* ===================== BADGES ===================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.badge--default  { background: var(--ink-100); color: var(--ink-700); }
.badge--zipify   { background: var(--blue-050); color: var(--blue-500); }
.badge--free     { background: var(--zip-yellow); color: var(--ink-900); }
.badge--count    { background: var(--ink-900); color: #fff; }
.badge--scarcity { background: #fff0e8; color: var(--orange-500); }
.badge--data     { background: #FFF9E4; color: #856013; }

/* ===================== STEP / ICON CONTAINERS ===================== */
.step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--r-md); background: var(--ink-900); color: var(--zip-yellow);
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
  letter-spacing: var(--ls-tight); flex-shrink: 0;
}
.icon-circle {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 999px; background: var(--zip-yellow); color: var(--ink-900); flex-shrink: 0;
}
.icon-circle svg { width: 22px; height: 22px; }

/* The sprite symbols in home.php are Lucide-style stroke paths carrying no
   presentation attributes of their own. The source theme never gave `.icon` a
   rule, so every one of them painted as a solid black fill. Stroking them here
   is what the design intends. */
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===================== FORMS ===================== */
.input {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--ink-200); border-radius: var(--r-md);
  background: #fff; font-family: var(--font-body); font-size: 15px; font-weight: 400;
  color: var(--ink-900); outline: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input:focus { border-color: var(--blue-700); box-shadow: var(--focus-ring); }
.input::placeholder { color: var(--ink-400); }
.input--sm { padding: 10px 14px; font-size: var(--fs-caption); }
.input--dark { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff; }
.input--dark::placeholder { color: rgba(255,255,255,.4); }
.input--dark:focus { border-color: rgba(255,215,72,.6); box-shadow: 0 0 0 3px rgba(255,215,72,.1); }

/* ===================== TYPE HELPERS ===================== */
/* The subset of colors_and_type.css's semantic classes the blog markup uses. */
.t-eyebrow {
  font-family: var(--font-display); font-size: var(--fs-eyebrow); font-weight: 700;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--accent);
}
.t-eyebrow--yellow { color: var(--zip-yellow); }
.t-eyebrow--red { color: var(--pink-500); }
.grad-text-blue { background: var(--grad-blue-text-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text-yellow { background: var(--grad-yellow-text-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent-y { color: var(--zip-yellow); }

@media (prefers-reduced-motion: reduce) {
  a.btn, button.btn { transition: none; }
}