/*
Theme Name: Brainious2
Theme URI: https://brainious.io
Author: Brainious Team
Author URI: https://brainious.io
Description: A bold, modern WordPress block theme built for LMS platforms. Featuring asymmetric layouts, gradient accents, and full Tutor LMS compatibility. Fast, accessible, and designed to convert learners.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
Version: 1.0.5
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: brainious
Tags: education, lms, block-theme, full-site-editing, e-learning, courses, dark, bold, modern
*/

/* =========================================================
   BRAINIOUS — Custom Block & Global CSS
   Theme colors, typography, and component overrides
   live here. Design tokens come from theme.json.
   ========================================================= */

/* ---------- Google Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- CSS Custom Properties (mirrors theme.json for use in custom CSS) ---------- */
:root {
	--brn-blue:        #1A3FBB;
	--brn-orange:      #FF6B2B;
	--brn-white:       #FFFFFF;
	--brn-dark:        #0D1117;
	--brn-footer-bg:   #0A0A0A;
	--brn-text:        #1C1C2E;
	--brn-light-bg:    #F4F6FC;
	--brn-blue-dark:   #152F96;
	--brn-orange-dark: #D9541A;
	/* Gradient kept only for decorative/text uses — NOT buttons */
	--brn-gradient:    linear-gradient(135deg, #1A3FBB 0%, #FF6B2B 100%);
	--brn-radius-sm:   6px;
	--brn-radius-md:   8px;
	--brn-radius-lg:   8px;
	--brn-radius-xl:   8px;
	--brn-shadow-sm:   0 2px 8px rgba(26,63,187,.10);
	--brn-shadow-md:   0 8px 32px rgba(26,63,187,.15);
	--brn-shadow-lg:   0 20px 60px rgba(26,63,187,.20);
	--brn-transition:  all .28s cubic-bezier(.4,0,.2,1);
	/* Section spacing */
	--brn-section-py:  6.25rem; /* 100px */
}

/* ---------- Base Reset & Typography ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
	color: var(--brn-text);
	background-color: var(--brn-white);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--brn-blue);
	text-decoration: none;
	transition: var(--brn-transition);
}

a:hover {
	color: var(--brn-orange);
}

/* ---------- Selection ---------- */
::selection {
	background: var(--brn-blue);
	color: var(--brn-white);
}

/* ==========================================================
   HEADER
   ========================================================== */

/* ── Header shell ── */
.wp-block-template-part.brainious-header,
header.wp-block-template-part,
.brainious-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: #FFFFFF !important;
	border-bottom: 1px solid #E5E7EB !important;
	box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Inner row: constrained, flex, space-between */
.brn-header-inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 2rem !important;
	width: 100% !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Navigation flex */
.brainious-header .wp-block-navigation,
.brainious-header .wp-block-navigation__container {
	flex: 1 !important;
	justify-content: flex-end !important;
}

/* Nav links */
.brainious-header .wp-block-navigation a,
.brainious-header .wp-block-navigation__container a,
.brainious-header .wp-block-navigation-item__content {
	font-weight: 500 !important;
	font-size: 0.9rem !important;
	color: #374151 !important;
	white-space: nowrap !important;
	transition: color .2s !important;
}

.brainious-header .wp-block-navigation a:hover {
	color: #1A3FBB !important;
}

/* Site title */
.brainious-header .wp-block-site-title a,
.brainious-header .wp-block-site-title {
	color: #0D1117 !important;
	font-weight: 800 !important;
	white-space: nowrap !important;
}

/* ── Nav buttons: shared base ── */
.brn-login-btn .wp-block-button__link,
.brn-nav-cta .wp-block-button__link {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
	padding: 0.5rem 1.125rem !important;
	font-size: 0.8125rem !important;
	font-weight: 700 !important;
	border-radius: 6px !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	text-decoration: none !important;
	color: #FFFFFF !important;
	transition: opacity 0.15s !important;
}

/* Log In: solid blue, white text */
.brn-login-btn .wp-block-button__link {
	background: #1A3FBB !important;
	border: 1.5px solid #1A3FBB !important;
}

.brn-login-btn .wp-block-button__link:hover {
	opacity: 0.87 !important;
}

/* Start Free: solid orange, white text */
.brn-nav-cta .wp-block-button__link {
	background: #FF6B2B !important;
	border: 1.5px solid #FF6B2B !important;
}

.brn-nav-cta .wp-block-button__link:hover {
	opacity: 0.87 !important;
}

/* ==========================================================
   HERO SECTION
   ========================================================== */

.brn-hero {
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
}

/* No ::before pseudo gradient — completely removed */

/* Gradient badge / pill */
.brn-badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: rgba(255,107,43,.12);
	border: 1px solid rgba(255,107,43,.30);
	color: var(--brn-orange);
	border-radius: var(--brn-radius-xl);
	padding: .4rem 1rem;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Hero headline gradient text */
.brn-gradient-text {
	background: var(--brn-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ==========================================================
   BUTTONS — Solid only, no gradients anywhere
   ========================================================== */

/* ── Primary: solid blue ── */
.wp-block-button.is-style-primary .wp-block-button__link,
.wp-block-button.brn-btn-primary .wp-block-button__link {
	background: var(--brn-blue) !important;
	color: var(--brn-white) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: .875rem 2rem !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.wp-block-button.is-style-primary .wp-block-button__link:hover,
.wp-block-button.brn-btn-primary .wp-block-button__link:hover {
	filter: brightness(0.9) !important;
}

/* ── Accent: solid orange ── */
.wp-block-button.brn-btn-accent .wp-block-button__link {
	background: var(--brn-orange) !important;
	color: var(--brn-white) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: .875rem 2rem !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.wp-block-button.brn-btn-accent .wp-block-button__link:hover {
	filter: brightness(0.9) !important;
}

/* ── Outline: transparent bg, blue border ── */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: var(--brn-blue) !important;
	border: 2px solid var(--brn-blue) !important;
	border-radius: 8px !important;
	padding: .875rem 2rem !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	filter: brightness(0.9) !important;
	background: var(--brn-blue) !important;
	color: var(--brn-white) !important;
}

/* ── Outline on dark bg (white border) ── */
.wp-block-button.brn-btn-outline-white .wp-block-button__link {
	background: transparent !important;
	color: var(--brn-white) !important;
	border: 2px solid rgba(255,255,255,.55) !important;
	border-radius: 8px !important;
	padding: .875rem 2rem !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.wp-block-button.brn-btn-outline-white .wp-block-button__link:hover {
	border-color: var(--brn-white) !important;
	background: rgba(255,255,255,.08) !important;
}

/* ── Ghost on light bg (kept for backwards compat) ── */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--brn-blue) !important;
	border: 2px solid var(--brn-blue) !important;
	border-radius: 8px !important;
	padding: .875rem 2rem !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	background: var(--brn-blue) !important;
	color: var(--brn-white) !important;
	filter: brightness(0.9) !important;
}

/* ── Nuke ALL gradients on every button everywhere ── */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-background,
.wp-element-button {
	background-image: none !important;
}
/* Restore solid color for known button types via inline style override */
.wp-block-button .wp-block-button__link[style*="background-color"] {
	background-image: none !important;
}
/* Kill WordPress theme.json gradient presets applied to buttons */
.wp-block-button .wp-block-button__link[class*="has-"][class*="gradient-background"] {
	background: var(--brn-blue) !important;
	background-image: none !important;
}

/* ==========================================================
   COURSE CARDS
   ========================================================== */

.brn-course-card {
	background: var(--brn-white);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: var(--brn-shadow-sm);
	transition: var(--brn-transition);
	border: 1px solid rgba(26,63,187,.07);
	display: flex;
	flex-direction: column;
}

.brn-course-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--brn-shadow-lg);
	border-color: rgba(26,63,187,.15);
}

.brn-course-card__thumb {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.brn-course-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
}

.brn-course-card:hover .brn-course-card__thumb img {
	transform: scale(1.06);
}

/* Gradient overlay on card thumb */
.brn-course-card__thumb::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(13,17,23,.5) 0%, transparent 60%);
	pointer-events: none;
}

