/* IFA Members Area — shared front-end styles.
   Colors match the ifa-institutional design system's --ifa-* custom
   properties. Redeclared locally (not relying on the theme's style.css
   being loaded) — same reasoning as the theme's own tribe-events-custom.css
   and 3col-resources.css: this plugin can't assume the theme's globals are
   present in every context it renders in. */

:root {
	--ifa-green: #49B461;
	--ifa-dark-blue: #203248;
	--ifa-light-mint: #EDF7F4;
	--ifa-dark-teal: #255F71;
	--ifa-teal: #29A5A1;
	--ifa-purple: #A05793;
}

/* Locked/teaser treatment for a members_only card the current visitor can't
   open yet — used on the PUBLIC events list only. The Non-Member Gate page
   deliberately does NOT reuse this: blurring there would obscure a pitch to
   someone who might join, not withhold something they genuinely can't have.
   That page uses a plain enumerated card list instead (see the design
   handoff's "deliberate deviation" note); the lock chip below is the only
   visual element actually shared between the two contexts. */
.ifa-members-locked {
	position: relative;
	filter: grayscale(0.15);
	opacity: 0.55;
	pointer-events: none;
}

.ifa-members-locked .ifa-members-locked-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	background: var(--ifa-dark-blue);
	color: #fff;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 999px;
}

/* Event type pill — uniform navy-outline, never color-coded per type
   (matches what the live site audit found: IFA doesn't color-code by
   topic anywhere else on the site). */
.ifa-event-type-pill {
	display: inline-block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-align: center;
	border: 1px solid var(--ifa-dark-blue);
	color: var(--ifa-dark-blue);
	border-radius: 999px;
	padding: 5px 10px;
}

/* ============================================================
   Member chip — header right-cluster widget (design handoff §
   "Member chip — plugin shortcode"). Values are the measured
   spec, not estimates.
   ============================================================ */

.ifa-member-chip__login-btn {
	display: inline-block;
	background: #fff;
	border: 1px solid var(--ifa-dark-blue);
	color: var(--ifa-dark-blue) !important;
	border-radius: 6px;
	padding: 13px 26px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	line-height: 1;
}

