/*********************************************************************
tre13e.css
Copyright 2020-2023 Derek Erb Solutions
https://derekerb.solutions
*********************************************************************/

/*********************************************************************
	BREAKPOINTS
*********************************************************************/

/*
	Phones:	 			 480px;
	Tablets:			 800px;
	Desktops:			1200px;
 */

/*********************************************************************
	FONTS
*********************************************************************/

@font-face {
	font-family: 'Urbanist';
	src: url('/fonts/urbanist.ttf') format('truetype-variations');
	font-weight: 1 999;
	font-stretch: 50% 250%;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'Zilvertype';
	src: url('/fonts/zilvertype.eot');
	src: url('/fonts/zilvertype.eot?#iefix') format('embedded-opentype'),
	url('/fonts/zilvertype.woff2') format('woff2'),
	url('/fonts/zilvertype.woff') format('woff'),
	url('/fonts/zilvertype.ttf') format('truetype'),
	url('/fonts/zilvertype.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: fallback;
}

@font-face {
	font-family: 'ZilvertypeSC';
	src: url('/fonts/zilvertype-sc.eot');
	src: url('/fonts/zilvertype-sc.eot?#iefix') format('embedded-opentype'),
	url('/fonts/zilvertype-sc.woff2') format('woff2'),
	url('/fonts/zilvertype-sc.woff') format('woff'),
	url('/fonts/zilvertype-sc.ttf') format('truetype'),
	url('/fonts/zilvertype-sc.svg#youworkforthem') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*********************************************************************
	DEFAULTS
*********************************************************************/

:root {

	--PgBack: white;
	--PgFore: #42853A;

	--FontZ: Zilvertype;
	--FontZSC: ZilvertypeSC;

	--Font13: var(--FontZ), times, serif;
	--FontLogo: var(--FontZSC);

	--FontBody: Urbanist, sans-serif;
	--FontBtns: arial, helvetica, sans-serif;

	--LinkBack: var(--PgBack);
	--LinkFore: var(--PgFore);

	--ItemInactive: beige;
	--ItemActive: lightgreen;

	--SundayColor: #ff16e9;

	--Specials: orange;
	--SpecialsText: black;

	--Events: red;
	--EventsText: #FFF;

	--EventsItem: var(--PgFore);
	--EventsItemText: black;
}

/**********************
	BLOCKS
**********************/

body {
	background: var(--PgBack);
	color: var(--PgFore);

	font-family: var(--FontBody);

	margin: 0 auto;
	padding: 0 2%;
}

	/********** PHONE VERSION ******/
	@media screen and (min-width: 480px) {
		body {
			max-inline-size: 480px;
		}
	}

	/********** TABLET VERSION ******/
	@media screen and (min-width: 800px) {
		body {
			max-inline-size: 800px;
		}
	}

	/************ DESKTOP VERSION **********/
	@media screen and (min-width: 1200px) {
		body {
			max-inline-size: 1200px;
		}
	}

	/************ PRINT VERSION **********/
	@media print {
		body {
			display: inherit;
			inline-size: 100%;
			margin: 0;
			padding: 0;
		}

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			-webkit-column-break-after: avoid;
			page-break-after: avoid;
			break-after: avoid;
		}

		ul,
		ol {
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
		}

		nav#navFoot {
			-webkit-column-break-after: avoid;
			page-break-after: avoid;
			break-after: avoid;
		}

		@page {
			margin: 1.5cm 1.5cm;
		}
	}

	/************ PRINT VERSION **********/
	@media print and (color) {
		/* Force print backgrounds */
		* {
			-webkit-print-color-adjust: exact;
			print-color-adjust: exact;
		}
	}


/**********************
	DEFAULTS
**********************/

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

