/** 
 * Theme Name: Penguin
 * Author: Central States Marketing
 * Author URI: https://www.centralstatesmarketing.com/
 * Description: This site was built by Central States Marketing. For more information about the site or this custom WordPress theme, you can contact Central States Marketing at: info@csm.marketing or call us at: 309-693-2345.
 * Version: 1.0.0
 *
 * @package penguin
 * @charset "UTF-8"
 */

/**
 * Table of Contents
 * -----------------
 * 1. Global Settings
 * 2. Typography
 * 3. Utils
 * 4. Site Header
 * 5. Drawer
 * 6. Hero Section
 * 7. About Section
 * 8. Banner Section
 * 9. Our Founder
 * 10. Events Section
 * 11. Featured Section
 * 12. Footer Page
 * 13. Admin Buttons
 */


/* ======================== */
/* 1. Global Settings */
/* ======================== */
:root {

  --violet: #370075;
  --yellow: #FFBB12;
  --lightgray: #f1f1f1;
  --gray: #8E8E9F;
  --lavender: #F4EFFA;
  --bg: #FFFFFF;
  --black: #000000;

  --shadow-color: rgba(0, 0, 0, 0.25);
  --shadow-color-hover: rgba(0, 0, 0, 0.4);

  --shadow: 0 0 10px var(--shadow-color);
  --shadow-hover: 0 0 10px var(--shadow-color-hover);
  --shadow-alt: 0 5px 10px var(--shadow-color); /* 5px is the vertical offset */

	--gutter: 2rem;

	--max-w-max: 115.2rem;
	--max-w-content: 82rem;
	--max-w-text: 50rem;

	--border-radius: 1rem;

	--ff-heading: 'ruddy', sans-serif;
	--ff-body: 'open-sans', sans-serif;

	--fs-xs: clamp(0.55rem, 0.20vw + 0.5rem, 0.8rem);
	--fs-sm: clamp(0.7rem, 0.25vw + 0.6rem, 0.9rem);
	--fs-base: clamp(0.85rem, 0.35vw + 0.7rem, 1.1rem);
	--fs-md: clamp(1rem, 0.5vw + 0.85rem, 1.4rem);
	--fs-lg: clamp(1.2rem, 0.8vw + 1rem, 1.75rem);
	--fs-xl: clamp(1.5rem, 1.1vw + 1.2rem, 2rem);
	--fs-2xl: clamp(1.75rem, 1.5vw + 1.4rem, 2.7rem);
	--fs-3xl: clamp(2rem, 2vw + 1.5rem, 3.6rem);
}

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

html {
	box-sizing: border-box;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--ff-body);
	font-size: var(--fs-base);
}

.container {
	max-width: var(--max-w-max);
	margin: 0 auto;
	padding: 4rem;
}

button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

b,
strong {
	font-weight: bolder;
}

embed,
iframe,
object,
img {
	display: block;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html:focus-within {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* === Template Specific === */
.post-edit-link {
	color: var(--violet) !important;
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	width: fit-content;
	padding: 0.5em 1em;
	border-radius: 0.5em;
	margin: 1em;
	text-decoration: none !important;
	background-color: var(--yellow);
	transition: 0.3s ease-in-out;
	z-index: 2;
	display: none;
}

/* ======================== */
/* 2. Typography */
/* ======================== */
:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ff-heading);
	line-height: 1;
}

h1 {
	font-size: var(--fs-3xl);
	font-weight: 700;
	margin: 0 0 1.5rem 0;
	letter-spacing: 2px;
	line-height: 149%;
}

h2 {
	font-size: var(--fs-2xl);
	font-weight: 500;
	margin: 0;
}

h3 {
	font-size: var(--fs-xl);
	font-weight: 400;
	text-transform: uppercase;
	margin: 0 0 1rem 0;
}

h4 {
	font-size: var(--fs-lg);
	font-weight: 600;
	margin: 0 0 0.75rem 0;
	font-family: var(--ff-body);
}

