/* DC Campaigns global.css - ported from dc_agency_statehood/css/global.css */
/* Mobile-first styles. Also holds any global CSS that applies site-wide. */

/* Primary tabs active-state — D10 core marks the active local task with an
   "is-active" class on the <a> (plus aria-current="page"), not "active" on
   the <li> like D7 did. The ported css/system.menus.css rule
   "ul.primary li.active a" alone never matches D10 markup, so the active
   tab never got its white/no-bottom-border treatment. Add the is-active
   variant alongside it (matches the same fix in dc_agency_new/css/global.css). */
ul.tabs.primary li.active a,
ul.tabs.primary li a.is-active {
  background-color: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');
body, h1#page-title.title, h2 { font-family: 'Montserrat', sans-serif; }

.front article, .front .zone-content-wrapper div.item-list, .front div.feed-icon,
.front #zone-content .node, .front .zone-content-wrapper nav.node-links, .view-frontpage {
  display: none;
}
h1 {
  font-size: 26px;
}
.front .grid-12 {
  float: none;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.front .region-content {
  margin-top: -100px;
  margin-bottom: 20px;
}
.not-front h2 {
  font-size: 14px;
  color: #2F4F6B;
}
.region-content {
  margin-bottom: 20px;
}
#page {
  transition: margin-left .5s;
}

.zone-preface-wrapper, .zone-postscript-wrapper {
  background-color: #D15050;
}
.zone-postscript-wrapper {
  padding: 50px;
}
.section-header {
  background-color: #2F4F6B;
}
.section-footer {
  background-color: #2F4F6B;
}
.region-agency-home-3col {
  background-color: #fff;
}
.zone-footer-wrapper {
  background-color: #2F4F6B;
  color: #fff;
}
.zone-content-wrapper, .region-agency-home-lower-first-inner {
  margin-top: 50px;
}

.region-agency-home-rotator {
  max-height: 250px;
  overflow: hidden;
}
.region-agency-home-main-content, .region-agency-home-main-content a, .zone-footer-wrapper a {
  color: #fff;
  text-decoration: none;
}
#region-agency-home-main-content, .grid-24.region-agency-home-main-content {
  font-size: 18px;
  margin-top: 40px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  border: 5px solid #fff;
  display: block;
  clear: both;
  background-color: #D15050;
  color: #fff;
  padding: 50px;
  box-shadow: 0px 0px 15px #888888;
  position: relative;
  top: -150px;
}
.grid-24.region-agency-home-main-content {
  float: none;
}

.region-agency-home-main-content .views-field-field-image-link-url {
  display: none;
}
.region-agency-home-main-content .views-field-field-image-link-url .field-content {
  padding: 10px;
}
.region-agency-home-main-content .views-field-field-image-link-url .field-content img {
  background-color: #fff;
  padding: 5px;
}
.region-agency-home-main-content .view-display-id-homepage_d .view-content table {
  width: 100%;
}
.region-agency-home-main-content .view-display-id-homepage_d .views-field-title,
.region-agency-home-main-content .view-display-id-homepage_d .views-field-title-field {
  display: none;
}
.region-agency-home-main-content .view-display-id-homepage_d .views-field-body .field-content {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
.envelope-logo {
  width: 275px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -100px;
  top: -100px;
}


/* Events Section */
.view-display-id-upcoming_events {
  color: #2F506C;
  font-size: 16px;
  text-transform: uppercase;
}
.block-views-features-blocks-upcoming-events h2.block-title {
  display: none;
}

/* D7 parity: the "Upcoming Events" block title (restored with .block-title in
   dc_campaigns_preprocess_views_view) is emitted by Views inside .view-header,
   which lives INSIDE .view-display-id-upcoming_events and so inherits its navy
   (#2F506C) text color. In D7 the block title sat OUTSIDE that container (in
   .block-inner) and stayed the default dark heading color. Reset it so the
   heading matches D7 instead of bleeding the events-list navy. */
.view-display-id-upcoming_events .view-header h2.block-title {
  color: #000;
  text-transform: none;
}

.view-display-id-upcoming_events .view-empty a, .view-display-id-upcoming_events .view-footer a,
.view-display-id-homepage_d .views-field-field-external-link-url a {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
  padding: 10px;
  background-color: #2F506C;
  text-decoration: none;
  font-weight: 300;
  text-transform: uppercase;
  margin: 20px;
}
.view-display-id-upcoming_events .view-footer a {
  clear: both;
}
.view-display-id-upcoming_events .view-footer a img,
.view-display-id-homepage_d .views-field-field-external-link-url a img {
  display: none;
}
.view-display-id-upcoming_events .views-field-field-date-time-rep {
  float: left;
  min-width: 175px;
  clear: right;
  min-height: 50px;
}
.view-display-id-upcoming_events .views-field-title {
  min-height: 50px;
}
.view-display-id-upcoming_events .views-row {
  border-bottom: 1px solid #2F506C;
}
.view-display-id-upcoming_events {
  text-align: center;
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}
/* Updated path to use theme-relative URL */
.view-display-id-upcoming_events .view-empty::before {
  content: url('../images/calendarIconSmall.png');
  display: block;
  margin: 20px;
}
/* End Events Section */

.front #zone-postscript,
.front #zone-postscript a,
.front #zone-postscript a:visited,
.front #zone-postscript a:active,
.front #zone-postscript a:link {
  color: #fff;
}

