/*
 * Interaction layer — "the engineered response"
 *
 * One cohesive hover/focus voice across the site. Two signature motions:
 *   1. Accent sweep  — a precise orange line that scales in from the left
 *                      (nav links, card top edge). The brand's action color,
 *                      one origin, one easing.
 *   2. Arrow advance — CTA arrows step forward on hover.
 * Supported by a quiet signal-cyan focus ring and a light-blue selection.
 */

:root {
    /* Confident, slightly overshooting ease shared by every interaction */
    --ease-crafted: cubic-bezier(0.2, 0.8, 0.2, 1);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 32%, transparent);
}

/* Selection — an on-brand detail rather than the browser default */
::selection {
    background-color: var(--light-blue);
    color: var(--dark-blue);
}

/* Smooth in-page jumps (Apply now -> #apply, Insights anchor) */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Sticky nav is ~5rem tall — give anchored targets room to breathe */
:target,
section[id],
[id="apply"] {
    scroll-margin-top: 8rem;
}

/* Shared focus ring for links and buttons — quiet, precise, keyboard-only */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
.carousel-arrow:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ---- Nav: accent underline sweeps in from the left ---- */
nav .actions .links a {
    position: relative;
    padding-block: 0.4rem;
}

nav .actions .links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease-crafted);
}

nav .actions .links a:hover::after,
nav .actions .links a:focus-visible::after {
    transform: scaleX(1);
}

/* ---- Buttons: tactile lift on hover, press on click ---- */
.button, a.button {
    transition: background-color 140ms var(--ease-crafted),
                color 140ms var(--ease-crafted),
                border-color 140ms var(--ease-crafted),
                transform 140ms var(--ease-crafted),
                box-shadow 140ms var(--ease-crafted);
}

.button:hover, a.button:hover {
    transform: translateY(-1px);
}

.button.primary:hover, a.button.primary:hover {
    box-shadow: 0 0.6rem 1.4rem -0.5rem color-mix(in srgb, var(--accent) 60%, transparent);
}

.button:active, a.button:active {
    transform: translateY(1px);
    box-shadow: none;
}

/* ---- Cards: deeper lift + soft shadow + top-edge accent sweep ---- */
/* Includes the insights article cards (.article-feature / .article-card),
   which are always anchors, alongside the general-purpose .card. */
.card,
.article-index .article-feature,
.article-index .article-card {
    position: relative;
    transition: border-color 200ms var(--ease-crafted),
                transform 200ms var(--ease-crafted),
                box-shadow 200ms var(--ease-crafted);
}

/* the accent sweep, matched to the nav underline */
.card::before,
.article-index .article-feature::before,
.article-index .article-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1;
    background-color: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 260ms var(--ease-crafted);
}

.card:is(a):hover,
.card:is(a):focus-visible,
.article-index .article-feature:hover,
.article-index .article-feature:focus-visible,
.article-index .article-card:hover,
.article-index .article-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 1.6rem 3rem -1.2rem rgba(30, 50, 68, 0.22);
}

.card:is(a):hover::before,
.card:is(a):focus-visible::before,
.article-index .article-feature:hover::before,
.article-index .article-feature:focus-visible::before,
.article-index .article-card:hover::before,
.article-index .article-card:focus-visible::before {
    transform: scaleX(1);
}

/* The carousel is a scroll container (overflow-x: auto), which clips vertical
   overflow — without this, the hover lift pushes the accent sweep above the
   container's top edge and the shadow past its bottom. The negative margins
   compensate, so the section's layout height is unchanged. */
.carousel {
    padding-top: 0.5rem;
    margin-top: -0.5rem;
    padding-bottom: 2.5rem;
    margin-bottom: -1.5rem;
}

/* ---- Arrow advance: CTA arrows step forward ---- */
.action svg {
    transition: transform 240ms var(--ease-crafted);
}

.card:is(a):hover .action svg,
.card:is(a):focus-visible .action svg,
.article-index .article-feature:hover .action svg,
.article-index .article-feature:focus-visible .action svg,
.article-index .article-card:hover .action svg,
.article-index .article-card:focus-visible .action svg,
.action:hover svg {
    transform: translateX(0.6rem);
}

/* ---- Form fields: signal-cyan focus ring, matched to links ---- */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--signal);
    box-shadow: var(--focus-ring);
    outline: none;
}

input, textarea, select {
    transition: border-color 140ms var(--ease-crafted),
                box-shadow 140ms var(--ease-crafted);
}

/* ---- Carousel arrows: nudge in their pointing direction ---- */
.carousel-arrow svg {
    transition: transform 200ms var(--ease-crafted);
}

#carousel-next:hover svg {
    transform: translateX(0.4rem);
}

/* ---- Respect reduced-motion: keep the state changes, drop the movement ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .button, a.button,
    .card, .card::before,
    .article-index .article-feature, .article-index .article-feature::before,
    .article-index .article-card, .article-index .article-card::before,
    .action svg,
    nav .actions .links a::after,
    .carousel-arrow svg {
        transition-duration: 1ms;
    }

    .button:hover, a.button:hover, .button:active,
    .card:is(a):hover, .card:is(a):focus-visible,
    .article-index .article-feature:hover, .article-index .article-feature:focus-visible,
    .article-index .article-card:hover, .article-index .article-card:focus-visible,
    .card:is(a):hover .action svg,
    .article-index .article-feature:hover .action svg, .article-index .article-feature:focus-visible .action svg,
    .article-index .article-card:hover .action svg, .article-index .article-card:focus-visible .action svg,
    .action:hover svg,
    #carousel-next:hover svg {
        transform: none;
    }
}