/*
================================================================================
S99 DIGITAL TRANSFORMATION - MAIN CSS ENTRY POINT
================================================================================

This file serves as the central entry point for all CSS imports across the S99 
Digital Transformation website. It follows a modular architecture pattern where 
each component maintains its own stylesheet for better organization, maintenance, 
and performance.

The import order is critical for proper CSS cascading:
1. Variables (design tokens) - Must load first so all components can access them
2. Animations - Core animation library for consistent motion design
3. Component stylesheets - Imported in visual hierarchy order
4. Main layout rules - Base layout styling for the document structure

Author: S99 (Pty) Ltd
Date: 2025
Version: 2.0 - Modular Architecture
================================================================================
*/

/* Site privacy banner - contains all banner styling */
@import 'privacy-banner.css';

/*
================================================================================
DESIGN SYSTEM FOUNDATION
================================================================================
Variables and animations must be imported first to ensure all CSS custom 
properties and keyframes are available to subsequent component stylesheets. 
This includes colors, typography, spacing, and motion design tokens that 
create visual consistency across the site.
*/
@import 'variables.css';
@import 'animations.css';

/*
================================================================================
SITE STRUCTURE COMPONENTS
================================================================================
Components are imported in the order they appear visually on the page, from 
top to bottom. This ensures proper cascade inheritance and makes debugging easier.
*/

/* Site header component - contains all footer-related styling */
@import 'header.css';

/* Site footer component - contains all footer-related styling */
@import 'footer.css';

/*
================================================================================
MAIN DOCUMENT LAYOUT
================================================================================
Base layout rules that apply to the overall document structure. These rules
handle scroll behavior, section spacing, and core layout mechanics that don't
belong to specific components.
*/

/* 
Main content container - provides smooth scrolling behavior and proper spacing
for in-page navigation links. The scroll-padding-top accounts for fixed headers.
*/
main {
    width: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/*
Section anchors - ensures proper spacing when navigating to sections via anchor
links, preventing content from being hidden behind fixed navigation elements.
*/
section[id] {
    scroll-margin-top: 80px;
}