/* ═══════════════════════════════════════════════════
   TRUST ARCHITECTURE — shared design system
   Sitewide security / privacy / compliance / AI-governance
   UI primitives. Additive layer on top of atominc-shared.css —
   reuses existing tokens (--green, --navy, --pink, --radius-*)
   and existing animation vocabulary (ccFloat, ccPip, ccPanelIn,
   ccPulse are defined per-page; this file only adds the one new
   keyframe genuinely needed for the Trust Center hero icon).
   Loaded on every page (see functions.php enqueue loop) so any
   template can use these classes without extra wiring.
   ═══════════════════════════════════════════════════ */

:root {
    /* Glass surface — light background variant (default site surface) */
    --trust-glass-bg: rgba(255,255,255,.55);
    --trust-glass-bg-solid: rgba(255,255,255,.92);
    --trust-glass-border: rgba(255,255,255,.35);
    --trust-glass-blur: 16px;
    --trust-glass-shadow: 0 8px 40px rgba(13,26,15,.08), 0 2px 8px rgba(13,26,15,.05);

    /* Glass surface — dark variant, for use on existing navy gradient sections */
    --trust-glass-bg-dark: rgba(255,255,255,.06);
    --trust-glass-border-dark: rgba(255,255,255,.14);
    --trust-glass-shadow-dark: 0 8px 40px rgba(0,0,0,.35);

    /* Icon-badge accents — reuse the existing gradient-pair palette already
       used sitewide for 48px icon circles, just named for trust-card use */
    --trust-accent-security: #2563eb;   /* blue   */
    --trust-accent-compliance: #7c3aed; /* purple */
    --trust-accent-ai: #d97706;         /* amber  */
    --trust-accent-privacy: #db2777;    /* pink   */
    --trust-accent-infra: #16a34a;      /* green  */
    --trust-accent-monitoring: #ea580c; /* orange */
}

/* ── GLASS CARD ──────────────────────────────────────────── */
.trust-glass-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.9));
    backdrop-filter: blur(var(--trust-glass-blur));
    -webkit-backdrop-filter: blur(var(--trust-glass-blur));
    border: 1px solid var(--trust-glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--trust-glass-shadow);
    padding: 32px 28px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
/* Category accent (set per card via .trust-glass-card--<category>) drives
   the top hairline and hover border/glow below — falls back to green. */
.trust-glass-card--security   { --accent: var(--trust-accent-security);   --accent-border: rgba(37,99,235,.28);  --accent-glow: rgba(37,99,235,.14); }
.trust-glass-card--compliance { --accent: var(--trust-accent-compliance); --accent-border: rgba(124,58,237,.28); --accent-glow: rgba(124,58,237,.14); }
.trust-glass-card--ai         { --accent: var(--trust-accent-ai);         --accent-border: rgba(217,119,6,.28);  --accent-glow: rgba(217,119,6,.14); }
.trust-glass-card--privacy    { --accent: var(--trust-accent-privacy);    --accent-border: rgba(219,39,119,.28); --accent-glow: rgba(219,39,119,.14); }
.trust-glass-card--infra      { --accent: var(--trust-accent-infra);      --accent-border: rgba(22,163,74,.28);  --accent-glow: rgba(22,163,74,.14); }
.trust-glass-card--monitoring { --accent: var(--trust-accent-monitoring); --accent-border: rgba(234,88,12,.28);  --accent-glow: rgba(234,88,12,.14); }

/* Top accent hairline — subtle at rest, brightens and widens on hover */
.trust-glass-card::after {
    content: "";
    position: absolute;
    top: 0; left: 20px; right: 20px; height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--accent, var(--green)), transparent);
    opacity: .3;
    transition: opacity .35s ease, left .35s ease, right .35s ease;
}
.trust-glass-card:hover::after { opacity: .9; left: 0; right: 0; }
/* Glass reflection sheen — pure CSS, no JS, cheap (transform/opacity only) */
.trust-glass-card::before {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    transition: opacity .3s ease, left .6s ease;
    pointer-events: none;
}
.trust-glass-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent-border, rgba(22,163,74,.28));
    box-shadow: 0 24px 60px rgba(13,26,15,.10), 0 8px 22px var(--accent-glow, rgba(22,163,74,.12)), 0 2px 8px rgba(13,26,15,.05);
}
.trust-glass-card:hover::before { left: 120%; opacity: 1; }
.trust-glass-card:hover .trust-card-icon { transform: scale(1.06); }

.trust-glass-card--dark {
    background: var(--trust-glass-bg-dark);
    border-color: var(--trust-glass-border-dark);
    box-shadow: var(--trust-glass-shadow-dark);
    color: #fff;
}
.trust-glass-card--dark:hover {
    box-shadow: 0 20px 56px rgba(0,0,0,.45);
}
.trust-glass-card--compact { padding: 16px 20px; border-radius: var(--radius-md); }

