/* Leave 19px below the colored header and 16px below the tooltip body. */
.map-tooltip .tooltip__body {
  padding: 19px 0 16px;
  display: flow-root;
  text-align: left;
}

.map-tooltip .tooltip__stats {
  row-gap: 16px !important;
}

.map-tooltip .stat,
.map-tooltip .stat__desc {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.map-tooltip .stat__desc {
  display: block;
}

.map-tooltip .tooltip__stats + .stat__desc {
  margin-top: 16px;
}

.map-tooltip .tooltip__body > :first-child {
  margin-top: 0;
}

.map-tooltip .tooltip__body > :last-child {
  margin-bottom: 0;
}

.map-tooltip--no-election .tooltip__body {
  padding-left: 16px;
  padding-right: 16px;
}

/* Fixed width for no-election messages, independent of map size. */
.datamaps-hoverover:has(.map-tooltip--no-election) {
  width: 300px;
  max-width: none;
}

:root body .map-tooltip.map-tooltip--state.map-tooltip--no-election {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.map-tooltip--no-election .tooltip__header .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  white-space: nowrap;
}

.map-tooltip--no-election .tooltip__header .ev {
  float: none;
}

/* Small-state callouts sit on the right edge of the map. */
.map-small-states-hover .map-tooltip--no-election {
  right: 0;
  margin-left: 0;
  transform: translateX(-100%);
}

.map-small-states-hover:has(.map-tooltip--no-election) {
  width: 300px;
  max-width: none;
}

.map-tooltip--no-election .tooltip__header {
  letter-spacing: 1px;
}

/* Sticky navigation stays above election content and all tooltip layers. */
body #container .map-filters {
  z-index: 200000 !important;
}

/* State hover targets use the same information cursor as population charts. */
#container .map .datamaps-subunit,
#container .map .labels text,
#container .map .datamaps-label,
#container#container #main-container .map-small-states-item,
#container#container #main-container .map-small-states-item * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='11' fill='white' stroke='%23231f20' stroke-width='2'/%3E%3Ccircle cx='14' cy='8.5' r='1.5' fill='%23231f20'/%3E%3Cpath d='M14 12v8' stroke='%23231f20' stroke-width='2.5'/%3E%3C/svg%3E") 14 14, help !important;
}

/* Do not let the theme's transition:all delay links inheriting tooltip visibility. */
body #container .vep-intro-tooltip a,
body #container .vep-intro-tooltip a *,
body .map-tooltip--state a,
body .map-tooltip--state a *,
body .election-color-tooltip a,
body .election-color-tooltip a * {
  visibility: inherit !important;
  transition: none !important;
}

/* Hide data access from every map's share menu, including cached map markup. */
.map__social.social-share .social-share__icons > .rest-api {
  display: none !important;
}

/* Keep share actions in the same order on cached and newly loaded maps. */
.map__social.social-share .social-share__icons { display: flex; }
.map__social.social-share .social-share__icons > .bluesky { order: 1; }
.map__social.social-share .social-share__icons > .linkedin { order: 2; }
.map__social.social-share .social-share__icons > .twitter { order: 3; }
.map__social.social-share .social-share__icons > .facebook { order: 4; }

/* Center the label and icons without the old baseline offsets. */
#container .map__social.social-share {
  align-items: center;
  padding: 12px 20px !important;
}
#container .map__social.social-share .social-share__title {
  top: 0 !important;
  line-height: 1;
}
#container .map__social.social-share .social-share__icons {
  align-items: center;
  gap: 10px;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
}
#container .map__social.social-share .social-share__icons > li {
  top: 0 !important;
  margin: 0 !important;
  line-height: 1;
}
#container .map__social.social-share .social-share__icons a {
  display: flex;
  align-items: center;
  line-height: 1;
}
#container .map__social.social-share .social-share__icons i {
  display: block;
  line-height: 1;
}

/* Use the same color key as the national bar chart beside state vote labels. */
.map-tooltip--state .map-tooltip__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  vertical-align: -1px;
  flex-shrink: 0;
}

