/* ==========================================================================
   Federal University Dutse Journal - public website theme
   Crest palette: green #006A28 · maroon #922619 · ochre #A8651C · gold #F2B563
   Loaded after style.css / responsive.css and overrides the base template.
   ========================================================================== */

:root {
  --fud-green:       #006a28;
  --fud-green-dark:  #004d1d;
  --fud-green-deep:  #003314;
  --fud-green-soft:  #eaf4ed;
  --fud-maroon:      #922619;
  --fud-ochre:       #a8651c;
  --fud-gold:        #f2b563;
  --fud-cream:       #fbf8f1;
  --fud-ink:         #1d2621;
  --fud-muted:       #5b6860;
  --fud-line:        #e3e1d8;
  --fud-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --fud-sans:  "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;
  --fud-stripe: linear-gradient(90deg, var(--fud-green) 0 60%, var(--fud-gold) 60% 80%, var(--fud-maroon) 80% 100%);
}

body {
  color: var(--fud-ink);
  background: #fff;
  font-family: var(--fud-sans);
  font-size: 16px;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--fud-serif); color: var(--fud-green-deep); }
a { color: var(--fud-green); }
a:hover, a:focus { color: var(--fud-maroon); text-decoration: none; }
.text-primary, .text-info { color: var(--fud-green) !important; }
a.text-info:hover { color: var(--fud-maroon) !important; }
::selection { background: var(--fud-gold); color: var(--fud-green-deep); }

