/*
Theme Name:  ColdCase Theme
Theme URI:  https://vsp.virginia.gov
Description: Custom Theme for the Cold Case. Child of the Twenty Twenty theme.
Author:  AISN
Textdomain:  coldcase
Author URI:  https://www.aisn.net
Template:  twentytwenty
Version:  1.1
License:  GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html                 
*/

:root {
  --serif: "Libre Baskerville", serif;
  --sans-serif: Arial, Helvetica, sans-serif;
  --blue-primary: #44516b;
  --blue-secondary: #003366;
  --blue-tertiary: #393d4a;
  --yellow-primary: #fac864;
  --yellow-secondary: #faab0f;
  --yellow-tertiary: #efc358;
  --grey-primary: #484848;
  --grey-secondary: #474d5e;
  --grey-tertiary: #626875;
  --light-grey: #f6f6f6;
  --white: #ffffff;

  --orange: #ffcf99;
  --red: #f2542d;
  --teal: #006765;
  --light-teal: #f4f9ff;
  --black: #000000;
}

/* 
# Print
*/

@media print {
  #va-commonBanner,
  .header-footer-group,
  a.to-the-top {
    display: none;
  }
}

p.va-agency-bar-header a {
  color: #fff !important;
}

/*--------------------------------------------------------------
# Block Color Palette Colors
--------------------------------------------------------------*/
.has-blue-primary-color {
  color: var(--blue-primary);
}

.has-blue-primary-background-color {
  background-color: var(--blue-primary);
}

.has-blue-secondary-color {
  color: var(--blue-secondary);
}

.has-blue-secondary-background-color {
  background-color: var(--blue-secondary);
}

.has-blue-tertiary-color {
  color: var(--blue-tertiary);
}

.has-blue-tertiary-background-color {
  background-color: var(--blue-tertiary);
}

.has-yellow-primary-color {
  color: var(--yellow-primary);
}

.has-yellow-primary-background-color {
  background-color: var(--yellow-primary);
}

.has-yellow-secondary-color {
  color: var(--yellow-secondary);
}

.has-yellow-secondary-background-color {
  background-color: var(--yellow-secondary);
}

.has-yellow-tertiary-color {
  color: var(--yellow-tertiary);
}

.has-yellow-tertiary-background-color {
  background-color: var(--yellow-tertiary);
}

.has-grey-primary-color {
  color: var(--grey-primary);
}

.has-grey-primary-background-color {
  background-color: var(--grey-primary);
}

.has-grey-secondary-color {
  color: var(--grey-secondary);
}

.has-grey-secondary-background-color {
  background-color: var(--grey-secondary);
}
.has-grey-tertiary-color {
  color: var(--grey-tertiary);
}

.has-grey-tertiary-background-color {
  background-color: var(--grey-tertiary);
}

.has-white-color {
  color: var(--white);
}

.has-white-background-color {
  background-color: var(--white);
}

.has-light-grey-color {
  color: var(--light-grey);
}

.has-light-grey-background-color {
  background-color: var(--light-grey);
}

/* -------------------------------------------------------------------------- */
/*	2. Element Base
/* -------------------------------------------------------------------------- */

body,
.entry-content {
  font-family: var(--sans-serif);
  font-size: 1.6rem;
  letter-spacing: initial;
}

body {
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.entry-content {
  /* margin-bottom: 6rem; */
  padding-top: 6rem;
}

.entry-content > * {
  margin-bottom: 2rem;
}

main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6,
.faux-heading {
  font-weight: bold;
  letter-spacing: initial;
  line-height: 1.1;
  margin: 3.5rem 0 2rem;
}

/*
 * Vertically centered in its containing block (.wp-custom-logo .header-titles,
 * see that rule's comment) rather than pinned a fixed 10px from the top. The
 * old fixed top-offset left the image flush against the top of the banner
 * with almost no room below it, so its bottom edge (the state outline's
 * Eastern Shore tip) landed right at — and on shorter banners, past — the
 * boundary with the nav bar below, appearing to be "obscured" by it.
 * top: 50% + translateY(-50%) keeps it centered regardless of banner height,
 * matching the same technique already used for .nav-toggle above. Applies at
 * every breakpoint (desktop and mobile), since this rule isn't itself scoped
 * to a media query.
 *
 * The explicit height is required, not cosmetic: several agency subsites
 * carry Customizer > Additional CSS with `.custom-logo { position: absolute;
 * z-index: 5; }` (admin-entered per-subsite, not in this stylesheet — search
 * "custom-logo" in the affected subsite's Additional CSS screen to find it).
 * That pulls the <img> itself out of normal flow, so this wrapping div's only
 * content becomes out-of-flow too and its auto-height collapses to 0 — which
 * made an earlier version of this centering fix (top: 50% + translateY(-50%)
 * with no explicit height) center a 0px-tall box and land the logo even
 * further off than the original bug. Giving the div a real height (matching
 * the img's own forced 12rem, since that's what the img still renders at
 * regardless of the collapse) keeps translateY(-50%) meaningful, and the img
 * itself falls back to filling the div's top-left (its "static position",
 * per the CSS absolute-positioning spec, since it has no top/left of its own)
 * — so it ends up centered too. Verified via Playwright bounding-box checks
 * against the Richmond PD subsite (which carries this Additional CSS), plus
 * screenshots on a subsite without it, 2026-09-08.
 *
 * To revert: restore `top: 10px;`, delete the `transform` and `height`.
 */
.site-logo.faux-heading {
  position: absolute;
  width: 28rem;
  height: 12rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.site-logo.faux-heading img {
  width: 28rem;
  height: 12rem;
  max-height: 12rem;
}

/*@media screen and (max-width: 640px) {
	.site-logo.faux-heading {
	width: 7rem;
}
}*/
h1,
.h1,
.heading-size-1 {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.1;
}
h2,
.h2,
.heading-size-2 {
  font-size: 2.25rem;
}

h3,
.h3,
.heading-size-3 {
  font-size: 2.2rem;
  text-transform: uppercase;
}

h4,
.h4,
.heading-size-4 {
  font-size: 2rem;
}

h5,
.h5,
.heading-size-5 {
  font-size: 1.8rem;
}

h6,
.h6,
.heading-size-6 {
  font-size: 1.6rem;
  letter-spacing: initial;
  text-transform: none;
}

p {
  line-height: 1.5;
  margin: 0 0 1em 0;
}

.entry-content .has-small-font-size {
  font-size: 1.2rem;
}

.entry-content .has-normal-font-size,
.entry-content .has-regular-font-size {
  font-size: 1.6rem;
}

.entry-content .has-large-font-size {
  font-size: 2.6rem;
}

.entry-content .has-larger-font-size {
  font-size: 3.2rem;
}
/* 
 * Accent Color Overrides
 */
.entry-content a sup {
  display: inline-block;
  text-decoration: none;
}

.color-accent,
.color-accent-hover:hover,
.color-accent-hover:focus,
:root .has-accent-color,
.has-drop-cap:not(:focus)::first-letter,
.wp-block-button.is-style-outline,
.entry-content a,
a {
  color: var(--teal) !important;
}

.modal-menu a {
  color: var(--white) !important;
}
.header-footer-group,
body:not(.overlay-header) #site-header .toggle,
.menu-modal .toggle,
.footer-copyright,
.site-description,
body:not(.overlay-header) .toggle-inner .toggle-text,
.widget .post-date,
.widget .rss-date,
.widget_archive li,
.widget_categories li,
.widget cite,
.widget_pages li,
.widget_meta li,
.widget_nav_menu li,
.powered-by-wordpress,
.to-the-top,
.singular .entry-header .post-meta,
.singular:not(.overlay-header) .entry-header .post-meta a {
  color: var(--white) !important;
}

body:not(.overlay-header) .primary-menu > li > a,
body:not(.overlay-header) .primary-menu > li > .icon,
.primary-menu a {
  color: var(--black) !important;
}

@media screen and (max-width: 999px) {
  body:not(.overlay-header) .primary-menu > li > a,
  body:not(.overlay-header) .primary-menu > li > .icon,
  .modal-menu a {
    color: var(--white) !important;
  }
}

body:not(.overlay-header) .primary-menu > li > a {
  padding: 1rem 2rem;
}

body:not(.overlay-header) .primary-menu > li.menu-item-has-children > a {
  padding: 1rem 2.5rem 1rem 2rem;
}

.primary-menu > li > .icon {
  right: 0;
}

body:not(.overlay-header) .primary-menu > li:hover > .icon {
  color: var(--teal) !important;
}

body:not(.overlay-header) .primary-menu ul {
  background: var(--teal) !important;
}

body:not(.overlay-header) .primary-menu > li > ul:after {
  border-bottom-color: var(--teal) !important;
}

.primary-menu > li {
  margin: 0.8rem 0 0 0.5rem;
}

/*
 * var(--red) (#f2542d) against the orange header background (var(--orange),
 * #ffcf99) is ~2.1:1 — fails the 3:1 minimum for a focus indicator (WCAG
 * 2.4.7). The outline is drawn outside the link's own border edge, so it
 * sits over #site-header's orange background (see that rule's
 * background-color), not over the white background :focus gives the link
 * itself below — confirmed the orange background is what actually needs to
 * pass contrast here. var(--black) against orange is ~14.6:1, and works
 * equally well against any other background this menu might ever sit on.
 */
body:not(.overlay-header) .primary-menu > li > a:focus {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}
body:not(.overlay-header) .primary-menu > li > a:focus,
.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current_page_ancestor {
  text-decoration: underline;
  background: var(--white);
  color: var(--grey-secondary) !important;
}
body:not(.overlay-header) .primary-menu > li > a:hover {
  color: var(--grey-secondary) !important;
}
.social-icons a,
#site-footer button:not(.toggle),
#site-footer .button,
#site-footer .faux-button,
#site-footer .wp-block-button__link,
#site-footer .wp-block-file__button,
#site-footer input[type="button"],
#site-footer input[type="reset"],
#site-footer input[type="submit"] {
  background-color: var(--white) !important;
  color: white;
}

button:not(.toggle),
.button,
.faux-button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.bg-accent,
.bg-accent-hover:hover,
.bg-accent-hover:focus,
:root .has-accent-background-color,
.comment-reply-link {
  background-color: var(--orange) !important;
  color: #000;
}

button,
.button,
.faux-button,
.wp-block-button__link,
.wp-block-file .wp-block-file__button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  padding: 1rem;
}

