/* ============================================
   FICKLING REAL ESTATE EDUCATION CENTER
   Site-specific styles
   
   IMPORTANT: This stylesheet builds on top of
   /css/fickling-sections.min.css which provides:
   - Design tokens (--fc-green-light, --fc-green-dark, --fc-red, etc.)
   - Typography (h1-h6, body)
   - Buttons (.btn-fickling, .btn-fickling-primary, .btn-fickling-outline)
   - Utility bar (.section-utility-bar)
   - Main header (.section-main-header)
   - Main footer (.section-main-footer)
   - Tertiary/secondary headers
   
   Add only NEW sections specific to REEC below.
   ============================================ */

/* ============================================
   Header logo sizing (REEC logo is wider than residential logo)
   ============================================ */
.section-main-header .logo-img {
	max-height: 80px;
	width: auto;
}

/* On smaller screens, scale down */
@media (max-width: 991px) {
	.section-main-header .logo-img {
		max-height: 60px;
	}
}

/* ============================================
   Eyebrow above production .secondary-header-title
   Adds the "Learn From the Best" tagline above the H1
   ============================================ */
.section-secondary-header .secondary-header-eyebrow {
	display: block;
	font-family: var(--fc-font-heading);
	font-size: 20px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 2px;
	margin-bottom: 8px;
}

@media (max-width: 767px) {
	.section-secondary-header .secondary-header-eyebrow {
		font-size: 14px;
		letter-spacing: 1px;
	}
}

/* ============================================
   Homepage hero override
   Uses .section-secondary-header pattern but swaps in the housekey
   background image and adds a prominent phone CTA.
   Class added in addition to .section-secondary-header on the homepage only.
   ============================================ */
.section-secondary-header.home-hero {
	background-image:
		linear-gradient(rgba(0, 53, 31, 0.12), rgba(0, 53, 31, 0.09)),
		url('https://ficklingedu.com/assets/images/slider/housekey.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 90px 0;
	text-align: center;
}

.section-secondary-header.home-hero .secondary-header-title {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.55),
		0 4px 12px rgba(0, 0, 0, 0.45);
}

.section-secondary-header.home-hero .secondary-header-eyebrow {
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.55),
		0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Phone CTA block */
.home-hero-phone {
	margin-top: 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.home-hero-phone-label {
	font-family: var(--fc-font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
	text-shadow:
		0 1px 3px rgba(0, 0, 0, 0.6),
		0 2px 6px rgba(0, 0, 0, 0.4);
}

.home-hero-phone-number {
	font-family: var(--fc-font-body);
	font-size: 38px;
	font-weight: 700;
	color: var(--fc-white);
	letter-spacing: 1px;
	text-decoration: none;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
	border-bottom: 3px solid transparent;
	transition: all var(--fc-transition-medium);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.65),
		0 4px 14px rgba(0, 0, 0, 0.5);
}

.home-hero-phone-number i {
	font-size: 26px;
	color: var(--fc-red);
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.5);
}

.home-hero-phone-number:hover {
	color: var(--fc-white);
	border-bottom-color: var(--fc-red);
}

@media (max-width: 767px) {
	.section-secondary-header.home-hero { padding: 60px 0; }
	.home-hero-phone-number { font-size: 28px; }
	.home-hero-phone-number i { font-size: 20px; }
	.home-hero-phone-label { font-size: 11px; letter-spacing: 1.5px; }
}

/* ============================================
   SECTION: REEC Intro
   Class: .section-reec-intro
   ============================================ */
.section-reec-intro {
	padding: var(--fc-section-padding-lg) 0;
	text-align: center;
}

.section-reec-intro .reec-intro-inner {
	max-width: 920px;
	margin: 0 auto;
}

.section-reec-intro p {
	font-size: 18px;
	line-height: 1.7;
	color: var(--fc-text-body);
}

@media (max-width: 767px) {
	.section-reec-intro { padding: var(--fc-section-padding) 0; }
	.section-reec-intro p { font-size: 16px; }
}

/* ============================================
   SECTION: Register Pair (75hr / 25hr)
   Class: .section-reec-register
   ============================================ */
.section-reec-register {
	padding: 30px 0 var(--fc-section-padding-lg);
}

.section-reec-register .reec-register-card-wrap {
	background-color: var(--fc-gray-light);
	border-radius: var(--fc-image-radius);
	padding: 50px 40px;
}

.section-reec-register .reec-register-card {
	padding: 0 20px;
}

.section-reec-register .reec-register-card h3 {
	color: var(--fc-green-light);
	font-size: 26px;
	margin-bottom: 18px;
}

.section-reec-register .reec-register-card p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--fc-text-body);
	margin-bottom: 28px;
}

.section-reec-register .reec-register-divider {
	width: 2px;
	background-color: var(--fc-red);
	margin: 0 auto;
	align-self: stretch;
}

@media (max-width: 767px) {
	.section-reec-register .reec-register-card-wrap { padding: 30px 20px; }
	.section-reec-register .reec-register-card { padding: 0; margin-bottom: 30px; }
	.section-reec-register .reec-register-divider {
		width: 60%; height: 2px; margin: 10px auto 30px;
	}
}