.brn-course-card__body {
	padding: 1.5rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.brn-course-card__category {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brn-orange);
}

.brn-course-card__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--brn-text);
	margin: 0;
}

.brn-course-card__meta {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: .8125rem;
	color: #6b7280;
	font-weight: 500;
	margin-top: auto;
}

.brn-course-card__price {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--brn-blue);
}

.brn-course-card__price .original {
	text-decoration: line-through;
	color: #9ca3af;
	font-weight: 500;
	font-size: .875rem;
	margin-left: .25rem;
}

/* Star rating */
.brn-stars {
	color: #f59e0b;
	font-size: .875rem;
	display: flex;
	align-items: center;
	gap: .2rem;
}

/* Course card badge (Best Seller, New, etc.) — solid blue, no gradient */
.brn-card-badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
	background: var(--brn-blue);
	color: var(--brn-white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 6px;
	padding: .25rem .6rem;
}

/* ==========================================================
   STATS / NUMBERS SECTION
   ========================================================== */

.brn-stat {
	text-align: center;
}

.brn-stat__number {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1;
}

.brn-stat__label {
	font-size: .9375rem;
	font-weight: 500;
	color: rgba(255,255,255,.75);
	margin-top: .4rem;
}

/* ==========================================================
   FEATURE CARDS / ICON BOXES
   ========================================================== */

.brn-feature-card {
	background: #FFFFFF;
	border: 1px solid rgba(26,63,187,.08);
	border-radius: 8px;
	padding: 2rem;
	transition: var(--brn-transition);
}

.brn-feature-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--brn-shadow-md);
	border-color: rgba(26,63,187,.18);
}

/* Icon box: solid blue fill */
.brn-feature-icon {
	width: 52px;
	height: 52px;
	background: var(--brn-blue);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	font-size: 1.25rem;
}

/* ==========================================================
   TESTIMONIAL CARDS
   ========================================================== */

.brn-testimonial {
	background: rgba(255,255,255,.06);
	border-radius: 8px;
	padding: 2rem;
	border: 1px solid rgba(255,255,255,.12);
	position: relative;
}

.brn-testimonial::before {
	content: '\201C';
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: 5rem;
	line-height: 1;
	color: var(--brn-orange);
	opacity: .15;
	font-family: Georgia, serif;
}

/* ==========================================================
   SECTION UTILITIES
   ========================================================== */

.brn-section-dark {
	background: var(--brn-dark);
	color: var(--brn-white);
}

.brn-section-blue {
	background: var(--brn-blue);
	color: var(--brn-white);
}

.brn-section-light {
	background: var(--brn-light-bg);
}

/* CTA section: solid blue, no gradient */
.brn-section-cta {
	background: var(--brn-blue);
	color: var(--brn-white);
}

.brn-section-gradient {
	background: var(--brn-blue);
	color: var(--brn-white);
}

/* Diagonal cut decoration */
.brn-cut-bottom {
	clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

.brn-cut-top {
	clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================================
   TYPOGRAPHY UTILITIES
   ========================================================== */

.brn-eyebrow {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brn-orange);
}

.brn-display {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
}

/* Section h2 standard */
.brn-section-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.025em;
}

.brn-subtitle {
	font-size: clamp(1rem, 2vw, 1.25rem);
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255,255,255,.8);
}

/* Dark section body text */
.brn-section-dark p,
.brn-section-dark li {
	color: rgba(255,255,255,.8);
}

/* Light section body text */
.brn-section-light p,
.brn-section-light li {
	color: var(--brn-text);
}

/* ==========================================================
   DIVIDER / DECORATIVE LINE
   ========================================================== */

.brn-divider {
	width: 60px;
	height: 4px;
	background: var(--brn-orange);
	border-radius: 2px;
	border: none;
}

/* ==========================================================
   FOOTER
   ========================================================== */

.brainious-footer,
.wp-block-template-part.brainious-footer footer,
.site-footer {
	background-color: #0A0A0A !important;
	border-top: 1px solid rgba(255,255,255,.06);
}

.brn-footer-logo-text {
	font-size: 1.5rem;
	font-weight: 800;
	color: #FFFFFF;
}

/* Footer column headings */
.brainious-footer h6,
.brainious-footer .wp-block-heading {
	color: #FFFFFF !important;
}

/* Footer body/desc text */
.brainious-footer p {
	color: rgba(255,255,255,.65);
}

