/* =========================================
   CYBERSENSE
   MAIN STYLESHEET
========================================= */


/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --navy: #101827;
    --navy-light: #1c2638;

    --cream: #f8f5ef;
    --cream-dark: #eee8dd;

    --white: #ffffff;

    --orange: #e2971f;
    --orange-dark: #b96f05;

    --red: #b42318;
    --red-light: #fff0ee;

    --green: #166534;
    --green-light: #edf8f0;

    --blue-light: #eef5fb;

    --text: #18202c;
    --text-light: #596273;

    --border: #d9d3c8;

    --shadow:
        0 8px 25px
        rgba(16, 24, 39, 0.08);

    --radius: 14px;

    --max-width: 1200px;

}


/* =========================================
   TEXT SIZE ACCESSIBILITY
========================================= */

html[data-text="base"] {

    font-size: 16px;

}


html[data-text="lg"] {

    font-size: 18px;

}


html[data-text="xl"] {

    font-size: 20px;

}


/* =========================================
   GLOBAL RESET
========================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        "Atkinson Hyperlegible",
        Arial,
        sans-serif;

    background:
        var(--cream);

    color:
        var(--text);

    line-height: 1.65;

}


/* =========================================
   TYPOGRAPHY
========================================= */

h1,
h2,
h3,
h4 {

    font-family:
        "Fraunces",
        Georgia,
        serif;

    color:
        var(--navy);

    line-height: 1.2;

    margin-top: 0;

}


h1 {

    font-size:
        clamp(
            2.5rem,
            6vw,
            5rem
        );

    letter-spacing:
        -0.03em;

}


h2 {

    font-size:
        clamp(
            1.8rem,
            4vw,
            3rem
        );

}


h3 {

    font-size:
        1.35rem;

}


p {

    margin-top: 0;

}


a {

    color:
        inherit;

}


ul,
ol {

    padding-left:
        1.4rem;

}


li {

    margin-bottom:
        0.6rem;

}


/* =========================================
   CONTAINER
========================================= */

.container {

    width:
        min(
            92%,
            var(--max-width)
        );

    margin:
        0 auto;

}


/* =========================================
   TOP BAR
========================================= */

.topbar {

    background:
        var(--navy);

    color:
        #fbe8c8;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size:
        0.82rem;

}


.topbar .container {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

}


.hotline {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

}


.hotline a {

    text-decoration:
        underline;

}


.text-toggle {

    display:
        flex;

    align-items:
        center;

    gap:
        0.45rem;

}


.text-toggle button {

    border:
        1px solid
        rgba(255, 255, 255, 0.3);

    background:
        transparent;

    color:
        white;

    cursor:
        pointer;

    border-radius:
        6px;

    padding:
        0.2rem 0.45rem;

    font-family:
        inherit;

}


.text-toggle button:hover {

    background:
        rgba(255, 255, 255, 0.15);

}


.text-toggle button[aria-pressed="true"] {

    background:
        var(--orange);

    border-color:
        var(--orange);

}


/* =========================================
   HEADER
========================================= */

.site-header {

    background:
        var(--cream);

    border-bottom:
        1px solid
        var(--border);

    position:
        sticky;

    top:
        0;

    z-index:
        100;

}


/* =========================================
   NAVIGATION
========================================= */

.main-nav {

    min-height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    text-decoration:
        none;

    font-family:
        "Fraunces",
        serif;

    font-size:
        1.6rem;

    font-weight:
        700;

    color:
        var(--navy);

    white-space:
        nowrap;

}


.flag {

    width:
        26px;

    height:
        26px;

}


.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        1.4rem;

    list-style:
        none;

    padding:
        0;

    margin:
        0;

}


.nav-links a {

    text-decoration:
        none;

    font-size:
        0.95rem;

    color:
        var(--text);

    position:
        relative;

}


.nav-links a:hover {

    color:
        var(--orange-dark);

}


.nav-links a[aria-current="page"] {

    color:
        var(--orange-dark);

    font-weight:
        700;

}


.nav-links a[aria-current="page"]::after {

    content:
        "";

    position:
        absolute;

    height:
        2px;

    background:
        var(--orange);

    left:
        0;

    right:
        0;

    bottom:
        -8px;

}


.nav-toggle {

    display:
        none;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    padding:
        0.6rem 0.8rem;

    border-radius:
        8px;

    font-family:
        inherit;

    cursor:
        pointer;

}


/* =========================================
   MAIN
========================================= */

main {

    overflow:
        hidden;

}


/* =========================================
   HERO
========================================= */