/* ============================================
   SECTION: Course Grid (9-up cards)
   Class: .section-reec-courses
   ============================================ */
.section-reec-courses {
	padding: var(--fc-section-padding-lg) 0;
}

.reec-course-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 991px) { .reec-course-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .reec-course-grid { grid-template-columns: 1fr; } }

.reec-course-card {
	background-color: var(--fc-white);
	border: 1px solid var(--fc-gray-medium);
	border-radius: var(--fc-image-radius);
	padding: 30px;
	display: flex;
	flex-direction: column;
	transition: transform var(--fc-transition-medium), box-shadow var(--fc-transition-medium);
}

.reec-course-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--fc-shadow-md);
}

.reec-course-card h3 {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--fc-text-dark);
	margin: 0 0 16px;
	letter-spacing: 0;
}

.reec-course-card ul {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	flex-grow: 1;
}

.reec-course-card ul li {
	position: relative;
	padding: 6px 0 6px 20px;
	font-size: 15px;
	color: var(--fc-text-body);
	line-height: 1.5;
}

.reec-course-card ul li::before {
	content: '';
	position: absolute;
	left: 0; top: 14px;
	width: 7px; height: 7px;
	border-radius: 50%;
	background-color: var(--fc-green-light);
}

.reec-course-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.reec-course-card-footer .btn-fickling {
	font-size: 14px;
	padding: 10px 18px;
	flex: 1;
	justify-content: center;
}

.reec-course-card-footer .btn-fickling .btn-arrow {
	width: 24px; height: 24px;
	font-size: 11px;
}

.reec-course-tag {
	background-color: var(--fc-green-light);
	color: var(--fc-white);
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	padding: 8px 14px;
	border-radius: 4px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.section-reec-courses { padding: var(--fc-section-padding) 0; }
}

/* ============================================
   SECTION: 6-Step Process
   Class: .section-reec-steps
   ============================================ */
.section-reec-steps {
	padding: var(--fc-section-padding-lg) 0;
	background-color: var(--fc-gray-light);
}

.section-reec-steps .reec-steps-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-reec-steps .reec-steps-header h2 {
	color: var(--fc-green-light);
	margin-bottom: 12px;
}

.section-reec-steps .reec-steps-header h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: var(--fc-red);
	margin: 15px auto 0;
}

.section-reec-steps .reec-steps-header p {
	font-size: 18px;
	color: var(--fc-text-body);
	margin: 0;
}

.reec-steps-list {
	max-width: 860px;
	margin: 0 auto;
}

.reec-step {
	display: flex;
	gap: 28px;
	padding: 26px 0;
	border-bottom: 1px solid var(--fc-gray-medium);
}

.reec-step:last-child { border-bottom: 0; }

.reec-step-number {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--fc-red);
	color: var(--fc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--fc-font-heading);
	font-size: 22px;
	font-weight: 600;
}

.reec-step-body h3 {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--fc-text-dark);
	margin: 6px 0 10px;
	letter-spacing: 0;
}

.reec-step-body p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--fc-text-body);
	margin: 0;
}

.reec-steps-cta {
	text-align: center;
	margin-top: 40px;
}

@media (max-width: 767px) {
	.section-reec-steps { padding: var(--fc-section-padding) 0; }
	.reec-step { gap: 18px; }
	.reec-step-number { width: 40px; height: 40px; font-size: 18px; }
	.reec-step-body h3 { font-size: 18px; }
}

/* ============================================
   SECTION: Why Choose (dark green panel)
   Class: .section-reec-why
   ============================================ */
.section-reec-why {
	background-color: var(--fc-green-light);
	padding: var(--fc-section-padding-lg) 0;
	color: var(--fc-white);
	position: relative;
}

.section-reec-why .reec-why-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-reec-why .reec-why-header h2 {
	color: var(--fc-white);
	margin-bottom: 12px;
}

.section-reec-why .reec-why-header h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: var(--fc-white);
	margin: 15px auto 0;
}

.reec-why-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px 60px;
	max-width: 1080px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.section-reec-why { padding: var(--fc-section-padding) 0; }
	.reec-why-grid { grid-template-columns: 1fr; gap: 30px; }
}

.reec-why-item h3 {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--fc-white);
	margin-bottom: 14px;
	letter-spacing: 0;
}

.reec-why-item h3 i {
	background-color: rgba(255, 255, 255, 0.14);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--fc-white);
}

.reec-why-item p {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.92);
	margin: 0;
}

/* ============================================
   SECTION: Testimonials
   Class: .section-reec-testimonials
   ============================================ */
.section-reec-testimonials {
	padding: var(--fc-section-padding-lg) 0;
}

.section-reec-testimonials .reec-testimonials-header {
	text-align: center;
	margin-bottom: 50px;
}

.section-reec-testimonials .reec-testimonials-header h2 {
	color: var(--fc-green-light);
	margin-bottom: 12px;
}

