/* ============================================================================
   wow-css/wow-canvas.css
   Purpose:
     - Provide ONE page canvas (#WOW_CANVAS) with theme colors (light/dark).
     - Define the global content rail widths at 3 breakpoints.
   Notes:
     - Color hexes come from wow-core.css (--wow-*).
     - Sections mount inside .canvas-content and inherit these vars.
   ============================================================================ */

/* 1) Canvas base (structure) */
#WOW_CANVAS.wow-canvas {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* theme application */
  background: var(--bg);
  color: var(--text);
}

/* 2) Theme mapping (light/dark) from wow-core tokens */
#WOW_CANVAS.wow-canvas.light {
  --bg:         var(--wow-white);
  --text:       var(--wow-darker);
  --text-muted: var(--wow-dark);
  --bg-1:       var(--wow-lighter);
  --bg-2:       var(--wow-light);
  --border:     var(--wow-mid);
  --fresh-1:    var(--wow-fresh-1);
  --fresh-2:    var(--wow-fresh-2);
  --warm-1:     var(--wow-warm-1);
  --warm-2:     var(--wow-warm-2);
}

#WOW_CANVAS.wow-canvas.dark {
  --bg:         var(--wow-black);
  --text:       var(--wow-lighter);
  --text-muted: var(--wow-light);
  --bg-1:       var(--wow-darker);
  --bg-2:       var(--wow-dark);
  --border:     var(--wow-mid);
  --fresh-1:    var(--wow-fresh-1);
  --fresh-2:    var(--wow-fresh-2);
  --warm-1:     var(--wow-warm-1);
  --warm-2:     var(--wow-warm-2);
}

/* Optional: add space between top of page and topbar */
#WOW_CANVAS .wow-topbar {
  margin-top: 30px;
}


/* 3) Global content rail (sections mount inside this) */
/* Center the rail and cap it */
#WOW_CANVAS .canvas-content {
  max-width: 801px;
  width: 100%;
  margin-left: auto;   /* center */
  margin-right: auto;  /* center */
}

/* Breakpoints for the rail */
@media (max-width: 480px) {
  #WOW_CANVAS .canvas-content {
    width: 100%;
    max-width: none;        /* full-bleed on small phones */
  }
}

@media (min-width: 481px) and (max-width: 801px) {
  #WOW_CANVAS .canvas-content {
    width: 95%;             /* proportional rail */
  }
}

/* On wide screens, let max-width control the size */
@media (min-width: 802px) {
  #WOW_CANVAS .canvas-content {
   width: 100%;   
    max-width: 801px;
    margin-left: auto;
    margin-right: auto;
  }
}