/**
 * The Events Calendar - brand skin.
 *
 * Loaded only on Events views (see inc/events.php).
 *
 * STRATEGY: restyle TEC's own classes rather than override its templates.
 * The plugin ships breaking view changes fairly often; CSS survives that,
 * copied PHP templates do not.
 *
 * TEC's own stylesheet is loaded first and is fairly specific, so a number of
 * rules here need `!important` to win. That is a deliberate trade - the
 * alternative is replicating its long selector chains, which breaks the moment
 * the plugin adjusts one of them.
 *
 * Class prefixes:
 *   .tribe-common-*  shared design system (typography, buttons, grid)
 *   .tribe-events-*  calendar-specific components
 */

/* =========================================================================
   Typography - hand TEC our fonts
   ========================================================================= */

.apf-events .tribe-common,
.apf-events .tribe-events,
.apf-events .tribe-common a,
.apf-events .tribe-common p,
.apf-events .tribe-common li,
.apf-events .tribe-common span,
.apf-events .tribe-common div {
	font-family: var(--apf-font-body) !important;
}

.apf-events .tribe-common h1,
.apf-events .tribe-common h2,
.apf-events .tribe-common h3,
.apf-events .tribe-common h4,
.apf-events .tribe-common .tribe-common-h1,
.apf-events .tribe-common .tribe-common-h2,
.apf-events .tribe-common .tribe-common-h3,
.apf-events .tribe-common .tribe-common-h4,
.apf-events .tribe-common .tribe-common-h5,
.apf-events .tribe-common .tribe-common-h6,
.apf-events .tribe-common .tribe-common-h7,
.apf-events .tribe-common .tribe-common-h8 {
	font-family: var(--apf-font-heading) !important;
	color: var(--apf-dark-sage);
}

.apf-events .tribe-common .tribe-common-b1,
.apf-events .tribe-common .tribe-common-b2,
.apf-events .tribe-common .tribe-common-b3 {
	color: var(--apf-ink);
}

/* =========================================================================
   Layout - align TEC's container with the theme's
   ========================================================================= */

.apf-events .tribe-events,
.apf-events #tribe-events,
.apf-events .tribe-common .tribe-common-l-container {
	max-width: var(--apf-wide) !important;
	margin-inline: auto;
	padding-inline: var(--apf-gutter);
}

.apf-events .tribe-events-header {
	padding-block: 1.5rem 0.5rem;
}

/* Our banner supplies the page title; hide any the plugin still prints. */
.apf-events .tribe-events-header__title,
.apf-events .tribe-events-header__breadcrumbs {
	display: none;
}

.apf-events-breadcrumbs {
	padding-top: 0;
}

/* =========================================================================
   Top bar - date nav, view switcher, search
   ========================================================================= */

.apf-events .tribe-events-c-top-bar {
	border-bottom: 1px solid var(--apf-bone);
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
}

.apf-events .tribe-events-c-top-bar__datepicker-button,
.apf-events .tribe-events-c-top-bar__today-button {
	color: var(--apf-dark-sage) !important;
	font-weight: 600;
}

.apf-events .tribe-events-c-top-bar__nav-link {
	color: var(--apf-dark-sage) !important;
}

.apf-events .tribe-events-c-top-bar__nav-link:hover {
	background-color: var(--apf-sage-08);
	border-radius: 6px;
}

/* SVG chevrons and icons inherit currentColor in TEC's markup. */
.apf-events .tribe-common-c-svgicon {
	color: var(--apf-dark-sage);
}

/* View selector (List / Month / Day) */
.apf-events .tribe-events-c-view-selector__button {
	color: var(--apf-dark-sage) !important;
	border-radius: 999px;
}

.apf-events .tribe-events-c-view-selector__list-item-link:hover,
.apf-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
	color: var(--apf-dark-sage) !important;
}

.apf-events .tribe-events-c-view-selector__list-item-text {
	font-family: var(--apf-font-body) !important;
}

/* =========================================================================
   Buttons
   ========================================================================= */

