/* ==========================================================================
   WOCHD custom overrides on top of Cassiopeia (Bootstrap 5)
   Production reference: templates/wchd/css/custom.css (T3 / Bootstrap 3). Values below are copied from it
   where they exist; everything else is eyeballed against worcesterhealth.org.
   Sections: 1 base · 2 header (topnav + mainnav) · 3 subpage chrome · 4 home sections · 5 sidebar · 6 footer
   ========================================================================== */

/* -------------------------------------------------------------------------- 1. Base */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,700');

body,
.wchd-header,
.wchd-header .mod-menu a {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

/* -------------------------------------------------------------------------- 2. Header */
/* Cassiopeia paints .container-header in the primary colour and lays it out as a grid; we take it over completely. */
.wchd-header.container-header {
	display: block;
	background: #fff;
	color: #333;
	padding: 0;
	box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.55);      /* production #t3-topnav box-shadow */
}

/* Row 1: topnav (white). Logo + two-line name left, utility menu + translate right. ~55px like production. */
.wchd-topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	min-height: 55px;
	padding: 0 15px;
	background: #fff;
}
.wchd-topnav-brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wchd-topnav-brand .brand-logo img,
.wchd-topnav-brand .brand-logo .logo {
	height: 55px;                                          /* production .logo-img max-height */
	width: auto;
	max-width: none;
	display: block;
}
.wchd-site-name {
	margin: 0;
	font-size: 15px;                                       /* production .wchd-title */
	font-weight: 700;                                      /* production .wchdfont */
	line-height: 1.25;
	color: #000;
}
.wchd-topnav-utility {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 8px;
	margin-left: auto;
}
/* Header menu (module 279): white tabs, #333 text, 20px/15px padding like production .head-search */
.wchd-topnav-utility ul.mod-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wchd-topnav-utility ul.mod-menu li a {
	display: block;
	padding: 18px 15px;
	background: #fff;
	color: #333;
	font-size: 0.9rem;
	text-decoration: none;
}
.wchd-topnav-utility ul.mod-menu li a:hover,
.wchd-topnav-utility ul.mod-menu li a:focus {
	background: #ccc;
	color: #000;
}
/* "Employment" (menu item 61) is bold maroon on production */
.wchd-topnav-utility ul.mod-menu li.item-61 a {
	color: #97213B;
	font-weight: 700;
	font-size: 1.05em;
}
.wchd-topnav-utility ul.mod-menu li.item-61 a:hover {
	background: #fff;
	text-decoration: underline;
}
/* Google Translate (module 292): compact, far right */
.wchd-topnav-utility .gtranslate_wrapper {
	font-size: 0.85rem;
	line-height: 1;
}
.wchd-topnav-utility .gtranslate_wrapper select {
	font-size: 0.85rem;
	padding: 2px 4px;
}

