/* instrument-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  src: url('type/instrument-sans-v1-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400;
  src: url('type/instrument-sans-v1-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  src: url('type/instrument-sans-v1-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* instrument-sans-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 600;
  src: url('type/instrument-sans-v1-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{
	margin: 0;
	padding: 0;
	visibility: initial;/* once CSS is loaded, reset visibility to normal */
}

body,html{
	background-color: var(--bgColour);
	font-family: 'Instrument Sans', sans-serif;
	color: var(--textColour);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	flex-direction: row; /* default: side-by-side */
	--textColour: #fff;
	--bgColour: #0F4239;
	--bgLightColour: #fff;
	--borderColour: #061a16;
	overflow-x: hidden;/* hotfix to prevent side scrolling from any elements pushing out */
}

#pitchDiagram, #calculationsBox{
	flex: 1;/* ensure even spacing */
	max-width: 1000px;
}

#pitchDiagram{
	position: relative;
	width: 50vw;
	margin-left: 3vw;
	max-height: 100vh;/* max height so diagram does not overflow and create scroll */
	aspect-ratio: 1 / 1;
	background-color: rgba(0, 175, 175, 0.7);
	overflow: hidden;
}
#calculationsBox{
	padding: 0 3vw;
	max-height: 100vh;/* max height ensures container goes into middle when screen is large, otherwise 100vh will always keep content on top */
	overflow-y: scroll;/* allow text to scroll when box is constrained on small screens */
}

header, footer{
	width: calc(100% - 14px);
 	margin: 0 7px;
}
header{
	padding: 20px 0 5px 0;
	text-align: center;
}
footer{
	padding: 20px 0;
}

a{
	color: var(--textColour);
}

a.social-link{
	text-decoration: none;
	margin-right: 10px;
	display: block;
	padding: 5px 0;
}
a.social-link:before{
	padding-right: 25px;
	content: " ";
	background-repeat: no-repeat;
	background-size: contain!important;
	background-position: left!important;
}
a.insta:before{
	background: url('icons/social-insta.svg') no-repeat;
}
a.tiktok:before{
	background: url('icons/social-tiktok.svg') no-repeat;
}
a.email:before{
	background: url('icons/social-email.svg') no-repeat;
}
a.web:before{
	background: url('icons/social-web.svg') no-repeat;
}

p{
	margin-bottom: 5px;
}

/* Style for text pages */
#textblock{
	max-width: 600px;
	padding: 35px;
	font-size: 1.1em;
	line-height: 1.5em;
}
#textblock h1{
	line-height: 1em;
}
#textblock sup{
	line-height: 0;/* ensure sup doesn't create extra line spacing */
}
#textblock .nav-link{
	opacity: 0.8;
}

#textblock .nav-link + h1,
#textblock * + h2{
	margin-top: 15px;
}

#textblock img{
	width: 100%;
	margin: 10px 0;
}

#textblock ol > li,
#textblock p{
	margin-top: 15px;
	margin-bottom: 15px;
}

#triangleSVG{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	display: block;
	/* border-right: 3px dashed #777;
	border-bottom: 3px dashed #777; */
	background: url("data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0wIDEwMCAxMDAtMTAwdjEwMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=") no-repeat;/* preserveAspectRatio="none" is required in SVG for SVG to stretch */
	background-size: 100% 100%;/* firefox scaling bug fix */
	z-index: 98;
}

#halfspanToOverhang{
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	width: 0;
	border-top: 2px dashed var(--bgColour);
	border-left: 2px dashed var(--bgColour);
	box-sizing: border-box;/* set border inside  */
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 99;
}

.diagramlabel{
	display: block;
	font-size: 1.3em;
	padding: 3px;
	position: absolute;
}

#topLengthLabel{
	color: #fff;
	width: 100%;
	left: 40%;
	transform: translateX(-50%) translateY(-50%);
	text-align: center;
	z-index: 100;
}
#halfSpanWidthLabel{
	color: var(--bgColour);
	width: 100%;
	height: 20px;
	word-break: break-all;
	right: 0;
	top: 0;
	transform: translateY(-150%);
	text-align: center;
}
#ridgeboardHalfLabel{
	color: var(--bgColour);
	top: 0;
	right: 7px;
	transform: translateY(50%);
	text-align: right;
}
#topLengthLabel:before,
#halfSpanWidthLabel:before,
#ridgeboardHalfLabel:before{
	content: "← ";
}
#topLengthLabel:after{
	content: "mm total →";
}
#halfSpanWidthLabel:after{
	content: "mm half span→";
}
#ridgeboardHalfLabel:after{
	content: "mm ½ ridge";
}

.slider-container {
  display: flex;
  align-items: center;
  z-index: 100;
  position: absolute;
  top: 0;
  bottom: 0;
	padding: 10px;
  width: 30px;
  /* accomodate notch on iOS */
  @supports (margin-left: env(safe-area-inset-left)) {
    margin-left: calc(5px + env(safe-area-inset-left));
  }
}

