/* ==========================================================================
   Membergate 2027 theme core
   --------------------------------------------------------------------------
   Loaded by every 2027 theme (themes/_core/top.cfm), after Bootstrap 5 and
   the platform's layoutstyle.css, before the theme's own style.css.

   Every value comes from the --mg-* custom properties written per site from
   its theme settings (cfcs/mgbuilder/themecore.cfc), so this one stylesheet
   serves every theme; each theme's style.css only adds its character.  Class
   names starting mg- are stable hooks for owners' custom CSS.

   Ported from MembergateNext (src/themes/theme-base.css): the base, the
   Bootstrap bridge, the masthead, the off-canvas menu and the footer, adapted
   to the markup Membergate's navigation prints (Bootstrap navbar-nav and
   dropdown-menu).  Membergate's own parts - the sidebars, the breadcrumb and
   headline inside the content, the older platform buttons - follow.
   ========================================================================== */

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

html {
	font-size: var(--mg-base-size, 16px);
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mg-masthead-h, 80px) + 1rem);
}
body.mg-core {
	font-family: var(--mg-font-body);
	background: var(--mg-bg);
	color: var(--mg-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.mg-core h1, .mg-core h2, .mg-core h3, .mg-core h4, .mg-core h5, .mg-core h6,
.mg-core .h1, .mg-core .h2, .mg-core .h3, .mg-core .h4 {
	font-family: var(--mg-font-heading);
	font-weight: var(--mg-heading-weight);
	text-transform: var(--mg-heading-transform);
	letter-spacing: var(--mg-heading-tracking);
	color: var(--mg-local-heading, var(--mg-heading));
	line-height: 1.15;
	text-wrap: balance;
}
.mg-core h1, .mg-core .h1 { font-size: clamp(calc(var(--mg-h1) * .72), 4.2vw, var(--mg-h1)); }
.mg-core h2, .mg-core .h2 { font-size: clamp(calc(var(--mg-h2) * .78), 3.2vw, var(--mg-h2)); }
.mg-core h3, .mg-core .h3 { font-size: clamp(calc(var(--mg-h3) * .85), 2.4vw, var(--mg-h3)); }
.mg-core h4, .mg-core .h4 { font-size: var(--mg-h4); }
.mg-core p { text-wrap: pretty; }
/* Not on buttons: a link styled as a button takes its colours from the button.
   :where() keeps the exclusion from adding weight, so other link rules (the
   listing cards' own colour, a theme's) still win over this one. */
.mg-core a:where(:not(.btn)) { color: var(--mg-local-link, var(--mg-link)); text-underline-offset: .18em; }
.mg-core a:where(:not(.btn)):hover { color: var(--mg-local-link, var(--mg-link-hover)); }
.mg-core ::selection { background: rgba(var(--mg-primary-rgb), .22); }
.mg-core img, .mg-core video { max-width: 100%; }
.mg-core .mg-muted, .mg-core .text-muted { color: var(--mg-local-muted, var(--mg-muted)) !important; }

@media (min-width: 1200px) {
	.mg-core .container, .mg-core .container-lg, .mg-core .container-md,
	.mg-core .container-sm, .mg-core .container-xl, .mg-core .container-xxl { max-width: var(--mg-container); }
}

/* ---- Bootstrap, pointed at the theme -------------------------------------- */

:root, [data-bs-theme] {
	/* Fields need a firmer edge than dividers, or on a dark theme they vanish */
	--mg-input-border: color-mix(in srgb, var(--mg-border) 72%, var(--mg-text));
	--bs-primary: var(--mg-primary); --bs-primary-rgb: var(--mg-primary-rgb);
	--bs-secondary: var(--mg-secondary); --bs-secondary-rgb: var(--mg-secondary-rgb);
	--bs-dark: var(--mg-dark); --bs-dark-rgb: var(--mg-dark-rgb);
	--bs-primary-bg-subtle: var(--mg-primary-soft); --bs-primary-text-emphasis: var(--mg-primary-hover); --bs-primary-border-subtle: var(--mg-primary-soft);
	--bs-body-bg: var(--mg-bg); --bs-body-bg-rgb: var(--mg-bg-rgb);
	--bs-body-color: var(--mg-text); --bs-body-color-rgb: var(--mg-text-rgb);
	--bs-tertiary-bg: var(--mg-surface); --bs-tertiary-bg-rgb: var(--mg-surface-rgb);
	--bs-secondary-bg: var(--mg-surface);
	--bs-emphasis-color: var(--mg-heading); --bs-heading-color: var(--mg-heading);
	--bs-secondary-color: var(--mg-muted);
	--bs-border-color: var(--mg-border);
	--bs-link-color: var(--mg-link); --bs-link-hover-color: var(--mg-link-hover);
	--bs-link-color-rgb: var(--mg-primary-rgb); --bs-link-hover-color-rgb: var(--mg-primary-rgb);
	--bs-body-font-family: var(--mg-font-body); --bs-body-font-size: 1rem;
	--bs-border-radius: var(--mg-radius); --bs-border-radius-sm: var(--mg-radius); --bs-border-radius-lg: var(--mg-radius-md);
	--bs-border-radius-xl: var(--mg-radius-lg); --bs-border-radius-xxl: var(--mg-radius-lg);
	--bs-box-shadow: var(--mg-shadow); --bs-box-shadow-lg: var(--mg-shadow-lg);
	--bs-focus-ring-color: rgba(var(--mg-primary-rgb), .25);
}
.mg-core .btn {
	--bs-btn-border-radius: var(--mg-btn-radius); --bs-btn-font-weight: 600;
	--bs-btn-padding-x: 1.35rem; --bs-btn-padding-y: .65rem;
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking);
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mg-core .btn:not(.btn-link):hover { transform: translateY(-1px); }
.mg-core .btn-sm { --bs-btn-padding-x: .95rem; --bs-btn-padding-y: .45rem; --bs-btn-font-size: .875rem; --bs-btn-border-radius: var(--mg-btn-radius); }
.mg-core .btn-lg { --bs-btn-padding-x: 1.9rem; --bs-btn-padding-y: .9rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: var(--mg-btn-radius); }
.mg-core .btn-primary {
	--bs-btn-bg: var(--mg-primary); --bs-btn-border-color: var(--mg-primary); --bs-btn-color: var(--mg-primary-contrast);
	--bs-btn-hover-bg: var(--mg-primary-hover); --bs-btn-hover-border-color: var(--mg-primary-hover); --bs-btn-hover-color: var(--mg-primary-contrast);
	--bs-btn-active-bg: var(--mg-primary-hover); --bs-btn-active-border-color: var(--mg-primary-hover); --bs-btn-active-color: var(--mg-primary-contrast);
	--bs-btn-disabled-bg: var(--mg-primary); --bs-btn-disabled-border-color: var(--mg-primary); --bs-btn-disabled-color: var(--mg-primary-contrast);
	--bs-btn-focus-shadow-rgb: var(--mg-primary-rgb);
}
.mg-core .btn-secondary {
	--bs-btn-bg: var(--mg-secondary); --bs-btn-border-color: var(--mg-secondary); --bs-btn-color: var(--mg-secondary-contrast);
	--bs-btn-hover-bg: var(--mg-secondary-hover); --bs-btn-hover-border-color: var(--mg-secondary-hover); --bs-btn-hover-color: var(--mg-secondary-contrast);
	--bs-btn-active-bg: var(--mg-secondary-hover); --bs-btn-active-border-color: var(--mg-secondary-hover); --bs-btn-active-color: var(--mg-secondary-contrast);
	--bs-btn-focus-shadow-rgb: var(--mg-secondary-rgb);
}
.mg-core .btn-dark {
	--bs-btn-bg: var(--mg-dark); --bs-btn-border-color: var(--mg-dark); --bs-btn-color: var(--mg-dark-contrast);
	--bs-btn-hover-bg: var(--mg-dark-hover); --bs-btn-hover-border-color: var(--mg-dark-hover); --bs-btn-hover-color: var(--mg-dark-contrast);
}
.mg-core .btn-outline-primary {
	--bs-btn-color: var(--mg-local-link, var(--mg-link)); --bs-btn-border-color: var(--mg-local-outline, var(--mg-primary));
	--bs-btn-hover-bg: var(--mg-primary); --bs-btn-hover-border-color: var(--mg-primary); --bs-btn-hover-color: var(--mg-primary-contrast);
	--bs-btn-active-bg: var(--mg-primary); --bs-btn-active-border-color: var(--mg-primary); --bs-btn-active-color: var(--mg-primary-contrast);
	--bs-btn-focus-shadow-rgb: var(--mg-primary-rgb);
	border-width: 2px;
}
.mg-core .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: #fff; --bs-btn-color: #111827; --bs-btn-hover-bg: rgba(255,255,255,.88); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #111827; }
.mg-core .btn-link { --bs-btn-color: var(--mg-local-link, var(--mg-link)); --bs-btn-hover-color: var(--mg-local-link, var(--mg-link-hover)); text-decoration: none; font-weight: 600; }
html.mg-btn-gradient .btn-primary { background-image: linear-gradient(135deg, var(--mg-primary), var(--mg-secondary)); border-color: transparent; }
html.mg-btn-gradient .btn-primary:hover { background-image: linear-gradient(135deg, var(--mg-primary-hover), var(--mg-secondary-hover)); }
html.mg-btn-outline .btn-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--mg-local-link, var(--mg-link)); border-width: 2px; }
.mg-core .form-control, .mg-core .form-select { border-color: var(--mg-input-border); padding: .65rem .9rem; }
.mg-core .form-check-input:not(:checked) { border-color: var(--mg-input-border); }
.mg-core .form-control:focus, .mg-core .form-select:focus { border-color: rgba(var(--mg-primary-rgb), .55); box-shadow: 0 0 0 .25rem rgba(var(--mg-primary-rgb), .18); }
.mg-core .form-check-input:checked { background-color: var(--mg-primary); border-color: var(--mg-primary); }
.mg-core .form-check-input:focus { border-color: rgba(var(--mg-primary-rgb), .55); box-shadow: 0 0 0 .25rem rgba(var(--mg-primary-rgb), .18); }
.mg-core .form-label { font-weight: 600; color: var(--mg-heading); font-size: .925rem; }
.mg-core .nav-pills { --bs-nav-pills-link-active-bg: var(--mg-primary); --bs-nav-pills-link-active-color: var(--mg-primary-contrast); }
.mg-core .dropdown-menu { --bs-dropdown-link-active-bg: var(--mg-primary); --bs-dropdown-link-active-color: var(--mg-primary-contrast); --bs-dropdown-border-radius: var(--mg-radius-md); --bs-dropdown-border-color: var(--mg-border); --bs-dropdown-bg: var(--mg-bg); --bs-dropdown-link-color: var(--mg-text); --bs-dropdown-link-hover-bg: var(--mg-surface); --bs-dropdown-link-hover-color: var(--mg-heading); }
.mg-core .pagination { --bs-pagination-active-bg: var(--mg-primary); --bs-pagination-active-border-color: var(--mg-primary); --bs-pagination-color: var(--mg-link); }
.mg-core .progress { --bs-progress-bar-bg: var(--mg-primary); }
.mg-core .card { --bs-card-border-radius: var(--mg-radius-md); --bs-card-border-color: var(--mg-border); --bs-card-bg: var(--mg-bg); }
.mg-core .alert { border-radius: var(--mg-radius-md); }

