/* #region Widths */
.readability,
.full-width
{
    --readable-width: 700px;
}

/* #endregion */

/* #region Colours */

:root
{
    --background-colour: white;
    --colour: black;
    --border-colour: var(--colour);
}

a:hover
{
    --text-decoration-color: #ff001f;
}

body#contact,
footer
{
    --background-colour: black;
    --colour: #ff001f;
}

nav,
input,
textarea,
button
{
    --background-colour: #1a1a1a;
    --colour: white;
}

nav,
input,
textarea,
.pull-quote
{
    --border-colour: #ff0000;
}

button
{
    --border-colour: black;
}

header,
section#perpetrators,
.pull-quote
{
    --background-colour: black;
    --colour: #ff001f;
}

.success-message
{
    --background-color: #7c6b49;
    --colour: black;
}

/* #endregion */

/* #region Margins */
header,
h1,
h2
{
    --heading-margin-block: 0.2em;
    /* top & bottom */
}

/* #endregion */

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

body
{
    margin: 0;
    padding: 0;
    font-size: min(4vw, 1rem);
}

body,
footer
{
    background-color: var(--background-colour);
    color: var(--colour);
}

body,
input,
textarea,
button
{
    font-family: 'Times New Roman', Times, serif;
}

nav,
input,
textarea,
button
{
    background-color: var(--background-colour);
    color: var(--colour);
}

h1,
h2
{
    margin: var(--heading-margin-block) 0;
}

