/**
 * Theme (color/font/size) CSS for the custom Events Calendar templates.
 *
 * Pairs with tec-structure.css, which handles layout only. This file is the
 * "paint": colors, font-family/weight, font-size, letter-spacing.
 *
 * The Events Calendar's own stylesheet drives almost everything through its
 * own CSS custom properties (--tec-color-*, defined in
 * common/build/css/variables-*.css and build/css/views-*.css). Re-pointing
 * those to our brand colors is what actually reaches every plugin-rendered
 * element (day numbers, hover states, etc.) - our own selectors below only
 * cover markup we added ourselves. Where TEC's compiled CSS uses a selector
 * that's more specific than ours, or where a shared variable would leak
 * into an element we need styled differently (e.g. white text on the dark
 * weekday header vs. navy text everywhere else), we fall back to
 * `!important` rather than chase specificity.
 *
 * Every selector below is prefixed with `.tribe-common` - compound
 * (`.tribe-common.foo`, no space) when it's the same element, descendant
 * (`.tribe-common .foo`, with space) otherwise. TEC's own base reset
 * (`.tribe-common ul, .tribe-common li, .tribe-common td, ...
 * {margin:0;padding:0;border:0}`) runs at class+element specificity
 * (0,1,1). A bare single class like `.nfc-events-list__item` is only
 * (0,1,0) and loses to it regardless of load order. Prefixing with
 * `.tribe-common` bumps us to (0,2,0)+ so our rules win without needing
 * `!important` for every single declaration.
 */

:root {
	/* Brand palette */
	--nfc-color-text: #285268;
	--nfc-color-eyebrow: #488247;
	--nfc-color-accent: #528351;
	--nfc-color-border: #D1D1D1;
	--nfc-font: 'Roboto', sans-serif;

	/* Re-point The Events Calendar's own design-system variables. */
	--tec-color-text-primary: var(--nfc-color-text);
	--tec-color-text-primary-light: var(--nfc-color-text);
	--tec-color-text-secondary: var(--nfc-color-text);
	--tec-color-icon-primary: var(--nfc-color-text);
	--tec-color-icon-active: var(--nfc-color-text);
	--tec-color-link-primary: var(--nfc-color-text);
	--tec-color-accent-primary: var(--nfc-color-accent);
	--tec-color-accent-primary-hover: var(--nfc-color-accent);
	--tec-color-accent-primary-active: var(--nfc-color-accent);
	--tec-color-accent-secondary: var(--nfc-color-text);
	--tec-color-accent-secondary-hover: var(--nfc-color-text);
	--tec-color-accent-secondary-active: var(--nfc-color-text);
	--tec-color-border-default: var(--nfc-color-border);
	--tec-color-border-secondary: var(--nfc-color-border);
	--tec-color-border-active: var(--nfc-color-text);
	--tec-color-border-active-month-grid-hover: var(--nfc-color-accent);
	--tec-color-background-secondary: #fff;
	--tec-color-background-month-grid: #fff;
	--tec-color-text-event-date: var(--nfc-color-eyebrow);
	--tec-color-text-secondary-event-date: var(--nfc-color-eyebrow);

	/*
	 * TEC's entire stylesheet reads font-family from this one variable
	 * (dozens of selectors like .tribe-common-h1, .tribe-common-b2,
	 * .tribe-common-c-btn reference it directly at higher specificity than
	 * a broad `.tribe-events-view` rule would have). Its default stack puts
	 * "Helvetica Neue"/Helvetica before Roboto, so Roboto never won even
	 * though it's in the list. Re-pointing the variable itself fixes every
	 * one of those selectors at once, the same way the color variables do.
	 */
	--tec-font-family-sans-serif: var(--nfc-font);
}

.tribe-common{
	background-color: #fffcf1;
}

.tribe-common.tribe-events-view {
	font-family: var(--nfc-font);
	color: var(--nfc-color-text);
	font-size: 16px;
}

.tribe-common.tribe-events-view input,
.tribe-common.tribe-events-view button {
	font-family: inherit;
}