.bx-controls-direction {
  display: none;
}

.view-display-id-responsive_homepage_banner_full img {
  width: 100%;
  height: 100%;
}
.zone-footer-wrapper {
  padding: 20px 0 0 0;
}
.footer-connected {
  float: right;
  border-left: 1px solid #fff;
  text-align: center;
  width: 75px;
}
.footer-connected .title {
  margin-bottom: 10px;
  display: none;
}
.footer-connected img {
  max-height: 25px;
}
.footer-links {
  line-height: 50px;
  width: 200px;
  margin-left: 10px;
}
.footer-links .link-list {
  border-left: 1px solid rgb(255, 255, 255);
  padding-left: 10px;
  list-style: none;
}

.footer-logo {
  display: none;
}

.header {
  min-height: 55px;
  color: #fff;
}
.header-agency-logo {
  float: left;
  position: absolute;
  z-index: 100;
}
.header-agency-logo img {
  height: 100px;
}
.header-icons {
  width: 100%;
  float: left;
  text-align: right;
}
.header-icons img {
  height: 20px;
}
.header-search, .header-menu {
  float: right;
  margin: 0 15px;
}
.header-search {
  display: none;
}
.header-menu {
  margin-top: 20px;
}
.header-title, .site-name-slogan {
  display: none;
}
input.sidenav-search {
  border: 1px solid #2F4F6E;
  padding: 20px;
  font-size: 14px;
  padding-right: 25px;
}

/* Slide-out navigation sidebar */
#block-domain-conf-domain-main-links {
  padding-top: 50px;
  position: fixed;
  right: 0;
  height: 100%;
  z-index: 1000;
  background-color: #E5E5E5;
  width: 0;
  text-align: center;
  overflow-x: hidden;
  transition: 0.5s;
  top: 0px;
}
#block-domain-conf-domain-main-links button {
  background: 0;
}
#block-domain-conf-domain-main-links li a,
#block-domain-conf-domain-main-links li a:active,
#block-domain-conf-domain-main-links li a:link,
#block-domain-conf-domain-main-links li a:visited {
  color: #2F4F6E;
  text-decoration: none;
}
#block-domain-conf-domain-main-links ul li {
  list-style: none;
  padding: 20px 5px;
  border-bottom: 1px solid #2F4F6E;
  text-align: left;
}
#block-domain-conf-domain-main-links ul li.last {
  border-bottom: 0;
}
#block-domain-conf-domain-main-links ul li.expanded:after {
  display: inline-block;
  content: ' ';
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  border: solid #2F4F6E;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 5px;
  float: right;
}
#block-domain-conf-domain-main-links ul li.expanded .menu-sub {
  display: none;
}
#block-domain-conf-domain-main-links ul.menu-sub {
  margin-right: auto;
  margin-left: auto;
  width: 230px;
  padding-bottom: 10px;
}

.closebtn {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 50px;
  background-color: #D15050;
  text-align: center;
  width: 50px;
  line-height: 50px;
}
a.closebtn {
  text-decoration: none;
  color: #fff;
  font-family: Optima;
}
.sidenav-search {
  min-height: 35px;
  margin: 10px 0;
  text-align: center;
}
.sitenav-search input {
  -webkit-box-shadow: inset 2px 2px 2px 0px #dddddd;
  -moz-box-shadow: inset 5px 5px 5px 0px #dddddd;
  box-shadow: inset 2px 2px 2px 0px #dddddd;
}
/* Updated path to use theme-relative URL */
.dcSearchButtonIcon {
  width: 30px;
  height: 18px;
  background: url('../images/Maglass2x_blue.png') no-repeat scroll 0px 0px / 17px 17px transparent;
  z-index: 20;
  padding-top: 4px;
}
.dcSearchButtonContainer {
  height: 40px;
  background-color: transparent;
  border: 0;
  padding-top: 5px;
  margin: 0px 0px -10px -30px;
}
#block-domain-conf-domain-main-links .footer-connected {
  text-align: center;
  color: #fff;
  float: none;
  margin-top: 20px;
  width: auto;
  border-left: 0;
}
#block-domain-conf-domain-main-links .footer-connected .title {
  display: block;
}
#block-domain-conf-domain-main-links .footer-connected .icon,
.footer-connected .icon {
  margin-top: 5px;
  padding: 10px;
  display: block;
}
#block-domain-conf-domain-main-links .footer-connected .icon {
  display: inline-block;
}