.ifa-member-chip {
	position: relative;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.ifa-member-chip__trigger {
	display: flex;
	align-items: center;
	gap: 9px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.ifa-member-chip__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.ifa-member-chip.is-member .ifa-member-chip__avatar {
	background: var(--ifa-light-mint);
	border: 1.5px solid var(--ifa-dark-blue);
	color: var(--ifa-dark-blue);
}

.ifa-member-chip.is-non-member .ifa-member-chip__avatar {
	background: #fff;
	border: 1.5px solid #C9CDCB;
	color: #5B6270;
}

.ifa-member-chip__name {
	color: var(--ifa-dark-blue);
	font-size: 14.5px;
	font-weight: 600;
}

.ifa-member-chip__chevron {
	font-size: 9px;
	color: var(--ifa-dark-blue);
	opacity: 0.75;
	transition: transform 0.2s ease;
}

.ifa-member-chip.is-open .ifa-member-chip__chevron {
	transform: rotate(180deg);
}

.ifa-member-chip__dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid #E7EAEC;
	border-radius: 10px;
	box-shadow: 3px 4px 14px rgba(0, 0, 0, 0.1);
	padding: 8px;
	z-index: 100;
}

.ifa-member-chip.is-open .ifa-member-chip__dropdown {
	display: block;
}

.ifa-member-chip__status {
	padding: 8px 12px 4px;
	font-size: 13px;
	color: #5B6270;
}

.ifa-member-chip__dropdown-link {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: var(--ifa-dark-blue) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
}

.ifa-member-chip__dropdown-link:hover {
	background: var(--ifa-light-mint);
}

.ifa-member-chip__dropdown-link.is-cta {
	color: var(--ifa-dark-teal) !important;
	font-weight: 700;
}

/* ============================================================
   Members sub-bar — appears on the four gated pages only
   (design handoff § "Members sub-bar — plugin shortcode").
   ============================================================ */

.ifa-members-subbar {
	background: var(--ifa-light-mint);
	padding: 8px 40px;
	min-height: 54px;
	display: flex;
	align-items: center;
	gap: 6px;
	border-top: 1px solid rgba(32, 50, 72, 0.08);
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.ifa-members-subbar__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #5B6270;
	margin-right: 18px;
}

.ifa-members-subbar__item {
	font-size: 14px;
	font-weight: 600;
	color: var(--ifa-dark-blue) !important;
	padding: 8px 16px;
	border-radius: 8px;
	text-decoration: none !important;
}

.ifa-members-subbar__item.is-active {
	background: var(--ifa-dark-blue);
	color: #fff !important;
}

/* ============================================================
   Members Area (screen 1a) — hero, pillar cards, spotlights.
   Values from the design handoff's measured spec.
   ============================================================ */

.ifa-btn-primary {
	display: inline-block;
	background: var(--ifa-dark-blue);
	border: 1px solid var(--ifa-dark-blue);
	color: #fff !important;
	border-radius: 8px;
	padding: 12px 20px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none !important;
	transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.ifa-btn-primary:hover {
	background: var(--ifa-dark-teal);
	border-color: var(--ifa-dark-teal);
	color: #fff !important;
}

.ifa-members-hero__tier-pill {
	display: inline-block;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ifa-dark-teal);
	border: 1px solid var(--ifa-teal);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 20px;
}

.ifa-members-hero__title {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1.2;
	color: var(--ifa-dark-blue);
	margin: 0 0 16px;
}

.ifa-members-hero__lead {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 1.7;
	color: #3E4A5B;
	max-width: 660px;
	margin: 0;
}

/* The "lighter members-area card" — same geometry as the site's canonical
   .ifa-related__card, no navy hover-fill (a deliberate client decision for
   the gated pages, per the design handoff's "Card systems" section). */
.ifa-card {
	background: #fff;
	border: 1px solid #E7EAEC;
	border-radius: 14px;
	box-shadow: 3px 4px 14px rgba(0, 0, 0, 0.06);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) and (pointer: fine) {
	.ifa-card:hover {
		transform: translateY(-6px);
		box-shadow: 10px 12px 26px rgba(0, 0, 0, 0.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ifa-card {
		transition: none;
	}
	.ifa-card:hover {
		transform: none;
	}
}

.ifa-card__icon-tile {
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--ifa-dark-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	flex-shrink: 0;
}

.ifa-pillar-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ifa-pillar-card {
	display: flex;
	flex-direction: column;
	padding: 26px;
}

.ifa-pillar-card .ifa-card__icon-tile {
	margin-bottom: 18px;
}

.ifa-pillar-card__title {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--ifa-dark-blue);
	margin: 0 0 10px;
}

.ifa-pillar-card__copy {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #3E4A5B;
	flex: 1;
	margin: 0 0 20px;
}

.ifa-pillar-card__cta {
	align-self: flex-start;
}

.ifa-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
}

.ifa-section-header__icon-tile {
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px;
	background: var(--ifa-dark-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.ifa-section-header h2 {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.3;
	color: var(--ifa-dark-blue);
	margin: 0;
}

.ifa-spotlights-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ifa-spotlight-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	text-decoration: none !important;
}

.ifa-spotlight-card__media {
	width: 96px;
	height: 96px;
	border-radius: 12px;
	background: var(--ifa-light-mint);
	color: var(--ifa-dark-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	flex-shrink: 0;
}

.ifa-spotlight-card__eyebrow {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5B6270;
	margin-bottom: 6px;
}

.ifa-spotlight-card__title {
	font-family: 'Libre Baskerville', Georgia, serif;
	font-weight: 700;
	font-size: 19px;
	color: var(--ifa-dark-blue);
	margin: 0 0 8px;
}

.ifa-spotlight-card__action {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: var(--ifa-dark-teal) !important;
}

/* ============================================================
   Full-bleed section bands — replaces relying on Divi et_pb_section
   for band backgrounds/padding. Each shortcode wraps its own output
   in one of these so the page can be built from plain shortcode
   calls with no et_pb_* wrapper markup at all (avoids Divi's nested-
   module re-processing and its generic .et_pb_text link styling).
   ============================================================ */

.ifa-band {
	padding: 60px 40px;
}

.ifa-band--mint {
	background: var(--ifa-light-mint) !important;
}

.ifa-band--white {
	background: #FFFFFF !important;
}

.ifa-band__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.ifa-members-hero-band {
	padding: 58px 40px 62px;
}