/* TCSA Membership — shared front-end styles */

/* Layout shell.
   A host page does not always supply a padded container. On the staging
   Members Area the page carries Elementor builder mode with empty layout
   data, so the theme's own .entry-content wrapper never renders and the
   shortcode output sits directly on the site div — flush to both viewport
   edges. Every top-level shortcode wrapper therefore centres and pads
   itself. Inside a container that already constrains width this is inert,
   because max-width only ever narrows. */
.tcsa-archive,
.tcsa-tiles,
.tcsa-video-library,
.tcsa-meeting-list,
.tcsa-member-search,
.tcsa-sponsor-logos,
.tcsa-sponsor-list,
.tcsa-vendor-directory {
	box-sizing: border-box;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.tcsa-archive {
	padding-block: clamp(1.5rem, 4vw, 3rem);
}
.tcsa-archive-header h1 {
	margin: 0 0 1.5rem;
}

/* Section nav — the jump bar between Webinars / Videos / Spotlights /
   Meetings. The legacy site had no equivalent: members had to return to the
   hub to change section. */
.tcsa-member-nav {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 1200px;
	margin: 0 auto 2rem;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
/* On an archive the nav sits inside .tcsa-archive, which already centres and
   pads. Same inside a theme content column (.entry-content — e.g. the Virtual
   C-Store tour page): the column supplies the gutter, so the shell would
   indent the pills ~80px past the page text. The members-area hub keeps the
   shell — its Elementor quirk means no .entry-content wrapper renders there. */
.tcsa-archive .tcsa-member-nav,
.entry-content .tcsa-member-nav {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}
/* `.tcsa-member-nav a...` (0,2,1) so these beat the theme's content-area
   link rules — on a regular page (e.g. the Virtual C-Store tour) a bare
   `.tcsa-member-nav-item` lost its padding and colour to `.entry-content a`
   and the pills collapsed. The archive template sits outside those rules,
   which is why only content pages looked wrong. */
.tcsa-member-nav a.tcsa-member-nav-item {
	display: inline-block;
	margin: 0;
	padding: 0.55rem 1.1rem;
	border: 1px solid #221b51;
	border-radius: 999px;
	color: #221b51;
	background: transparent;
	font-size: 0.95rem;
	line-height: 1.2;
	text-decoration: none;
}
.tcsa-member-nav a.tcsa-member-nav-item:hover,
.tcsa-member-nav a.tcsa-member-nav-item:focus {
	background: #221b51;
	color: #fff;
	text-decoration: none;
}
.tcsa-member-nav a.tcsa-member-nav-item.is-current {
	background: #221b51;
	color: #fff;
	font-weight: 600;
}
/* The events-page Upcoming/Past toggle sits inside an Elementor container
   that already centres and pads — drop the nav's own shell there. */
.tcsa-event-toggle {
	max-width: none;
	padding-inline: 0;
	margin: 0 0 1.25rem;
}
/* Separate "home" from the sections it leads to. */
.tcsa-member-nav a.tcsa-member-nav-home {
	margin-right: 0.5rem;
}
@media (min-width: 600px) {
	.tcsa-member-nav a.tcsa-member-nav-home {
		border-right-width: 1px;
		padding-right: 1.4rem;
		margin-right: 0.9rem;
	}
}

/* Hub tiles — the legacy members-area landing grid: a photo per destination
   with the section name over it. */
.tcsa-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}
/* Five destinations on one row at desktop (client request 2026-09-17, when
   the Meetings tile was dropped). Inside the 1200px shell each tile is
   ~210px wide, so the art goes 4:3 rather than 16:9 — a 16:9 tile at that
   width is a 118px sliver — and the label steps down to fit "On-Demand
   Education" on two lines. Below desktop the auto-fill grid above wraps
   them 3 / 2 / 1 as before. */
@media (min-width: 1024px) {
	.tcsa-tiles {
		grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
	}
	.tcsa-tiles .tcsa-tile-img {
		aspect-ratio: 4 / 3;
	}
	.tcsa-tiles .tcsa-tile-label {
		font-size: clamp(1.1rem, 1.5vw, 1.45rem);
	}
}
.tcsa-tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: #221b51;
	text-decoration: none;
	isolation: isolate;
}
/* Tile art is the newest post's thumbnail, and TCSA burn captions into their
   video stills ("Keynote DISC Workshop…", "via Zoom with…"). Unblurred, that
   text collides with the tile label and both become unreadable. Blur reduces
   it to texture; the scale hides the soft edge the blur leaves behind. */
.tcsa-tile-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: #221b51;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(5px) saturate(1.15);
	transform: scale(1.12);
	transition: transform 0.35s ease;
}
/* Brand wash over the photo, so white type stays legible on any thumbnail. */
.tcsa-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(20, 130, 142, 0.82), rgba(34, 27, 81, 0.88));
	z-index: 1;
}
.tcsa-tile-label {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: #fff;
	font-size: clamp(1.4rem, 2.6vw, 2.1rem);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.tcsa-tile:hover .tcsa-tile-img,
.tcsa-tile:focus .tcsa-tile-img {
	transform: scale(1.18);
}
.tcsa-tile:focus-visible {
	outline: 3px solid #14828e;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.tcsa-tile-img {
		transition: none;
	}
	.tcsa-tile:hover .tcsa-tile-img,
	.tcsa-tile:focus .tcsa-tile-img {
		transform: scale(1.12);
	}
}