.footer-nav-widgets-wrapper.header-footer-group {
  background-color: var(--grey-secondary) !important;
}

.fill-children-current-color,
.fill-children-current-color * {
  fill: var(--grey-secondary) !important;
}

.footer-social-wrapper {
  min-width: 15rem;
}

.menu-modal-inner {
  background-color: var(--teal) !important;
}

.toggle .svg-icon polygon {
  fill: white !important;
}

.wp-block-button.is-content-justification-center {
  text-align: center;
}
.entry-content .wp-block-button__link {
  background-color: var(--orange) !important;
  color: var(--black) !important;
  border: 5px solid transparent;
}

.entry-content .wp-block-button__link:hover {
  background-color: var(--blue-primary) !important;
  text-decoration: none;
}

.entry-content .wp-block-button__link:focus {
  border: 5px dotted var(--white);
}

.entry-content
  .wp-block-button.is-style-dark-background
  .wp-block-button__link {
  background-color: #f8aa2e !important;
  color: #181b2c !important;
  border: 5px solid transparent;
}

.entry-content
  .wp-block-button.is-style-dark-background
  .wp-block-button__link:hover {
  background-color: var(--yellow-primary) !important;
}

.entry-content .wp-block-button.is-style-sticky-menu .wp-block-button__link {
  background-color: var(--grey-tertiary) !important;
  color: var(--white) !important;
  border: 5px solid transparent;
}

.entry-content
  .wp-block-button.is-style-sticky-menu
  .wp-block-button__link:hover {
  background-color: var(--blue-primary) !important;
}

.entry-content .wp-block-button.is-style-dark-button .wp-block-button__link {
  background-color: #23272b !important;
  color: var(--white) !important;
  border: 5px solid transparent;
}

.entry-content
  .wp-block-button.is-style-dark-button
  .wp-block-button__link:hover {
  background-color: var(--teal) !important;
  text-decoration: none;
}
.pagination a {
  text-decoration: none;
  color: var(--teal) !important;
}

.pagination-wrapper {
  margin-bottom: 60px;
}
/*
 * Breadcrumbs
 */

nav#breadcrumbs {
  background-color: var(--grey-tertiary);
  font-size: 1.2rem;
  padding: 0.5rem 4rem;
  border-top: 0.2rem solid var(--yellow-primary);
}

nav#breadcrumbs p {
  margin-bottom: 0;
}

nav#breadcrumbs a {
  color: var(--white);
}

/*
 * Menus
 */

ul.primary-menu {
  justify-content: flex-start;
}

.primary-menu li {
  font-size: 1.6rem;
}

.primary-menu li.menu-item-has-children:hover > ul,
.primary-menu li.menu-item-has-children:focus > ul,
.primary-menu li.menu-item-has-children.focus > ul {
  left: 0;
  right: auto;
}

.primary-menu ul::after {
  right: auto;
  left: 1.8rem;
}

.footer-social a {
  height: 3rem;
  width: 3rem;
}

@media screen and (max-width: 1080px) {
  .primary-menu > li.menu-item-has-children > a {
    padding-right: 1.4rem;
  }
}

@media screen and (max-width: 1040px) {
  .primary-menu a {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 1000px) {
  .primary-menu a {
    padding: 1rem 2rem;
  }
}

.primary-menu .current_page_ancestor {
  background-color: transparent !important;
  background: transparent !important;
}

.primary-menu .current_page_ancestor a {
  text-decoration: none !important;
}

/* -------------------------------------------------------------------------- */

/*	4.	Site Header
/* -------------------------------------------------------------------------- */

#site-header {
  background-color: var(--orange) !important;
  position: relative;
}

.header-inner {
  max-width: 168rem;
  padding: 0.5rem 0;
  z-index: 100;
}

