/* ==========================================================================
   Metal America Concrete - Main Base Styles (CLS-Optimized)
   ==========================================================================

   Do NOT use @import - all CSS loaded via wp_enqueue_style for parallel loading.
   Each stylesheet is enqueued separately in functions.php to allow the browser
   to download them in parallel, improving page load performance.

   ========================================================================== */

/* ==========================================================================
   Font Face - Work Sans CLS Fix
   --------------------------------------------------------------------------
   This fallback font declaration prevents Cumulative Layout Shift (CLS)
   by providing a size-matched local system font while Work Sans loads
   from Google Fonts. The override values are tuned to match Work Sans metrics.
   ========================================================================== */

@font-face {
    font-family: 'Work Sans Fallback';
    src: local('Segoe UI'), local('-apple-system'), local('BlinkMacSystemFont'), local('Arial');
    ascent-override: 92%;
    descent-override: 23%;
    line-gap-override: 0%;
    font-display: swap;
}

/* ==========================================================================
   CSS Variables (Global)
   --------------------------------------------------------------------------
   Defined in main.css so they are available on ALL pages (not just front-page).
   ========================================================================== */

:root {
    --mac-black: #000000;
    --mac-white: #FFFFFF;
    --mac-red: #FF2400;
    --mac-red-hover: #e02000;
    --mac-gray-50: #f9f9f9;
    --mac-gray-100: #f0f0f0;
    --mac-gray-200: #e0e0e0;
    --mac-gray-300: #cccccc;
    --mac-gray-600: #666666;
    --mac-gray-800: #333333;
    --mac-gray-900: #1a1a1a;
    --mac-font: 'Work Sans', 'Work Sans Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
    --mac-container: 1200px;
    --mac-gap: 2rem;
    --mac-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --mac-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --mac-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
}

/* ==========================================================================
   Box Sizing Reset
   ========================================================================== */

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

/* ==========================================================================
   Body Base Styles
   ========================================================================== */

body {
    font-family: 'Work Sans', 'Work Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* ==========================================================================
   Main Content Container - CLS Reserve
   --------------------------------------------------------------------------
   min-height prevents layout shift while content loads below the fold.
   ========================================================================== */

.site-content,
main,
#main-content {
    min-height: 500px;
    box-sizing: border-box;
}

/* ==========================================================================
   Header Reserve - CLS Prevention
   --------------------------------------------------------------------------
   Reserves space for the header before it fully renders to prevent
   content from jumping down once the header loads.
   ========================================================================== */

.site-header,
header {
    min-height: 80px;
}

/* ==========================================================================
   Heading Styles
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Work Sans', 'Work Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 0;
    color: inherit;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.75em;
}

h2 {
    font-size: 2rem;
    margin-bottom: 0.65em;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5em;
}

h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5em;
}

h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5em;
}

h6 {
    font-size: 1rem;
    margin-bottom: 0.5em;
}

/* ==========================================================================
   Base Link Styles
   ========================================================================== */

a {
    color: #FF2400;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover,
a:focus {
    text-decoration: underline;
    color: #cc1d00;
}

a:focus-visible {
    outline: 2px solid #FF2400;
    outline-offset: 2px;
}

/* ==========================================================================
   Image Defaults
   ========================================================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Base Element Resets
   ========================================================================== */

p {
    margin-top: 0;
    margin-bottom: 1em;
}

ul,
ol {
    margin-top: 0;
    padding-left: 1.5em;
}

blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid #FF2400;
    background-color: #f9f9f9;
}

table {
    border-collapse: collapse;
    width: 100%;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
}