/* ======================= */
/*  SITE LAYOUT DEFAULTS   */
/* ======================= */

/* =====================================================
   HTML TAG HIERARCHY (Quick Reference)
   =====================================================
   
   <html>              Root of the entire document.
     <head>            Metadata only; nothing visible.
     <body>            The visible page canvas.
       <header>        Sitewide header (shared).
       <main>          Page-specific content area.
       <footer>        Sitewide footer (shared).
   
   CSS BLOCK RESPONSIBILITIES:
   html  {}  →  Document root; sets 1rem baseline (font-size: 16px).
   body  {}  →  Visible canvas; resets margin/padding, sets default font/color.
   main  {}  →  Content area; controls width, centering, and page spacing.
   
   Cascade flows outermost to innermost:
   html → body → main
   ===================================================== */

html /* The root HTML container. That is, everthing is "contained under/within" this tag, visible or not.*/ 
{
  font-size: 18px; /* Set the default font size (i.e. 1 rem). */
  height: 100%;  /* Ensure all HTML content stretches to fill the viewport (i.e. the browser's viewing window). */
}

body /* The outermost block of the "visible" elements of the site/page. Set defaults accordingly. */
{
  min-width: 360px; /* Narrowest allowed for any visible elemetns. Below this, content stops shrinking and horizontal scroll appears. */
  background-color: var(--color-near-white); /* Default site background color. */
  margin: 0; /* Exterior "padding". Makes the page content "flush" to the browser window, no "frame" buffer on the outside. Style/Tune each specific element, as needed, not here. */
  padding: 0; /* Interior "padding". Makes the page content "flush" to the browser window, no "frame" buffer on the outside. Style/Tune each specific element, as needed, not here. */
  height: 100%;        /* Force to use all of the height of the viewport (primarily used to force footer to the very bottom, not float midway, if low content height). */
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: column; /* Stack elements in column: header, main, footer, etc. */
  text-align: left; /* Default to left align and override when needed. */
  line-height: 1.5; /* Default "line spacing", like a word processor. */  
}

main /* Within "body", it contains the page-specific content area.*/
{  
  max-width: 1100px; /* Set a maximum width for the content to "take up". Tune to taste. */
  width: 100%; /* Use 100% of available width, up to the max-width. */
  flex: 1; /* Allows the <main> area to grow/shrink to take up all available space between the viewing area and the header/footer. */
  margin: 0 auto; /* Exterior "padding".  No vertical margin (0) but use "auto" for horizontal which will "center align" the <main> content area. */
  padding: 0; /* No default interior "padding". Style/Tune each specific element, as needed, not here. */
}
