/*

stylesheet.css

Stylesheet for the national grid live status site

Created by Kate Morley - http://iamkate.com/ - and released under the terms of
the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

:root{
  --width     : 36;
  --rounding  : 4px;
  --accent    : #696;
  --grey      : #eee;
  --dark-grey : #ddd;
}

@font-face{
  font-family : 'Proza';
  font-weight : 300;
  src         : url('/proza-light.woff2') format('woff2'),
                url('/proza-light.woff') format('woff');
}

@font-face{
  font-family : 'Proza';
  font-weight : 400;
  src         : url('/proza-regular.woff2') format('woff2'),
                url('/proza-regular.woff') format('woff');
}

html{
  height                   : 100%;
  font-family              : Proza,sans-serif;
  font-weight              : 300;
  font-size                : clamp(16px, calc(100vw / var(--width)), 20px);
  font-feature-settings    : 'lnum','tnum';
  line-height              : 1.5;
  -webkit-text-size-adjust : none;
  text-size-adjust         : none;
}

body{
  display            : grid;
  grid-template-rows : max-content 1fr max-content;
  height             : 100%;
  margin             : 0;
  background         : var(--accent);
  color              : #fff;
}


header,
footer{
  box-sizing  : border-box;
  font-weight : 400;
}

header{
  display               : grid;
  grid-template-columns : 30px calc(min(100vw, 1320px) - 60px - 2rem) 30px;
  justify-content       : center;
  align-items           : center;
  padding               : 0 1rem;
}

header > a{
  line-height : 24px;
}

header svg{
  height         : 24px;
  vertical-align : bottom;
  fill           : #fff;
}

nav ul{
  display           : grid;
  grid-auto-flow    : column;
  grid-auto-columns : min-content;
  justify-content   : center;
  margin            : 0;
  padding           : 1rem;
}

nav li{
  display : block;
}

nav a{
  display         : block;
  padding         : 0 0.5rem;
  border-radius   : 1rem;
  color           : inherit;
  text-decoration : none;
}

nav a.section{
  background : #fff;
  color      : var(--accent);
}

main{
  padding    : 1rem 1rem 0;
  background : var(--grey);
  color      : #000;
  font       : 300 16px/1.25 Proza, sans-serif;
}

#container{
  max-width : 1280px;
  margin    : 0 auto;
}

footer{
  padding    : 1rem;
  text-align : center;
}

/* boxes **********************************************************************/

.box{
  box-sizing    : border-box;
  overflow      : hidden;
  margin        : 0 0 1rem;
  padding       : 16px;
  border-radius : var(--rounding);
  background    : white;
}

h1,
h2{
  margin                  : -16px -16px 16px;
  padding                 : 10px 16px;
  border-top-left-radius  : 1px;
  border-top-right-radius : 1px;
  background              : #aaa;
  color                   : #fff;
  font-weight             : normal;
}

/* introduction ***************************************************************/

#introduction h1{
  font-size : 2em;
}

#introduction p{
  margin      : 0;
  padding     : 0;
  font-size   : 18px;
  line-height : 24px;
}

#introduction a{
  color                     : var(--accent);
  text-decoration-thickness : 1px;
  text-underline-offset     : 2px;
}

#introduction a:visited{
  color : inherit;
}

/* energy boxes ***************************************************************/

#energyBoxes{
  display               : grid;
  grid-template-columns : 400px 1fr 1fr;
  grid-template-areas   :
    "production brownEnergy greenEnergy"
    "production otherEnergy interconnectors";
  gap                   : 1rem;
  margin-bottom         : 1rem;
}

@media screen and (max-width:1199px){

  #energyBoxes{
    grid-template-columns: 1fr 1fr;
    grid-template-areas   :
      "production brownEnergy"
      "production greenEnergy"
      "interconnectors otherEnergy";
  }

}

@media screen and (max-width:779px){

  #energyBoxes{
    grid-template-columns: 1fr;
    grid-template-areas   :
      "production"
      "greenEnergy"
      "brownEnergy"
      "otherEnergy"
      "interconnectors";
  }

}

#energyBoxes .box{
  margin : 0;
}

#production{
  grid-area : production;
}

#brownEnergy{
  grid-area : brownEnergy;
}

#greenEnergy{
  grid-area : greenEnergy;
}

#otherEnergy{
  grid-area : otherEnergy;
}

#interconnectors{
  grid-area : interconnectors;
}

#pieChartNow{
  max-width : 300px;
  margin    : 0 auto 12px;
}

/* energy box headers *********************************************************/

h2{
  font-size : 1.5em;
}

.unit{
  font-variant   : small-caps;
  text-transform : lowercase;
}

/* energy box contents ********************************************************/

#energyBoxes table{
  width           : 100%;
  margin          : 0;
  border-collapse : collapse;
}

#energyBoxes td{
  vertical-align : top;
}

#energyBoxes td:nth-child(1){
  padding : 0 0 16px;
}

#energyBoxes td:nth-child(2){
  padding : 0 0 16px 8px;
}

#energyBoxes td:nth-child(3),
#energyBoxes td:nth-child(4){
  padding : 0 0 16px 12px;
}

#energyBoxes td:nth-child(1),
#energyBoxes td:nth-child(3),
#energyBoxes td:nth-child(4){
  width      : 0;
  text-align : right;
}

#energyBoxes td:nth-child(3):after{
  content        : 'GW';
  color          : #999;
  font-variant   : small-caps;
  text-transform : lowercase;
}

#energyBoxes td:nth-child(4):after{
  content : '%';
  color   : #999;
}

#energyBoxes tr:last-child td{
  padding-bottom : 0;
}

#energyBoxes .key{
  position   : relative;
  width      : 1em;
  height     : 1em;
  margin-top : 3px;
}