.block-menu-block-1 {
  /* display: none; */
}

.owl-carousel {
  z-index: 0;
}
.zone-postscript .owl-nav {
  display: none;
}

.slide img, .slide #text {
  float: left;
}
.slide #text {
  background-color: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-weight: bold;
  margin-top: -80px;
  float: left;
  text-align: center;
  padding: 10px 30px;
}

.block-views-features-blocks-homepage-a,
.block-views-features-blocks-homepage-b,
.block-views-features-blocks-homepage-c {
  min-height: 200px;
  padding: 20px;
  color: #fff;
  text-align: center;
}
.block-views-features-blocks-homepage-a ul,
.block-views-features-blocks-homepage-b ul,
.block-views-features-blocks-homepage-c ul {
  padding-left: 0;
}
.block-views-features-blocks-homepage-a ul li,
.block-views-features-blocks-homepage-b ul li,
.block-views-features-blocks-homepage-c ul li {
  list-style-position: inside;
}
.block-views-features-blocks-homepage-a h2.views-field-title,
.block-views-features-blocks-homepage-b h2.views-field-title,
.block-views-features-blocks-homepage-c h2.views-field-title,
.block-views-features-blocks-homepage-a h2.views-field-title-field,
.block-views-features-blocks-homepage-b h2.views-field-title-field,
.block-views-features-blocks-homepage-c h2.views-field-title-field {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: normal;
  font-size: 20px;
}

img.feature-icon {
  width: 60px !important;
  margin-left: auto;
  margin-right: auto;
}
.view-id-agency_home_responsive .views-field-body .slide .item-list ul {
  list-style-type: none;
}

#region-agency-home-lower-first .owl-carousel,
#region-agency-home-lower-second .owl-carousel {
  width: 75% !important;
}
.view-display-id-homepage_b {
  text-align: center;
}
.view-display-id-homepage_b table.views-view-grid {
  width: 100%;
}
.image-list {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.custom-title {
  color: #006295;
  font-family: 'Montserrat';
  border-bottom: 1px solid #006295;
  font-size: 20px;
}
.feature-image {
  display: block;
  width: 100%;
  border-bottom: 1px solid #006295;
  padding: 20px 0;
}

.owl-theme .owl-dots .owl-dot.active span {
  background: #fff;
}
.owl-theme .owl-dots .owl-dot span {
  background: 0;
  border: 1px solid #fff;
}

.region-agency-home-rotator-inner .owl-carousel .owl-item img {
  height: 100%;
}


/* Newsroom / Resources / Events listing rows */
.view-newsroom .views-field-field-date,
.view-resources .views-field-field-date,
.view-events-landing .views-field-field-date-time-rep {
  float: left;
  min-width: 150px;
  clear: right;
  background-color: #D15050;
  color: #fff;
  font-weight: bold;
  margin-right: 20px;
  padding: 10px;
}
.view-newsroom .views-field-field-date,
.view-resources .views-field-field-date {
  min-width: 100px;
}
.view-newsroom .views-field-title,
.view-resources .views-field-title-1,
.view-events-landing .views-field-title {
  min-height: 50px;
}
.view-newsroom .views-row,
.view-resources .views-row,
.view-events-landing .views-row,
.view-services .views-row,
.view-id-biographies .views-row {
  margin-bottom: 20px;
  border-bottom: 1px solid #CCC;
  padding-bottom: 5px;
  clear: both;
}
.view-services .views-row,
.view-id-biographies .views-row {
  min-height: 100px;
}
.view-newsroom .views-row,
.view-resources .views-row,
.view-events-landing .views-row {
  min-height: 60px;
}
.view-resources .views-field-body,
.view-resources .views-field-field-attachment {
  display: none;
}
.view-services .views-field-field-image {
  display: none;
}

/* Form element sizing */
#edit-sort-by, #edit-sort-order {
  height: 50px;
  min-width: 75px;
  margin-top: 5px;
}
#edit-field-release-type-tid {
  height: 50px;
  min-width: 175px;
  margin-top: 5px;
}
#edit-field-date-value-max-datepicker-popup-1,
#edit-field-date-value-min-datepicker-popup-1,
#edit-keys,
#edit-before-value-datepicker-popup-0,
#edit-after-value-datepicker-popup-0,
#edit-before,
#edit-after {
  height: 30px;
  min-width: 175px;
}

