@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--primary-color: #0e1b17;
	--secondary-color: #40826d;
	--tertiary-color: #92c9b8;
	--yellow-color: #f0c20d;

	--viridian-green: #40826D;
	--viridian-opposite: #824055;
	--veridian-opposite-2: #a4516b;
	--veridian-opposite-3: #b87087;
	--veridian-opposite-4: #c992a3;

	--viridian-01: #0e1b17;
	--viridian-02: #1e3e34;
	--viridian-03: #2f6050;
	--viridian-04: #40826d;
	--viridian-05: #51a48a;
	--viridian-06: #70b8a1;
	--viridian-07: #92c9b8;
	--viridian-08: #c4e1c5;
	--viridian-09: #e8f4e1;

	--green-00: #0F4229;
	/* 348E38  */
	--green-01: #4b6043;
	--green-02: #658354;
	--green-03: #75975e;
	--green-04: #87ab69;
	--green-05: #95bb72;
	--green-06: #a3c585;
	--green-07: #b3cf99;
	--green-08: #c7ddb5;
	--green-09: #ddead1;
	--green-10: #f7fff2;

	--brown-dark: #493829;
	--brown-med: #816c5b;
	--brown-lite: #a9a18c;

	--orange-dark: #613318;
	--orange-med: #855723;
	--orange-lite: #b99c6b;

	--red-dark: #8f3b1b;
	--red-med: #d57500;
	--red-lite: #dbca69;

	--blue-dark: #4e6172;
	--blue-med: #83929f;
	--blue-lite: #a3adb8;

	--color-white: #FFFFFF;
	--color-light-gray: #94a3b8;
	--color-gray: #475569;
	--color-dark-gray: #1e293b;
	--color-toolbar-bg: #e8f8e8;
	--color-header-bg: #c7ddb5;
	--padding-inline: 2em;
	--content-max-width: 1440px;
	--content-min-width: 480px;
}
.site-grid {
	display: grid;
	grid-template-columns:
	[full-width-start]
		minmax(var(--padding-inline),1fr)
	[content-start]
		minmax(0, min(calc(100% - (var(--padding-inline) * 2)), var(--content-max-width)))
	[content-end]
		minmax(var(--padding-inline),1fr)
	[full-width-end];
}
.preorder-grid{
	display:grid;
	grid-template-columns: 
			var(--padding-inline)
		[preorder-start]
			calc(100% - (var(--padding-inline)*2))
		[preorder-end]
			var(--padding-inline);
}
.product-grid {
	display:grid;
	grid-template-columns: 
			var(--padding-inline)
		[product-image-start]
			1fr
		[product-image-end]
			var(--padding-inline)
		[product-price-start]
			1fr
		[product-price-end]
			var(--padding-inline);
}
.site-grid > *{
	grid-column: content;
}
.site-grid > .full-width {
	grid-column: full-width;
	display: grid;
	grid-template-columns: inherit;
}
.preorder-grid > *{
	grid-column: preorder;
}
.product-grid > .product-hero {
	grid-column: product-image;
}
.product-grid > .product-pricing {
	grid-column: product-price;
}
.product-hero h4 {
	margin-block: 0;
}



html {
	box-sizing: border-box;
	background-color: var(--green-10);
	hanging-punctuation: first last;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	/* outline: 2px solid red; */
}

