/* Guyra & Community Progress Association
   Main website styles — Bootstrap 5.3 companion stylesheet */

:root
{
	--guyra-olive: #77774f;
	--guyra-olive-dark: #4f5236;
	--guyra-brown: #735f4e;
	--guyra-taupe: #a99988;
	--guyra-gold: #d8ad50;
	--guyra-cream: #f7f3ea;
	--guyra-white: #ffffff;
	--guyra-ink: #252820;
	--guyra-muted: #62655d;
	--guyra-border: #ded8cb;
	--guyra-shadow: 0 14px 40px rgba(48, 45, 35, 0.11);
	--guyra-radius: 18px;
	--guyra-transition: 180ms ease;
}

html
{
	scroll-behavior: smooth;
}

body
{
	background: var(--guyra-cream);
	color: var(--guyra-ink);
	font-family: "Fira Sans", Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0;
	overflow-x: hidden;
}

img
{
	max-width: 100%;
}

a
{
	color: var(--guyra-olive-dark);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover
{
	color: var(--guyra-brown);
}

:focus-visible
{
	border-radius: 3px;
	outline: 3px solid var(--guyra-gold);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	color: var(--guyra-olive-dark);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.16;
}

h1
{
	font-size: clamp(2.2rem, 5vw, 4rem);
	margin-bottom: 1.25rem;
}

h2
{
	font-size: clamp(1.7rem, 3.5vw, 2.65rem);
	margin: 2.5rem 0 1rem;
}

h3
{
	font-size: clamp(1.25rem, 2.4vw, 1.65rem);
}

p,
li
{
	max-width: 76ch;
}

.btn
{
	border-radius: 999px;
	font-weight: 700;
	min-height: 46px;
	padding: 0.68rem 1.35rem;
	transition: background-color var(--guyra-transition), border-color var(--guyra-transition), color var(--guyra-transition), transform var(--guyra-transition);
}

.btn:hover
{
	transform: translateY(-2px);
}

.btn-primary,
.btn-slideshow
{
	background: var(--guyra-gold);
	border-color: var(--guyra-gold);
	color: #252010;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-slideshow:hover,
.btn-slideshow:focus
{
	background: #e6be67;
	border-color: #e6be67;
	color: #1c190e;
}

/* Header and navigation */

#container_header_full
{
	background: rgba(255, 255, 255, 0.97) !important;
	box-shadow: 0 4px 24px rgba(35, 37, 28, 0.09) !important;
	transition: transform 220ms ease;
}

#container_header_full.hide
{
	transform: translateY(-100%);
}

#header
{
	align-items: center;
	margin: 0;
	min-height: 98px;
}

#logo
{
	padding: 0.6rem 0;
}

#logo img
{
	display: block;
	max-height: 78px;
	width: auto;
}

.navbar
{
	padding: 0.65rem 0;
}

.navbar-nav
{
	align-items: center;
	gap: 0.1rem;
}

.navbar .nav-link
{
	border-radius: 999px;
	color: var(--guyra-ink);
	font-size: 0.96rem;
	font-weight: 600;
	padding: 0.72rem 0.85rem !important;
	text-decoration: none;
	transition: background-color var(--guyra-transition), color var(--guyra-transition);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active
{
	background: var(--guyra-olive-dark);
	color: var(--guyra-white);
}

.dropdown-menu
{
	border: 1px solid var(--guyra-border);
	border-radius: 14px;
	box-shadow: var(--guyra-shadow);
	min-width: 230px;
	padding: 0.55rem;
}

.dropdown-menu .nav-link
{
	border-radius: 9px;
	padding: 0.62rem 0.8rem !important;
}

.navbar-toggler
{
	border: 2px solid var(--guyra-olive-dark);
	border-radius: 10px;
	min-height: 46px;
	min-width: 48px;
}

/* Home hero */

.container_slideshow_full
{
	background: var(--guyra-olive-dark);
}

#home_slideshow .carousel-item
{
	background: #24271e;
	min-height: clamp(440px, 65vw, 760px);
	position: relative;
}

#home_slideshow .carousel-item::after
{
	background: linear-gradient(90deg, rgba(25, 28, 19, 0.74) 0%, rgba(25, 28, 19, 0.26) 55%, rgba(25, 28, 19, 0.06) 100%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

#home_slideshow .carousel-item img
{
	height: clamp(440px, 65vw, 760px);
	object-fit: cover;
}

#home_slideshow .carousel-caption
{
	bottom: auto;
	display: block;
	left: max(7%, calc((100vw - 1320px) / 2));
	max-width: 680px;
	padding: 0 1.25rem;
	right: auto;
	text-align: left;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

#home_slideshow .carousel-caption h5
{
	color: var(--guyra-white);
	font-size: clamp(2.35rem, 6vw, 5.5rem);
	font-weight: 800;
	line-height: 0.98;
	margin-bottom: 1rem;
	text-shadow: 0 3px 20px rgba(0, 0, 0, 0.28);
}

#home_slideshow .carousel-caption p
{
	color: var(--guyra-white);
	font-size: clamp(1.05rem, 2vw, 1.45rem);
	line-height: 1.45;
	margin-bottom: 1.5rem;
}

.carousel-control-prev,
.carousel-control-next
{
	width: 7%;
}

/* Inner page banners */

.container_banner_photo_full
{
	background: var(--guyra-olive-dark);
	height: clamp(230px, 33vw, 470px);
	overflow: hidden;
	position: relative;
}

.container_banner_photo_full::after
{
	background: linear-gradient(180deg, transparent 45%, rgba(40, 43, 31, 0.34));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.container_banner_photo_full > img
{
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Main content */

.container_content_full,
.container_content_full_home
{
	background: var(--guyra-cream);
	padding: clamp(3.5rem, 8vw, 7rem) 0;
}

#main_content,
#main_content_home
{
	font-size: 1.08rem;
}

#main_content > :first-child,
#main_content_home > :first-child
{
	margin-top: 0;
}

#main_content h1::after,
#main_content_home h1::after,
.container_promos_full h1::after
{
	background: var(--guyra-gold);
	border-radius: 99px;
	content: "";
	display: block;
	height: 5px;
	margin-top: 0.55rem;
	width: 72px;
}

#main_content blockquote,
#main_content_home blockquote
{
	background: var(--guyra-white);
	border-left: 6px solid var(--guyra-gold);
	border-radius: 0 var(--guyra-radius) var(--guyra-radius) 0;
	box-shadow: var(--guyra-shadow);
	font-size: 1.15rem;
	margin: 2rem 0;
	padding: 1.4rem 1.6rem;
}

#main_content table
{
	background: var(--guyra-white);
	border-radius: 12px;
	overflow: hidden;
}

#main_content th
{
	background: var(--guyra-olive-dark);
	color: var(--guyra-white);
}

#main_content hr
{
	border-color: var(--guyra-border);
	margin: 3rem 0;
	opacity: 1;
}

/* Reusable cards, listings, news, events and resources */

.card,
.listing_item,
.listing_category_item,
.event_item,
.news_item,
.resource_item
{
	background: var(--guyra-white);
	border: 1px solid var(--guyra-border);
	border-radius: var(--guyra-radius);
	box-shadow: 0 7px 24px rgba(48, 45, 35, 0.07);
	height: 100%;
	overflow: hidden;
	transition: box-shadow var(--guyra-transition), transform var(--guyra-transition);
}

.card:hover,
.listing_item:hover,
.listing_category_item:hover,
.event_item:hover,
.news_item:hover,
.resource_item:hover
{
	box-shadow: var(--guyra-shadow);
	transform: translateY(-5px);
}

.card img,
.listing_item img,
.listing_category_item img,
.event_item img,
.news_item img,
.resource_item img
{
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.card-body,
.listing_item_content,
.listing_category_item_content,
.event_item_content,
.news_item_content,
.resource_item_content
{
	padding: 1.4rem;
}

/* Latest news */

.container_promos_full
{
	background: var(--guyra-white);
	padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.container_promos_full .row
{
	row-gap: 1.5rem;
}

.container_promos_full h1
{
	margin-bottom: 2rem;
}

.promo_cell
{
	background: var(--guyra-cream);
	border-radius: var(--guyra-radius);
	box-shadow: 0 8px 25px rgba(48, 45, 35, 0.08);
	height: 100%;
	overflow: hidden;
	transition: box-shadow var(--guyra-transition), transform var(--guyra-transition);
}

.promo_cell:hover
{
	box-shadow: var(--guyra-shadow);
	transform: translateY(-6px);
}

.promo_cell_photo
{
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.promo_cell_photo img
{
	height: 100%;
	object-fit: cover;
	transition: transform 450ms ease;
	width: 100%;
}

.promo_cell:hover .promo_cell_photo img
{
	transform: scale(1.045);
}

.promo_cell_name
{
	padding: 1.35rem;
}

.promo_cell_name a
{
	text-decoration: none;
}

.promo_cell_name h3
{
	margin: 0;
}

/* Full-width home call to action */

.home_background_photo
{
	align-items: center;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	display: flex;
	justify-content: center;
	min-height: clamp(390px, 48vw, 620px);
	padding: 4rem 1.25rem;
	position: relative;
	text-align: center;
}

.home_background_photo::before
{
	background: rgba(54, 57, 40, 0.7);
	content: "";
	inset: 0;
	position: absolute;
}

.home_background_photo_text
{
	color: var(--guyra-white);
	max-width: 760px;
	position: relative;
	z-index: 1;
}

.home_background_photo_text h2
{
	color: var(--guyra-white);
	font-size: clamp(2.1rem, 5vw, 4rem);
	margin-top: 0;
}

.home_background_photo_text p
{
	font-size: 1.15rem;
	margin-left: auto;
	margin-right: auto;
}

/* Contact page */

#contact_page_map
{
	background: var(--guyra-white);
	border-radius: var(--guyra-radius);
	box-shadow: var(--guyra-shadow);
	overflow: hidden;
}

#contact_page_map iframe
{
	border: 0;
	display: block;
	min-height: 420px;
	width: 100%;
}

#plain_page_photos img
{
	border-radius: var(--guyra-radius);
	box-shadow: var(--guyra-shadow);
	margin-bottom: 1.5rem;
	width: 100%;
}

label
{
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.form-control,
.form-select
{
	background: var(--guyra-white);
	border: 1px solid #aaa797;
	border-radius: 10px;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
}

.form-control:focus,
.form-select:focus
{
	border-color: var(--guyra-olive-dark);
	box-shadow: 0 0 0 0.25rem rgba(119, 119, 79, 0.2);
}

textarea.form-control
{
	min-height: 150px;
}

/* Footer */

.container_footer_full
{
	background: var(--guyra-olive-dark);
	color: #f5f1e8;
	padding: clamp(3.5rem, 7vw, 5.5rem) 0;
	position: relative;
}

#footer_links
{
	row-gap: 2rem;
}

#footer_links h2,
.footer_title h2
{
	color: var(--guyra-white);
	font-size: 1.2rem;
	letter-spacing: 0.06em;
	margin: 0 0 1.1rem;
	text-transform: uppercase;
}

#footer_links a
{
	color: #f5f1e8;
	text-decoration-color: rgba(245, 241, 232, 0.45);
}

#footer_links a:hover
{
	color: #ffffff;
	text-decoration-color: var(--guyra-gold);
}

#footer_links ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer_links li
{
	margin-bottom: 0.55rem;
}

#footer_logo img
{
	filter: brightness(0) invert(1);
	margin-bottom: 1rem;
	max-width: 230px;
}

#footer_contacts > div
{
	align-items: center;
	display: flex;
	gap: 0.7rem;
	margin-bottom: 0.7rem;
}

.facebook_link,
.instagram_link,
.youtube_link
{
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	display: inline-flex;
	height: 48px;
	justify-content: center;
	margin: 0 0.45rem 0.45rem 0;
	text-decoration: none;
	transition: background-color var(--guyra-transition), border-color var(--guyra-transition), transform var(--guyra-transition);
	width: 48px;
}

.facebook_link:hover,
.instagram_link:hover,
.youtube_link:hover
{
	background: var(--guyra-gold);
	border-color: var(--guyra-gold);
	color: #201d13 !important;
	transform: translateY(-3px);
}

.footer_gum_leaves
{
	opacity: 0.12;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: min(320px, 35vw);
}

.container_footer_credits_full
{
	background: #303326;
	color: #e5e1d8;
	font-size: 0.9rem;
	padding: 1rem 0;
}

.container_footer_credits_full #footer
{
	margin: 0;
	padding: 0 3vw;
}

.container_footer_credits_full a
{
	color: var(--guyra-white);
}

#credits
{
	text-align: right;
}

/* Accessibility preferences */

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

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

	#container_header_full.hide
	{
		transform: none;
	}

	.home_background_photo
	{
		background-attachment: scroll;
	}
}

/* Tablet and mobile */

@media all and (max-width: 991.98px)
{
	#header
	{
		min-height: 82px;
		padding: 0 1rem;
	}

	#header > div:first-child
	{
		width: 70%;
	}

	#header > div:nth-child(2)
	{
		position: absolute;
		right: 0.8rem;
		top: 0.65rem;
		width: auto;
	}

	#logo img
	{
		max-height: 64px;
	}

	.navbar
	{
		position: static;
	}

	.navbar-collapse
	{
		background: var(--guyra-white);
		border-top: 1px solid var(--guyra-border);
		box-shadow: 0 16px 25px rgba(35, 37, 28, 0.13);
		left: -1rem;
		max-height: calc(100vh - 82px);
		overflow-y: auto;
		padding: 0.8rem 1rem 1.2rem;
		position: absolute;
		right: -0.8rem;
		top: 71px;
	}

	.navbar-nav
	{
		align-items: stretch;
	}

	.navbar .nav-link
	{
		border-radius: 8px;
		padding: 0.75rem 0.9rem !important;
		text-align: left;
	}

	.dropdown-menu
	{
		border: 0;
		box-shadow: none;
		margin-left: 0.8rem;
		padding-top: 0;
	}

	#container_header_full.hide
	{
		transform: none;
	}

	.home_background_photo
	{
		background-attachment: scroll;
	}
}

@media all and (max-width: 767.98px)
{
	body
	{
		font-size: 0.98rem;
	}

	#home_slideshow .carousel-item,
	#home_slideshow .carousel-item img
	{
		height: 540px;
		min-height: 540px;
	}

	#home_slideshow .carousel-item::after
	{
		background: linear-gradient(0deg, rgba(25, 28, 19, 0.84) 0%, rgba(25, 28, 19, 0.28) 70%, rgba(25, 28, 19, 0.12) 100%);
	}

	#home_slideshow .carousel-caption
	{
		bottom: 2.4rem;
		left: 0;
		padding: 0 3.5rem;
		right: 0;
		top: auto;
		transform: none;
	}

	#home_slideshow .carousel-caption h5
	{
		font-size: clamp(2rem, 10vw, 3.15rem);
	}

	#home_slideshow .carousel-caption p
	{
		font-size: 1rem;
	}

	.carousel-control-prev,
	.carousel-control-next
	{
		width: 12%;
	}

	.container_content_full,
	.container_content_full_home,
	.container_promos_full
	{
		padding: 3.5rem 0;
	}

	#main_content,
	#main_content_home
	{
		font-size: 1rem;
	}

	.promo_cell_container
	{
		margin-bottom: 1rem;
	}

	#plain_page_photos
	{
		margin-top: 2rem;
	}

	.container_footer_full
	{
		padding: 3.5rem 1rem;
	}

	.container_footer_credits_full #footer
	{
		gap: 0.45rem;
		padding: 0 1rem;
		text-align: center;
	}

	#credits
	{
		text-align: center;
	}
}

@media all and (max-width: 480px)
{
	#home_slideshow .carousel-caption
	{
		padding: 0 2.8rem;
	}

	#home_slideshow .carousel-caption p
	{
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.btn
	{
		width: 100%;
	}
}