/*
  COMPONENT IMPORTS
  Using CSS @import to modularize stylesheets for better organization.
  This approach allows us to split large CSS files into smaller, focused components.
 
  The import order follows the visual structure of the page:
  1. Variables (global design tokens)
  2. Header (top of page)
  3. Body (main content)
  4. Footer (bottom of page)
  
  This structure ensures proper cascading of styles and easier maintenance.
*/

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

/* 
  VARIABLES IMPORT
  Global design tokens that ensure consistency across components
*/
@import 'components/variables.css';

/*
  HEADER COMPONENT IMPORT
  Loads styles for the site header, including navigation and top-level elements
*/
@import 'components/header.css';

/*
  BODY COMPONENT IMPORT
  Loads styles for the main content sections of the site.
  This includes hero, features, about sections, and other body content.
*/
@import 'components/body.css';

/*
  FOOTER COMPONENT IMPORT
  Loads styles specific to the site footer.
  Separating footer styles improves maintainability and keeps the main CSS file cleaner.
*/
@import 'components/footer.css';

/* 
  Body and Main Content Adjustments for Sticky Header
  Ensures content doesn't get hidden behind the sticky header
*/
body {
  /* No need for additional margin-top since the header is sticky, not fixed */
  overflow-x: hidden; /* Prevents horizontal scrolling issues */
}

/* Main content container */
main {
  /* This ensures the main content is below the sticky header */
  width: 100%;
  /* The following creates a smooth scroll effect when navigating to anchors */
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Adjust this value to match your header height */
}

/*
  If you're using scroll-to-section navigation, add this to ensure the
  sections aren't hidden under the header when scrolled to
*/
section[id] {
  scroll-margin-top: 80px; /* Adjust to match your header height */
}

/*
  END OF FILE
  This comment marks the end of the CSS document.
*/