/* ==========================================================================
   Comedy Connection layout skin
   Loaded AFTER style-skin.css. style-skin.css (inherited from bbp-main) styles
   the bwg-event plugin's markup through its --color-* / --evh-* tokens, which
   functions.php leaves alone and this theme retokens in place. This file owns
   everything the theme renders itself: header, nav, the two-column layout,
   the upcoming-shows list, sidebar widgets, blog cards and articles, footer.

   style-skin.css sets global `h2 { font-size: 48px !important }` and
   `h1-h6 { text-transform: uppercase !important }` for the plugin's pages, so
   component headings below carry !important of their own to win.
   ========================================================================== */

@font-face {
	font-family: 'CenturyGothicStd';
	src: url('fonts/27DADF_0_0.eot');
	src: url('fonts/27DADF_0_0.eot?#iefix') format('embedded-opentype'),
		url('fonts/27DADF_0_0.woff') format('woff'),
		url('fonts/27DADF_0_0.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	--cc-teal: #339999;
	--cc-teal-dark: #2a7f7f;
	--cc-charcoal: #323232;
	--cc-ink: #2b2b2b;
	--cc-beige: #e9e7de;
	--cc-card: #f5f5f5;
	--cc-line: #cccccc;
	--cc-navy: #03395b;
	--cc-muted: #777777;
	--cc-white: #ffffff;
	--cc-container: 1080px;
}

html,
body {
	background: var(--cc-beige);
}

body {
	color: var(--cc-ink);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--cc-teal);
}

a:hover,
a:focus {
	color: var(--cc-teal-dark);
}

.cc-container {
	max-width: var(--cc-container);
	margin: 0 auto;
	padding: 0 20px;
}

/* The plugin's single-event / artist / venue templates wrap themselves in
   bootstrap .container; keep them on the same measure as the theme. */
.cc-main > .container,
.cc-main .event-page .container,
.cc-main .artist-page .container {
	max-width: var(--cc-container) !important;
	width: auto !important;
}

/* Plugin hero (single event / artist). The plugin fixes the hero at a set
   height (560 / 640px) while the photo box beside the 400px title column grows
   with the viewport, so on wide screens a 2560x1400 photo is cropped top and
   bottom, centred, and heads get cut. Here the hero height follows the photo
   box's own proportion (width x 1400/2560) between 560px and 780px, so in that
   band nothing is cropped vertically, and any crop beyond it is anchored to
   the top of the photo. Below 1024px the plugin stacks the hero and shows the
   whole image, so nothing to do there. */
@media (min-width: 1024px) {
	/* Event photos only: the Hub's artist photos are small (551x254 is
	   typical) and a taller hero just upscales them harder. */
	.event-page .slider {
		height: clamp(560px, calc((100vw - var(--image-offset, 400px)) * 0.547), 780px);
	}

	.event-page .media img,
	.artist-page .media img {
		object-position: center top;
	}
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.cc-header {
	padding-top: 22px;
}

.cc-masthead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 14px;
}

.cc-logo {
	display: block;
	line-height: 0;
}

.cc-logo img {
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
}

.cc-social {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
}

.cc-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cc-charcoal);
	color: var(--cc-white);
	transition: background .15s ease;
}

.cc-social a:hover,
.cc-social a:focus-visible {
	background: var(--cc-teal);
	color: var(--cc-white);
}

.cc-social svg {
	width: 17px;
	height: 17px;
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */
.cc-nav {
	background: var(--cc-charcoal);
}

.cc-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-menu li {
	margin: 0;
}

.cc-menu li a {
	display: block;
	padding: 19px 18px;
	color: var(--cc-white);
	font-size: 17px;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .15s ease;
}

.cc-menu li a:hover,
.cc-menu li a:focus-visible,
.cc-menu .current-menu-item > a,
.cc-menu .current_page_item > a {
	color: var(--cc-teal);
}

.cc-menu-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 16px 0;
	border: 0;
	background: none;
	color: var(--cc-white);
	font: inherit;
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: .02em;
	cursor: pointer;
}

.cc-menu-toggle-bars,
.cc-menu-toggle-bars::before,
.cc-menu-toggle-bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	content: '';
}

