/**
 * CSS for the Astralis Legal and Conveyancing website. Hand-crafted in Tasmania.
 * @author Rebecca Skeers Webmistress <hello@webmistress.com.au>
 * @copyright Rebecca Skeers 2023
 */

/*

Development of a business card webpage containing the elements shown on the business card print design files i.e. colours, icons, fonts, logo, swooshes.
Content would be similar to your business cards, but could include a brief paragraph of text about the business, along with the logo, phone number, admin email, and office address
*/






html
{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	scroll-behavior:smooth;
}

*,*:before,*:after
{
	-webkit-box-sizing:inherit;
	box-sizing:inherit;
}

*::selection
{
	background-color:rgba(0,0,0,0.5);
	color:white;
}

html
{
	color:white;
	font-family:'Poppins',sans-serif; /* Original font in print work was ITC Avant Guarde 400 - see if client wants to buy license before launch */
	font-size:18px;
	font-weight:300;
	height: -webkit-fill-available;
	line-height:1.5;
	margin:0;
	padding:0;
	-webkit-text-size-adjust:none;
	
	background:url(swoosh2.svg) no-repeat scroll 100% 100%,
				rgb(37,37,37) url(swoosh1.svg) no-repeat scroll 0 0;
	background-size:20vw auto,38vw auto;
}

@media (min-aspect-ratio:2/1)
{
	html
	{
		background:url(swoosh2.svg) no-repeat scroll 100% 100%,
					rgb(37,37,37) url(swoosh1.svg) no-repeat scroll 0 0;
		background-size:40vh auto,72vh auto;
	}
}

@media screen and (min-width:900px)
{
	html
	{
		font-size:2vw;
	}
}

@media screen and (min-width:1200px)
{
	html
	{
		font-size:24px;
	}
}

@media screen and (min-width:2000px)
{
	html
	{
		font-size:1.2vw;
	}
}

@media print
{
	html
	{
		background-color:white;
		background-image:none;
		color:rgb(37,37,37);
		font-size:20px;
	}
}

body
{
	margin:0;
	padding:0;	
	min-height: 100vh;
  min-height: -webkit-fill-available;	
  display:flex;
  align-items:stretch;
  align-content:stretch;
  width:100%;
}

address,article,aside,figure,picture,figcaption,footer,header,main,menu,nav,section
{
	display:block;
	font-size:1em;
	font-style:normal;
	font-weight:300;
	margin:0;
	padding:0;
	text-align:left;
}

article,figure,picture,section
{
	break-inside:avoid;
}

div:focus
{
	outline:none;
}

a:focus,button:focus
{
	outline-color:inherit;
	outline-style:dotted;
	outline-width:0.111111rem;
}

@media all
{
	a,a::before
	{
		transition:background-color 0.3s,color 0.3s,opacity 0.3s,border 0.3s,-webkit-text-decoration-color 0.3s,text-decoration-color 0.3s;
	}
}

a,a:link,a:visited
{
	color:currentColor;
	text-decoration:underline;	
	-webkit-text-decoration-color:rgba(255,255,255,0);
	text-decoration-color:rgba(255,255,255,0);
	-webkit-text-decoration-skip:ink;
	text-decoration-skip:ink;
	text-underline-offset:0.15em;
	text-decoration-thickness:max(1px,0.055556rem);
}

a:focus,a:hover,a:active
{
	color:rgb(216,141,94);
	-webkit-text-decoration-color:rgb(216,141,94);
	text-decoration-color:rgb(216,141,94);
	-webkit-text-decoration-skip:ink;
	text-decoration-skip:ink;
	text-underline-offset:0.15em;
	text-decoration-thickness:max(1px,0.055556rem);
}

svg,img
{
	display:block;
	height:auto;
	max-width:100%;
	width:100%;
}

svg
{
	pointer-events:none;
}

p
{
	margin:0;
	padding:0;
}

ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

li
{
	margin:0;
	padding:0;
}

.page
{
	max-width:26rem;
	padding:2rem;
	margin:auto;
}

@supports (display:grid)
{
	.page
	{
		display:grid;
		grid-row-gap:2rem;
		row-gap:2rem;
		grid-column-gap:2rem;
		column-gap:2rem;
		grid-template-columns:0px 1fr 0px;
		grid-template-areas:". . ."
							". h ."
							". m ."
							". f ."
							". . .";
		grid-template-rows:1fr min-content min-content min-content 1fr;
		width:100%;
		max-width:100%;
		padding:0;
		margin:0;
	}

	@media screen and (min-width:540px)
	{
		.page
		{
			grid-template-columns:1fr 24rem 1fr;
		}
	}
	
	@media screen and (min-width:900px)
	{
		.page
		{
			
			grid-column-gap:3rem;
			column-gap:3rem;
			grid-template-columns:1fr minmax(20vw,16rem) minmax(30vw,24rem) 1fr;
			grid-template-areas:". . . ."
								". h m ."
								". h f ."
								". . . .";
			grid-template-rows:1fr min-content min-content 1fr;
		}
	}

	@media print
	{
		.page
		{
			grid-template-areas:"h" "m" "f";
			grid-template-columns:1fr;
			grid-template-rows:repeat(3,min-content);
		}
	}
}
@media print
{
	.page
	{
		margin:0 auto;
		max-width:21rem;
	}
}

header
{
	grid-area:h;
	align-self:center;
}

h1
{
	margin:0 auto 2rem;
	max-width:16rem;
	padding:0;
}

@supports (display:grid)
{
	h1
	{
		margin-bottom:1rem;
	}


	@media screen and (min-width:900px)
	{
		h1
		{
			margin:0;
			max-width:100%;
		}
	}
}

main
{
	grid-area:m;
}

footer
{
	grid-area:f;
	padding:2rem 0;
}

@supports (display:grid)
{
	footer
	{
		padding-top:0;
	}
	
	@media screen and (min-width:900px)
	{
		footer
		{
			padding:0;
		}
	}
}

footer ul li
{
	margin:0 0 0.4rem;
	padding:0;
}

footer ul li:last-child
{
	margin-bottom:0;
}

footer ul li a
{	
	display:inline-block;
	padding:0.05rem 0 0.05rem 2rem;
	position:relative;
}

footer ul li a::before
{
	background-color:rgb(216,141,94);
	border-radius:100%;
	content:'';
	display:block;
	height:1.6rem;
	left:0;
	position:absolute;
	top:0;
	width:1.6rem;
}

footer ul li:nth-child(1) a::before
{
	background-image:url(icon_phone.svg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:0 50%;
	background-size:contain;
}

footer ul li:nth-child(2) a::before
{
	background-image:url(icon_email.svg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:0 50%;
	background-size:contain;
}
footer ul li:nth-child(3) a::before
{
	background-image:url(icon_address.svg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:0 50%;
	background-size:contain;
}

footer ul li a:focus::before,
footer ul li a:hover::before,
footer ul li a:active::before
{
	background-color:rgb(199,109,64);
}