/* ============================================================
   jhse2026_beautify.css
   Override stylesheet — drop this AFTER all existing <link> tags
   Covers: page1 (州选快讯) + page2 (election results / home)
   Excluded: banner images, map SVG canvas
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --navy:        #0D1B3E;
  --navy-light:  #1A2F5E;
  --navy-very-light: #13467d;
  --red:         #C8102E;
  --red-dark:    #9E0A22;
  --gold:        #D4A843;
  --warm-white:  #F8F7F4;
  --card-bg:     #FFFFFF;
  --border:      #E2E8F0;
  --text-dark:   #1A1A2E;
  --text-mid:    #374151;
  --text-muted:  #6B7280;
  --blue-btn:    #20406F;
  --blue-btn-lt: #EFF3FB;
  --news-bg:     #CFDBF7;
}

/* ── BODY / PAGE BACKGROUND ─────────────────────────────── */
body {
  background-color: var(--warm-white) !important;
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  color: var(--text-dark) !important;
}

/* ── NAVBAR ──────────────────────────────────────────────── */
#navbar {
  background: var(--navy) !important;
  border-bottom: 3px solid var(--red) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}

/* desktop nav bar inner */
.menu-selections-bar-wrapper.multiStateNews {
  background: var(--navy) !important;
  padding-top: 10px;
}

.menu-selections-bar {
  background: var(--navy) !important;
}

/* nav tab items */
#state-selections {
  gap: 4px;
}

.state-selections .state-item {
  color: rgba(255,255,255,0.6) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
  letter-spacing: 0.02em !important;
  border: none !important;
  background: transparent !important;
}

.state-selections .state-item:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1) !important;
}

.state-selections .state-item::after {
  width: 0 !important;
}

.state-selections .state-item.selected {
  background: var(--red) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* view / share counts in desktop nav */
#right-menu,
#right-menu .d-flex {
  background: transparent !important;
}

#view-count-1,
#share-count-1 {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

#right-menu span[style*="color: #555"] {
  color: rgba(255,255,255,1) !important;
}

/* mobile sticky bottom bar */
#mobile-right-menu {
  background: var(--navy) !important;
  border-top: 2px solid var(--red) !important;
  padding: 6px 12px !important;
}

#view-count-2,
#share-count-2 {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

#mobile-right-menu span[style*="color: #555"] {
  color: rgba(255,255,255,0.55) !important;
}

#view-count-widget-2 {
  border-left-color: rgba(255,255,255,0.2) !important;
}

/* ── PAGE1: NEWS SECTION ─────────────────────────────────── */
.front-page-section-2 {
  padding: 20px 24px !important;
}

.news-page-wrapper {
  gap: 20px !important;
  margin: 0 !important;
}

/* news card item */
.news-item {
  background: var(--card-bg) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: transform 0.2s, border-color 0.2s, border-left-width 0.2s !important;
  flex: 0 0 calc(33.33% - 14px) !important;
  max-width: calc(33.33% - 14px) !important;
}

.news-image img {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  display: block !important;
}

.news-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  line-height: 1.5 !important;
  margin: 12px 14px 8px !important;
}

.news-title a {
  color: var(--text-dark) !important;
  text-decoration: none !important;
}

.news-title a:hover {
  color: var(--red) !important;
}

.news-meta {
  padding: 0 14px 14px !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
}

/* load more button */
.more {
  background: transparent !important;
  border: 2px solid var(--navy) !important;
  color: var(--navy) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 10px 36px !important;
  border-radius: 24px !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s !important;
}

.more:hover {
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}

/* ── PAGE2: SECTION HEADERS ──────────────────────────────── */
.section-header h2,
.section-header h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  padding-left: 14px !important;
  border-left: 4px solid var(--red) !important;
  line-height: 1.4 !important;
  margin-top: 20px !important;
  margin-bottom: 12px !important;
}

/* ── PAGE2: LIVE RESULTS BLOCK ───────────────────────────── */
.news-block-div {
  background: var(--navy-very-light) !important;
  border-radius: 8px 8px 0 0 !important;
}

.news-block-div .title h3 {
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.news-block-div .title h4 {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.8) !important;
  border-radius: 50px !important;
}

/* official / unofficial tab buttons */
.latest-result-tab-btn,
.election-map-tab-btn,
.result-bar-tab-btn {
  background: var(--blue-btn-lt) !important;
  color: var(--navy) !important;
  border-color: var(--blue-btn-lt) !important;
  font-weight: 700 !important;
  transition: all 0.2s !important;
}