.tribe-common.tribe-events-view .nfc-view-toggle__label{
	font-weight: 700;
}

/* Headings */
.tribe-common .nfc-events-title,
.tribe-common .nfc-events-section__title {
	font-size: 28px;
	font-weight: 700 !important;
	color: var(--nfc-color-text) !important;
}

.tribe-common .nfc-events-section__title{
	padding-bottom: 20px !important;
	border-bottom: solid 1px #285268 !important;
}

/* Event titles (list row + month cell) */
.tribe-common .tribe-events-calendar-list__event-title {
	font-size: 20px !important;
	line-height: 28px !important;
	font-weight: 700;
	color: var(--nfc-color-text) !important;
}

.tribe-common .tribe-events-calendar-list__event-title-link,
.tribe-common .tribe-events-calendar-month__calendar-event-title-link {
	color: inherit !important;
}

/* Eyebrow: date/time line sitting above the title (list view) */
.tribe-common .nfc-events-list__event-meta-time {
	color: var(--nfc-color-eyebrow) !important;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Date-tag block (Month / Date / Year), list view only */
.tribe-common .nfc-events-list__date-tag-month,
.tribe-common .nfc-events-list__date-tag-day,
.tribe-common .nfc-events-list__date-tag-year {
	display: block;
	color: var(--nfc-color-accent) !important;
}

.tribe-common .nfc-events-list__date-tag-month {
	font-size: 16px;
	font-weight: 400;
}

.tribe-common .nfc-events-list__date-tag-day {
	font-size: 28px;
	letter-spacing: -0.5px;
	font-weight: 700;
}

.tribe-common .nfc-events-list__date-tag-year {
	font-size: 14px;
	font-weight: 400;
}

/* Body / description text */
.tribe-common .nfc-events-list__event-description {
	font-size: 16px !important;
	line-height: 24px !important;
	font-weight: 400;
	color: var(--nfc-color-text) !important;
}

/* Event List spacing*/
.tribe-common.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row{
	margin: 38px 0;
}

.tribe-common.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-row:last-child{
	margin-bottom: 54px;
}

/* Nav Background Override */
.tribe-common.tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar{
	background-color: transparent !important;
}

/* Nav / button text */
.tribe-common .nfc-view-toggle__button {
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--nfc-color-text) !important;
	border-color: var(--nfc-color-text) !important;
	background-color: #fff !important;
}

.tribe-common .nfc-this-month-button{
	padding: 12px 20px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	border-radius: 40px !important;
	color: var(--nfc-color-text) !important;
	border-color: var(--nfc-color-text) !important;
	background-color: #fff !important;
}

.tribe-common .nfc-view-toggle__button--active {
	color: #fff !important;
	background-color: var(--nfc-color-text) !important;
	border-color: var(--nfc-color-text) !important;
}

/* Calendar Date Picker Override */
.tribe-common.tribe-common--breakpoint-medium button.tribe-events-c-top-bar__datepicker-button{
	color: var(--nfc-color-text);
	font-family: Roboto;
	font-size: 16px;
	font-weight: 700;
}

/* Calendar weekday header row: dark navy bar, white text. */
.tribe-common .nfc-calendar-month__header {
	background-color: var(--nfc-color-text) !important;
}

.tribe-common .tribe-events-calendar-month__header-column-title {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #fff !important;
}

/* Calendar day numbers: navy, not the plugin's default near-black. */
.tribe-common .tribe-events-calendar-month__day-date-daynum,
.tribe-common .tribe-events-calendar-month__day-date-link {
	color: var(--nfc-color-text) !important;
}

/* Calendar body and date sizing */
.tribe-common--breakpoint-medium.tribe-common .tribe-common-h4{
	font-size: 13px !important;
	font-weight: 700 !important;
}

.tribe-common .tribe-events-calendar-month__calendar-event-title{
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--nfc-color-text) !important;
}