/* The platform's own buttons, from before Bootstrap: submit inputs and
   .mgbutton links in forms, the forum and the shop */
.mg-core .mgbutton:not(.btn), .mg-core .adminbutton:not(.btn) {
	display: inline-block; padding: .6rem 1.25rem; border: 0; border-radius: var(--mg-btn-radius);
	background: var(--mg-primary); color: var(--mg-primary-contrast); font-weight: 600; text-decoration: none;
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking); cursor: pointer;
}
.mg-core .mgbutton:not(.btn):hover, .mg-core .adminbutton:not(.btn):hover { background: var(--mg-primary-hover); color: var(--mg-primary-contrast); }

/* ---- Masthead: top bar and header ------------------------------------------ */

.mg-masthead { position: relative; z-index: 1030; }
/* A sticky header keeps its height when the page scrolls: the top bar simply
   scrolls up out of view (top: minus its height, measured by core.js), and the
   header row stays.  Folding the top bar away instead made the page shorter,
   the browser moved the scroll back under the threshold, the bar came back -
   and the header bounced up and down at the top of the page. */
.mg-masthead.is-sticky { position: sticky; top: calc(var(--mg-topbar-h, 0px) * -1); }
.mg-topbar {
	background: var(--mg-dark); color: rgba(255,255,255,.82); font-size: .825rem;
	padding: .45rem 0; overflow: hidden; max-height: 4rem; transition: max-height .25s ease, padding .25s ease;
}
.mg-topbar a { color: inherit; text-decoration: none; }
.mg-topbar a:hover { color: #fff; }
/* Nothing in the masthead changes height on scroll: even a header fixed over a
   hero would move the page, as the hero pads itself by --mg-masthead-h */

.mg-header {
	background: var(--mg-header-bg); color: var(--mg-header-text);
	border-bottom: 1px solid rgba(var(--mg-text-rgb), .08);
	transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
	--mg-local-link: var(--mg-header-text);
}
.mg-masthead.is-sticky.is-scrolled .mg-header { box-shadow: 0 6px 24px rgba(15, 23, 42, .08); }
.mg-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.75rem; }
.mg-core .mg-logo { display: inline-flex; align-items: center; text-decoration: none; color: inherit; flex-shrink: 0; }
.mg-logo img { width: auto; max-width: 240px; object-fit: contain; }
.mg-wordmark { font-family: var(--mg-font-heading); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; color: var(--mg-header-text); line-height: 1; }
.mg-logo-on-dark { display: none !important; }
.mg-tagline { margin: 0; font-size: .9rem; color: var(--mg-muted); flex: 1; padding-left: 1.5rem; }
.mg-header-actions { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
/* The light/dark button (mode.offer "toggle"): a moon in light mode, a sun in dark */
.mg-mode-toggle { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid color-mix(in srgb, var(--mg-header-text) 22%, transparent); border-radius: 999px; background: transparent; color: var(--mg-header-text); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.mg-mode-toggle:hover { background: color-mix(in srgb, var(--mg-header-text) 10%, transparent); }
.mg-mode-toggle:focus-visible { outline: 2px solid var(--mg-header-link-hover, var(--mg-primary)); outline-offset: 2px; }
.mg-mode-toggle .mg-mode-sun, .mg-mode-toggle.is-dark .mg-mode-moon { display: none; }
.mg-mode-toggle.is-dark .mg-mode-sun { display: block; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-mode-toggle { color: #fff; border-color: rgba(255,255,255,.35); }

/* The site's top navigation (navbar-nav, as a Bootstrap theme prints it) */
.mg-nav-wrap { align-items: center; }
.mg-nav-wrap .navbar-nav { flex-direction: row; align-items: center; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.mg-core .mg-nav-wrap .nav-link {
	display: block; padding: .5rem .85rem; border-radius: var(--mg-radius);
	color: var(--mg-header-text); text-decoration: none; font-weight: 500; font-size: .95rem;
}
/* Hover and open: a colour of the theme's that reads against the header
   (--mg-header-link-hover, worked out in themecore.cfc tokens()) */
.mg-core .mg-nav-wrap .nav-link:hover, .mg-core .mg-nav-wrap .nav-item:focus-within > .nav-link,
.mg-core .mg-nav-wrap .nav-link.show { color: var(--mg-header-link-hover, var(--mg-primary)); }
.mg-nav-wrap .dropdown-toggle::after { border: 0; width: .4em; height: .4em; margin-left: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); opacity: .6; vertical-align: middle; }
/* Bootstrap makes a menu inside .navbar-nav part of the page flow unless the
   bar is a .navbar-expand-*, which the core header is not - so an open menu
   pushed the whole header down.  In the header it floats; in the stacked
   off-canvas list (below) it stays in the flow. */
.mg-nav-wrap .navbar-nav .dropdown-menu { position: absolute; padding: .5rem; min-width: 14rem; box-shadow: var(--mg-shadow-lg); }
.mg-core .mg-nav-wrap .dropdown-item { border-radius: var(--mg-radius); padding: .5rem .75rem; font-size: .925rem; }
/* A menu's items in the menu's own colours.  The core's link rule
   (.mg-core a) is more particular than Bootstrap's .dropdown-item, and in the
   header it carries the header's text colour - pale grey on a white menu under
   a dark header.  Hover, keyboard focus and the current page likewise. */
.mg-core .dropdown-menu .dropdown-item { color: var(--bs-dropdown-link-color); }
.mg-core .dropdown-menu .dropdown-item:hover, .mg-core .dropdown-menu .dropdown-item:focus-visible { color: var(--bs-dropdown-link-hover-color); background-color: var(--bs-dropdown-link-hover-bg); }
.mg-core .dropdown-menu .dropdown-item.active, .mg-core .dropdown-menu .dropdown-item:active { color: var(--bs-dropdown-link-active-color); background-color: var(--bs-dropdown-link-active-bg); }
/* In the header a menu is placed by these rules alone, opened by hover or by
   click.  Bootstrap's Popper otherwise pins a clicked menu with inline styles a
   few pixels from where hover put it, and the two fought as the mouse moved. */
.mg-header .mg-nav-wrap .nav-item.dropdown { position: relative; }
.mg-header .mg-nav-wrap .navbar-nav .dropdown-menu { inset: 100% auto auto 0 !important; transform: none !important; margin: 0 !important; }
.mg-header .mg-nav-wrap .navbar-nav .dropdown-menu-end { inset: 100% 0 auto auto !important; }
/* On a pointer device a menu opens on hover as well as on click */
@media (hover: hover) and (min-width: 992px) {
	.mg-header .mg-nav-wrap .dropdown:hover > .dropdown-menu,
	.mg-header .mg-nav-wrap .dropdown:focus-within > .dropdown-menu { display: block; top: 100%; margin-top: 0; }
	.mg-header .mg-nav-wrap .dropdown:hover > .dropdown-menu-end { right: 0; left: auto; }
}

.mg-menu-button { width: 40px; height: 40px; border: 0; background: transparent; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; padding: 8px; border-radius: var(--mg-radius); color: var(--mg-header-text); }
.mg-menu-button span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }
.mg-menu-button span:nth-child(2) { width: 70%; }

/* Centred: a logo row, then a menu row */
.mg-header--centered .mg-header-row--brand { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 5.5rem; }
.mg-header--centered .mg-header-side--end { justify-self: end; }
.mg-header--centered .mg-header-row--nav { justify-content: center; min-height: 3.25rem; border-top: 1px solid rgba(var(--mg-text-rgb), .08); }
.mg-header--centered .mg-logo { justify-self: center; }

/* Split: the menu on one side of a centred logo, the call to action on the other */
/* Each side is held to its own column.  A menu too long for one line there (a
   member's, an admin's) moves to a row of its own under the logo instead:
   core.js marks the header is-crowded */
.mg-header--split .mg-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.mg-split-start { justify-content: flex-start; min-width: 0; }
.mg-split-start .navbar-nav { gap: 0; }
.mg-core .mg-split-start .nav-link { padding-inline: .6rem; white-space: nowrap; }
.mg-split-end { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.mg-header--split.is-crowded .mg-header-row { grid-template-areas: ". logo end" "nav nav nav"; row-gap: .25rem; }
.mg-header--split.is-crowded .mg-logo { grid-area: logo; }
.mg-header--split.is-crowded .mg-split-end { grid-area: end; }
.mg-header--split.is-crowded .mg-split-start { grid-area: nav; justify-content: center; border-top: 1px solid rgba(var(--mg-text-rgb), .08); }

/* Stacked: a logo row, then the menu in a full-width band */
.mg-navbar-band { background: var(--mg-primary); --mg-header-text: var(--mg-primary-contrast); }
.mg-core .mg-navbar-band .nav-link { color: var(--mg-primary-contrast); border-radius: 0; padding: .9rem 1rem; }
.mg-core .mg-navbar-band .nav-link:hover, .mg-core .mg-navbar-band .nav-item:focus-within > .nav-link { background: rgba(0,0,0,.12); color: var(--mg-primary-contrast); }

/* Minimal: no border; the menu lives in the off-canvas panel */
.mg-header--minimal { border-bottom-color: transparent; }

/* The off-canvas menu (phones and tablets, and the minimal header everywhere) */
.mg-offcanvas { --bs-offcanvas-width: min(380px, 88vw); --bs-offcanvas-bg: var(--mg-bg); --bs-offcanvas-color: var(--mg-text); }
.mg-offcanvas-title { font-family: var(--mg-font-heading); font-weight: 700; font-size: 1.15rem; color: var(--mg-heading); }
.mg-nav-wrap--stacked .navbar-nav { flex-direction: column; align-items: stretch; gap: 0; }
.mg-core .mg-nav-wrap--stacked .nav-link { color: var(--mg-heading); font-size: 1.1rem; padding: .75rem 0; border-bottom: 1px solid var(--mg-border); border-radius: 0; }
.mg-nav-wrap--stacked .dropdown-menu { position: static !important; transform: none !important; float: none; box-shadow: none; border: 0; padding: .25rem 0 .5rem .75rem; min-width: 0; background: transparent; }
.mg-offcanvas-actions .mg-header-actions { flex-direction: column; align-items: stretch; }
.mg-offcanvas-actions .btn { width: 100%; }

/* A full-width page (the home page, or a page set to full width): sections with
   a background already keep their content to the site's width; one without a
   background has no container round it there, so it is given the same width */
.mg-core .mgfullwidth .mg-layout > .mg-section.mg-bg-none > .mg-section-inner { max-width: var(--mg-container, 1180px); margin-left: auto; margin-right: auto; padding-left: 1.25rem; padding-right: 1.25rem; }

/* A page that opens with a full-width section (a page builder section with a
   background; core.js marks the page mg-hero-top): it starts straight under the
   header, without the breadcrumb.  A header that may overlay it (header.transparentOnHero: the
   masthead's can-overlay, and mg-hero-overlay on the page) sits over the hero
   instead, transparent until the page scrolls, and the hero pads itself by the
   header's height. */
html.mg-hero-top .mgcontent > .mgbreadcrumb { display: none; }
html.mg-hero-top .mg-core .mgsectioncontainer { padding-top: 0; }
html.mg-hero-top .mg-core .mg-layout > .mg-section:first-of-type { margin-top: 0; }
html.mg-hero-overlay .mg-masthead.can-overlay { position: fixed; top: 0; left: 0; right: 0; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-header,
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-navbar-band { background: transparent; border-bottom-color: rgba(255,255,255,.14); --mg-header-text: #fff; --mg-local-link: #fff; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-header .nav-link,
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-header .mg-wordmark { color: #fff; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-header .nav-link:hover { color: #fff; opacity: .8; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-topbar { background: rgba(0,0,0,.25) !important; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-header-row--nav { border-top-color: rgba(255,255,255,.14); }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-logo-default { display: none !important; }
html.mg-hero-overlay .mg-masthead.can-overlay:not(.is-scrolled) .mg-logo-on-dark { display: inline-block !important; }
html.mg-hero-overlay .mg-layout > .mg-section--hero:first-of-type > .mg-section-inner { padding-top: calc(var(--mg-masthead-h, 80px) + 1rem); }
.mg-masthead.can-overlay.is-scrolled { animation: mg-drop .25s ease; }
@keyframes mg-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* ---- The page: content and sidebars ----------------------------------------- */

.mg-core .mgsectioncontainer {
	display: flex; align-items: flex-start; gap: 2.5rem;
	padding-top: 2.5rem; padding-bottom: 4rem;
}
.mg-core .mgsectioncontainer > .mgcontent { flex: 1 1 auto; min-width: 0; float: none; width: auto; }
.mg-core .mg-sidebar { flex: 0 0 var(--mg-sidebar-w); width: var(--mg-sidebar-w); min-width: 0; }
@media (max-width: 991.98px) {
	/* Narrow screens: the content first, the sidebars after it */
	.mg-core .mgsectioncontainer { flex-direction: column; gap: 2rem; padding-top: 1.5rem; }
	.mg-core .mgsectioncontainer > .mgcontent { order: 1; width: 100%; }
	.mg-core .mg-sidebar { order: 2; flex-basis: auto; width: 100%; }
}

/* The side navigation: the platform's category panels, as cards */
.mg-core .mg-sidebar nav.left, .mg-core .mg-sidebar nav.right { display: block; width: auto; float: none; }
.mg-core .mg-sidebar .mgnavpanel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.mg-core .mg-sidebar .mgcategory { background: var(--mg-bg); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md); overflow: hidden; }
.mg-core .mg-sidebar .catheader {
	padding: .75rem 1rem; background: var(--mg-surface); color: var(--mg-heading);
	font-family: var(--mg-font-heading); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
	border-bottom: 1px solid var(--mg-border);
}
.mg-core .mg-sidebar .catheader a { color: inherit; text-decoration: none; }
.mg-core .mg-sidebar .catbody { padding: .5rem; }
.mg-core .mg-sidebar .catbody ul { list-style: none; margin: 0; padding: 0; }
.mg-core .mg-sidebar .catbody li a { display: block; padding: .45rem .6rem; border-radius: var(--mg-radius); color: var(--mg-text); text-decoration: none; font-size: .93rem; }
.mg-core .mg-sidebar .catbody li a:hover { background: var(--mg-surface); color: var(--mg-link); }
.mg-core .mg-sidebar .catbody form, .mg-core .mg-sidebar .catbody .input-group { margin: .25rem; }
.mg-core .mg-sidebar .catbody img { max-width: 100%; height: auto; }
/* The panels' own forms (search, newsletter sign-up) predate Bootstrap's
   classes, so their fields and buttons are given the theme's look here */
.mg-core .mg-sidebar input:not([type]), .mg-core .mg-sidebar input[type="text"], .mg-core .mg-sidebar input[type="email"],
.mg-core .mg-sidebar input[type="password"], .mg-core .mg-sidebar input[type="search"],
.mg-core .mg-sidebar select, .mg-core .mg-sidebar textarea {
	display: block; width: 100%; max-width: 100%; margin: .3rem 0; padding: .5rem .7rem;
	border: 1px solid var(--mg-border); border-radius: var(--mg-radius);
	background: var(--mg-bg); color: var(--mg-text); font: inherit; font-size: .9rem;
}
.mg-core .mg-sidebar input[type="text"]:focus, .mg-core .mg-sidebar input[type="email"]:focus,
.mg-core .mg-sidebar input[type="password"]:focus, .mg-core .mg-sidebar input[type="search"]:focus,
.mg-core .mg-sidebar select:focus, .mg-core .mg-sidebar textarea:focus {
	outline: 0; border-color: rgba(var(--mg-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--mg-primary-rgb), .18);
}
.mg-core .mg-sidebar input[type="submit"], .mg-core .mg-sidebar button[type="submit"]:not(.btn) {
	display: block; width: 100%; margin: .4rem 0 .2rem; padding: .5rem 1rem; border: 0; border-radius: var(--mg-btn-radius);
	background: var(--mg-primary); color: var(--mg-primary-contrast); font-weight: 600; font-size: .875rem;
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking); cursor: pointer;
}
.mg-core .mg-sidebar input[type="submit"]:hover, .mg-core .mg-sidebar button[type="submit"]:not(.btn):hover { background: var(--mg-primary-hover); }
html.mg-btn-outline .mg-sidebar input[type="submit"] { background: transparent; color: var(--mg-link); border: 1px solid var(--mg-primary); }

/* ---- Clumps ---------------------------------------------------------------------- */

/* Under a 2027 theme a clump is drawn in the theme's style, not in the colours,
   fonts and background images set on it in the Clump admin (those settings are
   hidden there while a theme is active).  The clump admin writes its styling
   as rules on each clump's own id, which outrank any class, so the properties
   it sets are taken back here with !important.  A headline image is kept: it is
   the clump's content, not its styling. */
.mg-core .mgclump {
	margin: 0 0 2rem; width: 100% !important;
	background: var(--mg-bg) !important; background-image: none !important;
	border: 1px solid var(--mg-border) !important; border-radius: var(--mg-radius-lg);
	box-shadow: var(--mg-shadow); overflow: hidden;
}
.mg-core .mgclump .clumpheader {
	display: flex; align-items: center; gap: .75rem;
	width: auto !important; margin: 0; padding: 1.35rem 1.5rem 0 !important;
	background: transparent !important; background-image: none !important; border: 0 !important;
	color: var(--mg-heading) !important; font-family: var(--mg-font-heading) !important;
}
/* A short accent bar ahead of the headline */
.mg-core .mgclump .clumpheader::before {
	content: ""; flex: 0 0 auto; width: 4px; height: 1.35em; border-radius: 2px; background: var(--mg-primary);
}
.mg-core .mgclump .clumpheader > div, .mg-core .mgclump .clumpheader .txt {
	padding: 0 !important; margin: 0;
	font-family: var(--mg-font-heading) !important; font-size: var(--mg-h4) !important;
	font-weight: var(--mg-heading-weight); line-height: 1.25;
	text-transform: var(--mg-heading-transform); letter-spacing: var(--mg-heading-tracking);
	color: var(--mg-heading) !important;
}
.mg-core .mgclump .clumpheader img { max-height: 3rem; width: auto; }
.mg-core .mgclump .clumpbody {
	width: auto !important; margin: 0; padding: 1.25rem 1.5rem 1.5rem !important;
	background: transparent !important; background-image: none !important; border: 0 !important;
	color: var(--mg-text) !important;
}
.mg-core .mgclump .clumpbody > :last-child { margin-bottom: 0; }
.mg-core .mgclump .mg-listing { margin-bottom: 0; }
/* The clump's own "more" link */
.mg-core .mgclump .clumpbody > div[align="right"], .mg-core .mgclump .clumpbody .mg-listing-more { margin: 1rem 0 0; text-align: right; }
.mg-core .mgclump .clumpbody > div[align="right"] a.more { font-weight: 600; text-decoration: none; }
.mg-core .mgclump .clumpbody > div[align="right"] a.more::after { content: "\2192"; margin-left: .35em; }
/* In a sidebar: tighter, and the headline at panel size */
.mg-core .mg-sidebar .mgclump { box-shadow: none; border-radius: var(--mg-radius-md); margin-bottom: 1.25rem; }
.mg-core .mg-sidebar .mgclump .clumpheader { padding: 1rem 1rem 0 !important; }
.mg-core .mg-sidebar .mgclump .clumpheader > div, .mg-core .mg-sidebar .mgclump .clumpheader .txt { font-size: 1rem !important; }
.mg-core .mg-sidebar .mgclump .clumpbody { padding: .9rem 1rem 1rem !important; }

/* ---- The page title: breadcrumb and headline ----------------------------------- */

.mg-core .mgbreadcrumb { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; margin: 0 0 1.25rem; font-size: .875rem; }
.mg-core .mgbreadcrumblinks { padding: 0; color: var(--mg-muted); }
.mg-core .mgbreadcrumblinks li:not(.breadcrumbpage)::after { content: "/"; margin: 0 .5rem; opacity: .5; }
.mg-core .mgbreadcrumblinks a { color: var(--mg-muted); text-decoration: none; text-transform: capitalize; }
.mg-core .mgbreadcrumblinks a:hover { color: var(--mg-link); }
.mg-core .mgbreadcrumbsearch { float: none; margin: 0; }
.mg-core .mgbreadcrumbsearch form { padding: 0 !important; }
.mg-core .mgbreadcrumbsearch .input-group { flex-wrap: nowrap; }
.mg-core .mgbreadcrumbsearch input { padding: .4rem .75rem; border: 1px solid var(--mg-border) !important; border-right: 0 !important; border-radius: 999px 0 0 999px; font-size: .875rem; background: var(--mg-bg); color: var(--mg-text); }
.mg-core .mgbreadcrumbsearch button { padding: 0 .9rem; border: 1px solid var(--mg-border); border-left: 0; border-radius: 0 999px 999px 0; background: var(--mg-bg); color: var(--mg-muted); }

.mg-core .mgcontent > h1:first-of-type,
.mg-core .mgcontent h1.departmentheadline, .mg-core .mgcontent h1.articleheadline {
	margin: 0 0 1.25rem; font-size: clamp(2rem, 4.4vw, var(--mg-h1));
}
/* Band: the headline on a tinted strip */
html.mg-title-band .mgcontent > h1:first-of-type,
html.mg-title-band .mgcontent h1.departmentheadline, html.mg-title-band .mgcontent h1.articleheadline {
	padding: 1.75rem 2rem; background: var(--mg-surface); border-radius: var(--mg-radius-lg);
	border-left: 4px solid var(--mg-primary);
}
html.mg-title-center .mgcontent > h1:first-of-type,
html.mg-title-center .mgcontent h1.departmentheadline, html.mg-title-center .mgcontent h1.articleheadline,
html.mg-title-center .mgcontent > .lead:first-of-type { text-align: center; margin-inline: auto; }
html.mg-title-center.mg-title-band .mgcontent > h1:first-of-type,
html.mg-title-center.mg-title-band .mgcontent h1.departmentheadline, html.mg-title-center.mg-title-band .mgcontent h1.articleheadline { border-left: 0; border-bottom: 4px solid var(--mg-primary); }
/* A headline with nothing to read (owners sometimes keep only a <style> in it):
   no band.  core.js marks it; :empty catches the truly empty ones. */
.mg-core .mgcontent h1:empty, .mg-core .mgcontent h1.mg-title-empty { display: none !important; }
.mg-core .mgcontent > .lead { font-size: 1.2rem; color: var(--mg-muted); max-width: 46rem; }

/* ---- Platform content ------------------------------------------------------------ */

/* The platform's older fields, buttons and code.  Many platform forms predate
   Bootstrap's classes; under a 2027 theme they take the theme's look.  The
   :where() wrappers give these rules no weight of their own, so any form that
   carries its own styling (the subscription form, the cart) still wins. */
.mg-core :where(.mgcontent, .mg-sidebar, .mg-offcanvas) :where(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], input[type="date"], select, textarea):where(:not(.form-control, .form-select, .form-check-input)) {
	max-width: 100%; height: auto; padding: .5rem .7rem; line-height: 1.4;
	border: 1px solid var(--mg-input-border); border-radius: var(--mg-radius);
	background-color: var(--mg-bg); color: var(--mg-text); font: inherit; font-size: .95rem;
}
.mg-core :where(.mgcontent, .mg-sidebar) :where(input, select, textarea):where(:not(.form-control, .form-select, .form-check-input, [type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="image"], [type="file"], [type="hidden"])):focus {
	outline: 0; border-color: rgba(var(--mg-primary-rgb), .55); box-shadow: 0 0 0 .2rem rgba(var(--mg-primary-rgb), .18);
}
.mg-core :where(.mgcontent, .mg-sidebar) :where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], button[type="button"]):where(:not(.btn, .btn-close, .mg-listing-btn, .mg-listing-view, .mg-listing-dot, .mg-menu-button, .navbar-toggler, .accordion-button, .nav-link)) {
	display: inline-block; padding: .55rem 1.2rem; border: 1px solid var(--mg-primary); border-radius: var(--mg-btn-radius);
	background: var(--mg-primary); color: var(--mg-primary-contrast); font: inherit; font-size: .925rem; font-weight: 600;
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking); cursor: pointer; line-height: 1.4;
}
.mg-core :where(.mgcontent, .mg-sidebar) :where(input[type="submit"], input[type="button"], input[type="reset"], button[type="submit"], button[type="button"]):where(:not(.btn, .btn-close, .mg-listing-btn, .mg-listing-view, .mg-listing-dot, .mg-menu-button, .navbar-toggler, .accordion-button, .nav-link)):hover {
	background: var(--mg-primary-hover); border-color: var(--mg-primary-hover);
}
html.mg-btn-outline :where(.mgcontent, .mg-sidebar) :where(input[type="submit"], input[type="button"], input[type="reset"]):where(:not(.btn)) {
	background: transparent; color: var(--mg-link);
}
.mg-core :where(.mgcontent, .mg-sidebar) :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--mg-primary); }