.latest-result-tab-btn.active,
.election-map-tab-btn.active,
.result-bar-tab-btn.active {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

/* live result list wrapper */
.live-result-div-list {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 16px !important;
}

.live-result-div-list-item {
  border-right-color: var(--border) !important;
}

/* ── PAGE2: NEWS FLASH (左侧快讯) ────────────────────────── */
.news-div-list {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
}

.news-div-list-item:before {
  background-color: var(--border) !important;
}

.news-div-list-item:after {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

.news-div-list-item.haslink .title,
.news-div-list-item .title {
  color: var(--text-dark) !important;
  font-weight: 500 !important;
}

.news-div-list-item.haslink a:hover .title,
.news-div-list-item.nolink:hover .title {
  color: var(--red) !important;
}

.news-div-list-item.haslink .btn,
.news-div-list-item.nolink .btn {
  color: var(--red) !important;
  font-weight: 600 !important;
}

.liveblog_datetime .day {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* ── PAGE2: RESULT BAR (开票成绩) ────────────────────────── */
.result-state-block {
  background: var(--navy-very-light) !important;
  color: #fff !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 10px 16px !important;
}

.result-bar-header {
  color: #fff !important;
  font-weight: 700 !important;
}

.result-bar-wrapper {
  background: #F0F4FB !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
}

/* ── PAGE2: CONSTITUENCY CARDS (选区结果) ────────────────── */
.result-item-box {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  transition: box-shadow 0.2s !important;
}

.result-item-box:hover {
  box-shadow: 0 4px 16px rgba(13,27,62,0.1) !important;
}

.result-item-header {
  background: var(--navy-very-light) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.result-item-header .title {
  color: #fff !important;
}

.result-item-header.hotseat {
  background: #e40402 !important;
}

/* result type badge */
.result-type {
  background: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.85) !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  margin-right: 0 !important;
}

.result-type[style*="background-color: #20406F"] {
  background: var(--gold) !important;
  color: var(--navy) !important;
  border-color: transparent !important;
}

/* candidate box */
.result-item-bottom-row {
  background: #F8F9FB !important;
  border-top: 1px solid var(--border) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  color: var(--text-muted) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

/* ── PAGE2: STATE SEAT HEADER ────────────────────────────── */
.state-seat-header {
  margin: 20px 0 12px !important;
}

.state-seat-header .title .label {
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.state-seat-header .title .state-name {
  color: #fff !important;
  background-color: var(--red) !important;
  background-image: none !important;
  border-radius: 4px !important;
  padding: 4px 16px 4px 12px !important;
  font-size: 16px !important;
}

/* ── PAGE2: ELECTION RESULT TABS ─────────────────────────── */
.electionResult-tab,
.electionMap-tab {
  border-bottom-color: var(--navy) !important;
}

.electionResult-tab-item,
.electionMap-tab-item {
  background: #9f9f9f !important;
  border-radius: 10px 10px 0 0 !important;
  color: #fff !important;
  font-size: 15px !important;
}

.electionResult-tab-item.current,
.electionMap-tab-item.current {
  background: var(--card-bg) !important;
  color: var(--navy) !important;
  border-color: var(--navy) !important;
  font-weight: 700 !important;
}

/* ── PAGE2: MAP LEGEND ───────────────────────────────────── */
.election-map-legend {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  margin-bottom: 8px !important;
  gap: 4px !important;
}

/* ── PAGE2: VIDEO SECTION ────────────────────────────────── */
.video-section {
  padding: 0 24px !important;
}

.video-header h2 {
  border-left: 4px solid var(--red) !important;
  padding-left: 14px !important;
  color: var(--navy) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.homepage-more-button {
  background: transparent !important;
  border: 2px solid var(--navy) !important;
  border-radius: 24px !important;
  padding: 8px 32px !important;
  text-align: center !important;
  margin: 10px auto 20px !important;
  width: fit-content !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
}

.homepage-more-button:hover {
  background: var(--navy) !important;
  color: #fff !important;
}

.homepage-more-button span {
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.homepage-more-button span:hover {
  border: none;
}

/* video cards */
.cat-posts-list-item .title {
  color: var(--text-dark) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.cat-posts-list-item:hover .title {
  color: var(--red) !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
.footer-copywrite {
  background: var(--navy) !important;
  border-top: 3px solid var(--red) !important;
  padding: 20px 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.copyright {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.copyright b {
  color: rgba(255,255,255,0.85) !important;
}

.copyright a img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.7 !important;
  transition: opacity 0.2s !important;
  height: 20px !important;
  width: auto !important;
}

.copyright a img:hover {
  opacity: 1 !important;
}

/* ── MAP AREA: do NOT change colors on SVG paths / canvas ── */
/* Only wrap-level background is neutralised */
.map-with-hp,
.electionMap-frame-list,
#svgDivGlobal {
  background-color: transparent !important;
}

.main-map,
#main-map {
  border-color: var(--border) !important;
  border-radius: 8px !important;
}

/* map legend labels keep their party colors — no override */

/* ── ADVERTISEMENT LABELS ────────────────────────────────── */
p.ad_header {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  margin-bottom: 4px !important;
}

/* ── MOBILE RESPONSIVE FIXES ─────────────────────────────── */
@media (max-width: 768px) {
  .news-item {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  .front-page-section-2 {
    padding: 16px !important;
  }

  .footer-copywrite {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 480px) {
  .news-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}