/* ---- Buttons --------------------------------------------------------- */
.fud-btn-gold {
  display: inline-block;
  padding: 7px 16px;
  border-radius: 3px;
  background: var(--fud-gold);
  color: var(--fud-green-deep) !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  transition: background .2s ease, transform .2s ease;
}
.fud-btn-gold:hover { background: #f6c783; transform: translateY(-1px); }
.button, .main_btn, .btn-primary, .btn-success, .genric-btn.primary {
  background: var(--fud-green) !important;
  border-color: var(--fud-green) !important;
  color: #fff !important;
}
.button:hover, .main_btn:hover, .btn-primary:hover, .btn-success:hover, .genric-btn.primary:hover {
  background: var(--fud-green-dark) !important;
  border-color: var(--fud-green-dark) !important;
}
.btn-info { background: var(--fud-ochre); border-color: var(--fud-ochre); }
.btn-info:hover { background: #8c5316; border-color: #8c5316; }

/* ---- Utility bar ------------------------------------------------------ */
.fud-utility {
  background: var(--fud-green-deep);
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  padding: 6px 0;
}
.fud-utility a { color: #fff; }
.fud-utility a:hover { color: var(--fud-gold); }
.fud-utility em { color: var(--fud-gold); font-style: italic; }
.fud-utility__uni a { font-weight: 600; letter-spacing: .2px; }
.fud-utility__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fud-utility__links .fud-btn-gold { padding: 4px 12px; font-size: 13px; }

/* ---- Masthead ----------------------------------------------------------- */
.fud-masthead {
  padding: 22px 0;
  background:
    radial-gradient(circle at 92% 30%, rgba(242, 181, 99, .22), transparent 38%),
    var(--fud-cream);
  border-bottom: 1px solid var(--fud-line);
}
.fud-brand { display: flex; align-items: center; gap: 18px; color: inherit; }
.fud-brand img { height: 92px; width: auto; flex: 0 0 auto; }
.fud-brand__name {
  display: block;
  font-family: var(--fud-serif);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.15;
  color: var(--fud-green-deep);
}
.fud-brand__tag { display: block; margin-top: 4px; font-size: 15px; color: var(--fud-muted); }
.fud-brand:hover .fud-brand__name { color: var(--fud-green); }
.fud-issn {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-left: 22px;
  border-left: 3px solid var(--fud-gold);
  font-size: 14px;
  color: var(--fud-muted);
}
.fud-issn strong { color: var(--fud-ink); font-weight: 600; }
.fud-issn__abbr { margin-top: 4px; font-family: var(--fud-serif); font-weight: 900; font-size: 24px; color: var(--fud-maroon); letter-spacing: 1px; }
@media (max-width: 575px) {
  .fud-brand img { height: 64px; }
  .fud-brand__name { font-size: 21px; }
  .fud-brand__tag { font-size: 13px; }
}

/* ---- Main navigation ------------------------------------------------ */
.header_area .main_menu { background: var(--fud-green); }
.header_area .main_menu:after { content: ""; display: block; height: 4px; background: var(--fud-stripe); }
.header_area .navbar .nav .nav-item { margin-right: 30px; }
.header_area .navbar .nav .nav-item .nav-link {
  position: relative;
  font: 600 15px/56px var(--fud-sans);
  color: rgba(255, 255, 255, .92);
}
.header_area .navbar .nav .nav-item .nav-link:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 3px;
  background: var(--fud-gold);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.header_area .navbar .nav .nav-item:hover .nav-link,
.header_area .navbar .nav .nav-item.active .nav-link { color: #fff; }
.header_area .navbar .nav .nav-item:hover .nav-link:after,
.header_area .navbar .nav .nav-item.active .nav-link:after { transform: scaleX(1); }
.header_area.navbar_fixed .main_menu { background: var(--fud-green); }
.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link { line-height: 56px; }
.fud-nav-label { color: #fff; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.navbar-toggler { padding: 14px 0; border: 0; }
.navbar-toggler span { background: #fff !important; }
@media (max-width: 991px) {
  .header_area .navbar { padding: 0; }
  .header_area .navbar .nav .nav-item { margin-right: 0; border-top: 1px solid rgba(255, 255, 255, .12); }
  .header_area .navbar .nav .nav-item .nav-link { line-height: 46px; padding: 0 4px; display: block; }
  .header_area .navbar .nav .nav-item .nav-link:after { bottom: 6px; right: auto; width: 40px; }
  .navbar-collapse { padding-bottom: 10px; }
}

/* ---- Page banner ---------------------------------------------------- */
.banner_area .banner_inner {
  min-height: 118px;
  background:
    radial-gradient(circle at 85% 20%, rgba(242, 181, 99, .25), transparent 40%),
    radial-gradient(circle at 10% 110%, rgba(146, 38, 25, .35), transparent 45%),
    linear-gradient(120deg, var(--fud-green-dark), var(--fud-green-deep));
}
.banner_area .banner_inner .banner_content h2 {
  font-family: var(--fud-serif);
  font-size: 30px;
  font-weight: 900;
  color: #fff;
}
.banner_area .banner_inner .banner_content .page_link a { color: rgba(255, 255, 255, .85); font-family: var(--fud-sans); }
.banner_area .banner_inner .banner_content .page_link a:hover { color: var(--fud-gold); }
.banner_area .banner_inner .banner_content .page_link a:last-child { color: var(--fud-gold); }

/* ---- Content -------------------------------------------------------- */
.area-padding { padding: 48px 0; }
.blog_area { background: #fff; }
.blog_details h2 { font-size: 24px; }
.blog_details h4 { font-size: 18px; line-height: 1.5; color: var(--fud-ink); }
.blog_details .top_title { padding-top: 1px; }
.blog_details a:hover { color: var(--fud-maroon); }
.blog-info-link li a { color: var(--fud-muted); }
.comments-area { border-top: 1px solid var(--fud-line); }
.comments-area h4 { font-size: 20px; color: var(--fud-green-deep); }
.comments-area .comment { color: var(--fud-ink); font-size: 16px; }
.comment-list .single-comment { padding: 6px 0; }
.brief-col { background-color: var(--fud-green-soft); }

.quote-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 28px;
  margin: 10px 0 28px;
  background: var(--fud-cream);
  border: 1px solid var(--fud-line);
  border-radius: 6px;
  color: var(--fud-ink);
  font-style: normal;
  line-height: 1.75;
}
.quote-wrapper br { display: none; }
.quote-wrapper img {
  width: 220px;
  height: auto !important;
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0, 51, 20, .22);
}
.quotes {
  flex: 1 1 320px;
  padding: 6px 0 6px 20px;
  background: transparent;
  border-left: 4px solid var(--fud-gold);
  font-size: 17px;
}

.full-text-btn {
  display: inline-block;
  padding: 5px 16px;
  margin: 0 6px 8px 0;
  border: 1px solid var(--fud-green);
  border-radius: 3px;
  background: #fff;
  color: var(--fud-green);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s ease;
}
.full-text-btn:hover { background: var(--fud-green); color: #fff; }

.blog_right_sidebar .single_sidebar_widget { background: var(--fud-cream); border: 1px solid var(--fud-line); }
.blog_right_sidebar .widget_title { border-bottom-color: var(--fud-gold); color: var(--fud-green-deep); }
.blog_right_sidebar .post_category_widget .cat-list li:hover a,
.blog_right_sidebar .tag_cloud_widget ul li a:hover { color: var(--fud-maroon); }
.blog_right_sidebar .tag_cloud_widget ul li a:hover { background: var(--fud-green); color: #fff; }

.form-contact .form-control, .form-control {
  border: 1px solid #cfd6d1;
  border-radius: 4px;
}
.form-contact .form-control:focus, .form-control:focus {
  border-color: var(--fud-green);
  box-shadow: 0 0 0 .2rem rgba(0, 106, 40, .15);
}

/* Static information pages */
.fud-page { max-width: 900px; margin: 0 auto; }
.fud-page .fud-crumb { font-size: 14px; color: var(--fud-muted); margin-bottom: 18px; }
.fud-page h3 { margin: 30px 0 12px; font-size: 22px; }
.fud-page h3:first-of-type { margin-top: 0; }
.fud-page h4 { margin: 22px 0 8px; font-size: 18px; color: var(--fud-green); }
.fud-page p, .fud-page li { text-align: justify; }
.fud-page ul { padding-left: 20px; margin-bottom: 14px; }
.fud-page ul li { list-style: disc; margin-bottom: 4px; }
.fud-page ol li { list-style: decimal; margin-left: 20px; margin-bottom: 4px; }
.fud-callout {
  padding: 18px 22px;
  margin: 22px 0;
  background: var(--fud-cream);
  border-left: 4px solid var(--fud-gold);
  border-radius: 4px;
}
.fud-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin: 18px 0 8px; }
.fud-card {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--fud-line);
  border-top: 3px solid var(--fud-green);
  border-radius: 4px;
}
.fud-card .role { display: block; font-size: 13px; font-weight: 700; color: var(--fud-ochre); text-transform: uppercase; letter-spacing: 1px; }
.fud-card .name { display: block; margin: 4px 0; font-family: var(--fud-serif); font-weight: 700; font-size: 17px; color: var(--fud-green-deep); }
.fud-card .aff { display: block; font-size: 14.5px; color: var(--fud-muted); }

/* ---- Footer -------------------------------------------------------- */
.fud-footer {
  padding-top: 56px;
  background: var(--fud-green-deep);
  color: rgba(255, 255, 255, .8);
  border-top: 5px solid transparent;
  border-image: var(--fud-stripe) 1;
}
.fud-footer .single-footer-widget h4 {
  font-family: var(--fud-serif);
  font-size: 17px;
  color: var(--fud-gold);
  margin-bottom: 18px;
}
.fud-footer .single-footer-widget p,
.fud-footer .footer-address p,
.fud-footer .footer-address span { color: rgba(255, 255, 255, .8); font-size: 15px; }
.fud-footer .footer-address span { display: block; margin-bottom: 6px; }
.fud-footer .footer-address i { width: 18px; color: var(--fud-gold); }
.fud-footer a { color: #fff; }
.fud-footer a:hover { color: var(--fud-gold); }
.fud-footer .single-footer-widget ul li a { color: rgba(255, 255, 255, .85); }
.fud-footer .single-footer-widget ul li a:hover { color: var(--fud-gold); }
.fud-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.fud-footer__brand img { height: 58px; width: auto; padding: 4px; background: #fff; border-radius: 50%; }
.fud-footer__brand strong { display: block; font-family: var(--fud-serif); color: #fff; font-size: 16px; line-height: 1.3; }
.fud-footer__brand span { display: block; font-size: 13px; color: var(--fud-gold); }
.fud-footer__bottom {
  margin-top: 26px;
  padding: 16px 0;
  background: rgba(0, 0, 0, .22);
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
}
.fud-footer__bottom .container { gap: 6px 20px; }

/* ---- Small screens -------------------------------------------------- */
.fud-brand, .fud-brand > span { min-width: 0; }
.quotes { min-width: 0; }
@media (max-width: 991px) {
  .header_area .navbar { background: transparent; }
  .header_area .navbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .navbar-toggler { margin: 0; padding: 16px 0; }
  .header_area .navbar-collapse { max-height: none; overflow: visible; flex-basis: 100%; }
  .header_area .navbar .nav .nav-item .nav-link { border-bottom: 0; }
}
@media (max-width: 767px) {
  .fud-utility .container { gap: 4px; }
  .fud-masthead { padding: 16px 0; }
  .fud-brand { gap: 12px; }
  .quote-wrapper { padding: 20px; gap: 20px; }
  .quotes { flex-basis: 100%; padding-left: 14px; font-size: 16px; }
  .quote-wrapper img { width: 180px; margin: 0 auto; }
  .banner_area .banner_inner .banner_content .page_link { padding: 8px 0 18px; }
  .banner_area .banner_inner .banner_content h2 { padding-top: 18px; font-size: 25px; }
  .fud-cards { grid-template-columns: 1fr; }
}

/* ---- Pagination ----------------------------------------------------- */
.fud-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 26px 0 8px; }
.fud-pager__info { margin: 0; font-size: 14px; color: var(--fud-muted); }
.fud-pager .pagination { margin: 0; flex-wrap: wrap; }
.fud-pager .page-link { min-width: 40px; text-align: center; color: var(--fud-green); border-color: var(--fud-line); }
.fud-pager .page-link:hover { color: #fff; background: var(--fud-green); border-color: var(--fud-green); }
.fud-pager .page-item.active .page-link { color: #fff; background: var(--fud-green); border-color: var(--fud-green); }
.fud-pager .page-item.disabled .page-link { color: #b5bdb8; background: #fff; }