@tailwind base;
@tailwind components;
@tailwind utilities;


@media print {
    input[type="radio"]:checked {
        box-shadow: 0 0 0 200px #2F49C8 inset !important;
    }
}

progress {
    transition: 1s;
}

.prose a {
    @apply underline text-blue-600;
}

@layer components {
    .btn-cta {
        @apply text-white;
        background: linear-gradient(180deg, #4A65E6 0%, #2F49C8 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(15, 27, 51, 0.2), 0 14px 30px -10px rgba(47, 73, 200, 0.6);
        transition: transform 140ms ease-out, box-shadow 140ms ease-out;
    }
    .btn-cta:hover {
        @apply text-white;
        transform: translateY(-1px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(15, 27, 51, 0.2), 0 18px 36px -10px rgba(47, 73, 200, 0.7);
    }
    .btn-cta:active {
        transform: translateY(1px);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
    }

    .btn-soft {
        @apply text-ink border border-ink/15;
        background: linear-gradient(180deg, #FFFFFF 0%, #F1F4F9 100%);
        box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(15, 27, 51, 0.08);
    }

    .bg-wave {
        background:
            radial-gradient(ellipse 35% 55% at 18% 45%, #C9D3FF 0%, rgba(201, 211, 255, 0) 70%),
            radial-gradient(ellipse 30% 60% at 50% 70%, #E1D8FF 0%, rgba(225, 216, 255, 0) 70%),
            radial-gradient(ellipse 30% 55% at 80% 40%, #C4EDE4 0%, rgba(196, 237, 228, 0) 70%),
            #F2F4FF;
    }
    @media (max-width: 640px) {
        .bg-wave {
            background:
                radial-gradient(ellipse 60% 45% at 15% 40%, #C9D3FF 0%, rgba(201, 211, 255, 0) 70%),
                radial-gradient(ellipse 60% 50% at 60% 70%, #E1D8FF 0%, rgba(225, 216, 255, 0) 70%),
                radial-gradient(ellipse 50% 45% at 90% 35%, #C4EDE4 0%, rgba(196, 237, 228, 0) 70%),
                #F2F4FF;
        }
    }

    /* The skewed colour wash behind the top of the home and results pages, used together with .bg-wave */
    .wave-backdrop {
        @apply absolute -left-[10%] -right-[10%] -top-[200px] h-[900px] origin-top-left sm:-left-[5%] sm:-right-[5%] sm:-top-[300px] sm:h-[1000px];
        transform: skewY(-8deg);
    }
    @media (min-width: 640px) {
        .wave-backdrop { transform: skewY(-6deg); }
    }

    .bg-navy-glow {
        background:
            radial-gradient(ellipse 50% 70% at 85% 0%, rgba(90, 110, 240, 0.35) 0%, rgba(90, 110, 240, 0) 70%),
            radial-gradient(ellipse 40% 60% at 0% 100%, rgba(20, 160, 140, 0.22) 0%, rgba(20, 160, 140, 0) 70%);
    }

    .card-soft {
        @apply bg-white border border-ink/[.08];
        box-shadow: 0 1px 1px rgba(15, 27, 51, 0.04), 0 10px 24px -8px rgba(15, 27, 51, 0.12), 0 32px 64px -24px rgba(50, 60, 120, 0.20);
    }

    .list-row {
        @apply flex justify-between items-center gap-3 sm:gap-4 py-[18px] px-0.5 sm:py-[22px] sm:px-1 border-t border-line text-ink no-underline;
    }
    .list-row-arrow {
        @apply text-accent font-bold;
        transition: transform 140ms ease-out;
    }
    .list-row:hover .list-row-arrow {
        transform: translateX(3px);
    }
    [dir="rtl"] .list-row-arrow {
        display: inline-block;
        transform: scaleX(-1);
    }
    [dir="rtl"] .list-row:hover .list-row-arrow {
        transform: scaleX(-1) translateX(3px);
    }

    .link-accent {
        @apply text-accent hover:text-ink;
    }

    .focus-ring:focus-visible,
    .focus-ring *:focus-visible {
        @apply outline outline-[3px] outline-accent-bright outline-offset-4;
    }

    .heading-xl {
        @apply font-extrabold tracking-[-0.04em] leading-[1.1];
    }

    /* One answer to a question: a label wrapping a visually hidden radio */
    .answer-option {
        @apply relative flex items-center gap-3.5 md:gap-[18px] min-h-[60px] md:min-h-[68px] pl-3 pr-[18px] md:pl-3.5 md:pr-[22px] rounded-[14px] md:rounded-2xl cursor-pointer text-lg md:text-[19px] font-medium bg-white border border-[#D5DBE5];
        transition: border-color 140ms ease-out, background-color 140ms ease-out;
    }
    .answer-option:hover {
        @apply border-accent-bright;
    }
    .answer-option:has(input:checked) {
        @apply border-2 border-accent-bright bg-accent-tint font-bold text-accent;
    }
    .answer-option:has(input:focus-visible) {
        @apply outline outline-[3px] outline-accent-bright outline-offset-4;
    }
    .answer-key {
        @apply flex-none flex items-center justify-center w-8 h-8 md:w-9 md:h-9 rounded-[9px] md:rounded-[10px] text-[13px] md:text-sm font-bold text-ink-muted border-[1.5px] border-ink-faint;
    }
    .answer-option:has(input:checked) .answer-key {
        @apply text-white border-0;
        background: linear-gradient(180deg, #4A65E6, #2F49C8);
    }

    .question-enter {
        animation: question-in 220ms ease-out both;
    }
}

@keyframes question-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .btn-cta, .list-row-arrow, .answer-option { transition: none; }
    .btn-cta:hover { transform: none; }
    .question-enter { animation: none; }
}

/* Scripts without real italics get a fake slant from the browser, so keep the emphasis upright */
:is(:lang(ar), :lang(fa), :lang(he), :lang(hi), :lang(bn), :lang(th), :lang(ja), :lang(ko), :lang(zh)) i {
    font-style: normal;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Plus Jakarta Sans (SIL Open Font License), served from public/fonts */
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin-ext-italic.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin-italic.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
    padding: 0;
    margin: 0;
}
 body {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
 }
:root {
    --primary-white: #d9d9d9;
    --secondary-white: #d4d4d4;
    --primary-black: #333;
    --secondary-black: #383838;

    --primary: #397ae8;
}
a {
    text-decoration: none;
}