/* Improve the styling of cards on the home page. */
.card-text {

	p {
		font-size: 20px !important;
		line-height: 28px !important;
		font-weight: bold;
		font-style: italic;
		color: #ff7d3e;

		&:before {
			content: open-quote;
		}

		&:after {
			content: close-quote;
		}
	}
}


/* Add a new from cradle to community section. */
.wp-block-community {
	margin-left: -100vw;
	margin-right: -100vw;
	padding: 50px 0;
}

.wp-block-community h2 {
	text-align: center;
}


/* The community section. */
.community-items {
	position: relative;
}

.community-item {
	width: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	text-align: center;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	opacity: 1;
	clip-path: circle(50%);
}

.community-item:before {
	transition: 0.3s ease-in-out;
}

.community-item:hover:before,
.community-item:focus:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.25);
}

.community-item:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.community-item.community-item--community {
	background-image: url(../images/circle-yellow.png);
}

.community-item.community-item--families {
	background-image: url(../images/circle-blue.png);
	position: absolute;
	top: 15%;
	left: 12%;
	right: 12%;
	width: 76%;
	z-index: 1;
}

.community-item.community-item--children {
	background-image: url(../images/circle-orange.png);
	position: absolute;
	top: 32%;
	left: 18%;
	right: 18%;
	width: 64%;
	z-index: 1;
}

