/*
 * One button style across the committee pages (committee, section, Associate Members, Committees landing, Join a Committee),
 * matching the Next step banner button. Colors per the SGA visual style guide:
 *   on dark backgrounds (heroes, dark CTA boxes, the banner): yellow fill, dark blue text
 *   on white or light backgrounds: blue fill, white text; resource and download links use the blue outline (secondary) version
 * Loaded after the block styles, so the selectors carry "html body" to outrank the blocks' own button rules.
 */

/* Shared shape and type */
html body .hero-section-with-button .sga-btn,
html body .sga-cta .sga-btn,
html body .cta .sga-cta .sga-btn,
html body .cl-next .cl-next__btn,
html body .cp-sidebar .cp-side-btn,
html body .jc-finder-btns .jc-btn,
html body .resources-section a.resource-link-btn {
	padding: 18px 34px;
	border: 2px solid transparent;
	border-radius: 2px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* On dark backgrounds: yellow */
html body .hero-section-with-button .sga-btn,
html body .sga-cta .sga-btn,
html body .cta .sga-cta .sga-btn,
html body .cl-next .cl-next__btn {
	border-color: #ffde6c;
	background: #ffde6c;
	color: #003762 !important;
}
html body .hero-section-with-button .sga-btn:hover,
html body .hero-section-with-button .sga-btn:focus,
html body .sga-cta .sga-btn:hover,
html body .sga-cta .sga-btn:focus,
html body .cta .sga-cta .sga-btn:hover,
html body .cta .sga-cta .sga-btn:focus,
html body .cl-next .cl-next__btn:hover,
html body .cl-next .cl-next__btn:focus {
	border-color: #fff;
	background: #fff;
	color: #003762 !important;
	text-decoration: none;
}

/* On white or light backgrounds: blue */
html body .jc-finder-btns .jc-btn,
html body .cp-sidebar .cp-side-btn {
	display: block;
	padding-left: 20px;
	padding-right: 20px;
	border-color: #005289;
	background: #005289;
	color: #fff !important;
}
html body .jc-finder-btns .jc-btn:hover,
html body .jc-finder-btns .jc-btn:focus,
html body .cp-sidebar .cp-side-btn:hover,
html body .cp-sidebar .cp-side-btn:focus {
	border-color: #003762;
	background: #003762;
	color: #fff !important;
}

/* Secondary on light: blue outline (resource and download links) */
html body .cp-sidebar .cp-side-btn--outline,
html body .resources-section a.resource-link-btn {
	border-color: #005289;
	background: transparent;
	color: #005289 !important;
}
html body .cp-sidebar .cp-side-btn--outline:hover,
html body .cp-sidebar .cp-side-btn--outline:focus,
html body .resources-section a.resource-link-btn:hover,
html body .resources-section a.resource-link-btn:focus {
	border-color: #005289;
	background: #005289;
	color: #fff !important;
}
html body .resources-section a.resource-link-btn {
	display: block;
	margin-bottom: 12px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}
html body .resources-section a.resource-link-btn:before {
	display: none;
}

/* Hero buttons sit to the right of the headline on desktop */
@media (min-width: 768px) {
	html body .hero-section-with-button .sga-btn {
		display: inline-block;
	}
}
@media (max-width: 1199px) {
	html body .hero-section-with-button .sga-btn {
		padding-left: 24px;
		padding-right: 24px;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* the Join a Committee hero keeps its button on phones (the landing hero's is hidden, as before) */
	html body .jc-hero .sga-btn {
		display: block;
		width: 100%;
		font-size: 18px;
	}
	html body .sga-cta .sga-btn,
	html body .cta .sga-cta .sga-btn {
		display: block;
		width: 100%;
	}
}