/* ========================================
   GLOBAL STYLES - Core definitions
   ======================================== */

/* CSS Variables - Gulf Euro Drive Approved Colors */
:root {
    --color-primary: #F45000;
    --color-primary-hover: #FF5001;
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-bg-light: #F5F5F5;
    --color-border: #E5E7EB;
    --color-text-secondary: #666666;
    --color-text-tertiary: #B3B3B3;
    
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Glypha LT', Georgia, serif;
    
    /* --container-width: 65rem; Removed - using full viewport width */
    --header-height: 1.25rem;
    --spacing-xs: 0.375rem;
    --spacing-sm: 0.75rem;
    --spacing-md: 1.25rem;
    --spacing-lg: 2.5rem;
    --spacing-xl: 3.75rem;
    --spacing-xxl: 5rem;
    
    --border-radius: 0.5rem;
    --transition-speed: 0.2s;
}

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

html {
    margin: 0;
    padding: 0;
}

/* Typography */
body {
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-white);
    color: var(--color-black);
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    /* text-wrap: balance; */
    /* max-width: 30ch; */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

h1 {
    /* font-size: 36px; */
    /* max-width: 25ch; */
}
h2 {
    font-size: 2rem;
    /* max-width: 30ch; */
}
h3 { 
    font-size: 1.5rem;
    max-width: 35ch;
}
h4 { 
    font-size: 1.25rem;
    max-width: 40ch;
}

/* Prevent orphans in paragraphs */
p {
    text-wrap: pretty;
    orphans: 3;
    widows: 3;
    max-width: 65ch;
}

strong { font-weight: 700; }
em { font-style: italic; }

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

/* Container - Edge to edge design */
.container,
.Home {
    width: 100%;
    /* Removed max-width to allow full viewport coverage */
    margin: 0;
    background: var(--color-white);
    position: relative;
    padding: 0; /* Edge to edge - no padding */
    top: 0; /* Start at viewport top */
}

.Home {
    overflow: hidden;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.color-primary { color: var(--color-primary); }
.color-white { color: var(--color-white); }

.bg-primary { background: var(--color-primary); }
.bg-light { background: var(--color-bg-light); }
.bg-black { background: var(--color-black); }

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
.mt-5 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

.p-3 { padding: var(--spacing-md); }
.p-4 { padding: var(--spacing-lg); }
.p-5 { padding: var(--spacing-xl); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-1 { flex: 1; }

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}