.section-reec-testimonials .reec-testimonials-header h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: var(--fc-red);
	margin: 15px auto 0;
}

.reec-testimonial-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	max-width: 1080px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.section-reec-testimonials { padding: var(--fc-section-padding) 0; }
	.reec-testimonial-grid { grid-template-columns: 1fr; }
}

.reec-testimonial {
	background-color: var(--fc-white);
	border: 1px solid var(--fc-gray-medium);
	border-radius: var(--fc-image-radius);
	padding: 30px;
}

.reec-testimonial-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--fc-gray-light);
	border: 2px solid var(--fc-green-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fc-green-light);
	font-size: 22px;
	margin-bottom: 18px;
}

.reec-testimonial-body {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fc-text-body);
	margin: 0 0 18px;
}

.reec-testimonial-author {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 16px;
	color: var(--fc-text-dark);
	padding-top: 16px;
	border-top: 2px solid var(--fc-red);
}

/* ============================================
   SECTION: Educational Resources / Blog Teasers
   Class: .section-reec-resources
   ============================================ */
.section-reec-resources {
	padding: 30px 0 var(--fc-section-padding-lg);
}

.section-reec-resources .reec-resources-wrap {
	background-color: var(--fc-off-white);
	border-radius: var(--fc-image-radius);
	padding: 50px 40px;
}

.section-reec-resources .reec-resources-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 36px;
}

.section-reec-resources .reec-resources-head h2 {
	color: var(--fc-green-light);
	font-size: 32px;
	margin: 0;
}

.section-reec-resources .reec-resources-intro {
	max-width: 320px;
	font-size: 15px;
	color: var(--fc-text-body);
	line-height: 1.65;
}

.reec-article-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

@media (max-width: 767px) {
	.section-reec-resources .reec-resources-wrap { padding: 30px 24px; }
	.reec-article-grid { grid-template-columns: 1fr; }
}

.reec-article-card {
	background-color: var(--fc-white);
	border-radius: var(--fc-image-radius);
	padding: 26px;
	display: flex;
	flex-direction: column;
	box-shadow: var(--fc-shadow-sm);
}

.reec-article-card h3 {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 17px;
	color: var(--fc-green-light);
	margin: 0 0 14px;
	line-height: 1.4;
	letter-spacing: 0;
}

.reec-article-meta {
	font-size: 13px;
	color: var(--fc-gray-dark);
	line-height: 1.65;
	margin-bottom: 20px;
}

.reec-article-meta strong {
	color: var(--fc-text-dark);
	font-weight: 600;
}

.reec-article-card .btn-fickling {
	margin-top: auto;
	align-self: flex-start;
	font-size: 13px;
	padding: 9px 16px;
}

.reec-article-card .btn-fickling .btn-arrow {
	width: 22px; height: 22px;
	font-size: 10px;
}

/* ============================================
   SECTION: Ready to Get Started CTA (pre-footer)
   Class: .section-reec-cta
   ============================================ */
.section-reec-cta {
	background-color: var(--fc-green-light);
	color: var(--fc-white);
	padding: 50px 0;
}

.section-reec-cta .reec-cta-title {
	font-family: var(--fc-font-heading);
	font-size: 38px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-white);
	letter-spacing: 1px;
	margin: 0 0 8px;
}

.section-reec-cta .reec-cta-label {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 8px;
}

.section-reec-cta .reec-cta-phone {
	font-family: var(--fc-font-body);
	font-size: 32px;
	font-weight: 700;
	color: var(--fc-white);
	letter-spacing: 1px;
}

.section-reec-cta .reec-cta-phone:hover {
	color: var(--fc-white);
	opacity: 0.85;
}

.section-reec-cta .btn-fickling-outline {
	background-color: transparent;
	color: var(--fc-white);
	border-color: var(--fc-white);
}

.section-reec-cta .btn-fickling-outline:hover {
	background-color: var(--fc-white);
	color: var(--fc-green-light);
	border-color: var(--fc-white);
}

.section-reec-cta .btn-fickling-outline .btn-arrow {
	background-color: var(--fc-white);
	color: var(--fc-green-light);
}

@media (max-width: 991px) {
	.section-reec-cta { padding: 40px 0; text-align: center; }
	.section-reec-cta .text-lg-right { margin-top: 26px; }
	.section-reec-cta .reec-cta-title { font-size: 30px; }
	.section-reec-cta .reec-cta-phone { font-size: 26px; }
}

/* ============================================
   Mobile menu styles are provided by fickling-sections.min.css
   (.mobile-menu-overlay, .mobile-nav, .has-submenu, .mobile-submenu,
   .you-are-here, .submenu-toggle, .menu-backdrop, body.menu-open)
   ============================================ */

/* ============================================
   REEC Nav Dropdowns
   Adds hover-revealed dropdowns to the main nav
   for Pre-License, Post-License, Online Courses, and Instructors
   ============================================ */
.reec-nav-menu .has-dropdown {
	position: relative;
}

.section-main-header .reec-nav-menu .dropdown-toggle-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

