/*
 * Arc Data — Shared visual polish layer
 * Works alongside Tailwind CDN on all pages.
 * Brand palette: dark #0f172a | blue #0369a1 | light #f8fafc | accent #bae6fd
 */

/* ── Smooth scrolling ──────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── Selection colour ──────────────────────────────────────────── */
::selection {
    background-color: #bae6fd;
    color: #0f172a;
}

/* ── Focus visible improvement (accessibility) ─────────────────── */
*:focus-visible {
    outline: 2px solid #0369a1;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION
   JS adds .sr-visible when element enters the viewport.
   Starting state: transparent + shifted down 20px.
══════════════════════════════════════════════════════════════ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-reveal.sr-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid children */
.scroll-reveal.sr-delay-1 { transition-delay: 0.08s; }
.scroll-reveal.sr-delay-2 { transition-delay: 0.16s; }
.scroll-reveal.sr-delay-3 { transition-delay: 0.24s; }
.scroll-reveal.sr-delay-4 { transition-delay: 0.32s; }
.scroll-reveal.sr-delay-5 { transition-delay: 0.40s; }
.scroll-reveal.sr-delay-6 { transition-delay: 0.48s; }


/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */

/* Subtle shadow when nav is elevated */
nav {
    transition: box-shadow 0.2s ease;
}

/* Mobile menu open/close is handled by toggling .hidden via JS */
#mobile-menu {
    animation: slideDown 0.2s ease forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hamburger button */
#mobile-menu-btn {
    transition: background-color 0.15s ease, color 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════
   CARD HOVER POLISH
   .arc-card: applied to problem cards and capability cards.
   article: targets insight article cards directly.
══════════════════════════════════════════════════════════════ */

/* Generic card with lift-on-hover */
.arc-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.arc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

/* Insight article cards (insights.html) */
article {
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

article:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

/* Featured article cards on homepage — enhance the Tailwind hover */
a.group.bg-white {
    transition: transform 0.22s ease, box-shadow 0.22s ease !important;
}

a.group.bg-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTON POLISH
   Adds a subtle lift + depth to the primary CTA buttons.
══════════════════════════════════════════════════════════════ */

/* Primary dark button */
a.bg-brand-dark,
button.bg-brand-dark {
    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

a.bg-brand-dark:hover,
button.bg-brand-dark:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}

/* Outline / ghost buttons */
a.border.border-brand-blue {
    transition: color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a.border.border-brand-blue:hover {
    transform: translateY(-1px);
}

/* "Read Article" and inline text links with arrow */
a[class*="text-brand-blue"][class*="font-semibold"] {
    transition: color 0.15s ease, letter-spacing 0.15s ease;
}


/* ═══════════════════════════════════════════════════════════════
   CAPABILITY CARDS (homepage)
   The border-t-2 divs in the capabilities grid.
══════════════════════════════════════════════════════════════ */

.capability-card {
    transition: background-color 0.2s ease, padding 0.2s ease, border-radius 0.2s ease;
    border-radius: 0.5rem;
    padding: 1rem;
    margin: -1rem;
}

.capability-card:hover {
    background-color: #f8fafc;
}

/* Icon container within capability cards */
.capability-card .capability-icon {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.capability-card:hover .capability-icon {
    background-color: #e0f2fe;
    transform: scale(1.05);
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════════ */

footer a {
    transition: color 0.15s ease;
}

/* Subtle separator between footer links */
footer .text-slate-400 > a {
    position: relative;
}


/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY REFINEMENTS
══════════════════════════════════════════════════════════════ */

/* Tighten large headings on all pages */
h1, h2, h3 {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Improve section subtitle uppercase labels */
p[class*="tracking-widest"] {
    letter-spacing: 0.12em;
}


/* ═══════════════════════════════════════════════════════════════
   HERO ENHANCEMENTS
══════════════════════════════════════════════════════════════ */

/* Very subtle gradient wash over the grid pattern hero */
.grid-pattern {
    position: relative;
}

.grid-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 60%,
        rgba(248, 250, 252, 0.6) 100%
    );
    pointer-events: none;
    z-index: 0;
}

.grid-pattern > * {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   EXPERTISE TAGS (about section on homepage)
══════════════════════════════════════════════════════════════ */

span.px-4.py-2.bg-slate-800 {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

span.px-4.py-2.bg-slate-800:hover {
    background-color: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}


/* ═══════════════════════════════════════════════════════════════
   CATEGORY PILL ENHANCEMENTS (insights page)
══════════════════════════════════════════════════════════════ */

.category-pill {
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;
}

.category-pill:hover {
    transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════════
   SOLUTIONS PAGE — case study header cards
══════════════════════════════════════════════════════════════ */

#scrolly-container {
    transition: box-shadow 0.2s ease;
}


/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGE
══════════════════════════════════════════════════════════════ */

/* Smooth fade in for article body */
.article-body {
    animation: fadeInUp 0.5s ease 0.1s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Code blocks in articles */
.article-body code {
    transition: background-color 0.15s ease;
}

.article-body code:hover {
    background-color: #e2e8f0;
}