/* The BBA — site styles. Hand-written; the per-section block positions are in grid.css (generated). */

:root {
	--accent: #6ba7aa;         /* teal */
	--dark: #00434d;           /* dark teal */
	--deep: #01333a;           /* deepest teal (black-bold sections, footer) */
	--light: #d0e5e7;          /* pale teal */
	--white: #fff;
	--black: #000;
	--grey: #e3e3e3;

	--f-head: "DM Serif Display", Georgia, serif; /* free stand-in for GT Super Display Bold (same set width, ±0.5%) */
	--f-head2: "Yeseva One", Georgia, serif;
	--f-body: "Baskervville", Georgia, serif;

	--max: 1400px;
	--gutter: 4vw;
	--bba-gap: 11px;
	--hdr: 145px;
	--cw: min(var(--max), calc(100vw - var(--gutter) * 2));
	--u: 1vw;               /* type scale unit: size = (setting - 1) * 1.2 * --u + 1rem */
}
@media (max-width: 767px) {
	:root { --gutter: 6vw; --hdr: 82px; --u: min(1vh, 9px); }
}

html { scroll-behavior: auto; }
body.bba {
	margin: 0;
	background: var(--accent);
	color: var(--white);
	font-family: var(--f-body);
	font-size: calc(.2 * 1.2 * var(--u) + 1rem);
	line-height: 1.6;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
}
.bba img { max-width: 100%; height: auto; }
.bba a { color: inherit; }
.bba-skip { position: absolute; left: -9999px; }
.bba-skip:focus { left: 16px; top: 16px; z-index: 1000; background: #fff; color: #000; padding: 8px 12px; }

/* ---- type -------------------------------------------------------------------------------- */
.bba h1, .bba h2, .bba h3 { font-family: var(--f-head); font-weight: 400; letter-spacing: 0; margin: 0; }
.bba h4 { font-family: var(--f-head2); font-weight: 400; margin: 0; }
.bba h1 { font-size: calc(4.2 * 1.2 * var(--u) + 1rem); line-height: 1.165; }
.bba h2 { font-size: calc(1.8 * 1.2 * var(--u) + 1rem); line-height: 1.3; }
.bba h3 { font-size: calc(1 * 1.2 * var(--u) + 1rem); line-height: 1.344; }
.bba h4 { font-size: calc(.2 * 1.2 * var(--u) + 1rem); line-height: 1.389; }
.bba p { margin: 0; }
.bba .fe-text p + p, .bba .fe-text p + h1, .bba .fe-text p + h2, .bba .fe-text p + h3, .bba .fe-text p + h4,
.bba .fe-text h1 + p, .bba .fe-text h2 + p, .bba .fe-text h3 + p, .bba .fe-text h4 + p,
.bba .fe-text h2 + h2, .bba .fe-text h3 + h3, .bba .fe-text ul + p, .bba .fe-text p + ul { margin-top: 1rem; }
.bba .sqsrte-large { font-size: calc(.5 * 1.2 * var(--u) + 1rem); line-height: 1.6; }
.bba .sqsrte-small { font-size: calc(.2 * 1.2 * var(--u) + 1rem); line-height: 1.6; } /* same size as body text on the old site */
.bba .fe-text ul, .bba .fe-text ol { margin: 0; padding-left: 1.4em; }
.bba .fe-text a { text-decoration: underline; text-underline-offset: .15em; }
.bba .sqsrte-text-color--white { color: var(--white); }
.bba .sqsrte-text-color--black { color: var(--black); }
.bba .sqsrte-text-color--accent { color: var(--accent); }
.bba .sqsrte-text-color--lightAccent { color: var(--light); }
.bba .sqsrte-text-color--darkAccent { color: var(--dark); }

/* ---- section themes (colours per section, as on the old site) ---------------------------- */
.bba-sec { --bg: var(--accent); --fg: var(--white); --hd: var(--white); --btn-bg: var(--dark); --btn-fg: var(--white); }
.t-white { --bg: var(--white); --fg: var(--black); --hd: var(--black); --btn-bg: var(--accent); }
.t-white-bold { --bg: var(--white); --fg: var(--black); --hd: var(--accent); --btn-bg: var(--accent); }
.t-light { --bg: var(--light); --fg: var(--black); --hd: var(--black); --btn-bg: var(--accent); }
.t-light-bold { --bg: var(--light); --fg: var(--black); --hd: var(--accent); --btn-bg: var(--accent); }
.t-bright, .t-bright-inverse { --bg: var(--accent); --fg: var(--white); --hd: var(--white); --btn-bg: var(--dark); }
.t-bright-inverse { --bg: var(--white); --fg: var(--accent); --hd: var(--accent); --btn-bg: var(--accent); }
.t-dark { --bg: var(--dark); --fg: var(--white); --hd: var(--white); --btn-bg: var(--dark); }
.t-dark-bold { --bg: var(--dark); --fg: var(--grey); --hd: var(--accent); --btn-bg: var(--accent); }
.t-black { --bg: var(--black); --fg: var(--white); --hd: var(--white); --btn-bg: var(--dark); }
.t-black-bold { --bg: var(--deep); --fg: var(--white); --hd: var(--accent); --btn-bg: var(--accent); }

.elementor .e-con.bba-sec {
	--display: flex;
	--flex-direction: column;
	--justify-content: center;
	--padding-top: var(--pt, 3.3vmax);
	--padding-bottom: var(--pb, 3.3vmax);
	--padding-left: 0px;
	--padding-right: 0px;
	position: relative;
	min-height: var(--minh, 0);
	background-color: var(--bg);
	color: var(--fg);
	overflow: hidden;
}
.bba-sec.va-top { --justify-content: flex-start; }
.bba-sec.va-bottom { --justify-content: flex-end; }
.bba-sec h1, .bba-sec h2, .bba-sec h3, .bba-sec h4 { color: var(--hd); }
.bba-sec p, .bba-sec li { color: var(--fg); }
.bba-sec .sqsrte-text-color--white { color: var(--white); }
/* The header sits over the first section, so it gets the header's height on top. */
.elementor > .e-con.bba-sec:first-child,
.elementor > .e-con-inner > .e-con.bba-sec:first-child { padding-top: calc(var(--hdr) + var(--pt, 3.3vmax)); }

/* ---- the layout grid (24 columns desktop, 8 mobile; positions in grid.css) --------------- */
.elementor .e-con.fe {
	--display: grid;
	--padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	--gg: calc(var(--gutter) - var(--bba-gap));
	--cell: calc((var(--max) - var(--bba-gap) * 7) / 8);
	display: grid;
	position: relative;
	width: 100%;
	grid-template-columns: minmax(var(--gg), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gg), 1fr);
	grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
	row-gap: var(--bba-gap);
	column-gap: var(--bba-gap);
	overflow-x: clip;
	z-index: 1;
}
@media (min-width: 768px) {
	.elementor .e-con.fe {
		--cell: calc((var(--max) - var(--bba-gap) * 23) / 24);
		grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gg), 1fr);
		grid-template-rows: repeat(var(--rows-d, 1), minmax(calc(var(--cw) * var(--rh, .0215)), auto));
	}
}
.elementor .e-con.fe > .elementor-element {
	display: flex;
	flex-direction: column;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	--container-widget-width: auto;
}
.elementor .e-con.fe > .elementor-element > .elementor-widget-container { width: 100%; }