#degValueInput{
	margin-left: 10px;
}

input[type="range"] {
	writing-mode: bt-lr; /* Bottom to top, left to right */
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	height: 100%;
	width: 20px;/* important for keeing element in place */
	background-color: var(--bgColour);/* firefox compatibility */
	border-radius: 15px;/* firefox compatibility */
}
input[type="range"]::-webkit-slider-thumb {
	width: 30px;
	height: 30px;
	background-color: #fff;
	cursor: pointer;
	border: none;
}
input[type="range"]::-moz-range-thumb {
	width: 20px;/* firefox compatibility, reduced 10px */
	height: 20px;/* firefox compatibility, reduced 10px */
	background-color: #fff;
	cursor: pointer;
	border: none;
	border-radius: 15px;/* firefox compatibility */
}
input[type="range"]::-webkit-slider-runnable-track{
	background-color: var(--bgColour);
	border-radius: 15px;
}

input[type="range"]::-moz-range-track {
	background-color: var(--bgColour);
	border-radius: 15px;
}

input.value-box{
	text-align: right;
	background: none;
	border: 2px solid var(--borderColour);
	padding: 2px 5px;
	margin-right: 5px;
	width: 80px;
	background-color: var(--bgLightColour);
	color: var(--borderColour);
}

input.value-box, .degree-symbol, .mm-symbol{
	font-size: 1.6em;
}
.mm-symbol{
	font-size: 1.2em;
}

/* remove input arrows  */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {/* Chrome, Safari, Edge, Opera */
	-webkit-appearance: none;
	margin: 0;
}
input[type=number] {/* Firefox */
	-moz-appearance: textfield;
}

/* Table styles  */

table {
  table-layout: auto;
  width: calc(100% - 14px);
  margin: 0 7px;
  border-collapse: collapse;/* shared table borders */
  text-align: left;
}

.textblock{
	width: calc(100% - 14px);
  margin: 10px 7px;
}

.textblock > *{
	margin-bottom: 5px;
}

.textblock p{
	line-height: 1.5em;
	padding: 0 7px;
}

table p{
	opacity: 0.8;/* let text blend a bit into the background if it's not the main table text */
}

table tr{
	border-bottom: 1px solid var(--borderColour);
	line-height: 1.5em;
}

table caption{
	margin-top: 10px;
	margin-bottom: 5px;
}

table tr th{/* cap widths at 1/3 to ensure cells don't flicker as values change widths */
	width: calc(100%/3);
}

th,
td {
  padding: 7px;
}
table th,
table tr td{/* dividing lines on right side of cells */
	border-right: 1px solid var(--borderColour);
}
table th:last-child,
table tr td:last-child{/* keep right borders off last cells, to keep cells airy */
	border-right: none;
}

header h1{
	font-size: 1.7em;
	margin-top: 20px;
}

/* table heading styles  */
table h2, .textblock h2{
	font-size: 1.1em;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-bottom: 2px solid var(--borderColour);
	padding: 10px 0;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

table h3, table h4{
	font-size: 1.1em;
}

/* Rafter diagram */
.roofMemberDiagramContainer{
	position: relative;
	margin: 10px 0;
	padding: 5px 0;
/* 	background-color: #f0f; */
	overflow: hidden;/* cut off diagram elements like the birdsmouth */
}

.roofMemberDiagramContainer > p{/* text for roof member labels */
	position: absolute;
	left: calc(3.5% + var(--cutRoofMemberEndSpacing));
	top: 50%;
	transform: translateY(-50%);
	color: var(--bgColour);
	text-align: left;
}

.roofMemberDiagramContainer > div:first-of-type{/* target the first element of the container to style rafter and hip pieces */
	margin: 10px var(--cutRoofMemberEndSpacing) 10px var(--cutRoofMemberEndSpacing);
/* 	border: 3px solid #ccc; */
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 3px;
	height: 33px;
}

/* apply the skew angle and widths to the roof members */
#rafterDiagram{
	transform: skewX(var(--rafterPlumbCutDegSkewX));
	width: calc(var(--rafterToHipLengthPercentage) - var(--cutRoofMemberEndSpacing)*2);
}
#hipDiagram{
	transform: skewX(var(--hipPlumbCutDegSkewX));
	width: calc(100% - var(--cutRoofMemberEndSpacing)*2);
}

.endCutLines, .birdsmouthCut{/* line to mark end of roof member */
	display: block;
	width: 1px;
/* 	background-color: #888; */
	border-left: 3px dotted #888;
	position: absolute;
	top: -100px;
	bottom: -100px;
}

.endCutLines{/* target left side cut */
	left: var(--cutRoofMemberEndSpacing);
}
.endCutLines + .endCutLines{/* target right side cut */
	left: initial;
}

