/* ######################### CCG custom CSS ######################### */

/* ######################### Global styles ######################### */

/*	Global colors:
	
	Primary teal:	#36b3a8		Main teal color for buttons
	Secondary teal:	#61bab1		Lighter teal color for hover states
	Primary blue:	#0D75A9		Main blue color for links

*/

.page-content, .entry-content, .single .entry-title, .entry-summary, .entry-footer, .post-navigation, .posts-navigation, .comments-wrapper, .respond-wrapper, body.page:not(.archive) .entry-title {
    width: 1200px;
} /* Sets screen width */

.wp-block-column.has-background {
	padding: 20px;
} /* Adds padding inside column blocks with background colors */

.wp-block-button .wp-block-button__link {
	font-size: 18px;
} /* Makes link text larger */

.entry-content .wp-block-paragraph {
	font-size: 20px;
	line-height: 1.5;
} /* Makes font size bigger and decreases line spacing a little for paragraphs sitewide */

.wp-block-image img, .wp-block-media-text__media img, #sbi_images img, .wpnbha.image-alignleft .post-has-image .post-thumbnail img {
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0.07);
} /* Sets all images to have subtly rounded corners to soften the page appearance slightly, and adds a subtle border for light-background images */

.blog .entry-title, .archive .entry-title, .search .entry-title {
	text-shadow: none;
} /* Removes the drop shadow on blog post, search, and event titles for better readability */

h2.wp-block-heading {
	margin-bottom: 18px!important;
} /* Fixes spacing under h2 elements */

p {
	margin: 0 0 1em;
} /* Removes a little spacing between paragraphs */

/* ######################### Header ######################### */

.contact-info-area {
	font-size: 2rem;
	padding: 10px 10px 0;
} /* Makes icons in header larger and easier to read */

.contact-info-area span a {
	padding: 0 10px;
} /* Decreases padding under the contact info in the header */

a.custom-logo-link, p.site-title {
	text-align: center;
	width: 100%;
} /* Centers the logo and Carmel Crafts Guild on small devices */

p.site-title a:hover {
	color: inherit!important;
} /* Prevents the site title from changing color on hover or keyboard focus */

p.site-description {
	line-height: 1.25;
	margin: 10px 0;
	text-align: center;
} /* Makes tagline centered and more compact on small devices */

/* ######################### Navigation menu ######################### */

.main-navigation ul li.current-menu-item > a, .main-navigation li:hover>a {
	color: white;
} /* Sets the active nav menu item color to white so it's more readable */

.main-navigation ul ul a {
	background-color: #f0f0f0;
} /* Changes the background color of the sub-menus on mobile so it's easier to read the text */

/* ######################### Homepage ######################### */

.post-22 .entry-title {
	display: none;
} /* Hides the title on only the homepage */

.post-22 .entry-header {
	padding: 0;
} /* Removes white space at the top of the homepage under the header and navigation menu */

.wp-block-cover.alignfull.homepage-banner {
	height: 35vh;
} /* Resizes the homepage banner to not be so huge */

.wp-block-cover.alignfull.homepage-banner p.wp-block-paragraph {
	font-size: 2em;
    font-weight: bolder;
    color: white;
    text-align: center;
    line-height: normal;
    text-shadow: 0 0 25px black;
	margin-bottom: 0;
} /* Applies styling to the banner text to make it easier to read */

/* ######################### Pages ######################### */

.entry-thumbnail {
	max-width: 1300px;
	min-height: 100px;
	height: 20vh!important;
	margin: 1em auto 0 auto;
	border-radius: 5px;
} /* Fixes styling on the featured images of content pages */

/* ######################### Events ######################### */

html :where([style*=border-color]) {
    border-style: none;
} /* Removes odd border on monthly calendar */

.em.em-list .em-item {
	grid-template-columns: minmax(0,1fr) 4fr;
} /* Fixes the too-wide dates or images in list view */

.em.pixelbones a {
	color: #0D75A9!important;
} /* Changes color of linked title in list of events */

.em.em-list .em-item .em-item-info {
	border-color: #36b3a8;
} /* Changes left-hand bar on events list */

.eventful-today .ring.one {
	background-color: #aeaeae;
	border-radius: 50%;
}

.em.em-calendar .em-cal-body .em-cal-day.eventful-today .em-cal-day-date a {
	color: white!important;
}

/* ######################### Media Queries ######################### */
/* These apply overrides to the default styles depending on screen size, from a "mobile-first" perspective. This means that styles are by default set up for optimal display on phones, and overrides make it better for larger screens. */

@media (min-width: 500px) { /* All screens larger than 768px wide */
	
	a.custom-logo-link {
		margin-bottom: 18px;
	} /* Restores spacing between logo and CCG title on medium devices */
	
}

@media (min-width: 768px) { /* All screens larger than 768px wide */
	
	.contact-info-area {
		font-size: 1.8rem;
		padding: 18px 10px 8px;
	} /* Makes contact info text in header easier to read, and resets padding */

	.main-navigation ul ul a {
		background-color: #222222;
	} /* Changes the background color of the sub-menus on desktop so it's easier to read the text */
	
	.main-navigation ul li.current-menu-item > a:hover, .main-navigation ul li.current-menu-item > a:focus {
		background-color: #36b3a8;
	} /* Changes the color of the active nav menu item so it's easy to tell when it's being hovered over or focused on with the keyboard */
	
}

@media (min-width: 1011px) { /* All screens larger than 1011px wide */
	
	a.custom-logo-link {
		margin-bottom: 0px;
	} /* Removes spacing under logo on large devices */
	
	a.custom-logo-link, p.site-title {
		text-align: left;
		width: auto;
	} /* Left-aligns the logo and Carmel Crafts Guild on larger devices */
	
	.wp-block-cover.alignfull.homepage-banner p.wp-block-paragraph {
		font-size: 3em;
	} /* Makes homepage banner text larger on larger screens */
	
}

@media (min-width: 1200px) { /* All screens larger than 1200px wide */
	
	.wp-block-cover.alignfull.homepage-banner {
		height: 45vh;
	} /* Increases the homepage banner height slightly */
	
}