/* 
 Theme Name:   Hueman Pro Child
 Theme URI:    https://africathub.com
 Description:  Customize CSS
 Author:       admin
 Author URI:   
 Template:     hueman-pro
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/

/* ==========================================================================
   Africa Transformation Hub — homepage redesign
   Palette pulled from the theme's existing accent blue (#00b2ec) and the
   dark header, just pushed further toward navy/blue so the header reads
   as two bands (logo bar + nav bar) like the target design.
   ========================================================================== */
:root {
  --ath-navy: #101b2c;
  --ath-blue: #1f6feb;
  --ath-ink: #1c2733;
}

/* --------------------------------------------------------------------
   Header: split the existing single nav bar into a dark logo band on
   top and a blue menu band underneath (the two elements are already
   stacked in the markup — .mobile-title-logo-in-header then .nav-wrap —
   so this is purely a recolor, no structural change).
   -------------------------------------------------------------------- */
#header,
.nav-container {
  background: var(--ath-navy);
}
/* the theme reserves 60px under the header for an optional header image
   (this site doesn't use one, so it was just showing as dead dark space),
   and cancels it back out with #page{margin-top:-60px} so content tucks up
   flush against the nav. Removing the header's padding without also
   zeroing that negative margin makes #page overlap into the nav bar. */
#header { padding-bottom: 0; }
#page { margin-top: 0; }
.mobile-title-logo-in-header {
  padding: 14px 20px;
}
.site-title a.custom-logo-link {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.site-title a.custom-logo-link:hover { color: #fff; opacity: 0.85; }

.nav-wrap {
  background: var(--ath-blue);
}
.nav-wrap .search-form { display: none; }

.nav > li { border-right-color: rgba(255,255,255,0.15); }
.nav li a { color: #fff; }
.nav > li > a:hover,
.nav > li:hover > a,
.nav li > a:hover,
.nav li:hover > a { background: rgba(0,0,0,0.15); color: #fff; }
.nav ul { background: var(--ath-navy); }

/* --------------------------------------------------------------------
   Homepage only: turn the section title into a centered, ruled divider
   like "CONTINENTAL BREAKING NEWS" in the reference design.
   -------------------------------------------------------------------- */
body.home .page-title { text-align: center; margin: 30px 0; }
body.home .page-title h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1rem !important;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ath-blue);
}
body.home .page-title h2:before,
body.home .page-title h2:after {
  content: '';
  flex: 1 1 auto;
  max-width: 260px;
  height: 1px;
  background: var(--ath-blue);
}
body.home .page-title .hu-blog-subheading { color: var(--ath-ink); }

/* the FOLLOW/MORE sidebar-top bars are shorter than the ruled title bar next
   to them, so their colored strip stops short of it — pad them out so all
   three bottoms land on the same line */
body.home .sidebar.s1 .sidebar-top,
body.home .sidebar.s2 .sidebar-top {
  padding-top: 25px;
  padding-bottom: 25px;
}

/* --------------------------------------------------------------------
   Homepage only: featured post as a wide hero card, then the rest of
   the posts as a clean 3-column card grid underneath. (An interleaved
   single grid with the featured post pinned to a center column was tried
   first, but browsers won't backfill row 1 once an explicit-position
   item claims a column, leaving unpredictable gaps — two simple grids
   is the robust equivalent of the reference screenshot's layout.)
   -------------------------------------------------------------------- */
body.home .featured { margin-bottom: 30px; }
body.home .post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
/* .post-list carries the theme's .group clearfix class; its ::before/::after
   (content:''; display:table) become anonymous grid items and steal the
   first and last cells, so they need to be switched off here */
body.home .post-list.group:before,
body.home .post-list.group:after { content: none; }
body.home .post-list .post-row { display: contents; }
body.home .post-list .grid-item,
body.home .post-list .post { width: auto; float: none; }

body.home .post-inner {
  position: relative;
  margin-right: 0;
  background: #fff;
}
body.home .post-thumbnail { margin-bottom: 0; }
body.home .post-thumbnail img { aspect-ratio: 4 / 3; object-fit: cover; }
body.home .featured .post-thumbnail img { aspect-ratio: 21 / 9; }

/* category badge, overlaid on the thumbnail */
body.home .post-meta {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  z-index: 2;
}
body.home .post-meta .post-date { display: none; }
body.home .post-meta .post-category {
  float: none;
  margin: 0;
  background: var(--ath-blue);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 5px 12px;
}
body.home .post-meta .post-category a { color: #fff; }
body.home .featured .post-meta .post-category { background: var(--ath-navy); }

/* sizes matched against briefly.co.za's card headlines (.c-article-card__headline:
   16px/700/24px, .c-article-card-main__headline: 22px/700/33px) — weight kept
   normal per feedback, only the size/spacing was wanted from the reference */
body.home .post-title {
  color: var(--ath-ink);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  margin-top: 12px;
}
body.home .post-title a { color: var(--ath-ink); }
body.home .featured .post-title { font-size: 22px !important; line-height: 33px; }
body.home .entry.excerpt { display: none; }

/* single post article title, matched against briefly.co.za's .c-main-headline
   (30px/800/42px) — font-size needs !important, the theme's "fittext" script
   sets it inline per-page; weight kept normal per feedback */
.single .post-title {
  font-size: 30px !important;
  font-weight: 400;
  line-height: 42px;
  color: var(--ath-ink);
}

/* --------------------------------------------------------------------
   Footer: match the header's dark navy so the site reads as one theme
   top-to-bottom (the widget area was plain white, and the copyright bar
   was a lighter grey than the header).
   -------------------------------------------------------------------- */
#footer,
#footer-bottom {
  background: var(--ath-navy);
}
#footer,
#footer a { color: rgba(255,255,255,0.75); }
#footer a:hover { color: #fff; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
#footer .heading { color: #fff; }

@media only screen and (max-width: 960px) {
  body.home .post-list { grid-template-columns: 1fr; }
}