/* ==========================================================================
   CCSD brand theme - navy + accent orange
   Loaded last in <head> so it overrides Bootstrap and the template CSS.
   Palette per "Website Review for Update" brief:
     Header navy · Logo accent orange · CTAs orange · Body white
     Section backgrounds light grey · Headings navy · Icons/highlights orange
   ========================================================================== */

:root {
	/* Brand */
	--ccsd-navy:        #13294B;
	--ccsd-navy-dark:   #13294B;
	--ccsd-navy-light:  #13294B;
	--ccsd-orange:      #ED7D31;
	--ccsd-orange-dark: #C75B1E;

	/* Neutrals */
	--ccsd-grey:        #F4F6F8;
	--ccsd-grey-mid:    #E4E9EF;
	--ccsd-border:      #DDE3EA;
	--ccsd-text:        #1F2933;
	--ccsd-text-muted:  #52606D;
	--ccsd-white:       #FFFFFF;

	/* Legacy names kept so existing var() references re-theme automatically */
	--primary-brown: var(--ccsd-navy);
	--dark-brown:    var(--ccsd-navy);
	--light-brown:   var(--ccsd-orange);
	--cream-white:   var(--ccsd-white);
	--dark-blue:     var(--ccsd-navy);
	--dark-orange:   var(--ccsd-orange);
	--light-gray:    var(--ccsd-grey);
}

/* --------------------------------------------------------------- Base ---- */

body {
	background-color: var(--ccsd-white);
	color: var(--ccsd-text);
}

h1, h2, h3, h4, h5, h6,
.section-title {
	color: var(--ccsd-navy);
}

a {
	color: var(--ccsd-navy-light);
}

a:hover,
a:focus {
	color: var(--ccsd-orange-dark);
}

hr,
.border-brown {
	border-color: var(--ccsd-border) !important;
}

/* ---------------------------------------------------------- Navigation --- */

.navbar,
.navbar.scrolled {
	background-color: var(--ccsd-navy) !important;
	box-shadow: 0 2px 10px rgba(19, 41, 75, .25);
}

.navbar-brand,
.navbar .navbar-brand {
	color: var(--ccsd-white) !important;
}

/* Every page reserves 80px for the fixed navbar (body padding-top) and each
   banner pulls itself back up with margin-top:-80px. The logo's height="80"
   attribute made the bar ~104px, so it overlapped content by 24px - barely
   visible where a banner had deep padding, badly cropped on the calendar
   page, and only 8px of clearance on mobile. Sized here so the rendered bar
   matches the 80px the layout assumes. CSS overrides the HTML attribute. */
.navbar-brand img {
	height: 54px;
	width: auto;
	display: block;
}

@media (max-width: 767.98px) {
	.navbar-brand img { height: 46px; }
}

.navbar .nav-link,
.navbar-nav .nav-link {
	color: rgba(255, 255, 255, .85) !important;
	font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar-nav .nav-link.active {
	color: var(--ccsd-orange) !important;
}

/* Active-page indicator.
   The older hand-written pages declare their own .nav-link:after underline
   and an active colour of #0c203b (near-black on a navy bar), while the
   generated pages declare none. Both are overridden here so every page
   highlights identically. Selector is .navbar .navbar-nav .nav-link::after
   to match the specificity of the inline rules it replaces; theme.css loads
   last, so it wins the tie. */

.navbar-nav .nav-link {
	position: relative;
}

.navbar-nav .nav-link.active {
	color: var(--ccsd-orange) !important;
	font-weight: 700;
}

.navbar .navbar-nav .nav-link::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 2px;
	width: auto;
	height: 3px;
	background: var(--ccsd-orange);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}

.navbar .navbar-nav .nav-link:hover::after,
.navbar .navbar-nav .nav-link:focus::after,
.navbar .navbar-nav .nav-link.active::after {
	transform: scaleX(1);
}

/* Collapsed mobile menu: a left bar reads better than an underline when
   the items are stacked, and the active row gets a subtle tint. */
@media (max-width: 991.98px) {
	.navbar .navbar-nav .nav-link::after {
		left: 0;
		right: auto;
		top: 6px;
		bottom: 6px;
		width: 3px;
		height: auto;
		border-radius: 0 2px 2px 0;
		transform: scaleY(0);
		transform-origin: center top;
		transition: transform .2s ease;
	}
	.navbar .navbar-nav .nav-link:hover::after,
	.navbar .navbar-nav .nav-link:focus::after,
	.navbar .navbar-nav .nav-link.active::after {
		transform: scaleY(1);
	}
	.navbar .navbar-nav .nav-link {
		padding-left: 14px;
	}
	.navbar .navbar-nav .nav-link.active {
		background: rgba(237, 125, 49, .12);
		border-radius: 0 4px 4px 0;
	}
}

