/*
Theme Name: Bespoke Art Society
Theme URI: https://www.bespokeartsociety.com
Author: Bespoke Art Society
Description: Custom theme for Bespoke Art Society. Built to run entirely on the WordPress Customizer and Elementor for page content, so no server-side option-panel settings (and no oversized PHP max_input_vars requirement) are ever required to configure the site.
Version: 2.0.53
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bespoke-art-society
*/

/* =========================================================
   1. BRAND COLOR VARIABLES
   These defaults are placeholders. Go to
   Appearance > Customize > Brand Colors to set your real
   Bespoke Art Society hex codes -- changing them there
   updates the whole site instantly, no PHP settings involved.
   ========================================================= */
:root {
	--bas-color-primary: #1c1c1a;      /* near-black charcoal - text, header */
	--bas-color-secondary: #f5f1ea;    /* warm ivory - section backgrounds */
	--bas-color-accent: #c08a4e;       /* warm gold - buttons, links, badges */
	--bas-color-text: #2b2b28;         /* body copy */
	--bas-color-background: #ffffff;   /* page background */
	--bas-font-heading: Georgia, 'Times New Roman', serif;
	--bas-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--bas-header-height: 90px;
	--bas-header-height-mobile: 64px;
	--bas-banner-height: 44px;
	--bas-container-width: 1240px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--bas-font-body);
	color: var(--bas-color-text);
	background: var(--bas-color-background);
	font-size: 16px;
	line-height: 1.65;
	padding-top: 0;
}
body.bas-has-sticky-banner { padding-top: var(--bas-banner-height); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bas-color-accent); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .75; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--bas-font-heading);
	color: var(--bas-color-primary);
	line-height: 1.2;
	margin: 0 0 .5em;
	letter-spacing: .01em;
}
.bas-container {
	max-width: var(--bas-container-width);
	margin: 0 auto;
	padding: 0 24px;
}
.bas-btn {
	display: inline-block;
	padding: 14px 30px;
	background: var(--bas-color-accent);
	color: #fff;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border: none;
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
}
.bas-btn:hover { opacity: .85; }
.bas-btn-outline {
	background: transparent;
	border: 1px solid var(--bas-color-primary);
	color: var(--bas-color-primary);
}
.bas-section { padding: 90px 0; }
.bas-section--tint { background: var(--bas-color-secondary); }
.bas-eyebrow {
	display: block;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--bas-color-accent);
	margin-bottom: 10px;
}
.bas-center { text-align: center; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}

/* =========================================================
   3. STICKY "APPLICATIONS OPEN" BANNER
   ========================================================= */