/* A lone founding-era candidate fills the narrowed tooltip. */
body.single-election .map-tooltip.map-tooltip--founding .tooltip__stats:has(> .stat:only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Founding-era tooltip results pair each count with its label. */
:root body .map-tooltip--founding .tooltip__stats > .stat {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
:root body .map-tooltip--founding .tooltip__stats > .stat .stat__value {
  flex: 0 0 auto;
}
:root body .map-tooltip--founding .tooltip__stats > .stat .stat__text {
  min-width: 0;
}
:root body .map-tooltip--founding .tooltip__stats > .stat .map-tooltip__swatch {
  display: none;
}

/* Keep state names and electoral totals together on a single header line. */
.map-tooltip .tooltip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}
.map-tooltip .tooltip__header .ev {
  float: none;
  flex-shrink: 0;
}
.map-tooltip--no-election .tooltip__header > .title {
  flex: 1;
}

/* Split two-candidate founding-era tooltips evenly. */
body.single-election .map-tooltip.map-tooltip--founding .tooltip__stats:has(> .stat:first-child:nth-last-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Match bar-tooltip dividers before map explanatory notes. */
.map-tooltip .tooltip__stats + .stat__desc::before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  margin-bottom: 16px;
}

/* Use the same compact load control in normal flow and while docked, for every year. */
#container .next-links .past-election {
  /* Geometry must switch in the same frame; inherited transition:all animates margins. */
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out !important;
  padding: 20px 24px;
  font-size: 20px;
  line-height: 24px;
  box-sizing: border-box;
  border-top: 1px solid #ccc;
}
#container .next-links .past-election.past-election--docked {
  position: fixed;
  bottom: 0;
  z-index: 90000;
  margin: 0;
  box-shadow: none;
}

/* Every founding-era tooltip with multiple recipients uses two columns. */
body.single-election .map-tooltip.map-tooltip--founding .tooltip__stats:has(> .stat:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Early-election map recipients always form a single vertical list. */
:root body .map-tooltip.map-tooltip--state.map-tooltip--founding:is([data-election-year="1804"], [data-election-year="1800"], [data-election-year="1796"], [data-election-year="1792"], [data-election-year="1789"]) .tooltip__body .tooltip__stats {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Align founding-era counts and labels into consistent vertical columns. */
:root body .map-tooltip.map-tooltip--state.map-tooltip--founding:is([data-election-year="1804"], [data-election-year="1800"], [data-election-year="1796"], [data-election-year="1792"], [data-election-year="1789"]) .tooltip__stats > .stat .stat__value {
  flex: 0 0 32px;
  text-align: center;
}

/* Year belongs to the tooltip, so right-side callouts match maps after Ajax navigation. */
:root body .map-tooltip.map-tooltip--state.map-tooltip--founding {
  width: 360px !important;
}

/* Keep the final map below navigation without moving the reserved page space. */
#container .graph-panel .map.map--last-docked,
#container .graph-panel #election-popular-votes.chart--last-docked {
  position: fixed !important;
  top: var(--last-map-top) !important;
  left: var(--last-map-left) !important;
  width: var(--last-map-width) !important;
  height: var(--last-map-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 8000 !important;
  transition: none !important;
}

/* All custom tooltip surfaces anchor beside the cursor instead of straddling it. */
:root body .tooltip--cursor-docked {
  position: fixed !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
  box-sizing: border-box;
  z-index: 100100 !important;
}
:root body .tooltip--cursor-docked > .map-tooltip {
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  transform: none !important;
  max-width: min(400px, var(--cursor-max-width, 400px), calc(100vw - 24px)) !important;
  box-sizing: border-box;
}
body.cursor-tooltips-enabled #container .vep-intro-tooltip {
  visibility: hidden !important;
}
.election-info-cursor-tooltip {
  padding: 16px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  color: #231f20;
  font: 13px/1.5 Arial, sans-serif;
  text-align: left;
  pointer-events: auto;
}
.election-info-cursor-tooltip[hidden] { display: none !important; }
.election-info-cursor-tooltip p,
.election-info-cursor-tooltip a { font: inherit !important; }
.election-info-cursor-tooltip p:last-child { margin-bottom: 0; }
.election-info-cursor-tooltip a { color: inherit; text-decoration: underline; }

.datamaps-hoverover.tooltip--cursor-docked,
.map-small-states-hover.tooltip--cursor-docked { pointer-events: none; }

/* Absolute width cap for every custom tooltip, including cursor-docked surfaces. */
:root body .map-tooltip,
:root body .election-color-tooltip,
:root body .vep-intro-tooltip,
:root body .election-info-cursor-tooltip {
  max-width: min(400px, var(--cursor-max-width, 400px), calc(100vw - 24px)) !important;
  box-sizing: border-box;
}

/* Only unavailable-election state messages use the narrower 360px limit. */
:root body .map-tooltip.map-tooltip--no-election,
:root body .tooltip--cursor-docked > .map-tooltip.map-tooltip--no-election {
  max-width: min(360px, var(--cursor-max-width, 360px), calc(100vw - 24px)) !important;
  box-sizing: border-box;
}

/* 1808 electoral recipients use two balanced columns on maps and state menus. */
:root body .map-tooltip.map-tooltip--palette-1808[data-election-year="1808"] .tooltip__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Dock final bar charts with the same inset below navigation. */
#container .graph-panel #election-popular-votes.chart--last-docked {
  background: #f1f1f1;
  padding-top: 50px !important;
}
#container .graph-panel #election-popular-votes.chart--last-docked > h2 {
  margin-top: 0 !important;
}

