/**
 * Copyright 2023 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* ── Ushahidi brand tokens ─────────────────────────────────────────────── */
/* Yellow: #ffc334 (exact from logo)  |  Navy: #1a1f36  |  Light: #2d3459  */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root {
  --ushahidi-yellow:      #ffc334;
  --ushahidi-yellow-dark: #e6a800;
  --ushahidi-navy:        #1a1f36;
  --ushahidi-navy-light:  #2d3459;

  /* Override DC built-ins so internal components follow Ushahidi palette */
  --dc-primary:    var(--ushahidi-navy);
  --link-color:    var(--ushahidi-navy);
  --footer-background: var(--ushahidi-navy);

  font-family: 'Inter', 'Roboto', sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

#main-header,
#main-header-container,
#main-navbar-container,
#main-navbar-container .navbar-menu-large,
#main-navbar-container .navbar-menu-mobile {
  background-color: var(--ushahidi-navy) !important;
  color: #ffffff;
}

#main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* Nav links */
/* All nav links — white text on dark navy, both desktop and mobile */
#main-navbar-container .navbar-menu-large .menu-main-link,
#main-navbar-container .navbar-menu-large .menu-main-button,
#main-navbar-container .navbar-menu-large .menu-main-label,
#main-navbar-container .navbar-menu-large .header-menu a,
#main-navbar-container .navbar-menu-mobile .menu-main-link,
#main-navbar-container .navbar-menu-mobile .header-links a {
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
}

#main-navbar-container .navbar-menu-large .menu-main-link:hover,
#main-navbar-container .navbar-menu-large .menu-main-button:hover,
#main-navbar-container .navbar-menu-large .header-menu a:hover,
#main-navbar-container .navbar-menu-mobile .menu-main-link:hover,
#main-navbar-container .navbar-menu-mobile .header-links a:hover {
  color: var(--ushahidi-yellow) !important;
  background-color: rgba(255,255,255,0.06) !important;
}

/* ── Desktop dropdown panels ─────────────────────────────────────────────── */
/* Background: navy-light for all sections */
#main-navbar-container .rich-menu-content,
#main-navbar-container .rich-menu-content .introduction-section,
#main-navbar-container .rich-menu-content .primary-section,
#main-navbar-container .rich-menu-content .secondary-section,
#main-navbar-container .rich-menu-content .group,
#main-navbar-container .rich-menu-content .item {
  background-color: var(--ushahidi-navy-light) !important;
}

/* Introduction section: "Explore" heading → yellow, description → white */
#main-navbar-container .rich-menu-content .introduction-section h3 {
  color: var(--ushahidi-yellow) !important;
  background-color: transparent !important;
}
#main-navbar-container .rich-menu-content .introduction-section p {
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
}

/* Item titles: h4 wrapping a.item-link → yellow */
#main-navbar-container .rich-menu-content .primary-section .group .item h4,
#main-navbar-container .rich-menu-content .secondary-section .group .item h4 {
  color: var(--ushahidi-yellow) !important;
  background-color: transparent !important;
}

/* a.item-link (the actual clickable title) → yellow */
#main-navbar-container .rich-menu-content .group .item h4 a,
#main-navbar-container .rich-menu-content .group .item h4 a.item-link {
  color: var(--ushahidi-yellow) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}
#main-navbar-container .rich-menu-content .group .item h4 a:hover,
#main-navbar-container .rich-menu-content .group .item h4 a.item-link:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Item descriptions: p below h4 → white */
#main-navbar-container .rich-menu-content .primary-section .group .item p,
#main-navbar-container .rich-menu-content .secondary-section .group .item p {
  color: rgba(255,255,255,0.75) !important;
  background-color: transparent !important;
}

/* Any other a tags inside dropdown */
#main-navbar-container .rich-menu-content a {
  color: var(--ushahidi-yellow) !important;
  background-color: transparent !important;
}
#main-navbar-container .rich-menu-content a:hover {
  color: #ffffff !important;
}

/* Mobile drawer — dark navy throughout */
#main-navbar-container .panel,
#main-navbar-container .drawer,
#main-navbar-container .paper,
#main-navbar-container .menu-mobile,
#main-navbar-container .navbar-menu-mobile {
  background-color: var(--ushahidi-navy) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Mobile drawer links — yellow */
#main-navbar-container .menu-item-link,
#main-navbar-container .menu-item-button,
#main-navbar-container .drawer .panel a,
#main-navbar-container .drawer ul a,
#main-navbar-container .drawer li a {
  color: var(--ushahidi-yellow) !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

#main-navbar-container .menu-item-link:hover,
#main-navbar-container .menu-item-button:hover,
#main-navbar-container .drawer .panel a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* Hamburger / close toggle */
#main-navbar-container .menu-toggle {
  color: rgba(255,255,255,0.85) !important;
  background-color: transparent !important;
  border: none;
}

/* Logo brand area */
#main-header .navbar-brand {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

#main-header .navbar-brand::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,0.25);
  margin: 0 14px;
  flex-shrink: 0;
}

#main-header .main-header-name {
  display: block;
  font-family: 'Inter', 'Roboto', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: rgba(255,255,255,0.85) !important;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-decoration: none !important;
}

#main-header .main-header-name:hover {
  color: var(--ushahidi-yellow) !important;
  text-decoration: none !important;
}