/* ------------------------------------------------------------- Buttons --- */

/* Primary call to action.
   Navy text on orange, not white: white on #ED7D31 is only 2.8:1 contrast,
   which fails WCAG AA. Navy on orange is 5.25:1 and keeps the orange vivid. */
.btn-primary,
.btn-cta,
.btn-success {
	background-color: var(--ccsd-orange);
	border-color: var(--ccsd-orange);
	color: var(--ccsd-navy);
	font-weight: 700;
	letter-spacing: .01em;
}

.btn-primary:hover, .btn-primary:focus,
.btn-cta:hover,     .btn-cta:focus,
.btn-success:hover, .btn-success:focus {
	background-color: var(--ccsd-orange-dark);
	border-color: var(--ccsd-orange-dark);
	color: var(--ccsd-white);
}

/* Secondary - navy outline */
.btn-secondary,
.btn-outline-primary {
	background-color: transparent;
	border: 2px solid var(--ccsd-navy);
	color: var(--ccsd-navy);
	font-weight: 600;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
	background-color: var(--ccsd-navy);
	color: var(--ccsd-white);
}

/* Legacy card-link rules use greater specificity and otherwise turn the
   download button text navy on a navy hover background. */
.module-card .card-body a.btn-secondary:hover,
.module-card .card-body a.btn-secondary:focus,
.module-card .card-body a.btn-secondary:active {
	background-color: var(--ccsd-navy);
	border-color: var(--ccsd-navy);
	color: var(--ccsd-white) !important;
}

.module-card .card-body a.btn-secondary:hover i,
.module-card .card-body a.btn-secondary:focus i,
.module-card .card-body a.btn-secondary:active i {
	color: var(--ccsd-white) !important;
}

/* On a navy background the outline flips to white/orange */
.bg-navy .btn-secondary,
.navbar .btn-secondary {
	border-color: var(--ccsd-white);
	color: var(--ccsd-white);
}

/* ------------------------------------------------------------ Sections --- */

.section-grey,
.bg-light {
	background-color: var(--ccsd-grey) !important;
}

.section-navy,
.bg-navy {
	background-color: var(--ccsd-navy) !important;
	color: var(--ccsd-white);
}

.section-navy h1, .section-navy h2, .section-navy h3,
.section-navy h4, .section-navy h5, .section-navy h6,
.bg-navy h1, .bg-navy h2, .bg-navy h3,
.bg-navy h4, .bg-navy h5, .bg-navy h6 {
	color: var(--ccsd-white);
}

/* Short orange rule under section headings */
.section-title {
	position: relative;
	padding-bottom: .65rem;
	margin-bottom: 1.75rem;
}

.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 64px;
	height: 4px;
	background-color: var(--ccsd-orange);
	border-radius: 2px;
}

.text-center .section-title::after,
.section-title.text-center::after {
	left: 50%;
	transform: translateX(-50%);
}

.section-navy .section-title::after,
.bg-navy .section-title::after {
	background-color: var(--ccsd-orange);
}

/* ------------------------------------------------- Icons and highlights --- */

.text-brown,
.text-accent,
.icon-accent,
.fas.text-brown,
.far.text-brown {
	color: var(--ccsd-orange) !important;
}

.text-navy {
	color: var(--ccsd-navy) !important;
}

.bullet-points li::marker {
	color: var(--ccsd-orange);
}

/* ---------------------------------------------------------------- Cards --- */

.card,
.course-card,
.service-card {
	border: 1px solid var(--ccsd-border);
	border-radius: 8px;
	background: var(--ccsd-white);
}

.card:hover,
.course-card:hover,
.service-card:hover {
	border-color: var(--ccsd-orange);
	box-shadow: 0 6px 18px rgba(19, 41, 75, .10);
}

.course-date {
	color: var(--ccsd-orange-dark) !important;
	font-weight: 700;
}

/* --------------------------------------------------------------- Footer --- */

/* Five pages carried <footer class="py-4 bg-white">. Bootstrap's .bg-white
   is !important, so it beat the navy background here while the white text
   colour still applied - a white-on-white, seemingly absent footer. The
   markup is now uniform (.site-footer) and no page sets its own background. */

footer,
.footer,
#footer,
.site-footer {
	background-color: var(--ccsd-navy-dark);
	color: rgba(255, 255, 255, .78);
}

/* Beat Bootstrap's .bg-white / .bg-light utilities if either is ever
   re-added to a footer by hand. */
footer.bg-white,
footer.bg-light {
	background-color: var(--ccsd-navy-dark) !important;
}

footer a,
.footer a,
#footer a {
	color: rgba(255, 255, 255, .78);
}

footer a:hover,
.footer a:hover,
#footer a:hover {
	color: var(--ccsd-orange);
}

.site-footer {
	padding: 3.25rem 0 1.5rem;
	font-size: .93rem;
	line-height: 1.6;
}