.brn-footer-link {
	color: rgba(255,255,255,.65) !important;
	font-size: .9375rem;
	transition: color .2s ease !important;
}

.brn-footer-link:hover {
	color: #FFFFFF !important;
}

/* Footer newsletter submit button: solid blue */
.brn-footer-form button[type="submit"] {
	background: var(--brn-blue) !important;
	background-image: none !important;
	border: none;
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	transition: filter .2s ease;
}

.brn-footer-form button[type="submit"]:hover {
	filter: brightness(0.9);
}

/* ==========================================================
   TUTOR LMS COMPATIBILITY
   ========================================================== */

/* Course archive */
.tutor-course-loop-wrap .tutor-course-loop-item,
.tutor-course-archive-wrap .tutor-col {
	transition: var(--brn-transition);
}

.tutor-course-loop-wrap .tutor-course-loop-item:hover {
	transform: translateY(-6px);
}

/* Tutor buttons — solid blue, no gradient */
.tutor-btn-primary,
.tutor-btn.tutor-btn-primary {
	background: var(--brn-blue) !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 600 !important;
	transition: var(--brn-transition) !important;
}

.tutor-btn-primary:hover,
.tutor-btn.tutor-btn-primary:hover {
	opacity: .9 !important;
	transform: translateY(-2px) !important;
	box-shadow: var(--brn-shadow-md) !important;
}

/* Tutor sidebar */
.tutor-single-course-sidebar .tutor-course-purchase-box {
	border-radius: var(--brn-radius-lg) !important;
	box-shadow: var(--brn-shadow-lg) !important;
	border: 1px solid rgba(26,63,187,.1) !important;
}

/* Tutor breadcrumb */
.tutor-breadcrumb a {
	color: var(--brn-blue) !important;
}

/* Tutor star ratings */
.tutor-star-rating-group .tutor-icon-star-bold,
.tutor-ratings-count {
	color: #f59e0b !important;
}

/* Tutor course progress bar */
.tutor-progress-bar .tutor-progress-active {
	background: var(--brn-blue) !important;
}

/* Tutor badges */
.tutor-badge-label {
	background: var(--brn-orange) !important;
	color: var(--brn-white) !important;
	border-radius: 6px !important;
}

/* ==========================================================
   SCROLL ANIMATIONS (CSS only — no JS dependency)
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {
	.brn-fade-up {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity .6s ease, transform .6s ease;
	}

	.brn-fade-up.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================
   RESPONSIVE UTILITIES
   ========================================================== */

/* ==========================================================
   SECTION SPACING — 100px desktop, 60px mobile
   ========================================================== */

/* Any group/section with these WP spacing presets gets consistent padding.
   We override via the wp-block-group selector at specific spacing values. */
.brn-section {
	padding-top: var(--brn-section-py);
	padding-bottom: var(--brn-section-py);
}

/* Also target the WP inline-style approach: spacing--20 = ~5rem,
   we nudge to 100px via a stronger rule */
.wp-block-group[style*="padding-top:var(--wp--preset--spacing--24)"],
.wp-block-group[style*="padding-bottom:var(--wp--preset--spacing--24)"] {
	padding-top: 6.25rem !important;
	padding-bottom: 6.25rem !important;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 768px) {
	.brn-hide-mobile {
		display: none !important;
	}

	/* 60px section padding on mobile */
	.brn-section,
	.wp-block-group[style*="padding-top:var(--wp--preset--spacing--24)"],
	.wp-block-group[style*="padding-bottom:var(--wp--preset--spacing--24)"] {
		padding-top: 3.75rem !important;
		padding-bottom: 3.75rem !important;
	}

	.brn-display,
	h1 {
		font-size: clamp(2rem, 8vw, 2.75rem);
	}

	h2, .brn-section-title {
		font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
	}

	.brn-stat__number {
		font-size: 2.25rem;
	}

	.brn-cut-bottom,
	.brn-cut-top {
		clip-path: none;
	}

	/* Stack course cards grid on mobile */
	.brn-courses-grid {
		grid-template-columns: 1fr !important;
	}
}

@media (min-width: 769px) {
	.brn-hide-desktop {
		display: none !important;
	}
}

/* ==========================================================
   FOCUS & ACCESSIBILITY
   ========================================================== */

:focus-visible {
	outline: 3px solid var(--brn-orange);
	outline-offset: 3px;
	border-radius: 3px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================
   TUTOR LMS — DEEP INTEGRATION STYLES
   ========================================================== */

/* ── Reset Tutor base to match Brainious ── */
.tutor-wrap,
.tutor-wrap *,
#tutor-course-details-page,
#tutor-course-details-page * {
	font-family: var(--wp--preset--font-family--jakarta) !important;
	box-sizing: border-box;
}

/* ── Course archive (Tutor's own /courses page) ── */
.tutor-course-loop {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.tutor-course-card,
.tutor-course-loop-item {
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: none !important;
}

.tutor-course-card:hover,
.tutor-course-loop-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(26, 63, 187, .14);
}

.tutor-course-card .tutor-card-thumbnail img,
.tutor-course-loop-item .tutor-card-thumbnail img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.tutor-course-card .tutor-card-body {
	padding: 1.25rem 1.25rem 1.5rem;
}

.tutor-course-card .tutor-card-name a {
	font-size: 1.0625rem;
	font-weight: 700;
	color: #0D1117;
	text-decoration: none;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.tutor-course-card .tutor-card-name a:hover {
	color: var(--brn-blue);
}

.tutor-course-card .tutor-card-meta {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.8125rem;
	color: var(--brn-muted);
	margin-top: 0.625rem;
}

.tutor-course-card .tutor-course-price {
	font-size: 1.125rem;
	font-weight: 800;
	color: #0D1117;
}

.tutor-course-card .tutor-course-price del {
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--brn-muted);
	margin-left: 0.375rem;
}

/* ── Rating stars ── */
.tutor-ratings-count,
.tutor-star-rating .tutor-icon-star-full {
	color: #FF6B2B !important;
}

/* ── Enroll button ── */
.tutor-btn-primary,
.tutor-enroll-btn,
#tutor-enrollment-form .tutor-btn {
	background: #FF6B2B !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	border-radius: 10px !important;
	border: none !important;
	padding: 0.875rem 2rem !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	transition: background 0.2s ease !important;
	font-family: var(--wp--preset--font-family--jakarta) !important;
}

