/*
 * Caruth Police Institute project page — Claude Design "CPI Project Page"
 * (design/reference/handoff-2026-10-19). Values are the design's, with its token overrides
 * that match the live main-new.css. Page layout only; see mmhpi-design-system for tokens/components.
 */


/* Tokens, fonts and shared components come from the MMHPI Design System plugin (mmhpi-ds). */
.cpi {
	font-family: var(--font-sans);
	color: var(--fg-default);
	background: #fff;
	/* The site header is fixed; cpi.js sets --cpi-header-h to its real height and --cpi-header-pad
	   to the part of it the theme has not already made room for (phones: none). */
	padding-top: var(--cpi-header-pad, var(--cpi-header-h, 89px));
}
.cpi *, .cpi *::before, .cpi *::after { box-sizing: border-box; }
.cpi a { color: var(--brand-700); }
.cpi a:hover { color: #3b7cb5; }
/* The theme's breadcrumb keeps the theme's own link style (as on every project page). */
.cpi .custom-breadcrumbs a { color: #b1b1b1; text-decoration: underline; }
.cpi .custom-breadcrumbs a:hover { color: #777; }
.cpi .custom-breadcrumbs { margin-bottom: 20px; }
.cpi p { font-family: var(--font-sans); }
.cpi img { max-width: 100%; }
.cpi ::selection { background: #c4c4c4; }
.cpi .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Breadcrumbs */

/* Layout */
.cpi-layout { max-width: 1240px; margin: 0 auto; padding: 34px 32px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 52px; align-items: start; }
.cpi-main { min-width: 0; }
/* With the share + tags column (CPI page): left column on wide screens, like project pages;
   under the content next to the sidebar on medium screens; after the content on phones. */
.cpi-layout:has(> .cpi-share) { grid-template-areas: "main aside" "share aside"; }
.cpi-layout:has(> .cpi-share) > .cpi-main { grid-area: main; }
.cpi-layout:has(> .cpi-share) > .cpi-aside { grid-area: aside; }
.cpi-layout:has(> .cpi-share) > .cpi-share { grid-area: share; }
@media (min-width: 1280px) {
	.cpi-layout:has(> .cpi-share) { max-width: 1440px; grid-template-columns: 230px minmax(0, 1fr) 344px; grid-template-areas: "share main aside"; gap: 44px; }
}
@media (max-width: 1100px) {
	.cpi-layout:has(> .cpi-share) { grid-template-areas: "main" "share" "aside"; }
}

/* Share on social media + tags (project pages' left column) */
.cpi-share__title { margin: 0 0 25px; font-family: var(--font-sans); font-weight: 700; font-size: 11px; line-height: 1.2; letter-spacing: 1.5px; text-transform: uppercase; color: #2c6696; }
.cpi-share__title--tags { font-size: 12px; letter-spacing: 1px; }
.cpi-share__block { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #e3e7e9; }
.cpi-share__links { display: flex; gap: 25px; }
.cpi .cpi-share__links a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1d4363; color: #fff; text-decoration: none; transition: background .15s; }
.cpi .cpi-share__links a:hover, .cpi .cpi-share__links a:focus-visible { background: #2c6696; color: #fff; }
.cpi .cpi-share__links a .fa-external-link { display: none !important; } /* The legacy theme script adds an "opens in new tab" icon to such links. */
.cpi .cpi-share__tags a { display: block; margin: 0 0 15px; font-family: var(--font-sans); font-weight: 700; font-size: 12px; line-height: 1.2; text-transform: uppercase; color: #b1b1b1; text-decoration: none; }
.cpi .cpi-share__tags a:hover, .cpi .cpi-share__tags a:focus-visible { color: #2c6696; }

/* Page-specific additions to shared components; anchor guards beat the legacy link rules */
.cpi a.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-800); color: #fff; text-decoration: none; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.cpi a.ds-btn:hover { background: var(--brand-900); color: #fff; }
.cpi a.ds-btn--sm { padding: 8px 16px; }
.cpi a.ds-btn--light { background: #fff; color: var(--brand-700); }
.cpi a.ds-btn--light:hover { background: var(--brand-100); color: var(--brand-700); }
.ds-btn:focus-visible, .ds-chip:focus-visible, .cpi-card__title a:focus-visible, .cpi-modal__close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.ds-media--hero { aspect-ratio: 16 / 11; }
.ds-media--side { aspect-ratio: 4 / 3; }

/* Hero */
.cpi-hero { padding: 20px 32px 40px; }
.cpi-hero__title { font-family: var(--font-accent); font-weight: 400; font-size: 54px; line-height: 1.1; letter-spacing: 0; color: var(--fg-strong); margin: 0 0 20px; padding: 0; text-wrap: balance; text-transform: none; }
.cpi-hero__lead { position: relative; padding-left: 105px; max-width: 645px; margin: 0 0 28px; }
.cpi-hero__lead::before { content: ''; position: absolute; left: 0; top: 11px; width: 75px; height: 2px; background: var(--accent-lime); }
.cpi-hero__lead p { font-size: 17px; line-height: 27px; color: var(--fg-default); margin: 0; }
.cpi-hero__search { display: flex; gap: 12px; align-items: center; max-width: 540px; margin: 0; }
.cpi-hero__field { position: relative; flex: 1; }
.cpi-hero__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-weak); display: flex; }
.ds-input--search { padding: 13px 14px 13px 42px; box-shadow: var(--shadow-raised); -webkit-appearance: none; appearance: none; }
.cpi-hero__note { font-size: 13px; color: var(--fg-weak); margin: 16px 0 0; }
.cpi-hero__figure { margin: 28px 0 0; }
.cpi-hero__figure figcaption { margin: 12px 4px 0; } /* text: the global .mmhpi-caption style */

/* Overview */
.cpi-overview { padding: 10px 32px 0; display: flex; flex-direction: column; gap: 24px; }
.cpi-overview p { font-size: 16px; line-height: 1.6; color: var(--fg-strong); margin: 0; }

/* Catalog */
.cpi-catalog { padding: 72px 0 80px; }
.cpi-catalog > .ds-section-head { padding: 0 32px 28px; max-width: none; }
.cpi-catalog > .ds-section-head p { max-width: 640px; }
.cpi-chips { position: sticky; top: var(--cpi-header-h, 89px); z-index: 40; background: #fff; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.cpi-chips__row { padding: 14px 32px; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.cpi-chips__row::-webkit-scrollbar { display: none; }
.cpi-grid { padding: 28px 32px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 22px; }
.cpi-card { background: #fff; border: 1px solid var(--border-default); border-radius: 16px; box-shadow: var(--shadow-raised); padding: 24px; display: flex; flex-direction: column; gap: 12px; cursor: pointer; transition: box-shadow 0.2s ease, transform 0.2s ease; }
/* Lift on hover only where there is a mouse: on phones :hover sticks to the last card tapped. */
@media (hover: hover) {
	.cpi-card:hover { box-shadow: var(--shadow-overlay); transform: translateY(-2px); }
}
.cpi-card[hidden] { display: none; }
.cpi-card__pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cpi-card__title { font-family: var(--font-sans); font-weight: 700; font-size: 19px; line-height: 25px; color: var(--fg-strong); margin: 0; padding: 0; text-wrap: balance; text-transform: none; letter-spacing: 0; }
.cpi .cpi-card__title a { color: inherit; text-decoration: none; }
.cpi-card__summary { font-size: 14px; line-height: 21px; color: var(--fg-default); margin: 0; max-height: 63px; overflow: hidden; }
.cpi-card__meta { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fg-weak); margin-top: auto; }
.cpi-card__meta svg { flex-shrink: 0; }
.cpi-card__sessions { border-top: 1px solid var(--border-default); }
.cpi-session { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-bottom: 1px dashed var(--border-default); }
.cpi-session__icon { display: flex; color: var(--fg-weak); }
.cpi-session__date { flex: 1; font-weight: 600; font-size: 13px; color: var(--fg-default); }
.cpi-session__state { font-weight: 700; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-weak); white-space: nowrap; }
.cpi-session--more { font-weight: 600; font-size: 12.5px; color: var(--fg-weak); }
.cpi-empty { text-align: center; padding: 80px 32px 60px; }
.cpi-empty[hidden] { display: none; }
.cpi-empty__icon { display: inline-flex; width: 56px; height: 56px; border-radius: 16px; background: var(--bg-sunken); color: var(--fg-weak); align-items: center; justify-content: center; margin-bottom: 16px; }
.cpi-empty h3 { font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--fg-strong); margin: 0 0 6px; text-transform: none; }
.cpi-empty p { font-size: 15px; color: var(--fg-default); margin: 0 0 20px; }

/* Detail dialog */
.cpi-modal { border: none; padding: 0; background: #fff; border-radius: 16px; box-shadow: var(--shadow-overlay); max-width: 780px; width: calc(100% - 64px); max-height: 86vh; overflow: hidden; color: var(--fg-default); font-family: var(--font-sans); }
.cpi-modal[open] { display: flex; flex-direction: column; animation: cpiDlgIn 0.22s ease-out; }
.cpi-modal::backdrop { background: rgba(16, 42, 61, 0.45); animation: cpiFadeIn 0.18s ease-out; }
@keyframes cpiDlgIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes cpiFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cpi-modal__head { padding: 28px 32px 20px; border-bottom: 1px solid var(--border-default); display: flex; align-items: flex-start; gap: 16px; }
.cpi-modal__heading { flex: 1; }
.cpi-modal__heading .cpi-card__pills { margin-bottom: 12px; }
.cpi-modal__title { font-family: var(--font-sans); font-weight: 700; font-size: 26px; line-height: 33px; letter-spacing: -0.2px; color: var(--fg-strong); margin: 0; padding: 0; text-wrap: balance; text-transform: none; }
.cpi-modal__subtitle { font-weight: 600; font-size: 13.5px; color: var(--fg-weak); margin: 8px 0 0; letter-spacing: 0.02em; }
.cpi-modal__close { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border-default); background: #fff; color: var(--fg-default); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.cpi-modal__close:hover { background: var(--bg-sunken); color: var(--fg-strong); }
.cpi-modal__body { overflow-y: auto; padding: 24px 32px 32px; }
.cpi-modal__metas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cpi-modal__metas span { background: var(--bg-sunken); color: var(--fg-default); font-weight: 600; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; }
.cpi-modal__desc p { font-size: 15px; line-height: 24px; color: var(--fg-default); margin: 0 0 16px; }
.cpi-modal__desc h3, .cpi-modal__desc h4 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--fg-strong); margin: 24px 0 12px; padding: 0; text-transform: none; letter-spacing: 0; }
.cpi-modal__desc ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cpi-modal__desc li { position: relative; padding-left: 25px; font-size: 14.5px; line-height: 22px; color: var(--fg-default); margin: 0; }
.cpi-modal__desc li::before { content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: rgb(68, 120, 164); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat; }
.cpi-modal__desc li strong, .cpi-modal__desc li b { color: var(--fg-strong); }
.cpi-modal__desc .mmhpi-course-note { display: flex; gap: 12px; border-radius: 12px; padding: 14px 16px; margin: 0 0 16px; font-size: 14px; line-height: 21px; font-weight: 700; }
.cpi-modal__desc .mmhpi-course-note::before { content: ''; flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; background: currentColor; }
.cpi-modal__desc .mmhpi-course-note--info { background: var(--info-bg); color: var(--info-fg); border: 1px solid rgba(26, 116, 168, 0.25); }
.cpi-modal__desc .mmhpi-course-note--info::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / contain no-repeat; }
.cpi-modal__desc .mmhpi-course-note--warn, .cpi-modal__desc .mmhpi-course-note--warning { background: var(--warning-bg); color: var(--warning-fg); border: 1px solid rgba(143, 108, 26, 0.3); }
.cpi-modal__desc .mmhpi-course-note--warn::before, .cpi-modal__desc .mmhpi-course-note--warning::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center / contain no-repeat; }
.cpi-sessions { border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.cpi-sessions__row { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border-default); }
.cpi-sessions__row:last-child { border-bottom: 0; }
.cpi-sessions__info { flex: 1; min-width: 0; }
.cpi-sessions__when { font-weight: 700; font-size: 14.5px; color: var(--fg-strong); margin-bottom: 3px; }
.cpi-sessions__where { display: flex; align-items: flex-start; gap: 6px; font-size: 13.5px; line-height: 19px; color: var(--fg-weak); }
.cpi-sessions__where svg { flex-shrink: 0; margin-top: 3px; }
.cpi-sessions__where a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cpi-sessions__where a:hover, .cpi-sessions__where a:focus-visible { color: var(--action-brand-hover); }
.cpi-sessions__seats { font-size: 12.5px; color: var(--fg-weak); margin-top: 3px; }
.cpi-sessions__fee { font-weight: 700; font-size: 14.5px; color: var(--fg-strong); white-space: nowrap; }
.cpi-empty-sessions { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 20px; text-align: center; }
.cpi-empty-sessions p { font-size: 14.5px; color: var(--fg-default); margin: 0 0 12px; }
.cpi .cpi-empty-sessions a { font-weight: 600; font-size: 13.5px; color: rgb(35, 97, 146); }
body.cpi-modal-open { overflow: hidden; }
.ds-select { cursor: pointer; -webkit-appearance: none; appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d4363' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 16px center; }
.ds-panel--note { padding: 24px; }
.ds-panel--note h3 { font-family: var(--font-sans); font-weight: 700; font-size: 15px; color: var(--fg-strong); margin: 0 0 10px; padding: 0; text-transform: none; }
.ds-panel--note p { font-size: 13.5px; line-height: 20px; color: var(--fg-default); margin: 0 0 8px; }
.ds-panel--note p:last-child { margin: 0; }

/* Sidebar */
.cpi-aside { display: flex; flex-direction: column; gap: 34px; }
.cpi-promo { background: #6388a8; border-radius: 6px; padding: 30px 28px; color: #fff; }
.cpi-promo__title, .cpi-promo__body h3 { font-family: var(--font-accent); font-weight: 400; font-size: 25px; line-height: 30px; color: #fff; margin: 0 0 12px; padding: 0; text-transform: none; letter-spacing: 0; }
.cpi-promo__body h3 { font-size: 22px; line-height: 27px; }
.cpi-promo__body p { font-size: 13.5px; line-height: 20px; color: rgba(255, 255, 255, 0.9); margin: 0 0 18px; }
.cpi-promo__body hr { height: 1px; border: 0; background: rgba(255, 255, 255, 0.25); margin: 26px 0; }
.cpi .cpi-promo__body a.btn { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: 11.5px; line-height: normal; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand-800); color: #fff; text-decoration: none; padding: 11px 22px; border-radius: 999px; border: 0; min-width: 0; height: auto; }
.cpi .cpi-promo__body a.btn:hover { background: var(--brand-900); }
.cpi-related__title { font-family: var(--font-accent); font-weight: 400; font-size: 26px; line-height: 31px; color: var(--fg-strong); margin: 0 0 18px; padding: 0; text-transform: none; }
.cpi-related__item { margin-bottom: 26px; }
.cpi-related__bar { height: 6px; background: var(--bg-sunken); border-radius: 3px; margin-bottom: 14px; }
.cpi-related__label { font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-weak); margin: 0 0 3px; }
.cpi-related__date { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-orange); margin: 0 0 8px; }
.cpi-related__item h4 { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 21px; color: var(--fg-strong); margin: 0 0 8px; padding: 0; text-transform: none; }
.cpi .cpi-related__item h4 a { color: inherit; text-decoration: none; }
.cpi-related__excerpt { font-size: 12.5px; line-height: 19px; color: var(--fg-default); margin: 0 0 12px; }
.cpi .cpi-related__link { font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-700); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.cpi .cpi-related__link span { font-size: 14px; }
.cpi .cpi-related__link:hover { color: var(--brand-900); }

/* Narrower screens (the design is desktop-only; these keep it usable) */
@media (max-width: 1100px) {
	.cpi-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.cpi-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 34px; align-items: start; }
}
@media (max-width: 767px) {
	.cpi-layout { padding-left: 16px; padding-right: 16px; }
	.cpi-hero, .cpi-overview, .cpi-catalog > .ds-section-head, .cpi-grid { padding-left: 0; padding-right: 0; }
	.cpi-chips__row { padding: 12px 0; }
	.cpi-hero__title { font-size: 38px; }
	.cpi-hero__lead { padding-left: 0; padding-top: 18px; }
	.cpi-hero__lead::before { top: 0; }
	.cpi-hero__search { flex-direction: column; align-items: stretch; }
	.cpi-modal { width: calc(100% - 24px); max-height: 92vh; }
	.cpi-modal__head, .cpi-modal__body { padding-left: 20px; padding-right: 20px; }
	.cpi-sessions__row { flex-wrap: wrap; }
	.cpi-sessions__info { flex-basis: 100%; }
}

.cpi-stale { margin: 0 32px 14px; padding: 12px 16px; border-radius: 12px; background: var(--warning-bg); color: var(--warning-fg); font-size: 14px; font-weight: 700; }
.cpi-empty .ds-actions { justify-content: center; }

/* Training page (single-training.php): the pop-up's details as a page. */
.cpi-layout--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
.cpi-training { background: #fff; border: 1px solid var(--border-default); border-radius: 16px; box-shadow: var(--shadow-raised); color: var(--fg-default); font-family: var(--font-sans); }
.cpi-training .cpi-modal__title { margin: 0; }
.cpi-past-title { margin-top: 32px; }
.cpi-sessions--past .cpi-sessions__when, .cpi-sessions--past .cpi-sessions__fee { opacity: 0.75; }