h5,
h6 {
	font-size: var(--fs-md);
	margin: 0 0 0.5rem 0;
}

p {
	font-size: var(--fs-base);
	font-weight: 400;
	line-height: 1.6;
	margin: 0 0 1rem 0;
	color: var(--gray);
	font-family: var(--ff-body);
}

ul li {
	font-weight: 500;
	letter-spacing: 1px;
	font-family: var(--ff-body);

}

a {
	text-decoration: none;
	transition: var(--transition);
	font-size: var(--fs-base);
}

a:has(svg) {
	display: flex;
}

/* ======================== */
/* 3. Utils */
/* ======================== */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

hr {
	width: 100%;
	border: none;
	height: 1px;
}

.btn, .button {
	color: var(--violet);
	padding: 0.5rem 1.05rem;
	border-radius: 10px;
	font-weight: 700;
	background-color: var(--bg);
	display: inline-block;
	align-self: flex-start;
	letter-spacing: 1.05px;
	min-width: 150px;
	text-align: center;
	cursor: pointer;
	transition: 0.4s;
}

.btn-yellow, .button {
	background-color: var(--yellow);
}

.btn-outlined {
	border: 1px solid var(--bg);
	background-color: transparent;
	color: var(--bg);
}

/* Button Hover */
.btn:hover, .button:hover {
	transform: scale(1.05);
}

.btn-outlined:hover {
	background-color: #ffffff2c;
}

.wrapper-max {
	max-width: var(--max-w-max);
	margin-inline: auto;
}

.wrapper-content {
	max-width: var(--max-w-content);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrapper-text {
	max-width: var(--max-w-text);
	margin-inline: auto;
}


/**************************************************
 * 4. === Site Header ===
 **************************************************/
.site-header-wrapper {
	position: sticky;
	top: 0;
	width: 100%;
	z-index: 1001;
	background-color: var(--violet);
	box-shadow: var(--shadow);
}

.site-header {
	position: relative;
	z-index: 10001;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
}

.site-branding {
	align-items: center;
	max-width: var(--max-w-max);
	display: flex;
	justify-content: space-between;
	padding: 1.5rem 3rem;
	margin-inline: auto;
	width: 100%;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.site-logo img {
	max-width: 10rem;
	width: 100%;
	transition: max-width 0.3s ease;
	object-fit: cover;
}

.logo-text {
	color: var(--bg);
	margin-bottom: 0;
	font-weight: 700;
	letter-spacing: 4.25px;
	font-size: var(--fs-md);
}

.logo-text span {
	font-size: var(--fs-2xl);
	font-weight: 700;
	letter-spacing: 6px;
}

.buttons {
	display: flex;
	column-gap: 2rem;
}

@media (max-width: 1024px) {
	.site-header {
		padding: 1rem 3rem;
		display: flex; 
		justify-content: space-between;
		align-items: center;
	}

	.site-branding {
		flex-direction: column;
		gap: 1rem;
		padding: 0;
		align-items: flex-start;
	}

	.buttons {
		gap: 1rem;
		display: none;
	}
}

@media (max-width: 768px) {
	
	.site-header {
		padding: 1rem 2rem;
		display: flex; 
		justify-content: space-between;
		align-items: center;
	}
	
	.site-branding {
		align-items: start;
	}
	
	.site-logo img {
		max-width: 7rem;
	}

	.logo-text {
		font-size: var(--fs-sm);
		letter-spacing: 3px;
	}

	.logo-text span {
		font-size: var(--fs-lg);
	}

}

@media (max-width: 500px) {
	.site-header {
		padding: 1rem;
	}
	
	.site-logo .logo-text {
		letter-spacing: 1px;
	}
	
	.logo-text span {
		letter-spacing: 2.5px;
	}
}

/* === Navigation === */
#site-navigation {
	margin: 0 auto;
	width: 100%;
	background: var(--bg);
}

#primary-menu {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
}

#primary-menu li {
	list-style: none;
}