.reec-nav-menu .dropdown-caret {
	font-size: 10px;
	transition: transform var(--fc-transition-fast);
}

.reec-nav-menu .has-dropdown:hover .dropdown-caret {
	transform: rotate(180deg);
}

/* Keep the contact-us (non-dropdown) link from wrapping too */
.section-main-header .reec-nav-menu li > a {
	white-space: nowrap;
}

/* Highlight parent when dropdown is open / page is in this section */
.reec-nav-menu .has-dropdown.active-parent .dropdown-toggle-link {
	color: var(--fc-green-light);
}

/* Dropdown panel */
.reec-dropdown {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	min-width: 280px;
	background-color: var(--fc-white);
	border: 1px solid var(--fc-gray-medium);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.12);
	list-style: none;
	margin: 0;
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transition: all 0.25s ease;
	z-index: 999;
}

.reec-nav-menu .has-dropdown:hover .reec-dropdown,
.reec-nav-menu .has-dropdown:focus-within .reec-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* Bridge the gap between trigger and dropdown so hover doesn't drop */
.reec-nav-menu .has-dropdown::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 12px;
}

/* Arrow pointing up at the trigger */
.reec-dropdown::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background-color: var(--fc-white);
	border-top: 1px solid var(--fc-gray-medium);
	border-left: 1px solid var(--fc-gray-medium);
}

.reec-dropdown li {
	display: block;
	margin: 0;
}

.reec-dropdown li::after {
	display: none !important;  /* override the pipe separator from base nav-menu styles */
}

.reec-dropdown li a {
	display: block;
	padding: 10px 18px;
	font-family: var(--fc-font-body);
	font-size: 14px;
	font-weight: 500;
	color: var(--fc-text-dark);
	white-space: nowrap;
	transition: all var(--fc-transition-fast);
}

.reec-dropdown li a:hover {
	background-color: var(--fc-gray-light);
	color: var(--fc-green-light);
}

/* Hide dropdowns on smaller screens (mobile nav takes over) */
@media (max-width: 991px) {
	.reec-nav-menu { display: none; }
}

/* ============================================
   Footer Contact Block (sits between brand and EXPLORE column)
   ============================================ */
.section-main-footer .footer-contact-block {
	color: var(--fc-white);
	max-width: 260px;
}

.section-main-footer .footer-contact-block .footer-heading {
	font-family: var(--fc-font-heading);
	font-size: 22px;
	font-weight: 600;
	font-variant: small-caps;
	letter-spacing: 1px;
	color: var(--fc-white);
	margin: 0 0 16px;
}

.section-main-footer .footer-contact-block .footer-heading a {
	color: var(--fc-white);
	text-decoration: none;
}

.section-main-footer .footer-contact-block .footer-heading a:hover {
	opacity: 0.85;
}

.section-main-footer .footer-phone {
	display: block;
	font-family: var(--fc-font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--fc-white);
	letter-spacing: 0.5px;
	margin-bottom: 18px;
	text-decoration: none;
}

.section-main-footer .footer-phone:hover {
	opacity: 0.85;
}

.section-main-footer .footer-address {
	font-family: var(--fc-font-body);
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
}

.section-main-footer .footer-address strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	margin-bottom: 6px;
	color: var(--fc-white);
}

.section-main-footer .footer-nav-heading {
	font-family: var(--fc-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--fc-white);
	margin-bottom: 18px;
}

@media (max-width: 991px) {
	.section-main-footer .footer-contact-block {
		max-width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}
}

/* ============================================
   Instructor Bio Page (e.g., dorothy-mitchell.cfm)
   ============================================ */
.instructor-bio-row {
	gap: 0;
}

.instructor-photo {
	border-radius: var(--fc-image-radius);
	width: 100%;
	max-width: 320px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
}

.instructor-name {
	color: var(--fc-green-light);
	font-family: var(--fc-font-heading);
	font-size: 36px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	letter-spacing: 1px;
	margin: 0 0 6px;
}

.instructor-title {
	font-family: var(--fc-font-body);
	font-size: 16px;
	font-weight: 600;
	color: var(--fc-text-dark);
	letter-spacing: 0.3px;
	margin: 0 0 24px;
	padding-bottom: 16px;
	border-bottom: 2px solid var(--fc-red);
}

.instructor-credentials-heading {
	font-family: var(--fc-font-body);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--fc-green-light);
	margin: 30px 0 16px;
	text-align: left;
}

.instructor-credentials {
	list-style: none;
	padding: 0;
	margin: 0 0 30px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px 24px;
}

@media (max-width: 575px) {
	.instructor-credentials { grid-template-columns: 1fr; }
}

.instructor-credentials li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 6px 0;
	font-size: 15px;
	color: var(--fc-text-body);
	line-height: 1.5;
	text-align: left;
}

.instructor-credentials li::before {
	content: "\f00c";  /* Font Awesome check */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: var(--fc-green-light);
	font-size: 18px;
	flex-shrink: 0;
	line-height: 1.5;
}