.filterButton {
  position: absolute;
  top: -24px;
  right: 12px;
  text-align: center;
  display: block;
  border: 1px solid #CCC;
  border-radius: 5px;
  background-color: #fff;
  width: 70px;
  line-height: 50px;
}
.front .filterButton {
  display: none !important;
}

/* Date picker calendar icon - updated to theme-relative path */
.form-item-field-date-value-min-date input,
.form-item-field-date-value-max-date input,
.form-item-after-value-date input,
.form-item-before-value-date input,
.form-item-field-date-time-rep-value-value-date input,
.form-item-field-date-time-rep-value2-value-date input {
  background-image: url('../images/CalendarThumb.png');
  background-repeat: no-repeat;
  background-position: 95% 50%;
}

/* Mobile filter */
#mobile-filter #views-exposed-form-newsroom-page-8,
#mobile-filter #block-views-exp-newsroom-v2-page-8,
#mobile-filter #views-exposed-form-resources-page,
#mobile-filter #views-exposed-form-resources-page-1,
#mobile-filter #views-exposed-form-events-landing-page,
#mobile-filter #views-exposed-form-services-page {
  background-color: #EBECEE;
  padding: 18px;
  width: 240px!important;
}

/* Override inline CSS injected via the /events view's own header config
   (config/default/views.view.events_landing.yml, display "page" ->
   header.area.content.value) -- it hard-codes absolute positioning
   assuming a narrow ~220px sidebar and stacks each filter widget at fixed
   pixel top-offsets, which conflicts with this theme's own float-based
   exposed filter layout (.views-exposed-form .views-exposed-widget below)
   and breaks outside that narrow context. Reset back to normal flow so
   the theme's own layout rules apply. dc_agency_new renders this same view
   header unaffected -- fix here, not in the shared Views config.
*/
#views-exposed-form-events-landing-page {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
}
#views-exposed-form-events-landing-page .views-widget-filter-field_date_time_rep_value,
#views-exposed-form-events-landing-page .views-widget-filter-field_date_time_rep_value2,
#views-exposed-form-events-landing-page .views-widget-filter-keys,
#views-exposed-form-events-landing-page .views-widget-filter-type,
#views-exposed-form-events-landing-page .views-widget-filter-field_topic_tid,
#views-exposed-form-events-landing-page .views-widget-filter-field_audience_tid,
#views-exposed-form-events-landing-page .views-widget-filter-field_ward_tid,
#views-exposed-form-events-landing-page .views-widget-filter-field_police_service_area_tid {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
}
#views-exposed-form-events-landing-page .views-widget-sort-by,
#views-exposed-form-events-landing-page .views-widget-sort-order {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
#views-exposed-form-events-landing-page .views-widget-sort-by .form-item,
#views-exposed-form-events-landing-page .views-widget-sort-order .form-item {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
#views-exposed-form-events-landing-page .views-submit-button,
#views-exposed-form-events-landing-page .views-reset-button {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* Override inline CSS injected via the /publications view's own header
   config (config/default/views.view.resources.yml, display "page" ->
   header.area.content.value) -- same absolute-positioning sidebar hack as
   /events-landing above, same fix: reset back to normal flow. */
#views-exposed-form-resources-page {
  position: static !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
}
#views-exposed-form-resources-page .views-widget-filter-after,
#views-exposed-form-resources-page .views-widget-filter-before,
#views-exposed-form-resources-page .views-widget-filter-keys,
#views-exposed-form-resources-page .views-widget-filter-type {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
}
#views-exposed-form-resources-page .views-widget-sort-by,
#views-exposed-form-resources-page .views-widget-sort-order {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
#views-exposed-form-resources-page .views-widget-sort-by .form-item,
#views-exposed-form-resources-page .views-widget-sort-order .form-item {
  position: static !important;
  top: auto !important;
  left: auto !important;
}
#views-exposed-form-resources-page .views-submit-button,
#views-exposed-form-resources-page .views-reset-button {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

/* Override inline CSS injected via the /newsroom view's own header config
   (config/default/views.view.newsroom.yml, display "page-8" ->
   header.area.content.value). The form wrapper, sort-by/sort-order and
   their .form-item children are pulled out of normal flow via position;
   the filter widgets (date wrapper, keys, release type) instead use fixed
   width/height/padding sizing to fit the same 220px sidebar hack. Reset
   both back to normal flow / intrinsic sizing. */