.tutor-btn-primary:hover,
.tutor-enroll-btn:hover {
	background: #e05a1f !important;
}

.tutor-btn-outline-primary {
	border: 2px solid var(--brn-blue) !important;
	color: var(--brn-blue) !important;
	background: transparent !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	padding: 0.875rem 2rem !important;
	transition: all 0.2s ease !important;
}

.tutor-btn-outline-primary:hover {
	background: var(--brn-blue) !important;
	color: #FFFFFF !important;
}

/* ── Single course: content area ── */
#tutor-course-details-page .tutor-course-header {
	background: #0D1117;
	color: #FFFFFF;
	padding: 4rem 0;
}

#tutor-course-details-page .tutor-course-header h1 {
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 800;
	color: #FFFFFF;
	letter-spacing: -0.03em;
	line-height: 1.08;
}

#tutor-course-details-page .tutor-course-description h2 {
	font-size: 1.375rem;
	font-weight: 800;
	color: #0D1117;
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
}

/* ── Sidebar enroll card (Tutor native) ── */
.tutor-sidebar-card {
	border-radius: 16px !important;
	overflow: hidden !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .2) !important;
	border: none !important;
}

.tutor-sidebar-card .tutor-course-price {
	font-size: 2rem;
	font-weight: 800;
	color: #0D1117;
}

/* ── Curriculum accordion ── */
.tutor-course-topics-wrap .tutor-accordion-item {
	border: 1px solid #E5E7EB !important;
	border-radius: 12px !important;
	margin-bottom: 0.5rem !important;
	overflow: hidden !important;
}

.tutor-accordion-item-header {
	background: #F9FAFB !important;
	font-weight: 700 !important;
	font-size: 0.9375rem !important;
	color: #0D1117 !important;
	padding: 1rem 1.25rem !important;
	cursor: pointer;
}

.tutor-accordion-item-body .tutor-lesson-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.875rem 1.25rem;
	font-size: 0.875rem;
	color: #1C1C2E;
	border-top: 1px solid #F4F6FC;
}

.tutor-lesson-item a {
	color: #1A3FBB;
	text-decoration: none;
	font-weight: 500;
}

.tutor-lesson-item a:hover {
	text-decoration: underline;
}

.tutor-lesson-duration {
	font-size: 0.8125rem;
	color: var(--brn-muted);
	flex-shrink: 0;
}

/* ── Course player / lesson view ── */
.tutor-course-content-nav {
	background: #0D1117 !important;
	color: #FFFFFF !important;
}

.tutor-course-content-nav .tutor-navbar-brand {
	color: #FFFFFF !important;
	font-weight: 800 !important;
}

.tutor-lesson-content-wrap {
	padding: 2rem 3rem;
	max-width: 900px;
	margin: 0 auto;
}

.tutor-lesson-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: #0D1117;
	letter-spacing: -0.02em;
	margin-bottom: 1.5rem;
}

/* ── Quiz styles ── */
.tutor-quiz-wrap .tutor-quiz-header {
	background: var(--brn-blue);
	color: #FFFFFF;
	border-radius: 12px;
	padding: 1.5rem 2rem;
	margin-bottom: 2rem;
}

.tutor-quiz-option {
	border: 2px solid #E5E7EB !important;
	border-radius: 10px !important;
	padding: 1rem 1.25rem !important;
	margin-bottom: 0.625rem !important;
	transition: border-color 0.15s, background 0.15s !important;
	cursor: pointer !important;
}

.tutor-quiz-option:hover {
	border-color: var(--brn-blue) !important;
	background: rgba(26, 63, 187, .04) !important;
}

.tutor-quiz-option.is-selected {
	border-color: var(--brn-blue) !important;
	background: rgba(26, 63, 187, .06) !important;
}

.tutor-quiz-option.is-correct {
	border-color: #22c55e !important;
	background: rgba(34, 197, 94, .06) !important;
}

.tutor-quiz-option.is-wrong {
	border-color: #ef4444 !important;
	background: rgba(239, 68, 68, .06) !important;
}

/* ── Progress bar ── */
.tutor-course-progress-bar .tutor-progress-bar-wrap {
	background: #E5E7EB;
	border-radius: 100px;
	height: 6px;
	overflow: hidden;
}

.tutor-course-progress-bar .tutor-progress-fill {
	background: var(--brn-blue);
	border-radius: 100px;
	height: 100%;
	transition: width 0.4s ease;
}

/* ── Certificate ── */
.tutor-certificate-wrap {
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(26, 63, 187, .2);
}

/* ── My Courses dashboard ── */
.tutor-dashboard .tutor-nav-item a {
	font-weight: 600;
	color: var(--brn-text);
	text-decoration: none;
	padding: 0.625rem 1rem;
	border-radius: 8px;
	display: block;
	transition: background 0.15s, color 0.15s;
}

.tutor-dashboard .tutor-nav-item a:hover,
.tutor-dashboard .tutor-nav-item.tutor-is-active a {
	background: rgba(26, 63, 187, .08);
	color: var(--brn-blue);
}

/* ── Instructor profile ── */
.tutor-instructor-wrap {
	background: #F4F6FC;
	border-radius: 16px;
	padding: 2rem;
}

.tutor-instructor-name {
	font-size: 1.125rem;
	font-weight: 800;
	color: #0D1117;
}

.tutor-instructor-bio {
	font-size: 0.9rem;
	line-height: 1.7;
	color: #6b7280;
}

/* ── Responsive: Tutor course grid ── */
@media (max-width: 900px) {
	.tutor-course-loop {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tutor-course-loop {
		grid-template-columns: 1fr;
	}

	.tutor-lesson-content-wrap {
		padding: 1.25rem 1rem;
	}
}

/* ==========================================================
   COURSE TEMPLATE EXTRAS — single-course, archive, landing
   ========================================================== */

/* Filter pills hover */
.brn-filter-pill:hover {
	border-color: var(--brn-blue) !important;
	color: var(--brn-blue) !important;
}

/* Course card hover lift */
.brn-course-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brn-course-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(26, 63, 187, .14) !important;
}