/* images fill their grid area (cover by default, contain where the old site used "fit") */
.elementor .e-con.fe > .fe-img { justify-content: stretch !important; }
.fe-img > .elementor-widget-container, .fe-img > a, .fe-img .elementor-image, .fe-img figure { height: 100%; margin: 0; }
.fe-img > .elementor-widget-container > a { display: block; height: 100%; }
/* like the old site, an image fills its grid area without stretching the rows */
.elementor .e-con.fe > .fe-img { position: relative; min-height: 0; overflow: hidden; }
.fe-img img, .bba .fe-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); display: block; }
.fe-img--contain img, .bba .fe-img--contain img { object-fit: contain; }
.fe-img .widget-image-caption { font-size: .85em; margin-top: .5em; color: var(--fg); }

/* buttons */
.bba .fe-btn .elementor-button, .bba .bba-btn, .bba-cta {
	display: inline-block;
	background: var(--btn-bg);
	color: var(--btn-fg);
	font-family: var(--f-body);
	font-size: calc(.1 * 1.2 * var(--u) + 1rem);
	letter-spacing: .01em;
	line-height: 1.2;
	padding: 1.2em 2.004em;
	border-radius: 0;
	border: 0;
	text-decoration: none;
	transition: opacity .15s;
}
.bba .fe-btn .elementor-button:hover, .bba .bba-btn:hover, .bba-cta:hover { opacity: .8; }
.bba .fe-btn--small .elementor-button { font-size: .85rem; padding: 1em 1.67em; }
.bba .fe-btn--large .elementor-button { font-size: calc(.4 * 1.2 * var(--u) + 1rem); padding: 1.3em 2.2em; }
.fe-btn--center { align-items: center; }
.fe-btn--right { align-items: flex-end; }
.bba .fe-btn .elementor-button-wrapper { width: auto; }