* {
	margin:0;
	padding:0;
	font: inherit;
}
@media (prefers-reduced-motion: no-preference) {
	:has(:target) {
		scroll-behavior: smooth;
		scroll-padding-top: 3em;
	}
}
img, picture, svg, video {
	display:block;
	max-width: 100%;
}
img {
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 1rem;
}
body {
	min-height: 100svh;
}
html {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html,
body {
	font-family: 'Noto Sans',compass, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	line-height: 1.5;
}

html {
	overflow-x: hidden;
	background-color: var(--color-white);
	/* color-scheme: dark light; */
}
body {
	container-type: inline-size;
	color: var(--primary-color);
	accent-color: var(--viridian-green);
	margin: 0 auto;
	min-width: var(--content-min-width);
	width:100dvw;
}
main {
	grid-column: content;
}
button {
	outline-color: transparent;
}
.header {
	grid-column: content;
	grid-template-columns: 1fr 1fr;
}
.wrapper {
	grid-column: content;
}
.flex-wrapper{
	grid-column: content;
	display:flex;
	align-items: center;
}
.flex-space-between{
	justify-content: space-between;
}
.grid-wrapper {
	display: grid;
	grid-column: content;
	grid-template-columns: 1fr;
	margin-block: .25em;
}
.grid-3col-wrapper{
	display: grid;
	grid-column: content;
	grid-template-columns: 1fr 1fr 1fr;
	margin-block: 1em;

}
.primary-header,.primary-hero-header {
	grid-column: content;
	display:grid;
	grid-template-columns: 1fr 1fr;
	align-content: center;
	align-items: center;
	margin-block: .25em;
}
.primary-hero-header {
	gap:1rem;
}
.primary-header-image,
.primary-header-text {
	min-width: fit-content;
}
.primary-header-text {
	width: fit-content;
	justify-self: end;
}
.primary-hero-image{
	align-self: center;
	justify-self: end;
}
.primary-hero-text{
	align-self: center;
	justify-self: start;
}
.site-header-top{
	background-color: var(--viridian-02);
}
.site-header-bottom{
	background-color: var(--viridian-08);
}

div.wrapper > div > p {
	color:var(--color-white);
}
.wrapper .header-cta-button {
	text-align: center;
	align-content: center;
}
.header-cta-button {
	background-color: var(--viridian-green);
	color: white;
	padding: 0.6rem 1.2rem;
	text-decoration: none;
	border-radius: 0.25rem;
	font-weight: bold;
	display: inline-block;
	transition: background-color 0.2s ease;
}
.header-cta-button:hover {
	background-color: var(--viridian-03);
}
button {
	user-select:none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 600;
	letter-spacing: 1.5px;
	color: var(--viridian-01);
	text-wrap: balance;
	margin-block: 1em;
}
h1 {font-size: 1.75em}
h2 {font-size: 1.5em}
h3 {font-size: 1.375em}
h4 {font-size: 1.25em}
h5 {font-size: 1.125em}
h6 {font-size: 1em;}
.title {
	font-size: 2em;
}
.subtitle {
	font-size: 1.875em;
}
.small {
	font-size: .8rem;
}
.error {
	color: var(--red-dark);
	font-weight: 600;
}
a,
a:visited,
a:hover,
a:active {
	text-decoration: none;
	border: none;
	outline: none;
}
ul {
	list-style: none;
	margin-bottom: 1em;
}
ul.indent>li { /* hanging indent */
	list-style: none;
	padding-left: 2ch;
	text-indent: -3ch;
	margin-left: 1em;
}
li.leaf::before {
	content: '';
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right:1ch;
	margin-bottom: -4px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none"><path d="M34 4C26 6 18 14 14 23s-2 20 6 26c6 4 14 4 20-2 4-4 6-8 6-14 0-8-6-16-12-20z" fill="%2340826D" stroke="%23888" stroke-width="2"/><path d="M28 32c4 4 4 10 4 18" stroke="%23000" stroke-width="2" stroke-linecap="round"/></svg>');
}
dl, dt, dd {
	line-height: 1.25; /* Adjust line spacing */
}
dt {
	font-weight: bold;
	margin-top: 1.5rem; /* More space separating each action */
	color: var(--brand-accent); /* Make the action title stand out */
}
dd {
	margin: 0.25rem 0 1rem 0; /* Remove left margin, use standard bottom margin */
	color: var(--gray-700);
}
p {
	margin-bottom: 1em;
	text-wrap: pretty;
}
.showcase-list:hover img {
	opacity: .5; /* fade all images in showxase */
}
.showcase-list img:hover {
	opacity: 1; /* highlight img:hover in showcase */
}

footer{
	background-color: var(--viridian-02);
	line-height: 2rem;
}



.nav-wrapper {
	grid-column: content;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap:2em;
	flex-wrap: wrap;
}
.header-cta-wrapper{
	grid-column: content;
	align-self: center;
	text-align: center;
	padding-block: .5em;
}
nav>ul {
	display:flex;
	justify-content: space-between;
	align-items: center;
	gap:2em;
	margin:0;
	padding:0;
}
.nav-item a {
	display: block;
	color: var(--viridian-07);
	text-decoration: none;
}

.nav-item a:hover,
.nav-item a:focus,
.nav-item a:active {
	text-decoration: none;
	color: var(--veridian-opposite-3);
}

.brand {
	font-size: 1.75rem;
	color: var(--primary-color);
}

a.brand>h1>img {
	height: 38px;
	width: auto;
}

a.brand>h1 {
	margin: 0;
	padding: .25rem 0;
}

.active {
	background-color: var(--viridian-08);
}


.components-wrapper {
	display: flex;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom:1rem;
}

.component {
	margin: 0; /* Remove default paragraph margins */
	display: flex;
	align-items: center;
}
.component > img {
	width:250px;
	height:auto;
}


form.formContact {
	display:grid;
	gap:var(--padding-inline);
	margin-inline: auto;
	max-inline-size: 700px;
	@media (width > 700px) {
		grid-template-columns: repeat(2,1fr);
	}
}
fieldset {
	padding:0;
	border:0;
	display:grid;
	gap:inherit;
	grid-template-columns: inherit;
}
textarea {
	resize:block;
	box-sizing: content-box;
	height: 4lh;
}
.form-group {
	display: grid;
	grid-auto-rows: min-content;
}
fieldset:has([required]) legend,
.form-group:has(:not([type="radio"])[required]) label {
	display:flex;
	gap:1ch;
	&::after {
		content: '*';
		color: var(--viridian-green);
	}
}
input,textarea,
.form-group:has([type="radio"]) {
	border: 1px solid var(--viridian-05);
	border-radius: 6px;
	padding: .625em 1.25em;
	&:focus-visible {
		outline-color: var(--viridian-green);
	}
}

.form-group:has([type="radio"], [type="checkbox"]) {
	display:flex;
	gap:1ch;
}
.form-group:has([type="radio"]){
	position:relative;
	label::after {
		content: "";
		position: absolute;
		inset: 0;
	}
}
.form-group:has([type="radio"]:checked) {
	background-color: var(--viridian-07);
	border-color: var(--viridian-green);
}
.submitButton{
	user-select:none;
	background: var(--viridian-green);
	color: var(--color-white);
	border: 0;
	padding: .625em 1.25em;
	border-radius: 6px;
	&:hover,
	&:focus-visible {
		background-color: var(--viridian-03);
	}
}
.span-all {
	grid-column: 1 / -1;
}
input:user-invalid {
	border-color: var(--red-dark);
}
.error-message{
	color: var(--red-dark);
}
.error-message:empty {
	display:none;
}



section {
	grid-column: content;
	padding-bottom: 1.5rem;
}
.white{
	background-color: var(--color-white);
}
.light-green {
	background-color: var(--viridian-09);
}
.med-green {
	background-color: var(--viridian-08);
}
.dark-green {
	background-color: var(--viridian-07);
}



/* ********************************* */
/* See https://www.youtube.com/watch?v=cS05Sd77sBE 
* for figure/caption/img settings
*/
figure{
	inline-size: fit-content;
	margin-inline: auto;
}
figcaption {
	contain: inline-size;
}
img {
	border: 0;
	max-width:100%;
}

/* ********************************* */
/* See https://www.youtube.com/watch?v=b6iVByCOx8A
* for card layout
* <div class="card">
*   <img src="" />
*   <h2 class="card-title"></h2>
*   <p class="card-preview-text"></p>
*   <button>Continue Reading</button>
* </div>

.card > *:not(:first-child) {
	margin-block-start: var(--padding-inline);
}
.card-title{
	font-size: 1.5em;
}
.card-preview-text {
	display: -webkit-box;
	-webkit-box-orient:vertical;
	line-clamp:4;
	-webkit-line-clamp: 4;
	overflow:hidden;
}
.card-text {
	color:var(--viridian-01);
}
*/
.card-container{
	margin-top:2rem;
}
.card {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin-bottom: 3rem;
}

.card-reverse {
	flex-direction: row-reverse;
}

.card-image {
	flex: 0 0 30%; /* Adjust percentage as needed */
}

.card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.card-text {
	flex: 1;
}

/* Mobile stacking */
@media (width < 768px) {
	.card,
	.card-reverse {
		flex-direction: column;
		gap: 1rem;
	}

	.card-image {
		flex: 0 0 auto;
		width: 100%;
		max-width: 400px; /* Optional: limit image width on mobile */
	}
}

.site-logo {
	width: 240px;
	min-width:240px;
	height: 38px;
}
.text-bold {
	font-weight: 800;
}


blockquote {
	margin: 3rem auto;
	padding: 2rem;
	border: 2rem solid transparent;
	box-shadow: 5px 3px 30px black;
	font-size: 1.4rem;
	font-family: 'Compass LT Regular', system-ui, -apple-system, sans-serif;
	font-style: italic;
	line-height: 1.5;
	width: 50%;
}

.qotdfooter {
	padding-top: 1.3em;
}

cite {
	font-style: normal;
	font-size: 1.2em;
	font-weight: bold;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.overlay-container.show {
	display: flex;
	opacity: 1;
}




/* From Uiverse.io by santhoshsj-dev */
.input-wrapper {
	position: relative;
	width: 100%;
	margin: 2rem auto;
}
.input-box {
	font-size: 16px;
	padding: 10px 0;
	border: none;
	border-bottom: 2px solid #ccc;
	color: #08AE08;
	width: 100%;
	background-color: transparent;
	transition: border-color 0.3s ease-in-out;
}
.underline {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #08AE08;
	transform: scaleX(0);
	transition: transform 0.3s ease-in-out;
}
.input-box:focus {
	border-color: #08AE08;
	outline: none;
}
.input-box:focus+.underline {
	transform: scaleX(1);
}
/* End From Uiverse.io by santhoshsj-dev */



.hero {
	background: url('../images/hero-image.jpg') center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
}

.hero-content {
	text-align: center;
	color: var(--color-white);
	/*	z-index: 2; /* Ensure the content is on top of the overlay */
}
.hero-tagline {
	font-size: 1rem;
	text-align: center;
	color:var(--viridian-09);
}
.hero-image {
	max-width: 360px;
	height: auto;
	width:100%;
	margin-inline:auto;
}

.hero-title {
	font-weight: 800;
	font-size: 2.5rem;
	line-height: 1.2;
	margin:0;
	padding-inline: 1em;
	color: var(--color-white);
	animation: fadeInUp 1s ease-in-out 0.5s;
}



/* ********** NEWS ************* */
.news-wrapper {
	grid-column: content;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	padding: 2rem;
	margin: 0 auto;
	width: 100%;
}
.news {
	--bg-filter-opacity: 0.5;
	background-image: linear-gradient(rgba(0, 0, 0, var(--bg-filter-opacity)), rgba(0, 0, 0, var(--bg-filter-opacity))), var(--bg-img);
	height: 20em;
	font-size: 1.5em;
	color: var(--color-white);
	border-radius: 1em;
	padding: 1em;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--green-00);
	text-decoration: none;
}
.news:hover {
	transform: rotate(0);
}
.news h5 {
	color: var(--color-white);
	margin: 0;
	font-size: 1.0625em;
	line-height: 1.125em;
}
.news p {
	color: var(--color-white);
	font-size: 0.75em;
	margin-top: 0.5em;
	line-height: 2em;
}
.news .date {
	color: var(--color-white);
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0.75em;
	padding: 1em;
	line-height: 1em;
	opacity: .8;
}
.news:before,
.news:after {
	content: '';
	transform: scale(0);
	transform-origin: top left;
	border-radius: 50%;
	position: absolute;
	left: -50%;
	top: -50%;
	z-index: -5;
	transition: all, var(--transition-time);
	transition-timing-function: ease-in-out;
}


/********
Responsive table using media queries
********/

table {
	border-collapse:collapse;
	width:100%;
	background: var(--viridian);
}
caption, th, td {
	padding:.25em;
}
caption, th {
	text-align:left;
}
caption {
	background: hsl(0 0% 0% / 0.2);
	font-weight: 700;
	text-transform:uppercase;
}
th {
	background: hsl(0 0% 0% / .5);
}
tr:nth-of-type(2n) {
	background: hsl(0 0% 0% / .1);
}

@media (width < 900) {
	blockquote {
		width: 85%;
		margin: 1rem auto;
		font-size: 1rem;
	}
}

@media (width < 700px) {
	.primary-header {
		gap: 1rem;
		grid-template-columns: 1fr;
		justify-items: center; /* Center both logo and menu */
	}
	.primary-header-image,
	.primary-header-text,
	.primary-hero-image,
	.primary-hero-text {
		justify-self: center !important; /* Force center alignment */
		grid-column: 1; /* Ensure both items span the single column */
	}
	.primary-header-text ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 1rem;
		margin: 0;
		padding: 0;
	}
	.primary-header-image {
		display: flex;
		justify-content: center;
	}
	blockquote {
		width: 95%;
		margin: 1rem auto;
		font-size: 1rem;
	}
	cite {
		font-size: 1rem;
	}
	h3 {
		font-size: 1.125rem;
	}
	h4 {
		font-size: 1rem;
	}
	.grid-3col-wrapper{
		grid-template-columns: 1fr;
	}
	th {
		display: none;
	}
	td {
		display: grid;
		grid-template-columns: 12ch auto;
		padding: .5em;
	}
	td::before {
		content: attr(data-cell);
		font-weight: 700;
	}
}