/* Sponsor profile: the theme prints the post title under the featured-image
   logo, and the logo already carries the name — hide the duplicate. The
   logo's alt text keeps the name for assistive tech. */
.single-tcsa_sponsor h1.page-title {
	display: none;
}

/* Sponsor profile logo. The TechTLK theme stretches every single-post
   featured image across the content column (`.single .bs-img img
   { width: 100% !important }`), so a square 1280px logo renders ~770px tall
   and a wide banner logo spans the whole column. Logos arrive in every size
   and aspect ratio — letterbox them into one fixed-height slot, centred to
   match the badges beneath, so each profile opens at the same scale. The
   `!important` is only there to beat the theme's own. */
.single-tcsa_sponsor .bs-img {
	margin-bottom: 1.25rem;
	text-align: center;
}
.single-tcsa_sponsor .bs-img img.wp-post-image {
	display: inline-block;
	width: auto !important;
	max-width: 100%;
	height: auto;
	max-height: 220px;
	border-radius: 0;
}

/* Level + tenure beneath the sponsor logo: two centred lines, level on top.
   Deliberately typographic, not pill-shaped — pills here read as navigation
   buttons. */
.tcsa-sponsor-badges {
	margin: 0 0 1.75rem;
	text-align: center;
	line-height: 1.4;
}
.tcsa-badge {
	display: block;
}
.tcsa-badge-level {
	color: #221b51;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.tcsa-badge-since {
	color: #221b51;
	font-size: 1.15rem;
	opacity: 0.75;
}

/* Member gate */
.tcsa-member-gate {
	max-width: 480px;
	margin: 2rem auto;
	padding: 2rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
}
.tcsa-gate-form {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}
/* Same theme interference as the filter bar: inputs get margin-bottom: 30px
   and buttons get 17px/30px padding, leaving a 72px Enter button beside a
   42px field. Pin both to one height and let flex centre the button label. */
.tcsa-gate-form input[type="password"] {
	flex: 1 1 220px;
	box-sizing: border-box;
	height: 2.75rem;
	margin: 0;
	padding: 0 0.75rem;
}
.tcsa-gate-form button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	margin: 0;
	line-height: 1;
}
.tcsa-gate-error {
	color: #b32d2e;
	font-weight: 600;
}

/* Video embeds */
.tcsa-video-embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-bottom: 1.5rem;
}
.tcsa-video-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Video library + grids */
/* Filter bar — no box of its own; the row reads as part of the page and the
   consistency comes from the controls sharing one height and padding. */
.tcsa-video-filters {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 2rem;
}
.tcsa-video-filters input[type="search"],
.tcsa-video-filters select {
	box-sizing: border-box;
	height: 2.75rem;
	/* The theme puts margin-bottom: 30px on bare inputs/selects, which shoves
	   the dropdowns out of line in this centred flex row. Kill all margins. */
	margin: 0;
	padding: 0 0.75rem;
	border: 1px solid #d4d6e0;
	border-radius: 6px;
	background: #fff;
	color: #221b51;
	font-size: 0.95rem;
	line-height: 1.2;
}
/* Themes commonly set a blanket `select { width: 100% }`, which stretched each
   dropdown across the whole filter row. Size them to their own content instead. */
.tcsa-video-filters input[type="search"] {
	flex: 1 1 240px;
	min-width: 0;
}
.tcsa-video-filters select {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
}
.tcsa-video-filters input[type="search"]:focus,
.tcsa-video-filters select:focus {
	outline: 2px solid #14828e;
	outline-offset: 1px;
	border-color: #14828e;
}
/* The events-page toggle loads this stylesheet, so also undo the theme's
   30px input/select margin inside Sugar Calendar's own controls — it knocked
   the "Search Events" field (and its icon) out of the controls row.
   !important because the theme's global input rule outspecifies anything
   reasonable here, and this only ever restores SC's own intended layout. */
[class*="sugar-calendar-block"] input,
[class*="sugar-calendar-block"] select,
input[class*="sugar-calendar-block__controls"] {
	margin: 0 !important;
}