.instructor-contact {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.instructor-phone {
	font-family: var(--fc-font-body);
	font-size: 22px;
	font-weight: 700;
	color: var(--fc-green-light);
	letter-spacing: 0.5px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: color var(--fc-transition-fast);
}

.instructor-phone i {
	font-size: 18px;
	color: var(--fc-red);
}

.instructor-phone:hover {
	color: var(--fc-green-dark);
}

@media (max-width: 767px) {
	.instructor-photo { margin-bottom: 24px; max-width: 260px; }
	.instructor-name { font-size: 28px; }
	.instructor-phone { font-size: 18px; }
	.instructor-contact { gap: 14px; }
}

/* ============================================================
   Class detail / registration pages
   (maconclass.cfm, warnerrobinsclass.cfm, postlicense.cfm)
   ============================================================ */

/* Phone CTA strip — sits between hero and class card */
.section-class-phone {
	padding: 24px 0 0;
	text-align: center;
}

.class-phone-cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--fc-font-body);
	font-size: 32px;
	font-weight: 700;
	color: var(--fc-green-light);
	letter-spacing: 1px;
	text-decoration: none;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	transition: all var(--fc-transition-medium);
}

.class-phone-cta i {
	font-size: 22px;
	color: var(--fc-red);
}

.class-phone-cta:hover {
	color: var(--fc-green-dark);
	border-bottom-color: var(--fc-red);
	text-decoration: none;
}

@media (max-width: 575px) {
	.class-phone-cta { font-size: 22px; gap: 10px; }
	.class-phone-cta i { font-size: 16px; }
}

/* Class detail card section */
.section-class-detail {
	padding: 40px 0 80px;
}

.class-detail-card {
	max-width: 880px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid var(--fc-gray-medium);
	border-radius: var(--fc-image-radius);
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

/* Status banner (top of card) */
.class-status-banner {
	padding: 16px 30px;
	font-family: var(--fc-font-body);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #fff;
}

.class-status-banner i { font-size: 18px; }

.class-status-banner.status-registering { background: linear-gradient(135deg, #1d6b35, #025932); }
.class-status-banner.status-waitlist    { background: linear-gradient(135deg, #cc8400, #a06200); }
.class-status-banner.status-full        { background: linear-gradient(135deg, #b81017, #8a0c12); }
.class-status-banner.status-upcoming    { background: linear-gradient(135deg, #1d4d7e, #143961); }

@media (max-width: 575px) {
	.class-status-banner { font-size: 13px; letter-spacing: 0.5px; padding: 14px 16px; }
}

.class-detail-body {
	padding: 40px;
}

@media (max-width: 575px) {
	.class-detail-body { padding: 26px 20px; }
}

.class-detail-title {
	font-family: var(--fc-font-heading);
	font-size: 28px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-green-light);
	letter-spacing: 1px;
	margin: 0 0 18px;
	text-align: center;
}

.class-detail-dates {
	text-align: center;
	font-size: 17px;
	color: var(--fc-text-body);
	padding: 14px 20px;
	background: var(--fc-gray-light);
	border-radius: 8px;
	margin-bottom: 30px;
}

.class-detail-dates i {
	color: var(--fc-green-light);
	margin-right: 8px;
}

/* Price + register block */
.class-register-block {
	text-align: center;
	padding: 30px 0;
	border-top: 2px solid var(--fc-red);
	border-bottom: 2px solid var(--fc-red);
	margin-bottom: 30px;
}

.class-price {
	font-family: var(--fc-font-heading);
	font-size: 48px;
	font-weight: 600;
	color: var(--fc-text-dark);
	letter-spacing: 1px;
	line-height: 1;
	margin-bottom: 24px;
}

.class-register-btn {
	font-size: 16px !important;
	padding: 16px 32px !important;
}

.class-register-closed {
	font-size: 15px;
	color: var(--fc-text-body);
	margin: 0;
}

.class-payload-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--fc-text-muted, #888);
}

.class-payload-logo {
	max-height: 28px;
	width: auto;
	border-radius: 0;
}

/* Student notice strip */
.class-student-notice {
	background: #fff8e7;
	border: 1px solid #f5d97a;
	border-radius: 8px;
	padding: 14px 18px;
	font-size: 14px;
	color: #6b4d00;
	margin-bottom: 30px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.class-student-notice i {
	color: #cc8400;
	font-size: 16px;
}

.class-student-notice a {
	color: #6b4d00;
	font-weight: 600;
	text-decoration: underline;
}

.class-student-notice a:hover {
	color: #4d3700;
}

/* Class meta row (instructor + syllabus) */
.class-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	padding: 20px 0;
	border-bottom: 1px solid var(--fc-gray-medium);
	margin-bottom: 30px;
}

.class-meta-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--fc-text-body);
}

.class-meta-item i {
	color: var(--fc-green-light);
}

.class-meta-item a {
	color: var(--fc-green-light);
	font-weight: 600;
}

.class-meta-item a:hover {
	color: var(--fc-green-dark);
}

/* Description + FAQ sections */
.class-detail-section {
	margin-top: 32px;
}

.class-detail-section h3 {
	font-family: var(--fc-font-body);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--fc-green-light);
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--fc-gray-medium);
}

.class-detail-section p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--fc-text-body);
}

.class-info-list {
	margin: 0;
}

.class-info-list dt {
	font-family: var(--fc-font-body);
	font-weight: 700;
	font-size: 15px;
	color: var(--fc-text-dark);
	margin: 18px 0 6px;
}

.class-info-list dt:first-child { margin-top: 0; }

.class-info-list dd {
	font-size: 15px;
	line-height: 1.65;
	color: var(--fc-text-body);
	margin: 0;
	padding-left: 0;
}

.class-info-list dd a {
	color: var(--fc-green-light);
}

/* ============================================================
   Homepage course cards — DB-driven session tiles
   ============================================================ */

.reec-courses-heading {
	font-family: var(--fc-font-heading);
	font-size: 32px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-green-light);
	letter-spacing: 1.5px;
	text-align: center;
	margin: 0 0 36px;
}