.trust-card-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    animation: trustIconFloat 5s ease-in-out infinite;
}
.trust-card-icon svg { width: 26px; height: 26px; }
.trust-card-icon--security   { background: linear-gradient(135deg,#dbeafe,#bfdbfe); color: var(--trust-accent-security); }
.trust-card-icon--compliance { background: linear-gradient(135deg,#ede9fe,#ddd6fe); color: var(--trust-accent-compliance); }
.trust-card-icon--ai         { background: linear-gradient(135deg,#fef3c7,#fde68a); color: var(--trust-accent-ai); }
.trust-card-icon--privacy    { background: linear-gradient(135deg,#fdf2f8,#fce7f3); color: var(--trust-accent-privacy); }
.trust-card-icon--infra      { background: linear-gradient(135deg,#f0fdf4,#dcfce7); color: var(--trust-accent-infra); }
.trust-card-icon--monitoring { background: linear-gradient(135deg,#ffedd5,#fed7aa); color: var(--trust-accent-monitoring); }

.trust-card-title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.trust-glass-card--dark .trust-card-title { color: #fff; }
.trust-card-desc { font-size: .92rem; line-height: 1.6; color: var(--ink-muted); }
.trust-glass-card--dark .trust-card-desc { color: rgba(255,255,255,.65); }

/* ── CHIPS (small inline trust indicators) ──────────────────
   Same hex-alpha background/border trick already used by
   .cc-m-tag / .svc-d-tag elsewhere in the theme. */
.trust-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .74rem; font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 12px;
    border-radius: 50px;
    white-space: nowrap;
    line-height: 1;
}
.trust-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.trust-chip--encrypted    { background: rgba(37,99,235,.10);  border: 1px solid rgba(37,99,235,.24);  color: #1d4ed8; }
.trust-chip--verified     { background: rgba(22,163,74,.10);  border: 1px solid rgba(22,163,74,.24);  color: #15803d; }
.trust-chip--compliance   { background: rgba(124,58,237,.10); border: 1px solid rgba(124,58,237,.24); color: #6d28d9; }
.trust-chip--privacy      { background: rgba(219,39,119,.10); border: 1px solid rgba(219,39,119,.24); color: #be185d; }
.trust-chip--ai           { background: rgba(217,119,6,.10);  border: 1px solid rgba(217,119,6,.24);  color: #b45309; }
.trust-chip--enterprise   { background: rgba(13,26,15,.06);   border: 1px solid rgba(13,26,15,.14);   color: var(--ink); }

/* Row wrapper for a strip of chips/badges — wraps gracefully on mobile */
.trust-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }

/* ── BADGES (slightly larger, used near pay buttons / form submits) ── */
.trust-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .8rem; font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--ink-muted);
}
.trust-badge svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--green); }
.trust-badge--green  { background: var(--green-light); border-color: rgba(22,163,74,.24); color: #15803d; }
.trust-badge--green svg { color: #16a34a; }
.trust-badge--blue   { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.22); color: #1d4ed8; }
.trust-badge--blue svg { color: #2563eb; }

/* Small reassurance microcopy line used near forms/checkout submit actions */
.trust-microcopy {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: var(--ink-muted);
    margin-top: 10px;
}
.trust-microcopy svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--green); }

/* ── ANIMATION ───────────────────────────────────────────────
   ccFloat/ccPip/ccPanelIn/ccPulse already exist per-page and are
   reused as-is at point of use. Only one new keyframe added here,
   modeled directly on the existing ccPulse radar-ping pattern,
   for the Trust Center hero shield — kept subtle and GPU-cheap
   (opacity + transform only). */
@keyframes trustIconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes trustShieldPulse {
    0%   { box-shadow: 0 0 0 0 rgba(22,163,74,.35); }
    70%  { box-shadow: 0 0 0 22px rgba(22,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.trust-shield-pulse { animation: trustShieldPulse 2.6s ease-out infinite; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
    .trust-card-icon, .trust-shield-pulse { animation: none; }
    .trust-glass-card, .trust-glass-card::before { transition: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .trust-glass-card { padding: 24px 22px; }
    .trust-card-icon { width: 48px; height: 48px; border-radius: 14px; }
    .trust-card-icon svg { width: 22px; height: 22px; }
    .trust-chip-row { gap: 8px; }
    .trust-chip { font-size: .7rem; padding: 5px 10px; }
}
@media (max-width: 480px) {
    .trust-chip-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .trust-chip-row::-webkit-scrollbar { display: none; }
}

/* ── NAV LINK (plain top-level nav item, e.g. "Trust Center") ──
   Deliberately reuses .nav-trigger's own box model/typography by
   just being applied to an <a> instead of a <button> — no new
   class needed there. This block only covers the mobile nav case
   where .mob-accordion-trigger normally pairs with a chevron/JS
   toggle; here it's used as a plain link instead. */
.mob-accordion-trigger.mob-link-plain { text-decoration: none; }
.mob-accordion-trigger.mob-link-plain span { display: inline-flex; align-items: center; gap: 8px; }

/* Dedicated fixed-size icon class for inline nav/label icons — used instead
   of ad-hoc Tailwind size utilities (tw-h-*/tw-w-*) so icon sizing doesn't
   depend on whichever arbitrary sizes happen to already be in the compiled
   Tailwind build. Scoped to this one class only; does not affect any
   existing icon usage elsewhere (those keep whatever sizing they already had). */
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; vertical-align: -3px; }

/* ── HOMEPAGE TRUST GRID — layout rules live here (in the global trust CSS)
   so the 3-column card grid always applies regardless of which page-specific
   stylesheet (styles-index.css) happens to be cached or loaded.
   Card visuals (.trust-glass-card, .trust-card-icon etc.) are above; this
   block only adds the grid container, band, and CTA layout. */
.s-secure-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1160px;
    margin: 0 auto;
}
@media (max-width: 1024px) {
    .s-secure-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .s-secure-grid { grid-template-columns: 1fr; }
}