.site-footer .footer-logo {
	height: 62px;
	width: auto;
}

.site-footer .footer-name {
	font-family: 'Roboto Slab', Georgia, serif;
	font-weight: 700;
	font-size: 1.02rem;
	color: #fff;
}

.site-footer .footer-blurb {
	color: rgba(255, 255, 255, .68);
	max-width: 44ch;
}

.site-footer .footer-slogan {
	color: var(--ccsd-orange);
	font-style: italic;
	font-size: .92rem;
}

.site-footer .footer-head {
	font-family: 'Roboto Slab', Georgia, serif;
	font-size: .95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--ccsd-orange);
	display: inline-block;
}

.site-footer .footer-links,
.site-footer .footer-contact {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .footer-links li {
	margin-bottom: .45rem;
}

.site-footer .footer-links a {
	text-decoration: none;
	position: relative;
	padding-left: 1rem;
	display: inline-block;
}

.site-footer .footer-links a::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--ccsd-orange);
}

.site-footer .footer-contact li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: .9rem;
}

.site-footer .footer-contact i {
	position: absolute;
	left: 0;
	top: .25rem;
	color: var(--ccsd-orange);
	width: 1.2rem;
	text-align: center;
}

.site-footer .footer-contact a {
	text-decoration: none;
	display: block;
}

.site-footer .footer-note {
	display: block;
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
}

.site-footer .footer-note a {
	color: rgba(255, 255, 255, .6);
	text-decoration: underline;
}

.site-footer .footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, .13);
	margin-top: 1rem;
	padding-top: 1.5rem;
	text-align: center;
}

.site-footer .footer-reg-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .45);
}

.site-footer .footer-reg {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.site-footer .footer-reg span {
	font-size: .82rem;
	color: rgba(255, 255, 255, .62);
	padding: .15rem .75rem;
	position: relative;
}

.site-footer .footer-reg span + span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 12px;
	width: 1px;
	background: rgba(255, 255, 255, .22);
}

.site-footer .footer-copy {
	font-size: .85rem;
	color: rgba(255, 255, 255, .55);
}

@media (max-width: 575.98px) {
	.site-footer { padding-top: 2.5rem; text-align: center; }
	.site-footer .footer-blurb { margin-left: auto; margin-right: auto; }
	.site-footer .footer-head { display: block; }
	.site-footer .footer-links a { padding-left: 0; }
	.site-footer .footer-links a::before { display: none; }
	.site-footer .footer-contact li { padding-left: 0; }
	/* Icon must lose its fixed width too, or a 1.2rem block sits flush left
	   while the text around it is centred. */
	.site-footer .footer-contact i {
		position: static;
		display: block;
		width: auto;
		margin: 0 auto .25rem;
		font-size: 1.05rem;
	}
	.site-footer .footer-reg span + span::before { display: none; }
}

/* ------------------------------------------------------ Hero / carousel --- */

/* The home hero used to reuse .course-header, the interior-page banner class,
   which wrapped the carousel in 128px of padding and a background photo. It
   now has its own class so the two never interfere. Images are deliberately
   modest in height so visitors see real content, not just a picture. */

.hero-carousel {
	position: relative;
	margin-top: -80px;           /* sit under the fixed navbar */
	background: var(--ccsd-navy);
}

.hero-carousel .hero-img {
	display: block;
	width: 100%;

	/* Height is proportional to viewport WIDTH, not a fixed pixel value.
	   With a fixed height the share of the photo that gets cropped changes
	   with screen width -- fine on a phone, slicing through people's heads
	   on a laptop. Tying height to vw keeps the crop identical at every
	   size, so the focal points below hold everywhere. */
	height: clamp(340px, 30vw, 520px);

	object-fit: cover;
	object-position: center 50%;
}

/* Per-image focal points, measured from the photos themselves.
   object-position's second value says which line of the IMAGE to align
   with the same line of the BOX, so a low percentage keeps the top. */

/* Faces sit between 12% and 40% down; 15% keeps every head in frame. */
.hero-carousel .hero-img--faces {
	object-position: center 15%;
}

/* Empty boardroom: the table and screen read best slightly below centre. */
.hero-carousel .hero-img--room {
	object-position: center 55%;
}

/* Centred diagram -- keep it centred. */
.hero-carousel .hero-img--chart {
	object-position: center 50%;
}

/* Caption positioning is independent of Bootstrap's .carousel-caption,
   which is hidden below 768px. A faint tint uses the same brand navy at
   low opacity, preserving the photograph while supporting white text. */
.hero-carousel .hero-caption {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	padding-bottom: 5rem;        /* must exceed the indicators' offset + height */
	padding-top: 80px;           /* clear of the navbar */
	text-align: left;
	background: linear-gradient(
		to top,
		rgba(19, 41, 75, .18) 0%,
		rgba(19, 41, 75, .08) 48%,
		rgba(19, 41, 75, .01) 100%
	);
}