.reec-courses-heading::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	background-color: var(--fc-red);
	margin: 15px auto 0;
}

.reec-course-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.reec-course-type {
	font-family: var(--fc-font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--fc-text-muted, #888);
}

.reec-course-card ul li i {
	width: 18px;
	color: var(--fc-green-light);
	margin-right: 4px;
}

.reec-course-card ul li::before {
	display: none; /* hide the green dot — icons take its place */
}

.reec-course-card ul li {
	padding-left: 0;
}

/* Online (CE Shop) tile gets a subtle highlight */
.reec-course-card-online {
	background: linear-gradient(135deg, #f8faf8 0%, #ffffff 100%);
	border-color: var(--fc-green-light);
	box-shadow: 0 4px 14px rgba(2, 89, 50, 0.08);
}

.reec-courses-empty {
	max-width: 680px;
	margin: 30px auto 0;
	text-align: center;
	color: var(--fc-text-body);
	font-size: 15px;
	padding: 20px;
	background: var(--fc-gray-light);
	border-radius: var(--fc-image-radius);
}

/* ============================================================
   Online Courses page — CE Shop promo
   ============================================================ */

.section-online-promo {
	padding: 20px 0 60px;
}

.online-promo-link {
	display: block;
	max-width: 720px;
	margin: 0 auto;
	border-radius: var(--fc-image-radius);
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
	transition: all var(--fc-transition-medium);
}

.online-promo-link:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
}

.online-promo-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fc-image-radius);
}

.online-promo-cta {
	text-align: center;
	margin-top: 28px;
}

/* ============================================================
   Contact Us page — info column styling
   The form itself uses production .section-contact-form styles
   (form-control, btn-submit, etc. inherited from fickling-sections.min.css)
   ============================================================ */

.contact-info-block {
	margin-bottom: 26px;
}

.contact-info-label {
	display: block;
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--fc-text-dark);
	margin-bottom: 8px;
}

.contact-info-phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fc-font-body);
	font-size: 26px;
	font-weight: 700;
	color: var(--fc-green-light);
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: color var(--fc-transition-fast);
}

.contact-info-phone i {
	font-size: 18px;
	color: var(--fc-red);
}

.contact-info-phone:hover {
	color: var(--fc-green-dark);
}

.contact-info-text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--fc-text-body);
	margin: 0;
}

.contact-info-link {
	font-size: 16px;
	color: var(--fc-green-light);
	text-decoration: none;
}

.contact-info-link:hover {
	color: var(--fc-green-dark);
	text-decoration: underline;
}

/* Alert pills */
.alert {
	padding: 16px 20px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.alert-success {
	background: #e8f5ec;
	color: #1d6b35;
	border: 1px solid #b8dec5;
}

.alert-danger {
	background: #fdecec;
	color: #b32222;
	border: 1px solid #f5c2c2;
}

.alert i {
	margin-right: 6px;
}

/* ============================================================
   Contact form — select dropdown override
   The production .section-contact-form styles target inputs/textareas
   but don't specifically handle <select>. The :valid state injects
   a checkmark background image that covers the selected text on
   dropdowns. Override here.
   ============================================================ */

.section-contact-form select.form-control {
	height: 56px;
	padding: 0 44px 0 18px;
	background-color: var(--fc-white) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23025932' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px 8px !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	color: var(--fc-text-dark);
	font-size: 16px;
	line-height: 1.4;
}

.section-contact-form select.form-control:focus {
	border-color: var(--fc-green-light);
	box-shadow: 0 0 0 3px rgba(2, 83, 50, 0.1);
}

/* When validated (Bootstrap is-valid state), keep our caret instead of the
   green checkmark which would otherwise obscure the chosen option. */
.section-contact-form .was-validated select.form-control:valid,
.section-contact-form select.form-control.is-valid {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23025932' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px 8px !important;
	padding-right: 44px !important;
}

/* Same treatment for invalid state — keep the caret, lose the red X overlay
   on selects (the red border is still applied) */
.section-contact-form .was-validated select.form-control:invalid,
.section-contact-form select.form-control.is-invalid {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ED1B24' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px 8px !important;
	padding-right: 44px !important;
}

/* ============================================================
   Error pages (404, 500)
   ============================================================ */

.error-page-graphic {
	margin: 0 auto 30px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.error-page-graphic i {
	font-size: 72px;
	color: var(--fc-green-light);
	opacity: 0.4;
}

.error-page-code {
	font-family: var(--fc-font-heading);
	font-size: 64px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-red);
	letter-spacing: 4px;
	line-height: 1;
}

.error-page-links {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 30px 0;
}

.error-page-suggested {
	margin-top: 40px;
	padding: 24px;
	background: var(--fc-gray-light);
	border-radius: var(--fc-image-radius);
	text-align: left;
}

.error-page-suggested h3 {
	font-family: var(--fc-font-body);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--fc-green-light);
	margin: 0 0 12px;
	text-align: center;
}

