/*
	Theme Name: The Ginger Pig
	Theme URI: ...
	Description: Custom theme for The Ginger Pig
	Author: Ultimately Better
	Author URI: https://ultimatelybetter.com
	Version: 1
*/

/* RESETS */
* { margin: 0; padding: 0; }
*, *:before, *:after { box-sizing: border-box; }

/* FONTS */
@font-face {
	font-display: swap;
	font-family: 'mr-eaves-xl-modern';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/mr-eaves-xl-modern.woff2') format('woff2'),
	url('assets/fonts/mr-eaves-xl-modern.woff') format('woff');
}

/* ELEMENTS */
html { font-size:  62.5%; }
body {
	font-size: 1.8rem;
	line-height: 1.5;
}

img {
	border: 0;
	height: auto;
	max-width: 100%;
}
b, strong { font-weight: 700; }

input,
select,
textarea {
	font: inherit;
	padding: 5px;
}

p, ul, ol, table, blockquote, dl { margin-bottom: 25px; }

ul, ol, dl { margin-left: 2em; }

/* MAIN STRUCTURE */
#container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	width: 100%;
}
.alignwide > div,
.alignfull > div,
.wrap {
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size);
}

.site-header,
.site-content,
.site-footer { display: block; } /* old IE support */

.site-header {
	flex-shrink: 0;
}

.site-content { flex: 1 0 auto; }

.site-footer {
	flex-shrink: 0;
}

/* MISC CLASSES */
.alignwide {
	margin-left: calc((var(--wp--style--global--wide-size) - 95vw) / 2);
	margin-right: calc((var(--wp--style--global--wide-size) - 95vw) / 2);
	width: 95vw;
}
.alignfull {
	margin-left: calc((var(--wp--style--global--wide-size) - 100vw) / 2);
	margin-right: calc((var(--wp--style--global--wide-size) - 100vw) / 2);
	width: 100vw;
}

/* RESPONSIVEY STUFF */
@media only screen and (max-width : 1200px) {
	.wrap,
	.alignwide {
		margin-left: auto;
		margin-right: auto;
		max-width: 95vw;
	}

	.alignfull {
		margin-left: -2.5vw;
		margin-right: -2.5vw;
		padding-left: 20px;
		padding-right: 20px;
		width: 100vw;
	}
}
@media only screen and (max-width : 768px) {

}

@media only screen and (max-width : 640px) {

}

@media only screen and (max-width : 480px) {

}

@media only screen and (max-width: 380px) {

}