html {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

	/************ PRINT VERSION **********/
	@media print {
		html {
			font-size: 14pt;
		}
	}

a {
	text-decoration: none;

	color: var(--PgFore);
	background: var(--PgBack);
}

	/* ----- Devices without Hover ----- */
	@media (hover: none) {
		a {
			color: var(--LinkFore);
			text-decoration: none;
			border-block-end: var(--PgFore) 0.125em solid;
			-webkit-text-decoration-color: var(--PgFore);
		}

		a.vernum {
			text-decoration: none;
			border-block-end: none;
		}
	}

a:hover,
a:focus {
	color: var(--LinkFore);
	text-decoration: none;
	border-block-end: var(--PgFore) 0.125em solid;
	-webkit-text-decoration-color: var(--PgFore);
}

a:active {
	color: var(--PgBack);
}

a.linkSunday {
	color: var(--SundayColor);
	border-block-end: 1px solid var(--PgFore);
	transition: color 0.3s;
}

a.linkSunday:focus,
a.linkSunday:hover {
	color: var(--PgFore);
}

button {
	background-color: var(--PgFore);
	color: var(--PgBack);
	border: 1px solid slategray;
	border-radius: 10px;
	font-family: var(--FontBtns);
	font-size: 1em;
	box-shadow: 2px 2px 5px grey;
	transition: background-color 0.6s;
}

button:hover {
	background-color: var(--PgBack);
	border: solid 0.125em var(--PgFore);
	color: var(--PgFore);
	cursor: pointer;
}

button:active {
	border: 4px solid var(--PgFore);
}

div,
p {
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	padding: 0;
	font-family: var(--Font13);
	text-align: center;
	font-weight: bold;
}

img,
embed,
object,
video {
	max-inline-size: 100%;
}

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

.spImp {
	font-weight: bolder;
	text-transform: uppercase;
}

.spItemSubTit {
	font-style: italic;
}

.spMainTit {
	font-family: var(--Font13);
	text-transform: uppercase;
}

.spMainTit3 {
	font-size: 1.1em;
}

.spNoBr,
.spQty {
	white-space: nowrap;
}

/**********************
	FOOTER
**********************/

aside.asMotto {
	margin: 90vh 2% 3% 2%;
	text-align: center;
	font-style: italic;
}

	/************ PRINT VERSION **********/
	@media print {
		aside.asMotto {
			-webkit-column-break-inside: avoid;
			page-break-inside: avoid;
			break-inside: avoid;
			margin-inline-start: 1.5cm;
		}
	}

.asSunday {
	margin: 4% auto;
	text-align: center;
}

/************ PRINT VERSION **********/
@media print {
	.asSunday {
		display: none;
	}
}

footer {
	border-block-start: 1px solid var(--PgFore);
	padding-block: 2% 2em;
	font-size: 0.8em;
	line-height: 2em;
	text-align: center;
}

footer a.vernum {
	text-decoration: none;
	border-block-end: none;
	cursor: none;
}

footer .prtLink {
	display: none;
}

	/************ PRINT VERSION **********/
	@media print {
		/* Display site address & URL when printing */
		footer .prtLink {
			display: block;
		}
	}

/**********************
	HEADER
**********************/

#dHeadings {
	margin: 0;
	padding: 0 1% 1% 1%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

header h1 {
	font-weight: bold;
	font-size: 5vb;
}

header h2 {
	font-weight: bold;
	font-style: italic;
	font-size: 4vb;
}

header a.aHome,
a.aHome:hover {
	text-decoration: none;
	border-block-end: none;
}

#dLangSwitch {
	text-align: right;
	margin: 2% 2% 0 0;
	font-size: 1.1em;
}

#dLangSwitch a {
	border-block-end: 0.125em solid transparent;
}

#dLangSwitch a:hover {
	cursor: pointer;
	border-block-end: 0.125em solid var(--PgFore);
}

#dLangSwitch span {
	padding: 0 1% 0 1%;
}

	/************ PRINT VERSION **********/
	@media print {
		#dLangSwitch {
			display: none;
		}
	}

/**********************
	MAIN
**********************/

