/* ==========================================================================
   paymentinitiative.org — site.css
   Loaded last, after foundation.min.css, lcms-public.css and the archived
   theme CSS (app.css, responsive-tables.css, userstyles.css). It restates the
   archive layout (banner header, red menu bar, blue contact bar, white content
   area, blue footer) and styles the components the static rebuild adds
   (article covers and figures, card grid, related links, responsive tables).
   ========================================================================== */

/* ---------- base ---------- */
html, body { overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

body {
  background: #656464;
  padding-bottom: 0;
}

/* ---------- banner header ---------- */
#banner {
  background: #ffffff;
  padding: 8px 0 0;
}
#banner .imageElement { padding: 0; }
#banner .imageElement img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  height: auto;
}

/* ---------- red menu bar ---------- */
#mainNav {
  background: #BA1D1D;
  border-top: 3px solid #102760;
}
#mainNav .top-bar { background: transparent !important; height: auto; min-height: 44px; }
#mainNav .top-bar-section ul.globalMenu { list-style: none; margin: 0; padding: 0; }
#mainNav .top-bar-section ul.globalMenu > li {
  display: inline-block;
  float: none;
  background: transparent;
  margin: 0;
}
#mainNav .top-bar-section ul.globalMenu > li > a {
  display: block;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 44px;
  padding: 0 0.9rem;
  text-decoration: none;
}
#mainNav .top-bar-section ul.globalMenu > li > a:hover { color: #ffffff; background: rgba(0, 0, 0, 0.18); }
#mainNav .top-bar-section ul.globalMenu > li.selectedPage > a { background: #102760; }

/* ---------- blue contact bar ---------- */
#contactUs {
  background: #3876BA;
  border-top: 2px solid #ffffff;
  padding: 6px 0;
  min-height: 40px;
}
#contactUs .search { position: relative; }
#contactUs .searchInput {
  display: inline-block;
  width: calc(100% - 96px);
  margin: 0 !important;
  margin-left: 0 !important;
  height: 28px;
  padding: 0 8px !important;
  font-size: 0.8rem;
  border: 0;
  border-radius: 3px 0 0 3px;
  vertical-align: middle;
}
#contactUs .searchButton {
  display: inline-block !important;
  width: 92px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: #102760;
  color: #ffffff;
  border: 0;
  border-radius: 0 3px 3px 0;
  font-size: 0.75rem;
  line-height: 28px;
  vertical-align: middle;
  cursor: pointer;
}
#contactUs .dropdown { display: inline-block; position: relative; }
#contactUs .dropbtn {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 0.8rem;
  padding: 6px 4px;
}
#contactUs .dropbtn img { vertical-align: middle; margin-right: 4px; }
#contactUs .dropdown-content { display: none; }
#contactUs .dropdown:hover .dropdown-content {
  display: block;
  position: absolute;
  right: 0;
  z-index: 1200;
  background: #ffffff;
  border: 1px solid #dddddd;
  min-width: 220px;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
#contactUs .dropdown-content a {
  display: block;
  padding: 8px 12px;
  color: #2368B3;
  font-size: 0.8rem;
}
#contactUs .dropdown-content a:hover { background: #f2f2f2; }

/* ---------- white content area ---------- */
#mainContent, #mainContentBack { background: #ffffff; }

.element.textElement.article_entry { padding-bottom: 10px; }
.article_entry h1 {
  font-size: 1.6rem;
  color: #0F487E;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 8px;
  margin: 4px 0 14px;
}
.article_entry h2 {
  font-size: 1.2rem;
  color: #BA1D1D;
  margin: 22px 0 8px;
}
.article_entry h3 { color: #0F487E; }
.art_lead {
  font-size: 0.95rem;
  color: #333333;
  line-height: 1.55;
}
.article_entry p { line-height: 1.55; }
.article_entry ul { margin: 6px 0 14px; padding-left: 26px; }
.article_entry ul li {
  list-style: none;
  position: relative;
  padding-left: 4px;
  margin-bottom: 4px;
}
.article_entry ul li::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #3876BA;
  border-radius: 50%;
}

/* article cover + inline figures */
.art_cover { margin: 0 0 14px; }
.art_cover img { display: block; width: 100%; height: auto; border-radius: 3px; }
.art_fig {
  margin: 16px 0;
  padding: 0;
  background: #f7f7f7;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  overflow: hidden;
}
.art_fig img { display: block; width: 100%; height: auto; }
.art_fig figcaption {
  font-size: 0.75rem;
  color: #666666;
  padding: 6px 10px;
  font-style: italic;
}

