/*
Learn HTML & CSS:
- HTML Reference - A free visual guide to HTML: https://htmlreference.io
- CSS Reference - A free visual guide to CSS: https://cssreference.io
- HTML5 Element Index: http://html5doctor.com/#glossary
- Marksheet: A free HTML & CSS tutorial: https://marksheet.io
- Learn to Code HTML & CSS https://learn.shayhowe.com/html-css/
*/

/* --- webfonts --- */

/*
- Free Webfonts: https://fonts.google.com
- Webfont Generator: https://www.creativefabrica.com/webfont-generator/
- Webfont Test: http://webfont-test.com
*/

/*
- Blokk Font: http://www.blokkfont.com
- Flow: https://danross.co/flow/
*/

@font-face {
  font-family: Blokk;
  src: url("../fonts/blokk/BLOKKNeue-Regular.woff2") format("woff2"),
       url("../fonts/blokk/BLOKKNeue-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

/* --- resets --- */

/*
1. Correct the line height in all browsers.
https://github.com/necolas/normalize.css/blob/fc091cce1534909334c1911709a39c22d406977b/normalize.css#L12
2. Set font-family to sans-serif instead of serif.
*/

html {
  font: 100%/1.15 sans-serif; /* 1 / 2 */
}

body {
  max-width: 60rem;
  padding: 1rem;
  margin: 0 auto;
}

/*
Form element resets courtesy of:
- https://github.com/necolas/normalize.css/blob/master/normalize.css
*/

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

input,
select {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/*
Show the overflow in IE.
1. Show the overflow in Edge.
*/

input { /* 1 */
  overflow: visible;
}

/*
Remove the inheritance of text transform in Edge, Firefox, and IE.
1. Remove the inheritance of text transform in Firefox.
*/

select { /* 1 */
  text-transform: none;
}

/* --- flexible/fluid images --- */

/*
1. https://alistapart.com/article/fluid-images/
2. Override width and height values on HTML img tag (if present)
3. Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers:
https://github.com/h5bp/html5-boilerplate/issues/440
4. Remove the border on images inside links in IE 10.
*/

img {
  width: auto; /* 2 */
  max-width: 100%; /* 1 */
  height: auto; /* 2 */
  vertical-align: middle; /* 3 */
  border-style: none; /* 4 */
}

/* --- FPO images --- */

img.fpo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background: #999;
}

/* --- toggle greeked text --- */

/*
1. CSS Font Stacks: https://www.cssfontstack.com
*/

#toggle-greeking:checked ~ main * {
  font-family: Blokk, "Courier New", monospace; /* 1 */
  color: #999;
}

.select-label,
.toggle-label {
  display: inline-block;
  font-family: monospace;
  cursor: pointer;
}

/* --- select layout --- */

/* hide in single-column layout breakpoint */

.select-layout {
  display: none;
  margin-left: 1.5rem;
}

.select-layout select {
  font-family: monospace;
}

/* show in multi-column layout breakpoint */

/* ↓ start media query */

@media (min-width: 44em) {

.select-layout {
  display: inline;
}

}

/* ↑ end media query */

main {
  padding-top: 1.5rem;
  border-top: 1px dashed #ccc;
  margin-top: 1rem;
}

/* --- general typography --- */

header {
  margin-bottom: 1.5rem;
}

h1 {
  margin-top: 0;
  margin-bottom: 0;
}

p {
  line-height: 1.35;
  margin-top: 0;
}

p.subhead {
  font-size: 1.8em;
  line-height: 1.2;
  margin-top: 1rem;
  margin-bottom: 0;
}

p.byline {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

img.fpo {
  margin-bottom: 1rem;
}

/* --- named grid areas --- */

/*
- Learn CSS Grid: https://learncssgrid.com
- CSS Grid Layout Terminology, Explained: https://bitsofco.de/css-grid-terminology/
- Grid by Example: https://gridbyexample.com
*/

#image-1 {
  grid-area: image-1;
}

#header-1 {
  grid-area: header-1;
}

#text-1 {
  grid-area: text-1;
}

/* ↓ start media query */

@media (min-width: 44em) {

/*
1. Resize typography for multi-column layout
*/

body {
  font-size: 125%; /* 1 */
}

/* --- grid layout / 3 col --- */

/*
1. The fr unit
https://mozilladevelopers.github.io/playground/css-grid/04-fr-unit/
*/

.grid-3-col {
  display: grid;
  max-width: 60rem;
  grid-template-rows: auto; /* height of rows */
  grid-template-columns: repeat(3, 1fr); /* the same as: 1fr 1fr 1fr / 1 */
  grid-gap: 0 1.5rem;
  margin: 0 auto;
}

/* --- layouts --- */

/* layout 1 */

.layout-v1 {
  grid-template-rows: 24rem auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    "image-1    image-1   image-1" /* 24rem height */
    "header-1   text-1    text-1"; /* auto height */
}

/* layout 2 */

.layout-v2 {
  grid-template-areas:
    "image-1    image-1   header-1" /* auto height */
    "image-1    image-1   text-1"; /* auto height */
}

/* layout 3 */

.layout-v3 {
  grid-template-rows: 24rem auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    "header-1   image-1   image-1" /* 24rem height */
    "text-1     text-1    text-1"; /* auto height */
}

/*
1. Flow text into 3 columns with CSS Multi-column Layout.
https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/
*/

.layout-v3 #text-1 {
  columns: 3; /* 1 */
}

/* layout 4 */

.layout-v4 {
  grid-template-rows: 24rem auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    ".            image-1   image-1" /* 24rem height */
    "header-1     text-1    text-1"; /* auto height */
}

/*
1. Vertically offset grid-area.
Understanding and Using CSS Positions:
https://zellwk.com/blog/css-positions/
*/

.layout-v4 #header-1 {
  position: relative; /* 1 */
  top: -32%; /* 1 */
}

/* layout 5 */

.layout-v5 {
  grid-template-rows: 18rem auto;
  grid-gap: 1.5rem;
  grid-template-areas:
    "header-1   text-1    image-1" /* 24rem height */
    ".          text-1    ."; /* auto height */
}

}

/* ↑ end media query */