/* =========================================================
   Global styles — used by all pages.
   Page-specific and component styles live inside their
   corresponding Blade files (in <style> tags).
   ========================================================= */

@font-face {
    font-family: 'Stem';
    src: url('/fonts/Stem-SemiLight.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Stem';
    src: url('/fonts/Stem-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Stem';
    src: url('/fonts/Stem-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Circe Contrast';
    src: url('/fonts/Circe_Contrast_Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --primary-blue: #040D2E;
    --secondary-blue: #011C73;
    --light-blue: #051246;
    --accent-blue: #052091;
    --primary-red: #440821;
    --secondary-red: #8A082E;
    --accent-red: #6A0A2F;
    --bright-red: #AB052B;
    --light-grey: #EDEBEC;
    --medium-grey: #9C9C9A;
    --dark-grey: #C6C4C5;
    --brand-red: #EB002D;
    --brand-blue: #001B72;
    --white: #ffffff;
    --text-dark: #2c3e50;
    --text-light: #6c757d;
    --background-light: #f8fafc;
    --border-light: #e9ecef;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    width: 100%;
    max-width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    font-family: 'Stem', Arial, sans-serif;
    background: var(--background-light);
    background-image: url('/Graphika_RGB_grey.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-dark);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    transition: padding-right 0.3s ease;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(248, 250, 252, 0.92);
    z-index: -1;
    pointer-events: none;
}

.page-wrapper {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.container {
    max-width: 1420px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

img, video { max-width: 100%; height: auto; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--light-grey); }
::-webkit-scrollbar-thumb { background: var(--brand-red); }
::-webkit-scrollbar-thumb:hover { background: var(--bright-red); }