/* Inline code stays in the line (layoutstyle.css makes every code a block, for
   the platform's copyable command boxes, which keep that) */
.mg-core .mgcontent code:not(.mg-command) {
	display: inline; padding: .1em .35em; border-radius: var(--mg-radius);
	background: var(--mg-surface); color: var(--mg-heading); font-size: .9em;
}
.mg-core .mgcontent pre, .mg-core .mgcontent code.mg-command, .mg-core .mgcontent pre.mg-command {
	background: var(--mg-surface); color: var(--mg-heading); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md);
}

/* Alerts: each tone mixed into the theme's background, so they sit on a dark
   theme as well as a light one */
.mg-core .alert { --bs-alert-color: var(--mg-text); --bs-alert-link-color: var(--mg-heading); border-width: 1px; }
.mg-core .alert-primary { --bs-alert-bg: color-mix(in srgb, var(--mg-primary) 14%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, var(--mg-primary) 40%, var(--mg-bg)); }
.mg-core .alert-secondary { --bs-alert-bg: color-mix(in srgb, var(--mg-secondary) 14%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, var(--mg-secondary) 40%, var(--mg-bg)); }
.mg-core .alert-info { --bs-alert-bg: color-mix(in srgb, #0dcaf0 14%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, #0dcaf0 45%, var(--mg-bg)); }
.mg-core .alert-success { --bs-alert-bg: color-mix(in srgb, #198754 16%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, #198754 45%, var(--mg-bg)); }
.mg-core .alert-warning { --bs-alert-bg: color-mix(in srgb, #ffc107 16%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, #ffc107 50%, var(--mg-bg)); }
.mg-core .alert-danger { --bs-alert-bg: color-mix(in srgb, #dc3545 14%, var(--mg-bg)); --bs-alert-border-color: color-mix(in srgb, #dc3545 45%, var(--mg-bg)); }
.mg-core .table { --bs-table-color: var(--mg-text); --bs-table-bg: transparent; --bs-table-border-color: var(--mg-border); }
.mg-core .card-header { background: var(--mg-surface); border-color: var(--mg-border); }

/* ---- Subscription form, jQuery UI and the LMS --------------------------------- */
/* The order summary sets its text to "initial" (black) with !important */
.mg-core #mgSubscriptionPlan { background: var(--mg-surface) !important; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); }
.mg-core #youpay #yourplan > div, .mg-core #youpay #yourbolton > div, .mg-core #youpay #yourgiftcard > div,
.mg-core #youpay #todayspayment > div, .mg-core #mgSubscriptionPlan h5 { color: var(--mg-heading) !important; }
.mg-core #youpay > #todayspayment { background-color: transparent !important; }

/* The stepped form (form 3) colours itself from theme_color / button_color */
.mg-core #mgSubscriptionProgress .mgStep > div { background: var(--mg-border) !important; }
.mg-core #mgSubscriptionProgress .mgStep.completed > div { background: var(--mg-primary) !important; }
.mg-core #mgSubscriptionProgress .mgStepLast > div { background: transparent !important; }
.mg-core #mgSubscriptionProgress .mgStep > span { background: var(--mg-bg); color: var(--mg-input-border); }
.mg-core #mgSubscriptionProgress .mgStep.inProgress > span { color: var(--mg-primary); }
.mg-core #mgSubscriptionProgress .mgStep.completed > span { background: var(--mg-primary); border-color: var(--mg-primary); color: var(--mg-primary-contrast); }
.mg-core .btnSubscriptionForm.buttons, .mg-core .btnSubscriptionForm.buttons.theme {
	border-radius: var(--mg-btn-radius) !important; border-color: var(--mg-primary) !important;
	background-color: var(--mg-primary); color: var(--mg-primary-contrast);
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking);
}
.mg-core .btnSubscriptionForm.buttons:hover, .mg-core .btnSubscriptionForm.buttons.theme:hover { background-color: var(--mg-primary-hover); color: var(--mg-primary-contrast); }
.mg-core .btnSubscriptionForm.buttons:disabled:hover, .mg-core .btnSubscriptionForm.buttons[disabled]:hover { background-color: var(--mg-primary); }
.mg-core .btnSubscriptionForm.buttons.inverse { background-color: transparent; color: var(--mg-primary); }
.mg-core .btnSubscriptionForm.buttons.inverse:hover { background-color: var(--mg-primary-soft); color: var(--mg-primary); }
.mg-core #mgSubscriptionForm .plan-card .card-header, .mg-core #mgSubscriptionForm .plan-card:hover .card-header { background-color: var(--mg-surface); color: var(--mg-heading); }
.mg-core #mgSubscriptionForm .plan-selected .card-header, .mg-core #mgSubscriptionForm .plan-selected:hover .card-header { background-color: var(--mg-primary); color: var(--mg-primary-contrast); }
.mg-core #mgSubscriptionForm .plan-selected .card-body { background-color: var(--mg-primary-soft); }
.mg-core #mgSubscriptionFormContainer .btn-group-toggle .btn.active, .mg-core #mgSubscriptionFormContainer .btn-check:checked + .btn { border-color: var(--mg-primary); box-shadow: inset 0 0 0 1px var(--mg-primary); }
.mg-core fieldset.mgcartfieldset { background: var(--mg-surface); }
.mg-core :is(#mgSubscriptionForm, #mgSubscriptionFormContainer) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea) { border-color: var(--mg-input-border); border-radius: var(--mg-radius); }
.mg-core .mg-loading-overlay { background-color: rgba(var(--mg-bg-rgb), .75); }

/* jQuery UI widgets (tabs, accordions, datepicker, dialogs) take the theme */
.mg-core .ui-widget { font-family: var(--mg-font-body); font-size: 1em; }
.mg-core .ui-widget-content { background: var(--mg-bg); color: var(--mg-text); border-color: var(--mg-border); }
.mg-core .ui-widget-content a { color: var(--mg-link); }
.mg-core .ui-widget-header { background: var(--mg-surface); color: var(--mg-heading); border-color: var(--mg-border); }
.mg-core .ui-tabs { padding: 0; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: none !important; }
.mg-core .ui-tabs .ui-tabs-nav { margin: 0; padding: .5rem .5rem 0; background: var(--mg-surface); border: 0; border-bottom: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg) var(--mg-radius-lg) 0 0; }
.mg-core .ui-tabs .ui-tabs-nav li { margin: 0 .25rem -1px 0; border-radius: var(--mg-radius) var(--mg-radius) 0 0; }
.mg-core .ui-tabs .ui-tabs-nav li a { padding: .6rem 1rem; font-weight: 600; }
.mg-core .ui-tabs .ui-tabs-panel { padding: 1.25rem; }
.mg-core .ui-state-default, .mg-core .ui-widget-content .ui-state-default { background: transparent; border-color: transparent; color: var(--mg-muted); }
.mg-core .ui-state-default a, .mg-core .ui-state-default a:link { color: var(--mg-muted); }
.mg-core .ui-state-hover, .mg-core .ui-state-default:hover, .mg-core .ui-state-focus { background: var(--mg-primary-soft); border-color: transparent; color: var(--mg-heading); }
.mg-core .ui-state-active, .mg-core .ui-widget-content .ui-state-active, .mg-core .ui-state-active:hover { background: var(--mg-bg); border-color: var(--mg-border); border-bottom-color: var(--mg-bg); color: var(--mg-primary); }
.mg-core .ui-state-active a, .mg-core .ui-state-active a:link { color: var(--mg-primary); }
.mg-core .ui-accordion .ui-accordion-header { padding: .75rem 1rem; margin-top: .5rem; border: 1px solid var(--mg-border); border-radius: var(--mg-radius); }
.mg-core .ui-accordion .ui-accordion-header.ui-state-active { background: var(--mg-primary); border-color: var(--mg-primary); color: var(--mg-primary-contrast); }
.mg-core .ui-accordion .ui-accordion-content { border: 1px solid var(--mg-border); border-top: 0; }
.mg-core .ui-datepicker, .mg-core .ui-dialog { background: var(--mg-bg); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-lg); padding: .5rem; }
.mg-core .ui-datepicker .ui-state-default { text-align: center; border-radius: var(--mg-radius); color: var(--mg-text); }
.mg-core .ui-datepicker .ui-state-highlight { background: var(--mg-primary-soft); color: var(--mg-heading); }
.mg-core .ui-datepicker .ui-state-active { background: var(--mg-primary); border-color: var(--mg-primary); color: var(--mg-primary-contrast); }
.mg-core .ui-corner-all, .mg-core .ui-corner-top, .mg-core .ui-corner-bottom { border-radius: var(--mg-radius); }

/* LMS: cards on the theme's surfaces, not glowing boxes */
.mg-core .mglmstabs, .mg-core .mglmscontainer, .mg-core .mglmscontainer:hover, .mg-core .mglmsbarcontainer, .mg-core .quizContainer {
	background: var(--mg-bg); border: 1px solid var(--mg-border) !important; border-radius: var(--mg-radius-lg); box-shadow: none !important;
}
.mg-core .mglmscontainer:hover { box-shadow: var(--mg-shadow) !important; }
.mg-core .contentGridContainer .contentGrid > div {
	background: var(--mg-surface) !important; border: 1px solid var(--mg-border) !important; border-radius: var(--mg-radius-lg); box-shadow: none !important;
}
.mg-core .contentGridContainer .contentGrid > div a.tease_headline { color: var(--mg-heading) !important; }
.mg-core .contentGridContainer .contentGrid > div a.tease_headline:hover { color: var(--mg-primary) !important; }

/* ---- Forum (CFMBB) ------------------------------------------------------------------ */
/* The forum's colour sheet (members/cfmbb/themes/<name>) is built from the forum
   settings; under a 2027 theme the forum takes the theme's colours instead.  Its
   mobile panel is the older themes' responsive menu - the forum's own link bar
   covers the same ground, and the offcanvas holds the site menu. */
.mg-core .mgresponsivecontainer { display: none !important; }
.mg-core .tableDisplay, .mg-core .tableCol, .mg-core .tableCell, .mg-core .forumSpacer { border-color: var(--mg-border) !important; }
.mg-core .tableDisplay { border-radius: var(--mg-radius-lg); overflow: hidden; }
.mg-core .tableHeader { background: var(--mg-primary) !important; color: var(--mg-primary-contrast) !important; font-weight: 600; }
.mg-core .tableHeader a:not(.button, .btn), .mg-core .tableHeader a:not(.button, .btn):hover { color: var(--mg-primary-contrast) !important; }
.mg-core .tableSubHeader { background: var(--mg-surface) !important; color: var(--mg-heading) !important; font-weight: 600; }
.mg-core .tableRow0, .mg-core .messageCol1, .mg-core .quotedText { background: var(--mg-surface) !important; color: var(--mg-text) !important; }
.mg-core .tableRow1, .mg-core .postContent, .mg-core .postTitle, .mg-core .postSignature, .mg-core .postAwards, .mg-core .postButtons, .mg-core .forumMsg,
.mg-core .recipients li, .mg-core .searchMembersList { background: var(--mg-bg) !important; color: var(--mg-text) !important; border-color: var(--mg-border) !important; }
.mg-core .tableCol, .mg-core div.postContent, .mg-core div.postContent p { color: var(--mg-text) !important; }
.mg-core :where(.tableDisplay, .topMenu, .forumMsg, .postContent, #forumMenu, #navigation, #subscriptionOptions, #sessionData) a:not(.button, .btn),
.mg-core a.searchMemberLink { color: var(--mg-link) !important; }
.mg-core :where(.tableDisplay, .topMenu, .forumMsg, .postContent, #forumMenu, #navigation, #subscriptionOptions, #sessionData) a:not(.button, .btn):hover,
.mg-core a.searchMemberLink:hover { color: var(--mg-link-hover) !important; }
.mg-core .button, .mg-core a.button {
	display: inline-block; padding: .4rem .9rem; border: 1px solid var(--mg-primary); border-radius: var(--mg-btn-radius);
	background: var(--mg-primary) !important; color: var(--mg-primary-contrast) !important; font-weight: 600; font-size: .85rem;
	text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking); text-decoration: none;
}
.mg-core .button:hover, .mg-core a.button:hover { background: var(--mg-primary-hover) !important; color: var(--mg-primary-contrast) !important; }

/* ---- Site search (includes/css/search.css draws it in fixed light greys) -------- */
.mg-core .mgs-hero, .mg-core .mgs-empty-state, .mg-core .mgs-no-results, .mg-core #mgsResultsContainer .searchnotes {
	background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg);
}
.mg-core .mgs-empty-state-icon, .mg-core .mgs-no-results-icon { color: var(--mg-primary) !important; }
.mg-core .mgs-empty-state-body, .mg-core .mgs-no-results-body, .mg-core .mgs-empty-state-body :is(p, li), .mg-core .mgs-no-results-body :is(p, li),
.mg-core #mgsResultsContainer .searchnotes, .mg-core #mgsResultsContainer .searchnotes :is(p, li) { color: var(--mg-muted) !important; }
.mg-core .mgs-filter-select, .mg-core .mgs-sort-select { background-color: var(--mg-bg); border-color: var(--mg-input-border); border-radius: var(--mg-radius); color: var(--mg-text); font-family: inherit; }
.mg-core .mgs-btn-search, .mg-core .mgs-btn-clear-query { color: var(--mg-muted); }
.mg-core .mgs-btn-search:hover, .mg-core .mgs-btn-clear-query:hover { color: var(--mg-primary); }
.mg-core .mgs-sidebar-head { border-bottom-color: var(--mg-heading); }
.mg-core .mgs-sidebar-title, .mg-core a.mgs-acco-trigger, .mg-core .mgs-topic-parent-label { color: var(--mg-heading); }
.mg-core a.mgs-acco-trigger:hover, .mg-core a.mgs-clear-all:hover { color: var(--mg-primary); }
.mg-core a.mgs-clear-all, .mg-core .mgs-acco-arrow, .mg-core .mgs-sort-bar label, .mg-core .mgs-chk-item label { color: var(--mg-muted); }
.mg-core .mgs-acco-item, .mg-core .mgs-sort-bar { border-color: var(--mg-border); }
.mg-core .mgs-topic-parent { background: var(--mg-surface); border-color: var(--mg-border); }
.mg-core .mgs-topic-expand-btn { border-color: var(--mg-border); color: var(--mg-muted); }
.mg-core .mgs-topic-expand-btn:hover { background: var(--mg-primary-soft); color: var(--mg-heading); }
.mg-core #mgsResultsContainer a.mgpagination { background: var(--mg-bg); border-color: var(--mg-border); color: var(--mg-link) !important; border-radius: var(--mg-radius); }
.mg-core #mgsResultsContainer a.mgpagination:hover { background: var(--mg-primary-soft); border-color: var(--mg-primary); }

/* ---- Helpdesk (style.cfc draws it in cream, maroon and black) ------------------- */
.mg-core .helpdeskbanner { background: var(--mg-primary); color: var(--mg-primary-contrast); border-radius: var(--mg-radius) var(--mg-radius) 0 0; font-weight: 600; font-size: .85rem; }
.mg-core .helpdeskbodyouter { border: 1px solid var(--mg-border); border-radius: 0 var(--mg-radius-lg) var(--mg-radius-lg) var(--mg-radius-lg); }
.mg-core .helpdeskbody { background: var(--mg-surface) !important; color: var(--mg-text); }
.mg-core .helpdeskbody span, .mg-core .helpdeskheader span { color: var(--mg-heading); }
.mg-core .helpdeskrow1 { background: var(--mg-bg); }
.mg-core .helpdeskrow0:hover, .mg-core .helpdeskrow1:hover { background: var(--mg-primary-soft); }
.mg-core .helpdeskcell, .mg-core .helpdeskcellleft, .mg-core .helpdeskheadercell { color: var(--mg-text); }
.mg-core .helpdeskbutton { background: var(--mg-primary); color: var(--mg-primary-contrast); border-radius: var(--mg-btn-radius); }
.mg-core .helpdeskbutton:hover { background: var(--mg-primary-hover); color: var(--mg-primary-contrast); }

/* ---- Shop ------------------------------------------------------------------------- */
/* Product pages are generated with the price and cart buttons floated beside the
   headline (|cartbuttons| in the main image slot); the store's colours come from
   the order banner settings.  Here the box becomes a card in the theme's colours. */
.mg-core .mgmainimage:has(.cartbuttons) {
	min-width: 220px; margin: 0 0 1.25rem 1.75rem; padding: 1.1rem 1.25rem !important; text-align: left !important;
	background: var(--mg-surface); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow);
}
.mg-core .cartbuttons { white-space: normal; color: var(--mg-text); line-height: 1.7; }
.mg-core .cartbuttonsform > br:first-child { display: none; }
.mg-core .cartbuttons b { font-weight: 600; color: var(--mg-heading); }
.mg-core font.listprice { color: var(--mg-heading); font-size: 1.15em; font-weight: 700; }
.mg-core .mgcartbuttons { text-align: left; margin-top: .5rem; }
.mg-core .mgcartbuttons span.nostock { color: var(--bs-danger); }
.mg-core .mgcartbuttons span.lowstock { color: var(--bs-warning); }
.mg-core .mgcartbuttons span.highstock { color: var(--bs-success); }
/* The store's and the platform's own button class */
.mg-core .buttons {
	display: inline-block; width: 100%; max-width: 240px; margin: .25rem 0; padding: .6rem 1.1rem;
	background: var(--mg-primary); color: var(--mg-primary-contrast); border: 1px solid var(--mg-primary); border-radius: var(--mg-btn-radius);
	font-family: inherit; font-size: .8rem; font-weight: 600; text-transform: var(--mg-btn-transform); letter-spacing: var(--mg-btn-tracking);
	text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.mg-core .buttons:hover { background: var(--mg-primary-hover); color: var(--mg-primary-contrast); border-color: var(--mg-primary-hover); }
/* Older sidebar forms fix a button width inline, too narrow for the theme's type */
.mg-core .mg-sidebar :is(input[type="submit"], input[type="button"])[style*="width"] { width: auto !important; min-width: 120px; max-width: 100%; }
@media (max-width: 575.98px) {
	.mg-core .mgmainimage:has(.cartbuttons) { float: none !important; margin: 0 0 1.25rem; }
}

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

.mg-footer { background: var(--mg-footer-bg); color: var(--mg-footer-text); padding: 4.5rem 0 2rem; font-size: .95rem; --mg-local-link: var(--mg-footer-text); --mg-local-heading: var(--mg-footer-heading); --mg-header-text: var(--mg-footer-heading); }
.mg-core .mg-footer a:where(:not(.btn)) { color: var(--mg-footer-text); text-decoration: none; }
.mg-core .mg-footer a:where(:not(.btn)):hover { color: var(--mg-footer-heading); }
.mg-footer .mg-wordmark { color: var(--mg-footer-heading); }
.mg-footer-about { margin: 1.25rem 0; max-width: 28rem; line-height: 1.7; }
.mg-core .mg-footer-heading { font-size: .8rem; font-family: var(--mg-font-body); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--mg-footer-heading); margin-bottom: 1.1rem; }
.mg-footer-widget-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.mg-footer-widget-body p:last-child { margin-bottom: 0; }
.mg-footer-widgets { margin-top: 1.5rem; }
.mg-footer-widgets--inline { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.mg-footer-widgets--inline ul { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mg-footer--centered .mg-footer-widget-body ul { align-items: center; }
.mg-footer-bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--mg-footer-border); }
.mg-copyright { margin: 0; font-size: .85rem; opacity: .85; }
.mg-copyright p { margin: 0; }
.mg-footer--simple { padding-top: 3rem; }
.mg-footer-simple-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.mg-footer-cta { background: var(--mg-primary); color: var(--mg-primary-contrast); padding: 4rem 0; }
.mg-core .mg-footer-cta h2 { color: var(--mg-primary-contrast); margin: 0 0 .5rem; }
.mg-footer-cta p { margin: 0; opacity: .85; font-size: 1.1rem; }
.mg-footer-cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
html.mg-btn-gradient .mg-footer-cta { background: linear-gradient(135deg, var(--mg-primary), var(--mg-secondary)); }

/* Social links: the platform's My Social Networks list */
.mg-social .mgsocialnetworkscontainer { margin: 0; }
.mg-social .mgsocialnetworks { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.mg-social .mgsocialnetworks li { margin: 0; }
.mg-core .mg-social .mgsocialnetworks a { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid currentColor; opacity: .75; transition: opacity .15s ease; color: inherit; }
.mg-core .mg-social .mgsocialnetworks a:hover { opacity: 1; }
.mg-social .mgsocialnetworks i { font-size: 1rem !important; width: auto; }
.mg-social .mgsocialnetworks img { width: 1rem; height: 1rem; }
.mg-topbar .mg-social .mgsocialnetworks { margin: 0; gap: .75rem; }
.mg-core .mg-topbar .mg-social .mgsocialnetworks a { width: auto; height: auto; border: 0; }
.mg-footer--centered .mg-social .mgsocialnetworks { justify-content: center; }
.mg-footer--simple .mg-footer-simple-row .mg-social .mgsocialnetworks { margin: 0; }
.mg-offcanvas .mg-social .mgsocialnetworks { margin: 0; }

.mg-contact { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.mg-footer--centered .mg-contact, .mg-footer--simple .mg-contact { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
.mg-footer--centered .mg-contact { justify-content: center; }
.mg-contact i { margin-right: .4rem; opacity: .7; }

/* ---- Small screens and motion ----------------------------------------------------- */

@media (max-width: 991.98px) {
	.mg-header-row { min-height: 4rem; }
	.mg-header--centered .mg-header-row--brand { min-height: 4rem; }
	html.mg-title-band .mgcontent > h1:first-of-type,
	html.mg-title-band .mgcontent h1.departmentheadline, html.mg-title-band .mgcontent h1.articleheadline { padding: 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.mg-core .btn:hover { transform: none; }
}

/* ---- The login page (members/login_responsive.cfm) ----------------------------
   Under a 2027 theme the page prints the login and password forms as two cards
   (.mg-login-cards), without the old header images or the pitch beside them.
   The platform's old table layout is undone here, and its .login rule (3px of
   padding on every field and button of the page) is put right. */
.mg-core .mglogincontainer .mgtable, .mg-core .mglogincontainer .mgtablerow, .mg-core .mglogincontainer .mgtablecell { display: block; width: auto; padding: 0; }
.mg-core .mglogincontainer .mgloginpitch { display: none; }
.mg-core .mg-login-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; margin: .5rem 0 1.5rem; }
.mg-core .mg-login-card { display: flex; flex-direction: column; min-width: 0; padding: 1.75rem; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-lg); background: var(--mg-bg); box-shadow: var(--mg-shadow); }
.mg-core .mg-login-title { margin: 0 0 1.1rem; font-size: 1.35rem; }
.mg-core .mg-login-card .loginbox, .mg-core .mg-login-card .mgloginform, .mg-core .mg-login-card .mgsendpassform { margin: 0; padding: 0; border: 0; background: none; }
.mg-core .mg-login-card .mglostpassmessage p { margin: 0 0 1rem; color: var(--mg-muted); }
/* The message's own bold first line ("Forgotten Password?") repeats the card's title */
.mg-core .mg-login-card .mglostpassmessage p > :is(b, strong):first-child:has(+ br), .mg-core .mg-login-card .mglostpassmessage p > :is(b, strong):first-child + br { display: none; }
.mg-core .mg-login-card input.login[type="text"], .mg-core .mg-login-card input.login[type="password"], .mg-core .mg-login-card input.login[type="email"] {
	display: block; box-sizing: border-box; width: 100%; height: auto; margin: 0 0 .75rem; padding: .65rem .85rem; font-size: 1rem; line-height: 1.5;
	border: 1px solid var(--mg-input-border, var(--mg-border)); border-radius: var(--mg-radius); background: var(--mg-bg); color: var(--mg-text);
}
.mg-core .mg-login-card input.login[type="text"]:focus, .mg-core .mg-login-card input.login[type="password"]:focus { outline: 0; border-color: rgba(var(--mg-primary-rgb), .55); box-shadow: 0 0 0 .25rem rgba(var(--mg-primary-rgb), .18); }
.mg-core .mg-login-card .mglogincell label { display: inline-flex; align-items: center; gap: .5rem; margin: .1rem 0 1.1rem; font-size: .925rem; color: var(--mg-text); }
.mg-core .mg-login-card input.login[type="checkbox"] { width: auto; margin: 0; padding: 0; }
.mg-core .mg-login-card .mgloginbuttons { display: flex; flex-wrap: wrap; gap: .6rem; text-align: left; }
.mg-core .mglogincontainer input.login.btn { margin: 0; padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x); line-height: 1.5; }
.mg-core .mglogincontainer .mgrenewalmessage { color: var(--mg-muted); }
@media (max-width: 767.98px) {
	.mg-core .mg-login-cards { grid-template-columns: 1fr; }
	.mg-core .mg-login-card { padding: 1.35rem; }
}