/* ==========================================================================
   BIFA — Design System
   Implements the brand palette, typography, and page layouts reviewed
   earlier in this project (homepage, courses, admissions, gallery, etc.)
   ========================================================================== */

:root {
	--c-primary: #0079C1;
	--c-primary-dark: #0C447C;
	--c-secondary: #10A5F5;
	--c-secondary-dark: #003d5c;
	--c-tertiary: #1B2A41;
	--c-bg: #F4F7FA;
	--c-border: #E5E9EF;
	--c-text: #2C333F;
	--c-text-muted: #6B7280;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 2px 10px rgba(27, 42, 65, 0.08);
	--shadow-hover: 0 8px 24px rgba(27, 42, 65, 0.14);
	--font-heading: 'Poppins', Arial, sans-serif;
	--font-body: 'Poppins', Arial, sans-serif;
	--container: 1200px;
}

* { box-sizing: border-box; }
/* Landscape/wide-mobile "white gap on the right, running the full page,
   same on every page" — this is horizontal overflow: something on the
   page (varies by exact viewport width, hardest to pin down without a
   live DOM inspector) is very slightly wider than 100%, and since Round 3
   deliberately removed overflow-x:hidden from html/body (it broke
   position:sticky for the header and course sidebar), there is currently
   nothing clipping that overflow — so the browser just shows raw white
   background past the site's actual layout on every page.
   `overflow-x: clip` is the modern fix for exactly this tension: unlike
   `hidden`, `clip` does NOT turn the element into a scroll container, so
   position:sticky descendants keep working (verified safe for this
   theme's Chrome-based visitors) while still visually clipping any stray
   overflow instead of leaving it as a visible gap. This is a safety net,
   not a fix for whatever the exact overflowing element is — if a
   specific element is still visibly cut off (not just the extra white
   space), that's the next thing to screenshot. */