#primary-menu li a {
	padding: 1.25rem 3rem;
	display: inline-block;
	text-decoration: none;
	color: var(--violet);
	font-weight: 700;
	transition: 0.4s;

}

#primary-menu li a:hover {
	color: var(--yellow);
}

#primary-menu li a.active {
    color: var(--yellow) !important;
}

.menu-chevron {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.3s ease;
}

.menu-item-has-children:hover .menu-chevron,
.menu-item-has-children.open .menu-chevron {
	transform: rotate(180deg);
	color: var(--yellow);
	/* Rotate when the submenu is open */
}

#menu-item-48 .sub-menu,
#menu-item-322 .sub-menu {
	max-width: min-content;
}

/* === Hamburger Menu === */
.hamburger-wrapper {
	cursor: pointer;
	display: none;
	position: relative;
	z-index: 11000;
}

.hamburger {
    position: relative;
    border: none;
    background: transparent;
}

.hamburger img {
	aspect-ratio: 1/1;
	max-width: 4rem;
	object-fit: cover;
}

.hamburger-wrapper.active .hamburger {
	filter: invert(1);
}

.no-scroll {
	overflow: hidden;
}

/* Submenu Container */
.menu-item-has-children ul {
	position: absolute;
	display: block;
	width: auto;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: 
		opacity 0.3s ease, 
		transform 0.3s ease, 
		max-height 0.3s ease;

	background-color: var(--bg);
	box-shadow: var(--shadow-alt);
	border-top: 3px solid var(--violet);
	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);
}

/* Reveal submenu on hover */
.menu-item-has-children:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	max-height: 500px; /* submenu height */
}

/* Submenu Items */
.menu-item-has-children ul li {
	width: 100%;
	border-top: 1px solid var(--lavender);
}

/* Submenu Links */
.menu-item-has-children ul li a {
	display: block;
	width: 100%;
	padding: 1rem;
	color: var(--violet);
	transition: color 0.3s ease;
}

/* Hover effect for submenu links */
.menu-item-has-children ul li a:hover {
	color: var(--yellow);
}

.main-navigation .menu-item:has(.sub-menu):hover .sub-menu {
	display: flex;
	flex-direction: column;
}

@media (max-width: 1024px) { 
	
	.site-header #site-navigation {
		display: none;
	}
	
	ul.sub-menu {
		display: none;
	}
	
	.hamburger-wrapper {
		display: block;
	}
	
	.buttons {
		display: none;
	}
	
	.menu-chevron {
		display: none;
	}
}

@media (max-width: 768px) {
	
	.site-logo img {
		max-width: 7rem;
	}

	.logo-text {
		font-size: var(--fs-sm);
		letter-spacing: 3px;
	}

	.logo-text span {
		font-size: var(--fs-lg);
	}

}

/**************************************************
 * 5. === Drawer ===*
 **************************************************/

.drawer-wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	height: 100%;
	padding: 3rem;
	color: var(--bg);
}

.drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0; /* Make sure it stretches across full screen */
	width: 100vw;
	height: 100dvh;
	background-color: var(--violet);
	z-index: 1002;
	transform: translateX(100vw); /* Start hidden off-screen to the right */
	transition: transform 0.3s ease-in-out;
	overflow-y: auto;
}

.drawer.is-open {
	transform: translateX(0); /* Slide in */
}

.drawer__menu-toggle {
	background: none;
	border: none;
}

.drawer__close {
	max-width: 3rem;
}

.drawer #site-navigation {
	background: var(--violet);
}

.drawer #site-navigation ul li a {
	color: var(--bg);
}

.drawer .menu-main-menu-container {
	height: 100%;
}

.drawer .menu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.drawer .menu-item a {
	display: block;
	font-size: var(--fs-2xl);
	padding-block: 1rem;
	font-weight: 700;
}

.drawer .sub-menu {
	display: none !important;
}

.drawer .sub-menu .menu-item a {
	padding: 0.5rem 0;
	font-size: var(--fs-md);
}