.singular .entry-header {
  padding: 6rem 0 0;
}

@media screen and (max-width: 999px) {
  .header-inner.section-inner {
    display: none;
  }
}

.header-footer-group,
body:not(.overlay-header) #site-header .toggle,
.menu-modal .toggle {
  fill: white;
}

.search-toggle {
  position: absolute;
  bottom: 8.5rem;
  left: auto;
  top: auto;
  right: 6rem;
}
.home .search-toggle {
  bottom: 6rem;
}
/*
 * Parent theme sizes .nav-toggle svg at height: 0.8rem, tuned for the
 * default "ellipsis" icon (three flat dots). The hamburger icon (three
 * stacked bars, see coldcase_register_hamburger_icon() in functions.php)
 * needs more height for its bars to render as distinct lines rather than
 * blurring together. Values are already the +10% sizes below (base 1.8rem
 * / 2.6rem x 1.1).
 */
.mobile-nav-toggle .toggle-icon,
.mobile-nav-toggle svg {
  height: 1.98rem;
  width: 2.86rem;
}

/*
 * Overall mobile menu button made 10% larger than the parent theme's
 * defaults (.nav-toggle width: 6.6rem, .toggle-inner height: 2.3rem).
 */
.mobile-nav-toggle {
  width: 7.26rem;
}

.mobile-nav-toggle .toggle-inner {
  height: 2.53rem;
}

/*
 * Parent theme puts the "Menu" label 0.5rem below the icon
 * (.toggle-inner .toggle-text { top: calc(100% + 0.5rem); }). Doubled to
 * 1rem for more visual separation between the icon and the label.
 */
.mobile-nav-toggle .toggle-text {
  top: calc(100% + 1rem);
}

/*
 * Vertically centered in #site-header (the containing block for this
 * absolutely-positioned button) rather than pinned a fixed rem distance
 * from the bottom. The old bottom-offset values had to be re-tuned by hand
 * every time the banner's height changed (e.g. the min-height fix on
 * .header-titles-wrapper — see "Banner heading duplicate-text fix" in
 * CLAUDE.md) and drifted out of vertical center as a result. top: 50% +
 * translateY(-50%) keeps it centered regardless of banner height, so no
 * separate .home or breakpoint overrides are needed here.
 */
.nav-toggle {
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

@media screen and (max-width: 640px) {
  .search-toggle {
    bottom: 7rem;
  }

  .home .search-toggle {
    bottom: 4rem;
  }
}

@media screen and (max-width: 385px) {
  .search-toggle {
    bottom: 6rem;
  }

  .home .search-toggle {
    bottom: 3rem;
  }
}
/* Header Titles ----------------------------- */

.header-titles-wrapper {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 0 4rem;
  text-align: center;
  background: var(--teal);
}

.wp-custom-logo .header-titles {
  position: relative;
  display: block;
  /*
   * .site-logo.faux-heading is position:absolute (top: 10px) inside this
   * container, sized by its img to ~12rem tall. This container's own height
   * used to be propped up by 2-3 stacked text lines (title/description/
   * tagline); now that site-description is suppressed on the main site (see
   * "Banner heading duplicate-text fix" in CLAUDE.md), the container can
   * shrink shorter than the logo, causing it to overhang into the nav
   * below. min-height guarantees room for the logo regardless of text line
   * count. 15rem was confirmed visually correct on both main-site pages and
   * agency subsite pages, 2026-08-04. To revert: delete this min-height
   * declaration.
   */
  min-height: 15rem;
}

.header-titles {
  width: calc(100% - 8rem);
  max-width: 168rem;
  margin: 0 auto;
  padding: 5rem 0 2rem;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 999px) {
  .header-titles {
    width: 100%;
    margin-left: 4rem;
  }
}

body:not(.enable-search-modal) .header-titles-wrapper {
  justify-content: flex-start;
  padding-left: 0;
  text-align: left;
}

.site-title,
.site-logo,
.site-description {
  margin: 0;
  max-width: 28rem;
}

.site-title {
  padding-left: 0;
  position: relative;
  z-index: 10;
  font-size: 1.6rem;
  font-weight: 400;
}

.site-title a {
  color: var(--white) !important;
  text-shadow: none;
  display: block;
  text-decoration: none;
  text-align: left;
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  letter-spacing: -0.0311em;
  text-transform: none;
  position: relative;
  z-index: 10;
}
.site-title a span {
  display: block;
  font-size: 7rem;
}

/*
 * Banner heading duplicate-text fix: the main site's banner lost its
 * site-description line sitewide (see functions.php
 * coldcase_add_main_site_body_class and CLAUDE.md "Banner heading
 * duplicate-text fix"). Bump the site-title text up .5rem on every
 * main-site page so the remaining lines don't look undersized. To revert:
 * delete this rule block.
 */
.ccdb-main-site .site-title {
  font-size: 2.1rem;
}
.ccdb-main-site .site-title a {
  font-size: 2.1rem;
}
/*
 * .site-title has margin: 0 (see .site-title, .site-logo, .site-description
 * rule above) and .site-tagline inherits the generic `p { margin: 0 0 1em 0 }`
 * reset, i.e. no top margin — so with site-description gone they sit flush
 * against each other on every main-site page. Add breathing room back in.
 * To revert: delete this rule.
 */
.ccdb-main-site .site-tagline {
  margin-top: 1rem;
}

.site-description,
.site-description a {
  text-transform: none;
  display: block;
  text-decoration: none;
  font-size: 2rem;
  font-weight: 500;
  position: relative;
  z-index: 10;
  letter-spacing: 1px;
  color: white !important;
}

.site-tagline,
.site-tagline a {
  position: relative;
  z-index: 10;
  text-transform: none;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: white !important;
}

@media screen and (max-width: 1010px) {
  .site-title a span {
    font-size: 3rem;
    text-shadow: 1px 1px 1px var(--grey-tertiary);
  }
  .site-title a {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 590px) {
  .site-title {
    max-width: 30rem;
    text-align: left;
  }
}

@media screen and (max-width: 460px) {
  .site-title a {
    font-size: 2rem;
    max-width: 20rem;
  }
}

@media screen and (max-width: 385px) {
  .site-logo.faux-heading {
    width: 5rem;
  }
  /* Logo scales down at this width, so the 15rem min-height set on
     .wp-custom-logo .header-titles above would leave excess empty banner
     space here — shrink it to match. To revert: delete this rule. */
  .wp-custom-logo .header-titles {
    min-height: 10rem;
  }
}
@media screen and (max-width: 350px) {
  .site-title a {
    font-size: 1.6rem;
    max-width: 18rem;
  }
}

.site-title a:hover {
  text-decoration: none;
}
.site-title a:focus {
  text-decoration: underline;
}
/*
.site-description {
	margin-top: 1rem;
	color: #6d6d6d;
	font-size: 1.8rem;
	font-weight: 500;
	display: none;
	letter-spacing: -0.0311em;
	transition: all 0.15s linear;
}*/

.site-logo a,
.site-logo img {
  display: block;
}

.header-titles .site-logo .site-logo {
  margin: 0;
}

/*
 * top/bottom + margin-top/bottom: auto is a vertical-centering technique
 * that only takes effect on an absolutely positioned element — for the
 * normal (static-flow) img this codebase renders by default, top/bottom are
 * ignored entirely and these margins resolve to 0, a no-op.
 *
 * It's here to counter the same per-subsite Customizer > Additional CSS
 * this repo doesn't control (`.custom-logo { position: absolute; z-index:5 }`
 * — see the .site-logo.faux-heading comment above for the full story) when
 * it lands on THIS logo variant: the plain h1.site-logo used on an agency
 * subsite's own homepage (twentytwenty_site_logo()'s home_wrap branch),
 * rather than the .faux-heading div used everywhere else. That admin CSS
 * pulls the <img> out of flow there too, and the browser's fallback "static
 * position" for an absolutely positioned element with no top/left of its own
 * is unpredictable — confirmed on production (coldcase.vsp.virginia.gov)
 * landing the logo flush against one edge of the banner with no margin,
 * i.e. the same visual bug as the .faux-heading case, on every agency
 * subsite homepage (confirmed via DB query: 32 of 33 subsites carry this
 * Additional CSS as of 2026-09-08, all but the main site).
 *
 * !important on the margins is required, not decorative: a higher-specificity
 * rule below (`body:not(.enable-search-modal) .site-logo img { margin: 0; }`)
 * would otherwise reset margin-top/bottom back to 0 and silently defeat the
 * centering — confirmed via Playwright before adding !important here.
 *
 * Verified 2026-09-08 via Playwright bounding-box checks on the Fluvanna
 * County Sheriff's Office subsite homepage (has the Additional CSS: image
 * lands centered, 25px slack above and below in its 150px-tall container)
 * and the main site homepage (does not have it: img stays in normal static
 * flow, unaffected, no regression).
 */
.site-logo img {
  max-height: 10rem;
  /*margin: 0 auto;*/
  margin-left: 0;
  margin-right: 0;
  width: auto;
  height: auto !important;
  top: 0;
  bottom: 0;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

body:not(.enable-search-modal) .site-logo img {
  margin: 0;
}

.search-modal-inner.modal-inner {
  background-color: var(--grey-secondary);
}

#wpadminbar .quicklinks > ul > li > a {
  color: var(--white) !important;
}

/*
 * Content 
 */

@media screen and (min-width: 700px) {
  .post-inner {
    padding-top: 2rem;
  }

  body:not(.singular) main > article:first-of-type {
    padding: 2rem 0 0;
  }
}
.entry-content
  > :not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(
    .is-style-wide
  ) {
  max-width: 102.4rem;
  width: calc(100% - 8rem);
}

.page-template-template-missing .entry-title,
.singular #site-content .entry-header {
  background: transparent;
  color: var(--teal) !important;
}

.home #site-content .entry-header {
  padding-top: 0;
}

