/* =====================================================================
   GREYBN – custom styles for Newsium Pro (child theme: greybn-child)
   File: wp-content/themes/greybn-child/assets/css/greybn.css
   Loads AFTER the parent theme CSS and the Customizer inline CSS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. Rules carried over from the old "Additional CSS" box
      (Additional CSS is saved per theme, so it does not follow you to
      the child theme. These are the old rules that are still wanted.)
   --------------------------------------------------------------------- */
body { background-color: #181818 !important; }
body.single-post .entry-title { font-size: 2em; }

#sidr { background-color: rgba(28, 28, 28, 1); }
#sidr h2 { color: #fff; }
#sidr a,
#sidr .widget > ul > li a,
.sidebar-area .widget > ul > li a { color: #ffffffc7; }
#sidr .widget > ul > li a:hover,
.sidebar-area .widget > ul > li a:hover { color: #ffffffc7; font-weight: bold; }
#sidr .newsium-widget { border-top: 1px dotted #fff; }
#sidr .newsium-widget.widget_nav_menu { border-top: 0; }

.aft-blocks.aft-main-banner-section { margin-bottom: 10px; }
.af-trending-news-part > .af-main-banner-trending-posts.trending-posts > .section-wrapper {
  height: 335px;
  overflow: hidden;
}
.main-header { background-color: #202020; }

/* ---------------------------------------------------------------------
   Brief III.A(2) / IX.C – Compact brand bar, logo, menu and buttons
   Change the two numbers below to make the logo bigger or smaller.
   The logo keeps its original proportions (only height is set).
   --------------------------------------------------------------------- */
:root {
  --gb-logo-h: 72px;          /* desktop logo height (was 145px) */
  --gb-logo-h-mobile: 44px;   /* mobile logo height */
  --gb-gutter: 16px;          /* side padding of full-width sections */
  --gb-gutter-mobile: 12px;
  --gb-text-col: 46rem;       /* readable article text column (~736px) */
}

/* Top bar (date + social icons): 40px -> ~32px */
.header-style1 .top-header { padding: 3px 0; }
.top-bar-flex { min-height: 26px; }
.top-header .aft-small-social-menu ul li a {
  width: 26px;
  height: 26px;
  line-height: 26px;
}

/* Brand bar: was 155px tall */
.main-header > .container-wrapper > .af-flex-container { padding: 8px 0; }
.main-header .logo-brand img.custom-logo {
  width: auto;                    /* keeps the supplied proportions */
  height: var(--gb-logo-h);
  max-height: var(--gb-logo-h);
}
.main-header .site-branding .custom-logo-link { display: inline-block; line-height: 0; }

/* Main menu bar (desktop only – the mobile menu keeps theme spacing) */
@media (min-width: 991px) {
  #primary-menu > li { padding: 10px 14px; }
  #primary-menu > li > a { font-size: 14px; line-height: 18px; }
  #primary-menu .sub-menu li a { padding: 10px 14px; font-size: 14px; }
  .aft-home-icon { min-height: 40px; padding: 11px 12px; }
}
.aft-home-icon a { font-size: 18px; }

/* Header buttons: search, popular-tags (fire) and scroll-to-top */
.header-style1 .header-right-part > div.popular-tags-dropdown > a {
  width: 28px;
  height: 28px;
  line-height: 28px;
}
#scroll-up {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 22px;
}
.wp-block-search__button { padding: 6px 14px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Brief III.A(3) / IX.C – Remove the gap between menu and Latest ticker
   (it came from "margin-top: 10px" in the old Additional CSS and
   "margin: 20px 0 15px" in the theme)
   --------------------------------------------------------------------- */
.banner-exclusive-posts-wrapper { margin-top: 0; margin-bottom: 10px; }
.aft-main-banner-wrapper.aft-add-gaps-between { margin-top: 0 !important; }

/* ---------------------------------------------------------------------
   Brief III.A(3) – Full-width sections, no wide side gutters
   The theme caps every .container-wrapper at 1500px with 25px padding.
   --------------------------------------------------------------------- */
.container-wrapper {
  max-width: 100%;
  padding-left: var(--gb-gutter);
  padding-right: var(--gb-gutter);
}
@media (max-width: 768px) {
  .af-main-banner-boxed,
  .container-wrapper {
    padding-left: var(--gb-gutter-mobile);
    padding-right: var(--gb-gutter-mobile);
  }
}
/* Never allow sideways scrolling on phones ("clip" keeps sticky elements working) */
body { overflow-x: clip; }

/* Readable text column on articles and pages (title/image stay wide) */
body.single .entry-content.read-details {
  max-width: var(--gb-text-col);
  margin-left: auto;
  margin-right: auto;
}
body.page:not(.home) .entry-content > :is(p, ul, ol, h2, h3, h4, blockquote) {
  max-width: var(--gb-text-col);
}
body.single .entry-content.read-details img { max-width: 100%; height: auto; }
body.single .entry-content.read-details iframe { max-width: 100%; }
body.single .entry-content.read-details iframe[src*="youtube"],
body.single .entry-content.read-details iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---------------------------------------------------------------------
   Mobile header
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
  .main-header .logo-brand img.custom-logo {
    height: var(--gb-logo-h-mobile);
    max-height: var(--gb-logo-h-mobile);
  }
  .main-header > .container-wrapper > .af-flex-container { padding: 6px 0; }
  .main-header .col-66 { display: none; }   /* empty header-ad column */
}

/* ---------------------------------------------------------------------
   Brief III.C(6) – Current social icons (Facebook, YouTube, Instagram, X)
   Uses Font Awesome 6 Brands (loaded by functions.php). Works for the
   top-bar icons (.aft-small-social-menu) and the "Social" widget
   (.social-widget-menu).
   --------------------------------------------------------------------- */
.aft-small-social-menu ul a[href*="facebook.com"]:after,
.aft-small-social-menu ul a[href*="youtube.com"]:after,
.aft-small-social-menu ul a[href*="instagram.com"]:after,
.aft-small-social-menu ul a[href*="//x.com"]:after,
.aft-small-social-menu ul a[href*="twitter.com"]:after,
.social-widget-menu ul a[href*="facebook.com"]:before,
.social-widget-menu ul a[href*="youtube.com"]:before,
.social-widget-menu ul a[href*="instagram.com"]:before,
.social-widget-menu ul a[href*="//x.com"]:before,
.social-widget-menu ul a[href*="twitter.com"]:before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  font-style: normal;
}
.aft-small-social-menu ul a[href*="facebook.com"]:after,
.social-widget-menu ul a[href*="facebook.com"]:before { content: "\f39e"; }
.aft-small-social-menu ul a[href*="youtube.com"]:after,
.social-widget-menu ul a[href*="youtube.com"]:before { content: "\f167"; }
.aft-small-social-menu ul a[href*="instagram.com"]:after,
.social-widget-menu ul a[href*="instagram.com"]:before { content: "\f16d"; }
.aft-small-social-menu ul a[href*="//x.com"]:after,
.aft-small-social-menu ul a[href*="twitter.com"]:after,
.social-widget-menu ul a[href*="//x.com"]:before,
.social-widget-menu ul a[href*="twitter.com"]:before { content: "\e61b"; }

/* X brand colour (black) instead of the old Twitter blue */
.em-author-details ul li a[href*="//x.com"],
.social-widget-menu ul li a[href*="//x.com"],
.aft-small-social-menu ul li a[href*="//x.com"],
.em-author-details ul li a[href*="twitter.com"],
.social-widget-menu ul li a[href*="twitter.com"],
.aft-small-social-menu ul li a[href*="twitter.com"] { color: #000; }
.sidebar-area .social-widget-menu ul li a[href*="//x.com"],
.sidebar-area .social-widget-menu ul li a[href*="twitter.com"] {
  background-color: #000;
  color: #fff;
}

/* ---------------------------------------------------------------------
   Brief III.E – Search & filter form ([greybn_search] shortcode)
   --------------------------------------------------------------------- */
.greybn-search {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
  padding: 14px;
  background: #fff;
  border-top: 3px solid #c30010;
}
.greybn-search .gb-field { display: flex; flex-direction: column; gap: 4px; }
.greybn-search .gb-field--keyword { grid-column: 1 / -1; }
.greybn-search label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: #404040; }
.greybn-search input[type="search"],
.greybn-search select {
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 15px;
}
.greybn-search .gb-actions { display: flex; gap: 8px; align-items: end; }
.greybn-search button,
.greybn-search .gb-reset {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  background: #c30010;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.greybn-search .gb-reset { background: #404040; display: inline-flex; align-items: center; text-decoration: none; }

/* ---------------------------------------------------------------------
   Brief III.D(2) – Source / attribution box under articles
   --------------------------------------------------------------------- */
.greybn-source-box {
  margin: 24px 0;
  padding: 12px 16px;
  border-left: 4px solid #c30010;
  background: #f5f5f5;
  font-size: 14px;
  line-height: 1.5;
}
.greybn-source-box p { margin: 0; }
.greybn-media-embed { margin: 0 0 24px; }
.greybn-media-embed iframe { width: 100%; }

/* ---------------------------------------------------------------------
   Brief III.H / IX.M – GREY Factor information page blocks
   --------------------------------------------------------------------- */
.gf-hero { padding: 32px 24px; background: #202020; color: #fff; }
.gf-hero h2 { margin: 0 0 8px; color: #fff; }
.gf-hero p { max-width: 46rem; margin: 0; color: #ddd; }
.gf-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
.gf-module { padding: 18px; background: #fff; border-top: 3px solid #c30010; }
.gf-module h3 { margin: 0 0 6px; font-size: 18px; }
.gf-module p { margin: 0; font-size: 15px; }
.gf-cta { display: inline-block; margin-top: 16px; padding: 10px 18px; background: #c30010; color: #fff !important; font-weight: 700; text-decoration: none; }

/* ---------------------------------------------------------------------
   Contributors list ([greybn_contributors] shortcode)
   --------------------------------------------------------------------- */
.greybn-contributors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.greybn-contributor { padding: 16px; background: #fff; text-align: center; }
.greybn-contributor img { border-radius: 50%; margin: 0 auto 8px; }
.greybn-contributor h3 { margin: 0 0 4px; font-size: 17px; }
.greybn-contributor p { margin: 0 0 8px; font-size: 14px; }

/* ---------------------------------------------------------------------
   Brief III.J(3) – Accessibility: visible keyboard focus
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid #ff9800;
  outline-offset: 2px;
}