#main-header img,
#main-header .main-header-logo img {
  display: block !important;
  height: 26px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
}

.search-section-container.sticky {
  top: 60px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn.btn-primary,
button[type="submit"],
.dc-search-button {
  background-color: var(--ushahidi-navy) !important;
  border-color: var(--ushahidi-navy) !important;
  color: #fff !important;
}

.btn.btn-primary:hover,
button[type="submit"]:hover,
.dc-search-button:hover {
  background-color: var(--ushahidi-navy-light) !important;
  border-color: var(--ushahidi-navy-light) !important;
}

/* ── Links ───────────────────────────────────────────────────────────────── */

.main-content a,
.container a,
.card a {
  color: var(--ushahidi-yellow-dark);
}

/* Only underline inline prose links, not card/tile links */
.main-content p a:hover,
.main-content li a:hover {
  color: var(--ushahidi-yellow);
  text-decoration: underline;
}

/* ── Headings ────────────────────────────────────────────────────────────── */

h1 {
  color: var(--ushahidi-yellow);
}

h2, h3 {
  color: var(--ushahidi-navy);
}
/* Inside dark mobile drawer, headings must be white/yellow to stay visible */
#main-navbar-container .drawer h1,
#main-navbar-container .drawer h2,
#main-navbar-container .drawer h3,
#main-navbar-container .paper h1,
#main-navbar-container .paper h2,
#main-navbar-container .paper h3 {
  color: var(--ushahidi-yellow) !important;
}
/* ── Spinner ─────────────────────────────────────────────────────────────── */

.spinner-border,
.loading-spinner,
[class*="spinner"] {
  color: var(--ushahidi-yellow) !important;
  border-color: var(--ushahidi-yellow) transparent transparent transparent !important;
}

/* ── Stat var chips ──────────────────────────────────────────────────────── */

.chip.selected,
.chip:hover {
  background-color: rgba(255,195,52,0.12);
  border-color: var(--ushahidi-yellow);
  color: var(--ushahidi-navy);
}

/* ── Knowledge Graph browser landing ─────────────────────────────────────── */

.ushahidi-kg-category {
  flex: 1 1 200px;
  background: #f8f9fc;
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  border-top: 4px solid var(--ushahidi-yellow);
}

.ushahidi-kg-category h3 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ushahidi-navy);
  margin-bottom: 0.75rem;
}

.ushahidi-kg-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
}

.ushahidi-kg-category ul { list-style: none; padding: 0; margin: 0; }
.ushahidi-kg-category li { margin-bottom: 0.4rem; }
.ushahidi-kg-category a { font-size: 0.9rem; color: var(--ushahidi-navy); }
.ushahidi-kg-category a:hover { color: var(--ushahidi-yellow-dark); }

/* ── Ushahidi footer ─────────────────────────────────────────────────────── */

#ushahidi-footer {
  background-color: var(--ushahidi-navy);
  color: #c9cde0;
  font-size: 0.875rem;
  padding: 3rem 0 0;
  margin-top: auto;
}

.ushahidi-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
}

.ushahidi-footer-brand { flex: 1 1 200px; }

.ushahidi-footer-logo {
  height: 40px;
  margin-bottom: 0.75rem;
}

.ushahidi-footer-tagline {
  color: #8c93b0;
  font-size: 0.82rem;
  margin: 0 0 1rem;
}

.ushahidi-social-links {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-top: 0.5rem;
}

.ushahidi-social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c93b0;
  transition: color 0.15s ease;
  line-height: 1;
}

.ushahidi-social-links a:hover { color: var(--ushahidi-yellow); }

.ushahidi-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  flex: 3 1 400px;
}

.ushahidi-footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 130px;
}

.ushahidi-footer-col h4 {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.5rem;
}

.ushahidi-footer-col a {
  color: #8c93b0;
  text-decoration: none;
  line-height: 1.7;
  transition: color 0.15s ease;
}

.ushahidi-footer-col a:hover { color: var(--ushahidi-yellow); }

.ushahidi-footer-bottom {
  border-top: 1px solid #2d3459;
  padding: 1rem 1.5rem;
  text-align: center;
}

.ushahidi-footer-bottom p {
  color: #5a607a;
  margin: 0;
  font-size: 0.8rem;
}

.ushahidi-footer-bottom a { color: #7880a0; text-decoration: none; }

/* ── Homepage tools cards ───────────────────────────────────────────────── */
/* Cards: navy-light background, yellow icon + title, white description */
.tools a {
  background-color: var(--ushahidi-navy-light) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  color: rgba(255,255,255,0.85) !important;
}

.tools a:hover {
  background-color: #374070 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45) !important;
}

/* Icon — yellow */
.tools a svg {
  fill: var(--ushahidi-yellow) !important;
  color: var(--ushahidi-yellow) !important;
}

/* Card title — yellow */
.tools .link-title {
  color: var(--ushahidi-yellow) !important;
}

/* Card description — white */
.tools .link-description {
  color: rgba(255,255,255,0.80) !important;
}
.ushahidi-footer-bottom a:hover { color: var(--ushahidi-yellow); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ushahidi-footer-inner { flex-direction: column; gap: 2rem; }
  .ushahidi-footer-links { gap: 1.5rem; }
  .ushahidi-kg-categories { flex-direction: column; }
}