/* p-useful.css - miscellaneous useful stuff                    13 February 2020

/* Required global custom properties (variables):
    --spacing       - default margin / padding
    --border        - default border

/* -------------------------------------------------------------------------- */
/* Un-altered opinionated extracts from html5-boilerplate's main.css
/*    last extracted from main.css 2.0.0 in boilerplate v7.3.0

/* Remove the gap between audio, canvas, iframes,
/* images, videos and the bottom of their containers:
audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* Hide visually and from screen readers */
.hidden { display: none !important; }

/* Contain floats: h5bp.com/q  */
.clearfix:before, 
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

@media print {                                                /* Print styles */
  *,
  *:before,
  *:after {
      background: transparent !important;
      box-shadow: none !important;
      text-shadow: none !important;
  }

  a,
  a:visited { text-decoration: underline; }
  
  a[href^="http"]:after { content: " (" attr(href) ")"; }

  abbr[title]:after { content: " (" attr(title) ")"; }

  /* Don't show links that are fragment identifiers,
  /* or use the `javascript:` pseudo protocol */
  a[href^="#"]:after,
  a[href^="javascript:"]:after { content: ""; }

  pre { white-space: pre-wrap !important; }
  pre,
  blockquote {
      border: 1px solid #999;
      page-break-inside: avoid;
  }

  /* Printing Tables */
  thead { display: table-header-group; }

  tr,
  img { page-break-inside: avoid; }

  p,
  h2,
  h3 { orphans: 3; widows: 3; }

  h2,
  h3 { page-break-after: avoid; }
}

/* -------------------------------------------------------------------------- */
/* My useful bits and pieces */

* { box-sizing: border-box; }

/* avoid horizontal shift on short pages when centred by forcing a scroll-bar */
html { overflow-y: scroll; }

/* A better looking default horizontal rule -
  from html5-boilerplate but with variables to be consistant with site styles */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: var(--border);
  padding: 0;
  margin: 0 0 var(--spacing);
}

/* Margin-collapse quirk stops background extending to the edge if there is no
/*   padding. This fix disables margin-collapse at top and bottom, but has quirk
/*   with flexbox. Alternative is 0.1px padding which is harder to control.   */
div::before, div::after,
section::before, section::after, 
article::before, article::after,
header::before, header::after,
figure::before, figure::after, 
aside::before, aside::after {
  content: ' ';
  display: table;
}
/* NOTE - In flexbox containers include code like: */
.flexmode::after, 
.flexmode::before {
  display: none;      /* remove margin-collapse quirk fix - see p-useful.css */ 
}

/* ***** Backdrop if required ***** */
#backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* Hyperlinks */
a       { text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { outline: thin dotted; }
a:hover a:active { outline: 0; }
a:visited { color: #00E; }