#views-exposed-form-newsroom-page-8 {
  position: static !important;
  top: auto !important;
  width: auto !important;
}
#views-exposed-form-newsroom-page-8 .views-widget-sort-by,
#views-exposed-form-newsroom-page-8 .views-widget-sort-order {
 /* position: static !important;*/
  /*top: auto !important;
  left: auto !important;*/
}
#views-exposed-form-newsroom-page-8 .views-widget-sort-by .form-item,
#views-exposed-form-newsroom-page-8 .views-widget-sort-order .form-item {
 /* position: static !important;
  top: auto !important;
  left: auto !important;*/
}
#views-exposed-form-newsroom-page-8 .form-actions {
 /* position: static !important;*/
  top: auto !important;
}
#views-exposed-form-newsroom-page-8 .views-widget-filter-field_date_time_rep_value_wrapper,
#edit-field-date-time-rep-value-wrapper--2,
#views-exposed-form-newsroom-page-8 .views-widget-filter-keys,
#views-exposed-form-newsroom-page-8 .views-widget-filter-field_release_type_tid {
  width: auto !important;
  height: auto !important;
}
#views-exposed-form-newsroom-page-8 #edit-field-release-type-tid {
  width: auto !important;
  height: auto !important;
}

#mobile-filter.views-exposed-widget {
  float: none;
}
#mobile-filter .views-submit-button {
  clear: left;
}
#mobile-filter {
  display: visible;
  position: absolute;
  top: 20px;
  right: 5px;
  border: 1px solid #ccc;
  -moz-box-shadow: 2px 2px 5px 1px #fff;
  z-index: 20;
}
.form-item-sort-by, .form-item-sort-order {
  width: 75px;
}
.views-widget-sort-by, .views-widget-sort-order {
  float: left;
}
.views-exposed-form .views-exposed-widget {
  float: left;
}
#mobile-filter .views-widget-sort-by {
  margin-right: 22px;
}

/* ---- Mobile filter panel: normalise ALL exposed widgets to normal flow ----
   The listing views (resources=/publications, events-landing=/events, newsroom,
   services) inject a <style> block via their view header config that
   absolutely-positions the exposed-form widgets into a desktop sidebar layout
   (left offsets, fixed widths). That layout is correct on DESKTOP, but once
   dcAgency.js moves the exposed form into #mobile-filter-container on mobile the
   absolute offsets make the widgets overlap inside the narrow panel. Reset every
   in-panel widget (and its inner .views-widget / .form-item) back to normal flow
   so they stack. This is the general fix — it also covers rich event views with
   extra taxonomy filters (topic/audience/ward/PSA, e.g. fedsupport /events), not
   just the sort widgets.

   Specificity: the injected rules are `#views-exposed-form-<id> .views-widget-*`
   (1 id + 1 class) and `… .form-item` (1 id + 2 classes). Scoping under BOTH
   `#mobile-filter #mobile-filter-container` (2 ids) beats them regardless of
   stylesheet load order, and only applies while the form lives in the panel, so
   the desktop sidebar layout (outside the container) is left untouched. */
#mobile-filter #mobile-filter-container .views-exposed-widget,
#mobile-filter #mobile-filter-container .views-exposed-widget .views-widget,
#mobile-filter #mobile-filter-container .views-exposed-widget .form-item {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Sort-by / sort-order widgets need side-by-side sizing on top of the reset.
   D10 wraps the sort form-item in an extra width:0 `<div class="views-widget">`
   (absent in D7) that breaks float shrink-wrap, so the wrapper would collapse to
   ~16px and overlap the two selects. Give the wrapper an explicit width (D7 prod
   renders these ~91px). */
#mobile-filter-container #edit-sort-by-wrapper,
#mobile-filter-container #edit-sort-order-wrapper {
  position: static !important;
  top: auto !important;
  left: auto !important;
  /* D10 wraps the sort form-item in an extra `<div class="views-widget">`
     (absent in D7) that collapses to width:0, so the float wrapper can't
     shrink-wrap its <select> and drops to ~16px, overlapping the two selects.
     Give the wrapper an explicit width (D7 prod renders these ~91px) instead
     of relying on the broken shrink-wrap chain. */
  width: 90px !important;
}
/* Trim the sort-by right margin (the shared #mobile-filter rule sets 22px) so
   the two 90px widgets + gap fit the ~203px-wide panel on one row instead of
   wrapping. */
#mobile-filter-container #edit-sort-by-wrapper {
  margin-right: 12px !important;
}
/* And tame the <select> itself: D10's Claro base forces
   `select.form-select { min-width: 200px }` (no D7 equivalent) plus a theme
   `#edit-sort-* { width: 100px }`. Constrain the in-panel sort selects so they
   fit their 95px wrapper and sit side by side like D7 prod. Scoped to the
   panel + wrapper id (2 ids + 1 class) so desktop is untouched. */
