/* ==========================================================================
   Kessler Foundation — study finder
   Mobile-first. Targets WCAG 2.1 AA: all text/background pairs below are at
   least 4.5:1, interactive targets are at least 44x44 CSS px, and focus is
   always visible.
   ========================================================================== */

/* -------------------------------------------------------------- variables */

:root {
    /* Brand */
    --kf-navy:        #345290;  /* 7.6:1 on white */
    --kf-navy-dark:   #263d6e;
    --kf-navy-tint:   #eef2f9;
    --kf-olive:       #97a825;  /* accent rules only — never behind text */
    --kf-olive-dark:  #4a5312;  /* 7.4:1 on --kf-olive-tint */
    --kf-olive-tint:  #f3f6e3;

    /* Sampled pixel-exact from the official "Join a Research Study" banner
       artwork, so the rebuilt hero matches it rather than approximating. */
    --kf-brand-navy:  #00529b;  /* wordmark + headline; 7.8:1 on white */
    --kf-brand-blue:  #0365b1;  /* decorative circle only */
    --kf-brand-lime:  #aec12d;  /* decorative circle only */
    --kf-dot:         #e5eefb;  /* background dot grid */
    /* The artwork sets "Join a" in #c3cf21, which is only 1.7:1 on white and
       fails WCAG 1.4.3 even at display size. Darkened here to clear AA. */
    --kf-lime-text:   #6f7c12;

    /* Surfaces and text */
    --bg:             #f5f6f8;
    --surface:        #ffffff;
    --border:         #d3d8e0;
    --text:           #1c1f26;  /* 15.6:1 on white */
    --text-muted:     #4d5460;  /* 8.0:1 on white */

    /* Status badges */
    --open-bg:        #dcfce7;
    --open-fg:        #14532d;
    --analysis-bg:    #fef3c7;
    --analysis-fg:    #713f12;
    --closed-bg:      #eceef1;
    --closed-fg:      #374151;

    --radius:         10px;
    --radius-sm:      6px;
    --shadow:         0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --tap:            44px;  /* WCAG 2.5.5 target size */
}

/* ------------------------------------------------------------------- base */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Scales between 16px and 17px; still honours the user's browser font size. */
    font-size: clamp(1rem, .97rem + .15vw, 1.0625rem);
    line-height: 1.55;
}

h1, h2, h3 {
    margin: 0;
    line-height: 1.25;
    text-wrap: balance;
}

p {
    margin: 0 0 .75rem;
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--kf-navy);
}

a:hover {
    color: var(--kf-navy-dark);
}

img {
    max-width: 100%;
    height: auto;
}