.hero {

    padding:
        7rem 0;

    background:
        linear-gradient(
            135deg,
            var(--cream),
            #f1ece2
        );

}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr 0.8fr;

    gap:
        5rem;

    align-items:
        center;

}


.hero h1 {

    max-width:
        13ch;

    margin-bottom:
        1.5rem;

}


.hero p {

    color:
        var(--text-light);

}


/* =========================================
   EYEBROW
========================================= */

.eyebrow {

    display:
        inline-block;

    margin-bottom:
        1rem;

    color:
        var(--orange-dark);

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size:
        0.8rem;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        0.08em;

}


/* =========================================
   SECTIONS
========================================= */

section {

    padding:
        6rem 0;

}


.section-alt {

    background:
        var(--cream-dark);

}


.section-head {

    max-width:
        720px;

    margin-bottom:
        3rem;

}


.section-head p {

    color:
        var(--text-light);

    font-size:
        1.1rem;

}


/* =========================================
   BUTTONS
========================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    padding:
        0.85rem 1.3rem;

    border-radius:
        9px;

    border:
        1px solid
        transparent;

    text-decoration:
        none;

    cursor:
        pointer;

    font-family:
        inherit;

    font-weight:
        700;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


.btn-primary {

    background:
        var(--orange);

    color:
        var(--navy);

}


.btn-primary:hover {

    background:
        #f0a62e;

    box-shadow:
        var(--shadow);

}


.btn-ghost {

    background:
        transparent;

    border-color:
        var(--border);

    color:
        var(--navy);

}


.btn-ghost:hover {

    background:
        var(--white);

}


.btn-alert {

    background:
        var(--red);

    color:
        white;

}


.btn-alert:hover {

    background:
        #8f1c14;

}


.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.8rem;

    margin-top:
        2rem;

}


/* =========================================
   GRID LAYOUTS
========================================= */

.grid-2 {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        1.5rem;

}


.grid-3 {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        1.5rem;

}


/* =========================================
   CARDS
========================================= */

.card {

    background:
        var(--white);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    padding:
        1.6rem;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.03);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

    border-color:
        #c5b9a7;

}


.card p {

    color:
        var(--text-light);

}


.card ul {

    color:
        var(--text-light);

}


/* =========================================
   INTERACTIVE CARDS
========================================= */

button.card {

    width:
        100%;

    text-align:
        left;

    font-size:
        1rem;

    font-family:
        inherit;

    color:
        var(--text);

    cursor:
        pointer;

}


/* =========================================
   CALLOUTS
========================================= */

.callout {

    padding:
        2rem;

    border-radius:
        var(--radius);

    background:
        var(--blue-light);

    border-left:
        5px solid
        #3b82c4;

}


.callout.danger {

    background:
        var(--red-light);

    border-left-color:
        var(--red);

}


.callout.safe {

    background:
        var(--green-light);

    border-left-color:
        var(--green);

}


.callout h2,
.callout h3 {

    margin-bottom:
        0.8rem;

}


.callout p:last-child {

    margin-bottom:
        0;

}


/* =========================================
   TAGS
========================================= */

.tag {

    display:
        inline-block;

    padding:
        0.35rem 0.7rem;

    border-radius:
        999px;

    font-size:
        0.75rem;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-weight:
        700;

}


.tag-all {

    background:
        #fce8c4;

    color:
        #805000;

}


.tag-youth {

    background:
        #e6efff;

    color:
        #1e4b8f;

}


.tag-elder {

    background:
        #e6f5eb;

    color:
        #166534;

}


.tag-ai {

    background:
        #efe7ff;

    color:
        #5d2e9e;

}


/* =========================================
   SCAM FILTERS
========================================= */

.filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.8rem;

}


.filter-btn {

    padding:
        0.65rem 1rem;

    border-radius:
        999px;

    border:
        1px solid
        var(--border);

    background:
        var(--white);

    color:
        var(--text);

    cursor:
        pointer;

    font-family:
        inherit;

    transition:
        all 0.2s ease;

}


.filter-btn:hover {

    border-color:
        var(--orange);

}


.filter-btn.active {

    background:
        var(--navy);

    color:
        white;

    border-color:
        var(--navy);

}


/* =========================================
   STEPS
========================================= */

.steps {

    list-style:
        none;

    padding:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            1fr
        );

    gap:
        1.2rem;

    counter-reset:
        steps;

}


.steps li {

    position:
        relative;

    padding:
        1.5rem;

    background:
        var(--white);

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius);

    margin:
        0;

}


.steps li h3 {

    font-size:
        1.15rem;

}