#mobile-filter-container #edit-sort-by-wrapper .form-select,
#mobile-filter-container #edit-sort-order-wrapper .form-select {
  width: 84px !important;
  min-width: 0 !important;
}
/* The injected sidebar hack actually absolutely-positions the inner
   `.form-item` (not the wrapper), so the label + <select> escape to the top of
   the panel and overlap the date fields. Reset the in-panel form-item back to
   normal flow so it renders inside its (now static) wrapper. Specificity
   2 ids + 1 class beats the injected `#views-exposed-form-<id>
   .views-widget-sort-* .form-item` (1 id + 2 classes). */
#mobile-filter-container #edit-sort-by-wrapper .form-item,
#mobile-filter-container #edit-sort-order-wrapper .form-item {
  position: static !important;
  top: auto !important;
  left: auto !important;
}

select.form-select,
#edit-keys,
#edit-field-date-value-min-datepicker-popup-0,
#edit-field-date-value-max-datepicker-popup-0,
#edit-field-date-value-min-datepicker-popup-1,
#edit-field-date-value-max-datepicker-popup-1,
#edit-before-value-datepicker-popup-0,
#edit-after-value-datepicker-popup-0,
#edit-field-date-time-rep-value-value-datepicker-popup-0,
#edit-field-date-time-rep-value2-value-datepicker-popup-0,
#edit-before,
#edit-after,
#edit-tid {
  border: 1px solid #ccc;
  padding: 4px;
  height: 40px;
  min-width: 200px;
}
select,
#edit-keys,
#edit-tid {
  border-radius: 3px;
}
#edit-tid, #edit-field-topic-tid {
  max-width: 200px;
}

.region-sidebar-first .views-field.views-field-field-image {
  padding: 15px;
  width: 206px;
  float: left;
  margin-right: 20px;
}
.view-agency-information-details {
  padding: 6px 6px 6px 12px;
  margin: 0 20px;
}