/* These years use two equal columns on maps and state menus. */
:root body .map-tooltip.map-tooltip--state:is([data-election-year="1828"], [data-election-year="1840"], [data-election-year="1844"], [data-election-year="1848"], [data-election-year="1852"], [data-election-year="1856"], [data-election-year="1860"], [data-election-year="1864"], [data-election-year="1868"], [data-election-year="1872"], [data-election-year="1876"], [data-election-year="1880"], [data-election-year="1884"], [data-election-year="1888"], [data-election-year="1892"], [data-election-year="1896"], [data-election-year="1900"], [data-election-year="1904"], [data-election-year="1908"]) .tooltip__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Keep every wrapped label line aligned with its text, beside the color key. */
:root body .map-tooltip:not(.map-tooltip--founding) .stat__text:has(> .map-tooltip__swatch) {
  display: block;
  position: relative;
  padding-left: 19px;
}
:root body .map-tooltip:not(.map-tooltip--founding) .stat__text > .map-tooltip__swatch {
  position: absolute;
  left: 0;
  top: 0.2em;
  margin: 0;
}
:root body .election-color-tooltip__row {
  align-items: flex-start;
}
:root body .election-color-tooltip__swatch {
  margin-top: 0.25em;
}

/* Tooltip overlays clear the bottom load control without elevating the map itself. */
:root body .datamaps-hoverover.map-tooltip-source { opacity: 0 !important; }
:root body .datamaps-hoverover.map-tooltip-overlay,
:root body .map-small-states-hover { z-index: 100000 !important; }
:root body .datamaps-hoverover.map-tooltip-overlay { display: block !important; pointer-events: none; }
:root body .datamaps-hoverover.map-tooltip-overlay[hidden] { display: none !important; }

/* The homepage slider presents only each election's electoral results. */
body.home #container .graph-panel-election-item > #election-popular-votes,
body.home #container .graph-panel-election-item > #election-vep-votes {
  display: none !important;
}

/* Begin the homepage with its introduction; reveal the timeline results on request. */
body.home #container .home-intro-pending .graph-panel-election-item,
body.home #container .home-intro-pending .next-links {
  display: none !important;
}
body.home #container .home-intro-pending .page-content {
  min-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(40vh - 10px);
  margin-top: 0 !important;
  box-sizing: border-box;
}
body.home #container .home-reveal-election {
  margin: 24px auto 0;
  padding: 9px 16px 8px;
  border: 0;
  border-radius: 0;
  min-height: 38px;
  line-height: 20px;
  background: #231f20;
  color: #fff;
  cursor: pointer;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body.home #container .home-reveal-election:focus-visible {
  outline: 2px solid #0055cc;
  outline-offset: 4px;
}
body.home #container .map-output:not(.home-intro-pending) .home-reveal-election {
  display: none;
}

body.home #container .home-reveal-election:hover {
  background: #6b6869;
}

body.home #container .home-results-heading:focus {
  outline: none;
}

