@import "tailwindcss";
@plugin "@tailwindcss/typography";

/* Where Tailwind looks for class names. */
@source "../views";
/* Some pictures' crop classes (e.g. object-[50%_20%]) are written in the content config. */
@source "../../config/site.php";

/*
 * Design tokens. Change the brand colours here to restyle the whole site.
 */
@theme {
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Royal blue, matching the HMIS landing-page concepts. White text on 600 and darker is AA (5.2:1+). */
    --color-brand-50: #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;
    --color-brand-800: #1e40af;
    --color-brand-900: #1e3a8a;

    /* Deep navy for the contact bar, dark bands and banners. */
    --color-navy-700: #163a7c;
    --color-navy-800: #0f2a5e;
    --color-navy-900: #0a1b3d;

    /* Gentle floating motion for hero cards (disabled for reduced-motion users). */
    --animate-float: float 6s ease-in-out infinite;

    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
}

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply bg-white text-slate-700 antialiased;
    }

    h1, h2, h3, h4 {
        @apply text-slate-900;
    }

    :focus-visible {
        @apply outline-2 outline-offset-2 outline-brand-600;
    }
}

/* Base button. Declared with @utility so the variants below can @apply it. */
@utility btn {
    @apply inline-flex items-center justify-center gap-1.5 rounded-lg px-5 py-2.5 text-sm font-semibold transition;
}

@layer components {
    /* One width for the header, every section and the footer, so their edges line up. */
    .container-page {
        @apply mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8;
    }

    .section {
        @apply py-6 sm:py-8;
    }

    .btn-primary {
        @apply btn bg-gradient-to-b from-brand-600 to-brand-700 text-white shadow-md shadow-brand-700/25 hover:from-brand-700 hover:to-brand-800 hover:shadow-lg hover:shadow-brand-700/30;
    }

    .btn-outline {
        @apply btn border border-slate-300 bg-white text-slate-800 hover:border-brand-200 hover:bg-brand-50 hover:text-brand-800;
    }

    .btn-light {
        @apply btn bg-white text-brand-800 hover:bg-brand-50;
    }

    /* Outline button for dark backgrounds. */
    .btn-ghost-light {
        @apply btn border border-white/40 text-white hover:bg-white/10;
    }

    /*
     * The one icon style used across the site: a sky-blue line icon on a pale sky tile.
     * Add a size (h-12 w-12) where it is used. -dark is for dark bands.
     */
    .icon-tile {
        @apply inline-flex shrink-0 items-center justify-center rounded-xl bg-sky-50 text-sky-600 ring-1 ring-sky-100;
    }

    .icon-tile-dark {
        @apply inline-flex shrink-0 items-center justify-center rounded-xl bg-sky-400/15 text-sky-300 ring-1 ring-sky-300/30;
    }

    /* Small uppercase label above a section title. */
    .eyebrow {
        @apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-brand-700;
    }

    .form-input {
        @apply block w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-brand-600 focus:ring-1 focus:ring-brand-600;
    }

    /* Filter button on the HMIS module grid. aria-pressed marks the active one. */
    .chip {
        @apply inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3.5 py-1.5 text-sm font-medium text-slate-600 transition-colors hover:border-brand-200 hover:text-brand-700 aria-pressed:border-brand-600 aria-pressed:bg-brand-600 aria-pressed:text-white;
    }

    /*
     * Patient journey on the home page (a dark band). Each step is a numbered card; from xl up the cards join into
     * one chevron ribbon. The cards are soft frosted glass on the navy (a faint white tint, alternating shade) so the
     * band stays calm and the slogan and numbers carry the colour. The number is a CSS counter, so the markup has no bare
     * digits (the home page test forbids 01-12 badges on the module cards) and the order in config/site.php is the only
     * place the numbering lives.
     */
    .journey {
        counter-reset: journey-step;
    }

    .journey-step {
        counter-increment: journey-step;
        @apply flex min-w-0 flex-col items-center rounded-2xl bg-white/[0.07] px-3 py-5 text-center ring-1 ring-inset ring-white/10 transition-colors hover:bg-white/[0.13];
    }

    .journey-step:nth-child(even) {
        @apply bg-white/[0.10];
    }

    .journey-step::before {
        content: counter(journey-step);
        @apply mb-2 flex h-7 w-7 items-center justify-center rounded-full bg-sky-200/15 text-xs font-semibold text-sky-100 ring-1 ring-sky-200/40;
    }

    @media (min-width: 80rem) {
        .journey-step {
            --journey-point: 0.9rem;
            flex: 1 1 0;
            /* Overlap by the depth of the point, less a small gap, so each chevron nests into the one before it. */
            margin-left: calc(0.25rem - var(--journey-point));
            padding: 1.25rem calc(var(--journey-point) + 0.5rem);
            border-radius: 0;
            /* A ring would be cut off along the slanted edges, so the ribbon swaps it for a faint highlight on the top edge. */
            box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14);
            clip-path: polygon(0 0, calc(100% - var(--journey-point)) 0, 100% 50%, calc(100% - var(--journey-point)) 100%, 0 100%, var(--journey-point) 50%);
        }

        /* The first step has a flat left edge and the last a flat right edge, like the ends of a ribbon. */
        .journey-step:first-child {
            margin-left: 0;
            border-radius: 1rem 0 0 1rem;
            clip-path: polygon(0 0, calc(100% - var(--journey-point)) 0, 100% 50%, calc(100% - var(--journey-point)) 100%, 0 100%);
        }

        .journey-step:last-child {
            border-radius: 0 1rem 1rem 0;
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--journey-point) 50%);
        }
    }

    .checklist {
        @apply space-y-2;
    }

    .checklist li {
        @apply relative pl-6;
    }

    .checklist li::before {
        content: "";
        @apply absolute left-0 top-2 h-2 w-2 rounded-full bg-brand-600;
    }
}

/*
 * Scroll reveal. Elements marked data-reveal fade up once as they enter the screen (app.js adds
 * .is-visible). They are only hidden when the <html> has the .js class set in the layout, so
 * without JavaScript, or with reduced motion, everything is simply visible.
 */
@keyframes reveal-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.js [data-reveal]:not(.is-visible) {
    opacity: 0;
}

.js [data-reveal].is-visible {
    animation: reveal-up 0.55s ease-out both;
    animation-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal]:not(.is-visible) {
        opacity: 1;
    }

    .js [data-reveal].is-visible {
        animation: none;
    }
}

@media print {
    .js [data-reveal] {
        opacity: 1 !important;
        animation: none !important;
    }
}