main {
	margin-block-end: 10%;
	padding-block-end: 6%;
}

/**********************
	NAV
**********************/

nav {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-content: space-evenly;
	padding-block: 1%;
	margin-block: 0 2%;
	border-block: 3px solid var(--PgFore)
}

	/************ PRINT VERSION **********/
	@media print {
		nav {
			display: none !important;
		}
	}

.navItem {
	padding: 0;
	margin: 0.75% 0;
	inline-size: 30%;
}

.navItem a {
	color: var(--PgBack);
}

	/****** MOBILE NAV LINKS ****/
	@media (hover: none) {
		.navItem a {
			color: var(--PgBack);
		}

		.navItem a:active,
		.navItem a button:active {
			color: var(--PgBack);
		}
	}

.navItem button {
	block-size: 60px;
	inline-size: 100%;
	font-weight: normal;
	font-size: 1em;
}

.navEvent,
.navSpecial {
	inline-size: 95%;
}

.navEvent button,
.navSpecial button {
	transition: background-color 0.3s;
	block-size: 40px;
}

.navSpecial button {
	background-color: var(--Events);
	color: var(--EventsText);
}

.navSpecial button:hover,
.navSpecial button:focus {
	background-color: var(--EventsText);
	color: var(--Events);
}

.navEvent button {
	background-color: var(--Specials);
	color: var(--SpecialsText);
}

.navEvent button:hover,
.navEvent button:focus {
	background-color: var(--SpecialsText);
	color: var(--Specials);
}

/**********************
	NAV SUNDAY
**********************/

.navSunday {
	margin: 2% auto;
	display: flex;
	justify-content: center;
}

.navSunday a {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: flex-end;
	block-size: 60px;
	text-decoration: none;
	font-size: 1.2em;
	border: 2px solid var(--SundayColor);
	background-color: var(--SundayColor);
	box-shadow: 2px 2px 5px grey;
	color: var(--PgBack);
	border-radius: 10px;
	inline-size: 45%;
	text-align: center;
	transition: color 0.3s, background-color 0.3s, border 0.2s;
}

	/********** TABLET VERSION ******/
	@media screen and (min-width: 800px) {
		.navSunday a {
			inline-size: 30%;
		}
	}

.navSunday a:focus,
.navSunday a:hover {
	background-color: var(--PgBack);
	border: 2px solid var(--SundayColor);
	color: var(--SundayColor);
}


.navSunday a:focus:before,
.navSunday a:hover:before {
	background: url("/imgs/SundayPink.svg");
	background-size: contain;
}

.navSunday a:before {
	content: "";
	background: url("/imgs/Sunday.svg");
	background-size: contain;
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
}

	/************ DESKTOP VERSION **********/
	@media screen and (min-width: 1200px) {
		.navSunday a:before {
			width: 40px;
			height: 40px;
		}
	}

.navSundayen a {
	padding-inline-end: 0.7em;
}

.navSundayen a:before {
	left: 5%;
}

.navSundayfr a {
	inline-size: 55%;
	padding-inline-end: 0.4em;
}

.navSundayfr a:before {
	left: 5%;
}

	/********** TABLET VERSION ***********/
	@media screen and (min-width: 800px) {
		.navSundayen a {
			padding-inline-end: 2.5em;
		}

		.navSundayen a:before {
			left: 15%;
		}

		.navSundayfr a {
			inline-size: 30%;
			padding-inline-end: 1em;
		}

		.navSundayfr a:before {
			left: 10%;
		}
	}

	/********** DESKTOP VERSION ******/
	@media screen and (min-width: 1200px) {
		.navSundayen a {
			padding-inline-end: 5em;
		}

		.navSundayen a:before {
			left: 25%;
		}

		.navSundayfr a {
			padding-inline-end: 4em;
		}

		.navSundayfr a:before {
			left: 20%;
		}
	}

	/************ PRINT VERSION **********/
	@media print {
		.navSunday {
			display: none;
		}
	}