:root {
	--gray-base: #000;
    --gray-darker: #232528;
    --gray-dark: #232528;
    --gray: #555555;
    --gray-light: #777777;
    --gray-midlight: #c7d1d9;
    --gray-lighter: #f2f7fb;
    --brand-primary: #005696;
    --brand-success: #9ec152;
    --brand-info: #5bc0de;
    --brand-warning: #f76110;
    --brand-danger: #ce1126;
    --text-color: #232528;
    --msr-yellow: #f9b509;
    --crown-red: #e41c39;
    --yellow: #ffdb0f;
    --tan: #ad9d7b;
    --dark-blue: #134364;
    --screen-xs: 480px;
    --screen-md: 992px;
    --screen-lg: 1200px;
    --grid-gutter-width: 50px;
	
	--lion: #feb723;
	--tiger: #f58c2b;
	--wolf: #cc0033;
	--bear: #99c9ea;
	--webelos: #4695d1;
	--arrowoflight: #fcdc07;
}

html {
	scroll-behavior: smooth;
}

.cubscoutguides-module__item {
	background: #fff;
	border: 2px solid var(--gray-lighter);
	border-radius: 20px;
	padding: 30px;
	margin-bottom: 40px;
	container-type: inline-size;
	container-name: resource-accordion;
}

.cubscoutguides-module__item:has(.cubscoutguides-module__item--accordion-link:focus) {
	outline: 2px solid var(--brand-info);
}

.cubscoutguides-module__item--accordion-link {
	display: flex;
	gap: 30px;
	align-items: center;
	position: relative;
	flex-flow: row wrap;
}

.cubscoutguides-module__item--accordion-link:focus {
	outline: 0 none;
	text-decoration: none;
}

.cubscoutguides-module__item--accordion-link:hover {
	text-decoration: none;
}

.cubscoutguides-module__item--accordion-link:hover .cubscoutguides-module__item--title {
	color: var(--brand-primary);
	transition: color 0.2s ease-in-out;
}

.cubscoutguides-module__item--accordion-link>div:has(.cubscoutguides-module__item--title) {
	margin-top: 4px;
}

.cubscoutguides-module__item--accordion-link:after,
.cubscoutguides-module__item--accordion-link:before {
	background-color: var(--brand-primary);
	width: 18px;
	height: 2px;
	position: absolute;
	right: 15px;
	top: 50%;
	-webkit-transform: translateX(-50%) rotate(0deg);
	transform: translateX(-50%) rotate(0deg);
	content: ""
}

.cubscoutguides-module__item--accordion-link:after {
	-webkit-transform: translateX(-50%) rotate(0deg);
	transform: translateX(-50%) rotate(0deg);
	-webkit-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out
}

.cubscoutguides-module__item--accordion-link.collapsed:after {
	-webkit-transform: translateX(-50%) rotate(90deg);
	transform: translateX(-50%) rotate(90deg);
	-webkit-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out
}

.cubscoutguides-module__item--image {
	display: grid;
	flex: 0 0 100px;
	place-items: center;
	width: 100px;
	height: 100px;
	color: #fff;
	border-radius: 50%;
}

.cubscoutguides-module__item--label {
	margin: 0 2px -4px 2px;
	color: var(--brand-success);
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: .2em;
}

.cubscoutguides-module__item--title {
	margin-top: 0;
	margin-bottom: 0;
	transition: color 0.2s ease-in-out;
	color: var(--dark-blue);
}

.cubscoutguides-module__item--description {
	padding-top: 10px;
}

.cubscoutguides-module__item-btnwrap:has(*) {
	position: relative;
	padding-top: 35px;
	padding-bottom: 30px;
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	
	.btn {
		margin: 0;
	}
}

.cubscoutguides-module__item-btnwrap:has(*)::before {
	content: "Relevant Files";
	position: absolute;
	top: 0;
	font-size: 20px;
	color: var(--brand-primary);
}

.cubscoutguides-module__item--subitems {
	container-type: inline-size;
	container-name: resourcessubwrap;
}

