/* ============================================================
   MAIN.CSS
   Base styles, CSS custom properties (variables), resets,
   typography, scrollbar, and global utility classes.
   
   TABLE OF CONTENTS:
   1. CSS Custom Properties (Variables)
   2. Reset & Base Styles
   3. Typography
   4. Scrollbar
   5. Selection
   6. Global Utility Classes
   7. Container
   8. Section Helpers
   9. Responsive Typography
============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES (VARIABLES)
   All colours, shadows, radii, and transitions are defined
   here. Change a value here to update the whole site.
============================================================ */

:root {

    /* ── Brand Colours ── */
    --primary:              #cc0000;
    --primary-dark:         #a00000;
    --primary-light:        #e63333;
    --primary-faint:        rgba(204, 0, 0, 0.07);
    --primary-faint-strong: rgba(204, 0, 0, 0.12);

    /* ── Dark / Black ── */
    --dark:                 #111111;
    --dark-2:               #1e1e1e;
    --dark-3:               #2a2a2a;
    --dark-4:               #363636;

    /* ── Text Colours ── */
    --text:                 #111111;
    --text-2:               #333333;
    --text-3:               #555555;
    --text-muted:           #888888;
    --text-light:           #aaaaaa;

    /* ── Background Colours ── */
    --bg:                   #ffffff;
    --bg-2:                 #f7f7f7;
    --bg-3:                 #f0f0f0;
    --bg-4:                 #e8e8e8;

    /* ── Border Colours ── */
    --border:               #e0e0e0;
    --border-dark:          #cccccc;

    /* ── Status / Semantic Colours ── */
    --green:                #16a34a;
    --green-bg:             rgba(22, 163, 74, 0.10);
    --green-border:         rgba(22, 163, 74, 0.25);

    --blue:                 #2563eb;
    --blue-bg:              rgba(37, 99, 235, 0.10);
    --blue-border:          rgba(37, 99, 235, 0.25);

    --orange:               #ea580c;
    --orange-bg:            rgba(234, 88, 12, 0.10);
    --orange-border:        rgba(234, 88, 12, 0.25);

    --purple:               #7c3aed;
    --purple-bg:            rgba(124, 58, 237, 0.10);
    --purple-border:        rgba(124, 58, 237, 0.25);

    --red-danger:           #dc2626;
    --red-danger-bg:        rgba(220, 38, 38, 0.08);
    --red-danger-border:    rgba(220, 38, 38, 0.20);

    /* ── Shadows ── */
    --shadow-xs:            0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 6px 24px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 12px 48px rgba(0, 0, 0, 0.13);
    --shadow-xl:            0 24px 64px rgba(0, 0, 0, 0.16);
    --shadow-red:           0 8px 24px rgba(204, 0, 0, 0.18);
    --shadow-red-lg:        0 12px 32px rgba(204, 0, 0, 0.28);

    /* ── Border Radius ── */
    --radius-xs:            4px;
    --radius-sm:            8px;
    --radius-md:            14px;
    --radius-lg:            22px;
    --radius-xl:            40px;
    --radius-full:          9999px;

    /* ── Transitions ── */
    --transition:           all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:      all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast:      all 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Gradients ── */
    --gradient-red:         linear-gradient(135deg, #cc0000, #e63333);
    --gradient-red-hover:   linear-gradient(135deg, #a00000, #cc0000);
    --gradient-dark:        linear-gradient(135deg, #111111, #2a2a2a);
    --gradient-dark-light:  linear-gradient(135deg, #1e1e1e, #363636);

    /* ── Spacing Scale ── */
    --space-xs:             4px;
    --space-sm:             8px;
    --space-md:             16px;
    --space-lg:             24px;
    --space-xl:             40px;
    --space-2xl:            64px;
    --space-3xl:            96px;

    /* ── Z-Index Scale ── */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-header:             900;
    --z-sidebar:            950;
    --z-mob-nav:            950;
    --z-modal:              3000;
    --z-admin-modal:        6000;
    --z-lightbox:           8000;
    --z-toast:              5000;
    --z-transition:         10000;

    /* ── Typography ── */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-size-xs:         11px;
    --font-size-sm:         12px;
    --font-size-base:       14px;
    --font-size-md:         15px;
    --font-size-lg:         16px;
    --font-size-xl:         18px;
    --font-size-2xl:        22px;
    --font-size-3xl:        28px;
    --font-size-4xl:        36px;
    --font-size-5xl:        48px;

    /* ── Line Heights ── */
    --leading-tight:        1.1;
    --leading-snug:         1.3;
    --leading-normal:       1.6;
    --leading-relaxed:      1.75;
    --leading-loose:        1.9;

    /* ── Layout ── */
    --max-width:            1280px;
    --header-height:        72px;
    --sidebar-width:        260px;
}


/* ============================================================
   2. RESET & BASE STYLES
   Modern CSS reset — removes default browser styling
   and sets up a consistent base across all browsers.
============================================================ */

/* Box sizing — applies to every element */
*,
*::before,
*::after {
    margin:     0;
    padding:    0;
    box-sizing: border-box;
}

/* HTML root */
html {
    scroll-behavior:    smooth;
    overflow-x:         hidden;
    font-size:          16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust:   100%;
}

/* Body */
body {
    font-family:        var(--font-family);
    font-size:          var(--font-size-lg);
    font-weight:        400;
    line-height:        var(--leading-normal);
    color:              var(--text);
    background-color:   var(--bg);
    overflow-x:         hidden;
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
}

/* Remove list styles */
ul, ol {
    list-style: none;
}

/* Images */
img {
    max-width:      100%;
    height:         auto;
    display:        block;
    border-style:   none;
}

/* Links */
a {
    color:              inherit;
    text-decoration:    none;
    transition:         var(--transition);
}

/* Buttons */
button {
    font-family:    var(--font-family);
    cursor:         pointer;
    border:         none;
    background:     none;
}

/* Input elements */
input,
select,
textarea {
    font-family:    var(--font-family);
    font-size:      var(--font-size-base);
}

/* Remove default appearance */
input,
select,
textarea,
button {
    -webkit-appearance: none;
    -moz-appearance:    none;
    appearance:         none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight:        700;
    line-height:        var(--leading-snug);
    color:              var(--text);
}

/* Paragraphs */
p {
    line-height:        var(--leading-relaxed);
    color:              var(--text-3);
}

/* Horizontal rule */
hr {
    border:             none;
    border-top:         1px solid var(--border);
    margin:             var(--space-lg) 0;
}

/* Focus visible — accessibility */
:focus-visible {
    outline:        2px solid var(--primary);
    outline-offset: 2px;
    border-radius:  var(--radius-xs);
}

/* Disabled state */
[disabled] {
    opacity:    0.6;
    cursor:     not-allowed;
    pointer-events: none;
}


/* ============================================================
   3. TYPOGRAPHY
   Consistent typographic scale used across all pages.
============================================================ */

/* Display headings */
.display-xl {
    font-size:      clamp(42px, 6vw, 80px);
    font-weight:    900;
    letter-spacing: -3px;
    line-height:    var(--leading-tight);
}

.display-lg {
    font-size:      clamp(36px, 5vw, 64px);
    font-weight:    900;
    letter-spacing: -2px;
    line-height:    var(--leading-tight);
}

.display-md {
    font-size:      clamp(30px, 4vw, 52px);
    font-weight:    900;
    letter-spacing: -1.5px;
    line-height:    var(--leading-tight);
}

/* Section heading */
.heading-lg {
    font-size:      clamp(26px, 3vw, 42px);
    font-weight:    800;
    letter-spacing: -1px;
    line-height:    var(--leading-snug);
}

.heading-md {
    font-size:      clamp(20px, 2.5vw, 32px);
    font-weight:    800;
    letter-spacing: -0.5px;
}

.heading-sm {
    font-size:      clamp(16px, 2vw, 22px);
    font-weight:    700;
}

/* Body text */
.text-lg   { font-size: var(--font-size-lg);   line-height: var(--leading-relaxed); }
.text-md   { font-size: var(--font-size-md);   line-height: var(--leading-relaxed); }
.text-base { font-size: var(--font-size-base); line-height: var(--leading-relaxed); }
.text-sm   { font-size: var(--font-size-sm);   line-height: var(--leading-normal); }
.text-xs   { font-size: var(--font-size-xs);   line-height: var(--leading-normal); }

/* Font weights */
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* Text colours */
.text-primary { color: var(--primary); }
.text-dark    { color: var(--dark); }
.text-muted   { color: var(--text-muted); }
.text-white   { color: #ffffff; }
.text-green   { color: var(--green); }
.text-red     { color: var(--red-danger); }

/* Highlight shorthand used in headings */
.red      { color: var(--primary); }
.hl       { color: var(--primary); }

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Letter spacing */
.tracking-tight  { letter-spacing: -1px; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 1px; }
.tracking-wider  { letter-spacing: 2px; }


/* ============================================================
   4. SCROLLBAR
   Custom styled scrollbar — visible on desktop browsers.
============================================================ */

/* Scrollbar track */
::-webkit-scrollbar {
    width:  7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background:     var(--bg-2);
    border-radius:  var(--radius-full);
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background:     var(--border-dark);
    border-radius:  var(--radius-full);
    transition:     background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background:     var(--primary);
}

/* Firefox */
* {
    scrollbar-width:    thin;
    scrollbar-color:    var(--border-dark) var(--bg-2);
}


/* ============================================================
   5. SELECTION
   Custom text selection colour matching brand colours.
============================================================ */

::selection {
    background:     rgba(204, 0, 0, 0.15);
    color:          var(--text);
}

::-moz-selection {
    background:     rgba(204, 0, 0, 0.15);
    color:          var(--text);
}


/* ============================================================
   6. GLOBAL UTILITY CLASSES
   Small reusable helper classes used throughout the project.
============================================================ */

/* Display helpers */
.d-flex          { display: flex; }
.d-grid          { display: grid; }
.d-block         { display: block; }
.d-inline        { display: inline; }
.d-inline-flex   { display: inline-flex; }
.d-none          { display: none; }

/* Flex helpers */
.flex-center     { display: flex; align-items: center; justify-content: center; }
.flex-between    { display: flex; align-items: center; justify-content: space-between; }
.flex-start      { display: flex; align-items: center; justify-content: flex-start; }
.flex-end        { display: flex; align-items: center; justify-content: flex-end; }
.flex-col        { display: flex; flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.gap-xs          { gap: var(--space-xs); }
.gap-sm          { gap: var(--space-sm); }
.gap-md          { gap: var(--space-md); }
.gap-lg          { gap: var(--space-lg); }
.gap-xl          { gap: var(--space-xl); }

/* Margin helpers */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding helpers */
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }
.px-sm  { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
.px-md  { padding-left: var(--space-md);  padding-right: var(--space-md); }
.px-lg  { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
.py-sm  { padding-top: var(--space-sm);   padding-bottom: var(--space-sm); }
.py-md  { padding-top: var(--space-md);   padding-bottom: var(--space-md); }
.py-lg  { padding-top: var(--space-lg);   padding-bottom: var(--space-lg); }

/* Width helpers */
.w-full   { width: 100%; }
.w-half   { width: 50%; }
.w-auto   { width: auto; }
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1024px; }

/* Border radius helpers */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* Opacity */
.opacity-0  { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100{ opacity: 1; }

/* Pointer events */
.pointer-none { pointer-events: none; }
.pointer-all  { pointer-events: all; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Truncate text */
.truncate {
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

/* Visually hidden (accessible) */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}


/* ============================================================
   7. CONTAINER
   The main layout wrapper. Centers content and adds
   consistent horizontal padding across all pages.
============================================================ */

.container {
    max-width:  var(--max-width);
    margin:     0 auto;
    padding:    0 24px;
    width:      100%;
}

/* Wide container — used for full-bleed sections */
.container-wide {
    max-width:  1440px;
    margin:     0 auto;
    padding:    0 24px;
    width:      100%;
}

/* Narrow container — used for forms and single-column content */
.container-narrow {
    max-width:  760px;
    margin:     0 auto;
    padding:    0 24px;
    width:      100%;
}


/* ============================================================
   8. SECTION HELPERS
   Reusable section-level components like badges, titles,
   separators, and subtitles used across all sections.
============================================================ */

/* Section badge — the small label above headings */
.section-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    background:     var(--primary-faint);
    border:         1px solid rgba(204, 0, 0, 0.18);
    padding:        5px 14px;
    border-radius:  var(--radius-xl);
    font-size:      11.5px;
    font-weight:    700;
    color:          var(--primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom:  12px;
}

/* Light version — used on dark backgrounds */
.light-badge {
    background:     rgba(204, 0, 0, 0.15);
    border-color:   rgba(204, 0, 0, 0.30);
    color:          #ff6666;
}

/* Section title */
.section-title {
    font-size:      clamp(26px, 3vw, 40px);
    font-weight:    900;
    letter-spacing: -1px;
    line-height:    var(--leading-snug);
    margin-bottom:  10px;
    color:          var(--text);
}

/* Section title on dark backgrounds */
.light-title {
    color: #ffffff;
}

/* Section subtitle */
.section-sub {
    font-size:   15px;
    color:       var(--text-3);
    max-width:   520px;
    line-height: var(--leading-relaxed);
}

/* Light subtitle — on dark backgrounds */
.light-sub {
    color: #aaaaaa;
}

/* Separator line — the red underline beneath titles */
.sep {
    width:          48px;
    height:         3px;
    background:     var(--gradient-red);
    border-radius:  var(--radius-full);
    margin:         14px auto 0;
}

/* Left-aligned separator */
.sep-left {
    margin-left:    0;
    margin-right:   auto;
    margin-bottom:  16px;
}

/* Section header wrapper — centers badge + title + subtitle */
.section-header {
    text-align:     center;
    margin-bottom:  56px;
}

.section-header .section-sub {
    margin:         14px auto 0;
}


/* ============================================================
   9. RESPONSIVE TYPOGRAPHY
   Adjusts base font sizes and spacing for smaller screens.
============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --space-3xl: 72px;
        --space-2xl: 48px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --space-3xl: 56px;
        --space-2xl: 40px;
        --space-xl:  32px;
    }

    .container,
    .container-wide,
    .container-narrow {
        padding: 0 16px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-sub {
        font-size: 14px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    :root {
        --space-3xl: 48px;
        --space-2xl: 32px;
    }
}