/* =====================================================
   trust-bar.css — Site-wide trust signals (A4.1)
   Sits above the navbar; dismissible; auto-returns
   ===================================================== */
/* NOTE: navbar/hero overrides are intentionally UNLAYERED because
   the existing style.css is unlayered. Layered rules always lose
   to unlayered ones — keep these in the same cascade tier. */

/* Height token used to push navbar + content down when bar is visible */
:root { --trust-bar-h: 0px; }
body.has-trust-bar { --trust-bar-h: 36px; }

/* When bar is visible, push fixed navbar down by the bar's height */
body.has-trust-bar .navbar { top: var(--trust-bar-h); }

/* Heroes already account for var(--nav-height) — extend by the bar height too */
body.has-trust-bar .home-hero,
body.has-trust-bar .page-hero,
body.has-trust-bar .city-hero,
body.has-trust-bar .author-hero,
body.has-trust-bar > .hero,
body.has-trust-bar main > .hero {
  padding-top: calc(var(--nav-height) + var(--trust-bar-h));
}
/* For pages without any hero section, push main content down */
body.has-trust-bar main { scroll-margin-top: calc(var(--nav-height) + var(--trust-bar-h)); }

@layer components {
  .trust-bar {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: var(--trust-bar-h);
    z-index: 1001; /* sits above .navbar (z-index 1000) */
    background: linear-gradient(
      90deg,
      rgba(248, 240, 210, 0.96) 0%,
      rgba(252, 247, 226, 0.98) 50%,
      rgba(248, 240, 210, 0.96) 100%
    );
    border-bottom: 1px solid rgba(201, 168, 76, 0.30);
    color: var(--navy-700);
    font-size: var(--text-xs);
    line-height: 1.4;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform-origin: top;
    animation: trustBarSlideIn 400ms var(--ease-emphasized) 100ms backwards;
    overflow: hidden;
  }
  @keyframes trustBarSlideIn {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .trust-bar { animation: none; }
  }

  .trust-bar-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    padding: 0.5rem var(--container-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.25rem;
    flex-wrap: wrap;
  }

  .trust-bar-items {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .trust-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--fw-medium);
    color: var(--navy-700);
    white-space: nowrap;
  }
  .trust-bar-item strong {
    color: var(--gold-900);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
  }
  .trust-bar-sep {
    color: rgba(201, 168, 76, 0.5);
    user-select: none;
  }
  .trust-bar-icon {
    font-size: 0.95rem;
    filter: saturate(0.9);
  }

  .trust-bar-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--navy-500);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.55;
    transition: opacity var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
  }
  .trust-bar-close:hover,
  .trust-bar-close:focus-visible {
    opacity: 1;
    background: rgba(27, 58, 107, 0.08);
  }

  /* Hidden state (sets via .is-hidden class after dismiss) */
  .trust-bar.is-hidden { display: none; }

  /* Mobile compaction */
  @media (max-width: 640px) {
    .trust-bar { font-size: 0.7rem; }
    .trust-bar-inner { padding: 0.4rem 0.75rem; gap: 0.4rem; }
    .trust-bar-items { gap: 0.4rem 0.85rem; }
    .trust-bar-item { gap: 0.3rem; }
    /* Hide secondary items on smallest screens to keep one-line */
    .trust-bar-item.is-secondary { display: none; }
  }
}