.hero-carousel .hero-title {
	color: #fff;
	font-size: clamp(1.5rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	margin: 0 0 .6rem;
	max-width: 22ch;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .7);
}

.hero-carousel .hero-sub {
	color: rgba(255, 255, 255, .92);
	font-size: clamp(.95rem, 1.35vw, 1.12rem);
	line-height: 1.55;
	margin: 0 0 1.25rem;
	max-width: 52ch;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .65);
}

.hero-carousel .hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
}

/* Outline button that reads correctly on a photo */
.btn-hero-outline {
	background: rgba(255, 255, 255, .08);
	border: 2px solid rgba(255, 255, 255, .75);
	color: #fff;
	font-weight: 600;
}

.btn-hero-outline:hover,
.btn-hero-outline:focus {
	background: #fff;
	border-color: #fff;
	color: var(--ccsd-navy);
}

/* Indicators */
.hero-carousel .carousel-indicators {
	bottom: 3.1rem;   /* must clear the scroll cue AND sit below the caption */
	margin-left: 0;
	margin-right: 0;
	justify-content: flex-start;
	padding-left: 15px;
	z-index: 3;
}

.hero-carousel .carousel-indicators li {
	width: 28px;
	height: 4px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .45);
	border: 0;
	opacity: 1;
	transition: background .2s;
}

.hero-carousel .carousel-indicators li.active {
	background: var(--ccsd-orange);
}

/* Prev / next controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
	width: 56px;
	opacity: 0;
	transition: opacity .2s;
	z-index: 3;
}

.hero-carousel:hover .carousel-control-prev,
.hero-carousel:hover .carousel-control-next,
.hero-carousel .carousel-control-prev:focus,
.hero-carousel .carousel-control-next:focus {
	opacity: .9;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
	width: 38px;
	height: 38px;
	background-color: rgba(19, 41, 75, .55);
	background-size: 45% 45%;
	border-radius: 50%;
}

/* Scroll cue - makes it obvious there is content below the fold */
.hero-scroll {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: var(--ccsd-orange);
	color: var(--ccsd-navy);
	font-size: .82rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .6rem 1.4rem;
	border-radius: 8px 8px 0 0;
	text-decoration: none;
}

.hero-scroll:hover,
.hero-scroll:focus {
	background: var(--ccsd-orange-dark);
	color: #fff;
	text-decoration: none;
}

.hero-scroll i {
	animation: heroNudge 1.9s ease-in-out infinite;
}

@keyframes heroNudge {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero-scroll i { animation: none; }
}

/* Smaller screens: shorter image, tighter spacing, cue text trimmed */
@media (max-width: 767.98px) {
    .hero-carousel .hero-img { height: 365px; }
    .hero-carousel .hero-caption { padding-bottom: 4.25rem; padding-top: 70px; }
    .hero-carousel .carousel-indicators { bottom: 2.4rem; }
	.hero-carousel .hero-actions .btn { padding: .4rem .85rem; font-size: .9rem; }
	.hero-scroll span { display: none; }
	.hero-scroll { padding: .5rem 1rem; }
}


/* --------------------------------------------------------------- Forms --- */

.form-control:focus {
	border-color: var(--ccsd-orange);
	box-shadow: 0 0 0 .2rem rgba(237, 125, 49, .25);
}

label,
.form-label {
	color: var(--ccsd-navy);
	font-weight: 600;
}

/* ------------------------------------------------------------ A11y ------- */

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 3px solid var(--ccsd-orange);
	outline-offset: 2px;
}

/* ------------------------------------------- Interior page banners ------- */

/* Interior banners use a faint wash of the single CCSD navy. */
.course-header {
	background-image:
		linear-gradient(rgba(19, 41, 75, .12), rgba(19, 41, 75, .12)),
		url('../images/hero/boardroom.webp');
	background-size: cover;
	background-position: center;
	padding: 128px 0 52px;
}

.course-header h1,
.course-header h2 {
	color: var(--ccsd-white);
	margin-bottom: .35rem;
	text-shadow: 0 2px 5px rgba(0, 0, 0, .95), 0 0 18px rgba(0, 0, 0, .7);
}

.course-header p {
	color: rgba(255, 255, 255, .88);
	margin-bottom: 0;
	text-shadow: 0 2px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .65);
}

@media (max-width: 767.98px) {
	.course-header {
		padding: 112px 0 40px;
	}
}

/* ---------------------------------------------------- Typography -------- */

/* Every page carries two competing body{} rules: the first sets Roboto Slab,
   the second overrides it with Segoe UI. trainingcalender.html has only the
   first, so it rendered in a different typeface from the rest of the site.
   Normalised here: sans for body copy, Roboto Slab (already loaded) for
   headings, which gives the brand some character without hurting legibility. */

