/* ==========================================================================
   TABJ — Modern Redesign Overrides
   A fresh visual layer for The African Business Journal.
   Loaded AFTER all theme/cache styles so it can safely override them.
   Content, markup and links are untouched — this file only restyles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --tabj-navy:#0b1330;
  --tabj-navy-2:#141c3d;
  --tabj-ink:#1c2333;
  --tabj-body:#48506b;
  --tabj-muted:#7680a0;
  --tabj-bg:#f4f6fb;
  --tabj-card:#ffffff;
  --tabj-line:#e6e9f2;
  --tabj-accent:#e8792c;
  --tabj-accent-2:#0fb5ae;
  --tabj-gold:#f0a93d;
  --tabj-radius:14px;
  --tabj-shadow:0 10px 30px -12px rgba(11,19,48,.18);
  --tabj-shadow-sm:0 4px 14px -6px rgba(11,19,48,.14);
}

/* ---------- Base ---------- */
body{
  background:var(--tabj-bg) !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif !important;
  color:var(--tabj-body) !important;
  -webkit-font-smoothing:antialiased;
}
#page.site{background:var(--tabj-bg) !important;}
h1,h2,h3,h4,h5,.page-title,.entry-title,.widget-title,.site-title,.author-name{
  font-family:'Poppins',Inter,sans-serif !important;
  color:var(--tabj-ink) !important;
  letter-spacing:-.01em;
}
a{color:var(--tabj-accent-2);}
.wrapper{max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box;}

/* ---------- Header ---------- */
header#masthead.site-header{
  background:linear-gradient(120deg,var(--tabj-navy) 0%,var(--tabj-navy-2) 100%) !important;
  border:none !important;
  box-shadow:0 4px 24px rgba(11,19,48,.25);
}
header#masthead .wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;transition:padding .25s ease;}
.site-title a{color:#ffffff !important;font-weight:800 !important;font-size:1.35rem !important;}
.site-description{color:rgba(255,255,255,.6) !important;font-size:.78rem !important;letter-spacing:.04em;text-transform:uppercase;}
.custom-logo{filter:brightness(0) invert(1);}

.main-navigation ul#primary-menu{gap:4px;}
.main-navigation ul#primary-menu > li > a{
  color:rgba(255,255,255,.82) !important;
  font-weight:600 !important;
  font-size:.92rem;
  padding:10px 14px !important;
  border-radius:8px;
  transition:background .2s,color .2s;
}
.main-navigation ul#primary-menu > li > a:hover,
.main-navigation ul#primary-menu > li > a:focus,
.main-navigation ul#primary-menu > li.current-menu-item > a,
.main-navigation ul#primary-menu > li.current-post-ancestor > a{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
}
.main-navigation ul .sub-menu{
  background:var(--tabj-navy-2) !important;
  border-radius:var(--tabj-radius);
  box-shadow:var(--tabj-shadow);
  border:1px solid rgba(255,255,255,.08) !important;
}
.main-navigation ul#primary-menu ul li > a{color:rgba(255,255,255,.85) !important;}
.main-navigation ul#primary-menu ul li:hover > a,
.main-navigation ul#primary-menu ul li:focus > a{background:var(--tabj-accent-2) !important;color:#fff !important;}
.main-navigation li.adopt-pet a:before,.btn,input[type="submit"]{border-color:var(--tabj-accent-2) !important;}
a,.site-title a:hover,.main-navigation a:hover{color:var(--tabj-accent-2) !important;}

#search input.search-field{border-radius:20px !important;}
.menu-button.menu-toggle{color:#fff !important;}
.menu-button svg.icon{fill:#fff !important;}

/* Sticky header on mobile only: header stays pinned while scrolling,
   and shrinks down to just the hamburger button once you scroll past
   the top so it doesn't take up screen space. Desktop is untouched.
   Scoped to .sticky-mobile-header so it only applies on pages that
   opt in (that class is added directly on the <header> tag). */
@media screen and (max-width:1023px){
  header#masthead.site-header.sticky-mobile-header{
    position:sticky;
    top:0;
    z-index:999;
  }
  header#masthead.site-header.sticky-mobile-header.is-scrolled .wrapper{
    padding-top:6px;
    padding-bottom:6px;
  }
  header#masthead.site-header.sticky-mobile-header.is-scrolled .site-branding,
  header#masthead.site-header.sticky-mobile-header.is-scrolled .main-navigation{
    display:none !important;
  }
}

/* ---------- Hero / page header banner ---------- */
#page-site-header{
  background-color:var(--tabj-navy) !important;
  min-height:200px;
}
#page-site-header .overlay{
  background:linear-gradient(120deg,rgba(11,19,48,.92) 0%,rgba(15,181,174,.55) 100%) !important;
}
#page-site-header .page-title{
  color:#fff !important;
  font-size:clamp(1.6rem,3vw,2.4rem) !important;
  font-weight:800 !important;
  margin:0;
}
#breadcrumb-list{background:transparent !important;}
.breadcrumb-trail.breadcrumbs,.trail-items{color:rgba(255,255,255,.75) !important;}
.trail-items li,.trail-items a{color:rgba(255,255,255,.75) !important;font-size:.82rem;}
.trail-items li:not(:last-child):after{color:rgba(255,255,255,.4) !important;}

/* ---------- Layout ---------- */
#inner-content-wrapper{padding-top:36px !important;padding-bottom:48px !important;}
#primary.content-area{background:transparent !important;}

/* ---------- Article grid / cards (listing pages) ---------- */
.posts-wrapper{
  display:grid !important;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
  float:none !important;
}
/* Prevent the theme's clearfix (.clear:before/:after) from being treated
   as extra grid items, which was shifting every card over by one slot. */