@media (max-width: 768px) {
	.drawer-wrapper {
		padding: 2rem;
	}
}

@media (max-width: 500px) {
	.drawer-wrapper {
		padding: 2rem 1rem;
	}
}

/****************************/
/** == ** Front Page ** == **/
/***************************/

/****************************/
/** 6. == ** Hero Section ** == **/
/***************************/
.hero-wrapper {
	display: flex;
	align-items: center;
	min-height: 70vh;
	background: var(--bg);
	/* use an image or gradient if needed */
	background-size: cover;
	background-position: center;
	position: relative;
	max-width: none;
}

.hero-wrapper::before {
	z-index: 0;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, var(--violet) 35%, transparent 65%);
}

.hero-content {
	margin-inline: auto;
    width: 100%;
    max-width: var(--max-w-max);	
	position: relative;
	z-index: 1;
}

.hero-title {
	font-weight: 700;
	margin-bottom: 1rem;
	color: var(--bg);
	max-width: 45rem;
	opacity: 0;
  	animation: fadeUp 1s ease-out forwards;
}

.hero-title span {
	color: var(--yellow);
}

@media (max-width: 2560px) {
	.hero-wrapper {
		min-height: 60vh;
	}
}

@media (max-width: 1800px) {
	.hero-wrapper {
		min-height: 70vh;
	}
}

@media (max-width: 1024px) {
	.hero-wrapper {
		min-height: 70vh;
	}
}

@media (max-width: 768px) {
	.hero-wrapper {
		padding: 2rem;
		min-height: 60vh;
	}
}

@media (max-width: 500px) {
	.hero-wrapper {
		min-height: 50vh;
	}
}

/****************************/
/* 7. ** About Us **  */
/***************************/

.about-wrapper {
	padding: 5rem;
	position: relative;
	min-height: 30rem;
	background-color: var(--bg);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	column-gap: 4rem
}

.stacked-images {
	position: relative;
}

.stacked-images img {
	object-fit: cover;
	width: 100%;
	border-radius: var(--border-radius);
}

.about-title {
	color: var(--violet);
}

.about-title span {
	font-weight: 700;
}

.about-content {
	animation: fadeUp 1s ease-out forwards;
  	animation-delay: 0.3s; /* Optional: delay for effect */
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
}
.about-content p {
	margin-bottom: 0;
}

.about-quote {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	align-items: center;
	padding: 2rem;
	background: var(--violet);
	border-radius: var(--border-radius);
}

.about-quote svg {
	max-width: 2.5rem;
	fill: rgba(255,255,255,0.5);
}

.about-quote p {
	color: var(--bg);
}

@media (max-width: 1024px) {
	.about-wrapper {
		column-gap: 2rem;
		padding: 3rem;
	}
}

@media (max-width: 768px) {
	.about-wrapper {
		grid-template-columns: 1fr;
		row-gap: 2rem;
		padding: 2rem;
		text-align: center;
	}

	.about-content {
		align-items: center;
		row-gap: 1.5rem;
	}

	.about-content a {
		margin-inline: auto;
	}
	
	.about-quote {
		flex-direction: column;
	}

	.stacked-images img {
		max-width: 25rem;
		margin-inline: auto;
	}

}

/****************************/
/* 8. == ** Banner ** == **/
/***************************/
.banner {
	position: relative;
	background-color: var(--violet);
}

.banner-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.banner-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0rem clamp(1rem, 5vw, 5rem);
	align-items: center;
	animation: fadeUp 1s ease-out forwards;
  	animation-delay: 0.3s; /* Optional: delay for effect */
}

.banner-card h4 {
	font-weight: 600;
	margin-bottom: 0rem;
}

.banner-card.chapter {
	border-right: 1px solid var(--yellow);
}

.banner-card.volunteer {
	border-left: 1px solid var(--yellow);
}

.banner-card img {
	aspect-ratio: 1/1;
	max-width: 8rem;
	margin: 0 auto;
}

.banner-card h4,
.banner-card p {
	color: white;
	text-align: center;
}