.tribe-common .tribe-events-calendar-month__calendar-event-datetime {
	color: var(--nfc-color-eyebrow) !important;
	font-size: 12px;
	font-weight: 400;
}

/* Borders / dividers */
.tribe-common .nfc-events-list__date-tag {
	border-right: solid 1px #D1D1D1 !important;
}

.tribe-common .tribe-events-calendar-month table,
.tribe-common .tribe-events-calendar-month th,
.tribe-common .tribe-events-calendar-month td {
	border-color: var(--nfc-color-border) !important;
}

/*
 * All calendar day cells should be white. The plugin's own grid background
 * is already transparent - the alternating white/light-gray rows are
 * actually coming from Hello Elementor's reset.css generic table zebra
 * stripe (`table tbody > tr:nth-child(odd) > td`), which bleeds into any
 * <table> on the site, including this one. Override it directly.
 */
.tribe-common .tribe-events-calendar-month tbody > tr > td,
.tribe-common .tribe-events-calendar-month tbody > tr > th {
	background-color: #fff !important;
}

/* Calendar hover underline (the bar under a day on :hover). */
.tribe-common .tribe-events-calendar-month__day:hover:after {
	background-color: var(--nfc-color-accent) !important;
}

/* Search bar size & style override */
.tribe-common--breakpoint-medium.tribe-common .tribe-common-form-control-text__input{
	padding: 12px 12px 12px 48px;
	background-color: #fff !important;
	border: 1px solid rgba(209, 209, 209, 1) !important;
	border-radius: calc(infinity * 1px);
}

.tribe-common .nfc-events-bar__search{
	border-radius: calc(infinity * 1px);
}

/* Font Awesome view-toggle icons inherit the button's current text color
   (white when active, accent green when not) - no color set here on purpose. */
.tribe-common .nfc-view-toggle__button-icon {
	font-size: 15px;
}

/*
 * Single event boilerplate: the disclaimer paragraph reads as legal
 * fine print in the design (smaller, italic) versus the regular-weight
 * intro line above it - had no styling at all before, hence "not styled
 * properly."
 *
 * No `.tribe-common` prefix - this page's wrapper never carries that
 * class (see the note in tec-structure.css).
 */
.nfc-single-event__boilerplate {
	font-size: 14px;
}

.nfc-single-event__disclaimer {
	font-style: italic;
	font-size: 13px;
}

/*
 * Single event page
 */

/* "Webinar" eyebrow, above the title. */
.nfc-single-event__eyebrow {
	font-size: 18px;
	font-weight: 700;
	line-height: 26px;
	color: #528351;
}

/* Event title (h1). */
.nfc-single-event__title {
	font-size: 40px;
	font-weight: 700;
	line-height: 48px;
	color: #285268;
}

/* "When:" / "Time:" rows - the row itself. */
.nfc-single-event__meta-row {
	font-size: 24px;
	color: #285268;
}

/* Just the "When:" / "Time:" label word, not the value. */
.nfc-single-event__meta-row strong {
	font-size: 24px;
	color: #285268;
}

/* "Register Now" buttons (both the one above and below the description). */
.nfc-single-event__register-btn {
	font-size: 15px;
	font-weight: 700;
	color: #fff !important;
	background-color: #528351;
	border-radius: 40px;
	padding: 11px 22px;
}

/* "Event Summary" heading, right before the description. */
.nfc-single-event__description-title {
	font-size: 24px;
	font-weight: 700;
	color: #285268;
}

/* Event Summary content - the text the event editor writes per event. */
.nfc-single-event__description {
	color: #285268;
}

/* Intro line of the boilerplate block ("Nonprofit GPS is a field-driven..."). */
.nfc-single-event__boilerplate p {
	font-size: 14px;
	font-weight: 400;
}


.nfc-single-event__boilerplate p:last-child{
	font-size: 12px;
	font-weight: 400;
	font-style: italic;
}

/* "Register today to reserve your seat!" heading. */
.nfc-single-event__registration-title {
	font-size: 36px;
	font-weight: 700;
	color: #285268;
	line-height: 44px;
}