/* Reveal the homepage timeline together with its election results. */
body.home:has(.home-intro-pending) #container .slider-wrapper {
  visibility: hidden;
  pointer-events: none;
}
body.home #container .map-output.home-intro-pending {
  width: 100%;
}

/* Balance the visible space above and below the homepage description. */
body.home #container .home-intro-pending .page-content .elementor-widget-text-editor > p:last-child {
  margin-bottom: 0;
}
body.home #container .home-intro-pending .page-content .e-con-inner {
  padding-bottom: 0;
}
body.home #container .home-intro-pending .home-reveal-election {
  margin-top: 25px;
}

/* The introduction belongs only to the homepage's initial Explore screen. */
body.home #container .map-output:not(.home-intro-pending) .graph-panel > .page-content {
  display: none !important;
}

/* Use the election page's chart inset after leaving the homepage introduction. */
body.home #container .map-output:not(.home-intro-pending) .graph-panel {
  padding-top: 74px !important;
}

/* Keep timeline lanes tied to content type rather than alternating item order. */
@media (min-width: 768px) {
  body.page-id-209002 .elementor-loop-container.elementor-posts-masonry {
    grid-auto-flow: row;
    align-items: start;
  }
  body.page-id-209002 .elementor-posts-masonry > .e-loop-item {
    margin-top: 0 !important;
  }
  body.page-id-209002 .elementor-posts-masonry > .e-loop-item.type-election {
    grid-column: 1;
  }
  body.page-id-209002 .elementor-posts-masonry > .e-loop-item.type-historic_event {
    grid-column: 2;
  }
  body.page-id-209002 .elementor-posts-masonry > .e-loop-item .event-cards {
    margin-top: 0 !important;
  }
  body.page-id-209002 .elementor-posts-masonry > .type-election .event-cards:before {
    right: -43px;
    left: auto;
  }
  body.page-id-209002 .elementor-posts-masonry > .type-election .event-cards:after {
    right: -24px;
    left: auto;
  }
  body.page-id-209002 .elementor-posts-masonry > .type-historic_event .event-cards:before {
    right: auto;
    left: -43px;
  }
  body.page-id-209002 .elementor-posts-masonry > .type-historic_event .event-cards:after {
    right: auto;
    left: -24px;
  }
}

/* Election navigation becomes available with the homepage results. */
body.home:has(.home-intro-pending) #container .map-filters__filterwrapper {
  visibility: hidden;
  pointer-events: none;
}

/* Pair the primary Explore action with a ghost link to the history timeline. */
body.home #container .home-intro-actions {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px auto 0;
}
body.home #container .home-intro-pending .home-intro-actions .home-reveal-election {
  margin: 0;
}
body.home #container .home-intro-actions .home-history-timeline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 38px;
  padding: 8px 15px 7px;
  border: 1px solid #231f20;
  border-radius: 0;
  background: transparent;
  color: #231f20;
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none !important;
}
body.home #container .home-intro-actions .home-history-timeline:hover {
  background: #231f20;
  color: #fff;
}
body.home #container .home-intro-actions .home-history-timeline:focus-visible {
  outline: 2px solid #0055cc;
  outline-offset: 4px;
}

/* Share the approved introduction typography and spacing on History and Roadmap. */
body.page-id-209002 .elementor-209002 .elementor-element-49a6c536,
body.page-id-207581 .elementor-207581 .elementor-element-49a6c536 {
  margin-top: 61px;
}
body.page-id-209002 .elementor-209002 .elementor-element-f1fdd71,
body.page-id-207581 .elementor-207581 .elementor-element-f1fdd71 {
  margin-bottom: -20px;
}
body.page-id-209002 .elementor-209002 .elementor-element-f1fdd71 h1,
body.page-id-207581 .elementor-207581 .elementor-element-f1fdd71 h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: 40px;
  line-height: 45px;
  font-weight: 400;
  letter-spacing: 2.2px;
}


/* Identify the election each curated historical event helps contextualize. */
body.page-id-209002 .history-election-context {
    display: inline-block;
    margin-top: 8px;
    padding: 3px 8px;
    border: 1px solid #d5d5d5;
    font-size: 12px;
    line-height: 1.5;
    color: #555;
}