.apf-events .tribe-common-c-btn,
.apf-events a.tribe-common-c-btn,
.apf-events .tribe-events-c-subscribe-dropdown__button {
	background-color: var(--apf-sky) !important;
	border: 2px solid transparent !important;
	border-radius: var(--apf-radius-pill) !important;
	color: var(--apf-ink) !important;
	font-family: var(--apf-font-body) !important;
	font-weight: 500 !important;
	padding: 0.75rem 1.75rem !important;
	transition: background-color var(--apf-transition);
}

.apf-events .tribe-common-c-btn:hover,
.apf-events a.tribe-common-c-btn:hover,
.apf-events .tribe-events-c-subscribe-dropdown__button:hover {
	background-color: var(--apf-sky-hover) !important;
	color: var(--apf-ink) !important;
}

.apf-events .tribe-common-c-btn-border,
.apf-events .tribe-common-c-btn-border-small {
	border-color: var(--apf-dark-sage) !important;
	border-radius: var(--apf-radius-pill) !important;
	color: var(--apf-dark-sage) !important;
	font-family: var(--apf-font-body) !important;
}

.apf-events .tribe-common-c-btn-border:hover {
	background-color: var(--apf-dark-sage) !important;
	color: var(--apf-white) !important;
}

/* =========================================================================
   List view - event rows as cards
   ========================================================================= */

.apf-events .tribe-events-calendar-list__event-row {
	margin-bottom: 1.5rem;
}

.apf-events .tribe-events-calendar-list__event-wrapper {
	background-color: var(--apf-white);
	border: 1px solid var(--apf-bone);
	border-radius: var(--apf-radius);
	overflow: hidden;
	padding: 1.25rem;
	transition: box-shadow var(--apf-transition), transform var(--apf-transition);
}

.apf-events .tribe-events-calendar-list__event-wrapper:hover {
	box-shadow: var(--wp--preset--shadow--raised, 0 4px 12px rgba(51,51,51,.1));
	transform: translateY(-2px);
}

.apf-events .tribe-events-calendar-list__event-featured-image-wrapper img,
.apf-events .tribe-events-calendar-list__event-featured-image {
	border-radius: calc(var(--apf-radius) - 2px);
}

.apf-events .tribe-events-calendar-list__event-title-link {
	color: var(--apf-dark-sage) !important;
	text-decoration: none;
}

.apf-events .tribe-events-calendar-list__event-title-link:hover {
	color: var(--apf-coral) !important;
	text-decoration: underline;
}

.apf-events .tribe-events-calendar-list__event-datetime,
.apf-events .tribe-events-calendar-list__event-date-tag {
	color: var(--apf-warm-sage) !important;
}

/* The date badge beside each event. */
.apf-events .tribe-events-calendar-list__event-date-tag-daynum {
	background-color: var(--apf-dark-sage) !important;
	color: var(--apf-white) !important;
	border-radius: 8px;
	font-family: var(--apf-font-body) !important;
	font-weight: 700;
}

.apf-events .tribe-events-calendar-list__event-date-tag-weekday {
	color: var(--apf-warm-sage) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9375rem !important;
	margin-bottom: 0.375rem;
}

/* Month separator headings ("July 2026"). */
.apf-events .tribe-events-calendar-list__month-separator-text {
	background-color: var(--apf-white);
	color: var(--apf-dark-sage) !important;
	font-family: var(--apf-font-heading) !important;
	font-size: 1.75rem !important;
	padding-inline: 1rem;
}

.apf-events .tribe-events-calendar-list__month-separator::after {
	background-color: var(--apf-bone) !important;
}

/* =========================================================================
   Month view
   ========================================================================= */

.apf-events .tribe-events-calendar-month__day-cell--selected,
.apf-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date {
	background-color: var(--apf-dark-sage) !important;
	color: var(--apf-white) !important;
}

