/* ==========================================================================
   TECHIE ZEST — COMPONENTS
   Buttons, links, badges, brand mark, breadcrumbs, forms, small utilities.
   (Header/footer live in their own files; section styles in sections.css.)
   ========================================================================== */

/* ======================================================================
   BUTTONS
   ====================================================================== */
.btn {
  --_bg: transparent; --_fg: var(--navy-ink); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.5em;
  font-size: var(--step-0); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-flat); line-height: 1;
  color: var(--_fg); background: var(--_bg);
  border: 1.5px solid var(--_bd); border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn__icon { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary {
  --_bg: var(--emerald); --_fg: var(--white); --_bd: var(--emerald);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--emerald-deep) 75%, transparent);
}
.btn--primary:hover {
  --_bg: var(--emerald-deep); --_bd: var(--emerald-deep);
  box-shadow: 0 13px 24px -12px color-mix(in srgb, var(--emerald-deep) 86%, transparent);
}

.btn--navy { --_bg: var(--navy); --_fg: var(--white); --_bd: var(--navy); }
.btn--navy:hover { --_bg: var(--navy-deep); --_bd: var(--navy-deep); }

.btn--ghost { --_bg: transparent; --_fg: var(--navy-ink); --_bd: var(--line-strong); }
.btn--ghost:hover { --_bd: var(--navy); --_fg: var(--navy); background: color-mix(in srgb, var(--navy) 4%, transparent); }

.btn--on-dark { --_fg: var(--white); }
.btn--on-dark.btn--ghost { --_bd: var(--line-invert); }
.btn--on-dark.btn--ghost:hover { --_bd: var(--white); }

.btn--link { --_fg: var(--navy); padding: 0.25em 0; border: 0; border-radius: 0; position: relative; }
.btn--link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.btn--link:hover { transform: none; }
.btn--link:hover::after { transform: scaleX(1); }

.btn--lg { font-size: var(--step-1); padding: 1em 1.9em; }
.btn--sm { font-size: var(--step--1); padding: 0.7em 1.2em; }
.btn--block { width: 100%; }

/* Arrow link — editorial "read more" */
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-weight: var(--weight-semi); color: var(--navy);
}
.arrow-link svg { transition: transform var(--dur) var(--ease); }
.arrow-link:hover svg { transform: translateX(4px); }
.arrow-link:hover { color: var(--accent-ink); }
.arrow-link--invert { color: var(--white); }
.arrow-link--invert:hover { color: var(--gold-soft); }

/* ======================================================================
   BRAND — supplied logo, used as-is (unmodified)
   ====================================================================== */
.brand { display: inline-flex; align-items: center; }
/* Primary visual anchor of the header. Full asset, uncropped, width scales. */
.brand__logo { width: auto; height: var(--logo-h); display: block; object-fit: contain; }
.brand--footer .brand__logo { height: 84px; }

/* ======================================================================
   BADGES / TAGS / CHIPS
   ====================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-size: var(--step--1); font-weight: var(--weight-semi); letter-spacing: 0.02em;
  color: var(--navy); padding: 0.35em 0.85em;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
}
.badge--emerald { color: var(--emerald-deep); border-color: color-mix(in srgb, var(--emerald) 35%, var(--line)); }
.badge--on-dark { color: var(--text-invert-soft); border-color: var(--line-invert); }

.placeholder-chip {
  display: inline-flex; align-items: center; gap: var(--space-3xs);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-faint); padding: 0.3em 0.7em;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  text-transform: uppercase;
}

/* ======================================================================
   BREADCRUMBS
   ====================================================================== */
.breadcrumbs { font-size: var(--step--1); color: var(--text-faint); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); list-style: none; }
.breadcrumbs a { color: var(--text-soft); }
.breadcrumbs a:hover { color: var(--navy); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2xs); color: var(--line-strong); }
.breadcrumbs [aria-current="page"] { color: var(--navy-ink); }

/* ======================================================================
   FORMS
   ====================================================================== */
.field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.field__label { font-size: var(--step--1); font-weight: var(--weight-semi); color: var(--navy-ink); }
.field__label .req { color: var(--emerald); }
.field__hint { font-size: var(--step--1); color: var(--text-faint); }
.input, .textarea, .select {
  width: 100%; padding: 0.85em 1em;
  background: var(--white); color: var(--text);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 18%, transparent);
}
.textarea { resize: vertical; min-height: 8rem; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select { border-color: #C0392B; }
.field__error { font-size: var(--step--1); color: #C0392B; min-height: 1.2em; }

/* Segmented radio group (budget) */
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip-radio { position: relative; }
.chip-radio input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip-radio span {
  display: inline-block; padding: 0.6em 1em; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-pill); font-size: var(--step--1); color: var(--text-soft);
  transition: all var(--dur) var(--ease);
}
.chip-radio input:checked + span { border-color: var(--emerald); color: var(--emerald-deep); background: color-mix(in srgb, var(--emerald) 6%, transparent); }
.chip-radio input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ======================================================================
   REVEAL ON SCROLL
   ====================================================================== */
[data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal][data-inview="true"] { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}