/* Row 2: mainnav (dark). Search left, menu right. */
.wchd-mainnav {
	position: relative;
	background-color: #1e1e1e;
}
.wchd-navbarcontainer.container-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0 1rem;
	margin: 0 12.5px;                                      /* production .t3-mainnav .container margins */
	padding: 0;
	min-height: 55px;
	background: transparent;
}
.wchd-mainnav-sub .wchd-navbarcontainer.container-nav {
	background: #1e1e1e;
}
/* Home: 400px photo band, the bar sits at its top with a 50% black tint (production body.homepg rules) */
.wchd-mainnav-home {
	height: 400px;
	overflow: hidden;
	background-color: #C8122C;
	background-image: url('/images/homeimages/homebackground.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.wchd-mainnav-home .wchd-navbarcontainer.container-nav {
	background: rgba(0, 0, 0, 0.5);
	margin: 0;
	padding: 0 12.5px;
}
@media (max-width: 991.98px) {
	/* production drops the photo and uses a solid red bar below 992px */
	.wchd-mainnav-home {
		height: auto;
		background-image: none;
	}
	.wchd-mainnav-home .wchd-navbarcontainer.container-nav {
		background: #C8122C;
	}
}

/* Search box (module 315, Smart Search) - production: grey-bordered input + square button, ~25% of the bar */
.wchd-navbarcontainer .container-search {
	flex: 0 0 auto;
	width: 25%;
	min-width: 220px;
	padding: 10px 0;
}
.wchd-navbarcontainer .container-search .mod-finder {
	margin: 0;
}
.wchd-navbarcontainer .container-search label.finder {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.wchd-navbarcontainer .container-search .mod-finder__search {
	display: flex;
}
.wchd-navbarcontainer .container-search input.js-finder-search-query {
	flex: 1 1 auto;
	border: 1px solid grey;
	border-radius: 0;
	font-size: 15px;
	padding: 6px 10px;
	height: 34px;
	min-width: 0;
}
.wchd-navbarcontainer .container-search button {
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid grey;
	border-left: none;
	border-radius: 0;
	background: #C8122C;
	color: #fff;
}
.wchd-navbarcontainer .container-search button:hover,
.wchd-navbarcontainer .container-search button:focus {
	background: #820c1d;
}

/* Main menu (module 281, collapse-metismenu layout): uppercase white links spread across the bar */
.wchd-navbarcontainer nav.navbar {
	flex: 1 1 auto;
	padding: 0;
}
.wchd-navbarcontainer .navbar-collapse {
	width: 100%;
}
.wchd-navbarcontainer ul.mod-menu.metismenu,
.wchd-navbarcontainer ul.mod-menu.nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;                        /* production: space-between across the bar */
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}
.wchd-navbarcontainer ul.mod-menu > li > a,
.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
.wchd-navbarcontainer ul.mod-menu > li > span {
	display: block;
	padding: 0.65rem 0.75rem;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	transition: all 0.4s;
}
.wchd-navbarcontainer ul.mod-menu > li.current > a,
.wchd-navbarcontainer ul.mod-menu > li.active > a {
	color: #ffcc00;
}
.wchd-navbarcontainer ul.mod-menu > li > a:hover,
.wchd-navbarcontainer ul.mod-menu > li > a:focus {
	background: #333;
	color: #ffcc00;
}
/* Cassiopeia's metismenu dropdowns: keep them readable on the dark bar */
.wchd-navbarcontainer ul.mod-menu .mm-collapse,
.wchd-navbarcontainer ul.mod-menu .mm-collapsing {
	background: #fff;
	border: 1px solid #ddd;
	min-width: 220px;
}
.wchd-navbarcontainer ul.mod-menu .mm-collapse li a,
.wchd-navbarcontainer ul.mod-menu .mm-collapse li .nav-header {
	color: #333;
	text-transform: none;
	font-weight: 400;
	text-shadow: none;
	padding: 0.5rem 1rem;
}
.wchd-navbarcontainer ul.mod-menu .mm-collapse li a:hover,
.wchd-navbarcontainer ul.mod-menu .mm-collapse li a:focus {
	background: #f2f2f2;
	color: #820c1d;
}
/* Mobile: hamburger (Cassiopeia .navbar-toggler) white on the dark bar; stack search over the menu */
.wchd-navbarcontainer .navbar-toggler {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
	margin-left: auto;
}
.wchd-navbarcontainer .navbar-toggler .icon-menu::before {
	color: #fff;
}
@media (max-width: 991.98px) {
	.wchd-navbarcontainer.container-nav {
		flex-wrap: wrap;
		padding: 0.5rem 0;
	}
	.wchd-navbarcontainer .container-search {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.25rem 0;
	}
	.wchd-navbarcontainer nav.navbar {
		flex: 0 0 auto;
	}
	.wchd-navbarcontainer .navbar-collapse {
		flex-basis: 100%;
	}
	.wchd-navbarcontainer ul.mod-menu.metismenu {
		flex-direction: column;
		justify-content: flex-start;
	}
	.wchd-navbarcontainer ul.mod-menu > li > a {
		padding: 0.6rem 0.5rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
	.wchd-navbarcontainer ul.mod-menu .mm-collapse {
		background: transparent;
		border: 0;
		padding-left: 1rem;
	}
	.wchd-navbarcontainer ul.mod-menu .mm-collapse li a {
		color: #ddd;
	}
	.wchd-topnav-utility ul.mod-menu li a {
		padding: 10px 10px;
	}
}
@media (max-width: 575.98px) {
	.wchd-topnav {
		padding: 0 10px;
	}
	.wchd-topnav-utility {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
	.wchd-topnav-utility ul.mod-menu li a {
		padding: 8px 8px;
		font-size: 0.85rem;
	}
}

/* -------------------------------------------------------------------------- 3. Subpage chrome */
/* Dark location bar (breadcrumbs) + red page-title band under the header, as on live */
.wchd-locationbar {
	background: #333;
	color: #ddd;
	padding: 0.45rem 1.5rem;
	font-size: 0.9rem;
}
.wchd-locationbar .mod-breadcrumbs,
.wchd-locationbar ol.breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}
.wchd-locationbar .breadcrumb-item + .breadcrumb-item::before {
	color: #bbb;
	content: "/";
	padding: 0 0.35rem;
}
.wchd-locationbar .breadcrumb-item,
.wchd-locationbar .breadcrumb-item a {
	color: #ddd;
	text-decoration: none;
}
.wchd-locationbar .breadcrumb-item a:hover,
.wchd-locationbar .breadcrumb-item a:focus {
	color: #fff;
	text-decoration: underline;
}
.wchd-locationbar .breadcrumb-item.active {
	color: #fff;
}
.wchd-locationbar .mod-breadcrumbs__divider,
.wchd-locationbar .divider {
	color: #bbb;
}
.wchd-locationbar .mod-breadcrumbs__here {
	display: none;
}
.wchd-page-title {
	background: #C8122C;
	border-bottom: 3px solid #820c1d;
	color: #fff;
	padding: 0.9rem 1.5rem 0.9rem 57px;                    /* 57px indent = production #sidebaronetitle */
}
.wchd-page-title h1 {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin: 0;
	text-transform: uppercase;
}
@media (max-width: 767.98px) {
	.wchd-page-title { padding-left: 1rem; text-align: center; }
	.wchd-page-title h1 { font-size: 1.6rem; }
}

/* -------------------------------------------------------------------------- 4. Home sections */
/* Black backdrop behind the homepage slider */
.container-banner {
	background: #1e1e1e;
	padding: 1.5rem 0;
}
/* Section heading bars ("MORE NEWS & EVENTS" / "SOCIAL MEDIA"): full viewport width inside the column-constrained grid */
.wchd-section-banner {
	background: #C8122C;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	padding: 0.6rem 1rem;
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
	border-bottom: 3px solid #820c1d;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
h2.wchd-section-banner {
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
}
/* "INFORMATION" heading above the footer columns - dark band (production #infotitle); footer is already full-width */
.wchd-section-banner-dark {
	background: #1e1e1e;
	border-bottom: 0;
	color: #fff;
	text-align: left;
	padding: 1.25rem 1.5rem;
	width: auto;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
}
/* News + Calendar side by side */
.wchd-news-calendar-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	margin-bottom: 1.5rem;
}
.wchd-news-col h4,
.wchd-calendar-col h4 {
	font-weight: 700;
	border-bottom: 2px solid #981e32;
	padding-bottom: 0.4rem;
	margin-bottom: 1rem;
}
@media (max-width: 767.98px) {
	.wchd-news-calendar-grid {
		grid-template-columns: 1fr;
	}
}
/* Social section: stack banner, icon row (module 185) and Elfsight embeds (module 97) */
.container-bottom-a {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 1rem;
}
.container-bottom-a > .wchd-section-banner,
.container-bottom-a > .card {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
}
#mod-custom185 p {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
}
#mod-custom185 img {
	width: 36px;
	height: 36px;
}
#mod-custom97 {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
}
#mod-custom97 .social-block {
	max-width: 320px;
	flex: 1 1 260px;
}