/* Weather widget */
#weather {
  width: 425px;
  margin: 0px auto;
  text-align: center;
  text-transform: uppercase;
  background: #2F4F6B;
}
#weather h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather ul {
  margin: 0;
  padding: 0;
}
#weather li {
  background: rgba(255, 255, 255, 0.90);
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}
#weather .currently {
  margin: 0 20px;
}
.weather-day {
  clear: both;
}
.weather-icon {
  float: left;
}
.weather-temp {
  float: right;
}
.weather-info {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
div.current-weather-icon img {
  height: 150px;
}

/* Publication/document disclaimers */
.dcHorizRuleFull {
  border-top: 1px solid #ccc;
  margin: 10px 0;
}
.dcDisclaimerContent {
  list-style: none;
  padding: 0;
  font-size: 12px;
}
.publication-disclaimer {
  color: #555;
}

/* Release job disclaimer */
.release-job-disclaimer {
  font-size: 12px;
  color: #555;
  border-top: 1px solid #ccc;
  margin-top: 20px;
  padding-top: 10px;
}

/* ReadSpeaker button */
.readspeaker_button1 {
  display: none;
}

/* Migration fix: D7 image width/height attributes were converted to inline
   styles on a wrapper div. Force the img inside to fill that container. */
/* div[style*="width"][style*="height"] > img {
  width: 100%;
} */




.pager__items .pager, .item-list .pager {
  clear: both;
  text-align: center;
}
.pager__items .pager__item, .item-list .pager li {
  background-image: none;
  display: inline;
  list-style-type: none;
  padding: 0.5em;
}
.pager__current.is-active{
  font-weight: bold;
}

.front span.date-display-single {
  margin-right: 10px;
}

.learn-more a{
  color:#fff!important;}
  .banner-caption-container{
  position: absolute;
  z-index: 10;
  }

  /* his zone-preface-wrapper on select sites */
  .domain--mpdc-dc-gov .zone-preface-wrapper{
    display:none;
  }


  /* view css */
  .views-exposed-form .views-exposed-widget {
    float: left; /* LTR */
    padding: .5em 1em 0 0; /* LTR */
  }
  
  .views-exposed-form .views-exposed-widget .form-submit {
    margin-top: 1.6em;
  }
  
  .views-exposed-form .form-item,
  .views-exposed-form .form-submit {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .views-exposed-form label {
    font-weight: bold;
  }
  
  .views-exposed-widgets {
    margin-bottom: .5em;
  }
  
  /* table style column align */
  .views-align-left {
    text-align: left;
  }
  .views-align-right {
    text-align: right;
  }
  .views-align-center {
    text-align: center;
  }
  
  /* Remove the border on tbody that system puts in */
  .views-view-grid tbody {
    border-top: none;
  }
  
  .view .progress-disabled {
    float: none;
  }
  
/* -------------------------------------------------------------------------
 * Category C — exposed-filter overlap (newsroom).
 * The shared view-header CSS positions the reset button at left:50px, a gap
 * tuned to D7's narrow buttons. D10's default button is ~75px wide, so reset
 * overlaps submit. Nudge it clear. (Events is handled via ID normalization
 * in dc_campaigns_form_alter(); newsroom has no ID-based width rule, so this
 * theme-CSS override is the counterpart — the shared view header is untouched.)
 * See docs/fixes/exposed-filter-overlap-id-normalization.md
 * ---------------------------------------------------------------------- */
.view-newsroom .views-exposed-widgets .views-reset-button {
  left: 90px !important;
}

/* Events end-date wrapper: the shared view-header CSS applies flex-basis:215px
 * only to #edit-field-date-time-rep-value2-wrapper, but D10 renders the end-date
 * field with its native id (…-end-value-wrapper) — which we keep, because the
 * input-width and calendar-icon rules require the native name. Match the start
 * field's column width here instead of renaming the id (see form_alter note). */
.view-events-landing .views-exposed-widgets #edit-field-date-time-rep-end-value-wrapper {
  flex-basis: 215px !important;
}

/* Emergency-alerts block: hide when there is no active alert. Without this
 * the empty Views block still renders and per-site CSS paints its red border
 * (.view-display-id-emergency_alerts_block { border:1px solid #ff0000 }) as a
 * red-outlined empty box at the top of the page. Class added by
 * dc_campaigns_preprocess_block() when the alerts view returns no rows. */
.dc-empty-alerts-block {
  display: none;
}

/* Hide the "featured homepage events" block when its view is empty (no events).
 * D7 omitted the block when empty; D10 renders the empty wrapper, and on dcarts
 * per-site inline CSS gives that empty block ~500px of height (a stray empty
 * section) — prod hides it in favour of dcarts's custom events block. The empty
 * view is tagged .dc-empty-featured-events by dc_campaigns_preprocess_views_view();
 * hide the whole containing block so any per-site height/background collapses too.
 * :has() is scoped to this block id so nothing else is affected; harmless on the
 * many sites where the empty block already collapses to 0. A site that actually
 * has events isn't tagged, so its block still shows.
 * See docs/fixes/dcarts-empty-featured-homepage-events-block.md. */
[id^="block-views-featured-homepage-events"]:has(.dc-empty-featured-events) {
  display: none;
}

/* Category F: collapse the empty homepage banner rotator region so per-site
 * preface background/padding doesn't render as a stray colored bar under the
 * lead image (e.g. climatecommission's navy bar). The desktop/mobile banner
 * views are tagged .dc-empty-rotator-view by dc_campaigns_preprocess_views_view()
 * when they return no rows. When EVERY banner view in the region is empty (no
 * non-empty .view remains), drop the region-inner's vertical padding so the
 * region collapses to zero height — matching D7, which omitted the region when
 * empty. A site with a real banner keeps a populated .view, so its framing
 * padding is untouched. See docs/fixes/empty-rotator-region-collapse-F.md. */
#region-agency-home-rotator .region-inner:not(:has(.view:not(.dc-empty-rotator-view))) {
  padding-top: 0;
  padding-bottom: 0;
}

/* Rich-text-editor alignment classes carried in migrated D7 body content
 * (rtecenter / rteleft / rteright / rtejustify). In D7 these were styled by the
 * WYSIWYG/CKEditor module CSS — which D10 does NOT load — so migrated content
 * authored as e.g. <p class="rtecenter"><img></p> lost its centering and fell
 * back to left. Restore the D7 alignment. Category J (text/image alignment).
 * See docs/fixes/rte-alignment-classes.md. */
.rtecenter  { text-align: center; }
.rteleft    { text-align: left; }
.rteright   { text-align: right; }
.rtejustify { text-align: justify; }

/* ---------------------------------------------------------------------------
 * Custom responsive news tabs (Category R quicktabs) — PATTERN-BASED.
 *
 * Several campaign domains (ora-cfo, mpdc, dhs, dyrs, dmpsj, dcrb, + any future)
 * replace the native quicktabs news block with a custom "responsive tabs" UI
 * built by per-site inline JS (in their system_use node): it hides
 * #quicktabs-agency_featured_news_home via its own inline <style> and injects
 * sibling <ul class="tabs"> + <div class="tab_container"> (desktop tabs) and
 * <h3 class="tab_drawer_heading"> (mobile accordion) into the block's .content,
 * cloning each populated tab's view.
 *
 * Two GLOBAL dc_campaigns rules — intentionally added for OTHER sites — break
 * this, so we override them ONLY where the custom tabs are actually present:
 *   1. quicktabs-sky.css `.quicktabs-wrapper { display:block !important }`
 *      force-shows the original quicktabs, defeating the site's inline
 *      #quicktabs-...{display:none} → duplicate list next to the custom tabs.
 *      We re-hide it (!important to beat the global !important; #id specificity).
 *   2. dc-campaigns-alpha-default-normal.css (desktop breakpoint) `.front
 *      ul.tabs { display:none }` ("hide mobile newsroom block") hides the
 *      custom DESKTOP tabs. We re-show them at >=980px (mobile keeps the drawer).
 *
 * Gated on `:has(ul.tabs)` SCOPED TO the news block, so it fires only when a
 * site actually injected the custom desktop tab list — standard quicktabs sites
 * (no ul.tabs in this block) are untouched, and Drupal's page-level admin
 * `ul.tabs.primary` is never inside this block. This replaces the earlier
 * per-domain scoping (`domain-ora-cfo`/`domain--mpdc`) which MISSED dhs, dyrs,
 * and the preview sites — 6 domains use this pattern, only 2 were covered.
 * The custom .tabs live OUTSIDE #quicktabs-agency_featured_news_home (siblings
 * in .content), so hiding the wrapper does not hide them. Matches D7 / prod.
 * See docs/fixes/ora-cfo-mpdc-custom-news-tabs-desktop.md.
 * ------------------------------------------------------------------------- */
#block-quicktabs-agency-featured-news-home:has(ul.tabs) #quicktabs-agency_featured_news_home {
  display: none !important;
}