/* Body copy was a bare system stack with no web font loaded: Segoe UI on
   Windows, but falling through to Geneva on macOS and Verdana elsewhere, so
   the site read differently on every platform. Inter is loaded instead --
   drawn for screen legibility at small sizes and a clean counterpart to the
   Roboto Slab headings. */

body {
	font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;          /* 17px: easier on long paragraphs than 16 */
	line-height: 1.7;
	letter-spacing: -0.003em;      /* Inter sets slightly wide by default */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.section-title {
	font-family: 'Roboto Slab', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Intro paragraph: larger and lighter in colour, but not shouty. */
.lead {
	font-size: 1.2rem;
	line-height: 1.6;
	font-weight: 400;
	color: var(--ccsd-text);
}

/* Reading measure. A .col-lg-8 line runs to roughly 90 characters, well past
   the 60-75 that reads comfortably; this caps it without narrowing cards,
   tables or form layouts. */
.course-section p,
.course-section .lead,
#about p,
#about .lead {
	max-width: 68ch;
}

.course-section .card p,
.course-section .card .lead,
#about .card p {
	max-width: none;
}

p {
	margin-bottom: 1.05rem;
}

strong, b {
	font-weight: 600;
}

/* ------------------------------------------ Structural base (new pages) -- */

/* Repeats the layout essentials that older pages declare inline, so pages
   added from here on only need theme.css rather than a 350-line style block. */

.navbar {
	padding: 12px 0;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1030;
	transition: all .3s;
}

.course-header {
	color: var(--ccsd-white);
	text-align: center;
	margin-top: -80px;
}

.module-card {
	border: none;
	border-radius: 10px;
	overflow: hidden;
}

.module-card .card-header {
	background-color: var(--ccsd-navy) !important;
	color: var(--ccsd-white) !important;
	border-bottom: 3px solid var(--ccsd-orange);
}

.module-card .card-header h4,
.module-card .card-header h5 {
	color: var(--ccsd-white);
	margin-bottom: 0;
}

.back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-color: var(--ccsd-orange);
	color: var(--ccsd-navy);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	z-index: 1040;
}

.back-to-top.active {
	opacity: 1;
	visibility: visible;
}

.back-to-top:hover {
	background-color: var(--ccsd-navy);
	color: var(--ccsd-white);
}

/* ------------------------------------------ Home "this month" widget ---- */

.current-courses .course-card {
	background: #fff;
	border: 1px solid var(--ccsd-border);
	border-top: 4px solid var(--ccsd-orange);
	border-radius: 8px;
	padding: 1.25rem;
}

/* Slots already under way or finished are dimmed but still listed, so
   visitors see the full month rather than an emptying section. */
.current-courses .course-card.slot-past {
	opacity: .58;
	border-top-color: var(--ccsd-border);
	background: var(--ccsd-grey);
}

.slot-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 3px;
	padding: .15rem .45rem;
	margin-top: .35rem;
}

.slot-badge-open {
	background: var(--ccsd-orange);
	color: var(--ccsd-navy);
}

.slot-badge-live {
	background: var(--ccsd-navy);
	color: #fff;
}

.slot-badge-done {
	background: var(--ccsd-grey-mid);
	color: var(--ccsd-text-muted);
}

.current-courses .cal-courses {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .93rem;
}

.current-courses .cal-courses li {
	position: relative;
	padding-left: 1.2rem;
	margin-bottom: .4rem;
	line-height: 1.45;
}

.current-courses .cal-courses li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--ccsd-orange);
}

.current-courses .cal-courses a {
	color: var(--ccsd-navy);
	text-decoration: none;
}

.current-courses .cal-courses a:hover {
	color: var(--ccsd-orange-dark);
	text-decoration: underline;
}

/* The section sits on navy in the page CSS; keep its heading readable. */
.current-courses .section-title {
	color: var(--ccsd-navy);
}

.current-courses-notice {
	max-width: 42rem;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--ccsd-orange);
	background: var(--ccsd-grey);
}

/* ------------------------------------------------- Forms: validation ---- */

/* Inline validation state, driven by js/form-validate.js.
   The forms do NOT carry `novalidate` in the HTML, so browser validation
   still applies if JavaScript is unavailable; the script adds it once it
   is running and takes over with these messages. */

.form-control.is-invalid,
.form-check-input.is-invalid {
	border-color: #C0392B;
	background-color: #FDF3F2;
}

.form-control.is-invalid:focus {
	border-color: #C0392B;
	box-shadow: 0 0 0 .2rem rgba(192, 57, 43, .18);
}

.invalid-feedback {
	display: block;
	width: 100%;
	margin-top: .35rem;
	font-size: .85rem;
	font-weight: 600;
	color: #C0392B;
}