header
{
    /* Gritty Background & official border */
    background-color: #000000;
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");

    padding-top: var(--heading-margin-block);
    padding-bottom: 30px;
    border-bottom: 4px double #333;

    /* The main container just centers the inner unit */
    .container
    {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* This wrapper pulls the Brand and Stamp close together */
    .header-unit
    {
        display: flex;
        align-items: center;
        gap: 25px;
        /* Adjust this to move stamp closer/further */
        max-width: fit-content;
    }

    .brand-stack
    {
        text-align: right;
        /* Faint divider between brand and stamp */
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 25px;
    }

    h1
    {
        margin: 0;
        padding: 0;
        line-height: 0.85;

        a
        {
            /* font-family: 'Impact', 'Arial Black', sans-serif; */
            font-size: clamp(2.5rem, 8vw, 4.2rem);
            color: #ffffff;
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 3px;
            display: block;

            -webkit-filter: url(#spray-paint);
            filter: url(#spray-paint);

            text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
            opacity: 0.98;
        }
    }

    /* Strapline */
    p.small
    {
        margin: 8px 0 0 0;
        color: red;
        letter-spacing: 0.17rem;
        font-weight: 300;
        text-transform: uppercase;
        opacity: 0.8;
    }

    nav
    {
        border-block: 1px solid var(--border-colour);

        ul
        {
            display: flex;
            flex-wrap: wrap;
            gap: 0;
            /* Remove gap for separator approach */
            padding: 0;

            li
            {
                box-shadow: initial;
                margin-bottom: 0;
                padding: 0;
                font-size: min(4vw, 0.9rem);

                /* Add separator between items */
                &:not(:last-child)::after
                {
                    content: "|";
                    margin: 0 0.8rem;
                    color: var(--border-colour);
                    opacity: 0.5;
                }

                a
                {
                    display: inline-block;
                    position: relative;
                    text-decoration: none;
                    padding: 0.5rem 0.7rem;
                    font-weight: bold;
                    border-radius: 2px;
                    letter-spacing: 1px;
                }

                a:hover
                {
                    text-decoration-color: #ff4444;
                    text-underline-offset: 4px;
                }

                a:hover,
                a.active
                {
                    background-color: #333333;
                }

                /*
                a.active::after
                {
                    content: "";
                    position: absolute;
                    bottom: -1px;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background: #ff001f;
                }
                */
            }
        }
    }
}

#message-bar
{
    /* Industrial Grey Strip */
    background: #d1d5db;
    color: #1f2937;
    border-top: 1px solid #9ca3af;
    border-bottom: 1px solid #9ca3af;

    /* Slim height */
    padding: 3px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    width: 100%;
    margin-top: 0;
    margin-bottom: 15px;

    p
    {
        margin: 0 auto;
        max-width: 1200px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        line-height: 1;
    }

    strong
    {
        color: #000;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

h1
{
    font-size: 4.5vw;
}

a
{
    color: currentColor;
    text-underline-offset: 4px;
}

a:hover
{
    text-decoration-color: var(--text-decoration-color);
}

ul,
ol
{
    margin: 0;
}

ul,
ol
{
    padding: 0 1.7em;
}

li
{
    line-height: 2em;
}

li
{
    padding: 0.4rem 0;
}

pre
{
    overflow: scroll;
    max-height: 50vh;
    display: block;
    white-space: break-spaces;
}

/* #region Widths */

.readability
{
    /*max-width: var(--readable-width);
    margin: 0 auto;
    padding-inline: 2rem;*/
    /* Grid */
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(0, 1fr) [readable-start] min(var(--readable-width), 100% - 4rem) [readable-end] minmax(0, 1fr) [full-width-end];
}

/* Keeps all current text/tags centered and readable */
.readability>*
{
    grid-column: readable-start;
}

.full-width
{
    grid-column: full-width-start / full-width-end;
    width: 100%;

    .content
    {
        max-width: var(--readable-width);
        margin: 0 auto;
        padding-inline: 2rem;
    }
}

/* #endregion */

header,
section#perpetrators
{
    background-color: var(--background-colour);
    color: var(--colour);

    h1
    {
        font-size: 4.5vw;
        letter-spacing: 0.3rem;
    }

    h2
    {
        font-size: 4.2vw;
    }
}

header h1,
nav,
section#perpetrators
{
    text-transform: uppercase;
}

nav,
section#perpetrators
{
    ul
    {
        list-style-type: none;
    }
}

article,
section#perpetrators
{
    padding-block: 1vw;
}

section#perpetrators
{
    margin-top: 30px;

    ul
    {
        padding-inline: 0;
        /* left & right */
    }

    li
    {
        margin-block: 4vw;
        padding: 0.7rem 1.7rem;
        font-size: 3vw;
        line-height: 4.2vw;
        letter-spacing: 0.2rem;
        border-color: currentColor;
        border-radius: 10px;
        box-shadow: 0px 0px 3vw currentColor;
        box-sizing: border-box;

        img
        {
            margin-bottom: 1rem;
        }
    }
}

img
{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

label
{
    display: block;
}

input,
textarea
{
    width: 100%;
    margin: 1rem 0rem;
    padding: 1rem;
    border: 2px solid currentColor;
    border-radius: 5px;
}

textarea
{
    min-height: 200px;
    resize: vertical;
}

input:focus,
textarea:focus
{
    outline: none;
    box-shadow: 0px 0px 10px currentColor;
}

button
{
    border: 1px solid var(--border-colour);
}

footer
{
    border-top: 1px solid #ff0000;
    padding: 1rem 0;
    text-align: center;
    letter-spacing: 0.1rem;

    a
    {
        color: #b00000;
    }

    a:hover
    {
        color: white;
    }
}

/* #region Stamp */
.stamp
{
    display: block;
    text-transform: uppercase;
    /* width: min-content; */
    margin-top: 3rem;
    margin-bottom: 2rem;
    margin-inline: auto;
    background-color: #b00000;
    padding: 0 2px;

    /* Typography */
    color: #ffffff;
    font-weight: 900;
    line-height: 1.0;
    font-size: 1.3rem;
    font-family: Georgia, serif;
    text-align: center;

    /* THE FRAME: This creates the "Red Block > Black Gap > Red Frame" look in one go */
    border: 6px double #b00000;
    /* This creates the black "moat" by using the background color of the header */
    outline: 2px solid #b00000;
    outline-offset: 4px;

    /* STAMP STYLING */
    transform: rotate(-17deg);

    /* THE "FLAKY" TEXTURE: Applies to the borders and the background */
    filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="rough"><feTurbulence type="fractalNoise" baseFrequency="0.02" numOctaves="1" result="noise" /><feDisplacementMap in="SourceGraphic" in2="noise" scale="0.1" /></filter></svg>#rough');

    /* Grainy Ink Effect */
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 3px 3px;
}

/* Aligning the lines */
/* .stamp {
    letter-spacing: 6px;
}
.stamp::first-line {
    letter-spacing: 2px;
} */
/* #endregion */

/* #region Pulse */
.pulse
{
    color: #b91c1c;
    font-size: 0.7rem;
    line-height: 1;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation
{
    0%
    {
        opacity: 1;
        transform: scale(1);
    }

    50%
    {
        opacity: 0.3;
        transform: scale(1.2);
    }

    100%
    {
        opacity: 1;
        transform: scale(1);
    }
}

/* #endregion */

.redacted
{
    padding: 0.2rem;
    font-size: min(2.4vw, 0.7rem);
    font-family: monospace;
    letter-spacing: 0.1rem;
    background-color: black;
    color: #fff;
    border: 1px solid var(--border-colour);
}

/* #region Summary Box */
.summary-box
{
    background-color: #f8fafc;
    /* Subtle grey-blue */
    border-left: 5px solid #475569;
    /* Slate grey bar */
    padding: 20px 25px;
    margin: 20px 0 35px 0;
}

.summary-box strong
{
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.summary-box p
{
    margin: 0;
    line-height: 1.6;
    color: #1e293b;
    /* Darker for better contrast */
    font-size: 1.05rem;
    /* Slightly larger for readability */
}

/* #endregion */

.note-box
{
    background-color: #f5f7fa;
    border-left: 4px solid #64748b;
    padding: 16px 22px;
    margin: 10px 0;
    color: #334155;
}

/* #region Evidence Highlights */
.evidence-highlights
{
    background-color: #fef2f2;
    border: 2px solid #b91c1c;
    padding: 25px;
    margin-top: 10px;
    margin-bottom: 35px;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 4px 4px 0px rgba(185, 28, 28, 0.1);
    position: relative;
    text-align: left;
    display: block;

    h3
    {
        color: #b91c1c;
        text-transform: uppercase;
        font-size: 1.2rem;
        margin: 0 0 15px 0;
        border-bottom: 1px solid #fca5a5;
        padding-bottom: 10px;
        letter-spacing: 1px;
    }

    ul
    {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li
    {
        color: #1f2937;
        font-size: 0.95rem;
        line-height: 1.5;
        margin-bottom: 12px;
        padding-left: 28px;
        position: relative;
        background: none;
    }

    li::before
    {
        content: "»";
        position: absolute;
        left: 0;
        color: #b91c1c;
        font-weight: bold;
        font-size: 1.1rem;
    }

    strong
    {
        color: #000000;
        font-weight: 700;
    }
}

/* #endregion */

.filing-stamp
{
    font-size: 0.75rem;
    color: #4b5563;
    /* Muted slate grey */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-left: 2px solid #b91c1c;
    padding-left: 12px;
    margin-bottom: 25px;
    font-weight: 600;
}

.pull-quote
{
    font-size: min(4vw, 1.5rem);
    font-weight: bold;
    font-style: italic;
    margin: 1rem 0;
    padding-left: 1.3em;
    color: var(--colour);
    border-left: 4px solid var(--border-colour);
}

/* #region Forms */
.validation-error
{
    color: #ff6b6b;
    margin-top: 0.5rem;
}

.submit-btn
{
    background-color: var(--colour);
    color: #000000;
    padding: 1rem 3rem;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    transition: all 0.3s ease;
}

.submit-btn:hover
{
    background-color: #ff4444;
    box-shadow: 0px 0px 15px #ff4444;
}

.submit-btn:disabled
{
    background-color: #666;
    cursor: not-allowed;
}

.success-message
{
    background-color: var(--success-background-colour);
    color: var(--colour);
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 2rem;
}

.error-message
{
    background-color: var(--colour);
    color: #fff;
    padding: 1rem;
    border-radius: 5px;
    margin-bottom: 2rem;
}

/* #endregion */