@media (min-width: 980px) {
  #block-quicktabs-agency-featured-news-home:has(ul.tabs) ul.tabs {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
 * Category E — hero/banner overlap (together, resilient, mayor).
 *
 * On these homepages the rotator/banner <img> stacks above a positioned overlay
 * element that has z-index:auto, so the overlay is hidden or clipped behind the
 * image:
 *   - together : the caption box #text renders behind the slide image → the
 *     right side of the hero shows as a black area with no text.
 *   - resilient: the intro feature box (#region-agency-home-main-content /
 *     .grid-24.region-agency-home-main-content) has its top cut off by the banner.
 *   - mayor    : the green .callout-nav's top is covered by the navy hero band.
 *
 * Lift each overlay above the image with a small z-index (the image is z:auto;
 * each target is already position:absolute/relative, so no position change is
 * needed). Scoped per-domain because #text and #region-agency-home-main-content
 * are shared selectors used on many sites — only these domains overlap.
 * Theme CSS, no migratedev. See does-hero-overlay / rotator investigation docs.
 * ------------------------------------------------------------------------- */
body.domain-together-dc-gov #text {
  z-index: 10;
}

body.domain-resilient-dc-gov #region-agency-home-main-content,
body.domain-resilient-dc-gov .grid-24.region-agency-home-main-content {
  z-index: 10;
}

body.domain-mayormb-dc-gov .callout-nav {
  z-index: 10;
}

/* does, ddot : same overlap, exposed once the hero OwlCarousel actually runs.
 * The hero #text overlay (does: the "Welcome…" heading + search box + 6 service
 * links; ddot: the "I Need To…/Request Now" callout boxes) is a z-index:auto
 * sibling of the carousel image. OwlCarousel puts a transform on .owl-stage,
 * giving the image its own stacking context that paints ABOVE the overlay — so
 * the overlay content is present in the DOM but hidden behind the slide photo.
 * Lift #text above it (already position:absolute). Confirmed 2026-09-12 via
 * elementsFromPoint before/after (top element flips from the owl IMG to
 * .caption-text) + screenshot (full overlay renders = prod). This is the
 * "caption overlay positioning breaks now the carousel runs" item paused in
 * rotator-overlay-carousel-investigation-2026-07.md. Scoped per-domain (#text is
 * a shared selector) so the fix stays surgical. */
body.domain-does-dc-gov #text,
body.domain-ddot-dc-gov #text {
  z-index: 10;
}

/* 211warmline homepage banner image overlapped by the news block (Category MI).
 * The full-width banner (block-views-features-blocks-homepage-a, in
 * region-agency-home-3col-a) is painted over by the navy Featured News block,
 * which starts at the same top because this site's main-content block
 * (block-system-main) is empty — on D7 that block acted as a spacer pushing the
 * news block below the image. Lift the image above the overlapping navy so it
 * shows (the news content still renders below the image). One-off: only occurs
 * where the main-content spacer is empty, so scoped to this domain. */
body.domain-211warmline-dc-gov #block-views-features-blocks-homepage-a {
  position: relative;
  z-index: 2;
}