.form-check .form-check-input.is-invalid ~ .form-check-label {
	color: #C0392B;
}

.form-error-summary {
	display: none;
	background: #FDF3F2;
	border: 1px solid #E8B4AE;
	border-left: 4px solid #C0392B;
	border-radius: 6px;
	color: #922B21;
	padding: .9rem 1.1rem;
	margin-bottom: 1.5rem;
	font-size: .95rem;
}

/* ------------------------------------------------- Forms: sizing -------- */

/* Selects were rendering tight: .form-control set height:auto, which drops
   the comfortable height Bootstrap gives a <select>, and the course names
   are long. Given explicit room here. */

select.form-control {
	height: auto;
	min-height: 46px;
	padding: .55rem .75rem;
	line-height: 1.45;
	cursor: pointer;
}

select.form-control option {
	padding: .35rem .5rem;
}

/* Breathing room between stacked fields, and none wasted at the card edge */
.form-card .form-group {
	margin-bottom: 1.35rem;
}

.form-card .form-group:last-child {
	margin-bottom: 0;
}

.form-card .form-row > [class*="col-"] .form-group {
	margin-bottom: 1.35rem;
}

.form-card label,
.quick-quote label {
	margin-bottom: .4rem;
	font-size: .93rem;
}

/* The conditional "Other course" box needs separating from the selects
   above it, since it appears and disappears. */
#otherCourseWrap {
	margin-top: 1.5rem;
	padding-top: 1.35rem;
	border-top: 1px dashed var(--ccsd-border);
}

.quick-quote .form-group {
	margin-bottom: 1.15rem;
}

/* --------------------------------------------- Service card CTA link ---- */

/* "View details" used to sit inside <ul class="bullet-points"> as an
   unclosed <li>, so it inherited the feature-bullet marker and dashed rule
   and read as just another bullet. It is now a proper call to action,
   pinned to the bottom of the card so all eight line up. */

.module-card .card-body {
	display: flex;
	flex-direction: column;
}

.module-card .card-body .bullet-points {
	flex-grow: 1;
	margin-bottom: 0;
}

/* Selector is doubled up (.card .service-link) because the pages declare
   a `.card a` rule inline, which at (0,1,1) outranks a bare .service-link
   at (0,1,0). That rule used to paint this link teal. */
.service-link,
.card .service-link,
.module-card .service-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	margin-top: 1.1rem;
	padding-bottom: 2px;
	font-size: .93rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--ccsd-navy);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color .2s ease, color .2s ease;
}

.service-link i,
.card .service-link i {
	margin-left: .45rem;
	font-size: .8rem;
	color: var(--ccsd-orange);
	transition: transform .2s ease;
}

.service-link:hover,
.service-link:focus,
.card .service-link:hover,
.card .service-link:focus {
	color: var(--ccsd-navy-dark);
	text-decoration: none;
	border-bottom-color: var(--ccsd-orange);
}

.service-link:hover i,
.service-link:focus i {
	transform: translateX(4px);
}

/* ------------------------------------------- Services carousel dots ----- */

/* Arrows removed in favour of dots alone: the deck autoplays, is swipeable
   on touch, and the arrows sat on top of the cards. Dots match the hero
   indicators so both carousels read the same way. */

.owl-theme .owl-nav {
	display: none;
}

.owl-theme .owl-dots {
	margin-top: 1.75rem;
	text-align: center;
	line-height: 1;
}

.owl-theme .owl-dots .owl-dot {
	outline: 0;
}

.owl-theme .owl-dots .owl-dot span {
	width: 26px;
	height: 4px;
	margin: 0 4px;
	border-radius: 2px;
	background: var(--ccsd-border);
	display: inline-block;
	transition: background .2s ease, width .2s ease;
}

.owl-theme .owl-dots .owl-dot:hover span {
	background: var(--ccsd-orange-dark);
}

.owl-theme .owl-dots .owl-dot.active span {
	background: var(--ccsd-orange);
	width: 34px;
}

.owl-theme .owl-dots .owl-dot:focus-visible span {
	outline: 3px solid var(--ccsd-orange);
	outline-offset: 3px;
}

/* ------------------------------------------------ Text size consistency -- */

/* Six pages carry a template leftover, `.card p { font-size: 0.95rem }`,
   which shrinks every paragraph inside a card and fights the body size set
   above. Bootstrap's `.small` is a PERCENTAGE, so the two compound: a
   `.small` paragraph inside a card landed at roughly 12px next to 17px body
   copy, which reads as a different typeface rather than a smaller one.
   Card paragraphs now inherit the body size, and `.small` is pinned to an
   absolute value so it can never compound again. */

.card p,
.card-body p,
.module-card .card-body p {
	font-size: 1rem;
	line-height: 1.6;
}

.small,
small {
	font-size: .9rem;
	line-height: 1.55;
}