.posts-wrapper:before,.posts-wrapper:after{content:none !important;display:none !important;}
@media (max-width:700px){.posts-wrapper{grid-template-columns:1fr;}}
.posts-wrapper article,article[id^="post-"]{
  background:var(--tabj-card) !important;
  border-radius:var(--tabj-radius) !important;
  box-shadow:var(--tabj-shadow-sm);
  border:1px solid var(--tabj-line) !important;
  overflow:hidden;
  float:none !important;
  width:auto !important;
  margin:0 !important;
  height:100%;
  display:flex !important;
  flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.posts-wrapper article:hover{transform:translateY(-4px);box-shadow:var(--tabj-shadow);}
.featured-image{margin:0 !important;}
.featured-image img{width:100%;height:210px;object-fit:cover;display:block;}
.entry-container{padding:18px 20px 22px !important;display:flex;flex-direction:column;flex:1 1 auto;}
.entry-title{font-size:1.12rem !important;line-height:1.35 !important;margin:0 0 8px !important;}
.entry-title a{color:var(--tabj-ink) !important;}
.entry-title a:hover{color:var(--tabj-accent-2) !important;}
.entry-content p{color:var(--tabj-body) !important;font-size:.94rem;line-height:1.6;}
.read-more{margin-top:14px !important;margin-top:auto !important;padding-top:14px;}

/* ---------- Buttons ---------- */
.btn,.btn.btn-primary,input[type="submit"],.mc4wp-form input[type="submit"]{
  background:var(--tabj-accent) !important;
  border:none !important;
  color:#fff !important;
  font-weight:600 !important;
  border-radius:999px !important;
  padding:9px 20px !important;
  display:inline-block;
  transition:background .2s,transform .2s;
}
.btn:hover,.btn.btn-primary:hover,input[type="submit"]:hover{background:var(--tabj-navy) !important;transform:translateY(-1px);}

/* ---------- Single article page ---------- */
.single-wrapper article{
  background:var(--tabj-card);
  border-radius:var(--tabj-radius);
  box-shadow:var(--tabj-shadow-sm);
  border:1px solid var(--tabj-line);
  padding:28px 30px;
}
.single-wrapper .featured-image{margin:0 -30px 22px !important;}
.single-wrapper .featured-image img{width:100%;max-height:420px;object-fit:cover;border-radius:0;}
.single-wrapper .entry-content{font-size:1.02rem;line-height:1.75;color:var(--tabj-body) !important;}
.single-wrapper .entry-content strong{color:var(--tabj-ink);}
.single-wrapper .entry-meta{color:var(--tabj-muted);font-size:.85rem;}
.single-wrapper .entry-meta .cat-links a,.single-wrapper .entry-meta .tags-links a{
  background:rgba(15,181,174,.1);color:var(--tabj-accent-2) !important;border-radius:999px;padding:3px 10px;font-weight:600;
}
.author-box{
  margin-top:24px;padding:18px;border-radius:var(--tabj-radius);
  background:var(--tabj-bg);border:1px solid var(--tabj-line);
  display:flex;gap:16px;align-items:flex-start;
}
.author-avatar img{border-radius:50%;}
.navigation.post-navigation,.navigation.posts-navigation{margin-top:24px;}
.navigation.post-navigation .nav-links,.navigation.posts-navigation .nav-links{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.navigation .nav-previous a,.navigation .nav-next a{
  background:var(--tabj-card);border:1px solid var(--tabj-line);border-radius:999px;
  padding:9px 18px;color:var(--tabj-ink) !important;font-weight:600;font-size:.88rem;
}
.navigation .nav-previous a:hover,.navigation .nav-next a:hover{border-color:var(--tabj-accent-2);color:var(--tabj-accent-2) !important;}

/* ---------- Sidebar widgets ---------- */
aside#secondary.widget-area .widget{
  background:var(--tabj-card);
  border:1px solid var(--tabj-line);
  border-radius:var(--tabj-radius);
  padding:20px 22px;
  margin-bottom:22px;
  box-shadow:var(--tabj-shadow-sm);
}
.widget-title{font-size:1rem !important;margin:0 0 12px !important;position:relative;padding-bottom:10px;}
.widget-title:after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--tabj-accent);border-radius:2px;}
.quick-links-list{list-style:none;padding:0;margin:0;}
.quick-links-list li{border-bottom:1px solid var(--tabj-line);padding:8px 0;}
.quick-links-list li:last-child{border-bottom:none;}
.quick-links-list a{color:var(--tabj-ink);font-weight:600;}
.quick-links-list a:hover{color:var(--tabj-accent-2);}
.mc4wp-form input[type="text"],.mc4wp-form input[type="email"]{
  width:100%;padding:10px 12px;border:1px solid var(--tabj-line);border-radius:8px;margin-bottom:10px;font-family:inherit;
}
.mc4wp-form .msubmit input{width:100%;border-radius:999px;}

/* ---------- Footer ---------- */
footer#colophon.site-footer{
  background:var(--tabj-navy) !important;
  color:rgba(255,255,255,.7) !important;
  margin-top:40px;
}
footer#colophon .copyright{color:rgba(255,255,255,.7) !important;}
footer#colophon .site-info{padding:22px 0;}
.backtotop{background:var(--tabj-accent-2) !important;}
.backtotop svg{fill:#fff !important;}

/* ---------- Misc polish ---------- */
img{max-width:100%;}
.pagination .page-numbers{border-radius:8px !important;}
.pagination .page-numbers.current,.pagination .page-numbers:hover{
  background:var(--tabj-accent-2) !important;border-color:var(--tabj-accent-2) !important;color:#fff !important;
}