.error-page-suggested ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px 24px;
}

.error-page-suggested li {
	padding: 6px 0;
}

.error-page-suggested a {
	color: var(--fc-green-light);
	text-decoration: none;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
}

.error-page-suggested a::before {
	content: '→';
	color: var(--fc-red);
}

.error-page-suggested a:hover {
	color: var(--fc-green-dark);
	text-decoration: underline;
}

/* ============================================================
   Homepage Welcome / Intro section
   Replaces the plain two-paragraph intro with a layered, branded
   layout: lead question + accent + body + CTA on the left,
   2x2 credibility stat tiles on the right.
   ============================================================ */

.section-reec-welcome {
	padding: var(--fc-section-padding-lg) 0;
	background:
		linear-gradient(180deg, transparent 0%, rgba(2, 89, 50, 0.03) 100%),
		var(--fc-white);
	position: relative;
	overflow: hidden;
}

/* Subtle decorative element top-right */
.section-reec-welcome::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -120px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(2, 89, 50, 0.06), transparent 70%);
	pointer-events: none;
}

.reec-welcome-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 60px;
	align-items: center;
	position: relative;
	z-index: 1;
}

@media (max-width: 991px) {
	.reec-welcome-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* ----- Left column: copy ----- */

.reec-welcome-eyebrow {
	display: inline-block;
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--fc-red);
	margin-bottom: 16px;
}

.reec-welcome-headline {
	font-family: var(--fc-font-heading);
	font-size: 38px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-green-light);
	line-height: 1.2;
	letter-spacing: 1px;
	margin: 0 0 22px;
}

.reec-welcome-headline em {
	font-style: italic;
	color: var(--fc-green-dark);
	font-variant: normal;
	font-feature-settings: normal;
}

@media (max-width: 575px) {
	.reec-welcome-headline { font-size: 28px; }
}

/* The red accent line under the headline */
.reec-welcome-accent {
	width: 70px;
	height: 4px;
	background: var(--fc-red);
	border-radius: 2px;
	margin-bottom: 24px;
}

.reec-welcome-lead {
	font-size: 19px;
	line-height: 1.55;
	color: var(--fc-text-dark);
	margin: 0 0 18px;
	font-weight: 500;
}

.reec-welcome-lead strong {
	color: var(--fc-green-light);
	font-weight: 700;
}

.section-reec-welcome p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--fc-text-body);
	margin: 0 0 16px;
}

/* CTA row */
.reec-welcome-cta {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.reec-welcome-phone {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--fc-font-body);
	font-size: 18px;
	font-weight: 700;
	color: var(--fc-green-light);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: all var(--fc-transition-medium);
}

.reec-welcome-phone i {
	font-size: 16px;
	color: var(--fc-red);
}

.reec-welcome-phone:hover {
	color: var(--fc-green-dark);
	border-bottom-color: var(--fc-red);
	text-decoration: none;
}

/* ----- Right column: stat cards 2x2 ----- */

.reec-welcome-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}

@media (max-width: 575px) {
	.reec-welcome-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.reec-stat-card {
	background: var(--fc-white);
	border: 1px solid var(--fc-gray-medium);
	border-radius: var(--fc-image-radius);
	padding: 28px 22px 24px;
	text-align: center;
	transition: all var(--fc-transition-medium);
	position: relative;
	overflow: hidden;
}

/* Subtle green stripe at top of each card */
.reec-stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fc-green-light), var(--fc-green-dark));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fc-transition-medium);
}

.reec-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	border-color: var(--fc-green-light);
}

.reec-stat-card:hover::before {
	transform: scaleX(1);
}

.reec-stat-icon {
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(2, 89, 50, 0.1), rgba(0, 53, 31, 0.15));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--fc-green-light);
}

.reec-stat-value {
	font-family: var(--fc-font-heading);
	font-size: 36px;
	font-weight: 600;
	font-variant: small-caps;
	font-feature-settings: "smcp";
	color: var(--fc-green-dark);
	letter-spacing: 1.5px;
	line-height: 1;
	margin-bottom: 6px;
}