/* Muted text still needs to be readable, not a whisper. */
.text-muted {
	color: var(--ccsd-text-muted) !important;
}

/* A supporting note under a list or card: smaller and quieter, but set off
   with space rather than by shrinking it away. */
.card .text-muted.small,
.card-body .text-muted.small {
	font-size: .9rem;
	color: var(--ccsd-text-muted) !important;
}

/* --------------------------------------------------- Contact page ------- */

.contact-panel {
	background: #fff;
	border: 1px solid var(--ccsd-border);
	border-radius: 10px;
	padding: 2rem;
	height: 100%;
}

.contact-details {
	background: var(--ccsd-navy);
	color: rgba(255, 255, 255, .88);
	border-radius: 10px;
	padding: 2rem;
	height: 100%;
}

.panel-title {
	font-family: 'Roboto Slab', Georgia, serif;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ccsd-navy);
	padding-bottom: .55rem;
	margin-bottom: 1rem;
	border-bottom: 3px solid var(--ccsd-orange);
	display: inline-block;
}

.contact-details .panel-title {
	color: #fff;
}

.contact-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.contact-list li {
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 1.35rem;
	line-height: 1.5;
}

.contact-list i {
	position: absolute;
	left: 0;
	top: .2rem;
	width: 1.5rem;
	text-align: center;
	font-size: 1.1rem;
	color: var(--ccsd-orange);
}

.contact-label {
	display: block;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: rgba(255, 255, 255, .5);
	margin-bottom: .15rem;
}

.contact-details a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(237, 125, 49, .6);
}

.contact-details a:hover,
.contact-details a:focus {
	color: var(--ccsd-orange);
	border-bottom-color: var(--ccsd-orange);
}

.contact-note {
	display: block;
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
	margin-top: .15rem;
}

.contact-closing {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-top: 1.25rem;
	font-style: italic;
	color: rgba(255, 255, 255, .72);
	font-size: .95rem;
}

/* Support cards */
.assist-card {
	background: #fff;
	border: 1px solid var(--ccsd-border);
	border-top: 4px solid var(--ccsd-orange);
	border-radius: 10px;
	padding: 1.9rem 1.5rem;
	height: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease;
}

.assist-card:hover {
	box-shadow: 0 8px 22px rgba(19, 41, 75, .10);
}

.assist-card > i {
	font-size: 2.4rem;
	color: var(--ccsd-orange);
	margin-bottom: 1rem;
}

.assist-card h5 {
	color: var(--ccsd-navy);
	margin-bottom: .6rem;
}

.assist-card p {
	flex-grow: 1;
	margin-bottom: 1rem;
}

.assist-card .service-link {
	align-self: center;
}

/* Map */
.map-side {
	background: var(--ccsd-grey);
	border: 1px solid var(--ccsd-border);
	border-radius: 10px;
	padding: 1.75rem;
	height: 100%;
}

.map-embed {
	position: relative;
	height: 100%;
	min-height: 320px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--ccsd-border);
}

.map-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 991.98px) {
	.map-embed { min-height: 280px; }
}

/* The home page reuses .contact-list on a light background, so the label
   and note colours need to flip from the navy-panel variant. */
.contact-list-light .contact-label {
	color: var(--ccsd-text-muted);
}

.contact-list-light {
	display: inline-block;
	max-width: 100%;
	margin: 0 auto 1.5rem;
	text-align: left;
}

.contact-list-light .contact-note {
	color: var(--ccsd-text-muted);
}

.contact-list-light a {
	color: var(--ccsd-navy);
	font-weight: 600;
}

.contact-list-light a:hover {
	color: var(--ccsd-orange-dark);
}

/* Current-month programme note: fixed at the lower-left so it is visible
   when the homepage opens, with a compact session-persistent collapsed state. */
.monthly-sticky {
	position: fixed;
	left: 18px;
	bottom: 18px;
	z-index: 1025;
	width: min(370px, calc(100vw - 36px));
	background: #fff;
	border: 1px solid #e7d18a;
	border-top: 5px solid var(--ccsd-orange);
	border-radius: 9px;
	box-shadow: 0 12px 34px rgba(19, 41, 75, .24);
	overflow: hidden;
	transition: width .2s ease, box-shadow .2s ease;
}

.monthly-sticky-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem 1rem .65rem;
	background: rgba(255, 255, 255, .48);
}

.monthly-sticky-kicker {
	display: block;
	margin-bottom: .15rem;
	color: var(--ccsd-orange-dark);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.monthly-sticky-head h2 {
	margin: 0;
	color: var(--ccsd-navy);
	font-family: 'Roboto Slab', Georgia, serif;
	font-size: 1.08rem;
	line-height: 1.25;
}

.monthly-sticky-toggle {
	flex: 0 0 2rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ccsd-navy);
	color: #fff;
	cursor: pointer;
}