html, body { overflow-x: clip; overflow-y: visible; } /* REGRESSION FOUND: leaving overflow-y unset here let it silently compute to `auto` (the CSS spec's mixed-axis rule — same class of bug as the earlier search-overlay fix), which turns <body> into a scroll container and breaks position:sticky for every sticky element on the site, including the course sidebar CTA and the header itself. Declaring overflow-y explicitly avoids that. */
html { scroll-behavior: smooth; }
body {
	margin: 0; font-family: var(--font-body); color: var(--c-text);
	background: #fff; line-height: 1.7; -webkit-font-smoothing: antialiased;
	font-weight: 300; font-size: 15px;
}
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 500; color: var(--c-tertiary); line-height: 1.25; margin: 0 0 0.5em; }
h1 { font-weight: 600; }
h1 { font-size: clamp(28px, 4vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 19px; }
a { color: var(--c-primary); text-decoration: none; }
p { margin: 0 0 1em; font-weight: 300; } /* color intentionally left to inherit — an explicit color here was overriding the footer's light text and making it nearly invisible */
strong, b { font-weight: 500; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
section { padding: 56px 0; }
.hero { padding: 0 !important; margin-top: 0; } /* overrides the generic section padding above, which was creating a visible gap between the header and the hero image */

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	padding: 12px 24px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px;
	border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.btn--accent { background: var(--c-secondary); color: var(--c-secondary-dark); }
.btn--accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.btn--outline { border-color: var(--c-primary-dark); color: var(--c-primary-dark); background: transparent; }
.btn--outline:hover { background: var(--c-primary-dark); color: #fff; }
.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #E6F1FB; color: var(--c-primary-dark); align-self: flex-start; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header { background: #fff; box-shadow: 0 1px 0 var(--c-border); }
/* REAL BUG FOUND (confirmed via DevTools): position:sticky was never
   actually engaging for this header, despite the CSS rule itself being
   completely valid and unambiguously applied — no overflow/transform
   was found on any ancestor (body/html/.site-header) across two rounds
   of checking. Rather than keep hunting for an elusive containing-block
   issue, switching to position:fixed sidesteps that whole class of
   problem entirely — fixed positioning doesn't depend on a scrolling
   containing block the way sticky does, so it can't fail the same way.
   #main gets matching top padding below so fixed content doesn't cover
   the page underneath it. This also fixes --nav-height itself: it was
   drifting to wildly negative values (confirmed: -1775px) specifically
   BECAUSE the header wasn't actually stuck at the top like it should
   have been — once the header genuinely stays put, that variable
   (used by the mega menu's position and the anchor-link scroll offset
   too) becomes accurate again as a side effect. */
.site-header__sticky-wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; }
#main { padding-top: var(--nav-height, 76px); }
.site-header__inner { max-width: var(--container); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; align-content: center; justify-content: space-between; gap: 24px; min-height: 56px; }
.has-mega-menu > a, .menu-item-has-children > a { cursor: pointer; }
.site-logo img { height: 44px; width: auto; }
.primary-nav__list { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; align-items: center; }
.primary-nav__list > li > a { font-weight: 600; color: var(--c-tertiary); font-size: 15px; padding: 8px 0; display: flex; align-items: center; gap: 6px; }
.primary-nav__list > li > a:hover { color: var(--c-primary); }
/* Expand/collapse chevron — now shown on desktop too (was mobile-only
   before), so there's a visible cue that an item has a dropdown and
   whether it's currently open. */
.primary-nav__list li.menu-item-has-children > a::after,
.primary-nav__list li.has-mega-menu > a::after {
	content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;
	color: var(--c-text-muted); transition: transform 0.2s;
}
.primary-nav__list li.is-expanded > a::after { transform: rotate(180deg); }
.primary-nav__mobile-toggle { display: none; background: none; border: none; font-size: 24px; cursor: pointer; }

/* Standard WordPress page-children dropdowns (e.g. About > Who We Are,
   Student Life > BISCO) — separate from the custom .bifa-mega-menu below.
   Pure click-to-toggle now, on every device — hover-based opening was the
   source of repeated inconsistency (stuck open, couldn't reach items,
   couldn't switch between menus), so it's removed entirely rather than
   half-fixed again. Click opens it, click the same item again closes it,
   click elsewhere on the page also closes it (see main.js). */
.primary-nav__list li.menu-item-has-children { position: relative; }
.primary-nav__list ul.sub-menu {
	/* Now matches the mega-menu's visual language: rounded BOTTOM corners
	   only (it visually "grows" from the trigger, so a top radius looked
	   like a gap/mismatch), same shadow weight, same padding rhythm. */
	display: none; position: absolute; top: 100%; left: 0; background: #fff;
	border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow-hover); padding: 12px 0;
	min-width: 220px; list-style: none; margin: 0; z-index: 60;
}
.primary-nav__list li.menu-item-has-children.is-expanded > ul.sub-menu { display: block; }
.primary-nav__list ul.sub-menu li { padding: 0; }
.primary-nav__list ul.sub-menu a { display: block; padding: 10px 20px; font-size: 14px; font-weight: 400; white-space: nowrap; color: var(--c-text); }
.primary-nav__list ul.sub-menu a:hover { background: var(--c-bg); color: var(--c-primary); }

.has-mega-menu { position: static; }

/* Full-width artistic mega menu — drops below the sticky nav, rounded
   bottom corners, a dimmed backdrop over the rest of the page, and image
   cards for courses rather than a plain text list. Pure click-to-toggle,
   same reasoning as above. */
.bifa-mega-menu {
	display: none; position: fixed; top: var(--nav-height, 76px); left: 0; right: 0;
	z-index: 120; max-height: calc(100vh - var(--nav-height, 76px));
}
.has-mega-menu.is-expanded .bifa-mega-menu { display: block; }
.bifa-mega-menu__backdrop { position: fixed; inset: 0; background: transparent; z-index: -1; } /* tint removed per feedback — still present (invisible) for click-to-close */
.bifa-mega-menu__panel {
	/* Reverted from full-viewport edge-to-edge back to matching the header
	   row's own width (logo-to-Apply-Now) — full-screen wasn't well
	   received. Still spans the header's real rendered width rather than
	   the old narrower fixed max-width, so it fills exactly logo-to-button. */
	background: #fff; border-radius: 0 0 28px 28px; box-shadow: var(--shadow-hover);
	padding: 40px clamp(24px, 5vw, 60px); display: flex; gap: 56px; max-width: var(--container); margin: 0 auto;
	overflow-y: auto; max-height: calc(100vh - var(--nav-height, 76px));
}
.bifa-mega-menu__panel--compact { gap: 64px; }
/* Wraps to additional rows as more Segments/Disciplines are added, rather
   than squeezing existing columns thinner and thinner — scales cleanly
   regardless of how many categories exist. */
.bifa-mega-menu__columns { display: flex; flex-wrap: wrap; gap: 48px; flex: 1; }
.bifa-mega-menu__column { min-width: 180px; flex: 1 1 180px; }
.bifa-mega-menu__column h4 a { color: var(--c-primary-dark); font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.bifa-mega-menu__column ul { list-style: none; padding: 0; margin: 16px 0; }
.bifa-mega-menu__column li { margin-bottom: 10px; }
.bifa-mega-menu__column li { margin-bottom: 0; }
.bifa-mega-menu__column li a { display: block; color: var(--c-text); font-size: 14px; font-weight: 400; padding: 10px 20px; margin-left: -20px; border-radius: var(--radius-sm); }
.bifa-mega-menu__column li a:hover { background: var(--c-bg); color: var(--c-primary); }
.bifa-mega-menu__view-all { display: inline-block; margin-top: 16px; font-weight: 600; font-size: 13px; color: var(--c-secondary-dark); }

/* One real image, not a grid of small blank placeholders — a single
   featured course on the right side of the panel. */
.bifa-mega-menu__feature {
	flex: 0 0 220px; position: relative; border-radius: 16px; overflow: hidden;
	box-shadow: var(--shadow); align-self: flex-start;
}
.bifa-mega-menu__feature img { width: 100%; height: 260px; object-fit: cover; }
.bifa-mega-menu__feature-label {
	position: absolute; top: 12px; left: 12px; background: var(--c-secondary); color: var(--c-secondary-dark);
	font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
}
.bifa-mega-menu__feature-title {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 14px;
	background: linear-gradient(180deg, transparent, rgba(12,68,124,0.9)); color: #fff; font-weight: 600; font-size: 14px;
}

.site-header__actions { display: flex; align-items: center; gap: 16px; }
.site-social-icons { display: flex; gap: 14px; align-items: center; }
.site-social-icons a { font-size: 16px; color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.site-social-icons a:hover { color: var(--c-primary); }
.site-social-icons--footer { flex-direction: column; align-items: flex-start; gap: 10px; }
.site-social-icons--footer a span { font-size: 13px; }
.site-search-toggle { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--c-tertiary); }

/* Accreditation now lives as its own footer column (see .footer-accreditation-list
   below in the footer grid rules) plus the homepage Trust Highlights section —
   removed from the header entirely since it competed with the nav there. */

/* .whatsapp-float removed — WhatsApp now lives only in the mobile bottom tab bar */

/* ==========================================================================
   WAVE DIVIDER — brand motif, used sparingly at fixed transition points
   ========================================================================== */
/* Wave divider CSS retained but unused for now — see assets/bifa-wave-pattern.svg.
   Removed from templates (Sept 2026) because the rendered result didn't look
   right in practice; revisit with a proper illustrator pass before reusing. */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
	background-size: cover; background-position: center;
	position: relative; color: #fff; min-height: 560px;
	display: flex; align-items: flex-end;
	border-radius: 0 0 0 64px; overflow: hidden; /* artistic accent — bottom-left only, so it reads as intentional rather than a generic rounded box */
}
/* Bottom-anchored gradient only — the top/middle of the photo stays fully
   clear and crisp; darkening is localized to where the text actually sits,
   rather than washing out the whole image like the previous full-bleed
   overlay did. */
.hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,68,124,0) 0%, rgba(12,68,124,0) 45%, rgba(12,68,124,0.55) 75%, rgba(12,68,124,0.88) 100%);
}
.hero .container { position: relative; z-index: 2; text-align: left; padding-bottom: 56px; padding-top: 40px; }
.hero h1 { color: #fff; max-width: 640px; margin: 0 0 20px; text-shadow: 0 2px 16px rgba(0,0,0,0.6); }
.hero .btn--outline { border-color: rgba(255,255,255,0.7); color: #fff; }
.hero .btn--outline:hover { background: rgba(255,255,255,0.15); }
.hero__ctas { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }

/* ==========================================================================
   SEGMENT TABS + CAROUSELS (Courses at a glance)
   ========================================================================== */
.segment-tabs, [role="tablist"].tabs { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 4px; }
.segment-tabs button, [role="tablist"].tabs button {
	background: #fff; border: 1.5px solid var(--c-border); padding: 8px 18px; border-radius: 24px;
	font-weight: 600; font-size: 14px; cursor: pointer; color: var(--c-text-muted);
	white-space: nowrap; flex-shrink: 0;
}
.segment-tabs button[aria-selected="true"], [role="tablist"].tabs button[aria-selected="true"] {
	background: var(--c-tertiary); color: #fff; border-color: var(--c-tertiary);
}

.carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.carousel[hidden] { display: none !important; } /* same [hidden]-override bug as the search overlay/popup before — display:flex above was silently defeating the hidden attribute, which is exactly why the Events panel stayed visible under News the whole time */
.carousel-wrap[hidden] { display: none !important; } /* same safety net, now also covering the wrap+arrows (see "four carousel arrows" fix in main.js) */
/* Hides the browser's own scrollbar — redundant clutter now that there
   are dedicated prev/next arrow buttons for the same job ("second grey
   scroller" underneath the cards). REAL BUG FOUND: a leftover duplicate
   ::-webkit-scrollbar rule below this one (same specificity, declared
   later) was setting height:6px + a visible thumb colour, which silently
   re-enabled the very scrollbar this block exists to hide — the "second
   grey scroller" the user kept seeing. Removed the duplicate entirely. */
.carousel { scrollbar-width: none; -ms-overflow-style: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; flex: 0 0 240px; }

.course-card {
	display: flex; flex-direction: column; background: #fff; border-radius: 14px; overflow: hidden;
	box-shadow: var(--shadow); transition: transform 0.15s, box-shadow 0.15s; color: var(--c-text); height: 100%;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.course-card__media { display: block; overflow: hidden; }
.course-card__media img, .course-card__media .bifa-thumb-placeholder { height: 220px; width: 100%; object-fit: cover; transition: transform 0.4s ease; }
.course-card:hover .course-card__media img { transform: scale(1.06); }
.course-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.course-card__body > a:first-child span { font-weight: 700; font-size: 17px; color: var(--c-tertiary); }
.course-card__excerpt { font-size: 13px; color: var(--c-text-muted); margin: 0; flex: 1; line-height: 1.5; }
.course-card__cta { display: block; text-align: center; margin-top: auto; background: var(--c-secondary); color: var(--c-secondary-dark); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: var(--radius-sm); }
.course-card__cta:hover { filter: brightness(0.95); }

.view-all { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--c-primary-dark); }

/* ==========================================================================
   COURSE LISTING / GRID
   ========================================================================== */
.filters { position: relative; display: flex; gap: 10px; align-items: center; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; margin-bottom: 8px; padding: 4px 4px 12px; border-bottom: 1px solid var(--c-border); }
.course-grid, .card-grid, .masonry { margin-top: 24px; } /* clearer visual gap so filter pills never read as part of the card grid below */
.filters > * { flex-shrink: 0; white-space: nowrap; }
/* REAL BUG FOUND: the segment links (General / Short Courses (6 Months) /
   Short Courses (6 Weeks)) had no styling at all — plain default blue
   underlined text, so with only ordinary word-spacing between them they
   visually ran together as "one long sentence". Giving them the same pill
   treatment as the rest of the filter row fixes that directly. */
.filters a { display: inline-block; padding: 8px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--c-border); background: #fff; color: var(--c-text); font-weight: 600; font-size: 13px; text-decoration: none; }
.filters a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.filters a.is-active, .filters a[aria-current="page"] { background: var(--c-tertiary); color: #fff; border-color: var(--c-tertiary); }
.filters select { padding: 8px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--c-border); }
.filters [data-view-toggle] { border: 1.5px solid var(--c-border); background: #fff; padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; }
.filters [data-view-toggle].active { background: var(--c-tertiary); color: #fff; border-color: var(--c-tertiary); }

/* Mobile "more filters this way" cue: a soft fade over the right edge of
   any filter row with more content than fits on screen, so a thumb
   scanning a phone screen knows to swipe right instead of assuming that's
   the end of the list. main.js toggles .has-overflow off once the row has
   been scrolled to its end. */
@media (max-width: 780px) {
	.filters.has-overflow::after {
		content: ""; position: absolute; top: 0; right: 0; bottom: 12px; width: 36px;
		background: linear-gradient(to right, rgba(255,255,255,0), #fff);
		pointer-events: none;
	}
}

/* Bigger, neater cards — was cramped at 240px/150px tall */
.course-grid[data-view="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.course-grid[data-view="carousel"] { display: flex; overflow-x: auto; gap: 28px; }
.course-grid .course-card { flex: 0 0 320px; }
.course-grid[data-view="grid"] .course-card { flex: none; }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.pagination .page-numbers { padding: 8px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--c-border); color: var(--c-text); }
.pagination .page-numbers.current { background: var(--c-primary-dark); color: #fff; border-color: var(--c-primary-dark); }

/* ==========================================================================
   COURSE DETAIL
   ========================================================================== */
/* Inner-page hero (Course, and reusable for Event/other featured-image
   headers) — matches the homepage hero's treatment: image stays crisp and
   clear, a bottom-anchored gradient (not a solid overlay) carries the
   title/badges, and an artistic radius accent — bottom-RIGHT here,
   deliberately mirrored from the homepage hero's bottom-left, so inner
   pages read as related but distinct. */
.course-hero {
	position: relative; border-radius: 0 0 48px 0; overflow: hidden; margin-bottom: 24px;
	min-height: 320px; display: flex; align-items: flex-end;
	background: linear-gradient(135deg, var(--c-primary-dark), var(--c-tertiary)); /* fallback when no featured image */
}
.course-hero img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.course-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,68,124,0) 0%, rgba(12,68,124,0) 40%, rgba(12,68,124,0.55) 75%, rgba(12,68,124,0.88) 100%);
}
.course-hero h1, .course-hero .badge { position: relative; z-index: 2; color: #fff; margin: 0 24px 20px 0; }
.course-hero h1 { text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.course-hero .badge { background: var(--c-secondary); color: var(--c-secondary-dark); margin-bottom: 20px; }
.course-hero__inner { position: relative; z-index: 2; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
@media (max-width: 640px) { .course-hero { border-radius: 0 0 28px 0; min-height: 260px; } }

.jump-links-wrap { position: relative; }
.jump-links { display: flex; gap: 20px; border-bottom: 1.5px solid var(--c-border); margin-bottom: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.jump-links a { padding: 12px 4px; font-weight: 600; color: var(--c-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; flex-shrink: 0; }
.jump-links a:hover { color: var(--c-primary); border-color: var(--c-primary); }
/* Fade hint so it's visually clear there's more to scroll to (e.g. Fees,
   Student Work were getting cut off with no indication they existed). */
.jump-links-wrap::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; pointer-events: none;
	background: linear-gradient(90deg, transparent, #fff);
}

.course-detail section { padding: 32px 0; border-top: 1px solid var(--c-border); }
.course-detail section:first-of-type { border-top: none; padding-top: 0; }
.course-ctas { display: flex; gap: 14px; margin: 32px 0; flex-wrap: wrap; }

/* ==========================================================================
   MASONRY (Gallery)
   ========================================================================== */
.masonry { columns: 3 220px; column-gap: 16px; }
.masonry a, .masonry .masonry-item { display: block; break-inside: avoid; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.masonry-item--video { position: relative; }
.masonry-item--video img { display: block; width: 100%; }
.masonry-item__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	background: rgba(12,68,124,0.25); color: #fff; font-size: 20px; transition: background 0.2s;
}
.masonry-item__play i {
	width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,0.55);
	display: flex; align-items: center; justify-content: center; padding-left: 3px; /* optical centering for the play triangle */
}
.masonry-item--video:hover .masonry-item__play { background: rgba(12,68,124,0.4); }
.masonry img { width: 100%; max-height: 420px; object-fit: cover; } /* was unconstrained — a portrait-orientation photo could stretch a masonry tile to an extreme, awkward height */
@media (max-width: 640px) { .masonry img { max-height: 300px; } }
@media (max-width: 640px) { .masonry { columns: 2 160px; column-gap: 12px; } }

.gallery-teaser { background: var(--c-tertiary); color: #cfe0f2; }
.gallery-teaser h2 { color: #fff; margin-bottom: 24px; }
.gallery-teaser__grid {
	display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px;
}
.gallery-teaser__grid .gallery-teaser__item:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-teaser__item { position: relative; display: block; border-radius: 14px; overflow: hidden; }
.gallery-teaser__item img, .gallery-teaser__item .bifa-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-teaser__item:hover img { transform: scale(1.08); }
.gallery-teaser__overlay {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 14px;
	background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%);
	color: #fff; font-weight: 600; font-size: 14px; opacity: 0; transition: opacity 0.25s ease;
}
.gallery-teaser__item:hover .gallery-teaser__overlay { opacity: 1; }
.gallery-teaser__cta { display: inline-block; margin-top: 24px; border-color: rgba(255,255,255,0.5); color: #fff; }
.gallery-teaser__cta:hover { background: rgba(255,255,255,0.12); }
@media (max-width: 900px) {
	.gallery-teaser__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
	.gallery-teaser__grid .gallery-teaser__item:first-child { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 480px) {
	.gallery-teaser__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
}
/* Archive-page grid: same hover-overlay treatment as the homepage
   teaser, but no "first item enlarged" special-case — that layout suits
   8 curated homepage picks, not a full paginated archive where every
   page's first item would otherwise look oddly featured every time. */
.gallery-teaser__grid--archive .gallery-teaser__item:first-child { grid-column: auto; grid-row: auto; }
.gallery-teaser__grid--archive { grid-auto-rows: 240px; margin: 32px 0; }

/* Gallery landing page — SCAD-style discipline tiles, browsed by
   discipline before diving into individual pieces. Each tile uses a real
   example piece as its image (set in the template), with a dark overlay
   + "View Portfolio" CTA that only appears on hover, matching the SCAD
   reference. */
.gallery-discipline-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
@media (max-width: 640px) { .gallery-discipline-tiles { grid-template-columns: 1fr; } }
.gallery-discipline-tile { position: relative; display: block; height: 320px; border-radius: var(--radius); overflow: hidden; }
.gallery-discipline-tile img, .gallery-discipline-tile .bifa-thumb-placeholder { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-discipline-tile:hover img { transform: scale(1.08); }
.gallery-discipline-tile::after {
	content: ""; position: absolute; inset: 0; background: rgba(27,42,65,0.35);
	opacity: 0; transition: opacity 0.25s ease;
}
.gallery-discipline-tile:hover::after { opacity: 1; }
.gallery-discipline-tile__label {
	position: absolute; left: 20px; bottom: 20px; color: #fff; font-family: var(--font-heading);
	font-size: 22px; font-weight: 600; z-index: 1; text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.gallery-discipline-tile__cta {
	position: absolute; left: 20px; bottom: 20px; color: #fff; font-weight: 700; font-size: 14px;
	opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; z-index: 1;
}
.gallery-discipline-tile:hover .gallery-discipline-tile__label { opacity: 0; }
.gallery-discipline-tile:hover .gallery-discipline-tile__cta { opacity: 1; transform: translateY(0); }

.artwork-detail__inspiration { background: var(--c-bg); border-left: 4px solid var(--c-secondary); padding: 20px 24px; border-radius: 0 var(--radius) var(--radius) 0; margin: 24px 0; font-style: italic; }
.artwork-meta { display: flex; gap: 20px; color: var(--c-text-muted); font-size: 14px; margin-bottom: 16px; }

/* ==========================================================================
   CARD GRIDS — reused across Alumni, Testimonials, Clubs, Accommodation, Tutors
   ========================================================================== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.entity-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.18s, box-shadow 0.18s; display: flex; flex-direction: column; height: 100%; }
.entity-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.entity-card img, .entity-card .bifa-thumb-placeholder { width: 100%; height: 210px; object-fit: cover; transition: transform 0.4s ease; }
.entity-card:hover img { transform: scale(1.06); }
.entity-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.entity-card__body h3 { margin-bottom: 4px; font-size: 17px; }
.entity-card__meta { font-size: 13px; color: var(--c-text-muted); }
/* "What's happening" News/Events cards, restyled after the Pioneer
   reference: a small coloured eyebrow label above the title, a short
   description, and a solid full-width button — replacing the previous
   bare image+title with something that actually invites a click. */
.entity-card__eyebrow {
	font-size: 11px; font-weight: 600; color: var(--c-text-muted); text-transform: uppercase;
	letter-spacing: 0.02em;
}
/* Was bold + bright blue + wide letter-spacing at 12px, sitting above a
   16px semi-bold title — technically smaller, but the weight/color/case
   combination made it read as MORE prominent than the actual course/post
   name, which is backwards: the name is what someone's eye should land
   on first, the category is just supporting context. Quieted the label
   down (muted grey, lighter weight, tighter spacing) and strengthened
   the title below instead. */
.entity-card__excerpt { font-size: 13px; color: var(--c-text-muted); line-height: 1.5; margin: 0; flex: 1; }
.entity-card__cta-btn { display: block; text-align: center; margin-top: 10px; background: var(--c-secondary); color: var(--c-secondary-dark); font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: var(--radius-sm); }
.entity-card__cta-btn:hover { filter: brightness(0.95); }

.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px; }
.avatar-grid > div, .avatar-grid > a {
	display: block; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 24px 16px;
	text-align: center; transition: transform 0.18s, box-shadow 0.18s; color: inherit;
}
.avatar-grid > div:hover, .avatar-grid > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.avatar-grid img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 3px solid var(--c-bg); }
.avatar-grid .placeholder { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--c-bg), #e0e8f0); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--c-primary); }
.avatar-grid strong { font-family: var(--font-heading); font-size: 15px; color: var(--c-tertiary); }
.avatar-grid small { color: var(--c-text-muted); }
.avatar-grid em { color: var(--c-primary-dark); font-style: normal; font-weight: 500; }

.coming-soon { text-align: center; padding: 60px 24px; color: var(--c-text-muted); background: var(--c-bg); border-radius: var(--radius); }

/* ==========================================================================
   EVENTS
   ========================================================================== */
.event-list-item { display: flex; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.event-date-chip { flex: 0 0 60px; height: 60px; background: var(--c-primary-dark); color: #fff; border-radius: var(--radius-sm); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; }
.event-date-chip small { font-weight: 500; font-size: 11px; text-transform: uppercase; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.calendar-grid .day { aspect-ratio: 1; background: var(--c-bg); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.calendar-grid .day.has-event { background: var(--c-secondary); color: var(--c-secondary-dark); font-weight: 700; cursor: pointer; }
.calendar-grid .day.empty { background: transparent; }

/* ==========================================================================
   ADMISSIONS HUB
   ========================================================================== */
.process-step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.payment-details { background: var(--c-bg); border-radius: var(--radius); padding: 20px; margin-top: 20px; border-left: 4px solid var(--c-primary); }

/* ==========================================================================
   ABOUT (TABBED)
   ========================================================================== */
.about-tabs { display: flex; gap: 8px; margin-bottom: 32px; border-bottom: 2px solid var(--c-border); }
.about-tabs a { padding: 12px 20px; font-weight: 600; color: var(--c-text-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.about-tabs a[aria-selected="true"] { color: var(--c-primary-dark); border-color: var(--c-primary-dark); }

/* Student Life intro — image left, text right, modern card treatment
   instead of a full-bleed hero image sitting above the text (the old
   layout made you scroll past a huge photo before reaching any
   content). Image is capped to a sensible height even on its own row on
   mobile, never dominating the page. */
.student-life-intro { display: grid; grid-template-columns: 42% 1fr; gap: 40px; align-items: center; margin-top: 8px; }
.student-life-intro__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.student-life-intro__media img, .student-life-intro__media .bifa-thumb-placeholder { width: 100%; height: 360px; object-fit: cover; display: block; }
.student-life-intro__body h1 { margin-bottom: 16px; }
.student-life-intro__body p { color: var(--c-text-muted); line-height: 1.7; margin-bottom: 1em; }
.student-life-intro__body .btn { margin-top: 12px; }
@media (max-width: 860px) {
	.student-life-intro { grid-template-columns: 1fr; gap: 20px; }
	.student-life-intro__media img, .student-life-intro__media .bifa-thumb-placeholder { height: 220px; }
}

/* Admissions Hub — icon-based section headers, a visual step timeline
   for the process, and a card-based Requirements grid instead of plain
   stacked headings. */
.admissions-icon { color: var(--c-primary); margin-right: 8px; font-size: 0.85em; }

.requirements-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.requirements-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 24px; }
.requirements-card > i { font-size: 28px; color: var(--c-secondary); margin-bottom: 12px; display: block; }
.requirements-card h3 { margin-bottom: 10px; }
@media (max-width: 640px) { .requirements-grid { grid-template-columns: 1fr; } }

.admission-steps { position: relative; margin-top: 28px; }
.admission-steps__item { display: flex; gap: 20px; padding-bottom: 32px; position: relative; }
.admission-steps__item:not(:last-child)::before {
	content: ""; position: absolute; left: 23px; top: 50px; bottom: 0; width: 2px; background: var(--c-border);
}
.admission-steps__badge {
	flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--c-primary); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 18px; z-index: 1;
}
.admission-steps__body h3 { margin-bottom: 6px; font-size: 17px; }
.admission-steps__body p { color: var(--c-text-muted); margin: 0; }
.payment-details { display: flex; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; margin-top: 24px; }
.payment-details > i { font-size: 22px; color: var(--c-secondary); margin-top: 2px; }
.payment-details p:last-child { margin-bottom: 0; }

/* Fee table — reflows into labelled cards on mobile instead of a
   cramped/scrolling table. */
.fee-table { width: 100%; border-collapse: collapse; margin-top: 20px; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.fee-table th { background: var(--c-tertiary); color: #fff; text-align: left; padding: 14px 18px; font-weight: 600; }
.fee-table td { padding: 14px 18px; border-top: 1px solid var(--c-border); }
@media (max-width: 640px) {
	.fee-table thead { display: none; }
	.fee-table, .fee-table tbody, .fee-table tr, .fee-table td { display: block; width: 100%; }
	.fee-table tr { border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
	.fee-table td { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--c-border); padding: 12px 16px; }
	.fee-table td:first-child { border-top: none; background: var(--c-bg); font-weight: 700; }
	.fee-table td::before { content: attr(data-label); font-weight: 600; color: var(--c-text-muted); font-size: 13px; }
	.fee-table td:first-child::before { content: ""; }
}
.admissions-hub__apply { display: inline-block; margin-top: 32px; }
.mission-vision { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.mission-vision > div { background: var(--c-bg); padding: 24px; border-radius: var(--radius); }
.core-values ul { list-style: none; display: flex; gap: 12px; flex-wrap: wrap; padding: 0; }
.core-values li { background: #E6F1FB; color: var(--c-primary-dark); padding: 8px 18px; border-radius: 20px; font-weight: 600; }
.principal-teaser { background: var(--c-tertiary); color: #fff; padding: 28px; border-radius: var(--radius); margin-top: 32px; }
.principal-teaser p { font-style: italic; }
/* "Not so clear" — the link inherited the site-wide link color (a medium
   blue) on a dark navy background with no other visual weight, so it
   read as more italic-quote text than a clickable CTA. Making it bold,
   underlined, and in the accent color so it's unmistakably a link. */
.principal-teaser a { display: inline-block; margin-top: 8px; font-weight: 700; color: var(--c-secondary); text-decoration: underline; }
.principal-teaser a:hover { color: #fff; }
.timeline-item { padding: 20px 0 20px 24px; border-left: 3px solid var(--c-primary); margin-left: 8px; position: relative; }
.timeline-item::before { content: ""; position: absolute; left: -8px; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: var(--c-secondary); }
.principal-message { max-width: 720px; }
.principal-message img { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; }
.principal-message blockquote { font-family: var(--font-heading); font-size: 20px; font-style: italic; color: var(--c-primary-dark); border-left: 4px solid var(--c-secondary); padding-left: 20px; margin: 24px 0; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials-alumni { background: var(--c-bg); }
blockquote.testimonial { background: #fff; padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow); margin: 0 0 16px; }
blockquote.testimonial cite { display: block; margin-top: 12px; font-weight: 700; font-style: normal; color: var(--c-primary-dark); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.bifa-form { background: #fff; padding: 24px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 100%; box-sizing: border-box; }
.bifa-form label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.bifa-form__hint { font-size: 12px; color: var(--c-text-muted); font-weight: 400; margin: -8px 0 14px; }
.bifa-form input, .bifa-form select, .bifa-form textarea {
	width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid var(--c-border);
	border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 15px; font-weight: 400;
}
.bifa-form input:focus, .bifa-form select:focus, .bifa-form textarea:focus { outline: 2px solid var(--c-primary); border-color: var(--c-primary); }
.bifa-form button[type="submit"] { background: var(--c-secondary); color: var(--c-secondary-dark); border: none; padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; }
/* REAL BUG FOUND: forms.js has been adding .has-error / .field-error /
   .bifa-form__status--error classes all along, but none of them were
   ever actually styled — they rendered in default body text color
   (near-black), which is why "This field is required." looked like
   ordinary text instead of an error. */
.bifa-form input.has-error, .bifa-form select.has-error, .bifa-form textarea.has-error { border-color: #d32f2f; }
.bifa-form .field-error { color: #d32f2f; font-size: 13px; font-weight: 600; margin: -10px 0 14px; }
.bifa-form__status--error { color: #d32f2f; }
.bifa-form__status--success { color: #1b7a3d; }
.bifa-form__status { margin-top: 12px; font-size: 14px; color: var(--c-primary-dark); font-weight: 600; }
.bifa-form__status:empty { display: none; margin: 0; } /* was reserving ~28px of blank space even with no message to show — likely a real contributor to the newsletter card's extra gap */
[data-rpl-only] { background: #FFF8EC; border: 1px solid var(--c-secondary); border-radius: var(--radius); padding: 20px; margin-top: 16px; }

/* ==========================================================================
   PARTNERS / ACCREDITATION STRIPS
   ========================================================================== */
.partners-strip__heading { text-align: center; font-size: 20px; color: var(--c-text-muted); margin-bottom: 16px; }

/* Auto-scrolling partner ticker — pure CSS animation, no JS.
   Scrolls continuously; pauses on hover so a visitor can actually read
   or click a logo. Only shows as many logos as were added in wp-admin. */
.partners-ticker { overflow: hidden; width: 100%; padding: 8px 0 32px; }
.partners-ticker__track { display: flex; gap: 56px; align-items: center; width: max-content; animation: partners-scroll 22s linear infinite; }
.partners-ticker:hover .partners-ticker__track { animation-play-state: paused; }
.partners-ticker__item img { height: 72px; width: auto; object-fit: contain; display: block; }
@keyframes partners-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); } /* -50% scrolls exactly one copy's width, perfectly looping to the start */
}
@media (prefers-reduced-motion: reduce) {
	.partners-ticker__track { animation: none; flex-wrap: wrap; justify-content: center; }
}
/* Was 40px, grayscale, and 85% opacity on the row — read as a muted,
   secondary afterthought rather than something worth noticing. Bigger
   and in full color now, per "make partners bigger on the homepage." */

/* ==========================================================================
   ACCOMMODATION
   ========================================================================== */
.accommodation-map-block { height: 240px; background: var(--c-bg); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--c-text-muted); margin: 20px 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--c-tertiary); color: #B5D4F4; padding: 56px 24px 20px; margin-top: 40px; }
.site-footer__grid { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 40px; }
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Newsletter + Accreditation — a secondary, more compact band below the
   main link columns, instead of two oversized cards crowding the top
   of the footer and leaving uneven blank space next to the shorter
   link lists. */

.footer-accreditation-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.footer-accreditation-list span { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #cfe0f2; }
.footer-accreditation-list img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.site-footer h4 { color: #fff; font-size: 15px; margin-bottom: 16px; }
.site-footer__logo { max-height: 48px; width: auto; margin-bottom: 16px; border-radius: var(--radius-sm); }
.site-footer a { color: #B5D4F4; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer .bifa-form { background: rgba(255,255,255,0.06); box-shadow: none; }
.site-footer .bifa-form label { color: #cfe0f2; font-weight: 400; font-size: 13px; }
.site-footer__bottom { max-width: var(--container); margin: 32px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); display: flex; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 8px; }

.mobile-apply-bar { display: none; } /* replaced by .mobile-tab-bar below */

.mobile-tab-bar {
	display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 95;
	background: #fff; border-top: 1px solid var(--c-border); box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
	padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
	justify-content: space-around; align-items: center;
}
.mobile-tab-bar a {
	display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
	color: var(--c-text-muted); font-size: 10px; font-weight: 500; padding: 4px 2px;
}
.mobile-tab-bar a i { font-size: 18px; }
.mobile-tab-bar a:active, .mobile-tab-bar a:hover { color: var(--c-primary); }
.mobile-tab-bar__primary {
	background: var(--c-secondary); border-radius: 14px; color: var(--c-secondary-dark) !important;
	margin-top: -18px; padding-top: 10px !important; box-shadow: var(--shadow-hover);
}
.mobile-tab-bar__primary i { font-size: 20px; }

/* ==========================================================================
   FAQs
   ========================================================================== */
.faq-item { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 14px 18px; margin-bottom: 10px; }
.faq-item summary { font-weight: 600; cursor: pointer; }
.faq-item div { margin-top: 10px; color: var(--c-text-muted); }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 900px) {
	.mission-vision { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.mobile-apply-bar { display: none; } /* replaced by the app-style bottom tab bar — see .mobile-tab-bar */
	.mobile-tab-bar { display: flex; }
	body { padding-bottom: 64px; } /* keeps page content clear of the fixed bottom tab bar */
	.primary-nav__mobile-toggle { display: block; order: 3; margin-left: 2px; }
	.site-header__inner { flex-wrap: wrap; padding: 8px 16px; gap: 6px; } /* was inheriting the desktop gap:24px, which is what created the big empty space you diagnosed — nice catch */
	.site-logo img { height: 34px; } /* smaller on mobile — the full-size logo plus icons was leaving an oversized, awkward gap between them */
	.site-header__actions { order: 2; gap: 4px; margin-right: 4px; margin-left: auto; }
	.site-header__actions .site-social-icons { display: none; } /* still reachable in the footer — avoids crowding the mobile bar */
	.site-header__actions .site-header__apply { display: none; } /* the bottom tab bar covers this action on mobile now */
	.primary-nav { order: 4; flex-basis: 100%; min-height: 0; }
	.primary-nav__list {
		display: none; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 100%; left: 0; right: 0;
		background: #fff; padding: 12px 16px; box-shadow: var(--shadow); z-index: 90;
		/* REAL BUG FOUND: no max-height/overflow was ever set here, so once
		   an expanded mega menu ("Courses", "More") made the drawer's total
		   content taller than the screen, there was no way to scroll to
		   the cut-off items — the drawer isn't a normal in-flow element
		   the page can scroll past (it's position:absolute, and since the
		   header itself is position:fixed, that's the drawer's containing
		   block too, making it fixed in place relative to the viewport
		   either way). Capping its height to the remaining viewport space
		   below the header and letting it scroll internally fixes it. */
		max-height: calc(100vh - var(--nav-height, 76px)); overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.primary-nav__list.is-open { display: flex; }

	/* Bigger, clearer tap targets on mobile (chevron indicator itself is
	   now universal — see base rules above the media query). */
	.primary-nav__list > li > a { padding: 14px 8px; font-size: 16px; border-bottom: 1px solid var(--c-border); display: flex; justify-content: space-between; align-items: center; }

	.bifa-mega-menu { position: static; display: none; max-height: none; }
	.bifa-mega-menu__backdrop { display: none; }
	.bifa-mega-menu__panel, .bifa-mega-menu__panel--compact { position: static; display: flex; flex-direction: column; gap: 8px; box-shadow: none; border-radius: 0; padding: 8px 0 12px 16px; max-height: none; overflow: visible; }
	/* REAL BUG FOUND ("Courses menu on mobile not well aligned"): two
	   separate issues stacked here —
	   1) list-item links keep the desktop `margin-left: -20px` trick
	      (used on desktop to let the hover highlight bleed to the column
	      edge), but mobile never resets it, so items sit ~12px further
	      left than their own <h4> heading above them.
	   2) columns only had an 8px gap between them, so "View all General →"
	      butted straight up against "SHORT COURSES (6 MONTHS)" below it
	      with no breathing room and no visual separator. */
	.bifa-mega-menu__columns { flex-direction: column; gap: 28px; }
	.bifa-mega-menu__column + .bifa-mega-menu__column { padding-top: 16px; border-top: 1px solid var(--c-border); }
	.bifa-mega-menu__column li a { margin-left: 0; padding-left: 0; }
	.bifa-mega-menu__view-all { margin-bottom: 4px; }
	.bifa-mega-menu__feature { display: none; } /* the feature image is a desktop nicety; keeps the mobile drawer lean */
	.has-mega-menu.is-expanded .bifa-mega-menu { display: flex; }
	.primary-nav__list ul.sub-menu a, .bifa-mega-menu__column li a { padding: 10px 8px; font-size: 15px; display: block; }
	.primary-nav__list ul.sub-menu { position: static; display: none; box-shadow: none; padding: 4px 0 4px 16px; margin: 4px 0 0; }
	.primary-nav__list li.menu-item-has-children.is-expanded > ul.sub-menu { display: block; }
	.hero { min-height: 420px; border-radius: 0 0 0 32px; }
	.hero .container { padding-bottom: 32px; padding-top: 24px; }
	.masonry { columns: 1 100%; }
	section { padding: 40px 0; }
}

.bifa-nav-notice { font-size: 12px; color: var(--c-text-muted); font-style: italic; }

/* Trust Highlights — growable grid, not a fixed column count */
.trust-section { background: var(--c-bg); }
.trust-section__intro { text-align: center; max-width: 640px; margin: 0 auto 32px; color: var(--c-text-muted); }
/* REAL BUG FOUND: `repeat(auto-fit, minmax(220px, 1fr))` needs 220px per
   column — on a phone (~340-380px wide) that only ever fits ONE column,
   so every item stacked full-width and full-height, eating a huge amount
   of scroll for 3 short items. Switched to flexbox with a fixed ~46%
   basis so two sit side by side on mobile, and — since flex items on a
   centered row naturally center themselves when there's an odd one out —
   a 3rd (or 5th, etc.) item automatically drops to its own centered row
   below, matching the Pioneer "at a glance" reference exactly with zero
   extra markup needed. */
.trust-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.trust-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; text-align: center; flex: 1 1 220px; max-width: 260px; }
.trust-item img { width: 96px; height: 96px; object-fit: contain; margin: 0 auto 16px; }
@media (max-width: 560px) {
	.trust-item { flex-basis: calc(50% - 10px); max-width: none; padding: 18px 10px; }
	.trust-item img { width: 56px; height: 56px; margin-bottom: 10px; }
	.trust-item h3 { font-size: 15px; }
	.trust-item p { font-size: 12px; }
}

/* "About BIFA" homepage teaser — brief intro + photo linking through to
   the full About Us page, styled after the SCAD/Pioneer reference
   (full-bleed photo, heading, short copy, solid CTA button). Desktop:
   photo and text side by side. Mobile: stacked, photo on top. */
.about-teaser__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.about-teaser__media img, .about-teaser__media .bifa-thumb-placeholder { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius); }
.about-teaser__body h2 { margin-bottom: 16px; }
.about-teaser__body p { color: var(--c-text-muted); line-height: 1.6; margin-bottom: 24px; }
@media (max-width: 768px) {
	.about-teaser__inner { grid-template-columns: 1fr; gap: 20px; }
	.about-teaser__media img, .about-teaser__media .bifa-thumb-placeholder { height: 240px; }
}

/* ==========================================================================
   APPLY (Admission) — step flow
   ========================================================================== */
.apply-page { max-width: 720px; }
.register-page { max-width: 640px; margin: 0 auto; }
.register-page .page-intro-text { color: var(--c-text-muted); margin-bottom: 28px; }
.register-page .page-intro-text a { font-weight: 600; }
.apply-steps { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; }
.apply-step { font-size: 13px; font-weight: 600; color: var(--c-text-muted); padding: 6px 14px; border-radius: 20px; background: var(--c-bg); }
.apply-step.is-active { background: var(--c-primary-dark); color: #fff; }

.apply-pathway-option { display: block; border: 1.5px solid var(--c-border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; }
.apply-pathway-option:has(input:checked) { border-color: var(--c-primary); background: #F0F8FF; }
.apply-pathway-option input { width: auto; display: inline; margin-right: 10px; }
.apply-pathway-option strong { display: block; margin-bottom: 4px; }
.apply-pathway-option span { font-size: 14px; font-weight: 400; color: var(--c-text-muted); }

.apply-nav { display: flex; justify-content: space-between; margin-top: 24px; }
.repeater-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.apply-declaration { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.apply-declaration input { width: auto; }
.apply-tooltip {
	display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
	border-radius: 50%; background: var(--c-border); font-size: 12px; font-weight: 700; cursor: help; position: relative;
}
.apply-tooltip:hover::after, .apply-tooltip:focus::after {
	content: attr(data-tooltip); position: absolute; bottom: 130%; left: 0; width: 240px;
	background: var(--c-tertiary); color: #fff; padding: 10px 12px; border-radius: 6px; font-size: 12px; font-weight: 400; z-index: 10;
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page { max-width: 780px; }
.legal-page__updated { color: var(--c-text-muted); font-size: 14px; margin-bottom: 24px; }
.legal-page__toc { background: var(--c-bg); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 32px; }
.legal-page__toc ul { margin: 10px 0 0; padding-left: 20px; }
.legal-page__body h2 { margin-top: 32px; padding-top: 8px; }
.legal-page__crosslinks { display: flex; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-border); }

.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; margin-top: 24px; }
.contact-details p { margin-bottom: 20px; }
@media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; } }

/* ==========================================================================
   POPUP
   ========================================================================== */
.bifa-popup { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bifa-popup[hidden] { display: none !important; } /* same [hidden]-override bug as the search overlay — fixed here too */
.bifa-popup__backdrop { position: absolute; inset: 0; background: rgba(12,68,124,0.55); backdrop-filter: blur(2px); }
.bifa-popup__card {
	position: relative; background: #fff; border-radius: 20px; overflow: hidden;
	max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-hover);
}
.bifa-popup__card img { width: 100%; height: 220px; object-fit: cover; display: block; margin: 0; border-radius: 0; }
.bifa-popup__card-body { padding: 28px 28px 32px; }
.bifa-popup__card h3 { font-size: 22px; margin-bottom: 10px; }
.bifa-popup__card p { color: var(--c-text-muted); margin-bottom: 20px; }
.bifa-popup__card .btn { width: 100%; }
.bifa-popup__close {
	position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(255,255,255,0.9); border: none;
	width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-tertiary);
	display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}

/* ==========================================================================
   SEARCH
   ========================================================================== */
.site-search-toggle { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--c-tertiary); padding: 6px; }
.site-search-overlay { position: fixed; inset: 0; z-index: 150; background: rgba(27,42,65,0.5); display: flex; align-items: flex-start; justify-content: center; padding-top: 80px; }
.site-search-overlay[hidden] { display: none !important; } /* [hidden] was being overridden by the rule above — this was why the overlay showed permanently */
.site-search-overlay__form { background: #fff; border-radius: var(--radius); padding: 20px; display: flex; gap: 10px; width: 90%; max-width: 560px; align-items: center; box-shadow: var(--shadow-hover); }
/* REAL BUG FOUND ("close X not visible on mobile, works on desktop"):
   flex items default to min-width:auto, which blocks the input from
   shrinking below its own content/placeholder width. On a narrow phone
   there isn't enough room for [input][Search][×] at their natural
   widths, so the row silently overflowed sideways and pushed the ×
   button off the edge of the screen — desktop simply had enough width
   to never hit this. min-width:0 lets the input actually shrink to fit;
   flex-shrink:0 keeps the buttons at a fixed, always-visible size. */
.site-search-overlay__form input { flex: 1; min-width: 0; padding: 10px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); font-size: 16px; }
.site-search-overlay__close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--c-text-muted); flex-shrink: 0; }

/* ==========================================================================
   SEARCH RESULTS PAGE
   ========================================================================== */
/* REAL BUG FOUND ("search results touching screen edges, mobile only"):
   `padding: 20px 0` is shorthand for ALL FOUR sides, so it was silently
   zeroing out left/right too — completely overwriting .container's
   `padding: 0 24px` since this rule is declared later in the stylesheet
   (same specificity, later wins, and shorthand always overwrites
   shorthand in full, not just the sides you meant to change). Using the
   longhand properties instead means only top/bottom are touched, so
   .container's horizontal padding survives untouched. Desktop wasn't
   affected because .container's max-width already centers things with
   visible margin either side regardless of its own padding at that
   width. */
.search-results { padding-top: 20px; padding-bottom: 20px; }
.search-results h1 { margin-bottom: 12px; }
.search-results > p.entity-card__meta { margin-bottom: 28px; }
.search-results .entity-card__body h3 { margin: 4px 0; }
.search-results .entity-card__body p:not(.entity-card__meta) { color: var(--c-text-muted); font-size: 14px; margin: 0; }

.badge--active { background: var(--c-primary-dark); color: #fff; }

.downloads-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.downloads-table th, .downloads-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--c-border); }
.downloads-table thead th { background: var(--c-bg); font-weight: 700; }

/* Reusable styled page-intro header for archive/listing pages */
.page-intro { margin-bottom: 28px; }
.page-intro h1 { margin-bottom: 8px; }
.page-intro p { color: var(--c-text-muted); font-size: 16px; max-width: 640px; }

/* ==========================================================================
   COURSE DETAIL — sticky right-side CTA sidebar (desktop only)
   ========================================================================== */
.course-detail-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
/* REAL BUG FOUND (confirmed via DevTools): --nav-height is rewritten on
   EVERY scroll event by JS (see main.js) — but that variable exists
   specifically for positioning the mega menu dropdown, not for this.
   Tying this sidebar's sticky `top` to that same constantly-mutating
   value meant the browser was being asked to recompute where "stuck"
   should be dozens of times a second while scrolling, which is exactly
   the kind of feedback situation that makes position:sticky behave
   unreliably/never settle. Using a fixed offset instead, fully
   decoupled from the scroll-driven variable — the sidebar doesn't need
   pixel-perfect live tracking of the header, just a stable gap below
   it. */
.course-detail-sidebar { position: sticky; top: 96px; }
.course-detail-sidebar__card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.course-detail-sidebar__card h3 { margin-bottom: 4px; }
.course-detail-sidebar__note { font-size: 13px; color: var(--c-text-muted); margin-top: 6px; }

@media (max-width: 900px) {
	.course-detail-layout { grid-template-columns: 1fr; }
	.course-detail-sidebar { position: static; }
}

/* Carousel arrow controls */
.carousel-wrap { position: relative; overflow: visible; max-width: 100%; }
.carousel-arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
	width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--c-border);
	box-shadow: var(--shadow); cursor: pointer; display: flex; align-items: center; justify-content: center;
	color: var(--c-tertiary); font-size: 14px;
}
.carousel-arrow:hover { background: var(--c-primary-dark); color: #fff; border-color: var(--c-primary-dark); }
.carousel-arrow--prev { left: -8px; }
.carousel-arrow--next { right: -8px; }
@media (max-width: 640px) {
	/* Inset (not negative-offset) on mobile — negative positioning was
	   rendering the arrow awkwardly over the card edge instead of at the
	   true boundary, and risked contributing to horizontal overflow. */
	.carousel-wrap { overflow: hidden; padding: 0 4px; }
	.carousel-arrow { width: 30px; height: 30px; font-size: 11px; opacity: 0.9; }
	.carousel-arrow--prev { left: 2px; }
	.carousel-arrow--next { right: 2px; }
}

/* Cards without a real image yet — a styled brand-tinted placeholder
   instead of a blank grey box, so listings never look broken/empty. */
.bifa-thumb-placeholder {
	background: linear-gradient(135deg, var(--c-bg), #dce8f5); display: flex; align-items: center; justify-content: center;
	height: 220px; color: var(--c-primary); opacity: 0.55; font-size: 32px;
}

/* Breathing room between the sticky header and a page's own h1 — pages
   without a hero (legal pages, About, Admissions, listings, etc.) were
   starting flush against the nav, looking cramped (e.g. Cookie Policy).
   Pages that DO have their own hero (Course, Homepage) are excluded via
   :has(), since they already manage their own top spacing and don't need
   this added on top. */
.container:not(:has(.hero, .course-hero)) { padding-top: 32px; }
@media (max-width: 640px) { .container:not(:has(.hero, .course-hero)) { padding-top: 20px; } }

/* ==========================================================================
   DESKTOP FLOATING ACTIONS — Back to top + WhatsApp
   ========================================================================== */
.desktop-float-actions { position: fixed; bottom: 24px; right: 24px; z-index: 95; display: flex; flex-direction: column; gap: 12px; }

/* Cookie consent — floating card bottom-left (mirrors the WhatsApp/
   back-to-top card cluster on the opposite side), not a full-width
   strip. Fades/slides in a beat after load rather than popping in
   instantly. */
.bifa-cookie-card {
	position: fixed; left: 20px; bottom: 20px; z-index: 150; max-width: 340px;
	background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 20px;
	opacity: 0; transform: translateY(12px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.bifa-cookie-card.is-visible { opacity: 1; transform: translateY(0); }
.bifa-cookie-card p { font-size: 13px; color: var(--c-text-muted); margin: 0 0 14px; line-height: 1.6; }
.bifa-cookie-card p a { color: var(--c-primary-dark); font-weight: 600; }
.bifa-cookie-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bifa-cookie-card__actions .btn { font-size: 13px; padding: 9px 14px; }
@media (max-width: 480px) { .bifa-cookie-card { left: 12px; right: 12px; max-width: none; bottom: 84px; } } /* clears the mobile bottom tab bar */
.desktop-float-actions__whatsapp, .desktop-float-actions__top {
	width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-hover); font-size: 20px; border: none; cursor: pointer;
}
.desktop-float-actions__whatsapp { background: #25D366; color: #fff; }
.desktop-float-actions__top { background: #fff; color: var(--c-tertiary); border: 1px solid var(--c-border); }
@media (max-width: 768px) {
	/* WhatsApp stays hidden here (it's already in the tab bar — no need
	   for two). Back-to-top now DOES show on mobile too, per request —
	   repositioned above the tab bar so it doesn't overlap it. */
	.desktop-float-actions__whatsapp { display: none; }
	.desktop-float-actions { bottom: 76px; right: 16px; }
	.desktop-float-actions__top { width: 44px; height: 44px; font-size: 16px; }
}

/* Apply Now inside the mobile drawer */
/* Was appearing on desktop too (JS injects it regardless of screen size),
   duplicating the existing Apply Now button in the header actions — this
   item is mobile-drawer-only by design. */
.primary-nav__mobile-apply { display: none; }
@media (max-width: 768px) {
	.primary-nav__mobile-apply { display: block; }
	.primary-nav__mobile-apply a { text-align: center; background: var(--c-secondary); color: var(--c-secondary-dark); font-weight: 700; padding: 12px; border-radius: var(--radius-sm); margin-top: 10px; }
}

/* Search overlay button — was a plain browser-default button, now matches the theme */
.site-search-overlay__form button[type="submit"] {
	background: var(--c-secondary); color: var(--c-secondary-dark); border: none; padding: 10px 20px;
	border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; flex-shrink: 0;
}

/* Accreditation/trust images — hardened against any accidental cropping;
   object-fit: contain guarantees the whole logo is always visible within
   its box, never cut off, regardless of the logo's own aspect ratio. */
.trust-item img, .footer-accreditation-list img { object-fit: contain !important; }

/* Course detail — explicit containment, scoped ONLY to .course-detail-main
   (not .course-detail-layout or the outer .container) — those are
   ANCESTORS of .course-detail-sidebar, and overflow-x:hidden on any
   ancestor of a position:sticky element breaks its sticky behaviour
   entirely. That's exactly what happened here and to the header (same
   fix applied there too) — this scopes containment to just the content
   column, which the sidebar is a sibling of, not a descendant of. */
.course-detail-main {
	max-width: 100%; overflow-x: hidden; box-sizing: border-box;
}
.course-detail-main p, .course-detail-main a, .course-detail-main li {
	overflow-wrap: break-word; word-break: break-word; max-width: 100%;
}

/* ==========================================================================
   HERO SLIDES (homepage, when added — falls back to the single static
   image otherwise)
   ========================================================================== */
.hero--slides { position: relative; overflow: hidden; min-height: 560px; }
/* Stacked with position:absolute (not display:none/flex toggling) so
   opacity can actually transition smoothly between slides — display
   changes can't be animated, which is why a real crossfade needs this
   layout instead. */
.hero__slide {
	position: absolute; inset: 0; width: 100%; background-size: cover; background-position: center;
	color: #fff; display: flex; align-items: flex-end;
	border-radius: 0 0 0 64px; overflow: hidden; box-sizing: border-box;
	opacity: 0; visibility: hidden; transition: opacity 0.8s ease;
	min-height: 560px;
}
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__subtext { position: relative; z-index: 2; max-width: 560px; font-size: 18px; margin: -8px 0 16px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero__dots { position: absolute; bottom: 20px; right: 24px; z-index: 3; display: flex; gap: 8px; }
.hero__dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.hero__dots button.is-active { background: var(--c-secondary); width: 24px; border-radius: 6px; }
@media (max-width: 640px) { .hero__slide { min-height: 420px; border-radius: 0 0 0 32px; } }

/* Alternating section background removed per feedback — reverted to plain. */
.course-detail-main section.bifa-section-alt {
	background: none; margin: 0; padding: 0; border-radius: 0;
}

.site-footer__back-to-top { font-weight: 600; }

/* Desktop header quick-actions (WhatsApp/Call) — complements the mobile
   tab bar; hidden on mobile since the tab bar already covers this there. */
.site-header__quick-actions { display: flex; gap: 10px; }
.site-header__quick-actions a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.site-header__quick-actions a[aria-label="WhatsApp"] { background: #25D366; color: #fff; }
.site-header__quick-actions a[aria-label="Contact Us"] { background: var(--c-bg); color: var(--c-primary-dark); }
@media (max-width: 768px) { .site-header__quick-actions { display: none; } }

/* Social icons collapsed into one toggle + dropdown panel. */
.site-social-dropdown { position: relative; }
.site-social-dropdown__toggle {
	width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--c-bg); color: var(--c-primary-dark);
	display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer;
}
.site-social-dropdown__toggle:hover { background: var(--c-primary); color: #fff; }
.site-social-dropdown__panel {
	position: absolute; top: calc(100% + 10px); right: 0; background: #fff; border-radius: var(--radius-sm);
	box-shadow: var(--shadow-hover); padding: 12px 16px; z-index: 60;
}
.site-social-dropdown__panel[hidden] { display: none !important; }
.site-social-dropdown__panel .site-social-icons { gap: 14px; }
@media (max-width: 768px) { .site-social-dropdown { display: none; } } /* reachable in the footer on mobile, same as the old icons were */

/* ==========================================================================
   FOOTER — secondary band (Newsletter + Accreditation), moved below the
   main link columns so Newsletter isn't the most prominent thing in the
   footer, and so Accreditation doesn't sit as an oddly-tall lone column.
   The HTML for this was already correct; this CSS was simply missing,
   which is why it rendered unstyled/misaligned before.
   ========================================================================== */
.site-footer__secondary {
	max-width: var(--container); margin: 32px auto 0; padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.12);
	display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start;
}
.site-footer__newsletter { flex: 1 1 320px; background: rgba(255,255,255,0.06); border-radius: var(--radius); padding: 20px 24px; box-shadow: none; }
.site-footer__newsletter h4 { margin-bottom: 12px; }
.site-footer__newsletter-row { display: flex; gap: 8px; margin-bottom: 12px; }
.site-footer__newsletter-row input { flex: 1; padding: 10px 12px; border-radius: var(--radius-sm); border: none; }
.site-footer__newsletter-row button { background: var(--c-secondary); color: var(--c-secondary-dark); border: none; padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
/* The actual alignment fix — checkbox and its label now sit on one line,
   checkbox vertically aligned with the first line of text instead of
   floating alone above a re-centred label. */
.site-footer__newsletter-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #cfe0f2; font-weight: 400; cursor: pointer; }
.site-footer__newsletter-consent input { margin-top: 3px; flex-shrink: 0; }

.site-footer__accreditation { flex: 1 1 280px; }
.site-footer__accreditation h4 { margin-bottom: 12px; }
/* Restyled as a compact card grid (inspired by the Pioneer "at a glance"
   stat cards) instead of one full-width row per item — on a narrow phone
   the old flex-wrap layout let long labels like "KNEC Registered" force
   each item onto its own full-width row, so 3 items ate a lot of vertical
   scroll for very little information. A 2-up grid of small cards fits the
   same content in roughly a third of the height. */
.footer-accreditation-list--inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.footer-accreditation-list--inline span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-size: 12px; color: #cfe0f2; background: rgba(255,255,255,0.06); border-radius: var(--radius-sm); padding: 14px 8px; }
.footer-accreditation-list--inline img { width: 30px; height: 30px; object-fit: contain; }

@media (max-width: 640px) {
	.site-footer__secondary { flex-direction: column; gap: 24px; }
	/* REAL BUG FOUND: .site-footer__newsletter and .site-footer__accreditation
	   both use `flex: 1 1 320px` — a flex-basis meant as a WIDTH for the
	   desktop row layout above. Once this breakpoint flips the container to
	   flex-direction:column, that same 320px basis is read as a MINIMUM
	   HEIGHT instead, forcing the newsletter card to stretch to 320px tall
	   even though its actual content is under half that — this was the large
	   empty gap under the consent checkbox. Resetting the basis to the
	   content's natural height on mobile only; desktop is unaffected. */
	.site-footer__newsletter, .site-footer__accreditation { flex-basis: auto; }
}

/* Anchor jump-links (jump-links nav, FAQ link, etc.) were scrolling their
   target to the very top of the viewport — which is HIDDEN behind the
   sticky header. Looked like "nothing happened" when it actually did
   scroll, just to a spot you couldn't see. This offsets every section
   target by the header's height. */
#overview, #curriculum, #requirements, #fees, #student-work,
#related-faqs, #related-courses {
	scroll-margin-top: calc(var(--nav-height, 76px) + 16px);
}

/* "More" menu — plain ungrouped list (when no group- CSS classes are set
   on its children yet), styled consistently with the grouped-columns
   version above it. */
.bifa-mega-menu__plain-list { list-style: none; padding: 0; margin: 0; min-width: 220px; }
.bifa-mega-menu__plain-list li { margin-bottom: 4px; }
.bifa-mega-menu__plain-list a { display: block; padding: 8px 4px; font-size: 15px; color: var(--c-text); }
.bifa-mega-menu__plain-list a:hover { color: var(--c-primary); }

/* Courses at a glance — was reading as cramped on mobile (tight card size,
   arrows crowding the edge, no breathing room after the segment tabs). */
.courses-at-a-glance .segment-tabs { margin-bottom: 20px; }
.segment-panel .carousel { padding: 4px 0 8px; }
.segment-panel .view-all { display: inline-block; margin-top: 16px; }
@media (max-width: 640px) {
	.segment-panel .carousel > .course-card { flex: 0 0 200px; }
	.segment-panel .carousel-wrap { padding: 0 8px; margin: 0 -8px; }
}

/* Blanket safety net: the [hidden] attribute must ALWAYS win, full stop.
   This exact bug (an author display:flex/block rule silently overriding
   the browser's native [hidden] behaviour) has now hit the search
   overlay, the popup, AND the carousel separately — each time because a
   new class happened to also set its own "display". Rather than
   remembering to patch every future class individually, this makes it
   structurally impossible to recur. */
[hidden] { display: none !important; }

/* ==========================================================================
   BLOG — search, category filter, related posts, newsletter CTA
   ========================================================================== */
.blog-search { display: flex; gap: 8px; max-width: 420px; margin: 20px 0 24px; }
.blog-search input { flex: 1; padding: 10px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); font-size: 15px; }
.blog-search button { background: var(--c-primary-dark); color: #fff; border: none; padding: 0 18px; border-radius: var(--radius-sm); cursor: pointer; }

.blog-post { max-width: 760px; }
.blog-post h1 { font-size: clamp(24px, 2.6vw, 34px); } /* was inheriting the sitewide h1 (clamp(28px,4vw,44px)) meant for hero/marketing headlines — oversized for a page meant to be read alongside body copy */
.blog-post__content { font-size: 17px; line-height: 1.8; margin: 24px 0 32px; }
.blog-post__content p { margin-bottom: 1.4em; }
.blog-post__related { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-border); }

/* Two-column single-post layout: article + "Recent Posts" sidebar. */
.blog-post-layout { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; margin-top: 24px; }
@media (max-width: 900px) { .blog-post-layout { grid-template-columns: 1fr; } }
.blog-sidebar { position: sticky; top: 40px; } /* same fix as the course sidebar — was tied to the scroll-driven --nav-height variable, causing the same instability */
.blog-sidebar .blog-search { margin: 0 0 28px; max-width: none; }
.blog-sidebar h3 { margin-bottom: 16px; }
.blog-sidebar__recent { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.blog-sidebar__recent a { display: flex; gap: 12px; align-items: center; }
.blog-sidebar__recent img, .blog-sidebar__recent .bifa-thumb-placeholder { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.blog-sidebar__recent strong { display: block; font-size: 14px; color: var(--c-text); line-height: 1.3; }
.blog-sidebar__recent em { font-style: normal; font-size: 12px; color: var(--c-text-muted); }

/* Social share row on the single post. */
.blog-post__share { display: flex; align-items: center; gap: 14px; margin: 32px 0; }
.blog-post__share span { font-weight: 600; color: var(--c-text-muted); font-size: 14px; }
.blog-post__share a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-bg); color: var(--c-tertiary); }
.blog-post__share a:hover { background: var(--c-primary); color: #fff; }

/* Comments */
.blog-comments { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-border); }
.blog-comments__list { list-style: none; padding: 0; margin: 20px 0; }
.blog-comments__list .comment-body { background: var(--c-bg); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.blog-comments__list .comment-author img { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.blog-comments__list .comment-metadata { font-size: 12px; color: var(--c-text-muted); }
.blog-comments__list ol.children { list-style: none; padding-left: 24px; margin: 0; }
#commentform p { margin-bottom: 14px; }
#commentform label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
#commentform input, #commentform textarea { width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); font-family: inherit; }
#commentform textarea { min-height: 120px; }

/* Single event page */
.event-single { max-width: 800px; }
.club-single { max-width: 800px; }
.event-single__header { margin: 24px 0 20px; }
.event-single__status { margin-bottom: 12px; }
.event-single__status--upcoming { background: #E6F1FB; color: var(--c-primary-dark); }
.event-single__status--past { background: var(--c-bg); color: var(--c-text-muted); }
.event-single__header h1 { margin: 0; }

.event-single__facts { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; }
.event-single__fact {
	display: flex; align-items: center; gap: 12px; background: #fff; box-shadow: var(--shadow);
	border-radius: var(--radius); padding: 14px 20px; flex: 1 1 200px;
}
.event-single__fact > i { font-size: 20px; color: var(--c-secondary); }
.event-single__fact strong { display: block; font-size: 15px; color: var(--c-tertiary); }
.event-single__fact span { font-size: 12px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.02em; }

.event-single__content { font-size: 16px; line-height: 1.7; margin: 20px 0 28px; }
.event-single__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.event-single__recap-intro { color: var(--c-text-muted); margin: -4px 0 16px; }

.blog-newsletter-cta {
	margin-top: 48px; padding: 32px; background: var(--c-bg); border-radius: var(--radius);
	display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
}
.blog-newsletter-cta > div:first-child { flex: 1 1 260px; }
.blog-newsletter-cta h3 { margin-bottom: 4px; }
.blog-newsletter-cta p { color: var(--c-text-muted); margin: 0 0 12px; }
.blog-newsletter-cta form { flex: 1 1 320px; }
/* Reusing the footer's newsletter row/consent styles here, but they were
   designed for the footer's dark background — override text color for
   readability on this white/light section instead. */
.blog-newsletter-cta .site-footer__newsletter-consent { color: var(--c-text-muted); }

/* Sidebar variant (single blog post, below Recent Posts) — the base
   layout above is a wide side-by-side row designed for the full-width
   blog listing page; squeezed into a ~300px sidebar it needs to stack
   vertically instead, with the input full-width above the button rather
   than side by side. */
.blog-newsletter-cta--sidebar {
	flex-direction: column; align-items: stretch; margin-top: 32px; padding: 24px; text-align: left;
}
.blog-newsletter-cta--sidebar form { flex: none; }
.blog-newsletter-cta--sidebar input[type="email"] {
	width: 100%; box-sizing: border-box; padding: 10px 14px; margin-bottom: 10px;
	border: 1.5px solid var(--c-border); border-radius: var(--radius-sm); font-size: 14px;
}
.blog-newsletter-cta--sidebar button[type="submit"] {
	width: 100%; background: var(--c-secondary); color: var(--c-secondary-dark); border: none;
	padding: 10px; border-radius: var(--radius-sm); font-weight: 700; cursor: pointer; margin-bottom: 12px;
}

/* Gallery single-piece main image — was rendering at full native height
   with no constraint, so a portrait-orientation source photo (very
   common — many were shot on a phone held vertically) could dominate
   the entire screen. Caps the height while keeping the image sharp and
   uncropped-looking via a generous max-height rather than a hard crop. */
/* Generic "back to X" link — used by every single-post-type detail page
   (Club, Event, Testimonial, Alumni, Tutor, Download, Partner,
   Accommodation, Club Member) so it only needs defining once. */
.back-link { display: inline-block; margin-bottom: 20px; font-weight: 600; color: var(--c-text-muted); }

/* Generic "photo beside name/meta" header — used by Alumni, Tutor, and
   Club Member single pages. */
.alumni-single, .tutor-single { max-width: 760px; }
.alumni-single__header { display: flex; gap: 20px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
.alumni-single__header img, .alumni-single__header .bifa-thumb-placeholder { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.alumni-single__header h1 { margin-bottom: 4px; }
.alumni-single__where { color: var(--c-primary-dark); font-weight: 600; margin-top: 4px; }
.tutor-single__bio { line-height: 1.7; margin-bottom: 24px; }

.download-single { max-width: 700px; }
.download-single .btn { margin-top: 16px; }

.partner-single { max-width: 640px; text-align: center; }
.partner-single__logo { margin-bottom: 20px; }
.partner-single__logo img { max-height: 100px; width: auto; margin: 0 auto; }
.partner-single__logo .bifa-thumb-placeholder { width: 100px; height: 100px; margin: 0 auto; font-size: 32px; }
.partner-single .btn { margin-top: 16px; }

.partners-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.partner-card { text-align: center; }
.partner-card__logo { height: 140px; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--c-bg); }
.partner-card__logo img { max-height: 100px; max-width: 80%; width: auto; object-fit: contain; }
.partner-card .entity-card__body { align-items: center; }
.partner-card h3 { font-size: 16px; }

.accommodation-single { max-width: 840px; }
.accommodation-single__facts { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-direction: column; gap: 8px; }
.accommodation-partner-cta { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--c-border); }

.artwork-detail__hero { max-height: 640px; overflow: hidden; border-radius: var(--radius); display: flex; justify-content: center; background: var(--c-bg); }
.artwork-detail__hero img { width: auto; max-width: 100%; height: 100%; max-height: 640px; object-fit: contain; }
@media (max-width: 640px) { .artwork-detail__hero { max-height: 420px; } .artwork-detail__hero img { max-height: 420px; } }

/* ==========================================================================
   TESTIMONIALS — quote mark + reviewer photo
   ========================================================================== */
.testimonial { background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 32px 28px; position: relative; margin: 0; }
.testimonial__mark { font-size: 32px; color: var(--c-secondary); opacity: 0.5; display: block; margin-bottom: 12px; }
.testimonial__quote { font-size: 16px; font-style: italic; color: var(--c-text); margin-bottom: 20px; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__author img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial__avatar-placeholder {
	width: 48px; height: 48px; border-radius: 50%; background: var(--c-bg); color: var(--c-primary);
	display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.testimonial__author cite { font-style: normal; font-weight: 600; color: var(--c-tertiary); }
.testimonial__read-more { display: inline-block; font-size: 13px; font-weight: 700; color: var(--c-primary-dark); margin-bottom: 16px; }
.testimonial__read-more:hover { text-decoration: underline; }
.testimonial-single { max-width: 720px; margin: 40px auto; }
.testimonial--single .testimonial__quote { font-size: 19px; line-height: 1.6; }
.testimonial--single .testimonial__mark { font-size: 44px; }

/* Homepage testimonials — one-at-a-time featured carousel (col-8) beside
   a sidebar blurb + "View All" CTA (col-4), per BIFA's spec. Max 4
   testimonials cycle through the carousel using the same shared
   carousel-arrow JS used everywhere else on the site (auto-applies to
   any .carousel). Each card is set to the carousel's full width so only
   one is visible/scrolled into view at a time, with a noticeably bigger
   photo than the compact grid version this replaced. */
.testimonials-alumni { padding-top: 32px; }
.testimonials-featured { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; margin-top: 40px; }
.testimonials-featured__carousel .carousel { scroll-snap-type: x mandatory; }
.testimonials-featured__carousel .carousel > * { flex: 0 0 100%; }
/* REAL BUG FOUND ("photo still cut at the top"): the overlap photo pokes
   above its card via `position:absolute; top:-48px`, but the card sits
   inside `.carousel`, which has `overflow-x:auto`. Setting only
   overflow-x forces the browser to also compute overflow-y as `auto`
   (you can't mix `visible` on one axis with a scrollable value on the
   other — it's a real CSS spec rule, not a bug in this theme's code) —
   so the carousel silently started clipping anything that stuck out
   above its own box, including the photo. Padding the carousel itself
   gives the protruding photo room to render inside that box instead of
   past its edge. */
.testimonials-featured__carousel .carousel { padding-top: 56px; }
.testimonials-featured__sidebar { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.testimonials-featured__sidebar p { color: var(--c-text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 860px) {
	.testimonials-featured { grid-template-columns: 1fr; }
	.testimonials-featured__sidebar { align-items: center; text-align: center; order: 2; }
}

.testimonial--overlap { padding-top: 44px; text-align: center; }
.testimonial--overlap .testimonial__photo-overlap {
	position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
	width: 64px; height: 64px; border-radius: 50%; overflow: hidden;
	border: 4px solid #fff; box-shadow: var(--shadow);
}
.testimonials-featured__carousel .testimonial--overlap { padding-top: 60px; }
.testimonials-featured__carousel .testimonial--overlap .testimonial__photo-overlap { width: 96px; height: 96px; top: -48px; border-width: 5px; }
.testimonials-featured__carousel .testimonial--overlap .testimonial__quote { font-size: 17px; }
.testimonial--overlap .testimonial__photo-overlap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.testimonial--overlap .testimonial__photo-overlap .testimonial__avatar-placeholder { width: 100%; height: 100%; border: none; }
.testimonial--overlap .testimonial__mark { margin: 0 auto 12px; }
.testimonial--overlap .testimonial__quote { font-size: 14px; margin-bottom: 12px; }
.testimonial--overlap cite { font-style: normal; font-weight: 700; color: var(--c-tertiary); font-size: 14px; }

/* ==========================================================================
   GALLERY LIGHTBOX
   ========================================================================== */
.bifa-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.bifa-lightbox__backdrop { position: absolute; inset: 0; background: rgba(12,20,32,0.92); }
.bifa-lightbox__img { position: relative; max-width: 88vw; max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.bifa-lightbox__close, .bifa-lightbox__prev, .bifa-lightbox__next {
	position: absolute; background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
	display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 2;
}
.bifa-lightbox__close:hover, .bifa-lightbox__prev:hover, .bifa-lightbox__next:hover { background: rgba(255,255,255,0.25); }
.bifa-lightbox__close { top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; }
.bifa-lightbox__prev, .bifa-lightbox__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 18px; }
.bifa-lightbox__prev { left: 20px; }
.bifa-lightbox__next { right: 20px; }
@media (max-width: 640px) {
	.bifa-lightbox__close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 22px; }
	.bifa-lightbox__prev, .bifa-lightbox__next { width: 40px; height: 40px; }
	.bifa-lightbox__prev { left: 8px; }
	.bifa-lightbox__next { right: 8px; }
}

.contact-page__map { margin-top: 16px; height: 360px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.contact-page__map-card { margin-top: 32px; }
.contact-page__map-btn { display: block; text-align: center; }