/* p-objects.css - Page elements                             13 February 2020 */

/* Required global custom properties (variables):
    --spacing           - default margin / padding
    --neg-spacing       - negative value for --spacing
    --border            - default border properties
    --border-radius     - default border radius
    --box-shadow        - default box-shadow properties
    --bg-object         - default background colour for some objects
    --fig-bg            - default figure background
    --fig-bdr           - default figure border
    --fig-rad           - default figure radius
    --fig-shad          - default figure shadow
    --figcap-font-size  - default figcaption font size
    --fbox-margin       - default margin around flex boxes (don't collapse)
    --fbox-space-more   - space to add to --fbox-margin to give --spacing
    --fbox-space-less   - space equal to minus --fbox-margin 
    --w-multicol        - default minimum width for multiple columns

/* -------------------------------------------------------------------------- */


/* Apply appropriate margins to floated objects                               */
.floatl {
  float: left;
  margin-right: var(--spacing);
  margin-bottom: calc(var(--spacing) / 2);
}
.floatr {
  float: right;
  margin-left: var(--spacing);
  margin-bottom: calc(var(--spacing) / 2);
}
.cleared {
  clear: both;
}

/* ***** Figure - default setup *****
/* Figure is centred with standard bottom margin
/* Allows for included div with top border, for extra text
/* If floated, retricts width to 66%
/* By default has background, border, radius and shadow,
                                                  all set in global variables */
figure {
  display: table;                    /* restrict width to that of its content */
  margin: 0 auto var(--spacing);             /* center within available space */
  break-inside: avoid;               /* keep together at page or column break */
  --bg: var(--fig-bg);
  --bdr: var(--fig-bdr);
  --rad: var(--fig-rad);
  --shad: var(--fig-shad);
  background: var(--bg);
  border: var(--bdr);
  border-radius: var(--rad);
  box-shadow: var(--shad);
}
figure > *:first-child {
  border-top-left-radius: var(--rad);
  border-top-right-radius: var(--rad);
}
figure > *:last-child {
  border-bottom-left-radius: var(--rad);
  border-bottom-right-radius: var(--rad);
}
figure.floatl,
figure.floatr {
  max-width: 66%;
}
figure img {
  display: block;                                          /* enable centring */
  margin: 0 auto;                                       /* centre if possible */
  max-width: 100%;                       /* shrink if required, don't stretch */
}
figcaption {
  text-align: center;
  font-size: var(--figcap-font-size);
  line-height: 1.2;
  padding: calc(var(--spacing) / 3) calc(var(--spacing) / 3 * 2);
}
figure > div {
  padding: var(--spacing) var(--spacing) 0;
  border-top: var(--border);
}


/*  Modified divs - .container, .box, .panel, .card etc                       */

.margined { margin: 0 0 var(--spacing); }
.padded { padding: var(--spacing) var(--spacing) 0; }

/* stretch width of item to edge of containing item which has padding         */
.overpad {
  margin-left: var(--neg-spacing);
  margin-right: var(--neg-spacing);
}

.container,
.box,
.panel,
.card,
.boxes > *,
.panels > *,
.cards > * {
  margin: 0 0 var(--spacing);
  padding: var(--spacing) var(--spacing) 0;
}
.boxes > figure,
.panels > figure,
.cards > figure {
  padding: 0;
}

/* .box - container with a border */
.box,
.boxes > *,
.bordered {
  --bdr: var(--border);
  border: var(--bdr);
}

/* .panel - container with a background                                       */
.panel,
.panels > * {
  --bg: var(--bg-object);
  background: var(--bg);
}

/* .card - panel with a shadow                                                */
.card,
.cards > * {
  --bg: var(--bg-object);
  --shad: var(--box-shadow);
  background: var(--bg);
  box-shadow: var(--shad);
}

/* .radiused - apply border-radius */
.radiused,
.fb-radiused > * {
  --rad: var(--border-radius);
  border-radius: var(--rad);
}
figure.radiused > *:first-child,
.fb-radiused > figure > *:first-child {
  border-top-left-radius: var(--rad);
  border-top-right-radius: var(--rad);
}
figure.radiused > *:last-child,
.fb-radiused > figure > *:last-child {
  border-bottom-left-radius: var(--rad);
  border-bottom-right-radius: var(--rad);
}

/* Remove effects */
.no-border { --bdr: none; }
.no-radius { --rad: 0; }
.no-background { --bg: transparent; }
.no-shadow { --shad: none; }


/* -------------------------------------------------------------------------- */
/*              ***** Flexbox *****                                           */
/* minimum setup for centre-justified flexboxes                               */
.flexmode {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--fbox-space-more);
  margin-top: var(--fbox-space-less);
}
.flexmode > * {
  margin: var(--fbox-margin);
  padding: var(--spacing) var(--spacing) 0;
}
.flexmode > figure {
  display: block;                                   /* cancel display: table; */
  padding: 0;

}
/* If flex container is inside a padded item, adjust the margins              */
.padded > .flexmode,
.container > .flexmode {
  margin: var(--fbox-space-less);
  margin-bottom: var(--fbox-space-more);
}
  
/* if box, panel or card applied to flex container, adjust spacing to suit    */
.flexmode.panel,
.flexmode.box,
.flexmode.card {
  margin: 0 0 var(--spacing);
  padding: var(--fbox-space-more);
}

/* -------------------------------------------------------------------------- */
/* ***** Multiple columns ***** */  /* not used yet? */

.columns {
  --w-cols: var(--w-multicol);  /* integers will be treated as no. of columns */
  columns: var(--w-cols);
  column-gap: var(--spacing);
  column-rule: var(--border);
  margin-bottom: var(--spacing);
}
.columns > *:first-child {
  margin-top: 0; /* remove any top margin from headings */
  }
.columns > *:last-child {
  margin-bottom: 0; /* remove any bottom margin from the last item */
  }
.columns  + .columns {
  padding-top: var(--spacing);
  border-top: var(--border);    /* not req'd on mobile screens !!!!!     */
}                               /* so only apply when needed (@media) ?? */