#interconnectors .key:after{
  content    : '';
  position   : absolute;
  top        : 2px;
  bottom     : 2px;
  left       : 2px;
  right      : 2px;
  background : #fff;
}

.information{
  display       : inline-block;
  width         : 1em;
  height        : 1em;
  border-radius : 50%;
  background    : #9e9e9e;
  color         : #fff;
  line-height   : 1em;
  text-align    : center;
  cursor        : pointer;
}

.information:after{
  content : 'i';
}

/* energy box and key colours *************************************************/

.production{
  background : #000000;
}

.generation{
  background : #999;
}

#brownEnergy h2,
.brown,
.fossil-fuels{
  background : #d32f2f;
}

#greenEnergy h2,
.green,
.renewables{
  background : #7cb342;
}

#otherEnergy h2,
.unknown,
.other-energy{
  background : #0288d1;
}

.interconnectors{
  background : #9e9e9e;
}

/* type colours ***************************************************************/

.coal{
  background : #b71c1c;
}

.oil{
  background : #f44336;
}

.ocgt{
  background : #ff7043;
}

.ccgt{
  background : #fb8c00;
}

.solar{
  background : #ffc107;
}

.wind{
  background : #4caf50;
}

.hydro{
  background : #00acc1;
}

.pumped{
  background : #2196f3;
}

.nuclear{
  background : #5c6bc0;
}

.biomass{
  background : #ab47bc;
}

.other{
  background : #e91e63;
}

.hvdcMoyle{
  background : #e57373;
}

.hvdcCrossChannel{
  background : #ffb74d;
}

.britned{
  background : #dce775;
}

.eastWest{
  background : #81c784;
}

.nemoLink{
  background : #4dd0e1;
}

.ifa2{
  background : #7986cb;
}

.nsl{
  background : #ba68c8;
}

/* additional boxes ***********************************************************/

#additionalBoxes{
  clear : left;
}

#additionalBoxes h2{
  padding   : 8px 16px;
  font-size : 1.5em;
}

/* graphs *********************************************************************/

.graphs{
  display               : grid;
  grid-template-columns : 1fr 1fr 1fr 1fr;
  gap                   : 1rem;
}

.graph{
  overflow : hidden;
}

@media screen and (max-width:839px){

  .graphs{
    grid-template-columns : 1fr 1fr;
  }

}

@media screen and (max-width:439px){

  .graphs{
    grid-template-columns : 1fr;
  }

}

h3{
  margin      : 12px 16px;
  padding     : 0;
  font-size   : 1em;
  font-weight : normal;
  text-align  : center;
}

h4{
  margin      : 0 16px 12px;
  padding     : 0;
  font-size   : 0.857em;
  font-weight : normal;
  text-align  : center;
}

.pieChart,
.lineGraph{
  margin : 0 0 12px;
}

#additionalBoxes .key{
  clear : left;
  float : left;
}

#additionalBoxes .key h3{
  margin     : 0 0 4px;
  text-align : left;
}

#additionalBoxes .key div{
  float     : left;
  margin    : 0 18px 6px 0;
  font-size : 0.857em;
}

#additionalBoxes .key span{
  float   : left;
  display : block;
  width   : 16px;
  height  : 16px;
  margin  : 1px 6px 0 0;
}

.clearFloats{
  clear : left;
}

/* messages *******************************************************************/

#message{
  display         : flex;
  align-items     : center;
  justify-content : center;
  position        : fixed;
  top             : 0;
  bottom          : 0;
  left            : 0;
  right           : 0;
  z-index         : 10;
  background      : rgba(0,0,0,0.5);
}

#message > div{
  max-width     : 480px;
  margin        : 32px;
  padding       : 1.33em;
  border-radius : 2px;
  background    : #fff;
  box-shadow    : 0 12px 25px rgba(0,0,0,0.3);
}

#message > div > div{
  margin    : 0 0 0.75em;
  font-size : 1.5em;
}

#message > div > div:first-child{
  float       : right;
  width       : 2.33em;
  margin      : -0.5em;
  line-height : 2.33em;
  text-align  : center;
  cursor      : pointer;
}

#message > div > div:first-child:after{
  content : '✖';
}

/* pie charts *****************************************************************/

.pie-chart{
  display   : grid;
  max-width : 300px;
  margin    : 0 auto;
  font-size : 16px;
}

.pie-chart > div,
.pie-chart > svg{
  grid-row    : 1 / 2;
  grid-column : 1 / 2;
}

.pie-chart > div{
  display       : grid;
  justify-items : center;
  align-content : center;
  text-align    : center;
}

.pie-chart > div + div{
  opacity : 0;
}

.pie-chart > div > div:nth-child(2){
  display : block;
  width   : 35%;
  height  : 2px;
  margin  : 4px 0;
}

.pie-chart > svg{
  z-index : 1;
}

.pie-chart > svg > path{
  stroke        : #fff;
  stroke-width  : 2;
  vector-effect : non-scaling-stroke;
}

/* fill colours ***************************************************************/

path.coal{
  fill : #b71c1c;
}

path.oil{
  fill : #f44336;
}

path.ocgt{
  fill : #ff7043;
}

path.ccgt{
  fill : #fb8c00;
}

path.solar{
  fill : #ffc107;
}

path.wind{
  fill : #4caf50;
}

path.hydro{
  fill : #00acc1;
}

path.pumped{
  fill : #2196f3;
}

path.nuclear{
  fill : #5c6bc0;
}

path.biomass{
  fill : #ab47bc;
}

path.other{
  fill : #e91e63;
}

path.fossil-fuels{
  fill : #d32f2f;
}

path.renewables{
  fill : #7cb342;
}

path.other-energy{
  fill : #0288d1;
}