/* Curriculum details/summary marker removal */
.brn-curriculum-section > summary::-webkit-details-marker,
.brn-curriculum-section > summary::marker {
	display: none;
}

.brn-curriculum-section > summary::after {
	content: '+';
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--brn-muted);
	flex-shrink: 0;
}

.brn-curriculum-section[open] > summary::after {
	content: '−';
}

/* Tab link active/hover */
.brn-tab-link:hover {
	color: var(--brn-blue) !important;
}

/* Enroll card CTA hover */
.brn-enroll-card a[href="#enroll"]:hover {
	background: #e05a1f !important;
}

/* Landing hero nav link hover */
.brn-landing-nav a:last-child:hover {
	background: rgba(255, 255, 255, .08) !important;
	border-color: rgba(255, 255, 255, .4) !important;
}

/* ============================================================
   JOURNALISM LMS — White-first design overrides
   Shifts secondary/accent sections from #F4F6FC grey to #FFFFFF
   ============================================================ */

/* Default body and page background */
body,
.wp-site-blocks {
	background-color: #FFFFFF;
}

/* Section light — force pure white instead of grey */
.brn-section-light,
.wp-block-group.brn-section-light {
	background-color: #FFFFFF !important;
}

/* Feature cards in white sections: add subtle border instead of grey bg */
.brn-feature-card {
	background-color: #FFFFFF !important;
	border: 1.5px solid #E5E7EB !important;
}

/* Filter bar and archive hero spacing */
.brn-filter-bar {
	border-top: none;
}

/* Related courses section — white background */
.wp-block-group.brn-section-light {
	background-color: #FFFFFF !important;
}

/* Card hover elevation */
.brn-course-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.brn-course-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Testimonial card polish on dark sections */
.brn-testimonial-card {
	transition: border-color 0.2s ease;
}

.brn-testimonial-card:hover {
	border-color: rgba(255, 255, 255, 0.18) !important;
}

/* Breadcrumb link hover */
.brn-breadcrumb a:hover {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* Filter pills hover state */
.brn-filter-pill:hover {
	background: rgba(26, 63, 187, 0.06) !important;
	border-color: #1A3FBB !important;
	color: #1A3FBB !important;
}

/* Footer link hover — already have brn-footer-link, ensure white */
.brn-footer-link:hover {
	color: #FFFFFF !important;
}

/* Footer grid responsive */
@media (max-width: 900px) {
	.brainious-footer > div[style*="grid-template-columns"] {
		grid-template-columns: 1fr 1fr !important;
	}
}

@media (max-width: 600px) {
	.brainious-footer > div[style*="grid-template-columns"] {
		grid-template-columns: 1fr !important;
	}
}

/* Archive hero: ensure no extra top gap */
.brn-archive-hero {
	padding-top: 5rem !important;
}

/* Course card CTA arrow animation */
.brn-card-cta svg {
	transition: transform 0.2s ease;
}

.brn-card-cta:hover svg {
	transform: translateX(4px);
}

/* Curriculum section summary: remove default marker on all browsers */
.brn-curriculum-section > summary {
	-webkit-appearance: none;
	list-style: none;
}

.brn-curriculum-section > summary::-webkit-details-marker {
	display: none;
}

/* Progress bar animation on load */
@keyframes brn-progress-fill {
	from { width: 0; }
}

.brn-progress-wrap > div {
	animation: brn-progress-fill 0.6s ease forwards;
}

/* Responsive: stack enroll card below hero on mobile */
@media (max-width: 768px) {
	.brn-enroll-card {
		position: static !important;
		margin-top: 2rem;
	}

	.brn-course-tabs-nav nav {
		scrollbar-width: none;
	}

	.brn-course-tabs-nav nav::-webkit-scrollbar {
		display: none;
	}
}

/* ─── Tutor LMS wrapper: reset margin so Tutor content sits flush ────────── */
#brn-tutor-main.brn-tutor-main {
	margin: 0;
	padding: 0;
	display: block;
	width: 100%;
}