/* Each desktop timeline lane follows its own cards, independent of the other side. */
@media (min-width: 768px) {
  body.page-id-209002 .elementor-loop-container.history-independent-lanes {
    display: block !important;
    position: relative;
    height: var(--history-timeline-height, auto);
  }
  body.page-id-209002 .history-independent-lanes > .e-loop-item {
    position: absolute;
    top: var(--history-item-top, 0px);
    width: calc((100% - var(--history-lane-gap, 64px)) / 2);
    height: auto;
  }
  body.page-id-209002 .history-independent-lanes > .type-election {
    left: 0;
    right: auto;
  }
  body.page-id-209002 .history-independent-lanes > .type-historic_event {
    left: auto;
    right: 0;
  }
}

@media (min-width: 768px) {
  body.page-id-209002 .history-independent-lanes > .type-election .event-cards {
    box-sizing: border-box;
    min-height: 0;
  }
}

/* Fill timeline event frames with a centered 1200:630 image crop. */
body.page-id-209002 .type-historic_event .elementor-widget-theme-post-featured-image img {
  display: block;
  width: 100%;
  height: auto !important;
  aspect-ratio: 1200 / 630 !important;
  object-fit: cover;
  object-position: center;
  background: #eeeeee;
}
body.page-id-209002 .history-image-credit {
  position: relative;
  z-index: 5;
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.5;
  color: #666;
}
body.page-id-209002 .history-image-credit a {
  color: inherit;
  text-decoration: underline;
}

/* Manual history pagination, matching the homepage load control. */
body.page-id-209002 .history-load-more-wrap { position:relative; z-index:2; clear:both; margin-top:48px; text-align:center; }
body.page-id-209002 .history-load-more { display:block; padding:28px 20px; border-top:1px solid #ccc; background:#e5e5e5; color:#666; font-family:'Bebas Neue',sans-serif; font-size:25px; text-transform:uppercase; line-height:1.25; letter-spacing:2px; text-decoration:none; }
body.page-id-209002 .history-load-more:hover, body.page-id-209002 .history-load-more:focus-visible { background:#231f20; color:white; }
body.page-id-209002 .history-load-more[aria-disabled="true"] { cursor:wait; opacity:.7; }
body.page-id-209002 .history-load-more[hidden] { display:none; }
body.page-id-209002 .history-load-status { font-size:14px; }
body.page-id-209002 .e-loop-item { scroll-margin-top:100px; }

/* Use the history load action as the full-width page footer. */
body.page-id-209002 .next-links { display:none !important; }
body.page-id-209002 .history-load-more-wrap { width:100vw; margin-left:calc(50% - 50vw); }
body.page-id-209002 .history-load-more { padding:20px 24px; color:#6b6869; font-size:20px; line-height:24px; }
body.page-id-209002 .history-load-status:empty { display:none; }
body.page-id-209002 .elementor-element-49a6c536 { margin-bottom:0; }
body.page-id-209002 .elementor-element-49a6c536 > .e-con-inner { padding-bottom:0; }
/* The manual range loader replaces the empty Jet pagination row. */
body.page-id-209002 .elementor-widget-jet-smart-filters-pagination { display:none !important; }
body.page-id-209002 .history-load-more:hover,
body.page-id-209002 .history-load-more:focus-visible {
  color:#231f20;
  background-color:#ccc;
  text-decoration:underline;
}

/* The left wrapper spans its events; the card stays compact and sticky. */
@media (min-width:768px) {
  body.page-id-209002 #container,
  body.page-id-209002 main { overflow:clip; }
  body.page-id-209002 .history-independent-lanes > .type-election {
    display:block;
    height:var(--history-election-height, auto);
    overflow:visible;
  }
  body.page-id-209002 .history-independent-lanes > .type-election > .event-cards {
    position:sticky;
    top:99px;
    height:auto;
    min-height:0;
    align-self:flex-start;
  }
}
@media (min-width:768px) {
  body.page-id-209002 #main { overflow:clip; }
}
@media (min-width:768px) {
  body.page-id-209002 #container #main-container { overflow:clip; }
}

/* Capitol background on the homepage start screen. */
body.home:has(.home-intro-pending) #main-container {
  background-image: url("../images/capitol-white-overlay.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}