ul>li>a {
	color: var(--viridian-07);
	text-decoration: none;
}

ul>li>a:hover,
ul>li>a:focus,
ul>li>a:active {
	text-decoration: none;
	color: var(--veridian-opposite);
}

a.button,
input[type="submit"] {
	background-color: var(--viridian-green);
	color: var(--color-white);
	padding: 0.25rem 1rem;
	border: 1px solid var(--primary-color);
	border-radius: 4px;
	cursor: pointer;
}

a.button:hover,
a.button:active,
input[type="submit"]:hover {
	background-color: var(--viridian-05);
	color: var(--primary-color);
}



/************ Footer ************/

footer {
	display:grid;
	grid-template-columns: repeat(3.1fr);
	background-color: var(--viridian-02);
	color: var(--tertiary-color);
	line-height: 1.5;
	place-items: top center;
	padding-bottom: 2em;
}

footer a {
	text-decoration: none;
	color: var(--viridian-07);
}

footer a:hover {
	text-decoration: underline;
	color: var(--viridian-01);
}

.ft-title {
	color: var(--color-white);
	padding-bottom: 0.625rem;
}

.ft-main {
	padding: 1.25rem 1.875rem;
	display: flex;
	flex-wrap: wrap;
	max-width: var(--content-max-width);
	justify-content: space-around;
	margin-inline: auto;
}

.ft-social {
	padding: 0 1.875rem 1.25rem;
}

.ft-social-list {
	display: flex;
	justify-content: center;
	border-top: 2px var(--viridian-opposite) solid;
	padding-top: 1.25rem;
}

.ft-social-list li {
	margin: 0.5rem;
	font-size: 1.25rem;
}

/* Footer legal */
.footer-legal {
	padding: 0.9375rem 1.875rem;
	color: var(--tertiary-color);
	font-size: .65rem;
	text-align: center;
}

.ft-image {
	width: 180px;
	height: 28px;
}
.ft-main-item{
	justify-self: center;
}
.ft-main-item a:hover,
.ft-main-item a:focus,
.ft-main-item a:active {
	text-decoration: none;
	color: var(--veridian-opposite-3);
}

.ft-social-list a {
	color: var(--viridian-opposite);
	text-decoration: none;
}

.ft-social-list a:hover,
.ft-social-list a:focus,
.ft-social-list a:active {
	text-decoration: none;
	color: var(--veridian-opposite-4);
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}