.apf-events .tribe-events-calendar-month__header-column-title {
	color: var(--apf-dark-sage) !important;
	font-family: var(--apf-font-body) !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.apf-events .tribe-events-calendar-month__calendar-event-title-link {
	color: var(--apf-dark-sage) !important;
}

.apf-events .tribe-events-calendar-month__multiday-event-bar-inner {
	background-color: var(--apf-bone) !important;
}

.apf-events .tribe-events-calendar-month__day-cell:hover {
	background-color: var(--apf-bone-20) !important;
}

/* =========================================================================
   Single event
   ========================================================================= */

.apf-events.single-tribe_events .tribe-events-single {
	max-width: var(--apf-content);
	margin-inline: auto;
	padding-block: 2rem 3rem;
}

/*
 * Our banner carries the title, so TEC's is hidden.
 *
 * `display: none` (rather than .screen-reader-text) is deliberate: it removes
 * the element from the accessibility tree, so a screen reader announces the
 * event title once, not twice. The element does remain in the DOM - suppressing
 * it entirely would mean overriding TEC's single-event template, which is not
 * worth freezing a copy of plugin markup for a hidden node.
 */
.apf-events.single-tribe_events .tribe-events-single-event-title {
	display: none;
}

.apf-events .tribe-events-schedule {
	background-color: var(--apf-bone-20);
	border-left: 4px solid var(--apf-dark-sage);
	border-radius: 0 var(--apf-radius) var(--apf-radius) 0;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.apf-events .tribe-events-schedule h2 {
	font-family: var(--apf-font-body) !important;
	font-size: 1rem !important;
	color: var(--apf-ink) !important;
	margin: 0;
}

.apf-events .tribe-events-event-meta {
	background-color: transparent;
	border: 1px solid var(--apf-bone);
	border-radius: var(--apf-radius);
	padding: 1.25rem;
}

.apf-events .tribe-events-event-meta .tribe-events-meta-group h3,
.apf-events .tribe-events-meta-group .tribe-events-single-section-title {
	color: var(--apf-dark-sage) !important;
	font-family: var(--apf-font-body) !important;
	font-size: 0.75rem !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.apf-events .tribe-events-back a,
.apf-events .tribe-events-nav-previous a,
.apf-events .tribe-events-nav-next a {
	color: var(--apf-dark-sage) !important;
}

/* =========================================================================
   Search / filter bar
   ========================================================================= */

.apf-events .tribe-events-c-search__input,
.apf-events .tribe-common-form-control-text__input {
	border-color: var(--apf-bone) !important;
	border-radius: 8px !important;
	font-family: var(--apf-font-body) !important;
}

.apf-events .tribe-events-c-search__input:focus,
.apf-events .tribe-common-form-control-text__input:focus {
	border-color: var(--apf-dark-sage) !important;
	outline: 2px solid var(--apf-dark-sage);
	outline-offset: 1px;
}

.apf-events .tribe-common-form-control-text__label,
.apf-events .tribe-events-c-search__label {
	color: var(--apf-dark-sage) !important;
}

/* =========================================================================
   Accessibility
   ========================================================================= */

/*
 * TEC sets its own focus styles, several of which are outline:none. Restore a
 * visible ring - a keyboard user must always be able to see where they are.
 */
.apf-events a:focus-visible,
.apf-events button:focus-visible,
.apf-events input:focus-visible,
.apf-events select:focus-visible,
.apf-events [tabindex]:focus-visible {
	outline: 2px solid var(--apf-dark-sage) !important;
	outline-offset: 2px !important;
}

/* =========================================================================
   Notices
   ========================================================================= */

.apf-events .tribe-events-c-messages__message,
.apf-events .tribe-events-notices {
	background-color: var(--apf-bone-20) !important;
	border: 1px solid var(--apf-bone) !important;
	border-radius: var(--apf-radius) !important;
	color: var(--apf-ink) !important;
}

.apf-events .tribe-events-c-messages__message-list-item-link {
	color: var(--apf-dark-sage) !important;
}

/* =========================================================================
   Spacing corrections
   ========================================================================= */

/*
 * TEC's wrapper carries generous top padding intended for themes that do not
 * supply their own page header. Ours does, so the stock spacing leaves a large
 * empty band between the breadcrumbs and the date navigation.
 */
.apf-events .tribe-events-view,
.apf-events .tribe-common--breakpoint-medium.tribe-events-view {
	padding-top: 0 !important;
}

.apf-events .tribe-events-header {
	padding-top: 0.5rem !important;
	margin-top: 0 !important;
}

.apf-events #tribe-events-pg-template,
.apf-events .tribe-events-pg-template {
	padding-top: 0 !important;
}

/* TEC injects a spacer before the top bar on some views. */
.apf-events .tribe-events-c-top-bar {
	margin-top: 0 !important;
}