/**
 * Structural CSS for the custom Events Calendar templates.
 *
 * This file only arranges layout (flex/grid placement, ordering, show/hide
 * states) for the new markup introduced by the theme's template overrides.
 * It intentionally does NOT set colors, fonts, or sizes - the plugin's own
 * stylesheet still supplies the base look for anything not listed here.
 *
 * Every selector is prefixed with `.tribe-common` (descendant, since none
 * of this markup sits on the same element as `.tribe-common` itself) to
 * beat TEC's own base reset (`.tribe-common ul, .tribe-common li, ...
 * {margin:0;padding:0;border:0}`), which runs at class+element specificity
 * (0,1,1) and otherwise wins over a bare single class regardless of load
 * order.
 */

/* Events bar: search + view toggle side by side. */
.tribe-common .nfc-events-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.tribe-common .nfc-events-bar__search {
	flex: 1 1 auto;
	min-width: 0;
}

/* View toggle (List / Calendar). */
.tribe-common .nfc-view-toggle {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.5em;
	flex-shrink: 0;
}

.tribe-common .nfc-view-toggle__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px !important;
	white-space: nowrap;
	border: 1px solid !important;
	border-radius: 999px;
	text-decoration: none;
}

.tribe-common .nfc-view-toggle__button-icon {
	line-height: 1;
}

/* Month view top bar: date controls left, prev/next nav right. */
.tribe-common .nfc-month-top-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
}

.tribe-common .nfc-month-top-bar__date-controls {
	padding-top: 20px !important;
	display: flex;
	align-items: center;
	gap: 16px !important;
}

.tribe-common .nfc-month-top-bar__nav .tribe-events-c-top-bar__nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.5em;
}

/* Month calendar header row (full weekday names). */
.tribe-common .nfc-calendar-month__header-column {
	border: solid 1px #fff;
	width: 100% !important;
	padding: 10px 0 !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__header-column-title{
	text-align: center !important;
}

/* Month Date */
.tribe-common--breakpoint-medium.tribe-common .tribe-common-h4{
	text-align: end !important;
}

/* List view: Upcoming Webinars section. */
.tribe-common .nfc-events-section + .nfc-events-section {
	margin-top: 2em;
}

.tribe-common .nfc-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container{
	padding-top: 64px !important;
	padding-bottom: 56px !important;
}

.tribe-common.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar{
	margin-bottom: 64px;
}

/* Single list-view event row: date tag | details+image. */
.tribe-common .nfc-events-list__item {
	display: flex;
	align-items: stretch;
	gap: 1em;
}

.tribe-common .nfc-events-list__date-tag {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid;
}

.tribe-common .nfc-events-list__date-tag-time {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tribe-common .nfc-events-list__event-wrapper {
	flex: 1 1 auto;
	min-width: 0;
}

/* Mobile default: details stacked above the image, image scales full-width. */
.tribe-common article.nfc-events-list__event {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1em;
}

.tribe-common .nfc-events-list__event-details {
	flex: 1 1 auto;
	min-width: 0;
}

.tribe-common .nfc-events-list__event-details .tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-common article.nfc-events-list__event > .tribe-events-calendar-list__event-featured-image-wrapper {
	box-sizing: border-box;
	width: 100%;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

.tribe-common .tribe-events-calendar-list__event-featured-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Medium+ (TEC's own container-width breakpoint, toggled by components/breakpoints.php's
   JS on this view's root element): back to a side-by-side row with the image
   locked to a fixed 270px column instead of scaling with it. */
.tribe-common--breakpoint-medium.tribe-events article.nfc-events-list__event {
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5em;
}

.tribe-common--breakpoint-medium.tribe-events .nfc-events-list__event-details .tribe-events-calendar-list__event-featured-image-wrapper,
.tribe-common--breakpoint-medium.tribe-events article.nfc-events-list__event > .tribe-events-calendar-list__event-featured-image-wrapper {
	flex: 0 0 270px;
	width: 270px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-featured-image {
	max-width: 270px;
}

.tribe-common.tribe-events .tribe-events-header__content-title:after{
	display: none;
}

/*
 * Single event page: eyebrow + centered title, then image | meta
 * two-column row.
 *
 * No `.tribe-common` prefix here (unlike the rest of this file) - this
 * page's wrapper (#tribe-events-content.tribe-events-single) never carries
 * that class. Only the embedded "Add to calendar" subscribe-dropdown
 * widget does, since it renders its own self-contained `.tribe-common`
 * wrapper internally.
 */
.nfc-single-event__header {
	text-align: center;
	padding-bottom: 56px;
}

.nfc-single-event__eyebrow {
	display: block;
	padding-bottom: 8px;
}

.nfc-single-event__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 2em;
}

.nfc-single-event__image-col {
	flex: 0 0 464px;
	width: 464px;
	max-width: 100%;
}

.nfc-single-event__image-col img {
	display: block;
	width: 100%;
	max-width: 464px;
	height: auto;
}

.nfc-single-event__meta-col {
	flex: 1 1 320px;
	min-width: 0;
}

.nfc-single-event__meta-row {
	margin: 0 0 8px;
}

.nfc-single-event__meta-row:last-of-type {
	margin: 0 0 24px;
}

.nfc-single-event__register-btn {
	display: inline-block;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: 48px;
}

.nfc-single-event__description-title{
	padding-bottom: 12px;
}

.nfc-single-event__register-btn:last-of-type {
	display: inline-block;
	border-radius: 999px;
	text-decoration: none;
	margin-bottom: 0;
}

.single-tribe_events .tribe-common.tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border-radius: 40px !important;
}

.nfc-single-event__boilerplate p {
	margin: 0 0 16px;
}

.nfc-single-event__boilerplate p:last-child {
	margin-bottom: 56px;
}

.nfc-single-event__registration-title{
	text-align: center;
}

/* Smooth-scroll target for the "Register Now" buttons; offset clears a
   sticky header so the section title isn't hidden right under it. */
html {
	scroll-behavior: smooth;
}

.nfc-single-event__registration {
	scroll-margin-top: 24px;
}


.nfc-single-event__hubspot-form:empty:before {
	content: "HubSpot form embed goes here";
	display: block;
	font-style: italic;
}

/* Fix alignment for calendar btn */
.tribe-events .tribe-events-c-subscribe-dropdown__container{
	justify-content: flex-start !important;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-subscribe-dropdown{
	margin-left: 0;
}