/*
 * CivicView / OpenCitiesLab theme for CKAN 2.11.
 * Loaded via templates/base.html ({% block styles %}) from /civicview/brand.css.
 *
 * The @font-face + :root block below is copied from sso/branding/tokens.css (the
 * canonical source of truth). Keep them in sync. Relative font url()s resolve to
 * /civicview/fonts/ because this stylesheet is served at /civicview/brand.css.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('fonts/montserrat.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}

:root {
  --ocl-orange: #D66139;
  --ocl-orange-dark: #b64f2c;
  --ocl-gold:   #FAAD00;
  --ocl-gold-dark: #d99700;
  --ocl-navy:   #1C244B;
  --ocl-slate:  #2F3542;
  --ocl-teal:   #388F76;
  --ocl-bg:     #F9FAFD;
  --ocl-white:  #FFFFFF;
  --ocl-text:   #333333;
  --ocl-muted:  #707070;
  --ocl-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ocl-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ocl-radius: 8px;
  --ocl-radius-pill: 100px;
}

/*
 * NOTE ON !important: CKAN 2.11 ships a compiled Bootstrap/SCSS theme whose
 * selectors (masthead teal, base font, etc.) out-specify a plain layered
 * stylesheet. Rather than recompile CKAN's SCSS, this theme layer wins with
 * !important on the handful of brand-defining properties. Scoped, deliberate.
 */

/* ── Base typography ─────────────────────────────────────────────── */
body {
  font-family: var(--ocl-font-body) !important;
  color: var(--ocl-text);
  background: var(--ocl-bg);
}
h1, h2, h3, h4, h5, h6,
.module-heading, .page-heading, .hero h1 {
  font-family: var(--ocl-font-heading) !important;
  color: var(--ocl-slate);
  font-weight: 700;
}

/* ── Header / navbar — light & airy, matching opencitieslab.org ──────
   CKAN 2.11's masthead ships dark; we flip it to white with dark ink and
   orange active/hover, mirroring the OCL site's white header. (Requires the
   colour logo — SITE_LOGO points at ocl-logo-color.png.) */
.account-masthead {
  background-color: var(--ocl-white) !important;
  border-bottom: 1px solid #e6e8ef;
}
.masthead {
  background-color: var(--ocl-white) !important;
  border-bottom: 1px solid #e6e8ef;
  box-shadow: 0 1px 3px rgba(28, 36, 75, 0.05);
}
.masthead .navbar-brand,
.masthead .navbar-brand img {
  max-height: 46px;
  width: auto;
}
/* CKAN renders nav items as plain `.navbar-nav li a` (no .nav-link class) and
   colours them white for the stock dark bar — force dark ink on our white bar. */
.masthead .navbar-nav li a {
  color: var(--ocl-slate) !important;
  font-family: var(--ocl-font-body);
  font-weight: 500;
}
.masthead .navbar-nav li.active a,
.masthead .navbar-nav li a:hover {
  color: var(--ocl-orange) !important;
  background-color: transparent !important;
}
/* Mobile hamburger icon (ships .text-white) needs dark ink too. */
.masthead .navbar-toggler .fa-bars {
  color: var(--ocl-slate) !important;
}
/* Masthead search box — give it an outline now that the bar is white. */
.masthead .search-input input,
.masthead input[type="text"] {
  border: 1px solid #e6e8ef;
  border-radius: var(--ocl-radius-pill);
}
.account-masthead .account ul li a {
  color: var(--ocl-slate) !important;
}
.account-masthead .account ul li a:hover {
  color: var(--ocl-orange) !important;
  background-color: transparent !important;
}

/* Retint CKAN's dark accent blocks to light so the body reads airy like the OCL
   site. The homepage search module ships teal: `form.search-form.module-content`
   (#005D7A) and its `div.tags` popular-tags bar (#003647). Footer stays dark. */
.search-form.module-content {
  background-color: var(--ocl-white) !important;
}
.tags {
  background-color: var(--ocl-bg) !important;
  border-radius: var(--ocl-radius);
}
/* The giant search input is borderless (built for the teal bar) — outline it. */
.search-form .search-input input,
.search-form .search-giant input {
  border: 1px solid #e6e8ef !important;
  border-radius: var(--ocl-radius-pill) !important;
}
.site-footer {
  background-color: var(--ocl-slate) !important;
}
/* Hero/search/tags text now sits on light surfaces — use dark ink. */
.module-search .module-heading,
.module-search h1, .module-search h2, .module-search h3,
.search-form .heading,
.tags, .tags h3 {
  color: var(--ocl-slate) !important;
}

/* ── Links & accents ─────────────────────────────────────────────── */
a {
  color: var(--ocl-orange);
}
a:hover {
  color: var(--ocl-orange-dark);
}
/* Footer stays dark, so keep its links light. */
.site-footer a {
  color: var(--ocl-white);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary,
.btn-primary:focus {
  background-color: var(--ocl-gold) !important;
  border-color: var(--ocl-gold) !important;
  color: var(--ocl-white) !important;
  border-radius: var(--ocl-radius-pill) !important;
  font-family: var(--ocl-font-body);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:active {
  background-color: var(--ocl-gold-dark) !important;
  border-color: var(--ocl-gold-dark) !important;
  color: var(--ocl-white) !important;
}

/* ── Misc accents ────────────────────────────────────────────────── */
.tag,
.label-default,
.badge {
  background-color: var(--ocl-teal) !important;
  color: var(--ocl-white) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background-color: var(--ocl-orange) !important;
  border-color: var(--ocl-orange) !important;
}