/*
Theme Name: half/press Store
Author: Elisabeth Mahler

#37bd3c;  Green
	#ded8ca;  Light taupe - gradient background
	#ece9e9;  Faint gray - content box gradient background
	#a9dbfd;  Light blue - navigation active/hover link text
	#cccccc;  Light gray - hr
	#666666;  Medium gray - content box border
	#363636;  Dark gray - body text
	#1d6600;  Dark green - price and button background
	#0c3ab1;  Blue - h1-h3, body active links
	#a8261f;  Dark red - body visited links
	#cf2e26;  Commodore red - header border
	#d96443;  Commodore orange - header border
	#f8d856;  Commodore yellow - header border, navigation active/hover link border
	#68ac54;  Commodore green - header border
	#489cd4;  Commodore blue - header border
*/



/* Use a more-intuitive box-sizing model */
*, *::before, *::after {
	box-sizing: border-box;
	}

/* Remove default margin */
* {
	margin: 0px 0px 0px 0px;
	}

/* Improve media defaults */
img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	}

/* Remove built-in form typography styles */
input, button, textarea, select {
	font: inherit;
	}

/* Avoid text overflows */
p, h1, h2, h3 {
	overflow-wrap: break-word;
	}

/* Table reset */
table {
	border-collapse: collapse;
	}

@font-face {
	font-family: 'Justus';
	src: url(fonts/Justus-Roman.ttf);
	font-weight: 400;
	font-display: swap;
	}

@font-face {
	font-family: 'Justus';
	src: url(fonts/Justus-Italic.ttf);
	font-style: italic;
	font-display: swap;
	}

@font-face {
	font-family: 'Justus';
	src: url(fonts/Justus-Bold.ttf);
	font-weight: 700;
	font-display: swap;
	}
	
@font-face {
	font-family: 'Noto Sans';
	src: url(fonts/NotoSans-Regular.ttf);
	font-weight: 400;
	font-display: swap;
	}

@font-face {
	font-family: 'Noto Sans';
	src: url(fonts/NotoSans-Bold.ttf);
	font-weight: 700;
	font-display: swap;
	}

@font-face {
	font-family: 'Noto Sans';
	src: url(fonts/NotoSans-BoldItalic.ttf);
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	}

@font-face {
	font-family: 'Noto Sans';
	src: url(fonts/NotoSans-Italic.ttf);
	font-style: italic;
	font-display: swap;
	}





body {
	font-family: 'Noto Sans', sans-serif;
	font-size: 18px;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
	text-align: left;
	background-color: #000000;  /* Black */
	color: #363636;  /* Dark gray */
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

p {
	margin: 20px 0px 20px 0px;
	margin-block-start: 20px;
	margin-block-end: 20px;
	}

a:link,
a:visited,
a:hover,
a:active {
	font-weight: bold;
	text-decoration: none;
	}

a:link,
a:visited {
	color: #0c3ab1;  /* Blue */
	}

a:hover,
a:active {
	color: #a8261f;  /* Dark red */
	}

input[type="submit"], 
input[type="button"] {
	display: inline-block;
	padding: 12px 24px 12px 24px;
	margin: 4px;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	background-color: #0c3ab1; /* Blue */
	color: #ffffff;  /* White */
	border: none;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	}

input[type="submit"]:hover,
input[type="button"]:hover {
	background-color: #1d6600;  /* Dark green */
	}

input[type="submit"]:active,
input[type="button"]:active {
	transform: scale(0.98);  /* Subtle shrinking effect on click */
	}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	outline: 3px solid #99c8ff;  /* Clean outline for keyboard navigation */
	outline-offset: 2px;
	}

h1,
h2,
h3 {
	font-family: 'Justus', serif;
	color: #0c3ab1;  /* Dark turquoise */
	font-weight: normal;
	line-height: normal;
	letter-spacing: normal;
	margin: 20px 0px 20px 0px;
	}

h1 {
	color: #363636;  /* Dark gray */
	font-size: 45px;
	line-height: 1.2;
	text-align: center;
	}

h2 {
	font-size: 30px;
	}

h3 {
	font-size: 25px;
	}

h3.price {
	font-family: 'Noto Sans', sans-serif;
	font-weight: bold;
	color: #1d6600;  /* Dark green */
	}

ul li {
	padding: 0px 0px 10px 0px;
	}

hr {
	border: none;
	height: 1px;
	background-color: #cccccc;  /* Light gray */
	margin: 20px 0px 20px 0px;
	}
	
#wrapper {
	width: 100%;
	float: left;
	background-image: linear-gradient(to bottom, #ded8ca, #ffffff);  /* Light taupe to white */
    margin: 0px auto 0px auto;
	}

#wrapper-inner {
	max-width: 1200px;
	height: 100%;
	display: block;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
	}





/* BEGIN HEADER */

#header-wrapper {
	width: 100%;
	display: block;
	background-color: #000000;  /* Black */
	padding: 20px 0px 20px 0px;
	}

.header {
	display: block;
	max-width: 1200px;
	margin: 0px auto 0px auto;
	}

.header-inner {
	display: flex;
	column-gap: 20px;
	}

.header-inner-logo {
	flex: 1;
	max-width: 400px;
	box-sizing: border-box;
	}

.logo {
	display: block;
	min-width: 280px;
	height: auto;
	margin: 0px 0px 0px 20px;
	}

.header-inner-navigation {
	flex: 1;
	box-sizing: border-box;
	padding: 0px 0px 20px 20px;
	}
	
