/*
Theme Name: hubAfrika.Co.Ke Complete
Theme URI: https://hubafrika.co.ke/
Author: hubAfrika.Co.Ke
Description: hubAfrika.Co.Ke news website converted from the supplied HTML design.
Version: 1.1.0
Text Domain: hubafrika
*/

/* =========================================================
   HUBAFRIKA.CO.KE — COMPLETE RESPONSIVE STYLES
   ========================================================= */

:root{
  --red:#ff4f12;
  --dark:#1a1a1a;
  --gray-text:#4a4a4a;
  --light-gray:#f4f4f4;
  --border:#e2e2e2;
  --link:#0b57d0;
  --sidebar-bg:#fafafa;

  --font-head:Georgia, 'Times New Roman', serif;
  --font-body:Arial, Helvetica, sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  width:100%;
  overflow-x:hidden;
}

body{
  width:100%;
  margin:0;
  padding:0;

  font-family:var(--font-body);
  color:var(--dark);
  background:#fff;
  line-height:1.4;

  overflow-x:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.placeholder-img{
  width:100%;
  aspect-ratio:16/10;

  background:linear-gradient(
    135deg,
    #d7d7d7,
    #eeeeee
  );

  display:flex;
  align-items:center;
  justify-content:center;

  color:#999;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;

  overflow:hidden;
}

.placeholder-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}


/* =========================================================
   MAIN SITE WIDTH
   ========================================================= */

.wrap{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  /*
   IMPORTANT:
   No horizontal padding here.
   Individual sections control their own spacing.
  */
  padding:0;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  background:#071c3c;
  color:#fff;

  font-size:12px;

  padding:4px 0;
}

.topbar .wrap{
  width:100%;
  max-width:none;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:0 16px;
}


/* =========================================================
   ALERT BAR — Breaking News / News Just In
   Sits between the nav and the page content on every template.
   Only renders when the "breaking-news" or "news-just-in"
   category has a published post — see hubafrika_alert_bar().
   ========================================================= */

.alert-bar{
  width:100%;
  max-width:1180px;
  margin:0 auto;

  background:var(--red);
  border-top:1px solid rgba(0,0,0,.15);
  border-bottom:1px solid rgba(0,0,0,.15);
}

.alert-bar.is-just-in{
  background:#0a2540;
}

.alert-bar-inner{
  width:100%;
  max-width:none;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
  padding:10px 16px;
}

.alert-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#fff;
  flex-shrink:0;
  animation:hubafrikaAlertPulse 1.4s ease-in-out infinite;
}

@keyframes hubafrikaAlertPulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:.35; }
}

.alert-label{
  background:#ffdd00;
  color:#1a1a1a;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:2px;
  flex-shrink:0;
  white-space:nowrap;
}

.alert-bar.is-just-in .alert-label{
  background:#fff;
  color:#0a2540;
}

.alert-headline{
  color:#fff;
  font-weight:700;
  font-size:14.5px;
  line-height:1.35;
  text-decoration:underline;
}

.alert-headline:hover{
  color:#ffdd00;
}

.alert-bar.is-just-in .alert-headline:hover{
  color:#8fc4ff;
}

@media (max-width:520px){
  .alert-headline{
    font-size:13.5px;
  }
}


/* =========================================================
   HEADER / LOGO
   ========================================================= */

header.site-header{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  /*
   FIX:
   Removed the old 16px left/right padding.
   The logo now begins exactly at the left edge
   of the 1180px website section.
  */

  padding:14px 0;

  border-bottom:4px solid var(--red);
}

header.site-header .wrap{
  width:100%;
  max-width:none;

  padding:0;
}

.brand{
  display:inline-flex;
  align-items:center;
}

