@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	--theme-color1: oklch(0.21862 0.06038 259.33);
	--theme-color2: oklch(0.49201 0.11793 248.63);
	--theme-color4: oklch(0.62 0.23 25);
}

body {
	font-family: 'Poppins', sans-serif;
	color: var(--theme-color3);
}

.wrapper { max-width: 1400px; }

#title img { max-height: 50px; }

#title {
	font-size: min(85px, 12vw);
	line-height: 1;
}

.collapse #logo, .collapse #title { font-size: 2em; }

.custom_button, .cms-button { background-color: var(--theme-color4); }

:is(.custom_button, .cms-button):hover, :is(.custom_button, .cms-button):active {
	background-color: oklch(from var(--theme-color4) calc(l - 0.13) calc(c - 0.05) h);
	color: white;
}

#site-identity .slogan {
	color: var(--theme-color4);
	padding-left: 4px;
	line-height: 1;
	margin-top: -10px;
}

.collapse #site-identity .slogan {
	margin-top: 0;
	padding-left: 1px;
}

#topbar, footer {
	background-image: none;
	background-color: var(--theme-color1);
}

#topbar nav > ul > li > a:hover {
	text-decoration: underline;
	color: inherit;
}

.navbar2 > ul {
	font-family: 'Arial Narrow', sans-serif;
	display: flex;
	justify-content: end;
	line-height: normal;
	align-items: center;
	flex-wrap: wrap;
}

.navbar2 > ul > li > a {
	font-weight: normal;
	padding: 10px 15px;
}

.navbar2 > ul > li > a.current { color: inherit; }

.navbar2 li:has(.custom_button) + li:has(.custom_button) { margin-left: 5px; }

.navbar2 > ul > li:first-of-type { margin-right: auto; }

.navbar2 > ul > li:first-of-type .custom_button { background-color: var(--theme-color2); }

.navbar2 > ul > li .custom_button[href="/?page=store"]::before {
	content: "\F0111 "; /*cart-outline*/
	font-family: 'Material Design Icons';
	margin-right: 5px;
}

.navbar2 > ul > li:first-of-type .custom_button:hover { background-color: oklch(from var(--theme-color2) calc(l - 0.13) calc(c - 0.05) h); }

.mobile-topbar-close {
	opacity: 0;
	visibility: hidden;
	position: fixed;
	cursor: pointer;
	color: var(--theme-color3);
	font-size: 21px;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 15px 20px;
}

#topbar::before, footer::before { content: none; }

nav ul ul {
	left: auto;
	right: 0;
	top: 25px;
}

nav ul ul a {
	white-space: nowrap;
	text-transform: unset;
	font-family: 'Arial Narrow', sans-serif;
}

#hero {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-image: linear-gradient(to right, transparent, var(--theme-color1) 90%), url(48-star_American_Flag.jpg);
	background-size: cover;
	background-position: center;
	padding: min(3vw, 20px) min(3vw, 40px);
	padding-bottom: 0;
	color: white !important;
	text-shadow: 0px 0px 3px black;
	font-size: clamp(13px, 2vw, 20px);
}


#hero > img {
	height: clamp(200px, 50vw, 500px);
	flex-shrink: 0;
	align-self: flex-end;
}

#hero .copy { padding-bottom: max(30px, 3vw); }

#hero h2 { font-size: 150%; }

#hero h3 {
	color: white;
	font-size: 120%;
}

#hero + .wrapper { margin-top: clamp(-75px, -3.5vw, -10px); }

.is_frontpage .copy-container { display: block; }

.is_frontpage .marquee { margin-top: clamp(10px, 3vw, 60px); }

#typewriter {
	padding: 30px 15px;
	background-color: var(--theme-color2);
	border-radius: 6px;
	font-size: clamp(20px, 2.8vw, 30px);
	color: white;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
}

@media screen and (max-width: 600px) {
	.navbar2 .custom_button { padding: 5px 7px; }
	
	.navbar2 li:has(.custom_button) + li:has(.custom_button) { margin-left: 0; }
}

.marquee::before { background-color: var(--theme-color4); }

.is_frontpage .page strong { color: var(--theme-color2); }

.is_frontpage p:has(+ h1) { margin-bottom: 0; }

.featured:nth-of-type(odd) { background-color: #eee; }

#featured1 .box-hero-image {
	aspect-ratio: 2/1;
	background-size: cover;
	border-radius: 10px;
}

#featured2 .autocounter tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2em;
}

#featured2 .autocounter td {
	background-color: var(--theme-color2);
	color: white;
    border-radius: 10px;
	padding: 0.9em;
}

#featured2 .autocounter h2 { font-size: 32px; }

#featured2 .autocounter p {
	padding-bottom: 15px;
	color: rgba(255,255,255, 0.8);
}

header nav li a[target=_blank]::after { content: ''; }

/*.sidebar <ul> that doesn't have any <li> direct children which themselves do not have a direct <a> child*/
ul:not(:has(> li:not(:has(> a)))) { padding-left: 0; }

footer nav .custom_button { all: unset; }

footer .copy li {
	width: 100%;
	margin: 0;
}

footer .copy ul { padding-left: 0; }

footer { position: relative; }

footer:before {
	content: '';
	background: url("/themes/Mimosan/kw_nat_memorial.png");
	opacity: 0.2;
	background-size: cover;
	background-position: center;
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1023px) {
	footer a { font-size: 14px !important; }
}

.box-hero-image { background-size: contain; }

.box {
	background-color: #f8f8f8;
	border-radius: 15px;
	padding: 15px;
	box-shadow: 0 3px 3px rgba(0,0,0,.25);
	border: 2px solid #eee;
}

.box .content > h2 { text-align: center; }

#back-to-top {
	position: fixed;
	bottom: 100px;
	right: 100px;
	z-index: 4;
	cursor: pointer;
}

#back-to-top i { position: absolute; }

#back-to-top i:first-of-type {
	color: var(--theme-color1);
	font-size: 60px;
	top: 0;
	left: 0;
}

#back-to-top i:last-of-type {
	color: white;
	font-size: 30px;
	top: 20px;
	left: 15px;
}

.wow-removed {
	animation-name: none !important;
	visibility: visible !important;
}

@media screen and (max-width: 1023px) {
    #topbar nav ul ul {
		opacity: 0;
		visibility: hidden;
        position: fixed !important;
		height: 100%;
		top: 0;
		left: 0;
		padding: 30px;
		background-color: rgba(255,255,255,0.97);
		transition: all;
		transition-duration: .5s;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    }

	#topbar nav ul ul li {
        width: 100%;
		text-align: center;
    }

	#topbar nav ul ul,
	.mobile-topbar-close {
		transition: all;
		transition-duration: .3s;
	}

	#topbar.active nav ul ul,
	#topbar.active .mobile-topbar-close {
		opacity: 1;
		visibility: visible;
	}

	#featured2 .autocounter tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 900px) {
	#pg_home .two-column { column-count: 1; }
}

@media screen and (max-width: 500px) {
	/* .navbar2 > ul { justify-content: center; } */

	/* .navbar2 > ul > li:first-of-type { margin-right: inherit; } */

	#featured2 .autocounter tr { grid-template-columns: repeat(1, minmax(0, 1fr)); }

	footer p { text-align: center !important; }
}