/* divider */
.bba .fe-rule .elementor-divider { --divider-color: currentColor; padding: 0; }
.bba .fe-rule .elementor-divider-separator { border-top: 1px solid var(--fg); opacity: 1; }
.fe-rule { justify-content: center !important; }

/* accordion (Membership benefits) */
.bba .fe-acc .elementor-accordion-item { border: 0; border-bottom: 1px solid currentColor; }
.bba .fe-acc .elementor-accordion-item:first-child { border-top: 1px solid currentColor; }
.bba .fe-acc .elementor-tab-title { padding: 15px 0; font-family: var(--f-head2); font-size: calc(.2 * 1.2 * var(--u) + 1rem); line-height: normal; font-weight: 400; color: var(--fg); border: 0; }
.bba .fe-acc .elementor-accordion-icon i { font-size: 14px; }
.bba .fe-acc .elementor-tab-title a { color: inherit; text-decoration: none; }
.bba .fe-acc .elementor-accordion-icon { color: var(--fg); }
.bba .fe-acc .elementor-tab-content { padding: 0 0 1.2em; border: 0; color: var(--fg); }
/* Instagram block: the latest posts as 3:4 tiles, six across (three on phones), no gaps — as the old site */
.elementor .e-con.fe > .e-con.fe-insta {
	--display: grid; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; align-content: start; width: auto;
}
.fe-insta > .insta-tile { width: 100%; margin: 0; }
.bba .insta-tile a { display: block; aspect-ratio: 3 / 4; overflow: hidden; line-height: 0; }
.bba .insta-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bba .insta-tile a:hover img { opacity: .85; }
@media (max-width: 767px) { .elementor .e-con.fe > .e-con.fe-insta { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- galleries (member logos, photo libraries, resources) -------------------------------- */
.elementor .e-con.bba-gal { --padding-top: 4vw; --padding-bottom: 4vw; min-height: 0; }
.elementor .e-con.gal-grid {
	--display: grid;
	--padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
	display: grid;
	width: var(--cw);
	margin: 0 auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.75vw;
}
.elementor .e-con.gal-item { --display: block; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; display: block; }
.gal-item > .elementor-element { width: 100%; }
.gal-img img, .bba .gal-img img { display: block; width: 100%; aspect-ratio: var(--ar, 3 / 2); height: auto; object-fit: cover; }
.elementor .e-con.gal-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gal-r-square { --ar: 1 / 1; }
.gal-r-standard { --ar: 3 / 2; }
.gal-r-four-three { --ar: 4 / 3; }
.gal-r-widescreen { --ar: 16 / 9; }
.gal-r-three-four { --ar: 3 / 4; }
/* the tile reserves its shape before the (lazy) image loads */
.bba .gal-img a, .bba .gal-img > .elementor-widget-container { display: block; line-height: 0; }
.bba .gal-img a, .bba .gal-img:not(:has(a)) img { aspect-ratio: var(--ar, 3 / 2); }
.bba .gal-img a img { height: 100%; aspect-ratio: auto; }
.gal-img a:hover img { opacity: .85; }
.bba .gal-cap { margin-top: .75em; text-align: center; }
.bba .gal-cap p { color: var(--fg); }
@media (max-width: 767px) {
	.elementor .e-con.gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; }
}

/* ---- articles + events lists ------------------------------------------------------------ */
.elementor .e-con.bba-collection { --padding-top: var(--pt, 3.3vmax); --padding-bottom: var(--pb, 6.6vmax); }
.bba-collection > .elementor-element { width: var(--cw); margin: 0 auto; }
.bba-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4vw 2.4vw; }
.bba-article__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bba-article__meta { margin-top: 1.2em; font-size: .85em; opacity: .85; }
.bba .bba-article__title { font-size: calc(.6 * 1.2 * var(--u) + 1rem); margin-top: .4em; line-height: 1.25; }
.bba-article__title a, .bba-event__title a { text-decoration: none; }
.bba-article__excerpt { margin-top: .8em; }
.bba-more { display: inline-block; margin-top: 1em; text-decoration: underline; text-underline-offset: .15em; }
@media (max-width: 991px) { .bba-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .bba-articles { grid-template-columns: 1fr; gap: 12vw; } }