.monthly-sticky-toggle:hover,
.monthly-sticky-toggle:focus {
	background: var(--ccsd-orange-dark);
	outline: 2px solid rgba(19, 41, 75, .2);
	outline-offset: 2px;
}

.monthly-sticky-body {
	max-height: min(54vh, 430px);
	padding: .25rem 1rem 1rem;
	overflow-y: auto;
}

.monthly-sticky-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .45rem 0 .6rem;
	border-bottom: 1px solid rgba(19, 41, 75, .12);
	font-size: .78rem;
}

.monthly-sticky-status span {
	padding: .18rem .45rem;
	border-radius: 3px;
	background: var(--ccsd-navy);
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

.monthly-sticky-status strong {
	color: var(--ccsd-orange-dark);
	text-align: right;
}

.monthly-sticky-courses {
	list-style: none;
	margin: .7rem 0 .8rem;
	padding: 0;
}

.monthly-sticky-courses li {
	position: relative;
	padding: 0 0 .42rem 1rem;
	font-size: .86rem;
	line-height: 1.35;
}

.monthly-sticky-courses li::before {
	content: "\25B8";
	position: absolute;
	left: 0;
	color: var(--ccsd-orange);
}

.monthly-sticky-courses a {
	color: var(--ccsd-navy);
	text-decoration: none;
}

.monthly-sticky-courses a:hover,
.monthly-sticky-courses a:focus {
	color: var(--ccsd-orange-dark);
	text-decoration: underline;
}

.monthly-sticky-link {
	display: inline-block;
	color: var(--ccsd-navy);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
}

.monthly-sticky-link:hover,
.monthly-sticky-link:focus {
	color: var(--ccsd-orange-dark);
	text-decoration: underline;
}

.monthly-sticky.is-collapsed {
	width: 265px;
}

.monthly-sticky.is-collapsed .monthly-sticky-kicker,
.monthly-sticky.is-collapsed .monthly-sticky-body {
	display: none;
}

.monthly-sticky.is-collapsed .monthly-sticky-head {
	padding-top: .65rem;
	padding-bottom: .65rem;
}

@media (max-width: 575.98px) {
	.monthly-sticky {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
	}

	.monthly-sticky.is-collapsed {
		left: 10px;
		right: auto;
		width: min(265px, calc(100vw - 20px));
	}

	.monthly-sticky-body { max-height: 42vh; }
}

/* Home layout approved in the September reference screenshots. */
.home-welcome { background: var(--ccsd-white); }
.home-commitments { background: var(--ccsd-grey); }

.home-welcome .section-title,
.home-commitments .section-title {
	text-align: center;
}

.home-welcome .section-title::after,
.home-commitments .section-title::after {
	left: 0;
	transform: none;
}

.home-welcome .lead,
.commitments-intro {
	font-size: 1.05rem;
	line-height: 1.75;
}

.home-delivery-list li {
	padding-top: .6rem;
	padding-bottom: .6rem;
	border-bottom: 1px dashed var(--ccsd-border);
}

.home-slogan {
	color: var(--ccsd-navy);
	font-size: 1.05rem;
}

.home-slogan i {
	color: var(--ccsd-orange);
}

.home-choice-card {
	max-width: 360px;
	margin-left: auto;
	margin-right: auto;
}

.home-choice-card .bullet-points li {
	padding-top: .6rem;
	padding-bottom: .8rem;
	border-bottom: 1px dashed var(--ccsd-border);
}

.home-choice-card .bullet-points li:last-child {
	border-bottom: 0;
}

.home-commitments {
	padding-top: 2rem !important;
}

.commitments-intro {
	max-width: 920px;
}

.home-commitments .module-card {
	min-height: 260px;
}

.current-courses {
	padding: 2.75rem 0 2.5rem;
	background: var(--ccsd-navy);
	border-radius: 0 0 10px 0;
}

.current-courses .section-title {
	color: #fff;
	text-align: center;
	margin-bottom: 2rem;
}

.current-courses .section-title::after {
	left: 0;
	transform: none;
}

.current-courses .course-card {
	background: #fff;
	border: 1px solid var(--ccsd-border);
	border-top: 4px solid var(--ccsd-orange);
	border-radius: 8px;
	padding: 1rem;
	height: 100%;
}

.current-courses .course-date {
	color: var(--ccsd-orange-dark);
	font-weight: 700;
}

.current-courses-link {
	text-align: right;
}

#director,
#quote { background-color: var(--ccsd-grey); }

#location,
#contact { background-color: var(--ccsd-white); }

@media (max-width: 767.98px) {
	.home-welcome .section-title,
	.home-commitments .section-title,
	.current-courses .section-title {
		font-size: 1.75rem;
	}

	.current-courses-link { text-align: center; }
}