:root {
  --harir-ink: #183a45;
  --harir-deep: #123f49;
  --harir-accent: #176f70;
  --harir-accent-strong: #115d5e;
  --harir-muted: #536c72;
  --harir-paper: #f7f7f2;
  --harir-surface: #fffefa;
  --harir-line: #dce8e3;
  --first-color-dark: var(--harir-ink);
  --first-color-light: #e7f2ed;
  --bs-primary: var(--harir-accent);
}

html { scroll-behavior: smooth; }
body,
body.bg-light,
.page-wrapper { background: var(--harir-paper) !important; color: var(--harir-ink); }
::selection { color: #fff; background: var(--harir-accent); }

.text-primary,
.text-primary-dark { color: var(--harir-ink) !important; }
.btn-primary,
.result-modal-button {
  border-color: var(--harir-accent) !important;
  background: var(--harir-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
  transition: background-color .18s ease, transform .18s ease;
}
.btn-primary:hover,
.result-modal-button:hover { background: var(--harir-accent-strong) !important; }
.btn-primary:active,
.result-modal-button:active { transform: scale(.985); }
.btn-outline-primary { border-color: var(--harir-accent); color: var(--harir-accent); }
.btn-outline-primary:hover { border-color: var(--harir-accent); background: var(--harir-accent); color: #fff; }
a:not(.btn):focus-visible,
button:focus-visible { outline-color: var(--harir-accent) !important; }

.header {
  background: var(--harir-surface);
  border-bottom: 1px solid var(--harir-line);
  box-shadow: 0 6px 24px rgba(18, 63, 73, .05) !important;
}
.header .nav-link,
.header .dropdown-toggle { color: var(--harir-ink); }
.header .nav-link.active { color: var(--harir-accent); }
.header-quick-action { color: var(--harir-ink); }

.l-navbar { background: var(--harir-deep) !important; color: #eef7f2; }
.l-navbar .nav_logo { margin-bottom: 1.5rem; }
.l-navbar .sidebar-logo { padding: 5px; border-radius: 12px; background: #fff; }
.l-navbar .nav_link,
.l-navbar .nav_name,
.l-navbar .accordion-button,
.l-navbar .nav_icon-bi,
.l-navbar i.sidebar-icon { color: #eaf4ef !important; }
.l-navbar .accordion,
.l-navbar .accordion-item,
.l-navbar .accordion-button,
.l-navbar .accordion-button.collapsed { background: transparent !important; border-color: transparent !important; }
.l-navbar .nav_link:hover,
.l-navbar .nav_link.active,
.l-navbar .accordion-button:hover,
.l-navbar .accordion-button:not(.collapsed) { background: #285762 !important; color: #fff !important; }
.l-navbar .sidebar-toggle-button { border: 0; background: #e7f2ed; color: var(--harir-deep); }
.l-navbar .sidebar-toggle-button i { color: var(--harir-deep) !important; }

#main-content-container.main-content-container,
#main-content-container .main-content-container { background: transparent; }
#main-content-container { color: var(--harir-ink); }
#main-content-container h1,
#main-content-container h2,
#main-content-container h3,
#main-content-container h4,
#main-content-container h5 { color: var(--harir-ink); text-wrap: balance; }
#main-content-container .text-muted { color: var(--harir-muted) !important; }
#main-content-container .card.bg-white.p-4,
#main-content-container .form-card,
#main-content-container .ticket-card,
#main-content-container .choose-type-card {
  border-color: var(--harir-line);
  border-radius: 18px;
  background: var(--harir-surface) !important;
  box-shadow: none;
}

#main-content-container .services-container > .card.bg-white.p-4 {
  padding: clamp(1.5rem, 3vw, 2.75rem) !important;
  border: 0;
  border-radius: 26px;
  background: var(--harir-deep) !important;
  box-shadow: 0 18px 40px rgba(18, 63, 73, .13);
}
#main-content-container .services-container h4 {
  margin-bottom: .3rem;
  color: #fff !important;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 800;
}
#main-content-container .services-container > .card > .text-muted { color: #d1e5dd !important; }
#main-content-container .services-container .service-card {
  border: 0;
  border-radius: 16px;
  background: #f9fbf7 !important;
  box-shadow: none;
  transition: transform .18s ease, background-color .18s ease;
}
#main-content-container .services-container .service-card:hover { transform: translateY(-2px); background: #fff !important; }
#main-content-container .services-container .service-card:active { transform: scale(.985); }
.service-card-link { color: var(--harir-ink); }
.service-card-art { background: #e4f0e8; }
.services-navigation button { border-color: #678a8c; background: #eaf4ee; color: var(--harir-deep); }
.services-pagination .swiper-pagination-bullet-active::after { background: #d8ebdb; }

@media (min-width: 768px) {
  #main-content-container .services-cards-container .swiper-wrapper { justify-content: center; }
}

#main-content-container .home-feed .card.bg-white.p-4 {
  border: 0;
  border-radius: 20px;
  background: var(--harir-surface) !important;
  box-shadow: 0 8px 28px rgba(18, 63, 73, .05);
}
#main-content-container .home-feed .featured-content-container { background: #e8f0e7 !important; }
#main-content-container .home-feed h5 { color: var(--harir-ink) !important; font-size: 1.18rem; font-weight: 800; }
#main-content-container .home-feed a:not(.btn) { color: var(--harir-ink) !important; }
.home-section-more { color: var(--harir-accent) !important; }

.mobile-list-title { color: var(--harir-ink); font-size: 1.65rem; }
#main-content-container .advocacy-program-card,
#main-content-container .advocacy-activities-card,
#main-content-container .advocacy-content-card {
  border: 0 !important;
  border-radius: 18px;
  background: var(--harir-surface);
  box-shadow: 0 8px 25px rgba(18, 63, 73, .055) !important;
}
#main-content-container .advocacy-program-card .advocate-programme-card-details,
#main-content-container .advocacy-activities-card .card-footer { border-color: var(--harir-line); }
#main-content-container .advocacy-content-card .card-header,
#main-content-container .advocacy-content-card .card-footer { background: var(--harir-surface) !important; }
#main-content-container .advocacy-content-card .card-header .badge { background: #e4f0e8 !important; color: var(--harir-deep); }

#main-content-container .course-detail-body {
  border: 0;
  border-radius: 20px;
  background: var(--harir-surface);
  box-shadow: 0 8px 28px rgba(18, 63, 73, .06);
}
#main-content-container .course-detail-body .img-container { background: #e9f1ec; }
#main-content-container .course-detail-body hr { border-color: var(--harir-line); }

#main-content-container .form-control,
#main-content-container .form-select {
  border-color: #cadbd4;
  background: #fff;
}
#main-content-container .form-control:focus,
#main-content-container .form-select:focus {
  border-color: var(--harir-accent) !important;
  box-shadow: 0 0 0 3px rgba(23, 111, 112, .14) !important;
}

.first-half { background: var(--harir-deep); }
.first-half .auth-form { border-radius: 22px; box-shadow: 0 18px 48px rgba(5, 37, 43, .2); }
.first-half .auth-form h2 { color: var(--harir-deep) !important; }
.first-half .auth-form .btn-primary { background: var(--harir-accent) !important; }
.first-half .auth-form .form-control:focus { border-color: var(--harir-accent) !important; }

footer { background: #e9f0ea !important; }
footer .footer-links { color: var(--harir-ink); }
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.footer-nav a { color: var(--harir-ink); font-weight: 700; }
.footer-nav a:hover { color: var(--harir-accent); }
.footer-copyright { color: var(--harir-muted); }

/* Phone and WebView layout lives in mobile-app.css, which loads after this file. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary,
  .services-container .service-card { transition: none; }
}