/* p-3col-flex.css - 3-column layout based on Flexbox        9 February 2020 */
/*        section 3 of useful.css

/* Required global custom properties (variables):
    --w-leftcol    - width of left-hand column
    --w-rightcol   - width of right-hand column
/* -------------------------------------------------------------------------- */


#hamleft { float: left; }                    /* button to trigger left column */
#hamright { float: right; }                 /* button to trigger right column */
#middlerow { display:flex; }
#midcol { flex: auto; }                            /* grow/shrink as required */
#leftcol { order: -1; }                                         /* force left */
#rightcol { order: 1; }                                        /* force right */
#leftcol,
#rightcol { position: relative; }
#leftinner, #rightinner {
  position: absolute;                               /* ref leftcol & rightcol */
  top: 0;
}
#leftinner {
  width: var(--w-leftcol);
  left: calc(0rem - var(--w-leftcol));         /* position off-screen to left */
}
#rightinner {
  width: var(--w-rightcol);
  right: calc(0rem - var(--w-rightcol));      /* position off-screen to right */
}
#leftinner.show { left: 0; }
#rightinner.show { right: 0; }

/*          @media ( min-width etc. can't use calcs & vars !!!!!!!           */
@media (min-width: 40rem) {                    /*  = var(--line-length-max)  */
  body.left #leftinner,
  body.left-right #leftinner {
    position: relative;
    left: 0;
  }
  body.right #rightinner,
  body.right-left #rightinner {
    position: relative;
    right: 0;
  }
  body.left #hamleft,
  body.left-right #hamleft,
  body.right #hamright,
  body.right-left #hamright {
    display: none;
  }
}

@media (min-width: 55rem) {
                       /* = calc(var(--line-length-max) + var(--w-leftcol)) */
  body.left-right #rightinner {
    position: relative;
    right: 0;
  }
  body.left-right #hamright {
    display: none;
  }
}

@media (min-width: 52rem) {
                     /* = calc(var(--line-length-max) + var(--w-rightcol)) */
  body.right-left #leftinner {
    position: relative;
    left: 0;
  }
  body.right-left #hamleft {
    display: none;
  }
}

@media print {
  #hamleft,
  #hamright,
  #leftcol,
  #rightcol {
    display: none !important;
  }
}