.tcsa-video-filters button {
	flex: 0 0 auto;
	height: 2.75rem;
	margin: 0;
	padding: 0 1.4rem;
	border: 0;
	border-radius: 6px;
	background: #221b51;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}
.tcsa-video-filters button:hover,
.tcsa-video-filters button:focus {
	background: #14828e;
}
.tcsa-video-grid,
.tcsa-sponsor-grid {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}
/* 3-up at full width, matching the legacy members-area rolls. */
.tcsa-video-grid {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.tcsa-sponsor-grid {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.tcsa-sponsor-card img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}
/* Not every video carries a thumbnail — legacy rows with no YouTube/Vimeo ID
   resolve to nothing. Without a fixed slot those cards collapsed to their
   title and the grid rows went ragged. Reserve the slot either way. */
.tcsa-video-card {
	display: flex;
	flex-direction: column;
}
.tcsa-video-card a {
	text-decoration: none;
}
.tcsa-video-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: #ecedf1;
}
.tcsa-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Logos come in every aspect ratio — letterbox them into a uniform slot so
   card text starts at the same height across a row. */
.tcsa-sponsor-card {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	/* Contact emails are longer than a grid column — break them rather than overflow. */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.tcsa-sponsor-card img {
	height: 120px;
	object-fit: contain;
}
.tcsa-video-card h3,
.tcsa-sponsor-card h3 {
	font-size: 1rem;
	margin: 0.5rem 0 0.25rem;
}
.tcsa-video-topics {
	font-size: 0.85rem;
	opacity: 0.75;
	margin: 0;
}
.tcsa-card-date {
	font-size: 0.85rem;
	font-style: italic;
	opacity: 0.7;
	margin: 0 0 0.4rem;
}
.tcsa-card-excerpt {
	font-size: 0.9rem;
	line-height: 1.45;
	margin: 0;
}
.tcsa-empty {
	opacity: 0.7;
	font-style: italic;
}

/* Pagination — covers both paginate_links() in the video library and
   the_posts_pagination() on the section archives. */
.tcsa-pagination,
.tcsa-archive .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: center;
	/* Bottom margin keeps the page numbers off the footer on pages (like the
	   members-area hub) that add no spacing of their own below the library. */
	margin: 2.5rem 0 3.5rem;
}
.tcsa-archive .navigation.pagination {
	margin-top: 2.5rem;
}
.tcsa-archive .navigation.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.tcsa-pagination .page-numbers,
.tcsa-archive .navigation.pagination .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.7rem;
	border: 1px solid #d4d6e0;
	border-radius: 6px;
	background: #fff;
	color: #221b51;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
}
.tcsa-pagination a.page-numbers:hover,
.tcsa-pagination a.page-numbers:focus,
.tcsa-archive .navigation.pagination .nav-links a.page-numbers:hover,
.tcsa-archive .navigation.pagination .nav-links a.page-numbers:focus {
	border-color: #221b51;
	background: #221b51;
	color: #fff;
	text-decoration: none;
}
.tcsa-pagination .page-numbers.current,
.tcsa-archive .navigation.pagination .nav-links .page-numbers.current {
	border-color: #221b51;
	background: #221b51;
	color: #fff;
	font-weight: 600;
}
.tcsa-pagination .page-numbers.dots,
.tcsa-archive .navigation.pagination .nav-links .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Sponsor surfaces */
.tcsa-sponsor-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: center;
	justify-content: center;
	padding: 1rem 0;
}
.tcsa-sponsor-logo img {
	max-height: 90px;
	width: auto;
}
.tcsa-sponsor-level,
.tcsa-vendor-category {
	margin-bottom: 2.5rem;
}
/* Sponsor social links — sidebar widget, below Contacts. Stacked rather than
   a row: the sidebar is narrow, and six networks would wrap raggedly. Matches
   the Contacts list above it. Typographic, not pills, like the badges. */
.tcsa-sponsor-social {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9rem;
}
/* Not inherited from the theme on purpose — if the theme ever drops its own
   .screen-reader-text, this label must not become visible text. */
.tcsa-sponsor-social .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.tcsa-sponsor-social-link {
	color: #221b51;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid rgba(34, 27, 81, 0.25);
	padding-bottom: 1px;
}
.tcsa-sponsor-social-link:hover,
.tcsa-sponsor-social-link:focus {
	border-bottom-color: #221b51;
}

.tcsa-sponsor-contacts {
	list-style: none;
	padding: 0;
	font-size: 0.9rem;
}
.tcsa-sponsor-contacts li {
	margin-bottom: 0.75rem;
}

/* Meetings */
.tcsa-meeting-details {
	background: #f7f7f7;
	border-left: 4px solid #221b51;
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}
.tcsa-meeting-decks ul {
	list-style: none;
	padding: 0;
}
.tcsa-meeting-decks li {
	padding: 0.4rem 0;
	border-bottom: 1px solid #eee;
}
.tcsa-deck-size {
	opacity: 0.6;
	font-size: 0.85rem;
}
.tcsa-meeting-list time {
	opacity: 0.7;
	margin-left: 0.5rem;
}

/* Member search */
.tcsa-search-form {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}
.tcsa-search-input {
	flex: 1 1 280px;
	padding: 0.5rem 0.75rem;
}
.tcsa-search-result {
	display: flex;
	gap: 1rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid #eee;
}
.tcsa-search-result img {
	width: 80px;
	height: 60px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.tcsa-search-result-type {
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #221b51;
	color: #e3f6f7;
	border-radius: 3px;
	padding: 0.1rem 0.45rem;
	margin-right: 0.5rem;
}
.tcsa-search-status {
	opacity: 0.7;
	font-style: italic;
}