.cubscoutguides-module__item--subitems:has(*) {
	padding-top: 35px;
	position: relative;
}

.cubscoutguides-module__item--subitems:has(*)::before {
	content: "Adventures";
	position: absolute;
	top: 0;
	font-size: 20px;
	color: var(--brand-primary);
}

.cubscoutguides-module__item--subitems > * {
	max-width: 100cqw;
}

.cubscoutguides-module__item--subitems:has(.cubscoutguides-module__item--link-with-preview) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.cubscoutguides-module__item--link-with-preview {
	border: 2px solid var(--gray-lighter);
	padding: 10px;
	overflow: hidden;
	position: relative;
}

.cubscoutguides-module__item--thumbnail {
	padding: 0;
	padding-top: 100%;
	display: block;
	background: transparent;
	border: 0 none;
	outline: 0 none;
}

.cubscoutguides-module__item--link-with-preview>.cubscoutguides-module__item--thumbnail>img {
	position: absolute;
	top: 10px;
	left: 10px;
	object-fit: cover;
	object-position: top center;
	width: calc(100% - 20px);
	height: 100%;
	transform: scale(1) rotate(0deg);
	transition: transform 0.2s ease-in-out;
}

.cubscoutguides-module__item--link-with-preview:hover>.cubscoutguides-module__item--thumbnail>img {
	transform: scale(1.05) rotate(5deg);
	transition: transform 0.2s ease-in-out;
}

.cubscoutguides-module__item--thumbnail-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--gray-lighter);
	color: var(--brand-primary);
	padding: 5px;
	text-align: center;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* Intro CSS */
.cubscoutguides-module__header {
	margin-bottom: 50px;
}

.cubscoutguides-intro__label span {
	color: var(--brand-success);
	font-weight: 500;
}

.cubscoutguides-intro__title {
	color: var(--brand-primary);
	font-weight: 700;
	margin-top: 0;
}

.buttons-wrapper {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
}

.cubscoutguides-intro__image-wrap {
	margin-top: 25px;
}

.cubscoutguides-intro__image {
	position: relative;
	container-type: inline-size;
	text-align: center;
	border-radius: 15px;
	overflow: hidden;
}

.cubscoutguides-intro__image img {
	z-index: 1;
	position: relative;
}


@media (min-width: 1200px) {

	.cubscoutguides-intro__inner-wrap {
		display: flex;
		flex-flow: row nowrap;
		gap: 30px;
		justify-content: space-between;
		align-items: center;
	}

	.cubscoutguides-intro__body {
		flex: 1 1 50%;
	}

	.cubscoutguides-intro__image-wrap {
		margin-top: 0px;
		flex: 1 1 50%;
		max-width: 460px;
	}


}

@media (min-width: 1600px) {

	.cubscoutguides-intro__body {
		flex: 0 1 50%;
	}

	.cubscoutguides-intro__image-wrap {
		max-width: 543px;
	}

}

.btn-cs-guide,
.btn.btn-cs-guide {
	--bg-color: #5bc0de;
	--color: #fff;
	background: var(--bg-color);
	color: var(--color);
	transition: background-color 0.2s ease;
}

.btn-cs-guide:hover,
.btn.btn-cs-guide:hover {
	background-color: color-mix(in srgb, var(--bg-color), #000 15%);
	color: var(--color);
	transition: background-color 0.2s ease;
}

.btn-cs-guide.btn-lion {
	--bg-color: var(--lion);	
}
.btn-cs-guide.btn-tiger {
	--bg-color: var(--tiger);	
}
.btn-cs-guide.btn-wolf {
	--bg-color: var(--wolf);	
}
.btn-cs-guide.btn-bear {
	--bg-color: var(--bear);	
}
.btn-cs-guide.btn-webelos {
	--bg-color: var(--webelos);	
}
.btn-cs-guide.btn-arrowoflight {
	--bg-color: var(--arrowoflight);
	--color: var(--gray-base);
}