.community-item h3 {
	position: absolute !important;
	height: 1px; width: 1px; 
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.item-description {
	display: none;
	height: 100%;
	flex-direction: column;
	justify-content: center;
}

.item-description.is-community h2 {
	background-color: #ffc914;
}

.item-description.is-children h2 {
	background-color: #ff7d3e;
}

.item-description.is-families h2 {
	background-color: #4bc6d7;
}

.item-description h2 {
	font-size: 38px;
	margin: auto 0;
	padding: 40px;
	border-radius: 40px;
}

.item-description.visible {
	display: flex;
}


/* The approach and aims section below the circles. */
.approach-info {
	max-width: 66.6666%;
	margin: 50px auto 0;
	display: flex;
	gap: 50px;
}

.approach-info > * {
	flex: 1;
}


/* Home widget area colours. */
.home-widget-area h2 {
	text-align: center;
}

.home-after-widget-area {
	height: 50px;
	background-image: url(/wp-content/themes/thewinch/dist/images/orange-bottom-brush.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	z-index: 15;
}

.home-after-stories,
.home-before-widget-area {
	background-color: #ffc914;
}

.home-widget-area .row {
	grid-template-columns: 1fr 1fr !important;
}

.home-widget-area .widget {
	min-height: 335px;
}

.home-widget-area .wp-block-social-links.is-style-logos-only .wp-social-link svg {
	width: 150px;
	height: 150px;
	padding: 15px;
}

.home-widget-area .wp-block-social-links {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.home-widget-area .wp-block-social-links li {
	width: 180px;
	height: 180px;
	display: flex !important;
	justify-content: center;
	align-items: center;
}


/* Add some form styles based on those in the footer. */
.hero-home [type="text"],
.hero-home [type="email"] {
	font-size: 13px !important;
	padding: 25px 20px !important;
	margin-right: 20px;
	border-color: #383636;
	border-radius: 0.3rem !important;
}

.hero-home [type="submit"] {
	border-radius: 25px !important;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	text-transform: uppercase;
	min-width: 180px;
	border-width: 2px;
	border-color: #1a1919;
	color: #1a1919;
	background-color: transparent;
	padding: 14px 60px 14px 20px !important;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMzAgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU0LjEgKDc2NDkwKSAtIGh0dHBzOi8vc2tldGNoYXBwLmNvbSAtLT4KICAgIDx0aXRsZT5hcnJvdzwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iYnV0dG9uLS8tbGFyZ2UtLy1wcmltZS0vLWRlZmF1bHQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTAuMDAwMDAwLCAtMjAuMDAwMDAwKSIgZmlsbD0iIzFBMTkxOSIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgPHBhdGggZD0iTTE2OC45OTk5NjksMjYuNDg0Nzg0NiBDMTY2Ljk5OTk3MiwyNi41NTIzNjE2IDE2NC45OTk5NzUsMjYuNTQxNjkxNiAxNjIuOTk5OTc5LDI2LjcwMTc0MjMgQzE1OC45NzY2NTIsMjcuMDE0NzMwMyAxNTQuOTYzMzI1LDI3LjQzNDQxODggMTUwLjkzOTk5OCwyNy43Njg3NDY5IEMxNTAuNjQzMzMyLDI3Ljc5MzY0MzcgMTUwLjMxMzMzMywyNy40MTMwNzg3IDE1MCwyNy4yMjEwMTc5IEMxNTAuMTYyNDUxLDI2LjkwMzk5NzYgMTUwLjM3MzA5MSwyNi42MTc5NDY5IDE1MC42MjMzMzIsMjYuMzc0NTI3NSBDMTUwLjk2MDg2MSwyNi4xOTUxNjgzIDE1MS4zMjMyOTIsMjYuMDc1MDcgMTUxLjY5NjY2NCwyNi4wMTg4NTkzIEMxNTcuNTI5OTg4LDI0LjU1NzA2MjkgMTYzLjQwMzMxMSwyMy4zNTg0NjEgMTY5LjQyNjYzNSwyMy4yNTUzMTcyIEMxNjkuNjk2NjM0LDIzLjI1NTMxNzIgMTY5Ljk2NjYzNCwyMy4yMjY4NjM3IDE3MC4zNTMzLDIzLjIwOTA4MDMgQzE2OC43ODk5NjksMjIuNTc5NTQ3NiAxNjcuMzI2NjM4LDIyLjAzODkzMTkgMTY1LjkxMzMwNywyMS4zODA5NDU3IEMxNjUuNTc5OTc0LDIxLjIyODAwODQgMTY1LjQwOTk3NSwyMC42Njk2MDkyIDE2NS4xNjMzMDgsMjAuMzEzOTQxIEMxNjUuNTQzMzA4LDIwLjIwMzY4MzkgMTY1Ljk1NjY0LDE5LjkzMzM3NiAxNjYuMjk2NjQsMjAuMDE1MTc5NyBDMTY5LjEyOTk2OCwyMC42NzY3MjI2IDE3MS45NjMyOTcsMjEuMzQ1Mzc4OSAxNzQuNzY2NjI2LDIyLjE0OTE4OSBDMTc2LjMwOTk1NywyMi41ODMxMDQzIDE3Ny44MDMyODcsMjMuMjM3NTMzOCAxNzkuMzAzMjg1LDIzLjgzNTA1NjQgQzE4MC4xMjk5NSwyNC4xNjIyNzEyIDE4MC4yNDMyODMsMjUuMDQwNzcxNyAxNzkuNTIzMjg1LDI1LjYxMzM5NzUgQzE3OS4xNjAxMTMsMjUuODcyODM3MSAxNzguNzU3NDYsMjYuMDYyOTgyOSAxNzguMzMzMjg2LDI2LjE3NTM1MzMgQzE3NC4xOTMyOTMsMjcuNDYwNTAxMSAxNzAuMDUxMDc4LDI4LjcyNzg2NTYgMTY1LjkwNjY0LDI5Ljk3NzQ0NjYgQzE2NS41OTMzMDgsMzAuMDY5OTIwMyAxNjUuMTk2NjQyLDI5Ljg1Mjk2MjcgMTY0LjgzNjY0MiwyOS43NzgyNzI0IEMxNjUuMDAzMzA5LDI5LjQwMTI2NCAxNjUuMDczMzA4LDI4LjgzOTMwODMgMTY1LjM0OTk3NSwyOC42NzU3MDA5IEMxNjYuNTM2NjM5LDI3Ljk2NDM2NDQgMTY3Ljc4NjYzNywyNy4zNjY4NDE4IDE2OS4wMTY2MzUsMjYuNzMwMTk1NyBMMTY4Ljk5OTk2OSwyNi40ODQ3ODQ2IFoiIGlkPSJhcnJvdyI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+);
	background-size: 30px 10px;
	background-repeat: no-repeat;
	background-position: right 20px center;
}