.banner-card a {
	margin: 0 auto;
}


@media (max-width: 768px) {
	.banner-wrapper {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 0rem;
		padding: 2rem;
	}

	.banner-card {
		padding: 2rem;
		border: none;
	}

	.banner-card img {
		max-width: 6rem;
	}

	.banner-card.chapter {
		border-right: none;
	}

	.banner-card.volunteer {
		border-left: none;
	}

	.banner-card:not(:first-child) {
		border-top: 1px solid var(--yellow);
	}
}

/****************************/
/* 9. ** Our Founder **  */
/***************************/
.founder-wrapper {
	padding: 5rem;
	position: relative;
	background-color: var(--bg);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	column-gap: 4rem;
}

.founder-image img {
	object-fit: cover;
	object-position: top;
	aspect-ratio: 3/2;
	width: 100%;
	border-radius: var(--border-radius);
}

.founder-content {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	animation: fadeUp 1s ease-out forwards;
  	animation-delay: 0.3s; /* Optional: delay for effect */
}

.founder-title {
	color: var(--violet);
	font-weight: 400;
}

.founder-title span {
	font-weight: 700;
}

@media (max-width: 1024px) {
	.founder-wrapper {
		column-gap: 2rem;
		padding: 3rem;
	}
}

@media (max-width: 768px) {
	.founder-wrapper {
		grid-template-columns: repeat(1, 1fr);
		row-gap: 2rem;
		padding: 2rem;
		text-align: center;
	}

	.founder-content {
		align-items: center;
		/* center content in single column */
		row-gap: 1.5rem;
	}

	.founder-content a {
		margin-inline: auto;
	}

	.founder-image img {
		margin-inline: auto;
		aspect-ratio: 3/2;
		object-fit: cover;
		object-position: top;
	}

}


/****************************/
/* ** 10. Events Section ** */
/***************************/
.upcoming-events-wrapper {
	padding: 5rem;
	position: relative;
	background-color: var(--bg);
}

.upcoming-header {
	display: flex;
	align-items: center;
	column-gap: 2rem;
	margin-bottom: 2rem;
}

.upcoming-header hr {
	background-color: var(--lavender);
}

.upcoming-title {
	color: var(--violet);
	font-weight: 400;
	min-width: max-content;
}

.upcoming-title span {
	font-weight: 700;
}

.upcoming-events {
	display: grid;
	grid-template-columns: 1fr 1fr 0.6fr;
	align-items: center;
	gap: 1rem;
}

.upcoming-event {
	background-color: var(--violet);
	padding: 2rem;
	border-radius: var(--border-radius);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	transition: 0.4s;
	border: 3px solid var(--violet);
	cursor: pointer;
	animation: fadeUp 1s ease-out forwards;
  	animation-delay: 0.3s; /* Optional: delay for effect */
}

.upcoming-event:hover {
	border: 3px solid var(--yellow);
}

.view-events {
	background-color: var(--bg);
	border: 3px solid var(--violet);
	height: 100%;
}

.view-events:hover {
  border-color: var(--yellow);
}

.view-events .next-events h4, 
.view-events .next-events p {
	color: var(--violet) !important;
}

.view-events .next-events hr {
	background-color: var(--violet);
}

.upcoming-event:hover img {
	transform: scale(1.05);
}

.upcoming-event h3, .upcoming-event p {
	color: var(--yellow);
	margin-bottom: 0.5rem;
	font-family: var(--ff-body);
}

.upcoming-event p {
	font-size: var(--fs-xs);
	text-transform: uppercase;
}

.upcoming-event h4 {
	color: var(--bg);
}

.upcoming-event img {
	aspect-ratio: 1/1;
	max-width: 3rem;
	transition: 0.4s;
}

.next-events .header {
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
	align-items: center;
}

.next-events p {
	min-width: max-content;
}

.next-events hr {
	background-color: var(--yellow);
	max-width: 3rem;
	margin: 0 0 0.5rem 0;
}