.cc-menu-toggle-bars {
	position: relative;
}

.cc-menu-toggle-bars::before {
	position: absolute;
	top: -7px;
}

.cc-menu-toggle-bars::after {
	position: absolute;
	top: 7px;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.cc-main {
	padding: 0 0 40px;
}

/* The theme's own pages get their breathing room here, not on .cc-main, so
   the plugin's full-bleed event / artist heroes sit flush under the nav. */
.cc-layout {
	padding-top: 30px;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: 28px;
	align-items: start;
}

.cc-primary,
.cc-sidebar {
	min-width: 0;
}

.cc-bar {
	margin: 0 0 14px !important;
	padding: 9px 20px;
	background: var(--cc-teal);
	color: var(--cc-white) !important;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: .02em;
	text-transform: uppercase !important;
}

.cc-empty {
	padding: 18px 20px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
}

/* --------------------------------------------------------------------------
   Upcoming shows list (theme markup over plugin data)
   -------------------------------------------------------------------------- */
.cc-shows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-show {
	display: flex;
	gap: 16px;
	min-height: 132px;
	margin: 0 0 10px;
	background: var(--cc-card);
	border: 1px solid var(--cc-line);
	border-left: 0;
}

.cc-show-thumb {
	flex: 0 0 180px;
	line-height: 0;
}

.cc-show-thumb img {
	display: block;
	width: 180px;
	height: 130px;
	object-fit: cover;
	border: 1px solid var(--cc-line);
}

.cc-show-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 12px 16px 12px 0;
}

.cc-show-title {
	margin: 0 !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
}