/* ─── Hero banner: smooth gradient from header into dark section ─────────── */
/* Replaces the jarring white-header → flat-black jump with a gradient that   */
/* starts at a deep blue-tinted charcoal (#151e2d) and flows into #0D1117.    */
.brn-hero-banner {
	background: linear-gradient(180deg, #151e2d 0%, #0D1117 55%) !important;
}

/* Force all text inside any hero banner to white so inherited / default
   browser colours don't bleed through on generic page templates.          */
.brn-hero-banner,
.brn-hero-banner h1,
.brn-hero-banner h2,
.brn-hero-banner h3,
.brn-hero-banner p,
.brn-hero-banner .wp-block-post-title,
.brn-hero-banner .wp-block-heading,
.brn-hero-banner .wp-block-query-title {
	color: #FFFFFF !important;
}

/* ─── Courses hero: dot-grid + glow background ───────────────────────────── */
.brn-courses-hero {
	background: linear-gradient(160deg, #101828 0%, #0D1117 60%) !important;
}

/* ─── Filter bar: sticky under the site header ───────────────────────────── */
.brn-filter-bar {
	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Filter pill hover/active */
.brn-filter-pill:hover:not(.brn-filter-active) {
	background: #EEF2FF !important;
	border-color: #1A3FBB !important;
	color: #1A3FBB !important;
}

/* ─── Course card hover lift ─────────────────────────────────────────────── */
.brn-course-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 12px 32px rgba(26,63,187,0.13) !important;
}

/* ─── Trust strip logos ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.brn-courses-hero form {
		max-width: 100% !important;
	}
}

/* ─── Single course page: responsive hero & layout ──────────────────────── */

/* Hero 2-col grid → stack on mobile */
.brn-course-hero > div > div[style*="grid-template-columns:1fr 380px"],
.brainious2-single-course .brn-course-hero > div > div {
	grid-template-columns: 1fr 380px;
}

@media (max-width: 900px) {
	.brn-course-hero > div > div[style*="grid-template-columns:1fr 380px"] {
		grid-template-columns: 1fr !important;
	}
	.brn-enrol-card {
		position: static !important;
	}
}

/* Main content 2-col → stack on mobile */
@media (max-width: 900px) {
	.brainious2-single-course div[style*="grid-template-columns:1fr 380px"] {
		grid-template-columns: 1fr !important;
	}
}

/* Tutor LMS tab content: clean up default styles inside our panels */
.brn-tab-panel .tutor-course-details-tab { margin-top: 0 !important; }
.brn-tab-panel .tutor-tab-item { padding: 0 !important; }

/* Tabs nav scroll on mobile */
.brn-tabs-nav div {
	-webkit-overflow-scrolling: touch;
}
.brn-tabs-nav div::-webkit-scrollbar { display: none; }

/* Enrol card CTA button hover */
.brn-enrol-card a[style*="background:#1A3FBB"]:hover,
.brn-enrol-card a[style*="background:#FF6B2B"]:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

/* ─── Login page: split-layout responsive ───────────────────────────────── */
@media (max-width: 860px) {
	/* Stack the branding + form panels vertically */
	.brainious2-single-course ~ * div[style*="grid-template-columns:1fr 1fr"],
	main div[style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* ─── Login page: class-based styles ────────────────────────────────────── */
.brn-login-wrap {
	min-height: calc(100vh - 64px);
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.brn-login-brand {
	background: linear-gradient(170deg, #101828 0%, #0D1117 55%);
	padding: 5rem 4rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.brn-login-dot-grid {
	pointer-events: none;
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
	background-size: 28px 28px;
}

.brn-login-glow-top {
	pointer-events: none;
	position: absolute;
	top: -120px;
	right: -80px;
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(26,63,187,0.2) 0%, transparent 65%);
}

.brn-login-glow-bottom {
	pointer-events: none;
	position: absolute;
	bottom: -100px;
	left: -60px;
	width: 380px;
	height: 380px;
	background: radial-gradient(circle, rgba(255,107,43,0.08) 0%, transparent 65%);
}

.brn-login-form-panel {
	background: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4rem;
}

.brn-login-input {
	width: 100%;
	padding: 0.875rem 1rem;
	border: 1.5px solid #E5E7EB;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-family: inherit;
	color: #0D1117;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.brn-login-btn {
	width: 100%;
	padding: 0.9375rem;
	background: #1A3FBB;
	color: #FFFFFF;
	border: none;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}

.brn-social-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.875rem;
	border: 1.5px solid #E5E7EB;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #374151;
	text-decoration: none;
	background: #FFFFFF;
	transition: border-color 0.15s;
}

@media (max-width: 860px) {
	.brn-login-wrap {
		grid-template-columns: 1fr !important;
	}
	.brn-login-brand {
		padding: 4rem 2rem;
	}
	.brn-login-form-panel {
		padding: 3rem 2rem;
	}
}

/* ─── Resource pages / disciplines / partners: responsive grids ──────────── */
@media (max-width: 900px) {
	/* 3-col → single col */
	div[style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: 1fr 1fr !important;
	}
}
@media (max-width: 600px) {
	div[style*="grid-template-columns:repeat(3,1fr)"] {
		grid-template-columns: 1fr !important;
	}
	/* IPC card inner grid */
	div[style*="grid-template-columns:1fr auto"] {
		grid-template-columns: 1fr !important;
	}
	/* Partners IPC programmes strip */
	div[style*="grid-template-columns:1fr 200px"],
	div[style*="grid-template-columns:1fr 380px"] {
		grid-template-columns: 1fr !important;
	}
}

/* ─── Home page: full-width hero 2-col responsive ───────────────────────── */
@media (max-width: 860px) {
	/* Hero 55%/1fr → stack */
	div[style*="grid-template-columns:55% 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* Stats 4-col → 2-col → 1-col */
@media (max-width: 720px) {
	div[style*="grid-template-columns:repeat(4,1fr)"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 420px) {
	div[style*="grid-template-columns:repeat(4,1fr)"] {
		grid-template-columns: 1fr !important;
	}
}

/* Register form name row — collapse on small screens */
@media (max-width: 500px) {
	div[style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* Cookie policy table — hide columns on tiny screens */
@media (max-width: 540px) {
	div[style*="grid-template-columns:1fr 1fr 2fr"] {
		grid-template-columns: 1fr 2fr !important;
	}
}

/* ─── Tutor LMS shortcode output: match our 3-col grid style ─────────────── */
.brn-tutor-grid .tutor-course-loop,
.tutor-course-loop-wrap {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 1.5rem !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.brn-tutor-grid .tutor-course-loop li,
.tutor-course-loop-wrap li {
	margin: 0 !important;
}
@media (max-width: 900px) {
	.brn-tutor-grid .tutor-course-loop,
	.tutor-course-loop-wrap {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 580px) {
	.brn-tutor-grid .tutor-course-loop,
	.tutor-course-loop-wrap {
		grid-template-columns: 1fr !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   HOME PAGE — Featured Courses Section
   ═══════════════════════════════════════════════════════════════════ */

/* 3-column card grid */
.brn-home-course-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Individual card */
.brn-hc-card {
	background: #FFFFFF;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border: 1px solid #E5E7EB;
}

.brn-hc-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(26,63,187,0.14);
	border-color: transparent;
}

/* Thumbnail / cover area */
.brn-hc-thumb {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	position: relative;
	overflow: hidden;
}

/* Badge (Bestseller, Most Popular, Free) */
.brn-hc-badge {
	position: absolute;
	top: 0.875rem;
	left: 0.875rem;
	background: #1A3FBB;
	color: #FFFFFF;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.625rem;
	border-radius: 6px;
}

/* Card body */
.brn-hc-body {
	padding: 1.375rem 1.375rem 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0;
}

/* Category label */
.brn-hc-cat {
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	display: block;
}

/* Title */
.brn-hc-title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	color: #1C1C2E;
	letter-spacing: -0.01em;
	margin: 0 0 0.625rem;
}

/* Description */
.brn-hc-desc {
	font-size: 0.875rem;
	line-height: 1.65;
	color: rgba(28,28,46,0.62);
	margin: 0 0 1rem;
	flex: 1;
}

/* Meta row: duration, enrolled, level */
.brn-hc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1.125rem;
	padding-bottom: 1.125rem;
	border-bottom: 1px solid #F4F6FC;
}

.brn-hc-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
	color: #6b7280;
	font-weight: 500;
}

/* Footer: rating + enrol button */
.brn-hc-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: auto;
}

.brn-hc-rating {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8125rem;
}

.brn-hc-rating strong {
	color: #1C1C2E;
	font-weight: 700;
}

/* Enrol CTA */
.brn-hc-enrol {
	display: inline-block;
	background: #1A3FBB;
	color: #FFFFFF;
	font-size: 0.8125rem;
	font-weight: 700;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s;
}

.brn-hc-enrol:hover {
	opacity: 0.88;
}

/* Responsive: 3-col → 2-col → 1-col */
@media (max-width: 1024px) {
	.brn-home-course-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.brn-home-course-grid {
		grid-template-columns: 1fr;
	}
}

/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — All Breakpoints
   ═══════════════════════════════════════════════════════════════════ */

/* ── Why Choose Us: 3-col feature grid ──────────────────────────── */
.brn-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ── Testimonials: 3-col grid ────────────────────────────────────── */
.brn-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ── Category pills: flex-wrap row ──────────────────────────────── */
.brn-cat-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* ── Home page: dark courses header flex ────────────────────────── */
.brn-courses-header-flex {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
}

/* ── Filter pills bar: scroll on mobile ─────────────────────────── */
.brn-filter-pills-row {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.brn-filter-pills-row::-webkit-scrollbar { display: none; }

/* ── Home hero: right card mock-up ──────────────────────────────── */
.brn-hero-grid {
	display: grid;
	grid-template-columns: 55% 1fr;
	gap: 3rem;
	align-items: center;
}

/* ── Stats strip ─────────────────────────────────────────────────── */
.brn-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	text-align: center;
}

/* ── Instructors card grid ───────────────────────────────────────── */
.brn-instructors-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

/* ── Footer grid ─────────────────────────────────────────────────── */
.brn-footer-grid {
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr;
	gap: 3rem;
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 1200px — Tighten up wide layouts
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
	.brn-footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
		gap: 2rem;
	}
	.brn-courses-header-flex {
		gap: 1.5rem;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 1024px — Tablet landscape
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	/* Nav: header inner padding tighter */
	.brn-header-inner {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
		gap: 1rem !important;
	}

	/* Features / instructors: 3 → 2 col */
	.brn-features-grid,
	.brn-instructors-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Testimonials: 3 → 2 col */
	.brn-testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Footer: 4-col → 2+2 */
	.brn-footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	/* Home hero: tighten gap */
	.brn-hero-grid {
		gap: 2rem;
	}

	/* Courses dark header: stack when tight */
	.brn-courses-header-flex {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 860px — Tablet portrait
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
	/* Header: tighten nav font */
	.brainious-header .wp-block-navigation a {
		font-size: 0.875rem !important;
	}

	/* Hero: 2-col → single col */
	.brn-hero-grid,
	div[style*="grid-template-columns:55% 1fr"] {
		grid-template-columns: 1fr !important;
	}

	/* Hero: centre-align on mobile */
	.brn-hero-grid > div:first-child {
		text-align: center;
	}

	/* Hide the hero right-side mockup card on small screens */
	.brn-hero-mockup {
		display: none;
	}

	/* Social proof: centre */
	.brn-social-proof {
		justify-content: center !important;
	}

	/* Login / register split → stack */
	.brn-login-wrap {
		grid-template-columns: 1fr !important;
		min-height: auto !important;
	}
	.brn-login-brand {
		padding: 3.5rem 2rem 2.5rem !important;
		min-height: 260px;
	}
	.brn-login-form-panel {
		padding: 3rem 1.75rem !important;
	}

	/* Testimonials: → 1-col */
	.brn-testimonials-grid {
		grid-template-columns: 1fr !important;
	}

	/* Trusted by logos strip: wrap */
	.brn-trusted-logos {
		flex-wrap: wrap;
		gap: 1rem 1.5rem;
		justify-content: center;
	}

	/* Section vertical padding: reduce */
	section[style*="padding-top:6.25rem"],
	div[style*="padding-top:6.25rem"] {
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 768px — Standard tablet
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Features: → 1-col */
	.brn-features-grid {
		grid-template-columns: 1fr !important;
	}

	/* Instructors: → 1-col */
	.brn-instructors-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Section headings: scale down */
	h1[style*="font-size:clamp(2.5rem"] {
		font-size: clamp(2rem, 5vw, 3rem) !important;
	}
	h2[style*="font-size:clamp(2rem"] {
		font-size: clamp(1.625rem, 4vw, 2.5rem) !important;
	}

	/* Courses dark header: padding tighter */
	.brn-home-courses-section > div:first-child {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Stats: 4 → 2 col */
	.brn-stats-grid,
	div[style*="grid-template-columns:repeat(4,1fr)"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Footer: 2-col → 1-col brand + 2-col links */
	.brn-footer-grid {
		grid-template-columns: 1fr 1fr !important;
		gap: 2.5rem 2rem;
	}

	/* Category pills: left-align */
	.brn-cat-pills {
		justify-content: flex-start;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 640px — Large mobile / small tablet
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	/* Instructors: → 1-col */
	.brn-instructors-grid {
		grid-template-columns: 1fr !important;
	}

	/* Footer: all 1-col */
	.brn-footer-grid {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}

	/* Nav CTA buttons: compact */
	.brn-login-btn .wp-block-button__link,
	.brn-nav-cta .wp-block-button__link {
		padding: 0.4rem 0.75rem !important;
		font-size: 0.75rem !important;
	}

	/* Section padding: tighter horizontal */
	.brn-home-courses-section {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Hero buttons: stack */
	.brn-hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Stats: keep 2-col on 640, let it go 1-col at 420 */
	.brn-stats-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Register form name row: stack */
	div[style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}

	/* Courses header stats row: stack */
	div[style*="grid-template-columns:repeat(3,1fr)"][style*="border"] {
		grid-template-columns: 1fr !important;
	}

	/* Legal page cookie table: drop middle column */
	div[style*="grid-template-columns:1fr 1fr 2fr"] {
		grid-template-columns: 1fr 2fr !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 480px — Mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	/* Tighten up section padding */
	div[style*="padding:5rem clamp"] {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important;
	}

	/* Section title size */
	.brn-section-title,
	h2[style*="font-weight:800"] {
		font-size: clamp(1.5rem, 5vw, 2rem) !important;
	}

	/* Hero headline */
	h1[style*="font-weight:800"] {
		font-size: clamp(1.875rem, 6vw, 2.75rem) !important;
		line-height: 1.2 !important;
	}

	/* Stats: all 1-col */
	.brn-stats-grid,
	div[style*="grid-template-columns:repeat(4,1fr)"] {
		grid-template-columns: 1fr !important;
	}

	/* Final CTA buttons: stack */
	.brn-cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.brn-cta-buttons a {
		text-align: center;
	}

	/* Nav: site title visible but tighter */
	.brainious-header .wp-block-site-title a {
		font-size: 1rem !important;
	}

	/* Card grid min padding */
	.brn-hc-body {
		padding: 1rem !important;
	}

	/* Home course grid gap tighter */
	.brn-home-course-grid {
		gap: 1rem !important;
	}

	/* Login brand panel: hide on very small — show just form */
	.brn-login-brand {
		display: none;
	}
	.brn-login-form-panel {
		padding: 2.5rem 1.5rem !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   BREAKPOINT: 420px — Small mobile
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
	/* Header: ultra-compact */
	.brn-header-inner {
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	/* Nav text: tighter spacing */
	.wp-block-navigation__container {
		gap: 1rem !important;
	}

	/* Hero CTA buttons: full-width */
	.brn-hero-actions .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* Filter pills: horizontal scroll with padding */
	.brn-filter-pills-row {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Card body: tighter */
	.brn-hc-body {
		padding: 0.875rem !important;
	}
	.brn-hc-title {
		font-size: 0.9375rem !important;
	}
	.brn-hc-desc {
		display: none; /* hide desc on very small screens to save space */
	}
	.brn-hc-meta-item {
		font-size: 0.75rem !important;
	}

	/* Testimonial cards: tighter padding */
	div[style*="background:rgba(255,255,255,0.06)"] {
		padding: 1.5rem 1.25rem !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   NAVIGATION — Mobile hamburger overlay improvements
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 782px) {
	/* WP Block Navigation overlay: full-screen, legible */
	.wp-block-navigation__responsive-container.is-menu-open {
		background: #0D1117 !important;
		padding: 2rem 1.5rem !important;
	}

	/* Nav links in overlay: larger, white */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.125rem !important;
		color: #FFFFFF !important;
		padding: 0.875rem 0 !important;
		border-bottom: 1px solid rgba(255,255,255,0.08) !important;
		display: block !important;
	}

	/* Close button: white */
	.wp-block-navigation__responsive-container-close svg {
		color: #FFFFFF !important;
		fill: #FFFFFF !important;
		width: 28px !important;
		height: 28px !important;
	}

	/* Hamburger icon: dark on white header */
	.wp-block-navigation__responsive-container-open svg {
		color: #0D1117 !important;
		fill: #0D1117 !important;
		width: 26px !important;
		height: 26px !important;
	}

	/* Submenu in mobile overlay */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__content {
		background: rgba(255,255,255,0.05) !important;
		border-radius: 8px;
		padding: 0.5rem 1rem !important;
		margin-top: 0.25rem;
	}

	/* Hide buttons in overlay (they duplicate the nav links) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
		margin-top: 1.5rem;
	}

	/* Auth buttons in mobile overlay: stack and full-width */
	.wp-block-navigation__responsive-container.is-menu-open .brn-login-btn .wp-block-button__link,
	.wp-block-navigation__responsive-container.is-menu-open .brn-nav-cta .wp-block-button__link {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		padding: 0.875rem 1rem !important;
		font-size: 0.9375rem !important;
		color: #FFFFFF !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   IMAGES / MEDIA — fluid everywhere
   ───────────────────────────────────────────────────────────────── */
img, video, iframe, embed {
	max-width: 100%;
	height: auto;
}

/* Trusted-by logos strip: never overflow */
.brn-trusted-logos img {
	max-height: 28px;
	width: auto;
}

/* ─────────────────────────────────────────────────────────────────
   UTILITY HELPERS — shared across templates
   ───────────────────────────────────────────────────────────────── */

/* Overflow-safe horizontal scroll for any table-like block */
.brn-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Hide on mobile */
@media (max-width: 640px) {
	.brn-hide-mobile { display: none !important; }
}

/* Show only on mobile */
.brn-show-mobile { display: none !important; }
@media (max-width: 640px) {
	.brn-show-mobile { display: block !important; }
}

/* ─────────────────────────────────────────────────────────────────
   ACCESSIBILITY — focus ring restore
   ───────────────────────────────────────────────────────────────── */
:focus-visible {
	outline: 3px solid #1A3FBB;
	outline-offset: 3px;
}

/* Remove focus ring on mouse click but keep for keyboard */
:focus:not(:focus-visible) {
	outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   HOME PAGE — Featured Courses Section: responsive inner layout
   ───────────────────────────────────────────────────────────────── */

/* Dark header flex: stack on tablet */
@media (max-width: 860px) {
	.brn-courses-header-flex {
		flex-direction: column !important;
		gap: 1.5rem !important;
	}
	.brn-courses-header-flex > div:last-child {
		width: 100% !important;
	}
}

/* Filter pills bar: make it scroll horizontally on mobile */
@media (max-width: 640px) {
	.brn-filter-pills-row {
		flex-wrap: nowrap !important;
		padding: 0 1rem 0.5rem !important;
		gap: 0.5rem !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   INLINE-GRID OVERRIDES — Why Choose Us & Testimonials
   (sections use inline style grid, we target by class added in HTML)
   ───────────────────────────────────────────────────────────────── */

/* Why Choose Us: the 3-col feature grid inside the section */
@media (max-width: 900px) {
	.brn-why-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 580px) {
	.brn-why-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Testimonials: 3-col → 1-col */
@media (max-width: 900px) {
	.brn-testi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}
@media (max-width: 640px) {
	.brn-testi-grid {
		grid-template-columns: 1fr !important;
	}
}

/* ─────────────────────────────────────────────────────────────────
   PRINT — basic reset for printed pages
   ───────────────────────────────────────────────────────────────── */
@media print {
	.brainious-header,
	.brn-login-brand,
	footer {
		display: none !important;
	}
	body {
		font-size: 12pt;
		color: #000;
	}
}