/* responsive data table */
.table-wrapper { margin: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrapper .scrollable { min-width: 100%; }
table.art-table,
table.art-table.responsive {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
table.art-table th,
table.art-table td {
  border: 1px solid #dddddd;
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
table.art-table thead th,
table.art-table tr:first-child th {
  background: #0F487E;
  color: #ffffff;
  font-weight: 600;
}
table.art-table tbody tr:nth-child(even) { background: #f7f7f7; }

/* ---------- related links ---------- */
.related {
  clear: both;
  margin: 24px 0 6px;
  padding: 12px 14px;
  background: #f7f7f7;
  border: 1px solid #eeeeee;
  border-radius: 3px;
}
.related h2 { font-size: 1rem; color: #0F487E; margin: 0 0 8px; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related ul li { margin-bottom: 5px; }
.related ul li::before { content: none; }

/* ---------- card grid ---------- */
.art_grid { display: flex; flex-wrap: wrap; margin: 0 -6px; }
.art_grid .art_card {
  display: block;
  flex: 0 0 calc(50% - 12px);
  max-width: calc(50% - 12px);
  margin: 6px;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: #2368B3;
  background: #ffffff;
}
.art_grid .art_card_i { display: block; }
.art_grid .art_card_i img { display: block; width: 100%; height: auto; }
.art_grid .art_card_b { display: block; padding: 8px 10px; }
.art_grid .art_card_t { display: block; font-size: 0.8rem; line-height: 1.3; }
.art_grid .art_card:hover { border-color: #3876BA; }
.art_grid .art_card:hover .art_card_t { text-decoration: underline; }

/* ---------- sidebar ---------- */
#sideBar .element { margin-bottom: 18px; }
#sideBar .sidenav {
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 0 12px;
  background: #ffffff;
}
#sideBar .sidenav h2 { padding-top: 8px; }
#sideBar .sidenav ul { margin: 0 0 8px; }
#sideBar .sidenav ul li { padding: 3px 0; }
#sideBar .sidenav a.current { font-weight: 600; color: #0F487E; }
#sideBar .provider-portal {
  background: #F2F2F2;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 12px 14px;
}
#sideBar .provider-portal h2 { margin-top: 0; }
#sideBar .provider-portal .learn { margin-bottom: 0; }
#sideBar .feature-banner img { display: block; width: 100%; height: auto; padding: 0; }
#sideBar .feature-banner { text-align: center; }
#sideBar .partner-box {
  border-top: 1px solid #eeeeee;
  padding-top: 10px;
}
#sideBar .partner-box .plogos img {
  display: inline-block;
  vertical-align: middle;
  padding: 4px 6px 4px 0;
  max-width: 48%;
  width: auto;
}

/* ---------- footer ---------- */
footer {
  background: #102760;
  padding: 12px 0;
  font-size: 11px;
  color: #A8D8FA;
}
footer a { color: #A8D8FA; }
footer a:hover { color: #ffffff; }
footer #arkansasGov img { vertical-align: middle; padding-right: 10px; }
footer #arkansasGov a { margin-right: 8px; }

/* ---------- breadcrumb ---------- */
.bc { font-size: 0.75rem; color: #0F487E; padding-bottom: 12px; }
.bc a { color: #2368B3; }

/* ---------- small screens ---------- */
@media only screen and (max-width: 64em) {
  #mainNav .top-bar-section ul.globalMenu > li > a { padding: 0 0.6rem; }
  .art_grid .art_card { flex: 0 0 calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media only screen and (max-width: 40em) {
  body { margin-top: 0; }
  #banner { display: none; }
  #contactUs .searchInput { width: 100%; border-radius: 3px; }
  #contactUs .searchButton { display: none !important; }
  #contactUs .text-right { text-align: left; }
  .art_grid .art_card { flex: 0 0 calc(100% - 12px); max-width: calc(100% - 12px); }
  #mainContent, #mainContentBack { padding-left: 8px; padding-right: 8px; }
  table.art-table, table.art-table.responsive { font-size: 0.72rem; }
  table.art-table th, table.art-table td { padding: 5px 6px; }
  #sideBar { margin-top: 16px; }
}