.wrap {
    width: 100%;
    max-width: 75rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Visible for keyboard users on every interactive element. The dark ring
   reads against light surfaces, the white halo against the navy ones. */
:focus-visible {
    outline: 3px solid #14171d;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #ffffff;
    border-radius: var(--radius-sm);
}

/* The skip link moves focus to <main tabindex="-1">; draw its ring inside the
   container so it does not overflow the viewport. */
main:focus-visible {
    outline-offset: -3px;
    box-shadow: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .75rem 1.25rem;
    background: var(--surface);
    color: var(--kf-navy);
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    transition: top .15s ease;
}

.skip-link:focus {
    top: 0;
}

/* ----------------------------------------------------------------- header */

.site-header {
    border-bottom: 4px solid var(--kf-brand-lime);
}

/* The "Join a Research Study" banner, rebuilt as live text and CSS shapes.
   The dot field and circles anchor to the full-width band while the text stays
   in the content column, so the hero spans any viewport, stays sharp at every
   resolution, and reflows instead of scaling as one fixed-ratio image. */
.hero {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    background-image: radial-gradient(circle, var(--kf-dot) 2.5px, transparent 2.6px);
    background-size: 25.5px 25.5px;
}

.hero__blob {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
}

/* translate percentages resolve against each blob's own size, so both keep
   their proportional bleed off the edge at every width. */
.hero__blob--blue {
    width: clamp(70px, 24%, 230px);
    top: 0;
    right: 6%;
    background: var(--kf-brand-blue);
    transform: translateY(-40%);
}

/* On narrow screens the circles bleed further off-canvas so they stay corner
   accents and never sit under the headline or the call to action. */
.hero__blob--lime {
    width: clamp(130px, 42%, 400px);
    left: 0;
    bottom: 0;
    background: var(--kf-brand-lime);
    transform: translate(-40%, 58%);
}

.hero__inner {
    position: relative;  /* lift content above the blobs */
    z-index: 1;
    padding-block: clamp(1.25rem, 4vw, 2.25rem);
}

.hero__logo {
    display: block;
    width: clamp(190px, 42%, 324px);
    height: auto;
}

.hero__tagline {
    margin: .5rem 0 0;
    color: var(--kf-brand-navy);
    font-size: clamp(.6875rem, 1.7vw, .8125rem);
    font-weight: 600;
}

.hero__pitch {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: clamp(1.25rem, 4vw, 2rem) auto 0;
}

.hero__headline {
    margin: 0;
    text-align: center;
    font-size: clamp(1.75rem, 6.4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.015em;
    color: var(--kf-brand-navy);
}

.hero__headline span {
    display: block;
}

.hero__headline-accent {
    color: var(--kf-lime-text);
}

.hero__cta {
    margin-top: clamp(1rem, 2.5vw, 1.25rem);
}

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: var(--tap);
    padding: .625rem 1.125rem;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #ffffff;
}

.btn--primary:hover {
    background: var(--kf-navy-dark);
    border-color: var(--kf-navy-dark);
    color: #ffffff;
}

.btn--ghost {
    background: var(--surface);
    border-color: var(--border);
    color: var(--kf-navy);
}

.btn--ghost:hover {
    background: var(--kf-navy-tint);
    border-color: var(--kf-navy);
    color: var(--kf-navy-dark);
}

/* ---------------------------------------------------------------- filters */

.filters {
    margin-block: 1.5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.search__label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 600;
}

.search__row {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.search__input {
    flex: 1 1 auto;
    min-height: var(--tap);
    padding: .625rem .875rem;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit;
}

.search__input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.search__input:hover {
    border-color: var(--kf-navy);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.chip {
    min-height: var(--tap);
    padding: .5rem .875rem;
    background: var(--surface);
    color: var(--text);
    border: 2px solid var(--border);
    border-radius: 999px;
    font: inherit;
    font-size: .875rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.chip:hover {
    background: var(--kf-navy-tint);
    border-color: var(--kf-navy);
}

.chip.is-active {
    background: var(--kf-navy);
    border-color: var(--kf-navy);
    color: #ffffff;
}

.chip.is-active:hover {
    background: var(--kf-navy-dark);
    border-color: var(--kf-navy-dark);
}

/* ---------------------------------------------------------------- results */

.results {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    margin: 0 0 .75rem;
    color: var(--text-muted);
}

/* ----------------------------------------------------------------- badges */

.badge {
    display: inline-block;
    padding: .1875rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .03em;
    text-transform: uppercase;
}

/* Modifiers are derived from getStatus(): OPEN, DATA ANALYSIS, CLOSED. */
.badge--open          { background: var(--open-bg);     color: var(--open-fg); }
.badge--data-analysis { background: var(--analysis-bg); color: var(--analysis-fg); }
.badge--closed        { background: var(--closed-bg);   color: var(--closed-fg); }
.badge--irb           { background: var(--closed-bg);   color: var(--closed-fg); text-transform: none; }

.badge--center {
    background: var(--kf-olive-tint);
    color: var(--kf-olive-dark);
    text-transform: none;
    letter-spacing: 0;
}

/* ------------------------------------------------------------- study list */

.studies {
    display: grid;
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.study {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--kf-olive);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.study__summary {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem .75rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;  /* hide the default disclosure triangle */
}

.study__summary::-webkit-details-marker {
    display: none;
}

.study__summary:hover {
    background: var(--kf-navy-tint);
}

.study__title {
    grid-column: 1;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--kf-navy);
}

.study__meta {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.study__chevron {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    flex: none;
    color: var(--text-muted);
    transition: transform .2s ease;
}

.study__details[open] .study__chevron {
    transform: rotate(180deg);
}

.study__panel {
    padding: 1rem;
    border-top: 1px solid var(--border);
}

.study__description {
    margin-bottom: .75rem;
    max-width: 68ch;  /* WCAG 1.4.8 — keep lines readable */
}

.study__description--empty {
    color: var(--text-muted);
    font-style: italic;
}

.study__pi {
    margin: 0;
    font-size: .9375rem;
}

.study__pi-label {
    display: block;
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.study__pi-name {
    font-weight: 600;
}

.study__actions {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: auto;
    padding: 1rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------- notices */

.notice {
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.notice__title {
    margin-bottom: .5rem;
    font-size: 1.125rem;
}

/* ------------------------------------------------------------- responsive */

/* Tablet and up: the search row and the two card actions go side by side. */
@media (min-width: 40em) {
    /* Headline moves to the right of the logo, as in the original artwork. */
    .hero__pitch {
        align-items: flex-end;
        margin-right: 2%;
        margin-left: auto;
    }

    /* Enough room here for the lime circle to sit as the artwork has it. */
    .hero__blob--lime {
        transform: translate(-34%, 50%);
    }

    .search__row {
        flex-direction: row;
    }

    .search__row .btn {
        flex: none;
    }

    .study__summary {
        padding: 1.25rem;
    }

    .study__title {
        font-size: 1.125rem;
    }

    .study__panel {
        padding: 1.25rem;
    }

    .study__actions {
        flex-direction: row;
        padding: 1rem 1.25rem;
    }
}

/* Desktop: two columns of cards, aligned to the top so an expanded card
   does not stretch its neighbour. */
@media (min-width: 62em) {
    .studies {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 1.25rem;
    }

    .filters {
        padding: 1.5rem;
    }
}

/* -------------------------------------------------------- user preferences */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Windows High Contrast / forced colours: let the OS palette through and keep
   borders visible, since our background colours are discarded there. */
@media (forced-colors: active) {
    .btn,
    .chip,
    .search__input,
    .study,
    .filters,
    .notice {
        border: 1px solid CanvasText;
    }

    .badge {
        border: 1px solid CanvasText;
    }

    :focus-visible {
        outline: 3px solid Highlight;
        box-shadow: none;
    }

    .study__chevron {
        forced-color-adjust: auto;
    }
}

@media print {
    .hero__cta,
    .hero__blob,
    .filters,
    .study__actions,
    .skip-link {
        display: none;
    }

    .study__panel {
        display: block !important;
    }

    body {
        background: #ffffff;
    }
}