@media (max-width: 1024px) {
	.upcoming-events {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (max-width: 768px) {

	.upcoming-events-wrapper {
		padding: 2rem;
		/* reduce padding for small screens */
	}

	.upcoming-event {
		padding: 1rem;
	}

	.upcoming-event img {
		max-width: 2.5rem;
	}
}

@media (max-width: 500px) {
	
	.upcoming-events-wrapper {
		padding: 1rem;
		/* reduce padding for small screens */
	}

}

/****************************/
/* 11. Featured Video Section */
/***************************/
.featured-video {
	position: relative;
}

.featured-video::before {
	z-index: 0;
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50%;
	width: 100%;
	background: var(--lavender);
}

.video-header {
	display: flex;
	justify-content: center;
	column-gap: 2rem;
	margin-bottom: 3rem;
	align-items: center;
}

.video-title {
	border-right: 1px solid var(--lavender);
	padding-right: 2rem;
	color: var(--violet);
	font-weight: 400;
}

.video-title span {
	font-weight: 700;
}

.featured-video iframe {
	border-radius: var(--border-radius);
	width: 100%;
	max-width: var(--max-w-content);
	margin: 0 auto;
	aspect-ratio: 2/1;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

@media (max-width: 768px) {

	.featured-video-wrapper {
		padding: 2rem;
	}
	
}

@media (max-width: 500px) {

	.video-header {
		flex-direction: column;
		text-align: center
	}
	
	.video-title {
		border-right: none;
		border-bottom: 1px solid var(--lavender);
		padding-right: 0;
		padding-bottom: 1rem;
	}
	
}


/****************************/
/** 12. Footer  **/
/***************************/
.site-footer-wrapper {
	background-color: var(--violet);
	padding-left: 5rem;
	padding-top: 5rem;
	padding-right: 5rem;
	padding-bottom: 1rem;
}

.site-footer {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	max-width: var(--max-w-max);
	margin-inline: auto;
	width: 100%;
}

.footer-branding {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.footer-socials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	max-width: 5rem;
}

.site-footer #site-navigation {
	background-color: var(--violet);
}

.site-footer #primary-menu li a {
	color: var(--bg);
	font-size: var(--fs-sm);
}

.footer-credits {
	text-align: center;
}

.footer-credits a {
	color: var(---gray);
}

.site-footer #site-navigation .menu-item-has-children ul {
	display: none;
}

.site-footer .menu-chevron {
	display: none;
}

@media (max-width: 900px) {
	.site-footer #primary-menu {
		flex-direction: column;
	}
}

@media (max-width: 768px) {
	.site-footer-wrapper {
		padding-left: 2rem;
		padding-right: 2rem;
		padding-top: 3rem;
	}

	.footer-branding {
		flex-direction: column;
		row-gap: 1rem;
		justify-content: center;
	}
	
	.site-footer #primary-menu li a {
	font-size: var(--fs-base);
}

	.site-footer {
		row-gap: 2rem;
	}

	.site-footer #site-navigation {
		margin-top: 2rem;
	}
}

/****************************/
/** 13. Admin Buttons  **/
/***************************/

