/*
 * Applies a fluid font-size to everything
 *	primarily scaling the 'root' font-size (on the html element) proportional to the width
 *	also defining header sizes which differ less on smaller screens
 * 
 */


/* minimumn standard font size */
html{
	font-size: 16px;
	line-height: 1.5;
}

body{
	font-size: 1em;
}

/* An explanation of the calculations taking place below
 *	For each font element a minimum and a maximum font-size has been selected according to a modular scale
 *			[modular scale: heading sizes follow a geometric progession (with common ratio p)
 *											from h5 at the standard font-size defined above (s)
 *											up to h1 at  p^4 * s
 *											down to h6 at p^(-1) * s]
 *	The common ratio of our modular scale is fluid dependent on the the width of the viewport (the window)
 *			at the 'minimum' view-width (vw) the common ratio p is set at 1.125
 *			at the 'maximum' view-width the common ratio p is 1.333
 *			(here 'maximum' and 'minimum' mean the sizes at which the text should stop resizing rather than
 *				some kind of limit on the window size in general)
 *	
 * Given these parameters we can force each text element to resize between their maximum (max-fs) and minimum (min-fs),
 *	between the max and min view-widths (max-vw, min-vw) using the following css
 *			font-size: calc(min-fs + (max-fs - min-fs) * (100vw - min-vw) / (max-vw - min-vw))
 *						 eg: calc( 1em   + (  3    -    1  ) * (100vw -  30em ) / (  80   -   30  ))
 *	Note where there are and aren't units, for efficiency I will do the unitless calculations before writing out the code
 *	giving something in the form:
 *								 calc(a + b * (100vw - c));
 *	
 *	In the comment block below is some SASS which would do this for us but until that is supported here, it's not much use
 */
/* SOME SASS to do fluid modular scale
 *  
 * 	$mod_1: 1.125;
		$mod_2: 1.333;
		
		@function strip-unit($value) {
		  @return $value / ($value * 0 + 1);
		}
		
		@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
		  $u1: unit($min-vw);
		  $u2: unit($max-vw);
		  $u3: unit($min-font-size);
		  $u4: unit($max-font-size);
		
		  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
		    & {
		      font-size: $min-font-size;
		      @media screen and (min-width: $min-vw) {
		        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
		      }
		
		      @media screen and (min-width: $max-vw) {
		        font-size: $max-font-size;
		      }
		    }
		  } @else {
		    @error "Detected mixed units. Please use the same units for all parameters.";
		  }
		}
		
		
		h1,h2,h3,h4,h5,h6 { padding: 0; margin: 0.5rem 0; line-height: 1.5;}
		
		.mod_scale_fluid{
			h1{ font-size: $mod_1*$mod_1*$mod_1*$mod_1 *1rem}
			h2{ font-size: $mod_1*$mod_1*$mod_1 *1rem}
			h3{ font-size: $mod_1*$mod_1 *1rem}
			h4{ font-size: $mod_1 *1rem}
			h5{ font-size: 1rem}
			h6{ font-size: 1/$mod_1 *1rem}
		
			h1{ 
				@include fluid-type(37.5rem, 80rem, $mod_1*$mod_1*$mod_1*$mod_1 *1rem, $mod_2*$mod_2*$mod_2*$mod_2 *1rem);
			}
			
			h2{ 
				@include fluid-type(37.5rem, 80rem, $mod_1*$mod_1*$mod_1 *1rem, $mod_2*$mod_2*$mod_2 *1rem);
			}
			
			h3{ 
				@include fluid-type(37.5rem, 80rem, $mod_1*$mod_1 *1rem, $mod_2*$mod_2 *1rem);
			}
			
			h4{ 
				@include fluid-type(37.5rem, 80rem, $mod_1 *1rem, $mod_2 *1rem);
			}
			
			h5{ 
				@include fluid-type(37.5rem, 80rem, 1rem, 1rem);
			}
			
			h6{	
				@include fluid-type(37.5rem, 80rem, 1/$mod_1 *1rem, 1/$mod_2 *1rem);
			}
			
		}
 */

/* mimimun header font sizes as proportions of the standard font-size*/
h1, .h1{
 font-size: 1.602em;
}

h2, .h2{
 font-size: 1.424em;
}

h3, .h3{
 font-size: 1.266em;
}

h4, .h4{
 font-size: 1.125em;
}

h5, .h5{
 font-size: 1em;
}

h6, .h6{
 font-size: 0.889em;
}

/* between 400px and 2400px screen width, the font size scales smoothly between the minimum (16px) and the max (35px)
 *  the header proportions also scale up so that there is a greater difference in header sizes for bigger screens
 */
@media screen and (min-width: 400px){
	html{
		font-size: calc(16px + 19 * (100vw - 400px) / 2000);
	}

	h1, .h1{
	 font-size: calc(1.602em + 0.036 * (100vw - 25rem));
	}
	
	h2, .h2{
	 font-size: calc(1.424em + 0.022 * (100vw - 25rem));
	}
	
	h3, .h3{
	 font-size: calc(1.266em + 0.012 * (100vw - 25rem));
	}
	
	h4, .h4{
	 font-size: calc(1.125em + 0.005 * (100vw - 25rem));
	}
	
	h5, .h5{
	 font-size: calc(1em + 0 * (100vw - 25rem));
	}
	
	h6, .h6{
	 font-size: calc(0.889em + -0.003 * (100vw - 25rem));
	}
}

/* maximum font sizes */
@media screen and (min-width: 2400px){
	html{
		font-size: 35px;
	}

	h1, .h1{
	 font-size: 3.157em;
	}
	
	h2, .h2{
	 font-size: 2.369em;
	}
	
	h3, .h3{
	 font-size: 1.777em;
	}
	
	h4, .h4{
	 font-size: 1.333em;
	}
	
	h5, .h5{
	 font-size: 1em;
	}
	
	h6, .h6{
	 font-size: 0.75em;
	}
}




/* font sizes inside text block elements need to be adjusted in the fluid scaling range of screen widths
 *  this is due to the font size changes applied to these classes in layout.css
 */
@media screen and (min-width: 400px) and (max-width: 2400px){
	.text-block-960{
		font-size: calc(16px + 12 * (80vw - 320px) / 1600);
	}
	
	.text-block-840{
		font-size: calc(16px + 10.25 * (70vw - 280px) / 1400);
	}
	
	.text-block-720{
		font-size: calc(16px + 8.5 * (60vw - 240px) / 1200);
	}
	
	.text-block-600{
		font-size: calc(16px + 6.75 * (50vw - 200px) / 1000);
	}
	
	.text-block-480{
		font-size: calc(16px + 5 * (40vw - 160px) / 800);
	}
	
	.text-block-360{
		font-size: calc(16px + 3.25 * (30vw - 120px) / 600);
	}
	
	.text-block-240{
		font-size: calc(16px + 1.5 * (20vw - 80px) / 400);
	}
}

@media screen and (min-width: 1400px) {
	.text-block-960{
		font-size: 0.8em;
	}

	.text-block-840{
		font-size: 0.75em;
	}

	.text-block-720{
		font-size: 0.7em;
	}

	.text-block-600{
		font-size: 0.65em;
	}

	.text-block-480{
		font-size: 0.6em;
	}

	.text-block-360{
		font-size: 0.55em;
	}

	.text-block-240{
		font-size: 0.5em;
	}}