.cc-show-title a {
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-show-title a:hover,
.cc-show-title a:focus-visible {
	color: var(--cc-teal);
}

.cc-show-date {
	margin: 0;
	color: var(--cc-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.cc-show-venue {
	color: var(--cc-muted);
	font-weight: 400;
}

.cc-show-artists {
	margin: 0;
	color: var(--cc-muted);
	font-size: 13px;
}

.cc-btn {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 14px;
	background: var(--cc-teal);
	color: var(--cc-white) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background .15s ease;
}

.cc-btn:hover,
.cc-btn:focus-visible {
	background: var(--cc-charcoal);
}

.cc-btn.is-soldout {
	background: #8a8a8a;
}

/* Load More: html.js is set by an inline script in header.php, so without
   JavaScript nothing is hidden and the button never appears. */
.js .cc-show.is-beyond {
	display: none;
}

.cc-load-more-wrap {
	display: none;
	margin: 6px 0 0;
	text-align: center;
}

.js .cc-load-more-wrap {
	display: block;
}

.cc-load-more {
	border: 0;
	padding: 12px 22px;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

.cc-load-more-count {
	font-weight: 400;
	opacity: .85;
}

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
.cc-widget {
	margin: 0 0 26px;
}

.cc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
}

.cc-list li {
	border-bottom: 1px solid var(--cc-line);
}

.cc-list li:last-child {
	border-bottom: 0;
}

.cc-list a {
	display: block;
	padding: 14px 18px;
	color: var(--cc-ink);
	font-size: 15px;
	letter-spacing: .02em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
}

.cc-list a:hover,
.cc-list a:focus-visible {
	background: var(--cc-card);
	color: var(--cc-teal);
}

.cc-list .cc-list-sub {
	display: block;
	margin-top: 3px;
	color: var(--cc-muted);
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
}

.cc-news a {
	padding: 10px 18px;
	font-size: 17px;
	text-transform: none;
}

.cc-news time {
	display: block;
	margin-top: 2px;
	color: var(--cc-muted);
	font-size: 13px;
}

.cc-subscribe .cc-btn {
	display: block;
	padding: 13px;
	font-size: 14px;
	text-align: center;
}

.cc-sponsor a {
	display: block;
	padding: 16px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
	line-height: 0;
}

.cc-sponsor img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Blog: cards, article, navigation
   -------------------------------------------------------------------------- */
.cc-post-card {
	display: flex;
	gap: 18px;
	margin: 0 0 16px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
}

.cc-post-thumb {
	flex: 0 0 220px;
	line-height: 0;
}

.cc-post-thumb img {
	display: block;
	width: 220px;
	height: 100%;
	min-height: 150px;
	object-fit: cover;
}

.cc-post-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 18px 16px 0;
}

.cc-post-title {
	margin: 0 0 6px !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
}

.cc-post-title a {
	color: var(--cc-ink);
	text-decoration: none;
}

.cc-post-title a:hover,
.cc-post-title a:focus-visible {
	color: var(--cc-teal);
}

.cc-post-meta {
	margin: 0 0 10px;
	color: var(--cc-muted);
	font-size: 13px;
}

.cc-post-meta a {
	color: var(--cc-teal);
	text-decoration: none;
}

.cc-post-excerpt p {
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.6;
}

.cc-more {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cc-article {
	padding: 30px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
}

.cc-article-header {
	margin: 0 0 22px;
	text-align: center;
}

.cc-article-header h1 {
	margin: 0 0 8px;
	font-size: 30px !important;
	font-weight: 400;
	line-height: 1.15;
	text-transform: uppercase;
}

.cc-featured img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 24px;
}

.cc-article-body {
	font-size: 16px;
	line-height: 1.7;
}

.cc-article-body p {
	margin: 0 0 1.2em;
}

.cc-article-body h2,
.cc-article-body h3,
.cc-article-body h4 {
	margin: 1.4em 0 .6em !important;
	font-size: 24px !important;
	font-weight: 400 !important;
	line-height: 1.25 !important;
	text-transform: none !important;
}

.cc-article-body h3,
.cc-article-body h4 {
	font-size: 20px !important;
}

.cc-article-body ul,
.cc-article-body ol {
	margin: 0 0 1.2em 1.4em;
	list-style: disc;
}

.cc-article-body ol {
	list-style: decimal;
}

.cc-article-body li {
	margin: 0 0 .4em;
}

.cc-article-body img {
	max-width: 100%;
	height: auto;
}

.cc-article-body iframe {
	max-width: 100%;
}

.cc-article-body a {
	text-decoration: underline;
}

.cc-article-body blockquote {
	margin: 0 0 1.2em;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--cc-teal);
	color: var(--cc-muted);
}

.cc-postnav {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	font-size: 14px;
}

.cc-postnav a {
	text-decoration: none;
}

.cc-postnav-next {
	margin-left: auto;
	text-align: right;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin-top: 8px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 13px;
	background: var(--cc-white);
	border: 1px solid var(--cc-line);
	color: var(--cc-ink);
	font-size: 14px;
	text-decoration: none;
}

.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--cc-teal);
	border-color: var(--cc-teal);
	color: var(--cc-white);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.cc-footer {
	margin-top: 30px;
	padding: 44px 0;
	background: var(--cc-charcoal);
	color: #d9d9d9;
	font-size: 13px;
	text-align: center;
}

.cc-footer a {
	color: var(--cc-teal);
	text-decoration: none;
}

.cc-footer a:hover,
.cc-footer a:focus-visible {
	color: var(--cc-white);
}

.cc-copy {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.cc-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.cc-masthead {
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	.cc-logo img {
		max-width: 270px;
	}

	.cc-menu-toggle {
		display: flex;
	}

	.cc-menu {
		display: none;
		flex-direction: column;
		gap: 0;
		padding-bottom: 6px;
	}

	.cc-nav.is-open .cc-menu {
		display: flex;
	}

	.cc-menu li a {
		padding: 14px 0;
		border-top: 1px solid #454545;
		text-align: left;
	}

	.cc-article {
		padding: 20px;
	}
}

@media (max-width: 520px) {
	.cc-show,
	.cc-post-card {
		flex-direction: column;
		gap: 0;
	}

	.cc-show {
		border-left: 1px solid var(--cc-line);
	}

	.cc-show-thumb,
	.cc-post-thumb {
		flex-basis: auto;
	}

	.cc-show-thumb img,
	.cc-post-thumb img {
		width: 100%;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
		border: 0;
	}

	.cc-show-body,
	.cc-post-body {
		padding: 12px 16px 14px;
	}
}