#site-content {
  flex: 1;
}

.singular .entry-header {
  background-color: transparent !important;
  text-align: center;
}
.entry-content ul {
  list-style: none;
}
.entry-content ol li {
  margin-left: 4.5rem;
}
.entry-content ul li {
  margin-left: 3rem;
  padding-left: 1.5rem;
  position: relative;
}
.entry-content ul li:before {
  content: " ";
  width: 0.5rem;
  height: 0.5rem;
  background: var(--grey-tertiary);
  border-radius: 50%;
  display: block;
  position: absolute;
  left: 0;
  top: 10px;
}

.entry-content ol li:before {
  content: none;
}

.entry-content dl {
  display: flex;
  flex-flow: row wrap;
}
.entry-content dt {
  flex-basis: 100px;
  padding: 2px 4px;
  text-align: right;
  color: #000;
}

.entry-content dd {
  flex-basis: calc(100% - 100px);
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  color: #000;
  font-weight: 400;
}

dd + dt {
  margin-top: 0;
}
.entry-content .agency-wrapper dl {
  margin-top: 0;
  margin-bottom: 0;
}
.entry-content .agency-wrapper dt {
  flex-basis: 200px;
}
.entry-content .agency-wrapper dd {
  flex-basis: calc(100% - 200px);
}

.entry-content .case-wrapper dt {
  flex-basis: 120px;
}
.entry-content .case-wrapper dd {
  flex-basis: calc(100% - 120px);
}

@media screen and (max-width: 600px) {
  .agency-details dl,
  .entry-content .agency-wrapper dl {
    display: block !important;
  }
  .agency-details dl dt,
  .entry-content .agency-wrapper dl dt {
    text-align: left;
  }
}
/* contact page template */

.page-template-template-contact h1 {
  max-width: 102.4rem;
  width: calc(100% - 8rem);
  margin: 6rem auto 3rem;
}

.agency-details dl {
  display: flex;
  flex-flow: row wrap;
}

.agency-details dd {
  flex-basis: calc(100% - 200px);
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  color: #000;
  font-weight: 400;
}

.agency-details dt {
  flex-basis: 200px;
  padding: 2px 4px;
  text-align: right;
  color: #000;
}

ul.other-media {
  list-style: square;
}

/* quotes */

blockquote {
  border: none;
  padding: 0.5rem 8rem;
}

blockquote.wp-block-quote.is-style-yellow-border {
  border-width: 2px;
  border-left: solid;
  padding: 0.5rem 0 0.5rem 2rem;
}

@media screen and (max-width: 767px) {
  blockquote {
    padding: 0.5rem 3rem;
  }
  blockquote.wp-block-quote.is-style-yellow-border {
    padding: 0.5rem 0 0.5rem 2rem;
  }
}

blockquote,
.border-color-accent,
.border-color-accent-hover:hover,
.border-color-accent-hover:focus {
  border-color: var(--yellow-primary) !important;
}
/*
 * Footer
 */

.footer-copyright {
  font-weight: 400;
  font-size: 1.2rem;
}

.footer-copyright a {
  color: var(--white) !important;
}

.footer-copyright-ra a {
  margin-left: 2rem;
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--white) !important;
}

.header-footer-group .to-the-top {
  color: var(--white);
  font-size: 1.6rem;
}

#site-footer.header-footer-group {
  padding: 1rem 0;
  background-color: var(--teal);
  border-top: 0.5rem solid var(--orange);
}

.footer-top {
  border-bottom: none;
}

/*
 * Persistent "back to top" button (all viewport sizes — desktop, tablet,
 * mobile) — replaces the inline .to-the-top text link (both its
 * .to-the-top-long "To the top ↑" and .to-the-top-short "Up ↑" variants),
 * which low-vision users reported was easy to lose track of at the very end
 * of the footer. See footer.php for markup and js/back-to-top.js for the
 * scroll behavior described below. a.to-the-top is hidden unconditionally
 * below so the button is the only back-to-top control on the page.
 */
a.to-the-top {
  display: none;
}