.bas-sticky-banner {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9999;
	min-height: var(--bas-banner-height);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 16px;
	/* background-color and color are set inline from the Customizer
	   "Banner background color" / "Banner text color" fields -- these
	   are just a fallback if that inline style is ever missing. */
	background: var(--bas-color-primary);
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	padding: 10px 44px 10px 16px;
	text-align: center;
}
.bas-sticky-banner__text { line-height: 1.4; }
.bas-sticky-banner__btn {
	display: inline-block;
	background: var(--bas-color-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 18px;
	border-radius: 30px;
	white-space: nowrap;
	transition: opacity .2s ease;
}
.bas-sticky-banner__btn:hover { opacity: .85; }
.bas-sticky-banner__close {
	position: absolute;
	right: 12px; top: 50%;
	transform: translateY(-50%);
	background: none; border: none;
	opacity: .7;
	font-size: 18px; line-height: 1;
	cursor: pointer;
	padding: 6px;
}
.bas-sticky-banner__close:hover { opacity: 1; }

/* =========================================================
   4. HEADER (supports multiple layouts)
   ========================================================= */
.bas-header {
	position: relative;
	z-index: 500;
	height: var(--bas-header-height);
	display: flex;
	align-items: center;
	background: var(--bas-header-bg-color, var(--bas-color-background));
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.bas-header .bas-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.bas-header__logo img { max-height: 52px; width: auto; }
.bas-header__nav ul { list-style: none; display: flex; gap: 34px; margin: 0; padding: 0; }
.bas-header__nav a {
	color: var(--bas-menu-text-color, var(--bas-color-primary));
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bas-header--transparent {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: transparent;
	border-bottom: none;
}
.bas-header--transparent .bas-header__nav a,
.bas-header--transparent .bas-header__logo-text { color: #fff; }
body.bas-has-sticky-banner .bas-header--transparent { top: var(--bas-banner-height); }
.bas-header--centered .bas-container { flex-direction: column; gap: 12px; text-align: center; }

/* Mobile header */
.bas-header__mobile-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	width: 32px; height: 24px;
	position: relative;
}
.bas-header__mobile-toggle span,
.bas-header__mobile-toggle::before,
.bas-header__mobile-toggle::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	height: 2px;
	background: var(--bas-color-primary);
	transition: transform .2s ease, opacity .2s ease;
}
.bas-header__mobile-toggle::before { top: 2px; }
.bas-header__mobile-toggle span { top: 11px; }
.bas-header__mobile-toggle::after { bottom: 2px; }
.bas-header--transparent .bas-header__mobile-toggle span,
.bas-header--transparent .bas-header__mobile-toggle::before,
.bas-header--transparent .bas-header__mobile-toggle::after { background: #fff; }

.bas-mobile-nav {
	position: fixed;
	top: 0; right: -100%;
	width: 82%; max-width: 360px;
	height: 100%;
	background: var(--bas-color-background);
	z-index: 10000;
	padding: 90px 30px 40px;
	transition: right .3s ease;
	overflow-y: auto;
	box-shadow: -10px 0 30px rgba(0,0,0,.15);
}
.bas-mobile-nav.is-open { right: 0; }
.bas-mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.bas-mobile-nav li { border-bottom: 1px solid rgba(0,0,0,.08); }
.bas-mobile-nav a {
	display: block;
	padding: 16px 0;
	color: var(--bas-color-primary);
	font-size: 15px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bas-mobile-nav__close {
	position: absolute;
	top: 24px; right: 24px;
	background: none; border: none;
	font-size: 26px; cursor: pointer;
	color: var(--bas-color-primary);
}
.bas-mobile-overlay {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 9998;
	opacity: 0; pointer-events: none;
	transition: opacity .3s ease;
}
.bas-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
	.bas-header__nav { display: none; }
	.bas-header__mobile-toggle { display: block; }
}

/* =========================================================
   5. PAGE TITLE
   ========================================================= */
.bas-page-title {
	padding: 70px 0 50px;
	/* Independent from the general "Secondary" brand color -- set under
	   Appearance > Customize > Brand Colors > "Page header background". */
	background: var(--bas-page-header-bg, var(--bas-color-secondary));
	text-align: center;
	position: relative;
}
.bas-page-title h1 { font-size: 40px; margin: 0; }
.bas-page-title__breadcrumb {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bas-color-accent);
}

/* Optional photo background + color-tint overlay, set under
   Appearance > Customize > Brand Colors > "Page header background photo". */
.bas-page-title--has-image {
	background-size: cover;
	background-position: center;
}
.bas-page-title--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	/* Reuses the "Page header background" color picker as the photo tint,
	   so there's one color control instead of two. */
	background: rgba(var(--bas-page-header-overlay-rgb, 0, 0, 0), var(--bas-page-header-overlay-opacity, .45));
}
.bas-page-title--has-image .bas-container { position: relative; z-index: 1; }
.bas-page-title--has-image h1,
.bas-page-title--has-image .bas-page-title__breadcrumb { color: #fff; text-shadow: 0px 0px 10px #000000; }
.bas-page-title--has-image .bas-page-title__breadcrumb a { color: #fff; }
.bas-page-title__breadcrumb a { color: inherit; }

/* =========================================================
   6. HERO SLIDER
   ========================================================= */
.bas-hero-slider {
	position: relative;
	height: 86vh;
	min-height: 520px;
	overflow: hidden;
	background: var(--bas-color-primary);
}
.bas-hero-slider__track { position: relative; height: 100%; }
/* Both slides stay stacked on top of each other at all times (position:
   absolute, inset:0) and the crossfade is opacity-only -- no visibility
   toggling. Visibility snaps instantly (it can't be smoothly animated),
   so combining it with an opacity transition made the outgoing slide
   disappear before the incoming one had finished fading in, showing the
   slider's plain background color through the gap -- the "flash to
   black" the fade previously had. Removing visibility from the mix
   means the outgoing and incoming slides genuinely cross-fade with no
   gap. pointer-events keeps the invisible (opacity:0) slides from
   intercepting clicks/taps meant for the active one. */
.bas-hero-slide {
	position: absolute; inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--bas-hero-fade-speed, 1s) ease, transform var(--bas-hero-fade-speed, 1s) ease;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.bas-hero-slide.is-active { opacity: 1; pointer-events: auto; z-index: 2; }

/* "Slide" transition style (chosen in Customize > Hero Slider >
   Transition style) -- an alternative to the default Fade above. Slides
   move horizontally in and out instead of dissolving.
   - Default (not active, not leaving): parked off-screen on the side it
     will enter FROM next time.
   - .is-leaving: the slide that was just active, sliding OUT the
     opposite side.
   - .is-active: centered.
   main.js sets [data-direction] to "next" or "prev" right before
   swapping classes so the parked/leaving sides flip correctly for
   Previous vs Next, then removes .is-leaving once its own transition
   ends (so that slide is parked correctly for its next turn). */
.bas-hero-slider--slide .bas-hero-slide {
	opacity: 1;
	pointer-events: none;
	transform: translateX(100%);
}
.bas-hero-slider--slide[data-direction="prev"] .bas-hero-slide {
	transform: translateX(-100%);
}
.bas-hero-slider--slide .bas-hero-slide.is-leaving {
	transform: translateX(-100%);
	z-index: 1;
}
.bas-hero-slider--slide[data-direction="prev"] .bas-hero-slide.is-leaving {
	transform: translateX(100%);
}
.bas-hero-slider--slide .bas-hero-slide.is-active {
	pointer-events: auto;
	transform: translateX(0);
	z-index: 2;
}
.bas-hero-slide::before {
	content: '';
	position: absolute; inset: 0;
	/* Strength set in Appearance > Customize > Hero Slider > "Dark
	   overlay strength". Defaults to 35% if that control is ever
	   missing (e.g. companion plugin/theme mismatch). */
	background: rgba(0, 0, 0, var(--bas-hero-overlay-opacity, .35));
}
/* Slides with no visible title/excerpt/button (all unchecked, or a
   slide saved before this option existed with everything off) skip the
   darkening overlay entirely since there's no text that needs contrast. */
.bas-hero-slide--photo-only::before { background: none; }
.bas-hero-slide__content {
	position: relative;
	z-index: 2;
	color: #fff;
	max-width: 640px;
	padding: 0 24px;
	margin: 0 auto;
	text-align: center;
}
.bas-hero-slide__content h2 { color: #fff; font-size: 46px; }
.bas-hero-slide__content p { font-size: 17px; margin-bottom: 26px; }
.bas-hero-slider__arrows button {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 5; background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.4);
	color: #fff; width: 46px; height: 46px;
	border-radius: 50%; cursor: pointer; font-size: 18px;
}
.bas-hero-slider__arrows .prev { left: 24px; }
.bas-hero-slider__arrows .next { right: 24px; }
.bas-hero-slider__dots {
	position: absolute; bottom: 24px; left: 0; right: 0;
	z-index: 5; display: flex; justify-content: center; gap: 10px;
}
.bas-hero-slider__dots button {
	width: 9px; height: 9px; border-radius: 50%;
	background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0;
}
.bas-hero-slider__dots button.is-active { background: #fff; }
@media (max-width: 600px) {
	/* 86vh reads as an almost-full-screen wall of photo with little hint
	   of content below on a phone in portrait -- and the 46px headline
	   was sized for the wide desktop hero, not a ~360px-wide screen.
	   Scaled both down, and pulled the arrow buttons in closer to the
	   edges so they don't compete with the centered text/button below
	   them on narrow screens. */
	.bas-hero-slider { height: 68vh; min-height: 420px; }
	.bas-hero-slide__content h2 { font-size: 28px; }
	.bas-hero-slide__content p { font-size: 15px; }
	.bas-hero-slider__arrows button { width: 38px; height: 38px; font-size: 15px; }
	.bas-hero-slider__arrows .prev { left: 12px; }
	.bas-hero-slider__arrows .next { right: 12px; }
}

/* =========================================================
   7. EVENT LIST / ARCHIVE
   ========================================================= */
.bas-event-filters { display: flex; gap: 14px; justify-content: center; margin-bottom: 44px; }
.bas-event-filters button {
	background: none; border: 1px solid rgba(0,0,0,.15);
	padding: 8px 20px; font-size: 12px; letter-spacing: .08em;
	text-transform: uppercase; cursor: pointer; border-radius: 30px;
}
.bas-event-filters button.is-active { background: var(--bas-color-primary); color: #fff; border-color: var(--bas-color-primary); }
/* Overrides the generic .bas-section 90px top/bottom -- adjustable under
   Appearance > Customize > Home Page Market Area. Defaults match the
   site-wide 90px so nothing shifts until it's actually adjusted. */
#bas-home-events {
	padding-top: var(--bas-home-events-padding-top, 90px);
	padding-bottom: var(--bas-home-events-padding-bottom, 90px);
}
#bas-home-events h2 { text-transform: uppercase; font-size: 32px; letter-spacing: .04em; }
.bas-event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .bas-event-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bas-event-grid { grid-template-columns: 1fr; } }
.bas-event-card { display: block; }
.bas-event-card__image { position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: 4px; margin-bottom: 16px; }
.bas-event-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bas-event-card:hover .bas-event-card__image img { transform: scale(1.05); }
.bas-event-card__badge {
	position: absolute; top: 14px; left: 14px;
	background: var(--bas-color-accent); color: #fff;
	font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
	padding: 5px 12px; border-radius: 20px;
}
.bas-event-card__status {
	position: absolute; top: 14px; right: 14px;
	background: rgba(0,0,0,.65); color: #fff;
	font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
	padding: 5px 10px; border-radius: 20px;
}
.bas-event-card h3 { font-size: 20px; margin-bottom: 4px; }
.bas-event-card__date { font-size: 13px; color: var(--bas-color-accent); }

.bas-interview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
@media (max-width: 900px) { .bas-interview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bas-interview-grid { grid-template-columns: 1fr; } }
.bas-interview-card { display: block; }
.bas-interview-card__image { position: relative; overflow: hidden; aspect-ratio: 4/5; border-radius: 4px; margin-bottom: 16px; background: var(--bas-color-secondary); }
.bas-interview-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bas-interview-card:hover .bas-interview-card__image img { transform: scale(1.05); }
.bas-interview-card h3 { font-size: 20px; margin-bottom: 8px; }
.bas-interview-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--bas-color-text); opacity: .85; }

.bas-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 44px; }
.bas-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 30px; border: 1px solid var(--bas-color-secondary); color: var(--bas-color-text); text-decoration: none; font-size: 14px; }
.bas-pagination .page-numbers.current { background: var(--bas-color-primary); border-color: var(--bas-color-primary); color: #fff; }
.bas-pagination .page-numbers.dots { border-color: transparent; }
.bas-pagination a.page-numbers:hover { border-color: var(--bas-color-accent); }
.bas-vendor-interview-archive { margin: 40px auto; }

/* =========================================================
   8. SINGLE EVENT
   ========================================================= */
.bas-event-hero { position: relative; height: 60vh; min-height: 380px; background-size: cover; background-position: center; }
.bas-event-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.bas-event-hero__title { position: relative; z-index: 2; color: #fff; height: 100%; display: flex; align-items: flex-end; padding-bottom: 40px; }
.bas-event-hero__title h1 { color: #fff; font-size: 44px; margin: 0; text-shadow: 0px 0px 10px #000000; }

.bas-page-hero { position: relative; height: 60vh; min-height: 380px; background-size: cover; background-position: center; }
.bas-page-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.bas-page-hero__title { position: relative; z-index: 2; color: #fff; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 40px; text-align: center; }
.bas-page-hero__title h1 { color: #fff; font-size: 44px; margin: 0; text-shadow: 0px 0px 10px #000000; }
.bas-page-hero__title .bas-page-title__breadcrumb { color: #fff; text-shadow: 0px 0px 10px #000000; margin-top: 10px; }
.bas-page-hero__title .bas-page-title__breadcrumb a { color: #fff; }
.bas-event-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; padding: 70px 0; }
@media (max-width: 900px) { .bas-event-layout { grid-template-columns: 1fr; } }
.bas-event-info-box { background: var(--bas-color-secondary); border-radius: 6px; padding: 30px; align-self: start; }
.bas-event-info-box__thumb { text-align: center; margin-bottom: 20px; }
.bas-event-info-box__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5; /* matches the 'bas-card' image size (800x1000) */
	object-fit: cover;
	border-radius: 6px;
}
.bas-event-info-box dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bas-color-accent); margin-top: 18px; }
.bas-event-info-box dt:first-child { margin-top: 0; }
.bas-event-info-box dd { margin: 4px 0 0; font-size: 15px; }
.bas-event-map { margin-top: 24px; }
.bas-event-map-canvas {
	width: 100%;
	height: 220px;
	border-radius: 6px;
	background: #eee; /* shows while tiles load */
}
/* OpenStreetMap's usage terms require the "(c) OpenStreetMap contributors"
   credit to stay visible -- this doesn't remove it, just shrinks it down
   to match how small the map itself is, instead of the full-size default
   attribution bar. Safe to style because Leaflet renders the map (and
   this control) directly into our own page, unlike the old <iframe>
   embed, whose attribution bar lived on openstreetmap.org's own page and
   couldn't be reached by any CSS here. */
.bas-event-map-canvas .leaflet-control-attribution {
	font-size: 9px;
	line-height: 1.3;
	padding: 0 4px;
	background: rgba(255, 255, 255, 0.75);
}
.bas-event-map__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bas-color-accent);
}

/* Vendor list */
.bas-vendor-list { margin-top: 60px; }
.bas-vendor-list h2 { text-align: center; margin-bottom: 30px; text-transform: uppercase; font-size: 32px; letter-spacing: .04em; }
.bas-vendor-category-nav {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,.08);
}
.bas-vendor-category-nav a {
	font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
	background: var(--bas-color-secondary); color: var(--bas-color-primary);
	padding: 8px 16px; border-radius: 20px;
}
.bas-vendor-category-group { margin-bottom: 60px; scroll-margin-top: 100px; }
.bas-vendor-category-group:last-child { margin-bottom: 0; }
.bas-vendor-category-heading {
	font-size: 22px; text-align: center; margin-bottom: 30px;
	position: relative;
}
.bas-vendor-category-heading::after {
	content: ''; display: block; width: 40px; height: 2px;
	background: var(--bas-color-accent); margin: 12px auto 0;
}
.bas-vendor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 900px) { .bas-vendor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bas-vendor-grid { grid-template-columns: 1fr; } }
.bas-vendor-card { text-align: center; }
.bas-vendor-card__photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; margin: 0 auto 16px; background: var(--bas-color-secondary); }
.bas-vendor-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.bas-vendor-card h4 { font-size: 17px; margin-bottom: 4px; }
.bas-vendor-card p { font-size: 14px; margin: 0 0 10px; }
.bas-vendor-card a { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }

/* Admin vendor manager (Events edit screen) */
.bas-vendor-count-wrap { font-size: 14px; }
.bas-vendor-row select.bas-vendor-field { min-width: 260px; }

/* Past-event gallery */
.bas-event-gallery { margin-top: 60px; }
.bas-event-gallery h2 { text-align: center; margin-bottom: 30px; text-transform: uppercase; font-size: 32px; letter-spacing: .04em; }
.bas-event-gallery__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 700px) { .bas-event-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.bas-event-gallery__grid img { aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; }

/* =========================================================
   9. BLOG / SINGLE POST WITH SIDEBAR
   ========================================================= */
.bas-content-layout { display: grid; grid-template-columns: 2.2fr 1fr; gap: 60px; padding: 70px 0; }
@media (max-width: 900px) { .bas-content-layout { grid-template-columns: 1fr; } }

/* Single post (General / Vendor Information posts -- "Behind the Booth"
   posts use their own layout, see 9a below). No sidebar, so this uses
   the container's full width rather than reserving a second grid column
   that used to sit empty (that empty column was what made the page look
   cut off at roughly half width). The article itself is centered at a
   comfortable reading width instead of stretching text edge-to-edge,
   which would be hard to read at this container's full 1240px. */
.bas-single-post { padding: 70px 0; }
.bas-single-post article,
.bas-single-post .bas-post-terms { max-width: 760px; margin-left: auto; margin-right: auto; }
/* Elementor-built posts manage their own internal width/layout -- don't
   squeeze them into the 760px plain-text reading width above. */
.bas-single-post--elementor article,
.bas-single-post--elementor .bas-post-terms { max-width: none; }
.bas-single-post .bas-post-content { font-size: 16px; line-height: 1.85; }
.bas-single-post .bas-post-content p { margin: 0 0 22px; }
.bas-single-post .bas-post-content h2 { font-size: 26px; margin: 40px 0 16px; }
.bas-single-post .bas-post-content h3 { font-size: 20px; margin: 32px 0 14px; }
.bas-single-post .bas-post-content img { border-radius: 6px; height: auto; max-width: 100%; }
.bas-sidebar .widget { margin-bottom: 44px; }
.bas-sidebar .widget-title { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid var(--bas-color-accent); padding-bottom: 10px; margin-bottom: 18px; }
.bas-post-meta { font-size: 13px; color: var(--bas-color-accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.bas-post-terms { margin: 30px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.bas-post-terms a { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--bas-color-secondary); padding: 6px 14px; border-radius: 20px; color: var(--bas-color-primary); }

/* =========================================================
   9a. VENDOR INTERVIEW ("BEHIND THE BOOTH") SINGLE PAGE
   ========================================================= */
.bas-vi-hero { position: relative; height: 50vh; min-height: 340px; background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.bas-vi-hero::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.bas-vi-hero__inner { position: relative; z-index: 2; padding-bottom: 40px; text-align: center; width: 100%; }
.bas-vi-hero__inner h1 { color: #fff; font-size: 38px; margin: 0; text-shadow: 0px 0px 10px #000000; }
.bas-vi-eyebrow--on-photo { color: #fff; opacity: .85; text-shadow: 0px 0px 10px #000000; }
/* Sits below the colored/photo title bar now, in the regular white
   content area -- not inside it -- so it's centered on its own with
   generous top/bottom spacing, sized to match the "General Text" body
   paragraph (16px) rather than a smaller caption size. */
.bas-vi-excerpt {
	font-family: var(--bas-vi-excerpt-font, var(--bas-font-body));
	font-size: var(--bas-vi-excerpt-font-size, 1.125em);
	font-weight: var(--bas-vi-excerpt-font-weight, 400);
	font-style: var(--bas-vi-excerpt-font-style, italic);
	text-align: var(--bas-vi-excerpt-text-align, left);
	margin-top: var(--bas-vi-excerpt-margin-top, 0em);
	margin-bottom: var(--bas-vi-excerpt-margin-bottom, 1.75em);
	padding: var(--bas-vi-excerpt-padding, 0em);
	line-height: 1.7;
	color: var(--bas-color-text);
}

.bas-vi-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; padding: 70px 0; }
@media (max-width: 900px) { .bas-vi-layout { grid-template-columns: 1fr; } }

.bas-vi-main .bas-post-content { font-size: 16px; line-height: 1.85; }
.bas-vi-main .bas-post-content p { margin: 0 0 22px; }
.bas-vi-main .bas-post-content h2 { font-size: 26px; margin: 40px 0 16px; }
.bas-vi-main .bas-post-content h3 { font-size: 20px; margin: 32px 0 14px; }
.bas-vi-main .bas-post-content img { border-radius: 6px; height: auto; max-width: 100%; }

.bas-vi-pullquote { text-align: center; margin: 40px 0; padding: 0 20px; }
.bas-vi-pullquote::before,
.bas-vi-pullquote::after { content: ''; display: block; width: 40px; height: 1px; background: var(--bas-color-accent); margin: 0 auto; }
.bas-vi-pullquote::before { margin-bottom: 22px; }
.bas-vi-pullquote::after { margin-top: 22px; }
.bas-vi-pullquote__text { font-family: var(--bas-font-heading, Georgia, 'Times New Roman', serif); font-style: italic; font-size: 22px; line-height: 1.6; margin: 0; color: var(--bas-color-primary); }
.bas-vi-pullquote__attribution { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bas-color-accent); margin: 16px 0 0; }

.bas-vi-info-box__label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bas-color-accent); margin: 0 0 14px; }
.bas-vi-info-box__company { text-align: center; color: #000; font-size: 20px; margin: 0 0 20px; }
.bas-vi-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bas-vi-socials a { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--bas-color-text); word-break: break-word; }
.bas-vi-socials__icon { display: inline-flex; width: 18px; height: 18px; color: var(--bas-color-accent); flex-shrink: 0; }
.bas-vi-socials__icon svg { width: 100%; height: 100%; }

@media (max-width: 700px) {
	.bas-vi-hero { height: 42vh; min-height: 260px; }
	.bas-vi-hero__inner h1 { font-size: 28px; }
	.bas-vi-pullquote__text { font-size: 19px; }
}

/* =========================================================
   10. 404
   ========================================================= */
.bas-404 { text-align: center; padding: 130px 0; }
.bas-404 .bas-404__code { font-family: var(--bas-font-heading); font-size: 130px; color: var(--bas-color-accent); line-height: 1; margin-bottom: 10px; }

/* =========================================================
   11. PAGE SPINNER
   ========================================================= */
.bas-spinner {
	position: fixed; inset: 0; z-index: 100000;
	background: var(--bas-color-background);
	display: flex; align-items: center; justify-content: center;
	transition: opacity .4s ease, visibility .4s ease;
}
.bas-spinner__dot {
	width: 40px; height: 40px;
	border: 3px solid var(--bas-color-secondary);
	border-top-color: var(--bas-color-accent);
	border-radius: 50%;
	animation: bas-spin .8s linear infinite;
}
.bas-spinner.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes bas-spin { to { transform: rotate(360deg); } }

/* =========================================================
   12. BACK TO TOP
   ========================================================= */
.bas-back-to-top {
	position: fixed; right: 26px; bottom: 26px; z-index: 900;
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--bas-color-primary); color: #fff;
	border: none; cursor: pointer; font-size: 16px;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.bas-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* =========================================================
   13. FOOTER
   ========================================================= */
.bas-footer { background: var(--bas-footer-bg-color, var(--bas-color-primary)); color: rgba(255,255,255,.75); padding: 70px 0 0; }
.bas-footer a { color: #fff; }
.bas-footer h4 { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.bas-footer__cols { display: grid; align-items: center; gap: 40px; margin-bottom: 40px; }
@media (max-width: 600px) { .bas-footer__cols { grid-template-columns: 1fr !important; } }
.bas-footer__bottom { background: var(--bas-footer-bottom-bg-color, transparent); border-top: 1px solid rgba(255,255,255,.15); margin-top: 40px; padding: 24px 0; font-size: 12px; text-align: center; }
/* Bulletless by default -- covers a Navigation Menu widget or any other
   list-based widget dropped into a footer column, so it reads as a clean
   list of links instead of a bulleted list. */
.bas-footer__col { min-width: 0; }
.bas-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.bas-footer__col li { margin-bottom: 10px; }
.bas-footer__col li:last-child { margin-bottom: 0; }

/* =========================================================
   14a. ARTIST SPOTLIGHT ROTATING CAROUSEL (front page)
   ========================================================= */
/* Overrides the generic .bas-section 90px top/bottom -- adjustable under
   Appearance > Customize > Behind the Booth. Defaults tighter (40px) than
   the site-wide default since this section was reported as having a lot
   of excess empty space above/below it. */
#bas-spotlight {
	padding-top: var(--bas-spotlight-padding-top, 40px);
	padding-bottom: var(--bas-spotlight-padding-bottom, 40px);
}
#bas-spotlight h2 { text-transform: uppercase; font-size: 32px; letter-spacing: .04em; }
.bas-spotlight-carousel { position: relative; max-width: 900px; margin: 0 auto; }
.bas-spotlight-carousel__track { position: relative; min-height: 360px; }
.bas-spotlight-slide {
	display: none;
	grid-template-columns: 240px 1fr;
	gap: 40px;
	align-items: center;
}
.bas-spotlight-slide.is-active { display: grid; animation: bas-fade-in .6s ease; }
@keyframes bas-fade-in { from { opacity: 0; } to { opacity: 1; } }
.bas-spotlight-slide__media { border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; background: var(--bas-color-secondary); }
.bas-spotlight-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.bas-spotlight-intro { max-width: 900px; margin: 14px auto 40px; font-size: 15px; line-height: 1.7; color: var(--bas-color-text); opacity: .85; }
.bas-spotlight-slide__content h3 { font-size: 26px; margin-bottom: 12px; }
.bas-spotlight-slide__content p { font-size: 15px; margin-bottom: 20px; }
@media (max-width: 700px) {
	.bas-spotlight-slide { grid-template-columns: 1fr; text-align: center; }
	.bas-spotlight-slide__media { max-width: 220px; margin: 0 auto; }
}
.bas-spotlight-carousel__dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.bas-spotlight-carousel__dots button {
	width: 9px; height: 9px; border-radius: 50%;
	background: rgba(0,0,0,.15); border: none; cursor: pointer; padding: 0;
}
.bas-spotlight-carousel__dots button.is-active { background: var(--bas-color-accent); }

/* =========================================================
   14. UPCOMING/PAST EVENTS HOME FEED
   ========================================================= */
/* Upcoming/Past tabs removed -- the home feed is one combined list now. */

/* =========================================================
   15. MAP CONTROLS (requested override)
   ========================================================= */
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right {
	display: none;
}

/* =========================================================
   Custom additions
   ========================================================= */
.bas-post-terms a {
	display: none;
}
.bas-event-card {
	display: block;
	text-align: center;
}
.e-con-full, .e-con > .e-con-inner {
	text-align: center;
}