/* -------------------------------------------------------------------------- 5. Sidebar */
.container-sidebar-left .card {
	margin-bottom: 1.25rem;
}
.container-sidebar-left .card-header {
	background: #981e32;
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
}

/* Programs menu (module 79) - the collapsing department nav.
   Production renders this as Bootstrap 3 dropdowns: 14px/400 Open Sans in brand red,
   10px padding, 40px rows, no caret and no hint that an item has children until you
   click it. We keep production's type and colour and let Cassiopeia's metismenu do
   the expanding, which fixes three things the old menu got wrong:
     - the toggle is its own <button> beside the link, so the parent page stays
       reachable (production put data-toggle on the link itself - the whole reason
       templates/wchd/js/nav-keyboard.js had to exist);
     - there is a visible caret, so users can see which departments have sub-pages;
     - focus stays visible (production sets outline:none, failing SC 2.4.7).
   Cassiopeia supplies .mm-collapse / .mm-collapsing / .mm-toggler:after, but its
   rules are written for the header navbar (absolutely positioned dropdown panels,
   inline-flex links, tinted sub-panels) and several of them are specificity 0,3,x.
   Everything below is scoped under .mod-menu_sidebar and matches or beats that, so
   the header menu is untouched. */
.mod-menu_sidebar.metismenu,
.mod-menu_sidebar.metismenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mod-menu_sidebar.metismenu li,
.mod-menu_sidebar.metismenu .mm-collapse > li {
	position: relative;
	display: block;
	margin: 0;
}
.mod-menu_sidebar.metismenu a,
.mod-menu_sidebar.metismenu .mm-collapse > li > a {
	display: block;
	padding: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #981e32;
	text-decoration: none;
}
.mod-menu_sidebar.metismenu a:hover {
	color: #C8122C;
	background: #f5f5f5;
	text-decoration: underline;
}
.mod-menu_sidebar.metismenu a:focus-visible,
.mod-menu_sidebar.metismenu .mm-toggler:focus-visible {
	outline: 2px solid #981e32;
	outline-offset: -2px;
}
.mod-menu_sidebar.metismenu .current > a {
	font-weight: 600;
	background: #f5f5f5;
	box-shadow: inset 3px 0 0 #981e32;
}

/* Nested levels: a hairline rail plus a small step in, instead of Cassiopeia's
   tinted panels, which stack up and overflow a 300px column by level 3. */
.mod-menu_sidebar.metismenu .mm-collapse,
.mod-menu_sidebar.metismenu .mm-collapse > li.parent > ul,
.mod-menu_sidebar.metismenu .mm-collapse > li > ul {
	position: relative;
	top: 0;
	margin: 0 0 0 10px;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-left: 1px solid #e0e0e0;
	flex-basis: auto;
}
.mod-menu_sidebar.metismenu .mm-collapse > li > a {
	font-size: 13px;
	padding-left: 12px;
}