.brand img{
  height:64px;
  width:auto;

  object-fit:contain;
  display:block;
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

nav.main-nav{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  background:var(--red);
}

nav.main-nav .wrap{
  width:100%;
  max-width:none;

  padding:0;
}

nav.main-nav ul{
  display:flex;

  list-style:none;
  flex-wrap:wrap;

  /*
   Navigation itself keeps its 16px breathing room.
  */
  padding:0 16px;

  margin:0;
}

nav.main-nav a{
  display:block;

  padding:10px 16px;

  color:#fff;

  font-size:13px;
  font-weight:600;

  text-transform:uppercase;
  letter-spacing:.03em;

  white-space:nowrap;
}

nav.main-nav a:hover{
  background:rgba(0,0,0,.15);
}


/* =========================================================
   MAIN CONTENT LAYOUT
   ========================================================= */

.content-area{
  display:grid;

  grid-template-columns:2.1fr 1fr;

  gap:28px;

  padding:24px 0 40px;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.section-title{
  display:flex;

  align-items:center;

  gap:14px;

  font-family:var(--font-body);

  font-size:15px;

  font-weight:bold;

  letter-spacing:.06em;

  text-transform:uppercase;

  color:var(--red);

  margin-bottom:18px;
}

.section-title::before,
.section-title::after{
  content:"";

  flex:1;

  height:1px;

  background:var(--red);
}


/* =========================================================
   ARTICLE LIST
   ========================================================= */

.article{
  display:grid;

  grid-template-columns:300px 1fr;

  gap:14px;

  padding:16px 0;

  border-bottom:1px solid var(--border);
}

.article:first-child{
  padding-top:0;
}

.article .placeholder-img{
  aspect-ratio:2/1;

  border-radius:2px;
}

.article .meta{
  font-size:11px;

  color:var(--red);

  text-transform:uppercase;

  font-weight:bold;

  letter-spacing:.03em;

  margin-bottom:4px;
}

.article .meta .byline{
  color:#999;

  font-weight:normal;

  text-transform:none;

  margin-left:6px;
}

.article h3{
  font-family:var(--font-head);

  font-size:18px;

  line-height:1.25;

  margin-bottom:6px;
}

.article h3 a:hover{
  color:var(--red);
}

.article p.excerpt{
  font-size:13.5px;

  color:var(--gray-text);
}


/* =========================================================
   SINGLE ARTICLE HEADER
   (title, featured image + caption, byline, bold intro paragraph)
   ========================================================= */

.single-article .entry-title{
  font-family:var(--font-head);
  font-weight:700;
  font-size:28px;
  line-height:1.2;
  margin-bottom:14px;
}

.single-article .entry-featured-image{
  margin-bottom:12px;
}

.single-article .entry-featured-image-frame{
  aspect-ratio:16/8;
  overflow:hidden;
  border-radius:2px;
  background:linear-gradient(135deg,#d7d7d7,#eeeeee);
}

.single-article .entry-featured-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.single-article .entry-featured-image figcaption{
  font-size:12.5px;
  color:var(--gray-text);
  font-style:italic;
  margin-top:6px;
  line-height:1.4;
}

.single-article .byline-box{
  margin-top:10px;
  margin-bottom:18px;
}

.single-article .entry-intro{
  font-family:var(--font-body);
  font-weight:700;
  font-size:16.5px;
  line-height:1.6;
  color:var(--dark);
  margin-bottom:20px;
}


/* =========================================================
   SINGLE ARTICLE BODY
   (fixes cramped paragraphs + forces consistent fonts/colors
   even when text is pasted in from Word/Google Docs/other sites)
   ========================================================= */

.single-post .featured-story .excerpt,
.single-post .featured-story .excerpt *{
  font-family:var(--font-body) !important;
  color:var(--dark) !important;
  background:transparent !important;
}

.single-post .featured-story .excerpt{
  font-size:16px;
  line-height:1.75;
}

.single-post .featured-story .excerpt p{
  margin-bottom:18px !important;
}

.single-post .featured-story .excerpt p:last-child{
  margin-bottom:0 !important;
}

.single-post .featured-story .excerpt h2,
.single-post .featured-story .excerpt h3{
  font-family:var(--font-head) !important;
  line-height:1.3;
  margin:26px 0 12px !important;
}

.single-post .featured-story .excerpt h2{ font-size:22px; }
.single-post .featured-story .excerpt h3{ font-size:19px; }

.single-post .featured-story .excerpt strong{
  font-weight:700 !important;
}

.single-post .featured-story .excerpt a{
  color:var(--link) !important;
  text-decoration:underline;
}

.single-post .featured-story .excerpt figure{
  margin:24px auto !important;
  max-width:100%;
  text-align:center;
}

.single-post .featured-story .excerpt img{
  max-width:100%;
  height:auto;
  border-radius:2px;
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
}

.single-post .featured-story .excerpt figcaption,
.single-post .featured-story .excerpt .wp-caption-text,
.single-post .featured-story .excerpt .wp-caption-dd{
  display:block !important;
  font-size:12.5px !important;
  color:var(--gray-text) !important;
  font-style:italic !important;
  text-align:center !important;
  margin-top:8px !important;
  line-height:1.4;
}

.single-post .featured-story .excerpt .wp-caption{
  margin:24px auto !important;
  max-width:100% !important;
  text-align:center;
}

.single-post .featured-story .excerpt .wp-caption img{
  margin-bottom:0 !important;
}

.single-post .featured-story .excerpt .aligncenter{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;
  float:none !important;
}

.single-post .featured-story .excerpt hr{
  border:none;
  border-top:1px solid var(--border);
  margin:28px 0 !important;
}

.single-post .featured-story .excerpt blockquote{
  border-left:3px solid var(--red);
  padding:4px 0 4px 16px !important;
  margin:20px 0 !important;
  font-style:italic;
  color:var(--gray-text) !important;
}


/* =========================================================
   FEATURED BIG STORY
   ========================================================= */

.featured-story{
  margin-bottom:20px;
}

.featured-story .placeholder-img{
  aspect-ratio:16/8;

  border-radius:2px;

  margin-bottom:12px;
}

.featured-story h2{
  font-family:var(--font-head);

  font-size:26px;

  line-height:1.2;

  margin-bottom:8px;
}

.featured-story .meta{
  font-size:11px;

  color:var(--red);

  font-weight:bold;

  text-transform:uppercase;

  margin-bottom:6px;
}

.featured-story p.excerpt{
  color:var(--gray-text);

  font-size:14.5px;
}


/* =========================================================
   BYLINE / DATE BOX
   ========================================================= */

.byline-box{
  display:inline-flex;

  align-items:stretch;

  border:1px solid #cfcfcf;

  border-radius:2px;

  overflow:hidden;

  font-size:11px;

  font-weight:bold;

  letter-spacing:.02em;

  margin-bottom:12px;

  max-width:100%;
}

.byline-box .date{
  background:#071c3c;

  color:#fff;

  padding:6px 12px;

  text-transform:uppercase;

  white-space:nowrap;
}

.byline-box .author{
  background:#eceef0;

  color:#4a4a4a;

  padding:6px 12px;

  text-transform:uppercase;

  white-space:nowrap;
}

.byline-box.compact{
  margin-bottom:0;

  font-size:10px;
}

.byline-box.compact .date,
.byline-box.compact .author{
  padding:4px 9px;
}


/* =========================================================
   TWO-UP NEWS
   ========================================================= */

.news-pair{
  display:grid;

  grid-template-columns:1fr 1fr;

  gap:22px;

  padding:18px 0 26px;

  border-top:1px solid var(--border);
}

.news-pair .news-card .placeholder-img{
  aspect-ratio:16/10;

  border-radius:2px;

  margin-bottom:10px;
}

.news-pair .news-card h3{
  font-family:var(--font-head);

  font-size:16px;

  line-height:1.3;

  margin-bottom:8px;
}

.news-pair .news-card h3 a:hover{
  color:var(--red);
}


/* =========================================================
   FEATURED SPOTLIGHT
   ========================================================= */

.title-plain{
  font-family:var(--font-body);

  font-size:22px;

  font-weight:800;

  color:#FF5F1F;

  border-bottom:3px solid #FF5F1F;

  padding-bottom:8px;

  margin-bottom:16px;
}

.featured-single{
  background:#f2f2f2;

  padding:18px;

  display:grid;

  grid-template-columns:250px 1fr;

  gap:20px;

  align-items:start;

  margin-bottom:8px;
}

.featured-single .placeholder-img{
  aspect-ratio:4/3;

  border-radius:2px;
}

.featured-single .byline-label{
  display:inline-block;

  background:#e4e4e4;

  border:1px solid #ccc;

  color:#666;

  font-size:10.5px;

  font-weight:bold;

  text-transform:uppercase;

  letter-spacing:.03em;

  padding:3px 9px;

  margin-bottom:10px;
}

.featured-single h3{
  font-family:var(--font-head);

  font-size:20px;

  line-height:1.25;

  margin-bottom:8px;
}

.featured-single h3 a:hover{
  color:var(--red);
}

.featured-single p.excerpt{
  font-size:13.5px;

  color:var(--gray-text);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

aside.sidebar{
  background:var(--sidebar-bg);
}

.widget{
  background:#fff;

  border:1px solid var(--border);

  padding:16px;

  margin-bottom:20px;
}

.widget h4{
  display:flex;

  align-items:center;

  gap:10px;

  font-family:var(--font-body);

  font-size:13px;

  font-weight:bold;

  margin-bottom:14px;

  text-transform:uppercase;

  letter-spacing:.06em;

  color:var(--red);
}

.widget h4::before,
.widget h4::after{
  content:"";

  flex:1;

  height:1px;

  background:var(--red);
}


/* =========================================================
   SEARCH
   ========================================================= */

.search-box{
  display:flex;

  width:100%;

  border:1px solid #ccc;

  border-radius:3px;

  overflow:hidden;
}

.search-box input{
  flex:1;

  min-width:0;

  border:none;

  padding:8px 10px;

  font-size:13px;

  outline:none;
}

.search-box button{
  background:var(--red);

  color:#fff;

  border:none;

  padding:0 14px;

  cursor:pointer;

  font-size:14px;
}


/* =========================================================
   TV / AD BOX
   ========================================================= */

.tv-ad{
  background:linear-gradient(
    160deg,
    #0a2540,
    #123a63
  );

  color:#fff;

  padding:18px;

  text-align:center;

  border-radius:4px;

  margin-top:14px;
}

.tv-ad .tag{
  display:inline-block;

  font-size:10px;

  background:#fff;

  color:#0a2540;

  padding:2px 8px;

  border-radius:2px;

  font-weight:bold;

  margin-bottom:8px;
}

.tv-ad h5{
  font-size:15px;

  margin-bottom:4px;
}

.tv-ad p{
  font-size:11px;

  opacity:.8;

  margin-bottom:12px;
}

.tv-ad .watch-btn{
  display:inline-block;

  background:var(--red);

  padding:6px 16px;

  border-radius:20px;

  font-size:11px;

  font-weight:bold;
}


/* =========================================================
   POPULAR NEWS
   ========================================================= */

.ranked-list{
  list-style:none;

  counter-reset:rank;
}

.ranked-list li{
  display:flex;

  gap:10px;

  padding:10px 0;

  border-bottom:1px solid var(--border);

  align-items:flex-start;
}

.ranked-list li:last-child{
  border-bottom:none;

  padding-bottom:0;
}

.ranked-list .num{
  font-family:var(--font-head);

  font-size:20px;

  font-weight:bold;

  color:#141212;

  line-height:1;

  min-width:20px;
}

.ranked-list a{
  font-size:13.5px;

  font-weight:600;

  line-height:1.35;
}

.ranked-list a:hover{
  color:var(--red);
}


/* =========================================================
   PAGINATION
   ========================================================= */

.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;

  padding:24px 0 40px;
}

.pagination-label{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:bold;
  color:var(--dark);
}

.pagination-prev,
.pagination-next{
  width:34px;
  height:34px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:var(--red);
  color:#fff;
  font-size:18px;
  line-height:1;
  text-decoration:none;
  flex-shrink:0;
}

.pagination-prev:hover,
.pagination-next:hover{
  background:#0a2540;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer.site-footer{
  width:100%;
  max-width:1180px;

  margin:0 auto;

  background:#071c3c;

  color:#ccc;

  padding:24px 0;

  text-align:center;

  font-size:12.5px;
}

footer.site-footer .links{
  display:flex;

  justify-content:center;

  gap:18px;

  flex-wrap:wrap;

  margin-bottom:10px;
}

footer.site-footer a:hover{
  color:#fff;
}


/* =========================================================
   FOOTER — SOCIAL ICONS
   Sits below the copyright line inside the dark navy footer,
   so icons use light colors to stay visible on that background.
   ========================================================= */

footer.site-footer .social-links{
  display:flex;

  justify-content:center;

  align-items:center;

  gap:16px;

  flex-wrap:wrap;

  margin-top:14px;
}

footer.site-footer .social-links a{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  width:32px;

  height:32px;

  border-radius:50%;

  background:rgba(255,255,255,.08);

  color:#ccc;

  transition:background .2s ease, color .2s ease;
}

footer.site-footer .social-links a:hover{
  background:var(--red);

  color:#fff;
}

footer.site-footer .social-links svg{
  width:16px;

  height:16px;
}


/* =========================================================
   TABLET
   861px AND BELOW
   ========================================================= */

@media (max-width:860px){

  .content-area{
    grid-template-columns:1fr;

    gap:20px;

    padding-left:16px;
    padding-right:16px;
  }

  .brand img{
    height:52px;
  }

  .article{
    grid-template-columns:220px 1fr;
  }

  .article h3{
    font-size:15px;
  }

  .featured-single{
    grid-template-columns:200px 1fr;
  }

}


/* =========================================================
   LARGE PHONES
   681px — 860px
   ========================================================= */

@media (max-width:680px){

  header.site-header{
    padding:10px 0;

    border-bottom-width:3px;
  }

  .brand img{
    height:48px;
  }


  /* Navigation */

  nav.main-nav ul{
    padding:0;

    justify-content:flex-start;
  }

  nav.main-nav a{
    padding:9px 11px;

    font-size:11px;
  }


  /* Breaking News */

  .breaking-news .wrap{
    padding:7px 0;

    gap:8px;
  }

  .breaking-badge{
    padding:9px 11px;

    font-size:9px;
  }

  .breaking-headline{
    font-size:11px;
  }


  /* Main Content */

  .content-area{
    grid-template-columns:1fr;

    padding:18px 12px 30px;

    gap:20px;
  }


  /* Two columns become one */

  .news-pair{
    grid-template-columns:1fr;

    gap:20px;

    padding:16px 0 20px;
  }


  /* Featured block becomes vertical */

  .featured-single{
    grid-template-columns:1fr;

    padding:14px;

    gap:14px;
  }

  .featured-single .placeholder-img{
    aspect-ratio:16/9;
  }


  /* Hero */

  .featured-story h2{
    font-size:23px;
  }


  /* Byline */

  .byline-box{
    display:flex;

    flex-wrap:wrap;

    width:max-content;

    max-width:100%;
  }

  .byline-box .date,
  .byline-box .author{
    white-space:normal;
  }


  /* Sidebar */

  aside.sidebar{
    width:100%;
  }

}


/* =========================================================
   MEDIUM PHONES
   481px — 600px
   ========================================================= */

@media (max-width:600px){

  .topbar{
    font-size:10px;
  }

  .topbar .wrap{
    padding:0 10px;

    gap:8px;
  }


  /* Navigation */

  nav.main-nav ul{
    display:grid;

    grid-template-columns:repeat(2,1fr);

    width:100%;
  }

  nav.main-nav a{
    text-align:center;

    padding:10px 5px;

    font-size:10px;
  }


  /* Breaking News */

  .breaking-news .wrap{
    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 0;
  }

  .breaking-badge{
    padding:8px 10px;

    font-size:8px;
  }

  .breaking-headline{
    font-size:10px;
  }


  /* Main */

  .content-area{
    padding-left:10px;

    padding-right:10px;
  }


  /* Section headings */

  .section-title{
    font-size:13px;

    gap:8px;

    margin-bottom:14px;
  }


  /* Hero */

  .featured-story h2{
    font-size:21px;
  }

  .featured-story p.excerpt{
    font-size:13px;
  }


  /* Article */

  .article{
    grid-template-columns:190px 1fr;

    gap:10px;
  }

  .article h3{
    font-size:14px;
  }

  .article p.excerpt{
    font-size:12px;
  }


  /* News cards */

  .news-pair .news-card h3{
    font-size:16px;
  }


  /* Byline */

  .byline-box{
    font-size:9px;
  }

  .byline-box .date,
  .byline-box .author{
    padding:4px 7px;
  }


  /* Widgets */

  .widget{
    padding:13px;
  }

  .widget h4{
    font-size:12px;
  }


  /* Sidebar Featured */

  .featured-mini .placeholder-img{
    width:55px;

    height:55px;
  }

  .featured-mini a{
    font-size:12px;
  }


  /* Footer */

  footer.site-footer{
    padding:20px 10px;
  }

  footer.site-footer .links{
    gap:12px;
  }

  footer.site-footer .social-links{
    gap:12px;

    margin-top:12px;
  }

  footer.site-footer .social-links a{
    width:29px;

    height:29px;
  }

  footer.site-footer .social-links svg{
    width:15px;

    height:15px;
  }

}


/* =========================================================
   SMALL PHONES
   381px — 480px
   ========================================================= */

@media (max-width:480px){

  /* Top Bar */

  .topbar{
    padding:3px 0;

    font-size:9px;
  }

  .topbar .wrap{
    padding:0 8px;
  }

  .topbar .wrap span:last-child{
    font-size:8px;
  }


  /* Logo */

  header.site-header{
    padding:9px 0;
  }

  .brand img{
    height:44px;
  }


  /* Navigation */

  nav.main-nav ul{
    grid-template-columns:repeat(2,1fr);
  }

  nav.main-nav a{
    padding:10px 4px;

    font-size:9px;

    letter-spacing:.02em;
  }


  /* Breaking News */

  .breaking-news .wrap{
    padding:7px 0;

    gap:6px;
  }

  .breaking-badge{
    padding:8px 8px;

    font-size:7.5px;

    letter-spacing:.03em;
  }

  .breaking-headline{
    font-size:9px;
  }


  /* Main content */

  .content-area{
    padding:16px 8px 25px;
  }


  /* Section titles */

  .section-title{
    font-size:12px;

    gap:7px;
  }


  /* Hero */

  .featured-story h2{
    font-size:20px;
  }


  /* Article */

  .article{
    grid-template-columns:175px 1fr;

    gap:9px;
  }

  .article h3{
    font-size:13px;
  }

  .article p.excerpt{
    font-size:11.5px;
  }


  /* News cards */

  .news-pair .news-card h3{
    font-size:15px;
  }


  /* Byline */

  .byline-box{
    width:100%;

    display:flex;
  }

  .byline-box .date,
  .byline-box .author{
    font-size:8px;

    padding:4px 6px;
  }


  /* Featured block */

  .featured-single{
    padding:12px;
  }

  .featured-single h3{
    font-size:18px;
  }

  .featured-single p.excerpt{
    font-size:12px;
  }


  /* Sidebar */

  .widget{
    padding:11px;
  }

}


/* =========================================================
   VERY SMALL PHONES
   331px — 380px
   ========================================================= */

@media (max-width:380px){

  /* Top bar */

  .topbar{
    padding:3px 0;

    font-size:9px;
  }

  .topbar .wrap{
    padding:0 5px;
  }

  /*
   Hide the right-side top links on very small phones.
   This prevents crowding.
  */

  .topbar .wrap span:last-child{
    display:none;
  }


  /* Logo */

  header.site-header{
    padding:8px 0;
  }

  .brand img{
    height:40px;
  }


  /* Navigation */

  nav.main-nav ul{
    grid-template-columns:repeat(2,1fr);
  }

  nav.main-nav a{
    padding:9px 3px;

    font-size:8.5px;

    letter-spacing:.01em;
  }


  /* Breaking news */

  .breaking-news .wrap{
    padding:6px 0;

    gap:5px;
  }

  .breaking-badge{
    padding:7px 7px;

    font-size:7px;

    letter-spacing:.01em;
  }

  .breaking-headline{
    font-size:8.5px;
  }


  /* Content */

  .content-area{
    padding-left:7px;

    padding-right:7px;
  }


  /* Hero */

  .featured-story h2{
    font-size:19px;
  }

  .featured-story p.excerpt{
    font-size:12px;
  }


  /* Articles */

  .article{
    grid-template-columns:155px 1fr;

    gap:8px;
  }

  .article h3{
    font-size:12.5px;
  }

  .article p.excerpt{
    font-size:11px;
  }


  /* Byline */

  .byline-box .date,
  .byline-box .author{
    font-size:7.5px;

    padding:4px 5px;
  }


  /* Sidebar */

  .widget{
    padding:10px;
  }

}


/* =========================================================
   EXTRA SMALL PHONES
   330px AND BELOW
   ========================================================= */

@media (max-width:330px){

  /* Logo */

  .brand img{
    height:36px;
  }


  /* Navigation */

  nav.main-nav a{
    font-size:8px;

    padding:8px 2px;
  }


  /* Breaking news */

  .breaking-badge{
    font-size:6.5px;

    padding:7px 5px;
  }

  .breaking-headline{
    font-size:8px;
  }


  /* Hero */

  .featured-story h2{
    font-size:18px;
  }


  /* Article */

  .article{
    grid-template-columns:140px 1fr;

    gap:8px;
  }

  .article h3{
    font-size:12px;
  }


  /* Byline */

  .byline-box{
    width:100%;
  }

  .byline-box .date,
  .byline-box .author{
    font-size:7px;

    padding:4px;
  }

}


/* =========================================================
   TOUCH / MOBILE ACCESSIBILITY
   ========================================================= */

button,
a{
  -webkit-tap-highlight-color:transparent;
}

button{
  touch-action:manipulation;
}


/* =========================================================
   TOUCH DEVICES
   ========================================================= */

@media (hover:none){

  nav.main-nav a:hover,
  .breaking-headline:hover,
  .article h3 a:hover,
  .news-pair .news-card h3 a:hover,
  .featured-single h3 a:hover,
  .ranked-list a:hover,
  .featured-mini a:hover{
    color:inherit;
  }

}


/* =========================================================
   MOBILE HAMBURGER MENU — ADDED TO HOMEPAGE
   Same mobile menu behaviour as the mobile-friendly page
   ========================================================= */

.menu-toggle{
  display:none;
  width:100%;
  border:0;
  background:transparent;
  color:#fff;
  font:700 14px/1 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:12px 16px;
  text-align:left;
  cursor:pointer;
}

.menu-toggle .menu-icon{
  display:inline-block;
  font-size:20px;
  line-height:1;
  vertical-align:-2px;
  margin-right:8px;
}

@media (max-width:860px){

  /* Center the logo on mobile */
  header.site-header .wrap{
    display:flex;
    justify-content:center;
    align-items:center;
  }

  .brand{
    width:100%;
    justify-content:center;
  }

  nav.main-nav .wrap{
    padding:0;
  }

  .menu-toggle{
    display:block;
  }

  nav.main-nav ul{
    display:none;
    flex-direction:column;
    flex-wrap:nowrap;
    width:100%;
    padding:0;
    margin:0;
  }

  nav.main-nav ul.is-open{
    display:flex;
  }

  nav.main-nav li{
    width:100%;
    border-top:1px solid rgba(255,255,255,.16);
  }

  nav.main-nav a{
    width:100%;
    min-height:44px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    font-size:13px;
    white-space:normal;
  }

  nav.main-nav a:hover{
    background:rgba(0,0,0,.15);
  }
}

@media (max-width:600px){
  .menu-toggle{
    padding:12px 14px;
    font-size:13px;
  }

  .menu-toggle .menu-icon{
    font-size:20px;
  }

  nav.main-nav a{
    padding:13px 14px;
    font-size:13px;
  }
}

@media (max-width:380px){
  .menu-toggle{
    padding:11px 10px;
    font-size:12px;
  }

  nav.main-nav a{
    padding:12px 10px;
    font-size:12px;
  }
}

.menu-toggle,
nav.main-nav a{
  -webkit-tap-highlight-color:transparent;
}

.menu-toggle:focus-visible{
  outline:3px solid #fff;
  outline-offset:-3px;
}

/* =========================================================
   SOCIAL SHARE ROW (auto-inserted before H2 headings)
   ========================================================= */

.social-share-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:24px 0;
}

.social-share-row .share-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:9px 16px;
  border-radius:4px;
  line-height:1;
  white-space:nowrap;
}
.social-share-row .share-btn:hover{
  opacity:.88;
}
.social-share-row .share-btn svg{flex-shrink:0;}

.share-facebook{background:#3b5998;}
.share-x{background:#000;}
.share-linkedin{background:#0a66c2;}
.share-reddit{background:#ff4500;}
.share-whatsapp{background:#25d366;}
.share-telegram{background:#229ed9;}

@media (max-width:600px){
  .social-share-row .share-btn{
    font-size:12px;
    padding:8px 12px;
  }
}