.admin-slideout-container {
position: fixed;
bottom: 1.11rem;
left: 0;
z-index: 9998;
width: 13.89rem;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.admin-slideout-container.is-open {
transform: translateX(0);
}
.admin-slideout-toggle {
position: absolute;
top: 0;
left: 100%;
width: 1.39rem;
height: 1.67rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 0.44rem 0.44rem 0;
cursor: pointer;
box-shadow: 0.11rem 0 0.28rem oklch(14.5% 0 0 / 10%);
transition: background-color 0.3s ease;
background-color: var(--yellow);
color: oklch(14.5% 0 0);
}
.admin-slideout-toggle:hover {
background-color: oklch(85.2% 0.199 91.936);
}
.admin-slideout-container.is-open .admin-slideout-toggle {
background-color: var(--violet);
color: var(--yellow);
}
.admin-slideout-icon {
font-size: 1rem;
font-weight: bold;
}
.admin-button-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.33rem;
padding: 0.67rem;
background-color: var(--violet);
border-radius: 0 0 0.56rem 0;
box-shadow: 0 0 0.56rem oklch(14.5% 0 0 / 20%);
}
.admin-button-grid a {
text-decoration: none!important;
}
.admin-button {
padding: 0.44rem 0.67rem;
text-decoration: none;
border-radius: 0.28rem;
font-size: 0.72rem;
font-family: sans-serif;
transition: all 0.3s ease;
border-width: 0.11rem;
border-style: solid;
text-align: center;
}
.admin-button-dashboard {
grid-column: 1 / -1;
background-color: var(--yellow);
}
.admin-button-edit-page {
background-color: var(--yellow);
}
.admin-button-edit-theme {
background-color: var(--yellow);
}

/* === Inside Pages === */

.inner-container {
	max-width: var(--max-w-content);
	margin: 0 auto;
	padding: 4rem;
}

.entry-header {
	display: none;
}

.content ul li {
	color: var(--gray);
}

.content a {
	color: var(--violet);
	text-decoration: underline;
	font-weight: 600;
}

.image-right img {
	 position: absolute;
    top: -4rem;
    right: -4rem;
    z-index: -1;
    max-width: 50rem !important;
    width: 100%;
}

.image-left img {
	position: absolute;
    top: -4rem;
    left: -4rem;
    object-fit: cover;
    transform: scaleX(-1);
    z-index: -1;
    max-width: 50rem !important;
    width: 100%;
}

.current-chapters p {
	margin-bottom: 0.3rem !important;
}

/*  Kadence */
.wp-block-embed iframe {
	height: 100% !important;
	width: 100% !important;
	aspect-ratio: 16/9;
	border-radius: var(--border-radius);
}

.kt-blocks-accordion-header {
	border-radius: var(--border-radius) !important;
}

.kt-accordion-panel-inner {
	margin-top: 1rem;
}

/*  Kadence End */
@media (max-width: 768px) {
	.inner-container {
			padding: 3rem;
	}
	
	.image-left img {
    	top: -3rem;
    	left: -3rem;
	}
	
	 .image-right img {
    	top: -3rem;
    	right: -3rem;
	}
}

@media (max-width: 500px) {
	.inner-container {
			padding: 2rem;
	}
	
	.image-left img {
    	top: -2rem;
    	left: -2rem;
	}
	
	 .image-right img {
    	top: -2rem;
    	right: -2rem;
	}
}

/*  === Map SVG === */
.mapsvg-wrap .mapsvg {
	border-radius: var(--border-radius);
}

/* === 404 Error Page === */
.upcoming-events-wrapper {
	position: relative;
	background-color: var(--bg);
}

.error-page {
	text-align: center;
}

/* === Keyframes === */
/* Fade Up */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Live Fixes === */

/* === Testimonials ===  */
.testimonial {
	margin: 0 0 2rem 0;
		background: var(--bg);
	padding: 2rem;
	border-radius: var(--border-radius);
	color: var(--violet);
	border: 1px solid rgba(55, 0, 117, 0.15);
}

.testimonial-name {
	font-weight: bold;
}

.testimonial-heading {
	display: none;
}

.testimonial-content p {
	color: var(--violet);
}

/* === Gravity Forms === */
.gf-form-title {
	font-weight: bold;
	margin-bottom: 2rem;
	color: var(--violet);
}

.gform-body input, .gform-body textarea {
	border: none;
    padding: 1rem !important;
    border-radius: 1rem;
	background: var(--bg);
	border: 1px solid rgba(55, 0, 117, 0.15);
}

.gform-body input:focus-visible, .gform-body textarea:focus-visible {
	outline: 1px solid rgba(55, 0, 117, 0.15);
}

.button {
	border: none;
}

.gfield_label {
	color: var(--violet);
}

.gfield_required {
	color: var(--yellow) !important;
}