.steps li p {

    color:
        var(--text-light);

    font-size:
        0.95rem;

}


/* =========================================
   QUIZ
========================================= */

.quiz-options {

    display:
        grid;

    gap:
        0.8rem;

    margin-top:
        1.2rem;

}


.quiz-options button {

    width:
        100%;

    padding:
        1rem;

    border:
        1px solid
        var(--border);

    background:
        var(--cream);

    border-radius:
        9px;

    text-align:
        left;

    font-family:
        inherit;

    font-size:
        1rem;

    cursor:
        pointer;

    transition:
        all 0.2s ease;

}


.quiz-options button:hover {

    border-color:
        var(--orange);

    background:
        var(--white);

}


.quiz-options button.selected {

    border-color:
        var(--orange);

    background:
        #fff1d6;

    box-shadow:
        0 0 0 3px
        rgba(226, 151, 31, 0.15);

}


/* =========================================
   INTERACTIVE RESULTS
========================================= */

.redflag-result,
.phishing-result,
.ai-result {

    display:
        none;

    padding:
        1rem 1.2rem;

    border-radius:
        9px;

    border-left:
        5px solid;

}


.redflag-result.success,
.phishing-result.success,
.ai-result.success {

    display:
        block;

    background:
        var(--green-light);

    border-color:
        var(--green);

    color:
        #14532d;

}


.redflag-result.error,
.phishing-result.error,
.ai-result.error {

    display:
        block;

    background:
        var(--red-light);

    border-color:
        var(--red);

    color:
        #7f1d1d;

}


/* =========================================
   SCAM CARD ANIMATION
========================================= */

.scam-card {

    animation:
        fadeIn 0.35s ease;

}


@keyframes fadeIn {

    from {

        opacity:
            0;

        transform:
            translateY(10px);

    }


    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* =========================================
   FOOTER
========================================= */

.site-footer {

    background:
        var(--navy);

    color:
        white;

    padding:
        4rem 0 2rem;

}


.site-footer h4 {

    color:
        white;

    font-size:
        1.2rem;

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:
        3rem;

}


.site-footer ul {

    list-style:
        none;

    padding:
        0;

}


.site-footer li {

    margin-bottom:
        0.7rem;

    color:
        #cfd3e0;

}


.site-footer a {

    color:
        #cfd3e0;

    text-decoration:
        none;

}


.site-footer a:hover {

    color:
        #ffffff;

    text-decoration:
        underline;

}


.footer-bottom {

    margin-top:
        3rem;

    padding-top:
        1.5rem;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);

    display:
        flex;

    justify-content:
        space-between;

    gap:
        1rem;

    flex-wrap:
        wrap;

    color:
        #aeb6c5;

    font-size:
        0.85rem;

}


/* =========================================
   ACCESSIBILITY
========================================= */

button:focus-visible,
a:focus-visible {

    outline:
        3px solid
        var(--orange);

    outline-offset:
        3px;

}


@media
(prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;

    }

}


/* =========================================
   TABLET
========================================= */

@media
(max-width: 1000px) {


    .hero-grid {

        grid-template-columns:
            1fr;

        gap:
            2.5rem;

    }


    .grid-3 {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

    }


    .steps {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .nav-links {

        gap:
            0.8rem;

    }


}


/* =========================================
   MOBILE
========================================= */

@media
(max-width: 760px) {


    .topbar .container {

        padding:
            0.7rem 0;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .main-nav {

        min-height:
            70px;

    }


    .nav-toggle {

        display:
            block;

    }


    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        background:
            var(--cream);

        padding:
            1.5rem 4%;

        border-bottom:
            1px solid
            var(--border);

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            1.2rem;

    }


    .nav-links.nav-open {

        display:
            flex;

    }


    .nav-links a {

        font-size:
            1.05rem;

    }


    .nav-links a[aria-current="page"]::after {

        display:
            none;

    }


    .hero {

        padding:
            4.5rem 0;

    }


    section {

        padding:
            4rem 0;

    }


    .grid-2,
    .grid-3 {

        grid-template-columns:
            1fr;

    }


    .steps {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            2rem;

    }


    .footer-bottom {

        flex-direction:
            column;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .hero-actions .btn {

        width:
            100%;

    }


}


/* =========================================
   SMALL MOBILE DEVICES
========================================= */

@media
(max-width: 480px) {


    .brand {

        font-size:
            1.35rem;

    }


    h1 {

        font-size:
            2.4rem;

    }


    .card {

        padding:
            1.25rem;

    }


    .callout {

        padding:
            1.4rem;

    }


    .text-toggle {

        width:
            100%;

    }


}