.reec-stat-label {
	font-family: var(--fc-font-body);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--fc-text-body);
	line-height: 1.3;
}

@media (max-width: 575px) {
	.reec-stat-card { padding: 20px 14px 18px; }
	.reec-stat-icon { width: 44px; height: 44px; font-size: 18px; margin-bottom: 10px; }
	.reec-stat-value { font-size: 26px; }
	.reec-stat-label { font-size: 11px; }
}

/* ============================================================
   Homepage welcome — body copy accents
   ============================================================ */

.reec-welcome-highlight {
	background: linear-gradient(180deg, transparent 65%, rgba(237, 27, 36, 0.18) 65%);
	padding: 0 2px;
	font-weight: 600;
	color: var(--fc-text-dark);
}

.reec-welcome-checks {
	list-style: none;
	padding: 0;
	margin: 24px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.reec-welcome-checks li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 14px;
	background: rgba(2, 89, 50, 0.04);
	border-left: 3px solid var(--fc-green-light);
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--fc-text-body);
	transition: all var(--fc-transition-fast);
}

.reec-welcome-checks li:hover {
	background: rgba(2, 89, 50, 0.08);
	transform: translateX(2px);
}

.reec-welcome-checks li i {
	color: var(--fc-green-light);
	font-size: 16px;
	margin-top: 3px;
	flex-shrink: 0;
}

.reec-welcome-checks li strong {
	color: var(--fc-text-dark);
}

/* ============================================================
   Status pills — shared between admin and public site
   Used on homepage course cards, admin tables, anywhere a session
   or testimonial state needs a visible label.
   ============================================================ */
.status-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	line-height: 1.4;
	white-space: nowrap;
}

.status-upcoming    { background: #e8f1f9; color: #1d4d7e; }
.status-registering { background: #e8f5ec; color: #1d6b35; }
.status-waitlist    { background: #fff4e0; color: #a06200; }
.status-full        { background: #fce5e5; color: #a01a20; }
.status-closed      { background: #ececec; color: #555; }
.status-archived    { background: #e3e3e0; color: #888; }

.status-published   { background: #e8f5ec; color: #1d6b35; }
.status-unpublished { background: #ececec; color: #888; }
.status-featured    { background: #fff4e0; color: #a06200; }

/* ============================================================
   Homepage course grid — intro line + location subline
   ============================================================ */

.reec-courses-intro {
	text-align: center;
	max-width: 640px;
	margin: -18px auto 36px;
	color: var(--fc-text-body);
	font-size: 15px;
	line-height: 1.6;
}

.reec-course-location {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--fc-green-light);
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fc-gray-medium);
}

.reec-course-location i {
	color: var(--fc-red);
	font-size: 13px;
}

/* Distinct status for the always-available CE Shop tile — soft blue
   so it doesn't look like a real "Now Registering" badge */
.status-always-available {
	background: #e8f1f9;
	color: #1d4d7e;
}


/* ============================================================
   Class detail — Topics Covered list
   Higher specificity (.class-detail-section .class-topics-list)
   to beat any inherited ul styling from production CSS.
   ============================================================ */

.class-detail-section ul.class-topics-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 18px 0 !important;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px 18px;
}

.class-detail-section ul.class-topics-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 12px;
	background: rgba(2, 89, 50, 0.04);
	border-left: 3px solid var(--fc-green-light);
	border-radius: 4px;
	font-size: 15px;
	line-height: 1.4;
	color: var(--fc-text-dark);
	list-style: none !important;
}

.class-detail-section ul.class-topics-list li::before {
	display: none !important;
	content: none !important;
}

.class-detail-section ul.class-topics-list li i {
	color: var(--fc-green-light);
	font-size: 18px;
	flex-shrink: 0;
	width: 20px;
	text-align: center;
}

.class-topics-note {
	margin-top: 18px;
	padding: 14px 18px;
	background: #fff8e7;
	border-left: 4px solid #cc8400;
	border-radius: 6px;
	font-size: 14px;
	color: #6b4d00;
}

/* ============================================================
   Class detail — Policy sections
   ============================================================ */

.class-detail-policy {
	background: var(--fc-gray-light);
	padding: 22px 24px;
	border-radius: var(--fc-image-radius);
	border-left: 4px solid var(--fc-green-light);
	margin-top: 24px;
}

.class-detail-policy h3 {
	border-bottom: 0;
	margin-bottom: 10px;
	padding-bottom: 0;
}

.class-detail-policy p {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.6;
}

.class-detail-policy p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   REEC nav — Hamburger menu visibility
   Production CSS shows hamburger at all sizes (it's a mega-menu trigger
   in the residential site). REEC has no mega-menu, so hide it on
   desktop and only reveal it once the main-nav collapses (≤1199px).
   ============================================================ */

.hamburger-wrapper,
.hamburger-menu {
	display: none !important;
}

@media (max-width: 1199px) {
	.hamburger-wrapper {
		display: flex !important;
	}
	.hamburger-menu {
		display: inline-flex !important;
	}
}