.back-to-top-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
  border: 0.2rem solid var(--teal);
  background-color: rgba(255, 255, 255, 0.95);
  color: var(--teal);
  z-index: 90;
  /*
   * The button floats over page content, and several sections (e.g. the
   * homepage "Anniversary Unsolved Cases" block, .cards-wrapper) use this
   * same --teal as their own background — a transparent fill let the teal
   * ring and icon disappear there (confirmed 2026-08-11: teal-on-teal is a
   * 1:1 contrast, unreadable for the very low-vision users this button is
   * meant to help). A near-opaque white fill guarantees the teal ring/icon
   * stay readable against any background color the button floats over, not
   * just teal, so it doesn't need re-checking against future page sections.
   */
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
}

.back-to-top-icon {
  width: 2.4rem;
  height: 2.4rem;
}

body.showing-menu-modal .back-to-top-btn {
  display: none !important;
}

@media (min-width: 1000px) {
  /* Site Header --------------------------- */

  #site-header {
    z-index: 2;
  }

  .header-inner {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
  }

  .header-titles-wrapper {
    margin-right: initial;
    max-width: 100%;
    padding: 0;
    text-align: left;
  }

  .header-titles {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 auto;
    width: calc(100% - 8rem);
    max-width: 168rem;
  }

  .header-titles .site-title,
  .header-titles .site-logo,
  .header-titles .site-description {
    margin: 0;
  }

  .wp-custom-logo .header-titles {
    align-items: center;
    position: relative;
  }

  /* HEADER NAVIGATION */

  .header-navigation-wrapper {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
    max-width: 168rem;
  }

  .primary-menu-wrapper {
    display: block;
    width: 100%;
  }

  .primary-menu ul a {
    color: var(--white);
  }

  /* HEADER TOGGLES */

  .mobile-search-toggle,
  .mobile-nav-toggle {
    display: none !important;
  }
  .primary-menu-wrapper + .header-toggles {
    margin-left: 3rem;
    top: -10px;
    position: relative;
  }

  .header-toggles {
    display: flex;
    flex-shrink: 0;
    margin-right: -3rem;
  }

  .header-inner .toggle {
    height: 4.4rem;
    padding: 0 3rem;
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
  }

  .header-inner .toggle-wrapper {
    position: relative;
  }

  .header-inner .toggle-wrapper::before {
    background: #dedfdf;
    content: "";
    display: block;
    height: 2.7rem;
    position: absolute;
    left: 0;
    top: calc(50% - 1.35rem);
    width: 0.1rem;
  }

  .header-inner .toggle-wrapper:first-child::before {
    content: none;
  }

  .header-inner
    .primary-menu-wrapper
    + .header-toggles
    .toggle-wrapper:first-child::before {
    content: none;
  }

  .nav-toggle-wrapper:not(.has-expanded-menu) {
    display: none;
  }

  .toggle-inner {
    position: static;
  }

  .toggle-inner .toggle-text {
    left: 0;
    right: 0;
    text-align: center;
    top: calc(100% - 0.3rem);
    width: auto;
  }

  .header-toggles:only-child .nav-toggle .toggle-inner {
    padding-top: 0;
  }

  .header-toggles:only-child .toggle-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .header-toggles:only-child .toggle-inner .svg-icon {
    order: 1;
  }

  .header-toggles:only-child .toggle-inner .toggle-text {
    position: static;
    padding-right: 20px;
    font-size: 15px;
    color: inherit;
  }

  /* Menu Modal ---------------------------- */

  .menu-modal {
    opacity: 1;
    justify-content: flex-end;
    padding: 0;
    transition:
      background-color 0.3s ease-in,
      left 0s 0.3s,
      right 0s 0.3s;
  }

  .menu-modal.cover-modal {
    background: rgba(0, 0, 0, 0);
  }

  .menu-modal.active {
    background: rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease-out;
  }

  .menu-wrapper.section-inner {
    width: calc(100% - 8rem);
  }

  .menu-modal-inner {
    box-shadow: 0 0 2rem 0 rgba(0, 0, 0, 0.1);
    opacity: 0;
    padding: 0;
    transform: translateX(20rem);
    transition:
      transform 0.2s ease-in,
      opacity 0.2s ease-in;
    width: 50rem;
  }

  .menu-modal.active .menu-modal-inner {
    opacity: 1;
    transform: translateX(0);
    transition-timing-function: ease-out;
  }

  .modal-menu > li > a,
  .modal-menu > li > .ancestor-wrapper > a,
  .mobile-menu .modal-menu a,
  .modal-menu a,
  .modal-menu a:visited {
    color: white !important;
  }

  .mobile-menu {
    display: none;
  }

  .expanded-menu {
    display: block;
  }

  .menu-bottom {
    padding: 6rem 0;
  }

  .menu-bottom .social-menu {
    justify-content: flex-start;
  }

  /* Sub Page ------------------------------ */

  /* FEATURED MEDIA */

  .featured-media figcaption {
    width: 100%;
  }

  /* Template: Full Width ------------------ */

  .template-full-width .wp-block-image .alignleft {
    /*rtl:ignore*/
    margin-right: 2rem;
  }

  .template-full-width .wp-block-image .alignright {
    /*rtl:ignore*/
    margin-left: 2rem;
  }

  /* Post: Archive ------------------------- */

  /* Post: Single -------------------------- */

  .singular .intro-text {
    font-size: 2.8rem;
  }

  /* Blocks -------------------------------- */

  /* BLOCK: COLUMNS */

  .wp-block-columns.alignwide + .wp-block-columns.alignwide,
  .wp-block-columns.alignfull + .wp-block-columns.alignfull {
    margin-top: -4.8rem;
  }

  /* BLOCK: GALLERY */

  figure.wp-block-gallery.alignwide,
  figure.wp-block-gallery.alignfull {
    margin-bottom: 8rem;
    margin-top: 8rem;
  }

  /* BLOCK: GROUP */

  .entry-content > .wp-block-group.alignwide.has-background,
  .entry-content > .wp-block-group.alignfull.has-background {
    padding: 8rem 4rem;
    margin-bottom: 0;
    margin-top: 0;
  }

  .wp-block-group__inner-container .wp-block-columns,
  .wp-block-group__inner-container .wp-block-columns.alignfull,
  .alignfull:not(.has-background) .wp-block-columns {
    padding-left: 0;
    padding-right: 0;
  }

  .wp-block-group__inner-container .wp-block-column,
  .wp-block-group__inner-container .wp-block-column > *:first-child {
    margin-top: 0;
  }

  /* BLOCK: IMAGE */

  .wp-block-image .alignleft {
    /*rtl:ignore*/
    margin-right: 2rem;
  }

  .wp-block-image .alignright {
    /*rtl:ignore*/
    margin-left: 2rem;
  }

  .wp-block-image .aligncenter figcaption {
    text-align: center;
  }

  /* BLOCK: SEPARATOR */

  hr.wp-block-separator {
    margin: 8rem auto;
  }

  /* Entry Content ------------------------- */

  /* ALIGNMENT CLASSES */

  .entry-content > .alignleft,
  .entry-content > p .alignleft,
  .entry-content > .wp-block-image .alignleft {
    position: absolute;

    /*rtl:ignore*/
    right: calc((100vw - 58rem) / 2 + 58rem + 2rem);
    max-width: calc((100% - 58rem) / 2 - 6rem);
  }

  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > .alignleft,
  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > p
    .alignleft,
  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > .wp-block-image
    .alignleft {
    position: relative;

    /*rtl:ignore*/
    right: inherit;
    max-width: inherit;
  }

  [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignwide
    [class*="__inner-container"]
    > .wp-block-image
    .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignfull
    [class*="__inner-container"]
    > .wp-block-image
    .alignleft {
    position: absolute;

    /*rtl:ignore*/
    right: calc((100% - 58rem) / 2 + 58rem + 4rem);
    max-width: calc((100% - 58rem) / 2 - 4rem);
  }

  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > .alignleft,
  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > p
    .alignleft,
  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > .wp-block-image
    .alignleft {
    /*rtl:ignore*/
    right: calc((100% - 58rem) / 2 + 58rem);
  }

  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
  [class*="wp-block"].alignfull
    [class*="__inner-container"]
    > .wp-block-image
    .alignleft {
    /*rtl:ignore*/
    margin-left: 4rem;
  }

  .entry-content > .alignright,
  .entry-content > p .alignright,
  .entry-content > .wp-block-image .alignright,
  [class*="__inner-container"] > .alignright {
    position: absolute;

    /*rtl:ignore*/
    left: calc((100vw - 58rem) / 2 + 58rem + 2rem);
    max-width: calc((100% - 58rem) / 2 - 6rem);
  }

  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > .alignright,
  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > p
    .alignright,
  [class*="wp-block"]:not(.alignwide):not(.alignfull)
    [class*="__inner-container"]
    > .wp-block-image
    .alignright {
    position: relative;

    /*rtl:ignore*/
    left: inherit;
    max-width: inherit;
  }

  [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignwide
    [class*="__inner-container"]
    > .wp-block-image
    .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignfull
    [class*="__inner-container"]
    > .wp-block-image
    .alignright {
    position: absolute;

    /*rtl:ignore*/
    left: calc((100% - 58rem) / 2 + 58rem + 4rem);
    max-width: calc((100% - 58rem) / 2 - 4rem);
  }

  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > .alignright,
  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > p
    .alignright,
  [class*="wp-block"].alignwide.has-background
    [class*="__inner-container"]
    > .wp-block-image
    .alignright {
    /*rtl:ignore*/
    left: calc((100% - 58rem) / 2 + 58rem + 4rem);
  }

  [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
  [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
  [class*="wp-block"].alignfull
    [class*="__inner-container"]
    > .wp-block-image
    .alignright {
    /*rtl:ignore*/
    margin-right: 4rem;
  }

  .entry-content > .alignwide:not(.wp-block-group.has-background),
  .entry-content > .alignfull:not(.wp-block-group.has-background) {
    margin-bottom: 8rem;
    margin-top: 8rem;
  }

  /* ENTRY MEDIA */

  .alignfull > figcaption,
  .alignfull > .wp-caption-text {
    width: calc(100% - 10rem);
  }

  /* Comments ------------------------------ */

  .comment-meta {
    padding-left: 0;
  }

  .comment-meta .avatar {
    left: -8rem;
  }

  /* Site Pagination ----------------------- */

  .pagination .nav-links {
    justify-content: space-between;
    margin: 0;
    width: 100%;
  }

  .nav-links > * {
    margin: 0 2rem;
  }

  .pagination .next,
  .pagination .prev {
    display: block;
  }

  .pagination .prev {
    margin: 0 auto 0 0;
  }

  .pagination .next {
    text-align: right;
    margin: 0 0 0 auto;
  }
  .footer-top {
    align-items: top;
  }
  .footer-menu {
    display: block;
  }
}

@media (min-width: 1060px) {
  /* Site Footer --------------------------- */

  /* FOOTER TOP */

  .footer-top {
    align-items: center;
  }

  .footer-menu {
    align-items: baseline;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-size: 1.6rem;
    letter-spacing: 0;
    font-weight: 400;
    margin: -1.2rem 0 0 -2.4rem;
  }

  .footer-menu li {
    margin: 1.2rem 0 0 2.4rem;
  }
}

@media (min-width: 700px) {
  .search-toggle {
    left: auto;
    right: 100px;
  }
}

/* -------------------------------------------------------------------------- */
/*	Case
/* -------------------------------------------------------------------------- */

/* 
.case-wrapper {
	margin: 20px 20px;
	width: 95%;
	box-sizing: border-box;
	padding: 24px;
	overflow: hidden;
}

.case-wrapper .case-wrap {
	display: flex;
	flex-wrap: wrap;
} */

.case-wrap .case-image {
  width: 25%;
  height: auto;
  padding: 20px;
  box-sizing: border-box;
  float: left;
}
.case-wrap .case-name {
  width: 100%;
  height: auto;
  padding: 20px;
  text-align: center;
}
.case-wrap .name {
  width: 100%;
  height: auto;
  padding: 20px;
  text-align: left;
}
.case-wrap .case-info-cols {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}
.case-wrap .case-info-col1 {
  padding: 20px;
  text-align: left;
}
.case-wrap .case-info-col2 {
  padding: 20px;
  text-align: left;
}
.case-wrap .case-info-full {
  width: 90%;
  height: auto;
  padding: 20px;
}

/* Cards */
.cards-wrapper {
  margin: 20px auto;
  max-width: 102.4rem;
  width: calc(100% - 8rem);
  box-sizing: border-box;
}

.cards-wrapper.spotlighted-cases {
  background: var(--teal);
  width: 100%;
  max-width: 100%;
  padding: 2rem 0;
  margin-bottom: 0;
  margin-top: 0;
}
.cards-wrapper.anniversary-cases {
  background: var(--teal);
  width: 100%;
  max-width: 100%;
  padding: 2rem 0;
  margin-bottom: 0;
  margin-top: 0;
}
.cards-wrapper.spotlighted-cases .card-title,
.cards-wrapper.spotlighted-cases .card-wrap,
.cards-wrapper.anniversary-cases .card-title,
.cards-wrapper.anniversary-cases .card-wrap {
  max-width: 102.4rem;
  width: calc(100% - 8rem);
  margin: 0 auto;
}
.cards-wrapper.spotlighted-cases .card-title,
.cards-wrapper.anniversary-cases .card-title {
  margin-bottom: 2rem;
  padding-top: 1.5rem;
  color: var(--white);
}

.cards-wrapper .card-wrap {
  display: flex;
  flex-wrap: wrap;
}

.anniversary-cases > .card-wrap > .card-item {
  border-radius: 0.4rem;
  border: 0.2rem solid #ddd;
}
/*h2.card-title{
	margin-left: 20px;
}*/
.card-wrap .card-item {
  width: calc(25% - 15px);
  margin-bottom: 20px;
  margin-right: 20px;
}
.card-wrap .card-item:nth-of-type(4n) {
  margin-right: 0;
}
.card-wrap .card-inner {
  box-shadow: 0.125rem 0.125rem 0.125rem 0.063rem rgb(0 0 0 / 10%);
  height: 100%;
  border: 0.063rem solid var(--teal);
  border-radius: 0.25rem;
  background-color: var(--light-teal);
  display: flex;
  flex-direction: column;
}
.card-wrap .card-image {
  width: 100%;
  height: auto;
  min-height: 200px;
  padding: 10px;
  text-align: center;
  border-radius: 0.25rem;
}
/* Uniform 175x200 case-card thumbnail, regardless of uploaded size.
   object-fit: cover center-crops originals to fill the box without distortion,
   so cards stay consistent even before Regenerate Thumbnails has run. */
.ccdb-case-thumb,
.thumbnail-victim-featured-image {
  display: block;
  width: 175px;
  height: 200px;
  max-width: 100%;
  max-height: none;
  aspect-ratio: 175 / 200;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
  object-position: center top;
  background: #f2f2f2;
  border-radius: 0.25rem;
}
/* WordPress block-library and global-styles generate compound selectors such as
   .entry-content img and .wp-block-column img with specificity 0,1,1, which
   overrides the plain class rule above (0,1,0) and resets height to auto.
   These higher-specificity rules restore the fixed box so object-fit works. */
.entry-content .thumbnail-victim-featured-image,
.wp-block-column .thumbnail-victim-featured-image {
  width: 175px;
  height: 200px;
  object-fit: cover;
  object-position: center top;
}
.card-wrap .card-info {
  padding: 0 1.5rem 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.card-wrap .card-info .wp-block-button.is-content-justification-center {
  margin-top: auto;
}
.card-info h2,
.card-info .card-name-text {
  font-size: 2rem;
  font-weight: 700;
  color: #000;
  margin: 1rem 0 2rem;
}
.card-info a {
  text-decoration: none;
}

.card-info a:hover {
  text-decoration: underline;
  color: var(--red) !important;
}

/*
 * The old `border-color: var(--red)` rule was a no-op: .card-info a has no
 * border-width/border-style set anywhere, and border-color alone doesn't
 * render anything (border-style defaults to none). This selector covers two
 * different links with two different backgrounds — the victim-name link
 * (.card-name a, sits on --light-teal #f4f9ff) and the "Read More" button
 * (.wp-block-button__link, sits on --orange #ffcf99, see the global button
 * rule above) — so the color needed to clear 3:1 against both. #c0392b
 * (already used elsewhere on the site for error text/borders) does: ~5.1:1
 * against --light-teal, ~3.8:1 against --orange.
 */
.card-info a:focus-visible {
  outline: 3px solid #c0392b;
  outline-offset: 2px;
  border-radius: 2px;
}

/*
 * .card-name a (content-cards.php and content-feature.php) is a bare <a>
 * wrapping a block-level <h2> with no display set, so it stays the default
 * `display: inline` — invalid inline-containing-block box structure. An
 * inline box like that gets fragmented by the browser into an empty "before"
 * box, the block content, and an empty "after" box, and no outline paints
 * around any of them: confirmed the outline above was otherwise completely
 * invisible (in headless AND headed Chromium, real keyboard Tab focus, not
 * just an automation quirk) until this element became a single real box.
 * The "Read More" .wp-block-button__link sibling doesn't have this problem —
 * it's already `display: inline-block` and has no block-level children — so
 * only this selector needed the fix.
 */
.card-name a {
  display: block;
}
@media (max-width: 1024px) {
  .card-wrap .card-item {
    width: calc(33.3% - 14px);
  }
  .card-wrap .card-item:nth-of-type(4n) {
    margin-right: 2rem;
  }
  .card-wrap .card-item:nth-of-type(3n) {
    margin-right: 0;
  }
}
@media (max-width: 768px) {
  .card-wrap .card-item {
    width: calc(50% - 12px);
  }
  .card-wrap .card-item:nth-of-type(3n) {
    margin-right: 20px;
  }
  .card-wrap .card-item:nth-of-type(2n) {
    margin-right: 0;
  }
}
@media (max-width: 528px) {
  .card-wrap .card-item {
    width: 100%;
  }
  .card-wrap .card-item:nth-of-type(odd) {
    margin-right: 0;
  }
}
/*Case Details Page */
.victim-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.victim-wrapper .victim-wrap {
  width: calc(50% - 10px);
  min-width: 50rem;
  padding: 20px;
  margin-right: 20px;
  border-radius: 0.25rem;
  background-color: var(--light-teal);
  border: 0.2rem solid var(--teal);
}
.victim-wrapper .victim-wrap:nth-of-type(2n) {
  margin-right: 0;
}
.victim-wrap .victim-inner {
  height: auto;
}

@media screen and (max-width: 767px) {
  .victim-wrapper .victim-wrap {
    width: 100%;
    min-width: unset;
    margin-right: 0;
  }
  .victim-wrapper .victim-wrap img {
    max-width: 20rem;
  }
}
.victim-wrap .victim-inner .wp-block-columns {
  margin-bottom: 0;
}

.victim-wrap .victim-inner h1,
.victim-wrap .victim-inner h2,
.victim-wrap .victim-inner h3 {
  margin-top: 0;
}
.case-wrapper,
.agency-wrapper {
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.25rem;
  background-color: var(--light-teal);
  border: 0.2rem solid var(--teal);
  padding: 2rem;
  margin-bottom: 6rem;
}

.agency-wrapper {
  margin: 6rem auto 6rem;
  max-width: 102.4rem;
  width: calc(100% - 8rem);
}
.entry-content .case-wrapper .wp-block-columns {
  margin-top: 0;
  margin-bottom: 0;
}

.entry-content .case-wrapper .wp-block-columns h3 {
  margin-top: 0;
}
.case-details {
  width: 100%;
}

/* agency */
/*.entry-content .data-block ul {
	list-style:none;
}
.entry-content .data-block{
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
}
.entry-content .data-block ul li {
	display: flex;
  padding: 0.125rem 0.25rem 0.125rem 0;
  margin-left: 0;
    width: 100%;
    font-size: 1.6rem;
}
span.field-label {
	display: block;
   width: 35%;
}
span.field-data {
	display: block;
   width: 60%;
}
.victim-inner .wp-block-column {
	max-width: 40%;
}*/

.agency-wrapper .wp-block-columns {
  margin-top: 0;
  margin-bottom: 0;
}
.agency-wrapper ul li::before {
  content: none;
}

.agency-details ul li::before {
  content: none;
}

/* accordions */
.wp-block-coblocks-accordion-item__title,
.wp-block-coblocks-accordion-item__title.has-background {
  background-color: var(--grey-tertiary) !important;
  color: var(--white);
  border: 5px solid transparent;
  border-radius: 0;
}
.wp-block-coblocks-accordion-item__title.has-background:hover {
  background-color: var(--blue-primary) !important;
}
.wp-block-coblocks-accordion-item__title.has-background:focus {
  outline: 1px dotted var(--white);
}

.wp-block-coblocks-accordion-item details[open] summary,
.wp-block-coblocks-accordion-item__content {
  border-radius: 0;
  border-color: var(--grey-tertiary);
}
/* group block */
[class*="__inner-container"]
  > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(
    .is-style-wide
  ) {
  max-width: 111rem;
  width: 100%;
}
/* Latest Posts Block */
.wp-block-latest-posts__list {
  list-style: none;
  margin-left: 0;
}

.wp-block-latest-posts__list li {
  margin-left: 0;
}
.entry-content ul.wp-block-latest-posts__list li:before {
  content: none;
}

.wp-block-latest-posts.has-dates li {
  padding-left: 0;
}

/* Metaslider */

.flexslider {
  position: relative;
}

.flex-direction-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  right: 0;
}

/* Break MetaSlider out of the __inner-container max-width constraint when
   its parent block group is set to full alignment.
   MetaSlider's outermost element is #metaslider_container_[id] (ID only, no
   class), which is what the __inner-container child rule constrains. */
.wp-block-group.alignfull .wp-block-group__inner-container {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
}

.wp-block-group.alignfull
  .wp-block-group__inner-container
  > [id^="metaslider_container"],
.wp-block-group.alignfull .wp-block-group__inner-container > .metaslider {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.wp-block-group.alignfull .metaslider,
.wp-block-group.alignfull .flexslider {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Gravity Form */
.gform-field-row--span-four {
  grid-row: span 4;
}

/* Search Results */

.archive-header {
  background-color: var(--grey-secondary) !important;
  padding: 4rem 0 !important;
}
.search-results h2.entry-title {
  text-align: left;
  max-width: 102.4rem;
  margin: 0 auto;
}
.search-results h2.entry-title a {
  font-size: 1.6rem;
  color: var(--blue-secondary);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.search-results .post-inner {
  padding-top: 0;
}

/* Press Media Contacts Footer */
.media-contacts {
  padding: 4rem;
  margin-top: 6rem;
}
.media-contacts h2 {
  text-align: center;
  margin-top: 1rem;
}
.media-contacts ul.regional-contacts,
.media-contacts ul.regional-contacts li {
  display: inline-block;
  list-style: none;
  text-align: center;
  margin-left: 0;
}

.media-contacts ul.regional-contacts li {
  padding-right: 1.5rem;
}

.media-contacts ul.regional-contacts li:before {
  content: none;
}

.media-contacts h3 {
  margin-bottom: 0;
  margin-top: 0;
}

.entry-content ul.case-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding-left: 0;
  max-width: 102.4rem;
  width: calc(100% - 8rem);
  border-radius: 0.25rem;
  background-color: var(--light-teal);
  border: 0.2rem solid var(--teal);
  padding: 2rem 2rem 0;
}

.entry-content ul.case-images li {
  list-style: none;
  width: calc(50% - 1rem);
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 2rem;
  padding-left: 0;
  max-width: 50%;
  text-align: center;
}

.entry-content ul.case-images li img {
  max-height: 80vh;
  width: auto;
}
.entry-content ul.case-images li:nth-child(even) {
  margin-left: 2rem;
}

.entry-content ul.case-images li::before {
  content: none;
}

.entry-content > *:last-child {
  margin-bottom: 6rem;
}

/* search page */

.search-results .case {
  margin-bottom: 6rem;
}

.facetwp-facet-first_name,
.facetwp-facet-last_name,
.facetwp-facet-incident_date {
  display: flex;
  justify-content: space-between;
}

.fdate-range-error {
  color: #c0392b;
  font-size: 0.85em;
  margin: 0.3em 0 0;
}

.fdate-range-invalid .facetwp-date {
  border: 2px solid #c0392b;
}

.fdate-error-star {
  color: #c0392b;
  font-weight: bold;
}

.facetwp-facet-incident_date input[type="text"] {
  width: calc(50% - 10px);
}

.facetwp-facet-first_name input[type="text"],
.facetwp-facet-last_name input[type="text"] {
  width: calc(100% - 67px);
}

.page-id-44 .entry-content {
  padding-top: 0;
}

.post-type-archive-custom_case_fields .label,
.search-results .label {
  font-weight: bold;
}

.facetwp-facet-case_status .facetwp-checkbox {
  display: block;
  margin-bottom: 0.4rem;
  cursor: pointer;
}

.facetwp-facet-case_status .facetwp-display-value {
  margin-left: 0.4rem;
}

.fcomplete-wrap {
  display: none;
}

/* all cases archive */
.post-type-archive-custom_case_fields .case {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.post-type-archive-custom_case_fields h2,
.post-type-archive-custom_case_fields h3 {
  width: 100%;
}
.post-type-archive-custom_case_fields h2 a {
  color: var(--teal) !important;
}

.post-type-archive-custom_case_fields .all-cases-wrap:nth-of-type(odd) {
  background: var(--light-teal);
  padding: 2rem;
  border: 1px solid var(--teal);
  margin-top: 0.5rem;
}

.post-type-archive-custom_case_fields .all-cases-wrap:nth-of-type(even) {
  background: var(--white);
  padding: 2rem;
  border: 1px solid var(--teal);
  margin-top: 0.5rem;
}
/*.card-inner
/* ada scan 8-15-25*/

.swp_social_panel.swp_default_full_color .swp_facebook,
html body .swp_social_panel.swp_individual_full_color .swp_facebook:hover,
body .swp_social_panel.swp_other_full_color:hover .swp_facebook {
  background: #0b55b7; /*#1877f2;*/
  border: 1px solid #0b55b7; /*#0b5fcc;*/
}

.swp_social_panel.swp_flat_fresh.swp_default_full_color .swp_facebook,
html
  body
  .swp_social_panel.swp_flat_fresh.swp_individual_full_color
  .swp_facebook:hover,
body
  .swp_social_panel.swp_flat_fresh.swp_other_full_color:hover
  .swp_facebook:not(:hover) {
  border: 1px solid #0b55b7; /*#1877f2;*/
}

/*.swp_social_panel .nc_tweetContainer:not(.total_shares):not(.total_sharesalt) {overflow: auto !important;}

/*.swp_social_panel .iconFiller {overflow: visible;}*/

/* Styles for the Participaing Agency Page*/
.reporting-agency {
  margin-top: 1rem !important;
  margin-left: 2rem !important;
  margin-bottom: 1rem !important;
}
.agency-wrapper-ra {
  display: flex;
  flex-wrap: wrap;
  border-radius: 0.8rem;
  background-color: var(--light-teal);
  border: 0.2rem solid var(--teal);
  padding: 2rem;
  margin-bottom: 6rem;
}

.agency-wrapper-ra {
  margin: 6rem auto 6rem;
  max-width: 102.4rem;
  width: calc(100% - 8rem);
}

.agency-wrapper-ra dt {
  flex-basis: 200px;
}
.agency-wrapper-ra dd {
  flex-basis: calc(100% - 200px);
}

.agency-wrapper-ra dt {
  flex-basis: 120px;
}
.agency-wrapper-ra dd {
  flex-basis: calc(100% - 120px);
}

.agency-wrapper-ra:nth-child(odd) {
  background-color: #eef2f4;
}

.agency-wrapper-ra:nth-child(even) {
  background-color: #fff;
}

@media screen and (max-width: 600px) {
  .agency-details dl,
  .agency-wrapper-ra dl {
    display: block !important;
  }
  .agency-details dl dt,
  .agency-wrapper-ra dl dt {
    text-align: left;
  }
}