#rafterDiagram + .endCutLines + .endCutLines{/* target right side cut */
	/* RAFTER right cut line, from right, margin with percentage of rafter to hip, to get match to --rafterToHipLengthPercentage */
	right: calc(var(--cutRoofMemberEndSpacing) + 100% - var(--rafterToHipLengthPercentage));
}

#hipDiagram + .endCutLines + .endCutLines{/* target right side cut */
	/* HIP right cut line, from right, hip is 100% so just use margin */
	right: var(--cutRoofMemberEndSpacing);
}

#rafterDiagram + .endCutLines + .endCutLines + .birdsmouthCut{
	/* RAFTER birdsmouth cut, from left, add margin and percentage of overhang to total to rafter to hip as rafter is percentage of hip */
	left: calc(var(--overhangToTotalToRafterToHipPercentage) + var(--cutRoofMemberEndSpacing));
}

#hipDiagram + .endCutLines + .endCutLines + .birdsmouthCut{
	/* HIP birdsmouth cut, from left, add margin and overhang to total as hip is 100% */
	left: calc(var(--overhangToTotalPercentage) + var(--cutRoofMemberEndSpacing));
}

/* adjust stack so lines stay behind text */
.endCutLines{z-index: 99;}
.birdsmouthCut{z-index: 100;}

.birdsmouthCut div{/* create birdsmouth cut effect */
	display: block;
	width: 100000%;
	height: 100px;/* sized so birdsmouth is created at any angle */
	background-color: var(--bgColour);/* blend birdsmouth into page background */
	position: absolute;
	left: 0;
	bottom: 50%;
	transform: translateY(105%);/* get element to sit so it is 1/3 height for the roof member diagram, reflecting 1/3 deep cut for birdmouth */
	right: 0;
}

.endCutLines:after{/* angle for end cut text */
	position: absolute;
	left: 0;
	top: 40%;
}
.endCutLines + .endCutLines + .birdsmouthCut div:after{/* length for birdsmouth text */
	position: absolute;
	top: 0;
	left: 0;
}

/* rafter cut lines */
#rafterDiagram + .endCutLines,
#rafterDiagram + .endCutLines + .endCutLines,
#rafterDiagram + .endCutLines + .endCutLines + .birdsmouthCut{
	transform: rotate(var(--rafterPlumbCutDegRotate));
}

/* rafter cut line text */
#rafterDiagram + .endCutLines + .endCutLines:after{
	content: var(--rafterPlumbCutDegString);
	transform: rotate(var(--rafterPlumbCutDegSkewX)) translateX(-100%) translateY(-40%);
}
#rafterDiagram + .endCutLines + .endCutLines + .birdsmouthCut div:after{
	content: var(--trueRafterLengthMM);
	transform: rotate(var(--rafterPlumbCutDegSkewX)) translateX(5%) translateY(-110%) ;
}

/* hip cut lines */
#hipDiagram + .endCutLines,
#hipDiagram + .endCutLines + .endCutLines,
#hipDiagram + .endCutLines + .endCutLines + .birdsmouthCut{
	transform: rotate(var(--hipPlumbCutDegRotate));
}

/* hip cut line text */
#hipDiagram + .endCutLines + .endCutLines:after{
	content: var(--hipPlumbCutDegString);
	transform: rotate(var(--hipPlumbCutDegSkewX)) translateX(-100%) translateY(-40%);
}
#hipDiagram + .endCutLines + .endCutLines + .birdsmouthCut div:after{
	content: var(--trueHipLengthMM);
	transform: rotate(var(--hipPlumbCutDegSkewX)) translateX(5%) translateY(-110%);
}

/* Changelog */

#changelog{
	margin: 20px 0;
	padding: 5px;
	opacity: 0.5;
}

#changelog summary{
	cursor: pointer;
}

#changelog[open] summary{
	margin-bottom: 10px;
}

#changelog ul{
	list-style: square;
	list-style-position: inside;
	margin-left: 3px;
}

/* Media query for narrow screens and portrait orientation */
@media screen and (max-width: 700px) and (orientation: portrait) {
	body,html {
		flex-direction: column; /* stack vertically */
		height: initial;/* remove 100vh height */
		gap: 3vw;/* gap between elements */
	}
	#pitchDiagram, #calculationsBox{
		width: 100vw;/* reset to full width */
	}
	#calculationsBox{
		max-height: initial;/* reset */
		overflow-y: initial;/* reset */
	}
	header{
		padding-top: 5px;
	}
	footer{
		text-align: center;
	}
}
	
@media screen and (max-width: 700px){/* small screen rules, irrespective of orientation */
	#pitchDiagram{
		margin-left: 0;/* reset */
	}

	.diagramlabel{/* hide labels on mobile */
		display: none;
	}

	.endCutLines:after,
	.endCutLines + .endCutLines + .birdsmouthCut div:after{
		font-size: 0.9em;
	}
}