@import url("../astra/style.css");


/* Global Link Behavior: Remove focus outline on click */
*:focus {
    outline: none !important;
}

* {
    scroll-margin-top: 50px;
    /* Prevents overlap with fixed headers */
}


:root {
    /* --- Backgrounds & Voids --- */
    --bg-pure-void: #000000;
    --bg-obsidian-veil: #0A0A0A;
    --bg-midnight-archive: #101010;
    --bg-ashen-stillness: #1E1E1E;
    --bg-silent-field: #F7F7F7;

    /* --- Typography & Glyphs --- */
    --text-radiant-glyph: #FFFFFF;
    --text-silent-field: #F7F7F7;
    --text-whispered-sigil: #D0D0D0;
    --text-seeker-monologue: #B8B8B8;
    --text-ashen-stillness: #1E1E1E;
    --text-highlight: #C4C4C4;
    /* New variable for emphasized text */

    /* --- Accents & Metals --- */
    --accent-eyes-pulse: #C4C4C4;
    --border-silver-thread: #333333;

    /* --- Urgency & The Pact --- */
    --crimson-pact: #D10000;
    --blood-ritual: #E60000;

    /* --- Radii & Motion --- */
    --radius-sharp: 0;
    --radius-subtle: 3px;
    --transition-micro: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-swift: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-measured: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-grand: all 1.2s cubic-bezier(0.23, 1, 0.32, 1);
    --transition-sovereign-gaze: all 0.4s ease-in-out;
    --stagger-base: 0.1s;
    --shadow-ethereal-glow: 0 0 60px rgba(196, 196, 196, 0.18), 0 0 30px rgba(196, 196, 196, 0.15);

    /* --- Shadows --- */
    --shadow-depth-dark: 0 10px 35px rgba(0, 0, 0, 0.7);
    --shadow-echo-light: 0 5px 20px rgba(0, 0, 0, 0.12);
    --shadow-hover-button: 0 5px 15px rgba(196, 196, 196, 0.1);
    /* New shadow for buttons */
    --shadow-crimson-button: 0 7px 25px rgba(230, 0, 0, 0.35);
    /* Shadow for crimson buttons */

    /* --- Gradients --- */
    --gradient-fog-of-void: linear-gradient(180deg, #101010 0%, #1A1A1A 100%);
    --gradient-silent-field: linear-gradient(180deg, #F9F9F9 0%, #F7F7F7 100%);

    /* --- Font Sizes (Clamped) --- */
    --font-h1: clamp(2.5rem, 1.25rem + 4vw, 4rem);
    --font-h2: clamp(1.75rem, 1.25rem + 2vw, 2.25rem);
    --font-h3: clamp(1.5rem, 1rem + 2vw, 1.875rem);
    --font-h4: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    --font-h5: clamp(1.125rem, 0.9rem + 1vw, 1.375rem);
    --font-h6: clamp(1rem, 0.8rem + 1vw, 1.25rem);
    --font-body: clamp(1rem, 0.8rem + 1vw, 1.125rem);
}


html {
    scroll-behavior: auto !important;
    background-color: var(--bg-obsidian-veil) !important;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--text-seeker-monologue);
    background-color: var(--bg-obsidian-veil);
    font-size: var(--font-body);
    line-height: 1.6;
    scroll-behavior: auto !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.75em;
    line-height: 1.2;
}

h1 {
    /* Divine Command */
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: var(--font-h1);
    letter-spacing: 0.05em;
    /* Widened for statuesque look */
    line-height: 0.9;
    /* Tightened for monolithic feel */
    color: var(--text-radiant-glyph);
}

h2 {
    /* Oracle's Pronouncement */
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 700;
    font-size: var(--font-h2);
    color: var(--text-radiant-glyph);
}

h3 {
    /* Whispered Truth */
    font-family: 'Libre Franklin', sans-serif;
    font-weight: 500;
    font-size: var(--font-h3);
    color: var(--text-whispered-sigil);
}

h4,
h5,
h6 {
    /* Clerk's Notes */
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: var(--text-whispered-sigil);
    letter-spacing: 0.2em;
}

h4 {
    font-size: var(--font-h4);
}

h5 {
    font-size: var(--font-h5);
}

h6 {
    font-size: var(--font-h6);
}

p {
    margin-bottom: 1.25em;
    line-height: 1.7;
}

a {
    color: var(--text-whispered-sigil);
    text-decoration: none;
    transition: var(--transition-swift);
    padding-bottom: 1px;
}

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

blockquote {
    border-left: 2px solid var(--border-silver-thread);
    padding-left: 1.5em;
    margin-left: 0;
    font-style: italic;
    color: var(--text-radiant-glyph);
}

::selection {
    background-color: var(--accent-eyes-pulse);
    color: var(--text-ashen-stillness);
}

.sigil-button-pact,
.sigil-button-crimson {
    display: inline-flex;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sharp);
    transition: var(--transition-swift);
    text-align: center;
    cursor: pointer;
    text-decoration: none !important;
    line-height: 1;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.sigil-button-pact {
    background-color: var(--bg-ashen-stillness);
    color: var(--text-whispered-sigil);
    border-color: var(--bg-ashen-stillness);
}

.sigil-button-pact:hover {
    background-color: var(--accent-eyes-pulse);
    color: var(--text-ashen-stillness);
    border-color: var(--accent-eyes-pulse);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(196, 196, 196, 0.1);
}

.sigil-button-crimson {
    background-color: var(--crimson-pact);
    color: var(--text-silent-field);
    border-color: var(--crimson-pact);
    font-weight: 700;
    letter-spacing: 0.15em;
    padding: 1rem 2.5rem;
}

.sigil-button-crimson:hover {
    background-color: var(--blood-ritual);
    border-color: var(--blood-ritual);
    color: var(--text-radiant-glyph);
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(209, 0, 0, 0.4);
}

.sovereign-wrapper {
    width: 100%;
    display: block;
}

.midnight-content-frame {
    background-color: var(--bg-midnight-archive);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem 1.5rem;
    box-shadow: var(--shadow-echo-light);
    border-radius: var(--radius-subtle);
}

/* Small Screens (Mobile) */
@media (max-width: 480px) {
    h1 {
        font-size: clamp(2rem, 1rem + 3vw, 3.5rem);
    }

    h2 {
        font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    }

    p {
        font-size: 14px;
        line-height: 1.5;
    }
}

/* Medium Screens (Tablets) */
@media (min-width: 481px) and (max-width: 768px) {
    .midnight-content-frame {
        padding: 2rem 1rem;
    }

    button {
        font-size: 1rem;
        padding: 0.6rem 1.2rem;
    }
}

/* Large Screens (Desktops) */
@media (min-width: 769px) and (max-width: 1200px) {
    .midnight-content-frame {
        max-width: 1000px;
    }

    h1 {
        margin-bottom: 1rem;
    }
}

/* Extra-Large Screens (Widescreens) */
@media (min-width: 1201px) {
    .midnight-content-frame {
        max-width: 1400px;
    }

    h1 {
        font-size: clamp(3rem, 1.5rem + 5vw, 5rem);
    }
}

/* Minimum Button Sizes */
button,
a.sigil-button-pact,
a.sigil-button-crimson {
    min-width: 44px;
    min-height: 44px;
    padding: 0.8rem 1.2rem;
}


/* Reducing Paint Times */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* Print Styles */
@media print {
    body {
        background-color: white !important;
        color: black !important;
    }

    img,
    video,
    iframe {
        display: none;
    }

    h1,
    h2,
    h3,
    p {
        font-family: Georgia, serif;
    }
}

/*
 * ===================================================================
 * THE GLOBAL DECREE OF SELECTION: A LAW FOR ALL DROPDOWNS
 * ===================================================================
 */

/* === I. FORGING THE STANDARD SELECT === */
select {
    background-color: var(--bg-midnight-archive) !important;
    border: 1px solid var(--border-silver-thread) !important;
    color: var(--text-radiant-glyph) !important;
    border-radius: var(--radius-sharp) !important;
    padding: 0.75rem 1rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23D0D0D0' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
}

/* === II. SELECT2 === */

/* The container of the selection */
.select2-container--default .select2-selection--single {
    background-color: var(--bg-midnight-archive) !important;
    border: 1px solid var(--border-silver-thread) !important;
    border-radius: var(--radius-sharp) !important;
    height: auto !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--accent-eyes-pulse) !important;
}

/* The displayed selection */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-radiant-glyph) !important;
    padding: 0.75rem 1rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-whispered-sigil) transparent transparent transparent !important;
    margin-top: 4px !important;
}

/* The dropdown panel */
.select2-dropdown {
    background-color: var(--bg-ashen-stillness) !important;
    border: 1px solid var(--border-silver-thread) !important;
    border-radius: var(--radius-sharp) !important;
}

/* The options within */
.select2-results__option {
    color: var(--text-whispered-sigil) !important;
    transition: var(--transition-swift);
}

/* The hover and selected states */
.select2-results__option--highlighted,
.select2-results__option--selected {
    background-color: var(--accent-eyes-pulse) !important;
    color: var(--text-ashen-stillness) !important;
}