.bba-events { max-width: 1000px; margin: 0 auto; }
.bba-events__list { display: grid; gap: 3.3vmax; }
.bba-event { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3vw; align-items: start; }
.bba-event__img img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.bba .bba-event__title { font-size: calc(.8 * 1.2 * var(--u) + 1rem); line-height: 1.25; }
.bba-event__meta { list-style: none; margin: .8em 0 0; padding: 0; font-size: .9em; }
.bba-event__meta li { display: inline; }
.bba-event__meta li + li::before { content: " · "; }
.bba-event__excerpt { margin-top: .8em; }
.bba .bba-events__divider { text-align: center; font-size: calc(.6 * 1.2 * var(--u) + 1rem); margin: 5vmax 0 3vmax; padding-top: 3vmax; border-top: 1px solid currentColor; }
.bba-events__none { text-align: center; }
@media (max-width: 767px) { .bba-event { grid-template-columns: 1fr; } }

/* ---- single article / event (Hello Elementor's single template) ------------------------- */
.single .site-main, .single-bba_event .site-main {
	max-width: 760px;
	margin: 0 auto;
	padding: calc(var(--hdr) + 4vmax) var(--gutter) 6vmax;
	background: var(--accent);
}
.single .page-header .entry-title { font-family: var(--f-head); font-size: calc(1.8 * 1.2 * var(--u) + 1rem); line-height: 1.2; text-align: center; color: var(--white); }
.single .page-content { margin-top: 1.5em; }
.single .page-content p, .single .page-content li { margin: 0 0 1em; }
.single .page-content figure { margin: 2em 0; }
.single .page-content img { display: block; width: 100%; height: auto; }
.single .page-content a { text-decoration: underline; }
.bba-single__meta { text-align: center; list-style: none; padding: 0; opacity: .9; }
.bba-single__meta li { display: inline; }
.bba-single__meta li + li::before { content: " · "; }
.bba-single__back { margin-top: 3em !important; text-align: center; }
.single .post-tags, .single .comments-area { display: none; }

/* ---- header ------------------------------------------------------------------------------ */
.bba-header { position: absolute; top: 0; left: 0; right: 0; z-index: 100; color: var(--white); }
.admin-bar .bba-header { top: 32px; }
.bba-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2vw;
	max-width: none;
	padding: 1.6vw var(--gutter);
}
.bba-header__social { display: flex; gap: 14px; }
.bba-header__social a, .bba-mnav__social a { display: inline-flex; width: 20px; height: 20px; color: var(--white); }
.bba-header__social svg, .bba-mnav__social svg { width: 100%; height: 100%; fill: currentColor; }
.bba-header__centre { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bba-logo img { display: block; width: 127px; height: auto; }
.bba-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.1em; }
.bba-nav a { color: var(--white); text-decoration: none; font-size: calc(.2 * 1.2 * var(--u) + 1rem); letter-spacing: .01em; }
.bba-nav a:hover, .bba-nav a[aria-current] { text-decoration: underline; text-underline-offset: .2em; }
.bba-nav .has-sub { position: relative; }
.bba-nav .sub {
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	display: none; flex-direction: column; gap: 0; padding: 12px 0; min-width: 190px;
	background: var(--deep); text-align: center;
}
.bba-nav .sub a { display: block; padding: 6px 16px; font-size: 1rem; }
.bba-nav .has-sub:hover .sub, .bba-nav .has-sub:focus-within .sub { display: flex; }
.bba-header__cta { justify-self: end; }
.bba-cta { --btn-bg: var(--dark); --btn-fg: var(--white); background: var(--dark); color: var(--white); }
.bba-burger { display: none; }
.bba-mnav { display: none; }