.shopping-cart {
	float: right;
	padding: 20px 15px 0px 0px;
	font-size: 1.5em;
	}

.shopping-cart a.link,
.shopping-cart a.visited {
	color: #ffffff;  /* White */
	}

.shopping-cart a.hover,
.shopping-cart a.active {
	color: #f8d856;  /* Commodore yellow */
	}

/* END HEADER */



/* BEGIN CONTENT */

#content {
	padding: 20px 20px 20px 20px;
	}

.content-box {
	display: block;
	width: 100%;
	background-color: #ffffff;  /* White */
	background-image: radial-gradient(circle, #ffffff, #ece9e9); /* White to faint gray */
	border: 2px solid #666666;  /* Medium gray */
	padding: 20px 20px 20px 20px;
	margin-bottom: 30px;
	}

.button-link {
	display: inline-block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	background-color: #37bd3c;  /* Green */
	color: #000000;  /* Black */
	border: none;
	border-radius: 99px;
	font-size: 14px;
	padding: 1.5em 2.5em 1.5em 2.5em;
	}

.button-link:link {
	background-color: #37bd3c;  /* Green */
	color: #000000;  /* Black */
	}

.button-link:visited {
	background-color: #37bd3c;  /* Green */
	color: #000000;  /* Black */
	}

.button-link:hover {
	background-color: #000000;  /* Black */
	color: #ffffff;  /* White */
	}

.button-link:active {
	background-color: #37bd3c;  /* Green */
	color: #000000;  /* Black */
	}

.alignleft {
	float: left;
	margin: 0px 20px 10px 0px;
	}

.aligncenter {
	display: block;
	margin: 0px auto 0px auto;
	text-align: center;
	clear: both;
	}

.alignright {
	float: right;
	margin: 0px 0px 10px 20px;
	}

img.alignleft {
	float: left;
	border: 1px solid #cccccc;  /* Light gray */
	margin: 0px 20px 10px 0px;
	padding: 5px 5px 5px 5px;
	}

img.aligncenter {
	display: block;
	border: 1px solid #cccccc;  /* Light gray */
	margin: 0px auto 0px auto;
	padding: 5px 5px 5px 5px;
	}

img.alignright {
	float: right;
	border: 1px solid #cccccc;  /* Light gray */
	margin: 0px 0px 10px 20px;
	padding: 5px 5px 5px 5px;
	}

.fa-screen-reader-only {
	position: absolute;
	top: -9999px;
	left: -9999px;
	}

/* END CONTENT */





/* BEGIN FOOTER */

#footer-wrapper {
	width: 100%;
	float: left;
	font-family: NotoSans, sans-serif;
	font-size: 15px;
	line-height: 1.5em;
	letter-spacing: 1px;
	background-color: #000000;  /* Black */
    margin: 20px auto 0px auto;
	padding: 0px 0px 0px 0px;
	}

#footer-wrapper a:link,
#footer-wrapper a:visited,
#footer-wrapper a:hover,
#footer-wrapper a:active {
	color: #ffffff;  /* White */
	font-weight: normal;
	text-decoration: none;
	}

#footer-columns-wrapper {
	display: block;
	max-width: 1200px;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	}

#footer-columns-wrapper ul,
#footer-columns-wrapper li {
	list-style-type: none;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	}

#footer-column-one,
#footer-column-two,
#footer-column-three {
	width: 31%;
	display: block;
	float: left;
	color: #ffffff;  /* White */
	}

#footer-column-one {
	text-align: left;
	padding: 20px 10px 50px 20px;
	}

#footer-column-two {
	text-align: center;
	padding: 20px 10px 50px 10px;
	}
	
#footer-column-three {
	text-align: right;
	padding: 20px 20px 50px 10px;
	}

/* END FOOTER */





/* BEGIN RESPONSIVE */

/* Extra small devices (phones, 600px wide or less) */
@media only screen and (max-width: 600px) {
	body {
		margin: 0px 0px 0px 0px;
		}

	.header-inner {
		flex-direction: column;
		flex-wrap: wrap;
		}

	.header-inner-logo,
	.header-inner-navigation {
		flex-basis: 100%;
		box-sizing: border-box;
		margin: 0px auto 0px auto;
		}
	
	.logo {
		width: calc(100% - 40px);
		margin: 0px 20px 20px 20px;
		}
	
	.logo img {
		display: block;
		float: none;
		height: auto;
		margin: 0px auto 0px auto;
		clear: both;
		}
	
	h1 {
		width: 100%;
		font-size: 35px;
		}

	h2 {
		width: 100%;
		font-size: 25px;
		}
	
	img.alignright {
		display: block;
		float: none;
		width: 100%;
		height: auto;
		border: 1px solid #cccccc;  /* Light gray */
		margin: 0px 0px 10px 0px;
		padding: 5px 5px 5px 5px;
		}
	
	#footer-column-one,
	#footer-column-two,
	#footer-column-three {
		display: block;
		width: 100%;
		float: none;
		text-align: center;
		padding: 70px 20px 20px 20px;
		}
		
}

/* Small devices (portrait tablets, large phones, iPad Mini portrait, between 600px and 767px wide) */
@media only screen and (min-width: 599px) {
	body {
		margin: 0px 0px 40px 0px;
		}

}

/* Medium devices (landscape tablets, 768px and wider) */
@media only screen and (min-width: 768px) {

}

/* END RESPONSIVE */