/* Expand control: parked top-right of its own row so a two-line label cannot push
   it onto a line of its own. 44x40 clears SC 2.5.8 (24x24) without changing the
   40px row height production uses. */
.mod-menu_sidebar.metismenu .deeper > a,
.mod-menu_sidebar.metismenu .mm-collapse > li.deeper > a {
	padding-right: 48px;
}
.mod-menu_sidebar.metismenu .mm-toggler,
.mod-menu_sidebar.metismenu .mm-collapse > li.parent .mm-toggler {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: #981e32;
	cursor: pointer;
}
.mod-menu_sidebar.metismenu .mm-toggler:after {
	margin-inline-start: 0;
	border-top-width: 6px;
	border-left-width: 6px;
	border-right-width: 6px;
}
.mod-menu_sidebar.metismenu .mm-toggler:hover {
	color: #C8122C;
	background: #f5f5f5;
}
@media (prefers-reduced-motion: reduce) {
	.mod-menu_sidebar.metismenu .mm-toggler:after,
	.mod-menu_sidebar.metismenu .mm-collapsing {
		transition: none;
	}
}

/* -------------------------------------------------------------------------- 6. Footer */
/* Three columns (About / Alerts / Service) on dark grey, then a thin red bar for Log In / Sitemap */
footer.container-footer {
	padding: 0;
}
.wchd-footer-columns {
	background: #3d3d3d;
	padding: 2rem 1.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}
.wchd-footer-col h3 {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	border-bottom: 2px solid #666;
	padding-bottom: 0.4rem;
}
.wchd-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.wchd-footer-col li {
	margin-bottom: 0.5rem;
}
.wchd-footer-col a {
	color: #ddd;
	text-decoration: none;
}
.wchd-footer-col a:hover {
	color: #fff;
	text-decoration: underline;
}
.wchd-footer-bottom {
	background: #C8122C;
	padding: 0.5rem 1.5rem;
}
.wchd-footer-bottom ul.mod-menu {
	list-style: none;
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
.wchd-footer-bottom ul.mod-menu a {
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}
.wchd-footer-bottom ul.mod-menu a:hover {
	text-decoration: underline;
}
@media (max-width: 767.98px) {
	.wchd-footer-columns {
		grid-template-columns: 1fr;
	}
}

/* Cassiopeia adds margin-top to nav elements inside .container-header; keep the bar tight */
.wchd-header.container-header nav,
.wchd-header.container-header .container-nav nav,
.wchd-header.container-header .container-nav .container-search {
	margin-top: 0;
}

/* Fit all 8 top-level items on one 55px row at desktop widths (production: 13px-ish, tight padding, no wrap) */
@media (min-width: 992px) {
	.wchd-navbarcontainer .container-search {
		flex: 0 1 25%;
		min-width: 200px;
	}
	.wchd-navbarcontainer ul.mod-menu.metismenu,
	.wchd-navbarcontainer ul.mod-menu.nav {
		flex-wrap: nowrap;
	}
	.wchd-navbarcontainer ul.mod-menu > li > a,
	.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
	.wchd-navbarcontainer ul.mod-menu > li > span {
		font-size: 0.8rem;
		padding: 0.65rem 0.5rem;
		white-space: nowrap;
	}
}
@media (min-width: 1300px) {
	.wchd-navbarcontainer ul.mod-menu > li > a,
	.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
	.wchd-navbarcontainer ul.mod-menu > li > span {
		font-size: 0.85rem;
		padding: 0.65rem 0.75rem;
	}
}
/* Cassiopeia underlines the active top-level item; production doesn't */
.wchd-navbarcontainer ul.mod-menu > li.active > a,
.wchd-navbarcontainer ul.mod-menu > li.current > a,
.wchd-navbarcontainer ul.mod-menu > li > a:hover,
.wchd-navbarcontainer ul.mod-menu > li > a:focus {
	border-bottom: 0;
	box-shadow: none;
}

/* Cassiopeia draws a white bar under the active/hovered top-level item via ::after (and underlines it below 992px);
   production has neither - the yellow text is the only active indicator. */
.wchd-header.container-header .metismenu > li > a:after,
.wchd-header.container-header .metismenu > li > a:hover:after,
.wchd-header.container-header .metismenu > li.active > a:after,
.wchd-header.container-header .metismenu > li > button:before,
.wchd-header.container-header .metismenu > li > button:hover:before,
.wchd-header.container-header .metismenu > li.active > button:before,
.wchd-header.container-header .mod-menu > li.active:after,
.wchd-header.container-header .mod-menu > li:hover:after {
	display: none;
	background: none;
}
.wchd-header.container-header .mod-menu > li.active > a,
.wchd-header.container-header .mod-menu > li.active > span,
.wchd-header.container-header .mod-menu > li > a:hover {
	text-decoration: none;
}

/* ---- Header fine-tuning from live measurements at 1400px (Jeremy feedback 2026-09-03) ----
   live: topnav 59px, box-shadow rgba(0,0,0,.75) -10px -10px 10px 10px (reads as a faded line under the white bar);
         utility links 14px/400 padding 20px 15px; Employment 16.8px/700;
         nav links 14px/400 uppercase, 55px tall; search container 272px, input 238x34 (padding 6px 12px, 1px grey),
         button 34x34 light grey #efefef with a 12px #444 icon. */
.wchd-header.container-header {
	box-shadow: none;
}
.wchd-topnav {
	position: relative;
	z-index: 2;                                            /* keep the shadow above the dark bar */
	min-height: 59px;
	box-shadow: rgba(0, 0, 0, 0.75) -10px -10px 10px 10px;
}
.wchd-topnav-utility ul.mod-menu li a {
	padding: 20px 15px;
	font-size: 14px;
	font-weight: 400;
}
.wchd-topnav-utility ul.mod-menu li.item-61 a {
	font-size: 16.8px;
	font-weight: 700;
}
.wchd-site-name {
	font-size: 14px;
	font-weight: 700;
}
/* nav links: regular weight, 14px, 55px tall */
.wchd-navbarcontainer ul.mod-menu > li > a,
.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
.wchd-navbarcontainer ul.mod-menu > li > span {
	font-weight: 400;
	text-shadow: none;
}
@media (min-width: 992px) {
	.wchd-navbarcontainer.container-nav {
		min-height: 57px;
	}
	.wchd-navbarcontainer ul.mod-menu > li > a,
	.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
	.wchd-navbarcontainer ul.mod-menu > li > span {
		font-size: 14px;
		padding: 18px 0.5rem;
		line-height: 19px;
	}
	/* search: fixed 272px like production, no shrinking */
	.wchd-navbarcontainer .container-search {
		flex: 0 0 272px;
		width: 272px;
		min-width: 272px;
		padding: 10px 0 12.5px;
	}
}
@media (min-width: 1300px) {
	.wchd-navbarcontainer ul.mod-menu > li > a,
	.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
	.wchd-navbarcontainer ul.mod-menu > li > span {
		font-size: 14px;
		padding: 18px 0.5rem;
	}
}
.wchd-navbarcontainer .container-search input.js-finder-search-query {
	padding: 6px 12px;
	border: 1px solid rgb(128, 128, 128);
	background: #fff;
	color: #333;
}
.wchd-navbarcontainer .container-search button,
.wchd-navbarcontainer .container-search button.btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid rgb(128, 128, 128);
	border-left: none;
	border-radius: 0;
	background: #efefef;
	color: #444;
	line-height: 1;
}
.wchd-navbarcontainer .container-search button:hover,
.wchd-navbarcontainer .container-search button:focus {
	background: #ddd;
	color: #000;
}
.wchd-navbarcontainer .container-search button i,
.wchd-navbarcontainer .container-search button .fas,
.wchd-navbarcontainer .container-search button [class^="icon-"] {
	font-size: 12px;
	line-height: 1;
	display: block;
	margin: 0;
}

