/* 
  Component:    body, html
  Page:         base.css (global)
  DOM Path:     Root elements
  Purpose:      Resets default margin and padding across all pages; hides horizontal overflow to prevent layout shifts. Optional flex layout (commented out) available for full-height column-based designs.
*/
body, html {
    /* display: flex;
    flex-direction: column;
    height: 100%; */
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
}

/* 
  Component:    .container
  Page:         base.css (global)
  DOM Path:     Layout wrapper > .container
  Purpose:      Allows the container to flexibly grow and fill available vertical space within a flex layout; supports full-height stacking and responsive page structure
*/
.container {
    flex: 1;
}

/* 
  Component:    form
  Page:         base.css (global)
  DOM Path:     All form elements
  Purpose:      Applies a vertical flex layout to all forms; ensures child inputs and buttons stack in column order and allows the form to flexibly grow within its container
*/
form {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* 
  Component:    header, nav
  Page:         base.css (global)
  DOM Path:     Top-level layout elements
  Purpose:      Ensures header and navigation elements are layered above other content using relative positioning and elevated z-index; supports dropdowns, sticky headers, and overlapping UI components
*/
header, nav {
    position: relative;
    z-index: 10;
}

/* 
  Component:    .wrapper
  Page:         base.css (global)
  DOM Path:     Primary layout wrapper
  Purpose:      Defines the main page container with default block display and auto height; previously used flex layout and bottom padding to support full-height stacking and footer spacing (adjusted on 9/6 for layout simplification)
*/
.wrapper {
    display: block; /* was flex on 9/6 */
    /*flex-direction: column; Commented out on 9/6 */
    min-height: auto; /* Was 100vh on 9/6 */
    padding-bottom: 0; /* Was var(--footer-height) on 9/6 */
}

/* 
  Component:    :root
  Page:         base.css (global)
  DOM Path:     Global scope
  Purpose:      Defines reusable CSS variable --footer-height for consistent footer spacing across layouts; currently set to 80px for alignment and padding calculations
*/
:root {
    --footer-height: 80px;
}