@media (max-width: 767px) {
	.bba-header__inner { grid-template-columns: 1fr auto; padding: 18px var(--gutter); }
	.bba-header__social, .bba-header__cta, .bba-nav { display: none; }
	.bba-header__centre { align-items: flex-start; }
	.bba-logo img { width: 100px; }
	.bba-burger {
		display: inline-flex; flex-direction: column; justify-content: center; gap: 7px;
		width: 36px; height: 36px; padding: 0 4px; background: none; border: 0; cursor: pointer;
	}
	.bba-burger span { display: block; height: 1px; background: var(--white); transition: transform .2s; }
	.bba-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
	.bba-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
	.bba-mnav[hidden] { display: none; }
	.bba-mnav:not([hidden]) {
		display: flex; flex-direction: column; gap: 28px;
		position: fixed; inset: 0; z-index: -1; padding: calc(var(--hdr) + 24px) var(--gutter) 40px;
		background: var(--accent); overflow-y: auto;
	}
	.bba-mnav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
	.bba-mnav a, .bba-mnav button { color: var(--white); font-family: var(--f-body); font-size: 1.6rem; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
	.bba-mnav .mnav-folder span { margin-left: .4em; display: inline-block; transition: transform .2s; }
	.bba-mnav .mnav-folder[aria-expanded="true"] span { transform: rotate(90deg); }
	.bba-mnav .has-sub ul { display: none; margin-top: 10px; padding-left: 16px; }
	.bba-mnav .has-sub.open ul { display: grid; }
	.bba-mnav .has-sub ul a { font-size: 1.25rem; }
	.bba-mnav .bba-cta--block { display: block; text-align: center; background: var(--dark); padding: .9em 1em; font-size: 1.1rem; }
	.bba-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
	.bba-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
	.bba-mnav__social { display: flex; gap: 18px; }
	body.bba-menu-open { overflow: hidden; }
}

/* ---- footer ------------------------------------------------------------------------------ */
.bba-footer { position: relative; background: var(--bg); color: var(--fg); padding: var(--pt, 3.3vmax) 0 var(--pb, 3.3vmax); min-height: var(--minh, 0); }
.bba-footer .fe {
	--gg: calc(var(--gutter) - var(--bba-gap));
	--cell: calc((var(--max) - var(--bba-gap) * 7) / 8);
	display: grid;
	grid-template-columns: minmax(var(--gg), 1fr) repeat(8, minmax(0, var(--cell))) minmax(var(--gg), 1fr);
	grid-template-rows: repeat(var(--rows-m, 1), minmax(24px, auto));
	gap: var(--bba-gap);
}
@media (min-width: 768px) {
	.bba-footer .fe {
		--cell: calc((var(--max) - var(--bba-gap) * 23) / 24);
		grid-template-columns: minmax(var(--gg), 1fr) repeat(24, minmax(0, var(--cell))) minmax(var(--gg), 1fr);
		grid-template-rows: repeat(var(--rows-d, 1), minmax(calc(var(--cw) * var(--rh, .0215)), auto));
	}
}
.bba-footer .fe-b { display: flex; flex-direction: column; min-width: 0; }
.bba-footer .fe-img { position: relative; overflow: hidden; }
.bba-footer .fe-img a { position: absolute; inset: 0; display: block; }
.bba-footer h1, .bba-footer h2, .bba-footer h3, .bba-footer h4 { color: var(--hd); }
.bba-footer p { color: var(--fg); }

/* Hello Elementor leftovers */
.bba .site-header, .bba .site-footer { display: none; }
.bba .page-header .entry-title { display: none; }
.single .page-header .entry-title { display: block; }