/* Row heights to production: topnav 59px, mainnav bar 57px */
@media (min-width: 992px) {
	.wchd-navbarcontainer.container-nav {
		height: 57px;
		min-height: 57px;
		overflow: visible;                                   /* dropdowns must escape the bar */
	}
	.wchd-navbarcontainer nav.navbar,
	.wchd-navbarcontainer .navbar-collapse,
	.wchd-navbarcontainer ul.mod-menu.metismenu {
		margin: 0;
		padding: 0;
	}
	/* search input fills the 272px container (production input 238px + 34px button) */
	.wchd-navbarcontainer .container-search .mod-finder,
	.wchd-navbarcontainer .container-search .mod-finder__search {
		width: 100%;
	}
	.wchd-navbarcontainer .container-search input.js-finder-search-query {
		width: 100%;
	}
}
/* Google Translate in the topnav: dropdown only (the flag strip made the white bar 73px instead of 59px) */
.wchd-topnav-utility .gtranslate_wrapper a.glink,
.wchd-topnav-utility .gtranslate_wrapper .gt_container--hich1k a,
.wchd-topnav-utility .gtranslate_wrapper img {
	display: none;
}
.wchd-topnav-utility .gtranslate_wrapper select,
.wchd-topnav-utility .gtranslate_wrapper .gt_selector {
	display: inline-block;
	margin: 0;
	height: 30px;
	font-size: 13px;
	padding: 2px 6px;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
}
.wchd-topnav {
	height: 59px;
	min-height: 59px;
	flex-wrap: nowrap;
}
@media (max-width: 767.98px) {
	.wchd-topnav {
		height: auto;
		flex-wrap: wrap;
	}
}

