/* Add your custom styles here */


/* Adds a bit of spacing to "Responsive Grid Row" blocks. */
.crx-grid {
  padding-top: 20px;
  padding-bottom: 40px;
}
.crx-grid .crx-grid {
  padding-top: 0;
  padding-bottom: 0;
}

/* ===== CCS brand (ported from the old ccslodi ccs.css) =====
   primary #ec008c · secondary #92278f · accent-green #a6ce39 · accent-orange #faa61a */
:root {
  --ccs-primary: #ec008c;
  --ccs-secondary: #92278f;
  --ccs-green: #a6ce39;
  --ccs-orange: #faa61a;
}

/* headings + links */
h1, h2, .h1, .h2 { color: var(--ccs-secondary); }
h3, h4, .h3, .h4 { color: var(--ccs-orange); }
a { color: var(--ccs-secondary); }
a:hover, a:focus { color: var(--ccs-primary); }

/* navbar (override CodeRed's navbar-light bg-light) */
.navbar.bg-light { background-color: var(--ccs-secondary) !important; }
.navbar .navbar-brand,
.navbar .nav-link { color: #fff !important; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--ccs-green) !important; }
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  background-color: var(--ccs-green);
  color: var(--ccs-secondary) !important;
  border-radius: 4px;
}
.navbar-light .navbar-toggler { border-color: rgba(255, 255, 255, .6); }
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* footer */
footer, .footer { background-color: var(--ccs-secondary); color: #fff; }
footer a, .footer a { color: #fff; }
footer a:hover, .footer a:hover { color: var(--ccs-green); }

/* hero/banner blocks in the magenta brand color */
.ccs-banner, .banner { background-color: var(--ccs-primary); color: #fff; }
.ccs-banner h1, .ccs-banner h2, .ccs-banner h3, .banner h1, .banner h2, .banner h3 { color: #fff; }

/* resource category / tag pills */
.category,
.tags a,
a[href*="?tag="],
.badge.bg-secondary {
  display: inline-block;
  color: var(--ccs-secondary) !important;
  background-color: var(--ccs-green) !important;
  padding: 4px 8px;
  border-radius: 2px;
  margin: 0 .5rem .5rem 0;
  text-decoration: none;
}

/* Tighten the big default margin on the page-title header (Bootstrap my-5 = 3rem).
   Scoped to WebPages so it doesn't touch other .my-5 uses. */
.crx-webpage .container.my-5 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}