/* GTranslate injects a <br> between the (hidden) flags and the dropdown - it was pushing the select below the bar */
.wchd-topnav-utility .gtranslate_wrapper br {
	display: none;
}
.wchd-topnav-utility .gtranslate_wrapper {
	display: flex;
	align-items: center;
	height: 59px;
}
/* Search input must fill the 272px container: force every wrapper to full width */
@media (min-width: 992px) {
	.wchd-navbarcontainer .container-search form.mod-finder {
		display: block;
		width: 100%;
	}
	.wchd-navbarcontainer .container-search .mod-finder__search.input-group {
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
	}
	.wchd-navbarcontainer .container-search input.js-finder-search-query {
		flex: 1 1 0%;
		width: 100%;
		max-width: none;
	}
}

/* Smart Search wraps the input in an inline-block .awesomplete div (autosuggest); make it the flexible column */
.wchd-navbarcontainer .container-search .awesomplete {
	display: block;
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
}
.wchd-navbarcontainer .container-search .awesomplete > input {
	width: 100%;
}

/* keep the utility links inside the 59px white bar (20px padding overflowed by 7px top/bottom) */
.wchd-topnav-utility ul.mod-menu li a {
	padding-top: 18px;
	padding-bottom: 18px;
	line-height: 23px;
}

/* ==========================================================================
   7. Typography + home sections, from live measurements at 1400px (Jeremy feedback 2026-09-03 15:22)
   live: body Open Sans 14px/400 #444 lh 20px; ALL headings weight 300; section bars full-width 77px,
         h2 35px/300 uppercase left with 57px indent (red #C8122C for news/social, #1e1e1e for information);
         "Latest News / Calendar / Trending Now" h3 24px/300 #444, 1px #1e1e1e rule + 4px x 30% dark accent;
         footer h3 24px/300 white centred; news item titles h4 18px/300; social icons 50px inline.
   ========================================================================== */
body {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #444;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-header,
.page-header h1, .page-header h2,
.item-page h1, .item-page h2,
.blog h2, .blog-featured h2,
.article-info,
.mod-articles-news h4 {
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: 300;
}
/* Cassiopeia sets --cassiopeia-font-weight-headings: 700 on the root; neutralise it too */
:root {
	--cassiopeia-font-weight-headings: 300;
	--cassiopeia-font-weight-normal: 400;
}
strong, b { font-weight: 700; }

/* Section bars: full viewport width, left-aligned light uppercase 35px, 57px indent, 77px tall */
.wchd-section-banner,
h2.wchd-section-banner,
.wchd-section-banner-dark {
	display: block;
	background: #C8122C;
	color: #fff;
	text-align: left;
	text-transform: uppercase;
	text-indent: 57px;
	font-size: 35px;
	font-weight: 300;
	letter-spacing: normal;
	line-height: 38.5px;
	margin: 0 0 1rem 0;
	padding: 20px 0 17px;                                   /* 20 top + 38.5 line + 17 = ~77px like live */
	border: 0;
	/* pull to full viewport width inside the column-constrained grid */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
h2.wchd-section-banner {
	font-size: 35px;
	letter-spacing: normal;
	text-transform: uppercase;
	margin: 0 0 1rem 0;
	margin-left: -50vw;
	margin-right: -50vw;
}
/* The Information bar lives in the already full-width footer: same look, no viewport pull */
.wchd-section-banner-dark,
h2.wchd-section-banner.wchd-section-banner-dark {
	background: #1e1e1e;
	width: auto;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}
@media (max-width: 767.98px) {
	.wchd-section-banner, h2.wchd-section-banner, .wchd-section-banner-dark {
		text-indent: 0;
		text-align: center;
		font-size: 26px;
		line-height: 30px;
		padding: 16px 0 14px;
	}
}

/* 24px light section headings with the dark rule + short accent (live .text-left / h3.text-left:before) */
.wchd-h3,
.wchd-news-col h3, .wchd-calendar-col h3 {
	position: relative;
	overflow: hidden;
	font-size: 24px;
	font-weight: 300;
	color: #444;
	text-align: left;
	text-transform: none;
	line-height: 26.4px;
	margin: 20px 0 10px;
	padding: 0 0 1em;
	border-bottom: 1px solid #1e1e1e;
}
.wchd-h3::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 4px;
	width: 30%;
	background: #1e1e1e;
}
/* News + Calendar: live is a 4/8 split with the news column indented 10% */
.wchd-news-calendar-grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 2rem;
	padding: 0 0 0 10%;
}
.wchd-news-col .mod-articles-news h4,
.wchd-news-col h4 {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.3;
}
.wchd-news-col .card,
.wchd-calendar-col .card {
	border: 0;
	box-shadow: none;
}
.wchd-news-col .card-body,
.wchd-calendar-col .card-body {
	padding: 0;
}
@media (max-width: 767.98px) {
	.wchd-news-calendar-grid { grid-template-columns: 1fr; padding: 0; }
}

/* Social section: "Trending Now" heading, 50px icon row, embeds spread across (live: four col-3 blocks) */
.container-bottom-a {
	padding: 0 10% 1rem 20px;
}
.container-bottom-a > .wchd-section-banner {
	margin-left: calc(-50vw + 0px);
}
.wchd-trending-title {
	width: 100%;
}
.container-bottom-a .card {
	border: 0;
	box-shadow: none;
}
.container-bottom-a .card-body {
	padding: 0;
}
#mod-custom185 p {
	gap: 4px;
	margin: 10px 0 20px;
}
#mod-custom185 img {
	width: 50px;
	height: 50px;
}
#mod-custom97 {
	justify-content: flex-start;
	gap: 0;
}
#mod-custom97 .social-block {
	flex: 0 0 25%;
	max-width: 25%;
	padding: 0 8px;
	box-sizing: border-box;
}
@media (max-width: 991.98px) {
	#mod-custom97 .social-block { flex: 0 0 50%; max-width: 50%; }
	.container-bottom-a { padding: 0 20px 1rem; }
}
@media (max-width: 575.98px) {
	#mod-custom97 .social-block { flex: 0 0 100%; max-width: 100%; }
}

/* Footer column headings: 24px light, white, centred, no rule (live #about h3 etc.) */
.wchd-footer-col h3 {
	font-size: 24px;
	font-weight: 300;
	color: #fff;
	text-align: center;
	border-bottom: 0;
	padding: 0 0 20px;
	margin: 20px 0 10px;
}
.wchd-footer-col ul,
.wchd-footer-col li {
	text-align: center;
}
/* Sidebar card titles: light weight too (live module titles are h3 at weight 300) */
.container-sidebar-left .card-header {
	font-weight: 300;
	font-size: 18px;
	text-transform: none;
}

/* Section bars are now direct .full-width children of .site-grid (see index.php) - no viewport-pull hacks needed */
.site-grid > .wchd-section-banner.full-width,
.site-grid > h2.wchd-section-banner.full-width {
	width: auto;
	left: auto;
	right: auto;
	margin: 0;
	position: static;
	grid-column: full-start / full-end;
}
.site-grid > .wchd-section-banner.full-width + .grid-child {
	margin-top: 1rem;
}
.container-bottom-a > .wchd-section-banner {
	margin-left: 0;
}

/* Full-width home sections: the containers span full-start/full-end (row still comes from Cassiopeia's grid-area),
   the red bar runs edge to edge inside them, and an inner wrapper carries the content padding. */
.site-grid > .container-bottom-a,
.site-grid > .wchd-home-component {
	grid-column: full-start / full-end;
	padding: 0;
}
.container-component .wchd-section-banner,
.container-bottom-a .wchd-section-banner,
h2.wchd-section-banner {
	width: auto;
	position: static;
	left: auto;
	right: auto;
	margin: 0 0 1rem 0;
}
.wchd-social-inner {
	padding: 0 10% 1rem 20px;
}
.wchd-home-component .wchd-news-calendar-grid {
	padding: 0 2.5% 0 10%;
}
.wchd-home-component > main {
	display: none;
}

/* Cassiopeia pins .container-component to main-start/main-end via body:not(.has-sidebar-*) selectors (0,3,1);
   out-specify them so the Home component container spans the full grid and its red bar runs edge to edge. */
body.site .site-grid > .container-component.wchd-home-component {
	grid-column: full-start / full-end;
}

/* ==== Side-by-side pass vs live at 1920px (2026-09-03 15:40). Each block names the live value it matches. ==== */

/* Main menu: live <li> has no padding, margin-left 10px, 14px; <a> has no padding and line-height 55px.
   Cassiopeia's metismenu was giving <li> 8.8px 17.6px padding + 17.6px font, which made the whole menu look bigger. */
.wchd-navbarcontainer ul.mod-menu.metismenu > li,
.wchd-navbarcontainer ul.mod-menu > li.metismenu-item {
	padding: 0;
	margin: 0 0 0 10px;
	font-size: 14px;
	line-height: 20px;
}
@media (min-width: 992px) {
	.wchd-navbarcontainer ul.mod-menu > li > a,
	.wchd-navbarcontainer ul.mod-menu > li > .nav-header,
	.wchd-navbarcontainer ul.mod-menu > li > span {
		padding: 0 4px;
		line-height: 55px;
		font-size: 14px;
	}
	/* search container: live is ~19.7% of the bar (376px at 1920, 272px at 1400) */
	.wchd-navbarcontainer .container-search {
		flex: 0 0 19.75%;
		width: 19.75%;
		min-width: 272px;
	}
}
/* search text/placeholder: live input colour #666, placeholder #999 */
.wchd-navbarcontainer .container-search input.js-finder-search-query {
	color: #666;
}
.wchd-navbarcontainer .container-search input.js-finder-search-query::placeholder {
	color: #999;
	opacity: 1;
	font-weight: 400;
}
.wchd-site-name {
	line-height: 20px;
}

/* News + calendar columns: live is a 4/8 grid over the full width; news column padded 10% left / 20px right,
   calendar column 20px each side */
.wchd-home-component .wchd-news-calendar-grid,
.wchd-news-calendar-grid {
	grid-template-columns: 1fr 2fr;
	gap: 0;
	padding: 0;
}
.wchd-news-col {
	padding: 0 20px 0 10%;
}
.wchd-calendar-col {
	padding: 0 20px;
}
/* news item title: 18px/300 #444, margin 10px 0, no underline rule */
.wchd-news-col h4,
.wchd-news-col .mod-articles-news h4 {
	color: #444;
	margin: 10px 0;
	padding: 0;
	line-height: 1.1;
	border-bottom: 0;
}
.wchd-news-col p {
	color: #444;
	margin: 0 0 10px;
}
/* "Read more" button: live is Bootstrap 3 btn-default - 14px, 6px 12px, #ccc border, #333 text */
.wchd-news-col .readmore a.btn,
.wchd-news-col a.btn,
.wchd-news-col a.btn-secondary {
	font-size: 14px;
	line-height: 20px;
	padding: 6px 12px;
	color: #333;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-decoration: none;
}
.wchd-news-col a.btn:hover,
.wchd-news-col a.btn:focus {
	background: #e6e6e6;
	border-color: #adadad;
	color: #333;
}

/* Slider band: live has no vertical padding */
.container-banner {
	padding: 0 20px;
	margin-bottom: 0;
}

/* Footer columns: live has no side padding, centered text, links as 10px 15px blocks */
.wchd-footer-columns {
	padding: 20px 0 32px;
	gap: 0;
}
.wchd-footer-col {
	text-align: center;
}
.wchd-footer-col h3 {
	line-height: 26.4px;
	border-bottom: 0;
	margin: 20px 0 10px;
	padding: 0 0 20px;
}
.wchd-footer-col li {
	margin: 0;
}
.wchd-footer-col a {
	display: block;
	padding: 10px 15px;
	color: #fff;
}
/* Footer bottom bar (Log In / Sitemap): live is 40px top / 80px bottom, 12px links */
.wchd-footer-bottom {
	padding: 40px 0 80px 20%;
}
.wchd-footer-bottom ul.mod-menu {
	gap: 0;
}
.wchd-footer-bottom ul.mod-menu a {
	display: inline-block;
	font-size: 12px;
	line-height: 17px;
	padding: 10px 15px;
}
@media (max-width: 991.98px) {
	.wchd-footer-bottom { padding: 20px 15px 30px; }
	.wchd-news-col { padding: 0 15px; }
	.wchd-calendar-col { padding: 0 15px; }
}

/* Live's #latest padding-left is 10% of the full row (190px at 1920); our column is 1/3 of the row, so 30% of the column */
@media (min-width: 992px) {
	.wchd-news-col {
		padding: 0 20px 0 30%;
	}
}

/* Footer bottom links side by side (Cassiopeia's .mod-menu defaults to flex-direction: column) */
.wchd-footer-bottom ul.mod-menu {
	flex-direction: row;
	align-items: center;
}
.wchd-footer-bottom ul.mod-menu > li {
	display: block;
	width: auto;
	margin: 0;
}

/* -------------------------------------------------------------------------- 7. Back to top
   Parity with production's #back-to-top (red button, bottom-right, appears after 300px of scroll).
   Cassiopeia toggles a `.visible` class and animates opacity, so we style that mechanism rather than display.
   Two production bugs deliberately NOT copied:
     - production sets `outline: none` on it (fails WCAG 2.4.7 Focus Visible)
     - production hides it below 992px (`hidden-xs hidden-sm`), which is where it helps most
   Target is 44x44 (WCAG 2.5.8 Target Size minimum is 24x24). Focus handling is in js/template.js. */
.back-to-top-link {
	position: fixed;
	inset-inline-end: 20px;
	right: 20px;
	bottom: 40px;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid #820c1d;
	border-radius: 4px;
	background-color: #C8122C;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	opacity: 0;
	pointer-events: none;              /* not clickable or tabbable while hidden */
	visibility: hidden;
	transition: opacity 0.2s ease-in, visibility 0.2s;
}
.back-to-top-link.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: all;
}
.back-to-top-link:hover {
	background-color: #820c1d;
	color: #fff;
	border-color: #820c1d;
}
/* Visible focus ring - production removes this, we keep it */
.back-to-top-link:focus,
.back-to-top-link:focus-visible {
	outline: 3px solid #ffcc00;
	outline-offset: 2px;
	background-color: #820c1d;
	color: #fff;
	border-color: #fff;
}
.back-to-top-link .icon-arrow-up::before {
	font-size: 18px;
	line-height: 1;
}
@media (max-width: 575.98px) {
	.back-to-top-link { right: 12px; inset-inline-end: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.back-to-top-link { transition: none; }
}

/* -------------------------------------------------------------------------- Pagination */
/* Bootstrap 5 .pagination is a non-wrapping flex row (BS3 on live used wrapping inline-blocks). With a 10-page
   list on /news it ran 143px past the viewport at 375px and the whole page scrolled sideways. Let it wrap. */
.pagination {
	flex-wrap: wrap;
	row-gap: 4px;
}